Update navigation bar and support clearing data

Author: Trent Willis

app/controllers/application.js

@@ -29,6 +29,10 @@ export default Ember.Controller.extend({
           this.get('graph').setGraph(contents);
           this.set('showUploadModal', false);
         });
+    },
+
+    clearData() {
+      this.get('graph').clearGraph();
     }
   }
 })

app/services/graph.js

@@ -41,6 +41,11 @@ export default Ember.Service.extend({
     this.set('graph', graph);
   },
 
+  clearGraph() {
+    this.set('data', null);
+    this.set('graph', null);
+  },
+
   selectNode(node) {
     sessionStorage.setItem(SELECTED_NODE_STORAGE_KEY, node.id);
 

app/styles/app.css

@@ -1,3 +1,14 @@
+body {
+  margin-top: 3.5rem;
+}
+
+.global-nav {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+
 .node text {
   font: 10px sans-serif;
 }
@@ -17,6 +28,7 @@
   vertical-align: top;
   overflow: hidden;
 }
+
 .svg-content {
   display: inline-block;
   position: absolute;

app/templates/application.hbs

@@ -1,18 +1,27 @@
-<section class="hero is-light">
+<section class="global-nav hero is-light">
   <nav class="nav">
     <div class="nav-left">
-      {{link-to 'Home' 'index' class="nav-item is-tab" activeClass="is-active"}}
-      {{link-to 'Slow Nodes' 'slow-nodes' class="nav-item is-tab" activeClass="is-active"}}
-      <a class="nav-item" {{action (action (mut showUploadModal) true)}}>
-        Select Data
-      </a>
+      {{link-to 'Graph' 'index' class="nav-item is-tab" activeClass="is-active"}}
+      {{link-to 'Nodes' 'slow-nodes' class="nav-item is-tab" activeClass="is-active"}}
     </div>
+
     <div class="nav-center">
       <p class="nav-item title">
         Heimdall Visualizer
       </p>
     </div>
+
     <div class="nav-right">
+      {{#if (not graph.data)}}
+        <a href="#" class="nav-item" {{action (action (mut showUploadModal) true)}}>
+          Upload Data
+        </a>
+      {{else}}
+        <a href="#" class="nav-item" {{action 'clearData'}}>
+          Clear Data
+        </a>
+      {{/if}}
+
       <a class="nav-item" href="https://github.com/rwjblue/heimdalljs-visualizer">
         <span class="icon">
           <i class="fa fa-github"></i>