sidebar collapse functionality (#255)

* sidebar collapse functionality

* linting

Author: BryonLewis

client/dive-common/components/Viewer.vue

@@ -151,6 +151,7 @@ export default defineComponent({
     const controlsRef = ref();
     const controlsHeight = ref(0);
     const controlsCollapsed = ref(false);
+    const sideBarCollapsed = ref(false);
 
     const progressValue = computed(() => {
       if (progress.total > 0 && (progress.progress !== progress.total)) {
@@ -890,7 +891,7 @@ export default defineComponent({
       if (previous) observer.unobserve(previous.$el);
       if (controlsRef.value) observer.observe(controlsRef.value.$el);
     });
-    watch(controlsCollapsed, async () => {
+    watch([controlsCollapsed, sideBarCollapsed], async () => {
       await nextTick();
       handleResize();
     });
@@ -1006,6 +1007,7 @@ export default defineComponent({
       controlsRef,
       controlsHeight,
       controlsCollapsed,
+      sideBarCollapsed,
       colorBy,
       clientSettings,
       datasetName,
@@ -1111,6 +1113,20 @@ export default defineComponent({
       </span>
       <v-spacer />
       <template #extension>
+        <v-tooltip
+          v-if="getUISetting('UISideBar')"
+          bottom
+        >
+          <template #activator="{ on }">
+            <v-icon
+              v-on="on"
+              @click="sideBarCollapsed = !sideBarCollapsed"
+            >
+              {{ sideBarCollapsed ? 'mdi-chevron-right-box' : 'mdi-chevron-left-box' }}
+            </v-icon>
+          </template>
+          <span>Collapse Side Panel</span>
+        </v-tooltip>
         <EditorMenu
           v-if="getUISetting('UIToolBar')"
           v-bind="{
@@ -1222,7 +1238,7 @@ export default defineComponent({
       style="min-width: 700px;"
     >
       <sidebar
-        v-if="getUISetting('UISideBar')"
+        v-if="getUISetting('UISideBar') && !sideBarCollapsed"
         :enable-slot="context.state.active !== 'TypeThreshold'"
         @import-types="trackFilters.importTypes($event)"
         @track-seek="aggregateController.seek($event)"
@@ -1296,7 +1312,6 @@ export default defineComponent({
           </div>
           <ControlsContainer
             ref="controlsRef"
-            class="shrink"
             :collapsed.sync="controlsCollapsed"
             v-bind="{
               lineChartData, eventChartData, groupChartData, datasetType,

client/src/components/controls/Timeline.vue

@@ -32,6 +32,7 @@ export default {
       clientWidth: 0,
       clientHeight: 0,
       margin: 20,
+      resizeObserver: null,
     };
   },
   computed: {
@@ -97,14 +98,27 @@ export default {
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.resizeHandler);
+    if (this.resizeObserver && this.$refs.workarea) {
+      this.resizeObserver.unobserve(this.$refs.workarea);
+      this.resizeObserver.disconnect();
+    }
   },
   mounted() {
     this.initialize();
   },
   methods: {
     initialize() {
+      if (!this.$refs.workarea) {
+        return;
+      }
       const width = this.$refs.workarea?.clientWidth || 0;
       const height = this.$refs.workarea?.clientHeight || 0;
+      if (this.$refs.workarea) {
+        this.resizeObserver = new ResizeObserver(() => {
+          this.resizeHandler();
+        });
+        this.resizeObserver.observe(this.$refs.workarea);
+      }
       // clientWidth and clientHeight are properties used to resize child elements
       this.clientWidth = width - this.margin;
       // Timeline height needs to offset so it doesn't overlap the frame number

server/dive_server/crud_annotation.py

@@ -717,7 +717,7 @@ def delete_masks(
         }
     )
     if not mask_folder:
-        raise RestException("Mask folder not found in dataset.", code=404)
+        return   # mask folder doesn't exist so this can be skipped
 
     if not track_frame_pairs:
         raise RestException("No track/frame pairs provided for deletion.", code=400)