phase 5
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { Panel, ResizeHandle } from 'mpr-ui-framework'
|
||||
import { Panel, ResizeHandle, SplitPane } from 'mpr-ui-framework'
|
||||
import 'mpr-ui-framework/src/tokens.css'
|
||||
import LogPanel from './panels/LogPanel.vue'
|
||||
import FunnelPanel from './panels/FunnelPanel.vue'
|
||||
@@ -55,35 +55,6 @@ function onJobStarted(newJobId: string) {
|
||||
sseJobStarted(newJobId)
|
||||
}
|
||||
|
||||
// Resizable splits
|
||||
const pipelineWidth = ref(320)
|
||||
const detectionsFlex = ref(3)
|
||||
const viewerHeight = ref(240)
|
||||
const timelineFlex = ref(1)
|
||||
const tableFlex = ref(1)
|
||||
const slidersWidth = ref(210)
|
||||
|
||||
function onPipelineResize(delta: number) {
|
||||
pipelineWidth.value = Math.max(200, Math.min(500, pipelineWidth.value + delta))
|
||||
}
|
||||
|
||||
function onViewerResize(delta: number) {
|
||||
viewerHeight.value = Math.max(120, Math.min(400, viewerHeight.value + delta))
|
||||
}
|
||||
|
||||
function onDetectionsResize(delta: number) {
|
||||
detectionsFlex.value = Math.max(1, Math.min(6, detectionsFlex.value + delta * 0.01))
|
||||
}
|
||||
|
||||
function onTimelineResize(delta: number) {
|
||||
const shift = delta * 0.02
|
||||
timelineFlex.value = Math.max(0.3, Math.min(3, timelineFlex.value + shift))
|
||||
tableFlex.value = Math.max(0.3, Math.min(3, tableFlex.value - shift))
|
||||
}
|
||||
|
||||
function onSlidersResize(delta: number) {
|
||||
slidersWidth.value = Math.max(210, Math.min(350, slidersWidth.value - delta))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -108,138 +79,134 @@ function onSlidersResize(delta: number) {
|
||||
<span class="job-id">job: {{ jobId || '—' }}</span>
|
||||
</header>
|
||||
|
||||
<div class="main-layout">
|
||||
<!-- Left column: Pipeline control (full height) -->
|
||||
<div class="pipeline-col" :style="{ width: pipelineWidth + 'px' }">
|
||||
<SplitPane direction="horizontal" :initial-size="320" size-mode="px" :min="200" :max="500">
|
||||
<template #first>
|
||||
<PipelineGraphPanel :source="source" :status="status" />
|
||||
</div>
|
||||
<ResizeHandle direction="horizontal" @resize="onPipelineResize" />
|
||||
|
||||
<!-- Right area: mode-dependent content -->
|
||||
<div class="content-col">
|
||||
</template>
|
||||
<template #second>
|
||||
|
||||
<!-- === NORMAL MODE === -->
|
||||
<template v-if="pipeline.layoutMode === 'normal'">
|
||||
<div class="viewer-row" :style="{ height: viewerHeight + 'px' }">
|
||||
<FramePanel :source="source" :status="status" />
|
||||
<FunnelPanel :source="source" :status="status" />
|
||||
</div>
|
||||
<ResizeHandle direction="vertical" @resize="onViewerResize" />
|
||||
|
||||
<div class="detections-stats-row">
|
||||
<div class="detections-col" :style="{ flex: detectionsFlex }">
|
||||
<Panel title="Detections" :status="status">
|
||||
<div class="detections-stack">
|
||||
<div class="timeline-section" :style="{ flex: timelineFlex }">
|
||||
<TimelinePanel :source="source" :status="status" :embedded="true" />
|
||||
</div>
|
||||
<ResizeHandle direction="vertical" @resize="onTimelineResize" />
|
||||
<div class="table-section" :style="{ flex: tableFlex }">
|
||||
<BrandTablePanel :source="source" :status="status" :embedded="true" />
|
||||
</div>
|
||||
<SplitPane v-if="pipeline.layoutMode === 'normal'" direction="vertical" :initial-size="240" size-mode="px" :min="120" :max="400">
|
||||
<template #first>
|
||||
<SplitPane direction="horizontal" :initial-size="1" size-mode="ratio" :min="0.3" :max="3">
|
||||
<template #first>
|
||||
<FramePanel :source="source" :status="status" />
|
||||
</template>
|
||||
<template #second>
|
||||
<FunnelPanel :source="source" :status="status" />
|
||||
</template>
|
||||
</SplitPane>
|
||||
</template>
|
||||
<template #second>
|
||||
<SplitPane direction="horizontal" :initial-size="3" size-mode="ratio" :min="1" :max="6">
|
||||
<template #first>
|
||||
<Panel title="Detections" :status="status">
|
||||
<SplitPane direction="vertical" :initial-size="1" size-mode="ratio" :min="0.3" :max="3">
|
||||
<template #first>
|
||||
<TimelinePanel :source="source" :status="status" :embedded="true" />
|
||||
</template>
|
||||
<template #second>
|
||||
<BrandTablePanel :source="source" :status="status" :embedded="true" />
|
||||
</template>
|
||||
</SplitPane>
|
||||
</Panel>
|
||||
</template>
|
||||
<template #second>
|
||||
<div class="stats-col">
|
||||
<Panel title="Pipeline" :status="status">
|
||||
<div class="pipeline-stats">
|
||||
<div class="stat" v-for="s in [
|
||||
{ label: 'Frames', value: stats?.frames_extracted ?? '—' },
|
||||
{ label: 'After filter', value: stats?.frames_after_scene_filter ?? '—' },
|
||||
{ label: 'Regions', value: stats?.regions_detected ?? '—' },
|
||||
{ label: 'OCR resolved', value: stats?.regions_resolved_by_ocr ?? '—' },
|
||||
{ label: 'VLM escalated', value: stats?.regions_escalated_to_local_vlm ?? '—' },
|
||||
{ label: 'Cloud escalated', value: stats?.regions_escalated_to_cloud_llm ?? '—' },
|
||||
]" :key="s.label">
|
||||
<span class="label">{{ s.label }}</span>
|
||||
<span class="value">{{ s.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
<CostStatsPanel :source="source" :status="status" />
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
<ResizeHandle direction="horizontal" @resize="onDetectionsResize" />
|
||||
<div class="stats-col">
|
||||
<Panel title="Pipeline" :status="status">
|
||||
<div class="pipeline-stats">
|
||||
<div class="stat" v-for="s in [
|
||||
{ label: 'Frames', value: stats?.frames_extracted ?? '—' },
|
||||
{ label: 'After filter', value: stats?.frames_after_scene_filter ?? '—' },
|
||||
{ label: 'Regions', value: stats?.regions_detected ?? '—' },
|
||||
{ label: 'OCR resolved', value: stats?.regions_resolved_by_ocr ?? '—' },
|
||||
{ label: 'VLM escalated', value: stats?.regions_escalated_to_local_vlm ?? '—' },
|
||||
{ label: 'Cloud escalated', value: stats?.regions_escalated_to_cloud_llm ?? '—' },
|
||||
]" :key="s.label">
|
||||
<span class="label">{{ s.label }}</span>
|
||||
<span class="value">{{ s.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
<CostStatsPanel :source="source" :status="status" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</SplitPane>
|
||||
</template>
|
||||
</SplitPane>
|
||||
|
||||
<!-- === BBOX EDITOR MODE === -->
|
||||
<template v-else-if="pipeline.layoutMode === 'bbox_editor'">
|
||||
<div class="editor-layout">
|
||||
<!-- Top: frame + sliders side by side -->
|
||||
<div class="editor-top">
|
||||
<div class="editor-frame">
|
||||
<div v-else-if="pipeline.layoutMode === 'bbox_editor'" class="editor-layout">
|
||||
<div class="editor-top">
|
||||
<SplitPane direction="horizontal" :initial-size="210" size-mode="px" :min="210" :max="350" anchor="second">
|
||||
<template #first>
|
||||
<FramePanel :source="source" :status="status" :overlays="editorOverlays" :frame-image="currentFrameImage" :editor-boxes="editorBoxes" />
|
||||
</div>
|
||||
<ResizeHandle direction="horizontal" @resize="onSlidersResize" />
|
||||
<div class="editor-sliders" :style="{ width: slidersWidth + 'px' }">
|
||||
<StageConfigSliders
|
||||
v-if="pipeline.editorStage"
|
||||
:stage="pipeline.editorStage"
|
||||
:job-id="jobId"
|
||||
:frame-image="currentFrameImage"
|
||||
:frame-ref="currentFrameRef"
|
||||
:frames="checkpointFrames"
|
||||
:selection-start="stripSelStart"
|
||||
:selection-end="stripSelEnd"
|
||||
@replay-result="onReplayResult"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #second>
|
||||
<div class="editor-sliders">
|
||||
<StageConfigSliders
|
||||
v-if="pipeline.editorStage"
|
||||
:stage="pipeline.editorStage"
|
||||
:job-id="jobId"
|
||||
:frame-image="currentFrameImage"
|
||||
:frame-ref="currentFrameRef"
|
||||
:frames="checkpointFrames"
|
||||
:selection-start="stripSelStart"
|
||||
:selection-end="stripSelEnd"
|
||||
@replay-result="onReplayResult"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</SplitPane>
|
||||
</div>
|
||||
|
||||
<FrameStrip
|
||||
v-if="checkpointFrames.length > 0"
|
||||
:frames="checkpointFrames"
|
||||
:current-index="checkpointFrameIndex"
|
||||
:selection-start="stripSelStart"
|
||||
:selection-end="stripSelEnd"
|
||||
@frame-click="setCheckpointFrame"
|
||||
@selection-change="(s, e) => { stripSelStart.value = s; stripSelEndOverride.value = e }"
|
||||
/>
|
||||
|
||||
<div class="editor-bottom">
|
||||
<div class="overlay-controls">
|
||||
<template v-if="editorOverlays.length > 0">
|
||||
<label v-for="(overlay, idx) in editorOverlays" :key="idx" class="overlay-toggle">
|
||||
<input type="checkbox" v-model="overlay.visible" />
|
||||
<span class="overlay-label">{{ overlay.label }}</span>
|
||||
<input
|
||||
type="range"
|
||||
min="0" max="1" step="0.05"
|
||||
:value="overlay.opacity ?? 0.5"
|
||||
@input="(e: Event) => overlay.opacity = Number((e.target as HTMLInputElement).value)"
|
||||
class="opacity-slider"
|
||||
/>
|
||||
<span class="opacity-value">{{ Math.round((overlay.opacity ?? 0.5) * 100) }}%</span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
<button class="editor-close" @click="pipeline.closeEditor()">✕ Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Frame strip: thumbnails + selection handles -->
|
||||
<FrameStrip
|
||||
v-if="checkpointFrames.length > 0"
|
||||
:frames="checkpointFrames"
|
||||
:current-index="checkpointFrameIndex"
|
||||
:selection-start="stripSelStart"
|
||||
:selection-end="stripSelEnd"
|
||||
@frame-click="setCheckpointFrame"
|
||||
@selection-change="(s, e) => { stripSelStart.value = s; stripSelEndOverride.value = e }"
|
||||
/>
|
||||
|
||||
<!-- Bottom: debug overlays + close -->
|
||||
<div class="editor-bottom">
|
||||
<div class="overlay-controls">
|
||||
<template v-if="editorOverlays.length > 0">
|
||||
<label v-for="(overlay, idx) in editorOverlays" :key="idx" class="overlay-toggle">
|
||||
<input type="checkbox" v-model="overlay.visible" />
|
||||
<span class="overlay-label">{{ overlay.label }}</span>
|
||||
<input
|
||||
type="range"
|
||||
min="0" max="1" step="0.05"
|
||||
:value="overlay.opacity ?? 0.5"
|
||||
@input="(e: Event) => overlay.opacity = Number((e.target as HTMLInputElement).value)"
|
||||
class="opacity-slider"
|
||||
/>
|
||||
<span class="opacity-value">{{ Math.round((overlay.opacity ?? 0.5) * 100) }}%</span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
<!-- === STAGE EDITOR MODE === -->
|
||||
<Panel v-else-if="pipeline.layoutMode === 'stage_editor'" :title="`Stage Config — ${pipeline.editorStage?.replace(/_/g, ' ')}`" :status="status">
|
||||
<div class="editor-placeholder">
|
||||
<div class="editor-config">
|
||||
<p>Stage: <strong>{{ pipeline.editorStage }}</strong></p>
|
||||
<p>Config fields will be auto-generated from stage registry</p>
|
||||
<button class="editor-close" @click="pipeline.closeEditor()">✕ Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- === STAGE EDITOR MODE === -->
|
||||
<template v-else-if="pipeline.layoutMode === 'stage_editor'">
|
||||
<Panel :title="`Stage Config — ${pipeline.editorStage?.replace(/_/g, ' ')}`" :status="status">
|
||||
<div class="editor-placeholder">
|
||||
<div class="editor-config">
|
||||
<p>Stage: <strong>{{ pipeline.editorStage }}</strong></p>
|
||||
<p>Config fields will be auto-generated from stage registry</p>
|
||||
<button class="editor-close" @click="pipeline.closeEditor()">✕ Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</template>
|
||||
</Panel>
|
||||
|
||||
<!-- === SOURCE SELECTOR MODE === -->
|
||||
<template v-else-if="pipeline.layoutMode === 'source_selector'">
|
||||
<SourceSelector @job-started="onJobStarted" />
|
||||
</template>
|
||||
<SourceSelector v-else-if="pipeline.layoutMode === 'source_selector'" @job-started="onJobStarted" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</SplitPane>
|
||||
|
||||
<!-- Bottom bar: Log or Blob viewer depending on mode -->
|
||||
<div class="log-row">
|
||||
@@ -328,54 +295,6 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
|
||||
|
||||
.job-id { color: var(--text-dim); font-size: var(--font-size-sm); margin-left: auto; }
|
||||
|
||||
/* Main layout: pipeline left, content right — both same height */
|
||||
.main-layout {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pipeline-col {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pipeline-col > * { flex: 1; }
|
||||
|
||||
.content-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Content rows */
|
||||
.viewer-row {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.viewer-row > * { flex: 1; overflow: hidden; }
|
||||
|
||||
/* Detections (75%) + Stats (25%) side by side, bottom-aligned with pipeline */
|
||||
.detections-stats-row {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.detections-col {
|
||||
flex: 3;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
}
|
||||
.detections-col > * { flex: 1; display: flex; flex-direction: column; }
|
||||
|
||||
.stats-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@@ -385,24 +304,6 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
|
||||
}
|
||||
.stats-col > * { flex: 1; }
|
||||
|
||||
.detections-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.timeline-section {
|
||||
min-height: 60px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.table-section {
|
||||
min-height: 60px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Pipeline stats list */
|
||||
.pipeline-stats {
|
||||
display: flex;
|
||||
@@ -427,7 +328,7 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
|
||||
|
||||
.empty { color: var(--text-dim); padding: var(--space-6); text-align: center; }
|
||||
|
||||
/* Editor layout — frame maximized, sliders right, overlays bottom */
|
||||
/* Editor layout */
|
||||
.editor-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -437,32 +338,17 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
|
||||
}
|
||||
|
||||
.editor-top {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editor-frame {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
.editor-frame > * {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editor-sliders {
|
||||
flex-shrink: 0;
|
||||
min-width: 210px;
|
||||
padding: var(--space-2);
|
||||
background: var(--surface-2);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.editor-bottom {
|
||||
|
||||
Reference in New Issue
Block a user