remove the type of a use case

demo/hacktoberfest-custom-themes/index.html

@@ -121,10 +121,10 @@ <h5>Theme Year</h5>
             </div>
             <div id="use-case-panel" class="column bg-gray">
                 <div class="column col-12 text-center">
-                    <h4 id="hacktoberfest-title" class="title"></h4>
+                    <h4 id="title" class="title"></h4>
                 </div>
                 <div class="column col-12">
-                    <div id="hacktoberfest-bpmn-container" class="column col-12 bpmn-container"></div>
+                    <div id="bpmn-container" class="column col-12 bpmn-container"></div>
                 </div>
             </div>
         </div>

demo/hacktoberfest-custom-themes/js/use-case/hacktoberfest-use-case.js

@@ -1,9 +1,11 @@
 class HacktoberfestUseCase extends UseCase {
 
     constructor(inputProjectName, title) {
-        document.querySelector(`[id*="hacktoberfest-title"]`).textContent = title;
-        document.querySelector(`[id*="hacktoberfest-bpmn-container"]`).textContent = undefined;
-        super('hacktoberfest', () => getHacktoberfestBpmnDiagram(inputProjectName), false);
+        super({
+            getDiagram: () => getHacktoberfestBpmnDiagram(inputProjectName),
+            navigationEnabled: false,
+            title
+        });
     }
 
     updateCellsLabel(projectName) {

demo/monitoring-all-process-instances/index.html

@@ -106,7 +106,7 @@ <h5>Displayed information</h5>
             </div>
             <div id="use-case-panel" class="bg-gray">
                 <div class="text-center">
-                    <h4 id="monitoring-title"></h4>
+                    <h4 id="title"></h4>
                 </div>
                 <div class="columns">
                     <div id="legend" class="column col-auto col-mx-auto">
@@ -145,7 +145,7 @@ <h4 id="monitoring-title"></h4>
                         </div>
                     </div>
                     <div class="column col-10 col-mx-auto">
-                        <div id="monitoring-bpmn-container" class="col-12 bpmn-container"></div>
+                        <div id="bpmn-container" class="col-12 bpmn-container"></div>
                     </div>
                 </div>
             </div>

demo/monitoring-all-process-instances/js/monitoring-use-case.js

@@ -2,13 +2,12 @@ class MonitoringUseCase extends UseCase {
     #executionData;
 
     constructor(getDiagram, executionData, title) {
-        document.querySelector(`[id*="monitoring-title"]`).textContent = title;
-        document.querySelector(`[id*="monitoring-bpmn-container"]`).textContent = undefined;
-        super('monitoring', getDiagram, true);
+        super({ getDiagram, navigationEnabled: true, title });
         this.#executionData = executionData;
     }
 
     display(dataType) {
+        this.#executionData.updateLegends();
         super.display(dataType);
         this.displayData(dataType);
     }
@@ -55,10 +54,4 @@ class MonitoringUseCase extends UseCase {
         }
         console.info('%s data set', dataType);
     }
-
-
-    _displayPanel() {
-        super._displayPanel();
-        this.#executionData.updateLegends();
-    }
 }

demo/prediction/index.html

@@ -94,7 +94,7 @@ <h5>Use case</h5>
             </div>
             <div id="use-case-panel" class="bg-gray">
                 <div class="text-center">
-                    <h4 id="prediction-title"></h4>
+                    <h4 id="title"></h4>
                 </div>
                 <div class="columns" style="padding: 0 1rem">
                     <div id="legend" class="column col-2 col-mx-auto state-predicted-late" style="margin: auto; padding-right: 0.7rem">
@@ -108,7 +108,7 @@ <h4 id="prediction-title"></h4>
                         </fieldset>
                     </div>
                     <div class="column col-10 col-mx-auto">
-                        <div id="prediction-bpmn-container" class="col-12 bpmn-container"></div>
+                        <div id="bpmn-container" class="col-12 bpmn-container"></div>
                     </div>
                 </div>
             </div>

demo/prediction/js/prediction-use-case.js

@@ -4,9 +4,12 @@ class PredicatedLateUseCase extends UseCase {
     _executionData;
 
     constructor(title) {
-        document.querySelector(`[id*="prediction-title"]`).textContent = title;
-        document.querySelector(`[id*="prediction-bpmn-container"]`).textContent = undefined;
-        super('prediction', () => pizzaDiagram(), false, {fit: {type: 'Center', margin: 20}});
+        super({
+            getDiagram:()  => pizzaDiagram(),
+            navigationEnabled: false,
+            loadOptions: {fit: {type: 'Center', margin: 20}},
+            title
+        });
     }
 
     display(dataType) {

demo/static/js/use-case.js

@@ -3,7 +3,6 @@ const defaultLoadOptions = {
 }
 
 class UseCase {
-    #type;
     #getDiagram;
     #navigationEnabled;
     #loadOptions;
@@ -13,17 +12,13 @@ class UseCase {
      */
     _bpmnVisualization;
 
-    #alreadyLoad = false;
-
-    constructor(type, getDiagram, navigationEnabled, loadOptions) {
-        this.#type = type;
+    constructor({ getDiagram, navigationEnabled, loadOptions, title }) {
         this.#getDiagram = getDiagram;
         this.#navigationEnabled = navigationEnabled;
         this.#loadOptions = {...defaultLoadOptions, ...loadOptions};
-    }
 
-    get type() {
-        return this.#type;
+        document.querySelector(`[id*="title"]`).textContent = title;
+        document.querySelector(`[id*="bpmn-container"]`).textContent = undefined;
     }
 
     /**
@@ -32,16 +27,11 @@ class UseCase {
      * @param {string} dataType
      */
     display(dataType) {
-        this._displayPanel();
-
-        if (!this.#alreadyLoad) {
-            this._bpmnVisualization = this._initBpmnVisualization({container: `${this.#type}-bpmn-container`, navigation: {enabled: this.#navigationEnabled}});
-            this._displayVersionInfoInFooter(); // This is called by each use case available in the page, but this is not an issue. All use the same bpmn-visualization version
-            this._preLoadDiagram();
-            this._bpmnVisualization.load(this.#getDiagram(), this.#loadOptions);
-            this._postLoadDiagram();
-            this.#alreadyLoad = true;
-        }
+        this._bpmnVisualization = this._initBpmnVisualization({container: 'bpmn-container', navigation: {enabled: this.#navigationEnabled}});
+        this._displayVersionInfoInFooter(); // This is called by each use case available in the page, but this is not an issue. All use the same bpmn-visualization version
+        this._preLoadDiagram();
+        this._bpmnVisualization.load(this.#getDiagram(), this.#loadOptions);
+        this._postLoadDiagram();
     }
 
     _displayVersionInfoInFooter() {
@@ -70,31 +60,4 @@ class UseCase {
      */
     _postLoadDiagram() {
     }
-
-    /**
-     * Generic implementation
-     */
-    _displayPanel() {
-        this._displayElementAndHideOthers("bpmn-container");
-        this._displayElementAndHideOthers("title");
-    }
-
-    /**
-     * Generic implementation
-     */
-    _displayElementAndHideOthers(subId) {
-        // Hide all corresponding HTML elements
-        const bpmnContainers = document.querySelectorAll(`[id*="${subId}"]`);
-        for (let i = 0; i < bpmnContainers.length; i++) {
-            bpmnContainers.item(i).classList.add('d-hide');
-        }
-
-        // Display corresponding HTML element
-        const element = document.getElementById(`${this.#type}-${subId}`);
-        if(element) {
-            element.classList.remove('d-hide');
-            console.info('%s displayed', `${this.#type}-${subId}`);
-        }
-    }
-
 }