Function SidePanel

dashboard/holographic/src/SemanticMap.tsx:828–1032

({
  placed,
  selection,
  selected,
  onSelect,
  onShowAllCategories,
}: {
  placed: PlacedPoint[];
  selection: ReadonlySet<number> | null;
  selected: MemoryProjectionPoint | null;
  onSelect: (point: MemoryProjectionPoint | null) => void;
  /** Present when legend filters hide every point; restores all categories. */
  onShowAllCategories?: () => void;
})

const ROW_HEIGHT = 46;

function SidePanel({
  placed,
  selection,
  selected,
  onSelect,
  onShowAllCategories,
}: {
  placed: PlacedPoint[];
  selection: ReadonlySet<number> | null;
  selected: MemoryProjectionPoint | null;
  onSelect: (point: MemoryProjectionPoint | null) => void;
  /** Present when legend filters hide every point; restores all categories. */
  onShowAllCategories?: () => void;
}) {
  const { containerRef, onScroll, start, end, totalHeight, offsetTop } =
    useVirtualList({ count: placed.length, rowHeight: ROW_HEIGHT });

  // Projection payloads truncate content at 200 chars; when the pinned fact
  // looks truncated, fetch the full row from the fact-detail endpoint.
  const selectedId = selected?.fact_id;
  const maybeTruncated = (selected?.content?.length ?? 0) >= 200;
  const [detail, setDetail] = useState<{ id: number; content: string } | null>(
    null,
  );
  const [detailFailedId, setDetailFailedId] = useState<number | null>(null);
  useEffect(() => {
    if (selectedId == null || !maybeTruncated) return;
    let cancelled = false;
    setDetailFailedId((prev) => (prev === selectedId ? null : prev));
    api
      .getMemoryFact(selectedId)
      .then((resp) => {
        if (!cancelled) setDetail({ id: selectedId, content: resp.fact.content });
      })
      .catch(() => {
        if (!cancelled) setDetailFailedId(selectedId);
      });
    return () => {
      cancelled = true;
    };
  }, [selectedId, maybeTruncated]);

  const fullContent =
    detail && detail.id === selectedId ? detail.content : null;
  const detailFailed = detailFailedId === selectedId;
  const detailLoading = maybeTruncated && !fullContent && !detailFailed;

  // Single tab stop + arrow-key roving selection (the rows themselves stay
  // buttons for pointer users, but are skipped in the tab order).
  const activeIndex = selected
    ? placed.findIndex((p) => p.point.fact_id === selected.fact_id)
    : -1;

  const moveTo = (index: number) => {
    if (placed.length === 0) return;
    const next = Math.max(0, Math.min(placed.length - 1, index));
    onSelect(placed[next].point);
    const node = containerRef.current;