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/5] 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/5] 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 bac43174bb7e34b04dfeb71231a8ccfee921ef2e Mon Sep 17 00:00:00 2001
From: anbcodes <andrewbaumes@gmail.com>
Date: Wed, 24 Jul 2019 12:14:23 -0400
Subject: [PATCH 3/5] refactored App.vue

---
 src/App.vue                       | 374 +++++++++++++-----------------
 src/components/AppSlider.vue      |  42 ++++
 src/components/FieldBox.vue       |  17 ++
 src/components/UnderOneSlider.vue |  39 ++++
 src/components/Upload.vue         |  15 ++
 5 files changed, 274 insertions(+), 213 deletions(-)
 create mode 100644 src/components/AppSlider.vue
 create mode 100644 src/components/FieldBox.vue
 create mode 100644 src/components/UnderOneSlider.vue
 create mode 100644 src/components/Upload.vue

diff --git a/src/App.vue b/src/App.vue
index 829b1c8..ec3ec20 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,115 +1,25 @@
 <template>
   <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">
+      <upload @file="upload" />
       <div>{{ nodeCount }} nodes, {{ edgeCount }} edges</div>
-      <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"
-        thumb-label
-        label="Edge opacity"
-        hide-details
-      ></v-slider>
-      <v-slider
-        v-model="size"
-        :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-checkbox v-model="showEdges" label="Show edges" hide-details></v-checkbox>
+      <under-one-slider v-model="edgeOpacity" :min="0.01" label="Edge opacity" />
+      <under-one-slider v-model="size" :min="0.01" label="Size" />
+      <field-box v-model="sizeField" :items="['None', ...fields]" label="Size field" />
       <v-btn block @click="toggleLayout">{{ layoutRunning ? 'Stop' : 'Start' }} layout</v-btn>
-      <v-slider
-        v-model="alpha"
-        :min="0.00" :max="1.00" :step="0.01"
-        thumb-label
-        :readonly="this.layoutRunning"
-        label="Energy"
-        hide-details
-      ></v-slider>
-      <v-slider
-        v-model="chargeStrength"
-        :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"
-        thumb-label
-        label="Charge approximation"
-        hide-details
-      ></v-slider>
-      <v-slider
-        v-model="collideStrength"
-        :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"
-        thumb-label
-        label="Link force"
-        hide-details
-      ></v-slider>
-      <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"
-        thumb-label
-        label="X force"
-        hide-details
-      ></v-slider>
-      <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"
-        thumb-label
-        label="Y force"
-        hide-details
-      ></v-slider>
-      <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"
-        thumb-label
-        label="Radial force"
-        hide-details
-      ></v-slider>
-      <v-combobox
-        v-model="radialField"
-        :items="fields"
-        label="Radial field"
-        hide-details
-      ></v-combobox>
+      <under-one-slider v-model="alpha" :read-only="this.layoutRunning" label="Energy" />
+      <app-slider v-model="chargeStrength" :min="0" :max="50" :step="1" label="Charge strength" />
+      <app-slider v-model="theta" :min="0.5" :max="3.0" :step="0.1" label="Charge approximation" />
+      <under-one-slider v-model="collideStrength" label="Collide force" />
+      <under-one-slider v-model="linkStrength" label="Link force" />
+      <v-checkbox v-model="center" label="Center force" hide-details />
+      <under-one-slider v-model="xStrength" label="X force" />
+      <field-box v-model="xField" :items="fields" label="X field" />
+      <under-one-slider v-model="yStrength" label="Y force" />
+      <field-box v-model="yField" :items="fields" label="Y field" />
+      <under-one-slider v-model="radialStrength" label="Radial force" />
+      <field-box v-model="radialField" :items="fields" label="Radial field" />
       <v-btn block @click="download()">Download JSON</v-btn>
       <a ref="downloadAnchor" style="display:none"></a>
     </v-navigation-drawer>
@@ -120,10 +30,15 @@
 </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 UnderOneSlider from "./components/UnderOneSlider";
+import FieldBox from "./components/FieldBox";
+import Upload from "./components/Upload";
+import AppSlider from "./components/AppSlider";
+
+import LayoutWorker from "worker-loader!./worker.js";
+import * as scales from "./scales.js";
 
 const layoutWorker = new LayoutWorker();
 let map;
@@ -134,13 +49,19 @@ let positions;
 let nodeMap;
 
 export default {
-  data: function () {
+  components: {
+    FieldBox,
+    UnderOneSlider,
+    Upload,
+    AppSlider
+  },
+  data: function() {
     return {
       fields: [],
       showEdges: false,
       edgeOpacity: 0.5,
       size: 0.5,
-      sizeField: 'degree',
+      sizeField: "degree",
       layoutRunning: false,
       alpha: 1.0,
       alphaFromWorker: false,
@@ -156,7 +77,7 @@ export default {
       radialField: null,
       radialStrength: 0,
       nodeCount: 0,
-      edgeCount: 0,
+      edgeCount: 0
     };
   },
   mounted() {
@@ -165,10 +86,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 +103,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 +115,45 @@ 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") {
         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 +165,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 +193,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 +219,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 +291,7 @@ export default {
     },
     edgeOpacity(value) {
       if (lines) {
-        lines.style('strokeOpacity', value);
+        lines.style("strokeOpacity", value);
         lines.modified();
         map.draw();
       }
@@ -362,56 +299,63 @@ 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];
+    upload(file) {
       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 +370,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>
diff --git a/src/components/AppSlider.vue b/src/components/AppSlider.vue
new file mode 100644
index 0000000..2584117
--- /dev/null
+++ b/src/components/AppSlider.vue
@@ -0,0 +1,42 @@
+<template>
+  <v-slider
+    v-model="value"
+    :min="min"
+    :max="max"
+    :step="step"
+    thumb-label
+    :label="label"
+    hide-details
+    :readonly="readOnly"
+    @change="update"
+  ></v-slider>
+</template>
+<script>
+export default {
+  props: {
+    value: Number,
+    label: String,
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 1
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    update() {
+      this.$emit("input", this.value);
+    }
+  }
+};
+</script>
diff --git a/src/components/FieldBox.vue b/src/components/FieldBox.vue
new file mode 100644
index 0000000..509fe74
--- /dev/null
+++ b/src/components/FieldBox.vue
@@ -0,0 +1,17 @@
+<template>
+  <v-combobox v-model="value" :items="items" :label="label" hide-details @change="update"></v-combobox>
+</template>
+<script>
+export default {
+  props: {
+    value: null,
+    items: Array,
+    label: String
+  },
+  methods: {
+    update() {
+      this.$emit("input", this.value);
+    }
+  }
+};
+</script>
diff --git a/src/components/UnderOneSlider.vue b/src/components/UnderOneSlider.vue
new file mode 100644
index 0000000..b60352a
--- /dev/null
+++ b/src/components/UnderOneSlider.vue
@@ -0,0 +1,39 @@
+<template>
+  <app-slider
+    v-model="value"
+    :min="min"
+    :max="1.00"
+    :step="0.01"
+    thumb-label
+    :label="label"
+    hide-details
+    :read-only="readOnly"
+    @change="update"
+  ></app-slider>
+</template>
+<script>
+import AppSlider from "./AppSlider";
+
+export default {
+  components: {
+    AppSlider
+  },
+  props: {
+    value: Number,
+    label: String,
+    min: {
+      type: Number,
+      default: 0
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    update() {
+      this.$emit("input", this.value);
+    }
+  }
+};
+</script>
diff --git a/src/components/Upload.vue b/src/components/Upload.vue
new file mode 100644
index 0000000..1b5b916
--- /dev/null
+++ b/src/components/Upload.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <v-btn block @click="$refs.file.click()">Upload CSV or JSON</v-btn>
+    <input ref="file" type="file" style="display:none" @change="upload" />
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    upload() {
+      this.$emit("file", this.$refs.file.files[0]);
+    }
+  }
+};
+</script>

From de3b1ae2063f19bf57024108b22e1963a987f28f Mon Sep 17 00:00:00 2001
From: anbcodes <andrewbaumes@gmail.com>
Date: Wed, 24 Jul 2019 12:33:36 -0400
Subject: [PATCH 4/5] fixed mutating prop error

---
 src/components/AppSlider.vue      |  8 ++++----
 src/components/FieldBox.vue       | 12 +++++++++---
 src/components/UnderOneSlider.vue |  8 ++++----
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/AppSlider.vue b/src/components/AppSlider.vue
index 2584117..843e323 100644
--- a/src/components/AppSlider.vue
+++ b/src/components/AppSlider.vue
@@ -1,6 +1,6 @@
 <template>
   <v-slider
-    v-model="value"
+    :value="value"
     :min="min"
     :max="max"
     :step="step"
@@ -8,7 +8,7 @@
     :label="label"
     hide-details
     :readonly="readOnly"
-    @change="update"
+    @input="update(arguments[0])"
   ></v-slider>
 </template>
 <script>
@@ -34,8 +34,8 @@ export default {
     }
   },
   methods: {
-    update() {
-      this.$emit("input", this.value);
+    update(value) {
+      this.$emit("input", value);
     }
   }
 };
diff --git a/src/components/FieldBox.vue b/src/components/FieldBox.vue
index 509fe74..e8d8383 100644
--- a/src/components/FieldBox.vue
+++ b/src/components/FieldBox.vue
@@ -1,5 +1,11 @@
 <template>
-  <v-combobox v-model="value" :items="items" :label="label" hide-details @change="update"></v-combobox>
+  <v-combobox
+    :value="value"
+    :items="items"
+    :label="label"
+    hide-details
+    @input="update(arguments[0])"
+  ></v-combobox>
 </template>
 <script>
 export default {
@@ -9,8 +15,8 @@ export default {
     label: String
   },
   methods: {
-    update() {
-      this.$emit("input", this.value);
+    update(value) {
+      this.$emit("input", value);
     }
   }
 };
diff --git a/src/components/UnderOneSlider.vue b/src/components/UnderOneSlider.vue
index b60352a..1f51392 100644
--- a/src/components/UnderOneSlider.vue
+++ b/src/components/UnderOneSlider.vue
@@ -1,6 +1,6 @@
 <template>
   <app-slider
-    v-model="value"
+    :value="value"
     :min="min"
     :max="1.00"
     :step="0.01"
@@ -8,7 +8,7 @@
     :label="label"
     hide-details
     :read-only="readOnly"
-    @change="update"
+    @input="update(arguments[0])"
   ></app-slider>
 </template>
 <script>
@@ -31,8 +31,8 @@ export default {
     }
   },
   methods: {
-    update() {
-      this.$emit("input", this.value);
+    update(value) {
+      this.$emit("input", value);
     }
   }
 };

From 01352e838c5139bcd5672d43fe724ae50e5ddeff Mon Sep 17 00:00:00 2001
From: anbcodes <andrewbaumes@gmail.com>
Date: Wed, 24 Jul 2019 12:35:51 -0400
Subject: [PATCH 5/5] removed changes to README.md

---
 README.md | 35 ++---------------------------------
 1 file changed, 2 insertions(+), 33 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