cpee 2.1.93 → 2.1.95

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 );
@@ -611,165 +615,12 @@ 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) + '; height: ' + dimensions.stripe_height + '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'));
@@ -968,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
@@ -1208,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));
@@ -1227,6 +1096,7 @@ async function set_testset(testset,exec) {// {{{
     $('properties > attributes > design_dir',tset).remove();
   }
 
+  promises = [];
   promises.push(
     $.ajax({
       type: "GET",
@@ -1241,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',
@@ -1254,7 +1127,6 @@ async function set_testset(testset,exec) {// {{{
       error: report_failure
     })
   );
-
   await Promise.all(promises);
 
   document.dispatchEvent(model_loaded);

data/cockpit/js/wfadaptor.js

@@ -239,6 +239,11 @@ function WfIllustrator(wf_adaptor) { // View  {{{
       '  <clipPath id="endclip">' +
       '    <rect x="20" y="-1" width="' + self.endclipshift + '" height="35"/>' +
       '  </clipPath>' +
+      '  <linearGradient id="custom-gradient" x2="0.35" y2="1">' +
+      '    <stop offset="0%" stop-color="var(--wfadaptor-background)"/>' +
+      '    <stop offset="50%" stop-color="var(--custom-color)"/>' +
+      '    <stop offset="100%" stop-color="var(--custom-color)"/>' +
+      '  </linearGradient>' +
       '</defs>'));
     self.svg.defs = {};
     self.svg.defs['unknown'] = $X('<g xmlns="http://www.w3.org/2000/svg" class="unknown">' +
@@ -292,10 +297,11 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     $('> :not(defs)', self.svg.container).each(function() {$(this).remove()});
     $('> defs > [belongs-to=element]', self.svg.container).each(function() {$(this).remove()});
     self.dim.symbols = [];
+    self.dim.connections = [];
   } // }}}
   var get_symbol = this.get_symbol = function() { // {{{
   } // }}}
-  var get_properties = this.get_symbol = function() { // {{{
+  var get_properties = this.get_properties = function() { // {{{
   } // }}}
 
   // Helper Functions {{{
@@ -360,7 +366,7 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     self.dim.symbols[row][col].type = sname;
     // console.log('set_x ',row,col,debug_dim());
   } //}}}
-  var set_x_cond = this.dim.set_x_cond = function(row,col,tx,twidth,sname,label,subtype) { //{{{
+  var set_x_cond = this.dim.set_x_cond = function(row,col,tx,twidth,sname,label,subtype,sty,eid) { //{{{
     if (!self.dim.symbols[row]) { self.dim.symbols[row] = []; }
     if (!self.dim.symbols[row][col] || self.dim.symbols[row][col].width < twidth) {
       self.dim.symbols[row][col] = {};
@@ -370,6 +376,10 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     self.dim.symbols[row][col].type = sname;
     self.dim.symbols[row][col].label = label;
     self.dim.symbols[row][col].subtype = subtype;
+    self.dim.symbols[row][col].eid = eid;
+    for (const s in sty) {
+      self.dim.symbols[row][col][s] = sty[s];
+    }
     // console.log('set_x_cond',row,col,debug_dim());
   } //}}}
 
@@ -595,6 +605,14 @@ function WfIllustrator(wf_adaptor) { // View  {{{
       }
     }
 
+    sym.attr('class','activities');
+    let sty = { ...self.global_style, ...style };
+    for (const s in sty) {
+      $('.colorstyle', sym).each((_,ele) => {
+        $(ele).css(s,sty[s]);
+      });
+    }
+
     var tit = $X('<title xmlns="http://www.w3.org/2000/svg"></title>');
         tit.text(title);
     sym.prepend(tit);
@@ -662,7 +680,7 @@ function WfIllustrator(wf_adaptor) { // View  {{{
             if (xtr.length > 0) {
               xtr.attr('transform','translate(' + (pos.x + width - self.endclipshift - 4) + ',0)');
             }
-            set_x_cond(row,col,dstart,pos.x + width - self.endclipshift - 4 + this.get_width(end) + 2 * self.width_shift_label,sname,title,subtype);
+            set_x_cond(row,col,dstart,pos.x + width - self.endclipshift - 4 + this.get_width(end) + 2 * self.width_shift_label,sname,title,subtype,sty,id);
           } else {
             let tdim = 0;
             if (self.rotated_labels && self.elements[sname].rotatelabels != false) {
@@ -671,14 +689,14 @@ function WfIllustrator(wf_adaptor) { // View  {{{
             } else {
               tdim = self.width + width + self.width_shift_label;
             }
-            set_x_cond(row,col,dstart,tdim,sname,title,subtype);
+            set_x_cond(row,col,dstart,tdim,sname,title,subtype,sty,id);
           }
         } else {
-          set_x_cond(row,col,dstart,self.width,sname,title,subtype);
+          set_x_cond(row,col,dstart,self.width,sname,title,subtype,sty,id);
         }
         if (nor.length > 0) { nor.remove(); }
       } else {
-        set_x_cond(row,col,dstart,self.width,sname,title,subtype);
+        set_x_cond(row,col,dstart,self.width,sname,title,subtype,sty,id);
         if (sta.length > 0) { sta.remove(); }
         if (mid.length > 0) { mid.remove(); }
         if (end.length > 0) { end.remove(); }
@@ -687,16 +705,9 @@ function WfIllustrator(wf_adaptor) { // View  {{{
       $('.part-start',sym).remove();
       $('.part-middle',sym).remove();
       $('.part-end',sym).remove();
-      set_x_cond(row,col,dstart,self.width,sname,title,subtype);
+      set_x_cond(row,col,dstart,self.width,sname,title,subtype,sty,id);
     }
 
-    sym.attr('class','activities');
-    let sty = { ...self.global_style, ...style };
-    for (const s in sty) {
-      $('.colorstyle', sym).each((_,ele) => {
-        $(ele).css(s,sty[s]);
-      });
-    }
 
     $(g[0].childNodes[0]).append(sym);
     if (!addition) {

data/cockpit/llm.html

@@ -54,7 +54,7 @@
     <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>
 
@@ -62,8 +62,8 @@
     <link   rel="stylesheet"      href="css/llm.css" type="text/css"/>
 
     <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 */

data/cockpit/llm_alternative.html

@@ -58,14 +58,14 @@
     <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 */