@czi-sds/data-viz 2.2.0 → 2.4.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.
- package/dist/HeatmapChart.cjs.d.ts +2 -0
- package/dist/HeatmapChart.cjs.js +8 -0
- package/dist/HeatmapChart.esm.d.ts +2 -0
- package/dist/HeatmapChart.esm.js +3 -0
- package/dist/ProteinStructureViewer.cjs.d.ts +2 -0
- package/dist/ProteinStructureViewer.cjs.js +14 -0
- package/dist/ProteinStructureViewer.esm.d.ts +2 -0
- package/dist/ProteinStructureViewer.esm.js +3 -0
- package/dist/StackedBarChart.cjs.d.ts +2 -0
- package/dist/StackedBarChart.cjs.js +8 -0
- package/dist/StackedBarChart.esm.d.ts +2 -0
- package/dist/StackedBarChart.esm.js +3 -0
- package/dist/colorScales.cjs.d.ts +2 -0
- package/dist/colorScales.cjs.js +6 -0
- package/dist/colorScales.esm.d.ts +2 -0
- package/dist/colorScales.esm.js +3 -0
- package/dist/index.cjs.d.ts +5 -735
- package/dist/index.cjs.js +16 -5465
- package/dist/index.esm.d.ts +5 -737
- package/dist/index.esm.js +5 -5423
- package/dist/shared/HeatmapChart.cjs.js +349 -0
- package/dist/shared/HeatmapChart.esm.js +342 -0
- package/dist/shared/ProteinStructureViewer.cjs.js +4780 -0
- package/dist/shared/ProteinStructureViewer.esm.js +4728 -0
- package/dist/shared/StackedBarChart.cjs.js +489 -0
- package/dist/shared/StackedBarChart.esm.js +483 -0
- package/dist/shared/colorScales.cjs.d.ts +45 -0
- package/dist/shared/colorScales.cjs.js +126 -0
- package/dist/shared/colorScales.esm.d.ts +45 -0
- package/dist/shared/colorScales.esm.js +103 -0
- package/dist/shared/index.cjs.d.ts +183 -0
- package/dist/shared/index.esm.d.ts +183 -0
- package/dist/shared/index2.cjs.d.ts +389 -0
- package/dist/shared/index2.esm.d.ts +391 -0
- package/dist/shared/index3.cjs.d.ts +166 -0
- package/dist/shared/index3.esm.d.ts +166 -0
- package/dist/shared/objectSpread2.cjs.js +124 -0
- package/dist/shared/objectSpread2.esm.js +85 -0
- package/package.json +64 -2
package/dist/index.esm.d.ts
CHANGED
|
@@ -1,737 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
import { CustomElementProperty } from "molstar/lib/mol-model-props/common/custom-element-property";
|
|
7
|
-
|
|
8
|
-
//#region src/common/colorScales.d.ts
|
|
9
|
-
/** RGB triplet with each channel in the range 0-255. */
|
|
10
|
-
type Rgb = [number, number, number];
|
|
11
|
-
/** A stop on a continuous color scale, positioned at `t` in the range 0-1. */
|
|
12
|
-
interface ContinuousColorStop {
|
|
13
|
-
t: number;
|
|
14
|
-
color: string;
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* A band on a stepped color scale. `threshold` is the upper bound of the band
|
|
18
|
-
* on the normalized 0-1 value range; `label` is rendered above the band in the
|
|
19
|
-
* legend.
|
|
20
|
-
*/
|
|
21
|
-
interface SteppedColorStop {
|
|
22
|
-
threshold: number;
|
|
23
|
-
color: string;
|
|
24
|
-
label: string;
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* How values map to colors, both in a visualization and in its legend. A
|
|
28
|
-
* continuous scale interpolates between its stops and renders as a gradient
|
|
29
|
-
* bar; a stepped scale renders as discrete bands.
|
|
30
|
-
*/
|
|
31
|
-
type ColorScale = {
|
|
32
|
-
kind: "continuous";
|
|
33
|
-
stops: ContinuousColorStop[];
|
|
34
|
-
} | {
|
|
35
|
-
kind: "stepped";
|
|
36
|
-
stops: SteppedColorStop[];
|
|
37
|
-
};
|
|
38
|
-
/**
|
|
39
|
-
* Perceptually uniform sequential scale (matplotlib's plasma), the default for
|
|
40
|
-
* value overlays.
|
|
41
|
-
*/
|
|
42
|
-
declare const PLASMA_COLOR_SCALE: ColorScale;
|
|
43
|
-
/**
|
|
44
|
-
* Colors a raw value against a scale, normalizing it into `min`-`max` first.
|
|
45
|
-
* Returns null when the value sits at or below `min`, or when the range is
|
|
46
|
-
* degenerate, so callers can fall back to a neutral color.
|
|
47
|
-
*/
|
|
48
|
-
declare function sampleColorScale(scale: ColorScale, value: number, max: number, min?: number): Rgb | null;
|
|
49
|
-
/** CSS `linear-gradient` spanning a continuous scale, for the legend bar. */
|
|
50
|
-
declare function toCssGradient(stops: ContinuousColorStop[]): string;
|
|
51
|
-
//#endregion
|
|
52
|
-
//#region src/core/HeatmapChart/hooks/utils.d.ts
|
|
53
|
-
interface CreateChartOptionsProps {
|
|
54
|
-
/**
|
|
55
|
-
* The crosshair following the pointer. One object applies to both axes; a
|
|
56
|
-
* two-entry array configures them separately.
|
|
57
|
-
* https://echarts.apache.org/en/option.html#axisPointer
|
|
58
|
-
*/
|
|
59
|
-
axisPointer?: EChartsOption["axisPointer"];
|
|
60
|
-
/**
|
|
61
|
-
* The cells, as a flat array of objects whose fields are named by `encode`.
|
|
62
|
-
* The data point object shape can be whatever you like, but it must be consistent with the `encode` option
|
|
63
|
-
* For example, if the data point shape is:
|
|
64
|
-
* {
|
|
65
|
-
* geneIndex: 0,
|
|
66
|
-
* cellTypeIndex: 0,
|
|
67
|
-
* percentage: 0.5
|
|
68
|
-
* }
|
|
69
|
-
* and you want geneIndex to be encoded to x axis and cellTypeIndex to be encoded to y axis, then make sure your encode option is:
|
|
70
|
-
* encode: {
|
|
71
|
-
* x: 'geneIndex',
|
|
72
|
-
* y: 'cellTypeIndex'
|
|
73
|
-
* }
|
|
74
|
-
*/
|
|
75
|
-
data: DatasetComponentOption["source"];
|
|
76
|
-
/**
|
|
77
|
-
* ECharts' dataZoom configuration for that window, merged over the defaults
|
|
78
|
-
* it sets. One object applies to both axes; a two-entry array configures them
|
|
79
|
-
* separately. It reaches the chart only while `camera.active` is true.
|
|
80
|
-
*
|
|
81
|
-
* The `dataZoom` prop is utilized for implementing zoom functionality within a
|
|
82
|
-
* specific area of the chart. This feature empowers users to inspect data in
|
|
83
|
-
* granular detail, obtain an overview of the entire dataset, or eliminate
|
|
84
|
-
* outlier points.
|
|
85
|
-
* By applying the `dataZoom` prop while locking the zoom level, the chart
|
|
86
|
-
* efficiently renders a confined portion of the heatmap. This selective
|
|
87
|
-
* rendering strategy becomes especially advantageous when dealing with
|
|
88
|
-
* extensive datasets. Instead of rendering the entire heatmap at once,
|
|
89
|
-
* the chart dynamically loads and renders specific segments as the user
|
|
90
|
-
* scrolls through the data. This approach optimizes performance and enables
|
|
91
|
-
* the creation of heatmaps with large amounts of data.
|
|
92
|
-
* https://echarts.apache.org/en/option.html#dataZoom
|
|
93
|
-
*/
|
|
94
|
-
dataZoom?: EChartsOption["dataZoom"];
|
|
95
|
-
/**
|
|
96
|
-
* Renders only a window of the grid, measured in cells, and lets the pointer
|
|
97
|
-
* pan it. Sizes are ignored unless `active` is true.
|
|
98
|
-
*
|
|
99
|
-
* The `camera` prop is utilized for implementing camera view port functionality
|
|
100
|
-
* within a specific area of the chart. This feature empowers users to render
|
|
101
|
-
* a confined portion of the heatmap. This selective rendering strategy becomes
|
|
102
|
-
* especially advantageous when dealing with extensive datasets. Instead of
|
|
103
|
-
* rendering the entire heatmap at once, the chart dynamically loads and renders
|
|
104
|
-
* specific segments as the user scrolls through the data. This approach optimizes
|
|
105
|
-
* performance and enables the creation of heatmaps with large amounts of data.
|
|
106
|
-
*
|
|
107
|
-
* The `height` and `width` properties are used to specify the dimensions of the
|
|
108
|
-
* camera view port. The `active` property is used to enable or disable the camera
|
|
109
|
-
* view port functionality.
|
|
110
|
-
*/
|
|
111
|
-
camera?: {
|
|
112
|
-
active: boolean;
|
|
113
|
-
height: number;
|
|
114
|
-
width: number;
|
|
115
|
-
};
|
|
116
|
-
/**
|
|
117
|
-
* How a cell is drawn while the pointer is over it. Takes the same shape as
|
|
118
|
-
* `itemStyle`: color, border, opacity.
|
|
119
|
-
* https://echarts.apache.org/en/option.html#series-scatter.emphasis
|
|
120
|
-
*/
|
|
121
|
-
emphasis?: ScatterSeriesOption["emphasis"];
|
|
122
|
-
/**
|
|
123
|
-
* The categories along the x axis. A cell's encoded x value is an index into
|
|
124
|
-
* this array.
|
|
125
|
-
* For example:
|
|
126
|
-
* [{ value: "gene1", textStyle: { color: "red" } }, "gene2", "gene3"]
|
|
127
|
-
*/
|
|
128
|
-
xAxisData: CategoryAxisData;
|
|
129
|
-
/**
|
|
130
|
-
* The categories along the y axis.
|
|
131
|
-
* For example:
|
|
132
|
-
* [{ value: "cellType1", textStyle: { color: "red" } }, "cellType2", "cellType3"]
|
|
133
|
-
*/
|
|
134
|
-
yAxisData: CategoryAxisData;
|
|
135
|
-
/**
|
|
136
|
-
* Width of the chart in pixels. Must be greater than zero; the component
|
|
137
|
-
* throws otherwise.
|
|
138
|
-
*/
|
|
139
|
-
width: number;
|
|
140
|
-
/**
|
|
141
|
-
* Height of the chart in pixels, under the same rule.
|
|
142
|
-
*/
|
|
143
|
-
height: number;
|
|
144
|
-
/**
|
|
145
|
-
* Which fields of a data item place it on each axis. Omitting it leaves
|
|
146
|
-
* ECharts to guess from the field order.
|
|
147
|
-
* For example, if the data is:
|
|
148
|
-
* {
|
|
149
|
-
* geneIndex: 0,
|
|
150
|
-
* cellTypeIndex: 0,
|
|
151
|
-
* percentage: 0.5
|
|
152
|
-
* }
|
|
153
|
-
* and we want to encode `geneIndex` to x axis and `cellTypeIndex` to y axis, then
|
|
154
|
-
* encode: {
|
|
155
|
-
* x: 'geneIndex',
|
|
156
|
-
* y: 'cellTypeIndex'
|
|
157
|
-
* }
|
|
158
|
-
* https://echarts.apache.org/en/option.html#series-scatter.encode
|
|
159
|
-
*/
|
|
160
|
-
encode?: {
|
|
161
|
-
x: string;
|
|
162
|
-
y: string;
|
|
163
|
-
};
|
|
164
|
-
/**
|
|
165
|
-
* How a cell is painted. Its color accepts a callback receiving the data
|
|
166
|
-
* item, which is how a value becomes a color.
|
|
167
|
-
* https://echarts.apache.org/en/option.html#series-scatter.itemStyle
|
|
168
|
-
*/
|
|
169
|
-
itemStyle?: ScatterSeriesOption["itemStyle"];
|
|
170
|
-
/**
|
|
171
|
-
* The shape of a cell. Circles turn the grid into a dot plot, where diameter
|
|
172
|
-
* can carry a second measurement.
|
|
173
|
-
*/
|
|
174
|
-
symbol?: "circle" | "rect" | "roundRect";
|
|
175
|
-
/**
|
|
176
|
-
* Cell size in pixels: one number, a [width, height] pair, or a callback
|
|
177
|
-
* given the data item. Set it to the cell pitch for a solid grid.
|
|
178
|
-
*
|
|
179
|
-
* `symbolSize` can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is 10.
|
|
180
|
-
*
|
|
181
|
-
* If size of symbols needs to be different, you can set with callback function in the following format:
|
|
182
|
-
*
|
|
183
|
-
* (value: Array|number, params: Object) => number|Array
|
|
184
|
-
*
|
|
185
|
-
* The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.
|
|
186
|
-
* https://echarts.apache.org/en/option.html#series-scatter.symbolSize
|
|
187
|
-
*/
|
|
188
|
-
symbolSize?: ScatterSeriesOption["symbolSize"];
|
|
189
|
-
/**
|
|
190
|
-
* Where the plotting area sits inside the container. The function form
|
|
191
|
-
* receives the computed default, for insetting it without recomputing the
|
|
192
|
-
* size.
|
|
193
|
-
* https://echarts.apache.org/en/option.html#grid
|
|
194
|
-
*/
|
|
195
|
-
grid?: EChartsOption["grid"] | ((defaultOption: EChartsOption["grid"]) => EChartsOption["grid"]);
|
|
196
|
-
/**
|
|
197
|
-
* Anything else ECharts understands, merged over the generated options.
|
|
198
|
-
* https://echarts.apache.org/en/option.html
|
|
199
|
-
*/
|
|
200
|
-
options?: EChartsOption;
|
|
201
|
-
/**
|
|
202
|
-
* ECharts event listeners by name. Each handler gets the raw event, whose
|
|
203
|
-
* data property is the cell, and the chart instance.
|
|
204
|
-
* https://echarts.apache.org/en/api.html#events
|
|
205
|
-
*/
|
|
206
|
-
onEvents?: Record<string, (event: unknown, chart: ECharts) => void>;
|
|
207
|
-
}
|
|
208
|
-
type OrdinalRawValue = string | number;
|
|
209
|
-
/**
|
|
210
|
-
* (thuang): This copies echarts' CategoryAxisBaseOption["data"] type, since it's not exported
|
|
211
|
-
*/
|
|
212
|
-
type CategoryAxisData = (OrdinalRawValue | {
|
|
213
|
-
value: OrdinalRawValue;
|
|
214
|
-
/**
|
|
215
|
-
* (thuang): This should be echarts `TextCommonOption` type, but it's not exported
|
|
216
|
-
*/
|
|
217
|
-
textStyle?: never;
|
|
218
|
-
})[];
|
|
219
|
-
//#endregion
|
|
220
|
-
//#region src/core/HeatmapChart/index.d.ts
|
|
221
|
-
interface HeatmapChartProps extends HTMLAttributes<HTMLDivElement>, CreateChartOptionsProps {
|
|
222
|
-
/**
|
|
223
|
-
* Which renderer ECharts initialises with. Canvas copes better with very
|
|
224
|
-
* large grids. Changing it rebuilds the chart.
|
|
225
|
-
* @default "svg"
|
|
226
|
-
*/
|
|
227
|
-
echartsRendererMode?: "svg" | "canvas";
|
|
228
|
-
}
|
|
229
|
-
declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<HeatmapChartProps & import("react").RefAttributes<HTMLDivElement>>>;
|
|
230
|
-
//#endregion
|
|
231
|
-
//#region src/core/ProteinStructureViewer/ProteinStructureViewer.types.d.ts
|
|
232
|
-
/**
|
|
233
|
-
* Per-residue values painted onto the structure in place of the default pLDDT
|
|
234
|
-
* coloring, along with the legend that describes them.
|
|
235
|
-
*/
|
|
236
|
-
interface ResidueValueOverlay {
|
|
237
|
-
/** 0-based residue index to value. Residues absent from the map read as 0. */
|
|
238
|
-
values: Map<number, number>;
|
|
239
|
-
/** Value mapped to the top of the color scale. */
|
|
240
|
-
max: number;
|
|
241
|
-
/**
|
|
242
|
-
* Values at or below this render in a neutral gray rather than on the scale.
|
|
243
|
-
* Values above it are normalized into `min`-`max` before being sampled, so
|
|
244
|
-
* this is also what the legend's lower tick reports.
|
|
245
|
-
* @default 0
|
|
246
|
-
*/
|
|
247
|
-
min?: number;
|
|
248
|
-
/**
|
|
249
|
-
* Scale used to color residues and to draw the legend.
|
|
250
|
-
* @default PLASMA_COLOR_SCALE
|
|
251
|
-
*/
|
|
252
|
-
colorScale?: ColorScale;
|
|
253
|
-
/** Legend caption, e.g. "Feature activation". */
|
|
254
|
-
label?: string;
|
|
255
|
-
/**
|
|
256
|
-
* Title of the help tooltip on the legend caption. The common case: a
|
|
257
|
-
* string is enough. Use `tooltipProps` when the tooltip needs a subtitle, a
|
|
258
|
-
* custom body, or any other SDS Tooltip prop. Overrides
|
|
259
|
-
* `tooltipProps.title` when both are set.
|
|
260
|
-
*/
|
|
261
|
-
tooltip?: string;
|
|
262
|
-
/**
|
|
263
|
-
* Props forwarded to the SDS Tooltip on the legend caption. The trigger is
|
|
264
|
-
* the caption's help icon, so `children` is omitted.
|
|
265
|
-
*/
|
|
266
|
-
tooltipProps?: Partial<Omit<TooltipProps, "children">>;
|
|
267
|
-
/**
|
|
268
|
-
* Label for the per-residue readout that replaces a stat slot on hover.
|
|
269
|
-
* @default "Value"
|
|
270
|
-
*/
|
|
271
|
-
readoutLabel?: string;
|
|
272
|
-
}
|
|
273
|
-
/**
|
|
274
|
-
* A residue the user pointed at, in each of the ways a caller might need to
|
|
275
|
-
* address it.
|
|
276
|
-
*
|
|
277
|
-
* `index` is the viewer's own key: the position in `plddt` and in
|
|
278
|
-
* `residueOverlay`'s map, and what `selectedResidue` takes. `chainId`, `seqId`
|
|
279
|
-
* and `insCode` are what the file says, which is what the sequence panel shows
|
|
280
|
-
* and what a system that supplied the structure will recognise. They differ
|
|
281
|
-
* from `index` whenever the file does not number a single chain from 1 -- a
|
|
282
|
-
* crop, or a complex -- so address a residue outside the viewer with those
|
|
283
|
-
* three, not with `index`.
|
|
284
|
-
*
|
|
285
|
-
* `insCode` is rarely set but is part of the address when it is: `10` and `10A`
|
|
286
|
-
* are different residues on the same chain, so chain and number alone do not
|
|
287
|
-
* name one.
|
|
288
|
-
*/
|
|
289
|
-
interface ResidueRef {
|
|
290
|
-
/** 0-based position in the structure, counting residues in file order. */
|
|
291
|
-
index: number;
|
|
292
|
-
/** Three-letter residue code, e.g. `"LYS"`. */
|
|
293
|
-
compId: string;
|
|
294
|
-
/** Chain the residue sits on, as named in the file. */
|
|
295
|
-
chainId: string;
|
|
296
|
-
/** Residue number as written in the file. */
|
|
297
|
-
seqId: number;
|
|
298
|
-
/** Insertion code, or `""` when the residue has none. */
|
|
299
|
-
insCode: string;
|
|
300
|
-
}
|
|
301
|
-
/**
|
|
302
|
-
* A chain the viewer found in the structure it loaded, reported through
|
|
303
|
-
* `onChainsChange` so a consumer can label, color or hide chains by name
|
|
304
|
-
* without parsing the PDB itself.
|
|
305
|
-
*
|
|
306
|
-
* `chainId` is the file's own name for the chain, the same one `ResidueRef`
|
|
307
|
-
* reports, and the key every chain-keyed prop takes. A chain carrying several
|
|
308
|
-
* symmetry operators appears once, under the first.
|
|
309
|
-
*
|
|
310
|
-
* Describes the chain's polymer. The ligands and ions sitting on it are drawn
|
|
311
|
-
* and are hidden and selected with it, but are not counted here or spanned by
|
|
312
|
-
* the range below - they are no part of the sequence. A chain holding nothing
|
|
313
|
-
* but heteroatoms is left out altogether, having no sequence to describe.
|
|
314
|
-
*/
|
|
315
|
-
interface ChainRef {
|
|
316
|
-
/** Chain as named in the file (`auth_asym_id`), e.g. `"A"`. */
|
|
317
|
-
chainId: string;
|
|
318
|
-
/** Chain as the sequence panel captions it. */
|
|
319
|
-
label: string;
|
|
320
|
-
/** Lowest 0-based residue index of the chain's polymer. */
|
|
321
|
-
startIndex: number;
|
|
322
|
-
/** Highest 0-based residue index of the chain's polymer. */
|
|
323
|
-
endIndex: number;
|
|
324
|
-
/** Polymer residues the chain holds. */
|
|
325
|
-
residueCount: number;
|
|
326
|
-
}
|
|
327
|
-
/**
|
|
328
|
-
* What is selected, in the two ways a caller might say it. `null` selects
|
|
329
|
-
* nothing.
|
|
330
|
-
*
|
|
331
|
-
* The two combine: `{ chains: ["A"], residues: [150] }` takes all of chain A
|
|
332
|
-
* plus one residue elsewhere. `chains` is kept as named rather than expanded
|
|
333
|
-
* into indices, so a whole-chain selection survives a round trip through a
|
|
334
|
-
* consumer's state at its original size.
|
|
335
|
-
*/
|
|
336
|
-
interface StructureSelection {
|
|
337
|
-
/**
|
|
338
|
-
* 0-based residue indices, counting residues in file order across the whole
|
|
339
|
-
* structure - the same index `plddt` and `residueOverlay` are keyed by.
|
|
340
|
-
*/
|
|
341
|
-
residues?: number[];
|
|
342
|
-
/** Whole chains by `chainId`, each standing for every residue on it. */
|
|
343
|
-
chains?: string[];
|
|
344
|
-
}
|
|
345
|
-
/**
|
|
346
|
-
* How large a downloaded image is, in pixels.
|
|
347
|
-
*
|
|
348
|
-
* Named rather than given as dimensions because the aspect is Mol*'s to
|
|
349
|
-
* choose: each of these is one of its own presets, and a size picked here
|
|
350
|
-
* would have to be reconciled with the canvas the image is rendered from.
|
|
351
|
-
*/
|
|
352
|
-
type DownloadResolution = "low" | "medium" | "high" | "maximum";
|
|
353
|
-
/** Pixel dimensions each resolution produces, for documentation and labels. */
|
|
354
|
-
declare const DOWNLOAD_RESOLUTIONS: Record<DownloadResolution, string>;
|
|
355
|
-
/**
|
|
356
|
-
* Turns on the capture button under the reset-camera control, and says what it
|
|
357
|
-
* should produce. Omit it and no button is drawn.
|
|
358
|
-
*
|
|
359
|
-
* The image is rendered fresh at the size asked for rather than scaled up from
|
|
360
|
-
* the canvas, so a high resolution costs time rather than sharpness - which is
|
|
361
|
-
* why the default sits in the middle rather than at the top.
|
|
362
|
-
*/
|
|
363
|
-
interface StructureDownload {
|
|
364
|
-
/**
|
|
365
|
-
* Size of the image. See `DOWNLOAD_RESOLUTIONS` for the pixel dimensions.
|
|
366
|
-
* @default "medium"
|
|
367
|
-
*/
|
|
368
|
-
resolution?: DownloadResolution;
|
|
369
|
-
/**
|
|
370
|
-
* Background behind the structure, as `#RRGGBB`. Omit for a transparent
|
|
371
|
-
* one, which is what a figure usually wants - the viewer's own canvas color
|
|
372
|
-
* is deliberately not inherited, since a screenshot tends to outlive the
|
|
373
|
-
* theme it was taken under.
|
|
374
|
-
*/
|
|
375
|
-
backgroundColor?: string;
|
|
376
|
-
/**
|
|
377
|
-
* Draw the orientation axes into the image. Independent of `showAxes`, which
|
|
378
|
-
* is about the view rather than the capture: the widget orients a reader who
|
|
379
|
-
* can turn the structure, and earns its place less in a still.
|
|
380
|
-
* @default false
|
|
381
|
-
*/
|
|
382
|
-
showAxes?: boolean;
|
|
383
|
-
/**
|
|
384
|
-
* Name for the downloaded file, without an extension. Defaults to the one
|
|
385
|
-
* Mol* derives from the loaded structure.
|
|
386
|
-
*/
|
|
387
|
-
filename?: string;
|
|
388
|
-
}
|
|
389
|
-
/** A whole-structure statistic shown along the bottom of the viewer. */
|
|
390
|
-
interface StructureStat {
|
|
391
|
-
value: string;
|
|
392
|
-
label: string;
|
|
393
|
-
}
|
|
394
|
-
interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
|
|
395
|
-
/** Structure to render, as raw PDB text. */
|
|
396
|
-
pdb: string;
|
|
397
|
-
/**
|
|
398
|
-
* Per-residue pLDDT confidence on a 0-1 scale, ordered by residue. When
|
|
399
|
-
* supplied the structure is colored by pLDDT unless `residueOverlay` takes
|
|
400
|
-
* over.
|
|
401
|
-
*/
|
|
402
|
-
plddt?: number[] | null;
|
|
403
|
-
/**
|
|
404
|
-
* Canvas background, as `#RRGGBB`. Defaults to the SDS theme's base
|
|
405
|
-
* background, so the canvas follows the surrounding page in both modes.
|
|
406
|
-
*/
|
|
407
|
-
backgroundColor?: string;
|
|
408
|
-
/**
|
|
409
|
-
* Sequence panel background, as any CSS color. Defaults to the SDS theme's
|
|
410
|
-
* primary surface, so the panel follows the surrounding page in both modes.
|
|
411
|
-
*/
|
|
412
|
-
sequenceViewerBackgroundColor?: string;
|
|
413
|
-
/**
|
|
414
|
-
* Show the orientation axes widget and the reset-camera button.
|
|
415
|
-
* @default true
|
|
416
|
-
*/
|
|
417
|
-
showAxes?: boolean;
|
|
418
|
-
/**
|
|
419
|
-
* Adds a capture button beneath the reset-camera control, which downloads a
|
|
420
|
-
* PNG of the structure as it currently stands. Omit for no button.
|
|
421
|
-
*/
|
|
422
|
-
download?: StructureDownload | null;
|
|
423
|
-
/**
|
|
424
|
-
* Show the sequence panel pinned along the bottom of the viewer.
|
|
425
|
-
* @default true
|
|
426
|
-
*/
|
|
427
|
-
showSequenceViewer?: boolean;
|
|
428
|
-
/**
|
|
429
|
-
* Show the stats and color scale legend overlaid on the viewer.
|
|
430
|
-
* @default true
|
|
431
|
-
*/
|
|
432
|
-
showLegend?: boolean;
|
|
433
|
-
/** Per-residue values that override pLDDT coloring while set. */
|
|
434
|
-
residueOverlay?: ResidueValueOverlay | null;
|
|
435
|
-
/**
|
|
436
|
-
* What is selected, or null when nothing is. Controlled: the camera frames
|
|
437
|
-
* whatever the selection covers, and clearing it zooms back out to the
|
|
438
|
-
* default view.
|
|
439
|
-
*/
|
|
440
|
-
selection?: StructureSelection | null;
|
|
441
|
-
/**
|
|
442
|
-
* Chains hidden from the 3D view, by `chainId`. Leave undefined to let the
|
|
443
|
-
* viewer own visibility itself, which is what the chain legend's toggles
|
|
444
|
-
* drive; passing it takes that over, and the toggles then only report.
|
|
445
|
-
*/
|
|
446
|
-
hiddenChains?: string[];
|
|
447
|
-
/**
|
|
448
|
-
* Color per chain, by `chainId`, as `#RRGGBB`. Chains left out fall back to
|
|
449
|
-
* the viewer's palette. Only visible while chain coloring is what is on
|
|
450
|
-
* screen, which is when neither `plddt` nor `residueOverlay` is set.
|
|
451
|
-
*/
|
|
452
|
-
chainColors?: Record<string, string>;
|
|
453
|
-
/**
|
|
454
|
-
* Show the chain legend, which lists each chain with its color and a
|
|
455
|
-
* visibility toggle. Ignored on a single-chain structure, where there is
|
|
456
|
-
* nothing to tell apart or hide.
|
|
457
|
-
* @default true
|
|
458
|
-
*/
|
|
459
|
-
showChainLegend?: boolean;
|
|
460
|
-
/**
|
|
461
|
-
* Stop a chain from lighting up in the 3D view while its name is pointed at,
|
|
462
|
-
* in the legend or above its grid in the sequence panel.
|
|
463
|
-
*
|
|
464
|
-
* The highlight is on by default, since on a complex it is how a reader
|
|
465
|
-
* finds out which chain is which. Turn it off where the movement is more
|
|
466
|
-
* distracting than the answer is useful - a grid of viewers a pointer
|
|
467
|
-
* crosses on its way somewhere else, or a page driving its own highlighting
|
|
468
|
-
* through `selection`.
|
|
469
|
-
* @default false
|
|
470
|
-
*/
|
|
471
|
-
disableChainHighlightOnHover?: boolean;
|
|
472
|
-
/**
|
|
473
|
-
* Mol* plugin spec laid over the viewer's own, which is how the whole of
|
|
474
|
-
* Mol*'s configuration is reachable without a prop here for each setting.
|
|
475
|
-
* Anything named here wins, so `canvas3d.postprocessing`, a `PluginConfig`
|
|
476
|
-
* item, or `layout.initial` can all be set to something other than the
|
|
477
|
-
* default the viewer picked.
|
|
478
|
-
*
|
|
479
|
-
* List-valued keys - `behaviors`, `config`, `actions`, `animations`,
|
|
480
|
-
* `customFormats`, `customParamEditors` - are appended to rather than
|
|
481
|
-
* replaced. For `config` that is what lets an entry override the viewer's,
|
|
482
|
-
* since Mol* reads the list in order. It also means a behavior cannot be
|
|
483
|
-
* taken away: the ones the viewer drops stay dropped, and the ones it keeps
|
|
484
|
-
* cannot be removed from here.
|
|
485
|
-
*
|
|
486
|
-
* Read once, when the plugin is created, except for `canvas3d`, which is
|
|
487
|
-
* re-applied whenever it changes. Creating the plugin throws away the camera,
|
|
488
|
-
* so the rest is deliberately not reactive.
|
|
489
|
-
*/
|
|
490
|
-
molstarSpec?: Partial<PluginUISpec>;
|
|
491
|
-
/**
|
|
492
|
-
* Up to three whole-structure stats shown along the bottom. A null entry
|
|
493
|
-
* reserves its column without rendering anything, so the columns never shift
|
|
494
|
-
* as values come and go.
|
|
495
|
-
*/
|
|
496
|
-
stats?: (StructureStat | null)[];
|
|
497
|
-
/** Called with the clicked residue. */
|
|
498
|
-
onResidueClick?: (residue: ResidueRef) => void;
|
|
499
|
-
/**
|
|
500
|
-
* Called as the pointer moves over residues, and with `null` when it leaves
|
|
501
|
-
* the structure.
|
|
502
|
-
*/
|
|
503
|
-
onResidueHover?: (residue: ResidueRef | null) => void;
|
|
504
|
-
/**
|
|
505
|
-
* Called with the new selection whenever the user makes one - clicking a
|
|
506
|
-
* residue, dragging across the sequence, clicking a chain caption - and with
|
|
507
|
-
* `null` when they click empty space to clear it.
|
|
508
|
-
*
|
|
509
|
-
* A whole-chain selection arrives as `{ chains: [id] }` rather than as every
|
|
510
|
-
* index on it, so echoing it straight back into `selection` costs nothing.
|
|
511
|
-
*/
|
|
512
|
-
onSelectionChange?: (selection: StructureSelection | null) => void;
|
|
513
|
-
/**
|
|
514
|
-
* Called with the chains found in the structure, whenever a structure is
|
|
515
|
-
* loaded. Fires with `[]` when the structure holds none.
|
|
516
|
-
*/
|
|
517
|
-
onChainsChange?: (chains: ChainRef[]) => void;
|
|
518
|
-
/**
|
|
519
|
-
* Called with the chains now hidden when a visibility toggle is used. Fires
|
|
520
|
-
* whether or not `hiddenChains` is controlled, so a consumer can follow the
|
|
521
|
-
* viewer's own state without owning it.
|
|
522
|
-
*/
|
|
523
|
-
onChainVisibilityChange?: (hiddenChains: string[]) => void;
|
|
524
|
-
}
|
|
525
|
-
/**
|
|
526
|
-
* Readout that replaces the whole-structure stats while something is hovered
|
|
527
|
-
* or selected. Covers one residue or many: a drag across the sequence and a
|
|
528
|
-
* whole-chain selection report through this too, as a mean over what they
|
|
529
|
-
* cover.
|
|
530
|
-
*/
|
|
531
|
-
interface ResidueReadout {
|
|
532
|
-
/** e.g. "PHE 17", "Chain A", or "24 residues". */
|
|
533
|
-
label: string;
|
|
534
|
-
/**
|
|
535
|
-
* pLDDT on a 0-1 scale, or null when unavailable. The mean across the
|
|
536
|
-
* residues covered when there is more than one, ignoring those without a
|
|
537
|
-
* score.
|
|
538
|
-
*/
|
|
539
|
-
plddt: number | null;
|
|
540
|
-
/**
|
|
541
|
-
* Overlay value, or null when the overlay holds none - which is also what a
|
|
542
|
-
* structure paints neutral - or when no overlay is set. The mean across the
|
|
543
|
-
* residues covered when there is more than one, ignoring those the overlay
|
|
544
|
-
* says nothing about.
|
|
545
|
-
*/
|
|
546
|
-
value: number | null;
|
|
547
|
-
/**
|
|
548
|
-
* Residues the readout covers, which is what makes the numbers above means
|
|
549
|
-
* rather than readings. 1 for a single residue.
|
|
550
|
-
*/
|
|
551
|
-
residueCount: number;
|
|
552
|
-
}
|
|
553
|
-
//#endregion
|
|
554
|
-
//#region src/core/ProteinStructureViewer/utils/plddt.d.ts
|
|
555
|
-
/**
|
|
556
|
-
* AlphaFold's pLDDT confidence bands. Thresholds are on the 0-1 scale that
|
|
557
|
-
* `plddt` values use, ascending from lowest to highest confidence.
|
|
558
|
-
*/
|
|
559
|
-
declare const PLDDT_COLOR_SCALE: ColorScale;
|
|
560
|
-
/**
|
|
561
|
-
* Rewrites a PDB file's B-factor column with pLDDT scores so Mol* can read them
|
|
562
|
-
* off the parsed model. B-factors occupy columns 60-66 of ATOM/HETATM lines;
|
|
563
|
-
* scores arrive on a 0-1 scale and are stored on the conventional 0-100 one.
|
|
564
|
-
* Residues past the end of `plddtValues` fall back to a mid-confidence 50.
|
|
565
|
-
*
|
|
566
|
-
* A residue is identified by chain, sequence number and insertion code. The
|
|
567
|
-
* code has to be part of that: `10` and `10A` are two residues, Mol* counts
|
|
568
|
-
* them as two, and treating them as one here would hand every residue after
|
|
569
|
-
* them its neighbour's score.
|
|
570
|
-
*/
|
|
571
|
-
declare function injectPlddtIntoPdb(pdbData: string, plddtValues: number[]): string;
|
|
572
|
-
//#endregion
|
|
573
|
-
//#region src/core/ProteinStructureViewer/index.d.ts
|
|
574
|
-
declare const _default$1: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ProteinStructureViewerProps & import("react").RefAttributes<HTMLDivElement>>>;
|
|
575
|
-
//#endregion
|
|
576
|
-
//#region src/core/StackedBarChart/StackedBarChart.types.d.ts
|
|
577
|
-
interface StackedBarChartDataItem {
|
|
578
|
-
/**
|
|
579
|
-
* The segment's label in the legend, and the key the animations track it by.
|
|
580
|
-
* Must be unique within the chart.
|
|
581
|
-
*/
|
|
582
|
-
name: string;
|
|
583
|
-
/**
|
|
584
|
-
* The quantity the segment stands for.
|
|
585
|
-
*/
|
|
586
|
-
value: number;
|
|
587
|
-
/**
|
|
588
|
-
* Any CSS color. Without it the segment takes a generated palette color,
|
|
589
|
-
* which can shift as categories come and go.
|
|
590
|
-
*/
|
|
591
|
-
color?: string;
|
|
592
|
-
/**
|
|
593
|
-
* A unit for this item's counted value, for data that mixes units across
|
|
594
|
-
* categories.
|
|
595
|
-
*/
|
|
596
|
-
unit?: string;
|
|
597
|
-
/**
|
|
598
|
-
* Takes the segment and its legend item out of every interaction: no hover,
|
|
599
|
-
* no tooltip, no selection.
|
|
600
|
-
* @default false
|
|
601
|
-
*/
|
|
602
|
-
disabled?: boolean;
|
|
603
|
-
/**
|
|
604
|
-
* Content for a TooltipTable shown above the segment on hover. Use it for the
|
|
605
|
-
* breakdown behind the number; a segment without it has no tooltip.
|
|
606
|
-
*/
|
|
607
|
-
tooltip?: TooltipTableContentProps;
|
|
608
|
-
}
|
|
609
|
-
interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
|
|
610
|
-
/**
|
|
611
|
-
* A heading above the bar. It is also what makes room for the badge; with no
|
|
612
|
-
* title, no badge is drawn.
|
|
613
|
-
*/
|
|
614
|
-
title?: string;
|
|
615
|
-
/**
|
|
616
|
-
* Overrides the badge text, which otherwise counts the data and the selection
|
|
617
|
-
* ("7", or "3 of 7").
|
|
618
|
-
*/
|
|
619
|
-
badge?: string;
|
|
620
|
-
/**
|
|
621
|
-
* Removes the badge, leaving the title on its own.
|
|
622
|
-
* @default false
|
|
623
|
-
*/
|
|
624
|
-
hideBadge?: boolean;
|
|
625
|
-
/**
|
|
626
|
-
* The segments, in the order they are drawn.
|
|
627
|
-
*/
|
|
628
|
-
data: StackedBarChartDataItem[];
|
|
629
|
-
/**
|
|
630
|
-
* Any CSS width; a number is read as pixels. It sets the width of the whole
|
|
631
|
-
* chart, legend included.
|
|
632
|
-
* @default 100%
|
|
633
|
-
*/
|
|
634
|
-
width?: number | string;
|
|
635
|
-
/**
|
|
636
|
-
* Height of the bar in pixels. Values below 1 are clamped to 1, so the bar
|
|
637
|
-
* cannot disappear.
|
|
638
|
-
* @default 16
|
|
639
|
-
*/
|
|
640
|
-
barHeight?: number;
|
|
641
|
-
/**
|
|
642
|
-
* Draws the legend below the bar. It is the only place segment names appear,
|
|
643
|
-
* and the only part of the chart a keyboard can reach.
|
|
644
|
-
* @default true
|
|
645
|
-
*/
|
|
646
|
-
showLegend?: boolean;
|
|
647
|
-
/**
|
|
648
|
-
* Shows each item's value beside its name in the legend.
|
|
649
|
-
* @default true
|
|
650
|
-
*/
|
|
651
|
-
showLegendValues?: boolean;
|
|
652
|
-
/**
|
|
653
|
-
* "percentage" shows the segment's share of the bar, rounded. "count" shows
|
|
654
|
-
* the raw value followed by the item's unit, or the chart's unit if the item
|
|
655
|
-
* has none.
|
|
656
|
-
* @default "percentage"
|
|
657
|
-
*/
|
|
658
|
-
legendValueFormat?: "percentage" | "count";
|
|
659
|
-
/**
|
|
660
|
-
* Indices into data that are currently selected. The chart is controlled: it
|
|
661
|
-
* draws this and never changes it.
|
|
662
|
-
*/
|
|
663
|
-
selectedIndices?: number[];
|
|
664
|
-
/**
|
|
665
|
-
* Called with the next selection when a segment or legend item is clicked.
|
|
666
|
-
* Without it, clicking selects nothing.
|
|
667
|
-
*/
|
|
668
|
-
onSelectionChange?: (selectedIndices: number[], selectedData: StackedBarChartDataItem[]) => void;
|
|
669
|
-
/**
|
|
670
|
-
* Called when the pointer enters a segment. The chart already syncs its own
|
|
671
|
-
* hover highlight between bar and legend, so this is for driving something
|
|
672
|
-
* outside it.
|
|
673
|
-
*/
|
|
674
|
-
onSegmentMouseEnter?: (item: StackedBarChartDataItem, index: number) => void;
|
|
675
|
-
/**
|
|
676
|
-
* Called when the pointer leaves a segment.
|
|
677
|
-
*/
|
|
678
|
-
onSegmentMouseLeave?: (item: StackedBarChartDataItem, index: number) => void;
|
|
679
|
-
/**
|
|
680
|
-
* Called when the pointer enters a legend item.
|
|
681
|
-
*/
|
|
682
|
-
onLegendItemMouseEnter?: (item: StackedBarChartDataItem, index: number) => void;
|
|
683
|
-
/**
|
|
684
|
-
* Called when the pointer leaves a legend item.
|
|
685
|
-
*/
|
|
686
|
-
onLegendItemMouseLeave?: (item: StackedBarChartDataItem, index: number) => void;
|
|
687
|
-
/**
|
|
688
|
-
* Fires on a segment click, alongside any selection change rather than
|
|
689
|
-
* instead of it.
|
|
690
|
-
*/
|
|
691
|
-
onSegmentClick?: (item: StackedBarChartDataItem, index: number) => void;
|
|
692
|
-
/**
|
|
693
|
-
* The same, for a click on a legend item.
|
|
694
|
-
*/
|
|
695
|
-
onLegendItemClick?: (item: StackedBarChartDataItem, index: number) => void;
|
|
696
|
-
/**
|
|
697
|
-
* What a selection does to the unselected segments: fade them to 20% opacity,
|
|
698
|
-
* or drop them from the bar and let the rest take the space.
|
|
699
|
-
* @default "dim"
|
|
700
|
-
*/
|
|
701
|
-
selectionBehavior?: "dim" | "hide";
|
|
702
|
-
/**
|
|
703
|
-
* Whether the bar shows a breakdown of the data (segments always fill it) or
|
|
704
|
-
* progress towards maxAmount.
|
|
705
|
-
* @default "proportional"
|
|
706
|
-
*/
|
|
707
|
-
mode?: "proportional" | "cumulative";
|
|
708
|
-
/**
|
|
709
|
-
* Cumulative mode only. The value the full bar represents. Any difference
|
|
710
|
-
* between it and the sum of the data is drawn as the Remaining segment.
|
|
711
|
-
*/
|
|
712
|
-
maxAmount?: number;
|
|
713
|
-
/**
|
|
714
|
-
* Name of the grey gap segment in cumulative mode.
|
|
715
|
-
* @default "Remaining"
|
|
716
|
-
*/
|
|
717
|
-
remainingLabel?: string;
|
|
718
|
-
/**
|
|
719
|
-
* A unit for the Remaining segment's value alone.
|
|
720
|
-
*/
|
|
721
|
-
remainingUnit?: string;
|
|
722
|
-
/**
|
|
723
|
-
* The unit appended to counted values, for items that do not carry one of
|
|
724
|
-
* their own.
|
|
725
|
-
*/
|
|
726
|
-
unit?: string;
|
|
727
|
-
/**
|
|
728
|
-
* Tunes the generated palette (start hue, rotations, lightness range, gamma).
|
|
729
|
-
* Items with their own color are untouched by it.
|
|
730
|
-
*/
|
|
731
|
-
colorGeneratorOptions?: DiscreteColorGeneratorOptions;
|
|
732
|
-
}
|
|
733
|
-
//#endregion
|
|
734
|
-
//#region src/core/StackedBarChart/index.d.ts
|
|
735
|
-
declare const StackedBarChart: (props: StackedBarChartProps) => JSX.Element;
|
|
736
|
-
//#endregion
|
|
737
|
-
export { ChainRef, type ColorScale, type ContinuousColorStop, DOWNLOAD_RESOLUTIONS, DownloadResolution, _default as HeatmapChart, HeatmapChartProps, PLASMA_COLOR_SCALE, PLDDT_COLOR_SCALE, _default$1 as ProteinStructureViewer, ProteinStructureViewerProps, ResidueReadout, ResidueRef, ResidueValueOverlay, StackedBarChart, type StackedBarChartDataItem, type StackedBarChartProps, type SteppedColorStop, StructureDownload, StructureSelection, StructureStat, injectPlddtIntoPdb, sampleColorScale, toCssGradient };
|
|
1
|
+
import { n as _default, t as HeatmapChartProps } from "./shared/index.esm.js";
|
|
2
|
+
import { a as sampleColorScale, i as SteppedColorStop, n as ContinuousColorStop, o as toCssGradient, r as PLASMA_COLOR_SCALE, t as ColorScale } from "./shared/colorScales.esm.js";
|
|
3
|
+
import { _ as StructureStat, a as injectPlddtIntoPdb, c as ChainRef, d as ProteinStructureViewerProps, f as ResidueReadout, g as StructureSelection, h as StructureDownload, i as injectPlddtIntoMmcif, l as DOWNLOAD_RESOLUTIONS, m as ResidueValueOverlay, n as PLDDT_COLOR_SCALE, o as StructureFormat, p as ResidueRef, r as injectPlddt, s as detectStructureFormat, t as _default$1, u as DownloadResolution } from "./shared/index2.esm.js";
|
|
4
|
+
import { n as StackedBarChartDataItem, r as StackedBarChartProps, t as StackedBarChart } from "./shared/index3.esm.js";
|
|
5
|
+
export { ChainRef, type ColorScale, type ContinuousColorStop, DOWNLOAD_RESOLUTIONS, DownloadResolution, _default as HeatmapChart, HeatmapChartProps, PLASMA_COLOR_SCALE, PLDDT_COLOR_SCALE, _default$1 as ProteinStructureViewer, ProteinStructureViewerProps, ResidueReadout, ResidueRef, ResidueValueOverlay, StackedBarChart, type StackedBarChartDataItem, type StackedBarChartProps, type SteppedColorStop, StructureDownload, type StructureFormat, StructureSelection, StructureStat, detectStructureFormat, injectPlddt, injectPlddtIntoMmcif, injectPlddtIntoPdb, sampleColorScale, toCssGradient };
|