diff options
| -rw-r--r-- | pages/index.tsx | 75 |
1 files changed, 31 insertions, 44 deletions
diff --git a/pages/index.tsx b/pages/index.tsx index 23a8f5c..785efbd 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -674,14 +674,13 @@ export const Graph = function (props: GraphProps) { if (!emacsNodeId) { return } - setScope({ nodeIds: [emacsNodeId], }) }, [emacsNodeId]) const centralHighlightedNode = hoverNode - const highlightedNodes = (() => { + const highlightedNodes = useMemo(() => { if (!centralHighlightedNode) { return {} } @@ -697,31 +696,39 @@ export const Graph = function (props: GraphProps) { ...links.flatMap((link) => [link.source, link.target]), ].map((nodeId) => [nodeId, {}]), ) - })() - - const scopedNodes = graphData.nodes.filter((node) => { - const links = linksByNodeId[node.id as string] ?? [] - /* if (physics.orphans && links.length === 0) { - * return false - * } */ - return ( - scope.nodeIds.includes(node.id as string) || - links.some((link) => { - return scope.nodeIds.includes(link.source) || scope.nodeIds.includes(link.target) - }) - ) - }) + }, [centralHighlightedNode, linksByNodeId]) + + const scopedNodes = useMemo(() => { + return graphData.nodes.filter((node) => { + const links = linksByNodeId[node.id as string] ?? [] + /* if (physics.orphans && links.length === 0) { + * return false + * } */ + return ( + scope.nodeIds.includes(node.id as string) || + links.some((link) => { + return scope.nodeIds.includes(link.source) || scope.nodeIds.includes(link.target) + }) + ) + }) + }, [graphData, linksByNodeId, scope.nodeIds]) const scopedNodeIds = scopedNodes.map((node) => node.id as string) - const scopedLinks = graphData.links.filter((link) => { - // we need to cover both because force-graph modifies the original data - // but if we supply the original data on each render, the graph will re-render sporadically - const sourceId = typeof link.source === 'object' ? link.source.id! : (link.source as string) - const targetId = typeof link.target === 'object' ? link.target.id! : (link.target as string) - - return scopedNodeIds.includes(sourceId as string) && scopedNodeIds.includes(targetId as string) - }) + const scopedLinks = useMemo( + () => + graphData.links.filter((link) => { + // we need to cover both because force-graph modifies the original data + // but if we supply the original data on each render, the graph will re-render sporadically + const sourceId = typeof link.source === 'object' ? link.source.id! : (link.source as string) + const targetId = typeof link.target === 'object' ? link.target.id! : (link.target as string) + + return ( + scopedNodeIds.includes(sourceId as string) && scopedNodeIds.includes(targetId as string) + ) + }), + [graphData, scopedNodeIds], + ) const scopedGraphData = useMemo( () => @@ -815,7 +822,6 @@ export const Graph = function (props: GraphProps) { const lastHoverNode = useRef() useEffect(() => { - console.log(physics.algorithms[physics.algorithmName]) hoverNode && (lastHoverNode.current = hoverNode) if (!physics.highlightAnim) { return @@ -823,30 +829,11 @@ export const Graph = function (props: GraphProps) { if (hoverNode) { fadeIn() } else { - // if (opacity > 0.7) { cancel() opacity > 0.5 ? fadeOut() : setOpacity(0) - // } else { - // cancel() - // setOpacity(0) - // } } }, [hoverNode]) const theme = useTheme() - //this was just easier than getting an actual package - /* const convertHexToRGBA = (hexCode: string, opacity: number) => { - * let hex = hexCode.replace('#', '') - - * if (hex.length === 3) { - * hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}` - * } - - * const r = parseInt(hex.substring(0, 2), 16) - * const g = parseInt(hex.substring(2, 4), 16) - * const b = parseInt(hex.substring(4, 6), 16) - - * return `rgba(${r},${g},${b},${opacity})` - * } */ const graphCommonProps: ComponentPropsWithoutRef<typeof TForceGraph2D> = { graphData: scopedGraphData, width: windowWidth, |