cpee 2.1.92 → 2.1.95

data/cockpit/index.html

@@ -41,6 +41,8 @@
     <script type="text/javascript" src="/js_libs/uidash.js"></script>
     <script type="text/javascript" src="/js_libs/custommenu.js"></script>
 
+    <script type="text/javascript" src="/js_libs/build-bpmn.js"></script>
+
     <link   rel="stylesheet"      href="/js_libs/custommenu.css" type="text/css"/>
     <link   rel="stylesheet"      href="/js_libs/uidash.css" type="text/css"/>
 
@@ -55,12 +57,12 @@
     <script type="text/javascript" src="js/instance.js"></script>
     <script type="text/javascript" src="js/details.js"></script>
     <script type="text/javascript" src="js/parameters.js"></script>
-    <script type="text/javascript" src="js/resources.js"></script>
+    <script type="text/javascript" src="js/extended_columns.js"></script>
     <script type="text/javascript" src="js/modifiers.js"></script>
     <script type="text/javascript" src="themes/base.js"></script>
     <link rel="stylesheet" href="css/ui.css" type="text/css"/>
-    <link rel="stylesheet" href="css/resources-label.css" type="text/css"/>
-    <link rel="stylesheet" href="css/resources-svg.css" type="text/css" data-include-export="true"/>
+    <link rel="stylesheet" href="css/extended_columns-label.css" type="text/css"/>
+    <link rel="stylesheet" href="css/extended_columns-svg.css" type="text/css" data-include-export="true"/>
     <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 */
@@ -176,10 +178,16 @@
                 <button title='a standalone process model is only loadable if the currently loaded testset sucessfully prepared the current instance for the type of model' name="loadmodelfile">load model</button>
               </div>
             </div><div class='section'>
-              <a id="savetestsetfile" href="" download=""></a>
-              <a id="savesvgfile" href="" download=""></a>
-              <button title='a testset includes various settings, subscriptions and a model' name="savetestsetfile">save<br>testset</button>
-              <button title='a testset includes various settings, subscriptions and a model' name="savesvgfile">save svg<br>graph</button>
+              <div>
+                <a id="savetestsetfile" href="" download=""></a>
+                <a id="savesvgfile" href="" download=""></a>
+                <button title='a testset includes various settings, subscriptions and a model' name="savetestsetfile">save<br>testset</button>
+                <button title='the SVG contains the graphical repesentation of the CPEE tree as you see it on the screen' name="savesvgfile">save svg<br>graph</button>
+              </div>
+              <div>
+                <a id="savebpmnfile" href="" download=""></a>
+                <button title='the BPMN includes a graphical representation that can be loaded in Signavio and Camundal' name="savebpmnfile">save BPMN</button>
+              </div>
             </div><div class='section' id='modifiers'>
               <template id="item">
                 <div>

data/cockpit/js/details.js

@@ -72,6 +72,13 @@ function do_main_work(svgid) { //{{{
     nnew[0].removeAttribute('xmlns');
   }
 
+  // copy all elements from different namespaces
+  [...node[0].attributes].forEach(attr =>{
+    if (attr && attr.namespaceURI && attr.namespaceURI != 'http://cpee.org/ns/description/1.0') {
+      nnew[0].setAttributeNS(attr.namespaceURI,attr.nodeName,attr.nodeValue);
+    }
+  });
+
   node.replaceWith(nnew);
 
   var ttarget = manifestation.adaptor.illustrator.get_node_by_svg_id(svgid);

data/cockpit/js/extended_columns.js

@@ -0,0 +1,233 @@
+function show_dataflow_label(x,y,deg,text) {
+  const degrees_to_radians = deg => (deg * Math.PI) / 180.0;
+
+  let clone = $('svg',document.querySelector('#label').content.cloneNode(true));
+  $('text',clone).text(text);
+  let n = $('body').append(clone);
+  let dim = $('text',clone)[0].getBBox();
+  let height = $('rect',clone).attr('height');
+  let width = dim.width + dim.x;
+  let shift = (width + 10) * Math.sin(degrees_to_radians(deg));
+  let shift_plus = height * Math.sin(degrees_to_radians(90-deg));
+  let neigh = (width + 10) * Math.cos(degrees_to_radians(deg)) + height * Math.cos(degrees_to_radians(90-deg));
+
+  let top_y = 23 * Math.cos(degrees_to_radians(deg));
+  let top_x = 23 * Math.sin(degrees_to_radians(deg));
+
+  let top = y-shift-top_y;
+  if (top < 0) top = 0;
+  $(clone).css('left',x-top_x);
+  $(clone).css('top',top);
+
+  $(clone).attr('height',shift + shift_plus + 2);
+  $(clone).attr('width',neigh + 2);
+  $('g',clone).attr('transform',$('g',clone).attr('transform').replace(/%%1/, shift + 1).replace(/%%2/, deg));
+  $('rect',clone).attr('width',width);
+}
+
+function show_dataflow_row_label(data) {
+  let pos = data.getBoundingClientRect();
+  let pos_top = $('#graphgrid').parent()[0].getBoundingClientRect();
+  let pos_y;
+  let text = $('text',data).text();
+  if (pos.y < (pos_top.y + 10)) {
+    pos_y = pos_top.y + 10;
+  } else {
+    pos_y = pos.y;
+  }
+  show_dataflow_label(pos.x + 12, pos_y, 60, text);
+}
+
+function draw_extended_columns(graphrealization,max,labels,dimensions,striped) {
+  // labels
+  graphrealization.illustrator.svg.container.css('grid-row', '1/span ' + (max.row + 2));
+  if (striped == true) {
+    if (!graphrealization.illustrator.svg.label_container.hasClass('striped')) {
+      graphrealization.illustrator.svg.label_container.addClass('striped');
+    }
+  } else {
+    graphrealization.illustrator.svg.label_container.removeClass('striped');
+  }
+
+  $('.labelsrow, .graphlast').remove();
+  let tcolumns = [];
+  let tcolumntype = {};
+  let tcolumncount = {}
+
+  const mapPoints = new Map();
+  const tcolumnsvgs = {};
+  const iconsize = 10;
+  const space = 5;
+
+  for (val of labels) {
+    if (val.label != "") {
+      for (col of val.label) {
+        if (!tcolumns.includes(col.column)) {
+          tcolumns.push(col.column);
+          tcolumncount[col.column] = 0;
+          tcolumnsvgs[col.column] = {};
+        }
+        if (tcolumntype[col.column] == undefined && col.type != undefined) {
+          tcolumntype[col.column] = col.type;
+        }
+        if (col.value != undefined) {
+          let pos = dimensions.height_shift/2 + dimensions.height * (val.row - 1) + (dimensions.height / 2);
+          let firstpos = dimensions.height_shift/2 + (dimensions.height / 2);
+
+          if (col.type == "resource") {
+            for (const [k, v] of Object.entries(col.value)) {
+              var p = { AR: v };
+              if (!mapPoints.has(k)) {
+                p.y0 = p.y0 == undefined ? pos : 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);
+            }
+
+            let tsvg = $X('<g xmlns="http://www.w3.org/2000/svg" class="resource-row" element-row="' + (val.row-1) + '"></g>');
+
+            var cx = space;
+            var count = 0;
+            for (const [k, p] of mapPoints) {
+              let firstAssignFlag = false;
+              p.x = cx;
+
+              // Including Triangle
+              if (k in col.value) {   // Define points for a triangle pointing to the right
+                let inner;
+
+                if (p.AR == "Read") {
+                  inner = $X('<polygon xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" points="' + (p.x) + ',' + pos + ' ' + (p.x + iconsize) + ',' + (pos + iconsize/2) + ' ' + (p.x + iconsize) + ',' + (pos - iconsize/2) + '" class="resource-point read"></polygon>');
+                  if (pos == p.y0) { firstAssignFlag = true; }
+                } else if (p.AR == "Assign") {    // Define points for a triangle pointing to the left
+                  inner = $X('<polygon xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" points="' + (p.x + iconsize) + ',' + pos + ' ' + (p.x) + ',' + (pos + iconsize/2) + ' ' + (p.x) + ',' + (pos - iconsize/2) + '" class="resource-point write"></polygon>');
+                } else if (p.AR == "AssignRead") {
+                  inner = $X('<circle xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" cx="' + (p.x + iconsize/2) + '" cy="' + pos + '" r="' + (iconsize / 2) + '" class="resource-point both"></circle>');
+                } else if (p.AR == "ReadAssign") {
+                  inner = $X('<circle xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" cx="' + (p.x + iconsize/2) + '" cy="' + pos + '" r="' + (iconsize / 2) + '" class="resource-point both"></circle>');
+                  if (pos == p.y0) { firstAssignFlag = true; }
+                }
+
+                // extend the bars
+                if (pos > p.ymax) {
+                  p.ymax = pos;
+                }
+
+                inner.append($X('<text xmlns="http://www.w3.org/2000/svg"></text>').text(k));
+                tsvg.append(inner);
+              }
+
+              if (firstAssignFlag) {
+                // Additional logic and construction of another polygon for orange triangle pointing left in row 0
+                p.y0 -= (val.row-1) * dimensions.height;
+                if (tcolumnsvgs[col.column][1] == undefined) {
+                  tcolumnsvgs[col.column][1] = $X('<g xmlns="http://www.w3.org/2000/svg" class="resource-row" element-row="' + 0 + '"></g>');
+                }
+                tcolumnsvgs[col.column][1].append($X('<polygon xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" points="' + (p.x + iconsize) + ',' + firstpos + ' ' + (p.x) + ',' + (firstpos + iconsize/2) + ' ' + (p.x) + ',' + (firstpos - iconsize/2) + '" class="resource-point write"></polygon>').append($X('<text xmlns="http://www.w3.org/2000/svg"></text>').text(k)));
+              }
+              cx += iconsize + space;
+              count += 1;
+            }
+
+            if (tsvg.children().length > 0) {
+              tcolumnsvgs[col.column][val.row] = tsvg;
+            }
+          } else {
+            tsvg = $X('<text class="label" element-id="' + val.element_id + '" x="' + space + '" y="' + (dimensions.height * val.row - dimensions.height_shift) + '" xmlns="http://www.w3.org/2000/svg"></text>')
+            tsvg.text(col.value);
+            tsvg.mouseover(function(ev){ manifestation.events.mouseover($(ev.currentTarget).attr('element-id')); });
+            tsvg.mouseout(function(ev){ manifestation.events.mouseout($(ev.currentTarget).attr('element-id')); });
+            tsvg.click(function(ev){ manifestation.events.click($(ev.currentTarget).attr('element-id'),ev); });
+            tcolumnsvgs[col.column][val.row] = tsvg;
+          }
+
+          tcolumncount[col.column] += 1;
+        }
+      };
+    }
+  };
+
+  graphrealization.illustrator.svg.label_container.css({
+    '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'
+  });
+
+  tcolumns.forEach(h => {
+    if (Object.keys(tcolumnsvgs[h]).length > 0) {
+      const svgcolumn = $X('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:x="http://www.w3.org/1999/xlink" class="labelsrow"></svg>');
+      const svgback = $X('<g xmlns="http://www.w3.org/2000/svg"></g>');
+      const svgfront = $X('<g xmlns="http://www.w3.org/2000/svg"></g>');
+      let xwidth = 0;
+      svgcolumn.append(svgback);
+      svgcolumn.append(svgfront);
+      svgcolumn.css('grid-row', '1/span ' + (max.row + 2))
+      svgcolumn.css('grid-column', tcolumns.indexOf(tcolumns.first) + 2);
+      svgcolumn.attr('height', graphrealization.illustrator.svg.container.attr('height'));
+      graphrealization.illustrator.svg.label_container.append(svgcolumn);
+
+      for (var i = 0; i < max.row; i++) {
+        let node = svgfront.append($(tcolumnsvgs[h][i+1]));
+        if (xwidth < node[0].getBBox().width) { xwidth = node[0].getBBox().width; }
+      }
+      xwidth = xwidth + 2 * space;
+      if (striped == true) {
+        for (var i = 0; i < max.row; i++) {
+          svgback.append($X('<rect xmlns="http://www.w3.org/2000/svg" element-row="' + i + '" class="stripe ' +  (i % 2 == 0 ? 'even' : 'odd') + '" x="0" y="' + (dimensions.height * i + dimensions.height_shift/2) + '" width="' + (xwidth + 1) + '" height="' + dimensions.height + '"></rect>'));
+          svgback.append($X('<rect xmlns="http://www.w3.org/2000/svg" element-row="' + i + '" class="border" x="0" y="' + (dimensions.height * i + dimensions.height_shift/2) + '" height="' + dimensions.height + '" width="1"></rect>'));
+        }
+      }
+      if (tcolumntype[h] == 'resource' || tcolumntype[h] == 'bodsod') {
+        let count = 0;
+        for (const [k, p] of mapPoints) {
+          svgback.append($X('<line xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" x1="' + (p.x + iconsize/2) + '" y1="' + p.y0 + '" x2="' + (p.x + iconsize/2) + '" y2="' + (p.ymax + 0.01) + '" class="' + tcolumntype[h] + '-column" stroke-width="' + iconsize + '"><text>' + k + '</text></line>'));
+          count += 1;
+        }
+      }
+
+      $('.resource-label').hide();  // Speech Bubble hide by default
+
+      svgcolumn.attr('width', xwidth);
+    }
+  });
+
+  return tcolumns.length;
+}
+
+$(document).ready(function() {
+  var current_label;
+  var clicked_label;
+  $('#graphgrid').on('mouseout','svg .resource-column, svg .resource-point',(data)=>{
+    if (clicked_label != current_label) {
+      $('.displaylabel').remove();
+      clicked_label = undefined;
+      current_label = undefined;
+    }
+  });
+  $('#graphcolumn').scroll((data)=>{
+    if (current_label != undefined) {
+      $('.displaylabel').remove();
+      show_dataflow_row_label(current_label);
+    }
+  });
+  $('#graphgrid').on('click','svg .resource-column',(data)=>{
+    show_dataflow_row_label(data.target);
+    current_label = data.target;
+    clicked_label = data.target;
+  });
+  $('#graphgrid').on('mouseover','svg .resource-column',(data)=>{
+    show_dataflow_row_label(data.target);
+    current_label = data.target;
+  });
+  $('#graphgrid').on('mouseover','svg .resource-point',(ev)=>{
+    let rc = $(ev.target).attr('resource-column');
+    let data = $('.resource-column[resource-column=' + rc + ']')[0];
+    show_dataflow_row_label(data);
+    current_label = data;
+    // let pos = data.target.getBoundingClientRect();
+    // let text = $('text',data.target).text();
+    // show_dataflow_label(pos.x + 12, pos.y + 5, 60, text);
+  });
+});

data/cockpit/js/instance.js

@@ -19,6 +19,7 @@ var save = {};
     save['attributes'] = undefined;
     save['attributes_raw'] = {};
 var node_state = {};
+var debug = false;
 
 function global_init() {
   suspended_redrawing = false;
@@ -102,6 +103,7 @@ function cockpit() { //{{{
   $("button[name=loadmodelfile]").click(load_modelfile);
   $("button[name=loadmodeltype]").click(function(e){new CustomMenu(e).menu($('#modeltypes'),load_modeltype, $("button[name=loadmodeltype]")); });
   $("button[name=savetestsetfile]").click(function(){ save_testsetfile(); });
+  $("button[name=savebpmnfile]").click(function(){ save_bpmnfile(); });
   $("button[name=savesvgfile]").click(function(){ save_svgfile(); });
   $("button[name=state_start]").click(function(){ $(this).parent().find('button').attr("disabled","disabled");start_instance(); });
   $("button[name=state_stop]").click(function(){ $(this).parent().find('button').attr("disabled","disabled");stop_instance(); });
@@ -149,6 +151,7 @@ function cockpit() { //{{{
           graph_highlight = graph_highlight[0];
         }
       }
+      if ('debug' in q) { debug = true; }
       if (q.monitor && q.load) {
         if (q.load.match(/https?:\/\//)) {
           $('body').attr('load-testset',q.load);
@@ -398,8 +401,9 @@ function monitor_instance(cin,rep,load,exec) {// {{{
       $("#current-track").attr('href','track.html?monitor=' + url);
       $("#current-index").show();
       $("#current-index").attr('href','index.html?monitor=' + url);
+
       var q = $.parseQuerySimple();
-      history.replaceState({}, '', '?' + (graph_position ? "position=" + graph_position + "&" : "") + (graph_highlight ? "highlight=" + graph_highlight + "&" : "") + (graph_theme ? "theme=" + graph_theme + "&" : "") + (q.min || q.min=="" ? "min&" : "") + 'monitor='+url);
+      history.replaceState({}, '', '?' + ('debug' in q ? "debug&" : "") + (graph_position ? "position=" + graph_position + "&" : "") + (graph_highlight ? "highlight=" + graph_highlight + "&" : "") + (graph_theme ? "theme=" + graph_theme + "&" : "") + (q.min || q.min=="" ? "min&" : "") + 'monitor='+url);
 
       // Change url to return to current instance when reloading (because new subscription is made)
       $("input[name=votecontinue]").prop( "checked", false );
@@ -586,14 +590,21 @@ function adaptor_init(url,theme,dslx) { //{{{
     suspended_redrawing = true;
     save['graph_theme'] = theme;
     save['graph_adaptor'] = new WfAdaptor($('body').data('theme-base') + '/' + theme + '/theme.js',function(graphrealization){
-      graphrealization.illustrator.get_symbol = (target) => {
+      graphrealization.illustrator.get_symbol = (target) => { //{{{
         if (save['endpoints_cache'][target]) {
           return save['endpoints_cache'][target].symbol;
         } else {
           return undefined;
         }
-      }
-      graphrealization.draw_labels = (max,labels,dimensions,striped) => {
+      } //}}}
+      graphrealization.illustrator.get_properties = (target) => { //{{{
+        if (save['endpoints_cache'][target]) {
+          return save['endpoints_cache'][target].properties;
+        } else {
+          return undefined;
+        }
+      } //}}}
+      graphrealization.draw_labels = (max,labels,dimensions,striped) => { //{{{
         // highlight
         if (graph_highlight) {
           graph_highlight_tasks.forEach((ele) => {
@@ -604,167 +615,14 @@ function adaptor_init(url,theme,dslx) { //{{{
           })
         }
 
-        // labels
-        $('#graphcanvas').css('grid-row', '1/span ' + (max.row + 2));
-        if (striped == true) {
-          if (!$('#graphgrid').hasClass('striped')) {
-            $('#graphgrid').addClass('striped');
-          }
-        } else {
-          $('#graphgrid').removeClass('striped');
-        }
-
-        $('.labelsrow, #graphgrid .graphlast').remove();
-        let tcolumns = [];
-        let tcolumntype = {};
-        let tcolumncount = {}
-
-        const mapPoints = new Map();
-        const tcolumnsvgs = {};
-        const iconsize = 10;
-        const space = 5;
-
-        _.each(labels,function(val){
-          if (val.label != "") {
-            _.each(val.label,function(col) {
-              if (!tcolumns.includes(col.column)) {
-                tcolumns.push(col.column);
-                tcolumncount[col.column] = 0;
-                tcolumnsvgs[col.column] = {};
-              }
-              if (tcolumntype[col.column] == undefined && col.type != undefined) {
-                tcolumntype[col.column] = col.type;
-              }
-              if (col.value != undefined) {
-                let pos = dimensions.height_shift/2 + dimensions.height * (val.row - 1) + (dimensions.height / 2);
-                let firstpos = dimensions.height_shift/2 + (dimensions.height / 2);
-
-                if (col.type == "resource") {
-                  for (const [k, v] of Object.entries(col.value)) {
-                    var p = { AR: v };
-                    if (!mapPoints.has(k)) {
-                      p.y0 = p.y0 == undefined ? pos : 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);
-                  }
-
-                  let tsvg = $X('<g xmlns="http://www.w3.org/2000/svg" class="resource-row" element-row="' + (val.row-1) + '"></g>');
-
-                  var cx = space;
-                  var count = 0;
-                  for (const [k, p] of mapPoints) {
-                    let firstAssignFlag = false;
-                    p.x = cx;
-
-                    // Including Triangle
-                    if (k in col.value) {   // Define points for a triangle pointing to the right
-                      let inner;
-
-                      if (p.AR == "Read") {
-                        inner = $X('<polygon xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" points="' + (p.x) + ',' + pos + ' ' + (p.x + iconsize) + ',' + (pos + iconsize/2) + ' ' + (p.x + iconsize) + ',' + (pos - iconsize/2) + '" class="resource-point read"></polygon>');
-                        if (pos == p.y0) { firstAssignFlag = true; }
-                      } else if (p.AR == "Assign") {    // Define points for a triangle pointing to the left
-                        inner = $X('<polygon xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" points="' + (p.x + iconsize) + ',' + pos + ' ' + (p.x) + ',' + (pos + iconsize/2) + ' ' + (p.x) + ',' + (pos - iconsize/2) + '" class="resource-point write"></polygon>');
-                      } else if (p.AR == "AssignRead") {
-                        inner = $X('<circle xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" cx="' + (p.x + iconsize/2) + '" cy="' + pos + '" r="' + (iconsize / 2) + '" class="resource-point both"></circle>');
-                      } else if (p.AR == "ReadAssign") {
-                        inner = $X('<circle xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" cx="' + (p.x + iconsize/2) + '" cy="' + pos + '" r="' + (iconsize / 2) + '" class="resource-point both"></circle>');
-                        if (pos == p.y0) { firstAssignFlag = true; }
-                      }
-
-                      // extend the bars
-                      if (pos > p.ymax) {
-                        p.ymax = pos;
-                      }
-
-                      inner.append($X('<text xmlns="http://www.w3.org/2000/svg"></text>').text(k));
-                      tsvg.append(inner);
-                    }
-
-                    if (firstAssignFlag) {
-                      // Additional logic and construction of another polygon for orange triangle pointing left in row 0
-                      p.y0 -= (val.row-1) * dimensions.height;
-                      if (tcolumnsvgs[col.column][1] == undefined) {
-                        tcolumnsvgs[col.column][1] = $X('<g xmlns="http://www.w3.org/2000/svg" class="resource-row" element-row="' + 0 + '"></g>');
-                      }
-                      tcolumnsvgs[col.column][1].append($X('<polygon xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" points="' + (p.x + iconsize) + ',' + firstpos + ' ' + (p.x) + ',' + (firstpos + iconsize/2) + ' ' + (p.x) + ',' + (firstpos - iconsize/2) + '" class="resource-point write"></polygon>').append($X('<text xmlns="http://www.w3.org/2000/svg"></text>').text(k)));
-                    }
-                    cx += iconsize + space;
-                    count += 1;
-                  }
-
-                  if (tsvg.children().length > 0) {
-                    tcolumnsvgs[col.column][val.row] = tsvg;
-                  }
-                } else {
-                  tsvg = $X('<text class="label" element-id="' + val.element_id + '" x="' + space + '" y="' + (dimensions.height * val.row - dimensions.height_shift) + '" xmlns="http://www.w3.org/2000/svg"></text>')
-                  tsvg.text(col.value);
-                  tsvg.mouseover(function(ev){ manifestation.events.mouseover($(ev.currentTarget).attr('element-id')); });
-                  tsvg.mouseout(function(ev){ manifestation.events.mouseout($(ev.currentTarget).attr('element-id')); });
-                  tsvg.click(function(ev){ manifestation.events.click($(ev.currentTarget).attr('element-id'),ev); });
-                  tcolumnsvgs[col.column][val.row] = tsvg;
-                }
-
-                tcolumncount[col.column] += 1;
-              }
-            });
-          }
-        });
-
-        $('#graphgrid').css({
-          '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'
-        });
-
-        tcolumns.forEach(h => {
-          if (Object.keys(tcolumnsvgs[h]).length > 0) {
-            const svgcolumn = $X('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:x="http://www.w3.org/1999/xlink" class="labelsrow"></svg>');
-            const svgback = $X('<g xmlns="http://www.w3.org/2000/svg"></g>');
-            const svgfront = $X('<g xmlns="http://www.w3.org/2000/svg"></g>');
-            let xwidth = 0;
-            svgcolumn.append(svgback);
-            svgcolumn.append(svgfront);
-            svgcolumn.css('grid-row', '1/span ' + (max.row + 2))
-            svgcolumn.css('grid-column', tcolumns.indexOf(tcolumns.first) + 2);
-            svgcolumn.attr('height', $('#graphcanvas').attr('height'));
-            $('#graphgrid').append(svgcolumn);
-
-            for (var i = 0; i < max.row; i++) {
-              let node = svgfront.append($(tcolumnsvgs[h][i+1]));
-              if (xwidth < node[0].getBBox().width) { xwidth = node[0].getBBox().width; }
-            }
-            xwidth = xwidth + 2 * space;
-            if (striped == true) {
-              for (var i = 0; i < max.row; i++) {
-                svgback.append($X('<rect xmlns="http://www.w3.org/2000/svg" element-row="' + i + '" class="stripe ' +  (i % 2 == 0 ? 'even' : 'odd') + '" x="0" y="' + (dimensions.height * i + dimensions.height_shift/2) + '" width="' + (xwidth + 1) + '" height="' + dimensions.height + '"></rect>'));
-                svgback.append($X('<rect xmlns="http://www.w3.org/2000/svg" element-row="' + i + '" class="border" x="0" y="' + (dimensions.height * i + dimensions.height_shift/2) + '" height="' + dimensions.height + '" width="1"></rect>'));
-              }
-            }
-            if (tcolumntype[h] == 'resource' || tcolumntype[h] == 'bodsod') {
-              let count = 0;
-              for (const [k, p] of mapPoints) {
-                svgback.append($X('<line xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" x1="' + (p.x + iconsize/2) + '" y1="' + p.y0 + '" x2="' + (p.x + iconsize/2) + '" y2="' + (p.ymax + 0.01) + '" class="' + tcolumntype[h] + '-column" stroke-width="' + iconsize + '"><text>' + k + '</text></line>'));
-                count += 1;
-              }
-            }
-
-            $('.resource-label').hide();  // Speech Bubble hide by default
-
-            svgcolumn.attr('width', xwidth);
-          }
-        });
+        columns = draw_extended_columns(graphrealization,max,labels,dimensions,striped);
 
         // Add the last stripe
-        var j = tcolumns.length;
         for (var i = 0; i < max.row; i++) {
-          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);
+          var ele = $('<div element-row="' + i + '" class="graphlast ' + (i % 2 == 0 ? 'odd' : 'even') + '" style="grid-column: ' + (columns+2) + '; grid-row: ' + (i+2) + '; height: ' + dimensions.stripe_height + 'px">&#032;</div>');
+          graphrealization.illustrator.svg.label_container.append(ele);
         }
-      };
+      }; //}}}
       graphrealization.set_svg_container($('#graphcanvas'));
       graphrealization.set_label_container($('#graphgrid'));
       graphrealization.set_description($(dslx), true);
@@ -944,7 +802,6 @@ function monitor_instance_pos_change(content) {// {{{
   if (content['at']) {
     $.each(content['at'],function(a,b){
       format_visual_add(b.position,"passive",false);
-      console.log('rrrrrr add', b.position);
     });
   }
   if (content['after']) {
@@ -955,7 +812,6 @@ function monitor_instance_pos_change(content) {// {{{
   if (content['unmark']) {
     $.each(content['unmark'],function(a,b){
       format_visual_remove(b.position,"passive",false)
-      console.log('rrrrrr remove', b.position);
     });
   }
   if (!content['at'] && !content['unmark'] && !content['after'] && !content['wait']) {
@@ -963,7 +819,6 @@ function monitor_instance_pos_change(content) {// {{{
   }
 } // }}}
 
-
 function monitor_instance_state_change(notification) { //{{{
   // sometimes, out of sheer network routingness, stopping comes after stopped, which fucks the UI hard
   // thus, we are having none of it
@@ -1192,6 +1047,7 @@ function save_svgfile() {// {{{
     }
   });
   gc.attr('width',start+1);
+  gc.find('.duration').remove();
   $.ajax({
     type: "GET",
     url: url + "/properties/attributes/info/",
@@ -1202,11 +1058,30 @@ function save_svgfile() {// {{{
     },
     error: report_failure
   });
+} // }}}
+
+function save_bpmnfile() {// {{{
+  var url = $('body').attr('current-instance');
+
+  let dpm = JSON.parse($('svg[data-pos-matrix]').attr('data-pos-matrix'));
+  let dcl = JSON.parse($('svg[data-con-list]').attr('data-con-list'));
+
+  let david = david_bpmn_convert(dpm,dcl);
+
+  $.ajax({
+    type: "GET",
+    url: url + "/properties/attributes/info/",
+    success: function(res){
+      $('#savebpmnfile').attr('download',res + '.bpmn');
+      $('#savebpmnfile').attr('href','data:application/xml;charset=utf-8;base64,' + $B64(david.serializePrettyXML()));
+      document.getElementById('savebpmnfile').click();
+    },
+    error: report_failure
+  });
 }// }}}
 async function set_testset(testset,exec) {// {{{
   var url = $('body').attr('current-instance');
-
-  var promises = [];
+  var promises;
 
   var tset = $X('<properties xmlns="http://cpee.org/ns/properties/2.0"/>');
   tset.append($("testset > executionhandler",testset));
@@ -1221,6 +1096,7 @@ async function set_testset(testset,exec) {// {{{
     $('properties > attributes > design_dir',tset).remove();
   }
 
+  promises = [];
   promises.push(
     $.ajax({
       type: "GET",
@@ -1235,6 +1111,9 @@ async function set_testset(testset,exec) {// {{{
       await load_testset_handlers(url,testset,vals);
     })
   );
+  await Promise.all(promises);
+
+  promises = [];
   promises.push(
     $.ajax({
       type: 'PATCH',
@@ -1248,7 +1127,6 @@ async function set_testset(testset,exec) {// {{{
       error: report_failure
     })
   );
-
   await Promise.all(promises);
 
   document.dispatchEvent(model_loaded);