KIALI-611: Fix graph sizing problems

src/components/CytoscapeLayout/CytoscapeLayout.tsx

@@ -51,20 +51,6 @@ export default class CytoscapeLayout extends React.Component<CytoscapeLayoutProp
     this.handleMouseOut = this.handleMouseOut.bind(this);
   }
 
-  resizeWindow() {
-    let canvasWrapper = document.getElementById('cytoscape-container')!;
-
-    if (canvasWrapper) {
-      let dimensions = canvasWrapper.getBoundingClientRect();
-      canvasWrapper.style.height = `${document.documentElement.scrollHeight - dimensions.top}px`;
-    }
-  }
-
-  componentDidMount() {
-    window.addEventListener('resize', this.resizeWindow);
-    this.resizeWindow();
-  }
-
   shouldComponentUpdate(nextProps: any, nextState: any) {
     return (
       this.props.isLoading !== nextProps.isLoading ||
@@ -143,7 +129,7 @@ export default class CytoscapeLayout extends React.Component<CytoscapeLayoutProp
   render() {
     const layout = LayoutDictionary.getLayout(this.props.graphLayout);
     return (
-      <div id="cytoscape-container" style={{ marginRight: '25em' }}>
+      <div id="cytoscape-container" style={{ marginRight: '25em', height: '100%' }}>
         <Spinner loading={this.props.isLoading}>
           <EmptyGraphLayout
             elements={this.props.elements}

src/pages/ServiceGraph/ServiceGraphPage.tsx

@@ -114,7 +114,7 @@ export default class ServiceGraphPage extends React.Component<ServiceGraphPagePr
           onRefresh={this.handleRefreshClick}
           {...graphParams}
         />
-        <div style={{ position: 'relative' }}>
+        <div style={{ position: 'absolute', right: 20, bottom: 0, top: 230, left: 220 }}>
           <CytoscapeLayout
             {...graphParams}
             isLoading={this.state.isLoading}

src/pages/ServiceGraph/SummaryPanel.tsx

@@ -12,7 +12,7 @@ type SummaryPanelState = {
 export default class SummaryPanel extends React.Component<SummaryPanelPropType, SummaryPanelState> {
   render() {
     return (
-      <div>
+      <>
         {this.props.data.summaryType === 'edge' ? (
           <SummaryPanelEdge
             data={this.props.data}
@@ -53,7 +53,7 @@ export default class SummaryPanel extends React.Component<SummaryPanelPropType,
             rateInterval={this.props.rateInterval}
           />
         ) : null}
-      </div>
+      </>
     );
   }
 }

src/pages/ServiceGraph/SummaryPanelEdge.tsx

@@ -19,7 +19,9 @@ export default class SummaryPanelEdge extends React.Component<SummaryPanelPropTy
     position: 'absolute' as 'absolute',
     width: '25em',
     top: 0,
-    right: 0
+    right: 0,
+    bottom: 0,
+    overflowY: 'auto' as 'auto'
   };
 
   // avoid state changes after component is unmounted

src/pages/ServiceGraph/SummaryPanelGraph.tsx

@@ -21,9 +21,10 @@ export default class SummaryPanelGraph extends React.Component<SummaryPanelPropT
   static readonly panelStyle = {
     position: 'absolute' as 'absolute',
     width: '25em',
-    bottom: 0,
     top: 0,
-    right: 0
+    right: 0,
+    bottom: 0,
+    overflowY: 'auto' as 'auto'
   };
 
   // avoid state changes after component is unmounted

src/pages/ServiceGraph/SummaryPanelGroup.tsx

@@ -22,7 +22,9 @@ export default class SummaryPanelGroup extends React.Component<SummaryPanelPropT
     position: 'absolute' as 'absolute',
     width: '25em',
     top: 0,
-    right: 0
+    right: 0,
+    bottom: 0,
+    overflowY: 'auto' as 'auto'
   };
 
   // avoid state changes after component is unmounted

src/pages/ServiceGraph/SummaryPanelNode.tsx

@@ -22,7 +22,9 @@ export default class SummaryPanelNode extends React.Component<SummaryPanelPropTy
     position: 'absolute' as 'absolute',
     width: '25em',
     top: 0,
-    right: 0
+    right: 0,
+    bottom: 0,
+    overflowY: 'auto' as 'auto'
   };
 
   // avoid state changes after component is unmounted