diff --git a/interactive-computational-graph/src/components/GraphContainer.tsx b/interactive-computational-graph/src/components/GraphContainer.tsx index 6276d0c..7ba0780 100644 --- a/interactive-computational-graph/src/components/GraphContainer.tsx +++ b/interactive-computational-graph/src/components/GraphContainer.tsx @@ -688,7 +688,7 @@ const GraphContainer: FunctionComponent = ({ const selectedNodeIds = params.nodes.map((node) => node.id); - coreGraphAdapter.updateSelectedNodes(selectedNodeIds); + coreGraphAdapter.updateSelectedNodeIds(selectedNodeIds); setReactFlowNodes((nodes) => updateReactFlowNodeHighlighted( diff --git a/interactive-computational-graph/src/features/CoreGraphAdapter.test.ts b/interactive-computational-graph/src/features/CoreGraphAdapter.test.ts index 623b07a..e7c093f 100644 --- a/interactive-computational-graph/src/features/CoreGraphAdapter.test.ts +++ b/interactive-computational-graph/src/features/CoreGraphAdapter.test.ts @@ -419,7 +419,7 @@ describe("events", () => { adapter.onExplainDerivativeDataUpdated(explainDerivativeDataUpdated); - adapter.updateSelectedNodes(["1"]); + adapter.updateSelectedNodeIds(["1"]); const firstCallArgs = explainDerivativeDataUpdated.mock.calls[0]; const data = firstCallArgs[0]; @@ -435,7 +435,7 @@ describe("events", () => { adapter.onExplainDerivativeDataUpdated(explainDerivativeDataUpdated); - adapter.updateSelectedNodes(["1"]); + adapter.updateSelectedNodeIds(["1"]); const expectedData: ExplainDerivativeData[] = []; expect(explainDerivativeDataUpdated).toHaveBeenCalledWith(expectedData); @@ -451,7 +451,7 @@ describe("behavior", () => { addConnection(adapter, "1", "2", "a"); adapter.setTargetNode("1"); - adapter.updateSelectedNodes(["1"]); + adapter.updateSelectedNodeIds(["1"]); const edges = buildReactFlowEdges([["1", "2", "a"]]); // Should remove edge first diff --git a/interactive-computational-graph/src/features/CoreGraphAdapter.ts b/interactive-computational-graph/src/features/CoreGraphAdapter.ts index ed6c286..4f2e360 100644 --- a/interactive-computational-graph/src/features/CoreGraphAdapter.ts +++ b/interactive-computational-graph/src/features/CoreGraphAdapter.ts @@ -290,7 +290,7 @@ cycle`; if (hasRemovedNodes) { this.updateTargetNode(); - this.updateSelectedNodeIds(); + this.selectedNodeIds = this.getExistingSelectedNodeIdsByGraph(); this.updateOutputs(); } @@ -334,12 +334,6 @@ cycle`; this.emitTargetNodeUpdated(); } - private updateSelectedNodeIds(): void { - this.selectedNodeIds = this.selectedNodeIds.filter((selectedNodeId) => - this.graph.hasNode(selectedNodeId), - ); - } - changeEdges(changes: EdgeChange[], edges: Edge[]): void { const removeEdges = this.findEdgesToRemove(changes, edges); @@ -447,7 +441,7 @@ cycle`; ); } - updateSelectedNodes(selectedNodeIds: string[]): void { + updateSelectedNodeIds(selectedNodeIds: string[]): void { this.selectedNodeIds = selectedNodeIds; this.updateExplainDerivativeData(); @@ -459,7 +453,8 @@ cycle`; if (targetNodeId === null) { explainDerivativeData = []; } else { - explainDerivativeData = this.selectedNodeIds.map( + const existingSelectedNodeIds = this.getExistingSelectedNodeIdsByGraph(); + explainDerivativeData = existingSelectedNodeIds.map( (nodeId): ExplainDerivativeData => { const nodeName = this.getNodeNameById(nodeId); const explainDerivativeType = this.getExplainDerivativeType(nodeId); @@ -511,6 +506,12 @@ cycle`; return "someValueBecauseChainRule"; } + private getExistingSelectedNodeIdsByGraph(): string[] { + return this.selectedNodeIds.filter((selectedNodeId) => + this.graph.hasNode(selectedNodeId), + ); + } + getVisibleNodeNames(): string[] { return this.getVisibleNodeIds().map((nodeId) => this.getNodeNameById(nodeId), @@ -569,6 +570,7 @@ cycle`; this.dummyInputNodeIdToNodeIds = new Map( Object.entries(state.dummyInputNodeIdToNodeIds), ); + this.selectedNodeIds = []; } private connectDummyInputNode(nodeId: string, portId: string): void { @@ -726,7 +728,6 @@ cycle`; this.graph.updateFValues(); this.graph.updateDerivatives(); - this.updateExplainDerivativeData(); } private loadGraphNodes( diff --git a/interactive-computational-graph/src/states/GraphContainerState.ts b/interactive-computational-graph/src/states/GraphContainerState.ts index ea4d1f5..1abe52b 100644 --- a/interactive-computational-graph/src/states/GraphContainerState.ts +++ b/interactive-computational-graph/src/states/GraphContainerState.ts @@ -1,3 +1,4 @@ +import { type ReactFlowJsonObject } from "reactflow"; import type CoreGraphAdapterState from "./CoreGraphAdapterState"; import type FeatureOperationState from "./FeatureOperationState"; import type NodeNameBuilderState from "./NodeNameBuilderState"; @@ -18,7 +19,7 @@ interface GraphContainerState { operationIdsAddedAtLeastOnce: string[]; // React Flow states - reactFlowState: object; + reactFlowState: ReactFlowJsonObject; } export default GraphContainerState;