@czi-sds/data-viz 2.1.1 → 2.2.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.
@@ -2,6 +2,7 @@
2
2
  import { HTMLAttributes } from "react";
3
3
  import { DatasetComponentOption, ECharts, EChartsOption, ScatterSeriesOption } from "echarts";
4
4
  import { DiscreteColorGeneratorOptions, TooltipProps, TooltipTableContentProps } from "@czi-sds/components";
5
+ import { PluginUISpec } from "molstar/lib/mol-plugin-ui/spec";
5
6
  //#region src/common/colorScales.d.ts
6
7
  /** RGB triplet with each channel in the range 0-255. */
7
8
  type Rgb = [number, number, number];
@@ -295,6 +296,94 @@ interface ResidueRef {
295
296
  /** Insertion code, or `""` when the residue has none. */
296
297
  insCode: string;
297
298
  }
299
+ /**
300
+ * A chain the viewer found in the structure it loaded, reported through
301
+ * `onChainsChange` so a consumer can label, color or hide chains by name
302
+ * without parsing the PDB itself.
303
+ *
304
+ * `chainId` is the file's own name for the chain, the same one `ResidueRef`
305
+ * reports, and the key every chain-keyed prop takes. A chain carrying several
306
+ * symmetry operators appears once, under the first.
307
+ *
308
+ * Describes the chain's polymer. The ligands and ions sitting on it are drawn
309
+ * and are hidden and selected with it, but are not counted here or spanned by
310
+ * the range below - they are no part of the sequence. A chain holding nothing
311
+ * but heteroatoms is left out altogether, having no sequence to describe.
312
+ */
313
+ interface ChainRef {
314
+ /** Chain as named in the file (`auth_asym_id`), e.g. `"A"`. */
315
+ chainId: string;
316
+ /** Chain as the sequence panel captions it. */
317
+ label: string;
318
+ /** Lowest 0-based residue index of the chain's polymer. */
319
+ startIndex: number;
320
+ /** Highest 0-based residue index of the chain's polymer. */
321
+ endIndex: number;
322
+ /** Polymer residues the chain holds. */
323
+ residueCount: number;
324
+ }
325
+ /**
326
+ * What is selected, in the two ways a caller might say it. `null` selects
327
+ * nothing.
328
+ *
329
+ * The two combine: `{ chains: ["A"], residues: [150] }` takes all of chain A
330
+ * plus one residue elsewhere. `chains` is kept as named rather than expanded
331
+ * into indices, so a whole-chain selection survives a round trip through a
332
+ * consumer's state at its original size.
333
+ */
334
+ interface StructureSelection {
335
+ /**
336
+ * 0-based residue indices, counting residues in file order across the whole
337
+ * structure - the same index `plddt` and `residueOverlay` are keyed by.
338
+ */
339
+ residues?: number[];
340
+ /** Whole chains by `chainId`, each standing for every residue on it. */
341
+ chains?: string[];
342
+ }
343
+ /**
344
+ * How large a downloaded image is, in pixels.
345
+ *
346
+ * Named rather than given as dimensions because the aspect is Mol*'s to
347
+ * choose: each of these is one of its own presets, and a size picked here
348
+ * would have to be reconciled with the canvas the image is rendered from.
349
+ */
350
+ type DownloadResolution = "low" | "medium" | "high" | "maximum";
351
+ /** Pixel dimensions each resolution produces, for documentation and labels. */
352
+ declare const DOWNLOAD_RESOLUTIONS: Record<DownloadResolution, string>;
353
+ /**
354
+ * Turns on the capture button under the reset-camera control, and says what it
355
+ * should produce. Omit it and no button is drawn.
356
+ *
357
+ * The image is rendered fresh at the size asked for rather than scaled up from
358
+ * the canvas, so a high resolution costs time rather than sharpness - which is
359
+ * why the default sits in the middle rather than at the top.
360
+ */
361
+ interface StructureDownload {
362
+ /**
363
+ * Size of the image. See `DOWNLOAD_RESOLUTIONS` for the pixel dimensions.
364
+ * @default "medium"
365
+ */
366
+ resolution?: DownloadResolution;
367
+ /**
368
+ * Background behind the structure, as `#RRGGBB`. Omit for a transparent
369
+ * one, which is what a figure usually wants - the viewer's own canvas color
370
+ * is deliberately not inherited, since a screenshot tends to outlive the
371
+ * theme it was taken under.
372
+ */
373
+ backgroundColor?: string;
374
+ /**
375
+ * Draw the orientation axes into the image. Independent of `showAxes`, which
376
+ * is about the view rather than the capture: the widget orients a reader who
377
+ * can turn the structure, and earns its place less in a still.
378
+ * @default false
379
+ */
380
+ showAxes?: boolean;
381
+ /**
382
+ * Name for the downloaded file, without an extension. Defaults to the one
383
+ * Mol* derives from the loaded structure.
384
+ */
385
+ filename?: string;
386
+ }
298
387
  /** A whole-structure statistic shown along the bottom of the viewer. */
299
388
  interface StructureStat {
300
389
  value: string;
@@ -324,6 +413,11 @@ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement
324
413
  * @default true
325
414
  */
326
415
  showAxes?: boolean;
416
+ /**
417
+ * Adds a capture button beneath the reset-camera control, which downloads a
418
+ * PNG of the structure as it currently stands. Omit for no button.
419
+ */
420
+ download?: StructureDownload | null;
327
421
  /**
328
422
  * Show the sequence panel pinned along the bottom of the viewer.
329
423
  * @default true
@@ -337,11 +431,61 @@ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement
337
431
  /** Per-residue values that override pLDDT coloring while set. */
338
432
  residueOverlay?: ResidueValueOverlay | null;
339
433
  /**
340
- * 0-based index of the selected residue, or null when none is selected.
341
- * Controlled: selecting a residue zooms the camera in on it, and clearing the
342
- * selection zooms back out to the default view.
434
+ * What is selected, or null when nothing is. Controlled: the camera frames
435
+ * whatever the selection covers, and clearing it zooms back out to the
436
+ * default view.
437
+ */
438
+ selection?: StructureSelection | null;
439
+ /**
440
+ * Chains hidden from the 3D view, by `chainId`. Leave undefined to let the
441
+ * viewer own visibility itself, which is what the chain legend's toggles
442
+ * drive; passing it takes that over, and the toggles then only report.
443
+ */
444
+ hiddenChains?: string[];
445
+ /**
446
+ * Color per chain, by `chainId`, as `#RRGGBB`. Chains left out fall back to
447
+ * the viewer's palette. Only visible while chain coloring is what is on
448
+ * screen, which is when neither `plddt` nor `residueOverlay` is set.
343
449
  */
344
- selectedResidue?: number | null;
450
+ chainColors?: Record<string, string>;
451
+ /**
452
+ * Show the chain legend, which lists each chain with its color and a
453
+ * visibility toggle. Ignored on a single-chain structure, where there is
454
+ * nothing to tell apart or hide.
455
+ * @default true
456
+ */
457
+ showChainLegend?: boolean;
458
+ /**
459
+ * Stop a chain from lighting up in the 3D view while its name is pointed at,
460
+ * in the legend or above its grid in the sequence panel.
461
+ *
462
+ * The highlight is on by default, since on a complex it is how a reader
463
+ * finds out which chain is which. Turn it off where the movement is more
464
+ * distracting than the answer is useful - a grid of viewers a pointer
465
+ * crosses on its way somewhere else, or a page driving its own highlighting
466
+ * through `selection`.
467
+ * @default false
468
+ */
469
+ disableChainHighlightOnHover?: boolean;
470
+ /**
471
+ * Mol* plugin spec laid over the viewer's own, which is how the whole of
472
+ * Mol*'s configuration is reachable without a prop here for each setting.
473
+ * Anything named here wins, so `canvas3d.postprocessing`, a `PluginConfig`
474
+ * item, or `layout.initial` can all be set to something other than the
475
+ * default the viewer picked.
476
+ *
477
+ * List-valued keys - `behaviors`, `config`, `actions`, `animations`,
478
+ * `customFormats`, `customParamEditors` - are appended to rather than
479
+ * replaced. For `config` that is what lets an entry override the viewer's,
480
+ * since Mol* reads the list in order. It also means a behavior cannot be
481
+ * taken away: the ones the viewer drops stay dropped, and the ones it keeps
482
+ * cannot be removed from here.
483
+ *
484
+ * Read once, when the plugin is created, except for `canvas3d`, which is
485
+ * re-applied whenever it changes. Creating the plugin throws away the camera,
486
+ * so the rest is deliberately not reactive.
487
+ */
488
+ molstarSpec?: Partial<PluginUISpec>;
345
489
  /**
346
490
  * Up to three whole-structure stats shown along the bottom. A null entry
347
491
  * reserves its column without rendering anything, so the columns never shift
@@ -355,23 +499,54 @@ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement
355
499
  * the structure.
356
500
  */
357
501
  onResidueHover?: (residue: ResidueRef | null) => void;
358
- /** Called when the user clicks empty space, clearing the selection. */
359
- onSelectionClear?: () => void;
502
+ /**
503
+ * Called with the new selection whenever the user makes one - clicking a
504
+ * residue, dragging across the sequence, clicking a chain caption - and with
505
+ * `null` when they click empty space to clear it.
506
+ *
507
+ * A whole-chain selection arrives as `{ chains: [id] }` rather than as every
508
+ * index on it, so echoing it straight back into `selection` costs nothing.
509
+ */
510
+ onSelectionChange?: (selection: StructureSelection | null) => void;
511
+ /**
512
+ * Called with the chains found in the structure, whenever a structure is
513
+ * loaded. Fires with `[]` when the structure holds none.
514
+ */
515
+ onChainsChange?: (chains: ChainRef[]) => void;
516
+ /**
517
+ * Called with the chains now hidden when a visibility toggle is used. Fires
518
+ * whether or not `hiddenChains` is controlled, so a consumer can follow the
519
+ * viewer's own state without owning it.
520
+ */
521
+ onChainVisibilityChange?: (hiddenChains: string[]) => void;
360
522
  }
361
523
  /**
362
- * Per-residue readout that replaces the whole-structure stats while a residue
363
- * is hovered or selected.
524
+ * Readout that replaces the whole-structure stats while something is hovered
525
+ * or selected. Covers one residue or many: a drag across the sequence and a
526
+ * whole-chain selection report through this too, as a mean over what they
527
+ * cover.
364
528
  */
365
529
  interface ResidueReadout {
366
- /** e.g. "PHE 17" */
530
+ /** e.g. "PHE 17", "Chain A", or "24 residues". */
367
531
  label: string;
368
- /** Residue pLDDT on a 0-1 scale, or null when unavailable. */
532
+ /**
533
+ * pLDDT on a 0-1 scale, or null when unavailable. The mean across the
534
+ * residues covered when there is more than one, ignoring those without a
535
+ * score.
536
+ */
369
537
  plddt: number | null;
370
538
  /**
371
- * Residue overlay value, or null when the overlay holds none for it - which
372
- * is also what a structure paints neutral - or when no overlay is set.
539
+ * Overlay value, or null when the overlay holds none - which is also what a
540
+ * structure paints neutral - or when no overlay is set. The mean across the
541
+ * residues covered when there is more than one, ignoring those the overlay
542
+ * says nothing about.
373
543
  */
374
544
  value: number | null;
545
+ /**
546
+ * Residues the readout covers, which is what makes the numbers above means
547
+ * rather than readings. 1 for a single residue.
548
+ */
549
+ residueCount: number;
375
550
  }
376
551
  //#endregion
377
552
  //#region src/core/ProteinStructureViewer/utils/plddt.d.ts
@@ -557,4 +732,4 @@ interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
557
732
  //#region src/core/StackedBarChart/index.d.ts
558
733
  declare const StackedBarChart: (props: StackedBarChartProps) => JSX.Element;
559
734
  //#endregion
560
- export { type ColorScale, type ContinuousColorStop, _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, StructureStat, injectPlddtIntoPdb, sampleColorScale, toCssGradient };
735
+ 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 };