@czi-sds/data-viz 2.4.3 → 2.5.1

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.
@@ -1,9 +1,11 @@
1
- /// <reference types="react" />
2
1
  import { t as ColorScale } from "./colorScales.esm.js";
3
2
  import { HTMLAttributes } from "react";
3
+ import { PluginContext } from "molstar/lib/mol-plugin/context";
4
4
  import { TooltipProps } from "@czi-sds/components";
5
5
  import { PluginUISpec } from "molstar/lib/mol-plugin-ui/spec";
6
- import { CustomElementProperty } from "molstar/lib/mol-model-props/common/custom-element-property";
6
+ import { PluginStateObject } from "molstar/lib/mol-plugin-state/objects";
7
+ import { PluginUIContext } from "molstar/lib/mol-plugin-ui/context";
8
+ import { StateObjectSelector } from "molstar/lib/mol-state";
7
9
 
8
10
  //#region src/core/ProteinStructureViewer/ProteinStructureViewer.types.d.ts
9
11
  /**
@@ -101,6 +103,28 @@ interface ChainRef {
101
103
  /** Polymer residues the chain holds. */
102
104
  residueCount: number;
103
105
  }
106
+ /**
107
+ * A residue as the file names it: chain, number and insertion code, which is
108
+ * what a system that supplied the structure will recognise. `ResidueRef`
109
+ * reports the same three, so a residue the viewer reported can be handed back
110
+ * as one of these.
111
+ */
112
+ interface ResidueAddress {
113
+ /** Chain as named in the file (`auth_asym_id`). */
114
+ chainId: string;
115
+ /** Residue number as written in the file (`auth_seq_id`). */
116
+ seqId: number;
117
+ /** Insertion code, when the residue has one. */
118
+ insCode?: string;
119
+ }
120
+ /** A residue picked out in a color of its own, over whatever paints the rest. */
121
+ interface ResidueHighlight extends ResidueAddress {
122
+ /**
123
+ * As `#RRGGBB`. Highlights that name none take the next color of the
124
+ * viewer's highlight palette, in the order they are given.
125
+ */
126
+ color?: string;
127
+ }
104
128
  /**
105
129
  * What is selected, in the two ways a caller might say it. `null` selects
106
130
  * nothing.
@@ -118,6 +142,60 @@ interface StructureSelection {
118
142
  residues?: number[];
119
143
  /** Whole chains by `chainId`, each standing for every residue on it. */
120
144
  chains?: string[];
145
+ /**
146
+ * Residues by the address the file gives them, for a caller that knows a
147
+ * residue by its chain and number rather than by its position. They join
148
+ * `residues`, and an address the structure does not have selects nothing.
149
+ * The viewer reports its own selections as `residues`.
150
+ */
151
+ addresses?: ResidueAddress[];
152
+ }
153
+ /**
154
+ * How the polymer is drawn. `"surface"` is one molecular surface over the
155
+ * visible chains, so hiding a partner exposes the face it was bound to.
156
+ */
157
+ type StructureRepresentation = "cartoon" | "surface";
158
+ /** What paints the structure, when `colorBy` names it outright. */
159
+ type StructureColorBy = "chain" | "plddt" | "overlay";
160
+ type CameraProjection = "perspective" | "orthographic";
161
+ /**
162
+ * Where the camera looks from, relative to the highlighted residues: straight
163
+ * at them from outside the structure, from the far side, or from the side.
164
+ * `"overview"`, and any orientation while nothing is highlighted, looks down
165
+ * the view's default axis at the whole structure.
166
+ */
167
+ type CameraOrientation = "overview" | "facing" | "opposite" | "side";
168
+ /**
169
+ * Everything that places the camera, enough to put it back exactly where it
170
+ * was. What `onCameraChange` reports and `initialCamera` takes.
171
+ */
172
+ interface CameraState {
173
+ position: [number, number, number];
174
+ target: [number, number, number];
175
+ up: [number, number, number];
176
+ /** Field of view, in radians. */
177
+ fov: number;
178
+ /** Radius of the sphere around `target` the camera frames. */
179
+ radius: number;
180
+ /** Radius of the whole scene, which bounds how far the camera clips. */
181
+ radiusMax: number;
182
+ projection: CameraProjection;
183
+ /**
184
+ * Size of the canvas the camera framed, in pixels. Reported so an image can
185
+ * be rendered at the same aspect; ignored when the state is applied.
186
+ */
187
+ viewport?: {
188
+ width: number;
189
+ height: number;
190
+ };
191
+ }
192
+ /** What `onStructureLoad` reports for each structure loaded. */
193
+ interface StructureLoadInfo {
194
+ /** Atoms Mol* parsed. */
195
+ atomCount: number;
196
+ /** Polymer residues across every chain, as the chains count them. */
197
+ residueCount: number;
198
+ chains: ChainRef[];
121
199
  }
122
200
  /**
123
201
  * How large a downloaded image is, in pixels.
@@ -162,21 +240,102 @@ interface StructureDownload {
162
240
  * Mol* derives from the loaded structure.
163
241
  */
164
242
  filename?: string;
243
+ /**
244
+ * Renders the image in place of the viewer's own capture, for a caller that
245
+ * has to bound its size, keep the viewport's aspect, or draw it some other
246
+ * way. Resolves with a PNG. `resolution`, `backgroundColor` and `showAxes`
247
+ * describe the viewer's own capture, so they are not applied to this one.
248
+ */
249
+ render?: (plugin: PluginUIContext) => Promise<Blob>;
250
+ /**
251
+ * Receives the PNG in place of a browser download, along with the name it
252
+ * would have been saved under, `.png` included. A sandboxed iframe blocks the
253
+ * download a click would otherwise start, so a bridge to its host goes here.
254
+ */
255
+ deliver?: (image: Blob, filename: string) => void | Promise<void>;
256
+ }
257
+ /**
258
+ * What a load hands to `onReady`: the structure the viewer parsed, and what it
259
+ * found in it.
260
+ */
261
+ interface LoadedStructureInfo {
262
+ /**
263
+ * The parsed structure's cell in the plugin's state tree. Components and
264
+ * representations built on it are what a consumer drawing its own scene
265
+ * adds; they go when the next structure is loaded, along with the rest of
266
+ * the tree.
267
+ */
268
+ structure: StateObjectSelector<PluginStateObject.Molecule.Structure>;
269
+ /**
270
+ * Atoms Mol* parsed. A consumer holding a known count for the file can check
271
+ * the parse against it before trusting what is drawn.
272
+ */
273
+ atomCount: number;
274
+ /** The polymer chains found, as `onChainsChange` reports them. */
275
+ chains: ChainRef[];
165
276
  }
277
+ /**
278
+ * Which part of the viewer's work an error reported to `onError` came from.
279
+ * `"representation"` is a representation that could not be drawn - a surface
280
+ * too large for its grid - which leaves the cartoon in its place.
281
+ */
282
+ type ViewerErrorPhase = "init" | "load" | "capture" | "representation";
283
+ /**
284
+ * Who draws the structure: the viewer, from its props, or a consumer building
285
+ * its own scene on the structure `onReady` hands it.
286
+ */
287
+ type SceneMode = "managed" | "external";
166
288
  /** A whole-structure statistic shown along the bottom of the viewer. */
167
289
  interface StructureStat {
168
290
  value: string;
169
291
  label: string;
170
292
  }
171
- interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
293
+ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onError" | "onSelect"> {
172
294
  /** Structure to render, as raw PDB or mmCIF (PDBx) text. */
173
295
  structure: string;
174
296
  /**
175
297
  * Per-residue pLDDT confidence on a 0-1 scale, ordered by residue. When
176
298
  * supplied the structure is colored by pLDDT unless `residueOverlay` takes
177
- * over.
299
+ * over. A `null` entry, and every residue past the end, reads as unscored
300
+ * and is painted neutral rather than at the bottom of the scale.
178
301
  */
179
- plddt?: number[] | null;
302
+ plddt?: (number | null)[] | null;
303
+ /**
304
+ * What paints the structure. Left undefined it follows what is supplied: a
305
+ * `residueOverlay` when there is one, then `plddt`, then the chain colors.
306
+ * Naming one makes it paint whatever else is set, which is how a toggle
307
+ * between confidence and chain coloring keeps both props in place. A theme
308
+ * with nothing to paint with leaves every residue neutral.
309
+ */
310
+ colorBy?: StructureColorBy;
311
+ /**
312
+ * How the polymer is drawn. Ligands stay ball-and-stick either way.
313
+ * Switching leaves the camera where it is.
314
+ * @default "cartoon"
315
+ */
316
+ representation?: StructureRepresentation;
317
+ /**
318
+ * Residues picked out in colors of their own, by the address the file gives
319
+ * them. They paint over whatever colors the rest - chain, pLDDT or overlay -
320
+ * and are drawn in ball-and-stick over the cartoon; on a surface, the
321
+ * surface itself carries them. Separate from `selection`: highlighting a
322
+ * residue neither selects it nor moves the camera.
323
+ */
324
+ highlights?: ResidueHighlight[];
325
+ /** The camera's projection. Left undefined, Mol*'s own default stands. */
326
+ projection?: CameraProjection;
327
+ /**
328
+ * Where the camera starts on each structure loaded, in place of fitting it
329
+ * to the structure. Applied once per load; moving the camera afterwards is
330
+ * the user's.
331
+ */
332
+ initialCamera?: CameraState | null;
333
+ /**
334
+ * Turns the camera to look at the highlighted residues from one side or
335
+ * another. Applied when a structure is loaded, unless `initialCamera` is
336
+ * set, and whenever it changes - not when the highlights do.
337
+ */
338
+ orientation?: CameraOrientation;
180
339
  /**
181
340
  * Canvas background, as `#RRGGBB`. Defaults to the SDS theme's base
182
341
  * background, so the canvas follows the surrounding page in both modes.
@@ -202,6 +361,17 @@ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement
202
361
  * @default true
203
362
  */
204
363
  showSequenceViewer?: boolean;
364
+ /**
365
+ * Height of the sequence panel, as any CSS length; a number is read as
366
+ * pixels, and a percentage is of the viewer's own height. The 3D view and the
367
+ * legend move up to make room for it. Ignored while `showSequenceViewer` is
368
+ * off.
369
+ *
370
+ * Left undefined, the panel takes `max(104px, 30%)` of the viewer, growing to
371
+ * `max(134px, 32%)` once the viewer is 880px wide or more. A height set here
372
+ * holds at every width.
373
+ */
374
+ sequenceViewerHeight?: number | string;
205
375
  /**
206
376
  * Show the stats and color scale legend overlaid on the viewer.
207
377
  * @default true
@@ -230,7 +400,8 @@ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement
230
400
  /**
231
401
  * Color per chain, by `chainId`, as `#RRGGBB`. Chains left out fall back to
232
402
  * the viewer's palette. Only visible while chain coloring is what is on
233
- * screen, which is when neither `plddt` nor `residueOverlay` is set.
403
+ * screen: when `colorBy` says so, or, left undefined, when neither `plddt`
404
+ * nor `residueOverlay` is set.
234
405
  */
235
406
  chainColors?: Record<string, string>;
236
407
  /**
@@ -270,6 +441,52 @@ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement
270
441
  * so the rest is deliberately not reactive.
271
442
  */
272
443
  molstarSpec?: Partial<PluginUISpec>;
444
+ /**
445
+ * Who draws the structure.
446
+ *
447
+ * `"managed"` draws each chain as a cartoon and its ligands as
448
+ * ball-and-stick, colors them from `plddt`, `residueOverlay` and
449
+ * `chainColors`, hides the chains `hiddenChains` names, and frames the camera
450
+ * on each structure it loads.
451
+ *
452
+ * `"external"` parses the structure and stops there: nothing is drawn,
453
+ * colored, hidden or framed, and a consumer draws its own scene on the
454
+ * structure `onReady` hands it. The sequence panel, selection, hover, legend
455
+ * and camera controls work as before; the legend describes the props rather
456
+ * than what the consumer drew, and its chain toggles report through
457
+ * `onChainVisibilityChange` without hiding anything. Mol* frames the camera
458
+ * on the first representation drawn into the empty scene.
459
+ *
460
+ * Read once, when the plugin is created.
461
+ * @default "managed"
462
+ */
463
+ sceneMode?: SceneMode;
464
+ /**
465
+ * Called with the Mol* plugin once a structure is loaded into it, and again
466
+ * for each structure that replaces it, which is how a consumer reaches the
467
+ * plugin to draw on it or drive it directly.
468
+ *
469
+ * Called once the viewer has drawn its own scene, and awaited before it
470
+ * starts answering clicks and hovers, so a scene built here is in place
471
+ * before a click reaches it. The viewer only ever recolors, hides or
472
+ * replaces the components it built itself, so representations added here
473
+ * are left as they were made. Not called for a structure that failed to
474
+ * load, or for a plugin the viewer disposed of first.
475
+ */
476
+ onReady?: (plugin: PluginUIContext, loaded: LoadedStructureInfo) => void | Promise<void>;
477
+ /**
478
+ * Called when creating the plugin, loading a structure, capturing an image or
479
+ * drawing a representation fails, in place of the message the viewer would
480
+ * otherwise log. A rejected `onReady` is reported as a `"load"` failure.
481
+ * Nothing is reported for a plugin the viewer has already disposed of.
482
+ */
483
+ onError?: (error: unknown, phase: ViewerErrorPhase) => void;
484
+ /**
485
+ * Called before the viewer disposes of a plugin it handed to `onReady`,
486
+ * including one whose `onReady` has not finished, so that whatever was built
487
+ * on it can be let go.
488
+ */
489
+ onDispose?: () => void;
273
490
  /**
274
491
  * Up to three whole-structure stats shown along the bottom. A null entry
275
492
  * reserves its column without rendering anything, so the columns never shift
@@ -299,6 +516,18 @@ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement
299
516
  * loaded. Fires with `[]` when the structure holds none.
300
517
  */
301
518
  onChainsChange?: (chains: ChainRef[]) => void;
519
+ /**
520
+ * Called for every structure that loads, reloads included - unlike
521
+ * `onChainsChange`, which stays quiet when the chains come back the same.
522
+ * What a consumer tracking "loading" and "ready" states listens for.
523
+ */
524
+ onStructureLoad?: (info: StructureLoadInfo) => void;
525
+ /**
526
+ * Called with the camera each time it comes to rest after moving, whether a
527
+ * drag, a zoom, a selection framing it, or a new structure fitting it. The
528
+ * state can be handed back as `initialCamera` to restore the view.
529
+ */
530
+ onCameraChange?: (camera: CameraState) => void;
302
531
  /**
303
532
  * Called with the chains now hidden when a visibility toggle is used. Fires
304
533
  * whether or not `hiddenChains` is controlled, so a consumer can follow the
@@ -306,6 +535,64 @@ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement
306
535
  */
307
536
  onChainVisibilityChange?: (hiddenChains: string[]) => void;
308
537
  }
538
+ /**
539
+ * A structure and how to draw it, as the viewer's props describe it - for a
540
+ * scene drawn on a plugin of the caller's, or rendered straight to an image,
541
+ * with no viewer involved. Each field means what the prop of the same name
542
+ * means.
543
+ */
544
+ interface StructureSceneOptions {
545
+ /** Structure to draw, as raw PDB or mmCIF (PDBx) text. */
546
+ structure: string;
547
+ plddt?: (number | null)[] | null;
548
+ residueOverlay?: ResidueValueOverlay | null;
549
+ colorBy?: StructureColorBy;
550
+ chainColors?: Record<string, string>;
551
+ representation?: StructureRepresentation;
552
+ highlights?: ResidueHighlight[];
553
+ hiddenChains?: string[];
554
+ initialCamera?: CameraState | null;
555
+ orientation?: CameraOrientation;
556
+ projection?: CameraProjection;
557
+ /**
558
+ * Which of the light or dark neutral grays a residue without a value is
559
+ * painted in.
560
+ * @default "light"
561
+ */
562
+ mode?: "light" | "dark";
563
+ /**
564
+ * Told when a representation cannot be drawn - a surface too large for its
565
+ * grid, which leaves the cartoon in its place. A structure that fails to
566
+ * load rejects instead.
567
+ */
568
+ onError?: (error: unknown, phase: ViewerErrorPhase) => void;
569
+ }
570
+ /** A scene drawn on a plugin by `applyStructureScene`. */
571
+ interface StructureSceneHandle {
572
+ /** What the structure last loaded holds. */
573
+ readonly info: StructureLoadInfo;
574
+ /**
575
+ * Applies new options in place, leaving the camera where it is. A new
576
+ * `structure` is loaded, and the camera placed on it, as the first was.
577
+ */
578
+ update: (options: Partial<StructureSceneOptions>) => Promise<void>;
579
+ /** Where the camera is now, in the form `initialCamera` takes. */
580
+ getCamera: () => CameraState | undefined;
581
+ /**
582
+ * Stops the scene touching the plugin. The plugin, and what was drawn on
583
+ * it, stay the caller's.
584
+ */
585
+ dispose: () => void;
586
+ }
587
+ /** What `renderStructureImage` draws, and the image it draws it into. */
588
+ interface RenderStructureImageOptions extends StructureSceneOptions {
589
+ /** Width of the image, in pixels. */
590
+ width: number;
591
+ /** Height of the image, in pixels. */
592
+ height: number;
593
+ /** Background behind the structure, as `#RRGGBB`. Omit for transparent. */
594
+ backgroundColor?: string;
595
+ }
309
596
  /**
310
597
  * Readout that replaces the whole-structure stats while something is hovered
311
598
  * or selected. Covers one residue or many: a drag across the sequence and a
@@ -335,61 +622,35 @@ interface ResidueReadout {
335
622
  residueCount: number;
336
623
  }
337
624
  //#endregion
338
- //#region src/core/ProteinStructureViewer/utils/structureFormat.d.ts
339
- /**
340
- * Structure text formats Mol* can parse from the viewer's `structure` prop.
341
- *
342
- * `"mmcif"` covers both mmCIF and PDBx; they are the same text format, and
343
- * that is the name Mol*'s trajectory parser uses. Binary CIF (`.bcif`) is not
344
- * accepted: the prop is a string.
345
- */
346
- type StructureFormat = "pdb" | "mmcif";
625
+ //#region src/core/ProteinStructureViewer/scene/applyStructureScene.d.ts
347
626
  /**
348
- * Infers whether `text` is PDB or mmCIF (PDBx).
627
+ * Draws a structure on a Mol* plugin of your own, the way the viewer draws it:
628
+ * the same representations, coloring, highlights and camera, from the same
629
+ * options its props take. Works on any plugin - one rendering offscreen, one
630
+ * inside a viewer of your own - and resolves once the structure is drawn and
631
+ * the camera placed on it.
349
632
  *
350
- * mmCIF documents start with a `data_` block and name their coordinates
351
- * `_atom_site.`. PDB never does either, so either marker is enough. A leading
352
- * comment (`# ...`) before `data_` is still mmCIF.
633
+ * The scene clears the plugin's state to load the structure, and keeps what it
634
+ * draws in line with `update` from then on. It adds nothing to the plugin
635
+ * beyond the structure and its representations, and three color themes
636
+ * registered once per plugin.
353
637
  */
354
- declare function detectStructureFormat(text: string): StructureFormat;
638
+ declare function applyStructureScene(plugin: PluginContext, options: StructureSceneOptions): Promise<StructureSceneHandle>;
355
639
  //#endregion
356
- //#region src/core/ProteinStructureViewer/utils/plddt.d.ts
357
- /**
358
- * AlphaFold's pLDDT confidence bands. Thresholds are on the 0-1 scale that
359
- * `plddt` values use, ascending from lowest to highest confidence.
360
- */
361
- declare const PLDDT_COLOR_SCALE: ColorScale;
640
+ //#region src/core/ProteinStructureViewer/scene/renderStructureImage.d.ts
362
641
  /**
363
- * Rewrites a PDB file's B-factor column with pLDDT scores so Mol* can read them
364
- * off the parsed model. B-factors occupy columns 60-66 of ATOM/HETATM lines;
365
- * scores arrive on a 0-1 scale and are stored on the conventional 0-100 one.
366
- * Residues past the end of `plddtValues` fall back to a mid-confidence 50.
642
+ * Renders a structure to a PNG without a viewer on the page, drawn exactly as
643
+ * the viewer would draw it from the same options - the image a caller can show
644
+ * beside the interactive view, or hand to someone who cannot open one.
367
645
  *
368
- * A residue is identified by chain, sequence number and insertion code. The
369
- * code has to be part of that: `10` and `10A` are two residues, Mol* counts
370
- * them as two, and treating them as one here would hand every residue after
371
- * them its neighbour's score.
372
- */
373
- declare function injectPlddtIntoPdb(pdbData: string, plddtValues: number[]): string;
374
- /**
375
- * Rewrites an mmCIF (PDBx) file's `_atom_site.B_iso_or_equiv` column with
376
- * pLDDT scores so Mol* can read them off the parsed model, the same way
377
- * `injectPlddtIntoPdb` rewrites the PDB B-factor column. Scores arrive on a
378
- * 0-1 scale and are stored on the conventional 0-100 one. Residues past the
379
- * end of `plddtValues` fall back to a mid-confidence 50.
646
+ * A plugin is created for the one image, offscreen, and disposed of once it is
647
+ * taken, whether or not taking it succeeded. The image is `width` by `height`
648
+ * exactly: rendered at that size rather than scaled, and not cropped to the
649
+ * structure.
380
650
  *
381
- * If the file has no B-factor column, one is appended to the atom-site loop
382
- * rather than leaving the scores behind.
651
+ * It needs a DOM and WebGL - a browser, or headless Chromium - and rejects
652
+ * when there is no WebGL to render with.
383
653
  */
384
- declare function injectPlddtIntoMmcif(mmcifData: string, plddtValues: number[]): string;
385
- /**
386
- * Rewrites a structure file's B-factors with pLDDT scores. Dispatches to
387
- * `injectPlddtIntoPdb` or `injectPlddtIntoMmcif` from `format`, or from
388
- * detecting the format of `data` when `format` is omitted.
389
- */
390
- declare function injectPlddt(data: string, plddtValues: number[], format?: StructureFormat): string;
391
- //#endregion
392
- //#region src/core/ProteinStructureViewer/index.d.ts
393
- declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ProteinStructureViewerProps & import("react").RefAttributes<HTMLDivElement>>>;
654
+ declare function renderStructureImage(options: RenderStructureImageOptions): Promise<Blob>;
394
655
  //#endregion
395
- export { StructureStat as _, injectPlddtIntoPdb as a, ChainRef as c, ProteinStructureViewerProps as d, ResidueReadout as f, StructureSelection as g, StructureDownload as h, injectPlddtIntoMmcif as i, DOWNLOAD_RESOLUTIONS as l, ResidueValueOverlay as m, PLDDT_COLOR_SCALE as n, StructureFormat as o, ResidueRef as p, injectPlddt as r, detectStructureFormat as s, _default as t, DownloadResolution as u };
656
+ export { StructureSceneOptions as C, ViewerErrorPhase as E, StructureSceneHandle as S, StructureStat as T, SceneMode as _, CameraState as a, StructureLoadInfo as b, DownloadResolution as c, RenderStructureImageOptions as d, ResidueAddress as f, ResidueValueOverlay as g, ResidueRef as h, CameraProjection as i, LoadedStructureInfo as l, ResidueReadout as m, applyStructureScene as n, ChainRef as o, ResidueHighlight as p, CameraOrientation as r, DOWNLOAD_RESOLUTIONS as s, renderStructureImage as t, ProteinStructureViewerProps as u, StructureColorBy as v, StructureSelection as w, StructureRepresentation as x, StructureDownload as y };