From 148934e8ca691c53da13bcabb91e9c449dab8a30 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 25 Nov 2025 12:50:35 -0500
Subject: [PATCH 1/7] linting fix

---
 client/dive-common/components/MultiCamTools.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/dive-common/components/MultiCamTools.vue b/client/dive-common/components/MultiCamTools.vue
index 4aa58918e..484a9e484 100644
--- a/client/dive-common/components/MultiCamTools.vue
+++ b/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"

From 374ee1aed567ab64c426f4b948da84d4428a5185 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 25 Nov 2025 12:50:53 -0500
Subject: [PATCH 2/7] prevent multiple tooltips from being appended

---
 client/src/components/controls/LineChart.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/controls/LineChart.vue b/client/src/components/controls/LineChart.vue
index 65d38ed10..edf3d6710 100644
--- a/client/src/components/controls/LineChart.vue
+++ b/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')

From 50850a9e5f286925d0e15db50901fe11978963b6 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 25 Nov 2025 12:51:18 -0500
Subject: [PATCH 3/7] add timeFilter for filtering based on time ranges

---
 client/src/BaseFilterControls.ts  | 9 +++++++++
 client/src/TrackFilterControls.ts | 6 ++++++
 2 files changed, 15 insertions(+)

diff --git a/client/src/BaseFilterControls.ts b/client/src/BaseFilterControls.ts
index f11953a01..75196850e 100644
--- a/client/src/BaseFilterControls.ts
+++ b/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) => {
diff --git a/client/src/TrackFilterControls.ts b/client/src/TrackFilterControls.ts
index b1bcf9d43..add88a8cc 100644
--- a/client/src/TrackFilterControls.ts
+++ b/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) {

From a48d8841c7618f24236241518f7a8c3278f119cf Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 25 Nov 2025 12:59:42 -0500
Subject: [PATCH 4/7] add time filter button and controls

---
 .../components/ControlsContainer.vue          |   3 +-
 client/src/components/controls/Controls.vue   | 151 +++++++++++++++++-
 2 files changed, 151 insertions(+), 3 deletions(-)

diff --git a/client/dive-common/components/ControlsContainer.vue b/client/dive-common/components/ControlsContainer.vue
index 615ba6a61..bdc10af6c 100644
--- a/client/dive-common/components/ControlsContainer.vue
+++ b/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
diff --git a/client/src/components/controls/Controls.vue b/client/src/components/controls/Controls.vue
index f87c5fcad..1fccfece6 100644
--- a/client/src/components/controls/Controls.vue
+++ b/client/src/components/controls/Controls.vue
@@ -1,11 +1,14 @@
 <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 { injectAggregateController } from '../annotators/useMediaController';
+import { useTime, useTrackFilters } from '../../provides';
 
 export default defineComponent({
   name: 'Controls',
@@ -14,15 +17,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 +69,43 @@ 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;
+      }
+      const seconds = frame / frameRate.value;
+      return new Date(seconds * 1000).toISOString().substr(11, 8);
+    }
+
     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"

From 6be61a3c3df0d79a45d8e5328afe11118f39387f Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 25 Nov 2025 13:00:04 -0500
Subject: [PATCH 5/7] refactor timeline component, add start/end lines and
 implement dragging

---
 client/src/components/controls/Timeline.vue | 749 +++++++++++++++-----
 1 file changed, 573 insertions(+), 176 deletions(-)

diff --git a/client/src/components/controls/Timeline.vue b/client/src/components/controls/Timeline.vue
index 133023ec1..64adec965 100644
--- a/client/src/components/controls/Timeline.vue
+++ b/client/src/components/controls/Timeline.vue
@@ -1,8 +1,15 @@
-<script>
+<script lang="ts">
 import { throttle } from 'lodash';
 import * as d3 from 'd3';
+import {
+  ref, computed, watch, onMounted, onBeforeUnmount, defineComponent, PropType,
+} from 'vue';
+import { DatasetType } from 'dive-common/apispec';
+import { useTrackFilters, useTime } from '../../provides';
 
-export default {
+type TimeFilterType = 'start' | 'end' | null;
+
+export default defineComponent({
   name: 'Timeline',
   props: {
     maxFrame: {
@@ -17,235 +24,552 @@ export default {
       type: Boolean,
       default: true,
     },
-  },
-  data() {
-    return {
-      init: !!this.maxFrame || 1,
-      mounted: false,
-      startFrame: 0,
-      endFrame: this.maxFrame,
-      timelineScale: null,
-      clientWidth: 0,
-      clientHeight: 0,
-      margin: 20,
-      resizeObserver: null,
-    };
-  },
-  computed: {
-    minimapFillStyle() {
-      return {
-        left: `${(this.startFrame / (this.maxFrame || 1)) * 100}%`,
-        width: `${(((this.endFrame || 1) - this.startFrame) / (this.maxFrame || 1)) * 100}%`,
-      };
+    datasetType: {
+      type: String as PropType<DatasetType>,
+      required: true,
     },
-    handLeftPosition() {
+  },
+  emits: ['seek'],
+  setup(props, { emit }) {
+    const trackFilters = useTrackFilters();
+    const { frameRate } = useTime();
+
+    const init = ref(!!props.maxFrame || 1);
+    const mounted = ref(false);
+    const startFrame = ref(0);
+    const endFrame = ref(props.maxFrame);
+    const timelineScale = ref<d3.ScaleLinear<number, number> | null>(null);
+    const clientWidth = ref(0);
+    const clientHeight = ref(0);
+    const margin = ref(20);
+    const resizeObserver = ref<ResizeObserver | null>(null);
+    const draggingTimeFilter = ref<TimeFilterType>(null);
+    const dragTooltipFrame = ref<number | null>(null);
+    const dragTooltipPosition = ref<number | null>(null);
+    const dragging = ref(false);
+    const minimapDragging = ref(false);
+    const minimapDraggingStartClientX = ref(0);
+    const minimapDraggingStartFrame = ref(0);
+    const minimapDraggingEndFrame = ref(0);
+    const resizeTimer = ref<ReturnType<typeof setTimeout> | null>(null);
+
+    // Template refs
+    const workarea = ref<HTMLElement | null>(null);
+    const hand = ref<HTMLElement | null>(null);
+    const timeFilterStartLine = ref<HTMLElement | null>(null);
+    const timeFilterEndLine = ref<HTMLElement | null>(null);
+    const minimap = ref<HTMLElement | null>(null);
+    const timelineEl = ref<HTMLElement | null>(null);
+
+    // D3 elements
+    let svg: d3.Selection<SVGSVGElement, unknown, null, undefined> | null = null;
+    let g: d3.Selection<SVGGElement, unknown, null, undefined> | null = null;
+    let axis: d3.Axis<d3.NumberValue> | null = null;
+
+    const minimapFillStyle = computed(() => ({
+      left: `${(startFrame.value / (props.maxFrame || 1)) * 100}%`,
+      width: `${(((endFrame.value || 1) - startFrame.value) / (props.maxFrame || 1)) * 100}%`,
+    }));
+
+    const handLeftPosition = computed(() => {
       if (
-        !this.mounted
-        || this.frame < this.startFrame
-        || this.frame > this.endFrame
+        !mounted.value
+        || props.frame < startFrame.value
+        || props.frame > endFrame.value
       ) {
         return null;
       }
-      if (this.endFrame === 0) {
+      if (endFrame.value === 0) {
         return Math.round(
-          this.margin + (this.clientWidth - this.margin) * 0.5,
+          margin.value + (clientWidth.value - margin.value) * 0.5,
         );
       }
       return Math.round(
-        this.margin + (this.clientWidth - this.margin)
-          * ((this.frame - this.startFrame) / ((this.endFrame || 1) - this.startFrame)),
+        margin.value + (clientWidth.value - margin.value)
+          * ((props.frame - startFrame.value) / ((endFrame.value || 1) - startFrame.value)),
       );
-    },
-  },
-  watch: {
-    maxFrame(value) {
-      this.endFrame = value;
-      this.init = true;
-      this.update();
-    },
-    startFrame() {
-      this.update();
-    },
-    endFrame() {
-      this.update();
-    },
-    handLeftPosition(value) {
-      this.$refs.hand.style.left = `${value || '-10'}px`;
-    },
-    frame(frame) {
-      if (frame > this.endFrame) {
-        this.endFrame = Math.min(frame + 200, this.maxFrame);
-      } else if (frame < this.startFrame) {
-        this.startFrame = Math.max(frame - 100, 0);
+    });
+
+    const timeFilterActive = computed(() => trackFilters && trackFilters.timeFilters.value !== null
+      && Array.isArray(trackFilters.timeFilters.value));
+
+    const timeFilterStartFrame = computed(() => {
+      if (!timeFilterActive.value || !trackFilters.timeFilters.value) return null;
+      return trackFilters.timeFilters.value[0];
+    });
+
+    const timeFilterEndFrame = computed(() => {
+      if (!timeFilterActive.value || !trackFilters.timeFilters.value) return null;
+      return trackFilters.timeFilters.value[1];
+    });
+
+    const timeFilterStartPosition = computed(() => {
+      if (!timeFilterActive.value || !mounted.value || !timelineScale.value || endFrame.value === startFrame.value) {
+        return null;
       }
-    },
-    display(val) {
-      if (!val) {
-        this.clientHeight = 0;
-      } else {
-        this.initialize();
+      const filterStart = timeFilterStartFrame.value;
+      if (filterStart === null) return null;
+      // Only show line if filter start is within visible range
+      if (filterStart < startFrame.value || filterStart > endFrame.value) {
+        return null;
       }
-    },
-  },
-  created() {
-    this.update = throttle(this.update, 30);
-    // Only resize when finished dragging the window
-    window.addEventListener('resize', this.resizeHandler);
-  },
-  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) {
+      // Calculate position manually using the same formula as timelineScale
+      // This ensures reactivity when startFrame/endFrame change
+      const position = margin.value + (clientWidth.value - margin.value)
+        * ((filterStart - startFrame.value) / (endFrame.value - startFrame.value));
+      return Math.round(position);
+    });
+
+    const timeFilterEndPosition = computed(() => {
+      if (!timeFilterActive.value || !mounted.value || !timelineScale.value || endFrame.value === startFrame.value) {
+        return null;
+      }
+      const filterEnd = timeFilterEndFrame.value;
+      if (filterEnd === null) return null;
+      // Only show line if filter end is within visible range
+      if (filterEnd < startFrame.value || filterEnd > endFrame.value) {
+        return null;
+      }
+      // Calculate position manually using the same formula as timelineScale
+      // This ensures reactivity when startFrame/endFrame change
+      const position = margin.value + (clientWidth.value - margin.value)
+        * ((filterEnd - startFrame.value) / (endFrame.value - startFrame.value));
+      return Math.round(position);
+    });
+
+    const timeFilterLeftDimmingStyle = computed(() => {
+      if (!timeFilterActive.value || !mounted.value || endFrame.value === startFrame.value) {
+        return { display: 'none' };
+      }
+      const startPos = timeFilterStartPosition.value;
+      const filterStart = timeFilterStartFrame.value;
+
+      if (filterStart === null) return { display: 'none' };
+
+      // If filter start is before or at visible range start, dim entire left side
+      if (filterStart <= startFrame.value) {
+        return {
+          left: '0px',
+          width: `${margin.value}px`,
+        };
+      }
+
+      // If filter start is within visible range, dim from left edge to start position
+      if (startPos !== null && filterStart > startFrame.value) {
+        return {
+          left: '0px',
+          width: `${startPos}px`,
+        };
+      }
+
+      return { display: 'none' };
+    });
+
+    const timeFilterRightDimmingStyle = computed(() => {
+      if (!timeFilterActive.value || !mounted.value || endFrame.value === startFrame.value) {
+        return { display: 'none' };
+      }
+      const endPos = timeFilterEndPosition.value;
+      const filterEnd = timeFilterEndFrame.value;
+
+      if (filterEnd === null) return { display: 'none' };
+
+      // If filter end is after or at visible range end, dim entire right side
+      if (filterEnd >= endFrame.value) {
+        return {
+          left: `${clientWidth.value}px`,
+          right: '0px',
+        };
+      }
+
+      // If filter end is within visible range, dim from end position to right edge
+      if (endPos !== null && filterEnd < endFrame.value) {
+        return {
+          left: `${endPos}px`,
+          right: '0px',
+        };
+      }
+
+      return { display: 'none' };
+    });
+
+    const isVideo = computed(() => props.datasetType === 'video');
+
+    const dragTooltipText = computed(() => {
+      if (dragTooltipFrame.value === null) {
+        return '';
+      }
+      let text = `Frame: ${dragTooltipFrame.value}`;
+      if (isVideo.value && frameRate.value) {
+        const seconds = dragTooltipFrame.value / frameRate.value;
+        const timeStr = new Date(seconds * 1000).toISOString().substr(11, 8);
+        text += ` (${timeStr})`;
+      }
+      return text;
+    });
+
+    function initialize() {
+      if (!workarea.value) {
         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();
+      const width = workarea.value.clientWidth || 0;
+      const height = workarea.value.clientHeight || 0;
+      if (workarea.value) {
+        resizeObserver.value = new ResizeObserver(() => {
+          resizeHandler();
         });
-        this.resizeObserver.observe(this.$refs.workarea);
+        resizeObserver.value.observe(workarea.value);
       }
       // clientWidth and clientHeight are properties used to resize child elements
-      this.clientWidth = width - this.margin;
+      clientWidth.value = width - margin.value;
       // Timeline height needs to offset so it doesn't overlap the frame number
-      this.clientHeight = height - 15;
+      clientHeight.value = height - 15;
       const scale = d3
         .scaleLinear()
-        .domain([0, this.maxFrame])
-        .range([this.margin, this.clientWidth]);
-      this.timelineScale = scale;
-      const axis = d3
-        .axisTop()
-        .scale(scale)
+        .domain([0, props.maxFrame])
+        .range([margin.value, clientWidth.value]);
+      timelineScale.value = scale;
+      const axisInstance = d3
+        .axisTop<number>(scale)
         .tickSize(height - 30)
         .tickSizeOuter(0);
-      this.axis = axis;
-      if (!this.svg) {
-        this.svg = d3
-          .select(this.$refs.workarea)
+      axis = axisInstance as d3.Axis<d3.NumberValue>;
+      if (!svg) {
+        svg = d3
+          .select(workarea.value)
           .append('svg');
       }
-      this.svg.style('display', 'block')
-        .attr('width', this.clientWidth)
+      svg.style('display', 'block')
+        .attr('width', clientWidth.value)
         .attr('height', height);
-      if (!this.g) {
-        this.g = this.svg.append('g')
+      if (!g) {
+        g = svg.append('g')
           .attr('transform', `translate(0,${height - 15})`);
       }
 
-      this.updateAxis();
-      this.mounted = true;
-    },
-    resizeHandler() {
+      updateAxis();
+      mounted.value = true;
+    }
+
+    function resizeHandler() {
       // Debounces resize to prevent it from be calling continuously.
-      clearTimeout(this.resizeTimer);
-      this.resizeTimer = setTimeout(this.initialize, 200);
-    },
-    onwheel(e) {
-      const extend = Math.round((this.endFrame - this.startFrame) * 0.2)
+      if (resizeTimer.value) {
+        clearTimeout(resizeTimer.value);
+      }
+      resizeTimer.value = setTimeout(initialize, 200);
+    }
+
+    function onwheel(e: WheelEvent) {
+      const extend = Math.round((endFrame.value - startFrame.value) * 0.2)
         * Math.sign(e.deltaY);
-      const ratio = (e.layerX - this.$el.offsetLeft) / this.clientWidth;
-      let startFrame = this.startFrame - extend * ratio;
-      let endFrame = this.endFrame + extend * (1 - ratio);
-      startFrame = Math.max(0, startFrame);
-      endFrame = Math.min(this.maxFrame, endFrame);
-      if (startFrame >= endFrame - 10) {
+      const ratio = (e.layerX - (timelineEl.value?.offsetLeft || 0)) / clientWidth.value;
+      let newStartFrame = startFrame.value - extend * ratio;
+      let newEndFrame = endFrame.value + extend * (1 - ratio);
+      newStartFrame = Math.max(0, newStartFrame);
+      newEndFrame = Math.min(props.maxFrame, newEndFrame);
+      if (newStartFrame >= newEndFrame - 10) {
         return;
       }
-      this.startFrame = startFrame;
-      this.endFrame = endFrame;
-    },
-    updateAxis() {
-      this.g.call(this.axis).call((g) => g
-        .selectAll('.tick text')
-        .attr('y', 0)
-        .attr('dy', 13));
-    },
-    update() {
-      this.timelineScale.domain([this.startFrame, this.endFrame]);
-      this.axis.scale(this.timelineScale);
-      this.updateAxis();
-    },
-    emitSeek(e) {
-      const leftBounds = (this.$refs.workarea.getBoundingClientRect().left + this.margin);
-      const rightBounds = (this.$refs.workarea.getBoundingClientRect().right - this.margin);
+      startFrame.value = newStartFrame;
+      endFrame.value = newEndFrame;
+    }
+
+    function updateAxis() {
+      if (g && axis) {
+        g.call(axis).call((gSelection) => gSelection
+          .selectAll('.tick text')
+          .attr('y', 0)
+          .attr('dy', 13));
+      }
+    }
+
+    const updateFn = () => {
+      if (timelineScale.value) {
+        timelineScale.value.domain([startFrame.value, endFrame.value]);
+        if (axis) {
+          axis.scale(timelineScale.value as d3.AxisScale<d3.NumberValue>);
+        }
+        updateAxis();
+      }
+    };
+
+    const update = throttle(updateFn, 30);
+
+    function emitSeek(e: MouseEvent) {
+      if (!workarea.value) return;
+      const leftBounds = (workarea.value.getBoundingClientRect().left + margin.value);
+      const rightBounds = (workarea.value.getBoundingClientRect().right - margin.value);
       if (e.clientX > leftBounds && e.clientX < rightBounds) {
         const frame = Math.round(
           ((e.clientX - leftBounds)
-          / (this.clientWidth - this.margin))
-          * (this.endFrame - this.startFrame)
-          + this.startFrame,
+          / (clientWidth.value - margin.value))
+          * (endFrame.value - startFrame.value)
+          + startFrame.value,
         );
-        this.$emit('seek', frame);
+        emit('seek', frame);
       }
-    },
-    workareaMouseup(e) {
-      if (this.dragging) {
-        this.emitSeek(e);
+    }
+
+    function workareaMouseup(e: MouseEvent) {
+      if (draggingTimeFilter.value) {
+        draggingTimeFilter.value = null;
+        dragTooltipFrame.value = null;
+        dragTooltipPosition.value = null;
+        return;
       }
-      this.dragging = false;
-    },
-    workareaMousedown() {
-      this.dragging = true;
-      // e.preventDefault();
-    },
-    workareaMousemove(e) {
-      if (this.dragging) {
-        this.emitSeek(e);
+      if (dragging.value) {
+        emitSeek(e);
+      }
+      dragging.value = false;
+    }
+
+    function workareaMousedown() {
+      dragging.value = true;
+    }
+
+    function workareaMousemove(e: MouseEvent) {
+      if (draggingTimeFilter.value) {
+        timeFilterLineMousemove(e);
+        return;
+      }
+      if (dragging.value) {
+        emitSeek(e);
       }
       e.preventDefault();
-    },
-    workareaMouseleave() {
-      this.dragging = false;
-    },
-    minimapFillMousedown(e) {
+    }
+
+    function workareaMouseleave() {
+      dragging.value = false;
+    }
+
+    function minimapFillMousedown(e: MouseEvent) {
       e.preventDefault();
-      this.minimapDragging = true;
-      this.minimapDraggingStartClientX = e.clientX;
-      this.minimapDraggingStartFrame = this.startFrame;
-      this.minimapDraggingEndFrame = this.endFrame;
-    },
-    containerMousemove(e) {
+      minimapDragging.value = true;
+      minimapDraggingStartClientX.value = e.clientX;
+      minimapDraggingStartFrame.value = startFrame.value;
+      minimapDraggingEndFrame.value = endFrame.value;
+    }
+
+    function containerMousemove(e: MouseEvent) {
       e.preventDefault();
-      if (!this.minimapDragging) {
+      if (draggingTimeFilter.value) {
+        timeFilterLineMousemove(e);
+        return;
+      }
+      if (!minimapDragging.value) {
         return;
       }
       if (!e.which) {
-        this.minimapDragging = false;
+        minimapDragging.value = false;
         return;
       }
-      const delta = this.minimapDraggingStartClientX - e.clientX;
-      const frameDelta = (delta / this.clientWidth) * this.maxFrame;
-      const startFrame = this.minimapDraggingStartFrame - frameDelta;
-      if (startFrame < 0) {
+      const delta = minimapDraggingStartClientX.value - e.clientX;
+      const frameDelta = (delta / clientWidth.value) * props.maxFrame;
+      const newStartFrame = minimapDraggingStartFrame.value - frameDelta;
+      if (newStartFrame < 0) {
         return;
       }
-      const endFrame = this.minimapDraggingEndFrame - frameDelta;
-      if (endFrame > this.maxFrame) {
+      const newEndFrame = minimapDraggingEndFrame.value - frameDelta;
+      if (newEndFrame > props.maxFrame) {
         return;
       }
-      this.startFrame = startFrame;
-      this.endFrame = endFrame;
-    },
-    containerMouseup() {
-      this.minimapDragging = false;
-    },
+      startFrame.value = newStartFrame;
+      endFrame.value = newEndFrame;
+    }
+
+    function containerMouseup() {
+      minimapDragging.value = false;
+      if (draggingTimeFilter.value) {
+        draggingTimeFilter.value = null;
+        dragTooltipFrame.value = null;
+        dragTooltipPosition.value = null;
+      }
+    }
+
+    function timeFilterLineMousedown(e: MouseEvent, type: 'start' | 'end') {
+      e.preventDefault();
+      e.stopPropagation();
+      draggingTimeFilter.value = type;
+      dragging.value = false; // Prevent normal timeline dragging
+    }
+
+    function timeFilterLineMousemove(e: MouseEvent) {
+      if (!draggingTimeFilter.value || !mounted.value || !timelineScale.value) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (!workarea.value) {
+        return;
+      }
+
+      const workareaRect = workarea.value.getBoundingClientRect();
+      const leftBounds = workareaRect.left + margin.value;
+      const rightBounds = workareaRect.right - margin.value;
+
+      // Clamp mouse X to bounds
+      const clampedX = Math.max(leftBounds, Math.min(e.clientX, rightBounds));
+
+      // Calculate frame from mouse position
+      const frame = Math.round(
+        ((clampedX - leftBounds)
+        / (clientWidth.value - margin.value))
+        * (endFrame.value - startFrame.value)
+        + startFrame.value,
+      );
+
+      // Clamp to valid range
+      const clampedFrame = Math.max(0, Math.min(frame, props.maxFrame));
+
+      // Update tooltip position (relative to workarea)
+      dragTooltipFrame.value = clampedFrame;
+      dragTooltipPosition.value = clampedX - workareaRect.left;
+
+      // Update filter
+      const current = trackFilters.timeFilters.value;
+      if (current) {
+        if (draggingTimeFilter.value === 'start') {
+          // Ensure start <= end
+          const newStart = Math.min(clampedFrame, current[1]);
+          trackFilters.setTimeFilters([newStart, current[1]]);
+        } else if (draggingTimeFilter.value === 'end') {
+          // Ensure end >= start
+          const newEnd = Math.max(clampedFrame, current[0]);
+          trackFilters.setTimeFilters([current[0], newEnd]);
+        }
+      }
+    }
+
+    function formatTimestamp(frame: number) {
+      if (!isVideo.value || !frameRate.value) {
+        return null;
+      }
+      const seconds = frame / frameRate.value;
+      return new Date(seconds * 1000).toISOString().substr(11, 8);
+    }
+
+    // Watchers
+    watch(() => props.maxFrame, (value) => {
+      endFrame.value = value;
+      init.value = true;
+      update();
+    });
+
+    watch(startFrame, () => {
+      update();
+    });
+
+    watch(endFrame, () => {
+      update();
+    });
+
+    watch(handLeftPosition, (value) => {
+      if (hand.value) {
+        hand.value.style.left = `${value || '-10'}px`;
+      }
+    });
+
+    watch(timeFilterStartPosition, (value) => {
+      if (timeFilterStartLine.value && value !== null) {
+        timeFilterStartLine.value.style.left = `${value}px`;
+      }
+    });
+
+    watch(timeFilterEndPosition, (value) => {
+      if (timeFilterEndLine.value && value !== null) {
+        timeFilterEndLine.value.style.left = `${value}px`;
+      }
+    });
+
+    watch(() => props.frame, (frame) => {
+      if (frame > endFrame.value) {
+        endFrame.value = Math.min(frame + 200, props.maxFrame);
+      } else if (frame < startFrame.value) {
+        startFrame.value = Math.max(frame - 100, 0);
+      }
+    });
+
+    watch(() => props.display, (val) => {
+      if (!val) {
+        clientHeight.value = 0;
+      } else {
+        initialize();
+      }
+    });
+
+    // Lifecycle
+    onMounted(() => {
+      initialize();
+      // Initialize endFrame from maxFrame prop
+      endFrame.value = props.maxFrame;
+      init.value = !!props.maxFrame || 1;
+      // Add resize listener
+      window.addEventListener('resize', resizeHandler);
+    });
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', resizeHandler);
+      if (resizeObserver.value && workarea.value) {
+        resizeObserver.value.unobserve(workarea.value);
+        resizeObserver.value.disconnect();
+      }
+      if (resizeTimer.value) {
+        clearTimeout(resizeTimer.value);
+      }
+    });
+
+    return {
+      // Refs
+      init,
+      mounted,
+      startFrame,
+      endFrame,
+      clientWidth,
+      clientHeight,
+      margin,
+      draggingTimeFilter,
+      dragTooltipFrame,
+      dragTooltipPosition,
+      // Template refs
+      workarea,
+      hand,
+      timeFilterStartLine,
+      timeFilterEndLine,
+      minimap,
+      timelineEl,
+      // Computed
+      minimapFillStyle,
+      handLeftPosition,
+      timeFilterActive,
+      timeFilterStartFrame,
+      timeFilterEndFrame,
+      timeFilterStartPosition,
+      timeFilterEndPosition,
+      timeFilterLeftDimmingStyle,
+      timeFilterRightDimmingStyle,
+      isVideo,
+      frameRate,
+      dragTooltipText,
+      // Methods
+      onwheel,
+      containerMouseup,
+      containerMousemove,
+      workareaMouseup,
+      workareaMousedown,
+      workareaMousemove,
+      workareaMouseleave,
+      minimapFillMousedown,
+      timeFilterLineMousedown,
+      formatTimestamp,
+    };
   },
-};
+});
 </script>
 
 <template>
   <div
+    ref="timelineEl"
     class="timeline"
     @wheel="onwheel"
     @mouseup="containerMouseup"
@@ -259,6 +583,37 @@ export default {
       @mousemove="workareaMousemove"
       @mouseleave="workareaMouseleave"
     >
+      <div
+        v-if="timeFilterActive"
+        class="time-filter-dimming time-filter-dimming-left"
+        :style="timeFilterLeftDimmingStyle"
+      />
+      <div
+        v-if="timeFilterActive"
+        class="time-filter-dimming time-filter-dimming-right"
+        :style="timeFilterRightDimmingStyle"
+      />
+      <div
+        v-if="timeFilterActive && timeFilterStartPosition !== null"
+        ref="timeFilterStartLine"
+        class="time-filter-line time-filter-start-line"
+        :style="{ left: `${timeFilterStartPosition}px` }"
+        @mousedown="timeFilterLineMousedown($event, 'start')"
+      />
+      <div
+        v-if="timeFilterActive && timeFilterEndPosition !== null"
+        ref="timeFilterEndLine"
+        class="time-filter-line time-filter-end-line"
+        :style="{ left: `${timeFilterEndPosition}px` }"
+        @mousedown="timeFilterLineMousedown($event, 'end')"
+      />
+      <div
+        v-if="dragTooltipPosition !== null"
+        class="time-filter-tooltip"
+        :style="{ left: `${dragTooltipPosition}px` }"
+      >
+        {{ dragTooltipText }}
+      </div>
       <div
         ref="hand"
         class="hand"
@@ -312,7 +667,48 @@ export default {
       width: 0;
       height: 100%;
       border-left: 1px solid #299be3;
-      z-index:1;
+      z-index: 10;
+    }
+
+    .time-filter-line {
+      position: absolute;
+      top: 0;
+      width: 0;
+      height: 100%;
+      z-index: 2;
+      cursor: col-resize;
+      pointer-events: auto;
+    }
+
+    .time-filter-tooltip {
+      position: absolute;
+      top: 30px;
+      transform: translateX(-50%);
+      background-color: rgba(0, 0, 0, 0.8);
+      color: white;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      white-space: nowrap;
+      pointer-events: none;
+      z-index: 20;
+    }
+
+    .time-filter-start-line {
+      border-left: 3px solid #4caf50;
+    }
+
+    .time-filter-end-line {
+      border-left: 3px solid #f44336;
+    }
+
+    .time-filter-dimming {
+      position: absolute;
+      top: 0;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.3);
+      pointer-events: none;
+      z-index: 1;
     }
 
     .child {
@@ -321,6 +717,7 @@ export default {
       bottom: 17px;
       left: 0;
       right: 0;
+      z-index: 0;
     }
   }
 

From 52ef57986fcf0f073025133eebf90dd8f8cefba6 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 25 Nov 2025 13:14:52 -0500
Subject: [PATCH 6/7] swap wheel event X location reference

---
 client/src/components/controls/Timeline.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/controls/Timeline.vue b/client/src/components/controls/Timeline.vue
index 64adec965..3a3ac105e 100644
--- a/client/src/components/controls/Timeline.vue
+++ b/client/src/components/controls/Timeline.vue
@@ -262,7 +262,9 @@ export default defineComponent({
     function onwheel(e: WheelEvent) {
       const extend = Math.round((endFrame.value - startFrame.value) * 0.2)
         * Math.sign(e.deltaY);
-      const ratio = (e.layerX - (timelineEl.value?.offsetLeft || 0)) / clientWidth.value;
+      const timelineRect = timelineEl.value?.getBoundingClientRect();
+      const xRelativeToTimeline = timelineRect ? e.clientX - timelineRect.left : 0;
+      const ratio = (xRelativeToTimeline - margin.value) / clientWidth.value;
       let newStartFrame = startFrame.value - extend * ratio;
       let newEndFrame = endFrame.value + extend * (1 - ratio);
       newStartFrame = Math.max(0, newStartFrame);

From 65aa52b2aa93a0be3bab101fcd7dec1ab539409a Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 1 Dec 2025 15:00:49 -0500
Subject: [PATCH 7/7] time format util, change initialize function name in
 Timeline.vue

---
 client/src/components/controls/Controls.vue |  4 ++--
 client/src/components/controls/Timeline.vue | 12 ++++++------
 client/src/utils.ts                         | 14 ++++++++++++++
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/client/src/components/controls/Controls.vue b/client/src/components/controls/Controls.vue
index 1fccfece6..876eefd25 100644
--- a/client/src/components/controls/Controls.vue
+++ b/client/src/components/controls/Controls.vue
@@ -7,6 +7,7 @@ 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';
 
@@ -99,8 +100,7 @@ export default defineComponent({
       if (!isVideo.value || !frameRate.value) {
         return null;
       }
-      const seconds = frame / frameRate.value;
-      return new Date(seconds * 1000).toISOString().substr(11, 8);
+      return frameToTimestamp(frame, frameRate.value);
     }
 
     return {
diff --git a/client/src/components/controls/Timeline.vue b/client/src/components/controls/Timeline.vue
index 3a3ac105e..50a7fb135 100644
--- a/client/src/components/controls/Timeline.vue
+++ b/client/src/components/controls/Timeline.vue
@@ -5,6 +5,7 @@ import {
   ref, computed, watch, onMounted, onBeforeUnmount, defineComponent, PropType,
 } from 'vue';
 import { DatasetType } from 'dive-common/apispec';
+import { frameToTimestamp } from 'vue-media-annotator/utils';
 import { useTrackFilters, useTime } from '../../provides';
 
 type TimeFilterType = 'start' | 'end' | null;
@@ -208,7 +209,7 @@ export default defineComponent({
       return text;
     });
 
-    function initialize() {
+    function initD3Timeline() {
       if (!workarea.value) {
         return;
       }
@@ -256,7 +257,7 @@ export default defineComponent({
       if (resizeTimer.value) {
         clearTimeout(resizeTimer.value);
       }
-      resizeTimer.value = setTimeout(initialize, 200);
+      resizeTimer.value = setTimeout(initD3Timeline, 200);
     }
 
     function onwheel(e: WheelEvent) {
@@ -447,8 +448,7 @@ export default defineComponent({
       if (!isVideo.value || !frameRate.value) {
         return null;
       }
-      const seconds = frame / frameRate.value;
-      return new Date(seconds * 1000).toISOString().substr(11, 8);
+      return frameToTimestamp(frame, frameRate.value);
     }
 
     // Watchers
@@ -496,13 +496,13 @@ export default defineComponent({
       if (!val) {
         clientHeight.value = 0;
       } else {
-        initialize();
+        initD3Timeline();
       }
     });
 
     // Lifecycle
     onMounted(() => {
-      initialize();
+      initD3Timeline();
       // Initialize endFrame from maxFrame prop
       endFrame.value = props.maxFrame;
       init.value = !!props.maxFrame || 1;
diff --git a/client/src/utils.ts b/client/src/utils.ts
index 54d083a2c..d815f2a47 100644
--- a/client/src/utils.ts
+++ b/client/src/utils.ts
@@ -156,6 +156,19 @@ function withinBounds(coord: [number, number], bounds: RectBounds) {
   return (x > bounds[0] && x < bounds[2] && y > bounds[1] && y < bounds[3]);
 }
 
+function frameToTimestamp(frame: number, frameRate: number): string | null {
+  const ms = (frame / frameRate) * 1000;
+  const date = new Date(ms);
+
+  return new Intl.DateTimeFormat('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+    timeZone: 'UTC', // important!
+  }).format(date);
+}
+
 export {
   getResponseError,
   boundToGeojson,
@@ -167,4 +180,5 @@ export {
   reOrderBounds,
   reOrdergeoJSON,
   withinBounds,
+  frameToTimestamp,
 };