@jbrowse/core 3.2.0 → 3.4.0

package/ui/DataGridFlexContainer.d.ts

@@ -0,0 +1,3 @@
+export default function DataGridFlexContainer({ children, }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/ui/DataGridFlexContainer.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DataGridFlexContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()({
+    flexContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+});
+function DataGridFlexContainer({ children, }) {
+    const { classes } = useStyles();
+    return (0, jsx_runtime_1.jsx)("div", { className: classes.flexContainer, children: children });
+}

package/ui/index.d.ts

@@ -13,5 +13,6 @@ export { default as Menu } from './Menu';
 export { default as PrerenderedCanvas } from './PrerenderedCanvas';
 export { default as ResizeHandle } from './ResizeHandle';
 export { default as SanitizedHTML } from './SanitizedHTML';
+export { default as BaseTooltip } from './BaseTooltip';
 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.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;
+exports.VIEW_HEADER_HEIGHT = exports.BaseTooltip = 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; } });
@@ -48,5 +48,7 @@ var ResizeHandle_1 = require("./ResizeHandle");
 Object.defineProperty(exports, "ResizeHandle", { enumerable: true, get: function () { return __importDefault(ResizeHandle_1).default; } });
 var SanitizedHTML_1 = require("./SanitizedHTML");
 Object.defineProperty(exports, "SanitizedHTML", { enumerable: true, get: function () { return __importDefault(SanitizedHTML_1).default; } });
+var BaseTooltip_1 = require("./BaseTooltip");
+Object.defineProperty(exports, "BaseTooltip", { enumerable: true, get: function () { return __importDefault(BaseTooltip_1).default; } });
 __exportStar(require("./Menu"), exports);
 exports.VIEW_HEADER_HEIGHT = 28;

package/ui/theme.d.ts

@@ -1,4 +1,4 @@
-import type { ThemeOptions } from '@mui/material/styles';
+import type { ThemeOptions } from '@mui/material';
 import type { PaletteColor } from '@mui/material/styles/createPalette';
 type MaybePaletteColor = PaletteColor | undefined;
 type Frames = [
@@ -55,5 +55,5 @@ declare module '@mui/material/styles/createPalette' {
 export declare const defaultThemes: ThemeMap;
 export declare function createJBrowseBaseTheme(theme?: ThemeOptions): ThemeOptions;
 type ThemeMap = Record<string, ThemeOptions>;
-export declare function createJBrowseTheme(configTheme?: ThemeOptions, themes?: ThemeMap, themeName?: string): import("@mui/material/styles").Theme;
+export declare function createJBrowseTheme(configTheme?: ThemeOptions, themes?: ThemeMap, themeName?: string): import("@mui/material").Theme;
 export {};

package/ui/theme.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultThemes = void 0;
 exports.createJBrowseBaseTheme = createJBrowseBaseTheme;
 exports.createJBrowseTheme = createJBrowseTheme;
+const material_1 = require("@mui/material");
 const colors_1 = require("@mui/material/colors");
-const styles_1 = require("@mui/material/styles");
 const deepmerge_1 = __importDefault(require("deepmerge"));
-const refTheme = (0, styles_1.createTheme)();
-const midnight = '#0D233F';
-const grape = '#721E63';
+const refTheme = (0, material_1.createTheme)();
+const midnight = refTheme.palette.augmentColor({ color: { main: '#0D233F' } });
+const grape = refTheme.palette.augmentColor({ color: { main: '#721E63' } });
 const forest = refTheme.palette.augmentColor({ color: { main: '#135560' } });
 const mandarin = refTheme.palette.augmentColor({ color: { main: '#FFB11D' } });
 const lightgrey = refTheme.palette.augmentColor({ color: { main: '#aaa' } });
@@ -47,6 +47,9 @@ const hardclip = '#f00';
 const softclip = '#00f';
 const skip = '#97b8c9';
 const defaults = {
+    primary: midnight,
+    secondary: grape,
+    tertiary: forest,
     quaternary: mandarin,
     highlight: mandarin,
     stopCodon,
@@ -65,9 +68,6 @@ function stockTheme() {
         palette: {
             ...defaults,
             mode: undefined,
-            primary: { main: midnight },
-            secondary: { main: grape },
-            tertiary: forest,
         },
         components: {
             MuiLink: {
@@ -333,7 +333,7 @@ function createJBrowseBaseTheme(theme) {
     return (0, deepmerge_1.default)(themeP, theme || {}, { arrayMerge: overwriteArrayMerge });
 }
 function createJBrowseTheme(configTheme = {}, themes = exports.defaultThemes, themeName = 'default') {
-    return (0, styles_1.createTheme)(createJBrowseBaseTheme(themeName === 'default'
+    return (0, material_1.createTheme)(createJBrowseBaseTheme(themeName === 'default'
         ? (0, deepmerge_1.default)(themes.default, augmentThemeColors(configTheme), {
             arrayMerge: overwriteArrayMerge,
         })
@@ -341,13 +341,21 @@ function createJBrowseTheme(configTheme = {}, themes = exports.defaultThemes, th
 }
 function augmentThemeColors(theme = {}) {
     var _a;
-    for (const entry of ['tertiary', 'quaternary', 'highlight']) {
+    for (const entry of [
+        'primary',
+        'secondary',
+        'tertiary',
+        'quaternary',
+        'highlight',
+    ]) {
         if ((_a = theme.palette) === null || _a === void 0 ? void 0 : _a[entry]) {
             theme = (0, deepmerge_1.default)(theme, {
                 palette: {
                     [entry]: refTheme.palette.augmentColor('color' in theme.palette[entry]
                         ? theme.palette[entry]
-                        : { color: theme.palette[entry] }),
+                        : {
+                            color: theme.palette[entry],
+                        }),
                 },
             });
         }

package/util/cluster.d.ts

@@ -0,0 +1,17 @@
+export declare function euclideanDistance(a: number[], b: number[]): number;
+export declare function averageDistance(setA: number[], setB: number[], distances: number[][]): number;
+export declare function clusterData({ data, distance, linkage, onProgress, stopToken, }: {
+    data: number[][];
+    distance?: (a: number[], b: number[]) => number;
+    linkage?: (a: number[], b: number[], distances: number[][]) => number;
+    onProgress?: (a: string) => void;
+    stopToken?: string;
+}): {
+    clusters: {
+        height: number;
+        indexes: number[];
+    } | undefined;
+    distances: number[][];
+    order: number[];
+    clustersGivenK: number[][][];
+};

package/util/cluster.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.euclideanDistance = euclideanDistance;
+exports.averageDistance = averageDistance;
+exports.clusterData = clusterData;
+const stopToken_1 = require("@jbrowse/core/util/stopToken");
+function toP(n) {
+    return Number.parseFloat((n * 100).toFixed(1));
+}
+function euclideanDistance(a, b) {
+    const size = Math.min(a.length, b.length);
+    let sum = 0;
+    for (let index = 0; index < size; index++) {
+        sum += (a[index] - b[index]) * (a[index] - b[index]);
+    }
+    return Math.sqrt(sum);
+}
+function averageDistance(setA, setB, distances) {
+    let distance = 0;
+    const lenA = setA.length;
+    const lenB = setB.length;
+    for (let i = 0; i < lenA; i++) {
+        for (let j = 0; j < lenB; j++) {
+            distance += distances[setA[i]][setB[j]];
+        }
+    }
+    return distance / setA.length / setB.length;
+}
+function clusterData({ data, distance = euclideanDistance, linkage = averageDistance, onProgress, stopToken, }) {
+    let start = performance.now();
+    const distances = [];
+    for (let i = 0; i < data.length; i++) {
+        if (performance.now() - start > 400) {
+            (0, stopToken_1.checkStopToken)(stopToken);
+            start = performance.now();
+        }
+        if (onProgress) {
+            onProgress(`Making distance matrix: ${toP(i / (data.length - 1))}%`);
+        }
+        const row = [];
+        for (let j = 0; j < data.length; j++) {
+            row.push(distance(data[i], data[j]));
+        }
+        distances.push(row);
+    }
+    const clusters = data.map((_datum, index) => ({
+        height: 0,
+        indexes: [Number(index)],
+    }));
+    let clustersGivenK = [];
+    start = performance.now();
+    for (let iteration = 0; iteration < data.length; iteration++) {
+        if (performance.now() - start > 400) {
+            (0, stopToken_1.checkStopToken)(stopToken);
+            start = performance.now();
+        }
+        if (onProgress) {
+            onProgress(`Clustering: ${toP((iteration + 1) / data.length)}%`);
+        }
+        clustersGivenK.push(clusters.map(cluster => cluster.indexes));
+        if (iteration >= data.length - 1) {
+            break;
+        }
+        let nearestDistance = Infinity;
+        let nearestRow = 0;
+        let nearestCol = 0;
+        for (let row = 0; row < clusters.length; row++) {
+            for (let col = row + 1; col < clusters.length; col++) {
+                const distance = linkage(clusters[row].indexes, clusters[col].indexes, distances);
+                if (distance < nearestDistance) {
+                    nearestDistance = distance;
+                    nearestRow = row;
+                    nearestCol = col;
+                }
+            }
+        }
+        const newCluster = {
+            indexes: [
+                ...clusters[nearestRow].indexes,
+                ...clusters[nearestCol].indexes,
+            ],
+            height: nearestDistance,
+            children: [clusters[nearestRow], clusters[nearestCol]],
+        };
+        clusters.splice(Math.max(nearestRow, nearestCol), 1);
+        clusters.splice(Math.min(nearestRow, nearestCol), 1);
+        clusters.push(newCluster);
+    }
+    clustersGivenK = [[], ...clustersGivenK.reverse()];
+    return {
+        clusters: clusters[0],
+        distances: distances,
+        order: clusters[0].indexes,
+        clustersGivenK: clustersGivenK,
+    };
+}

package/util/index.d.ts

@@ -75,6 +75,7 @@ export declare function renameRegionsIfNeeded<ARGTYPE extends {
 }>;
 export declare function minmax(a: number, b: number): readonly [number, number];
 export declare function shorten(name: string, max?: number, short?: number): string;
+export declare function shorten2(name: string, max?: number): string;
 export declare function stringify({ refName, coord, assemblyName, oob, }: {
     assemblyName?: string;
     coord: number;
@@ -258,7 +259,8 @@ 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 localStorageSetBoolean(key: string, value: boolean): void;
+export declare function forEachWithStopTokenCheck<T>(iter: Iterable<T>, stopToken: string | undefined, arg: (arg: T, idx: number) => 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

@@ -49,6 +49,7 @@ exports.renameRegionIfNeeded = renameRegionIfNeeded;
 exports.renameRegionsIfNeeded = renameRegionsIfNeeded;
 exports.minmax = minmax;
 exports.shorten = shorten;
+exports.shorten2 = shorten2;
 exports.stringify = stringify;
 exports.revcom = revcom;
 exports.reverse = reverse;
@@ -95,6 +96,7 @@ exports.fetchAndMaybeUnzipText = fetchAndMaybeUnzipText;
 exports.isObject = isObject;
 exports.localStorageGetNumber = localStorageGetNumber;
 exports.localStorageGetBoolean = localStorageGetBoolean;
+exports.localStorageSetBoolean = localStorageSetBoolean;
 exports.forEachWithStopTokenCheck = forEachWithStopTokenCheck;
 exports.testAdapter = testAdapter;
 const react_1 = require("react");
@@ -530,6 +532,9 @@ function shorten(name, max = 70, short = 30) {
         ? `${name.slice(0, short)}...${name.slice(-short)}`
         : name;
 }
+function shorten2(name, max = 70) {
+    return name.length > max ? `${name.slice(0, max)}...` : name;
+}
 function stringify({ refName, coord, assemblyName, oob, }, useAssemblyName) {
     return [
         assemblyName && useAssemblyName ? `{${assemblyName}}` : '',
@@ -980,9 +985,9 @@ function renderToStaticMarkup(node) {
 function isGzip(buf) {
     return buf[0] === 31 && buf[1] === 139 && buf[2] === 8;
 }
-async function fetchAndMaybeUnzip(loc, opts) {
-    const { statusCallback = () => { } } = opts || {};
-    const buf = (await updateStatus('Downloading file', statusCallback, () => loc.readFile(opts)));
+async function fetchAndMaybeUnzip(loc, opts = {}) {
+    const { statusCallback = () => { } } = opts;
+    const buf = await updateStatus('Downloading file', statusCallback, () => loc.readFile(opts));
     return isGzip(buf)
         ? await updateStatus('Unzipping', statusCallback, () => (0, bgzf_filehandle_1.unzip)(buf))
         : buf;
@@ -1004,14 +1009,18 @@ function localStorageGetNumber(key, defaultVal) {
 function localStorageGetBoolean(key, defaultVal) {
     return Boolean(JSON.parse(localStorageGetItem(key) || JSON.stringify(defaultVal)));
 }
+function localStorageSetBoolean(key, value) {
+    localStorageSetItem(key, JSON.stringify(value));
+}
 function forEachWithStopTokenCheck(iter, stopToken, arg, durationMs = 400) {
     let start = performance.now();
+    let i = 0;
     for (const t of iter) {
         if (performance.now() - start > durationMs) {
             (0, stopToken_1.checkStopToken)(stopToken);
             start = performance.now();
         }
-        arg(t);
+        arg(t, i++);
     }
 }
 function testAdapter(fileName, regex, adapterHint, expected) {

package/util/offscreenCanvasUtils.d.ts

@@ -1,18 +1,19 @@
-export type RenderReturn = Record<string, unknown> | undefined;
-type RendererRet = Promise<RenderReturn> | RenderReturn;
-export declare function renderToAbstractCanvas(width: number, height: number, opts: {
-    exportSVG?: {
-        rasterizeLayers?: boolean;
-        scale?: number;
-    };
+interface ExportSVGOptions {
+    rasterizeLayers?: boolean;
+    scale?: number;
+}
+interface RenderToAbstractCanvasOptions {
+    exportSVG?: ExportSVGOptions;
     highResolutionScaling?: number;
-}, cb: (ctx: CanvasRenderingContext2D) => RendererRet): Promise<{
-    canvasRecordedData: any;
-} | {
-    reactElement: import("react/jsx-runtime").JSX.Element;
+}
+type R<T extends Record<string, unknown> | undefined> = Omit<T, never> & ({
+    canvasRecordedData: Record<string, unknown>;
 } | {
     imageData: any;
-}>;
+} | {
+    reactElement: React.ReactElement;
+});
+export declare function renderToAbstractCanvas<T extends Record<string, unknown> | undefined>(width: number, height: number, opts: RenderToAbstractCanvasOptions, cb: (ctx: CanvasRenderingContext2D) => Promise<T> | T): Promise<R<T>>;
 export declare function getSerializedSvg(results: {
     width: number;
     height: number;

package/util/offscreenCanvasUtils.js

@@ -46,9 +46,9 @@ async function renderToAbstractCanvas(width, height, opts, cb) {
     if (exportSVG) {
         if (!exportSVG.rasterizeLayers) {
             const fakeCtx = new canvas_sequencer_1.CanvasSequence();
-            const result = await cb(fakeCtx);
+            const callbackResult = await cb(fakeCtx);
             return {
-                ...result,
+                ...callbackResult,
                 canvasRecordedData: fakeCtx.toJSON(),
             };
         }
@@ -60,9 +60,9 @@ async function renderToAbstractCanvas(width, height, opts, cb) {
                 throw new Error('2d canvas rendering not supported on this platform');
             }
             ctx.scale(s, s);
-            const result = await cb(ctx);
+            const callbackResult = await cb(ctx);
             return {
-                ...result,
+                ...callbackResult,
                 reactElement: ((0, jsx_runtime_1.jsx)("image", { width: width, height: height, xlinkHref: 'convertToBlob' in canvas
                         ? await (0, blobToDataURL_1.blobToDataURL)(await canvas.convertToBlob({
                             type: 'image/png',
@@ -79,8 +79,11 @@ async function renderToAbstractCanvas(width, height, opts, cb) {
             throw new Error('2d canvas rendering not supported on this platform');
         }
         ctx.scale(s, s);
-        const result = await cb(ctx);
-        return { ...result, imageData: await (0, offscreenCanvasPonyfill_1.createImageBitmap)(canvas) };
+        const callbackResult = await cb(ctx);
+        return {
+            ...callbackResult,
+            imageData: await (0, offscreenCanvasPonyfill_1.createImageBitmap)(canvas),
+        };
     }
 }
 async function getSerializedSvg(results) {