fix and improve the lib

demo/index.html

@@ -18,6 +18,9 @@
       <h1>ro-crate2html demo page</h1>
 
     <script src='main.js' type='module'></script>
-    <div id='ro-crate-div'></div>
+    <h2>Example 1</h2>
+    <div id='ro-crate-metadata.json' data-file='ro-crate-metadata.json'></div>
+    <h2>Example 2</h2>
+    <div id='ro-crate-metadata-multi.json' data-file='ro-crate-metadata-multi.json'></div>
   </body>
 </html>

demo/main.js

@@ -6,21 +6,26 @@
  */
 import { Builder } from '../dist/main.js';
 
-const jsonLdFilePath = '../example/ro-crate-metadata.json';
-fetch(jsonLdFilePath).then((response) => {
+function displayContent(fileName) {
+  fetch(`../example/${fileName}`).then((response) => {
     if (!response.ok) {
-      throw new Error(`Failed to fetch ${jsonLdFilePath}`);
+      throw new Error(`Failed to fetch ${filePath}`);
     }
     return response.text();
   })
   .then(jsonLdData => {
     const builder = new Builder();
     const result = builder.parse(jsonLdData);
-    const targetDiv = document.getElementById('ro-crate-div');
+    const targetDiv = document.getElementById(fileName);
     result.forEach(el => {
       targetDiv.appendChild(el);
     });
   })
   .catch(error => {
     console.error(error);
   });
+}
+
+document.querySelectorAll('[data-file]').forEach(el => {
+  displayContent(el.dataset.file);
+});

example/ro-crate-metadata-multi.json

@@ -0,0 +1 @@
+{"@context":"https:\/\/w3id.org\/ro\/crate\/1.1\/context","@graph":[{"@id":"ro-crate-metadata.json","@type":"CreativeWork","about":{"@id":".\/"},"conformsTo":{"@id":"https:\/\/w3id.org\/ro\/crate\/1.1"},"dateCreated":"2023-10-09T01:33:35+02:00","sdPublisher":{"@type":"Organization","name":"eLabFTW","logo":"https:\/\/www.elabftw.net\/img\/elabftw-logo-only.svg","slogan":"A free and open source electronic lab notebook.","url":"https:\/\/www.elabftw.net","parentOrganization":{"@type":"Organization","name":"Deltablot","logo":"https:\/\/www.deltablot.com\/img\/logos\/deltablot.svg","slogan":"Open Source software for research labs.","url":"https:\/\/www.deltablot.com"}},"version":"1.0"},{"@id":".\/2025-01-02 - Testing-relationship-between-acceleration-and-gravity - 682d5979\/export-elabftw.json","@type":"File","description":"JSON export","name":"export-elabftw.json","encodingFormat":"application\/json","contentSize":"3926","sha256":"5ec38babecf0a7711d4bc619d83eeb89425fd64c16ff76d120599ab2e7ceea1a"},{"@id":".\/2025-01-02 - Testing-relationship-between-acceleration-and-gravity - 682d5979","@type":"Dataset","author":{"@id":"person:\/\/a0568e4aa35eec2cf3962db57eec039a205d3b7d7c7132388af976dfaf8f2694?hash_algo=sha256"},"dateCreated":"2023-10-09T00:28:19+02:00","dateModified":"2023-10-09T00:28:19+02:00","identifier":"20231009-682d5979187f456fd920c295b04c0fa7ead8be37","comment":[],"keywords":["has-mathjax","physics"],"name":"Testing relationship between acceleration and gravity","text":"<h1>Determination of Acceleration Due to Gravity<\/h1>\n<p>\nThe acceleration due to gravity is a fundamental constant that determines the gravitational force between two objects. In this experiment, we aimed to determine the value of acceleration due to gravity using a simple pendulum.\n<\/p>\n<h2>Experimental Design<\/h2>\n<p>\nWe suspended a metal ball from a string and measured the time taken for one complete oscillation of the pendulum. We repeated this measurement for different lengths of the pendulum and recorded the corresponding times. Using the formula $T=2\\pi\\sqrt{\\frac{L}{g}}$, where $T$ is the period of the pendulum, $L$ is the length of the pendulum, and $g$ is the acceleration due to gravity, we calculated the value of $g$. The period $T$ can also be expressed in terms of the frequency $f$ using the equation $T=\\frac{1}{f}$.\n<\/p>\n<h2>Results<\/h2>\n<p>\nThe results showed that the value of acceleration due to gravity was $9.81 \\text{ m\/s}^2$, which is consistent with the accepted value. We also found that the period of the pendulum increased with increasing length, as predicted by the formula $T=2\\pi\\sqrt{\\frac{L}{g}}$. The relationship between the length and period of the pendulum can be expressed as $T^2=\\frac{4\\pi^2}{g}L$, which is a linear relationship with a slope of $\\frac{4\\pi^2}{g}$.\n<\/p>\n","url":"https:\/\/elab.local:3148\/experiments.php?mode=view&id=262","hasPart":[{"@id":".\/2025-01-02 - Testing-relationship-between-acceleration-and-gravity - 682d5979\/export-elabftw.json"}],"mentions":[]},{"@id":".\/2025-01-02 - Effect-of-temperature-on-enzyme-activity - 45b3371a\/export-elabftw.json","@type":"File","description":"JSON export","name":"export-elabftw.json","encodingFormat":"application\/json","contentSize":"5633","sha256":"95f8732add59faf81dc09467af78eb7c5ce7669963054edab1b583a0aac5bf11"},{"@id":".\/2025-01-02 - Effect-of-temperature-on-enzyme-activity - 45b3371a","@type":"Dataset","author":{"@id":"person:\/\/d89f16b544a9804631afbfd97813427249dfb7ea3c1f124e71ec0f8134bd2604?hash_algo=sha256"},"dateCreated":"2023-10-09T00:28:19+02:00","dateModified":"2023-10-09T00:28:19+02:00","identifier":"20231009-45b3371ad503edf47b228e23af07dfdc8ae98546","comment":[],"keywords":["enzymology","test","Project ENZYTEMP"],"name":"Effect of temperature on enzyme activity","text":"<h1>Effect of Temperature on Enzyme Activity<\/h1>\n<p>\nEnzymes are biological molecules that catalyze chemical reactions in living organisms. In this experiment, we investigated the effect of temperature on the activity of the enzyme amylase, which catalyzes the hydrolysis of starch into glucose.\n<\/p>\n<h2>Experimental Design<\/h2>\n<p>\nWe prepared a solution of starch and added a small amount of amylase to the solution. We then incubated the solution at different temperatures, ranging from 4\u00b0C to 70\u00b0C, for 5 minutes. After the incubation period, we added iodine to the solution to detect the presence of starch. The disappearance of the blue-black color of the iodine indicated the breakdown of starch into glucose.\n<\/p>\n<h2>Results<\/h2>\n<p>\nThe results showed that the activity of amylase increased with increasing temperature up to 37\u00b0C, which is the optimum temperature for amylase activity. At temperatures above 37\u00b0C, the activity of amylase decreased rapidly, and at 70\u00b0C, the enzyme was completely denatured and lost its catalytic activity.\n<\/p>\n<p>\nThe relationship between temperature and enzyme activity can be described by the Arrhenius equation, which relates the rate constant of a reaction to the activation energy and temperature. The equation can be written as:\n<\/p>\n<p>\n$$k = Ae^{-E_a\/RT}$$\n<\/p>\n<p>\nwhere k is the rate constant, A is the pre-exponential factor, E_a is the activation energy, R is the gas constant, and T is the absolute temperature. The activation energy is the energy required to break the bonds in the reactants and form the products. The rate constant increases with increasing temperature due to the increase in the number of reactant molecules with sufficient kinetic energy to overcome the activation energy barrier.\n<\/p>\n<p>\nThe effect of temperature on enzyme activity can also be described by the Q10 value, which is the ratio of the reaction rate at a given temperature to the reaction rate at a temperature 10\u00b0C lower. The Q10 value for most enzyme-catalyzed reactions is around 2-3, indicating that the reaction rate doubles or triples with each 10\u00b0C increase in temperature.\n<\/p>\n","url":"https:\/\/elab.local:3148\/experiments.php?mode=view&id=261","hasPart":[{"@id":".\/2025-01-02 - Effect-of-temperature-on-enzyme-activity - 45b3371a\/export-elabftw.json"}],"mentions":[]},{"@id":".\/","@type":["Dataset"],"hasPart":[{"@id":".\/2025-01-02 - Testing-relationship-between-acceleration-and-gravity - 682d5979"},{"@id":".\/2025-01-02 - Effect-of-temperature-on-enzyme-activity - 45b3371a"}]},{"@id":"person:\/\/a0568e4aa35eec2cf3962db57eec039a205d3b7d7c7132388af976dfaf8f2694?hash_algo=sha256","@type":"Person","familyName":"Le sysadmin","givenName":"Toto"},{"@id":"person:\/\/d89f16b544a9804631afbfd97813427249dfb7ea3c1f124e71ec0f8134bd2604?hash_algo=sha256","@type":"Person","familyName":"Kilback","givenName":"Afton"}]}

src/main.ts

@@ -8,6 +8,10 @@
 export class Builder {
   input: object;
 
+  _isResolvableLocally(targetId: string): boolean {
+    return (typeof this._findById(targetId)) !== 'undefined';
+  }
+
   _findById(targetId: string): object {
     const graph = this.input['@graph'];
     if (typeof graph === 'undefined') {
@@ -49,11 +53,37 @@ export class Builder {
 
   _obj2html(node: object): HTMLUListElement {
     const list = document.createElement('ul');
+    if (typeof node === 'undefined') {
+      console.error('Could not find node!');
+      return list;
+    }
     for (const [key, value] of Object.entries(node)) {
       if (typeof value === 'string') {
         list.appendChild(this._string2li(key, value));
         continue;
       }
+      if (['author', 'comment', 'mentions', 'hasPart'].includes(key)) {
+        const details = document.createElement('details');
+        const summary = document.createElement('summary');
+        summary.textContent = key;
+        details.appendChild(summary);
+        list.appendChild(details);
+
+        if (Array.isArray(value)) {
+          value.forEach(part => {
+            const subdetails = document.createElement('details');
+            const subsummary = document.createElement('summary');
+            subsummary.textContent = part['@id'];
+            subdetails.appendChild(subsummary);
+            subdetails.appendChild(this._obj2html(this._findById(part['@id'])));
+            details.appendChild(subdetails);
+          });
+          continue;
+        } else {
+          details.appendChild(this._obj2html(this._findById(value['@id'])));
+        }
+        continue;
+      }
       if (Array.isArray(value)) {
         value.forEach(part => {
           if (typeof part === 'string') {

tsconfig.json

@@ -4,6 +4,7 @@
     "module": "es6",
     "removeComments": true,
     "declaration": true,
+    "lib": ["es2017", "dom"],
     "sourceMap": true,
     "target": "ES6",
     "moduleResolution": "node"