@johndimm/constellations 1.0.0

package/hooks/useGraphState.ts

@@ -0,0 +1,414 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { GraphNode, GraphLink } from '../types';
+import { LockedPair, findWikipediaTitle } from '../services/geminiService';
+import { fetchServerImage } from '../services/imageService';
+import { dedupeGraph } from '../services/graphUtils';
+import { GraphHandle } from '../components/Graph';
+
+interface UseGraphStateOptions {
+    cacheEnabled: boolean;
+    cacheBaseUrl: string;
+}
+
+export function useGraphState(options: UseGraphStateOptions) {
+    const { cacheEnabled, cacheBaseUrl } = options;
+
+    const [graphData, setGraphData] = useState<{ nodes: GraphNode[], links: GraphLink[] }>({ nodes: [], links: [] });
+    const { nodes, links } = graphData;
+    const graphDataRef = useRef(graphData);
+
+    useEffect(() => {
+        graphDataRef.current = graphData;
+    }, [graphData]);
+
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);
+    const [selectedLink, setSelectedLink] = useState<GraphLink | null>(null);
+
+    const [isCompact, setIsCompact] = useState(false);
+    const [isTimelineMode, setIsTimelineMode] = useState(false);
+    const [isTextOnly, setIsTextOnly] = useState(false);
+    const [searchMode, setSearchMode] = useState<'explore' | 'connect'>('explore');
+    const [error, setError] = useState<string | null>(null);
+    const [isKeyReady, setIsKeyReady] = useState(false);
+    const [searchId, setSearchId] = useState(0);
+    const searchIdRef = useRef(0);
+
+    useEffect(() => {
+        searchIdRef.current = searchId;
+    }, [searchId]);
+
+    const [lockedPair, setLockedPair] = useState<LockedPair>({ atomicType: "Person", compositeType: "Event" });
+    const lockedPairRef = useRef<LockedPair>(lockedPair);
+    useEffect(() => { lockedPairRef.current = lockedPair; }, [lockedPair]);
+
+    const nodesRef = useRef<GraphNode[]>([]);
+    useEffect(() => {
+        nodesRef.current = nodes;
+    }, [nodes]);
+
+    const selectedNodeRef = useRef<GraphNode | null>(null);
+    useEffect(() => {
+        selectedNodeRef.current = selectedNode;
+    }, [selectedNode]);
+
+    const autoExpandMoreDoneRef = useRef<Set<string | number>>(new Set());
+
+    const [deletePreview, setDeletePreview] = useState<{ keepIds: (number | string)[], dropIds: (number | string)[] } | null>(null);
+    const [pathNodeIds, setPathNodeIds] = useState<(number | string)[]>([]);
+    const [newlyExpandedNodeIds, setNewlyExpandedNodeIds] = useState<(number | string)[]>([]);
+    const [expandingNodeId, setExpandingNodeId] = useState<number | string | null>(null);
+    const [newChildNodeIds, setNewChildNodeIds] = useState<Set<number | string>>(new Set());
+    const [helpHover, setHelpHover] = useState<string | null>(null);
+
+    const [notification, setNotification] = useState<{ message: string, type: 'success' | 'error' } | null>(null);
+    useEffect(() => {
+        if (!notification) return;
+        const timer = setTimeout(() => setNotification(null), 5000);
+        return () => clearTimeout(timer);
+    }, [notification]);
+
+    const [confirmDialog, setConfirmDialog] = useState<{ isOpen: boolean, message: string, onConfirm: () => void } | null>(null);
+    const [contextMenu, setContextMenu] = useState<{ node: GraphNode; x: number; y: number } | null>(null);
+
+    const [panelCollapsed, setPanelCollapsed] = useState(false);
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const [sidebarToggleSignal, setSidebarToggleSignal] = useState(0);
+    const [peopleBrowserOpen, setPeopleBrowserOpen] = useState(false);
+    const [savedGraphs, setSavedGraphs] = useState<string[]>([]);
+
+    const [dimensions, setDimensions] = useState({ width: window.innerWidth, height: window.innerHeight });
+    useEffect(() => {
+        const handleResize = () => setDimensions({ width: window.innerWidth, height: window.innerHeight });
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    const graphRef = useRef<GraphHandle>(null);
+
+    // Prevent image "flapping"
+    const imageReqTokenRef = useRef<Map<string | number, number>>(new Map());
+
+    const saveCacheNodeMeta = useCallback(async (
+        nodeId: number | string,
+        meta: {
+            imageUrl?: string | null,
+            wikiSummary?: string | null,
+            wikipedia_id?: string | null,
+            mentioningPageTitles?: string[] | null
+        },
+        fallbackNode?: Partial<GraphNode> & { id: number | string; type?: string; title: string }
+    ) => {
+        if (!cacheEnabled) return;
+        const node = nodesRef.current.find(n => String(n.id) === String(nodeId)) || fallbackNode;
+        if (!node || !node.type) return;
+        try {
+            const metaToSend: any = {};
+            const img = meta.imageUrl ?? (node as any).imageUrl;
+            const wiki = meta.wikiSummary ?? (node as any).wikiSummary;
+            const wikiId = meta.wikipedia_id ?? (node as any).wikipedia_id;
+            const mentioning = meta.mentioningPageTitles ?? (node as any).mentioningPageTitles;
+            if (img) metaToSend.imageUrl = img;
+            if (wiki) metaToSend.wikiSummary = wiki;
+            if (wikiId) metaToSend.wikipedia_id = wikiId;
+            if (mentioning) metaToSend.mentioningPageTitles = mentioning;
+            await fetch(new URL("/node", cacheBaseUrl).toString(), {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    id: node.id,
+                    title: node.title,
+                    type: node.type,
+                    description: node.description || "",
+                    year: node.year ?? null,
+                    meta: metaToSend,
+                    wikipedia_id: wikiId || node.wikipedia_id
+                })
+            });
+        } catch (e) {
+            // console.warn("Cache node save failed", e);
+        }
+    }, [cacheEnabled, cacheBaseUrl]);
+
+    const loadNodeImage = useCallback(async (
+        nodeId: number | string,
+        title: string,
+        context?: string,
+        fallbackNode?: Partial<GraphNode> & { id: number | string; type?: string; title: string },
+        opts?: { force?: boolean }
+    ) => {
+        if (isTextOnly) return;
+
+        const force = !!opts?.force;
+        const current = graphDataRef.current.nodes.find(n => String(n.id) === String(nodeId));
+        if (!force) {
+            if (current?.imageUrl) return;
+            if (current?.fetchingImage) return;
+            if (current?.imageChecked) return;
+        }
+
+        const nextToken = (imageReqTokenRef.current.get(String(nodeId)) || 0) + 1;
+        imageReqTokenRef.current.set(String(nodeId), nextToken);
+
+        setGraphData(prev => ({
+            ...prev,
+            nodes: prev.nodes.map(n => String(n.id) === String(nodeId) ? { ...n, fetchingImage: true, imageChecked: true } : n)
+        }));
+
+        const imageBaseUrl = cacheEnabled ? cacheBaseUrl : window.location.origin;
+        const effectiveType = context || current?.type || fallbackNode?.type || "";
+        const effectiveYear = (current?.year ?? (fallbackNode as any)?.year) as number | undefined;
+
+        // Avoid ambiguity for common screen-work titles like "The Killing" (1956 film vs 2011 TV series).
+        // Prefer a Wikipedia-style disambiguated title when we have a year and the title is not already disambiguated.
+        const looksDisambiguated = /\([^)]*\)/.test(title);
+        const typeLower = String(effectiveType).toLowerCase();
+        const isFilmLike = /\b(film|movie)\b/.test(typeLower);
+        const isTvLike = /\b(tv|television|series|miniseries|show)\b/.test(typeLower);
+        const isScreenLike = isFilmLike || isTvLike;
+        const titleForImage =
+            !looksDisambiguated && isScreenLike && effectiveYear
+                ? `${title} (${effectiveYear} ${isFilmLike ? "film" : "TV series"})`
+                : title;
+        const contextForImage =
+            effectiveYear && isScreenLike
+                ? `${effectiveType} ${effectiveYear}`.trim()
+                : effectiveType;
+
+        const imageResult = await fetchServerImage(titleForImage, contextForImage, imageBaseUrl);
+        if ((imageReqTokenRef.current.get(String(nodeId)) || 0) !== nextToken) return;
+
+        if (imageResult.url) {
+            setGraphData(prev => ({
+                ...prev,
+                nodes: prev.nodes.map(n => {
+                    if (String(n.id) !== String(nodeId)) return n;
+                    if (!force && n.imageUrl) return { ...n, fetchingImage: false, imageChecked: true };
+                    return {
+                        ...n,
+                        imageUrl: imageResult.url,
+                        image_wikipedia_id: (imageResult as any).pageId?.toString(),
+                        image_wikipedia_title: (imageResult as any).pageTitle,
+                        fetchingImage: false,
+                        imageChecked: true
+                    };
+                })
+            }));
+            // Persist the new image to the cache
+            const wikiId = (imageResult as any).pageId?.toString();
+            saveCacheNodeMeta(nodeId, { imageUrl: imageResult.url, wikipedia_id: wikiId }, fallbackNode);
+        } else {
+            setGraphData(prev => ({
+                ...prev,
+                nodes: prev.nodes.map(n => String(n.id) === String(nodeId) ? { ...n, fetchingImage: false, imageChecked: true } : n)
+            }));
+        }
+    }, [isTextOnly, cacheEnabled, cacheBaseUrl, saveCacheNodeMeta]);
+
+    const handleFindBetterImage = useCallback(async (nodeId: number | string) => {
+        const node = graphDataRef.current.nodes.find(n => String(n.id) === String(nodeId));
+        if (!node) return;
+
+        setGraphData(prev => ({
+            ...prev,
+            nodes: prev.nodes.map(n => String(n.id) === String(nodeId) ? { ...n, fetchingImage: true } : n)
+        }));
+
+        setNotification({ message: `AI is looking for ${node.title}'s correct photo...`, type: 'success' });
+
+        try {
+            try {
+                const imgCache: Map<string, string | null> | undefined = (window as any).__wikiImageCache;
+                if (imgCache && typeof imgCache.delete === 'function') {
+                    imgCache.delete(node.title.trim().toLowerCase());
+                }
+            } catch { }
+
+            const aiSuggestion = await findWikipediaTitle(node.title, node.description);
+            if (aiSuggestion) {
+                const { title: betterTitle, imageHint } = aiSuggestion;
+                try {
+                    const imgCache: Map<string, string | null> | undefined = (window as any).__wikiImageCache;
+                    if (imgCache && typeof imgCache.delete === 'function') {
+                        if (betterTitle) imgCache.delete(betterTitle.trim().toLowerCase());
+                        if (imageHint) imgCache.delete(imageHint.trim().toLowerCase());
+                    }
+                } catch { }
+
+                if (imageHint) {
+                    const imageBaseUrl = cacheEnabled ? cacheBaseUrl : window.location.origin;
+                    const imageResult = await fetchServerImage(imageHint, node.type, imageBaseUrl);
+                    if (imageResult.url) {
+                        setGraphData(prev => ({
+                            ...prev,
+                            nodes: prev.nodes.map(n => String(n.id) === String(nodeId) ? {
+                                ...n,
+                                imageUrl: imageResult.url,
+                                image_wikipedia_id: (imageResult as any).pageId?.toString(),
+                                image_wikipedia_title: (imageResult as any).pageTitle,
+                                fetchingImage: false,
+                                imageChecked: true
+                            } : n)
+                        }));
+                        // Persist the new image to the cache
+                        const wikiId = (imageResult as any).pageId?.toString();
+                        saveCacheNodeMeta(nodeId, { imageUrl: imageResult.url, wikipedia_id: wikiId });
+                        setNotification({ message: "Better photo found via AI hint!", type: 'success' });
+                        return;
+                    }
+                }
+
+                await loadNodeImage(nodeId, betterTitle, node.type, undefined, { force: true });
+                const updated = graphDataRef.current.nodes.find(n => String(n.id) === String(nodeId));
+                if (updated?.imageUrl) {
+                    setNotification({ message: "Better photo found!", type: 'success' });
+                    return;
+                }
+            }
+
+            await loadNodeImage(nodeId, node.title, node.type, undefined, { force: true });
+            const updated = graphDataRef.current.nodes.find(n => String(n.id) === String(nodeId));
+            if (updated?.imageUrl) {
+                setNotification({ message: "Photo updated!", type: 'success' });
+                return;
+            }
+
+            const imageBaseUrl = cacheEnabled ? cacheBaseUrl : window.location.origin;
+            const serverResult = await fetchServerImage(node.title, node.type, imageBaseUrl);
+            if (serverResult.url) {
+                setGraphData(prev => ({
+                    ...prev,
+                    nodes: prev.nodes.map(n => String(n.id) === String(nodeId) ? {
+                        ...n,
+                        imageUrl: serverResult.url,
+                        fetchingImage: false,
+                        imageChecked: true
+                    } : n)
+                }));
+                saveCacheNodeMeta(nodeId, { imageUrl: serverResult.url });
+                setNotification({ message: "Image found via server lookup.", type: 'success' });
+                return;
+            }
+
+            setNotification({ message: "No better photo found.", type: 'error' });
+        } catch (e) {
+            // console.error("Find better image failed", e);
+            setNotification({ message: "Failed to find better photo.", type: 'error' });
+        } finally {
+            setGraphData(prev => ({
+                ...prev,
+                nodes: prev.nodes.map(n => String(n.id) === String(nodeId) ? { ...n, fetchingImage: false } : n)
+            }));
+        }
+    }, [cacheEnabled, cacheBaseUrl, loadNodeImage, saveCacheNodeMeta, setNotification]);
+
+    // Global safety net: dedupe graph whenever nodes/links change
+    useEffect(() => {
+        const deduped = dedupeGraph(nodes, links);
+        const normalizedNodes = deduped.nodes.map(n => {
+            if (n.is_atomic === undefined && typeof (n as any).is_person === 'boolean') {
+                return { ...n, is_atomic: (n as any).is_person };
+            }
+            return n;
+        });
+
+        const nodesChanged =
+            normalizedNodes.length !== nodes.length ||
+            normalizedNodes.some((n, i) => n.id !== nodes[i]?.id || n.is_atomic !== nodes[i]?.is_atomic);
+        const linksChanged =
+            deduped.links.length !== links.length ||
+            deduped.links.some((l, i) => l.id !== links[i]?.id);
+
+        if (nodesChanged || linksChanged) {
+            setGraphData({ nodes: normalizedNodes, links: deduped.links });
+        }
+    }, [nodes, links]);
+
+    // Load saved graphs on init
+    useEffect(() => {
+        const loadSavedGraphs = async () => {
+            if (cacheEnabled && cacheBaseUrl) {
+                try {
+                    const res = await fetch(new URL("/graphs", cacheBaseUrl).toString());
+                    if (res.ok) {
+                        const data = await res.json();
+                        // Endpoint returns array of { name, updated_at }
+                        const serverGraphs = data.map((g: any) => g.name);
+                        setSavedGraphs(serverGraphs.sort());
+                    }
+                } catch (e) {
+                    // console.warn("Failed to fetch saved graphs from server", e);
+                }
+            }
+        };
+        loadSavedGraphs();
+    }, [cacheEnabled, cacheBaseUrl]);
+
+    return {
+        graphData,
+        setGraphData,
+        nodes,
+        links,
+        graphDataRef,
+        isProcessing,
+        setIsProcessing,
+        selectedNode,
+        setSelectedNode,
+        selectedLink,
+        setSelectedLink,
+        isCompact,
+        setIsCompact,
+        isTimelineMode,
+        setIsTimelineMode,
+        isTextOnly,
+        setIsTextOnly,
+        error,
+        setError,
+        isKeyReady,
+        setIsKeyReady,
+        searchId,
+        setSearchId,
+        searchIdRef,
+        lockedPair,
+        setLockedPair,
+        lockedPairRef,
+        nodesRef,
+        selectedNodeRef,
+        autoExpandMoreDoneRef,
+        loadNodeImage,
+        handleFindBetterImage,
+        saveCacheNodeMeta,
+        deletePreview,
+        setDeletePreview,
+        pathNodeIds,
+        setPathNodeIds,
+        newlyExpandedNodeIds,
+        setNewlyExpandedNodeIds,
+        expandingNodeId,
+        setExpandingNodeId,
+        newChildNodeIds,
+        setNewChildNodeIds,
+        helpHover,
+        setHelpHover,
+        notification,
+        setNotification,
+        confirmDialog,
+        setConfirmDialog,
+        contextMenu,
+        setContextMenu,
+        panelCollapsed,
+        setPanelCollapsed,
+        sidebarCollapsed,
+        setSidebarCollapsed,
+        sidebarToggleSignal,
+        setSidebarToggleSignal,
+        peopleBrowserOpen,
+        setPeopleBrowserOpen,
+        dimensions,
+        graphRef,
+        savedGraphs,
+        setSavedGraphs,
+        searchMode,
+        setSearchMode
+    };
+}

package/hooks/useKioskMode.ts

@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react';
+import {
+    KioskDomain,
+    hasLocalKioskDomains,
+    loadKioskDomains,
+    saveKioskDomains,
+    loadSelectedKioskDomainId,
+    saveSelectedKioskDomainId
+} from '../kioskDomains';
+
+export function useKioskMode() {
+    // Admin mode: enables editing kiosk domains in-app (requires keyboard/mouse)
+    const [isAdminMode] = useState(() => {
+        try {
+            const params = new URLSearchParams(window.location.search);
+            return params.get('admin') === '1';
+        } catch {
+            return false;
+        }
+    });
+
+    const [kioskDomains, setKioskDomains] = useState<KioskDomain[]>(() => loadKioskDomains());
+    const [selectedKioskDomainId, setSelectedKioskDomainId] = useState<string>(() =>
+        loadSelectedKioskDomainId(loadKioskDomains())
+    );
+
+    useEffect(() => {
+        // Persistence is currently disabled.
+        // const persistEnabled = isAdminMode || hasLocalKioskDomains();
+        // if (!persistEnabled) return;
+        // try { saveKioskDomains(kioskDomains); } catch { }
+        // try { saveSelectedKioskDomainId(selectedKioskDomainId); } catch { }
+    }, [kioskDomains, selectedKioskDomainId, isAdminMode]);
+
+    const selectedKioskDomain = kioskDomains.find(d => d.id === selectedKioskDomainId) || kioskDomains[0];
+    const kioskSeedTerms = selectedKioskDomain?.terms || [];
+
+    return {
+        isAdminMode,
+        kioskDomains,
+        setKioskDomains,
+        selectedKioskDomainId,
+        setSelectedKioskDomainId,
+        selectedKioskDomain,
+        kioskSeedTerms
+    };
+}

package/hooks/useNodeClickHandler.ts

@@ -0,0 +1,172 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { GraphNode, GraphLink } from '../types';
+
+export type NodeContextMenuState = { node: GraphNode; x: number; y: number };
+
+export type NodeClickHandlers = {
+    selectedNode: GraphNode | null;
+    setSelectedNode: (node: GraphNode | null) => void;
+    setContextMenu: (menu: NodeContextMenuState | null) => void;
+    graphData?: { nodes: GraphNode[]; links: GraphLink[] };
+    setExpandingNodeId?: (id: string | number | null) => void;
+    setNewChildNodeIds?: (ids: Set<string>) => void;
+    onDebug?: (message: string) => void;
+    onDeselect?: () => void;
+    onClearSecondarySelection?: () => void;
+    onRetryImage?: (node: GraphNode) => void;
+    onConnectSelect?: (node: GraphNode) => void;
+    onExpandedSelect?: (node: GraphNode) => void;
+    onExpand?: (node: GraphNode) => void | Promise<void>;
+    onNavigate?: (node: GraphNode) => void;
+    selectOnFirstClick?: boolean;
+    shouldExpand?: (node: GraphNode) => boolean;
+    getMenuPosition?: (node: GraphNode, event?: MouseEvent) => { x: number; y: number };
+};
+
+export const useNodeClickHandler = ({
+    selectedNode,
+    setSelectedNode,
+    setContextMenu,
+    graphData,
+    setExpandingNodeId,
+    setNewChildNodeIds,
+    onDebug,
+    onDeselect,
+    onClearSecondarySelection,
+    onRetryImage,
+    onConnectSelect,
+    onExpandedSelect,
+    onExpand,
+    onNavigate,
+    selectOnFirstClick = true,
+    shouldExpand,
+    getMenuPosition
+}: NodeClickHandlers) => {
+    const lastSelectedIdRef = useRef<number | string | null>(selectedNode?.id ?? null);
+    const lastClickRef = useRef<{ id: number | string; at: number } | null>(null);
+
+    useEffect(() => {
+        lastSelectedIdRef.current = selectedNode?.id ?? null;
+    }, [selectedNode]);
+
+    return useCallback(async (node: GraphNode | null, event?: MouseEvent) => {
+        if (!node) {
+            setSelectedNode(null);
+            setContextMenu(null);
+            lastSelectedIdRef.current = null;
+            onDebug?.('click: none -> clear selection');
+            onDeselect?.();
+            return;
+        }
+
+        onRetryImage?.(node);
+        onConnectSelect?.(node);
+
+        const now = Date.now();
+        const isDoubleClick = !!event && typeof event.detail === 'number' && event.detail >= 2;
+
+        setContextMenu(null);
+        onClearSecondarySelection?.();
+
+        if (node.expanded || node.isLoading) {
+            setSelectedNode(node);
+            lastSelectedIdRef.current = node.id;
+            onExpandedSelect?.(node);
+            onNavigate?.(node);
+            lastClickRef.current = { id: node.id, at: now };
+            onDebug?.(`click: ${node.title} -> select expanded:${!!node.expanded} loading:${!!node.isLoading}`);
+
+            // Highlight the clicked node and all its connected nodes
+            if (graphData && setExpandingNodeId && setNewChildNodeIds) {
+                const connectedNodeIds: string[] = [];
+                graphData.links.forEach(link => {
+                    const sourceId = String(typeof link.source === 'object' ? (link.source as any).id : link.source);
+                    const targetId = String(typeof link.target === 'object' ? (link.target as any).id : link.target);
+
+                    if (String(sourceId) === String(node.id)) {
+                        connectedNodeIds.push(String(targetId));
+                    } else if (String(targetId) === String(node.id)) {
+                        connectedNodeIds.push(String(sourceId));
+                    }
+                });
+
+                setExpandingNodeId(node.id);
+                setNewChildNodeIds(new Set(connectedNodeIds));
+                onDebug?.(`highlight: ${node.title} + ${connectedNodeIds.length} connected nodes`);
+            }
+
+            /** Double-click on an already-expanded node opens the context menu (was unreachable next block). */
+            if (isDoubleClick && node.expanded && !node.isLoading) {
+                const pos = getMenuPosition
+                    ? getMenuPosition(node, event)
+                    : { x: event?.clientX ?? window.innerWidth / 2, y: event?.clientY ?? window.innerHeight / 2 };
+                setContextMenu({ node, x: pos.x, y: pos.y });
+                onDebug?.(`click: ${node.title} -> menu (double-click)`);
+                lastClickRef.current = { id: node.id, at: now };
+            }
+
+            return;
+        }
+
+        /**
+         * Unexpanded leaf: both single-click and double-click expand.
+         * A lone programmatic/synthetic click with detail>=2 used to branch to the menu-only path and skip onExpand.
+         */
+
+        if (selectOnFirstClick) {
+            setSelectedNode(node);
+            lastSelectedIdRef.current = node.id;
+            lastClickRef.current = { id: node.id, at: now };
+            onDebug?.(`click: ${node.title} -> select`);
+
+            // Highlight the clicked node and all its connected nodes
+            if (graphData && setExpandingNodeId && setNewChildNodeIds) {
+                const connectedNodeIds: string[] = [];
+                graphData.links.forEach(link => {
+                    const sourceId = String(typeof link.source === 'object' ? (link.source as any).id : link.source);
+                    const targetId = String(typeof link.target === 'object' ? (link.target as any).id : link.target);
+
+                    if (String(sourceId) === String(node.id)) {
+                        connectedNodeIds.push(String(targetId));
+                    } else if (String(targetId) === String(node.id)) {
+                        connectedNodeIds.push(String(sourceId));
+                    }
+                });
+
+                setExpandingNodeId(node.id);
+                setNewChildNodeIds(new Set(connectedNodeIds));
+                onDebug?.(`highlight: ${node.title} + ${connectedNodeIds.length} connected nodes`);
+            }
+        }
+
+        onNavigate?.(node);
+
+        if (!onExpand) return;
+        const should = shouldExpand ? shouldExpand(node) : !(node.expanded || node.isLoading);
+        if (!should) {
+            onDebug?.(`click: ${node.title} -> skip expand`);
+            return;
+        }
+        onDebug?.(`click: ${node.title} -> expand`);
+        await onExpand(node);
+        lastClickRef.current = { id: node.id, at: Date.now() };
+    }, [
+        selectedNode,
+        setSelectedNode,
+        setContextMenu,
+        graphData,
+        setExpandingNodeId,
+        setNewChildNodeIds,
+        onDebug,
+        onDeselect,
+        onClearSecondarySelection,
+        onRetryImage,
+        onConnectSelect,
+        onExpandedSelect,
+        onExpand,
+        onNavigate,
+        selectOnFirstClick,
+        shouldExpand,
+        getMenuPosition
+    ]);
+};