Add overview workflow guidance

2026-06-20 23:29:34 +02:00
parent f50b25554b
commit 2ccb2fb8e8
7 changed files with 234 additions and 0 deletions
@@ -449,6 +449,67 @@ function App(): JSX.Element {
    }
    setActiveWorkspace('exports')
  }
+  const hasAnalysisOutput = qualityChecks.length > 0 || Boolean(changeDetectionResult) || detectionItems.length > 0 || segmentationItems.length > 0
+  const recommendedWorkflowTarget: WorkspaceKey = !selectedProjectId
+    ? 'data'
+    : datasets.length === 0
+      ? 'data'
+      : mapFeatureCount === 0 && areaFeatureCount === 0
+        ? 'map'
+        : !hasAnalysisOutput
+          ? 'analysis'
+          : exports.length === 0
+            ? 'exports'
+            : 'exports'
+  const workflowGuidanceSteps: Array<{
+    step: string
+    title: string
+    detail: string
+    status: string
+    ready: boolean
+    target: WorkspaceKey
+  }> = [
+    {
+      step: '1',
+      title: 'Project & AOI',
+      detail: selectedProjectId ? `${areas.length} AOI record${areas.length === 1 ? '' : 's'} available` : 'Create or load a project context',
+      status: selectedProjectId ? 'ready' : 'next',
+      ready: Boolean(selectedProjectId),
+      target: 'data',
+    },
+    {
+      step: '2',
+      title: 'Data',
+      detail: datasets.length > 0 ? `${datasets.length} dataset${datasets.length === 1 ? '' : 's'} loaded` : 'Upload source and reference datasets',
+      status: datasets.length > 0 ? 'ready' : 'waiting',
+      ready: datasets.length > 0,
+      target: 'data',
+    },
+    {
+      step: '3',
+      title: 'Map',
+      detail: mapFeatureCount > 0 || areaFeatureCount > 0 ? `${mapFeatureCount + areaFeatureCount} active map feature${mapFeatureCount + areaFeatureCount === 1 ? '' : 's'}` : 'Inspect AOI and selected layer',
+      status: mapFeatureCount > 0 || areaFeatureCount > 0 ? 'ready' : 'waiting',
+      ready: mapFeatureCount > 0 || areaFeatureCount > 0,
+      target: 'map',
+    },
+    {
+      step: '4',
+      title: 'QA / AI',
+      detail: hasAnalysisOutput ? 'QA, change, detection or segmentation output exists' : 'Run checks after data is ready',
+      status: hasAnalysisOutput ? 'ready' : 'waiting',
+      ready: hasAnalysisOutput,
+      target: 'analysis',
+    },
+    {
+      step: '5',
+      title: 'Export',
+      detail: exports.length > 0 ? `${exports.length} export artifact${exports.length === 1 ? '' : 's'} recorded` : 'Package validated project outputs',
+      status: exports.length > 0 ? 'ready' : 'waiting',
+      ready: exports.length > 0,
+      target: 'exports',
+    },
+  ]

  return (
    <div className="app-shell workbench-shell">
@@ -539,6 +600,40 @@ function App(): JSX.Element {
                activeLayerFeatureCount={mapFeatureCount}
                selectedAreaHasGeometry={Boolean(areaFeatureCollection)}
              />
+              <section className="workflow-guidance-panel" aria-label="V1 workflow guidance">
+                <div className="panel-title-row">
+                  <div>
+                    <p className="eyebrow">Workbench flow</p>
+                    <h2>Project to export path</h2>
+                  </div>
+                  <span className="status-badge">
+                    Next: {workspaceNavItems.find((item) => item.key === recommendedWorkflowTarget)?.label ?? 'Overview'}
+                  </span>
+                </div>
+                <div className="workflow-guidance-steps">
+                  {workflowGuidanceSteps.map((step) => (
+                    <button
+                      key={`${step.step}-${step.title}`}
+                      type="button"
+                      className={
+                        step.target === recommendedWorkflowTarget && !step.ready
+                          ? 'workflow-guidance-step workflow-guidance-step-active'
+                          : step.ready
+                            ? 'workflow-guidance-step workflow-guidance-step-ready'
+                            : 'workflow-guidance-step'
+                      }
+                      onClick={() => setActiveWorkspace(step.target)}
+                      aria-label={`Open ${step.title} step`}
+                    >
+                      <span className="workflow-step-status">{step.status}</span>
+                      <strong>
+                        {step.step}. {step.title}
+                      </strong>
+                      <small>{step.detail}</small>
+                    </button>
+                  ))}
+                </div>
+              </section>
              <section className="overview-actions">
                <div className="overview-action-copy">
                  <p className="eyebrow">Recommended flow</p>