feature: highlight actions of selected actors

editor.html

@@ -15,8 +15,11 @@
       <b>New node:</b> click on the canvas, <b>New link:</b> drag one node close enough to another one,
       <b>Rename</b> node or link by clicking on it, <b>Remove</b> node or link by right-clicking on it
     </div> -->
+    <div id="settings">
+      <label for="actor">Highlight actor: </label>
+      <select name="actor" id="actor" onchange="selectActor();"></select>
+    </div>
     <div id="graph"></div>
-    hello
   </div>
   
   <script src="./editor.js"></script>

editor.js

@@ -11,6 +11,37 @@ var workflow = {}
 var stateIdCounter  = workflow.states ? workflow.states.length  : 0;
 var actionIdCounter = workflow.states ? workflow.actions.length : 0;
 
+//Persons & roles of the workflow
+var actors = [];
+workflow.actions.forEach(act => act.actionData.actors.forEach(a => {
+  var includes = false;
+  actors.forEach(actor => includes = includes || equalRoles(a, actor)); // TODO check if contents of 'authorized' also match if applicable
+  (!includes) && actors.push(a);
+  (!act.actionData.actorNames) && (act.actionData.actorNames = []);
+  act.actionData.actorNames.push(getActorName(a));
+}));
+// console.log(actors);
+// workflow.actions.forEach(a => console.log(a.actionData.actorNames));
+
+function getActorName(actor) {
+  return actor.tag == 'payload-reference' ? actor['payload-label'] : actor.authorized['dnf-terms'][0][0].var + ' (auth)';
+}
+
+//Prepare actor highlighting
+const selectedActor = document.getElementById('actor');
+var allActors = document.createElement('option');
+allActors.text = 'All Actors';
+selectedActor.add(allActors);
+actors.forEach(actor => {
+  var option = document.createElement('option');
+  option.text = getActorName(actor);
+  selectedActor.add(option);
+});
+
+function selectActor() {
+  console.log(selectedActor.value);
+}
+
 
 var selfLoops         = {};  // All edges whose targets equal their sources.
 var overlappingEdges  = {};  // All edges whose target and source are connected by further.
@@ -20,6 +51,21 @@ const curvatureMinMax = 0.2; // Minimum/maximum curvature (1 +/- x) of overlappi
 var selection = null; // The currently selected node/edge.
 
 
+/**
+ * Checks if two roles are equal.
+ * @param {*} role1 
+ * @param {*} role2 
+ * @returns 
+ */
+function equalRoles(role1, role2) {
+  var equal = role1.tag === role2.tag && role1['payload-label'] === role2['payload-label'];
+  if (equal && role1.tag == 'authorized') {
+    equal = role1.authorized['dnf-terms'][0][0].var === role2.authorized['dnf-terms'][0][0].var;
+  }
+  return equal;
+}
+
+
 /**
  * Identifies and stores self loops as well as overlapping edges (i.e. multiple edges sharing the
  * same source and target).
@@ -163,7 +209,13 @@ const Graph = ForceGraph()
   (document.getElementById('graph'))
     .linkDirectionalArrowLength(6)
     .linkDirectionalArrowRelPos(1)
-    .linkColor(edge => selection === edge ? 'black' : '#999999')
+    .linkColor(edge => {
+      if (edge.actionData.mode != 'automatic' && edge.actionData.actorNames.includes(selectedActor.value)) {
+        return selection === edge ? 'red' : 'magenta';
+      } else {
+        return selection === edge ? 'black' : '#999999';
+      }
+    })
     .linkCurvature('curvature')
     .linkCanvasObjectMode(() => 'after')
     .linkCanvasObject((edge, context) => {
@@ -247,7 +299,7 @@ const Graph = ForceGraph()
       context.fillText(label, 0, 0);
       context.restore();
     })
-    .linkLineDash(edge => edge.actionData.mode == 'automatic' && [2, 3])
+    .linkLineDash(edge => edge.actionData.mode == 'automatic' && [2, 3]) //[dash, gap]
     .nodeCanvasObject((node, ctx) => {
       ctx.fillStyle = getColour(node);
       ctx.beginPath();