From 75a63f61aa62e7db183df21f19a634502b760eb0 Mon Sep 17 00:00:00 2001 From: Stephen Williams Date: Wed, 13 Dec 2023 19:48:11 -0500 Subject: [PATCH] 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. --- web/martian/client/graph.js | 12 ++++++++++-- web/martian/res/css/main.css | 14 +++++++++++++- web/martian/templates/graph.html | 7 ++++--- 3 files changed, 27 insertions(+), 6 deletions(-) diff --git a/web/martian/client/graph.js b/web/martian/client/graph.js index 3a88bf68..8bc5f5ae 100644 --- 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 index 52209119..6f6552d4 100644 --- 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 index faaec204..7b347173 100644 --- 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 + [[end]] @@ -48,7 +49,7 @@ -
+

Pipestance Details

Runtime
@@ -125,7 +126,7 @@
Paths
{{info.invokesrc}}
-