Merge branch 'frontend-graph' into helm-manifest

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

@@ -13,7 +13,7 @@ type PropsType = {
 type StateType = {
 };
 
-const thickness = 2;
+const thickness = 1;
 
 export default class Edge extends Component<PropsType, StateType> {
   state = {
@@ -55,5 +55,6 @@ const StyledEdge: any = styled.div.attrs((props: any) => ({
   height: ${thickness}px;
   background: #ffffff66;
   color: #ffffff22;
+  z-index: 0;
   transform: rotate(${(props: any) => props.angle}deg);
 `;

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

@@ -20,6 +20,8 @@ const edges = [
   [2, 3]
 ];
 
+const zoomConstant = 0.01;
+
 type NodeType = {
   id: number,
   x: number,
@@ -44,7 +46,8 @@ type StateType = {
   deltaX: number | null,
   deltaY: number | null,
   dragBg: boolean,
-  preventDrag: boolean
+  preventDrag: boolean,
+  scale: number
 };
 
 export default class GraphDisplay extends Component<PropsType, StateType> {
@@ -59,7 +62,8 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     deltaX: null as (number | null),
     deltaY: null as (number | null),
     dragBg: false,
-    preventDrag: false
+    preventDrag: false,
+    scale: 1
   }
 
   myRef: any = React.createRef();
@@ -71,6 +75,15 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
       originX: Math.round(width / 2),
       originY: Math.round(height / 2)
     });
+
+    // Suppress trackpad gestures
+    this.myRef.addEventListener("touchmove", (e: any) => e.preventDefault());
+    this.myRef.addEventListener("mousewheel", (e: any) => e.preventDefault());
+  }
+
+  componentWillUnmount() {
+    this.myRef.removeEventListener("touchmove", (e: any) => e.preventDefault());
+    this.myRef.removeEventListener("mousewheel", (e: any) => e.preventDefault());
   }
 
   // Push to activeIds if not already present
@@ -107,6 +120,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
 
   onMouseMove = (e: any) => {
     let { originX, originY, dragBg, preventDrag } = this.state;
+    this.setState({ scale: 1 });
 
     // Update origin-centered cursor coordinates
     let bounds = this.myRef.getBoundingClientRect();
@@ -120,9 +134,16 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     }
   }
 
+  // Set zoom scale
+  handleOnWheel = (e: any) => {
+    var scale = 1;
+    scale -= e.deltaY * zoomConstant;
+    this.setState({ scale });
+  };
+
   // Pass origin to node for offset
   renderNodes = () => {
-    let { activeIds, originX, originY, cursorX, cursorY } = this.state;
+    let { activeIds, originX, originY, cursorX, cursorY, scale } = this.state;
 
     return this.state.nodes.map((node: NodeType, i: number) => {
 
@@ -137,6 +158,12 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
         node.x += this.state.deltaX;
         node.y -= this.state.deltaY;
       }
+
+      // Apply cursor-centered zoom
+      if (this.state.scale !== 1) {
+        node.x = cursorX + scale * (node.x - cursorX);
+        node.y = cursorY + scale * (node.y - cursorY);
+      }
       
       return (
         <Node
@@ -174,9 +201,10 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
         onMouseMove={this.onMouseMove}
         onMouseDown={() => this.setState({ dragBg: true })}
         onMouseUp={() => this.setState({ dragBg: false })}
+        onWheel={this.handleOnWheel}
       >
-        {this.renderEdges()}
         {this.renderNodes()}
+        {this.renderEdges()}
       </StyledGraphDisplay>
     );
   }
@@ -187,5 +215,6 @@ const StyledGraphDisplay = styled.div`
   width: 100%;
   height: 100%;
   overflow: hidden;
+  cursor: move;
   background: #202227;
 `;

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

@@ -39,11 +39,27 @@ export default class Node extends Component<PropsType, StateType> {
         isActive={isActive}
       >
         <i className="material-icons">category</i>
+        <NodeLabel>some-object-name</NodeLabel>
       </StyledNode>
     );
   }
 }
 
+const NodeLabel = styled.div`
+  position: absolute;
+  bottom: -25px;
+  color: #aaaabb;
+  padding-top: 12px;
+  width: 40px;
+  left: 0px;
+  font-size: 13px;
+  white-space: nowrap;
+  font-family: 'Work Sans', sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 const StyledNode: any = styled.div.attrs((props: NodeType) => ({
   style: {
     top: props.y + 'px',
@@ -55,12 +71,16 @@ const StyledNode: any = styled.div.attrs((props: NodeType) => ({
   height: ${(props: NodeType) => props.h + 'px'};;
   background: #444446;
   box-shadow: ${(props: any) => props.isActive ? '0 0 10px #ffffff66' : '0px 0px 10px 2px #00000022'};
-  cursor: pointer;
+  cursor: grab;
   border-radius: 5px;
   color: #ffffff22;
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 1;
+  :hover {
+    background: #555556;
+  }
 
   > i {
     color: white;