diff options
| -rw-r--r-- | package.json | 5 | ||||
| -rw-r--r-- | pages/index.tsx | 11 |
2 files changed, 15 insertions, 1 deletions
diff --git a/package.json b/package.json index 4583afb..5fc7843 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,12 @@ "prettier": "prettier -w ." }, "dependencies": { + "@chakra-ui/react": "^1.6.5", + "@emotion/react": "^11", + "@emotion/styled": "^11", + "@react-hook/window-size": "^3.0.7", "d3-force-3d": "^3.0.2", + "framer-motion": "^4", "next": "11.0.1", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/pages/index.tsx b/pages/index.tsx index 6d2faa4..9a22128 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -7,6 +7,8 @@ import type { ForceGraph2D as TForceGraph2D } from 'react-force-graph' import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api' import { GraphData, NodeObject } from 'force-graph' +import { useWindowSize } from '@react-hook/window-size' + // react-force-graph fails on import when server-rendered // https://github.com/vasturiano/react-force-graph/issues/155 const ForceGraph2D = ( @@ -153,6 +155,11 @@ export const Graph = function (props: GraphProps) { const forceGraphRef = useRef<any>(null) + // react-force-graph does not track window size + // https://github.com/vasturiano/react-force-graph/issues/233 + // does not work below a certain width + const [windowWidth, windowHeight] = useWindowSize() + const [hoverNode, setHoverNode] = useState<NodeObject | null>(null) const [selectedNode, setSelectedNode] = useState<NodeObject | null>() @@ -238,6 +245,8 @@ export const Graph = function (props: GraphProps) { <ForceGraph2D ref={forceGraphRef} graphData={local ? localGraphData : graphData} + width={windowWidth} + height={windowHeight} nodeColor={(node) => { if (!physics.colorful) { if (Object.keys(highlightedNodes).length === 0) { @@ -265,7 +274,7 @@ export const Graph = function (props: GraphProps) { if (node.neighbors.length === 1 || node.neighbors.length === 2) { return palette[node.neighbors[0].index % 11] } - + return palette[node.index % 11] }} linkColor={(link) => { |