Function SemanticMap

dashboard/holographic/src/SemanticMap.tsx:86–822

({
  query,
  focus,
}: {
  query?: string;
  focus?: SemanticMapFocus | null;
})

}

export default function SemanticMap({
  query,
  focus,
}: {
  query?: string;
  focus?: SemanticMapFocus | null;
}) {
  const [data, setData] = useState<MemoryProjectionResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [selected, setSelected] = useState<MemoryProjectionPoint | null>(null);
  const [colorBy, setColorBy] = useState<"category" | "bank">("category");
  const [sizeBy, setSizeBy] = useState<"retrievals" | "connections">("retrievals");
  const [hiddenCats, setHiddenCats] = useState<ReadonlySet<string>>(new Set());
  const [selection, setSelection] = useState<ReadonlySet<number> | null>(null);
  const [transform, setTransform] = useState<MapTransform>(IDENTITY);
  const [mode, setMode] = useState<"pan" | "select">("pan");
  const [densityOverride, setDensityOverride] = useState<boolean | null>(null);
  const [tip, setTip] = useState<TooltipState | null>(null);
  const [hovered, setHovered] = useState<PlacedPoint | null>(null);
  const [drag, setDragState] = useState<DragState | null>(null);
  // Mirror drag state in a ref: pointerdown/up can land in the same task
  // (fast clicks, synthetic events) before React commits the state update.
  const dragRef = useRef<DragState | null>(null);
  const setDrag = useCallback((next: DragState | null) => {
    dragRef.current = next;
    setDragState(next);
  }, []);

  const svgRef = useRef<SVGSVGElement>(null);
  const zoomGroupRef = useRef<SVGGElement>(null);
  const transformRef = useRef(transform);
  const commitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const rafRef = useRef(0);

  /**
   * Gesture transforms are applied imperatively (one style write on the zoom
   * group) and committed to React state only when the gesture settles. At a
   * few thousand points, a per-tick state commit plus the `--hv-k` CSS-var
   * invalidation (which recalcs every circle's calc() radius) produced
   * multi-hundred-ms tasks; deferring both keeps wheel/drag at frame rate.
   */
  const applyTransform = useCallback((next: MapTransform, settle = false) => {
    transformRef.current = next;
    const g = zoomGroupRef.current;
    if (g) {
      g.style.transform = `translate(${next.tx}px, ${next.ty}px) scale(${next.k})`;
      if (settle) g.style.setProperty("--hv-k", String(next.k));
    }
    if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
    if (settle) {
      setTransform(next);
    } else {
      commitTimerRef.current = setTimeout(() => {
        const g2 = zoomGroupRef.current;
        if (g2) g2.style.setProperty("--hv-k", String(transformRef.current.k));
        setTransform(transformRef.current);
      }, 90);