Folding less relevant nodes

Author: nikitaeverywhere

package.json

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

src/static/js/graph/index.js

@@ -1,4 +1,3 @@
-import { updateSelectedNodes } from "../tabular";
 import { getGraphData } from "../model";
 import { updateSelection, setLastSelectedNode } from "../selection";
 
@@ -131,35 +130,80 @@ export function init () {
         .on("keyup", keyUp);
 }
 
+function flatten (root) {
+
+    let nodes = [];
+
+    function recurse (node) {
+        if (node.children) node.children.forEach(recurse);
+        // if (!node.id) node.id = ++i;
+        nodes.push(node);
+    }
+
+    recurse(root);
+
+    return nodes;
+
+}
+
+function flattenEdges (root) {
+
+    let edges = [];
+
+    function recurse (node) {
+        if (!node.children)
+            return;
+        for (let c of node.children) {
+            recurse(c);
+            edges.push({ source: node, target: c, type: c.edgeType });
+        }
+    }
+
+    recurse(root);
+
+    return edges;
+
+}
+
 export function update (reset = false) {
 
-    let graph = getGraphData();
+    let g = getGraphData().foldedTree,
+        fl = flatten(g),
+        graph = {
+            nodes: fl,
+            edges: flattenEdges(g)
+        };
 
     if (reset) {
-        link = link.data([]);
-        link.exit().remove();
-        node = node.data([]);
-        node.exit().remove();
+        // link = link.data([]);
+        // link.exit().remove();
+        // node = node.data([]);
+        // node.exit().remove();
     }
 
-    link = link
-        .data(graph.edges, (d) => `${ d.source }-${ d.target }`);
+    link = links.selectAll("line").data(graph.edges, (d) => d.target.id);
     link.exit().remove();
-    link = link.enter().append("line")
+    let linkEnter = link.enter().append("line")
         .attr("class", d => d.type === "similar"
             ? "similar"
             : d.type === "related"
             ? "related"
             : "other"
         );
+    link = linkEnter.merge(link);
 
-    node = node
-        .data(graph.nodes, (d) => d.id);
+    node = nodes.selectAll(".node").data(graph.nodes, (d) => d.id);
     node.exit().remove();
-    node = node.enter().append("g")
-        .attr("class", "node")
+    let nodeEnter = node.enter().append("g")
+        .attr("class", d => `node ${ d.type || "unknown" }`)
         .call(dragger)
-        .on("dblclick", () => d3.event.stopPropagation())
+        .on("dblclick", (d) => {
+            d3.event.stopPropagation();
+            if (d.type === "folder" && d._children && d._children.length) {
+                d.children = d._children;
+                update();
+            }
+        })
         .on("click", function (d) {
             if (d3.event.defaultPrevented) return;
             if (!ctrlKey) {
@@ -170,16 +214,14 @@ export function update (reset = false) {
             updateSelection();
         });
 
-    node.append("circle")
+    nodeEnter.append("circle")
         .attr("r", d => d.radius);
 
-    node.append("text")
+    nodeEnter.append("text")
         .attr("dy", ".3em")
         .attr("style", d => `font-size:${ Math.round(d.radius / 2) }px`)
         .text(d => d.label);
-
-    node.exit().remove();
-    link.exit().remove();
+    node = nodeEnter.merge(node);
 
     simulation
         .nodes(graph.nodes)
@@ -196,6 +238,8 @@ export function update (reset = false) {
 
     brush.select('.overlay').style('cursor', 'auto');
 
-    for (let i = 100; i > 0; --i) simulation.tick();
+    if (reset) {
+        for (let i = 100; i > 0; --i) simulation.tick();
+    }
 
 }

src/static/js/model/index.js

@@ -3,13 +3,53 @@ import { getData, getOption } from "../source";
 import { toggleLoader } from "../utils";
 
 let SIZE_CRITERIA = "frequency",
-    FOLDING_CRITERIA = "frequency";
+    FOLDING_CRITERIA = "frequency",
+    MAX_CHILDREN = 20;
+
+function fold (tree) {
+    if (!tree.children || tree.children.length <= MAX_CHILDREN)
+        return tree;
+    for (let cld of tree.children) {
+        fold(cld);
+    }
+    let rest = tree.children.splice(MAX_CHILDREN);
+    tree.children.push({
+        label: "...",
+        type: "folder",
+        _children: rest,
+        radius: 10,
+        entities: [],
+        id: Math.random()
+    });
+    return tree;
+}
+
+function toTree (graph, parent) {
+    parent.children = [];
+    for (let edge of graph.edges) {
+        if (edge.source !== parent.id)
+            continue;
+        let t = null;
+        for (let node of graph.nodes) {
+            if (node.id === edge.target) {
+                t = node;
+                break;
+            }
+        }
+        if (t) {
+            t.edgeType = edge.type;
+            parent.children.push(toTree(graph, t));
+        }
+    }
+    parent.children.sort((a, b) => a[FOLDING_CRITERIA] > b[FOLDING_CRITERIA] ? 1 : -1);
+    return parent;
+}
 
 function preprocess (graph) {
     let zeroID = null;
     graph.nodes.forEach(node => { if (!zeroID && node.id === 0) zeroID = node; });
     if (!zeroID) {
-        graph.nodes.push({
+        graph.nodes.unshift(zeroID = {
             id: 0,
             label: getOption("seed"),
             type: "entity",
@@ -22,7 +62,16 @@ function preprocess (graph) {
     graph.nodes.forEach(node =>
         node.radius = 5 + Math.sqrt(node.entities[0][SIZE_CRITERIA] / 4 || 25));
     console.log(graph);
-    return graph;
+    // fold(graph, zeroID);
+    let tree = toTree(graph, zeroID),
+        foldedTree = fold(tree);
+    console.log(tree);
+
+    return {
+        graph: graph,
+        tree: tree,
+        foldedTree: foldedTree
+    };
 }
 
 let graph = preprocess(sampleData.graph);

src/static/js/selection.js

@@ -6,7 +6,7 @@ let selection = [],
 
 export function updateSelection () {
 
-    selection = model.getGraphData().nodes.filter(node => !!node.selected);
+    selection = model.getGraphData().graph.nodes.filter(node => !!node.selected);
 
     if (!selection.length) lastSelectedNode = null;
     if (lastSelectedNode && !lastSelectedNode.selected) {

src/static/scss/graph.scss

@@ -27,16 +27,25 @@
             circle {
                 stroke: #fff;
                 stroke-width: 1px;
+                fill: red;
+            }
+
+            &.entity circle {
                 fill: #7ca1ff;
             }
 
+            &.folder circle {
+                fill: #b58aff;
+            }
+
             &.selected circle {
                 stroke: #000;
             }
 
             text {
                 text-anchor: middle;
                 pointer-events: none;
+                fill: black;
             }
 
         }