Selectors for annotation formats (#636)

* Selectors for annotation format

* Handle default value

* Dinamic accepts for upload

* Removed extra code

cvat/apps/dashboard/static/dashboard/js/dashboard.js

@@ -77,22 +77,21 @@ class TaskView {
 
     _upload(uploadAnnotationButton, format) {
         const button = $(uploadAnnotationButton);
-        $('<input type="file" accept="text/xml">').on('change', async (onChangeEvent) => {
-            const file = onChangeEvent.target.files[0];
-            $(onChangeEvent.target).remove();
-            if (file) {
-                button.text('Uploading..');
-                button.prop('disabled', true);
-                try {
-                    await this._task.annotations.upload(file, format);
-                } catch (error) {
-                    showMessage(error.message);
-                } finally {
-                    button.prop('disabled', false);
-                    button.text('Upload Annotation');
+        $(`<input type="file" accept=".${format.format}">`)
+            .on('change', async (onChangeEvent) => {
+                const file = onChangeEvent.target.files[0];
+                $(onChangeEvent.target).remove();
+                if (file) {
+                    button.prop('disabled', true);
+                    try {
+                        await this._task.annotations.upload(file, format);
+                    } catch (error) {
+                        showMessage(error.message);
+                    } finally {
+                        button.prop('disabled', false);
+                    }
                 }
-            }
-        }).click();
+            }).click();
     }
 
     async _dump(button, format) {
@@ -131,47 +130,45 @@ class TaskView {
         );
 
         const buttonsContainer = $('<div class="dashboardButtonsUI"> </div>').appendTo(this._UI);
+        const downloadButton = $('<select class="regular dashboardButtonUI"'
+            + 'style="text-align-last: center;"> Dump Annotation </select>');
+        $('<option selected disabled> Dump Annotation </option>').appendTo(downloadButton);
 
-        const downloadButton = $('<button class="regular dashboardButtonUI"> Dump Annotation </button>');
-        const dropdownDownloadMenu = $('<ul class="dropdown-content hidden"></ul>');
+        const uploadButton = $('<select class="regular dashboardButtonUI"'
+        + 'style="text-align-last: center;"> Upload Annotation </select>');
+        $('<option selected disabled> Upload Annotation </option>').appendTo(uploadButton);
 
-        const uploadButton = $('<button class="regular dashboardButtonUI"> Upload Annotation </button>');
-        const dropdownUploadMenu = $('<ul class="dropdown-content hidden"></ul>');
+        const dumpers = {};
+        const loaders = {};
 
         for (const format of this._annotationFormats) {
             for (const dumper of format.dumpers) {
-                const listItem = $(`<li>${dumper.name}</li>`).on('click', () => {
-                    dropdownDownloadMenu.addClass('hidden');
-                    this._dump(downloadButton[0], dumper);
-                });
-
+                dumpers[dumper.name] = dumper;
+                const item = $(`<option>${dumper.name}</li>`);
                 if (isDefaultFormat(dumper.name, this._task.mode)) {
-                    listItem.addClass('bold');
+                    item.addClass('bold');
                 }
-                dropdownDownloadMenu.append(listItem);
+                item.appendTo(downloadButton);
             }
 
             for (const loader of format.loaders) {
-                dropdownUploadMenu.append($(`<li>${loader.name}</li>`).on('click', () => {
-                    dropdownUploadMenu.addClass('hidden');
-                    userConfirm('The current annotation will be lost. Are you sure?', () => {
-                        this._upload(uploadButton, loader);
-                    });
-                }));
+                loaders[loader.name] = loader;
+                $(`<option>${loader.name}</li>`).appendTo(uploadButton);
             }
         }
 
-        $('<div class="dropdown"></div>').append(
-            downloadButton.on('click', () => {
-                dropdownDownloadMenu.toggleClass('hidden');
-            }),
-        ).append(dropdownDownloadMenu).appendTo(buttonsContainer);
+        downloadButton.on('change', (e) => {
+            this._dump(e.target, dumpers[e.target.value]);
+            downloadButton.prop('value', 'Dump Annotation');
+        });
 
-        $('<div class="dropdown"></div>').append(
-            uploadButton.on('click', () => {
-                dropdownUploadMenu.toggleClass('hidden');
-            }),
-        ).append(dropdownUploadMenu).appendTo(buttonsContainer);
+        uploadButton.on('change', (e) => {
+            this._upload(e.target, loaders[e.target.value]);
+            uploadButton.prop('value', 'Upload Annotation');
+        });
+
+        downloadButton.appendTo(buttonsContainer);
+        uploadButton.appendTo(buttonsContainer);
 
         $('<button class="regular dashboardButtonUI"> Update Task </button>').on('click', () => {
             this._update();

cvat/apps/engine/static/engine/js/annotationUI.js

@@ -67,16 +67,16 @@ function blurAllElements() {
 
 function uploadAnnotation(jobId, shapeCollectionModel, historyModel, annotationSaverModel,
     uploadAnnotationButton, format) {
+    $('#annotationFileSelector').attr('accept', `.${format.format}`);
     $('#annotationFileSelector').one('change', async (changedFileEvent) => {
         const file = changedFileEvent.target.files['0'];
         changedFileEvent.target.value = '';
         if (!file) return;
-        uploadAnnotationButton.text('Uploading..');
         uploadAnnotationButton.prop('disabled', true);
         const annotationData = new FormData();
         annotationData.append('annotation_file', file);
         try {
-            await uploadJobAnnotationRequest(jobId, annotationData, format);
+            await uploadJobAnnotationRequest(jobId, annotationData, format.display_name);
             historyModel.empty();
             shapeCollectionModel.empty();
             const data = await $.get(`/api/v1/jobs/${jobId}/annotations`);
@@ -87,7 +87,6 @@ function uploadAnnotation(jobId, shapeCollectionModel, historyModel, annotationS
             showMessage(error.message);
         } finally {
             uploadAnnotationButton.prop('disabled', false);
-            uploadAnnotationButton.text('Upload Annotation');
         }
     }).click();
 }
@@ -388,56 +387,59 @@ function setupMenu(job, task, shapeCollectionModel,
     $('#settingsButton').attr('title', `
         ${shortkeys.open_settings.view_value} - ${shortkeys.open_settings.description}`);
 
+    const downloadButton = $('#downloadAnnotationButton');
+    const uploadButton = $('#uploadAnnotationButton');
+
+    const loaders = {};
+
     for (const format of annotationFormats) {
-        for (const dumpSpec of format.dumpers) {
-            const listItem = $(`<li>${dumpSpec.display_name}</li>`).on('click', async () => {
-                $('#downloadAnnotationButton')[0].disabled = true;
-                $('#downloadDropdownMenu').addClass('hidden');
-                try {
-                    await dumpAnnotationRequest(task.id, task.name, dumpSpec.display_name);
-                } catch (error) {
-                    showMessage(error.message);
-                } finally {
-                    $('#downloadAnnotationButton')[0].disabled = false;
-                }
-            });
-            if (isDefaultFormat(dumpSpec.display_name, task.mode)) {
-                listItem.addClass('bold');
+        for (const dumper of format.dumpers) {
+            const item = $(`<option>${dumper.display_name}</li>`);
+
+            if (!isDefaultFormat(dumper.display_name, window.cvat.job.mode)) {
+                item.addClass('regular');
             }
-            $('#downloadDropdownMenu').append(listItem);
+
+            item.appendTo(downloadButton);
         }
 
         for (const loader of format.loaders) {
-            $(`<li>${loader.display_name}</li>`).on('click', async () => {
-                $('#uploadAnnotationButton')[0].disabled = true;
-                $('#uploadDropdownMenu').addClass('hidden');
-                try {
-                    userConfirm('Current annotation will be removed from the client. Continue?',
-                        async () => {
-                            await uploadAnnotation(
-                                job.id,
-                                shapeCollectionModel,
-                                historyModel,
-                                annotationSaverModel,
-                                $('#uploadAnnotationButton'),
-                                loader.display_name,
-                            );
-                        });
-                } catch (error) {
-                    showMessage(error.message);
-                } finally {
-                    $('#uploadAnnotationButton')[0].disabled = false;
-                }
-            }).appendTo('#uploadDropdownMenu');
+            loaders[loader.display_name] = loader;
+            $(`<option class="regular">${loader.display_name}</li>`).appendTo(uploadButton);
         }
     }
 
-    $('#downloadAnnotationButton').on('click', () => {
-        $('#downloadDropdownMenu').toggleClass('hidden');
+    downloadButton.on('change', async (e) => {
+        const dumper = e.target.value;
+        downloadButton.prop('value', 'Dump Annotation');
+        try {
+            downloadButton.prop('disabled', true);
+            await dumpAnnotationRequest(task.id, task.name, dumper);
+        } catch (error) {
+            showMessage(error.message);
+        } finally {
+            downloadButton.prop('disabled', false);
+        }
     });
 
-    $('#uploadAnnotationButton').on('click', () => {
-        $('#uploadDropdownMenu').toggleClass('hidden');
+    uploadButton.on('change', (e) => {
+        const loader = loaders[e.target.value];
+        uploadButton.prop('value', 'Upload Annotation');
+        userConfirm('Current annotation will be removed from the client. Continue?',
+            async () => {
+                try {
+                    await uploadAnnotation(
+                        job.id,
+                        shapeCollectionModel,
+                        historyModel,
+                        annotationSaverModel,
+                        $('#uploadAnnotationButton'),
+                        loader,
+                    );
+                } catch (error) {
+                    showMessage(error.message);
+                }
+            });
     });
 
     $('#removeAnnotationButton').on('click', () => {
@@ -496,6 +498,7 @@ function buildAnnotationUI(jobData, taskData, imageMetaData, annotationData, ann
             z_order: taskData.z_order,
             id: jobData.id,
             task_id: taskData.id,
+            mode: taskData.mode,
             images: imageMetaData,
         },
         search: {

cvat/apps/engine/templates/engine/annotation.html

@@ -330,14 +330,14 @@
 
     <div id="annotationMenu" class="hidden regular">
         <center style="float:left; width: 28%; height: 100%;" id="engineMenuButtons">
-            <div class="dropdown">
-                <button id="downloadAnnotationButton" class="menuButton semiBold h2"> Dump Annotation </button>
-                <ul id="downloadDropdownMenu" class="dropdown-content hidden"></ul>
-            </div>
-            <div class="dropdown">
-                <button id="uploadAnnotationButton" class="menuButton semiBold h2"> Upload Annotation </button>
-                <ul id="uploadDropdownMenu" class="dropdown-content hidden"></ul>
-            </div>
+            <select id="downloadAnnotationButton" class="menuButton semiBold h2" style="text-align-last: center;">
+                <option selected disabled> Dump Annotation </option>
+            </select>
+
+            <select id="uploadAnnotationButton" class="menuButton semiBold h2" style="text-align-last: center;">
+                    <option selected disabled> Upload Annotation </option>
+            </select>
+
             <button id="removeAnnotationButton" class="menuButton semiBold h2"> Remove Annotation </button>
             <button id="settingsButton" class="menuButton semiBold h2"> Settings </button>
             <button id="fullScreenButton" class="menuButton semiBold h2"> Fullscreen Player </button>