auto resize graph

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