diff options
Diffstat (limited to 'pages/index.tsx')
-rw-r--r-- | pages/index.tsx | 29 |
1 files changed, 18 insertions, 11 deletions
diff --git a/pages/index.tsx b/pages/index.tsx index 522b047..e0619ba 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -10,7 +10,6 @@ import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api' import { GraphData, NodeObject } from 'force-graph' import { useWindowSize } from '@react-hook/window-size' -import useConstant from 'use-constant' import { Accordion, @@ -139,7 +138,7 @@ export function GraphPage() { const [physics, setPhysics] = usePersistantState('physics', initialPhysics) const [theme, setTheme] = useState(initialTheme) const [graphData, setGraphData] = useState<GraphData | null>(null) - const [emacsNode, setEmacsNode] = useState<string>('') + const [emacsNodeId, setEmacsNodeId] = useState<string | null>(null) const nodeByIdRef = useRef<NodeById>({}) const linksByNodeIdRef = useRef<LinksByNodeId>({}) @@ -148,9 +147,8 @@ export function GraphPage() { const trackEmacs = new EventSource('http://127.0.0.1:35901/current-node-id') trackEmacs.addEventListener('message', (e) => { - setEmacsNode(e.data) - console.log(e.data) - console.log(emacsNode) + const emacsNodeId = e.data + setEmacsNodeId(emacsNodeId) }) fetch('http://localhost:35901/theme') .then((res) => res.json()) @@ -201,7 +199,7 @@ export function GraphPage() { physics, graphData, threeDim, - emacsNode, + emacsNodeId, }} /> </div> @@ -530,11 +528,11 @@ export interface GraphProps { graphData: GraphData physics: typeof initialPhysics threeDim: boolean - emacsNode: string + emacsNodeId: string | null } export const Graph = function (props: GraphProps) { - const { physics, graphData, threeDim, linksByNodeId, emacsNode } = props + const { physics, graphData, threeDim, linksByNodeId, emacsNodeId } = props const graph2dRef = useRef<any>(null) const graph3dRef = useRef<any>(null) @@ -547,6 +545,16 @@ export const Graph = function (props: GraphProps) { const [hoverNode, setHoverNode] = useState<NodeObject | null>(null) const [scope, setScope] = useState<Scope>({ nodeIds: [] }) + useEffect(() => { + if (!emacsNodeId) { + return + } + + setScope({ + nodeIds: [emacsNodeId], + }) + }, [emacsNodeId]) + const centralHighlightedNode = hoverNode const highlightedNodes = (() => { if (!centralHighlightedNode) { @@ -687,9 +695,7 @@ export const Graph = function (props: GraphProps) { nodeRelSize: physics.nodeRel, nodeVal: (node) => { const links = linksByNodeId[node.id!] ?? [] - const basicSize = 3 + links.length - const highlightSize = highlightedNodes[node.id!] ? 2 : 0 - return basicSize + highlightSize + return 3 + links.length }, nodeCanvasObject: (node, ctx, globalScale) => { if (!physics.labels) { @@ -752,6 +758,7 @@ export const Graph = function (props: GraphProps) { return linkIsHighlighted ? '#a991f1' : '#666666' }, linkWidth: (link) => { + return physics.linkWidth const linkIsHighlighted = (link.source as NodeObject).id! === centralHighlightedNode?.id! || (link.target as NodeObject).id! === centralHighlightedNode?.id! |