Merge branch 'liu-102' into master

ICRAR · Jul 20, 2021 · 90f4dd9 · 90f4dd9
2 parents 3bb697d + 2f6e318
commit 90f4dd9
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 13 deletions.
diff --git a/daliuge-engine/dlg/manager/web/session.html b/daliuge-engine/dlg/manager/web/session.html
@@ -76,7 +76,7 @@
 	</div>
 
 	<div class="graph" id="pg-graph">
-		<svg><g/></svg>
+		<svg><g id="root"/></svg>
 	</div>
 
 	<div class="progress" id="pg-progress-bar">
@@ -176,6 +176,7 @@
 			});
 	svg.call(zoom);
 
+
 	var render = getRender();
 	var g = new dagreD3.graphlib.Graph();
 	g.setGraph({
@@ -189,6 +190,11 @@
 	function drawGraph() {
 		inner.call(render, g);
 	}
+	//zoom WIP
+	// var initialScale = 0.75;
+	// svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
+
+	// svg.attr('height', g.graph().height * initialScale + 40);
 
 	var orientButtons = d3.selectAll('#graph-orientation-buttons button');
 	orientButtons.on('click', function() {
@@ -199,6 +205,7 @@
 		g.graph().rankdir = direction;
 		drawGraph();
 		orientButtons.attr("disabled", null);
+		status_update_handler()
 	});
 
 	// This works assuming that the status list comes in the same order
@@ -215,6 +222,40 @@
 
 	startStatusQuery(serverUrl, sessionId, selectedNode, graph_update_handler,
 	                 status_update_handler, 1000);
+
+}
+
+	//zoom WIP
+function zoomFit(paddingPercent, transitionDuration) {
+	// var zoom = d3.behavior.zoom().scaleExtent([1/4, 4]).on('zoom', function () {
+	// 	console.trace("zoom.zoom", d3.event.translate, d3.event.scale);
+	// 	root.attr('transform',
+	// 		'translate(' + d3.event.translate + ')'
+	// 		+   'scale('+d3.event.scale+')');
+	// });
+
+	// var svg = d3
+	// 	.select('svg')
+	// 	.call(zoom)
+	// ;
+
+	// var root = svg.select('#root');
+	// var bounds = root.node().getBBox();
+	// var parent = root.node().parentElement;
+	// var fullWidth = parent.clientWidth,
+	//     fullHeight = parent.clientHeight;
+	// var width = bounds.width,
+	//     height = bounds.height;
+	// console.log("boom"+width+"ah"+height)
+	// var midX = bounds.x + width / 2,
+	//     midY = bounds.y + height / 2;
+	// if (width == 0 || height == 0) return; // nothing to fit
+	// var scale = (paddingPercent || 0.75) / Math.max(width / fullWidth, height / fullHeight);
+	// var translate = [fullWidth / 2 - scale * midX, fullHeight / 2 - scale * midY];
+
+	// console.trace("zoomFit", translate, scale);
+	// root.call(zoom.translate(translate).scale(scale).event);
+	// 	console.log("root");
 }
 
 function view_as_list(sessionId, selectedNode, serverUrl) {

diff --git a/daliuge-engine/dlg/manager/web/static/css/progressBar.css b/daliuge-engine/dlg/manager/web/static/css/progressBar.css
@@ -2,6 +2,7 @@
   .node rect, .node polygon {
     stroke-width: 2.0px;
     stroke: #bbb;
+    padding: 4px 8px;
   }
 
   /* DROP states */

diff --git a/daliuge-engine/dlg/manager/web/static/css/session.css b/daliuge-engine/dlg/manager/web/static/css/session.css
@@ -53,16 +53,16 @@ svg {
 }
 
 .node g div {
-  width: 180px;
-  height: 60px;
   color: #000;
+  padding: 4px 30px;
   overflow: hidden;
 }
 
 .node polygon+g div div {
-	padding-left: 20%
+	padding-left: 13%
 }
 
+
 .node rect+g div div {
 	padding-left: 2%
 }
@@ -79,7 +79,12 @@ svg {
 }
 
 .notes {
-  font-size: 90%;
+  font-size: 15px;
+}
+
+.notes span {
+  font-size: 16px;
+  font-weight: 500;
 }
 
 .drop-label span {

diff --git a/daliuge-engine/dlg/manager/web/static/js/dm.js b/daliuge-engine/dlg/manager/web/static/js/dm.js
@@ -368,6 +368,7 @@ function drawGraphForDrops(g, drawGraph, oids, doSpecs) {
 	var time3 = new Date().getTime();
 	console.log('Took %d [ms] to draw the hole thing', (time3 - time2))
 
+    zoomFit(0.95, 500)
 }
 
 function setStatusColor(status){
@@ -456,24 +457,24 @@ function _addNode(g, doSpec) {
 	var typeShape = TYPE_SHAPES[doSpec.type];
 	var notes = '';
 	// console.log('Drop type', doSpec.type)
+	if( doSpec.nm ) {
+		notes = "<span>" + doSpec.nm + "</span>"
+	}
 	if( doSpec.type == 'app' ) {
 		var nameParts = doSpec.app.split('.');
-		notes = nameParts[nameParts.length - 1];
-	}
-	else if( doSpec.type == 'plain' ) {
-		notes = 'storage: ' + doSpec.storage;
+		notes += nameParts[nameParts.length - 1];
 	}
 	else if( doSpec.type == 'socket' ) {
-		notes = 'port: ' + doSpec.port;
+		notes += 'port: ' + doSpec.port;
 	}
-	if( doSpec.nm ) {
-		notes += '<br/>' + doSpec.nm
+	else if( doSpec.type == 'plain' ) {
+		notes += 'storage: ' + doSpec.storage;
 	}
 
 	var oid = doSpec.oid;
 	var html = '<div class="drop-label" id="id_' + oid + '">';
-	html += '<span>' + oid + '</span>';
 	html += '<span class="notes">' + notes + '</span>';
+	html += '<span style="font-size: 13px;">' + oid + '</span>';
 	html += "</div>";
 	g.setNode(oid, {
 		labelType: "html",