Refactor page

main.go

@@ -2,12 +2,9 @@ package main
 
 import (
 	"bytes"
-	"runtime"
 
 	"github.com/divan/graphx/formats"
-	"github.com/divan/graphx/layout"
 	"github.com/gopherjs/vecty"
-	"github.com/status-im/whispervis/widgets"
 )
 
 func main() {
@@ -17,29 +14,12 @@ func main() {
 		panic(err)
 	}
 
-	forceEditor := widgets.NewForceEditor()
-	config := forceEditor.Config()
-	l := layout.NewFromConfig(data, config)
-	steps := 50
-	page := &Page{
-		layout:      l,
-		loader:      widgets.NewLoader(steps),
-		forceEditor: forceEditor,
-	}
+	page := NewPage(data, 50)
 
 	vecty.SetTitle("Whisper Simulation")
 	vecty.AddStylesheet("css/pure-min.css")
 	vecty.AddStylesheet("css/controls.css")
 	vecty.RenderBody(page)
 
-	go func() {
-		for i := 0; i < steps; i++ {
-			l.UpdatePositions()
-			page.loader.Inc()
-			vecty.Rerender(page.loader)
-			runtime.Gosched()
-		}
-		page.loaded = true
-		vecty.Rerender(page)
-	}()
+	page.StartSimulation()
 }

page.go

@@ -1,6 +1,10 @@
 package main
 
 import (
+	"fmt"
+	"runtime"
+
+	"github.com/divan/graphx/graph"
 	"github.com/divan/graphx/layout"
 	"github.com/gopherjs/gopherjs/js"
 	"github.com/gopherjs/vecty"
@@ -32,6 +36,19 @@ type Page struct {
 	forceEditor *widgets.ForceEditor
 }
 
+// Page creates and inits new app page.
+func NewPage(g *graph.Graph, steps int) *Page {
+	forceEditor := widgets.NewForceEditor()
+	config := forceEditor.Config()
+	l := layout.NewFromConfig(g, config)
+	page := &Page{
+		layout:      l,
+		loader:      widgets.NewLoader(steps),
+		forceEditor: forceEditor,
+	}
+	return page
+}
+
 // Render implements the vecty.Component interface.
 func (p *Page) Render() vecty.ComponentOrHTML {
 	return elem.Body(
@@ -49,6 +66,7 @@ func (p *Page) Render() vecty.ComponentOrHTML {
 						vecty.MarkupIf(!p.loaded, vecty.Style("visibility", "hidden")),
 					),
 					p.forceEditor,
+					p.updateButton(),
 				),
 			),
 			elem.Div(
@@ -98,3 +116,33 @@ func (p *Page) shutdown(renderer *three.WebGLRenderer) {
 	p.renderer = nil
 	p.graph, p.nodes, p.edges = nil, nil, nil
 }
+
+func (p *Page) updateButton() *vecty.HTML {
+	return elem.Div(
+		elem.Button(
+			vecty.Markup(
+				vecty.Class("pure-button"),
+				vecty.Style("background", "rgb(28, 184, 65)"),
+				vecty.Style("color", "white"),
+				vecty.Style("border-radius", "4px"),
+				event.Click(p.onUpdateClick),
+			),
+			vecty.Text("Update"),
+		),
+	)
+}
+
+func (p *Page) onUpdateClick(e *vecty.Event) {
+	fmt.Println("Clicked")
+}
+
+func (p *Page) StartSimulation() {
+	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)
+}

widgets/force_editor.go

@@ -1,12 +1,9 @@
 package widgets
 
 import (
-	"fmt"
-
 	"github.com/divan/graphx/layout"
 	"github.com/gopherjs/vecty"
 	"github.com/gopherjs/vecty/elem"
-	"github.com/gopherjs/vecty/event"
 )
 
 type ForceEditor struct {
@@ -28,18 +25,6 @@ func (l *ForceEditor) Render() vecty.ComponentOrHTML {
 			),
 			vecty.List(l.inputs),
 		),
-		elem.Div(
-			elem.Button(
-				vecty.Markup(
-					vecty.Class("pure-button"),
-					vecty.Style("background", "rgb(28, 184, 65)"),
-					vecty.Style("color", "white"),
-					vecty.Style("border-radius", "4px"),
-					event.Click(l.onUpdateClick),
-				),
-				vecty.Text("Update"),
-			),
-		),
 	)
 }
 
@@ -59,7 +44,3 @@ func NewForceEditor() *ForceEditor {
 func (l *ForceEditor) Config() layout.Config {
 	return l.config
 }
-
-func (l *ForceEditor) onUpdateClick(e *vecty.Event) {
-	fmt.Println("Clicked")
-}

widgets/loader.go

@@ -38,6 +38,10 @@ func (l *Loader) Inc() {
 	l.current++
 }
 
+func (l *Loader) Steps() int {
+	return l.steps
+}
+
 // Progress reports loader's progress in percentage.
 func (l *Loader) Progress() float64 {
 	return 100 * float64(l.current) / float64(l.steps)