refactor code + add legend

Author: assynour

frontend/src/colors.js

@@ -8,80 +8,4 @@ export function violationScale(min,max){
 export function frequencyScale(min, max){
   return d3.scaleSequential().domain([min,max])
           .interpolator(d3.interpolatePuBu)
-}
-
-//updated from: https://observablehq.com/@d3/color-legend
-export function colorLegend({colorScale, title} = {}) {
-    const tickSize = 6
-    const width = 320
-    const height = 44 + tickSize
-    
-    d3.select("#legend")
-      .selectAll("*")
-      .remove();
-
-    d3.select('#legend').append('svg').attr('id', 'svg-legend')
-    const appendedSvg = d3.select('#svg-legend')
-                            .attr("id", "svg-legend")
-                            .attr("width", width)
-                            .attr("height", height)
-                            .attr("viewBox", [0, 0, width, height])
-                            .style("overflow", "visible")
-                            .style("display", "block")
-    
-    const marginTop = 18
-    const marginRight = 0
-    const marginBottom = 16 + tickSize
-    const marginLeft = 0
-    const ticks = width / 64
-  
-    let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height);
-    let x = Object.assign(colorScale.copy()
-    .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {
-        range() {
-        return [marginLeft, width - marginRight];
-        }
-    });
-
-    appendedSvg.append("image")
-    .attr("x", marginLeft)
-    .attr("y", marginTop)
-    .attr("width", width - marginLeft - marginRight)
-    .attr("height", height - marginTop - marginBottom)
-    .attr("preserveAspectRatio", "none")
-    .attr("xlink:href", ramp(colorScale.interpolator()).toDataURL());
-
-    //compute tick values
-    const n = Math.round(ticks + 1);
-    const tickValues = d3.range(n).map(i => d3.quantile(colorScale.domain(), i / (n - 1)));
-
-    appendedSvg.append("g")
-        .attr("transform", `translate(0,${height - marginBottom})`)
-        .call(d3.axisBottom(x)
-            .ticks(ticks)
-            .tickSize(tickSize)
-            .tickValues(tickValues))
-        .call(tickAdjust)
-        .call(g => g.select(".domain").remove())
-        .call(g => g.append("text")
-        .attr("x", marginLeft)
-        .attr("y", marginTop + marginBottom - height - 6)
-        .attr("fill", "currentColor")
-        .attr("text-anchor", "start")
-        .attr("font-weight", "bold")
-        .text(title));
-  
-    return appendedSvg.node();
-  }
-  
-  function ramp(color, n = 256) {
-    var canvas = document.createElement('canvas');
-    canvas.width = n;
-    canvas.height = 1;
-    const context = canvas.getContext("2d");
-    for (let i = 0; i < n; ++i) {
-      context.fillStyle = color(i / (n - 1));
-      context.fillRect(i, 0, 1, 1);
-    }
-    return canvas;
 }

frontend/src/conformance.js

@@ -1,22 +1,19 @@
 import globals from './globals.js';
 import { mxgraph } from './mxgraph-initializer';
-import { violationScale, colorLegend } from './colors.js'
+import { violationScale } from './colors.js'
+import { colorLegend, overlayLegend } from './legend.js';
 import { getDeviationOverlay, getSynchronousOverlay } from './overlays.js'
 import { getBpmnActivityElementbyName } from './utils.js';
 import { ShapeBpmnElementKind } from 'bpmn-visualization';
 
 export function getAlignment(formData) {
     console.log("Get alignments...");
-    try{
-        fetch('http://localhost:6969/conformance/alignment',{
+    return fetch('http://localhost:6969/conformance/alignment',{
             method: 'POST',
             body: formData
         }).then(response => response.json())
           .then(data => visualizeAlignment(data))
-    }
-    catch(error){
-        console.log(error)
-    }   
+          .catch(error => console.log(error))
 }
 
 function visualizeAlignment(alignedTraces){
@@ -34,7 +31,8 @@ function visualizeAlignment(alignedTraces){
     let activityCurrentStyle = null
     let activityCell = null
 
-    //first reset fill anf font color
+    //first reset fill and font color
+    // and remove overlays if existing
     let activities = globals.bpmnVisualization.bpmnElementsRegistry.getElementsByKinds(ShapeBpmnElementKind.TASK)
     let activityCells = activities.map(elt => mxGraph.getModel().getCell(elt.bpmnSemantic.id))
     mxGraph.getModel().beginUpdate()
@@ -45,40 +43,53 @@ function visualizeAlignment(alignedTraces){
         mxGraph.getModel().endUpdate();
     }
 
+    //remove overlays
+    activities.forEach(act => globals.bpmnVisualization.bpmnElementsRegistry.removeAllOverlays(act.bpmnSemantic.id))
+    
+
     //set violation color
-    for (const [activityName, violationValue] of Object.entries(stats.normalizedStats)) {
+    for (const [activityName, violationRatio] of Object.entries(stats.normalizedStats)) {
         const activityElement = getBpmnActivityElementbyName(activityName) 
         if(activityElement){
             activityCell = mxGraph.getModel().getCell(activityElement.bpmnSemantic.id)
             activityCurrentStyle = mxGraph.getModel().getStyle(activityCell)
             mxGraph.getModel().beginUpdate()
             try {
-                let style = mxgraph.mxUtils.setStyle(activityCurrentStyle, "fillColor", myViolationScale(violationValue*100))
+                let style = mxgraph.mxUtils.setStyle(activityCurrentStyle, "fillColor", myViolationScale(violationRatio*100))
 				mxGraph.getModel().setStyle(activityCell, style);
+                activityCurrentStyle = mxGraph.getModel().getStyle(activityCell)
                 //different way of setting the style
                 //mxGraph.setCellStyles("fillColor", "red", [activityCell]); 
 
                 //set label to white when the activity fillColor is above the scale average
-                if(violationValue > 0.5){
-                    activityCurrentStyle = mxGraph.getModel().getStyle(activityCell)
+                if(violationRatio > 0.5){ 
                     style = mxgraph.mxUtils.setStyle(activityCurrentStyle, 'fontColor', 'white')
 				    mxGraph.getModel().setStyle(activityCell, style);
                 }
             } finally {
                 mxGraph.getModel().endUpdate();
             }
+            //add overlay
+            globals.bpmnVisualization.bpmnElementsRegistry.addOverlays(
+                activityElement.bpmnSemantic.id,
+                [
+                    getDeviationOverlay(stats.aggStats[activityName].modelMove, 
+                                        violationRatio, 
+                                        myViolationScale(violationRatio*100)),
+                    getSynchronousOverlay(stats.aggStats[activityName].syncMove)
+                ])
         }
-        //add overlay
-        globals.bpmnVisualization.bpmnElementsRegistry.addOverlays(
-            activityElement.bpmnSemantic.id,
-            [getDeviationOverlay(stats.aggStats[activityName].modelMove, violationValue, myViolationScale(violationValue*100)),
-               getSynchronousOverlay(stats.aggStats[activityName].syncMove)])
+
     }
     //add legend
     colorLegend({
         colorScale: myViolationScale,
-        title: "% of deviations (model moves)"
+        title: "% deviations (model moves)"
       })
+    
+    overlayLegend({
+        leftOverlayLegend: "# conformoties\n(synchronous moves)", 
+        rightOverlayLegend : "# deviations\n(model moves)"})
 }
 
 /**

frontend/src/conversion.js

@@ -1,15 +1,10 @@
 export function convertToCSV(formData){
-    try{
-        fetch('http://localhost:6969/conversion/xes-to-csv', {
-            method: 'POST',
-            body: formData
-        }).then(response => response.json())
-          .then(data => visualizeCSV(data))
-          
-    }
-    catch(error){
-        console.log(error)
-    }
+    fetch('http://localhost:6969/conversion/xes-to-csv', {
+        method: 'POST',
+        body: formData
+    }).then(response => response.json())
+        .then(data => visualizeCSV(data))
+        .catch(error => console.log(error))
 }
 
 function visualizeCSV(data){

frontend/src/discovery.js

@@ -2,22 +2,19 @@ import globals from './globals.js';
 import { mxgraph } from './mxgraph-initializer';
 
 import { FitType, ShapeBpmnElementKind } from 'bpmn-visualization';
-import { frequencyScale, colorLegend } from './colors.js'
+import { frequencyScale } from './colors.js'
+import { getFrequencyOverlay } from './overlays.js';
+import { colorLegend, overlayLegend } from './legend.js';
 import { getBpmnActivityElementbyName } from './utils.js';
 
 export function getBPMNDiagram(formData) {
     console.log('Get bpmn...');
-    try{
-        fetch('http://localhost:6969/discover/inductive-miner', {
+    return fetch('http://localhost:6969/discover/inductive-miner', {
             method: 'POST',
             body: formData
         }).then(response => response.text())
           .then(data => visualizeBPMN(data))
-          
-    }
-    catch(error){
-        console.log(error)
-    }
+          .catch(error => console.log(error))
 }
 
 function visualizeBPMN(data) {
@@ -34,14 +31,10 @@ function visualizeBPMN(data) {
 
 function computeFrequency(){
     console.log('Compute frequency stats...');
-    try{
-        fetch('http://localhost:6969/stats/frequency')
+    fetch('http://localhost:6969/stats/frequency')
             .then(response => response.json())
             .then(data => visualizeFrequency(data))
-    }
-    catch(error){
-        console.log(error)
-    }
+            .catch(error => console.log(error))
 }
 
 function visualizeFrequency(data) {
@@ -66,17 +59,21 @@ function visualizeFrequency(data) {
         const activityElement = getBpmnActivityElementbyName(activityName)
         if(activityElement){
             activityCell = mxGraph.getModel().getCell(activityElement.bpmnSemantic.id)
+            //activityCurrentStyle = mxGraph.getCurrentCellStyle(activityCell)
             activityCurrentStyle = mxGraph.getModel().getStyle(activityCell)
+            
             mxGraph.getModel().beginUpdate()
             try { 
                 let style = mxgraph.mxUtils.setStyle(activityCurrentStyle, 'fillColor', myFrequencyScale(freqValue))
 				mxGraph.getModel().setStyle(activityCell, style);
-                //different way of setting the style
-                //mxGraph.setCellStyles("fillColor", myFrequencyScale(freqValue), [activityCell]); 
+                activityCurrentStyle = mxGraph.getModel().getStyle(activityCell)
+                //different ways of setting the style
+                //mxGraph.setCellStyles("fillColor", myFrequencyScale(freqValue), [activityCell]);
+                //or
+                //mxGraph.setCellStyles(mxgraph.mxConstants.STYLE_FILLCOLOR, 'red', [activityCell]); 
 
                 //set label to white when the activity fillColor is above the scale average
                 if (freqValue > avg){
-                    activityCurrentStyle = mxGraph.getModel().getStyle(activityCell)
                     style = mxgraph.mxUtils.setStyle(activityCurrentStyle, 'fontColor', 'white')
 				    mxGraph.getModel().setStyle(activityCell, style);
                     //different way of setting the style
@@ -85,12 +82,20 @@ function visualizeFrequency(data) {
             } finally {
                 mxGraph.getModel().endUpdate();
             }
-        }
+
+            //add frequency overlay
+            globals.bpmnVisualization.bpmnElementsRegistry.addOverlays(
+                activityElement.bpmnSemantic.id,
+                getFrequencyOverlay(freqValue, max, 
+                                    myFrequencyScale(freqValue)))
+        }    
     }
 
     //add legend
     colorLegend({
         colorScale: myFrequencyScale,
         title: "Frequency of execution"
-    })   
+    }) 
+    
+    overlayLegend({rightOverlayLegend : "# executions"})
 }

frontend/src/index.js

@@ -3,8 +3,8 @@ import { getAlignment } from './conformance.js';
 import { convertToCSV } from './conversion.js';
 import './styles.css';
 
-const fileUpload = document.getElementById("xes-file-discovery")
-fileUpload.addEventListener("change", function(e){
+const fileUpload = document.getElementById('xes-file-discovery')
+fileUpload.addEventListener('change', function(e){
     document.getElementById('show-xes-log').classList.remove('d-invisible');
 })
 
@@ -17,30 +17,34 @@ document.getElementsByClassName('modal-overlay').item(0).onclick = () => {
     modalElt.classList.remove('active');
 };
 
-const showEventLogButton = document.getElementById("show-xes-log")
-showEventLogButton.addEventListener("click", function(e){
-    let file = fileUpload.files[0]
+const showEventLogButton = document.getElementById('show-xes-log')
+showEventLogButton.addEventListener('click', function(e){
+    let file = document.getElementById('xes-file-discovery').files[0]
     let formData = new FormData()
     formData.append('file', file)
     convertToCSV(formData)
     modalElt.classList.add('active');
 })
 
-const discoverBpmnButton = document.getElementById("discover-bpmn")
-discoverBpmnButton.addEventListener("click", function(e){
-    let file = fileUpload.files[0]
-    let noiseThreshold = document.getElementById("noise-threshold").value
+const discoverBpmnButton = document.getElementById('discover-bpmn')
+discoverBpmnButton.addEventListener('click', function(e){
+    discoverBpmnButton.classList.add('loading')
+    let file = document.getElementById('xes-file-discovery').files[0]
+    let noiseThreshold = document.getElementById('noise-threshold').value
     let formData = new FormData()
     formData.append('file', file)
     formData.append('noise', noiseThreshold)
-    getBPMNDiagram(formData)
+    getBPMNDiagram(formData).then(() => discoverBpmnButton.classList.remove('loading'))
+   
+
 })
 
 
-const conformanceButton = document.getElementById("compute-conformance")
+const conformanceButton = document.getElementById('compute-conformance')
 conformanceButton.addEventListener('click', function(e){
-    let file = document.getElementById("xes-file-conformance").files[0]
+    conformanceButton.classList.add('loading')
+    let file = document.getElementById('xes-file-conformance').files[0]
     let formData = new FormData()
     formData.append('file', file)
-    getAlignment(formData)
+    getAlignment(formData).then(() => conformanceButton.classList.remove('loading'))
 })