@jbrowse/core 5.0.0-beta.1 → 5.0.0-beta.11

package/esm/ui/palette.d.ts

@@ -117,33 +117,32 @@ export interface SemanticColors {
 export declare const colorFwdStrand = "#EC8B8B";
 /** #color alignments-strand | Reverse strand | Read maps to the reverse strand */
 export declare const colorRevStrand = "#8F8FD8";
-/** #color alignments-pair-orientation | LR (→ ←, normal proper pair) | Concordant */
+/** #color alignments-pair-orientation | LR (→ ←) | Normal proper pair */
 export declare const colorPairLR = "#d3d3d3";
-export declare const colorPairLRDark = "#8a8a8a";
-/** #color alignments-pair-orientation | RL (← →, mates point away from each other) | Abnormal orientation */
+export declare const colorPairLRDark = "#b0b0b0";
+/** #color alignments-pair-orientation | RL (← →) | Mates point away from each other */
 export declare const colorPairRL = "#0099bb";
-/** #color alignments-pair-orientation | LL (→ →, both mates forward strand) | Abnormal orientation */
+/** #color alignments-pair-orientation | LL (→ →) | Both mates on the forward strand */
 export declare const colorPairLL = "#4d9a4d";
-/** #color alignments-pair-orientation | RR (← ←, both mates reverse strand) | Abnormal orientation */
+/** #color alignments-pair-orientation | RR (← ←) | Both mates on the reverse strand */
 export declare const colorPairRR = "#5555bb";
-export declare const colorNeutralRead = "#c8c8c8";
 /**
- * #color alignments-pair-orientation | Inter-chromosomal | Mate maps to a different chromosome; colored distinctly rather than by orientation
- * #color alignments-insert-size | Mate on a different chromosome | Suggests an inter-chromosomal event
+ * #color alignments-pair-orientation | Inter-chromosomal | Mate on another chromosome
+ * #color alignments-insert-size | Inter-chromosomal | Mate on another chromosome
  */
 export declare const colorInterchrom = "#af4d19";
-/** #color alignments-insert-size | Insert larger than expected | Suggests a deletion spanning the pair */
+/** #color alignments-insert-size | Insert larger than expected | Deletion between the mates */
 export declare const colorLongInsert = "#ff0000";
-/** #color alignments-insert-size | Insert smaller than expected | Suggests an insertion between the pair */
+/** #color alignments-insert-size | Insert smaller than expected | Insertion between the mates */
 export declare const colorShortInsert = "#f582c0";
 /**
- * #color alignments-pair-orientation | Mate unmapped | The other end of the pair aligned nowhere, so orientation and insert size say nothing
- * #color alignments-insert-size | Mate unmapped | The other end of the pair aligned nowhere, so insert size says nothing
+ * #color alignments-pair-orientation | Mate unmapped | Mate aligned nowhere
+ * #color alignments-insert-size | Mate unmapped | Mate aligned nowhere
  */
 export declare const colorUnmappedMate = "#000000";
 export declare const colorUnmappedMateDark = "#4a4a4a";
 export declare const colorLongreadInv = "#7755bb";
-/** #color alignments-pair-orientation | Split paired-end read (inverted) | A paired read's supplementary segment maps opposite-strand to its primary, so the junction is inverted — an inversion or an inverted duplication */
+/** #color alignments-pair-orientation | Split read (inverted) | Supplementary segment on the opposite strand to its primary */
 export declare const colorSplitReadInversion = "#9b30b0";
 export declare const colorSupplementary = "#f0b878";
 export declare const tagColorPalette: string[];
@@ -183,7 +182,7 @@ export interface StringColors {
     codonNonsynonymous: string;
     /** MAF codon view: the codon differs but the amino acid does not */
     codonSynonymous: string;
-    /** MAF codon view: a stop codon */
+    /** MAF codon view: a stop the reference codon is not */
     codonStop: string;
     /** Coverage histogram fill */
     coverage: string;
@@ -197,6 +196,8 @@ export interface StringColors {
     hardclip: string;
     /** Deletion markers in alignments */
     deletion: string;
+    /** MAF alignment-gap cells, where a species has no base */
+    mafGap: string;
     /** Span where two segments of one molecule both align (view-as-pairs / chains) */
     readOverlap: string;
     /** Base modifications on the forward strand */
@@ -225,6 +226,13 @@ export interface StringColors {
      * readable as a boundary on a plot that also draws a full grid
      */
     regionBoundary: string;
+    /**
+     * Opaque bar between two displayed regions of a linear genome view. Opaque
+     * because it paints over track data on both sides and has to mask it
+     */
+    regionSeparator: string;
+    /** Cell and header rules in JBrowse's own tables, e.g. the faceted track selector */
+    tableBorder: string;
     /** Hover shading over a single feature */
     featureHover: string;
     /** Hover shading over a feature group, e.g. a linked-read chain */
@@ -233,6 +241,8 @@ export interface StringColors {
     featureSelected: string;
     /** Feature description labels, e.g. gene descriptions */
     featureDescription: string;
+    /** Intron lines, strand chevrons and strand arrows in feature tracks */
+    featureConnector: string;
 }
 /**
  * Every color JBrowse renders, resolved. Plain strings throughout, so this
@@ -242,6 +252,14 @@ export interface StringColors {
 export interface JBrowsePalette extends StringColors, NeutralTokens, SemanticColors {
     mode: 'light' | 'dark';
     primary: ColorQuad;
+    /**
+     * The primary colour where it marks something on the page's own ground,
+     * such as a checked box or a selected row. `primary.main` in light mode. In
+     * dark mode a primary as deep as midnight vanishes against the background,
+     * so it is the secondary text colour, which the Material controls take there
+     * too.
+     */
+    accent: string;
     secondary: ColorQuad;
     tertiary: ColorQuad;
     quaternary: ColorQuad;
@@ -252,6 +270,18 @@ export interface JBrowsePalette extends StringColors, NeutralTokens, SemanticCol
     framesCDS: FrameTuple<ColorQuad>;
     alignmentFill: AlignmentFill;
 }
+/**
+ * The colors a palette wants when JBrowse draws it dark. Only the slots that
+ * differ: the neutrals, the semantics and two dozen string colors already
+ * follow the mode on their own, so a palette that states nothing here still
+ * has a working dark half.
+ *
+ * What does not survive a mode flip is a brand color. `primary` is the case —
+ * a deep navy reads at 1.2:1 against a dark background where it reads at 16:1
+ * against a light one — and it is the reason this exists rather than a `mode`
+ * flag being the whole story.
+ */
+export type DarkPaletteInput = Omit<PaletteInput, 'mode' | 'dark'>;
 /**
  * The palette half of what a theme may declare. Structurally compatible with
  * MUI's `PaletteOptions`, which is what the config `theme` slot carries, so a
@@ -259,7 +289,10 @@ export interface JBrowsePalette extends StringColors, NeutralTokens, SemanticCol
  */
 export interface PaletteInput extends Partial<StringColors> {
     mode?: 'light' | 'dark';
+    /** what changes when this palette is drawn dark; see {@link DarkPaletteInput} */
+    dark?: DarkPaletteInput;
     primary?: ShadeInput;
+    accent?: string;
     secondary?: ShadeInput;
     tertiary?: ShadeInput;
     quaternary?: ShadeInput;
@@ -297,6 +330,7 @@ export declare const palettePresets: {
         skip?: string | undefined;
         hardclip?: string | undefined;
         deletion?: string | undefined;
+        mafGap?: string | undefined;
         readOverlap?: string | undefined;
         modificationFwd?: string | undefined;
         modificationRev?: string | undefined;
@@ -307,12 +341,18 @@ export declare const palettePresets: {
         plotGridlineMinor?: string | undefined;
         plotGridlineMajor?: string | undefined;
         regionBoundary?: string | undefined;
+        regionSeparator?: string | undefined;
+        tableBorder?: string | undefined;
         featureHover?: string | undefined;
         featureHoverStrong?: string | undefined;
         featureSelected?: string | undefined;
         featureDescription?: string | undefined;
+        featureConnector?: string | undefined;
         mode?: 'light' | 'dark';
+        /** what changes when this palette is drawn dark; see {@link DarkPaletteInput} */
+        dark?: DarkPaletteInput;
         primary?: ShadeInput;
+        accent?: string;
         secondary?: ShadeInput;
         tertiary?: ShadeInput;
         quaternary?: ShadeInput;
@@ -333,7 +373,7 @@ export declare const palettePresets: {
         grey?: Partial<NeutralTokens['grey']>;
         action?: Partial<NeutralTokens['action']>;
     };
-    lightStock: {
+    stock: {
         stopCodon?: string | undefined;
         startCodon?: string | undefined;
         codonNonsynonymous?: string | undefined;
@@ -345,6 +385,7 @@ export declare const palettePresets: {
         skip?: string | undefined;
         hardclip?: string | undefined;
         deletion?: string | undefined;
+        mafGap?: string | undefined;
         readOverlap?: string | undefined;
         modificationFwd?: string | undefined;
         modificationRev?: string | undefined;
@@ -355,12 +396,18 @@ export declare const palettePresets: {
         plotGridlineMinor?: string | undefined;
         plotGridlineMajor?: string | undefined;
         regionBoundary?: string | undefined;
+        regionSeparator?: string | undefined;
+        tableBorder?: string | undefined;
         featureHover?: string | undefined;
         featureHoverStrong?: string | undefined;
         featureSelected?: string | undefined;
         featureDescription?: string | undefined;
+        featureConnector?: string | undefined;
         mode?: 'light' | 'dark';
+        /** what changes when this palette is drawn dark; see {@link DarkPaletteInput} */
+        dark?: DarkPaletteInput;
         primary?: ShadeInput;
+        accent?: string;
         secondary?: ShadeInput;
         tertiary?: ShadeInput;
         quaternary?: ShadeInput;
@@ -381,7 +428,7 @@ export declare const palettePresets: {
         grey?: Partial<NeutralTokens['grey']>;
         action?: Partial<NeutralTokens['action']>;
     };
-    lightMinimal: {
+    minimal: {
         stopCodon?: string | undefined;
         startCodon?: string | undefined;
         codonNonsynonymous?: string | undefined;
@@ -393,6 +440,7 @@ export declare const palettePresets: {
         skip?: string | undefined;
         hardclip?: string | undefined;
         deletion?: string | undefined;
+        mafGap?: string | undefined;
         readOverlap?: string | undefined;
         modificationFwd?: string | undefined;
         modificationRev?: string | undefined;
@@ -403,11 +451,15 @@ export declare const palettePresets: {
         plotGridlineMinor?: string | undefined;
         plotGridlineMajor?: string | undefined;
         regionBoundary?: string | undefined;
+        regionSeparator?: string | undefined;
+        tableBorder?: string | undefined;
         featureHover?: string | undefined;
         featureHoverStrong?: string | undefined;
         featureSelected?: string | undefined;
         featureDescription?: string | undefined;
+        featureConnector?: string | undefined;
         mode?: 'light' | 'dark';
+        accent?: string;
         quaternary?: ShadeInput;
         highlight?: ShadeInput;
         textHighlight?: ShadeInput;
@@ -434,110 +486,52 @@ export declare const palettePresets: {
         tertiary: {
             main: string;
         };
-    };
-    darkMinimal: {
-        stopCodon?: string | undefined;
-        startCodon?: string | undefined;
-        codonNonsynonymous?: string | undefined;
-        codonSynonymous?: string | undefined;
-        codonStop?: string | undefined;
-        coverage?: string | undefined;
-        insertion?: string | undefined;
-        softclip?: string | undefined;
-        skip?: string | undefined;
-        hardclip?: string | undefined;
-        deletion?: string | undefined;
-        readOverlap?: string | undefined;
-        modificationFwd?: string | undefined;
-        modificationRev?: string | undefined;
-        mutedSnpBase?: string | undefined;
-        missingData?: string | undefined;
-        gridlineMinor?: string | undefined;
-        gridlineMajor?: string | undefined;
-        plotGridlineMinor?: string | undefined;
-        plotGridlineMajor?: string | undefined;
-        regionBoundary?: string | undefined;
-        featureHover?: string | undefined;
-        featureHoverStrong?: string | undefined;
-        featureSelected?: string | undefined;
-        featureDescription?: string | undefined;
-        quaternary?: ShadeInput;
-        highlight?: ShadeInput;
-        textHighlight?: ShadeInput;
-        error?: ShadeInput;
-        warning?: ShadeInput;
-        info?: ShadeInput;
-        success?: ShadeInput;
-        bases?: Partial<Record<BaseKey, ShadeInput>>;
-        frames?: FrameTuple<ShadeInput>;
-        framesCDS?: FrameTuple<ShadeInput>;
-        alignmentFill?: Partial<AlignmentFill>;
-        text?: Partial<NeutralTokens['text']>;
-        background?: Partial<NeutralTokens['background']>;
-        divider?: string;
-        common?: Partial<NeutralTokens['common']>;
-        grey?: Partial<NeutralTokens['grey']>;
-        action?: Partial<NeutralTokens['action']>;
-        mode: "dark";
-        primary: {
-            main: string;
-        };
-        secondary: {
-            main: string;
-        };
-        tertiary: {
-            main: string;
+        dark: {
+            primary: {
+                main: string;
+            };
         };
     };
-    darkStock: {
-        stopCodon?: string | undefined;
-        startCodon?: string | undefined;
-        codonNonsynonymous?: string | undefined;
-        codonSynonymous?: string | undefined;
-        codonStop?: string | undefined;
-        coverage?: string | undefined;
-        insertion?: string | undefined;
-        softclip?: string | undefined;
-        skip?: string | undefined;
-        hardclip?: string | undefined;
-        deletion?: string | undefined;
-        readOverlap?: string | undefined;
-        modificationFwd?: string | undefined;
-        modificationRev?: string | undefined;
-        mutedSnpBase?: string | undefined;
-        missingData?: string | undefined;
-        gridlineMinor?: string | undefined;
-        gridlineMajor?: string | undefined;
-        plotGridlineMinor?: string | undefined;
-        plotGridlineMajor?: string | undefined;
-        regionBoundary?: string | undefined;
-        featureHover?: string | undefined;
-        featureHoverStrong?: string | undefined;
-        featureSelected?: string | undefined;
-        featureDescription?: string | undefined;
-        primary?: ShadeInput;
-        secondary?: ShadeInput;
-        tertiary?: ShadeInput;
-        quaternary?: ShadeInput;
-        highlight?: ShadeInput;
-        textHighlight?: ShadeInput;
-        error?: ShadeInput;
-        warning?: ShadeInput;
-        info?: ShadeInput;
-        success?: ShadeInput;
-        bases?: Partial<Record<BaseKey, ShadeInput>>;
-        frames?: FrameTuple<ShadeInput>;
-        framesCDS?: FrameTuple<ShadeInput>;
-        alignmentFill?: Partial<AlignmentFill>;
-        text?: Partial<NeutralTokens['text']>;
-        background?: Partial<NeutralTokens['background']>;
-        divider?: string;
-        common?: Partial<NeutralTokens['common']>;
-        grey?: Partial<NeutralTokens['grey']>;
-        action?: Partial<NeutralTokens['action']>;
-        mode: "dark";
+};
+/**
+ * The theme names from before light and dark were an axis, as the palette and
+ * mode each one meant. A stored selection, a share link, an admin's
+ * `configuration.theme`, `jbrowse-img --theme` and a saved figure spec all
+ * carry these, so they keep resolving rather than falling back to the default.
+ */
+export declare const legacyThemeNames: {
+    readonly lightStock: {
+        readonly themeName: 'stock';
+        readonly mode: 'light';
+    };
+    readonly darkStock: {
+        readonly themeName: 'stock';
+        readonly mode: 'dark';
+    };
+    readonly lightMinimal: {
+        readonly themeName: 'minimal';
+        readonly mode: 'light';
+    };
+    readonly darkMinimal: {
+        readonly themeName: 'minimal';
+        readonly mode: 'dark';
     };
 };
+export type PaletteMode = 'light' | 'dark';
+export type LegacyThemeName = keyof typeof legacyThemeNames;
+/**
+ * What a name and a mode mean together, with a name that predates the axis
+ * resolved to the pair it stood for. An explicit `mode` still wins — a user
+ * picking Dark over a stored `lightStock` gets dark stock, not light.
+ *
+ * `themes` is whatever map the caller looks names up in, so an admin's
+ * `extraThemes` entry taking one of the retired names wins over the alias it
+ * would otherwise shadow.
+ */
+export declare function resolveThemeSelection(themeName?: string, mode?: PaletteMode, themes?: Record<string, unknown>): {
+    themeName: string;
+    mode?: PaletteMode;
+};
 /**
  * What `resolvePalette` reads. Structurally the minimum of the public
  * `SerializableThemeArgs` (declared in `theme.ts`, where the MUI `ThemeOptions`
@@ -548,6 +542,14 @@ export interface PaletteArgs {
     configTheme?: ThemeInput;
     themeName?: string;
     extraThemes?: Record<string, ThemeInput>;
+    /**
+     * Draw the named palette light or dark, whatever mode it declares. This is
+     * the axis a user picks along, so it wins over a `mode` written into the
+     * palette or the config `theme` slot; leaving it out keeps reading the mode
+     * off the palette, which is how every theme named `dark*` still resolves
+     * dark.
+     */
+    mode?: 'light' | 'dark';
 }
 /**
  * Build the palette for a set of theme arguments.