From 8411c9f9ecc27890774d0bf9d8e6fa0b38f0594b Mon Sep 17 00:00:00 2001
From: Michael Behrisch <m.behrisch@uu.nl>
Date: Sat, 24 Feb 2024 08:26:44 +0100
Subject: [PATCH] fix: sets up communication from NLVis to outside for node
selection event
Update selectedNodes prop and add setSelectedNodes function
---
.../nodelink/components/NLPixi.tsx | 18 +++++++++++++++++-
.../visualizations/nodelink/nodelinkvis.tsx | 9 +++++++--
2 files changed, 24 insertions(+), 3 deletions(-)
diff --git a/libs/shared/lib/vis/visualizations/nodelink/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelink/components/NLPixi.tsx
index da7aebdc6..0bb9dab76 100644
--- a/libs/shared/lib/vis/visualizations/nodelink/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelink/components/NLPixi.tsx
@@ -16,7 +16,8 @@ type Props = {
onClick: (node: NodeType, pos: IPointData) => void;
// onHover: (data: { node: NodeType; pos: IPointData }) => void;
// onUnHover: (data: { node: NodeType; pos: IPointData }) => void;
- highlightNodes: NodeType[];
+ selectedNodes: NodeType[];
+ setSelectedNodes: (nodes: NodeType[]) => void;
currentShortestPathEdges?: LinkType[];
highlightedLinks?: LinkType[];
graph?: GraphType;
@@ -925,10 +926,19 @@ export const NLPixi = (props: Props) => {
} else {
node.selected = false;
}
+
updateNode(node);
});
};
+
+
+ // if this code is uncommented selection updates will be instantaniously pushed.
+ // if (props.graph) {
+ // props.setSelectedNodes(props.graph.nodes.filter((node) => node.selected === true));
+ // }
+
+
if (isDragging) {
checkNodesWithinPolygon();
}
@@ -939,6 +949,10 @@ export const NLPixi = (props: Props) => {
isDragging = false;
lassoSelection.clear();
points = []; // Clear the points array
+
+ if (props.graph) {
+ props.setSelectedNodes(props.graph.nodes.filter((node) => node.selected === true));
+ }
};
if (!viewport.current) throw Error('Viewport is undefined');
@@ -954,6 +968,8 @@ export const NLPixi = (props: Props) => {
props.graph.nodes.forEach((node) => {
node.selected = false;
});
+
+ props.setSelectedNodes([]);
update();
};
diff --git a/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx b/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx
index 690b3125f..a6c6683df 100644
--- a/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx
@@ -37,7 +37,7 @@ const displayName = 'NodeLinkVis';
export const NodeLinkVis = React.memo(({ data, ml, dispatch, localConfig }: VisualizationPropTypes<typeof displayName>) => {
const ref = useRef<HTMLDivElement>(null);
const [graph, setGraph] = useImmer<GraphType | undefined>(undefined);
- const [highlightNodes, setHighlightNodes] = useState<NodeType[]>([]);
+ const [selectedNodes, setSelectedNodes] = useState<NodeType[]>([]);
const [highlightedLinks, setHighlightedLinks] = useState<LinkType[]>([]);
useEffect(() => {
@@ -89,12 +89,17 @@ export const NodeLinkVis = React.memo(({ data, ml, dispatch, localConfig }: Visu
}
};
+ useEffect(() => {
+ console.log('selectedNodes', selectedNodes);
+ }, [selectedNodes]);
+
return (
<>
<div className="h-full w-full overflow-hidden" ref={ref}>
<NLPixi
graph={graph}
- highlightNodes={highlightNodes}
+ selectedNodes={selectedNodes}
+ setSelectedNodes={setSelectedNodes}
highlightedLinks={highlightedLinks}
onClick={(node, pos) => {
onClickedNode(node, ml);
--
GitLab