graph zoom + dummylabels

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,9 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
       originX: Math.round(width / 2),
       originY: Math.round(height / 2)
     });
+
+    this.myRef.addEventListener("touchmove", (e: any) => e.preventDefault(), false);
+    this.myRef.addEventListener("mousewheel", (e: any) => e.preventDefault(), false);
   }
 
   // Push to activeIds if not already present
@@ -107,6 +114,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,6 +128,13 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     }
   }
 
+  handleOnWheel = (e: any) => {
+    e.preventDefault();
+    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;
@@ -137,6 +152,9 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
         node.x += this.state.deltaX;
         node.y -= this.state.deltaY;
       }
+
+      node.x *= this.state.scale;
+      node.y *= this.state.scale;
       
       return (
         <Node
@@ -174,9 +192,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 +206,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,23 @@ 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;
+  width: 200px;
+  left: -80px;
+  font-size: 13px;
+  font-family: 'Work Sans', sans-serif;
+  text-align: center;
+`;
+
 const StyledNode: any = styled.div.attrs((props: NodeType) => ({
   style: {
     top: props.y + 'px',
@@ -61,6 +73,7 @@ const StyledNode: any = styled.div.attrs((props: NodeType) => ({
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 1;
 
   > i {
     color: white;