diff --git a/daliuge-engine/dlg/manager/web/session.html b/daliuge-engine/dlg/manager/web/session.html index 720e4a616..13b8bade9 100644 --- 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("") - 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 index 790fc4111..e9db77000 100644 --- 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 index 4f8462789..67fb5c7e8 100755 --- 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 index 09b0c36d2..2833c3f01 100644 --- a/daliuge-translator/dlg/dropmake/web/main.js +++ b/daliuge-translator/dlg/dropmake/web/main.js @@ -64,10 +64,7 @@ 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; @@ -75,54 +72,60 @@ function drawGraphForDrops(g, drawGraph, oids, doSpecs) { // #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 = '
'; + html += '' + notes + ''; + html += '' + oid + ''; + html += "
"; + 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 index dcc94bcf2..a14f9c2d9 100755 --- a/daliuge-translator/dlg/dropmake/web/pg_viewer.html +++ b/daliuge-translator/dlg/dropmake/web/pg_viewer.html @@ -157,15 +157,14 @@ 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 @@ var render = getRender(); function drawGraph() { + console.log("rendering") inner.call(render, g); // render(inner,g) } @@ -246,6 +246,37 @@ // 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 diff --git a/daliuge-translator/dlg/dropmake/web/src/main.css b/daliuge-translator/dlg/dropmake/web/src/main.css index b4f9f702f..7754b63e2 100644 --- 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;