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.

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'}]]);