@jbrowse/core 2.10.3 → 2.11.0

package/ui/theme.js

@@ -7,35 +7,57 @@ exports.createJBrowseTheme = exports.createJBrowseBaseTheme = exports.defaultThe
 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 forest = '#135560';
-const mandarin = '#FFB11D';
-const refTheme = (0, styles_1.createTheme)();
+const forest = refTheme.palette.augmentColor({ color: { main: '#135560' } });
+const mandarin = refTheme.palette.augmentColor({ color: { main: '#FFB11D' } });
+const bases = {
+    A: refTheme.palette.augmentColor({ color: colors_1.green }),
+    C: refTheme.palette.augmentColor({ color: colors_1.blue }),
+    G: refTheme.palette.augmentColor({ color: colors_1.orange }),
+    T: refTheme.palette.augmentColor({ color: colors_1.red }),
+};
+const framesCDS = [
+    null,
+    refTheme.palette.augmentColor({ color: { main: '#FF8080' } }),
+    refTheme.palette.augmentColor({ color: { main: '#80FF80' } }),
+    refTheme.palette.augmentColor({ color: { main: '#8080FF' } }),
+    refTheme.palette.augmentColor({ color: { main: '#8080FF' } }),
+    refTheme.palette.augmentColor({ color: { main: '#80FF80' } }),
+    refTheme.palette.augmentColor({ color: { main: '#FF8080' } }),
+];
+const frames = [
+    null,
+    refTheme.palette.augmentColor({ color: { main: '#8f8f8f' } }),
+    refTheme.palette.augmentColor({ color: { main: '#adadad' } }),
+    refTheme.palette.augmentColor({ color: { main: '#d8d8d8' } }),
+    refTheme.palette.augmentColor({ color: { main: '#d8d8d8' } }),
+    refTheme.palette.augmentColor({ color: { main: '#adadad' } }),
+    refTheme.palette.augmentColor({ color: { main: '#8f8f8f' } }),
+];
+const stopCodon = '#e22';
+const startCodon = '#3e3';
 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.orange }),
-                T: refTheme.palette.augmentColor({ color: colors_1.red }),
-            },
+            tertiary: forest,
+            quaternary: mandarin,
+            highlight: mandarin,
+            stopCodon,
+            startCodon,
+            bases,
+            frames,
+            framesCDS,
         },
         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,
                     }),
@@ -46,14 +68,14 @@ function stockTheme() {
 }
 function getDefaultTheme() {
     return {
-        name: 'Default (from config)',
         ...stockTheme(),
+        name: 'Default (from config)',
     };
 }
 function getLightStockTheme() {
     return {
-        name: 'Light (stock)',
         ...stockTheme(),
+        name: 'Light (stock)',
     };
 }
 function getDarkStockTheme() {
@@ -63,16 +85,14 @@ function getDarkStockTheme() {
             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.orange }),
-                T: refTheme.palette.augmentColor({ color: colors_1.red }),
-            },
+            tertiary: forest,
+            quaternary: mandarin,
+            highlight: mandarin,
+            stopCodon,
+            startCodon,
+            bases,
+            frames,
+            framesCDS,
         },
         components: {
             MuiAppBar: {
@@ -80,9 +100,8 @@ function getDarkStockTheme() {
                     enableColorOnDark: true,
                 },
                 styleOverrides: {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    primary: (props) => {
-                        return props.theme.palette.primary.main;
+                    root: ({ theme }) => {
+                        return theme.palette.primary.main;
                     },
                 },
             },
@@ -97,15 +116,13 @@ function getDarkMinimalTheme() {
             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.orange }),
-                T: refTheme.palette.augmentColor({ color: colors_1.red }),
-            },
+            quaternary: mandarin,
+            highlight: mandarin,
+            stopCodon,
+            startCodon,
+            bases,
+            frames,
+            framesCDS,
         },
     };
 }
@@ -116,15 +133,13 @@ function getMinimalTheme() {
             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.orange }),
-                T: refTheme.palette.augmentColor({ color: colors_1.red }),
-            },
+            quaternary: mandarin,
+            highlight: mandarin,
+            stopCodon,
+            startCodon,
+            bases,
+            frames,
+            framesCDS,
         },
     };
 }
@@ -135,38 +150,43 @@ exports.defaultThemes = {
     darkMinimal: getDarkMinimalTheme(),
     darkStock: getDarkStockTheme(),
 };
-function createDefaultProps(theme) {
+function overwriteArrayMerge(_, sourceArray) {
+    return sourceArray;
+}
+function createJBrowseBaseTheme(theme) {
     var _a, _b, _c, _d, _e, _f;
-    return {
+    const themeP = {
+        palette: theme === null || theme === void 0 ? void 0 : theme.palette,
+        typography: {
+            fontSize: 12,
+        },
+        spacing: 4,
         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
+                    // 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;
-                    },
+                    root: ({ theme }) => theme.palette.mode === 'dark'
+                        ? {
+                            color: theme.palette.text.primary,
+                        }
+                        : undefined,
                 },
             },
             MuiAccordion: {
                 defaultProps: {
                     disableGutters: true,
-                    TransitionProps: { timeout: 150 },
+                    TransitionProps: {
+                        timeout: 150,
+                    },
                 },
             },
             MuiFilledInput: {
@@ -273,18 +293,16 @@ function createDefaultProps(theme) {
                     // 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
-                    root: ({ theme }) => {
-                        return theme.palette.mode === 'dark'
-                            ? {
+                    // a text-like coloring to ensure contrast xref
+                    // https://stackoverflow.com/a/72546130/2129219
+                    root: ({ theme }) => theme.palette.mode === 'dark'
+                        ? {
+                            color: theme.palette.text.secondary,
+                            '&.Mui-checked': {
                                 color: theme.palette.text.secondary,
-                                '&.Mui-checked': {
-                                    color: theme.palette.text.secondary,
-                                },
-                            }
-                            : undefined;
-                    },
+                            },
+                        }
+                        : undefined,
                 },
             },
             MuiRadio: {
@@ -296,16 +314,14 @@ function createDefaultProps(theme) {
                     // 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
-                    root: ({ theme }) => {
-                        return theme.palette.mode === 'dark'
-                            ? {
+                    root: ({ theme }) => theme.palette.mode === 'dark'
+                        ? {
+                            color: theme.palette.text.secondary,
+                            '&.Mui-checked': {
                                 color: theme.palette.text.secondary,
-                                '&.Mui-checked': {
-                                    color: theme.palette.text.secondary,
-                                },
-                            }
-                            : undefined;
-                    },
+                            },
+                        }
+                        : undefined,
                 },
             },
             MuiFormLabel: {
@@ -318,16 +334,14 @@ function createDefaultProps(theme) {
                     // a text-like coloring to ensure contrast
                     // xref https://stackoverflow.com/a/72546130/2129219
                     //
-                    root: ({ theme }) => {
-                        return theme.palette.mode === 'dark'
-                            ? {
+                    root: ({ theme }) => theme.palette.mode === 'dark'
+                        ? {
+                            color: theme.palette.text.secondary,
+                            '&.Mui-focused': {
                                 color: theme.palette.text.secondary,
-                                '&.Mui-focused': {
-                                    color: theme.palette.text.secondary,
-                                },
-                            }
-                            : undefined;
-                    },
+                            },
+                        }
+                        : undefined,
                 },
             },
             MuiAccordionSummary: {
@@ -349,19 +363,14 @@ function createDefaultProps(theme) {
             },
         },
     };
-}
-function createJBrowseBaseTheme(theme) {
-    return (0, deepmerge_1.default)({
-        palette: theme === null || theme === void 0 ? void 0 : theme.palette,
-        typography: { fontSize: 12 },
-        spacing: 4,
-        ...createDefaultProps(theme),
-    }, theme || {});
+    return (0, deepmerge_1.default)(themeP, theme || {}, { arrayMerge: overwriteArrayMerge });
 }
 exports.createJBrowseBaseTheme = createJBrowseBaseTheme;
 function createJBrowseTheme(configTheme = {}, themes = exports.defaultThemes, themeName = 'default') {
     return (0, styles_1.createTheme)(createJBrowseBaseTheme(themeName === 'default'
-        ? (0, deepmerge_1.default)(themes.default, augmentTheme(configTheme))
+        ? (0, deepmerge_1.default)(themes.default, augmentTheme(configTheme), {
+            arrayMerge: overwriteArrayMerge,
+        })
         : augmentThemePlus(themes[themeName]) || themes.default));
 }
 exports.createJBrowseTheme = createJBrowseTheme;
@@ -394,14 +403,22 @@ function augmentThemePlus(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' } }),
+                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' } }),
+                tertiary: refTheme.palette.augmentColor({
+                    color: {
+                        main: '#aaa',
+                    },
+                }),
             },
         });
     }

package/util/Base1DViewModel.d.ts

@@ -95,7 +95,7 @@ declare const Base1DView: import("mobx-state-tree").IModelType<{
     bpToPx({ refName, coord, regionNumber, }: {
         refName: string;
         coord: number;
-        regionNumber?: number | undefined;
+        regionNumber?: number;
     }): number | undefined;
 } & {
     /**

package/util/index.d.ts

@@ -22,7 +22,7 @@ export declare function useDebouncedCallback<T>(callback: (...args: T[]) => void
  * find the first node in the hierarchy that matches the given predicate
  */
 export declare function findParentThat(node: IAnyStateTreeNode, predicate: (thing: IAnyStateTreeNode) => boolean): IAnyStateTreeNode;
-export declare function springAnimate(fromValue: number, toValue: number, setValue: (value: number) => void, onFinish?: () => void, precision?: number, tension?: number, friction?: number): (() => void)[];
+export declare function springAnimate(fromValue: number, toValue: number, setValue: (value: number) => void, onFinish?: () => void, precision?: number, tension?: number, friction?: number, clamp?: boolean): (() => void)[];
 /**
  * find the first node in the hierarchy that matches the given 'is' typescript
  * type guard predicate
@@ -235,6 +235,8 @@ export declare function reverse(seqString: string): string;
 export declare const complement: (seqString: string) => string;
 export declare const rIC: (((callback: IdleRequestCallback, options?: IdleRequestOptions | undefined) => number) & typeof requestIdleCallback) | ((cb: Function) => any);
 export declare function measureText(str: unknown, fontSize?: number): number;
+export type Frame = 1 | 2 | 3 | -1 | -2 | -3;
+export declare function getFrame(start: number, end: number, strand: 1 | -1, phase: 0 | 1 | 2): Frame;
 export declare const defaultStarts: string[];
 export declare const defaultStops: string[];
 export declare const defaultCodonTable: {

package/util/index.js

@@ -17,8 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toLocale = exports.getBpDisplayStr = exports.isSupportedIndexingAdapter = exports.bytesForRegions = exports.objectHash = exports.hashCode = exports.updateStatus = exports.generateCodonTable = exports.defaultCodonTable = exports.defaultStops = exports.defaultStarts = exports.measureText = exports.rIC = exports.complement = exports.reverse = exports.revcom = exports.isElectron = exports.stringify = exports.shorten = exports.minmax = exports.renameRegionsIfNeeded = exports.renameRegionIfNeeded = exports.makeAbortableReaction = exports.findLast = 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.useWidthSetter = exports.useDebounce = void 0;
-exports.blobToDataURL = exports.isFeature = exports.SimpleFeature = exports.renderToStaticMarkup = exports.stripAlpha = exports.gatherOverlaps = exports.mergeIntervals = exports.notEmpty = exports.groupBy = exports.avg = exports.sum = exports.min = exports.max = exports.localStorageSetItem = exports.localStorageGetItem = exports.getEnv = exports.measureGridWidth = exports.linkify = exports.coarseStripHTML = exports.getStr = exports.getUriLink = exports.useLocalStorage = exports.getLayoutId = exports.getViewParams = exports.getTickDisplayStr = void 0;
+exports.getBpDisplayStr = exports.isSupportedIndexingAdapter = exports.bytesForRegions = exports.objectHash = exports.hashCode = exports.updateStatus = exports.generateCodonTable = exports.defaultCodonTable = exports.defaultStops = exports.defaultStarts = exports.getFrame = exports.measureText = exports.rIC = exports.complement = exports.reverse = exports.revcom = exports.isElectron = exports.stringify = exports.shorten = exports.minmax = exports.renameRegionsIfNeeded = exports.renameRegionIfNeeded = exports.makeAbortableReaction = exports.findLast = 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.useWidthSetter = exports.useDebounce = void 0;
+exports.blobToDataURL = exports.isFeature = exports.SimpleFeature = exports.renderToStaticMarkup = exports.stripAlpha = exports.gatherOverlaps = exports.mergeIntervals = exports.notEmpty = exports.groupBy = exports.avg = exports.sum = exports.min = exports.max = exports.localStorageSetItem = exports.localStorageGetItem = exports.getEnv = exports.measureGridWidth = exports.linkify = exports.coarseStripHTML = exports.getStr = exports.getUriLink = exports.useLocalStorage = exports.getLayoutId = exports.getViewParams = exports.getTickDisplayStr = exports.toLocale = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = require("react");
 const is_object_1 = __importDefault(require("is-object"));
@@ -116,7 +116,7 @@ function findParentThat(node, predicate) {
 }
 exports.findParentThat = findParentThat;
 // based on https://github.com/react-spring/react-spring/blob/cd5548a987383b8023efd620f3726a981f9e18ea/src/animated/FrameLoop.ts
-function springAnimate(fromValue, toValue, setValue, onFinish = () => { }, precision = 0, tension = 170, friction = 26) {
+function springAnimate(fromValue, toValue, setValue, onFinish = () => { }, precision = 0, tension = 400, friction = 20, clamp = true) {
     const mass = 1;
     if (!precision) {
         precision = Math.abs(toValue - fromValue) / 1000;
@@ -142,7 +142,12 @@ function springAnimate(fromValue, toValue, setValue, onFinish = () => { }, preci
         }
         const isVelocity = Math.abs(velocity) <= precision;
         const isDisplacement = tension !== 0 ? Math.abs(toValue - position) <= precision : true;
-        const endOfAnimation = isVelocity && isDisplacement;
+        const isOvershooting = clamp && tension !== 0
+            ? fromValue < toValue
+                ? position > toValue
+                : position < toValue
+            : false;
+        const endOfAnimation = isOvershooting || (isVelocity && isDisplacement);
         if (endOfAnimation) {
             setValue(toValue);
             onFinish();
@@ -776,6 +781,12 @@ function measureText(str, fontSize = 10) {
     return total * fontSize;
 }
 exports.measureText = measureText;
+function getFrame(start, end, strand, phase) {
+    return strand === 1
+        ? (((start + phase) % 3) + 1)
+        : (-1 * ((end - phase) % 3) - 1);
+}
+exports.getFrame = getFrame;
 exports.defaultStarts = ['ATG'];
 exports.defaultStops = ['TAA', 'TAG', 'TGA'];
 exports.defaultCodonTable = {
@@ -1020,7 +1031,7 @@ function coarseStripHTML(s) {
 exports.coarseStripHTML = coarseStripHTML;
 // based on autolink-js, license MIT
 function linkify(s) {
-    const pattern = /(^|[\s\n]|<[A-Za-z]*\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi;
+    const pattern = /(^|[\s\n]|<[A-Za-z]*\/?>)((?:https?|ftp):\/\/[-A-Z0-9+\u0026\u2019@#/%?=()~_|!:,.;]*[-A-Z0-9+\u0026@#/%=~()_|])/gi;
     return s.replaceAll(pattern, '$1<a href=\'$2\' target="_blank">$2</a>');
 }
 exports.linkify = linkify;

package/util/io/RemoteFileWithRangeCache.js

@@ -25,55 +25,38 @@ function clearCache() {
 exports.clearCache = clearCache;
 class RemoteFileWithRangeCache extends generic_filehandle_1.RemoteFile {
     async fetch(url, init) {
-        if (!fetchers[String(url)]) {
-            fetchers[String(url)] = this.fetchBinaryRange.bind(this);
+        var _a;
+        const str = String(url);
+        if (!fetchers[str]) {
+            fetchers[str] = this.fetchBinaryRange.bind(this);
         }
         // if it is a range request, route it through the range cache
-        const requestHeaders = init === null || init === void 0 ? void 0 : init.headers;
-        let range;
-        if (requestHeaders) {
-            if (requestHeaders instanceof Headers) {
-                range = requestHeaders.get('range');
-            }
-            else if (Array.isArray(requestHeaders)) {
-                ;
-                [, range] = requestHeaders.find(([key]) => key === 'range') || [
-                    undefined,
-                    undefined,
-                ];
-            }
-            else {
-                range = requestHeaders.range;
-            }
-        }
+        const range = (_a = new Headers(init === null || init === void 0 ? void 0 : init.headers)) === null || _a === void 0 ? void 0 : _a.get('range');
         if (range) {
             const rangeParse = /bytes=(\d+)-(\d+)/.exec(range);
             if (rangeParse) {
                 const [, start, end] = rangeParse;
                 const s = Number.parseInt(start, 10);
                 const e = Number.parseInt(end, 10);
-                const response = (await globalRangeCache.getRange(url, s, e - s + 1, {
-                    signal: init === null || init === void 0 ? void 0 : init.signal,
-                }));
-                const { headers } = response;
-                return new Response(response.buffer, { status: 206, headers });
+                const len = e - s;
+                const { buffer, headers } = (await globalRangeCache.getRange(url, s, len + 1, { signal: init === null || init === void 0 ? void 0 : init.signal }));
+                return new Response(buffer, { status: 206, headers });
             }
         }
         return super.fetch(url, init);
     }
     async fetchBinaryRange(url, start, end, options = {}) {
         const requestDate = new Date();
-        const requestHeaders = {
-            ...options.headers,
-            range: `bytes=${start}-${end}`,
-        };
         const res = await super.fetch(url, {
             ...options,
-            headers: requestHeaders,
+            headers: {
+                ...options.headers,
+                range: `bytes=${start}-${end}`,
+            },
         });
         const responseDate = new Date();
-        if (res.status !== 206) {
-            const errorMessage = `HTTP ${res.status} (${res.statusText}) when fetching ${url} bytes ${start}-${end}`;
+        if (!res.ok) {
+            const errorMessage = `HTTP ${res.status} fetching ${url} bytes ${start}-${end}`;
             const hint = ' (should be 206 for range requests)';
             throw new Error(`${errorMessage}${res.status === 200 ? hint : ''}`);
         }

package/util/jexl.js

@@ -50,6 +50,7 @@ function default_1( /* config?: any*/) {
     s.substring(start, end));
     j.addFunction('toLowerCase', (s) => s.toLowerCase());
     j.addFunction('toUpperCase', (s) => s.toUpperCase());
+    j.addFunction('jsonParse', (s) => JSON.parse(s));
     j.addFunction('trim', (s) => s.trim());
     j.addFunction('trimEnd', (s) => s.trimEnd());
     j.addFunction('trimStart', (s) => s.trimStart());

package/util/offscreenCanvasUtils.js

@@ -91,8 +91,8 @@ async function getSerializedSvg(results) {
 }
 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", { 
+    return react_1.default.isValidElement(rendering.reactElement) ? (rendering.reactElement) : (react_1.default.createElement("g", { 
         /* eslint-disable-next-line react/no-danger */
-        dangerouslySetInnerHTML: { __html: rendering.html || '' } }))));
+        dangerouslySetInnerHTML: { __html: rendering.html || '' } }));
 }
 exports.ReactRendering = ReactRendering;

package/util/types/index.d.ts

@@ -19,7 +19,7 @@ export interface AbstractViewContainer extends IStateTreeNode<IType<any, unknown
 export declare function isViewContainer(thing: unknown): thing is AbstractViewContainer;
 export type NotificationLevel = 'error' | 'info' | 'warning' | 'success';
 export interface SnackAction {
-    name: string;
+    name: React.ReactElement;
     onClick: () => void;
 }
 export type AssemblyManager = Instance<ReturnType<typeof assemblyManager>>;
@@ -64,6 +64,7 @@ export interface AbstractSessionModel extends AbstractViewContainer {
     clearSelection: () => void;
     duplicateCurrentSession?: () => void;
     notify: (message: string, level?: NotificationLevel, action?: SnackAction) => void;
+    notifyError: (message: string, error?: unknown, extra?: unknown) => void;
     assemblyManager: AssemblyManager;
     version: string;
     getTrackActionMenuItems?: Function;