From ddf0f9424856c5dcb478d888a3568134e29ebe63 Mon Sep 17 00:00:00 2001
From: Connor Lindsey <cblindsey3@gmail.com>
Date: Tue, 14 Jun 2022 08:33:22 -0600
Subject: [PATCH] Explore: Make service graph visualization use available
 vertical space (#50518)

* Explore: make service graph visualization use available vertical space

* Use react-use
---
 .../features/explore/NodeGraphContainer.tsx   | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/public/app/features/explore/NodeGraphContainer.tsx b/public/app/features/explore/NodeGraphContainer.tsx
index 65d17d11555..b815aa522fd 100644
--- a/public/app/features/explore/NodeGraphContainer.tsx
+++ b/public/app/features/explore/NodeGraphContainer.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
-import { useToggle } from 'react-use';
+import { useToggle, useWindowSize } from 'react-use';
 
 import { applyFieldOverrides, DataFrame, GrafanaTheme2 } from '@grafana/data';
 import { Badge, Collapse, useStyles2, useTheme2 } from '@grafana/ui';
@@ -54,6 +54,18 @@ export function UnconnectedNodeGraphContainer(props: Props) {
   const { nodes } = useCategorizeFrames(frames);
   const [open, toggleOpen] = useToggle(false);
 
+  // Calculate node graph height based on window and top position, with some padding
+  const { height: windowHeight } = useWindowSize();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [top, setTop] = useState(250);
+  useEffect(() => {
+    if (containerRef.current) {
+      const { top } = containerRef.current.getBoundingClientRect();
+      setTop(top);
+    }
+  }, [containerRef]);
+  const height = windowHeight - top - 32;
+
   const countWarning =
     withTraceView && nodes[0]?.length > 1000 ? (
       <span className={styles.warningText}> ({nodes[0].length} nodes, can be slow to load)</span>
@@ -72,7 +84,17 @@ export function UnconnectedNodeGraphContainer(props: Props) {
       isOpen={withTraceView ? open : true}
       onToggle={withTraceView ? () => toggleOpen() : undefined}
     >
-      <div style={{ height: withTraceView ? 500 : 600 }}>
+      <div
+        ref={containerRef}
+        style={
+          withTraceView
+            ? { height: 500 }
+            : {
+                minHeight: 600,
+                height,
+              }
+        }
+      >
         <NodeGraph dataFrames={frames} getLinks={getLinks} />
       </div>
     </Collapse>