@czi-sds/data-viz 2.1.1 → 2.3.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 { DatasetComponentOption, ECharts, EChartsOption, ScatterSeriesOption } from "echarts";
3
3
  import { HTMLAttributes } from "react";
4
4
  import { DiscreteColorGeneratorOptions, TooltipProps, TooltipTableContentProps } from "@czi-sds/components";
5
+ import { PluginUISpec } from "molstar/lib/mol-plugin-ui/spec";
5
6
  import { CustomElementProperty } from "molstar/lib/mol-model-props/common/custom-element-property";
6
7
 
7
8
  //#region src/common/colorScales.d.ts
@@ -297,14 +298,102 @@ interface ResidueRef {
297
298
  /** Insertion code, or `""` when the residue has none. */
298
299
  insCode: string;
299
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 structure 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
+ }
300
389
  /** A whole-structure statistic shown along the bottom of the viewer. */
301
390
  interface StructureStat {
302
391
  value: string;
303
392
  label: string;
304
393
  }
305
394
  interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
306
- /** Structure to render, as raw PDB text. */
307
- pdb: string;
395
+ /** Structure to render, as raw PDB or mmCIF (PDBx) text. */
396
+ structure: string;
308
397
  /**
309
398
  * Per-residue pLDDT confidence on a 0-1 scale, ordered by residue. When
310
399
  * supplied the structure is colored by pLDDT unless `residueOverlay` takes
@@ -326,6 +415,11 @@ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement
326
415
  * @default true
327
416
  */
328
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;
329
423
  /**
330
424
  * Show the sequence panel pinned along the bottom of the viewer.
331
425
  * @default true
@@ -339,11 +433,64 @@ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement
339
433
  /** Per-residue values that override pLDDT coloring while set. */
340
434
  residueOverlay?: ResidueValueOverlay | null;
341
435
  /**
342
- * 0-based index of the selected residue, or null when none is selected.
343
- * Controlled: selecting a residue zooms the camera in on it, and clearing the
344
- * selection zooms back out to the default view.
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
+ * Residues are drawn in ball-and-stick over the cartoon; whole chains are
441
+ * left as they are and the chains around them dim, the same as hovering a
442
+ * chain's name.
443
+ */
444
+ selection?: StructureSelection | null;
445
+ /**
446
+ * Chains hidden from the 3D view, by `chainId`. Leave undefined to let the
447
+ * viewer own visibility itself, which is what the chain legend's toggles
448
+ * drive; passing it takes that over, and the toggles then only report.
345
449
  */
346
- selectedResidue?: number | null;
450
+ hiddenChains?: string[];
451
+ /**
452
+ * Color per chain, by `chainId`, as `#RRGGBB`. Chains left out fall back to
453
+ * the viewer's palette. Only visible while chain coloring is what is on
454
+ * screen, which is when neither `plddt` nor `residueOverlay` is set.
455
+ */
456
+ chainColors?: Record<string, string>;
457
+ /**
458
+ * Show the chain legend, which lists each chain with its color and a
459
+ * visibility toggle. Ignored on a single-chain structure, where there is
460
+ * nothing to tell apart or hide.
461
+ * @default true
462
+ */
463
+ showChainLegend?: boolean;
464
+ /**
465
+ * Stop other chains from dimming in the 3D view while a chain's name is
466
+ * pointed at, in the legend or above its grid in the sequence panel.
467
+ *
468
+ * The dim is on by default, since on a complex it is how a reader finds out
469
+ * which chain is which. Turn it off where the movement is more distracting
470
+ * than the answer is useful - a grid of viewers a pointer crosses on its way
471
+ * somewhere else, or a page driving its own highlighting through `selection`.
472
+ * @default false
473
+ */
474
+ disableChainHighlightOnHover?: boolean;
475
+ /**
476
+ * Mol* plugin spec laid over the viewer's own, which is how the whole of
477
+ * Mol*'s configuration is reachable without a prop here for each setting.
478
+ * Anything named here wins, so `canvas3d.postprocessing`, a `PluginConfig`
479
+ * item, or `layout.initial` can all be set to something other than the
480
+ * default the viewer picked.
481
+ *
482
+ * List-valued keys - `behaviors`, `config`, `actions`, `animations`,
483
+ * `customFormats`, `customParamEditors` - are appended to rather than
484
+ * replaced. For `config` that is what lets an entry override the viewer's,
485
+ * since Mol* reads the list in order. It also means a behavior cannot be
486
+ * taken away: the ones the viewer drops stay dropped, and the ones it keeps
487
+ * cannot be removed from here.
488
+ *
489
+ * Read once, when the plugin is created, except for `canvas3d`, which is
490
+ * re-applied whenever it changes. Creating the plugin throws away the camera,
491
+ * so the rest is deliberately not reactive.
492
+ */
493
+ molstarSpec?: Partial<PluginUISpec>;
347
494
  /**
348
495
  * Up to three whole-structure stats shown along the bottom. A null entry
349
496
  * reserves its column without rendering anything, so the columns never shift
@@ -357,25 +504,74 @@ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement
357
504
  * the structure.
358
505
  */
359
506
  onResidueHover?: (residue: ResidueRef | null) => void;
360
- /** Called when the user clicks empty space, clearing the selection. */
361
- onSelectionClear?: () => void;
507
+ /**
508
+ * Called with the new selection whenever the user makes one - clicking a
509
+ * residue, dragging across the sequence, clicking a chain caption - and with
510
+ * `null` when they click empty space to clear it.
511
+ *
512
+ * A whole-chain selection arrives as `{ chains: [id] }` rather than as every
513
+ * index on it, so echoing it straight back into `selection` costs nothing.
514
+ */
515
+ onSelectionChange?: (selection: StructureSelection | null) => void;
516
+ /**
517
+ * Called with the chains found in the structure, whenever a structure is
518
+ * loaded. Fires with `[]` when the structure holds none.
519
+ */
520
+ onChainsChange?: (chains: ChainRef[]) => void;
521
+ /**
522
+ * Called with the chains now hidden when a visibility toggle is used. Fires
523
+ * whether or not `hiddenChains` is controlled, so a consumer can follow the
524
+ * viewer's own state without owning it.
525
+ */
526
+ onChainVisibilityChange?: (hiddenChains: string[]) => void;
362
527
  }
363
528
  /**
364
- * Per-residue readout that replaces the whole-structure stats while a residue
365
- * is hovered or selected.
529
+ * Readout that replaces the whole-structure stats while something is hovered
530
+ * or selected. Covers one residue or many: a drag across the sequence and a
531
+ * whole-chain selection report through this too, as a mean over what they
532
+ * cover.
366
533
  */
367
534
  interface ResidueReadout {
368
- /** e.g. "PHE 17" */
535
+ /** e.g. "PHE 17", "Chain A", or "24 residues". */
369
536
  label: string;
370
- /** Residue pLDDT on a 0-1 scale, or null when unavailable. */
537
+ /**
538
+ * pLDDT on a 0-1 scale, or null when unavailable. The mean across the
539
+ * residues covered when there is more than one, ignoring those without a
540
+ * score.
541
+ */
371
542
  plddt: number | null;
372
543
  /**
373
- * Residue overlay value, or null when the overlay holds none for it - which
374
- * is also what a structure paints neutral - or when no overlay is set.
544
+ * Overlay value, or null when the overlay holds none - which is also what a
545
+ * structure paints neutral - or when no overlay is set. The mean across the
546
+ * residues covered when there is more than one, ignoring those the overlay
547
+ * says nothing about.
375
548
  */
376
549
  value: number | null;
550
+ /**
551
+ * Residues the readout covers, which is what makes the numbers above means
552
+ * rather than readings. 1 for a single residue.
553
+ */
554
+ residueCount: number;
377
555
  }
378
556
  //#endregion
557
+ //#region src/core/ProteinStructureViewer/utils/structureFormat.d.ts
558
+ /**
559
+ * Structure text formats Mol* can parse from the viewer's `structure` prop.
560
+ *
561
+ * `"mmcif"` covers both mmCIF and PDBx; they are the same text format, and
562
+ * that is the name Mol*'s trajectory parser uses. Binary CIF (`.bcif`) is not
563
+ * accepted: the prop is a string.
564
+ */
565
+ type StructureFormat = "pdb" | "mmcif";
566
+ /**
567
+ * Infers whether `text` is PDB or mmCIF (PDBx).
568
+ *
569
+ * mmCIF documents start with a `data_` block and name their coordinates
570
+ * `_atom_site.`. PDB never does either, so either marker is enough. A leading
571
+ * comment (`# ...`) before `data_` is still mmCIF.
572
+ */
573
+ declare function detectStructureFormat(text: string): StructureFormat;
574
+ //#endregion
379
575
  //#region src/core/ProteinStructureViewer/utils/plddt.d.ts
380
576
  /**
381
577
  * AlphaFold's pLDDT confidence bands. Thresholds are on the 0-1 scale that
@@ -394,6 +590,23 @@ declare const PLDDT_COLOR_SCALE: ColorScale;
394
590
  * them its neighbour's score.
395
591
  */
396
592
  declare function injectPlddtIntoPdb(pdbData: string, plddtValues: number[]): string;
593
+ /**
594
+ * Rewrites an mmCIF (PDBx) file's `_atom_site.B_iso_or_equiv` column with
595
+ * pLDDT scores so Mol* can read them off the parsed model, the same way
596
+ * `injectPlddtIntoPdb` rewrites the PDB B-factor column. Scores arrive on a
597
+ * 0-1 scale and are stored on the conventional 0-100 one. Residues past the
598
+ * end of `plddtValues` fall back to a mid-confidence 50.
599
+ *
600
+ * If the file has no B-factor column, one is appended to the atom-site loop
601
+ * rather than leaving the scores behind.
602
+ */
603
+ declare function injectPlddtIntoMmcif(mmcifData: string, plddtValues: number[]): string;
604
+ /**
605
+ * Rewrites a structure file's B-factors with pLDDT scores. Dispatches to
606
+ * `injectPlddtIntoPdb` or `injectPlddtIntoMmcif` from `format`, or from
607
+ * detecting the format of `data` when `format` is omitted.
608
+ */
609
+ declare function injectPlddt(data: string, plddtValues: number[], format?: StructureFormat): string;
397
610
  //#endregion
398
611
  //#region src/core/ProteinStructureViewer/index.d.ts
399
612
  declare const _default$1: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ProteinStructureViewerProps & import("react").RefAttributes<HTMLDivElement>>>;
@@ -559,4 +772,4 @@ interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
559
772
  //#region src/core/StackedBarChart/index.d.ts
560
773
  declare const StackedBarChart: (props: StackedBarChartProps) => JSX.Element;
561
774
  //#endregion
562
- 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 };
775
+ 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 };