51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import { TopicBadge, TOPICS } from "./TopicBadge";
|
|
|
|
interface Props {
|
|
activeStage: string;
|
|
}
|
|
|
|
const STAGES = [
|
|
{ id: "chunking", label: "Chunker", sub: "File -> Chunks (generator)" },
|
|
{ id: "queued", label: "ChunkQueue", sub: "Bounded queue (backpressure)" },
|
|
{ id: "processing", label: "WorkerPool", sub: "ThreadPoolExecutor" },
|
|
{ id: "collecting", label: "ResultCollector", sub: "heapq reassembly" },
|
|
{ id: "completed", label: "PipelineResult", sub: "Aggregate stats" },
|
|
];
|
|
|
|
/**
|
|
* Visual flow diagram of pipeline stages.
|
|
* Highlights the currently active stage.
|
|
* Interview Topic 4: OOP design — shows class hierarchy.
|
|
*/
|
|
export function PipelineDiagram({ activeStage }: Props) {
|
|
return (
|
|
<div className="pipeline-diagram">
|
|
<div className="panel-header">
|
|
<h2>Pipeline Flow</h2>
|
|
<TopicBadge topic={TOPICS.oop} />
|
|
</div>
|
|
<div className="stage-flow">
|
|
{STAGES.map((stage, i) => (
|
|
<div key={stage.id} className="stage-wrapper">
|
|
<div
|
|
className={`stage ${activeStage === stage.id ? "active" : ""}`}
|
|
>
|
|
<div className="stage-label">{stage.label}</div>
|
|
<div className="stage-sub">{stage.sub}</div>
|
|
</div>
|
|
{i < STAGES.length - 1 && <div className="stage-arrow" />}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="processor-hierarchy">
|
|
<div className="hierarchy-title">Processor ABC</div>
|
|
<div className="hierarchy-children">
|
|
<span className="hierarchy-node">ChecksumProcessor</span>
|
|
<span className="hierarchy-node">SimulatedDecodeProcessor</span>
|
|
<span className="hierarchy-node">CompositeProcessor</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|