From c2124abcaae4d4155a99a15fbcb2c42338827c80 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Wed, 21 Jul 2021 11:55:10 +0200
Subject: auto resize graph

---
 pages/index.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'pages/index.tsx')

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) => {
-- 
cgit v1.2.3