Restructure routes to enable easy navigation between selected node and full graph

Author: Trent Willis

app/controllers/graph.js

@@ -0,0 +1,18 @@
+import Ember from 'ember';
+
+const {
+  Controller,
+  getOwner,
+  computed,
+  inject
+} = Ember;
+
+export default Controller.extend({
+  graph: inject.service(),
+
+  route: computed.alias('router.currentPath'),
+
+  init() {
+    this.set('router', getOwner(this).lookup('router:main'));
+  }
+});

app/controllers/index.js renamed to app/controllers/graph/index.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+const {
+  inject
+} = Ember;
+
+export default Ember.Controller.extend({
+  graph: inject.service()
+});

app/controllers/graph/node.js

@@ -7,7 +7,10 @@ const Router = Ember.Router.extend({
 });
 
 Router.map(function() {
-  this.route('selected-node');
+  this.route('graph', { path: '/' }, function() {
+    this.route('node');
+  });
+
   this.route('slow-nodes');
 });
 

app/router.js

@@ -50,6 +50,6 @@ export default Ember.Service.extend({
     sessionStorage.setItem(SELECTED_NODE_STORAGE_KEY, node.id);
 
     this.set('selectedNode', node);
-    getOwner(this).lookup('router:main').transitionTo('selected-node');
+    getOwner(this).lookup('router:main').transitionTo('graph.node');
   }
 });

app/routes/slow-nodes.js

@@ -15,6 +15,13 @@ body {
   width: 100%;
 }
 
+.selected-node-controls {
+  position: fixed;
+  width: 100%;
+  z-index: 1;
+  bottom: 0;
+}
+
 .node text {
   font: 10px sans-serif;
 }

app/services/graph.js

@@ -1,7 +1,7 @@
 <section class="global-nav hero is-light">
   <nav class="nav">
     <div class="nav-left">
-      {{link-to 'Graph' 'index' class="nav-item is-tab" activeClass="is-active"}}
+      {{link-to 'Graph' 'graph' class="nav-item is-tab" activeClass="is-active"}}
       {{link-to 'Nodes' 'slow-nodes' class="nav-item is-tab" activeClass="is-active"}}
     </div>
 

app/styles/app.css

@@ -0,0 +1,18 @@
+{{outlet}}
+
+<div class="selected-node-controls hero-footer">
+  <nav class="tabs is-boxed is-fullwidth">
+    <div class="container">
+      <ul>
+        <li class="{{if (eq route 'graph.index') 'is-active'}}">
+          {{#link-to 'graph.index'}}Full Graph{{/link-to}}
+        </li>
+        <li class="{{if (eq route 'graph.node') 'is-active'}}">
+          {{#link-to 'graph.node'}}
+            Selected Node: {{if graph.selectedNode graph.selectedNode.label.name 'None'}}
+          {{/link-to}}
+        </li>
+      </ul>
+    </div>
+  </nav>
+</div>

app/templates/application.hbs

@@ -0,0 +1 @@
+{{basic-tree graphData=graph.graph}}