Function ProjectGraphCanvas

web/src/components/ProjectGraphFlow.tsx:69–308

(props: {
  graph: ProjectGraphRecord;
  language: SupportedLanguage;
  onOpenEvent: (eventId: string) => void;
  onOpenEntity: (entityId: string) => void;
})

}

function ProjectGraphCanvas(props: {
  graph: ProjectGraphRecord;
  language: SupportedLanguage;
  onOpenEvent: (eventId: string) => void;
  onOpenEntity: (entityId: string) => void;
}) {
  const initialEntityIds = useMemo(
    () => new Set(props.graph.entities.slice(0, ROOT_ENTITY_LIMIT).map((entity) => entity.id)),
    [props.graph.entities]
  );
  const [expandedEntityIds, setExpandedEntityIds] = useState<Set<string>>(
    () => new Set(props.graph.entities[0] ? [props.graph.entities[0].id] : [])
  );
  const [expandedEventIds, setExpandedEventIds] = useState<Set<string>>(new Set());
  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
  const expandedEntityIdsRef = useRef(expandedEntityIds);
  const expandedEventIdsRef = useRef(expandedEventIds);
  const [nodes, setNodes, onNodesChange] = useNodesState<GraphNode>([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState<GraphEdge>([]);
  const { fitView } = useReactFlow<GraphNode, GraphEdge>();
  const clickTimerRef = useRef<number | null>(null);
  const shouldFitViewRef = useRef(true);

  const entityById = useMemo(
    () => new Map(props.graph.entities.map((entity) => [entity.id, entity])),
    [props.graph.entities]
  );
  const eventById = useMemo(
    () => new Map(props.graph.events.map((event) => [event.id, event])),
    [props.graph.events]
  );
  const eventIdsByEntityId = useMemo(() => {
    const map = new Map<string, string[]>();
    for (const edge of props.graph.edges) {
      const eventIds = map.get(edge.entityId) ?? [];
      eventIds.push(edge.eventId);
      map.set(edge.entityId, eventIds);
    }
    for (const [entityId, eventIds] of map.entries()) {
      eventIds.sort((a, b) => compareEvents(eventById.get(a), eventById.get(b)));
      map.set(entityId, eventIds);
    }
    return map;
  }, [eventById, props.graph.edges]);
  const entityIdsByEventId = useMemo(() => {
    const map = new Map<string, string[]>();
    for (const edge of props.graph.edges) {
      const entityIds = map.get(edge.eventId) ?? [];
      entityIds.push(edge.entityId);
      map.set(edge.eventId, entityIds);
    }
    for (const [eventId, entityIds] of map.entries()) {
      entityIds.sort((a, b) => compareEntities(entityById.get(a), entityById.get(b)));
      map.set(eventId, entityIds);
    }
    return map;
  }, [entityById, props.graph.edges]);
  const positionByNodeId = useMemo(