cpee 2.1.50 → 2.1.52

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ae076f6c9e29ad07d9fde309d7d442c217f4f5e6dc7d53a1568539ac8ab355b5
-  data.tar.gz: 848076eca4541d65022199637c8b49a01a27072a05217e953b56b260e131bbf3
+  metadata.gz: abf105360b93a73b4be3fbceb75cc95f805fe947917d1a8da91a727a1bfce520
+  data.tar.gz: 7f7dbec843a239c9dfc97166aaddd3e6cd43ddc5d3fd10335a87d72ea6aeda1b
 SHA512:
-  metadata.gz: 9fb987297935bf548bd59a0547bf11b1b4b2a333d7064d7b4e1b124ece5372384c39263550476d474cf1b255a58a2dfb59ce8858d4b15f5572b7277cccfd755c
-  data.tar.gz: c7ce6bcb5a7d798ea680c160941fd3d2a76c990ee7a32c9ee55da99eff9dc9f75c5073c05cf6b01066d6a05e7afa31e8a13717ffb32e4382e2e3bd8f91c622f7
+  metadata.gz: 60ff6635449e118df6f272a1c7d8e5f23637d30ea60e4d0c3b928d6dd63a896ddcadde07093029a64cb7050642da53311f6d80e360f1ed267c01153e3dfa4ad4
+  data.tar.gz: b8e5e91f5afdbab0e986c3bb0dc68bd468c86ee4d6633d1c8254cee9be8a4620f288968f558f0bb92e1fa0854ec9a760ec7744c14476148bf77fd939df42de1a

data/cockpit/css/resources.css

@@ -0,0 +1,42 @@
+resources {
+  border-left: 1pt solid var(--wfadaptor-border);
+}
+#resources line.resource-line:hover {
+  stroke: red;
+}
+
+.resource-label {
+  position: absolute;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  min-width: 10ex;
+  height: 2em;
+  text-align: center;
+  line-height: 2em;
+  background-color: var(--wfadaptor-background);
+  border: 1pt solid var(--wfadaptor-border);
+  border-radius: 1em;
+}
+
+.resource-label:before {
+  content: ' ';
+  position: absolute;
+  width: 0;
+  height: 0;
+  left: 15px;
+  top: 2em;
+  border: 8.5px solid;
+  border-color: var(--wfadaptor-border) transparent transparent var(--wfadaptor-border);
+}
+
+.resource-label:after {
+  content: ' ';
+  position: absolute;
+  width: 0;
+  height: 0;
+  left: 16px;
+  top: 2em;
+  border: 7.5px solid;
+  border-color: var(--wfadaptor-background) transparent transparent var(--wfadaptor-background);
+}
+

data/cockpit/css/ui.css

@@ -41,6 +41,10 @@ body {
 #graphgrid.striped .graphlabel, #graphgrid.striped .graphempty {
   border-left: 1pt solid var(--wfadaptor-border);
 }
+#graphgrid.striped #resources rect.border {
+  width: 1pt;
+  fill: var(--wfadaptor-border);
+}
 #graphgrid.striped .graphlabel.even, #graphgrid.striped .graphempty.even, #graphgrid.striped .graphlast.even {
   background-color: #e9e9e9;
 }

data/cockpit/css/wfadaptor.css

@@ -22,6 +22,7 @@
   --wfadaptor-exec-vote-text: #73d216;
   --wfadaptor-highlight: #0081c7;
   --wfadaptor-base: #000000;
+  --wfadaptor-base-light: #A9A9A9;
   --wfadaptor-label: #d4d4d4;
   --wfadaptor-mark: #d4d4d4;
   --wfadaptor-selected: #f57900;
@@ -134,6 +135,17 @@ svg .standfat {
   stroke-opacity:1;
   stroke-dasharray:none;
 }
+svg .greyfat {
+  fill: var(--wfadaptor-background);
+  fill-opacity:1;
+  stroke: var(--wfadaptor-base-light);
+  stroke-width:3;
+  stroke-linecap:round;
+  stroke-linejoin:round;
+  stroke-miterlimit:4;
+  stroke-opacity:1;
+  stroke-dasharray:none;
+}
 svg .standfat.menu {
   stroke: var(--wfadaptor-menu);
 }
@@ -170,6 +182,17 @@ svg .black {
   stroke-opacity:1;
   stroke-dasharray:none;
 }
+svg .grey {
+  fill: var(--wfadaptor-base-light);
+  fill-opacity:1;
+  stroke: var(--wfadaptor-base-light);
+  stroke-width: 1.6;
+  stroke-linecap:round;
+  stroke-linejoin:round;
+  stroke-miterlimit:4;
+  stroke-opacity:1;
+  stroke-dasharray:none;
+}
 
 svg .marked text.label {
   color: var(--wfadaptor-label);

data/cockpit/index.html

@@ -54,7 +54,9 @@
     <script type="text/javascript" src="js/details.js"></script>
     <script type="text/javascript" src="js/parameters.js"></script>
     <script type="text/javascript" src="js/modifiers.js"></script>
+    <script type="text/javascript" src="js/resources.js"></script>
     <link rel="stylesheet" href="css/ui.css" type="text/css"/>
+    <link rel="stylesheet" href="css/resources.css" type="text/css"/>
     <link rel="stylesheet" href="/global_ui/uicpee.css" type="text/css"/>
     <style>
       /* has to be fucking inline, because firefox and chrome disagree how to handle filter urls */
@@ -245,6 +247,7 @@
       <ui-content>
         <ui-area data-belongs-to-tab="details" id='graphcolumn' oncontextmenu='return false'>
           <div id='graphgrid'>
+            <div class="resource-label" style="display: none"></div>
             <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:x="http://www.w3.org/1999/xlink" id='graphcanvas' width='1' height='1'></svg>
           </div>
         </ui-area>

data/cockpit/js/details.js

@@ -1,3 +1,5 @@
+var details_updated = new Event("details:updated", {"bubbles":true, "cancelable":false});
+
 $(document).ready(function() {
   var timer;
 
@@ -61,6 +63,9 @@ function do_main_work() { //{{{
   if (node[0].namespaceURI == nnew.attr('xmlns')) { // remove xmlns when it is the same as in the parent node
     nnew[0].removeAttribute('xmlns');
   }
+
+  parameters_changed
+
   node.replaceWith(nnew);
 
   var ttarget = manifestation.adaptor.illustrator.get_node_by_svg_id(svgid);

data/cockpit/js/instance.js

@@ -30,9 +30,11 @@ function global_init() {
   save['details'] = undefined;
   save['details_target'] = undefined;
   save['instance_pos'] = [];
+  save['modeltype'] = 'CPEE';
   save['modifiers'] = {};
   save['modifiers_active'] = {};
   save['modifiers_additional'] = {};
+  save['resources'] = undefined;
   node_state = {};
 }
 
@@ -260,14 +262,14 @@ function create_instance(base,name,load,exec) {// {{{
   }
 }// }}}
 
-function sse() { //{{{
+async function sse() { //{{{
   var url = $('body').attr('current-instance');
   if (subscription) {
     es = new EventSource(url + "/notifications/subscriptions/" + subscription + "/sse/");
     es.onopen = function() {
       append_to_log("monitoring", "opened", "nice.");
     };
-    es.onmessage = function(e) {
+    es.onmessage = async function(e) {
       data = JSON.parse(e.data);
       if (data['type'] == 'event') {
         switch(data['topic']) {
@@ -281,7 +283,12 @@ function sse() { //{{{
             monitor_instance_values("endpoints");
             break;
           case 'attributes':
-            monitor_instance_values("attributes");
+            if (save['resources'] !=  data.content.values.resource) {
+              await monitor_instance_values("attributes");
+              monitor_instance_values("endpoints");
+            } else {
+              monitor_instance_values("attributes");
+            }
             if (save['graph_theme'] != data.content.values.theme) {
               monitor_graph_change(true);
             }
@@ -314,9 +321,9 @@ function sse() { //{{{
       // setTimeout(sse,10000);
     };
   }
+  await monitor_instance_values("attributes"); // attributes first, to catch the <resources> attribute which overrides current-resources
   monitor_instance_values("dataelements");
   monitor_instance_values("endpoints");
-  monitor_instance_values("attributes");
   monitor_instance_dsl();
   monitor_instance_state();
 } //}}}
@@ -393,11 +400,37 @@ function monitor_instance(cin,rep,load,exec) {// {{{
   });
 }// }}}
 
-function monitor_instance_values(type,vals) {// {{{
-  var url = $('body').attr('current-instance');
-  var rep = $('body').attr('current-resources');
-  var bas = $('body').attr('current-base');
+function get_resource(base, key, loc, cache) {
+  cache[key] = {};
+  let deferreds = [new $.Deferred(), new $.Deferred(), new $.Deferred()];
+  $.ajax({
+    url: base + 'endpoints/' + encodeURIComponent(loc) + "/symbol.svg",
+    success: function(res) {
+      cache[key]['symbol'] = res;
+      deferreds[0].resolve(true);
+    },
+    error: deferreds[0].resolve
+  })
+  $.ajax({
+    url: base + 'endpoints/' + encodeURIComponent(loc) + "/schema.rng",
+    success: function(res) {
+      cache[key]['schema'] = res;
+      deferreds[1].resolve(true);
+    },
+    error: deferreds[1].resolve
+  })
+  $.ajax({
+    url: base + 'endpoints/' + encodeURIComponent(loc) + "/properties.json",
+    success: function(res) {
+      cache[key]['properties'] = res;
+      deferreds[2].resolve(true);
+    },
+    error: deferreds[2].resolve
+  })
+  return deferreds;
+}
 
+function monitor_instance_values(type,vals) {// {{{
   if (type == "dataelements" && save['state'] == "running") {
     let de = save[type].save();
     Object.entries(vals).forEach(([key,value]) => {
@@ -420,7 +453,8 @@ function monitor_instance_values(type,vals) {// {{{
     });
     save[type].content(de);
   } else {
-    $.ajax({
+    let url = $('body').attr('current-instance');
+    return $.ajax({
       type: "GET",
       url: url + "/properties/" + type + "/",
       success: function(res){
@@ -430,36 +464,12 @@ function monitor_instance_values(type,vals) {// {{{
           var tmp = {};
           $(res).find(" > endpoints > *").each(function(k,v) {
             save['endpoints_list'][v.localName] = v.lastChild.nodeValue;
+            let rep = $('body').attr('current-resources');
             $.ajax({
               url: rep + 'endpoints/' + encodeURIComponent($(v).text()),
               success: function() {
                 tmp[v.tagName] = {};
-                var deferreds = [new $.Deferred(), new $.Deferred(), new $.Deferred()];
-                $.ajax({
-                  url: rep + 'endpoints/' + encodeURIComponent($(v).text()) + "/symbol.svg",
-                  success: function(res) {
-                    tmp[v.tagName]['symbol'] = res;
-                    deferreds[0].resolve(true);
-                  },
-                  error: deferreds[0].resolve
-                })
-                $.ajax({
-                  url: rep + 'endpoints/' + encodeURIComponent($(v).text()) + "/schema.rng",
-                  success: function(res) {
-                    tmp[v.tagName]['schema'] = res;
-                    deferreds[1].resolve(true);
-                  },
-                  error: deferreds[1].resolve
-                })
-                $.ajax({
-                  url: rep + 'endpoints/' + encodeURIComponent($(v).text()) + "/properties.json",
-                  success: function(res) {
-                    tmp[v.tagName]['properties'] = res;
-                    deferreds[2].resolve(true);
-                  },
-                  error: deferreds[2].resolve
-                })
-                $.when.apply($, deferreds).then(function(x) {
+                $.when.apply($, get_resource(rep,v.tagName,$(v).text(),tmp)).then(function(x) {
                   save['endpoints_cache'] = tmp;
                   // when updating attributes clear the attributes, because they might change as well. New arguments are possible.
                   $('#dat_details').empty();
@@ -467,8 +477,33 @@ function monitor_instance_values(type,vals) {// {{{
                 });
               }
             });
+            if (save['resources']) {
+              let rep = save['resources'];
+              $.ajax({
+                url: rep + 'endpoints/' + encodeURIComponent(encodeURIComponent($(v).text())),
+                success: function() {
+                  tmp[v.tagName] = {};
+                  $.when.apply($, get_resource(rep,v.tagName,encodeURIComponent($(v).text()),tmp)).then(function(x) {
+                    save['endpoints_cache'] = tmp;
+                    // when updating attributes clear the attributes, because they might change as well. New arguments are possible.
+                    $('#dat_details').empty();
+                    adaptor_update();
+                  });
+                }
+              });
+            }
           });
         } else if(type == "attributes") {
+          if ($(" > attributes > resources",res).length > 0) {
+            save['resources'] = $(" > attributes > resources",res).text();
+          } else {
+            save['resources'] = undefined;
+          }
+          if ($(" > attributes > modeltype",res).length > 0) {
+            save['modeltype'] = $(" > attributes > modeltype",res).text();
+          } else {
+            save['modeltype'] = undefined;
+          }
           if ($('#modifiers > div').length == 0) {
             modifiers_display().then(function(){ modifiers_select(); });
           } else {
@@ -519,7 +554,7 @@ function adaptor_init(url,theme,dslx) { //{{{
     save['graph_theme'] = theme;
     save['graph_adaptor'] = new WfAdaptor($('body').data('theme-base') + '/' + theme + '/theme.js',function(graphrealization){
       manifestation.endpoints = save.endpoints_list;
-      graphrealization.draw_labels = function(max,labels,shift,striped) {
+      graphrealization.draw_labels = function(max,labels,dimensions,striped) {
         $('#graphcanvas').css('grid-row', '1/span ' + (max.row + 2));
         if (striped == true) {
           if (!$('#graphgrid').hasClass('striped')) {
@@ -529,10 +564,17 @@ function adaptor_init(url,theme,dslx) { //{{{
           $('#graphgrid').removeClass('striped');
         }
 
-        $('#graphgrid .graphlabel, #graphgrid .graphempty, #graphgrid .graphlast').remove();
+        $('#graphgrid .graphlabel, #graphgrid .graphempty, #resources, #graphgrid .graphlast').remove();
         var tlabels = {};
         var tcolumns = [];
         var tcolumncount = {}
+        var thidden = [];
+
+        var tsvgs = {};
+        const mapPoints = new Map();
+        let iconsize = 14;
+        let iconshift = 7;
+
         _.each(labels,function(val){
           if (val.label != "") {
             tlabels[val.row] = [];
@@ -541,35 +583,143 @@ function adaptor_init(url,theme,dslx) { //{{{
                 tcolumns.push(col.column);
                 tcolumncount[col.column] = 0;
               }
+              if (!thidden.includes(col.column) && col.type == 'resource') {
+                thidden.push(col.column);
+              }
               if (col.value != undefined) {
+
+                // Start Peilei
+                if (col.type == "resource") {
+                  let str = '';
+                  for (const [k, v] of Object.entries(col.value)) {
+                    var p = {};
+                    p.AR = v;
+                    p.yc = dimensions.height_shift/2 + dimensions.height * val.row - 20;
+                    if (!mapPoints.has(k)) {
+                      p.y0 = p.y0 == undefined ? (dimensions.height_shift/2 + dimensions.height * val.row - 20) : p.y0;
+                      p.ymax = (p.ymax == undefined) ? p.y0 : p.ymax; //(dimensions.height_shift/2 + dimensions.height * val.row - 20 > p.ymax ? dimensions.height_shift/2 + dimensions.height * val.row - 20 : p.ymax);
+                    } else {
+                      p.y0 = mapPoints.get(k).y0;
+                      p.ymax = mapPoints.get(k).ymax; //(dimensions.height_shift/2 + dimensions.height * val.row - 20 > p.ymax ? dimensions.height_shift/2 + dimensions.height * val.row - 20 : p.ymax);
+                    }
+                    mapPoints.set(k, p);
+                  }
+                  var cx = iconshift*2;
+                  str += '<g xmlns="http://www.w3.org/2000/svg">';
+
+                  for (const [k, p] of mapPoints) {
+                    let firstAssignFlag = 0;
+                    p.x0 = p.xc = cx;
+
+                    // Including Triangle
+                    if (k in col.value) {   // Define points for a triangle pointing to the right
+                      if (p.AR == "Read") {
+                        str += '<polygon xmlns="http://www.w3.org/2000/svg" points="' + (cx - 5) + ',' + (dimensions.height_shift/2 + dimensions.height * val.row - 20) + ' ' + (cx + 5) + ',' + (dimensions.height_shift/2 + dimensions.height * val.row - 15) + ' ' + (cx + 5) + ',' + (dimensions.height_shift/2 + dimensions.height * val.row - 25) + '" fill="green" class="resource-point">';
+                        if (p.yc == p.y0) {
+                          firstAssignFlag = 1;
+                        }
+                      } else if (p.AR == "Assign") {    // Define points for a triangle pointing to the left
+                        str += '<polygon xmlns="http://www.w3.org/2000/svg" points="' + (cx + 5) + ',' + (dimensions.height_shift/2 + dimensions.height * val.row - 20) + ' ' + (cx - 5) + ',' + (dimensions.height_shift/2 + dimensions.height * val.row - 15) + ' ' + (cx - 5) + ',' + (dimensions.height_shift/2 + dimensions.height * val.row - 25) + '" fill="orange" class="resource-point">';
+                      } else if (p.AR == "AssignRead") {
+                        p.yc = dimensions.height_shift/2 + dimensions.height * val.row - 20;
+                        str += '<circle xmlns="http://www.w3.org/2000/svg" cx="' + cx + '" cy="' + p.yc + '" r="5" fill="blue" class="resource-point">';
+                      }
+
+                      if (dimensions.height_shift/2 + dimensions.height * val.row != p.y0) {
+                        p.yc = dimensions.height_shift/2 + dimensions.height * val.row - 20;
+                        if (dimensions.height_shift/2 + dimensions.height * val.row - 20 > p.ymax) {
+                          p.ymax = dimensions.height_shift/2 + dimensions.height * val.row - 20;
+                        }
+                      }
+
+                      // Converted from <title>
+                      str += '<text xmlns="http://www.w3.org/2000/svg">' + k + '</text>';
+
+                      if (p.AR == "Read" || p.AR == "Assign") {
+                        str += '</polygon>';
+                      } else if (p.AR == "AssignRead") {
+                        str += '</circle>';
+                      }
+                    }
+
+                    if (firstAssignFlag == 1) {
+                      // Additional logic and construction of another polygon for orange triangle pointing left
+                      p.y0 -= dimensions.height;
+                      str += '<polygon xmlns="http://www.w3.org/2000/svg" points="' + (cx + 5) + ',' + (dimensions.height_shift/2 + dimensions.height * (val.row - 1) - 20) + ' ' + (cx - 5) + ',' + (dimensions.height_shift/2 + dimensions.height * (val.row - 1) - 15) + ' ' + (cx - 5) + ',' + (dimensions.height_shift/2 + dimensions.height * (val.row - 1) - 25) + '" fill="orange" class="resource-point">' + '<text xmlns="http://www.w3.org/2000/svg">' + k + '</text></polygon>';
+                    }
+                    cx += iconsize;
+                  }
+
+                  for (const [k, p] of mapPoints) {
+                    if(k in col.value) {
+                      if (dimensions.height_shift/2+dimensions.height*val.row != p.y0) {
+                        p.yc = dimensions.height_shift/2 + dimensions.height * val.row - 20;
+                        if(dimensions.height_shift/2 + dimensions.height * val.row - 20 > p.ymax) {
+                          p.ymax = dimensions.height_shift/2 + dimensions.height * val.row - 20;
+                        }
+                      }
+                    }
+                  }
+                  str += '</g>';
+
+                  tsvgs[val.row] = $X(str);
+                }
+
                 tcolumncount[col.column] += 1;
               }
               tlabels[val.row][tcolumns.indexOf(col.column)] = { label: col.value, type: val.tname, id: val.element_id };
             });
           }
         });
+
         $('#graphgrid').css({
-          'grid-template-rows': (shift/2) + 'px repeat(' + max.row + ', 1fr) ' + (shift/2) + 'px',
+          'grid-template-rows': (dimensions.height_shift/2) + 'px repeat(' + max.row + ', 1fr) ' + (dimensions.height_shift/2) + 'px',
           'grid-template-columns': 'max-content' + (tcolumns.length > 0 ? ' repeat(' + tcolumns.length.toString() + ',max-content)' : '') + ' auto'
         });
+
         for (var i = 0; i < max.row; i++) {
-          for (var j = 0; j < tcolumns.length; j++) {
-            if (tlabels[i+1] != undefined && tlabels[i+1][j] != undefined && tlabels[i+1][j].label != undefined && tlabels[i+1][j].label != '') {
-              var col = tlabels[i+1][j];
-              var ele = $('<div element-row="' + i + '" class="graphlabel ' + (i % 2 == 0 ? 'odd' : 'even') + '" element-type="' + col.type + '" element-id="' + col.id + '" style="grid-column: ' + (j+2) + '; grid-row: ' + (i+2) + '"><span>' + col.label + '</span></div>');
-              graphrealization.illustrator.draw.bind_event(ele, col.type, false);
-              $('#graphgrid').append(ele);
-            } else {
-              if (tcolumncount[tcolumns[j]] != 0) {
-                var ele = $('<div element-row="' + i + '" class="graphempty ' + (i % 2 == 0 ? 'odd' : 'even') + '" style="grid-column: ' + (j+2) + '; grid-row: ' + (i+2) + '; padding-bottom: ' + shift + 'px">&#032;</div>');
+          for (var j = 0; j < tcolumns.length - 1; j++) {
+            if (thidden != tcolumns[j]) {
+              if (tlabels[i+1] != undefined && tlabels[i+1][j] != undefined && tlabels[i+1][j].label != undefined && tlabels[i+1][j].label != '') {
+                var col = tlabels[i+1][j];
+                var ele = $('<div element-row="' + i + '" class="graphlabel ' + (i % 2 == 0 ? 'odd' : 'even') + '" element-type="' + col.type + '" element-id="' + col.id + '" style="grid-column: ' + (j+2) + '; grid-row: ' + (i+2) + '"><span>' + col.label + '</span></div>');
+                graphrealization.illustrator.draw.bind_event(ele, col.type, false);
                 $('#graphgrid').append(ele);
+              } else {
+                if (tcolumncount[tcolumns[j]] != 0) {
+                  var ele = $('<div element-row="' + i + '" class="graphempty ' + (i % 2 == 0 ? 'odd' : 'even') + '" style="grid-column: ' + (j+2) + '; grid-row: ' + (i+2) + '; padding-bottom: ' + dimensions.height_shift + 'px">&#032;</div>');
+                  $('#graphgrid').append(ele);
+                }
               }
             }
           }
+
           var j = tcolumns.length;
-          var ele = $('<div element-row="' + i + '" class="graphlast ' + (i % 2 == 0 ? 'odd' : 'even') + '" style="grid-column: ' + (j+2) + '; grid-row: ' + (i+2) + '; padding-bottom: ' + shift + 'px">&#032;</div>');
+          var ele = $('<div element-row="' + i + '" class="graphlast ' + (i % 2 == 0 ? 'odd' : 'even') + '" style="grid-column: ' + (j+2) + '; grid-row: ' + (i+2) + '; padding-bottom: ' + dimensions.height_shift + 'px">&#032;</div>');
           $('#graphgrid').append(ele);
         }
+
+        if (Object.keys(tsvgs).length > 0) {
+          let dataflow = $X('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:x="http://www.w3.org/1999/xlink" id="resources"></svg>');
+          dataflow.css('grid-row', '1/span ' + (max.row + 2));
+          dataflow.css('grid-column', tcolumns.indexOf(thidden.first) + 2);
+          dataflow.attr('height', $('#graphcanvas').attr('height'));
+          dataflow.attr('width', mapPoints.size * iconsize + iconshift * 2);
+
+          for (var i = 0; i < max.row; i++) {   // Needs parenthesises below
+            dataflow.append($X('<rect xmlns="http://www.w3.org/2000/svg" class="stripe ' +  (i % 2 == 0 ? 'even' : 'odd') + '" x="0" y="' + (dimensions.height * i + 5.2) + '" width="' + (mapPoints.size * iconsize + iconshift * 2) + '" height="' + dimensions.height + '"></rect>'));
+            dataflow.append($X('<rect xmlns="http://www.w3.org/2000/svg" class="border" x="0" y="' + (dimensions.height * i + 5.2) + '" height="' + dimensions.height + '"></rect>'));
+          }
+          for (const [k, p] of mapPoints) {
+            dataflow.append($X('<line xmlns="http://www.w3.org/2000/svg" x1="' + p.x0 + '" y1="' + p.y0 + '" x2="' + p.xc + '" y2="' + p.ymax + '" class="resource-line" stroke-opacity="0.1" stroke="orange" stroke-width="10" marker-end="url(#arrowhead)"><text>' + k + '</text></line>'));
+          }
+          for (var i = 0; i < max.row; i++) {
+            dataflow.append($(tsvgs[i+1]));
+          }
+          $('#graphgrid').append(dataflow);
+
+          $('.resource-label').hide();  // Speech Bubble hide by default
+        }
       };
       graphrealization.set_svg_container($('#graphcanvas'));
       graphrealization.set_label_container($('#graphgrid'));
@@ -582,17 +732,50 @@ function adaptor_init(url,theme,dslx) { //{{{
         save['graph'].removeAttr('svg-subtype');
         save['graph'].removeAttr('svg-label');
         document.dispatchEvent(graph_changed);
-        $.ajax({
-          type: "PUT",
-          url: url + "/properties/description/",
-          contentType: 'text/xml',
-          headers: {
-            'Content-ID': 'description',
-            'CPEE-Event-Source': myid
-          },
-          data: g,
-          error: report_failure
-        });
+        if (save['modeltype'] != 'CPEE') {
+          $.ajax({
+            type: "PUT",
+            url: url + "/properties/attributes/modeltype/",
+            data: {'value': 'CPEE'},
+            error: report_failure
+          });
+          $.ajax({
+            type: "PUT",
+            url: url + "/properties/transformation/",
+            contentType: 'text/xml',
+            headers: {
+              'Content-ID': 'transformation',
+              'CPEE-Event-Source': myid
+            },
+            data: '<transformation xmlns="http://cpee.org/ns/properties/2.0"><description type="copy"/><dataelements type="none"/><endpoints type="none"/></transformation>',
+            success: function() {
+              $.ajax({
+                type: "PUT",
+                url: url + "/properties/description/",
+                contentType: 'text/xml',
+                headers: {
+                  'Content-ID': 'description',
+                  'CPEE-Event-Source': myid
+                },
+                data: g,
+                error: report_failure
+              });
+            },
+            error: report_failure
+          });
+        } else {
+          $.ajax({
+            type: "PUT",
+            url: url + "/properties/description/",
+            contentType: 'text/xml',
+            headers: {
+              'Content-ID': 'description',
+              'CPEE-Event-Source': myid
+            },
+            data: g,
+            error: report_failure
+          });
+        }
         adaptor_update();
         manifestation.events.click(svgid);
         format_instance_pos();
@@ -762,9 +945,17 @@ function monitor_instance_state_change(notification) { //{{{
     if (notification == "stopped") {
       monitor_instance_pos();
     }
-    // if (notification == "running") {
-    //   format_visual_clear();
-    // }
+    if (notification == "running") {
+      // // we cant do that, because the events might not be ordered. so jus remove all the blue ones.
+      // format_visual_clear();
+
+      for (const [key, ele] of Object.entries(node_state)) {
+        for (i=0; i<ele.passive; i++) {
+          format_visual_remove(key,'passive');
+        }
+      }
+      // save_blue_states has to be left alone, because we dont know the uuid
+    }
 
     var but = "";
     if (notification == "ready" || notification == "stopped") {

data/cockpit/js/modifiers.js

@@ -61,7 +61,9 @@ async function modifiers_display() {
       url: rep + 'modifiers/'
     }).then(async function(res) {
       let ipromises = [];
+      let iinserts = {};
       $('resource',res).each(function(_,r) {
+        iinserts[$(r).text()] = '';
         ipromises.push(
           $.ajax({
             url: rep + 'modifiers/' + $(r).text()
@@ -87,13 +89,18 @@ async function modifiers_display() {
               );
 
             });
-            $(clone).insertBefore($('#modifiers template'));
+            iinserts[$(r).text()] = $(clone);
 
             await Promise.all(cpromises);
           })
         );
       });
       await Promise.all(ipromises);
+
+      // always insert in order
+      for (const [_, fragment] of Object.entries(iinserts)) {
+        fragment.insertBefore($('#modifiers template'));
+      }
     })
   );
   await Promise.all(promises);

data/cockpit/js/resources.js

@@ -0,0 +1,16 @@
+$(document).ready(function() {
+  $('.resource-label').on('mouseover',()=>{
+    $('.resource-label').hide(); // Speech Bubble hide when over
+  });
+  $('#graphgrid').on('mouseover','#resources line.resource-line, #resources g polygon.resource-point',(data)=>{
+    const left = $('.resource-label').offset().left;
+    const pos = $(data.target).offset().left - 11;
+    if ($('.resource-label').is(":hidden") || left != pos) {
+      let labeltext = $('text',data.currentTarget).text();
+      $('.resource-label').text(labeltext);
+      $('.resource-label').css('left', pos);
+      $('.resource-label').css('top', data.originalEvent.clientY - 50);
+      $('.resource-label').show();
+    }
+  });
+});

data/cockpit/js/wfadaptor.js

@@ -48,7 +48,7 @@ function WfAdaptor(theme_base,doit) { // Controller {{{
   } // }}}
   this.notify = function() { // public {{{
   } // }}}
-  this.draw_labels = function(max,labels,height_shift,striped){ // public {{{
+  this.draw_labels = function(max,labels,dimensions,striped){ // public {{{
   } // }}}
   this.set_svg_container = function (container) { // {{{
     illustrator.set_svg_container(container); // TODO: shadowing the container element
@@ -376,9 +376,9 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       }
     }
     if (illustrator.compact == false) {
-      adaptor.draw_labels(graph.max,labels,illustrator.height_shift,illustrator.striped == true ? true : false);
+      adaptor.draw_labels(graph.max,labels,{ 'height': illustrator.height, 'height_shift': illustrator.height_shift },illustrator.striped == true ? true : false);
     } else {
-      adaptor.draw_labels(graph.max,[],illustrator.height_shift,false);
+      adaptor.draw_labels(graph.max,[],{ 'height': illustrator.height, 'height_shift': illustrator.height_shift },false);
     }
     if (illustrator.compact == false) {
       if (labels.length > 0) {