feat: add guided demo view
This commit is contained in:
root
98
src/components/CurrentProofCard.tsx
Normal file
98
src/components/CurrentProofCard.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import { DIMENSION_LIMITS } from '../domain/classifier';
|
||||
import type { SimulationState } from '../domain/types';
|
||||
|
||||
export default function CurrentProofCard({ simulation }: { simulation: SimulationState }) {
|
||||
const current = simulation.currentItem;
|
||||
const result = current?.classification;
|
||||
const item = current?.item;
|
||||
const dimensions = item?.dimensionsMm;
|
||||
const lowConfidence = Boolean(item && item.confidence < 0.65);
|
||||
const stopped = simulation.machineState === 'FAULT' || simulation.machineState === 'EMERGENCY_STOP';
|
||||
|
||||
if (!current) {
|
||||
return (
|
||||
<section className="proof-card proof-card-empty">
|
||||
<div className="proof-card-inner">
|
||||
<p className="eyebrow">Awaiting cycle</p>
|
||||
<h2>Ready to demonstrate sorting cycle</h2>
|
||||
<p>The demo will show detection, classification, control command and routing to B/C/D.</p>
|
||||
<div className="evidence-chain empty-chain">
|
||||
<span>Detection</span>
|
||||
<span className="arrow">→</span>
|
||||
<span>Classification</span>
|
||||
<span className="arrow">→</span>
|
||||
<span>Command</span>
|
||||
<span className="arrow">→</span>
|
||||
<span>Actuator</span>
|
||||
<span className="arrow">→</span>
|
||||
<span>Route</span>
|
||||
<span className="arrow">→</span>
|
||||
<span>Log</span>
|
||||
</div>
|
||||
<p className="start-prompt">Click <strong>Start Guided Demo</strong> or Next to begin.</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={`proof-card ${stopped ? 'proof-card-stopped' : ''}`}>
|
||||
<div className="panel-heading">
|
||||
<p className="eyebrow">Current Item Proof</p>
|
||||
<h2>{item?.name} (ID: {item?.id})</h2>
|
||||
</div>
|
||||
<div className="proof-grid">
|
||||
<div className="proof-item">
|
||||
<span className="proof-label">Dimensions</span>
|
||||
<strong className={result?.dimensionsPass === false ? 'fail-text' : ''}>
|
||||
{dimensions?.width} x {dimensions?.depth} x {dimensions?.height} mm
|
||||
</strong>
|
||||
</div>
|
||||
<div className="proof-item">
|
||||
<span className="proof-label">Roundness</span>
|
||||
<strong className={result?.roundnessPass === false && result?.dimensionsPass ? 'fail-text' : ''}>
|
||||
{item?.roundness.toFixed(2)}
|
||||
</strong>
|
||||
</div>
|
||||
<div className="proof-item">
|
||||
<span className="proof-label">Confidence</span>
|
||||
<strong className={lowConfidence ? 'warn-text' : ''}>
|
||||
{(item?.confidence ?? 0 * 100).toFixed(0)}%
|
||||
</strong>
|
||||
</div>
|
||||
<div className="proof-item">
|
||||
<span className="proof-label">Category</span>
|
||||
<strong className={`category-${result?.category}`}>{result?.category}</strong>
|
||||
</div>
|
||||
<div className="proof-item">
|
||||
<span className="proof-label">Command</span>
|
||||
<strong>{simulation.machineState.startsWith('ROUTE_TO_') ? simulation.machineState : 'WAITING'}</strong>
|
||||
</div>
|
||||
<div className="proof-item">
|
||||
<span className="proof-label">Target zone</span>
|
||||
<strong>{result?.category ? `Zone ${result.category}` : '-'}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="proof-reason">
|
||||
<strong>Decision reason:</strong> {result?.reason}
|
||||
{lowConfidence && <p className="warning-note">Low CV confidence — rule-based fallback used</p>}
|
||||
{simulation.machineState === 'FAULT' && <p className="error-note">FAULT: Conveyor stopped, reset required</p>}
|
||||
{simulation.machineState === 'EMERGENCY_STOP' && <p className="error-note">EMERGENCY_STOP: All actuators stopped</p>}
|
||||
{simulation.metrics.queueLength > 1 && <p className="warning-note">Spacing warning: sequential processing enforced</p>}
|
||||
</div>
|
||||
<div className="evidence-chain active-chain">
|
||||
<span className={simulation.machineState === 'DETECTING' ? 'active-step' : 'done-step'}>Detection</span>
|
||||
<span className="arrow">→</span>
|
||||
<span className={simulation.machineState === 'CLASSIFYING' ? 'active-step' : (result ? 'done-step' : '')}>Classification</span>
|
||||
<span className="arrow">→</span>
|
||||
<span className={simulation.machineState.startsWith('ROUTE_TO_') ? 'active-step' : (result ? 'done-step' : '')}>Command</span>
|
||||
<span className="arrow">→</span>
|
||||
<span className={simulation.actuators.pusherC !== 'idle' || simulation.actuators.pusherD !== 'idle' ? 'active-step' : (result ? 'done-step' : '')}>Actuator</span>
|
||||
<span className="arrow">→</span>
|
||||
<span className={simulation.machineState.startsWith('ROUTE_TO_') ? 'active-step' : ''}>Route</span>
|
||||
<span className="arrow">→</span>
|
||||
<span className={simulation.machineState === 'RETURN_HOME' ? 'active-step' : ''}>Log</span>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
182
src/components/GuidedDemoView.tsx
Normal file
182
src/components/GuidedDemoView.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
import { useEffect } from 'react';
|
||||
import SorterScene from './SorterScene';
|
||||
import CurrentProofCard from './CurrentProofCard';
|
||||
import { OZON_CRITERIA } from '../data/criteria';
|
||||
import type { DemoStep, Scenario, ScenarioId, SimulationState, PresentationMode } from '../domain/types';
|
||||
|
||||
interface GuidedDemoViewProps {
|
||||
simulation: SimulationState;
|
||||
scenarios: Scenario[];
|
||||
activeScenarioId: ScenarioId;
|
||||
presentationMode: PresentationMode;
|
||||
safeDemoEnabled: boolean;
|
||||
demoSteps: DemoStep[];
|
||||
demoStepIndex: number;
|
||||
currentDemoStep: DemoStep;
|
||||
pendingFaultStepId?: string;
|
||||
onStart: () => void;
|
||||
onPause: () => void;
|
||||
onReset: () => void;
|
||||
onStep: () => void;
|
||||
onScenarioChange: (scenarioId: ScenarioId) => void;
|
||||
onPresentationModeChange: (mode: any) => void;
|
||||
onSafeDemoChange: (enabled: boolean) => void;
|
||||
onDemoStepChange: (index: number) => void;
|
||||
onApplyDemoStepScenario: (step: DemoStep) => void;
|
||||
onRunPreferredAction: (step: DemoStep) => void;
|
||||
onRestartDemo: () => void;
|
||||
}
|
||||
|
||||
export default function GuidedDemoView({
|
||||
simulation,
|
||||
scenarios,
|
||||
activeScenarioId,
|
||||
demoSteps,
|
||||
demoStepIndex,
|
||||
currentDemoStep,
|
||||
pendingFaultStepId,
|
||||
safeDemoEnabled,
|
||||
onStart,
|
||||
onPause,
|
||||
onReset,
|
||||
onStep,
|
||||
onPresentationModeChange,
|
||||
onDemoStepChange,
|
||||
onApplyDemoStepScenario,
|
||||
onRunPreferredAction,
|
||||
onRestartDemo,
|
||||
}: GuidedDemoViewProps) {
|
||||
const isFaultStep = currentDemoStep.scenarioId === 'jam' || currentDemoStep.scenarioId === 'emergency_stop';
|
||||
const pendingFaultConfirmation = pendingFaultStepId === currentDemoStep.id;
|
||||
|
||||
const handleStartDemo = () => {
|
||||
if (!simulation.currentItem && demoStepIndex === 0 && !simulation.running) {
|
||||
onRunPreferredAction(currentDemoStep);
|
||||
} else if (demoStepIndex === 0 && simulation.running) {
|
||||
onRestartDemo();
|
||||
} else {
|
||||
onRunPreferredAction(currentDemoStep);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
onDemoStepChange(demoStepIndex + 1);
|
||||
};
|
||||
|
||||
const handlePrevious = () => {
|
||||
onDemoStepChange(demoStepIndex - 1);
|
||||
};
|
||||
|
||||
const relatedCriteriaList = OZON_CRITERIA.filter(c => currentDemoStep.relatedCriteria.includes(c.id));
|
||||
|
||||
return (
|
||||
<div className="guided-demo-layout">
|
||||
{/* 1. Top Demo Header */}
|
||||
<header className="guided-header">
|
||||
<div className="guided-header-left">
|
||||
<p className="eyebrow">Guided Sorting Demo</p>
|
||||
<h1>Step {demoStepIndex + 1} / {demoSteps.length}: {currentDemoStep.title}</h1>
|
||||
</div>
|
||||
<div className="guided-header-center">
|
||||
<div className={`status-pill status-${simulation.systemStatus.toLowerCase()}`}>
|
||||
<span />
|
||||
{simulation.systemStatus}
|
||||
</div>
|
||||
<div className="scenario-label">Scenario: {simulation.scenario.name}</div>
|
||||
</div>
|
||||
<div className="guided-header-right">
|
||||
<button className="primary-action" onClick={handleStartDemo}>
|
||||
{simulation.currentItem ? 'Restart Guided Demo' : 'Start Guided Demo'}
|
||||
</button>
|
||||
<div className="nav-actions">
|
||||
<button onClick={handlePrevious} disabled={demoStepIndex === 0}>Previous</button>
|
||||
<button onClick={handleNext} disabled={demoStepIndex === demoSteps.length - 1}>Next</button>
|
||||
</div>
|
||||
<button onClick={onReset}>Reset</button>
|
||||
<button onClick={() => onPresentationModeChange('engineering')}>Back to Engineering</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Grid */}
|
||||
<main className="guided-grid">
|
||||
{/* 2. Large Scene Area */}
|
||||
<section className="guided-left">
|
||||
<div className="panel panel-scene guided-scene-panel">
|
||||
<SorterScene simulation={simulation} />
|
||||
<div className="guided-metrics-strip">
|
||||
<div className="guided-metric">
|
||||
<span>Cycle Time</span>
|
||||
<strong>{simulation.metrics.avgCycleTimeMs} ms</strong>
|
||||
</div>
|
||||
<div className="guided-metric">
|
||||
<span>CV Latency</span>
|
||||
<strong>{simulation.metrics.cvLatencyMs} ms</strong>
|
||||
</div>
|
||||
<div className="guided-metric">
|
||||
<span>Actuator Latency</span>
|
||||
<strong>{simulation.metrics.actuatorLatencyMs} ms</strong>
|
||||
</div>
|
||||
<div className="guided-metric">
|
||||
<span>Throughput</span>
|
||||
<strong>{simulation.metrics.throughputItemsPerMin} items/min</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Right Column */}
|
||||
<aside className="guided-right">
|
||||
{/* 3. Current Proof Card */}
|
||||
<CurrentProofCard simulation={simulation} />
|
||||
|
||||
{/* 4. Demo Narration Card */}
|
||||
<section className="panel guided-narration">
|
||||
<div className="panel-heading">
|
||||
<p className="eyebrow">Demo Narration</p>
|
||||
<h2>{currentDemoStep.title}</h2>
|
||||
</div>
|
||||
<p className="explanation">{currentDemoStep.explanation}</p>
|
||||
<div className="narration-details">
|
||||
<div>
|
||||
<strong>Watch:</strong> {currentDemoStep.whatToWatch}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Jury Value:</strong> {currentDemoStep.juryValue}
|
||||
</div>
|
||||
</div>
|
||||
<blockquote className="presenter-phrase">
|
||||
"{currentDemoStep.presenterPhrase}"
|
||||
</blockquote>
|
||||
{isFaultStep && safeDemoEnabled && (
|
||||
<button
|
||||
className={`fault-confirm-btn ${pendingFaultConfirmation ? 'pending' : ''}`}
|
||||
onClick={() => onApplyDemoStepScenario(currentDemoStep)}
|
||||
>
|
||||
{pendingFaultConfirmation ? 'Click again to confirm fault scenario' : 'Apply fault scenario'}
|
||||
</button>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* 5. Criteria Snapshot */}
|
||||
<section className="panel guided-criteria">
|
||||
<div className="panel-heading">
|
||||
<p className="eyebrow">Criteria Snapshot</p>
|
||||
<h2>This step covers</h2>
|
||||
</div>
|
||||
<div className="criteria-list-mini">
|
||||
{relatedCriteriaList.map(c => (
|
||||
<div key={c.id} className="criterion-mini">
|
||||
<div className="criterion-mini-header">
|
||||
<strong>{c.title}</strong>
|
||||
<span className={`criterion-status status-${c.status.replace(/ /g, '-')}`}>{c.status}</span>
|
||||
</div>
|
||||
<p>{c.evidence}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -34,7 +34,8 @@ export default function Header({
|
||||
<div className="header-status">
|
||||
<div className="mode-toggle" role="group" aria-label="Dashboard mode">
|
||||
<button className={presentationMode === 'engineering' ? 'active' : ''} onClick={() => onPresentationModeChange('engineering')}>Engineering Mode</button>
|
||||
<button className={presentationMode === 'presentation' ? 'active' : ''} onClick={() => onPresentationModeChange('presentation')}>Presentation Mode</button>
|
||||
<button className={presentationMode === 'presentation' ? 'active' : ''} onClick={() => onPresentationModeChange('presentation')}>Presentation Dashboard</button>
|
||||
<button className={presentationMode === 'guided' ? 'active' : ''} onClick={() => onPresentationModeChange('guided')}>Guided Demo</button>
|
||||
</div>
|
||||
{presentationMode === 'presentation' ? (
|
||||
<button className={safeDemoEnabled ? 'safe-demo-toggle active' : 'safe-demo-toggle'} onClick={() => onSafeDemoChange(!safeDemoEnabled)}>
|
||||
|
||||
Reference in New Issue
Block a user