Merge pull request #3 from i-VRESSE/merge-analysis-components

Move components from @i-vresse/haddock3-analysis-components to here

.github/workflows/test.yml

@@ -37,18 +37,3 @@ jobs:
         with:
           files: ./coverage/clover.xml
           use_oidc: true
-      - name: Build docs
-        run: pnpm run docs
-      - name: Test stories
-        run: |
-          # Run the preview server in the background
-          pnpm preview &
-          sleep 3
-          pnpm playwright test stories/snapshot.spec.ts
-      - name: Upload test results
-        uses: actions/upload-artifact@v4
-        if: ${{ failure() }}
-        with:
-          name: test-results
-          path: test-results
-          if-no-files-found: ignore

.ladle/index.css

@@ -1,3 +1,62 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+@layer base {
+    :root {
+      --background: 0 0% 100%;
+      --foreground: 0 0% 3.9%;
+      --card: 0 0% 100%;
+      --card-foreground: 0 0% 3.9%;
+      --popover: 0 0% 100%;
+      --popover-foreground: 0 0% 3.9%;
+      --primary: 0 0% 9%;
+      --primary-foreground: 0 0% 98%;
+      --secondary: 0 0% 96.1%;
+      --secondary-foreground: 0 0% 9%;
+      --muted: 0 0% 96.1%;
+      --muted-foreground: 0 0% 45.1%;
+      --accent: 0 0% 96.1%;
+      --accent-foreground: 0 0% 9%;
+      --destructive: 0 84.2% 60.2%;
+      --destructive-foreground: 0 0% 98%;
+      --border: 0 0% 89.8%;
+      --input: 0 0% 89.8%;
+      --ring: 0 0% 3.9%;
+      --radius: 0.3rem;
+      --chart-1: 12 76% 61%;
+      --chart-2: 173 58% 39%;
+      --chart-3: 197 37% 24%;
+      --chart-4: 43 74% 66%;
+      --chart-5: 27 87% 67%;
+    }
+
+    .dark {
+      --background: 0 0% 3.9%;
+      --foreground: 0 0% 98%;
+      --card: 0 0% 3.9%;
+      --card-foreground: 0 0% 98%;
+      --popover: 0 0% 3.9%;
+      --popover-foreground: 0 0% 98%;
+      --primary: 0 0% 98%;
+      --primary-foreground: 0 0% 9%;
+      --secondary: 0 0% 14.9%;
+      --secondary-foreground: 0 0% 98%;
+      --muted: 0 0% 14.9%;
+      --muted-foreground: 0 0% 63.9%;
+      --accent: 0 0% 14.9%;
+      --accent-foreground: 0 0% 98%;
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 0 0% 98%;
+      --border: 0 0% 14.9%;
+      --input: 0 0% 14.9%;
+      --ring: 0 0% 83.1%;
+      --chart-1: 220 70% 50%;
+      --chart-2: 160 60% 45%;
+      --chart-3: 30 80% 55%;
+      --chart-4: 280 65% 60%;
+      --chart-5: 340 75% 55%;
+    }
+  }
+

CONTRIBUTING.md

@@ -71,6 +71,9 @@ pnpm playwright test stories/snapshot.spec.ts
 (A new story will fail initially, but after snapshot (stories/snapshot.spec.ts-snapshots/*.png) is created it will pass.)
 (A updated component or story will fail, but after you update the snapshot it will pass.)
 
+> Note: The visual snapshots are different between machines, 
+> tests will mostly fail if not run on the same machine as where expected snapshots where made.
+
 ## Build package
 
 ```bash

README.md

@@ -36,7 +36,9 @@ export default {
 }
 ```
 
-If you are not using tailwindss, you can make css file that mimics the tailwind classes.
+If you are not using tailwindss, 
+you can make use the included css file `import "@i-vresse/haddock3-ui/dist/index.css"` 
+(based on New York neutral [shadcn/ui theme](https://ui.shadcn.com/themeshttps://ui.shadcn.com/themes)).
 
 ## Usage
 
@@ -47,3 +49,9 @@ Once component is selected
 - use sliders icon button in footer to change props when available
 
 API documentation is available at [https://i-VRESSE.github.io/haddock3-ui/api/](https://i-VRESSE.github.io/haddock3-ui/api/)
+
+### Direct in browser
+
+The components can be used directly in the browser, without your own build system.
+
+[example.html](example.html) is a simple example which uses the latest library from npm using https://esm.sh/ for libray hosting.

build.mjs

@@ -7,7 +7,12 @@ import { readFile, readdir, writeFile } from "node:fs/promises";
 const content = await readFile("package.json", "utf-8");
 const packageJson = JSON.parse(content);
 // Overwrite the "exports" field with the new configuration
-packageJson.exports = {};
+packageJson.exports = {
+  "./dist/index.css": {
+    import: "./dist/index.css",
+    require: "./dist/index.css",
+  },
+};
 for (const file of await readdir("dist", { recursive: true })) {
   if (!file.endsWith(".js")) {
     // Each *.ts? has a corresponding .js, .js.map and .d.ts file

example.html

@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Haddock3 ui component</title>
+    <link
+      href="https://esm.sh/@i-vresse/haddock3-ui/dist/index.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react",
+          "react-dom": "https://esm.sh/react-dom",
+          "@i-vresse/haddock3-ui": "https://esm.sh/@i-vresse/haddock3-ui?bundle"
+        }
+      }
+    </script>
+    <script type="module">
+      import { createRoot } from "react-dom";
+      import { createElement } from "react";
+      import { ClusterTable } from "@i-vresse/haddock3-ui/dist/table/ClusterTable";
+
+      const 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: "https://files.rcsb.org/download/2OOB.pdb.gz",
+          best2: "https://files.rcsb.org/download/2OOA.pdb.gz",
+          best3: "https://files.rcsb.org/download/2OOA.pdb.gz",
+          best4: "https://files.rcsb.org/download/2OOA.pdb.gz",
+        },
+        {
+          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: "https://files.rcsb.org/download/2OOB.pdb.gz",
+          best2: "https://files.rcsb.org/download/2OOA.pdb.gz",
+          best3: "https://files.rcsb.org/download/2OOA.pdb.gz",
+          best4: "",
+        },
+      ];
+
+      export const headers = [
+        {
+          key: "id",
+          label: "ID",
+        },
+        {
+          key: "rank",
+          label: "Rank",
+          sorted: "asc",
+        },
+        {
+          key: "n",
+          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,
+        },
+      ];
+
+      createRoot(document.getElementById("root")).render(
+        createElement(ClusterTable, { headers, clusters })
+      );
+    </script>
+  </body>
+</html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@i-vresse/haddock3-ui",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "type": "module",
   "private": false,
   "sideEffects": false,
@@ -15,7 +15,10 @@
   },
   "scripts": {
     "dev": "ladle serve",
-    "build": "tsc --project tsconfig.build.json && node build.mjs && pnpm format package.json",
+    "build": "pnpm run build:js && pnpm build:css && pnpm build:package",
+    "build:js": "tsc --project tsconfig.build.json",
+    "build:package": "node build.mjs && pnpm format package.json",
+    "build:css": "tailwindcss --content './src/**/*.{js,ts,jsx,tsx,mdx}' -i .ladle/index.css -o dist/index.css --minify",
     "typecheck": "tsc --noEmit",
     "docs:ladle": "ladle build",
     "docs:api": "typedoc",
@@ -65,12 +68,22 @@
   "module": "dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
+    "./dist/index.css": {
+      "import": "./dist/index.css",
+      "require": "./dist/index.css"
+    },
     "./CopyToClipBoardIcon": {
       "import": {
         "types": "./dist/CopyToClipBoardIcon.d.ts",
         "default": "./dist/CopyToClipBoardIcon.js"
       }
     },
+    "./DialogViewer": {
+      "import": {
+        "types": "./dist/DialogViewer.d.ts",
+        "default": "./dist/DialogViewer.js"
+      }
+    },
     "./HiddenFileInput": {
       "import": {
         "types": "./dist/HiddenFileInput.d.ts",
@@ -136,6 +149,24 @@
         "types": "./dist/toggles/variants.d.ts",
         "default": "./dist/toggles/variants.js"
       }
+    },
+    "./table/ClusterTable": {
+      "import": {
+        "types": "./dist/table/ClusterTable.d.ts",
+        "default": "./dist/table/ClusterTable.js"
+      }
+    },
+    "./table/SortableTable": {
+      "import": {
+        "types": "./dist/table/SortableTable.d.ts",
+        "default": "./dist/table/SortableTable.js"
+      }
+    },
+    "./table/StructureTable": {
+      "import": {
+        "types": "./dist/table/StructureTable.d.ts",
+        "default": "./dist/table/StructureTable.js"
+      }
     }
   },
   "packageManager": "pnpm@9.6.0",