React components for/from haddock3 webapp

The haddock3 web application 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 using NGL
• Components to select residues in a molecule either passive or active
• Components to handle files
• Components to render clusters or structures in a sortable table

Installation

npm install @i-vresse/haddock3-ui

The components are styled with tailwindcss. For your own webapp to pick up the classes in the components, you need to add the following to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // Existing content goes here
    './node_modules/@i-vresse/haddock3-ui/dist/**/*.js',
  ],
  // Rest of the config goes here
}

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).

Usage

Stories of the components can be found at https://i-VRESSE.github.io/haddock3-ui.

See the sidebar for a list of all component stories. Once component is selected

• interact with component story
• 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/

Direct in browser

The components can be used directly in the browser, without your own build system.

example.html is a clustered table example which uses the latest package version from npm via https://esm.sh/. 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, 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

# 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 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.