@petrarca/sonnet-graph 0.5.0 → 0.7.0

package/dist/index.js

@@ -185,6 +185,10 @@ var EMPTY_NORMALIZED = {
 // src/stores/Selection.ts
 import { create } from "zustand";
 import { devLog } from "@petrarca/sonnet-core";
+var MAX_NODE_SELECTION = 2;
+function evictToMax(selected, id, max = MAX_NODE_SELECTION) {
+  return [...selected.filter((existing) => existing !== id), id].slice(-max);
+}
 function createSelectionStore() {
   return create()((set, get) => ({
     selectedNodeIds: [],
@@ -1046,7 +1050,7 @@ function useGraphStores() {
   const ctx = useContext(GraphStoresContext);
   if (!ctx) {
     throw new Error(
-      "useGraphStores must be used within a GraphStoresProvider. Wrap your graph UI with <GraphStoresContext.Provider value={...}>."
+      "useGraphStores must be used within a GraphStoresContext.Provider. Wrap your graph UI with <GraphStoresContext.Provider value={...}>."
     );
   }
   return ctx;
@@ -1063,6 +1067,9 @@ function useWorkspaceGraphExploration() {
 function useWorkspaceSelection() {
   return useGraphStores().selection;
 }
+function useWorkspaceGraphFocus() {
+  return useGraphStores().graphFocus;
+}
 
 // src/hooks/useStableRef.ts
 import { useCallback, useRef } from "react";
@@ -1082,12 +1089,13 @@ function useLiveGraphData() {
   const useGraphFilter2 = useWorkspaceGraphFilter();
   const useGraphData2 = useWorkspaceGraphData();
   const useGraphExploration = useWorkspaceGraphExploration();
+  const useGraphFocus2 = useWorkspaceGraphFocus();
   const lastDataChangeTime = useGraphFilter2((s) => s.lastDataChangeTime);
   const filterLabels = useGraphFilter2((s) => s.nodeLabelFilters);
   const allLabelsDisabled = useGraphFilter2((s) => s.allLabelsDisabled);
   const edgeFilterLabels = useGraphFilter2((s) => s.edgeLabelFilters);
   const allEdgeLabelsDisabled = useGraphFilter2((s) => s.allEdgeLabelsDisabled);
-  const overrideElementIds = GraphFocus_default((s) => s.overrideElementIds);
+  const overrideElementIds = useGraphFocus2((s) => s.overrideElementIds);
   const isFocusMode = useGraphExploration((s) => s.isFocusMode);
   const focusedNodeIds = useGraphExploration((s) => s.focusedNodeIds);
   const hiddenElementIds = useGraphExploration((s) => s.hiddenElementIds);
@@ -1104,8 +1112,8 @@ function useLiveGraphData() {
     hiddenCount: hiddenElementIds.size
   });
   useEffect(() => {
-    GraphFocus_default.getState().clearOverrides();
-  }, [lastDataChangeTime]);
+    useGraphFocus2.getState().clearOverrides();
+  }, [lastDataChangeTime, useGraphFocus2]);
   const allLabelCounts = useMemo(() => {
     if (isValueSet) return {};
     const counts = {};
@@ -1302,9 +1310,10 @@ function useLiveGraphData() {
     };
   }, [stats, availableNodes.length, availableEdges.length]);
   useEffect(() => {
-    const { clearOverrides } = GraphFocus_default.getState();
+    const { clearOverrides } = useGraphFocus2.getState();
     clearOverrides();
   }, [
+    useGraphFocus2,
     filterLabels,
     allLabelsDisabled,
     edgeFilterLabels,
@@ -2102,6 +2111,7 @@ function ReaGraph({
   const useGraphSelection = useWorkspaceSelection();
   const useGraphFilter2 = useWorkspaceGraphFilter();
   const useGraphExploration = useWorkspaceGraphExploration();
+  const useGraphFocus2 = useWorkspaceGraphFocus();
   const hiddenElementIds = useGraphExploration((s) => s.hiddenElementIds);
   const isFocusMode = useGraphExploration((s) => s.isFocusMode);
   const hasHiddenElements = hiddenElementIds.size > 0;
@@ -2125,7 +2135,7 @@ function ReaGraph({
     type: "multi"
   });
   useEffect3(() => {
-    const unsubscribe = GraphFocus_default.subscribe((state) => {
+    const unsubscribe = useGraphFocus2.subscribe((state) => {
       const focusAction = state.focusAction;
       if (!focusAction || !canvas.current) return;
       devLog8("[ReGraph] Processing focus action", {
@@ -2143,11 +2153,11 @@ function ReaGraph({
         setSelectedEdge
       );
       if (handled) {
-        GraphFocus_default.setState({ focusAction: null });
+        useGraphFocus2.setState({ focusAction: null });
       }
     });
     return unsubscribe;
-  }, [nodes, edges, setSelectedNodeIds, setSelectedEdge]);
+  }, [nodes, edges, setSelectedNodeIds, setSelectedEdge, useGraphFocus2]);
   useEffect3(() => {
     if (!canvas.current) return;
     clearSelections();
@@ -2222,7 +2232,13 @@ function ReaGraph({
   }
   function handleNodeClick(node) {
     setSelectedEdge(null);
-    if (selections.length < 2 && onNodeClick) onNodeClick(node);
+    if (!onNodeClick) return;
+    const alreadySelected = selections.includes(node.id);
+    if (alreadySelected || selections.length < MAX_NODE_SELECTION) {
+      onNodeClick(node);
+      return;
+    }
+    setSelections(evictToMax(selections, node.id));
   }
   function handleEdgeClick(edge) {
     const startNode = normalized.nodesById[edge.data.start_id_ + ""];
@@ -2257,10 +2273,8 @@ function ReaGraph({
   }
   useEffect3(() => {
     if (!isMountedRef.current) return;
-    if (selections.length > 0 && selections.length <= 2) {
-      const selectedNodes = selections.map((id) => nodes.find((n) => n.id === id)).filter(Boolean);
-      setSelectedNodeIds(selectedNodes.map((n) => n.id));
-    }
+    const selectedNodes = selections.map((id) => nodes.find((n) => n.id === id)).filter(Boolean);
+    setSelectedNodeIds(selectedNodes.map((n) => n.id));
   }, [selections, nodes]);
   useEffect3(() => {
     if (!isMountedRef.current) return;
@@ -3133,6 +3147,7 @@ function applyLayout({
   }
 }
 function processPendingFocus({
+  focusStore,
   cy,
   pendingFocus,
   edgesRef,
@@ -3157,7 +3172,7 @@ function processPendingFocus({
         }
       );
       pendingFocusActionRef.current = null;
-      GraphFocus_default.setState({ focusAction: null });
+      focusStore.setState({ focusAction: null });
       return;
     }
     cy.animate(
@@ -3177,7 +3192,7 @@ function processPendingFocus({
       });
     }
     pendingFocusActionRef.current = null;
-    GraphFocus_default.setState({ focusAction: null });
+    focusStore.setState({ focusAction: null });
   }, 100);
 }
 function selectFocusedElement({
@@ -3220,6 +3235,7 @@ function selectFocusedElement({
   }
 }
 function handleFocusStateChange({
+  focusStore,
   focusAction,
   cyRef,
   edgesRef,
@@ -3240,6 +3256,7 @@ function handleFocusStateChange({
   const element = cy.$id(elementId);
   if (element.length > 0) {
     handleImmediateFocus({
+      focusStore,
       cy,
       element,
       focusAction,
@@ -3256,7 +3273,7 @@ function handleFocusStateChange({
     elementType: focusAction.elementType
   });
   pendingFocusActionRef.current = focusAction;
-  GraphFocus_default.setState((state) => {
+  focusStore.setState((state) => {
     const overrides = new Set(state.overrideElementIds);
     overrides.add(elementId);
     if (focusAction.elementType === "edge") {
@@ -3280,6 +3297,7 @@ function handleFocusStateChange({
   });
 }
 function handleImmediateFocus({
+  focusStore,
   cy,
   element,
   focusAction,
@@ -3310,7 +3328,7 @@ function handleImmediateFocus({
       selectedEdgeRef
     });
   }
-  GraphFocus_default.setState({ focusAction: null });
+  focusStore.setState({ focusAction: null });
 }
 function computeGraphViewState({
   hasNodes,
@@ -3400,16 +3418,14 @@ function setupCytoscapeEventHandlers({
       updateSelectedEdge(null);
     }
     let selectedIds = evtCy.$("node:selected").map((e) => e.id());
-    if (selectedIds.length > 2) {
-      const currentOrder = [...selectedNodeIdsRef.current];
-      const updatedOrder = [...currentOrder.filter((cid) => cid !== id), id];
-      const keep = updatedOrder.slice(-2);
+    if (selectedIds.length > MAX_NODE_SELECTION) {
+      const keep = evictToMax(selectedNodeIdsRef.current, id);
       evtCy.batch(() => {
         evtCy.$("node:selected").unselect();
         keep.forEach((kid) => evtCy.$id(kid).select());
       });
       selectedIds = keep;
-      devLog10("[CytoscapeGraph] enforced max 2 after select", { keep });
+      devLog10("[CytoscapeGraph] enforced max selection after select", { keep });
     }
     updateSelectedNodeIds(selectedIds);
   });
@@ -3491,6 +3507,7 @@ function CytoscapeGraph({
   const useGraphFilter2 = useWorkspaceGraphFilter();
   const useGraphExploration = useWorkspaceGraphExploration();
   const useSelection3 = useWorkspaceSelection();
+  const useGraphFocus2 = useWorkspaceGraphFocus();
   const lastDataChangeTime = useGraphFilter2((s) => s.lastDataChangeTime);
   const resetView = useGraphExploration((s) => s.resetView);
   const hasHiddenElements = useGraphExploration(
@@ -3782,6 +3799,7 @@ function CytoscapeGraph({
     const pendingFocus = pendingFocusActionRef.current;
     if (pendingFocus) {
       processPendingFocus({
+        focusStore: useGraphFocus2,
         cy,
         pendingFocus,
         edgesRef,
@@ -3799,8 +3817,9 @@ function CytoscapeGraph({
     clearSelectionStore();
   }, [lastDataChangeTime, clearSelectionStore]);
   useEffect4(() => {
-    const unsubscribe = GraphFocus_default.subscribe((state) => {
+    const unsubscribe = useGraphFocus2.subscribe((state) => {
       handleFocusStateChange({
+        focusStore: useGraphFocus2,
         focusAction: state.focusAction,
         cyRef,
         edgesRef,
@@ -3813,7 +3832,12 @@ function CytoscapeGraph({
       });
     });
     return unsubscribe;
-  }, [baseNormalized, setSelectedEdgeStore, setSelectedNodeIdsStore]);
+  }, [
+    baseNormalized,
+    setSelectedEdgeStore,
+    setSelectedNodeIdsStore,
+    useGraphFocus2
+  ]);
   const updateLayout = (newLayout) => {
     setCurrentLayout(newLayout);
   };
@@ -4385,7 +4409,6 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import { cn as cn2 } from "@petrarca/sonnet-core";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var SR_ONLY = "absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)] [clip-path:inset(50%)] -m-px";
-var MAX_NODE_SELECTION = 2;
 function GraphA11yList({
   visible = false,
   rowHeight = 28,
@@ -4437,7 +4460,7 @@ function GraphA11yList({
         setSelectedNodeIds(selectedNodeIds.filter((x) => x !== id));
         return;
       }
-      setSelectedNodeIds([...selectedNodeIds, id].slice(-MAX_NODE_SELECTION));
+      setSelectedNodeIds(evictToMax(selectedNodeIds, id));
     },
     [selectedNodeIds, setSelectedNodeIds, setSelectedEdge]
   );
@@ -6040,7 +6063,7 @@ function createEditorStores() {
     expandNode: async () => ({ nodes: [], edges: [], has_more: false }),
     getNodes: async () => []
   });
-  return { graphFilter, graphData, graphExploration, selection };
+  return { graphFilter, graphData, graphExploration, selection, graphFocus };
 }
 function loadModel(stores, model) {
   const { nodes: rawNodes, edges: rawEdges } = modelToGraph(model);
@@ -7476,6 +7499,7 @@ export {
   useWorkspaceGraphData,
   useWorkspaceGraphExploration,
   useWorkspaceGraphFilter,
+  useWorkspaceGraphFocus,
   useWorkspaceSelection,
   validateCapabilities,
   validateGraphCapabilities