@jbrowse/core 3.0.5 → 3.2.0

package/ui/index.d.ts

@@ -14,3 +14,4 @@ export { default as PrerenderedCanvas } from './PrerenderedCanvas';
 export { default as ResizeHandle } from './ResizeHandle';
 export { default as SanitizedHTML } from './SanitizedHTML';
 export * from './Menu';
+export declare const VIEW_HEADER_HEIGHT = 28;

package/ui/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SanitizedHTML = exports.ResizeHandle = exports.PrerenderedCanvas = exports.Menu = exports.LoadingEllipses = exports.FileSelector = exports.FatalErrorDialog = exports.ErrorMessage = exports.EditableTypography = exports.Dialog = exports.CascadingMenuButton = exports.CascadingMenu = exports.AssemblySelector = exports.Logomark = exports.LogoFull = void 0;
+exports.VIEW_HEADER_HEIGHT = exports.SanitizedHTML = exports.ResizeHandle = exports.PrerenderedCanvas = exports.Menu = exports.LoadingEllipses = exports.FileSelector = exports.FatalErrorDialog = exports.ErrorMessage = exports.EditableTypography = exports.Dialog = exports.CascadingMenuButton = exports.CascadingMenu = exports.AssemblySelector = exports.Logomark = exports.LogoFull = void 0;
 __exportStar(require("./theme"), exports);
 var Logo_1 = require("./Logo");
 Object.defineProperty(exports, "LogoFull", { enumerable: true, get: function () { return Logo_1.LogoFull; } });
@@ -49,3 +49,4 @@ Object.defineProperty(exports, "ResizeHandle", { enumerable: true, get: function
 var SanitizedHTML_1 = require("./SanitizedHTML");
 Object.defineProperty(exports, "SanitizedHTML", { enumerable: true, get: function () { return __importDefault(SanitizedHTML_1).default; } });
 __exportStar(require("./Menu"), exports);
+exports.VIEW_HEADER_HEIGHT = 28;

package/ui/theme.d.ts

@@ -1,66 +1,55 @@
 import type { ThemeOptions } from '@mui/material/styles';
+import type { PaletteColor } from '@mui/material/styles/createPalette';
+type MaybePaletteColor = PaletteColor | undefined;
+type Frames = [
+    null,
+    MaybePaletteColor,
+    MaybePaletteColor,
+    MaybePaletteColor,
+    MaybePaletteColor,
+    MaybePaletteColor,
+    MaybePaletteColor
+];
 declare module '@mui/material/styles/createPalette' {
     interface Palette {
-        tertiary: Palette['primary'];
-        quaternary: Palette['primary'];
-        highlight: Palette['primary'];
-        stopCodon?: string;
-        startCodon?: string;
+        tertiary: PaletteColor;
+        quaternary: PaletteColor;
+        highlight: PaletteColor;
+        stopCodon: string;
+        startCodon: string;
+        insertion: string;
+        softclip: string;
+        skip: string;
+        hardclip: string;
+        deletion: string;
         bases: {
-            A: Palette['primary'];
-            C: Palette['primary'];
-            G: Palette['primary'];
-            T: Palette['primary'];
+            A: PaletteColor;
+            C: PaletteColor;
+            G: PaletteColor;
+            T: PaletteColor;
         };
-        frames: [
-            null,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined
-        ];
-        framesCDS: [
-            null,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined
-        ];
+        frames: Frames;
+        framesCDS: Frames;
     }
     interface PaletteOptions {
-        tertiary?: PaletteOptions['primary'];
-        quaternary?: PaletteOptions['primary'];
-        highlight?: PaletteOptions['primary'];
+        tertiary?: PaletteColorOptions;
+        quaternary?: PaletteColorOptions;
+        highlight?: PaletteColorOptions;
         stopCodon?: string;
         startCodon?: string;
+        hardclip?: string;
+        softclip?: string;
+        insertion?: string;
+        skip?: string;
+        deletion?: string;
         bases?: {
-            A?: PaletteOptions['primary'];
-            C?: PaletteOptions['primary'];
-            G?: PaletteOptions['primary'];
-            T?: PaletteOptions['primary'];
+            A?: PaletteColorOptions;
+            C?: PaletteColorOptions;
+            G?: PaletteColorOptions;
+            T?: PaletteColorOptions;
         };
-        framesCDS?: [
-            null,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined
-        ];
-        frames?: [
-            null,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined,
-            Palette['primary'] | undefined
-        ];
+        framesCDS?: Frames;
+        frames?: Frames;
     }
 }
 export declare const defaultThemes: ThemeMap;

package/ui/theme.js

@@ -41,20 +41,33 @@ const frames = [
 ];
 const stopCodon = '#e22';
 const startCodon = '#3e3';
+const insertion = '#800080';
+const deletion = '#808080';
+const hardclip = '#f00';
+const softclip = '#00f';
+const skip = '#97b8c9';
+const defaults = {
+    quaternary: mandarin,
+    highlight: mandarin,
+    stopCodon,
+    startCodon,
+    insertion,
+    deletion,
+    softclip,
+    hardclip,
+    bases,
+    frames,
+    framesCDS,
+    skip,
+};
 function stockTheme() {
     return {
         palette: {
+            ...defaults,
             mode: undefined,
             primary: { main: midnight },
             secondary: { main: grape },
             tertiary: forest,
-            quaternary: mandarin,
-            highlight: mandarin,
-            stopCodon,
-            startCodon,
-            bases,
-            frames,
-            framesCDS,
         },
         components: {
             MuiLink: {
@@ -83,17 +96,8 @@ function getDarkStockTheme() {
     return {
         name: 'Dark (stock)',
         palette: {
+            ...defaults,
             mode: 'dark',
-            primary: { main: midnight },
-            secondary: { main: grape },
-            tertiary: forest,
-            quaternary: mandarin,
-            highlight: mandarin,
-            stopCodon,
-            startCodon,
-            bases,
-            frames,
-            framesCDS,
         },
         components: {
             MuiAppBar: {
@@ -101,9 +105,7 @@ function getDarkStockTheme() {
                     enableColorOnDark: true,
                 },
                 styleOverrides: {
-                    root: ({ theme }) => {
-                        return theme.palette.primary.main;
-                    },
+                    root: ({ theme }) => theme.palette.primary.main,
                 },
             },
         },
@@ -113,17 +115,11 @@ function getDarkMinimalTheme() {
     return {
         name: 'Dark (minimal)',
         palette: {
+            ...defaults,
             mode: 'dark',
             primary: { main: colors_1.grey[700] },
             secondary: { main: colors_1.grey[800] },
             tertiary: refTheme.palette.augmentColor({ color: { main: colors_1.grey[900] } }),
-            quaternary: mandarin,
-            highlight: mandarin,
-            stopCodon,
-            startCodon,
-            bases,
-            frames,
-            framesCDS,
         },
     };
 }
@@ -131,16 +127,10 @@ function getMinimalTheme() {
     return {
         name: 'Light (minimal)',
         palette: {
+            ...defaults,
             primary: { main: colors_1.grey[900] },
             secondary: { main: colors_1.grey[800] },
             tertiary: refTheme.palette.augmentColor({ color: { main: colors_1.grey[900] } }),
-            quaternary: mandarin,
-            highlight: mandarin,
-            stopCodon,
-            startCodon,
-            bases,
-            frames,
-            framesCDS,
         },
     };
 }
@@ -365,12 +355,19 @@ function augmentThemeColors(theme = {}) {
     return theme;
 }
 function addMissingColors(theme = {}) {
-    var _a, _b, _c;
+    const { palette } = theme;
     return augmentThemeColors((0, deepmerge_1.default)(theme, {
         palette: {
-            quaternary: ((_a = theme.palette) === null || _a === void 0 ? void 0 : _a.quaternary) || lightgrey,
-            tertiary: ((_b = theme.palette) === null || _b === void 0 ? void 0 : _b.tertiary) || lightgrey,
-            highlight: ((_c = theme.palette) === null || _c === void 0 ? void 0 : _c.highlight) || mandarin,
+            quaternary: (palette === null || palette === void 0 ? void 0 : palette.quaternary) || lightgrey,
+            tertiary: (palette === null || palette === void 0 ? void 0 : palette.tertiary) || lightgrey,
+            highlight: (palette === null || palette === void 0 ? void 0 : palette.highlight) || mandarin,
+            insertion: (palette === null || palette === void 0 ? void 0 : palette.insertion) || insertion,
+            softclip: (palette === null || palette === void 0 ? void 0 : palette.softclip) || softclip,
+            skip: (palette === null || palette === void 0 ? void 0 : palette.skip) || skip,
+            hardclip: (palette === null || palette === void 0 ? void 0 : palette.hardclip) || hardclip,
+            deletion: (palette === null || palette === void 0 ? void 0 : palette.deletion) || deletion,
+            startCodon: (palette === null || palette === void 0 ? void 0 : palette.startCodon) || startCodon,
+            stopCodon: (palette === null || palette === void 0 ? void 0 : palette.stopCodon) || stopCodon,
         },
     }));
 }

package/util/Base1DUtils.js

@@ -44,7 +44,7 @@ function moveTo(self, start, end) {
         extraBp = ((newBpPerPx - targetBpPerPx) * self.width) / 2;
     }
     let bpToStart = -extraBp;
-    for (let i = 0; i < self.displayedRegions.length; i += 1) {
+    for (let i = 0; i < self.displayedRegions.length; i++) {
         const region = self.displayedRegions[i];
         if (start.index === i) {
             bpToStart += start.offset;

package/util/analytics.js

@@ -68,9 +68,9 @@ async function writeGAAnalytics(rootModel, initialTimestamp) {
     analyticsScript += `ga('create', '${jbrowseUser}', 'auto', 'jbrowseTracker');`;
     const gaData = {};
     const googleDimensions = 'tracks-count ver electron loadTime pluginNames';
-    googleDimensions.split(/\s+/).forEach((key, index) => {
+    for (const [index, key] of googleDimensions.split(/\s+/).entries()) {
         gaData[`dimension${index + 1}`] = stats[key];
-    });
+    }
     gaData.metric1 = Math.round(stats.loadTime);
     analyticsScript += `ga('jbrowseTracker.send', 'pageview',${JSON.stringify(gaData)});`;
     const analyticsScriptNode = document.createElement('script');

package/util/idMaker.d.ts

@@ -1 +1 @@
-export default function idMaker(args: Record<string, unknown>, id?: string, len?: number): number;
+export default function idMaker(args: Record<string, unknown>, id?: string, len?: number): string | number;

package/util/idMaker.js

@@ -20,5 +20,5 @@ function idMaker(args, id = '', len = 5000) {
             }
         }
     }
-    return (0, _1.hashCode)(id);
+    return `adp-${(0, _1.hashCode)(id)}`;
 }

package/util/index.d.ts

@@ -192,7 +192,8 @@ export interface ViewSnap {
     })[];
 }
 export declare function isSupportedIndexingAdapter(type?: string): boolean;
-export declare function getBpDisplayStr(totalBp: number): string;
+export declare function getBpDisplayStr(total: number): string;
+export declare function getProgressDisplayStr(current: number, total: number): string;
 export declare function toLocale(n: number): string;
 export declare function getTickDisplayStr(totalBp: number, bpPerPx: number): string;
 export declare function getViewParams(model: IAnyStateTreeNode, exportSVG?: boolean): {
@@ -257,6 +258,7 @@ export declare function fetchAndMaybeUnzipText(loc: GenericFilehandle, opts?: Ba
 export declare function isObject(x: unknown): x is Record<string | symbol | number, unknown>;
 export declare function localStorageGetNumber(key: string, defaultVal: number): number;
 export declare function localStorageGetBoolean(key: string, defaultVal: boolean): boolean;
+export declare function forEachWithStopTokenCheck<T>(iter: Iterable<T>, stopToken: string | undefined, arg: (arg: T) => void, durationMs?: number): void;
 export declare function testAdapter(fileName: string, regex: RegExp, adapterHint: string | undefined, expected: string): boolean;
 export { type Feature, type SimpleFeatureSerialized, type SimpleFeatureSerializedNoId, default as SimpleFeature, isFeature, } from './simpleFeature';
 export { blobToDataURL } from './blobToDataURL';

package/util/index.js

@@ -63,6 +63,7 @@ exports.objectHash = objectHash;
 exports.bytesForRegions = bytesForRegions;
 exports.isSupportedIndexingAdapter = isSupportedIndexingAdapter;
 exports.getBpDisplayStr = getBpDisplayStr;
+exports.getProgressDisplayStr = getProgressDisplayStr;
 exports.toLocale = toLocale;
 exports.getTickDisplayStr = getTickDisplayStr;
 exports.getViewParams = getViewParams;
@@ -94,6 +95,7 @@ exports.fetchAndMaybeUnzipText = fetchAndMaybeUnzipText;
 exports.isObject = isObject;
 exports.localStorageGetNumber = localStorageGetNumber;
 exports.localStorageGetBoolean = localStorageGetBoolean;
+exports.forEachWithStopTokenCheck = forEachWithStopTokenCheck;
 exports.testAdapter = testAdapter;
 const react_1 = require("react");
 const bgzf_filehandle_1 = require("@gmod/bgzf-filehandle");
@@ -589,8 +591,8 @@ function reverse(str) {
 function complement(str) {
     var _a;
     let comp = '';
-    for (let i = 0; i < str.length; i++) {
-        comp += (_a = exports.complementTable[str[i]]) !== null && _a !== void 0 ? _a : str[i];
+    for (const element of str) {
+        comp += (_a = exports.complementTable[element]) !== null && _a !== void 0 ? _a : element;
     }
     return comp;
 }
@@ -691,7 +693,7 @@ exports.defaultCodonTable = {
 };
 function generateCodonTable(table) {
     const tempCodonTable = {};
-    Object.keys(table).forEach(codon => {
+    for (const codon of Object.keys(table)) {
         const aa = table[codon];
         const nucs = [];
         for (let i = 0; i < 3; i++) {
@@ -711,7 +713,7 @@ function generateCodonTable(table) {
                 }
             }
         }
-    });
+    }
     return tempCodonTable;
 }
 async function updateStatus(msg, cb, fn) {
@@ -760,15 +762,29 @@ function isSupportedIndexingAdapter(type = '') {
         'VcfAdapter',
     ].includes(type);
 }
-function getBpDisplayStr(totalBp) {
-    if (Math.floor(totalBp / 1000000) > 0) {
-        return `${Number.parseFloat((totalBp / 1000000).toPrecision(3))}Mbp`;
+function getBpDisplayStr(total) {
+    if (Math.floor(total / 1000000) > 0) {
+        return `${r(total / 1000000)}Mbp`;
+    }
+    else if (Math.floor(total / 1000) > 0) {
+        return `${r(total / 1000)}Kbp`;
+    }
+    else {
+        return `${Math.floor(total)}bp`;
+    }
+}
+function r(s) {
+    return toLocale(Number.parseFloat(s.toPrecision(3)));
+}
+function getProgressDisplayStr(current, total) {
+    if (Math.floor(total / 1000000) > 0) {
+        return `${r(current / 1000000)}/${r(total / 1000000)}Mb`;
     }
-    else if (Math.floor(totalBp / 1000) > 0) {
-        return `${Number.parseFloat((totalBp / 1000).toPrecision(3))}Kbp`;
+    else if (Math.floor(total / 1000) > 0) {
+        return `${r(current / 1000)}/${r(total / 1000)}Kb`;
     }
     else {
-        return `${toLocale(Math.floor(totalBp))}bp`;
+        return `${r(current)}/${r(total)}}bytes`;
     }
 }
 function toLocale(n) {
@@ -988,6 +1004,16 @@ function localStorageGetNumber(key, defaultVal) {
 function localStorageGetBoolean(key, defaultVal) {
     return Boolean(JSON.parse(localStorageGetItem(key) || JSON.stringify(defaultVal)));
 }
+function forEachWithStopTokenCheck(iter, stopToken, arg, durationMs = 400) {
+    let start = performance.now();
+    for (const t of iter) {
+        if (performance.now() - start > durationMs) {
+            (0, stopToken_1.checkStopToken)(stopToken);
+            start = performance.now();
+        }
+        arg(t);
+    }
+}
 function testAdapter(fileName, regex, adapterHint, expected) {
     return (regex.test(fileName) && !adapterHint) || adapterHint === expected;
 }

package/util/layouts/PrecomputedMultiLayout.js

@@ -13,9 +13,9 @@ class ThrowingLayout {
 class PrecomputedMultiLayout extends MultiLayout_1.default {
     constructor(json) {
         super(ThrowingLayout);
-        Object.entries(json).forEach(([layoutName, sublayoutJson]) => {
+        for (const [layoutName, sublayoutJson] of Object.entries(json)) {
             this.subLayouts.set(layoutName, new PrecomputedLayout_1.default(sublayoutJson));
-        });
+        }
     }
 }
 exports.default = PrecomputedMultiLayout;

package/util/map-obj.js

@@ -13,12 +13,12 @@ function map(object, mapper, isSeen = new WeakSet()) {
     }
     isSeen.add(object);
     const mapArray = (array) => {
-        array.forEach(element => {
+        for (const element of array) {
             mapper(element);
             if (isObject(element)) {
                 map(element, mapper, isSeen);
             }
-        });
+        }
     };
     if (Array.isArray(object)) {
         mapArray(object);

package/util/rxjs.d.ts

@@ -1,3 +1,3 @@
 import { Observable } from 'rxjs';
 import type { Observer } from 'rxjs';
-export declare function ObservableCreate<T>(func: (arg: Observer<T>) => void | Promise<void>, _stopToken?: string): Observable<T>;
+export declare function ObservableCreate<T>(func: (arg: Observer<T>) => void | Promise<void>, stopToken?: string): Observable<T>;

package/util/rxjs.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ObservableCreate = ObservableCreate;
 const rxjs_1 = require("rxjs");
-function ObservableCreate(func, _stopToken) {
+const stopToken_1 = require("./stopToken");
+function ObservableCreate(func, stopToken) {
+    (0, stopToken_1.checkStopToken)(stopToken);
     return new rxjs_1.Observable((observer) => {
         try {
             const ret = func(observer);

package/util/stopToken.d.ts

@@ -1,3 +1,3 @@
 export declare function createStopToken(): string;
 export declare function stopStopToken(stopToken: string): void;
-export declare function checkStopToken(stopToken?: string): void;
+export declare function checkStopToken(stopToken: string | undefined): void;