Merge pull request #20 from skohub-io/18-info-and-examples

18 info and examples

package.json

@@ -21,6 +21,7 @@
     "@elastic/elasticsearch": "^8.6.0",
     "@frogcat/ttl2jsonld": "^0.0.9",
     "dotenv": "^16.0.3",
+    "ejs": "^3.1.9",
     "elastic-builder": "^2.18.0",
     "express": "^4.18.2",
     "jsonld": "^8.1.1",

public/.gitignore

@@ -3,9 +3,10 @@
 
 # Except this file
 !.gitignore
-!index.html
+!index.ejs
 !processing.html
 !log/
 !img/
 !fonts/
-!css/
+!css/
+!icons/

public/css/style.css

@@ -131,6 +131,12 @@ button {
   appearance: none;
 }
 
+button:hover {
+  background-color: var(--skohub-greendark);
+  outline-width: 0;
+}
+
+
 textarea {
   overflow: auto;
 }
@@ -258,7 +264,7 @@ main * {
 
 .introduction h1 {
   max-width: 800px;
-  margin: 30px auto 90px auto;
+  margin: 30px auto 30px auto;
   color: var(--skohub-greenmiddle);
   font-weight: 400;
   font-size: 50px;
@@ -339,9 +345,10 @@ main * {
   margin-top: 1rem;
   margin-left: auto;
   margin-right: auto;
+  cursor: pointer;
 }
 
-.main-intotext-content {
+.main-infotext-content {
   position: relative;
   max-width: 900px;
   margin: -300px auto 0 auto;
@@ -774,3 +781,15 @@ Print Styles
     content: " (" attr(title) ")";
   }
 }
+
+.tooltip {
+  position: absolute;
+  background-color: #555;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 6px;
+  z-index: 1000;
+  display: none; /* Initially hidden */
+  cursor: pointer;
+}
+

public/index.html → public/index.ejs

@@ -30,15 +30,17 @@
       <section class="introduction">
         <h1>Unleash the full potential of controlled vocabularies in reconciliation</h1>
       </section>
-
       <section class="keyvisual-content">
         <div class="uploadForm">
           <form action="/upload" enctype="multipart/form-data" method="post">
             <div class="form-group">
               <label for="account">Account for Dataset
+                  <a title="Please provide the same account for all your uploads. The account is part of the reconcile service url.">❓</a>
               </label>
               <input type="text" id="account" name="account" required />
-              <label for="language">Language to use for Reconciliation</label>
+              <label for="language">Language to use for Reconciliation
+                <a title="Reconciliation is done against a specific language. So tell us what language of your vocabulary we should use.">❓</a>
+                </label>
               <input type="text" id="language" name="language" required placeholder="e.g. de" />
               <label for="file_upload">
                 Please select a file to upload (.ttl)
@@ -66,6 +68,18 @@ <h1>Unleash the full potential of controlled vocabularies in reconciliation</h1>
           </div>
         </div>
       </section>
+      <section class="keyvisual-content">
+        <p>Test out these URLs as examples in your favorite reconcile spec compliant service (click to copy):</p>
+          <button data-url="https://reconcile-test.skohub.io/reconcile?language=de&account=kim&dataset=https://w3id.org/kim/hochschulfaechersystematik/scheme" class="btn example-url" type="button">
+            Hochschulfächersystematik (german)
+            <img src="icons/copy.svg" alt="Copy" />
+          </button>
+          <button data-url="https://reconcile-test.skohub.io/reconcile?language=en&account=nalt-test&dataset=https://lod.nal.usda.gov/nalt-core" type="button" class="btn example-url">
+            AgroVoc (english)
+            <img src="icons/copy.svg" alt="Copy" />
+          </button>
+          <p>or see <a href="<%= data.reconcileUrl %>/vocabs">all uploaded vocabularies</a>.</p>
+      </section>
 
     </main>
     <!-- main end -->
@@ -109,6 +123,7 @@ <h1>Unleash the full potential of controlled vocabularies in reconciliation</h1>
   const spinner = document.querySelector("#spinner")
   const checkmark = document.querySelector("#checkmark")
   const result = document.querySelector("#result")
+  const exampleUrlButton = document.querySelectorAll("button.btn.example-url")
 
   const url = new URL(window.location.href)
   const idParam = url.searchParams.get("id")
@@ -125,6 +140,15 @@ <h1>Unleash the full potential of controlled vocabularies in reconciliation</h1>
     }
   }
 
+  function copyUrl(e) {
+    const url = e.target.dataset.url
+    navigator.clipboard.writeText(url).then(function() {
+      console.log('Copied!');
+    }, function() {
+      console.log('Copy error')
+    });
+  }
+
   function validateInput() {
     const input = document.getElementById("language");
     const value = input.value;
@@ -160,6 +184,34 @@ <h1>Unleash the full potential of controlled vocabularies in reconciliation</h1>
     getData()
   })
 
+  exampleUrlButton.forEach(b => b.addEventListener("click", (e) => {
+    copyUrl(e)
+    // Create tooltip element
+    var tooltip = document.createElement("div");
+    tooltip.innerHTML = "Copied!";
+    tooltip.className = "tooltip";
+    document.body.appendChild(tooltip);
+
+    // Calculate position for the tooltip. Adjust as needed.
+    var btnRect = b.getBoundingClientRect();
+    var tooltipWidth = tooltip.offsetWidth;
+    var tooltipHeight = tooltip.offsetHeight;
+
+    // Position the tooltip above the button or wherever you prefer
+    tooltip.style.left = btnRect.left + (btnRect.width / 2) - (tooltipWidth / 2) + "px";
+    tooltip.style.top = btnRect.top + window.scrollY - 15 + "px"; // Adjust "5" for margin between button and tooltip
+
+    // Show the tooltip
+    tooltip.style.display = "block";
+
+    // Hide the tooltip after a few seconds 
+    setTimeout(function() {
+      tooltip.style.display = "none";
+      document.body.removeChild(tooltip); // Clean up by removing the tooltip from the DOM
+    }, 1000);
+  }))
+
+
   const getData = async () => {
     try {
       const response = await fetch(`./log/${id.value}.json`)
@@ -187,6 +239,13 @@ <h1>Unleash the full potential of controlled vocabularies in reconciliation</h1>
       reconcileUrlLink.innerHTML = reconcileUrl
       result.appendChild(reconcileUrlLink)
 
+      // show number of entries
+      if (data.numOfEntries) {
+        const numOfEntries = document.createElement("p")
+        numOfEntries.innerHTML = `ℹ️ Added a dataset with ${data.numOfEntries} entries.`
+        result.appendChild(numOfEntries)
+      }
+
       // add a button to return to root page saying "Add another dataset"
       const button = document.createElement("button")
       button.setAttribute("class", "btn")
@@ -197,6 +256,10 @@ <h1>Unleash the full potential of controlled vocabularies in reconciliation</h1>
       })
       result.appendChild(button)
 
+      // add a notice that the service is currently in alpha
+      const notice = document.createElement("p")
+      notice.innerHTML = "⚠️ Note: This service is currently in Alpha and may go offline or uploaded data might get lost."
+      result.appendChild(notice)
     }
   }
 

src/index.js

@@ -5,7 +5,9 @@ import { publishToReconciliation } from "./publishToReconciliation/index.js";
 import { config } from "./config.js";
 
 const app = express();
-
+// Serve static files from the public directory
+app.set('view engine', 'ejs');
+app.set('views', './public');
 // check if uploads directory exists and create it if not
 if (!fs.existsSync("uploads")) {
   fs.mkdirSync("uploads");
@@ -31,7 +33,10 @@ const upload = multer({ storage: storage, });
 app.use(express.static("public"));
 
 app.get("/", (req, res) => {
-  res.sendFile("index.html");
+  const data = {
+    reconcileUrl: config.reconcile_service_url
+  }
+  res.render("index", { data });
 });
 
 app.post(

src/publishToReconciliation/buildJSON.js

@@ -13,7 +13,8 @@ export const buildJSON = async (ttlString, account) => {
   const compacted = await jsonld.compact(expanded, context);
   // TODO get all available languages and store them as attribute for Concept Scheme
   let entries = [];
-  let dataset = "";
+  const dataset = compacted["@graph"].find(g => g.type === "ConceptScheme").id;
+  console.log("found dataset", dataset)
 
   compacted["@graph"].forEach((graph, _) => {
     const { ...properties } = graph;
@@ -68,7 +69,6 @@ export const buildJSON = async (ttlString, account) => {
     };
 
     if (node.type === "ConceptScheme") {
-      dataset = node.id;
       if (node?.preferredNamespaceUri === undefined) {
         throw new NoPrefNamespaceUriError(
           `ConceptScheme ${node.id} does not have a preferredNamespaceUri`
@@ -82,17 +82,8 @@ export const buildJSON = async (ttlString, account) => {
       if (node.topConceptOf) {
         node.inScheme = node.topConceptOf;
       }
-      try {
-
-        dataset = node?.inScheme?.[0]?.id ?? node.topConceptOf[0].id;
-      }
-      catch (e) {
-        console.error(e)
-        console.error(node)
-      }
     }
 
-
     node["dataset"] = dataset;
     node["account"] = account;
 

src/publishToReconciliation/handleData.js

@@ -59,6 +59,7 @@ export const parseFile = async (reconcileData, log) => {
     log.status = "processing";
     log.account = account;
     log.dataset = j.dataset;
+    log.numOfEntries = j.entries.length;
     writeLog(log);
     data.push({ account: j.account, dataset: j.dataset, entries: j.entries });
     return data;