functional button for side bar minimizing, to not push visualisation interaction to history stack

app/routes/deployments/single.js

@@ -49,7 +49,10 @@ export default Ember.Route.extend({
             entityType,
             entityId
         });
-        this.transitionTo(url);
+        this.replaceWith(url);
+    },
+    backToSystem() {
+        this.replaceWith(this.get('routeName'));
     },
     willTransition(transition) {
         this.debug('transition', transition.targetName, this.get('routeName'));

app/styles/components/_architecture.scss

@@ -14,8 +14,8 @@ $resizingAnimationDuration: .5s; // see deployments/detail route for property
     transition: width $resizingAnimationDuration;
 }
 
-.minimizeSidebar {
-    visibility: hidden;
+button.minimizeSidebar {
+    display: none;
 }
 .extendedSidebar { // TODO: not set by route?
     .visualisationContainer {
@@ -24,8 +24,8 @@ $resizingAnimationDuration: .5s; // see deployments/detail route for property
     .visualisationSidebar {
         @extend .col-md-4
     }
-    .minimizeSidebar {
-        visibility: visible;
+    button.minimizeSidebar {
+        display: inline-block;
     }
 }
 

app/templates/components/architecture-viewer.hbs

@@ -4,7 +4,7 @@
     </div>
     <div class="visualisationSidebar">
 
-        <button class="btn btn-default minimizeSidebar">
+        <button class="btn btn-default minimizeSidebar" {{action (route-action 'backToSystem')}}>
             <i class="glyphicon glyphicon-chevron-right"></i>
         </button>