From 62f404c166ef00f48f3b3e772d23354d77bc751a Mon Sep 17 00:00:00 2001
From: Sirbu Nicolae-Cezar <sirbunicolaecezar@gmail.com>
Date: Tue, 20 Jul 2021 15:33:42 +0300
Subject: [PATCH] Implement custom zooming level defined by number of nodes

Signed-off-by: Sirbu Nicolae-Cezar <sirbunicolaecezar@gmail.com>
---
 demo/index.html | 149 +++++++++++++++++++++++++++---------------------
 happi-graph.js  |  63 +++++++++++++++-----
 2 files changed, 132 insertions(+), 80 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 5e45bb4..4e963da 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -53,11 +53,6 @@
     <button id="add-data">add-data</button>
   </div>
 
-
-  <div class="container bordered">
-    <happi-graph id="happi-graph-four"></happi-graph>
-  </div>
-
   <div class="container bordered">
     <happi-graph id="happi-graph"></happi-graph>
   </div>
@@ -70,6 +65,10 @@
     <happi-graph id="happi-graph-three"></happi-graph>
   </div>
 
+  <div class="container bordered">
+    <happi-graph id="happi-graph-four"></happi-graph>
+  </div>
+
   <script type="module">
     import { iconsMap, linksTypeIconMap, itemGroupIconMap } from 'egeria-js-commons';
 
@@ -83,35 +82,7 @@
       ...itemGroupIconMap
     };
 
-    let dataFour = {
-      graphDirection: 'HORIZONTAL',
-      selectedNodeId: 1,
-      nodes: [
-        { id: 1, label: 'Node 1', group: 'GroupName', properties: { GroupName: 'IBS_UTBLIACML' } },
-        { id: 2, label: 'Node 2', group: 'GroupName', properties: {} }
-      ],
-      links: [
-        { from: 1, to: 2, connectionFrom: false, connectionTo: true, type: null },
-      ]
-    }
-
-    let happiGraphInstance4 = document.querySelector('#happi-graph-four');
-    happiGraphInstance4.iconsMap = iconsMap;
-    happiGraphInstance4.propertiesMap = propertiesMap;
-    happiGraphInstance4.linksTypeIconMap = linksTypeIconMap;
-    happiGraphInstance4.algorithm = 'ELK';
-    happiGraphInstance4.elkWorkerUrl = '/node_modules/elkjs/lib/elk-worker.js';
-
-    happiGraphInstance4.graphData = { ...dataFour };
-    happiGraphInstance4.init();
-
-    happiGraphInstance4.addEventListener('happi-graph-on-node-click', ({ detail }) => {
-      console.log(detail);
-    });
-
-
-
-
+    /* ===================================================================== */
 
     let data = {
       graphDirection: 'HORIZONTAL',
@@ -147,24 +118,25 @@
     };
 
     let happiGraphInstance = document.querySelector('#happi-graph');
-    happiGraphInstance.iconsMap = iconsMap;
-    happiGraphInstance.propertiesMap = propertiesMap;
-    happiGraphInstance.linksTypeIconMap = linksTypeIconMap;
-    happiGraphInstance.algorithm = 'ELK';
-    happiGraphInstance.elkWorkerUrl = '/node_modules/elkjs/lib/elk-worker.js';
+        happiGraphInstance.nodeCountLimit = 9;
+        happiGraphInstance.iconsMap = iconsMap;
+        happiGraphInstance.propertiesMap = propertiesMap;
+        happiGraphInstance.linksTypeIconMap = linksTypeIconMap;
+        happiGraphInstance.algorithm = 'ELK';
+        happiGraphInstance.elkWorkerUrl = '/node_modules/elkjs/lib/elk-worker.js';
 
-    happiGraphInstance.graphData = { ...data };
-    happiGraphInstance.init();
+        happiGraphInstance.graphData = { ...data };
+        happiGraphInstance.init();
 
-    happiGraphInstance.addEventListener('happi-graph-on-node-click', ({ detail }) => {
-      console.log(detail);
-    });
+        happiGraphInstance.addEventListener('happi-graph-on-node-click', ({ detail }) => {
+          console.log(detail);
+        });
 
-    happiGraphInstance.addEventListener('happi-graph-on-cached-graph', ({ id }) => {
-      happiGraphInstance.updateGraphData({ ...data });
-      happiGraphInstance2.updateGraphData({ ...data2 });
-      happiGraphInstance3.updateGraphData({ ...data3 });
-    });
+        happiGraphInstance.addEventListener('happi-graph-on-cached-graph', ({ id }) => {
+          happiGraphInstance.updateGraphData({ ...data });
+        });
+
+    /* ===================================================================== */
 
     let data2 = {
       graphDirection: 'VERTICAL',
@@ -177,18 +149,21 @@
         { id: 4, label: 'This is the value of Node 4', group: 'GroupName', properties: {} },
       ],
       links: [
-        { from: 0, to: 1, connectionFrom: false, connectionTo: true },
-        { from: 0, to: 2, connectionFrom: false, connectionTo: true },
-        { from: 0, to: 3, connectionFrom: false, connectionTo: true },
-        { from: 3, to: 4, connectionFrom: false, connectionTo: true }
+        { from: 0, to: 1, connectionFrom: false, connectionTo: true, type: null },
+        { from: 0, to: 2, connectionFrom: false, connectionTo: true, type: null },
+        { from: 0, to: 3, connectionFrom: false, connectionTo: true, type: null },
+        { from: 3, to: 4, connectionFrom: false, connectionTo: true, type: null }
       ]
     };
 
     let happiGraphInstance2 = document.querySelector('#happi-graph-two');
-    happiGraphInstance2.iconsMap = iconsMap;
-    happiGraphInstance2.propertiesMap = propertiesMap;
-    happiGraphInstance2.graphData = { ...data2 };
-    happiGraphInstance2.init();
+        happiGraphInstance2.nodeCountLimit = 10;
+        happiGraphInstance2.iconsMap = iconsMap;
+        happiGraphInstance2.propertiesMap = propertiesMap;
+        happiGraphInstance2.linksTypeIconMap = linksTypeIconMap;
+        happiGraphInstance2.graphData = { ...data2 };
+        happiGraphInstance2.init();
+
     happiGraphInstance2.addEventListener('happi-graph-on-node-click', ({ detail }) => {
       console.log(detail);
     });
@@ -196,6 +171,9 @@
       happiGraphInstance2.graphData = { ...data2 };
     });
 
+
+    /* ===================================================================== */
+
     let data3 = {
       graphDirection: 'VERTICAL',
       "selectedNodeId": 'term@68e36496-7167-4af7-abdd-a0cd36e24084:6662c0f2.e1b1ec6c.66k78i6du.uchsna1.rn2epa.rfn2fjqf7h4qvmt5lflm8',
@@ -204,10 +182,13 @@
     };
 
     let happiGraphInstance3 = document.querySelector('#happi-graph-three');
-    happiGraphInstance3.iconsMap = iconsMap;
-    happiGraphInstance3.propertiesMap = propertiesMap;
-    happiGraphInstance3.graphData = { ...data3 };
-    happiGraphInstance3.init();
+        happiGraphInstance3.nodeCountLimit = 5;
+        happiGraphInstance3.iconsMap = iconsMap;
+        happiGraphInstance3.propertiesMap = propertiesMap;
+        happiGraphInstance3.linksTypeIconMap = linksTypeIconMap;
+        happiGraphInstance3.graphData = { ...data3 };
+        happiGraphInstance3.init();
+
     happiGraphInstance3.addEventListener('happi-graph-on-node-click', ({ detail }) => {
       console.log(detail);
     });
@@ -215,36 +196,72 @@
       happiGraphInstance3.graphData = { ...data3 };
     });
 
+    /* ===================================================================== */
+
+    let data4 = {
+      graphDirection: 'HORIZONTAL',
+      selectedNodeId: 1,
+      nodes: [
+        { id: 1, label: 'Node 1', group: 'GroupName', properties: { GroupName: 'IBS_UTBLIACML' } },
+        { id: 2, label: 'Node 2', group: 'GroupName', properties: {} }
+      ],
+      links: [
+        { from: 1, to: 2, connectionFrom: false, connectionTo: true, type: null },
+      ]
+    }
+
+    let happiGraphInstance4 = document.querySelector('#happi-graph-four');
+        happiGraphInstance4.nodeCountLimit = 30;
+        happiGraphInstance4.iconsMap = iconsMap;
+        happiGraphInstance4.propertiesMap = propertiesMap;
+        happiGraphInstance4.linksTypeIconMap = linksTypeIconMap;
+        happiGraphInstance4.algorithm = 'ELK';
+        happiGraphInstance4.elkWorkerUrl = '/node_modules/elkjs/lib/elk-worker.js';
+
+        happiGraphInstance4.graphData = { ...data4 };
+        happiGraphInstance4.init();
+
+        happiGraphInstance4.addEventListener('happi-graph-on-node-click', ({ detail }) => {
+          console.log(detail);
+        });
+
+    /* ===================================================================== */
+
     /* Buttons */
 
-    document.querySelector('#zoom-in').addEventListener('click', () => {
+    document.querySelector('button#zoom-in').addEventListener('click', () => {
       happiGraphInstance.customZoomIn();
       happiGraphInstance2.customZoomIn();
       happiGraphInstance3.customZoomIn();
+      happiGraphInstance4.customZoomIn();
     });
 
-    document.querySelector('#zoom-out').addEventListener('click', () => {
+    document.querySelector('button#zoom-out').addEventListener('click', () => {
       happiGraphInstance.customZoomOut();
       happiGraphInstance2.customZoomOut();
       happiGraphInstance3.customZoomOut();
+      happiGraphInstance4.customZoomOut();
     });
 
-    document.querySelector('#center-graph').addEventListener('click', () => {
+    document.querySelector('button#center-graph').addEventListener('click', () => {
       happiGraphInstance.centerGraph();
       happiGraphInstance2.centerGraph();
       happiGraphInstance3.centerGraph();
+      happiGraphInstance4.centerGraph();
     });
 
-    document.querySelector('#remove-data').addEventListener('click', () => {
+    document.querySelector('button#remove-data').addEventListener('click', () => {
       happiGraphInstance.removeData();
       happiGraphInstance2.removeData();
       happiGraphInstance3.removeData();
+      happiGraphInstance4.removeData();
     });
 
-    document.querySelector('#add-data').addEventListener('click', () => {
+    document.querySelector('button#add-data').addEventListener('click', () => {
       happiGraphInstance.updateGraphData({ ...data });
       happiGraphInstance2.updateGraphData({ ...data2 });
       happiGraphInstance3.updateGraphData({ ...data3 });
+      happiGraphInstance4.updateGraphData({ ...data4 });
     });
   </script>
 </body>
diff --git a/happi-graph.js b/happi-graph.js
index 5ff2073..b969ec3 100644
--- a/happi-graph.js
+++ b/happi-graph.js
@@ -89,6 +89,10 @@ class HappiGraph extends PolymerElement {
       isLoading: {
         type: Boolean,
         value: false
+      },
+      nodeCountLimit: {
+        type: Number,
+        value: 0
       }
     };
   }
@@ -290,12 +294,12 @@ class HappiGraph extends PolymerElement {
       }
     });
 
-    console.log(this.nodes, this.links);
+    // console.log(this.nodes, this.links);
 
     this.initGraph();
     this.addNodes();
     this.addLinks();
-    this.centerGraph();
+    this.whereToCenter();
   }
 
   elkApproach() {
@@ -332,7 +336,7 @@ class HappiGraph extends PolymerElement {
         this.initGraph();
         this.addNodes();
         this.addLinks();
-        this.centerGraph();
+        this.whereToCenter();
       })
       // .catch(console.error)
   }
@@ -533,20 +537,23 @@ class HappiGraph extends PolymerElement {
     this.customZoom(-1);
   }
 
-  centerGraph() {
+  whereToCenter() {
+    let selectedNode = this.nodes.filter(n => n.selected === true).pop();
+    let nodeCount = this.nodes.length;
+    if(nodeCount < this.nodeCountLimit || this.nodeCountLimit == 0) {
+      this.centerGraph();
+    } else {
+      this.centerToNode(selectedNode);
+    }
+  }
+
+  centerToCoordinates(data, scaledBy) {
     let self = this;
+    let { x, y, width, height } = data;
 
     let svgWidth = parseInt(this.svg.style('width'));
     let svgHeight = parseInt(this.svg.style('height'));
 
-    let graphBBox = this.allGroup.node().getBBox();
-
-    let scaledBy = Math.min(
-      (svgWidth - 100) / graphBBox.width,
-      (svgHeight - 100) / graphBBox.height,
-      1
-    );
-
     let svgCenter = {
       x: svgWidth / 2,
       y: svgHeight / 2
@@ -557,13 +564,41 @@ class HappiGraph extends PolymerElement {
         self.zoom.transform,
         d3.zoomIdentity
           .translate(
-            svgCenter.x - ((graphBBox.x * scaledBy) + (graphBBox.width * scaledBy) / 2),
-            svgCenter.y - ((graphBBox.y * scaledBy) + (graphBBox.height * scaledBy) / 2)
+            svgCenter.x - ((x * scaledBy) + (width * scaledBy) / 2),
+            svgCenter.y - ((y * scaledBy) + (height * scaledBy) / 2)
           )
           .scale(scaledBy)
       )
   }
 
+  centerToNode(node) {
+    let { x, y, width, height } = node;
+
+    this.centerToCoordinates({x: x, y: y, width: width, height: height}, 0.6);
+  }
+
+  centerGraph() {
+    let graphBBox = this.allGroup.node().getBBox();
+
+    let svgWidth = parseInt(this.svg.style('width'));
+    let svgHeight = parseInt(this.svg.style('height'));
+
+    let data = {
+      x: graphBBox.x,
+      y: graphBBox.y,
+      width: graphBBox.width,
+      height: graphBBox.height
+    };
+
+    let scaledBy = Math.min(
+      (svgWidth - 100) / graphBBox.width,
+      (svgHeight - 100) / graphBBox.height,
+      1
+    );
+
+    this.centerToCoordinates(data, scaledBy);
+  }
+
   cachedGraph() {
     this.removeData();