css set up

ICRAR · Feb 22, 2022 · 4c3951c · 4c3951c
1 parent 8f507f7
commit 4c3951c
Show file tree

Hide file tree

Showing 6 changed files with 176 additions and 49 deletions.
diff --git a/daliuge-engine/dlg/manager/web/session.html b/daliuge-engine/dlg/manager/web/session.html
@@ -160,12 +160,15 @@
 
 function view_as_graph(sessionId, selectedNode, serverUrl) {
 
+	/* Remove the list-related stuff */
+	d3.select('#pg-list').remove()
+	d3.select('#pg-progress-bar').remove();
+
 	const heightValue = 300;
 	const widthValue = 600;
 	// Set up zoom support
-	$("#main").append("<svg id='smallD3Graph'></svg>")
-	var svg = d3.select("#smallD3Graph"),
-    svgGroup = svg.append("g");
+	var svg = d3.select("svg");
+    // svgGroup = svg.append("g");
 	var inner = svg.select("g");
 
 	// svg.call(d3.zoom().on("zoom", function () {

diff --git a/daliuge-engine/dlg/prepareUser.py b/daliuge-engine/dlg/prepareUser.py
@@ -29,6 +29,7 @@
 import os
 import pwd
 import grp
+import platform
 
 def prepareUser(DLG_ROOT="."):
     workdir = f"{DLG_ROOT}/workspace/settings"
@@ -40,7 +41,11 @@ def prepareUser(DLG_ROOT="."):
     # get current user info
     pw = pwd.getpwuid(os.getuid())
     gr = grp.getgrgid(pw.pw_gid)
-    dgr = grp.getgrnam('docker')
+    if platform.system() == 'Darwin':
+        grpnam = 'staff'
+    else:
+        grpnam = 'docker'
+    dgr = grp.getgrnam(grpnam)
     with open(os.path.join(workdir, "passwd"), "wt") as file:
         file.write(open(os.path.join(template_dir, "passwd.template"), "rt").read())
         file.write(f"{pw.pw_name}:x:{pw.pw_uid}:{pw.pw_gid}:{pw.pw_gecos}:{DLG_ROOT}:/bin/bash\n")

diff --git a/daliuge-engine/run_engine.sh b/daliuge-engine/run_engine.sh
@@ -1,3 +1,4 @@
+#!/bin/bash
 DOCKER_OPTS="\
 --shm-size=1g --ipc=shareable \
 --rm \
@@ -14,7 +15,7 @@ common_prep ()
     mkdir -p ${DLG_ROOT}/testdata
     mkdir -p ${DLG_ROOT}/code
     # get current user and group id and prepare passwd and group files
-    DOCKER_GID=`python -c "from dlg.prepareUser import prepareUser; print(prepareUser(DLG_ROOT='${DLG_ROOT}'))"`
+    DOCKER_GID=`python3 -c "from dlg.prepareUser import prepareUser; print(prepareUser(DLG_ROOT='${DLG_ROOT}'))"`
     DOCKER_OPTS=${DOCKER_OPTS}" --group-add ${DOCKER_GID}"
     DOCKER_OPTS=${DOCKER_OPTS}" -v ${DLG_ROOT}/workspace/settings/passwd:/etc/passwd"
     DOCKER_OPTS=${DOCKER_OPTS}" -v ${DLG_ROOT}/workspace/settings/group:/etc/group"
@@ -30,7 +31,7 @@ case "$1" in
             echo "Please either create and grant access to $USER or build and run the development version."
         else
             VCS_TAG=`git describe --tags --abbrev=0|sed s/v//`
-            common_prep()
+            common_prep
             echo "Running Engine deployment version in background..."
             echo "docker run -td "${DOCKER_OPTS}"  icrar/daliuge-engine:${VCS_TAG}"
             docker run -td ${DOCKER_OPTS}  icrar/daliuge-engine:${VCS_TAG}

diff --git a/daliuge-translator/dlg/dropmake/web/main.js b/daliuge-translator/dlg/dropmake/web/main.js
@@ -64,65 +64,68 @@ function getRender() {
 }
 
 
-function drawGraphForDrops(g, drawGraph, oids, doSpecs) {
-
-  var TO_MANY_LTR_RELS = ['consumers', 'streamingConsumers', 'outputs']
-  var TO_MANY_RTL_RELS = ['inputs', 'streamingInputs', 'producers']
+function drawGraphForDrops(g, drawGraph, data) {
 
 	// Keep track of modifications to see if we need to re-draw
 	var modified = false;
 
 	// #1: create missing nodes in the graph
 	// Because oids is sorted, they will be created in oid order
 	var time0 = new Date().getTime();
-	for(var idx in oids) {
-		var doSpec = doSpecs[oids[idx]];
-		modified |= _addNode(g, doSpec);
+  var nodes = data['nodeDataArray'];
+  var links = data['linkDataArray']
+  console.log(nodes)
+	for(var idx of nodes.keys()) {
+		var node = nodes[idx];
+		modified |= _addNode(g, node);
 	}
 
 	var time1 = new Date().getTime();
 	console.log('Took %d [ms] to create the nodes', (time1 - time0))
 
 	// #2: establish missing relationships
-	for(var idx in oids) {
-		var doSpec = doSpecs[oids[idx]];
-		var lhOid = doSpec.oid;
-
-		// x-to-many relationships producing lh->rh edges
-		for(var relIdx in TO_MANY_LTR_RELS) {
-			var rel = TO_MANY_LTR_RELS[relIdx];
-			if( rel in doSpec ) {
-				for(var rhOid in doSpec[rel]) {
-					modified |= _addEdge(g, lhOid, doSpec[rel][rhOid]);
-				}
-			}
-		}
-		// x-to-many relationships producing rh->lh edges
-		for(var relIdx in TO_MANY_RTL_RELS) {
-			var rel = TO_MANY_RTL_RELS[relIdx];
-			if( rel in doSpec ) {
-				for(var rhOid in doSpec[rel]) {
-					modified |= _addEdge(g, doSpec[rel][rhOid], lhOid);
-				}
-			}
-		}
-		// there currently are no x-to-one relationships producing rh->lh edges
-		// there currently are no x-to-one relationships producing lh->rh edges
+	for(var idx of links.keys()) {
+    g.setEdge(nodes[links[idx]['from']]['oid'], nodes[links[idx]['to']]['oid'], {width: 40});
 	}
-
-	var time2 = new Date().getTime();
-	console.log('Took %d [ms] to create the edges', (time2 - time1))
+  console.log(g)
 
 	if( modified ) {
 		drawGraph();
 	}
 
-	var time3 = new Date().getTime();
-	console.log('Took %d [ms] to draw the hole thing', (time3 - time2))
-
     zoomFit()
 }
 
+function _addNode(g, node) {
+
+  console.log("adding node")
+  var TYPE_SHAPES= {Component:'rect', Data:'parallelogram'}
+
+	if( g.hasNode(g) ) {
+		return false;
+	}
+
+	var typeClass = node.category;
+	var typeShape = TYPE_SHAPES[node.category];
+	var notes = node.text;
+
+	var oid = node.oid;
+	var html = '<div class="drop-label" id="id_' + oid + '">';
+	html += '<span class="notes">' + notes + '</span>';
+	html += '<span style="font-size: 13px;">' + oid + '</span>';
+	html += "</div>";
+	g.setNode(oid, {
+		labelType: "html",
+		label: html,
+		rx: 5,
+		ry: 5,
+		padding: 0,
+		class: typeClass,
+		shape: typeShape
+	});
+	return true;
+}
+
 function saveSettings() {
     var newUrl = new URL($("#managerUrlInput").val());
     var newPort = newUrl.port;

diff --git a/daliuge-translator/dlg/dropmake/web/pg_viewer.html b/daliuge-translator/dlg/dropmake/web/pg_viewer.html
@@ -157,15 +157,14 @@ <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
     view_as_graph()
     function view_as_graph() {
 
-        /* Remove the list-related stuff */
-        d3.select('#pg-list').remove()
-        d3.select('#pg-progress-bar').remove();
-
+
         const heightValue = 300;
         const widthValue = 600;
         // Set up zoom support
-        var svg = d3.select("svg"),
-        svgGroup = svg.append("g");
+
+        d3.select("#SVGArea").append("svg").attr("id", "smallD3Graph").append("g").attr("id","root")
+	    var svg = d3.select("#smallD3Graph")
+        // svgGroup = svg.append("g");
         var inner = svg.select("g");
 
         // svg.call(d3.zoom().on("zoom", function () {
@@ -190,6 +189,7 @@ <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
 
         var render = getRender();
         function drawGraph() {
+            console.log("rendering")
             inner.call(render, g);
             // render(inner,g)
         }
@@ -246,6 +246,37 @@ <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
         // startStatusQuery(serverUrl, sessionId, selectedNode, graph_update_handler,
         //                 status_update_handler, 1000);	
     }
+
+    function zoomFit() {
+
+        // Center the graph
+        var zoom = d3.zoom().on("zoom", function () {//Add mouse wheel zoom event
+            inner.attr("transform", d3.event.transform);
+        });
+        var svg = d3.select('#smallD3Graph')
+        ;
+
+        var root = svg.select('#root');
+        var boot = $(".output");
+        var bounds = root.node().getBBox();
+        var parent = root.node().parentElement;
+        var fullWidth = parent.clientWidth,
+            fullHeight = parent.clientHeight;
+        var width = bounds.width,
+            height = bounds.height,
+            initialScale;
+        var widthScale = ((fullWidth-80)/width);
+        var heightScale = ((fullHeight-200)/height)
+        if (heightScale<widthScale){
+            initialScale = heightScale;
+        } else {
+            initialScale = widthScale;
+        };
+        initialScale = initialScale
+        var xCenterOffset = -(fullWidth - fullWidth) / 2;
+        boot.attr("transform", "translate(" + (fullWidth-(width*initialScale))/2 + ", " + ((fullHeight-80)-(height*initialScale))/2 + ")"+' scale('+initialScale+')');
+    }
+
     </script>
 </body>
 </html>
diff --git a/daliuge-translator/dlg/dropmake/web/src/main.css b/daliuge-translator/dlg/dropmake/web/src/main.css
@@ -333,6 +333,90 @@
     transition-delay: 1s;
 }
 
+
+.node rect, .node polygon {
+  stroke-width: 2.0px;
+  stroke: #bbb;
+  padding: 4px 8px;
+}
+
+/* DROP states */
+
+#SVGArea .node :first-child, #SVGArea rect {
+  fill: rgb(48, 206, 87);
+  width:300px;
+  height:85px;
+}
+
+#SVGArea .node span{
+  display: block;
+  height: min-content !important;
+}
+
+#SVGArea .drop-label{
+  padding: 5% 16%;
+}
+
+.node.initialized :first-child, rect.initialized {
+  fill: #ffe;
+}
+
+.node.writing :first-child, rect.writing {
+  fill: #ecde7b;
+}
+
+.node.completed :first-child, rect.completed {
+  fill: #7bdc7b;
+}
+
+.node.expired :first-child, rect.expired {
+  fill: #700000;
+}
+
+.node.cancelled :first-child, rect.cancelled {
+  fill: #cccccc;
+}
+
+.node.skipped :first-child, rect.skipped {
+  fill: #53c4f6;
+}
+
+.node.deleted :first-child, rect.deleted {
+  color: #700000;
+}
+
+/* AppDROP states */
+.node.not_run :first-child, rect.not_run {
+  fill: #ffe;
+}
+
+.node.running :first-child, rect.running {
+  fill: #ecde7b;
+}
+
+.node.finished :first-child, rect.finished {
+  fill: #7bdc7b;
+}
+
+.node.error :first-child, rect.error {
+  fill: #e44f33;
+}
+
+#SVGArea{
+  width:auto;
+  height:auto;
+  position: absolute;
+  top: 80px;
+  bottom: 25px;
+  left:0px;
+  right:0px;
+}
+
+#smallD3Graph{
+  width:100%;
+  height:100%;
+}
+
 #graphNameWrapper{
     position: absolute;
     top: 56px;