optimised dag graph node sizen in translator and engine, now scales w…

…ith text and is different for each shape
ICRAR · Jun 7, 2022 · 4be6764 · 4be6764
1 parent 95a934d
commit 4be6764
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 9 deletions.
diff --git a/daliuge-engine/dlg/manager/web/static/css/session.css b/daliuge-engine/dlg/manager/web/static/css/session.css
@@ -54,10 +54,18 @@ svg {
 
 .node g div {
   color: #000;
-  padding: 4px 30px;
+  padding: 4px 25px 4px 25px;
   overflow: hidden;
 }
 
+#pg-graph .drop-label.rect{
+  padding: 4px 0px 4px 0px;
+}
+
+#pg-graph .drop-label.parallelogram{
+  padding: 4px 28px 4px 28px;
+}
+
 .node polygon+g div div {
 	padding-left: 13%
 }

diff --git a/daliuge-engine/dlg/manager/web/static/js/dm.js b/daliuge-engine/dlg/manager/web/static/js/dm.js
@@ -547,9 +547,9 @@ function _addNode(g, doSpec) {
 	else if( doSpec.type == 'plain' ) {
 		notes += 'storage: ' + doSpec.storage;
 	}
-
+	
 	var oid = doSpec.oid;
-	var html = '<div class="drop-label" id="id_' + oid + '">';
+	var html = '<div class="drop-label '+typeShape+'" id="id_' + oid + '">';
 	html += '<span class="notes">' + notes + '</span>';
 	html += '<span style="font-size: 13px;">' + oid + '</span>';
 	html += "</div>";

diff --git a/daliuge-translator/dlg/dropmake/web/graph_init.js b/daliuge-translator/dlg/dropmake/web/graph_init.js
@@ -209,8 +209,8 @@ function _addNode(g, node) {
 	var typeShape = TYPE_SHAPES[node.category];
 	var notes = node.text;
 
-	var oid = node.oid;
-	var html = '<div class="drop-label" id="id_' + oid + '">';
+    var oid = node.oid;
+	var html = '<div class="drop-label '+typeShape+'" id="id_' + oid + '">';
 	html += '<span class="notes">' + notes + '</span>';
 	html += '<span style="font-size: 13px;">' + oid + '</span>';
 	html += "</div>";

diff --git a/daliuge-translator/dlg/dropmake/web/src/main.css b/daliuge-translator/dlg/dropmake/web/src/main.css
@@ -393,15 +393,14 @@
 .node rect, .node polygon {
   stroke-width: 2.0px;
   stroke: #bbb;
+  height:60px;
   padding: 4px 8px;
 }
 
 /* DROP states */
 
 #main #dagGraphArea .node :first-child, #main #dagGraphArea rect {
   fill: #9ab4d0;
-  width:300px;
-  height:85px;
   stroke: black;
 }
 
@@ -414,8 +413,18 @@
   font-weight: 700;
 }
 
-#main #dagGraphArea .drop-label{
-  padding: 5% 18%;
+.node g div {
+  color: #000;
+  padding: 4px 28px 4px 28px;
+  overflow: hidden;
+}
+
+#main #dagGraphArea .drop-label.rect{
+  padding: 4px 0px 4px 0px;
+}
+
+#main #dagGraphArea .drop-label.parallelogram{
+  padding: 4px 28px 4px 28px;
 }
 
 #main #dagGraphArea path.path {