@juliocesar-io/nano-protein-viewer-react 0.0.8 → 0.0.9
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 +8 -44
- 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
|
|
@@ -43,14 +49,10 @@ export default function App() {
|
|
|
43
49
|
|
|
44
50
|
## Local deveploment
|
|
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,44 +63,6 @@ Go to: http://localhost:5173
|
|
|
61
63
|
|
|
62
64
|
|
|
63
65
|
|
|
64
|
-
**Passing structures by URL**
|
|
65
|
-
|
|
66
|
-
You can define your own logic from a list of structures in src/App.tsx:
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
```ts
|
|
70
|
-
import type { StructureUrl } from '@juliocesar-io/nano-protein-viewer-react';
|
|
71
|
-
|
|
72
|
-
const exampleUrls: StructureUrl[] = [
|
|
73
|
-
{
|
|
74
|
-
name: 'AF-A0A2K6V5L6-F1',
|
|
75
|
-
url: 'https://alphafold.ebi.ac.uk/files/AF-A0A2K6V5L6-F1-model_v6.cif',
|
|
76
|
-
format: 'mmcif',
|
|
77
|
-
style: {
|
|
78
|
-
illustrative: true,
|
|
79
|
-
surface: { enabled: true, opacity: 8, inherit: true }
|
|
80
|
-
}
|
|
81
|
-
},
|
|
82
|
-
{
|
|
83
|
-
name: '1CRN',
|
|
84
|
-
url: 'https://files.rcsb.org/download/1CRN.pdb',
|
|
85
|
-
format: 'pdb',
|
|
86
|
-
style: {
|
|
87
|
-
colorMode: 'secondary',
|
|
88
|
-
customColor: '#4ECDC4',
|
|
89
|
-
illustrative: false,
|
|
90
|
-
surface: { enabled: true, opacity: 40, inherit: true }
|
|
91
|
-
}
|
|
92
|
-
},
|
|
93
|
-
];
|
|
94
|
-
```
|
|
95
|
-
Then render them in your app:
|
|
96
|
-
```ts
|
|
97
|
-
import { NanoProteinViewer } from '@components/NanoProteinViewer';
|
|
98
|
-
|
|
99
|
-
<NanoProteinViewer structureUrls={exampleUrls} />
|
|
100
|
-
```
|
|
101
|
-
|
|
102
66
|
## Design Rationale
|
|
103
67
|
|
|
104
68
|
This React app:
|