cpee 2.1.51 → 2.1.53

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 53d9392ee2d94e307e588b467e9a435901f8d231d42f84ff326432444764be99
-  data.tar.gz: d0f08d2fc5100b961f218e5c1890931d894bc9d3ed844e880ca187fffb3342d2
+  metadata.gz: 895480af20ce6499a796ff2beb4985350038da28ed581a315ac9d04bc796e09b
+  data.tar.gz: e04fa030ef2aca658d5ca1a6880325429de767fac55d1f9f3831356b3fc30c0a
 SHA512:
-  metadata.gz: 56677348739cd49fc763e867d9d6d464afa1183fe5220277bd2141410b46ddd065320ae4e11c8ed469a82107d57a3f0afc6148624d71c88f6ba1bf961bd9af9a
-  data.tar.gz: 4bcf1ce059ae0839862910e620697907a045ac925ffd30c7212d7b8ff8819f9f6c6a2eb845365ab3c7887db9d0e6d567122b98ce77699d3a23fbbafa2c2ff790
+  metadata.gz: 77b2c6977626b081e38ba035b6129c710b89837bc102bc21e85aae4a894fb73eabd0e1dcd3a1a131e68603f4bdbfb634370790dc60b529770db26253666bac8a
+  data.tar.gz: bd4ca4ede0b5754385e8981e371dc0e10f0b3af2da5a4722566a50eeec75a8d80fa90bd474dc206c2dbaaa3b738db5ca749bc4568082a93ed73ae142fac798ca

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: 0.8pt;
+  fill: var(--wfadaptor-border);
+}
 #graphgrid.striped .graphlabel.even, #graphgrid.striped .graphempty.even, #graphgrid.striped .graphlast.even {
   background-color: #e9e9e9;
 }

data/cockpit/edit.html

@@ -55,7 +55,9 @@
     <script type="text/javascript" src="js/parameters.js"></script>
     <script type="text/javascript" src="js/edit.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 */
@@ -242,8 +244,9 @@
         <ui-behind                                                 ><a style='display:none' target='_blank' id='current-track'>T</a><a style='display:none' target='_blank' id='current-graph'>G</a></ui-behind>
       </ui-tabbar>
       <ui-content>
-        <ui-area data-belongs-to-tab="details" id='graphcolumn'>
+        <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/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;
 
@@ -5,20 +7,6 @@ $(document).ready(function() {
     clearTimeout(timer);
     timer = setTimeout(do_main_save, 5000);
   });
-  $(document).on('change','#dat_details select',function(e){
-    clearTimeout(timer);
-    do_main_save();
-  });
-  $(document).on('blur','#dat_details input, #dat_details textarea, #dat_details [contenteditable]',function(e){
-    clearTimeout(timer);
-    do_main_save();
-  });
-  $(document).on('keypress','#dat_details input',function(e){
-    if (e.keyCode == 13) {
-      clearTimeout(timer);
-      do_main_save();
-    }
-  });
   $(document).on('keypress','#dat_details [contenteditable]',function(e){
     if (e.keyCode == 13) {
       document.execCommand('insertLineBreak')
@@ -33,6 +21,10 @@ $(document).ready(function() {
     clearTimeout(timer);
     do_main_save();
   });
+  $(document).on('relaxngui_change', '#dat_details', function(e){
+    clearTimeout(timer);
+    do_main_save();
+  });
 });
 
 function do_main_save() { //{{{
@@ -61,6 +53,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/edit.js

@@ -7,6 +7,9 @@ document.addEventListener('parameters:changed', function (e) {
 document.addEventListener('modifiers:changed', function (e) {
   $("button[name=save]").prop("disabled",false);
 }, false);
+document.addEventListener('model:loaded', function (e) {
+  $("button[name=save]").prop("disabled",false);
+}, false);
 
 function leading_zeros(dt) {
   return (dt < 10 ? '0' : '') + dt;

data/cockpit/js/instance.js

@@ -6,6 +6,7 @@ var loading = false;
 var subscription;
 var subscription_state = 'less';
 var graph_changed = new Event("graph:changed", {"bubbles":true, "cancelable":false});
+var model_loaded = new Event("model:loaded", {"bubbles":true, "cancelable":false});
 var save = {};
     save['endpoints'] = undefined;
     save['dataelements'] = undefined;
@@ -30,9 +31,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 +263,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 +284,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 +322,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 +401,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 +454,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 +465,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 +478,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 +555,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 +565,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 +584,144 @@ 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.row = val.row;
+                    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;
+                    } else {
+                      p.y0 = mapPoints.get(k).y0;
+                      p.ymax = mapPoints.get(k).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 -= ((p.row-1) * dimensions.height);
+                      str += '<polygon xmlns="http://www.w3.org/2000/svg" points="' + (cx + 5) + ',' + (dimensions.height_shift/2 + dimensions.height - 20) + ' ' + (cx - 5) + ',' + (dimensions.height_shift/2 + dimensions.height - 15) + ' ' + (cx - 5) + ',' + (dimensions.height_shift/2 + dimensions.height - 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 +734,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 +947,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") {
@@ -1017,6 +1210,8 @@ async function set_testset(testset,exec) {// {{{
 
   await Promise.all(promises);
 
+  document.dispatchEvent(model_loaded);
+
   $.ajax({
     type: "GET",
     url: url + "/properties/state/",
@@ -1033,7 +1228,9 @@ async function set_testset(testset,exec) {// {{{
       });
     }
   });
- }// }}}
+
+
+}// }}}
 
 function load_testsetfile_after() { //{{{
   if (loading) return;
@@ -1153,7 +1350,10 @@ async function load_des(url,model) { //{{{
       'CPEE-Event-Source': myid
     },
     data: model,
-    error: report_failure
+    error: report_failure,
+    success: () => {
+      document.dispatchEvent(model_loaded);
+    }
   });
 } //}}}