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>