graph mouse fixes merge

dashboard/package-lock.json

@@ -428,8 +428,7 @@
     "@types/qs": {
       "version": "6.9.5",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.5.tgz",
-      "integrity": "sha512-/JHkVHtx/REVG0VVToGRGH2+23hsYLHdyG+GrvoUGlGAd0ErauXDyvHtRI/7H7mzLm+tBCKA7pfcpkQ1lf58iQ==",
-      "dev": true
+      "integrity": "sha512-/JHkVHtx/REVG0VVToGRGH2+23hsYLHdyG+GrvoUGlGAd0ErauXDyvHtRI/7H7mzLm+tBCKA7pfcpkQ1lf58iQ=="
     },
     "@types/react": {
       "version": "16.9.49",
@@ -5322,8 +5321,7 @@
     "qs": {
       "version": "6.9.4",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
-      "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==",
-      "dev": true
+      "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ=="
     },
     "querystring": {
       "version": "0.2.0",

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

@@ -175,14 +175,29 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
       this.setState({
         anchorX: this.state.cursorX,
         anchorY: this.state.cursorY,
-        relocateAllowed: false
+        relocateAllowed: false,
+
+        // Suppress jump when panning with mouse
+        panX: null,
+        panY: null,
+        deltaX: null,
+        deltaY: null
       });
     }
   }
 
   handleKeyUp = (e: any) => {
     if (e.key === 'Shift') {
-      this.setState({ anchorX: null, anchorY: null });
+      this.setState({
+        anchorX: null,
+        anchorY: null,
+
+        // Suppress jump when panning with mouse
+        panX: null,
+        panY: null,
+        deltaX: null,
+        deltaY: null
+      });
     }
   }
 
@@ -258,8 +273,12 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
 
     // Pinch/zoom sets e.ctrlKey to true
     if (e.ctrlKey) {
-      var scale = 1;
-      scale -= e.deltaY * zoomConstant;
+  
+      // 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 });
@@ -324,6 +343,8 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
           nodeMouseUp={this.handleReleaseNode}
           isActive={activeIds.includes(node.id)}
           showKindLabels={this.state.showKindLabels}
+
+          // Parameterized to allow setting to null
           setCurrentNode={(node: NodeType) => this.setState({ currentNode: node })}
         />
       );

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

@@ -60,11 +60,13 @@ export default class Node extends Component<PropsType, StateType> {
 
 const Kind = styled.div`
   color: #ffffff33;
-  position: absolute;
-  top: -25px;
-  width: 140px;
-  left: -50px;
+  position: relative;
+  margin-top: -25px;
+  padding-bottom: 10px;
+  max-width: 140px;
   text-align: center;
+  min-width: 1px;
+  height: 25px;
   font-size: 13px;
   font-family: 'Work Sans', sans-serif;
   white-space: nowrap;
@@ -73,11 +75,11 @@ const Kind = styled.div`
 `;
 
 const NodeLabel = styled.div`
-  position: absolute;
-  bottom: -25px;
+  position: relative;
+  margin-bottom: -25px;
+  padding-top: 10px;
   color: #aaaabb;
-  width: 140px;
-  left: -50px;
+  max-width: 140px;
   font-size: 13px;
   font-family: 'Work Sans', sans-serif;
   text-align: center;
@@ -94,11 +96,10 @@ const NodeBlock = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: 100px;
-  cursor: grab;
+  cursor: pointer;
   :hover {
     background: #555556;
   }
-
   > i {
     color: white;
     font-size: 18px;
@@ -118,4 +119,7 @@ const StyledNode: any = styled.div.attrs((props: NodeType) => ({
   color: #ffffff22;
   border-radius: 100px;
   z-index: 3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 `;