@jbrowse/core 2.3.4 → 2.4.0

package/ui/theme.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createJBrowseTheme = exports.createJBrowseBaseTheme = exports.createJBrowseDefaultOverrides = exports.createJBrowseDefaultProps = exports.jbrowseDefaultPalette = void 0;
+exports.createJBrowseTheme = exports.createJBrowseBaseTheme = exports.defaultThemes = void 0;
 const colors_1 = require("@mui/material/colors");
 const styles_1 = require("@mui/material/styles");
 const deepmerge_1 = __importDefault(require("deepmerge"));
@@ -12,28 +12,156 @@ const grape = '#721E63';
 const forest = '#135560';
 const mandarin = '#FFB11D';
 const refTheme = (0, styles_1.createTheme)();
-exports.jbrowseDefaultPalette = {
-    // type: 'dark',
-    primary: { main: midnight },
-    secondary: { main: grape },
-    tertiary: refTheme.palette.augmentColor({ color: { main: forest } }),
-    quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
-    stopCodon: '#e22',
-    startCodon: '#3e3',
-    bases: {
-        A: refTheme.palette.augmentColor({ color: colors_1.green }),
-        C: refTheme.palette.augmentColor({ color: colors_1.blue }),
-        G: refTheme.palette.augmentColor({ color: colors_1.amber }),
-        T: refTheme.palette.augmentColor({ color: colors_1.red }),
-    },
+function stockTheme() {
+    return {
+        palette: {
+            mode: undefined,
+            primary: { main: midnight },
+            secondary: { main: grape },
+            tertiary: refTheme.palette.augmentColor({ color: { main: forest } }),
+            quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
+            stopCodon: '#e22',
+            startCodon: '#3e3',
+            bases: {
+                A: refTheme.palette.augmentColor({ color: colors_1.green }),
+                C: refTheme.palette.augmentColor({ color: colors_1.blue }),
+                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                T: refTheme.palette.augmentColor({ color: colors_1.red }),
+            },
+        },
+        components: {
+            MuiLink: {
+                styleOverrides: {
+                    // the default link color uses theme.palette.primary.main which is
+                    // very bad with dark mode+midnight primary
+                    //
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    root: ({ theme }) => ({
+                        color: theme.palette.tertiary.main,
+                    }),
+                },
+            },
+        },
+    };
+}
+function getDefaultTheme() {
+    return {
+        name: 'Default (from config)',
+        ...stockTheme(),
+    };
+}
+function getLightStockTheme() {
+    return {
+        name: 'Light (stock)',
+        ...stockTheme(),
+    };
+}
+function getDarkStockTheme() {
+    return {
+        name: 'Dark (stock)',
+        palette: {
+            mode: 'dark',
+            primary: { main: midnight },
+            secondary: { main: grape },
+            tertiary: refTheme.palette.augmentColor({ color: { main: forest } }),
+            quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
+            stopCodon: '#e22',
+            startCodon: '#3e3',
+            bases: {
+                A: refTheme.palette.augmentColor({ color: colors_1.green }),
+                C: refTheme.palette.augmentColor({ color: colors_1.blue }),
+                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                T: refTheme.palette.augmentColor({ color: colors_1.red }),
+            },
+        },
+        components: {
+            MuiAppBar: {
+                defaultProps: {
+                    enableColorOnDark: true,
+                },
+                styleOverrides: {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    primary: (props) => {
+                        return props.theme.palette.primary.main;
+                    },
+                },
+            },
+        },
+    };
+}
+function getDarkMinimalTheme() {
+    return {
+        name: 'Dark (minimal)',
+        palette: {
+            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: refTheme.palette.augmentColor({ color: { main: mandarin } }),
+            stopCodon: '#e22',
+            startCodon: '#3e3',
+            bases: {
+                A: refTheme.palette.augmentColor({ color: colors_1.green }),
+                C: refTheme.palette.augmentColor({ color: colors_1.blue }),
+                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                T: refTheme.palette.augmentColor({ color: colors_1.red }),
+            },
+        },
+    };
+}
+function getMinimalTheme() {
+    return {
+        name: 'Light (minimal)',
+        palette: {
+            primary: { main: colors_1.grey[900] },
+            secondary: { main: colors_1.grey[800] },
+            tertiary: refTheme.palette.augmentColor({ color: { main: colors_1.grey[900] } }),
+            quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
+            stopCodon: '#e22',
+            startCodon: '#3e3',
+            bases: {
+                A: refTheme.palette.augmentColor({ color: colors_1.green }),
+                C: refTheme.palette.augmentColor({ color: colors_1.blue }),
+                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                T: refTheme.palette.augmentColor({ color: colors_1.red }),
+            },
+        },
+    };
+}
+exports.defaultThemes = {
+    default: getDefaultTheme(),
+    lightStock: getLightStockTheme(),
+    lightMinimal: getMinimalTheme(),
+    darkMinimal: getDarkMinimalTheme(),
+    darkStock: getDarkStockTheme(),
 };
-function createJBrowseDefaultProps( /* palette: PaletteOptions = {} */) {
+function createDefaultProps(theme) {
+    var _a, _b, _c, _d, _e, _f;
     return {
         components: {
             MuiButton: {
                 defaultProps: {
                     size: 'small',
                 },
+                styleOverrides: {
+                    // the default button, especially when not using variant=contained, uses
+                    // theme.palette.primary.main for text which is very bad with dark
+                    // mode+midnight primary
+                    //
+                    // keeps text secondary for darkmode, uses
+                    // a text-like coloring to ensure contrast
+                    // xref https://stackoverflow.com/a/72546130/2129219
+                    //
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    root: (props) => {
+                        const { theme } = props;
+                        return theme.palette.mode === 'dark'
+                            ? {
+                                color: theme.palette.text.primary,
+                            }
+                            : undefined;
+                    },
+                },
             },
             MuiAccordion: {
                 defaultProps: {
@@ -96,6 +224,12 @@ function createJBrowseDefaultProps( /* palette: PaletteOptions = {} */) {
                 defaultProps: {
                     size: 'small',
                 },
+                styleOverrides: {
+                    secondary: {
+                        // @ts-ignore
+                        backgroundColor: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.quaternary) === null || _b === void 0 ? void 0 : _b.main,
+                    },
+                },
             },
             MuiTable: {
                 defaultProps: {
@@ -128,66 +262,125 @@ function createJBrowseDefaultProps( /* palette: PaletteOptions = {} */) {
                     variant: 'standard',
                 },
             },
-        },
-    };
-}
-exports.createJBrowseDefaultProps = createJBrowseDefaultProps;
-function createJBrowseDefaultOverrides(palette = {}) {
-    const generatedPalette = (0, deepmerge_1.default)(exports.jbrowseDefaultPalette, palette);
-    return {
-        components: {
-            MuiIconButton: {
+            MuiLink: {
                 styleOverrides: {
-                    colorSecondary: {
-                        color: generatedPalette.tertiary.main,
-                    },
+                    // the default link color uses theme.palette.primary.main which is
+                    // very bad with dark mode+midnight primary
+                    //
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    root: ({ theme }) => ({
+                        color: theme.palette.text.secondary,
+                    }),
                 },
             },
-            MuiButton: {
+            MuiCheckbox: {
                 styleOverrides: {
-                    textSecondary: {
-                        color: generatedPalette.tertiary.main,
+                    // the default checkbox-when-checked color uses
+                    // theme.palette.primary.main which is very bad with dark
+                    // mode+midnight primary
+                    //
+                    // keeps the forest-green checkbox by default but for darkmode, uses
+                    // a text-like coloring to ensure contrast
+                    // xref https://stackoverflow.com/a/72546130/2129219
+                    //
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    root: (props) => {
+                        const { theme } = props;
+                        return theme.palette.mode === 'dark'
+                            ? {
+                                color: theme.palette.text.secondary,
+                                '&.Mui-checked': {
+                                    color: theme.palette.text.secondary,
+                                },
+                            }
+                            : undefined;
                     },
                 },
             },
-            MuiFab: {
+            MuiRadio: {
                 styleOverrides: {
-                    secondary: {
-                        backgroundColor: generatedPalette.quaternary.main,
+                    // the default checkbox-when-checked color uses
+                    // theme.palette.primary.main which is very bad with dark
+                    // mode+midnight primary
+                    //
+                    // keeps the forest-green checkbox by default but for darkmode, uses
+                    // a text-like coloring to ensure contrast
+                    // xref https://stackoverflow.com/a/72546130/2129219
+                    //
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    root: (props) => {
+                        const { theme } = props;
+                        return theme.palette.mode === 'dark'
+                            ? {
+                                color: theme.palette.text.secondary,
+                                '&.Mui-checked': {
+                                    color: theme.palette.text.secondary,
+                                },
+                            }
+                            : undefined;
                     },
                 },
             },
-            MuiLink: {
+            MuiFormLabel: {
                 styleOverrides: {
-                    root: {
-                        color: generatedPalette.tertiary.main,
+                    // the default checkbox-when-checked color uses
+                    // theme.palette.primary.main which is very bad with dark
+                    // mode+midnight primary
+                    //
+                    // keeps the forest-green checkbox by default but for darkmode, uses
+                    // a text-like coloring to ensure contrast
+                    // xref https://stackoverflow.com/a/72546130/2129219
+                    //
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    root: (props) => {
+                        const { theme } = props;
+                        return theme.palette.mode === 'dark'
+                            ? {
+                                color: theme.palette.text.secondary,
+                                '&.Mui-focused': {
+                                    color: theme.palette.text.secondary,
+                                },
+                            }
+                            : undefined;
                     },
                 },
             },
             MuiAccordionSummary: {
                 styleOverrides: {
                     root: {
-                        backgroundColor: generatedPalette.tertiary.main,
+                        // @ts-ignore
+                        backgroundColor: (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.tertiary) === null || _d === void 0 ? void 0 : _d.main,
                     },
                     content: {
-                        color: generatedPalette.tertiary.contrastText,
+                        // @ts-ignore
+                        color: (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _e === void 0 ? void 0 : _e.tertiary) === null || _f === void 0 ? void 0 : _f.contrastText,
                     },
                 },
             },
+            MuiToggleButtonGroup: {
+                defaultProps: {
+                    size: 'small',
+                },
+            },
         },
     };
 }
-exports.createJBrowseDefaultOverrides = createJBrowseDefaultOverrides;
-function createJBrowseBaseTheme(palette) {
-    return {
-        palette: exports.jbrowseDefaultPalette,
+function createJBrowseBaseTheme(theme) {
+    return (0, deepmerge_1.default)({
+        palette: theme === null || theme === void 0 ? void 0 : theme.palette,
         typography: { fontSize: 12 },
         spacing: 4,
-        ...(0, deepmerge_1.default)(createJBrowseDefaultProps(), createJBrowseDefaultOverrides(palette)),
-    };
+        ...createDefaultProps(theme),
+    }, theme || {});
 }
 exports.createJBrowseBaseTheme = createJBrowseBaseTheme;
-function createJBrowseTheme(theme) {
+function createJBrowseTheme(configTheme = {}, themes = exports.defaultThemes, themeName = 'default') {
+    return (0, styles_1.createTheme)(createJBrowseBaseTheme(themeName === 'default'
+        ? (0, deepmerge_1.default)(themes['default'], augmentTheme(configTheme))
+        : augmentThemePlus(themes[themeName]) || themes['default']));
+}
+exports.createJBrowseTheme = createJBrowseTheme;
+function augmentTheme(theme = {}) {
     var _a, _b;
     if ((_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.tertiary) {
         theme = (0, deepmerge_1.default)(theme, {
@@ -207,6 +400,25 @@ function createJBrowseTheme(theme) {
             },
         });
     }
-    return (0, styles_1.createTheme)((0, deepmerge_1.default)(createJBrowseBaseTheme(theme === null || theme === void 0 ? void 0 : theme.palette), theme || {}));
+    return theme;
+}
+// creates some blank quaternary/tertiary colors if unsupplied by a user theme
+function augmentThemePlus(theme = {}) {
+    var _a, _b;
+    theme = augmentTheme(theme);
+    if (!((_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.quaternary)) {
+        theme = (0, deepmerge_1.default)(theme, {
+            palette: {
+                quaternary: refTheme.palette.augmentColor({ color: { main: '#aaa' } }),
+            },
+        });
+    }
+    if (!((_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.tertiary)) {
+        theme = (0, deepmerge_1.default)(theme, {
+            palette: {
+                tertiary: refTheme.palette.augmentColor({ color: { main: '#aaa' } }),
+            },
+        });
+    }
+    return theme;
 }
-exports.createJBrowseTheme = createJBrowseTheme;

package/util/index.d.ts

@@ -348,7 +348,8 @@ export declare function getEnv(obj: any): {
     pluginManager: PluginManager;
 };
 export declare function localStorageGetItem(item: string): string | null | undefined;
-export declare function max(arr: number[]): number;
-export declare function min(arr: number[]): number;
+export declare function localStorageSetItem(str: string, item: string): void;
+export declare function max(arr: number[], init?: number): number;
+export declare function min(arr: number[], init?: number): number;
 export declare function sum(arr: number[]): number;
 export declare function avg(arr: number[]): number;

package/util/index.js

@@ -30,7 +30,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.bytesForRegions = exports.objectHash = exports.hashCode = exports.updateStatus = exports.generateCodonTable = exports.defaultCodonTable = exports.defaultStops = exports.defaultStarts = exports.measureText = exports.rIC = exports.blobToDataURL = exports.complement = exports.reverse = exports.revcom = exports.isElectron = exports.stringify = exports.shorten = exports.minmax = exports.renameRegionsIfNeeded = exports.renameRegionIfNeeded = exports.makeAbortableReaction = exports.findLastIndex = exports.iterMap = exports.bpSpanPx = exports.featureSpanPx = exports.cartesianToPolar = exports.polarToCartesian = exports.degToRad = exports.radToDeg = exports.bpToPx = exports.clamp = exports.compareLocStrings = exports.compareLocs = exports.parseLocString = exports.parseLocStringOneBased = exports.assembleLocStringFast = exports.assembleLocString = exports.getContainingDisplay = exports.getContainingTrack = exports.getContainingView = exports.getSession = exports.findParentThatIs = exports.springAnimate = exports.findParentThat = exports.useDebouncedCallback = exports.useDebounce = exports.inProduction = exports.inDevelopment = exports.isFeature = exports.SimpleFeature = void 0;
-exports.avg = exports.sum = exports.min = exports.max = exports.localStorageGetItem = exports.getEnv = exports.measureGridWidth = exports.getStr = exports.getUriLink = exports.useLocalStorage = exports.getLayoutId = exports.getViewParams = exports.getTickDisplayStr = exports.toLocale = exports.getBpDisplayStr = exports.supportedIndexingAdapters = void 0;
+exports.avg = exports.sum = exports.min = exports.max = exports.localStorageSetItem = exports.localStorageGetItem = exports.getEnv = exports.measureGridWidth = exports.getStr = exports.getUriLink = exports.useLocalStorage = exports.getLayoutId = exports.getViewParams = exports.getTickDisplayStr = exports.toLocale = exports.getBpDisplayStr = exports.supportedIndexingAdapters = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = require("react");
 const is_object_1 = __importDefault(require("is-object"));
@@ -1028,16 +1028,22 @@ function localStorageGetItem(item) {
         : undefined;
 }
 exports.localStorageGetItem = localStorageGetItem;
-function max(arr) {
-    let max = -Infinity;
+function localStorageSetItem(str, item) {
+    return typeof localStorage !== 'undefined'
+        ? localStorage.setItem(str, item)
+        : undefined;
+}
+exports.localStorageSetItem = localStorageSetItem;
+function max(arr, init = -Infinity) {
+    let max = init;
     for (let i = 0; i < arr.length; i++) {
         max = arr[i] > max ? arr[i] : max;
     }
     return max;
 }
 exports.max = max;
-function min(arr) {
-    let min = Infinity;
+function min(arr, init = Infinity) {
+    let min = init;
     for (let i = 0; i < arr.length; i++) {
         min = arr[i] < min ? arr[i] : min;
     }

package/util/map-obj.d.ts

@@ -0,0 +1,3 @@
+type Obj = Record<string, unknown>;
+export default function map(object: Obj, mapper: (val: unknown) => void, isSeen?: WeakSet<object>): void;
+export {};

package/util/map-obj.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// adapted from map-obj (MIT), with modifications to pass the "whole object"
+// from an array of objects into itself
+const isObject = (value) => typeof value === 'object' && value !== null;
+// Customized for this use-case
+const isObjectCustom = (value) => isObject(value) &&
+    !(value instanceof RegExp) &&
+    !(value instanceof Error) &&
+    !(value instanceof Date) &&
+    !(globalThis.Blob && value instanceof globalThis.Blob);
+function map(object, mapper, isSeen = new WeakSet()) {
+    if (isSeen.has(object)) {
+        return;
+    }
+    isSeen.add(object);
+    const mapArray = (array) => array.forEach(element => {
+        mapper(element);
+        if (isObject(element)) {
+            map(element, mapper, isSeen);
+        }
+    });
+    if (Array.isArray(object)) {
+        mapArray(object);
+    }
+    for (const value of Object.values(object)) {
+        mapper(value);
+        if (isObjectCustom(value)) {
+            Array.isArray(value) ? mapArray(value) : map(value, mapper, isSeen);
+        }
+    }
+}
+exports.default = map;

package/util/offscreenCanvasUtils.d.ts

@@ -1,14 +1,28 @@
-/// <reference types="react" />
-export type RenderReturn = Record<string, unknown>;
+import React from 'react';
+export type RenderReturn = Record<string, unknown> | void;
+type RendererRet = Promise<RenderReturn> | RenderReturn;
 export declare function renderToAbstractCanvas(width: number, height: number, opts: {
     exportSVG?: {
         rasterizeLayers?: boolean;
+        scale?: number;
     };
-    highResolutionScaling: number;
-}, cb: (ctx: CanvasRenderingContext2D) => Promise<RenderReturn | void> | RenderReturn | void): Promise<{
+    highResolutionScaling?: number;
+}, cb: (ctx: CanvasRenderingContext2D) => RendererRet): Promise<{
     canvasRecordedData: any;
 } | {
     reactElement: JSX.Element;
 } | {
     imageData: any;
 }>;
+export declare function getSerializedSvg(results: {
+    width: number;
+    height: number;
+    canvasRecordedData: unknown;
+}): Promise<string>;
+export declare function ReactRendering({ rendering, }: {
+    rendering: {
+        reactElement?: React.ReactNode;
+        html?: string;
+    };
+}): JSX.Element;
+export {};

package/util/offscreenCanvasUtils.js

@@ -1,16 +1,39 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderToAbstractCanvas = void 0;
+exports.ReactRendering = exports.getSerializedSvg = exports.renderToAbstractCanvas = void 0;
 const react_1 = __importDefault(require("react"));
 const canvas_sequencer_1 = require("canvas-sequencer");
 // locals
 const offscreenCanvasPonyfill_1 = require("./offscreenCanvasPonyfill");
 const index_1 = require("./index");
 async function renderToAbstractCanvas(width, height, opts, cb) {
-    const { exportSVG, highResolutionScaling: scaling = 1 } = opts;
+    const { exportSVG, highResolutionScaling = 1 } = opts;
     if (exportSVG) {
         if (!exportSVG.rasterizeLayers) {
             const fakeCtx = new canvas_sequencer_1.CanvasSequence();
@@ -21,13 +44,13 @@ async function renderToAbstractCanvas(width, height, opts, cb) {
             };
         }
         else {
-            const scale = 4;
-            const canvas = (0, offscreenCanvasPonyfill_1.createCanvas)(Math.ceil(width * scale), height * scale);
+            const s = exportSVG.scale || highResolutionScaling;
+            const canvas = (0, offscreenCanvasPonyfill_1.createCanvas)(Math.ceil(width * s), height * s);
             const ctx = canvas.getContext('2d');
             if (!ctx) {
                 throw new Error('2d canvas rendering not supported on this platform');
             }
-            ctx.scale(scale, scale);
+            ctx.scale(s, s);
             const result = await cb(ctx);
             // two methods needed for converting canvas to PNG, one for webworker
             // offscreen canvas, one for main thread
@@ -42,14 +65,32 @@ async function renderToAbstractCanvas(width, height, opts, cb) {
         }
     }
     else {
-        const canvas = (0, offscreenCanvasPonyfill_1.createCanvas)(Math.ceil(width * scaling), height * scaling);
+        const s = highResolutionScaling;
+        const canvas = (0, offscreenCanvasPonyfill_1.createCanvas)(Math.ceil(width * s), height * s);
         const ctx = canvas.getContext('2d');
         if (!ctx) {
             throw new Error('2d canvas rendering not supported on this platform');
         }
-        ctx.scale(scaling, scaling);
+        ctx.scale(s, s);
         const result = await cb(ctx);
         return { ...result, imageData: await (0, offscreenCanvasPonyfill_1.createImageBitmap)(canvas) };
     }
 }
 exports.renderToAbstractCanvas = renderToAbstractCanvas;
+async function getSerializedSvg(results) {
+    const { width, height, canvasRecordedData } = results;
+    const C2S = await Promise.resolve().then(() => __importStar(require('canvas2svg')));
+    const ctx = new C2S.default(width, height);
+    const seq = new canvas_sequencer_1.CanvasSequence(canvasRecordedData);
+    seq.execute(ctx);
+    // innerHTML strips the outer <svg> element from returned data, we add
+    // our own <svg> element in the view's SVG export
+    return ctx.getSvg().innerHTML;
+}
+exports.getSerializedSvg = getSerializedSvg;
+function ReactRendering({ rendering, }) {
+    return (react_1.default.createElement(react_1.default.Fragment, null, react_1.default.isValidElement(rendering.reactElement) ? (rendering.reactElement) : (react_1.default.createElement("g", { 
+        /* eslint-disable-next-line react/no-danger */
+        dangerouslySetInnerHTML: { __html: rendering.html || '' } }))));
+}
+exports.ReactRendering = ReactRendering;

package/data_adapters/CytobandAdapter.d.ts

@@ -1,8 +0,0 @@
-import SimpleFeature from '../util/simpleFeature';
-import { BaseAdapter } from './BaseAdapter';
-declare const configSchema: import("../configuration").AnyConfigurationSchemaType;
-declare class CytobandAdapter extends BaseAdapter {
-    getData(): Promise<SimpleFeature[]>;
-    freeResources(): void;
-}
-export { configSchema, CytobandAdapter as DataAdapter };

package/data_adapters/CytobandAdapter.js

@@ -1,49 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataAdapter = exports.configSchema = void 0;
-const simpleFeature_1 = __importDefault(require("../util/simpleFeature"));
-const configuration_1 = require("../configuration");
-const io_1 = require("../util/io");
-const BaseAdapter_1 = require("./BaseAdapter");
-/**
- * #config CytobandAdapter
- */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
-const configSchema = (0, configuration_1.ConfigurationSchema)('CytobandAdapter', {
-    /**
-     * #slot
-     */
-    cytobandLocation: {
-        type: 'fileLocation',
-        defaultValue: { uri: '/path/to/cytoband.txt.gz' },
-    },
-}, { explicitlyTyped: true });
-exports.configSchema = configSchema;
-class CytobandAdapter extends BaseAdapter_1.BaseAdapter {
-    async getData() {
-        const loc = (0, configuration_1.readConfObject)(this.config, 'cytobandLocation');
-        if (loc.uri === '' || loc.uri === '/path/to/cytoband.txt.gz') {
-            return [];
-        }
-        const data = await (0, io_1.openLocation)(loc).readFile('utf8');
-        return data
-            .split(/\n|\r\n|\r/)
-            .filter(f => !!f.trim())
-            .map(line => {
-            const [refName, start, end, name, type] = line.split('\t');
-            return new simpleFeature_1.default({
-                uniqueId: line,
-                refName,
-                start: +start,
-                end: +end,
-                name,
-                type,
-            });
-        });
-    }
-    freeResources( /* { region } */) { }
-}
-exports.DataAdapter = CytobandAdapter;