@czi-sds/mcp 0.17.0 → 0.18.0

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.
Files changed (29) hide show
  1. package/data/component-docs/ProteinStructureViewer.md +1044 -0
  2. package/data/component-docs/index.json +5 -0
  3. package/data/component-list.json +1 -1
  4. package/data/component-props/Autocomplete.json +4 -4
  5. package/data/component-props/Banner.json +1 -1
  6. package/data/component-props/Callout.json +1 -1
  7. package/data/component-props/CellBasic.json +1 -1
  8. package/data/component-props/CellHeader.json +1 -1
  9. package/data/component-props/ComplexFilter.json +1 -1
  10. package/data/component-props/ContentCard.json +2 -2
  11. package/data/component-props/Dropdown.json +4 -4
  12. package/data/component-props/DropdownMenu.json +3 -3
  13. package/data/component-props/HeatmapChart.json +2 -2
  14. package/data/component-props/InputCheckbox.json +1 -1
  15. package/data/component-props/InputDropdown.json +1 -1
  16. package/data/component-props/InputRadio.json +1 -1
  17. package/data/component-props/InputSearch.json +1 -1
  18. package/data/component-props/InputSlider.json +1 -1
  19. package/data/component-props/InputText.json +1 -1
  20. package/data/component-props/MenuItem.json +1 -1
  21. package/data/component-props/NavigationJumpTo.json +1 -1
  22. package/data/component-props/Notification.json +1 -1
  23. package/data/component-props/Panel.json +3 -3
  24. package/data/component-props/Popover.json +5 -5
  25. package/data/component-props/ProteinStructureViewer.json +117 -0
  26. package/data/component-props/TableRow.json +1 -1
  27. package/data/component-props/TooltipTable.json +1 -1
  28. package/data/tailwind.json +20 -14
  29. package/package.json +2 -2
package/data/component-docs/ProteinStructureViewer.md ADDED
@@ -0,0 +1,1044 @@
1
+ # ProteinStructureViewer
2
+
3
+ An interactive 3D protein structure viewer built on [Mol\*](https://molstar.org/), with a sequence panel, confidence coloring, per-residue value overlays, and a stats legend.
4
+
5
+ > **Ships separately:** ProteinStructureViewer comes from `@czi-sds/data-viz`, not `@czi-sds/components`. It also needs `molstar` as a peer dependency. See the Data Viz overview for installation and peer dependencies.
6
+
7
+ ## Source Code
8
+
9
+ The component's source code in the SDS codebase can be found [here](https://github.com/chanzuckerberg/sci-components/blob/main/packages/data-viz/src/core/ProteinStructureViewer/index.tsx).
10
+
11
+ ## Import
12
+
13
+ **React TypeScript**
14
+
15
+ ```tsx
16
+ import { ProteinStructureViewer } from "@czi-sds/data-viz";
17
+ ```
18
+
19
+ ## Sizing
20
+
21
+ The viewer fills its parent. Mol\* sizes its canvas from the laid-out container, so give the parent a real height - a viewer inside a box with no height will wait for one rather than render.
22
+
23
+ ## Code examples
24
+
25
+ ### **Default ProteinStructureViewer**
26
+
27
+ Raw PDB text is the only required prop. Supplying per-residue `plddt` scores on a 0-1 scale colors the structure by confidence and puts the pLDDT key in the legend.
28
+
29
+ **Example: DefaultProteinStructureViewer**
30
+
31
+ ```tsx
32
+ // Raw PDB text is the only required prop. Adding per-residue pLDDT scores on a
33
+ // 0-1 scale colors the structure by confidence and puts the pLDDT key in the
34
+ // legend.
35
+ //
36
+ // The viewer fills its parent, and Mol* sizes its canvas from the laid-out
37
+ // container, so the wrapper needs a real height.
38
+ //
39
+ // The structure below is crambin (PDB 1CRN), trimmed to the backbone atoms the
40
+ // polymer cartoon traces. The viewer draws a polymer, so the chain needs enough
41
+ // residues to trace: a single residue renders an empty canvas.
42
+
43
+ import { ProteinStructureViewer } from "@czi-sds/data-viz";
44
+
45
+ const PDB = `
46
+ ATOM 1 N THR A 1 17.047 14.099 3.625 1.00 13.79 N
47
+ ATOM 2 CA THR A 1 16.967 12.784 4.338 1.00 10.80 C
48
+ ATOM 3 C THR A 1 15.685 12.755 5.133 1.00 9.19 C
49
+ ATOM 4 O THR A 1 15.268 13.825 5.594 1.00 9.85 O
50
+ ATOM 5 N THR A 2 15.115 11.555 5.265 1.00 7.81 N
51
+ ATOM 6 CA THR A 2 13.856 11.469 6.066 1.00 8.31 C
52
+ ATOM 7 C THR A 2 14.164 10.785 7.379 1.00 5.80 C
53
+ ATOM 8 O THR A 2 14.993 9.862 7.443 1.00 6.94 O
54
+ ATOM 9 N CYS A 3 13.488 11.241 8.417 1.00 5.24 N
55
+ ATOM 10 CA CYS A 3 13.660 10.707 9.787 1.00 5.39 C
56
+ ATOM 11 C CYS A 3 12.269 10.431 10.323 1.00 4.45 C
57
+ ATOM 12 O CYS A 3 11.393 11.308 10.185 1.00 6.54 O
58
+ ATOM 13 N CYS A 4 12.019 9.272 10.928 1.00 3.90 N
59
+ ATOM 14 CA CYS A 4 10.646 8.991 11.408 1.00 4.24 C
60
+ ATOM 15 C CYS A 4 10.654 8.793 12.919 1.00 3.72 C
61
+ ATOM 16 O CYS A 4 11.659 8.296 13.491 1.00 5.30 O
62
+ ATOM 17 N PRO A 5 9.561 9.108 13.563 1.00 3.96 N
63
+ ATOM 18 CA PRO A 5 9.448 9.034 15.012 1.00 4.25 C
64
+ ATOM 19 C PRO A 5 9.288 7.670 15.606 1.00 4.96 C
65
+ ATOM 20 O PRO A 5 9.490 7.519 16.819 1.00 7.44 O
66
+ ATOM 21 N SER A 6 8.875 6.686 14.796 1.00 4.83 N
67
+ ATOM 22 CA SER A 6 8.673 5.314 15.279 1.00 4.45 C
68
+ ATOM 23 C SER A 6 8.753 4.376 14.083 1.00 4.99 C
69
+ ATOM 24 O SER A 6 8.726 4.858 12.923 1.00 4.61 O
70
+ ATOM 25 N ILE A 7 8.881 3.075 14.358 1.00 4.94 N
71
+ ATOM 26 CA ILE A 7 8.912 2.083 13.258 1.00 6.33 C
72
+ ATOM 27 C ILE A 7 7.581 2.090 12.506 1.00 5.32 C
73
+ ATOM 28 O ILE A 7 7.670 2.031 11.245 1.00 6.85 O
74
+ ATOM 29 N VAL A 8 6.458 2.162 13.159 1.00 5.02 N
75
+ ATOM 30 CA VAL A 8 5.145 2.209 12.453 1.00 6.93 C
76
+ ATOM 31 C VAL A 8 5.115 3.379 11.461 1.00 5.39 C
77
+ ATOM 32 O VAL A 8 4.664 3.268 10.343 1.00 6.30 O
78
+ ATOM 33 N ALA A 9 5.606 4.546 11.941 1.00 3.73 N
79
+ ATOM 34 CA ALA A 9 5.598 5.767 11.082 1.00 3.56 C
80
+ ATOM 35 C ALA A 9 6.441 5.527 9.850 1.00 4.13 C
81
+ ATOM 36 O ALA A 9 6.052 5.933 8.744 1.00 4.36 O
82
+ ATOM 37 N ARG A 10 7.647 4.909 10.005 1.00 3.73 N
83
+ ATOM 38 CA ARG A 10 8.496 4.609 8.837 1.00 3.38 C
84
+ ATOM 39 C ARG A 10 7.798 3.609 7.876 1.00 3.47 C
85
+ ATOM 40 O ARG A 10 7.878 3.778 6.651 1.00 4.67 O
86
+ ATOM 41 N SER A 11 7.186 2.582 8.445 1.00 5.19 N
87
+ ATOM 42 CA SER A 11 6.500 1.584 7.565 1.00 4.60 C
88
+ ATOM 43 C SER A 11 5.382 2.313 6.773 1.00 4.84 C
89
+ ATOM 44 O SER A 11 5.213 2.016 5.557 1.00 5.84 O
90
+ ATOM 45 N ASN A 12 4.648 3.182 7.446 1.00 3.54 N
91
+ ATOM 46 CA ASN A 12 3.545 3.935 6.751 1.00 4.57 C
92
+ ATOM 47 C ASN A 12 4.107 4.851 5.691 1.00 4.14 C
93
+ ATOM 48 O ASN A 12 3.536 5.001 4.617 1.00 5.52 O
94
+ ATOM 49 N PHE A 13 5.259 5.498 6.005 1.00 3.43 N
95
+ ATOM 50 CA PHE A 13 5.929 6.358 5.055 1.00 3.49 C
96
+ ATOM 51 C PHE A 13 6.304 5.578 3.799 1.00 3.40 C
97
+ ATOM 52 O PHE A 13 6.136 6.072 2.653 1.00 4.07 O
98
+ ATOM 53 N ASN A 14 6.900 4.390 3.989 1.00 3.64 N
99
+ ATOM 54 CA ASN A 14 7.331 3.607 2.791 1.00 4.31 C
100
+ ATOM 55 C ASN A 14 6.116 3.210 1.915 1.00 3.98 C
101
+ ATOM 56 O ASN A 14 6.240 3.144 0.684 1.00 6.22 O
102
+ ATOM 57 N VAL A 15 4.993 2.927 2.571 1.00 3.76 N
103
+ ATOM 58 CA VAL A 15 3.782 2.599 1.742 1.00 3.98 C
104
+ ATOM 59 C VAL A 15 3.296 3.871 1.004 1.00 3.80 C
105
+ ATOM 60 O VAL A 15 2.947 3.817 -0.189 1.00 4.85 O
106
+ ATOM 61 N CYS A 16 3.321 4.987 1.720 1.00 3.79 N
107
+ ATOM 62 CA CYS A 16 2.890 6.285 1.126 1.00 3.54 C
108
+ ATOM 63 C CYS A 16 3.687 6.597 -0.111 1.00 3.48 C
109
+ ATOM 64 O CYS A 16 3.200 7.147 -1.103 1.00 4.63 O
110
+ ATOM 65 N ARG A 17 4.997 6.227 -0.100 1.00 3.99 N
111
+ ATOM 66 CA ARG A 17 5.895 6.489 -1.213 1.00 3.83 C
112
+ ATOM 67 C ARG A 17 5.738 5.560 -2.409 1.00 3.79 C
113
+ ATOM 68 O ARG A 17 6.228 5.901 -3.507 1.00 5.39 O
114
+ ATOM 69 N LEU A 18 5.051 4.411 -2.204 1.00 4.70 N
115
+ ATOM 70 CA LEU A 18 4.933 3.431 -3.326 1.00 5.46 C
116
+ ATOM 71 C LEU A 18 4.397 4.014 -4.620 1.00 5.13 C
117
+ ATOM 72 O LEU A 18 4.988 3.755 -5.687 1.00 5.55 O
118
+ ATOM 73 N PRO A 19 3.329 4.795 -4.543 1.00 4.28 N
119
+ ATOM 74 CA PRO A 19 2.792 5.376 -5.797 1.00 5.38 C
120
+ ATOM 75 C PRO A 19 3.573 6.540 -6.322 1.00 6.30 C
121
+ ATOM 76 O PRO A 19 3.260 7.045 -7.422 1.00 9.62 O
122
+ ATOM 77 N GLY A 20 4.565 7.047 -5.559 1.00 4.94 N
123
+ ATOM 78 CA GLY A 20 5.366 8.191 -6.018 1.00 5.39 C
124
+ ATOM 79 C GLY A 20 5.007 9.481 -5.280 1.00 5.03 C
125
+ ATOM 80 O GLY A 20 5.535 10.510 -5.730 1.00 7.34 O
126
+ ATOM 81 N THR A 21 4.181 9.438 -4.262 1.00 4.10 N
127
+ ATOM 82 CA THR A 21 3.767 10.609 -3.513 1.00 3.94 C
128
+ ATOM 83 C THR A 21 5.017 11.397 -3.042 1.00 3.96 C
129
+ ATOM 84 O THR A 21 5.947 10.757 -2.523 1.00 5.82 O
130
+ ATOM 85 N PRO A 22 4.971 12.703 -3.176 1.00 5.04 N
131
+ ATOM 86 CA PRO A 22 6.143 13.513 -2.696 1.00 4.69 C
132
+ ATOM 87 C PRO A 22 6.400 13.233 -1.225 1.00 4.19 C
133
+ ATOM 88 O PRO A 22 5.485 13.061 -0.382 1.00 4.47 O
134
+ ATOM 89 N GLU A 23 7.728 13.297 -0.921 1.00 5.16 N
135
+ ATOM 90 CA GLU A 23 8.114 13.103 0.500 1.00 5.31 C
136
+ ATOM 91 C GLU A 23 7.427 14.073 1.410 1.00 4.11 C
137
+ ATOM 92 O GLU A 23 7.036 13.682 2.540 1.00 5.11 O
138
+ ATOM 93 N ALA A 24 7.212 15.334 0.966 1.00 4.56 N
139
+ ATOM 94 CA ALA A 24 6.614 16.317 1.913 1.00 4.49 C
140
+ ATOM 95 C ALA A 24 5.212 15.936 2.350 1.00 4.10 C
141
+ ATOM 96 O ALA A 24 4.782 16.166 3.495 1.00 5.64 O
142
+ ATOM 97 N ILE A 25 4.445 15.318 1.405 1.00 4.37 N
143
+ ATOM 98 CA ILE A 25 3.074 14.894 1.756 1.00 5.44 C
144
+ ATOM 99 C ILE A 25 3.085 13.643 2.645 1.00 4.32 C
145
+ ATOM 100 O ILE A 25 2.315 13.523 3.578 1.00 4.72 O
146
+ ATOM 101 N CYS A 26 4.032 12.764 2.313 1.00 3.92 N
147
+ ATOM 102 CA CYS A 26 4.180 11.549 3.187 1.00 4.37 C
148
+ ATOM 103 C CYS A 26 4.632 11.944 4.596 1.00 3.95 C
149
+ ATOM 104 O CYS A 26 4.227 11.252 5.547 1.00 4.74 O
150
+ ATOM 105 N ALA A 27 5.408 13.012 4.694 1.00 3.89 N
151
+ ATOM 106 CA ALA A 27 5.879 13.502 6.026 1.00 4.43 C
152
+ ATOM 107 C ALA A 27 4.696 13.908 6.882 1.00 4.26 C
153
+ ATOM 108 O ALA A 27 4.528 13.422 8.025 1.00 5.44 O
154
+ ATOM 109 N THR A 28 3.827 14.802 6.358 1.00 4.53 N
155
+ ATOM 110 CA THR A 28 2.691 15.221 7.194 1.00 5.08 C
156
+ ATOM 111 C THR A 28 1.672 14.132 7.434 1.00 4.62 C
157
+ ATOM 112 O THR A 28 0.947 14.112 8.468 1.00 7.80 O
158
+ ATOM 113 N TYR A 29 1.621 13.190 6.511 1.00 5.01 N
159
+ ATOM 114 CA TYR A 29 0.715 12.045 6.657 1.00 6.60 C
160
+ ATOM 115 C TYR A 29 1.125 11.125 7.815 1.00 4.92 C
161
+ ATOM 116 O TYR A 29 0.286 10.632 8.545 1.00 7.13 O
162
+ ATOM 117 N THR A 30 2.470 10.984 7.995 1.00 5.31 N
163
+ ATOM 118 CA THR A 30 2.986 9.994 8.950 1.00 5.70 C
164
+ ATOM 119 C THR A 30 3.609 10.505 10.230 1.00 6.28 C
165
+ ATOM 120 O THR A 30 3.766 9.715 11.186 1.00 8.77 O
166
+ ATOM 121 N GLY A 31 3.984 11.764 10.241 1.00 4.99 N
167
+ ATOM 122 CA GLY A 31 4.769 12.336 11.360 1.00 5.50 C
168
+ ATOM 123 C GLY A 31 6.255 12.243 11.106 1.00 4.19 C
169
+ ATOM 124 O GLY A 31 7.037 12.750 11.954 1.00 6.12 O
170
+ ATOM 125 N CYS A 32 6.710 11.631 9.992 1.00 4.30 N
171
+ ATOM 126 CA CYS A 32 8.140 11.694 9.635 1.00 4.89 C
172
+ ATOM 127 C CYS A 32 8.500 13.141 9.206 1.00 5.50 C
173
+ ATOM 128 O CYS A 32 7.581 13.949 8.944 1.00 5.82 O
174
+ ATOM 129 N ILE A 33 9.793 13.410 9.173 1.00 6.02 N
175
+ ATOM 130 CA ILE A 33 10.280 14.760 8.823 1.00 5.24 C
176
+ ATOM 131 C ILE A 33 11.346 14.658 7.743 1.00 5.16 C
177
+ ATOM 132 O ILE A 33 11.971 13.583 7.552 1.00 7.19 O
178
+ ATOM 133 N ILE A 34 11.490 15.773 7.038 1.00 5.52 N
179
+ ATOM 134 CA ILE A 34 12.552 15.877 6.036 1.00 6.82 C
180
+ ATOM 135 C ILE A 34 13.590 16.917 6.560 1.00 6.92 C
181
+ ATOM 136 O ILE A 34 13.168 18.006 6.945 1.00 9.22 O
182
+ ATOM 137 N ILE A 35 14.856 16.493 6.536 1.00 7.06 N
183
+ ATOM 138 CA ILE A 35 15.930 17.454 6.941 1.00 7.52 C
184
+ ATOM 139 C ILE A 35 16.913 17.550 5.819 1.00 6.63 C
185
+ ATOM 140 O ILE A 35 17.097 16.660 4.970 1.00 7.90 O
186
+ ATOM 141 N PRO A 36 17.664 18.669 5.806 1.00 8.07 N
187
+ ATOM 142 CA PRO A 36 18.635 18.861 4.738 1.00 8.78 C
188
+ ATOM 143 C PRO A 36 19.925 18.042 4.949 1.00 8.31 C
189
+ ATOM 144 O PRO A 36 20.593 17.742 3.945 1.00 9.09 O
190
+ ATOM 145 N GLY A 37 20.172 17.730 6.217 1.00 8.48 N
191
+ ATOM 146 CA GLY A 37 21.452 16.969 6.513 1.00 9.20 C
192
+ ATOM 147 C GLY A 37 21.143 15.478 6.427 1.00 10.41 C
193
+ ATOM 148 O GLY A 37 20.138 15.023 5.878 1.00 12.06 O
194
+ ATOM 149 N ALA A 38 22.055 14.701 7.032 1.00 9.24 N
195
+ ATOM 150 CA ALA A 38 22.019 13.242 7.020 1.00 9.24 C
196
+ ATOM 151 C ALA A 38 21.944 12.628 8.396 1.00 9.60 C
197
+ ATOM 152 O ALA A 38 21.869 11.387 8.435 1.00 13.65 O
198
+ ATOM 153 N THR A 39 21.894 13.435 9.436 1.00 8.70 N
199
+ ATOM 154 CA THR A 39 21.936 12.911 10.809 1.00 9.46 C
200
+ ATOM 155 C THR A 39 20.615 13.191 11.521 1.00 8.32 C
201
+ ATOM 156 O THR A 39 20.357 14.317 11.948 1.00 9.89 O
202
+ ATOM 157 N CYS A 40 19.827 12.110 11.642 1.00 7.64 N
203
+ ATOM 158 CA CYS A 40 18.504 12.312 12.298 1.00 8.05 C
204
+ ATOM 159 C CYS A 40 18.684 12.451 13.784 1.00 7.63 C
205
+ ATOM 160 O CYS A 40 19.533 11.718 14.362 1.00 9.64 O
206
+ ATOM 161 N PRO A 41 17.880 13.266 14.426 1.00 8.00 N
207
+ ATOM 162 CA PRO A 41 17.924 13.421 15.877 1.00 8.96 C
208
+ ATOM 163 C PRO A 41 17.392 12.206 16.594 1.00 9.06 C
209
+ ATOM 164 O PRO A 41 16.652 11.368 16.033 1.00 8.82 O
210
+ ATOM 165 N GLY A 42 17.728 12.124 17.884 1.00 7.55 N
211
+ ATOM 166 CA GLY A 42 17.334 10.956 18.691 1.00 8.00 C
212
+ ATOM 167 C GLY A 42 15.875 10.688 18.871 1.00 7.22 C
213
+ ATOM 168 O GLY A 42 15.434 9.550 19.166 1.00 8.41 O
214
+ ATOM 169 N ASP A 43 15.036 11.747 18.715 1.00 5.54 N
215
+ ATOM 170 CA ASP A 43 13.564 11.573 18.836 1.00 5.85 C
216
+ ATOM 171 C ASP A 43 12.936 11.227 17.470 1.00 5.87 C
217
+ ATOM 172 O ASP A 43 11.720 11.040 17.428 1.00 7.29 O
218
+ ATOM 173 N TYR A 44 13.725 11.174 16.425 1.00 5.22 N
219
+ ATOM 174 CA TYR A 44 13.257 10.745 15.081 1.00 5.56 C
220
+ ATOM 175 C TYR A 44 14.275 9.687 14.612 1.00 4.61 C
221
+ ATOM 176 O TYR A 44 14.930 9.862 13.568 1.00 6.04 O
222
+ ATOM 177 N ALA A 45 14.342 8.640 15.422 1.00 4.76 N
223
+ ATOM 178 CA ALA A 45 15.445 7.667 15.246 1.00 5.89 C
224
+ ATOM 179 C ALA A 45 15.171 6.533 14.280 1.00 6.67 C
225
+ ATOM 180 O ALA A 45 16.093 5.705 14.039 1.00 7.56 O
226
+ ATOM 181 N ASN A 46 13.966 6.502 13.739 1.00 5.80 N
227
+ ATOM 182 CA ASN A 46 13.512 5.395 12.878 1.00 6.15 C
228
+ ATOM 183 C ASN A 46 13.311 5.853 11.455 1.00 6.61 C
229
+ ATOM 184 O ASN A 46 13.733 6.929 11.026 1.00 7.18 O
230
+ END`;
231
+
232
+ // One score per residue, in chain order. Residues past the end of the array
233
+ // fall back to mid confidence, so a short array leaves most of the chain
234
+ // looking uniformly average.
235
+ const PLDDT = [
236
+ 0.45, 0.515, 0.557, 0.569, 0.567, 0.578, 0.618, 0.681, 0.742, 0.777, 0.782,
237
+ 0.773, 0.776, 0.807, 0.86, 0.909, 0.933, 0.924, 0.902, 0.892, 0.91, 0.947,
238
+ 0.98, 0.98, 0.961, 0.92, 0.892, 0.892, 0.911, 0.927, 0.915, 0.873, 0.818,
239
+ 0.776, 0.762, 0.769, 0.772, 0.748, 0.694, 0.629, 0.578, 0.556, 0.556, 0.552,
240
+ 0.522, 0.463,
241
+ ];
242
+
243
+ function App() {
244
+ return (
245
+ <div className="app" style={{ height: 480 }}>
246
+ <ProteinStructureViewer
247
+ pdb={PDB}
248
+ plddt={PLDDT}
249
+ stats={[
250
+ { label: "Known", value: "62%" },
251
+ { label: "pTM", value: "0.874" },
252
+ { label: "Mean pLDDT", value: "0.781" },
253
+ ]}
254
+ />
255
+ </div>
256
+ );
257
+ }
258
+
259
+ export default App;
260
+ ```
261
+
262
+ ### Residue value overlay
263
+
264
+ A `residueOverlay` paints arbitrary per-residue values over the structure, taking over from pLDDT coloring while it is set. The `values` map is keyed by 0-based residue index, so the first residue of the chain is `0`. Values are normalized into `min`-`max` and sampled from a color scale; residues at or below `min`, and those missing from the map, render in a neutral gray. The legend switches to the overlay's scale and its `label`, and the per-residue readout reports the value under the cursor.
265
+
266
+ **Example: ProteinStructureViewerWithOverlay**
267
+
268
+ ```tsx
269
+ // A residueOverlay paints arbitrary per-residue values over the structure,
270
+ // taking over from pLDDT coloring while it is set.
271
+ //
272
+ // Values are keyed by 0-based residue index and normalized into min-max before
273
+ // being sampled from the color scale. Residues missing from the map, or at or
274
+ // below min, render in a neutral gray rather than at the bottom of the scale,
275
+ // so "no value here" reads differently from "a low value here".
276
+ //
277
+ // label captions the legend, readoutLabel names the slot that reports the value
278
+ // under the cursor, and tooltip attaches a help icon to the caption.
279
+ //
280
+ // The structure below is crambin (PDB 1CRN), trimmed to the backbone atoms the
281
+ // polymer cartoon traces. An overlay needs a chain long enough to see it on:
282
+ // the values here pick out two short stretches, so the rest of the chain stays
283
+ // gray and the painted regions stand out against it.
284
+
285
+ import { ProteinStructureViewer, PLASMA_COLOR_SCALE } from "@czi-sds/data-viz";
286
+
287
+ const PDB = `
288
+ ATOM 1 N THR A 1 17.047 14.099 3.625 1.00 13.79 N
289
+ ATOM 2 CA THR A 1 16.967 12.784 4.338 1.00 10.80 C
290
+ ATOM 3 C THR A 1 15.685 12.755 5.133 1.00 9.19 C
291
+ ATOM 4 O THR A 1 15.268 13.825 5.594 1.00 9.85 O
292
+ ATOM 5 N THR A 2 15.115 11.555 5.265 1.00 7.81 N
293
+ ATOM 6 CA THR A 2 13.856 11.469 6.066 1.00 8.31 C
294
+ ATOM 7 C THR A 2 14.164 10.785 7.379 1.00 5.80 C
295
+ ATOM 8 O THR A 2 14.993 9.862 7.443 1.00 6.94 O
296
+ ATOM 9 N CYS A 3 13.488 11.241 8.417 1.00 5.24 N
297
+ ATOM 10 CA CYS A 3 13.660 10.707 9.787 1.00 5.39 C
298
+ ATOM 11 C CYS A 3 12.269 10.431 10.323 1.00 4.45 C
299
+ ATOM 12 O CYS A 3 11.393 11.308 10.185 1.00 6.54 O
300
+ ATOM 13 N CYS A 4 12.019 9.272 10.928 1.00 3.90 N
301
+ ATOM 14 CA CYS A 4 10.646 8.991 11.408 1.00 4.24 C
302
+ ATOM 15 C CYS A 4 10.654 8.793 12.919 1.00 3.72 C
303
+ ATOM 16 O CYS A 4 11.659 8.296 13.491 1.00 5.30 O
304
+ ATOM 17 N PRO A 5 9.561 9.108 13.563 1.00 3.96 N
305
+ ATOM 18 CA PRO A 5 9.448 9.034 15.012 1.00 4.25 C
306
+ ATOM 19 C PRO A 5 9.288 7.670 15.606 1.00 4.96 C
307
+ ATOM 20 O PRO A 5 9.490 7.519 16.819 1.00 7.44 O
308
+ ATOM 21 N SER A 6 8.875 6.686 14.796 1.00 4.83 N
309
+ ATOM 22 CA SER A 6 8.673 5.314 15.279 1.00 4.45 C
310
+ ATOM 23 C SER A 6 8.753 4.376 14.083 1.00 4.99 C
311
+ ATOM 24 O SER A 6 8.726 4.858 12.923 1.00 4.61 O
312
+ ATOM 25 N ILE A 7 8.881 3.075 14.358 1.00 4.94 N
313
+ ATOM 26 CA ILE A 7 8.912 2.083 13.258 1.00 6.33 C
314
+ ATOM 27 C ILE A 7 7.581 2.090 12.506 1.00 5.32 C
315
+ ATOM 28 O ILE A 7 7.670 2.031 11.245 1.00 6.85 O
316
+ ATOM 29 N VAL A 8 6.458 2.162 13.159 1.00 5.02 N
317
+ ATOM 30 CA VAL A 8 5.145 2.209 12.453 1.00 6.93 C
318
+ ATOM 31 C VAL A 8 5.115 3.379 11.461 1.00 5.39 C
319
+ ATOM 32 O VAL A 8 4.664 3.268 10.343 1.00 6.30 O
320
+ ATOM 33 N ALA A 9 5.606 4.546 11.941 1.00 3.73 N
321
+ ATOM 34 CA ALA A 9 5.598 5.767 11.082 1.00 3.56 C
322
+ ATOM 35 C ALA A 9 6.441 5.527 9.850 1.00 4.13 C
323
+ ATOM 36 O ALA A 9 6.052 5.933 8.744 1.00 4.36 O
324
+ ATOM 37 N ARG A 10 7.647 4.909 10.005 1.00 3.73 N
325
+ ATOM 38 CA ARG A 10 8.496 4.609 8.837 1.00 3.38 C
326
+ ATOM 39 C ARG A 10 7.798 3.609 7.876 1.00 3.47 C
327
+ ATOM 40 O ARG A 10 7.878 3.778 6.651 1.00 4.67 O
328
+ ATOM 41 N SER A 11 7.186 2.582 8.445 1.00 5.19 N
329
+ ATOM 42 CA SER A 11 6.500 1.584 7.565 1.00 4.60 C
330
+ ATOM 43 C SER A 11 5.382 2.313 6.773 1.00 4.84 C
331
+ ATOM 44 O SER A 11 5.213 2.016 5.557 1.00 5.84 O
332
+ ATOM 45 N ASN A 12 4.648 3.182 7.446 1.00 3.54 N
333
+ ATOM 46 CA ASN A 12 3.545 3.935 6.751 1.00 4.57 C
334
+ ATOM 47 C ASN A 12 4.107 4.851 5.691 1.00 4.14 C
335
+ ATOM 48 O ASN A 12 3.536 5.001 4.617 1.00 5.52 O
336
+ ATOM 49 N PHE A 13 5.259 5.498 6.005 1.00 3.43 N
337
+ ATOM 50 CA PHE A 13 5.929 6.358 5.055 1.00 3.49 C
338
+ ATOM 51 C PHE A 13 6.304 5.578 3.799 1.00 3.40 C
339
+ ATOM 52 O PHE A 13 6.136 6.072 2.653 1.00 4.07 O
340
+ ATOM 53 N ASN A 14 6.900 4.390 3.989 1.00 3.64 N
341
+ ATOM 54 CA ASN A 14 7.331 3.607 2.791 1.00 4.31 C
342
+ ATOM 55 C ASN A 14 6.116 3.210 1.915 1.00 3.98 C
343
+ ATOM 56 O ASN A 14 6.240 3.144 0.684 1.00 6.22 O
344
+ ATOM 57 N VAL A 15 4.993 2.927 2.571 1.00 3.76 N
345
+ ATOM 58 CA VAL A 15 3.782 2.599 1.742 1.00 3.98 C
346
+ ATOM 59 C VAL A 15 3.296 3.871 1.004 1.00 3.80 C
347
+ ATOM 60 O VAL A 15 2.947 3.817 -0.189 1.00 4.85 O
348
+ ATOM 61 N CYS A 16 3.321 4.987 1.720 1.00 3.79 N
349
+ ATOM 62 CA CYS A 16 2.890 6.285 1.126 1.00 3.54 C
350
+ ATOM 63 C CYS A 16 3.687 6.597 -0.111 1.00 3.48 C
351
+ ATOM 64 O CYS A 16 3.200 7.147 -1.103 1.00 4.63 O
352
+ ATOM 65 N ARG A 17 4.997 6.227 -0.100 1.00 3.99 N
353
+ ATOM 66 CA ARG A 17 5.895 6.489 -1.213 1.00 3.83 C
354
+ ATOM 67 C ARG A 17 5.738 5.560 -2.409 1.00 3.79 C
355
+ ATOM 68 O ARG A 17 6.228 5.901 -3.507 1.00 5.39 O
356
+ ATOM 69 N LEU A 18 5.051 4.411 -2.204 1.00 4.70 N
357
+ ATOM 70 CA LEU A 18 4.933 3.431 -3.326 1.00 5.46 C
358
+ ATOM 71 C LEU A 18 4.397 4.014 -4.620 1.00 5.13 C
359
+ ATOM 72 O LEU A 18 4.988 3.755 -5.687 1.00 5.55 O
360
+ ATOM 73 N PRO A 19 3.329 4.795 -4.543 1.00 4.28 N
361
+ ATOM 74 CA PRO A 19 2.792 5.376 -5.797 1.00 5.38 C
362
+ ATOM 75 C PRO A 19 3.573 6.540 -6.322 1.00 6.30 C
363
+ ATOM 76 O PRO A 19 3.260 7.045 -7.422 1.00 9.62 O
364
+ ATOM 77 N GLY A 20 4.565 7.047 -5.559 1.00 4.94 N
365
+ ATOM 78 CA GLY A 20 5.366 8.191 -6.018 1.00 5.39 C
366
+ ATOM 79 C GLY A 20 5.007 9.481 -5.280 1.00 5.03 C
367
+ ATOM 80 O GLY A 20 5.535 10.510 -5.730 1.00 7.34 O
368
+ ATOM 81 N THR A 21 4.181 9.438 -4.262 1.00 4.10 N
369
+ ATOM 82 CA THR A 21 3.767 10.609 -3.513 1.00 3.94 C
370
+ ATOM 83 C THR A 21 5.017 11.397 -3.042 1.00 3.96 C
371
+ ATOM 84 O THR A 21 5.947 10.757 -2.523 1.00 5.82 O
372
+ ATOM 85 N PRO A 22 4.971 12.703 -3.176 1.00 5.04 N
373
+ ATOM 86 CA PRO A 22 6.143 13.513 -2.696 1.00 4.69 C
374
+ ATOM 87 C PRO A 22 6.400 13.233 -1.225 1.00 4.19 C
375
+ ATOM 88 O PRO A 22 5.485 13.061 -0.382 1.00 4.47 O
376
+ ATOM 89 N GLU A 23 7.728 13.297 -0.921 1.00 5.16 N
377
+ ATOM 90 CA GLU A 23 8.114 13.103 0.500 1.00 5.31 C
378
+ ATOM 91 C GLU A 23 7.427 14.073 1.410 1.00 4.11 C
379
+ ATOM 92 O GLU A 23 7.036 13.682 2.540 1.00 5.11 O
380
+ ATOM 93 N ALA A 24 7.212 15.334 0.966 1.00 4.56 N
381
+ ATOM 94 CA ALA A 24 6.614 16.317 1.913 1.00 4.49 C
382
+ ATOM 95 C ALA A 24 5.212 15.936 2.350 1.00 4.10 C
383
+ ATOM 96 O ALA A 24 4.782 16.166 3.495 1.00 5.64 O
384
+ ATOM 97 N ILE A 25 4.445 15.318 1.405 1.00 4.37 N
385
+ ATOM 98 CA ILE A 25 3.074 14.894 1.756 1.00 5.44 C
386
+ ATOM 99 C ILE A 25 3.085 13.643 2.645 1.00 4.32 C
387
+ ATOM 100 O ILE A 25 2.315 13.523 3.578 1.00 4.72 O
388
+ ATOM 101 N CYS A 26 4.032 12.764 2.313 1.00 3.92 N
389
+ ATOM 102 CA CYS A 26 4.180 11.549 3.187 1.00 4.37 C
390
+ ATOM 103 C CYS A 26 4.632 11.944 4.596 1.00 3.95 C
391
+ ATOM 104 O CYS A 26 4.227 11.252 5.547 1.00 4.74 O
392
+ ATOM 105 N ALA A 27 5.408 13.012 4.694 1.00 3.89 N
393
+ ATOM 106 CA ALA A 27 5.879 13.502 6.026 1.00 4.43 C
394
+ ATOM 107 C ALA A 27 4.696 13.908 6.882 1.00 4.26 C
395
+ ATOM 108 O ALA A 27 4.528 13.422 8.025 1.00 5.44 O
396
+ ATOM 109 N THR A 28 3.827 14.802 6.358 1.00 4.53 N
397
+ ATOM 110 CA THR A 28 2.691 15.221 7.194 1.00 5.08 C
398
+ ATOM 111 C THR A 28 1.672 14.132 7.434 1.00 4.62 C
399
+ ATOM 112 O THR A 28 0.947 14.112 8.468 1.00 7.80 O
400
+ ATOM 113 N TYR A 29 1.621 13.190 6.511 1.00 5.01 N
401
+ ATOM 114 CA TYR A 29 0.715 12.045 6.657 1.00 6.60 C
402
+ ATOM 115 C TYR A 29 1.125 11.125 7.815 1.00 4.92 C
403
+ ATOM 116 O TYR A 29 0.286 10.632 8.545 1.00 7.13 O
404
+ ATOM 117 N THR A 30 2.470 10.984 7.995 1.00 5.31 N
405
+ ATOM 118 CA THR A 30 2.986 9.994 8.950 1.00 5.70 C
406
+ ATOM 119 C THR A 30 3.609 10.505 10.230 1.00 6.28 C
407
+ ATOM 120 O THR A 30 3.766 9.715 11.186 1.00 8.77 O
408
+ ATOM 121 N GLY A 31 3.984 11.764 10.241 1.00 4.99 N
409
+ ATOM 122 CA GLY A 31 4.769 12.336 11.360 1.00 5.50 C
410
+ ATOM 123 C GLY A 31 6.255 12.243 11.106 1.00 4.19 C
411
+ ATOM 124 O GLY A 31 7.037 12.750 11.954 1.00 6.12 O
412
+ ATOM 125 N CYS A 32 6.710 11.631 9.992 1.00 4.30 N
413
+ ATOM 126 CA CYS A 32 8.140 11.694 9.635 1.00 4.89 C
414
+ ATOM 127 C CYS A 32 8.500 13.141 9.206 1.00 5.50 C
415
+ ATOM 128 O CYS A 32 7.581 13.949 8.944 1.00 5.82 O
416
+ ATOM 129 N ILE A 33 9.793 13.410 9.173 1.00 6.02 N
417
+ ATOM 130 CA ILE A 33 10.280 14.760 8.823 1.00 5.24 C
418
+ ATOM 131 C ILE A 33 11.346 14.658 7.743 1.00 5.16 C
419
+ ATOM 132 O ILE A 33 11.971 13.583 7.552 1.00 7.19 O
420
+ ATOM 133 N ILE A 34 11.490 15.773 7.038 1.00 5.52 N
421
+ ATOM 134 CA ILE A 34 12.552 15.877 6.036 1.00 6.82 C
422
+ ATOM 135 C ILE A 34 13.590 16.917 6.560 1.00 6.92 C
423
+ ATOM 136 O ILE A 34 13.168 18.006 6.945 1.00 9.22 O
424
+ ATOM 137 N ILE A 35 14.856 16.493 6.536 1.00 7.06 N
425
+ ATOM 138 CA ILE A 35 15.930 17.454 6.941 1.00 7.52 C
426
+ ATOM 139 C ILE A 35 16.913 17.550 5.819 1.00 6.63 C
427
+ ATOM 140 O ILE A 35 17.097 16.660 4.970 1.00 7.90 O
428
+ ATOM 141 N PRO A 36 17.664 18.669 5.806 1.00 8.07 N
429
+ ATOM 142 CA PRO A 36 18.635 18.861 4.738 1.00 8.78 C
430
+ ATOM 143 C PRO A 36 19.925 18.042 4.949 1.00 8.31 C
431
+ ATOM 144 O PRO A 36 20.593 17.742 3.945 1.00 9.09 O
432
+ ATOM 145 N GLY A 37 20.172 17.730 6.217 1.00 8.48 N
433
+ ATOM 146 CA GLY A 37 21.452 16.969 6.513 1.00 9.20 C
434
+ ATOM 147 C GLY A 37 21.143 15.478 6.427 1.00 10.41 C
435
+ ATOM 148 O GLY A 37 20.138 15.023 5.878 1.00 12.06 O
436
+ ATOM 149 N ALA A 38 22.055 14.701 7.032 1.00 9.24 N
437
+ ATOM 150 CA ALA A 38 22.019 13.242 7.020 1.00 9.24 C
438
+ ATOM 151 C ALA A 38 21.944 12.628 8.396 1.00 9.60 C
439
+ ATOM 152 O ALA A 38 21.869 11.387 8.435 1.00 13.65 O
440
+ ATOM 153 N THR A 39 21.894 13.435 9.436 1.00 8.70 N
441
+ ATOM 154 CA THR A 39 21.936 12.911 10.809 1.00 9.46 C
442
+ ATOM 155 C THR A 39 20.615 13.191 11.521 1.00 8.32 C
443
+ ATOM 156 O THR A 39 20.357 14.317 11.948 1.00 9.89 O
444
+ ATOM 157 N CYS A 40 19.827 12.110 11.642 1.00 7.64 N
445
+ ATOM 158 CA CYS A 40 18.504 12.312 12.298 1.00 8.05 C
446
+ ATOM 159 C CYS A 40 18.684 12.451 13.784 1.00 7.63 C
447
+ ATOM 160 O CYS A 40 19.533 11.718 14.362 1.00 9.64 O
448
+ ATOM 161 N PRO A 41 17.880 13.266 14.426 1.00 8.00 N
449
+ ATOM 162 CA PRO A 41 17.924 13.421 15.877 1.00 8.96 C
450
+ ATOM 163 C PRO A 41 17.392 12.206 16.594 1.00 9.06 C
451
+ ATOM 164 O PRO A 41 16.652 11.368 16.033 1.00 8.82 O
452
+ ATOM 165 N GLY A 42 17.728 12.124 17.884 1.00 7.55 N
453
+ ATOM 166 CA GLY A 42 17.334 10.956 18.691 1.00 8.00 C
454
+ ATOM 167 C GLY A 42 15.875 10.688 18.871 1.00 7.22 C
455
+ ATOM 168 O GLY A 42 15.434 9.550 19.166 1.00 8.41 O
456
+ ATOM 169 N ASP A 43 15.036 11.747 18.715 1.00 5.54 N
457
+ ATOM 170 CA ASP A 43 13.564 11.573 18.836 1.00 5.85 C
458
+ ATOM 171 C ASP A 43 12.936 11.227 17.470 1.00 5.87 C
459
+ ATOM 172 O ASP A 43 11.720 11.040 17.428 1.00 7.29 O
460
+ ATOM 173 N TYR A 44 13.725 11.174 16.425 1.00 5.22 N
461
+ ATOM 174 CA TYR A 44 13.257 10.745 15.081 1.00 5.56 C
462
+ ATOM 175 C TYR A 44 14.275 9.687 14.612 1.00 4.61 C
463
+ ATOM 176 O TYR A 44 14.930 9.862 13.568 1.00 6.04 O
464
+ ATOM 177 N ALA A 45 14.342 8.640 15.422 1.00 4.76 N
465
+ ATOM 178 CA ALA A 45 15.445 7.667 15.246 1.00 5.89 C
466
+ ATOM 179 C ALA A 45 15.171 6.533 14.280 1.00 6.67 C
467
+ ATOM 180 O ALA A 45 16.093 5.705 14.039 1.00 7.56 O
468
+ ATOM 181 N ASN A 46 13.966 6.502 13.739 1.00 5.80 N
469
+ ATOM 182 CA ASN A 46 13.512 5.395 12.878 1.00 6.15 C
470
+ ATOM 183 C ASN A 46 13.311 5.853 11.455 1.00 6.61 C
471
+ ATOM 184 O ASN A 46 13.733 6.929 11.026 1.00 7.18 O
472
+ END`;
473
+
474
+ // Two stretches of the chain carry a value, peaking at 2.4 in the middle of
475
+ // each. Residue 8 is the ninth residue of the chain, since the map is 0-based.
476
+ const RESIDUE_VALUES = new Map([
477
+ [8, 1.2],
478
+ [9, 1.6],
479
+ [10, 2.0],
480
+ [11, 2.4],
481
+ [12, 2.0],
482
+ [13, 1.6],
483
+ [14, 1.2],
484
+ [28, 0.96],
485
+ [29, 1.44],
486
+ [30, 1.92],
487
+ [31, 2.4],
488
+ [32, 1.92],
489
+ [33, 1.44],
490
+ ]);
491
+
492
+ function App() {
493
+ return (
494
+ <div className="app" style={{ height: 480 }}>
495
+ <ProteinStructureViewer
496
+ pdb={PDB}
497
+ residueOverlay={{
498
+ colorScale: PLASMA_COLOR_SCALE,
499
+ label: "Feature activation",
500
+ max: 2.4,
501
+ readoutLabel: "Activation",
502
+ tooltip: "Max activation across all residues for this feature",
503
+ values: RESIDUE_VALUES,
504
+ }}
505
+ />
506
+ </div>
507
+ );
508
+ }
509
+
510
+ export default App;
511
+ ```
512
+
513
+ ### Selection and stats
514
+
515
+ Selection is controlled. Clicking a residue calls `onResidueClick` with a `ResidueRef`; echoing its `index` back through `selectedResidue` zooms the camera in on it, and setting it to `null` zooms back out. Clicking empty space fires `onSelectionClear`.
516
+
517
+ A `ResidueRef` carries the residue in each addressing scheme a caller might need. `index` is the viewer's own key, shared with `plddt` and `residueOverlay`, and counts residues in file order straight through a chain break. `chainId` and `seqId` are what the file says, which is what the sequence panel displays and what the system that produced the structure will recognise. On a single chain numbered from 1 the two agree; on a complex they do not, so map a click back onto your own numbering with `chainId` and `seqId` rather than arithmetic on `index`.
518
+
519
+ `stats` fills the three legend slots along the bottom. Those slots are replaced in place while a residue is hovered or selected - by the residue label, its overlay value, and its pLDDT - so the columns never shift. Pass `null` for a slot to reserve its column without rendering anything.
520
+
521
+ **Example: SelectableProteinStructureViewer**
522
+
523
+ ```tsx
524
+ // Selection is controlled, so the parent decides what a click means. Here a
525
+ // click selects the residue and clicking it again clears it, which is what makes
526
+ // the camera zoom in and then back out.
527
+ //
528
+ // The stats slots are replaced in place while a residue is hovered or selected,
529
+ // so the three columns never shift. A null slot reserves its column without
530
+ // rendering anything - useful when a stat is still loading.
531
+ //
532
+ // The structure below is crambin (PDB 1CRN), trimmed to the backbone atoms the
533
+ // polymer cartoon traces. onResidueClick hands back a ResidueRef; its `index`
534
+ // is the 0-based position selectedResidue expects, while `chainId` and `seqId`
535
+ // carry the numbering the file uses.
536
+
537
+ import { ProteinStructureViewer } from "@czi-sds/data-viz";
538
+ import { useState } from "react";
539
+
540
+ const PDB = `
541
+ ATOM 1 N THR A 1 17.047 14.099 3.625 1.00 13.79 N
542
+ ATOM 2 CA THR A 1 16.967 12.784 4.338 1.00 10.80 C
543
+ ATOM 3 C THR A 1 15.685 12.755 5.133 1.00 9.19 C
544
+ ATOM 4 O THR A 1 15.268 13.825 5.594 1.00 9.85 O
545
+ ATOM 5 N THR A 2 15.115 11.555 5.265 1.00 7.81 N
546
+ ATOM 6 CA THR A 2 13.856 11.469 6.066 1.00 8.31 C
547
+ ATOM 7 C THR A 2 14.164 10.785 7.379 1.00 5.80 C
548
+ ATOM 8 O THR A 2 14.993 9.862 7.443 1.00 6.94 O
549
+ ATOM 9 N CYS A 3 13.488 11.241 8.417 1.00 5.24 N
550
+ ATOM 10 CA CYS A 3 13.660 10.707 9.787 1.00 5.39 C
551
+ ATOM 11 C CYS A 3 12.269 10.431 10.323 1.00 4.45 C
552
+ ATOM 12 O CYS A 3 11.393 11.308 10.185 1.00 6.54 O
553
+ ATOM 13 N CYS A 4 12.019 9.272 10.928 1.00 3.90 N
554
+ ATOM 14 CA CYS A 4 10.646 8.991 11.408 1.00 4.24 C
555
+ ATOM 15 C CYS A 4 10.654 8.793 12.919 1.00 3.72 C
556
+ ATOM 16 O CYS A 4 11.659 8.296 13.491 1.00 5.30 O
557
+ ATOM 17 N PRO A 5 9.561 9.108 13.563 1.00 3.96 N
558
+ ATOM 18 CA PRO A 5 9.448 9.034 15.012 1.00 4.25 C
559
+ ATOM 19 C PRO A 5 9.288 7.670 15.606 1.00 4.96 C
560
+ ATOM 20 O PRO A 5 9.490 7.519 16.819 1.00 7.44 O
561
+ ATOM 21 N SER A 6 8.875 6.686 14.796 1.00 4.83 N
562
+ ATOM 22 CA SER A 6 8.673 5.314 15.279 1.00 4.45 C
563
+ ATOM 23 C SER A 6 8.753 4.376 14.083 1.00 4.99 C
564
+ ATOM 24 O SER A 6 8.726 4.858 12.923 1.00 4.61 O
565
+ ATOM 25 N ILE A 7 8.881 3.075 14.358 1.00 4.94 N
566
+ ATOM 26 CA ILE A 7 8.912 2.083 13.258 1.00 6.33 C
567
+ ATOM 27 C ILE A 7 7.581 2.090 12.506 1.00 5.32 C
568
+ ATOM 28 O ILE A 7 7.670 2.031 11.245 1.00 6.85 O
569
+ ATOM 29 N VAL A 8 6.458 2.162 13.159 1.00 5.02 N
570
+ ATOM 30 CA VAL A 8 5.145 2.209 12.453 1.00 6.93 C
571
+ ATOM 31 C VAL A 8 5.115 3.379 11.461 1.00 5.39 C
572
+ ATOM 32 O VAL A 8 4.664 3.268 10.343 1.00 6.30 O
573
+ ATOM 33 N ALA A 9 5.606 4.546 11.941 1.00 3.73 N
574
+ ATOM 34 CA ALA A 9 5.598 5.767 11.082 1.00 3.56 C
575
+ ATOM 35 C ALA A 9 6.441 5.527 9.850 1.00 4.13 C
576
+ ATOM 36 O ALA A 9 6.052 5.933 8.744 1.00 4.36 O
577
+ ATOM 37 N ARG A 10 7.647 4.909 10.005 1.00 3.73 N
578
+ ATOM 38 CA ARG A 10 8.496 4.609 8.837 1.00 3.38 C
579
+ ATOM 39 C ARG A 10 7.798 3.609 7.876 1.00 3.47 C
580
+ ATOM 40 O ARG A 10 7.878 3.778 6.651 1.00 4.67 O
581
+ ATOM 41 N SER A 11 7.186 2.582 8.445 1.00 5.19 N
582
+ ATOM 42 CA SER A 11 6.500 1.584 7.565 1.00 4.60 C
583
+ ATOM 43 C SER A 11 5.382 2.313 6.773 1.00 4.84 C
584
+ ATOM 44 O SER A 11 5.213 2.016 5.557 1.00 5.84 O
585
+ ATOM 45 N ASN A 12 4.648 3.182 7.446 1.00 3.54 N
586
+ ATOM 46 CA ASN A 12 3.545 3.935 6.751 1.00 4.57 C
587
+ ATOM 47 C ASN A 12 4.107 4.851 5.691 1.00 4.14 C
588
+ ATOM 48 O ASN A 12 3.536 5.001 4.617 1.00 5.52 O
589
+ ATOM 49 N PHE A 13 5.259 5.498 6.005 1.00 3.43 N
590
+ ATOM 50 CA PHE A 13 5.929 6.358 5.055 1.00 3.49 C
591
+ ATOM 51 C PHE A 13 6.304 5.578 3.799 1.00 3.40 C
592
+ ATOM 52 O PHE A 13 6.136 6.072 2.653 1.00 4.07 O
593
+ ATOM 53 N ASN A 14 6.900 4.390 3.989 1.00 3.64 N
594
+ ATOM 54 CA ASN A 14 7.331 3.607 2.791 1.00 4.31 C
595
+ ATOM 55 C ASN A 14 6.116 3.210 1.915 1.00 3.98 C
596
+ ATOM 56 O ASN A 14 6.240 3.144 0.684 1.00 6.22 O
597
+ ATOM 57 N VAL A 15 4.993 2.927 2.571 1.00 3.76 N
598
+ ATOM 58 CA VAL A 15 3.782 2.599 1.742 1.00 3.98 C
599
+ ATOM 59 C VAL A 15 3.296 3.871 1.004 1.00 3.80 C
600
+ ATOM 60 O VAL A 15 2.947 3.817 -0.189 1.00 4.85 O
601
+ ATOM 61 N CYS A 16 3.321 4.987 1.720 1.00 3.79 N
602
+ ATOM 62 CA CYS A 16 2.890 6.285 1.126 1.00 3.54 C
603
+ ATOM 63 C CYS A 16 3.687 6.597 -0.111 1.00 3.48 C
604
+ ATOM 64 O CYS A 16 3.200 7.147 -1.103 1.00 4.63 O
605
+ ATOM 65 N ARG A 17 4.997 6.227 -0.100 1.00 3.99 N
606
+ ATOM 66 CA ARG A 17 5.895 6.489 -1.213 1.00 3.83 C
607
+ ATOM 67 C ARG A 17 5.738 5.560 -2.409 1.00 3.79 C
608
+ ATOM 68 O ARG A 17 6.228 5.901 -3.507 1.00 5.39 O
609
+ ATOM 69 N LEU A 18 5.051 4.411 -2.204 1.00 4.70 N
610
+ ATOM 70 CA LEU A 18 4.933 3.431 -3.326 1.00 5.46 C
611
+ ATOM 71 C LEU A 18 4.397 4.014 -4.620 1.00 5.13 C
612
+ ATOM 72 O LEU A 18 4.988 3.755 -5.687 1.00 5.55 O
613
+ ATOM 73 N PRO A 19 3.329 4.795 -4.543 1.00 4.28 N
614
+ ATOM 74 CA PRO A 19 2.792 5.376 -5.797 1.00 5.38 C
615
+ ATOM 75 C PRO A 19 3.573 6.540 -6.322 1.00 6.30 C
616
+ ATOM 76 O PRO A 19 3.260 7.045 -7.422 1.00 9.62 O
617
+ ATOM 77 N GLY A 20 4.565 7.047 -5.559 1.00 4.94 N
618
+ ATOM 78 CA GLY A 20 5.366 8.191 -6.018 1.00 5.39 C
619
+ ATOM 79 C GLY A 20 5.007 9.481 -5.280 1.00 5.03 C
620
+ ATOM 80 O GLY A 20 5.535 10.510 -5.730 1.00 7.34 O
621
+ ATOM 81 N THR A 21 4.181 9.438 -4.262 1.00 4.10 N
622
+ ATOM 82 CA THR A 21 3.767 10.609 -3.513 1.00 3.94 C
623
+ ATOM 83 C THR A 21 5.017 11.397 -3.042 1.00 3.96 C
624
+ ATOM 84 O THR A 21 5.947 10.757 -2.523 1.00 5.82 O
625
+ ATOM 85 N PRO A 22 4.971 12.703 -3.176 1.00 5.04 N
626
+ ATOM 86 CA PRO A 22 6.143 13.513 -2.696 1.00 4.69 C
627
+ ATOM 87 C PRO A 22 6.400 13.233 -1.225 1.00 4.19 C
628
+ ATOM 88 O PRO A 22 5.485 13.061 -0.382 1.00 4.47 O
629
+ ATOM 89 N GLU A 23 7.728 13.297 -0.921 1.00 5.16 N
630
+ ATOM 90 CA GLU A 23 8.114 13.103 0.500 1.00 5.31 C
631
+ ATOM 91 C GLU A 23 7.427 14.073 1.410 1.00 4.11 C
632
+ ATOM 92 O GLU A 23 7.036 13.682 2.540 1.00 5.11 O
633
+ ATOM 93 N ALA A 24 7.212 15.334 0.966 1.00 4.56 N
634
+ ATOM 94 CA ALA A 24 6.614 16.317 1.913 1.00 4.49 C
635
+ ATOM 95 C ALA A 24 5.212 15.936 2.350 1.00 4.10 C
636
+ ATOM 96 O ALA A 24 4.782 16.166 3.495 1.00 5.64 O
637
+ ATOM 97 N ILE A 25 4.445 15.318 1.405 1.00 4.37 N
638
+ ATOM 98 CA ILE A 25 3.074 14.894 1.756 1.00 5.44 C
639
+ ATOM 99 C ILE A 25 3.085 13.643 2.645 1.00 4.32 C
640
+ ATOM 100 O ILE A 25 2.315 13.523 3.578 1.00 4.72 O
641
+ ATOM 101 N CYS A 26 4.032 12.764 2.313 1.00 3.92 N
642
+ ATOM 102 CA CYS A 26 4.180 11.549 3.187 1.00 4.37 C
643
+ ATOM 103 C CYS A 26 4.632 11.944 4.596 1.00 3.95 C
644
+ ATOM 104 O CYS A 26 4.227 11.252 5.547 1.00 4.74 O
645
+ ATOM 105 N ALA A 27 5.408 13.012 4.694 1.00 3.89 N
646
+ ATOM 106 CA ALA A 27 5.879 13.502 6.026 1.00 4.43 C
647
+ ATOM 107 C ALA A 27 4.696 13.908 6.882 1.00 4.26 C
648
+ ATOM 108 O ALA A 27 4.528 13.422 8.025 1.00 5.44 O
649
+ ATOM 109 N THR A 28 3.827 14.802 6.358 1.00 4.53 N
650
+ ATOM 110 CA THR A 28 2.691 15.221 7.194 1.00 5.08 C
651
+ ATOM 111 C THR A 28 1.672 14.132 7.434 1.00 4.62 C
652
+ ATOM 112 O THR A 28 0.947 14.112 8.468 1.00 7.80 O
653
+ ATOM 113 N TYR A 29 1.621 13.190 6.511 1.00 5.01 N
654
+ ATOM 114 CA TYR A 29 0.715 12.045 6.657 1.00 6.60 C
655
+ ATOM 115 C TYR A 29 1.125 11.125 7.815 1.00 4.92 C
656
+ ATOM 116 O TYR A 29 0.286 10.632 8.545 1.00 7.13 O
657
+ ATOM 117 N THR A 30 2.470 10.984 7.995 1.00 5.31 N
658
+ ATOM 118 CA THR A 30 2.986 9.994 8.950 1.00 5.70 C
659
+ ATOM 119 C THR A 30 3.609 10.505 10.230 1.00 6.28 C
660
+ ATOM 120 O THR A 30 3.766 9.715 11.186 1.00 8.77 O
661
+ ATOM 121 N GLY A 31 3.984 11.764 10.241 1.00 4.99 N
662
+ ATOM 122 CA GLY A 31 4.769 12.336 11.360 1.00 5.50 C
663
+ ATOM 123 C GLY A 31 6.255 12.243 11.106 1.00 4.19 C
664
+ ATOM 124 O GLY A 31 7.037 12.750 11.954 1.00 6.12 O
665
+ ATOM 125 N CYS A 32 6.710 11.631 9.992 1.00 4.30 N
666
+ ATOM 126 CA CYS A 32 8.140 11.694 9.635 1.00 4.89 C
667
+ ATOM 127 C CYS A 32 8.500 13.141 9.206 1.00 5.50 C
668
+ ATOM 128 O CYS A 32 7.581 13.949 8.944 1.00 5.82 O
669
+ ATOM 129 N ILE A 33 9.793 13.410 9.173 1.00 6.02 N
670
+ ATOM 130 CA ILE A 33 10.280 14.760 8.823 1.00 5.24 C
671
+ ATOM 131 C ILE A 33 11.346 14.658 7.743 1.00 5.16 C
672
+ ATOM 132 O ILE A 33 11.971 13.583 7.552 1.00 7.19 O
673
+ ATOM 133 N ILE A 34 11.490 15.773 7.038 1.00 5.52 N
674
+ ATOM 134 CA ILE A 34 12.552 15.877 6.036 1.00 6.82 C
675
+ ATOM 135 C ILE A 34 13.590 16.917 6.560 1.00 6.92 C
676
+ ATOM 136 O ILE A 34 13.168 18.006 6.945 1.00 9.22 O
677
+ ATOM 137 N ILE A 35 14.856 16.493 6.536 1.00 7.06 N
678
+ ATOM 138 CA ILE A 35 15.930 17.454 6.941 1.00 7.52 C
679
+ ATOM 139 C ILE A 35 16.913 17.550 5.819 1.00 6.63 C
680
+ ATOM 140 O ILE A 35 17.097 16.660 4.970 1.00 7.90 O
681
+ ATOM 141 N PRO A 36 17.664 18.669 5.806 1.00 8.07 N
682
+ ATOM 142 CA PRO A 36 18.635 18.861 4.738 1.00 8.78 C
683
+ ATOM 143 C PRO A 36 19.925 18.042 4.949 1.00 8.31 C
684
+ ATOM 144 O PRO A 36 20.593 17.742 3.945 1.00 9.09 O
685
+ ATOM 145 N GLY A 37 20.172 17.730 6.217 1.00 8.48 N
686
+ ATOM 146 CA GLY A 37 21.452 16.969 6.513 1.00 9.20 C
687
+ ATOM 147 C GLY A 37 21.143 15.478 6.427 1.00 10.41 C
688
+ ATOM 148 O GLY A 37 20.138 15.023 5.878 1.00 12.06 O
689
+ ATOM 149 N ALA A 38 22.055 14.701 7.032 1.00 9.24 N
690
+ ATOM 150 CA ALA A 38 22.019 13.242 7.020 1.00 9.24 C
691
+ ATOM 151 C ALA A 38 21.944 12.628 8.396 1.00 9.60 C
692
+ ATOM 152 O ALA A 38 21.869 11.387 8.435 1.00 13.65 O
693
+ ATOM 153 N THR A 39 21.894 13.435 9.436 1.00 8.70 N
694
+ ATOM 154 CA THR A 39 21.936 12.911 10.809 1.00 9.46 C
695
+ ATOM 155 C THR A 39 20.615 13.191 11.521 1.00 8.32 C
696
+ ATOM 156 O THR A 39 20.357 14.317 11.948 1.00 9.89 O
697
+ ATOM 157 N CYS A 40 19.827 12.110 11.642 1.00 7.64 N
698
+ ATOM 158 CA CYS A 40 18.504 12.312 12.298 1.00 8.05 C
699
+ ATOM 159 C CYS A 40 18.684 12.451 13.784 1.00 7.63 C
700
+ ATOM 160 O CYS A 40 19.533 11.718 14.362 1.00 9.64 O
701
+ ATOM 161 N PRO A 41 17.880 13.266 14.426 1.00 8.00 N
702
+ ATOM 162 CA PRO A 41 17.924 13.421 15.877 1.00 8.96 C
703
+ ATOM 163 C PRO A 41 17.392 12.206 16.594 1.00 9.06 C
704
+ ATOM 164 O PRO A 41 16.652 11.368 16.033 1.00 8.82 O
705
+ ATOM 165 N GLY A 42 17.728 12.124 17.884 1.00 7.55 N
706
+ ATOM 166 CA GLY A 42 17.334 10.956 18.691 1.00 8.00 C
707
+ ATOM 167 C GLY A 42 15.875 10.688 18.871 1.00 7.22 C
708
+ ATOM 168 O GLY A 42 15.434 9.550 19.166 1.00 8.41 O
709
+ ATOM 169 N ASP A 43 15.036 11.747 18.715 1.00 5.54 N
710
+ ATOM 170 CA ASP A 43 13.564 11.573 18.836 1.00 5.85 C
711
+ ATOM 171 C ASP A 43 12.936 11.227 17.470 1.00 5.87 C
712
+ ATOM 172 O ASP A 43 11.720 11.040 17.428 1.00 7.29 O
713
+ ATOM 173 N TYR A 44 13.725 11.174 16.425 1.00 5.22 N
714
+ ATOM 174 CA TYR A 44 13.257 10.745 15.081 1.00 5.56 C
715
+ ATOM 175 C TYR A 44 14.275 9.687 14.612 1.00 4.61 C
716
+ ATOM 176 O TYR A 44 14.930 9.862 13.568 1.00 6.04 O
717
+ ATOM 177 N ALA A 45 14.342 8.640 15.422 1.00 4.76 N
718
+ ATOM 178 CA ALA A 45 15.445 7.667 15.246 1.00 5.89 C
719
+ ATOM 179 C ALA A 45 15.171 6.533 14.280 1.00 6.67 C
720
+ ATOM 180 O ALA A 45 16.093 5.705 14.039 1.00 7.56 O
721
+ ATOM 181 N ASN A 46 13.966 6.502 13.739 1.00 5.80 N
722
+ ATOM 182 CA ASN A 46 13.512 5.395 12.878 1.00 6.15 C
723
+ ATOM 183 C ASN A 46 13.311 5.853 11.455 1.00 6.61 C
724
+ ATOM 184 O ASN A 46 13.733 6.929 11.026 1.00 7.18 O
725
+ END`;
726
+
727
+ const PLDDT = [
728
+ 0.45, 0.515, 0.557, 0.569, 0.567, 0.578, 0.618, 0.681, 0.742, 0.777, 0.782,
729
+ 0.773, 0.776, 0.807, 0.86, 0.909, 0.933, 0.924, 0.902, 0.892, 0.91, 0.947,
730
+ 0.98, 0.98, 0.961, 0.92, 0.892, 0.892, 0.911, 0.927, 0.915, 0.873, 0.818,
731
+ 0.776, 0.762, 0.769, 0.772, 0.748, 0.694, 0.629, 0.578, 0.556, 0.556, 0.552,
732
+ 0.522, 0.463,
733
+ ];
734
+
735
+ function App() {
736
+ const [selectedResidue, setSelectedResidue] = useState<number | null>(null);
737
+
738
+ return (
739
+ <div className="app" style={{ height: 480 }}>
740
+ <ProteinStructureViewer
741
+ onResidueClick={({ index }) =>
742
+ setSelectedResidue((prev) => (prev === index ? null : index))
743
+ }
744
+ onSelectionClear={() => setSelectedResidue(null)}
745
+ pdb={PDB}
746
+ plddt={PLDDT}
747
+ selectedResidue={selectedResidue}
748
+ stats={[
749
+ null,
750
+ { label: "pTM", value: "0.874" },
751
+ { label: "Mean pLDDT", value: "0.781" },
752
+ ]}
753
+ />
754
+ </div>
755
+ );
756
+ }
757
+
758
+ export default App;
759
+ ```
760
+
761
+ ### Structure only
762
+
763
+ Three props hide the chrome layered around the 3D view. `showSequenceViewer` drops the sequence panel, `showLegend` drops the stats and the color key, and `showAxes` drops the orientation widget and its reset-camera button. Turn off all three when the surrounding page supplies its own controls.
764
+
765
+ Hiding the legend does not disable the coloring. The structure below is still colored by pLDDT confidence, only without the key that explains it.
766
+
767
+ **Example: MinimalProteinStructureViewer**
768
+
769
+ ```tsx
770
+ // Three props hide the chrome layered around the 3D view:
771
+ // `showSequenceViewer` drops the sequence panel, `showLegend` drops the stats
772
+ // and the color key, and `showAxes` drops the orientation widget and its
773
+ // reset-camera button. What remains is the structure on its own, for a page
774
+ // that supplies its own controls.
775
+ //
776
+ // Hiding the legend does not disable the coloring: the structure below is still
777
+ // colored by pLDDT confidence, only without the key that explains it.
778
+ //
779
+ // The structure is crambin (PDB 1CRN), trimmed to the backbone atoms the
780
+ // polymer cartoon traces.
781
+
782
+ import { ProteinStructureViewer } from "@czi-sds/data-viz";
783
+ import { useTheme } from "@mui/material";
784
+
785
+ const PDB = `
786
+ ATOM 1 N THR A 1 17.047 14.099 3.625 1.00 13.79 N
787
+ ATOM 2 CA THR A 1 16.967 12.784 4.338 1.00 10.80 C
788
+ ATOM 3 C THR A 1 15.685 12.755 5.133 1.00 9.19 C
789
+ ATOM 4 O THR A 1 15.268 13.825 5.594 1.00 9.85 O
790
+ ATOM 5 N THR A 2 15.115 11.555 5.265 1.00 7.81 N
791
+ ATOM 6 CA THR A 2 13.856 11.469 6.066 1.00 8.31 C
792
+ ATOM 7 C THR A 2 14.164 10.785 7.379 1.00 5.80 C
793
+ ATOM 8 O THR A 2 14.993 9.862 7.443 1.00 6.94 O
794
+ ATOM 9 N CYS A 3 13.488 11.241 8.417 1.00 5.24 N
795
+ ATOM 10 CA CYS A 3 13.660 10.707 9.787 1.00 5.39 C
796
+ ATOM 11 C CYS A 3 12.269 10.431 10.323 1.00 4.45 C
797
+ ATOM 12 O CYS A 3 11.393 11.308 10.185 1.00 6.54 O
798
+ ATOM 13 N CYS A 4 12.019 9.272 10.928 1.00 3.90 N
799
+ ATOM 14 CA CYS A 4 10.646 8.991 11.408 1.00 4.24 C
800
+ ATOM 15 C CYS A 4 10.654 8.793 12.919 1.00 3.72 C
801
+ ATOM 16 O CYS A 4 11.659 8.296 13.491 1.00 5.30 O
802
+ ATOM 17 N PRO A 5 9.561 9.108 13.563 1.00 3.96 N
803
+ ATOM 18 CA PRO A 5 9.448 9.034 15.012 1.00 4.25 C
804
+ ATOM 19 C PRO A 5 9.288 7.670 15.606 1.00 4.96 C
805
+ ATOM 20 O PRO A 5 9.490 7.519 16.819 1.00 7.44 O
806
+ ATOM 21 N SER A 6 8.875 6.686 14.796 1.00 4.83 N
807
+ ATOM 22 CA SER A 6 8.673 5.314 15.279 1.00 4.45 C
808
+ ATOM 23 C SER A 6 8.753 4.376 14.083 1.00 4.99 C
809
+ ATOM 24 O SER A 6 8.726 4.858 12.923 1.00 4.61 O
810
+ ATOM 25 N ILE A 7 8.881 3.075 14.358 1.00 4.94 N
811
+ ATOM 26 CA ILE A 7 8.912 2.083 13.258 1.00 6.33 C
812
+ ATOM 27 C ILE A 7 7.581 2.090 12.506 1.00 5.32 C
813
+ ATOM 28 O ILE A 7 7.670 2.031 11.245 1.00 6.85 O
814
+ ATOM 29 N VAL A 8 6.458 2.162 13.159 1.00 5.02 N
815
+ ATOM 30 CA VAL A 8 5.145 2.209 12.453 1.00 6.93 C
816
+ ATOM 31 C VAL A 8 5.115 3.379 11.461 1.00 5.39 C
817
+ ATOM 32 O VAL A 8 4.664 3.268 10.343 1.00 6.30 O
818
+ ATOM 33 N ALA A 9 5.606 4.546 11.941 1.00 3.73 N
819
+ ATOM 34 CA ALA A 9 5.598 5.767 11.082 1.00 3.56 C
820
+ ATOM 35 C ALA A 9 6.441 5.527 9.850 1.00 4.13 C
821
+ ATOM 36 O ALA A 9 6.052 5.933 8.744 1.00 4.36 O
822
+ ATOM 37 N ARG A 10 7.647 4.909 10.005 1.00 3.73 N
823
+ ATOM 38 CA ARG A 10 8.496 4.609 8.837 1.00 3.38 C
824
+ ATOM 39 C ARG A 10 7.798 3.609 7.876 1.00 3.47 C
825
+ ATOM 40 O ARG A 10 7.878 3.778 6.651 1.00 4.67 O
826
+ ATOM 41 N SER A 11 7.186 2.582 8.445 1.00 5.19 N
827
+ ATOM 42 CA SER A 11 6.500 1.584 7.565 1.00 4.60 C
828
+ ATOM 43 C SER A 11 5.382 2.313 6.773 1.00 4.84 C
829
+ ATOM 44 O SER A 11 5.213 2.016 5.557 1.00 5.84 O
830
+ ATOM 45 N ASN A 12 4.648 3.182 7.446 1.00 3.54 N
831
+ ATOM 46 CA ASN A 12 3.545 3.935 6.751 1.00 4.57 C
832
+ ATOM 47 C ASN A 12 4.107 4.851 5.691 1.00 4.14 C
833
+ ATOM 48 O ASN A 12 3.536 5.001 4.617 1.00 5.52 O
834
+ ATOM 49 N PHE A 13 5.259 5.498 6.005 1.00 3.43 N
835
+ ATOM 50 CA PHE A 13 5.929 6.358 5.055 1.00 3.49 C
836
+ ATOM 51 C PHE A 13 6.304 5.578 3.799 1.00 3.40 C
837
+ ATOM 52 O PHE A 13 6.136 6.072 2.653 1.00 4.07 O
838
+ ATOM 53 N ASN A 14 6.900 4.390 3.989 1.00 3.64 N
839
+ ATOM 54 CA ASN A 14 7.331 3.607 2.791 1.00 4.31 C
840
+ ATOM 55 C ASN A 14 6.116 3.210 1.915 1.00 3.98 C
841
+ ATOM 56 O ASN A 14 6.240 3.144 0.684 1.00 6.22 O
842
+ ATOM 57 N VAL A 15 4.993 2.927 2.571 1.00 3.76 N
843
+ ATOM 58 CA VAL A 15 3.782 2.599 1.742 1.00 3.98 C
844
+ ATOM 59 C VAL A 15 3.296 3.871 1.004 1.00 3.80 C
845
+ ATOM 60 O VAL A 15 2.947 3.817 -0.189 1.00 4.85 O
846
+ ATOM 61 N CYS A 16 3.321 4.987 1.720 1.00 3.79 N
847
+ ATOM 62 CA CYS A 16 2.890 6.285 1.126 1.00 3.54 C
848
+ ATOM 63 C CYS A 16 3.687 6.597 -0.111 1.00 3.48 C
849
+ ATOM 64 O CYS A 16 3.200 7.147 -1.103 1.00 4.63 O
850
+ ATOM 65 N ARG A 17 4.997 6.227 -0.100 1.00 3.99 N
851
+ ATOM 66 CA ARG A 17 5.895 6.489 -1.213 1.00 3.83 C
852
+ ATOM 67 C ARG A 17 5.738 5.560 -2.409 1.00 3.79 C
853
+ ATOM 68 O ARG A 17 6.228 5.901 -3.507 1.00 5.39 O
854
+ ATOM 69 N LEU A 18 5.051 4.411 -2.204 1.00 4.70 N
855
+ ATOM 70 CA LEU A 18 4.933 3.431 -3.326 1.00 5.46 C
856
+ ATOM 71 C LEU A 18 4.397 4.014 -4.620 1.00 5.13 C
857
+ ATOM 72 O LEU A 18 4.988 3.755 -5.687 1.00 5.55 O
858
+ ATOM 73 N PRO A 19 3.329 4.795 -4.543 1.00 4.28 N
859
+ ATOM 74 CA PRO A 19 2.792 5.376 -5.797 1.00 5.38 C
860
+ ATOM 75 C PRO A 19 3.573 6.540 -6.322 1.00 6.30 C
861
+ ATOM 76 O PRO A 19 3.260 7.045 -7.422 1.00 9.62 O
862
+ ATOM 77 N GLY A 20 4.565 7.047 -5.559 1.00 4.94 N
863
+ ATOM 78 CA GLY A 20 5.366 8.191 -6.018 1.00 5.39 C
864
+ ATOM 79 C GLY A 20 5.007 9.481 -5.280 1.00 5.03 C
865
+ ATOM 80 O GLY A 20 5.535 10.510 -5.730 1.00 7.34 O
866
+ ATOM 81 N THR A 21 4.181 9.438 -4.262 1.00 4.10 N
867
+ ATOM 82 CA THR A 21 3.767 10.609 -3.513 1.00 3.94 C
868
+ ATOM 83 C THR A 21 5.017 11.397 -3.042 1.00 3.96 C
869
+ ATOM 84 O THR A 21 5.947 10.757 -2.523 1.00 5.82 O
870
+ ATOM 85 N PRO A 22 4.971 12.703 -3.176 1.00 5.04 N
871
+ ATOM 86 CA PRO A 22 6.143 13.513 -2.696 1.00 4.69 C
872
+ ATOM 87 C PRO A 22 6.400 13.233 -1.225 1.00 4.19 C
873
+ ATOM 88 O PRO A 22 5.485 13.061 -0.382 1.00 4.47 O
874
+ ATOM 89 N GLU A 23 7.728 13.297 -0.921 1.00 5.16 N
875
+ ATOM 90 CA GLU A 23 8.114 13.103 0.500 1.00 5.31 C
876
+ ATOM 91 C GLU A 23 7.427 14.073 1.410 1.00 4.11 C
877
+ ATOM 92 O GLU A 23 7.036 13.682 2.540 1.00 5.11 O
878
+ ATOM 93 N ALA A 24 7.212 15.334 0.966 1.00 4.56 N
879
+ ATOM 94 CA ALA A 24 6.614 16.317 1.913 1.00 4.49 C
880
+ ATOM 95 C ALA A 24 5.212 15.936 2.350 1.00 4.10 C
881
+ ATOM 96 O ALA A 24 4.782 16.166 3.495 1.00 5.64 O
882
+ ATOM 97 N ILE A 25 4.445 15.318 1.405 1.00 4.37 N
883
+ ATOM 98 CA ILE A 25 3.074 14.894 1.756 1.00 5.44 C
884
+ ATOM 99 C ILE A 25 3.085 13.643 2.645 1.00 4.32 C
885
+ ATOM 100 O ILE A 25 2.315 13.523 3.578 1.00 4.72 O
886
+ ATOM 101 N CYS A 26 4.032 12.764 2.313 1.00 3.92 N
887
+ ATOM 102 CA CYS A 26 4.180 11.549 3.187 1.00 4.37 C
888
+ ATOM 103 C CYS A 26 4.632 11.944 4.596 1.00 3.95 C
889
+ ATOM 104 O CYS A 26 4.227 11.252 5.547 1.00 4.74 O
890
+ ATOM 105 N ALA A 27 5.408 13.012 4.694 1.00 3.89 N
891
+ ATOM 106 CA ALA A 27 5.879 13.502 6.026 1.00 4.43 C
892
+ ATOM 107 C ALA A 27 4.696 13.908 6.882 1.00 4.26 C
893
+ ATOM 108 O ALA A 27 4.528 13.422 8.025 1.00 5.44 O
894
+ ATOM 109 N THR A 28 3.827 14.802 6.358 1.00 4.53 N
895
+ ATOM 110 CA THR A 28 2.691 15.221 7.194 1.00 5.08 C
896
+ ATOM 111 C THR A 28 1.672 14.132 7.434 1.00 4.62 C
897
+ ATOM 112 O THR A 28 0.947 14.112 8.468 1.00 7.80 O
898
+ ATOM 113 N TYR A 29 1.621 13.190 6.511 1.00 5.01 N
899
+ ATOM 114 CA TYR A 29 0.715 12.045 6.657 1.00 6.60 C
900
+ ATOM 115 C TYR A 29 1.125 11.125 7.815 1.00 4.92 C
901
+ ATOM 116 O TYR A 29 0.286 10.632 8.545 1.00 7.13 O
902
+ ATOM 117 N THR A 30 2.470 10.984 7.995 1.00 5.31 N
903
+ ATOM 118 CA THR A 30 2.986 9.994 8.950 1.00 5.70 C
904
+ ATOM 119 C THR A 30 3.609 10.505 10.230 1.00 6.28 C
905
+ ATOM 120 O THR A 30 3.766 9.715 11.186 1.00 8.77 O
906
+ ATOM 121 N GLY A 31 3.984 11.764 10.241 1.00 4.99 N
907
+ ATOM 122 CA GLY A 31 4.769 12.336 11.360 1.00 5.50 C
908
+ ATOM 123 C GLY A 31 6.255 12.243 11.106 1.00 4.19 C
909
+ ATOM 124 O GLY A 31 7.037 12.750 11.954 1.00 6.12 O
910
+ ATOM 125 N CYS A 32 6.710 11.631 9.992 1.00 4.30 N
911
+ ATOM 126 CA CYS A 32 8.140 11.694 9.635 1.00 4.89 C
912
+ ATOM 127 C CYS A 32 8.500 13.141 9.206 1.00 5.50 C
913
+ ATOM 128 O CYS A 32 7.581 13.949 8.944 1.00 5.82 O
914
+ ATOM 129 N ILE A 33 9.793 13.410 9.173 1.00 6.02 N
915
+ ATOM 130 CA ILE A 33 10.280 14.760 8.823 1.00 5.24 C
916
+ ATOM 131 C ILE A 33 11.346 14.658 7.743 1.00 5.16 C
917
+ ATOM 132 O ILE A 33 11.971 13.583 7.552 1.00 7.19 O
918
+ ATOM 133 N ILE A 34 11.490 15.773 7.038 1.00 5.52 N
919
+ ATOM 134 CA ILE A 34 12.552 15.877 6.036 1.00 6.82 C
920
+ ATOM 135 C ILE A 34 13.590 16.917 6.560 1.00 6.92 C
921
+ ATOM 136 O ILE A 34 13.168 18.006 6.945 1.00 9.22 O
922
+ ATOM 137 N ILE A 35 14.856 16.493 6.536 1.00 7.06 N
923
+ ATOM 138 CA ILE A 35 15.930 17.454 6.941 1.00 7.52 C
924
+ ATOM 139 C ILE A 35 16.913 17.550 5.819 1.00 6.63 C
925
+ ATOM 140 O ILE A 35 17.097 16.660 4.970 1.00 7.90 O
926
+ ATOM 141 N PRO A 36 17.664 18.669 5.806 1.00 8.07 N
927
+ ATOM 142 CA PRO A 36 18.635 18.861 4.738 1.00 8.78 C
928
+ ATOM 143 C PRO A 36 19.925 18.042 4.949 1.00 8.31 C
929
+ ATOM 144 O PRO A 36 20.593 17.742 3.945 1.00 9.09 O
930
+ ATOM 145 N GLY A 37 20.172 17.730 6.217 1.00 8.48 N
931
+ ATOM 146 CA GLY A 37 21.452 16.969 6.513 1.00 9.20 C
932
+ ATOM 147 C GLY A 37 21.143 15.478 6.427 1.00 10.41 C
933
+ ATOM 148 O GLY A 37 20.138 15.023 5.878 1.00 12.06 O
934
+ ATOM 149 N ALA A 38 22.055 14.701 7.032 1.00 9.24 N
935
+ ATOM 150 CA ALA A 38 22.019 13.242 7.020 1.00 9.24 C
936
+ ATOM 151 C ALA A 38 21.944 12.628 8.396 1.00 9.60 C
937
+ ATOM 152 O ALA A 38 21.869 11.387 8.435 1.00 13.65 O
938
+ ATOM 153 N THR A 39 21.894 13.435 9.436 1.00 8.70 N
939
+ ATOM 154 CA THR A 39 21.936 12.911 10.809 1.00 9.46 C
940
+ ATOM 155 C THR A 39 20.615 13.191 11.521 1.00 8.32 C
941
+ ATOM 156 O THR A 39 20.357 14.317 11.948 1.00 9.89 O
942
+ ATOM 157 N CYS A 40 19.827 12.110 11.642 1.00 7.64 N
943
+ ATOM 158 CA CYS A 40 18.504 12.312 12.298 1.00 8.05 C
944
+ ATOM 159 C CYS A 40 18.684 12.451 13.784 1.00 7.63 C
945
+ ATOM 160 O CYS A 40 19.533 11.718 14.362 1.00 9.64 O
946
+ ATOM 161 N PRO A 41 17.880 13.266 14.426 1.00 8.00 N
947
+ ATOM 162 CA PRO A 41 17.924 13.421 15.877 1.00 8.96 C
948
+ ATOM 163 C PRO A 41 17.392 12.206 16.594 1.00 9.06 C
949
+ ATOM 164 O PRO A 41 16.652 11.368 16.033 1.00 8.82 O
950
+ ATOM 165 N GLY A 42 17.728 12.124 17.884 1.00 7.55 N
951
+ ATOM 166 CA GLY A 42 17.334 10.956 18.691 1.00 8.00 C
952
+ ATOM 167 C GLY A 42 15.875 10.688 18.871 1.00 7.22 C
953
+ ATOM 168 O GLY A 42 15.434 9.550 19.166 1.00 8.41 O
954
+ ATOM 169 N ASP A 43 15.036 11.747 18.715 1.00 5.54 N
955
+ ATOM 170 CA ASP A 43 13.564 11.573 18.836 1.00 5.85 C
956
+ ATOM 171 C ASP A 43 12.936 11.227 17.470 1.00 5.87 C
957
+ ATOM 172 O ASP A 43 11.720 11.040 17.428 1.00 7.29 O
958
+ ATOM 173 N TYR A 44 13.725 11.174 16.425 1.00 5.22 N
959
+ ATOM 174 CA TYR A 44 13.257 10.745 15.081 1.00 5.56 C
960
+ ATOM 175 C TYR A 44 14.275 9.687 14.612 1.00 4.61 C
961
+ ATOM 176 O TYR A 44 14.930 9.862 13.568 1.00 6.04 O
962
+ ATOM 177 N ALA A 45 14.342 8.640 15.422 1.00 4.76 N
963
+ ATOM 178 CA ALA A 45 15.445 7.667 15.246 1.00 5.89 C
964
+ ATOM 179 C ALA A 45 15.171 6.533 14.280 1.00 6.67 C
965
+ ATOM 180 O ALA A 45 16.093 5.705 14.039 1.00 7.56 O
966
+ ATOM 181 N ASN A 46 13.966 6.502 13.739 1.00 5.80 N
967
+ ATOM 182 CA ASN A 46 13.512 5.395 12.878 1.00 6.15 C
968
+ ATOM 183 C ASN A 46 13.311 5.853 11.455 1.00 6.61 C
969
+ ATOM 184 O ASN A 46 13.733 6.929 11.026 1.00 7.18 O
970
+ END`;
971
+
972
+ const PLDDT = [
973
+ 0.45, 0.515, 0.557, 0.569, 0.567, 0.578, 0.618, 0.681, 0.742, 0.777, 0.782,
974
+ 0.773, 0.776, 0.807, 0.86, 0.909, 0.933, 0.924, 0.902, 0.892, 0.91, 0.947,
975
+ 0.98, 0.98, 0.961, 0.92, 0.892, 0.892, 0.911, 0.927, 0.915, 0.873, 0.818,
976
+ 0.776, 0.762, 0.769, 0.772, 0.748, 0.694, 0.629, 0.578, 0.556, 0.556, 0.552,
977
+ 0.522, 0.463,
978
+ ];
979
+
980
+ function App() {
981
+ const theme = useTheme();
982
+ const mode = theme.palette.mode;
983
+
984
+ return (
985
+ <div className="app" style={{ height: 240 }}>
986
+ <ProteinStructureViewer
987
+ pdb={PDB}
988
+ plddt={PLDDT}
989
+ showAxes={false}
990
+ showLegend={false}
991
+ showSequenceViewer={false}
992
+ backgroundColor={mode === "light" ? "#f8f8f8" : "#1e1e1e"}
993
+ />
994
+ </div>
995
+ );
996
+ }
997
+
998
+ export default App;
999
+ ```
1000
+
1001
+ ## Theming
1002
+
1003
+ The viewer reads the active SDS theme for its hover and selection colors and for the sequence panel, and picks a light or dark canvas background to match. Two props override those backgrounds independently: `backgroundColor` for the 3D canvas and `sequenceViewerBackgroundColor` for the sequence panel.
1004
+
1005
+ The two accept different formats. Mol\* needs the canvas color as a concrete `#RRGGBB` value, so `backgroundColor` is limited to hex. The sequence panel is styled with CSS, so `sequenceViewerBackgroundColor` takes any CSS color. It paints the panel, the fade that masks residues scrolling under the header, and the "no structure available" state, so the panel stays one color throughout.
1006
+
1007
+ ## Props
1008
+
1009
+ The viewer spreads any remaining props onto its root div, so standard HTML attributes such as `className`, `id`, and `data-testid` work as usual.
1010
+
1011
+ | Name | Type | Default | Description |
1012
+ | ------------------------------- | ----------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1013
+ | `pdb` | `string` | - (required) | The structure to render, as raw PDB text. |
1014
+ | `plddt` | `number[] \| null` | - | Per-residue pLDDT confidence on a 0-1 scale, in chain order. When supplied, the structure is colored by confidence unless `residueOverlay` takes over. Residues past the end of the array fall back to mid confidence. |
1015
+ | `residueOverlay` | `ResidueValueOverlay \| null` | - | Per-residue values painted over the structure, replacing pLDDT coloring while set. See the table below for its shape. |
1016
+ | `selectedResidue` | `number \| null` | `null` | 0-based index of the selected residue. Controlled: setting it zooms the camera in on that residue, and clearing it zooms back out. |
1017
+ | `stats` | `(StructureStat \| null)[]` | - | Up to three whole-structure stats shown along the bottom. A `null` entry reserves its column without rendering anything, so the columns never shift as values come and go. |
1018
+ | `backgroundColor` | `string` | - | Canvas background, as `#RRGGBB`. Defaults to the SDS theme's base background, so the canvas follows the surrounding page in both modes. |
1019
+ | `sequenceViewerBackgroundColor` | `string` | - | Sequence panel background, as any CSS color. Defaults to the SDS theme's primary surface, so the panel follows the surrounding page in both modes. |
1020
+ | `showAxes` | `boolean` | `true` | Show the orientation axes widget and the reset-camera button. |
1021
+ | `showSequenceViewer` | `boolean` | `true` | Show the sequence panel pinned along the bottom of the viewer. |
1022
+ | `showLegend` | `boolean` | `true` | Show the stats and color scale legend overlaid on the viewer. |
1023
+ | `onResidueClick` | `function` | - | `(residue: ResidueRef) => void`. Called with the clicked residue: `index` (0-based, across the whole structure, and what `selectedResidue` takes), `compId`, `chainId`, `seqId` and `insCode`. |
1024
+ | `onResidueHover` | `function` | - | `(residue: ResidueRef \| null) => void`. Called as the pointer moves over residues, and with `null` when it leaves the structure. |
1025
+ | `onSelectionClear` | `function` | - | `() => void`. Called when the user clicks empty space, clearing the selection. |
1026
+
1027
+ ### ResidueValueOverlay
1028
+
1029
+ | Name | Type | Default | Description |
1030
+ | -------------- | --------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
1031
+ | `values` | `Map<number, number>` | - (required) | 0-based residue index to value. Residues absent from the map read as `0`, so they render in the neutral gray rather than at the bottom of the scale. |
1032
+ | `max` | `number` | - (required) | The value mapped to the top of the color scale. |
1033
+ | `min` | `number` | `0` | Values at or below this render in a neutral gray rather than on the scale. |
1034
+ | `colorScale` | `ColorScale` | `PLASMA_COLOR_SCALE` | Scale used to color residues and to draw the legend. |
1035
+ | `label` | `string` | - | Legend caption, for example "Feature activation". |
1036
+ | `tooltip` | `string` | - | Help tooltip attached to the legend caption. |
1037
+ | `readoutLabel` | `string` | `"Value"` | Label for the per-residue readout that replaces a stat slot on hover. |
1038
+
1039
+ ### StructureStat
1040
+
1041
+ | Name | Type | Default | Description |
1042
+ | ------- | -------- | ------------ | ------------------------------------------------ |
1043
+ | `value` | `string` | - (required) | The stat's value, already formatted for display. |
1044
+ | `label` | `string` | - (required) | The caption shown beneath the value. |