graph yaml scroll and resize fixed

dashboard/src/main/home/dashboard/expanded-chart/graph/GraphDisplay.tsx

@@ -44,7 +44,7 @@ type StateType = {
   currentEdge: EdgeType | null,
   openedNode: NodeType | null,
   suppressCloseNode: boolean, // Still click should close opened unless on a node
-  suppressDisplayClicks: boolean, // Ignore clicks on InfoPanel or ButtonSection
+  suppressDisplay: boolean, // Ignore clicks + pan/zoom on InfoPanel or ButtonSection
 };
 
 // TODO: region-based unselect, shift-click, multi-region
@@ -75,7 +75,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     currentEdge: null as (EdgeType | null),
     openedNode: null as (NodeType | null),
     suppressCloseNode: false,
-    suppressDisplayClicks: false
+    suppressDisplay: false
   }
 
   spaceRef: any = React.createRef();
@@ -172,7 +172,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     graph.currentEdge = null;
     graph.isExpanded = false;
     graph.openedNode = null;
-    graph.suppressDisplayClicks = false;
+    graph.suppressDisplay = false;
     graph.suppressCloseNode = false;
 
     localStorage.setItem(`charts.${this.props.currentChartName}`, JSON.stringify(graph))
@@ -312,17 +312,21 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
   // Handle pan XOR zoom (two-finger gestures count as onWheel)
   handleWheel = (e: any) => {
 
-    // Pinch/zoom sets e.ctrlKey to true
-    if (e.ctrlKey) {
-  
-      // Clip deltaY for extreme mousewheel values
-      let deltaY = e.deltaY >= 0 ? Math.min(40, e.deltaY) : Math.max(-40, e.deltaY);
+    // Prevent nav gestures if mouse is over InfoPanel or ButtonSection
+    if (!this.state.suppressDisplay) {
 
-      let scale = 1;
-      scale -= deltaY * zoomConstant;
-      this.setState({ scale, panX: 0, panY: 0 });
-    } else {
-      this.setState({ panX: e.deltaX, panY: e.deltaY, scale: 1 });
+      // Pinch/zoom sets e.ctrlKey to true
+      if (e.ctrlKey) {
+  
+        // Clip deltaY for extreme mousewheel values
+        let deltaY = e.deltaY >= 0 ? Math.min(40, e.deltaY) : Math.max(-40, e.deltaY);
+
+        let scale = 1;
+        scale -= deltaY * zoomConstant;
+        this.setState({ scale, panX: 0, panY: 0 });
+      } else {
+        this.setState({ panX: e.deltaX, panY: e.deltaY, scale: 1 });
+      }
     }
   };
 
@@ -432,8 +436,8 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
         isExpanded={this.state.isExpanded}
         ref={element => this.spaceRef = element}
         onMouseMove={this.handleMouseMove}
-        onMouseDown={this.state.suppressDisplayClicks ? null : this.handleMouseDown}
-        onMouseUp={this.state.suppressDisplayClicks ? null : this.handleMouseUp}
+        onMouseDown={this.state.suppressDisplay ? null : this.handleMouseDown}
+        onMouseUp={this.state.suppressDisplay ? null : this.handleMouseUp}
         onWheel={this.handleWheel}
       >
         {this.renderNodes()}
@@ -441,8 +445,8 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
         {this.renderSelectRegion()}
 
         <ButtonSection
-          onMouseEnter={() => this.setState({ suppressDisplayClicks: true })}
-          onMouseLeave={() => this.setState({ suppressDisplayClicks: false })}
+          onMouseEnter={() => this.setState({ suppressDisplay: true })}
+          onMouseLeave={() => this.setState({ suppressDisplay: false })}
         >
           <ToggleLabel
             onClick={() => this.setState({ showKindLabels: !this.state.showKindLabels })}
@@ -461,11 +465,16 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
           </ExpandButton>
         </ButtonSection>
         <InfoPanel
-          setSuppressDisplayClicks={(x: boolean) => this.setState({ suppressDisplayClicks: x })}
+          setSuppressDisplay={(x: boolean) => this.setState({ suppressDisplay: x })}
           currentNode={this.state.currentNode}
           currentEdge={this.state.currentEdge}
           openedNode={this.state.openedNode}
-          closeNode={() => this.setState({ openedNode: null })}
+
+          // InfoPanel won't trigger onMouseLeave for unsuppressing if close is clicked
+          closeNode={() => this.setState({ openedNode: null, suppressDisplay: false })}
+
+          // For YAML wrapper to trigger resize
+          isExpanded={this.state.isExpanded}
         />
       </StyledGraphDisplay>
     );

dashboard/src/main/home/dashboard/expanded-chart/graph/InfoPanel.tsx

@@ -11,15 +11,18 @@ type PropsType = {
   currentNode: NodeType,
   currentEdge: EdgeType,
   openedNode: NodeType,
-  setSuppressDisplayClicks: (x: boolean) => void,
-  closeNode: () => void
+  setSuppressDisplay: (x: boolean) => void,
+  closeNode: () => void,
+  isExpanded: boolean
 };
 
 type StateType = {
+  wrapperHeight: number
 };
 
 export default class InfoPanel extends Component<PropsType, StateType> {
   state = {
+    wrapperHeight: 0
   }
 
   renderIcon = (kind: string) => {
@@ -40,6 +43,20 @@ export default class InfoPanel extends Component<PropsType, StateType> {
     return <ColorBlock color={edgeColors[type]} />;
   }
 
+  wrapperRef: any = React.createRef();
+
+  componentDidMount() {
+    this.setState({ wrapperHeight: this.wrapperRef.offsetHeight });
+  }
+
+  componentDidUpdate(prevProps: PropsType) {
+    if ((prevProps.openedNode !== this.props.openedNode 
+      || prevProps.isExpanded !== this.props.isExpanded) && this.wrapperRef
+    ) {
+      this.setState({ wrapperHeight: this.wrapperRef.offsetHeight });
+    }
+  }
+
   renderContents = () => {
     let { currentNode, currentEdge, openedNode } = this.props;
     if (openedNode) {
@@ -52,11 +69,11 @@ export default class InfoPanel extends Component<PropsType, StateType> {
               {openedNode.name}
             </ResourceName>
           </Div>
-          <YamlWrapper>
+          <YamlWrapper ref={element => this.wrapperRef = element}>
             <YamlEditor
               value={yaml.dump(openedNode.RawYAML)}
               readOnly={true}
-              height='100vw'
+              height={this.state.wrapperHeight + 'px'}
             />
           </YamlWrapper>
         </Wrapped>
@@ -103,15 +120,18 @@ export default class InfoPanel extends Component<PropsType, StateType> {
   }
 
   render() {
+    let { openedNode, closeNode, setSuppressDisplay } = this.props;
+
+    // Only suppress display gestures (click, pan, and zoom) if expanded
     return (
       <StyledInfoPanel
-        expanded={Boolean(this.props.openedNode)}
-        onMouseEnter={() => this.props.setSuppressDisplayClicks(true)}
-        onMouseLeave={() => this.props.setSuppressDisplayClicks(false)}
+        expanded={Boolean(openedNode)}
+        onMouseEnter={openedNode ? () => setSuppressDisplay(true) : null}
+        onMouseLeave={openedNode ? () => setSuppressDisplay(false) : null}
       >
         {this.renderContents()}
 
-        {this.props.openedNode ? <i onClick={this.props.closeNode} className="material-icons">close</i> : null}
+        {openedNode ? <i onClick={closeNode} className="material-icons">close</i> : null}
       </StyledInfoPanel>
     );
   }
@@ -126,9 +146,10 @@ const YamlWrapper = styled.div`
   width: 100%;
   margin-top: 7px;
   height: calc(100% - 44px);
-  overflow: hidden;
   border-radius: 5px;
   border: 1px solid #ffffff22;
+  overflow: hidden;
+  background: #000000;
 `;
 
 const ColorBlock = styled.div`