phase 12

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

@@ -4,10 +4,11 @@ import { Panel } from 'mpr-ui-framework'
 import GraphRenderer from 'mpr-ui-framework/src/renderers/GraphRenderer.vue'
 import type { GraphNode } from 'mpr-ui-framework/src/renderers/GraphRenderer.vue'
 import type { DataSource } from 'mpr-ui-framework'
+import { usePipelineStore } from '../stores/pipeline'
 
 const PIPELINE_NODES = [
-  'extract_frames', 'filter_scenes', 'detect_objects', 'run_ocr',
-  'match_brands', 'escalate_vlm', 'escalate_cloud', 'compile_report',
+  'extract_frames', 'filter_scenes', 'detect_objects', 'preprocess',
+  'run_ocr', 'match_brands', 'escalate_vlm', 'escalate_cloud', 'compile_report',
 ]
 
 const props = defineProps<{
@@ -15,6 +16,8 @@ const props = defineProps<{
   status?: 'idle' | 'live' | 'processing' | 'error'
 }>()
 
+const pipeline = usePipelineStore()
+
 const nodes = ref<GraphNode[]>(
   PIPELINE_NODES.map((id) => ({ id, status: 'pending' }))
 )
@@ -22,10 +25,22 @@ const nodes = ref<GraphNode[]>(
 props.source.on<{ nodes: GraphNode[] }>('graph_update', (e) => {
   nodes.value = e.nodes
 })
+
+function onOpenRegionEditor(stage: string) {
+  pipeline.openBBoxEditor(stage)
+}
+
+function onOpenStageEditor(stage: string) {
+  pipeline.openStageEditor(stage)
+}
 </script>
 
 <template>
   <Panel title="Pipeline" :status="status">
-    <GraphRenderer :nodes="nodes" />
+    <GraphRenderer
+      :nodes="nodes"
+      @open-region-editor="onOpenRegionEditor"
+      @open-stage-editor="onOpenStageEditor"
+    />
   </Panel>
 </template>