Function useGraphVisuals

ui/src/components/graph/useGraphVisuals.ts:73–166

(
  graph: Graph,
  layoutReady: boolean,
  visualState: VisualState,
  layoutConfig: LayoutConfig,
  _degreeMap: Map<string, number>,
  isLargeGraph: boolean,
)

 * Never touches x/y positions.
 */
export function useGraphVisuals(
  graph: Graph,
  layoutReady: boolean,
  visualState: VisualState,
  layoutConfig: LayoutConfig,
  _degreeMap: Map<string, number>,
  isLargeGraph: boolean,
): void {
  const themeKey = useThemeKey();

  useEffect(() => {
    if (!layoutReady || graph.order === 0) return;

    const {
      colorMode,
      highlightNodes,
      highlightLinks,
      labelNodes,
      selectedNodeId,
    } = visualState;

    const { getNodeColor, getLinkColor } = layoutConfig;
    const hasHighlight = highlightNodes.size > 0;

    // Batched node update — single event
    graph.updateEachNodeAttributes((_id, attrs) => {
      const isHighlighted = !hasHighlight || highlightNodes.has(_id);
      const isSelected = _id === selectedNodeId;
      const showLabel = !hasHighlight || labelNodes.has(_id);
      const baseColor =
        ((colorMode === 'community'
          ? attrs._communityColor
          : attrs._typeColor) as string | undefined) ??
        getNodeColor(attrs.nodeType as string);

      // _baseSize and _originalLabel are set once at graph construction
      // (useGraphInstance) so they always reflect the true source values.
      const baseSize = (attrs._baseSize as number) ?? attrs.size;
      const originalLabel =
        (attrs._originalLabel as string | null) ?? attrs.label;

      attrs.color = isHighlighted
        ? baseColor
        : dimColor(baseColor, NODE_OPACITY_DIMMED);
      attrs.size =
        hasHighlight && !isHighlighted
          ? baseSize * NODE_SIZE_DIMMED_SCALE
          : baseSize;
      attrs.borderColor = isSelected ? baseColor : undefined;
      attrs.borderSize = isSelected ? 3 : 0;
      attrs.label = hasHighlight && !isHighlighted ? null : originalLabel;
      attrs.forceLabel = showLabel && hasHighlight;
      attrs.zIndex = isSelected ? 2 : isHighlighted && hasHighlight ? 1 : 0;
      // highlighted → renders on the hover layer (above edges canvas)
      attrs.highlighted = hasHighlight && isHighlighted;
      return attrs;
    });