History API, icons, various fixes and improvements

Author: nikitaeverywhere

package.json

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

src/static/fonts/iknowentitybrowsericons.eot

@@ -15,11 +15,17 @@
     <div id="table">
         <i id="tableToggle" class="ui icon-window-list"></i>
         <div id="rightTopIcons">
-            <i id="settingsToggle" class="ui icon-cog"></i>
+            <i id="settingsToggle" class="ui icon-settings"></i>
+        </div>
+        <div id="toolbarIcons">
+            <i id="dropChildrenButton" class="ui icon-unlink"></i>
+            <i id="removeButton" class="ui icon-remove"></i>
         </div>
         <div class="wrapper">
             <div class="controls">
-                <i id="exportCSV" class="ui icon-page-export-csv"></i>
+                <label>
+                    <i id="exportCSV" class="ui icon-share"></i>
+                </label>
             </div>
             <h1>Selected Nodes</h1>
             <div class="wrapper">

src/static/fonts/iknowentitybrowsericons.svg

@@ -0,0 +1,30 @@
+/**
+ * This file describes on-screen controls like UI link/remove buttons, etc.
+ */
+import { onSelectionUpdate } from "./selection";
+
+let dropChildrenButton = null,
+    removeButton = null,
+    selection = [];
+
+onSelectionUpdate((sel) => {
+    selection = sel;
+    updateButtons();
+});
+
+function updateButtons () {
+    let display = selection.length ? "block" : "none";
+    dropChildrenButton.style.display = removeButton.style.display = display;
+}
+
+function deleteSelection () {
+
+}
+
+export function init () {
+    dropChildrenButton = document.getElementById(`dropChildrenButton`);
+    (removeButton = document.getElementById(`removeButton`)).addEventListener("click",
+        () => deleteSelection()
+    );
+    updateButtons();
+}

src/static/fonts/iknowentitybrowsericons.ttf

@@ -1,9 +1,10 @@
-import { getGraphData } from "../model";
+import { onModelUpdate, unfold } from "../model";
 import { updateSelection, setLastSelectedNode } from "../selection";
 
 let shiftKey, ctrlKey,
     width = window.innerWidth,
-    height = window.innerHeight;
+    height = window.innerHeight,
+    lastGraph = null;
 
 let svg = null,
     brush = null,
@@ -20,18 +21,7 @@ let svg = null,
         .on("start", dragstarted)
         .on("drag", dragged)
         .on("end", dragended),
-    simulation = d3.forceSimulation()
-        .force("link",
-            d3.forceLink()
-                .distance(d => 50 + (d.source.radius + d.target.radius) * 2)
-                .id(d => d.id)
-        )
-        .force("charge",
-            d3.forceManyBody()
-                .strength(d => { return -10 * d.radius; })
-        )
-        .force("center", d3.forceCenter(width / 2, height / 2))
-        .on("tick", ticked),
+    simulation = newSimulation(),
     brusher = d3.brush()
         .extent([[-9999999, -9999999], [9999999, 9999999]])
         .on("start.brush", () => {
@@ -61,6 +51,21 @@ let svg = null,
         }),
     view = null;
 
+function newSimulation () {
+    return d3.forceSimulation()
+        .force("link",
+            d3.forceLink()
+                .distance(d => 30 + (d.source.radius + d.target.radius) * 2)
+                .id(d => d.id)
+        )
+        .force("charge",
+            d3.forceManyBody()
+                .strength(d => { return -7 * d.radius; })
+        )
+        .force("center", d3.forceCenter(width / 2, height / 2))
+        .on("tick", ticked);
+}
+
 function ticked () {
     if (!link)
         return;
@@ -168,26 +173,24 @@ function flattenEdges (root) {
 
 }
 
-function resetChildrenPosition (parent, children = []) {
-    if (!children || !children.length)
-        return;
-    for (let c of children) {
-        c.x = parent.x;
-        c.y = parent.y;
-        if (c.children)
-            resetChildrenPosition(c, c.children);
+onModelUpdate((graph, force) => update(graph, force));
+
+export function update (g = lastGraph, reset = false) {
+
+    if (!reset) {
+        // g = JSON.parse(JSON.stringify(g));
+        // g.id = -100;
     }
-}
 
-export function update (reset = false) {
+    let fl = flatten(g);
 
-    let g = getGraphData().foldedTree,
-        fl = flatten(g),
-        graph = {
+    let graph = {
             nodes: fl,
             edges: flattenEdges(g)
         };
 
+    lastGraph = g;
+
     if (reset) {
         link = link.data([]);
         link.exit().remove();
@@ -206,21 +209,17 @@ export function update (reset = false) {
         );
     link = linkEnter.merge(link);
 
-    node = nodes.selectAll(".node").data(graph.nodes, (d) => d.id);
+    node = nodes.selectAll(".node").data(graph.nodes, function (d) { return this._id || d.id; });
     node.exit().remove();
     let nodeEnter = node.enter().append("g")
+        .each(function (d) { this._id = d.id; })
         .attr("class", d => `node${ d.id === 0 ? " root" : "" } ${ d.type || "unknown" }`)
         .call(dragger)
         .on("dblclick", function (d) {
             d3.event.stopPropagation();
-            if (d.type === "folder" && d._children && d._children.length) {
-                let next = d._children.splice(0, 20),
-                    left = parseInt(d.label) - 20;
-                resetChildrenPosition(d, next);
-                d.children = d.children.concat(next);
-                d.label = left > 0 ? `${ left } more` : `Others`;
-                d3.select(this).select("text").text(d.label);
-                update();
+            if (unfold(d)) {
+                d.fx = d.x; d.fy = d.y;
+                setTimeout(() => d.fx = d.fy = null, 500);
             }
         })
         .on("click", function (d) {
@@ -242,12 +241,15 @@ export function update (reset = false) {
         .text(d => d.label);
     node = nodeEnter.merge(node);
 
+    if (reset)
+        simulation = newSimulation();
+
     simulation
         .nodes(graph.nodes)
         .force("link")
         .links(graph.edges);
 
-    simulation.restart();
+    simulation.alpha(reset ? 1 : 0.4).restart();
 
     brush.call(brusher)
         .on(".brush", null);
@@ -256,6 +258,7 @@ export function update (reset = false) {
 
     if (reset) {
         for (let i = 100; i > 0; --i) simulation.tick();
+        updateSelection();
     }
 
 }

src/static/fonts/iknowentitybrowsericons.woff

@@ -4,6 +4,7 @@ import * as details from "./details";
 import * as settings from "./settings";
 import * as source from "./source";
 import * as model from "./model";
+import * as controls from "./controls";
 
 window.init = () => {
 
@@ -12,6 +13,8 @@ window.init = () => {
     settings.init();
     source.init();
     graph.init();
+    controls.init();
+    model.init();
     model.update(() => graph.update(true));
 
 };

src/static/index.html

@@ -0,0 +1,28 @@
+let history = [],
+    redoHistory = [];
+
+export function createState ({ undo, redo } = {}) {
+    if (typeof undo !== "function" || typeof redo !== "function")
+        throw new Error("Undo and Redo must be both functions");
+    redoHistory = [];
+    history.push({ undo, redo });
+}
+
+export function undo () {
+    let undoed = history.pop();
+    if (!undoed)
+        return;
+    redoHistory.push(undoed);
+    undoed.undo();
+}
+
+export function redo () {
+    let redoed = redoHistory.pop();
+    if (!redoed)
+        return;
+    history.push(redoed);
+    redoed.redo();
+}
+
+window.undo = undo;
+window.redo = redo;