Improve missing data list

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "description": "FörderFunke as a web app, the data only lives within the browser session locally",
   "dependencies": {
-    "@foerderfunke/matching-engine": "^0.3.8",
+    "@foerderfunke/matching-engine": "^0.3.9",
     "choices.js": "^10.2.0"
   },
   "scripts": {

public/index.html

@@ -36,7 +36,7 @@ <h3>Report</h3>
             placeholderValue: "No focus set --> prioritization of missing data points goes over all requirement profiles",
         });
 
-        let missingData
+        let validateAllReport
 
         let userProfile = `
 @prefix ff: <https://foerderfunke.org/default#> .
@@ -89,7 +89,7 @@ <h3>Report</h3>
 
             let turtleMap = await loadFiles()
 
-            let validateAllReport = await MatchingEngine.validateAll(userProfile, turtleMap.shacl, turtleMap.datafields, turtleMap.materialization)
+            validateAllReport = await MatchingEngine.validateAll(userProfile, turtleMap.shacl, turtleMap.datafields, turtleMap.materialization)
             console.log("validateAllReport", validateAllReport)
 
             buildFocusInputSelectChoices(validateAllReport.metadata);
@@ -105,24 +105,41 @@ <h3>Report</h3>
                 document.getElementById("reportTable").appendChild(tr)
             }
 
-            missingData = validateAllReport.missingUserInputsAggregated
             buildPrioritizedMissingDataList()
         }
 
         function buildPrioritizedMissingDataList() {
             let div = document.getElementById("missingDataPointsDiv")
             div.textContent = ""
             let prioritizedList = []
+
+            let missingData = validateAllReport.missingUserInputsAggregated
+            let metadata = validateAllReport.metadata
+
             for (let key of Object.keys(missingData)) {
-                prioritizedList.push([missingData[key].predicate.split("#")[1], missingData[key].usedIn.length])
+                let datafield = missingData[key]
+                let usedInTitles = []
+                let lastMissingCounter = 0
+                for (let usedInRP of datafield.usedIn) {
+                    usedInTitles.push(metadata[usedInRP.id].title + (usedInRP.isLastMissingUserInput ? " (!)" : ""))
+                    if (usedInRP.isLastMissingUserInput) lastMissingCounter += 1
+                }
+                prioritizedList.push({
+                    label: datafield.label ?? datafield.predicate.split("#")[1],
+                    score: datafield.usedIn.length + lastMissingCounter,
+                    usedInTitles: usedInTitles
+                })
             }
-            prioritizedList.sort((a, b) => b[1] - a[1])
+            prioritizedList.sort((a, b) => b.score - a.score)
             prioritizedList.forEach((entry) => {
-                let textNode = document.createTextNode(entry[1] + ": ")
-                div.appendChild(textNode)
+                let spanEl = document.createElement("span")
+                spanEl.title = entry.usedInTitles.join("\n")
+                let textNode = document.createTextNode(entry.score + ": ")
+                spanEl.appendChild(textNode)
+                div.appendChild(spanEl)
                 let a = document.createElement("a")
                 a.href = "#"
-                a.textContent = entry[0]
+                a.textContent = entry.label
                 a.addEventListener("click", function(event) {
                     event.preventDefault()
                     let input = prompt("What is your value for " + entry[0])