From cdb14dd478266a234156062354df4f401f039677 Mon Sep 17 00:00:00 2001
From: anbcodes <31807975+anbcodes@users.noreply.github.com>
Date: Mon, 22 Jul 2019 16:13:12 -0400
Subject: [PATCH 1/3] Updated README.md

Updated README.md to include documentation for JSON format
---
 README.md | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index df121c8..1143485 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ npm run serve
 
 ## Usage
 
-* Click "Upload Edge List CSV" to upload a file of the form:
+* Click "UPLOAD CVS OR JSON" to upload a file of the form:
 ```
 source,target
 a,b
@@ -20,5 +20,30 @@ b,c
 c,d
 d,a
 ```
+for CSV and
+```
+{
+  "edges": [
+    {
+      "source": "a",
+      "target": "b"
+      },
+    {
+      "source": "b",
+      "target": "c"
+    },
+    {
+      "source": "c",
+      "target": "d"
+    },
+    {
+      "source": "d",
+      "target": "a"
+    }
+  ]
+}
+```
+for JSON
+
 * Click "Start Layout".
 * Play with the controls!

From c9aaea399ba4246d63a0c27a18c042a8b2da84c6 Mon Sep 17 00:00:00 2001
From: anbcodes <31807975+anbcodes@users.noreply.github.com>
Date: Tue, 23 Jul 2019 11:34:09 -0400
Subject: [PATCH 2/3] Added a Node List to README

I added a node list to README.md and fixed some indentation.
---
 README.md | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 1143485..6e7085b 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ npm run serve
 
 ## Usage
 
-* Click "UPLOAD CVS OR JSON" to upload a file of the form:
+* Click "UPLOAD CSV OR JSON" to upload a file of the form:
 ```
 source,target
 a,b
@@ -23,11 +23,17 @@ d,a
 for CSV and
 ```
 {
+    "nodes": [
+    { "id": "a" },
+    { "id": "b" },
+    { "id": "c" },
+    { "id": "d" }
+  ],
   "edges": [
     {
       "source": "a",
       "target": "b"
-      },
+    },
     {
       "source": "b",
       "target": "c"

From 55c57dec1fd9eafe4255d6fbc31448ef2328673a Mon Sep 17 00:00:00 2001
From: anbcodes <andrewbaumes@gmail.com>
Date: Wed, 24 Jul 2019 12:49:38 -0400
Subject: [PATCH 3/3] disable start layout button until layout loaded

---
 README.md   |  35 +-----
 src/App.vue | 326 ++++++++++++++++++++++++++++------------------------
 2 files changed, 178 insertions(+), 183 deletions(-)

diff --git a/README.md b/README.md
index 6e7085b..752bb47 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ npm run serve
 
 ## Usage
 
-* Click "UPLOAD CSV OR JSON" to upload a file of the form:
+* Click "Upload Edge List CSV" to upload a file of the form:
 ```
 source,target
 a,b
@@ -20,36 +20,5 @@ b,c
 c,d
 d,a
 ```
-for CSV and
-```
-{
-    "nodes": [
-    { "id": "a" },
-    { "id": "b" },
-    { "id": "c" },
-    { "id": "d" }
-  ],
-  "edges": [
-    {
-      "source": "a",
-      "target": "b"
-    },
-    {
-      "source": "b",
-      "target": "c"
-    },
-    {
-      "source": "c",
-      "target": "d"
-    },
-    {
-      "source": "d",
-      "target": "a"
-    }
-  ]
-}
-```
-for JSON
-
 * Click "Start Layout".
-* Play with the controls!
+* Play with the controls!
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 829b1c8..959e324 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,37 +2,38 @@
   <v-app>
     <v-navigation-drawer fixed app class="pa-4">
       <v-btn block @click="$refs.file.click()">Upload CSV or JSON</v-btn>
-      <input ref="file" type="file" style="display:none" @change="upload">
+      <input ref="file" type="file" style="display:none" @change="upload" />
       <div>{{ nodeCount }} nodes, {{ edgeCount }} edges</div>
-      <v-checkbox
-        v-model="showEdges"
-        label="Show edges"
-        hide-details
-      ></v-checkbox>
+      <v-checkbox v-model="showEdges" label="Show edges" hide-details></v-checkbox>
       <v-slider
         v-model="edgeOpacity"
-        :min="0.01" :max="1.00" :step="0.01"
+        :min="0.01"
+        :max="1.00"
+        :step="0.01"
         thumb-label
         label="Edge opacity"
         hide-details
       ></v-slider>
       <v-slider
         v-model="size"
-        :min="0.01" :max="1" :step="0.01"
+        :min="0.01"
+        :max="1"
+        :step="0.01"
         thumb-label
         label="Size"
         hide-details
       ></v-slider>
-      <v-combobox
-        v-model="sizeField"
-        :items="['None', ...fields]"
-        label="Size field"
-        hide-details
-      ></v-combobox>
-      <v-btn block @click="toggleLayout">{{ layoutRunning ? 'Stop' : 'Start' }} layout</v-btn>
+      <v-combobox v-model="sizeField" :items="['None', ...fields]" label="Size field" hide-details></v-combobox>
+      <v-btn
+        block
+        :disabled="!layoutLoaded"
+        @click="toggleLayout"
+      >{{ layoutRunning ? 'Stop' : 'Start' }} layout</v-btn>
       <v-slider
         v-model="alpha"
-        :min="0.00" :max="1.00" :step="0.01"
+        :min="0.00"
+        :max="1.00"
+        :step="0.01"
         thumb-label
         :readonly="this.layoutRunning"
         label="Energy"
@@ -40,76 +41,71 @@
       ></v-slider>
       <v-slider
         v-model="chargeStrength"
-        :min="0" :max="50" :step="1"
+        :min="0"
+        :max="50"
+        :step="1"
         thumb-label
         label="Charge strength"
         hide-details
       ></v-slider>
       <v-slider
         v-model="theta"
-        :min="0.5" :max="3.0" :step="0.1"
+        :min="0.5"
+        :max="3.0"
+        :step="0.1"
         thumb-label
         label="Charge approximation"
         hide-details
       ></v-slider>
       <v-slider
         v-model="collideStrength"
-        :min="0.00" :max="1.00" :step="0.01"
+        :min="0.00"
+        :max="1.00"
+        :step="0.01"
         thumb-label
         label="Collide force"
         hide-details
       ></v-slider>
       <v-slider
         v-model="linkStrength"
-        :min="0.00" :max="1.00" :step="0.01"
+        :min="0.00"
+        :max="1.00"
+        :step="0.01"
         thumb-label
         label="Link force"
         hide-details
       ></v-slider>
-      <v-checkbox
-        v-model="center"
-        label="Center force"
-        hide-details
-      ></v-checkbox>
+      <v-checkbox v-model="center" label="Center force" hide-details></v-checkbox>
       <v-slider
         v-model="xStrength"
-        :min="0.00" :max="1.00" :step="0.01"
+        :min="0.00"
+        :max="1.00"
+        :step="0.01"
         thumb-label
         label="X force"
         hide-details
       ></v-slider>
-      <v-combobox
-        v-model="xField"
-        :items="fields"
-        label="X field"
-        hide-details
-      ></v-combobox>
+      <v-combobox v-model="xField" :items="fields" label="X field" hide-details></v-combobox>
       <v-slider
         v-model="yStrength"
-        :min="0.00" :max="1.00" :step="0.01"
+        :min="0.00"
+        :max="1.00"
+        :step="0.01"
         thumb-label
         label="Y force"
         hide-details
       ></v-slider>
-      <v-combobox
-        v-model="yField"
-        :items="fields"
-        label="Y field"
-        hide-details
-      ></v-combobox>
+      <v-combobox v-model="yField" :items="fields" label="Y field" hide-details></v-combobox>
       <v-slider
         v-model="radialStrength"
-        :min="0.00" :max="1.00" :step="0.01"
+        :min="0.00"
+        :max="1.00"
+        :step="0.01"
         thumb-label
         label="Radial force"
         hide-details
       ></v-slider>
-      <v-combobox
-        v-model="radialField"
-        :items="fields"
-        label="Radial field"
-        hide-details
-      ></v-combobox>
+      <v-combobox v-model="radialField" :items="fields" label="Radial field" hide-details></v-combobox>
       <v-btn block @click="download()">Download JSON</v-btn>
       <a ref="downloadAnchor" style="display:none"></a>
     </v-navigation-drawer>
@@ -120,10 +116,10 @@
 </template>
 
 <script>
-import geo from 'geojs/geo.js';
+import geo from "geojs/geo.js";
 
-import LayoutWorker from 'worker-loader!./worker.js';
-import * as scales from './scales.js';
+import LayoutWorker from "worker-loader!./worker.js";
+import * as scales from "./scales.js";
 
 const layoutWorker = new LayoutWorker();
 let map;
@@ -134,13 +130,14 @@ let positions;
 let nodeMap;
 
 export default {
-  data: function () {
+  data: function() {
     return {
+      layoutLoaded: false,
       fields: [],
       showEdges: false,
       edgeOpacity: 0.5,
       size: 0.5,
-      sizeField: 'degree',
+      sizeField: "degree",
       layoutRunning: false,
       alpha: 1.0,
       alphaFromWorker: false,
@@ -156,7 +153,7 @@ export default {
       radialField: null,
       radialStrength: 0,
       nodeCount: 0,
-      edgeCount: 0,
+      edgeCount: 0
     };
   },
   mounted() {
@@ -165,10 +162,13 @@ export default {
       minx: -b,
       maxx: b,
       miny: -b,
-      maxy: b,
+      maxy: b
     };
     let params = geo.util.pixelCoordinateParams(
-      '#map', bounds.maxx - bounds.minx, bounds.maxy - bounds.miny);
+      "#map",
+      bounds.maxx - bounds.minx,
+      bounds.maxy - bounds.miny
+    );
 
     // the utility function assumes top left is 0, 0.  Move it to minx, miny.
     params.map.maxBounds.left += bounds.minx;
@@ -179,7 +179,10 @@ export default {
     params.map.center.y += bounds.miny;
 
     // inflate the bounds to add a border
-    const maxwh = Math.max(bounds.maxx - bounds.minx, bounds.maxy - bounds.miny);
+    const maxwh = Math.max(
+      bounds.maxx - bounds.minx,
+      bounds.maxy - bounds.miny
+    );
     params.map.maxBounds.left -= maxwh * 0.1;
     params.map.maxBounds.top -= maxwh * 0.1;
     params.map.maxBounds.right += maxwh * 0.1;
@@ -188,41 +191,46 @@ export default {
     // allow zoomming in until 1 unit of space is 2^(value) bigger.
     params.map.max += 3;
     map = geo.map(params.map);
-    let layer = map.createLayer('feature', {features: ['point', 'line']});
+    let layer = map.createLayer("feature", { features: ["point", "line"] });
 
-    const uiLayer = map.createLayer('ui', {zIndex: 2});
-    const tooltip = uiLayer.createWidget('dom', {position: {x: 0, y: 0}});
+    const uiLayer = map.createLayer("ui", { zIndex: 2 });
+    const tooltip = uiLayer.createWidget("dom", { position: { x: 0, y: 0 } });
     const tooltipElem = tooltip.canvas();
-    tooltipElem.setAttribute('id', 'tooltip');
-    tooltipElem.classList.toggle('hidden', true);
-    tooltipElem.style['pointer-events'] = 'none';
+    tooltipElem.setAttribute("id", "tooltip");
+    tooltipElem.classList.toggle("hidden", true);
+    tooltipElem.style["pointer-events"] = "none";
 
     map.draw();
 
     // Load the graph if we have one as a URL parameter
     const url = new URL(window.location.href);
-    const graphURL = url.searchParams.get('graph');
+    const graphURL = url.searchParams.get("graph");
     if (graphURL) {
       fetch(graphURL)
-        .then(response => Promise.all([response.text(), response.headers.get('Content-Type')]))
+        .then(response =>
+          Promise.all([response.text(), response.headers.get("Content-Type")])
+        )
         .then(([content, contentType]) => {
-          if (contentType.startsWith('application/json')) {
-            layoutWorker.postMessage({type: 'loadJSON', text: content});
-          } else if (contentType.startsWith('text/csv')) {
-            layoutWorker.postMessage({type: 'loadEdgeList', text: content});
+          if (contentType.startsWith("application/json")) {
+            layoutWorker.postMessage({ type: "loadJSON", text: content });
+          } else if (contentType.startsWith("text/csv")) {
+            layoutWorker.postMessage({ type: "loadEdgeList", text: content });
           } else {
-            console.log(`Error: Cannot handle files with content type ${contentType}.`);
+            console.log(
+              `Error: Cannot handle files with content type ${contentType}.`
+            );
           }
         });
     }
 
     layoutWorker.onmessage = e => {
-      if (e.data.type === 'graph') {
+      if (e.data.type === "graph") {
+        this.layoutLoaded = true;
         graph = e.data.graph;
         this.nodeCount = graph.nodes.length;
         this.edgeCount = graph.edges.length;
 
-        const ignoreFields = ['x', 'y', 'vx', 'vy', 'select'];
+        const ignoreFields = ["x", "y", "vx", "vy", "select"];
         this.fields = [];
         graph.nodes.forEach(n => {
           Object.keys(n).forEach(f => {
@@ -234,20 +242,23 @@ export default {
         this.fields.sort();
 
         map.deleteLayer(layer);
-        layer = map.createLayer('feature', {features: ['point', 'line']});
+        layer = map.createLayer("feature", { features: ["point", "line"] });
 
         nodeMap = {};
-        graph.nodes.forEach((n, i) => nodeMap[n.id] = i);
-        lines = layer.createFeature('line').data(graph.edges.map(e => [nodeMap[e.source], nodeMap[e.target]])).style({
-          position: nodeid => graph.nodes[nodeid],
-          width: 1,
-          strokeColor: 'black',
-          strokeOpacity: this.edgeOpacity,
-        });
+        graph.nodes.forEach((n, i) => (nodeMap[n.id] = i));
+        lines = layer
+          .createFeature("line")
+          .data(graph.edges.map(e => [nodeMap[e.source], nodeMap[e.target]]))
+          .style({
+            position: nodeid => graph.nodes[nodeid],
+            width: 1,
+            strokeColor: "black",
+            strokeOpacity: this.edgeOpacity
+          });
         lines.visible(this.showEdges);
         map.draw();
 
-        graph.nodes.forEach(n => n.adj = []);
+        graph.nodes.forEach(n => (n.adj = []));
         graph.edges.forEach(e => {
           const s = graph.nodes[nodeMap[e.source]];
           const t = graph.nodes[nodeMap[e.target]];
@@ -259,16 +270,21 @@ export default {
           }
         });
 
-        points = layer.createFeature('point', {
-          primitiveShape: 'triangle',
-          style: {
-            strokeColor: 'black',
-            fillColor: nodeid => graph.nodes[nodeid].select ? ['yellow', 'red'][graph.nodes[nodeid].select - 1] : 'grey',
-            fillOpacity: 0.5,
-            strokeOpacity: 0.5,
-          },
-          position: nodeid => graph.nodes[nodeid]
-        }).data(Object.keys(graph.nodes));
+        points = layer
+          .createFeature("point", {
+            primitiveShape: "triangle",
+            style: {
+              strokeColor: "black",
+              fillColor: nodeid =>
+                graph.nodes[nodeid].select
+                  ? ["yellow", "red"][graph.nodes[nodeid].select - 1]
+                  : "grey",
+              fillOpacity: 0.5,
+              strokeOpacity: 0.5
+            },
+            position: nodeid => graph.nodes[nodeid]
+          })
+          .data(Object.keys(graph.nodes));
 
         this.updateSizeScale();
 
@@ -280,65 +296,63 @@ export default {
         map.draw();
 
         points
-          .geoOn(geo.event.feature.mouseon, (evt) => {
+          .geoOn(geo.event.feature.mouseon, evt => {
             const nodeid = evt.data;
             const node = graph.nodes[nodeid];
             tooltip.position(evt.mouse.geo);
             let description = `<div><b>${node.id}</b></div>`;
             this.fields.forEach(key => {
-              if (key !== 'id') {
+              if (key !== "id") {
                 description += `<div>${key}: ${node[key]}</div>`;
               }
-            })
+            });
             tooltipElem.innerHTML = description;
-            tooltipElem.classList.toggle('hidden', false);
-            node.adj.forEach(n => n.select = 1);
+            tooltipElem.classList.toggle("hidden", false);
+            node.adj.forEach(n => (n.select = 1));
             node.select = 2;
             points.modified();
             map.draw();
           })
-          .geoOn(geo.event.feature.mousemove, function (evt) {
+          .geoOn(geo.event.feature.mousemove, function(evt) {
             tooltip.position(evt.mouse.geo);
           })
-          .geoOn(geo.event.feature.mouseoff, function (evt) {
-            tooltipElem.classList.toggle('hidden', true);
-            graph.nodes.forEach(n => n.select = 0);
+          .geoOn(geo.event.feature.mouseoff, function(evt) {
+            tooltipElem.classList.toggle("hidden", true);
+            graph.nodes.forEach(n => (n.select = 0));
             points.modified();
             map.draw();
           });
-      }
-      else if (e.data.type === 'positions') {
+      } else if (e.data.type === "positions") {
         positions = e.data.nodes;
         points.position(nodeid => positions[nodeid]);
         map.draw();
-      }
-      else if (e.data.type === 'alpha') {
+      } else if (e.data.type === "alpha") {
         this.alphaFromWorker = true;
         this.alpha = e.data.value;
-        this.$nextTick(() => this.alphaFromWorker = false);
+        this.$nextTick(() => (this.alphaFromWorker = false));
       }
-    }
+    };
 
     // Add watchers which sync data to layout worker
     [
-      'chargeStrength',
-      'theta',
-      'collideStrength',
-      'linkStrength',
-      'center',
-      'xField',
-      'xStrength',
-      'yField',
-      'yStrength',
-      'radialField',
-      'radialStrength',
+      "chargeStrength",
+      "theta",
+      "collideStrength",
+      "linkStrength",
+      "center",
+      "xField",
+      "xStrength",
+      "yField",
+      "yStrength",
+      "radialField",
+      "radialStrength"
     ].forEach(name => {
       function sendToWorker(value) {
-        layoutWorker.postMessage({type: name, value});
+        layoutWorker.postMessage({ type: name, value });
       }
       this.$watch(name, {
         handler: sendToWorker,
-        immediate: true,
+        immediate: true
       });
     });
   },
@@ -354,7 +368,7 @@ export default {
     },
     edgeOpacity(value) {
       if (lines) {
-        lines.style('strokeOpacity', value);
+        lines.style("strokeOpacity", value);
         lines.modified();
         map.draw();
       }
@@ -362,56 +376,64 @@ export default {
     alpha: {
       handler(value) {
         if (!this.alphaFromWorker) {
-          layoutWorker.postMessage({type: 'alpha', value: value});
+          layoutWorker.postMessage({ type: "alpha", value: value });
         }
       },
-      immediate: true,
+      immediate: true
     },
     size: {
       handler(value) {
-        layoutWorker.postMessage({type: 'size', value});
+        layoutWorker.postMessage({ type: "size", value });
         if (points) {
           this.updateSizeScale();
           map.draw();
         }
       },
-      immediate: true,
+      immediate: true
     },
     sizeField: {
       handler(value) {
-        layoutWorker.postMessage({type: 'sizeField', value});
+        layoutWorker.postMessage({ type: "sizeField", value });
         if (points) {
           this.updateSizeScale();
           map.draw();
         }
       },
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   methods: {
     upload() {
       const file = this.$refs.file.files[0];
       if (file) {
         const reader = new FileReader();
-        reader.readAsText(file, 'UTF-8');
-        reader.onload = function (evt) {
-          const extension = file.name.split('.').slice(-1)[0];
-          if (extension === 'json') {
-            layoutWorker.postMessage({type: 'loadJSON', text: evt.target.result});
-          } else if (extension === 'csv') {
-            layoutWorker.postMessage({type: 'loadEdgeList', text: evt.target.result});
+        reader.readAsText(file, "UTF-8");
+        reader.onload = function(evt) {
+          const extension = file.name.split(".").slice(-1)[0];
+          if (extension === "json") {
+            layoutWorker.postMessage({
+              type: "loadJSON",
+              text: evt.target.result
+            });
+          } else if (extension === "csv") {
+            layoutWorker.postMessage({
+              type: "loadEdgeList",
+              text: evt.target.result
+            });
           } else {
-            console.log(`Error: Cannot handle files with extension ${extension}.`);
+            console.log(
+              `Error: Cannot handle files with extension ${extension}.`
+            );
           }
-        }
-        reader.onerror = function (evt) {
-          console.log('Error: ', evt);
-        }
+        };
+        reader.onerror = function(evt) {
+          console.log("Error: ", evt);
+        };
       }
     },
     toggleLayout() {
       this.layoutRunning = !this.layoutRunning;
-      layoutWorker.postMessage({type: 'layout', value: this.layoutRunning});
+      layoutWorker.postMessage({ type: "layout", value: this.layoutRunning });
       if (this.layoutRunning) {
         // Don't draw edges while performing layout for performance reasons
         lines.visible(false);
@@ -426,30 +448,34 @@ export default {
     },
     updateSizeScale() {
       if (points) {
-        const sizeScale = scales.generateSizeScale(graph.nodes, this.sizeField, this.size);
-        points.style('radius', (nodeid) => {
+        const sizeScale = scales.generateSizeScale(
+          graph.nodes,
+          this.sizeField,
+          this.size
+        );
+        points.style("radius", nodeid => {
           return Math.pow(2, map.zoom()) * sizeScale(graph.nodes[nodeid]);
         });
       }
     },
     download() {
-      const nodesWithPositions = graph.nodes.map(({adj, ...n}, i) => ({
+      const nodesWithPositions = graph.nodes.map(({ adj, ...n }, i) => ({
         ...n,
-        ...positions[i],
+        ...positions[i]
       }));
       const saveGraph = {
         nodes: nodesWithPositions,
-        edges: graph.edges,
-      }
+        edges: graph.edges
+      };
       var blob = new Blob([JSON.stringify(saveGraph, null, 2)], {
-        type : 'data:text/json;charset=utf-8;',
+        type: "data:text/json;charset=utf-8;"
       });
-      this.$refs.downloadAnchor.setAttribute('href', URL.createObjectURL(blob));
-      this.$refs.downloadAnchor.setAttribute('download', 'graph.json');
+      this.$refs.downloadAnchor.setAttribute("href", URL.createObjectURL(blob));
+      this.$refs.downloadAnchor.setAttribute("download", "graph.json");
       this.$refs.downloadAnchor.click();
-    },
-  },
-}
+    }
+  }
+};
 </script>
 
 <style>