phase 10

ui/detection-app/src/panels/TimelinePanel.vue

@@ -7,6 +7,7 @@ import type { Detection } from '../types/sse-contract'
 const props = defineProps<{
   source: DataSource
   status?: 'idle' | 'live' | 'processing' | 'error'
+  embedded?: boolean
 }>()
 
 interface TimelineEntry {
@@ -45,6 +46,20 @@ const maxTime = computed(() => {
   return Math.max(...entries.value.map((e) => e.timestamp + e.duration)) * 1.1
 })
 
+// Ruler ticks — nice intervals based on duration
+const rulerTicks = computed(() => {
+  const max = maxTime.value
+  const intervals = [1, 2, 5, 10, 15, 30, 60, 120, 300]
+  const targetTicks = 8
+  const rawStep = max / targetTicks
+  const step = intervals.find((i) => i >= rawStep) || Math.ceil(rawStep / 60) * 60
+  const ticks: number[] = []
+  for (let t = 0; t <= max; t += step) {
+    ticks.push(t)
+  }
+  return ticks
+})
+
 const sourceColor: Record<string, string> = {
   ocr: '#3ecf8e',
   local_vlm: '#f5a623',
@@ -67,8 +82,53 @@ function barStyle(entry: TimelineEntry) {
 </script>
 
 <template>
-  <Panel title="Detection Timeline" :status="status">
+  <Panel v-if="!embedded" title="Detection Timeline" :status="status">
     <div class="timeline" v-if="brands.length > 0">
+      <div class="ruler">
+        <span class="ruler-label" />
+        <div class="ruler-track">
+          <span
+            v-for="t in rulerTicks" :key="t"
+            class="ruler-tick"
+            :style="{ left: (t / maxTime) * 100 + '%' }"
+          >{{ t }}s</span>
+        </div>
+      </div>
+      <div class="rows">
+        <div class="row" v-for="brand in brands" :key="brand">
+          <span class="brand-label">{{ brand }}</span>
+          <div class="track">
+            <div
+              v-for="(entry, i) in entries.filter((e) => e.brand === brand)"
+              :key="i"
+              class="bar"
+              :style="barStyle(entry)"
+              :title="`${entry.brand} — ${entry.source} (${(entry.confidence * 100).toFixed(0)}%) @ ${entry.timestamp.toFixed(1)}s`"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="legend">
+        <span v-for="(color, source) in sourceColor" :key="source" class="legend-item">
+          <span class="legend-dot" :style="{ background: color }" />
+          {{ source }}
+        </span>
+      </div>
+    </div>
+    <div v-else class="empty">Waiting for detections...</div>
+  </Panel>
+  <div v-else class="timeline" v-show="brands.length > 0">
+    <div class="ruler">
+      <span class="ruler-label" />
+      <div class="ruler-track">
+        <span
+          v-for="t in rulerTicks" :key="t"
+          class="ruler-tick"
+          :style="{ left: (t / maxTime) * 100 + '%' }"
+        >{{ t }}s</span>
+      </div>
+    </div>
+    <div class="rows">
       <div class="row" v-for="brand in brands" :key="brand">
         <span class="brand-label">{{ brand }}</span>
         <div class="track">
@@ -81,20 +141,8 @@ function barStyle(entry: TimelineEntry) {
           />
         </div>
       </div>
-      <div class="time-axis">
-        <span>0s</span>
-        <span>{{ (maxTime / 2).toFixed(0) }}s</span>
-        <span>{{ maxTime.toFixed(0) }}s</span>
-      </div>
-      <div class="legend">
-        <span v-for="(color, source) in sourceColor" :key="source" class="legend-item">
-          <span class="legend-dot" :style="{ background: color }" />
-          {{ source }}
-        </span>
-      </div>
     </div>
-    <div v-else class="empty">Waiting for detections...</div>
-  </Panel>
+  </div>
 </template>
 
 <style scoped>
@@ -102,9 +150,54 @@ function barStyle(entry: TimelineEntry) {
   padding: var(--space-2);
   display: flex;
   flex-direction: column;
-  gap: var(--space-1);
   height: 100%;
-  overflow-y: auto;
+  overflow: auto;
+}
+
+.ruler {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--space-2);
+  flex-shrink: 0;
+  height: 20px;
+  margin-bottom: var(--space-1);
+}
+
+.ruler-label {
+  width: 100px;
+  flex-shrink: 0;
+}
+
+.ruler-track {
+  flex: 1;
+  position: relative;
+  height: 100%;
+  border-bottom: 1px solid var(--surface-3);
+}
+
+.ruler-tick {
+  position: absolute;
+  bottom: 0;
+  transform: translateX(-50%);
+  font-size: 9px;
+  color: var(--text-dim);
+  padding-bottom: 2px;
+}
+
+.ruler-tick::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 50%;
+  width: 1px;
+  height: 6px;
+  background: var(--surface-3);
+}
+
+.rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
 }
 
 .row {
@@ -141,15 +234,6 @@ function barStyle(entry: TimelineEntry) {
   min-width: 4px;
 }
 
-.time-axis {
-  display: flex;
-  justify-content: space-between;
-  padding-left: 108px;
-  font-size: 10px;
-  color: var(--text-dim);
-  margin-top: var(--space-1);
-}
-
 .legend {
   display: flex;
   gap: var(--space-3);