feat: Add button to hide/close UI details

Adds a button to the martian ui which will hide/show the pipeline details, enabling the user the user to use the full screen to evaluate the pipeline graph.
martian-lang · Dec 14, 2023 · 75a63f6 · 75a63f6
1 parent 724b891
commit 75a63f6
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/web/martian/client/graph.js b/web/martian/client/graph.js
@@ -14,7 +14,7 @@
       }
     };
   });
-
+  const graphWidth = "750px";  
   renderGraph = function($scope, $compile) {
     var g = new dagreD3.graphlib.Graph({
       directed: true
@@ -74,7 +74,7 @@
     if (maxY < 700) {
       maxY = 700;
     }
-    $scope.svg.attr("width", "750px").attr("height", maxY.toString() + "px");
+    $scope.graph.select("svg").attr("width", graphWidth).attr("height", maxY.toString() + "px");
     $scope.graph.attr("transform", "translate(5,5) scale(" + scale + ")");
     $scope.graph.selectAll("g.node.stage rect").attr("rx", 20).attr("ry", 20);
     $scope.graph.selectAll("g.node.pipeline rect").attr("rx", 0).attr("ry", 0);
@@ -202,6 +202,14 @@
 
   app.controller("MartianGraphCtrl", function($scope, $compile, $http, $interval) {
     var auth, j, len, ref, ref1, selected, tab, v, zoom;
+    $scope.toggleDetails = function () {
+      $scope.detailsCollapsed = !$scope.detailsCollapsed;
+      if ($scope.detailsCollapsed) {
+        $scope.svg.attr("width", "100%");
+      } else {
+        $scope.svg.attr("width", graphWidth);
+      }
+    };
     $scope.pname = pname;
     $scope.psid = psid;
     $scope.admin = admin;

diff --git a/web/martian/res/css/main.css b/web/martian/res/css/main.css
@@ -605,9 +605,14 @@ div.topfile {
     position: absolute;
     padding: 5px 10px;
     top: 50px;
-    left: 0px;
+    left: 0;
+    right: 0;
     margin-left: 775px;
 }
+.details.collapsed {
+    display: none;
+}
+
 pre {
     font-size: 12px;
 }
@@ -804,3 +809,10 @@ td.tight {
     z-index: 1;
     position: relative;
 }
+/* SVG from  https://fonts.google.com/icons?selected=Material+Symbols+Outlined:right_panel_close:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=right+panel*/
+.icon-toggle {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E");
+    width:24px;
+    height: 24px;
+    border: none;
+  }
diff --git a/web/martian/templates/graph.html b/web/martian/templates/graph.html
@@ -39,6 +39,7 @@
                    uib-btn-radio="true"
                    style="margin-top: -7px">Performance</div>
             </div>
+            <button class="icon-toggle" ng-click="toggleDetails()" title="Toggle Details"></button>
           </div>[[end]]
         </div>
       </div>
@@ -48,7 +49,7 @@
         <g id="top" transform="translate(5,5) scale(1.0)"></g>
       </svg>
     </div>
-    <div class="details" id="info" ng-show="!perf &amp;&amp; !node">
+    <div class="details" ng-class="{ collapsed: detailsCollapsed }" id="info" ng-show="!perf &amp;&amp; !node">
       <h4 class="stagename"><a href="#">Pipestance Details</a></h4>
       <h5>Runtime</h5>
       <table class="table">
@@ -125,7 +126,7 @@ <h5>Paths</h5>
         <pre>{{info.invokesrc}}</pre>
       </div>
     </div>
-    <div class="details" id="perf" ng-if="perf &amp;&amp; pnode">
+    <div class="details" ng-class="{ collapsed: detailsCollapsed }" id="perf" ng-if="perf &amp;&amp; pnode">
       <h4 class="stagename">
         <a href="#"
            ng-click="selectNode(topnode.fqname)"
@@ -227,7 +228,7 @@ <h4 class="stagename">
         <div google-chart chart="charts[forki]" ng-if="charts[forki]"></div>
       </span>
     </div>
-    <div class="details" id="stage" ng-show="!perf &amp;&amp; node">
+    <div class="details" ng-class="{ collapsed: detailsCollapsed }" id="stage" ng-show="!perf &amp;&amp; node">
       <h4 class="stagename">
         <a href="#" ng-click="node=null;id=null">&larr;</a>&nbsp;<a href="#">{{node.name}}</a>&nbsp;{{node.type}}
       </h4>