@jax-data-science/sci-image-visualizer 0.6.0 → 0.7.0

package/lib/spatial-controls/spatial-controls.component.d.ts

@@ -1,7 +1,7 @@
-import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { EventEmitter, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { IVisualizer, ISpatialControls } from '../contracts/visualizer.contract';
 import { SpatialDataset } from '../contracts/spatial-dataset.contract';
-import { ColormapNode, SpatialViewState } from '../contracts/display-types';
+import { ColormapNode, SpatialViewState, TranscriptGlyphName } from '../contracts/display-types';
 import { SpatialSelectionMask } from '../spatial/spatial-selection';
 import * as i0 from "@angular/core";
 /** One legend row for a categorical colouring. */
@@ -9,6 +9,14 @@ export interface SpatialLegendEntry {
     label: string;
     color: string;
 }
+/**
+ * `group,gene` rows (CSV or TSV, header optional) → gene groups, in file order.
+ * Exported for tests.
+ */
+export declare function parseGeneGroups(text: string): {
+    name: string;
+    genes: string[];
+}[];
 /**
  * Spatial-omics controls: a non-modal, resizable, draggable dialog for choosing
  * what the observation markers are coloured by, and how they are drawn.
@@ -25,6 +33,7 @@ export interface SpatialLegendEntry {
  */
 export declare class SpatialControlsComponent implements OnInit, OnDestroy {
     private readonly viz;
+    private readonly zone;
     /** The embedded chart, so a dialog resize can re-fit it. */
     private charts?;
     /**
@@ -130,7 +139,7 @@ export declare class SpatialControlsComponent implements OnInit, OnDestroy {
     private geneSearchToken;
     private keyToken;
     private readonly subs;
-    constructor(viz: IVisualizer);
+    constructor(viz: IVisualizer, zone: NgZone);
     ngOnInit(): void;
     ngOnDestroy(): void;
     onVisibleChange(value: boolean): void;
@@ -145,6 +154,23 @@ export declare class SpatialControlsComponent implements OnInit, OnDestroy {
      * hop further away.
      */
     onGeneFilter(query: string): Promise<void>;
+    /**
+     * Opening either gene dropdown — "Colour by gene" or the transcript genes. Both share
+     * one list and one search, so each opens on the head of the full list rather than on
+     * whatever the other was last filtered to.
+     *
+     * A whole-transcriptome dataset does not inline its ~30k names; they are fetched here,
+     * once, on first open — the list is then resident and every keystroke filters locally,
+     * exactly as for a targeted panel. Until it arrives the dropdown falls back to asking
+     * the server per keystroke.
+     */
+    ensureGeneList(): Promise<void>;
+    /** Most names fetched for the lazy list — well above any panel, whole-transcriptome included. */
+    private static readonly GENE_LIST_MAX;
+    private geneListLoading;
+    /** Options for `names`, plus the genes already chosen (a multi-select shows a chip only
+     *  for a value it can find among its options). */
+    private withSelected;
     /** A gene was picked; it supersedes any column selection. */
     onGene(name: string | null): void;
     /** Select every observation inside the drawn regions (their union). */
@@ -221,6 +247,211 @@ export declare class SpatialControlsComponent implements OnInit, OnDestroy {
     /** Mirrors the renderer's cap, for the note only. */
     private static readonly DENSITY_MAX_CLUSTERS;
     onClip(value: [number, number]): void;
+    readonly cellDrawOptions: {
+        label: string;
+        value: string;
+    }[];
+    readonly transcriptColorOptions: {
+        label: string;
+        value: string;
+    }[];
+    readonly glyphOptions: {
+        label: string;
+        value: TranscriptGlyphName;
+        points: string;
+    }[];
+    readonly budgetOptions: {
+        label: string;
+        value: number;
+    }[];
+    /** Boundaries on offer: tiled (level-of-detail) or whole-dataset rings. */
+    get hasCells(): boolean;
+    get hasTranscripts(): boolean;
+    /** Whether outlines are on — the explicit choice, or automatically for data that has them. */
+    get cellsOn(): boolean;
+    get activeCellSet(): string | null;
+    /**
+     * Option lists for the cell/transcript controls. Built once per dataset rather than in
+     * getters: a getter returns a fresh array on every change-detection pass, and PrimeNG
+     * re-renders its buttons whenever the array identity changes — which made them
+     * impossible to click.
+     */
+    cellSetOptions: {
+        label: string;
+        value: string;
+    }[];
+    transcriptModeOptions: {
+        label: string;
+        value: SpatialViewState['transcriptMode'];
+    }[];
+    private buildTileOptions;
+    /** Cell colour modes on offer (Xenium Explorer's "Cell Color"). */
+    cellColorOptions: {
+        label: string;
+        value: SpatialViewState['cellColorMode'];
+    }[];
+    /**
+     * The group picker: categorical columns under their section heading, a family of
+     * variants (k-means at k = 2…10) listed once. Values are a column name, or
+     * `family:<id>` for a family.
+     */
+    groupOptions: {
+        label: string;
+        items: {
+            label: string;
+            value: string;
+        }[];
+    }[];
+    /** Variants of the active family (k = 2…10), when a family is active. */
+    groupVariantOptions: {
+        label: string;
+        value: string;
+    }[];
+    /** The last variant chosen per family, so switching away and back keeps k. */
+    private familyChoice;
+    private buildGroupOptions;
+    /** The picker's value for the active group column. */
+    get activeGroupEntry(): string | null;
+    private refreshVariants;
+    onGroupEntry(value: string): void;
+    onGroupVariant(name: string): void;
+    /** The active grouping's categories with colours and cell counts, largest first. */
+    groupRows: {
+        label: string;
+        color: string;
+        count: number;
+    }[];
+    groupTotal: number;
+    groupsExpanded: boolean;
+    private groupRowsFor;
+    groupImportError: string | null;
+    groupImporting: boolean;
+    private refreshGroups;
+    isGroupShown(label: string): boolean;
+    get allGroupsShown(): boolean;
+    onGroupShown(label: string, on: boolean): void;
+    onAllGroupsShown(on: boolean): void;
+    get canImportGroups(): boolean;
+    /** '+': a CSV/TSV of `cell_id` and group, named after the file. */
+    onImportGroupsFile(input: HTMLInputElement): Promise<void>;
+    get activeCellTypeColumn(): string | null;
+    onShowCells(on: boolean): void;
+    onCellSet(set: string): void;
+    onCellDraw(draw: SpatialViewState['cellDraw']): void;
+    onCellOpacity(value: number | undefined): void;
+    onCellTypeColumn(name: string | null): void;
+    onCellColorMode(mode: SpatialViewState['cellColorMode']): void;
+    onCellColorGene(gene: string | null): void;
+    onCellSingleColor(hex: string): void;
+    /** Fill opacity as a 0–100 number, for the box beside the slider. */
+    onCellOpacityPercent(v: number | null): void;
+    onShowImage(on: boolean): void;
+    onShowAnnotations(on: boolean): void;
+    /** Which collapsible sections are open. Per dialog instance, not persisted. */
+    open: Record<'images' | 'cells' | 'transcripts' | 'annotations' | 'observations', boolean>;
+    toggleSection(name: keyof SpatialControlsComponent['open']): void;
+    /** The mode the section header's switch turns back on. */
+    private lastTranscriptMode;
+    onTranscriptsOn(on: boolean): void;
+    /** Estimated transcripts in view, against the budget — Explorer's points bar. */
+    estimate: {
+        points: number;
+        max: number;
+    } | null;
+    /** The density window in use and its densest bin, for the threshold control. */
+    densityStats: {
+        lo: number;
+        hi: number;
+        max: number;
+    } | null;
+    get estimatePercent(): number;
+    get estimateOverMax(): boolean;
+    editingMax: boolean;
+    /** The selected genes as Explorer's tree: named groups, then the ungrouped ones. */
+    /** Rebuilt when the view changes — never per change-detection pass (see buildTileOptions). */
+    geneTree: {
+        name: string | null;
+        genes: string[];
+    }[];
+    geneMenu: {
+        label: string;
+        icon: string;
+        command: () => void;
+        disabled?: boolean;
+    }[];
+    private buildGeneTree;
+    /** Real genes in the panel — the tree's denominator. */
+    get geneTotal(): number;
+    collapsedGeneGroups: Set<string>;
+    geneTreeOpen: boolean;
+    toggleGeneGroup(name: string): void;
+    isGeneShown(gene: string): boolean;
+    areGenesShown(genes: string[]): boolean;
+    /** The eye toggle: hide or show genes without removing them from the selection. */
+    onGenesShown(genes: string[], on: boolean): void;
+    onGeneColor(gene: string, hex: string): void;
+    /** '±': every gene, or back to the chosen list. */
+    onToggleAllGenes(): void;
+    /** '⋮' menu. */
+    private buildGeneMenu;
+    /** The hidden file input the menu's import opens. */
+    private geneGroupFileRef?;
+    private get geneGroupInput();
+    trackByLabel: (_i: number, row: {
+        label: string;
+    }) => string;
+    trackByNode: (_i: number, node: {
+        name: string | null;
+    }) => string;
+    trackByLabelString: (_i: number, s: string) => string;
+    get cellOpacityPercent(): number;
+    get densityOpacityPercent(): number;
+    geneGroupError: string | null;
+    onNewGeneGroup(): void;
+    /**
+     * Import gene groups: CSV/TSV with a group and a gene column (header optional), e.g.
+     * marker genes per cell type. The genes are added to the selection.
+     */
+    onImportGeneGroups(input: HTMLInputElement): Promise<void>;
+    readonly densityBins: number[];
+    get densityBinIndex(): number;
+    onDensityBinIndex(i: number | undefined): void;
+    onDensityOpacityPercent(v: number | null): void;
+    /**
+     * The threshold window shown: the one set, else the one derived. A stored array, not a
+     * getter: a range slider's `ngModel` given a fresh array every change-detection pass
+     * schedules another pass, forever — which hung the page the moment the density
+     * controls appeared.
+     */
+    densityWindow: [number, number];
+    densitySliderMax: number;
+    densityStep: number;
+    private refreshDensityWindow;
+    onDensityRange(range: [number, number] | number[] | undefined): void;
+    onDensityRangeEnd(which: 0 | 1, v: number | null): void;
+    onDensityAuto(): void;
+    selectedDensityColormapNode: ColormapNode | null;
+    onDensityColormap(node: ColormapNode | null): void;
+    get densityColorBarCss(): string;
+    onTranscriptMode(mode: SpatialViewState['transcriptMode']): void;
+    onTranscriptGenes(genes: string[] | null): void;
+    /** "All genes" needs the grouping pyramid, or at least tiles to draw individually. */
+    get canShowAllGenes(): boolean;
+    /** Why "All genes" is not offered yet, while the server builds its pyramid. */
+    get allGenesPreparing(): string | null;
+    get showingAllGenes(): boolean;
+    onTranscriptAllGenes(on: boolean): void;
+    onTranscriptBudget(n: number): void;
+    onTranscriptColorBy(by: SpatialViewState['transcriptColorBy']): void;
+    onTranscriptScale(value: number | undefined): void;
+    onTranscriptOpacity(value: number | undefined): void;
+    onTranscriptQuality(includeLow: boolean): void;
+    onDensityOpacity(value: number | undefined): void;
+    glyphOf(gene: string, slot: number): TranscriptGlyphName;
+    onGlyph(gene: string, glyph: TranscriptGlyphName): void;
+    /** The colour gene `slot` is drawn in when transcripts are coloured by gene. */
+    geneColor(slot: number): string;
+    geneColorOf(gene: string): string;
     reset(): void;
     /**
      * Description of the active column, when it has one. Surfaced because a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jax-data-science/sci-image-visualizer",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "engines": {
     "node": ">=20.9.0"
   },