@i-vresse/haddock3-ui 0.1.4 → 0.1.6

package/README.md

@@ -1,13 +1,18 @@
 # React components for/from haddock3 webapp
 
 [![github repo badge](https://img.shields.io/badge/github-repo-000.svg?logo=github&labelColor=gray&color=blue)]([https://github.com/i-VRESSE/haddock3-ui](https://github.com/i-VRESSE/haddock3-ui))
-[![Lint](https://github.com/i-VRESSE/haddock3-ui/actions/workflows/lint.yml/badge.svg)](https://github.com/i-VRESSE/haddock3-ui/actions/workflows/lint.yml)
+[![npmjs.com](https://img.shields.io/npm/v/@i-vresse/haddock3-ui.svg?style=flat)](https://www.npmjs.com/package/@i-vresse/haddock3-ui)
+[![CI](https://github.com/i-VRESSE/haddock3-ui/actions/workflows/lint.yml/badge.svg)](https://github.com/i-VRESSE/haddock3-ui/actions/workflows/lint.yml)
 [![DOI](https://zenodo.org/badge/DOI/10.5281/zenodo.12820670.svg)](https://doi.org/10.5281/zenodo.12820670)
+[![Research Software Directory Badge](https://img.shields.io/badge/rsd-00a3e3.svg)](https://research-software-directory.org/software/haddock3-ui)
+[![fair-software.eu](https://img.shields.io/badge/fair--software.eu-%E2%97%8F%20%20%E2%97%8F%20%20%E2%97%8F%20%20%E2%97%8F%20%20%E2%97%8B-yellow)](https://fair-software.eu)
+[![Checked with Biome](https://img.shields.io/badge/Checked_with-Biome-60a5fa?style=flat&logo=biome)](https://biomejs.dev)
 
 The [haddock3 web application](https://github.com/i-VRESSE/haddock3-webapp) had several components that could be used outside of the web application. This package contains those components.
 
 - Components to render a 3D molecular structure from [PDB file](https://www.wwpdb.org/) using [NGL](https://nglviewer.org/)
 - Components to select residues in a molecule either passive or active
+- Components to handle files
 
 ## Installation
 
@@ -23,7 +28,7 @@ For your own webapp to pick up the classes in the components, you need to add th
 export default {
   content: [
     // Existing content goes here
-    './node_modules/@i-vresse/haddock3-ui/dist/index.js',
+    './node_modules/@i-vresse/haddock3-ui/dist/**/*.js',
   ],
   // Rest of the config goes here
 }
@@ -38,3 +43,5 @@ Once component is selected
 - interact with component
 - use `</>` button in footer to see the code.
 - 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/)

package/dist/{src/CopyToClipBoardIcon.d.ts → CopyToClipBoardIcon.d.ts}

@@ -1 +1,2 @@
 export declare function CopyToClipBoardIcon(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CopyToClipBoardIcon.d.ts.map

package/dist/CopyToClipBoardIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyToClipBoardIcon.d.ts","sourceRoot":"","sources":["../src/CopyToClipBoardIcon.tsx"],"names":[],"mappings":"AAAA,wBAAgB,mBAAmB,4CAiBlC"}

package/dist/CopyToClipBoardIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CopyToClipBoardIcon() {
+    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.746.07A.5.5 0 0011.5.003h-6a.5.5 0 00-.5.5v2.5H.5a.5.5 0 00-.5.5v10a.5.5 0 00.5.5h8a.5.5 0 00.5-.5v-2.5h4.5a.5.5 0 00.5-.5v-8a.498.498 0 00-.15-.357L11.857.154a.506.506 0 00-.11-.085zM9 10.003h4v-7h-1.5a.5.5 0 01-.5-.5v-1.5H6v2h.5a.5.5 0 01.357.15L8.85 5.147c.093.09.15.217.15.357v4.5zm-8-6v9h7v-7H6.5a.5.5 0 01-.5-.5v-1.5H1z", fill: "currentColor" }) }));
+}
+//# sourceMappingURL=CopyToClipBoardIcon.js.map

package/dist/CopyToClipBoardIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyToClipBoardIcon.js","sourceRoot":"","sources":["../src/CopyToClipBoardIcon.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,mBAAmB;IAClC,OAAO,CACN,cACC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,YAElC,eACC,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,2UAA2U,EAC7U,IAAI,EAAC,cAAc,GACZ,GACH,CACN,CAAC;AACH,CAAC"}

package/dist/Hetero.d.ts

@@ -0,0 +1,17 @@
+export interface Hetero {
+    resno: number;
+    resname: string;
+    chain: string;
+    /**
+     * HETNAME record value from the PDB file.
+     */
+    description?: string;
+}
+/**
+ * Retrieve hetero residues from a PDB file.
+ *
+ * @param file PDB file to read from
+ * @returns
+ */
+export declare function heterosFromFile(file: File): Promise<Hetero[]>;
+//# sourceMappingURL=Hetero.d.ts.map

package/dist/Hetero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hetero.d.ts","sourceRoot":"","sources":["../src/Hetero.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,MAAM;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAsB,eAAe,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CA0BnE"}

package/dist/Hetero.js

@@ -0,0 +1,36 @@
+import { autoLoad } from "ngl";
+/**
+ * Retrieve hetero residues from a PDB file.
+ *
+ * @param file PDB file to read from
+ * @returns
+ */
+export async function heterosFromFile(file) {
+    const structure = await autoLoad(file);
+    const heteros = [];
+    structure.eachResidue((r) => {
+        if (r.isHetero() && !r.isWater() && !r.isIon()) {
+            const hetero = {
+                resno: r.resno,
+                resname: r.resname,
+                chain: r.chain.chainname,
+            };
+            if (r.entity) {
+                hetero.description = r.entity.description;
+            }
+            heteros.push(hetero);
+        }
+    });
+    heteros.sort((a, b) => {
+        if (a.resname !== b.resname) {
+            return a.resname.localeCompare(b.resname);
+        }
+        if (a.chain !== b.chain) {
+            return a.chain.localeCompare(b.chain);
+        }
+        return a.resno - b.resno;
+    });
+    return heteros;
+}
+// TODO write e2e test. Unit test not possible because ngl does not work in nodejs.
+//# sourceMappingURL=Hetero.js.map

package/dist/Hetero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hetero.js","sourceRoot":"","sources":["../src/Hetero.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,QAAQ,EAAE,MAAM,KAAK,CAAC;AAY/C;;;;;GAKG;AACH,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,IAAU;IAC/C,MAAM,SAAS,GAAc,MAAM,QAAQ,CAAC,IAAI,CAAC,CAAC;IAClD,MAAM,OAAO,GAAa,EAAE,CAAC;IAC7B,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE;QAC3B,IAAI,CAAC,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC;YAChD,MAAM,MAAM,GAAW;gBACtB,KAAK,EAAE,CAAC,CAAC,KAAK;gBACd,OAAO,EAAE,CAAC,CAAC,OAAO;gBAClB,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS;aACxB,CAAC;YACF,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC;gBACd,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC;YAC3C,CAAC;YACD,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtB,CAAC;IACF,CAAC,CAAC,CAAC;IACH,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACrB,IAAI,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC;YAC7B,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAC3C,CAAC;QACD,IAAI,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;YACzB,OAAO,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QACvC,CAAC;QACD,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;IAC1B,CAAC,CAAC,CAAC;IACH,OAAO,OAAO,CAAC;AAChB,CAAC;AACD,mFAAmF"}

package/dist/HiddenFileInput.d.ts

@@ -0,0 +1,5 @@
+export declare function HiddenFileInput({ name, file }: {
+    name: string;
+    file: File;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HiddenFileInput.d.ts.map

package/dist/HiddenFileInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HiddenFileInput.d.ts","sourceRoot":"","sources":["../src/HiddenFileInput.tsx"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,2CAY3E"}

package/dist/HiddenFileInput.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+export function HiddenFileInput({ name, file }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current) {
+            const dataTransfer = new DataTransfer();
+            dataTransfer.items.add(file);
+            ref.current.files = dataTransfer.files;
+        }
+    }, [file]);
+    return _jsx("input", { ref: ref, type: "file", name: name, className: "hidden" });
+}
+//# sourceMappingURL=HiddenFileInput.js.map

package/dist/HiddenFileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HiddenFileInput.js","sourceRoot":"","sources":["../src/HiddenFileInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,UAAU,eAAe,CAAC,EAAE,IAAI,EAAE,IAAI,EAAgC;IAC3E,MAAM,GAAG,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE3C,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,YAAY,GAAG,IAAI,YAAY,EAAE,CAAC;YACxC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAC7B,GAAG,CAAC,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;QACxC,CAAC;IACF,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,gBAAO,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,QAAQ,GAAG,CAAC;AACvE,CAAC"}

package/dist/LinkToFile.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+export declare function LinkToFile({ file, children, className, }: {
+    file: File;
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LinkToFile.d.ts.map

package/dist/LinkToFile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkToFile.d.ts","sourceRoot":"","sources":["../src/LinkToFile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAK5D,wBAAgB,UAAU,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,SAAqB,GACrB,EAAE;IACF,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,2CAmBA"}

package/dist/LinkToFile.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cn } from "./cn.js";
+// TODO allow other a tag attributes like title or target to be passed in
+export function LinkToFile({ file, children, className = undefined, }) {
+    const [url, setUrl] = useState("#");
+    useEffect(() => {
+        const url = URL.createObjectURL(file);
+        setUrl(url);
+        return () => URL.revokeObjectURL(url);
+    }, [file]);
+    return (_jsx("a", { className: cn("underline", className), download: file.name, href: url, type: file.type, children: children }));
+}
+//# sourceMappingURL=LinkToFile.js.map

package/dist/LinkToFile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkToFile.js","sourceRoot":"","sources":["../src/LinkToFile.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAE7B,yEAAyE;AAEzE,MAAM,UAAU,UAAU,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,SAAS,GAAG,SAAS,GAKrB;IACA,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QACtC,MAAM,CAAC,GAAG,CAAC,CAAC;QACZ,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACN,YACC,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,EACrC,QAAQ,EAAE,IAAI,CAAC,IAAI,EACnB,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,IAAI,CAAC,IAAI,YAEd,QAAQ,GACN,CACJ,CAAC;AACH,CAAC"}

package/dist/cn.d.ts

@@ -0,0 +1,12 @@
+import { type ClassValue } from "clsx";
+/**
+ * Smartly combines multiple tailwind class names into a single string.
+ *
+ * @see https://github.com/lukeed/clsx
+ * @see https://github.com/dcastil/tailwind-merge
+ *
+ * @param inputs - The class names to be combined.
+ * @returns The combined class names as a string.
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../src/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAC;AAG7C;;;;;;;;GAQG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD"}

package/dist/cn.js

@@ -0,0 +1,15 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+/**
+ * Smartly combines multiple tailwind class names into a single string.
+ *
+ * @see https://github.com/lukeed/clsx
+ * @see https://github.com/dcastil/tailwind-merge
+ *
+ * @param inputs - The class names to be combined.
+ * @returns The combined class names as a string.
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+//# sourceMappingURL=cn.js.map

package/dist/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","sourceRoot":"","sources":["../src/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,IAAI,EAAE,MAAM,MAAM,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC;;;;;;;;GAQG;AACH,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACzC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AAC9B,CAAC"}

package/dist/getResName1.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Retrieves the character for a given residue name.
+ *
+ * Besides amino acids, this function also
+ * supports charm forcefield, amber forcefield,
+ * DNA nucleotides and RNA nucleotides.
+ *
+ * @param resname - The residue name to retrieve the abbreviated name for.
+ * @returns The abbreviated name for the given resource name, or "X" if no abbreviation is found.
+ *
+ * @example
+ * ```ts
+ * import { getResName1 } from "@i-vresse/haddock3-ui/getResName1";
+ * getResName1("ALA"); // "A"
+ * getResName1("DA"); // "A"
+ * getResName1("A"); // "A"
+ * getResName1("UNK"); // "X"
+ * ```
+ */
+export declare function getResName1(resname: string): "H" | "R" | "K" | "I" | "F" | "L" | "W" | "A" | "M" | "P" | "C" | "N" | "V" | "G" | "S" | "Q" | "Y" | "D" | "E" | "T" | "U" | "O";
+//# sourceMappingURL=getResName1.d.ts.map

package/dist/getResName1.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getResName1.d.ts","sourceRoot":"","sources":["../src/getResName1.ts"],"names":[],"mappings":"AA2DA;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,qIAE1C"}

package/dist/getResName1.js

@@ -0,0 +1,78 @@
+/*
+ * NGL does not have single letter for DNA or RNA, but molstar does.
+ * Use molstar implementation from
+ * https://github.com/molstar/molstar/blob/5a2ee03b48e1822c8843d65eb18d578af0579b9f/src/mol-model/sequence/constants.ts#L18-L85
+ */
+const Name2OneLetter = {
+    HIS: "H",
+    ARG: "R",
+    LYS: "K",
+    ILE: "I",
+    PHE: "F",
+    LEU: "L",
+    TRP: "W",
+    ALA: "A",
+    MET: "M",
+    PRO: "P",
+    CYS: "C",
+    ASN: "N",
+    VAL: "V",
+    GLY: "G",
+    SER: "S",
+    GLN: "Q",
+    TYR: "Y",
+    ASP: "D",
+    GLU: "E",
+    THR: "T",
+    SEC: "U", // as per IUPAC definition
+    PYL: "O", // as per IUPAC definition
+    // charmm ff
+    HSD: "H",
+    HSE: "H",
+    HSP: "H",
+    LSN: "K",
+    ASPP: "D",
+    GLUP: "E",
+    // amber ff
+    HID: "H",
+    HIE: "H",
+    HIP: "H",
+    LYN: "K",
+    ASH: "D",
+    GLH: "E",
+    // DNA
+    DA: "A",
+    DC: "C",
+    DG: "G",
+    DT: "T",
+    DU: "U",
+    // RNA
+    A: "A",
+    C: "C",
+    G: "G",
+    T: "T",
+    U: "U",
+};
+/**
+ * Retrieves the character for a given residue name.
+ *
+ * Besides amino acids, this function also
+ * supports charm forcefield, amber forcefield,
+ * DNA nucleotides and RNA nucleotides.
+ *
+ * @param resname - The residue name to retrieve the abbreviated name for.
+ * @returns The abbreviated name for the given resource name, or "X" if no abbreviation is found.
+ *
+ * @example
+ * ```ts
+ * import { getResName1 } from "@i-vresse/haddock3-ui/getResName1";
+ * getResName1("ALA"); // "A"
+ * getResName1("DA"); // "A"
+ * getResName1("A"); // "A"
+ * getResName1("UNK"); // "X"
+ * ```
+ */
+export function getResName1(resname) {
+    return Name2OneLetter[resname] || "X";
+}
+//# sourceMappingURL=getResName1.js.map

package/dist/getResName1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getResName1.js","sourceRoot":"","sources":["../src/getResName1.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,cAAc,GAAG;IACtB,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IAER,GAAG,EAAE,GAAG,EAAE,0BAA0B;IACpC,GAAG,EAAE,GAAG,EAAE,0BAA0B;IAEpC,YAAY;IACZ,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IAET,WAAW;IACX,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,MAAM;IACN,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,MAAM;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;CACG,CAAC;AAEX;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,WAAW,CAAC,OAAe;IAC1C,OAAO,cAAc,CAAC,OAAsC,CAAC,IAAI,GAAG,CAAC;AACtE,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { NGLComponent, NGLResidues, NGLStage, SimpleViewer, LigandViewer, Viewer, } from "./molviewer.js";
+export { PickIn3D, ResiduesSelect } from "./toggles.js";
+export { CopyToClipBoardIcon } from "./CopyToClipBoardIcon.js";
+export { LinkToFile } from "./LinkToFile.js";
+export { HiddenFileInput } from "./HiddenFileInput.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,MAAM,GACN,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -1,36 +1,9 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { clsx as a } from "clsx";
-import { twMerge as s } from "tailwind-merge";
-function c(...e) {
-  return s(a(e));
-}
-const d = {
-  act: "bg-green-100 dark:bg-green-700",
-  pass: "bg-yellow-100 dark:bg-yellow-700",
-  highlight: "bg-secondary dark:bg-secondary-foreground",
-  "": "bg-inherit dark:bg-inherit"
-};
-function m({
-  showActive: e,
-  showPassive: i
-}) {
-  return /* @__PURE__ */ n("div", { children: [
-    /* @__PURE__ */ r("p", { className: "text-[0.5rem]", children: " " }),
-    /* @__PURE__ */ n("div", { className: "inline-block text-start font-mono", children: [
-      /* @__PURE__ */ r("div", { title: "Sequence", children: "       " }),
-      e && /* @__PURE__ */ r(t, { variant: "act", label: "Active" }),
-      i && /* @__PURE__ */ r(t, { variant: "pass", label: "Passive" })
-    ] })
-  ] });
-}
-function t({
-  variant: e,
-  label: i
-}) {
-  return /* @__PURE__ */ r("div", { className: c("pr-1", d[e]), children: i });
-}
-export {
-  m as ResiduesHeader,
-  d as residueVariants
-};
-//# sourceMappingURL=index.js.map
+export { NGLComponent, NGLResidues, NGLStage, SimpleViewer, LigandViewer, Viewer, } from "./molviewer.js";
+export { PickIn3D, ResiduesSelect } from "./toggles.js";
+export { CopyToClipBoardIcon } from "./CopyToClipBoardIcon.js";
+export { LinkToFile } from "./LinkToFile.js";
+export { HiddenFileInput } from "./HiddenFileInput.js";
+// Other components and types can be imported using
+// for example
+// import { useChunked } from "@i-vresse/haddock3-ui/useChunked"
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/cn.ts","../src/toggles/variants.ts","../src/toggles/ResidueHeader.tsx"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","export type Variant = \"act\" | \"pass\" | \"highlight\" | \"\";\n\nexport const residueVariants: Record<Variant, string> = {\n  act: \"bg-green-100 dark:bg-green-700\",\n  pass: \"bg-yellow-100 dark:bg-yellow-700\",\n  highlight: \"bg-secondary dark:bg-secondary-foreground\",\n  \"\": \"bg-inherit dark:bg-inherit\",\n};","import { cn } from \"../cn\";\nimport { residueVariants, Variant } from \"./variants\";\n\nexport function ResiduesHeader({\n    showActive,\n    showPassive,\n  }: {\n    showActive: boolean;\n    showPassive: boolean;\n  }) {\n    return (\n      <div>\n        <p className=\"text-[0.5rem]\">&nbsp;</p>\n        <div className=\"inline-block text-start font-mono\">\n          <div title=\"Sequence\">\n            {/* use non breaking whitespace to prevent layout shifts */}\n            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n          </div>\n          {showActive && <ResidueHeaderItem variant=\"act\" label=\"Active\" />}\n          {showPassive && <ResidueHeaderItem variant=\"pass\" label=\"Passive\" />}\n        </div>\n      </div>\n    );\n  }\n  \n  export function ResidueHeaderItem({\n    variant,\n    label,\n  }: {\n    variant: Variant;\n    label: string;\n  }) {\n    return <div className={cn(\"pr-1\", residueVariants[variant])}>{label}</div>;\n  }\n  "],"names":["cn","inputs","twMerge","clsx","residueVariants","ResiduesHeader","showActive","showPassive","jsx","jsxs","ResidueHeaderItem","variant","label"],"mappings":";;;AAGO,SAASA,KAAMC,GAAsB;AACnC,SAAAC,EAAQC,EAAKF,CAAM,CAAC;AAC7B;ACHO,MAAMG,IAA2C;AAAA,EACtD,KAAK;AAAA,EACL,MAAM;AAAA,EACN,WAAW;AAAA,EACX,IAAI;AACN;ACJO,SAASC,EAAe;AAAA,EAC3B,YAAAC;AAAA,EACA,aAAAC;AACF,GAGG;AACD,2BACG,OACC,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAA,KAAA,EAAE,WAAU,iBAAgB,UAAM,KAAA;AAAA,IACnC,gBAAAC,EAAC,OAAI,EAAA,WAAU,qCACb,UAAA;AAAA,MAAC,gBAAAD,EAAA,OAAA,EAAI,OAAM,YACmD,UAE9D,WAAA;AAAA,MACCF,KAAe,gBAAAE,EAAAE,GAAA,EAAkB,SAAQ,OAAM,OAAM,UAAS;AAAA,MAC9DH,KAAgB,gBAAAC,EAAAE,GAAA,EAAkB,SAAQ,QAAO,OAAM,WAAU;AAAA,IAAA,GACpE;AAAA,EACF,EAAA,CAAA;AAEJ;AAEO,SAASA,EAAkB;AAAA,EAChC,SAAAC;AAAA,EACA,OAAAC;AACF,GAGG;AACM,SAAA,gBAAAJ,EAAC,SAAI,WAAWR,EAAG,QAAQI,EAAgBO,CAAO,CAAC,GAAI,UAAMC,EAAA,CAAA;AACtE;"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,MAAM,GACN,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,mDAAmD;AACnD,cAAc;AACd,gEAAgE"}

package/dist/{src/molviewer.d.ts → molviewer.d.ts}

@@ -1,6 +1,29 @@
-import { ReactNode, Component as ReactComponent, ErrorInfo } from 'react';
-import { StructureComponent, StructureRepresentationType } from 'ngl';
-
+import { Stage, StructureComponent, type StructureRepresentationType } from "ngl";
+import { type ErrorInfo, Component as ReactComponent, type ReactNode } from "react";
+import type { Hetero } from "./Hetero.js";
+/**
+ * Hook that provides the current NGL stage.
+ *
+ * @example
+ * Should be used in child components of NGLStage
+ * ```tsx
+ * import { useStage, NGLStage } from "@i-vresse/haddock3-ui/molviewer";
+ *
+ * function Child() {
+ *   const stage = useStage();
+ *   return <div>{stage.parameters}</div>;
+ * }
+ *
+ * function Parent() {
+ *   return (
+ *     <NGLStage>
+ *         <ChildComponent />
+ *     </NGLStage>
+ *   );
+ * }
+ * ```
+ */
+export declare function useStage(): Stage;
 export declare function NGLResidues({ residues, color, opacity, chain, representation, }: {
     residues: number[];
     color: string;
@@ -8,7 +31,38 @@ export declare function NGLResidues({ residues, color, opacity, chain, represent
     chain?: string;
     representation: StructureRepresentationType;
 }): null;
+/**
+ * Hook that provides the current NGL structure component.
+ *
+ * @example
+ * Should be used in child components of NGLComponent
+ * ```tsx
+ * import { useComponent, NGLComponent, NGLStage } from "@i-vresse/haddock3-ui/molviewer";
+ *
+ * function Child() {
+ *   const component = useComponent();
+ *   return <div>{component.type}</div>;
+ * }
+ *
+ * async function Parent() {
+ *   const structure = new File(...);
+ *   return (
+ *     <NGLStage>
+ *       <NGLComponent structure={structure} chain="A">
+ *         <ChildComponent />
+ *       </NGLComponent>
+ *     </NGLStage>
+ *   );
+ * }
+ * ```
+ */
 export declare function useComponent(): StructureComponent;
+/**
+ * Set of default representation names in NGL.
+ *
+ * List from https://github.com/nglviewer/ngl/blob/5d64dbe6769448e0f33080e9ac957a70a0973a13/src/component/structure-component.ts#L52-L79
+ */
+export declare const defaultRepresentationNames: Set<string>;
 export declare function NGLComponent({ structure, chain, opacity, children, }: {
     structure: File;
     chain: string;
@@ -49,6 +103,9 @@ export declare function NGLSurface({ active, passive, neighbours, highlight, act
     highlightColor?: string;
     neighboursColor?: string;
 }): null;
+/**
+ * Component to render PDB file with NGL using its default representations.
+ */
 export declare function SimpleViewer({ structure }: {
     structure: File;
 }): import("react/jsx-runtime").JSX.Element;
@@ -58,21 +115,28 @@ export declare function Viewer({ structure, chain, active, passive, renderSelect
     active: number[];
     passive: number[];
     surface: number[];
+    /**
+     * Representation type to render the selection as.
+     */
     renderSelectionAs?: StructureRepresentationType;
+    /**
+     * Computed neighbours of the active or passive residues.
+     * Rendered similar to passive residues.
+     */
     neighbours?: number[];
     higlightResidue?: number | undefined;
     onPick?: (chain: string, residue: number) => void;
     onHover?: (chain: string, residue: number) => void;
     onMouseLeave?: () => void;
+    /**
+     * Opacity of the active, passive and neighbours residues.
+     */
     selectionOpacity?: number;
     theme?: "light" | "dark";
 }): import("react/jsx-runtime").JSX.Element;
-export interface Hetero {
-    resno: number;
-    resname: string;
-    chain: string;
-    description?: string;
-}
+/**
+ * Component that renders a ligand in PDB file.
+ */
 export declare function LigandViewer({ structure, selected, onPick, onHover, highlight, onMouseLeave, theme, }: {
     structure: File;
     selected: Hetero | undefined;
@@ -82,3 +146,4 @@ export declare function LigandViewer({ structure, selected, onPick, onHover, hig
     onMouseLeave?: () => void;
     theme?: "light" | "dark";
 }): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=molviewer.d.ts.map

package/dist/molviewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"molviewer.d.ts","sourceRoot":"","sources":["../src/molviewer.tsx"],"names":[],"mappings":"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"}