Nicer buttons for rendering process traces

src/main/webapp/myPlugins/dtdesign.js

@@ -513,8 +513,18 @@ fetch(BACKEND+"/version")
               loadButton.style.marginLeft = "12px";
             div.appendChild(document.createTextNode(modelName));
             div.appendChild(loadButton);
-            extraStuff(modelName)
-            .then(stuff => stuff.forEach(el => div.appendChild(el)));
+            const extraStuffWrapper = document.createElement('div');
+            div.appendChild(extraStuffWrapper);
+            function refreshExtraStuff() {
+              extraStuff(modelName)
+              .then(extraDiv =>  {
+                if (extraDiv) {
+                  extraStuffWrapper.replaceChildren(extraDiv);
+                  extraDiv.appendChild(mxUtils.button("Refresh List", refreshExtraStuff));
+                }
+              });
+            }
+            refreshExtraStuff();
             return div;
           }));
         }
@@ -543,16 +553,19 @@ fetch(BACKEND+"/version")
       const enactButton = mxUtils.button("Start New", ()=>{});
       const pmModel = addArtifactPrefix(modelName.substr(0, modelName.length-3)+"_pm#model");
       const urlEncoded = encodeURIComponent(pmModel);
+      const shortTraceName = traceIri => dropArtifactPrefix(traceIri).split('#').findLast(str => str.length > 0);
       return Promise.all([
         fetch(WEE+"/traces/active/"+urlEncoded)
         .then(response => response.json())
         .then(enactments => {
-          return enactments.map((enactment, i) => mxUtils.button(`Continue ${i}`, createPTrenderCallback(enactment.iri)))
+          console.log(enactments)
+          return enactments.map((enactment, i) => mxUtils.button(`Open "${shortTraceName(enactment.iri)}" (ongoing)`, createPTrenderCallback(enactment.iri)))
         }),
         fetch(WEE+"/traces/finished/"+urlEncoded)
         .then(response => response.json())
         .then(enactments => {
-          return enactments.map((enactment, i) => mxUtils.button(`Finished ${i}`, createPTrenderCallback(enactment.iri)))
+          console.log(enactments)
+          return enactments.map((enactment, i) => mxUtils.button(`Open "${shortTraceName(enactment.iri)}" (finished)`, createPTrenderCallback(enactment.iri)))
         }),
       ])
       .then(([ongoing, finished]) => {
@@ -568,12 +581,12 @@ fetch(BACKEND+"/version")
         if (finished.length > 0) {
           finished.forEach(f => pmDiv.appendChild(f));
         }
-        return [pmDiv];
+        return pmDiv;
       });
     }
-    return Promise.resolve([]);
+    return Promise.resolve(null);
   };
-  const noExtraStuff = () => Promise.resolve([]);
+  const noExtraStuff = () => Promise.resolve(null);
 
   createModelList("drawio", createSavePageDiv, "Open", modelName => loadPage(modelName), extraPMstuff);
   createModelList("xopp", createUploadDiv("xopp", "application/x-xopp,.xopp"), "Download", createDownloadHandler("xopp"), noExtraStuff);