formatted panel info for better readability

editor.html

@@ -97,5 +97,6 @@
     <div id="graph"></div>
   </div>
   
+  <script src="./workflow.js"></script>
   <script src="./editor.js"></script>
 </body>

editor.js

@@ -11,6 +11,33 @@ var workflow = {}
 var stateIdCounter  = workflow.states ? workflow.states.length  : 0;
 var actionIdCounter = workflow.states ? workflow.actions.length : 0;
 
+//Parse workflow
+
+workflow.states.forEach(state => {
+  var messages = [];
+  state.stateData.messages.forEach(msg => messages.push(new Message(msg)));
+  state.stateData.messages = messages;
+  var viewers = [];
+  state.stateData.viewers.forEach(v => viewers.push(new Role(v)));
+  state.stateData.viewers = viewers;
+  state.stateData.payload = new Payload(state.stateData.payload);
+})
+
+workflow.actions.forEach(action => {
+  var messages = [];
+  action.actionData.messages.forEach(msg => messages.push(new Message(msg)));
+  action.actionData.messages = messages;
+  var viewers = [];
+  action.actionData.viewers.forEach(v => viewers.push(new Role(v)));
+  action.actionData.viewers = viewers;
+  var actors = [];
+  action.actionData.actors.forEach(v => actors.push(new Role(v)));
+  action.actionData.actors = actors;
+  var viewActors = [];
+  action.actionData['actor Viewers'].forEach(v => viewActors.push(new Role(v)));
+  action.actionData['actor Viewers'] = viewActors;
+})
+
 //Actors of the workflow
 var actors = [];
 workflow.actions.forEach(act => act.actionData.actors.forEach(a => {
@@ -26,12 +53,10 @@ workflow.actions.forEach(act => act.actionData.actors.forEach(a => {
 function getRoleName(role) {
   if (typeof role == 'string') {
     return role;
-  } else if (role.tag == 'payload-reference') {
+  } else if (role instanceof Role) {
-    return role['payload-label'];
+    return role.name;
-  } else if (role.authorized) {
-    return role.authorized['dnf-terms'][0][0].var + ' (auth)';
   } else {
-    return role.user || JSON.stringify(role);
+    return JSON.stringify(role);
   } 
 }
 
@@ -179,6 +204,8 @@ const edgeColourSubtleSelected = '#00000055';
  * @returns 
  */
 function equalRoles(role1, role2) {
+  role1 instanceof Role && (role1 = role1.json);
+  role2 instanceof Role && (role2 = role2.json);
   var equal = role1.tag === role2.tag;
   if (role1.tag == 'payload-reference') {
     equal = equal && (role1['payload-label'] === role2['payload-label']);
@@ -248,10 +275,26 @@ function generatePanelContent(selection) {
     var heading = document.createTextNode(key.substring(0,1).toUpperCase() + key.substring(1));
     h.appendChild(heading);
     children.push(h);
-    var p = document.createElement('p');
+    var content = data[key];
-    var text = document.createTextNode(JSON.stringify(data[key]));
+    if (content instanceof Array && content.length > 0 && content[0] instanceof Message) {
-    p.appendChild(text);
+      content.forEach(msg => msg.format().forEach(child => children.push(child)));
-    children.push(p);
+    } else if (content instanceof Payload) {
+      content.format().forEach(child => children.push(child));
+    } else if (content instanceof Array && content.length > 0 && content[0] instanceof Role) {
+      var viewerList = document.createElement('ul');
+      content.forEach(viewer => {
+        var v = document.createElement('li');
+        v.appendChild(document.createTextNode(viewer.name));
+        viewerList.appendChild(v);
+      });
+      children.push(viewerList);
+    } else {
+      var p = document.createElement('p');
+      var text = document.createTextNode(JSON.stringify(data[key]));
+      p.appendChild(text);
+      children.push(p);
+    }
+    
   }
   return children;
 }

workflow.js

@@ -0,0 +1,91 @@
+class Role {
+
+  constructor(json) {
+    this.json = json;
+    if (json.tag == 'payload-reference') {
+      this.name = json['payload-label'];
+    } else if (json.authorized) {
+      this.name = json.authorized['dnf-terms'][0][0].var + ' (auth)';
+    } else if (json.user) {
+      this.name = json.user;
+    } else if (json.tag) {
+      this.name = json.tag + ' (tag)';
+    } else {
+      this.name = JSON.stringify(json);
+    }
+  }
+
+  format() {
+    return [document.createTextNode(this.name)];
+  }
+}
+
+class Message {
+
+  constructor(json) {
+    var content = json.content;
+    this.fallback = content.fallback;
+    this.fallbackLang = content['fallback-lang'];
+    this.translations = content.translations;
+    this.status = json.status;
+    this.viewers = [];
+    json.viewers.forEach(v => this.viewers.push(new Role(v)));
+    
+  }
+
+  format() {
+    var v = document.createElement('h3');
+    var viewers = document.createTextNode('Viewers');
+    v.appendChild(viewers);
+    var viewerList = document.createElement('ul');
+    this.viewers.forEach(v => {
+      var viewer = document.createElement('li');
+      viewer.appendChild(document.createTextNode(v.name));
+      viewerList.appendChild(viewer);
+    });
+    var h = document.createElement('h3');
+    var heading = document.createTextNode('Status');
+    h.appendChild(heading);
+    var p = document.createElement('p');
+    var text = document.createTextNode(this.status);
+    p.appendChild(text);
+    var result = [v, viewerList, h, p];
+    h = document.createElement('h3');
+    heading = document.createTextNode(this.fallbackLang);
+    h.appendChild(heading);
+    p = document.createElement('p');
+    text = document.createTextNode(this.fallback);
+    p.appendChild(text);
+    result.push(h, p);
+    for (var t in this.translations) {
+      h = document.createElement('h3');
+      heading = document.createTextNode(t);
+      h.appendChild(heading);
+      p = document.createElement('p');
+      text = document.createTextNode(this.translations[t]);
+      p.appendChild(text);
+      result.push(h, p);
+    }
+    return result;
+  }
+}
+
+class Payload {
+
+  constructor(json) {
+    this.fields = [];
+    for (var f in json) {
+      this.fields.push(f);
+    }
+  }
+
+  format() {
+    var fieldList = document.createElement('ul');
+    this.fields.forEach(f => {
+      var field = document.createElement('li');
+      field.appendChild(document.createTextNode(f));
+      fieldList.appendChild(field);
+    });
+    return [fieldList];
+  }
+}