Function GraphPlayground

ui/src/components/stories/GraphPlayground.tsx:47–611

({
  dataset: initialDataset,
  width: widthProp,
  height: heightProp,
}: GraphPlaygroundProps)

}

export default function GraphPlayground({
  dataset: initialDataset,
  width: widthProp,
  height: heightProp,
}: GraphPlaygroundProps) {
  // ── Dataset selection ──────────────────────────────────────────────
  const [currentDataset, setCurrentDataset] = useState<Dataset>(
    initialDataset ?? DATASETS[0],
  );
  const { nodes, links } = currentDataset;

  // ── Dimensions ─────────────────────────────────────────────────────
  const containerRef = useRef<HTMLDivElement>(null);
  const width = widthProp ?? 900;
  const height = heightProp ?? 600;

  // ── Graph ref ──────────────────────────────────────────────────────
  const graphRef = useRef<GraphCanvasHandle>(null);

  // ── Search ─────────────────────────────────────────────────────────
  const [searchQuery, setSearchQuery] = useState('');
  const [activeSearch, setActiveSearch] = useState('');
  const [hops, setHops] = useState(2);

  // ── Selection ──────────────────────────────────────────────────────
  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
  const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);

  // ── Color / Display ────────────────────────────────────────────────
  const [colorMode, setColorMode] = useState<'type' | 'community'>('type');
  const [labelsVisible, setLabelsVisible] = useState(true);

  // ── Physics ────────────────────────────────────────────────────────
  const [repulsion, setRepulsion] = useState(D.repulsion);
  const [isPhysicsRunning, setIsPhysicsRunning] = useState(true);

  // ── Pixi-specific ──────────────────────────────────────────────────
  const [linkDistance, setLinkDistance] = useState(D.pixiLinkDist);
  const [centerStrength, setCenterStrength] = useState(D.pixiCenter);
  const [edgesEnabled, setEdgesEnabled] = useState(D.edgesVisible);
  const [layoutMode, setLayoutMode] = useState<'spread' | 'compact'>(
    D.layoutMode,
  );
  const [zoomSizeExponent, setZoomSizeExponent] = useState(D.pixiZoomExponent);

  // ── Filters ────────────────────────────────────────────────────────
  const [hiddenNodeTypes, setHiddenNodeTypes] = useState<Set<string>>(
    new Set(),
  );
  const [hiddenLinkTypes, setHiddenLinkTypes] = useState<Set<string>>(
    new Set(),
  );

  // ── Side panel ─────────────────────────────────────────────────────
  const [showFilters, setShowFilters] = useState(true);
  const [showSettings, setShowSettings] = useState(false);

  // ── Computed data ──────────────────────────────────────────────────