@juliocesar-io/nano-protein-viewer-react 0.0.8 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -36
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
█░▀█ █▀█ █░▀█ █▄█ █▀▀ █▀▄ █▄█ ░█░ ██▄ █ █░▀█ █▀▄ ██▄ █▀█ █▄▄ ░█░
|
|
4
4
|
```
|
|
5
5
|
<p align="center">
|
|
6
|
-
<img alt="NPM Version" src="https://img.shields.io/npm/v/%40juliocesar-io%2Fnano-protein-viewer-react"
|
|
6
|
+
<a href="https://www.npmjs.com/package/@juliocesar-io/nano-protein-viewer-react"><img alt="NPM Version" src="https://img.shields.io/npm/v/%40juliocesar-io%2Fnano-protein-viewer-react" /></a>
|
|
7
7
|
<a href="https://github.com/juliocesar-io/nano-protein-viewer-react/actions/workflows/coverage.yml"><img alt="Test & Coveralls" src="https://github.com/juliocesar-io/nano-protein-viewer-react/actions/workflows/coverage.yml/badge.svg?branch=main" /></a>
|
|
8
8
|
<a href="https://coveralls.io/github/juliocesar-io/nano-protein-viewer-react"><img alt="Coverage Status" src="https://coveralls.io/repos/github/juliocesar-io/nano-protein-viewer-react/badge.svg" /></a>
|
|
9
9
|
</p>
|
|
@@ -24,6 +24,12 @@ This project brings the Mol\*-powered molecular visualization experience to the
|
|
|
24
24
|
pnpm install @juliocesar-io/nano-protein-viewer-react
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
+
Run tests
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
pnpm test
|
|
31
|
+
```
|
|
32
|
+
|
|
27
33
|
## Use in your app
|
|
28
34
|
|
|
29
35
|
```tsx
|
|
@@ -41,16 +47,12 @@ export default function App() {
|
|
|
41
47
|
);
|
|
42
48
|
```
|
|
43
49
|
|
|
44
|
-
## Local
|
|
50
|
+
## Local development
|
|
45
51
|
|
|
46
|
-
**Install dependencies**
|
|
47
52
|
|
|
48
|
-
Run locally:
|
|
53
|
+
Run the example react_app locally:
|
|
49
54
|
|
|
50
55
|
```bash
|
|
51
|
-
# From repo root, build the library first
|
|
52
|
-
pnpm build
|
|
53
|
-
|
|
54
56
|
cd react_app
|
|
55
57
|
pnpm install
|
|
56
58
|
pnpm dev
|
|
@@ -61,53 +63,55 @@ Go to: http://localhost:5173
|
|
|
61
63
|
|
|
62
64
|
|
|
63
65
|
|
|
64
|
-
|
|
66
|
+
## Design Rationale
|
|
67
|
+
|
|
68
|
+
This React app:
|
|
69
|
+
|
|
70
|
+
- Decouples the viewer logic into reusable components
|
|
71
|
+
- Enables embedding in research dashboards, notebooks, or web portals
|
|
72
|
+
- Provides a base to extend features (grid view, color themes, External API integration) gradually
|
|
73
|
+
- Allows server-side frameworks (Next.js, Remix, Vite) to integrate molecular viewers easily
|
|
74
|
+
|
|
75
|
+
### Viewer Props
|
|
76
|
+
|
|
77
|
+
The viewer accepts an array of `StructureUrl` via the `structureUrls` prop. Each entry can optionally include initial style settings applied on load.
|
|
65
78
|
|
|
66
|
-
|
|
79
|
+
| **Field** | **Type** | **Required** | **Description** |
|
|
80
|
+
| --------------------------- | ------------------------------------------------------------------------------------- | ------------ | ---------------------------------------------------------------------------- |
|
|
81
|
+
| `name` | `string` | Yes | Display name for the structure. Also used for per-file settings. |
|
|
82
|
+
| `url` | `string` | Yes | Direct URL to the structure file. |
|
|
83
|
+
| `format` | `StructureFormat ('pdb' \| 'mmcif' \| 'sdf')` | No | Optional; auto-detected from `name` or `url` extension when omitted. |
|
|
84
|
+
| `style.colorMode` | `'none' \| 'custom' \| 'element' \| 'residue' \| 'secondary' \| 'chain' \| 'rainbow'` | No | Initial color theme applied on load. Use `style.customColor` when `"custom"`. |
|
|
85
|
+
| `style.customColor` | `string` (hex) | No | Used when `colorMode` is `"custom"`. |
|
|
86
|
+
| `style.illustrative` | `boolean` | No | Enables illustrative/cartoon effect. |
|
|
87
|
+
| `style.surface.enabled` | `boolean` | No | Toggles molecular surface rendering. |
|
|
88
|
+
| `style.surface.opacity` | `number` (0–100) | No | Surface opacity percentage. |
|
|
89
|
+
| `style.surface.inherit` | `boolean` | No | Inherit surface color from current theme. |
|
|
90
|
+
| `style.surface.customColor` | `string` (hex) | No | Surface color when not inheriting. |
|
|
67
91
|
|
|
92
|
+
Minimal example:
|
|
68
93
|
|
|
69
94
|
```ts
|
|
70
|
-
import type
|
|
95
|
+
import { NanoProteinViewer, type StructureUrl } from '@juliocesar-io/nano-protein-viewer-react';
|
|
71
96
|
|
|
72
|
-
const
|
|
97
|
+
const structures: StructureUrl[] = [
|
|
73
98
|
{
|
|
74
99
|
name: 'AF-A0A2K6V5L6-F1',
|
|
75
100
|
url: 'https://alphafold.ebi.ac.uk/files/AF-A0A2K6V5L6-F1-model_v6.cif',
|
|
76
101
|
format: 'mmcif',
|
|
77
|
-
style: {
|
|
78
|
-
illustrative: true,
|
|
79
|
-
surface: { enabled: true, opacity: 8, inherit: true }
|
|
80
|
-
}
|
|
102
|
+
style: { illustrative: true, surface: { enabled: true, opacity: 8, inherit: true } }
|
|
81
103
|
},
|
|
82
104
|
{
|
|
83
105
|
name: '1CRN',
|
|
84
106
|
url: 'https://files.rcsb.org/download/1CRN.pdb',
|
|
85
107
|
format: 'pdb',
|
|
86
|
-
style: {
|
|
87
|
-
|
|
88
|
-
customColor: '#4ECDC4',
|
|
89
|
-
illustrative: false,
|
|
90
|
-
surface: { enabled: true, opacity: 40, inherit: true }
|
|
91
|
-
}
|
|
92
|
-
},
|
|
108
|
+
style: { colorMode: 'secondary', customColor: '#4ECDC4', surface: { enabled: true, opacity: 40, inherit: true } }
|
|
109
|
+
}
|
|
93
110
|
];
|
|
94
|
-
```
|
|
95
|
-
Then render them in your app:
|
|
96
|
-
```ts
|
|
97
|
-
import { NanoProteinViewer } from '@components/NanoProteinViewer';
|
|
98
111
|
|
|
99
|
-
<NanoProteinViewer structureUrls={
|
|
112
|
+
<NanoProteinViewer structureUrls={structures} />
|
|
100
113
|
```
|
|
101
114
|
|
|
102
|
-
## Design Rationale
|
|
103
|
-
|
|
104
|
-
This React app:
|
|
105
|
-
|
|
106
|
-
- Decouples the viewer logic into reusable components
|
|
107
|
-
- Enables embedding in research dashboards, notebooks, or web portals
|
|
108
|
-
- Provides a base to extend features (grid view, color themes, External API integration) gradually
|
|
109
|
-
- Allows server-side frameworks (Next.js, Remix, Vite) to integrate molecular viewers easily
|
|
110
|
-
|
|
111
115
|
## License & Attribution
|
|
112
116
|
|
|
113
117
|
This project is released under the MIT License.
|