Add network file upload

filereader.go

@@ -0,0 +1,25 @@
+package main
+
+import "github.com/gopherjs/gopherjs/js"
+
+// FileReader implements FileReader API for js.Object.
+type FileReader struct {
+	*js.Object // FileReader object
+}
+
+// NewFileReader inits new FileReader.
+func NewFileReader() *FileReader {
+	return &FileReader{
+		Object: js.Global.Get("FileReader").New(),
+	}
+}
+
+// ReadAll reads all data from blob using FileReader API.
+func (fr *FileReader) ReadAll(blob *js.Object) []byte {
+	ch := make(chan []byte)
+	fr.Set("onload", func() {
+		ch <- js.Global.Get("Uint8Array").New(fr.Get("result")).Interface().([]byte)
+	})
+	fr.Call("readAsArrayBuffer", blob)
+	return <-ch
+}

page.go

@@ -1,8 +1,6 @@
 package main
 
 import (
-	"runtime"
-
 	"github.com/divan/graphx/graph"
 	"github.com/divan/graphx/layout"
 	"github.com/gopherjs/gopherjs/js"
@@ -62,6 +60,7 @@ func (p *Page) Render() vecty.ComponentOrHTML {
 				vecty.Markup(vecty.Class("pure-u-1-5")),
 				elem.Heading1(vecty.Text("Whisper Message Propagation")),
 				elem.Paragraph(vecty.Text("This visualization represents message propagation in the p2p network.")),
+				p.uploadButton(),
 				elem.Div(
 					vecty.Markup(
 						vecty.MarkupIf(!p.loaded, vecty.Style("visibility", "hidden")),
@@ -139,21 +138,3 @@ func (p *Page) onUpdateClick(e *vecty.Event) {
 	}
 	go p.StartSimulation()
 }
-
-func (p *Page) StartSimulation() {
-	p.loader.Reset()
-	p.loaded = false
-	vecty.Rerender(p)
-
-	config := p.forceEditor.Config()
-	l := layout.NewFromConfig(p.data, config)
-	p.layout = l
-	for i := 0; i < p.loader.Steps(); i++ {
-		p.layout.UpdatePositions()
-		p.loader.Inc()
-		vecty.Rerender(p.loader)
-		runtime.Gosched()
-	}
-	p.loaded = true
-	vecty.Rerender(p)
-}

simulation.go

@@ -0,0 +1,26 @@
+package main
+
+import (
+	"runtime"
+
+	"github.com/divan/graphx/layout"
+	"github.com/gopherjs/vecty"
+)
+
+func (p *Page) StartSimulation() {
+	p.loader.Reset()
+	p.loaded = false
+	vecty.Rerender(p)
+
+	config := p.forceEditor.Config()
+	l := layout.NewFromConfig(p.data, config)
+	p.layout = l
+	for i := 0; i < p.loader.Steps(); i++ {
+		p.layout.UpdatePositions()
+		p.loader.Inc()
+		vecty.Rerender(p.loader)
+		runtime.Gosched()
+	}
+	p.loaded = true
+	vecty.Rerender(p)
+}

upload.go

@@ -0,0 +1,36 @@
+package main
+
+import (
+	"fmt"
+
+	"github.com/gopherjs/vecty"
+	"github.com/gopherjs/vecty/elem"
+	"github.com/gopherjs/vecty/event"
+	"github.com/gopherjs/vecty/prop"
+)
+
+// uploadButton renders a upload button for network data.
+func (p *Page) uploadButton() *vecty.HTML {
+	return elem.Div(
+		elem.Input(
+			vecty.Markup(
+				prop.ID("file"),
+				prop.Type("file"),
+				event.Input(p.onUploadClick),
+			),
+			vecty.Text("Upload network.json"),
+		),
+	)
+}
+
+// onUploadClick implements callback for "Upload" button clicked event.
+func (p *Page) onUploadClick(e *vecty.Event) {
+	// FIXME: run as a gorotine because GopherJS can't block JS thread in callback
+	go func() {
+		file := e.Target.Get("files").Index(0)
+		fmt.Println("File size:", file.Get("size"))
+
+		data := NewFileReader().ReadAll(file)
+		fmt.Println("Input", string(data))
+	}()
+}