Better style for policies, start of filter option

SKernchen · SKernchen · commit 3c1be40c05de · 2026-02-17T14:44:05.000+01:00
diff --git a/public/.hermes/process/transport.json b/public/.hermes/process/transport.json
@@ -19,7 +19,7 @@
         "timestamp": "2025-03-18T13:28:37.657148",
         "harvester": "codemeta"
       },
-     {"conflict": "Policy 1"}
+     {"conflict": "None"}
   ],
     "author": [
       {
@@ -349,7 +349,7 @@
               "timestamp": "2025-03-18T13:28:37.657148",
               "harvester": "cff"
             },
-            {"conflict": "Policy 1"}
+            {"conflict": "policy3"}
            ],
           "givenName": ["Kernchen",
             {
@@ -358,7 +358,7 @@
               "timestamp": "2025-03-18T13:28:37.657148",
               "harvester": "cff"
             },
-            {"conflict": "Policy 1"}
+            {"conflict": "policy3"}
             ],
           "email":["sophie.kernchen@dlr.de",
             {
@@ -439,14 +439,14 @@
         }
       
       ],
-      "description": ["Cool tool",
+      "description": ["Proof-of-concept implementation of the Software CaRD workflow.",
       {
         "plugin": "cff",
         "local_path": "CITATION.cff",
         "timestamp": "2025-03-18T13:28:37.657148",
         "harvester": "cff"
       },
-      {"conflict": "None"}
+      {"conflict": "policy2"}
       ],
     "license": ["https://spdx.org/licenses/Apache-2.0",
       {
@@ -482,8 +482,12 @@
          {"conflict": "Curation"}
       ],
 
-  "policies": [{"Policy 1": {"conforms": true}},
-  {"Policy 2": {"conforms": false,
+  "policies": [{"policy1": {
+    "name": "Policy 1",  
+    "conforms": true}},
+  {"policy2": {
+      "name": "Policy 2",  
+      "conforms": false,
       "resultMessage": "String length not >= Literal(\"100\", datatype=xsd:integer)" ,
       "resultPath": "https://schema.org/description" ,
       "resultSeverity": "Violation" ,
@@ -493,9 +497,23 @@
               "minLength": 100 ,
               "name": "Long description" ,
               "path": "https://schema.org/description" },
-      "value": "Proof-of-concept implementation of the HERMES workflow."
+      "value": "Proof-of-concept implementation of the Software CaRD workflow."
+  }},
+  {"policy3": {
+      "name": "Policy 3",  
+      "conforms": false,
+      "resultMessage": "Name does not match the mapping" ,
+      "resultPath": [["https://schema.org/familyName", "https://schema.org/givenName"]] ,
+      "resultSeverity": "Violation" ,
+      "sourceConstraintComponent": "MappingError" ,
+      "sourceShape": { "datatype": "string" ,
+              "description": "The names have to be in right order",
+              "name": "Name order" ,
+              "path": [["https://schema.org/familyName", "https://schema.org/givenName"]]  },
+      "value": [["Sophie", "Kernchen"]]
   }}
 
+
 ]
 }
   
diff --git a/public/curation/click.js b/public/curation/click.js
@@ -0,0 +1,19 @@
+function showFilter() {
+  document.getElementById("filterDropdown").classList.toggle("show");
+}
+
+function filterFunction() {
+  var input, filter, ul, li, a, i;
+  input = document.getElementById("myInput");
+  filter = input.value.toUpperCase();
+  div = document.getElementById("filterDropdown");
+  a = div.getElementsByTagName("a");
+  for (i = 0; i < a.length; i++) {
+    txtValue = a[i].textContent || a[i].innerText;
+    if (txtValue.toUpperCase().indexOf(filter) > -1) {
+      a[i].style.display = "";
+    } else {
+      a[i].style.display = "none";
+    }
+  }
+}
diff --git a/public/curation/curation.js b/public/curation/curation.js
@@ -8,6 +8,13 @@ export function displayJSON(json_document){
   fetch(json_document)
   .then(response => response.json())
   .then(data => {
+      const colorPalette = ["rgb(34, 198, 227)", "purple", "rgb(23, 124, 207)", "rgb(116, 75, 196)", "pink"];
+      let colorPolicies = {"Curation": "red"};
+      if(data["policies"]){
+      for(let i=0; i<data["policies"].length;i++){
+        colorPolicies[Object.keys(data["policies"][i])] = colorPalette[i];
+      }}
+      console.log(colorPolicies);
       //Get data snippet from url
       const params = new URLSearchParams(location.search);
       if(params.has("id")){
@@ -29,6 +36,7 @@ export function displayJSON(json_document){
       const policyTemp = document.querySelector("#policy"),
           policyDiv =  document.querySelector("#sw-policies");
       
+      
 
       const header = document.querySelector("#header-policies");
       header.style.display = "none";
@@ -46,10 +54,17 @@ export function displayJSON(json_document){
             const policy = document.importNode(policyTemp.content, true);
             const tbodyPol = policy.querySelector("tbody"),
               polname = policy.querySelector("#policy-name"),
+              polcolor = policy.querySelector("#color"),
               pconforms = policy.querySelector("#policy-conforms"); 
             const policyId = Object.keys(pol)[0];
-            polname.textContent = `${policyId}`;
+            console.log(policyId);
+            polname.textContent = `${pol[policyId]["name"]}`;
+            //const randColor = '#'+(0x1000000+Math.random()*0xffffff).toString(16).slice(1,7);
+            polcolor.id += '_'+policyId;
+            polcolor.style.background = colorPolicies[policyId];
+            console.log(colorPolicies);
             policyDiv.appendChild(policy);
+
             const policyReportTemp = document.querySelector("#policy-report");
             const polKeys = Object.keys(pol[policyId]);
             polKeys.forEach(report =>{
@@ -59,8 +74,8 @@ export function displayJSON(json_document){
                 pvalue = prow.querySelector("#pvalue");
                 
                 if(report=="conforms"){
-                  pconforms.innerText = `${policyId} ${(pol[policyId][report]) ? 'is' : 'is not'} conform.`;
-                  pconforms.style.color = (pol[policyId][report]) ? 'black' : 'red';
+                  pconforms.innerText = `${pol[policyId]["name"]} ${(pol[policyId][report]) ? 'is' : 'is not'} conform.`;
+                  pconforms.style.color = (pol[policyId][report]) ? 'green' : 'red';
                 }
                 pkey.textContent = `${report}`;
                 extract_info(pvalue, pol[policyId][report]);
@@ -79,7 +94,7 @@ export function displayJSON(json_document){
           mtag = row.querySelector("#tag");
 
           mkey.textContent = `${element}`;
-          extract_info(mvalue, data[element], mtag);
+          extract_info(mvalue, data[element], mtag, colorPolicies);
 
           tbody.appendChild(row);
       })
diff --git a/public/curation/extract.js b/public/curation/extract.js
@@ -1,11 +1,11 @@
-function extract_info(cell, obj, tag, category){
+function extract_info(cell, obj, tag, colorPolicies){
       if(!Array.isArray(obj)){
         obj = [obj];
       }
       if(typeof obj[0] === "string" || typeof obj[0] == "number" || typeof obj[0] == "boolean"){
-        if(obj[2] && obj[2]["conflict"] == "Curation"){
+        if(obj[2] && obj[2]["conflict"]){
           const element = document.createElement("div");
-          element.className += " error";
+          element.style.color = colorPolicies[obj[2]["conflict"]];
           element.appendChild(document.createTextNode(` ${obj[0]}`));
           cell.appendChild(element);
         }else{
@@ -16,7 +16,7 @@ function extract_info(cell, obj, tag, category){
       else if(!Array.isArray(obj[0]) && Object.keys(obj[0]).includes("familyName")){
           obj.forEach(e =>{
             const element = document.createElement("div");
-            extract_person(e, element, tag);
+            extract_person(e, element, tag, colorPolicies);
             cell.appendChild(element);
 
           })}
@@ -37,7 +37,7 @@ function extract_info(cell, obj, tag, category){
             div.appendChild(document.createTextNode(`${key}: ${(obj[0][key])}`));
             }else{
               div.appendChild(document.createTextNode(`${key}: `));
-              extract_info(div, obj[0][key], tag, key); 
+              extract_info(div, obj[0][key], tag, colorPolicies); 
             }
             div.appendChild(document.createElement("br"));
           }
@@ -52,7 +52,7 @@ function extract_info(cell, obj, tag, category){
 
     }
 
-  function extract_person(e, element, tag){
+  function extract_person(e, element, tag, colorPolicies){
     const tooltip = document.createElement("div");
     const tooltiptag = document.createElement("div");
     tooltip.classList.add("tooltip");
@@ -74,19 +74,23 @@ function extract_info(cell, obj, tag, category){
         const pair_in_list = document.createElement("p");
         names.push(`${k}:${key}:  ${e[k][key][0]}`); 
         pair_in_list.appendChild(document.createTextNode(`${k}:${key}:  ${e[k][key][0]}`));
-        if(e[k][key][2] && e[k][key][2]["conflict"] == "Curation"){
-          pair_in_list.className += " error";
-          tooltiptag.className += " error";
+        if(e[k][key][2] && e[k][key][2]["conflict"]){
+          pair_in_list.style.color = colorPolicies[e[k][key][2]["conflict"]];
+          tooltiptag.style.color = colorPolicies[e[k][key][2]["conflict"]];
+          /*pair_in_list.className += " error";
+          tooltiptag.className += " error";*/
         }
         pair.appendChild(pair_in_list);
       }
       }else{
       names.push(`${k}:  ${e[k][0]}`); 
       pair.appendChild(document.createTextNode(`${k}:  ${e[k][0]}`));
       
-      if(e[k][2] && e[k][2]["conflict"] == "Curation"){
-        pair.className += " error";
-        tooltiptag.className += " error";
+      if(e[k][2] && e[k][2]["conflict"]){
+        pair.style.color = colorPolicies[e[k][2]["conflict"]];
+        tooltiptag.style.color = colorPolicies[e[k][2]["conflict"]];
+        //pair.className += " error";
+        //tooltiptag.className += " error";
       }
     }
     tooltiptext.appendChild(pair);
diff --git a/public/curation/index.html b/public/curation/index.html
@@ -21,8 +21,24 @@ <h1><a href="../">Software CaRD</a>
     </div>
 
     <p id="project-name"><b>Metadata</b></p>
+    <div class="operators">
+
+
+
+    <div class="dropdown">
+        <button onclick="showFilter()" class="dropbtn">Filter</button>
+        <div id="filterDropdown" class="dropdown-content">
+            <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
+            <a>&#10004; Conflicts</a>
+            <a>&#10004; Policy 1</a>
+            <a>&#10004; Policy 2</a>
+            <a>&#10004; Policy 3</a>
+        </div>
+    </div>
+
     <input type="checkbox" id="extended" name="extended" value=1 checked>
     <label for="extended">Extended view</label><br>
+    </div>
     
     <div id="content">
         <div id="hermes">
@@ -49,7 +65,10 @@ <h1><a href="../">Software CaRD</a>
         <div id="sw-policies">
         <h3 id="header-policies">Policy Report</h3>
         <template id="policy">
+            <div class="policy-header">
+            <div class="policy-color" id="color"></div>
             <b id="policy-name"></b>
+            </div>
             <p id="policy-conforms"></p>
             <table>
                 <tbody>
@@ -67,6 +86,7 @@ <h3 id="header-policies">Policy Report</h3>
 
 
     <script type="module" src="./script.js"></script>
+    <script src="./click.js"></script>
 
 </body>
 </html>
diff --git a/public/style.css b/public/style.css
@@ -52,6 +52,13 @@ button{
     justify-content: center;
 }
 
+.conflict-operators{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+}
+
 .tooltip {
     position: relative;
     border-bottom: 1px dotted black;
@@ -106,3 +113,82 @@ button{
     color: red;
     border-color:black;
 }
+.policy-header{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+}
+.policy-color{
+    width:10px;
+    height:10px;
+    border-radius: 5px;
+    background-color: blue;
+    margin: 7px;
+}
+
+/* Dropdown Button */
+.dropbtn {
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
+  width: 100px;
+  height: 30px;
+  text-align: center;
+  background-image: none;
+  background-color: #ddd;
+  color:black
+
+}
+
+/* Dropdown button on hover & focus */
+.dropbtn:hover, .dropbtn:focus {
+  background-color: rgb(23, 124, 207);
+}
+
+/* The search field */
+#myInput {
+  box-sizing: border-box;
+  background-image: url('searchicon.png');
+  background-position: 14px 12px;
+  background-repeat: no-repeat;
+  font-size: 16px;
+  padding: 10px;
+  border: none;
+  border-bottom: 1px solid #ddd;
+}
+
+/* The search field when it gets focus/clicked on */
+#myInput:focus {outline: 3px solid #ddd;}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+  left: 41%;
+  top: -15px;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  top: 35px;
+  background-color: #f6f6f6;
+  min-width: 50px;
+  border: 1px solid #ddd;
+  z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+  color: black;
+  padding: 5px;
+  text-decoration: none;
+  display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #f1f1f1}
+
+/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
+.show {display:block;}
