From 9d185ea6bf6746763622ab995d16ab78e28ccea2 Mon Sep 17 00:00:00 2001
From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>
Date: Fri, 24 Mar 2023 09:23:08 +0100
Subject: [PATCH] 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                 |  8 ++++++--
 src/index.ts               |  1 +
 src/process-monitoring.ts  | 40 ++++++++++++++++++++++++++++++++++++--
 src/style.css              | 12 +++++++-----
 src/use-case-management.ts |  4 ++--
 5 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index ebda826..42d5ba7 100644
--- a/index.html
+++ b/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>
diff --git a/src/index.ts b/src/index.ts
index 7e43174..5256ee3 100644
--- a/src/index.ts
+++ b/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';
 
diff --git a/src/process-monitoring.ts b/src/process-monitoring.ts
index 16ff4ca..f747155 100644
--- a/src/process-monitoring.ts
+++ b/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;
 
diff --git a/src/style.css b/src/style.css
index 8d48a38..57a91da 100644
--- a/src/style.css
+++ b/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);
diff --git a/src/use-case-management.ts b/src/use-case-management.ts
index d652a6a..cc3ba47 100644
--- a/src/use-case-management.ts
+++ b/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();