Request based off here: https://discourse.kitware.com/t/batch-editing-annotation-classification/1522

Goals:

• Make it easier for a user to select multiple annotations for deletion or modification of their type
• Users should be able to select multiple tracks/ remove selected tracks and be ablue to apply bulk modification to their type or to bulk delete them

Notes:

• Currently DIVE has a concept of selectedTrackId which is mostly retrieved through the use of useSelectedTrackId imported from vue-media-annotator/provides
  • this is used as selectedTrackIdRef = useSelectedTrackId() in multiple locations
  • This is initialized here: https://github.com/Kitware/dive/blob/main/client/dive-common/components/Viewer.vue#L801
• We would need another tool like this from provides for multiTrackSelectionIds

Initial Process for Adding this functionality:

• useModeManager would be updated to return back multiTrackSelectionIds and it would be an array of trackIds: https://github.com/Kitware/dive/blob/main/client/dive-common/use/useModeManager.ts
  • Within this there would have to be options for adding/removing/clearing selected multiTrackSelectionIds
  • I think it may also be useful to have a way to modify the trackTypes for all of the selectedTrackIds and a way to delete all of the multiTrackSelectionIds
• The provides in the vue-media-annotator would need another state object for multiTrackSelectionIds that would be an array of trackIds: https://github.com/Kitware/dive/blob/main/client/src/provides.ts
• The returned value from iseModeManager would have this new multiTrackSelectionIds: https://github.com/Kitware/dive/blob/main/client/dive-common/components/Viewer.vue#L238
• And this would be added to the provideAnnotator: https://github.com/Kitware/dive/blob/main/client/dive-common/components/Viewer.vue#L783
• Also update the handler inside provides to have these new functions for add/removing and chaning the type of a list of tracks.
• After this is complete any component should be able to import useMultiTrackSelectionIds from provides and use it as const multiTrackSelectionIds = useMultiTrackSelectionIds.
• All editing of the multiTrackSelectionIds will be done through useModeManager and through the handler and useHandler
• modify the annotation selection so that control+click would instead add the track to multiTrackSelectionIds and would clear out any individually selectedTrackId.
  • This needs to be done in the TrackItem listing: https://github.com/Kitware/dive/blob/main/client/src/components/TrackItem.vue#L230
  • as well as any annotation handlers for selecting tracks: https://github.com/Kitware/dive/blob/main/client/src/components/LayerManager.vue#L452-L456
  • This may have to be updated further down in the RectAnnotatioLayer, EditAnnotationLayer and PolygonAnnotationLayer.
• Now that we have multiple items selected we should change their visiblity to indicate that they are selected
  • In the annotation visibility the data passed to annotation layers should indicate is selected: https://github.com/Kitware/dive/blob/main/client/src/components/LayerManager.vue#L221
• We may need a visual tool to see a list of only the selected tracks:
  • The Context Store provides additional components on the right panel that can come up and go away depending on when needed. I would had a multiTrackSelect component to this: https://github.com/Kitware/dive/blob/main/client/dive-common/store/context.ts
  • You would then when you have more than 0 items in the multiSelect make it call context.toggle('multiTrackSelect') or whatever the registered name is. Do a search for other context.toggle calls to see it in action
  • Now this new Vue component will have at the top of it a ./src/components/TypePicker.vue with a button to set all of the selected tracks to the same Type
  • It will also have a group delete button that will delete all of the tracks and remove them from the multiTrackSelect
  • For the rows you can create your own. ./src/component/TrackItem.vue like component (it doesn't need to have all of the options, but needs to be able to at least have a button to remove it from the multiTrackSelectIds list using handler from useModeManager.