feat(process-monitoring): add a button to reset the use case (#78)

This reset the whole "happy path" animation.
Use the same colors as for the close button of the "advertise" section.
Make this button use the regular 'btn' style as done for all buttons of
the demo.

index.html

@@ -22,7 +22,11 @@
 <section id="section-main" class="container">
     <div class="columns col-11 col-mx-auto mt-2">
         <div class="col-12 my-2">
-            <div id="main-bpmn-container" class="bpmn-container"></div>
+            <div id="main-bpmn-container" class="bpmn-container">
+                <button id="btn-reset" title="Reset the current use case" class="d-hide btn btn-light has-icon-right p-absolute mr-2 mb-2" style="right: 0; bottom: 0">
+                    <span class="icon icon-refresh"></span>
+                </button>
+            </div>
             <div id="secondary-bpmn-container" class="bpmn-container d-hide"></div>
         </div>
 
@@ -53,7 +57,7 @@
     <div class="columns col-mx-auto mt-2">
         <div class="col-12 my-2">
             <div class="project-advertising-container">
-                <button class="text-bold color-subtitle btn-close mr-2 p-absolute">X</button>
+                <button class="text-bold color-subtitle btn btn-close btn-light mr-2 p-absolute">X</button>
                 <div class="project-advertising">
                     <img src="/pa-website-qr-code.png" alt="A QR Code to access to the Process Analytics website">
                 </div>

src/index.ts

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import 'spectre.css/dist/spectre-icons.css';
 import {configureBreadcrumb} from './breadcrumb.js';
 import {configureUseCaseSelectors, defaultUseCase} from './use-case-management.js';
 

src/process-monitoring.ts

@@ -74,7 +74,30 @@ export class ProcessMonitoring {
     this.bpmnElementsIdentifier = new BpmnElementsIdentifier(bpmnVisualization);
   }
 
-  showHappyPath() {
+  start() {
+    this.configureResetButton();
+    this.showHappyPath();
+  }
+
+  stop() {
+    this.configureResetButton(false);
+    this.hideHappyPath();
+  }
+
+  private configureResetButton(enable = true) {
+    const btnElement = document.querySelector<HTMLButtonElement>('#' + this.bpmnVisualization.graph.container.id + ' #btn-reset');
+    if (btnElement) {
+      if (enable) {
+        btnElement.classList.remove('d-hide');
+        btnElement.addEventListener('click', this.resetHappyPath);
+      } else {
+        btnElement.classList.add('d-hide');
+        btnElement.removeEventListener('click', this.resetHappyPath);
+      }
+    }
+  }
+
+  private showHappyPath() {
     const headElt = document.querySelectorAll('head')[0];
 
     /* Iterate over the elements in the happyPath
@@ -95,7 +118,7 @@ export class ProcessMonitoring {
     this.addPopover(happyPathElementWithPopover);
   }
 
-  hideHappyPath() {
+  private hideHappyPath() {
     this.bpmnElementsRegistry.removeCssClasses(happyPath, [
       'highlight-happy-path',
       'pulse-happy',
@@ -112,6 +135,19 @@ export class ProcessMonitoring {
     this.removePopover(happyPathElementWithPopover);
   }
 
+  private readonly resetHappyPath = () => {
+    Promise.resolve()
+      .then(() => {
+        this.hideHappyPath();
+      })
+      .then(() => {
+        this.showHappyPath();
+      })
+      .catch(error => {
+        console.error('Error while resetting the happy path', error);
+      });
+  };
+
   private getHappyPathClasses(index: number, elementId: string) {
     const delay = index * animationDelay;
 

src/style.css

@@ -32,14 +32,13 @@ header {
   background-color: var(--color-background-navbar);
 }
 
+/* Override class of Spectre CSS. To be declare after Spectre CSS to override it*/
 .btn {
-  /* Override class of Spectre CSS. To be declare after Spectre CSS to override it*/
   overflow-wrap: break-word;
   height: auto;
   white-space: inherit;
 }
 
-/* Override Spectre CSS. To be declare after Spectre CSS to override it*/
 .divider {
   border-color: var(--color-divider);
 }
@@ -57,6 +56,12 @@ header {
   cursor: pointer;
 }
 
+.btn-light {
+  background: var(--color-background-navbar);
+  border-color: var(--color-divider);
+  color: var(--color-divider);
+}
+
 /* ****************************************************************************************************************** */
 /* Project Advertising section */
 /* ****************************************************************************************************************** */
@@ -68,11 +73,8 @@ header {
 
 .project-advertising-container .btn-close {
   right: 0;
-  background: var(--color-background-navbar);
-  border-color: var(--color-divider);
   border-style: solid;
   border-width: .1rem;
-  color: var(--color-divider);
 }
 .project-advertising-container .btn-close:hover {
   background: var(--color-divider);

src/use-case-management.ts

@@ -23,9 +23,9 @@ export function configureUseCaseSelectors(selectedUseCase: string) {
   const useCases = new Map<string, UseCaseSelector>();
   useCases.set('process-monitoring', new UseCaseSelector('radio-process-monitoring', () => {
     processVisualizer.hideManuallyTriggeredProcess(true);
-    processMonitoring.showHappyPath();
+    processMonitoring.start();
   }, () => {
-    processMonitoring.showHappyPath();
+    processMonitoring.stop();
   }));
   useCases.set('case-monitoring', new UseCaseSelector('radio-case-monitoring', () => {
     processVisualizer.hideManuallyTriggeredProcess();