Graph view seeking when expanding tabular view, style improvements

Author: nikitaeverywhere

package.json

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

src/static/js/graph/index.js

@@ -13,7 +13,7 @@ let svg = null,
     links,
     nodes,
     zoomer = d3.zoom()
-        .scaleExtent([1/4, 100])
+        .scaleExtent([1/6, 100])
         .on("zoom", () => {
             view.attr("transform", d3.event.transform);
         }),
@@ -50,6 +50,12 @@ let svg = null,
         }),
     view = null;
 
+export function translateZoom (x = 0, y = 0) {
+    svg.transition()
+        .duration(300)
+        .call(zoomer.translateBy, x, y);
+}
+
 export function updateSelected () {
     node.classed("selected", p => p.selected);
 }

src/static/js/tabular/index.js

@@ -5,6 +5,7 @@ import {
 } from "../selection";
 import { getOption } from "../settings/values";
 import { getObjProp } from "../utils";
+import { translateZoom } from "../graph";
 
 let sorting = {
     properties: ["entities", "0", "frequency"],
@@ -146,6 +147,8 @@ export function init () {
             d3.select("#table").classed("active", d.tabularToggled);
             if (d.tabularToggled)
                 updateAll();
+            let w = document.getElementById("table").getBoundingClientRect().width / 2;
+            translateZoom(d.tabularToggled ? -w : w);
         });
 
     d3.select("#exportCSV").on("click", () => {

src/static/scss/basic.scss

@@ -39,6 +39,7 @@ input[type=text], input[type=number] {
 
 select {
 
+    cursor: pointer;
     border: 0;
     background: none;
     color: inherit;

src/static/scss/graph.scss

@@ -25,6 +25,8 @@
 
         .node {
 
+            cursor: pointer;
+
             circle {
                 stroke: #fff;
                 stroke-width: 1px;