Enable bulk track selection for operations (#1506)

* Listen to ctrl click events on annotations

* Handle ctrl+click tracks

* Force sidebar into attribute view for multi tracks

* Implement multi-delete tracks

* Allow users to change type for all selected tracks

* Add additional filtering to tracks

This prevents multi track deletion from attempting to auto select a
track that no longer exists because it was included in a bulk delete
operation.

* Allow TypePicker to emit on input

* Allow skipping auto select after track removal

* Enable ctrl+click from track list in sidebar

* Enable ctrl+click from the event viewer

* Deselect selected track with second ctrl+click

* Allow deselecting individual tracks in the sidebar

* Don't use `null` as default for modifiers

* Respect `lockType` setting for new TypePicker

* Use handler instead of re-emitting select event

* Use correct type annotation for `trackId`

Co-authored-by: Bryon Lewis <61746913+BryonLewis@users.noreply.github.com>

* Swap sidebar view after deleting multiple tracks

* Use correct types ref for new type picker

Co-authored-by: Bryon Lewis <61746913+BryonLewis@users.noreply.github.com>

---------

Co-authored-by: Bryon Lewis <61746913+BryonLewis@users.noreply.github.com>

Author: naglepuff

client/dive-common/components/ControlsContainer.vue

@@ -14,7 +14,12 @@ import {
   Timeline,
 } from 'vue-media-annotator/components';
 import { clientSettings } from 'dive-common/store/settings';
-import { useAttributesFilters, useCameraStore, useSelectedCamera } from '../../src/provides';
+import {
+  useHandler,
+  useAttributesFilters,
+  useCameraStore,
+  useSelectedCamera,
+} from '../../src/provides';
 
 export default defineComponent({
   components: {
@@ -47,6 +52,7 @@ export default defineComponent({
     },
   },
   setup(_, { emit }) {
+    const handler = useHandler();
     const currentView = ref('Detections');
     const ticks = ref([0.25, 0.5, 0.75, 1.0, 2.0, 4.0, 8.0]);
     const cameraStore = useCameraStore();
@@ -104,6 +110,10 @@ export default defineComponent({
       clientSettings.timelineCountSettings.defaultView = countView.value;
     };
 
+    function handleSelectTrack(trackId: number, modifiers?: { ctrl: boolean }) {
+      handler.trackSelect(trackId, false, modifiers);
+    }
+
     const {
       maxFrame, frame, seek, volume, setVolume, setSpeed, speed,
     } = injectAggregateController().value;
@@ -127,6 +137,7 @@ export default defineComponent({
       countView,
       help,
       toggleCountView,
+      handleSelectTrack,
     };
   },
 });
@@ -429,7 +440,7 @@ export default defineComponent({
           :data="eventChartData"
           :client-width="clientWidth"
           :margin="margin"
-          @select-track="$emit('select-track', $event)"
+          @select-track="handleSelectTrack"
         />
         <event-chart
           v-if="currentView === 'Groups'"

client/dive-common/components/Sidebar.vue

@@ -4,12 +4,17 @@ import {
   defineComponent,
   reactive,
   toRef,
+  watch,
 } from 'vue';
 
 import { FilterList, TrackList } from 'vue-media-annotator/components';
 import {
   useCameraStore,
-  useHandler, useReadOnlyMode, useTrackFilters, useTrackStyleManager,
+  useHandler,
+  useReadOnlyMode,
+  useTrackFilters,
+  useTrackStyleManager,
+  useEditingMultiTrack,
 } from 'vue-media-annotator/provides';
 
 import { clientSettings } from 'dive-common/store/settings';
@@ -45,7 +50,12 @@ export default defineComponent({
     const readOnlyMode = useReadOnlyMode();
     const cameraStore = useCameraStore();
     const multiCam = cameraStore.camMap.value.size > 1;
-    const { toggleMerge, commitMerge, groupAdd } = useHandler();
+    const {
+      toggleMerge,
+      commitMerge,
+      groupAdd,
+      deleteSelectedTracks,
+    } = useHandler();
     const { visible } = usePrompt();
     const trackSettings = toRef(clientSettings, 'trackSettings');
     const typeSettings = toRef(clientSettings, 'typeSettings');
@@ -84,12 +94,26 @@ export default defineComponent({
       return trap;
     });
 
+    const editingMultiTrack = useEditingMultiTrack();
+    watch(editingMultiTrack, () => {
+      if (editingMultiTrack.value) {
+        data.currentTab = 'attributes';
+      }
+    });
+
+    async function handleDeleteSelectedTracks() {
+      await deleteSelectedTracks();
+      data.currentTab = 'attributes';
+      swapTabs();
+    }
+
     return {
       /* data */
       data,
       allTypesRef,
       commitMerge,
       groupAdd,
+      handleDeleteSelectedTracks,
       mouseTrap,
       trackFilterControls,
       trackSettings,
@@ -170,6 +194,7 @@ export default defineComponent({
           @back="swapTabs"
           @commit-merge="commitMerge"
           @create-group="groupAdd"
+          @delete-selected-tracks="handleDeleteSelectedTracks"
         />
       </v-slide-x-transition>
     </template>

client/dive-common/components/TrackDetailsPanel.vue

@@ -17,6 +17,7 @@ import {
   useReadOnlyMode,
   useTrackStyleManager,
   useEditingGroupId,
+  useEditingMultiTrack,
   useGroupFilterControls,
   useCameraStore,
   useSelectedCamera,
@@ -31,6 +32,7 @@ import AttributeInput from 'dive-common/components/Attributes/AttributeInput.vue
 import AttributeEditor from 'dive-common/components/Attributes/AttributeEditor.vue';
 import AttributeSubsection from 'dive-common/components/Attributes/AttributesSubsection.vue';
 import ConfidenceSubsection from 'dive-common/components/ConfidenceSubsection.vue';
+import { clientSettings } from 'dive-common/store/settings';
 
 export default defineComponent({
   components: {
@@ -70,6 +72,11 @@ export default defineComponent({
     const selectedCamera = useSelectedCamera();
     const { allTypes: allGroupTypesRef } = useGroupFilterControls();
     const multiSelectList = useMultiSelectList();
+    const editingMultiTrack = useEditingMultiTrack();
+    const multiTrackType: Ref<string> = ref('unknown');
+    const updateMultiTrackType = (newValue: string) => {
+      multiTrackType.value = newValue;
+    };
     const multiSelectInProgress = computed(() => multiSelectList.value.length > 0);
     const {
       trackSelectNext, trackSplit, removeTrack, unstageFromMerge,
@@ -214,12 +221,19 @@ export default defineComponent({
       ];
     });
 
+    function updateSelectedTracksType() {
+      multiSelectList.value.forEach((trackId: number) => {
+        cameraStore.setTrackType(trackId, multiTrackType.value);
+      });
+    }
+
     return {
       selectedTrackIdRef,
       editingGroupIdRef,
       editingGroup,
       readOnlyMode,
       multiCam,
+      clientSettings,
       /* Attributes */
       attributes,
       /* Editing */
@@ -233,6 +247,9 @@ export default defineComponent({
       selectedTrackList,
       multiSelectList,
       multiSelectInProgress,
+      editingMultiTrack,
+      multiTrackType,
+      updateMultiTrackType,
       /* Update functions */
       closeEditor,
       editAttribute,
@@ -248,6 +265,7 @@ export default defineComponent({
       removeGroup,
       toggleMerge,
       unstageFromMerge,
+      updateSelectedTracksType,
     };
   },
 });
@@ -495,6 +513,54 @@ export default defineComponent({
           <v-spacer />
           Abort (esc)
         </v-btn>
+        <v-btn
+          v-if="editingMultiTrack"
+          color="error"
+          class="mx-2 mb-2 grow"
+          :disabled="readOnlyMode"
+          depressed
+          x-small
+          @click="$emit('delete-selected-tracks')"
+        >
+          <v-icon
+            class="pr-1"
+            small
+          >
+            mdi-delete
+          </v-icon>
+          <v-spacer />
+          Delete selected tracks
+        </v-btn>
+        <div
+          v-if="editingMultiTrack"
+          class="d-flex justify-center align-center mb-2 mx-2"
+          width="100%"
+        >
+          <v-spacer />
+          <v-label class="mx-2">
+            Type:
+          </v-label>
+          <TypePicker
+            :value="multiTrackType"
+            :all-types="allTypesRef"
+            :read-only-mode="readOnlyMode"
+            :lock-types="clientSettings.typeSettings.lockTypes"
+            selected
+            update-on-input
+            @input="updateMultiTrackType"
+          />
+        </div>
+        <v-btn
+          class="mx-2 mb-2"
+          :disabled="readOnlyMode"
+          color="primary"
+          depressed
+          x-small
+          @click="updateSelectedTracksType"
+        >
+          <v-spacer />
+          Update type for selected tracks
+        </v-btn>
       </div>
       <confidence-subsection
         v-if="editingGroupIdRef === null"

client/dive-common/components/Viewer.vue

@@ -227,6 +227,7 @@ export default defineComponent({
       multiSelectActive,
       selectedFeatureHandle,
       selectedTrackId,
+      editingMultiTrack,
       editingGroupId,
       handler,
       editingMode,
@@ -799,6 +800,7 @@ export default defineComponent({
         selectedCamera,
         selectedKey,
         selectedTrackId,
+        editingMultiTrack,
         editingGroupId,
         time,
         trackFilters,
@@ -1146,7 +1148,6 @@ export default defineComponent({
             v-bind="{
               lineChartData, eventChartData, groupChartData, datasetType,
             }"
-            @select-track="handler.trackSelect"
           />
         </div>
         <div