i-VRESSE · sverhoeven · Sep 20, 2024 · Sep 18, 2024 · Sep 19, 2024 · Sep 19, 2024
diff --git a/.gitignore b/.gitignore
@@ -29,4 +29,7 @@ i-vresse-haddock3-ui-*.tgz
 
 # Test
 coverage
-test-results/
+test-results/
+
+# Embedded example is 1.4Mb
+example-embedded.html
diff --git a/README.md b/README.md
@@ -57,5 +57,25 @@ API documentation is available at [https://i-VRESSE.github.io/haddock3-ui/api/](
 
 The components can be used directly in the browser, without your own build system.
 
-[example.html](example.html) is a clustered table example which uses the latest library from npm using https://esm.sh/ for libray hosting.
+[example.html](example.html) is a clustered table example which uses the latest package version from npm via https://esm.sh/.
 [example-molviewer.html](example-molviewer.html) is a simple molecule viewer example.
+
+### Offline bundle
+
+The table components are used by the caprieval module of haddock3 to generate report.html. 
+Haddock3 can be used [offline](https://www.bonvinlab.org/haddock3/modules/general_module_params.html#offline), 
+which means after installation the running of haddock3 will be isolated from the Internet.
+
+To use the table components offline, you can build an offline bundle of the components with
+
+```bash
+# Installs dependencies
+pnpm install
+# Create dist/index.css and dist/report.bundle.js,
+# which contains the table components and all of its dependencies
+pnpm build
+```
+
+See [example-offline.html](example-offline.html) for an example of how to use the offline version.
+
+To prevent CORS issues, the html, css and js files should be served from the same http server like with `python3 -m http.server` and visit http://localhost:8000/example-offline.html.
diff --git a/build.mjs b/build.mjs
@@ -24,7 +24,10 @@ for (const file of await readdir("dist", { recursive: true })) {
   }
   const jsfn = "./dist/" + file;
   // Each .js file has a corresponding .d.ts file
-  const types = jsfn.replace(/\.js$/, ".d.ts");
+  let types = jsfn.replace(/\.js$/, ".d.ts");
+  if (types === "./dist/report.bundle.d.ts") {
+    types = "./dist/report.d.ts";
+  }
   packageJson.exports[key] = {
     import: {
       types,

diff --git a/example-offline.html b/example-offline.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Haddock3 ui components - ClusterTable example</title>
+    <link
+      href="./dist/index.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script id="datatable2" type="application/json">
+      {
+        "clusters": [
+          {
+            "rank": 1,
+            "id": 1,
+            "size": 5,
+            "score": { "mean": -5.86, "std": 1.54 },
+            "irmsd": { "mean": 1.81, "std": 0.53 },
+            "fnat": { "mean": 0.57, "std": 0.24 },
+            "lrmsd": { "mean": 5.07, "std": 2.25 },
+            "dockq": { "mean": 0.58, "std": 0.18 },
+            "air": { "mean": 847.55, "std": 208.47 },
+            "desolv": { "mean": 11.67, "std": 3.46 },
+            "elec": { "mean": -9.69, "std": 3.32 },
+            "vdw": { "mean": -2.98, "std": 9.17 },
+            "ilrmsd": { "mean": -2.98, "std": 9.17 },
+            "bsa": { "mean": -2.98, "std": 9.17 },
+            "best1": "stories/assets/2oob.pdb",
+            "best2": "stories/assets/4o8j.pdb",
+            "best3": "stories/assets/target.pdb",
+            "best4": "stories/assets/2oob.pdb"
+          },
+          {
+            "rank": 2,
+            "id": 2,
+            "size": 10,
+            "score": { "mean": -6.12, "std": 1.23 },
+            "irmsd": { "mean": 1.23, "std": 0.57 },
+            "fnat": { "mean": 0.46, "std": 0.79 },
+            "lrmsd": { "mean": 4.32, "std": 2.35 },
+            "dockq": { "mean": 0.99, "std": 0.65 },
+            "air": { "mean": 765.43, "std": 321.1 },
+            "desolv": { "mean": 9.88, "std": 5.43 },
+            "elec": { "mean": -8.77, "std": 4.32 },
+            "vdw": { "mean": -1.23, "std": 8.77 },
+            "ilrmsd": { "mean": -1.34, "std": 0 },
+            "bsa": { "mean": -2.978, "std": 0 },
+            "best1": "stories/assets/2oob.pdb",
+            "best2": "stories/assets/4o8j.pdb",
+            "best3": "stories/assets/target.pdb",
+            "best4": ""
+          }
+        ],
+        "headers": [
+          { "key": "id", "label": "ID" },
+          { "key": "rank", "label": "Rank", "sorted": "asc" },
+          { "key": "size", "label": "Size" },
+          { "key": "score", "label": "HADDOCK score [a.u.]", "type": "stats" },
+          { "key": "vdw", "label": "Van der Waals Energy", "type": "stats" },
+          { "key": "elec", "label": "Electrostatic Energy", "type": "stats" },
+          { "key": "air", "label": "Restraints Energy", "type": "stats" },
+          { "key": "desolv", "label": "Desolvation Energy", "type": "stats" },
+          { "key": "irmsd", "label": "interface RMSD [A]", "type": "stats" },
+          { "key": "lrmsd", "label": "ligand RMSD [A]", "type": "stats" },
+          { "key": "ilrmsd", "label": "interface-ligand RMSD [A]", "type": "stats" },
+          { "key": "fnat", "label": "Fraction of Common Contacts", "type": "stats" },
+          { "key": "dockq", "label": "DOCKQ", "type": "stats" },
+          { "key": "bsa", "label": "Buried Surface Area [A^2]", "type": "stats" },
+          {
+            "key": "best1",
+            "label": "Nr 01 best structure",
+            "type": "structure",
+            "sortable": false
+          },
+          {
+            "key": "best2",
+            "label": "Nr 02 best structure",
+            "type": "structure",
+            "sortable": false
+          },
+          {
+            "key": "best3",
+            "label": "Nr 03 best structure",
+            "type": "structure",
+            "sortable": false
+          },
+          {
+            "key": "best4",
+            "label": "Nr 04 best structure",
+            "type": "structure",
+            "sortable": false
+          }
+        ]
+      }  
+    </script>
+    <script type="module">
+      import{ renderClusterTable } from "./dist/report.bundle.js";
+      const props = JSON.parse(document.getElementById("datatable2").text)
+      renderClusterTable(document.getElementById("root"), props.headers, props.clusters);
+    </script>
+  </body>
+</html>