Focusing on the node when clicking node row in the table view

Author: nikitaeverywhere

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iknow-entity-browser",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "description": "Visualizer for iKnow entities",
   "main": "gulpfile.babel.js",
   "scripts": {

src/static/js/graph/index.js

@@ -52,27 +52,44 @@ let currentZoomLevel = 1,
         }),
     view = null;
 
+window.addEventListener("resize", () => {
+    width = window.innerWidth;
+    height = window.innerHeight;
+});
+
 export function translateBy (x = 0, y = 0) {
     svg.transition()
         .duration(300)
         .call(zoomer.translateBy, x / currentZoomLevel, y / currentZoomLevel);
 }
 
+export function focusOn (x = 0, y = 0) {
+    console.log(x, y);
+    svg.transition()
+        .duration(300)
+        .call(
+            zoomer.transform,
+            d3.zoomIdentity.translate(width / 2 + getViewDX(), height / 2)
+                .scale(currentZoomLevel).translate(-x, -y)
+        );
+}
+
 export function scaleBy (delta = 1) {
     svg.transition()
         .duration(300)
         .call(zoomer.scaleBy, delta);
 }
 
+function getViewDX () {
+    return uiState.tabularToggled
+        ? - document.getElementById("table").getBoundingClientRect().width / 2
+        : 0;
+}
+
 export function resetZoom () {
     svg.transition()
         .duration(300)
-        .call(zoomer.transform, d3.zoomIdentity.translate(
-            uiState.tabularToggled
-                ? - document.getElementById("table").getBoundingClientRect().width / 2
-                : 0,
-            0)
-        );
+        .call(zoomer.transform, d3.zoomIdentity.translate(getViewDX(), 0));
 }
 
 export function updateSelected () {

src/static/js/tabular/index.js

@@ -5,7 +5,7 @@ import {
 } from "../selection";
 import { getOption } from "../settings/values";
 import { getObjProp } from "../utils";
-import { translateBy } from "../graph";
+import { translateBy, focusOn } from "../graph";
 
 let sorting = {
     properties: ["entities", "0", "frequency"],
@@ -76,6 +76,7 @@ function insertRows (data, table, selected) {
         if (node.children.length) cell.appendChild(ei);
         row.addEventListener("mouseover", () => { node.element.classList.add("highlighted"); });
         row.addEventListener("mouseout", () => { node.element.classList.remove("highlighted"); });
+        row.addEventListener("click", () => focusOn(node.x, node.y));
     }
 }