Customizable Time Filters (#1550)

* linting fix

* prevent multiple tooltips from being appended

* add timeFilter for filtering based on time ranges

* add time filter button and controls

* refactor timeline component, add start/end lines and implement dragging

* swap wheel event X location reference

* time format util, change initialize function name in Timeline.vue

Author: BryonLewis

client/dive-common/components/ControlsContainer.vue

@@ -152,7 +152,7 @@ export default defineComponent({
     dense
     style="position:absolute; bottom: 0px; padding: 0px; margin:0px;"
   >
-    <Controls :is-default-image="isDefaultImage">
+    <Controls :is-default-image="isDefaultImage" :dataset-type="datasetType">
       <template slot="timelineControls">
         <div style="min-width: 270px">
           <v-tooltip
@@ -419,6 +419,7 @@ export default defineComponent({
       :max-frame="maxFrame"
       :frame="frame"
       :display="!collapsed"
+      :dataset-type="datasetType"
       @seek="seek"
     >
       <template

client/dive-common/components/MultiCamTools.vue

@@ -142,7 +142,9 @@ export default defineComponent({
           </v-row>
           <v-divider />
           <v-row align="center" justify="space-between" class="mt-4 mb-2">
-            <h3 class="mb-0">Detection:</h3>
+            <h3 class="mb-0">
+              Detection:
+            </h3>
             <div class="d-flex gap-2">
               <tooltip-btn
                 icon="mdi-star"
@@ -168,7 +170,9 @@ export default defineComponent({
           <v-divider class="my-2" />
 
           <v-row align="center" justify="space-between" class="mt-2 mb-4">
-            <h3 class="mb-0">Track:</h3>
+            <h3 class="mb-0">
+              Track:
+            </h3>
             <div class="d-flex gap-2">
               <tooltip-btn
                 color="error"

client/src/BaseFilterControls.ts

@@ -49,6 +49,9 @@ export default abstract class BaseFilterControls<T extends Track | Group> {
   /* The confidence threshold to test confidecePairs against */
   confidenceFilters: Ref<Record<string, number>>;
 
+  /* Time filtering values */
+  timeFilters: Ref<[number, number] | null>;
+
   /* The types informed by meta configuration */
   private defaultTypes: Ref<string[]>;
 
@@ -85,6 +88,8 @@ export default abstract class BaseFilterControls<T extends Track | Group> {
 
     this.confidenceFilters = ref({ default: DefaultConfidence } as Record<string, number>);
 
+    this.timeFilters = ref(null);
+
     this.defaultTypes = ref([]);
 
     this.sorted = params.sorted;
@@ -179,6 +184,10 @@ export default abstract class BaseFilterControls<T extends Track | Group> {
     }
   }
 
+  setTimeFilters(val: [number, number] | null) {
+    this.timeFilters.value = val;
+  }
+
   updateTypeName({ currentType, newType }: { currentType: string; newType: string }) {
     //Go through the entire list and replace the oldType with the new Type
     this.sorted.value.forEach((annotation) => {

client/src/TrackFilterControls.ts

@@ -43,6 +43,12 @@ export default class TrackFilterControls extends BaseFilterControls<Track> {
       const resultsArr: AnnotationWithContext<Track>[] = [];
       const resultsIds: Set<AnnotationId> = new Set();
       params.sorted.value.forEach((annotation) => {
+        if (this.timeFilters.value !== null) {
+          const [startTime, endTime] = this.timeFilters.value;
+          if (annotation.begin > endTime || annotation.end < startTime) {
+            return;
+          }
+        }
         let enabledInGroupFilters = true;
         const groups = params.lookupGroups(annotation.id);
         if (groups.length) {

client/src/components/controls/Controls.vue

@@ -1,11 +1,15 @@
 <script lang="ts">
 import {
-  defineComponent, reactive, watch, ref,
+  defineComponent, reactive, watch, ref, computed,
+  PropType,
 } from 'vue';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import context from 'dive-common/store/context';
 import { clientSettings } from 'dive-common/store/settings';
+import { DatasetType } from 'dive-common/apispec';
+import { frameToTimestamp } from 'vue-media-annotator/utils';
 import { injectAggregateController } from '../annotators/useMediaController';
+import { useTime, useTrackFilters } from '../../provides';
 
 export default defineComponent({
   name: 'Controls',
@@ -14,15 +18,24 @@ export default defineComponent({
       type: Boolean as () => boolean,
       required: true,
     },
+    datasetType: {
+      type: String as PropType<DatasetType>,
+      required: true,
+    },
+
   },
-  setup() {
+  setup(props) {
     const data = reactive({
       frame: 0,
       dragging: false,
     });
     const mediaController = injectAggregateController().value;
+    const isVideo = computed(() => props.datasetType === 'video');
+    const { frameRate } = useTime();
     const { visible } = usePrompt();
+    const trackFilters = useTrackFilters();
     const activeLockedCamera = ref(false);
+    const activeTimeFilter = ref(false);
     watch(mediaController.frame, (frame) => {
       if (!data.dragging) {
         data.frame = frame;
@@ -57,8 +70,42 @@ export default defineComponent({
       multBoundsVal.value = !!clientSettings.annotatorPreferences.lockedCamera.multiBounds;
     }, { deep: true, immediate: true });
 
+    const timeFilterActive = computed(() => trackFilters.timeFilters.value !== null);
+    const timeFilterMin = computed(() => trackFilters.timeFilters.value?.[0] ?? 0);
+    const timeFilterMax = computed(() => trackFilters.timeFilters.value?.[1] ?? mediaController.maxFrame.value);
+
+    function toggleTimeFilter() {
+      if (trackFilters.timeFilters.value === null) {
+        trackFilters.setTimeFilters([0, mediaController.maxFrame.value]);
+      } else {
+        trackFilters.setTimeFilters(null);
+      }
+    }
+
+    function updateTimeFilterMin(value: number) {
+      const current = trackFilters.timeFilters.value;
+      if (current) {
+        trackFilters.setTimeFilters([value, current[1]]);
+      }
+    }
+
+    function updateTimeFilterMax(value: number) {
+      const current = trackFilters.timeFilters.value;
+      if (current) {
+        trackFilters.setTimeFilters([current[0], value]);
+      }
+    }
+
+    function formatTimestamp(frame: number) {
+      if (!isVideo.value || !frameRate.value) {
+        return null;
+      }
+      return frameToTimestamp(frame, frameRate.value);
+    }
+
     return {
       activeLockedCamera,
+      activeTimeFilter,
       data,
       mediaController,
       dragHandler,
@@ -69,6 +116,15 @@ export default defineComponent({
       clientSettings,
       transitionVal,
       multBoundsVal,
+      trackFilters,
+      timeFilterActive,
+      timeFilterMin,
+      timeFilterMax,
+      toggleTimeFilter,
+      updateTimeFilterMin,
+      updateTimeFilterMax,
+      isVideo,
+      formatTimestamp,
     };
   },
 });
@@ -157,6 +213,97 @@ export default defineComponent({
           class="pl-1 py-1 shrink d-flex"
           align="right"
         >
+          <v-menu
+            v-model="activeTimeFilter"
+            :nudge-left="28"
+            left
+            top
+            :close-on-content-click="false"
+            open-on-hover
+            open-delay="750"
+            close-delay="500"
+          >
+            <template #activator="{ on, attrs }">
+              <v-btn
+                icon
+                small
+                :color="timeFilterActive ? 'primary' : 'default'"
+                title="Filter tracks by time range"
+                v-bind="attrs"
+                v-on="on"
+                @click="toggleTimeFilter"
+              >
+                <v-icon v-bind="attrs" v-on="on">
+                  {{ timeFilterActive ? 'mdi-filter' : 'mdi-filter-outline' }}
+                </v-icon>
+              </v-btn>
+            </template>
+            <v-card
+              outlined
+              class="pa-2 pr-4"
+              color="blue-grey darken-3"
+              style="overflow-y: none"
+            >
+              <v-card-title>
+                Time Filter Settings
+              </v-card-title>
+              <v-card-text>
+                <v-row class="align-center" dense>
+                  <v-col>
+                    <div class="text-caption mb-2">
+                      Filter tracks to only show those that intersect with this time range.
+                    </div>
+                  </v-col>
+                </v-row>
+                <div v-if="timeFilterActive">
+                  <v-row class="align-center" dense>
+                    <v-col>
+                      Min Frame:
+                    </v-col>
+                    <v-col v-if="isVideo">
+                      {{ formatTimestamp(timeFilterMin) }}
+                    </v-col>
+                    <v-col>
+                      <v-slider
+                        :value="timeFilterMin"
+                        :min="0"
+                        :max="mediaController.maxFrame.value"
+                        step="1"
+                        dense
+                        hide-details
+                        thumb-label="always"
+                        @change="updateTimeFilterMin"
+                      />
+                    </v-col>
+                  </v-row>
+                  <v-row class="align-center" dense>
+                    <v-col>
+                      Max Frame:
+                    </v-col>
+                    <v-col v-if="isVideo">
+                      {{ formatTimestamp(timeFilterMax) }}
+                    </v-col>
+
+                    <v-col>
+                      <v-slider
+                        :value="timeFilterMax"
+                        :min="0"
+                        :max="mediaController.maxFrame.value"
+                        step="1"
+                        dense
+                        hide-details
+                        thumb-label="always"
+                        @change="updateTimeFilterMax"
+                      />
+                    </v-col>
+                  </v-row>
+                </div>
+                <div v-else>
+                  <p>Click the filter icon to enable time filtering</p>
+                </div>
+              </v-card-text>
+            </v-card>
+          </v-menu>
           <v-menu
             v-model="activeLockedCamera"
             :nudge-left="28"

client/src/components/controls/LineChart.vue

@@ -80,6 +80,7 @@ export default Vue.extend({
         .select('svg')
         .remove();
       let tooltipTimeoutHandle = null;
+      d3.select('.tooltip').remove();
       const tooltip = d3
         .select(this.$el)
         .append('div')