BOD and SOD Visualization

cockpit/Template.xml

@@ -0,0 +1,92 @@
+<testset xmlns="http://cpee.org/ns/properties/2.0">
+  <subscriptions>
+	  <subscription xmlns="http://riddl.org/ns/common-patterns/notifications-producer/2.0" url="http://localhost:3001" id="compliance-checker">
+      <topic id="activity">
+        <event>calling</event>
+        <event>done</event>
+        <event>status</event>
+        <event>receiving</event>
+      </topic>
+    </subscription>
+  </subscriptions>
+  <executionhandler>ruby</executionhandler>
+  <dataelements/>
+  <endpoints>
+    <worklist>http-post://localhost:3000</worklist>
+  </endpoints>
+  <attributes>
+    <info>Enter info here</info>
+    <modeltype>CPEE</modeltype>
+    <theme>bodsod</theme>
+  </attributes>
+  <description>
+    <description xmlns="http://cpee.org/ns/description/1.0">
+      <_shifting/>
+      <_concerns>
+        <concern id="c1" name="Test123" orgmodel="https://cpee.org/~demo/orgviz/organisation_informatik.xml" role="Assistant" type="BOD"/>
+        <concern id="c2" name="Test456" orgmodel="https://cpee.org/~demo/orgviz/organisation_informatik.xml" role="Assistant" type="SOD"/>
+      </_concerns>
+      <_context_data_analysis>
+        <probes/>
+        <ips/>
+      </_context_data_analysis>
+      <call id="a1" endpoint="worklist">
+        <parameters>
+          <label>OK OR NOT OK</label>
+          <arguments>
+            <_concerns>
+              <concern>
+                <id>c1</id>
+              </concern>
+              <concern>
+                <id>c2</id>
+              </concern>
+            </_concerns>
+          </arguments>
+        </parameters>
+        <code>
+          <prepare/>
+          <finalize output="result">data.bla = result</finalize>
+          <update output="result"/>
+          <rescue output="result"/>
+        </code>
+        <annotations>
+          <_generic/>
+          <_timing>
+            <_timing_weight/>
+            <_timing_avg/>
+            <explanations/>
+          </_timing>
+          <_shifting>
+            <_shifting_type>Duration</_shifting_type>
+          </_shifting>
+          <_context_data_analysis>
+            <probes/>
+            <ips/>
+          </_context_data_analysis>
+          <report>
+            <url/>
+          </report>
+          <_notes>
+            <_notes_general/>
+          </_notes>
+        </annotations>
+        <documentation>
+          <input/>
+          <output/>
+          <implementation>
+            <description/>
+          </implementation>
+          <code>
+            <description/>
+          </code>
+        </documentation>
+      </call>
+    </description>
+  </description>
+  <transformation>
+    <description type="copy"/>
+    <dataelements type="none"/>
+    <endpoints type="none"/>
+  </transformation>
+</testset>

cockpit/css/bodsod-label.css

@@ -0,0 +1,37 @@
+svg.displaylabel .displaylabel {
+    fill: var(--wfadaptor-background);
+    fill-opacity:1;
+    stroke: var(--wfadaptor-border);
+    stroke-width:1.6;
+    stroke-linecap:round;
+    stroke-linejoin:round;
+    stroke-miterlimit:4;
+    stroke-opacity:1;
+    stroke-dasharray:none;
+  }
+  svg.displaylabel .displaylabelinner {
+    fill: var(--wfadaptor-background);
+    fill-opacity:1;
+    stroke: var(--wfadaptor-background);
+    stroke-width:1.6;
+    stroke-linecap:round;
+    stroke-linejoin:round;
+    stroke-miterlimit:4;
+    stroke-opacity:1;
+    stroke-dasharray:none;
+  }
+  svg.displaylabel text.label {
+    font-size:12px;
+    font-style:normal;
+    font-variant:normal;
+    font-stretch:normal;
+    text-align:center;
+    line-height:125%;
+    writing-mode:horizontal-tb;
+    text-anchor:start;
+    fill: var(--wfadaptor-base);
+    fill-opacity:1;
+    stroke:none;
+    font-family:Arial;
+  }
+

cockpit/css/bodsod-svg.css

@@ -0,0 +1,39 @@
+svg rect.border {
+    fill: var(--wfadaptor-border);
+  }
+  svg .bodsod-point.bod {
+    fill: green;
+  }
+  svg .bodsod-point.sod {
+    fill: red;
+  }
+  svg .bodsod-point.none {
+    fill: blue;
+  }
+  svg line.bodsod-column.bod {
+    stroke: green;
+    stroke-opacity: 0.1;
+  }
+
+  svg line.bodsod-column.sod {
+    stroke: red;
+    stroke-opacity: 0.1;
+  }
+
+  svg line.bodsod-column.none {
+    stroke: blue;
+    stroke-opacity: 0.1;
+  }
+
+  svg line.bodsod-column.bod:hover {
+    stroke: green;
+    stroke-opacity: 0.2;
+  }
+  svg line.bodsod-column.sod:hover {
+    stroke: red;
+    stroke-opacity: 0.2;
+  }
+  svg line.bodsod-column.none:hover {
+    stroke: blue;
+    stroke-opacity: 0.2;
+  }

cockpit/graph.html

@@ -50,6 +50,10 @@
     <link rel="stylesheet" href="css/wfadaptor.css" type="text/css" data-include-export="true"/>
 
     <!-- custom stuff, play arround  -->
+    <script type="text/javascript" src="js/model.js"></script>
+    <script type="text/javascript" src="js/track.js"></script>
+    <script type="text/javascript" src="js/resources.js"></script>
+    <script type="text/javascript" src="js/bodsod.js"></script>
     <script type="text/javascript" src="js/ui.js"></script>
     <script type="text/javascript" src="js/instance.js"></script>
     <script type="text/javascript" src="js/details.js"></script>
@@ -60,7 +64,11 @@
     <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/bodsod-label.css" type="text/css"/>
+    <link rel="stylesheet" href="css/bodsod-svg.css" type="text/css" data-include-export="true"/>
     <link rel="stylesheet" href="css/graph.css" type="text/css"/>
+    <link rel="stylesheet" href="css/model.css" type="text/css"/>
+    <link rel="stylesheet" href="css/resources.css" type="text/css"/>
   </head>
   <body data-base-port="8298" data-res-port="9303" data-theme-base="themes" is="x-ui-">
     <div class='hidden' id='relaxngworker'></div>

cockpit/index.html

@@ -57,9 +57,12 @@
     <script type="text/javascript" src="js/resources.js"></script>
     <script type="text/javascript" src="js/modifiers.js"></script>
     <script type="text/javascript" src="themes/base.js"></script>
+    <script type="text/javascript" src="js/bodsod.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/bodsod-label.css" type="text/css"/>
+    <link rel="stylesheet" href="css/bodsod-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 */

cockpit/js/bodsod.js

@@ -0,0 +1,146 @@
+function show_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));
+
+  $(clone).css('left',x-top_x);
+  $(clone).css('top',y-shift-top_y);
+
+  $(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_row_label(data) {
+  let pos = data.getBoundingClientRect();
+  let pos_top = $('#graphcolumn')[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_label(pos.x + 12, pos_y, 60, text);
+}
+
+
+$(document).ready(function(){
+
+    var current_label;
+    $('#graphgrid').on('mouseout','svg .bodsod-column, svg .bodsod-point',(data)=>{
+      $('.displaylabel').remove();
+      current_label = undefined;
+    });
+    $('#graphcolumn').scroll((data)=>{
+      if (current_label != undefined) {
+        $('.displaylabel').remove();
+        show_row_label(current_label);
+      }
+    });
+    $('#graphgrid').on('mouseover','svg .bodsod-column',(data)=>{
+      show_row_label(data.target);
+      current_label = data.target;
+    });
+    $('#graphgrid').on('mouseover','svg .bodsod-point',(ev)=>{
+      let rc = $(ev.target).attr('bodsod-column');
+      let data = $('.bodsod-column[bodsod-column=' + rc + ']')[0];
+      show_row_label(data);
+      current_label = data;
+      // let pos = data.target.getBoundingClientRect();
+      // let text = $('text',data.target).text();
+      // show_label(pos.x + 12, pos.y + 5, 60, text);
+    });
+
+    $(document).on('click', 'div[data-relaxngui-path=" > description > _concerns[data-main]"] > button:contains("Create Concern")',function(e){
+      existing_ids = Array.from($(e.currentTarget.parentNode).find('input[data-relaxngui-path=" > description > _concerns > concern[id]"]'))
+      current_input = existing_ids.pop()
+
+      currentId = 1
+
+      while ($(existing_ids).filter('input').filter(function() {return $(this).val() == 'c'+currentId})[0]) {
+        currentId++
+      }
+
+      $(current_input).val('c'+currentId)
+
+    })
+
+    $(document).on('node:updated',function(e){
+
+        var svgid    = e.originalEvent.svgid;
+        var desc     = e.originalEvent.desc;
+        var node = e.originalEvent.node
+        var nnew = e.originalEvent.nnew
+
+        if (node[0].nodeName == "call") {
+          if (Array.from($(node).find("concern")).length > Array.from($(nnew).find("concern")).length) {
+            Array.from($(node).find("concern")).forEach(function(element) {
+              if (!$(nnew).find('concern:contains("'+element.children[0].innerHTML+'")')[0]){
+                Array.from($('select[data-relaxngui-path=" > call > parameters > arguments > _concerns > concern > id"]')).forEach(function(e1) {
+                  if(!$(e1).find('option[value="'+element.children[0].innerHTML+'"]')[0]) {
+                    $($.parseHTML('<option value="'+element.children[0].innerHTML+'">'+element.children[0].innerHTML+'</option>')).appendTo(e1)
+                    oldValue = $(e1)[0].value
+                    $(e1).find('option').sort((a,b) => $(a).text() > $(b).text() ? 1 : -1).detach().appendTo($(e1))
+                    $(e1)[0].value = oldValue
+                  }
+                })
+              }
+            })
+          } else if (Array.from($(node).find("concern")).length < Array.from($(nnew).find("concern")).length){
+            Array.from($(nnew).find("concern")).forEach(function(element) {
+              if (!$(node).find('concern:contains("'+element.children[0].innerHTML+'")')[0]){
+                Array.from($('select[data-relaxngui-path=" > call > parameters > arguments > _concerns > concern > id"]')).forEach(function(e1) {
+                  if(element.children[0].innerHTML != "Choose id" && e1.value != element.children[0].innerHTML) {
+                    $(e1).find('option[value="'+element.children[0].innerHTML+'"]').remove()
+                  }
+                })
+              }
+            })
+          } else {
+            nnewArray = Array.from($(nnew).find("concern")).toSorted((a,b) => a.textContent > b.textContent ? 1:-1)
+            nodeArray = Array.from($(node).find("concern")).toSorted((a,b) => a.textContent > b.textContent ? 1:-1)
+            for (let i = 0; i < nnewArray.length; i++) {
+              if (nnewArray[i].children[0].innerHTML != nodeArray[i].children[0].innerHTML) {
+                  Array.from($('select[data-relaxngui-path=" > call > parameters > arguments > _concerns > concern > id"]')).forEach(function(e1) {
+                    if(!$(e1).find('option[value="'+nodeArray[i].children[0].innerHTML+'"]')[0]) {
+                      $($.parseHTML('<option value="'+nodeArray[i].children[0].innerHTML+'">'+nodeArray[i].children[0].innerHTML+'</option>')).appendTo(e1)
+                      oldValue = $(e1)[0].value
+                      $(e1).find('option').sort((a,b) => $(a).text() > $(b).text() ? 1 : -1).detach().appendTo($(e1))
+                      $(e1)[0].value = oldValue
+                    }
+                  })
+
+                  Array.from($('select[data-relaxngui-path=" > call > parameters > arguments > _concerns > concern > id"]')).forEach(function(e1) {
+                    if(nnewArray[i].children[0].innerHTML != "Choose id" && e1.value != nnewArray[i].children[0].innerHTML) {
+                      $(e1).find('option[value="'+nnewArray[i].children[0].innerHTML+'"]').remove()
+                    }
+                  })
+                break
+              }
+            }
+          }
+        } else if (node[0].nodeName == 'description') {
+          if (Array.from($(node).find("> _concerns > concern")).length > Array.from($(nnew).find("> _concerns > concern")).length) {
+            Array.from($(node).find("> _concerns > concern")).forEach(function(element) {
+              if (!$(nnew).find('> _concerns > concern[id="'+element.id+'"]')[0]) {
+                $($(nnew)[0].ownerDocument).find('call concern:contains("'+element.id+'")').remove()
+              }
+            })
+          }
+        }
+    })
+})
+

cockpit/js/details.js

@@ -1,4 +1,4 @@
-var details_updated = new Event("details:updated", {"bubbles":true, "cancelable":false});
+var node_updated = new Event("node:updated", {"bubbles":true, "cancelable":false})
 
 $(document).ready(function() {
   var timer;
@@ -54,7 +54,11 @@ function do_main_work() { //{{{
     nnew[0].removeAttribute('xmlns');
   }
 
-  parameters_changed
+  node_updated.svgid = svgid
+  node_updated.desc = desc
+  node_updated.node = node
+  node_updated.nnew = nnew
+  document.dispatchEvent(node_updated)
 
   node.replaceWith(nnew);