From 4c34a8652ef5efb5c68fc699f898e73d6d1f8c20 Mon Sep 17 00:00:00 2001
From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>
Date: Mon, 20 Feb 2023 12:10:02 +0100
Subject: [PATCH] feat(js-popover): rework the order of the BPMN semantic data
 (#460)

The secondary keys were not always sorted alphabetically in the popover,
in particular when the original key were transformed before being
displayed.
The `isShape` property (displayed as representation Edge/Shape) is now
part of the header keys: this is a major information in this demo, and
so, we want it to appear at the top of the list.
---
 .../javascript-tooltip-and-popover/index.js       | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/examples/custom-behavior/javascript-tooltip-and-popover/index.js b/examples/custom-behavior/javascript-tooltip-and-popover/index.js
index 4ea01a48..c33472b2 100644
--- a/examples/custom-behavior/javascript-tooltip-and-popover/index.js
+++ b/examples/custom-behavior/javascript-tooltip-and-popover/index.js
@@ -140,27 +140,28 @@ function registerBpmnElements(bpmnElements) {
     bpmnElements.forEach(elt => registeredBpmnElements.set(elt.htmlElement, elt.bpmnSemantic));
 }
 
-const headerKeys = ['id', 'name', 'kind'];
+const headerKeys = ['id', 'name', 'kind', 'isShape'];
 
 function getBpmnElementInfoAsHtml(htmlElement) {
     const bpmnSemantic = registeredBpmnElements.get(htmlElement);
     // sort the non header keys in alphabetic order (following the browser locale)
     const secondaryKeys = Object.keys(bpmnSemantic)
-      .filter(key => !headerKeys.includes(key))
-      // in the future, the sort may be done on the converted object
-      .sort((a, b) => a.localeCompare(b));
+      .filter(key => !headerKeys.includes(key));
 
     return `<div class="bpmn-popover">
 BPMN Info
 <hr>
 ${computeBpmnInfoForPopover(headerKeys, bpmnSemantic)}
 <br>
-${computeBpmnInfoForPopover(secondaryKeys, bpmnSemantic)}
+${computeBpmnInfoForPopover(secondaryKeys, bpmnSemantic, true)}
 </div>`;
 }
 
-function computeBpmnInfoForPopover(keys, bpmnSemantic) {
-    return keys.map(key => getConvertedBpmnSemanticValue(key, bpmnSemantic)).map(obj => `<b>${obj.key}</b>: ${obj.value}`).join('<br>\n');
+function computeBpmnInfoForPopover(keys, bpmnSemantic, sort = false) {
+    return keys.map(key => getConvertedBpmnSemanticValue(key, bpmnSemantic))
+      .sort((a, b) => sort ? a.key.localeCompare(b.key) : 0)
+      .map(obj => `<b>${obj.key}</b>: ${obj.value}`)
+      .join('<br>\n');
 }
 
 const bpmnSemanticConversionMap = new Map([['isShape', { transformedKey: 'representation', transformFunction: (bpmnSemantic) => bpmnSemantic.isShape? 'Shape': 'Edge'}]]);