Data reset option

Author: nikitaeverywhere

src/static/js/graph/index.js

@@ -4,8 +4,7 @@ import { updateSelection, setLastSelectedNode } from "../selection";
 
 let shiftKey, ctrlKey,
     width = window.innerWidth,
-    height = window.innerHeight,
-    foreverUniq = 0;
+    height = window.innerHeight;
 
 let svg = null,
     brush = null,
@@ -132,12 +131,19 @@ export function init () {
         .on("keyup", keyUp);
 }
 
-export function update () {
+export function update (reset = false) {
 
     let graph = getGraphData();
 
+    if (reset) {
+        link = link.data([]);
+        link.exit().remove();
+        node = node.data([]);
+        node.exit().remove();
+    }
+
     link = link
-        .data(graph.edges, (d) => foreverUniq++);
+        .data(graph.edges, (d) => `${ d.source }-${ d.target }`);
     link.exit().remove();
     link = link.enter().append("line")
         .attr("class", d => d.type === "similar"
@@ -148,7 +154,7 @@ export function update () {
         );
 
     node = node
-        .data(graph.nodes, (d) => foreverUniq++);
+        .data(graph.nodes, (d) => d.id);
     node.exit().remove();
     node = node.enter().append("g")
         .attr("class", "node")

src/static/js/index.js

@@ -12,6 +12,6 @@ window.init = () => {
     settings.init();
     source.init();
     graph.init();
-    model.update(() => graph.update());
+    model.update(() => graph.update(true));
 
 };

src/static/js/model/index.js

@@ -2,6 +2,9 @@ import sampleData from "../sample_output2.json";
 import { getData, getOption } from "../source";
 import { toggleLoader } from "../utils";
 
+let SIZE_CRITERIA = "frequency",
+    FOLDING_CRITERIA = "frequency";
+
 function preprocess (graph) {
     let zeroID = null;
     graph.nodes.forEach(node => { if (!zeroID && node.id === 0) zeroID = node; });
@@ -16,7 +19,8 @@ function preprocess (graph) {
             }]
         });
     }
-    graph.nodes.forEach(node => node.radius = 5 + Math.sqrt(node.entities[0].frequency / 4 || 25));
+    graph.nodes.forEach(node =>
+        node.radius = 5 + Math.sqrt(node.entities[0][SIZE_CRITERIA] / 4 || 25));
     console.log(graph);
     return graph;
 }

src/static/js/settings/index.js

@@ -6,7 +6,7 @@ function toggleSettings (uiStateModel) {
     d3.select("#settings").classed("active", uiStateModel.settingsToggled);
     d3.select("#windows").classed("offScreen", uiStateModel.settingsToggled);
     if (!uiStateModel.settingsToggled) {
-        model.update(() => graph.update());
+        model.update(() => graph.update(true));
     }
 }