From d1caad616bca6ef620d4b498696909bf099a64e9 Mon Sep 17 00:00:00 2001
From: "Vink, S.A. (Sjoerd)" <s.a.vink@uu.nl>
Date: Sat, 28 Oct 2023 09:51:48 +0000
Subject: [PATCH] feat(searchResultsNodeLink): search results in nodelink
---
.../lib/vis/nodelink/components/NLPixi.tsx | 21 ++++++++++++++++++-
1 file changed, 20 insertions(+), 1 deletion(-)
diff --git a/libs/shared/lib/vis/nodelink/components/NLPixi.tsx b/libs/shared/lib/vis/nodelink/components/NLPixi.tsx
index bc8117f36..517cc82fb 100644
--- a/libs/shared/lib/vis/nodelink/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/nodelink/components/NLPixi.tsx
@@ -7,7 +7,7 @@ import { select, zoom as d3zoom, drag as d3drag } from 'd3';
import * as force from './NLForce';
import { Viewport } from 'pixi-viewport';
import { GraphQueryResult, GraphQueryResultFromBackendPayload } from '@graphpolaris/shared/lib/data-access/store/graphQueryResultSlice';
-import { useAppDispatch, useML } from '@graphpolaris/shared/lib/data-access';
+import { useAppDispatch, useML, useSearchResultData } from '@graphpolaris/shared/lib/data-access';
import { ML, setShortestPathSource, setShortestPathTarget } from '@graphpolaris/shared/lib/data-access/store/mlSlice';
import { parseQueryResult } from './query2NL';
import { NLPopup } from './NLPopup';
@@ -43,6 +43,7 @@ export const NLPixi = (props: Props) => {
const dragging = useRef<{ node: NodeType; gfx: Graphics } | null>(null);
const onlyClicked = useRef(false);
const dispatch = useAppDispatch();
+ const searchResults = useSearchResultData();
const imperative = useRef<any>(null);
@@ -337,6 +338,24 @@ export const NLPixi = (props: Props) => {
}
}, [props.graph]);
+ useEffect(() => {
+ if (props.graph) {
+ props.graph.nodes.forEach((node: NodeType) => {
+ const gfx = nodeMap.current.get(node.id);
+ if (!gfx) return;
+ const isNodeInSearchResults = searchResults.nodes.some((resultNode) => resultNode.id === node.id);
+ gfx.alpha = isNodeInSearchResults || searchResults.nodes.length === 0 ? 1 : 0.05;
+ });
+
+ props.graph.links.forEach((link: LinkType) => {
+ const gfx = linkMap.current.get(link.id);
+ if (!gfx) return;
+ const isLinkInSearchResults = searchResults.edges.some((resultEdge) => resultEdge.id === link.id);
+ gfx.alpha = isLinkInSearchResults || searchResults.edges.length === 0 ? 1 : 0.05;
+ });
+ }
+ }, [searchResults]);
+
const tick = (delta: number) => {
if (props.graph) {
props.graph.nodes.forEach((node: NodeType) => {
--
GitLab