@i-vresse/haddock3-ui
Reusable React components from Haddock3 webapp
Science Score: 67.0%
This score indicates how likely this project is to be science-related based on various indicators:
-
✓CITATION.cff file
Found CITATION.cff file -
✓codemeta.json file
Found codemeta.json file -
✓.zenodo.json file
Found .zenodo.json file -
✓DOI references
Found 3 DOI reference(s) in README -
✓Academic publication links
Links to: zenodo.org -
○Academic email domains
-
○Institutional organization owner
-
○JOSS paper metadata
-
○Scientific vocabulary similarity
Low similarity (13.2%) to scientific vocabulary
Repository
Reusable React components from Haddock3 webapp
Basic Info
- Host: GitHub
- Owner: i-VRESSE
- License: apache-2.0
- Language: TypeScript
- Default Branch: main
- Homepage: https://i-vresse.github.io/haddock3-ui/
- Size: 2.14 MB
Statistics
- Stars: 0
- Watchers: 6
- Forks: 0
- Open Issues: 1
- Releases: 15
Metadata Files
README.md
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
bash
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:
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
```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 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.
Owner
- Name: Interactive Virtual Research Environment for Scientific Software Execution
- Login: i-VRESSE
- Kind: organization
- Repositories: 5
- Profile: https://github.com/i-VRESSE
Project with Netherlands eScience Center and Bonvin Lab
Citation (CITATION.cff)
cff-version: 1.2.0
title: Haddock3 web application ui components
message: >-
If you use this software, please cite it using the
metadata from this file.
type: software
authors:
- given-names: Stefan
family-names: Verhoeven
affiliation: Netherlands eScience Center
orcid: "https://orcid.org/0000-0002-5821-2060"
- given-names: Dusan
family-names: Mijatovic
email: d.mijatovic@esciencecenter.nl
affiliation: Netherlands eScience Center
orcid: "https://orcid.org/0000-0002-1898-4461"
license: Apache-2.0
identifiers:
- type: doi
value: 10.5281/zenodo.12820670
description: Latest version of software
GitHub Events
Total
Last Year
Packages
- Total packages: 1
-
Total downloads:
- npm 23 last-month
- Total dependent packages: 0
- Total dependent repositories: 0
- Total versions: 11
- Total maintainers: 4
npmjs.org: @i-vresse/haddock3-ui
[](https://github.com/i-VRESSE/haddock3-ui) [](https://www.npmjs.co
- Homepage: https://i-vresse.github.io/haddock3-ui
- License: Apache-2.0
-
Latest release: 0.3.1
published over 1 year ago
Rankings
Maintainers (4)
Dependencies
- actions/checkout v4 composite
- actions/configure-pages v5 composite
- actions/deploy-pages v4 composite
- actions/setup-node v4 composite
- actions/upload-pages-artifact v3 composite
- @chromatic-com/storybook ^1.6.1 development
- @storybook/addon-essentials ^8.2.5 development
- @storybook/addon-interactions ^8.2.5 development
- @storybook/addon-links ^8.2.5 development
- @storybook/addon-themes ^8.2.5 development
- @storybook/blocks ^8.2.5 development
- @storybook/react ^8.2.5 development
- @storybook/react-vite ^8.2.5 development
- @storybook/test ^8.2.5 development
- autoprefixer ^10.4.19 development
- postcss ^8.4.39 development
- storybook ^8.2.5 development
- tailwindcss ^3.4.6 development
- tsup ^8.2.2 development
- typescript ^5.5.3 development
- clsx ^2.1.1
- ngl ^2.3.1
- react ^18.3.1
- react-dom ^18.3.1
- tailwind-merge ^2.4.0
- actions/checkout v4 composite
- actions/setup-node v4 composite
- pnpm/action-setup v4 composite
- actions/checkout v4 composite
- actions/setup-node v4 composite
- pnpm/action-setup v4 composite
- 190 dependencies