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,39 +79,39 @@ 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' }">
|
||||
<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" />
|
||||
</div>
|
||||
<ResizeHandle direction="vertical" @resize="onViewerResize" />
|
||||
|
||||
<div class="detections-stats-row">
|
||||
<div class="detections-col" :style="{ flex: detectionsFlex }">
|
||||
</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">
|
||||
<div class="detections-stack">
|
||||
<div class="timeline-section" :style="{ flex: timelineFlex }">
|
||||
<SplitPane direction="vertical" :initial-size="1" size-mode="ratio" :min="0.3" :max="3">
|
||||
<template #first>
|
||||
<TimelinePanel :source="source" :status="status" :embedded="true" />
|
||||
</div>
|
||||
<ResizeHandle direction="vertical" @resize="onTimelineResize" />
|
||||
<div class="table-section" :style="{ flex: tableFlex }">
|
||||
</template>
|
||||
<template #second>
|
||||
<BrandTablePanel :source="source" :status="status" :embedded="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</SplitPane>
|
||||
</Panel>
|
||||
</div>
|
||||
<ResizeHandle direction="horizontal" @resize="onDetectionsResize" />
|
||||
</template>
|
||||
<template #second>
|
||||
<div class="stats-col">
|
||||
<Panel title="Pipeline" :status="status">
|
||||
<div class="pipeline-stats">
|
||||
@@ -159,19 +130,20 @@ function onSlidersResize(delta: number) {
|
||||
</Panel>
|
||||
<CostStatsPanel :source="source" :status="status" />
|
||||
</div>
|
||||
</div>
|
||||
</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 v-else-if="pipeline.layoutMode === 'bbox_editor'" class="editor-layout">
|
||||
<div class="editor-top">
|
||||
<div class="editor-frame">
|
||||
<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' }">
|
||||
</template>
|
||||
<template #second>
|
||||
<div class="editor-sliders">
|
||||
<StageConfigSliders
|
||||
v-if="pipeline.editorStage"
|
||||
:stage="pipeline.editorStage"
|
||||
@@ -184,9 +156,10 @@ function onSlidersResize(delta: number) {
|
||||
@replay-result="onReplayResult"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</SplitPane>
|
||||
</div>
|
||||
|
||||
<!-- Frame strip: thumbnails + selection handles -->
|
||||
<FrameStrip
|
||||
v-if="checkpointFrames.length > 0"
|
||||
:frames="checkpointFrames"
|
||||
@@ -197,7 +170,6 @@ function onSlidersResize(delta: number) {
|
||||
@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">
|
||||
@@ -218,11 +190,9 @@ function onSlidersResize(delta: number) {
|
||||
<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">
|
||||
<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>
|
||||
@@ -231,15 +201,12 @@ function onSlidersResize(delta: number) {
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</template>
|
||||
|
||||
<!-- === 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 {
|
||||
|
||||
155
ui/framework/src/components/SplitPane.vue
Normal file
155
ui/framework/src/components/SplitPane.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
/** Split direction */
|
||||
direction?: 'horizontal' | 'vertical'
|
||||
/** Initial size of the sized pane (px or flex ratio) */
|
||||
initialSize?: number
|
||||
/** Size mode: 'px' = sized pane fixed in pixels, 'ratio' = flex ratio */
|
||||
sizeMode?: 'px' | 'ratio'
|
||||
/** Which pane is sized: 'first' or 'second'. Default: 'first'. */
|
||||
anchor?: 'first' | 'second'
|
||||
/** Min size (px in px-mode, ratio in ratio-mode) */
|
||||
min?: number
|
||||
/** Max size (px in px-mode, ratio in ratio-mode) */
|
||||
max?: number
|
||||
/** Whether the divider is draggable */
|
||||
resizable?: boolean
|
||||
}>(), {
|
||||
direction: 'horizontal',
|
||||
initialSize: 1,
|
||||
sizeMode: 'ratio',
|
||||
anchor: 'first',
|
||||
min: 0.1,
|
||||
max: 10,
|
||||
resizable: true,
|
||||
})
|
||||
|
||||
const size = ref(props.initialSize)
|
||||
const dragging = ref(false)
|
||||
let startPos = 0
|
||||
|
||||
function onPointerDown(e: PointerEvent) {
|
||||
if (!props.resizable) return
|
||||
dragging.value = true
|
||||
startPos = props.direction === 'horizontal' ? e.clientX : e.clientY
|
||||
const el = e.target as HTMLElement
|
||||
el.setPointerCapture(e.pointerId)
|
||||
}
|
||||
|
||||
function onPointerMove(e: PointerEvent) {
|
||||
if (!dragging.value) return
|
||||
const currentPos = props.direction === 'horizontal' ? e.clientX : e.clientY
|
||||
let delta = currentPos - startPos
|
||||
startPos = currentPos
|
||||
|
||||
// Dragging right/down grows first pane, shrinks second.
|
||||
// If anchor is 'second', invert so dragging grows the second pane.
|
||||
if (props.anchor === 'second') delta = -delta
|
||||
|
||||
if (props.sizeMode === 'px') {
|
||||
size.value = Math.max(props.min, Math.min(props.max, size.value + delta))
|
||||
} else {
|
||||
const scale = props.direction === 'horizontal' ? 0.01 : 0.02
|
||||
size.value = Math.max(props.min, Math.min(props.max, size.value + delta * scale))
|
||||
}
|
||||
}
|
||||
|
||||
function onPointerUp() {
|
||||
dragging.value = false
|
||||
}
|
||||
|
||||
const isHorizontal = computed(() => props.direction === 'horizontal')
|
||||
|
||||
const sizedStyle = computed(() => {
|
||||
if (props.sizeMode === 'px') {
|
||||
return isHorizontal.value
|
||||
? { width: size.value + 'px', flexShrink: '0' }
|
||||
: { height: size.value + 'px', flexShrink: '0' }
|
||||
}
|
||||
return { flex: String(size.value) }
|
||||
})
|
||||
|
||||
const flexStyle = computed(() => ({ flex: '1' }))
|
||||
|
||||
const firstStyle = computed(() => props.anchor === 'first' ? sizedStyle.value : flexStyle.value)
|
||||
const secondStyle = computed(() => props.anchor === 'second' ? sizedStyle.value : flexStyle.value)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="split-pane" :class="[direction]">
|
||||
<div class="split-first" :style="firstStyle">
|
||||
<slot name="first" />
|
||||
</div>
|
||||
<div
|
||||
v-if="resizable"
|
||||
class="split-divider"
|
||||
:class="[direction, { dragging }]"
|
||||
@pointerdown="onPointerDown"
|
||||
@pointermove="onPointerMove"
|
||||
@pointerup="onPointerUp"
|
||||
/>
|
||||
<div class="split-second" :style="secondStyle">
|
||||
<slot name="second" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.split-pane {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.split-pane.horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.split-pane.vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.split-first,
|
||||
.split-second {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Children must fill their pane */
|
||||
.split-first > :deep(*),
|
||||
.split-second > :deep(*) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.split-divider {
|
||||
flex-shrink: 0;
|
||||
background: transparent;
|
||||
transition: background 0.15s;
|
||||
touch-action: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.split-divider:hover,
|
||||
.split-divider.dragging {
|
||||
background: var(--text-dim);
|
||||
}
|
||||
|
||||
.split-divider.horizontal {
|
||||
width: 4px;
|
||||
cursor: col-resize;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
.split-divider.vertical {
|
||||
height: 4px;
|
||||
cursor: row-resize;
|
||||
margin: -2px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -8,6 +8,7 @@ export { useDataSource } from './composables/useDataSource'
|
||||
export { default as Panel } from './components/Panel.vue'
|
||||
export { default as LayoutGrid } from './components/LayoutGrid.vue'
|
||||
export { default as ResizeHandle } from './components/ResizeHandle.vue'
|
||||
export { default as SplitPane } from './components/SplitPane.vue'
|
||||
|
||||
// Renderers
|
||||
export { default as LogRenderer } from './renderers/LogRenderer.vue'
|
||||
|
||||
Reference in New Issue
Block a user