@juliocesar-io/nano-protein-viewer-react 0.0.9 → 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 +41 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -47,7 +47,7 @@ export default function App() {
|
|
|
47
47
|
);
|
|
48
48
|
```
|
|
49
49
|
|
|
50
|
-
## Local
|
|
50
|
+
## Local development
|
|
51
51
|
|
|
52
52
|
|
|
53
53
|
Run the example react_app locally:
|
|
@@ -72,6 +72,46 @@ This React app:
|
|
|
72
72
|
- Provides a base to extend features (grid view, color themes, External API integration) gradually
|
|
73
73
|
- Allows server-side frameworks (Next.js, Remix, Vite) to integrate molecular viewers easily
|
|
74
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.
|
|
78
|
+
|
|
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. |
|
|
91
|
+
|
|
92
|
+
Minimal example:
|
|
93
|
+
|
|
94
|
+
```ts
|
|
95
|
+
import { NanoProteinViewer, type StructureUrl } from '@juliocesar-io/nano-protein-viewer-react';
|
|
96
|
+
|
|
97
|
+
const structures: StructureUrl[] = [
|
|
98
|
+
{
|
|
99
|
+
name: 'AF-A0A2K6V5L6-F1',
|
|
100
|
+
url: 'https://alphafold.ebi.ac.uk/files/AF-A0A2K6V5L6-F1-model_v6.cif',
|
|
101
|
+
format: 'mmcif',
|
|
102
|
+
style: { illustrative: true, surface: { enabled: true, opacity: 8, inherit: true } }
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
name: '1CRN',
|
|
106
|
+
url: 'https://files.rcsb.org/download/1CRN.pdb',
|
|
107
|
+
format: 'pdb',
|
|
108
|
+
style: { colorMode: 'secondary', customColor: '#4ECDC4', surface: { enabled: true, opacity: 40, inherit: true } }
|
|
109
|
+
}
|
|
110
|
+
];
|
|
111
|
+
|
|
112
|
+
<NanoProteinViewer structureUrls={structures} />
|
|
113
|
+
```
|
|
114
|
+
|
|
75
115
|
## License & Attribution
|
|
76
116
|
|
|
77
117
|
This project is released under the MIT License.
|