feat(searchResultsNodeLink): search results in nodelink

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) => {