@jbrowse/core 3.2.0 → 3.3.0

package/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.d.ts

@@ -1,6 +1,7 @@
-export default function ArrayValue({ name, value, description, prefix, }: {
+export default function ArrayValue({ name, value, description, formatter, prefix, }: {
     description?: React.ReactNode;
     name: string;
     value: unknown[];
+    formatter?: (value: unknown, key: string) => React.ReactNode;
     prefix?: string[];
 }): import("react/jsx-runtime").JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.js

@@ -24,15 +24,15 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         overflow: 'auto',
     },
 }));
-function ArrayValue({ name, value, description, prefix = [], }) {
+function ArrayValue({ name, value, description, formatter, prefix = [], }) {
     const { classes } = useStyles();
     if (value.length === 1) {
-        return (0, util_1.isObject)(value[0]) ? ((0, jsx_runtime_1.jsx)(Attributes_1.default, { attributes: value[0], prefix: [...prefix, name] })) : ((0, jsx_runtime_1.jsxs)("div", { className: classes.field, children: [(0, jsx_runtime_1.jsx)(FieldName_1.default, { prefix: prefix, description: description, name: name }), (0, jsx_runtime_1.jsx)(BasicValue_1.default, { value: value[0] })] }));
+        return (0, util_1.isObject)(value[0]) ? ((0, jsx_runtime_1.jsx)(Attributes_1.default, { formatter: formatter, attributes: value[0], prefix: [...prefix, name] })) : ((0, jsx_runtime_1.jsxs)("div", { className: classes.field, children: [(0, jsx_runtime_1.jsx)(FieldName_1.default, { prefix: prefix, description: description, name: name }), (0, jsx_runtime_1.jsx)(BasicValue_1.default, { value: formatter ? formatter(value[0], name) : value[0] })] }));
     }
     else if (value.every(val => (0, util_1.isObject)(val))) {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: value.map((val, i) => ((0, jsx_runtime_1.jsx)(Attributes_1.default, { attributes: val, prefix: [...prefix, `${name}-${i}`] }, `${JSON.stringify(val)}-${i}`))) }));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: value.map((val, i) => ((0, jsx_runtime_1.jsx)(Attributes_1.default, { formatter: formatter, attributes: val, prefix: [...prefix, `${name}-${i}`] }, `${JSON.stringify(val)}-${i}`))) }));
     }
     else {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: classes.field, children: [(0, jsx_runtime_1.jsx)(FieldName_1.default, { prefix: prefix, description: description, name: name }), value.map((val, i) => ((0, jsx_runtime_1.jsx)("div", { className: classes.fieldSubvalue, children: (0, jsx_runtime_1.jsx)(BasicValue_1.default, { value: val }) }, `${JSON.stringify(val)}-${i}`)))] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: classes.field, children: [(0, jsx_runtime_1.jsx)(FieldName_1.default, { prefix: prefix, description: description, name: name }), value.map((val, i) => ((0, jsx_runtime_1.jsx)("div", { className: classes.fieldSubvalue, children: (0, jsx_runtime_1.jsx)(BasicValue_1.default, { value: formatter ? formatter(val, name) : val }) }, `${JSON.stringify(val)}-${i}`)))] }));
     }
 }

package/BaseFeatureWidget/BaseFeatureDetail/Attributes.js

@@ -24,24 +24,25 @@ const globalOmit = [
     'thickEnd',
 ];
 function Attributes(props) {
-    const { attributes, omit = [], omitSingleLevel = [], descriptions, formatter = val => val, hideUris, prefix = [], } = props;
+    const { attributes, omit = [], omitSingleLevel = [], descriptions, formatter, hideUris, prefix = [], } = props;
     const omits = new Set([...omit, ...globalOmit, ...omitSingleLevel]);
     const { __jbrowsefmt, ...rest } = attributes;
-    const formattedAttributes = { ...rest, ...__jbrowsefmt };
-    const maxLabelWidth = (0, util_1.generateMaxWidth)(Object.entries(formattedAttributes).filter(([k, v]) => v !== undefined && !omits.has(k)), prefix);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.entries(formattedAttributes)
-            .filter(([k, v]) => v !== undefined && !omits.has(k))
-            .map(([key, value]) => {
+    const filteredFormattedAttributes = Object.entries({
+        ...rest,
+        ...__jbrowsefmt,
+    }).filter(([k, v]) => v != null && !omits.has(k));
+    const maxLabelWidth = (0, util_1.generateMaxWidth)(filteredFormattedAttributes, prefix);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredFormattedAttributes.map(([key, value]) => {
             const description = (0, util_1.accessNested)([...prefix, key], descriptions);
             if (Array.isArray(value)) {
-                return value.length > 1 && value.every(val => (0, util_2.isObject)(val)) ? ((0, jsx_runtime_1.jsx)(DataGridDetails_1.default, { name: key, prefix: prefix, value: value }, key)) : ((0, jsx_runtime_1.jsx)(ArrayValue_1.default, { name: key, value: value, description: description, prefix: prefix }, key));
+                return value.length > 1 && value.every(val => (0, util_2.isObject)(val)) ? ((0, jsx_runtime_1.jsx)(DataGridDetails_1.default, { name: key, prefix: prefix, value: value }, key)) : ((0, jsx_runtime_1.jsx)(ArrayValue_1.default, { name: key, value: value, formatter: formatter, description: description, prefix: prefix }, key));
             }
             else if ((0, util_2.isObject)(value)) {
                 const { omitSingleLevel, ...rest } = props;
-                return (0, util_2.isUriLocation)(value) ? (hideUris ? null : ((0, jsx_runtime_1.jsx)(UriField_1.default, { name: key, prefix: prefix, value: value }, key))) : ((0, jsx_runtime_1.jsx)(Attributes, { ...rest, attributes: value, descriptions: descriptions, prefix: [...prefix, key] }, key));
+                return (0, util_2.isUriLocation)(value) ? (hideUris ? null : ((0, jsx_runtime_1.jsx)(UriField_1.default, { name: key, prefix: prefix, value: value }, key))) : ((0, jsx_runtime_1.jsx)(Attributes, { ...rest, formatter: formatter, attributes: value, descriptions: descriptions, prefix: [...prefix, key] }, key));
             }
             else {
-                return ((0, jsx_runtime_1.jsx)(SimpleField_1.default, { name: key, value: formatter(value, key), description: description, prefix: prefix, width: Math.min(maxLabelWidth, MAX_FIELD_NAME_WIDTH) }, key));
+                return ((0, jsx_runtime_1.jsx)(SimpleField_1.default, { name: key, formatter: formatter, value: value, description: description, prefix: prefix, width: Math.min(maxLabelWidth, MAX_FIELD_NAME_WIDTH) }, key));
             }
         }) }));
 }

package/BaseFeatureWidget/BaseFeatureDetail/DataGridDetails.js

@@ -11,6 +11,7 @@ const x_data_grid_1 = require("@mui/x-data-grid");
 const mui_1 = require("tss-react/mui");
 const FieldName_1 = __importDefault(require("./FieldName"));
 const ui_1 = require("../../ui");
+const DataGridFlexContainer_1 = __importDefault(require("../../ui/DataGridFlexContainer"));
 const util_1 = require("../../util");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     margin: {
@@ -52,21 +53,10 @@ function DataGridDetails({ value, prefix, name, }) {
     if (unionKeys.size < keys.length + 5) {
         return ((0, jsx_runtime_1.jsxs)("div", { className: classes.margin, children: [(0, jsx_runtime_1.jsx)(FieldName_1.default, { prefix: prefix, name: name }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: checked, onChange: event => {
                             setChecked(event.target.checked);
-                        } }), label: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: "Show options" }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { disableRowSelectionOnClick: true, rows: rows, rowHeight: 20, columnHeaderHeight: 35, hideFooter: rows.length < 25, slots: {
-                            toolbar: checked ? x_data_grid_1.GridToolbar : null,
-                        }, slotProps: {
-                            toolbar: {
-                                printOptions: {
-                                    disableToolbarButton: true,
-                                },
-                            },
-                        }, columns: colNames.map((val, index) => ({
+                        } }), label: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: "Show options" }) }), (0, jsx_runtime_1.jsx)(DataGridFlexContainer_1.default, { children: (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { rows: rows, rowHeight: 20, columnHeaderHeight: 35, hideFooter: rows.length < 25, showToolbar: checked, columns: colNames.map((val, index) => ({
                             field: val,
-                            renderCell: params => {
-                                const value = params.value;
-                                return ((0, jsx_runtime_1.jsx)("div", { className: classes.cell, children: (0, jsx_runtime_1.jsx)(ui_1.SanitizedHTML, { html: (0, util_1.getStr)(value || '') }) }));
-                            },
                             width: widths[index],
+                            renderCell: ({ value }) => ((0, jsx_runtime_1.jsx)("div", { className: classes.cell, children: (0, jsx_runtime_1.jsx)(ui_1.SanitizedHTML, { html: (0, util_1.getStr)(value || '') }) })),
                         })) }) })] }));
     }
     return null;

package/BaseFeatureWidget/BaseFeatureDetail/SimpleField.d.ts

@@ -1,7 +1,8 @@
-export default function SimpleField({ name, value, description, prefix, width, }: {
+export default function SimpleField({ name, value, description, prefix, width, formatter, }: {
     description?: React.ReactNode;
     name: string;
     value: unknown;
     prefix?: string[];
     width?: number;
+    formatter?: (value: unknown, key: string) => React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element | null;

package/BaseFeatureWidget/BaseFeatureDetail/SimpleField.js

@@ -14,7 +14,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         flexWrap: 'wrap',
     },
 });
-function SimpleField({ name, value, description, prefix, width, }) {
+function SimpleField({ name, value, description, prefix, width, formatter, }) {
     const { classes } = useStyles();
-    return value !== null && value !== undefined ? ((0, jsx_runtime_1.jsxs)("div", { className: classes.field, children: [(0, jsx_runtime_1.jsx)(FieldName_1.default, { prefix: prefix, description: description, name: name, width: width }), (0, jsx_runtime_1.jsx)(BasicValue_1.default, { value: value })] })) : null;
+    return value != null ? ((0, jsx_runtime_1.jsxs)("div", { className: classes.field, children: [(0, jsx_runtime_1.jsx)(FieldName_1.default, { prefix: prefix, description: description, name: name, width: width }), (0, jsx_runtime_1.jsx)(BasicValue_1.default, { value: formatter ? formatter(value, name) : value })] })) : null;
 }

package/PluginManager.d.ts

@@ -213,7 +213,7 @@ export default class PluginManager {
         'mobx-react': typeof import("mobx-react");
         '@mui/x-data-grid': {
             useGridApiContext: typeof import("@mui/x-data-grid").useGridApiContext;
-            useGridApiRef: <Api extends import("@mui/x-data-grid").GridApiCommon = import("@mui/x-data-grid/internals").GridApiCommunity>() => import("@mui/x-internals/types").RefObject<Api>;
+            useGridApiRef: <Api extends import("@mui/x-data-grid").GridApiCommon = import("@mui/x-data-grid/internals").GridApiCommunity>() => import("@mui/x-internals/types").RefObject<Api | null>;
             useGridRootProps: () => import("@mui/x-data-grid/internals").DataGridProcessedProps;
         };
         '@mui/material/utils': typeof import("@mui/material/utils");

package/ReExports/modules.d.ts

@@ -133,7 +133,7 @@ declare const libs: {
     'mobx-react': typeof mxreact;
     '@mui/x-data-grid': {
         useGridApiContext: typeof useGridApiContext;
-        useGridApiRef: <Api extends import("@mui/x-data-grid").GridApiCommon = import("@mui/x-data-grid/internals").GridApiCommunity>() => import("@mui/x-internals/types").RefObject<Api>;
+        useGridApiRef: <Api extends import("@mui/x-data-grid").GridApiCommon = import("@mui/x-data-grid/internals").GridApiCommunity>() => import("@mui/x-internals/types").RefObject<Api | null>;
         useGridRootProps: () => import("@mui/x-data-grid/internals").DataGridProcessedProps;
     };
     '@mui/material/utils': typeof MUIUtils;

package/ReExports/modules.js

@@ -120,7 +120,7 @@ const Entries = {
     FormHelperText: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/material/FormHelperText')))),
     FormGroup: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/material/FormGroup')))),
     Grid: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/material/Grid')))),
-    Grid2: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/material/Grid2')))),
+    Grid2: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/material/Grid')))),
     Grow: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/material/Grow')))),
     Icon: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/material/Icon')))),
     IconButton: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/material/IconButton')))),
@@ -312,9 +312,6 @@ const DataGridEntries = {
     GridRowCount: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/x-data-grid'))).then(module => ({
         default: module.GridRowCount,
     }))),
-    GridSaveAltIcon: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/x-data-grid'))).then(module => ({
-        default: module.GridSaveAltIcon,
-    }))),
     GridSearchIcon: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/x-data-grid'))).then(module => ({
         default: module.GridSearchIcon,
     }))),
@@ -327,27 +324,9 @@ const DataGridEntries = {
     GridTableRowsIcon: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/x-data-grid'))).then(module => ({
         default: module.GridTableRowsIcon,
     }))),
-    GridToolbar: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/x-data-grid'))).then(module => ({
-        default: module.GridToolbar,
-    }))),
-    GridToolbarColumnsButton: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/x-data-grid'))).then(module => ({
-        default: module.GridToolbarColumnsButton,
-    }))),
-    GridToolbarContainer: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/x-data-grid'))).then(module => ({
-        default: module.GridToolbarContainer,
-    }))),
-    GridToolbarDensitySelector: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/x-data-grid'))).then(module => ({
-        default: module.GridToolbarDensitySelector,
-    }))),
-    GridToolbarExport: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/x-data-grid'))).then(module => ({
-        default: module.GridToolbarExport,
-    }))),
     GridToolbarExportContainer: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/x-data-grid'))).then(module => ({
         default: module.GridToolbarExportContainer,
     }))),
-    GridToolbarFilterButton: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/x-data-grid'))).then(module => ({
-        default: module.GridToolbarFilterButton,
-    }))),
     GridTripleDotsVerticalIcon: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@mui/x-data-grid'))).then(module => ({
         default: module.GridTripleDotsVerticalIcon,
     }))),

package/assemblyManager/assemblyManager.js

@@ -86,7 +86,7 @@ function assemblyManagerFactory(conf, pm) {
             if (assembly) {
                 return assembly.isValidRefName(refName);
             }
-            throw new Error(`Failed to look up refName ${refName} on ${assemblyName} because assembly does not exist`);
+            throw new Error(`Failed to look up refName:${refName} on assemblyName:${assemblyName} (assembly does not exist)`);
         },
     }))
         .actions(self => ({

package/data_adapters/BaseAdapter/BaseAdapter.d.ts

@@ -2,7 +2,7 @@ import type PluginManager from '../../PluginManager';
 import type { AnyConfigurationModel } from '../../configuration';
 import type { AugmentedRegion as Region } from '../../util/types';
 import type { getSubAdapterType } from '../dataAdapterCache';
-export declare abstract class BaseAdapter {
+export declare class BaseAdapter {
     config: AnyConfigurationModel;
     getSubAdapter?: getSubAdapterType | undefined;
     pluginManager?: PluginManager | undefined;
@@ -10,5 +10,5 @@ export declare abstract class BaseAdapter {
     static capabilities: string[];
     constructor(config?: AnyConfigurationModel, getSubAdapter?: getSubAdapterType | undefined, pluginManager?: PluginManager | undefined);
     getConf(arg: string | string[]): any;
-    abstract freeResources(region: Region): void;
+    freeResources(_region: Region): void;
 }

package/data_adapters/BaseAdapter/BaseAdapter.js

@@ -24,6 +24,7 @@ class BaseAdapter {
     getConf(arg) {
         return (0, configuration_1.readConfObject)(this.config, arg);
     }
+    freeResources(_region) { }
 }
 exports.BaseAdapter = BaseAdapter;
 BaseAdapter.capabilities = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/core",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "JBrowse 2 core libraries used by plugins",
   "keywords": [
     "jbrowse",
@@ -34,9 +34,9 @@
     "@gmod/abortable-promise-cache": "^2.0.0",
     "@gmod/bgzf-filehandle": "^2.0.1",
     "@gmod/http-range-fetcher": "^4.0.0",
-    "@mui/icons-material": "^6.0.0",
-    "@mui/material": "^6.0.0",
-    "@mui/x-data-grid": "^7.0.0",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
+    "@mui/x-data-grid": "^8.0.0",
     "canvas-sequencer": "^3.1.0",
     "canvas2svg": "^1.0.16",
     "colord": "^2.9.3",
@@ -69,5 +69,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "c750e3f56706a490c19ba75abd807fec5e38aebf"
+  "gitHead": "0bb64d8cc7ecdd167515308b31eec3d9acbc59e4"
 }

package/pluggableElementTypes/renderers/CircularChordRendererType.js

@@ -14,22 +14,21 @@ class CircularChordRendererType extends FeatureRendererType_1.default {
     }
     deserializeResultsInClient(res, args) {
         const deserializedFeatures = new Map(res.features.map(f => util_1.SimpleFeature.fromJSON(f)).map(f => [f.id(), f]));
-        if (args.exportSVG) {
-            return {
+        return args.exportSVG
+            ? {
                 ...res,
                 features: deserializedFeatures,
                 blockKey: 'circularChord',
                 html: this.supportsSVG
                     ? res.html
                     : '<text y="12" fill="black">SVG export not supported for this track</text>',
+            }
+            : {
+                ...res,
+                features: deserializedFeatures,
+                blockKey: 'circularChord',
+                reactElement: ((0, jsx_runtime_1.jsx)(RpcRenderedSvgGroup_1.default, { ...args, ...res, features: deserializedFeatures, RenderingComponent: this.ReactComponent })),
             };
-        }
-        return {
-            ...res,
-            features: deserializedFeatures,
-            blockKey: 'circularChord',
-            reactElement: ((0, jsx_runtime_1.jsx)(RpcRenderedSvgGroup_1.default, { ...args, ...res, features: deserializedFeatures, RenderingComponent: this.ReactComponent })),
-        };
     }
 }
 exports.default = CircularChordRendererType;

package/pluggableElementTypes/renderers/RpcRenderedSvgGroup.d.ts

@@ -1,11 +1,9 @@
 import type { AnyReactComponentType, Feature } from '../../util';
 import type { ThemeOptions } from '@mui/material';
-interface Props {
+declare const RpcRenderedSvgGroup: (props: {
     html: string;
     features: Map<string, Feature>;
     theme: ThemeOptions;
-    displayModel?: any;
     RenderingComponent: AnyReactComponentType;
-}
-declare const RpcRenderedSvgGroup: (props: Props) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default RpcRenderedSvgGroup;

package/pluggableElementTypes/renderers/RpcRenderedSvgGroup.js

@@ -1,37 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
-const client_1 = require("react-dom/client");
-const ui_1 = require("../../ui");
-const util_1 = require("../../util");
 const RpcRenderedSvgGroup = (0, mobx_react_1.observer)(function RpcRenderedSvgGroup(props) {
-    const { html, theme, RenderingComponent, ...rest } = props;
-    const ref = (0, react_1.useRef)(null);
-    const rootRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const renderTimeout = (0, util_1.rIC)(() => {
-            var _a;
-            if (!ref.current) {
-                return;
-            }
-            const jbrowseTheme = (0, ui_1.createJBrowseTheme)(theme);
-            rootRef.current =
-                (_a = rootRef.current) !== null && _a !== void 0 ? _a : (0, client_1.hydrateRoot)(ref.current, (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: jbrowseTheme, children: (0, jsx_runtime_1.jsx)(RenderingComponent, { ...rest }) }));
-        });
-        return () => {
-            if (renderTimeout !== undefined) {
-                clearTimeout(renderTimeout);
-            }
-            const root = rootRef.current;
-            rootRef.current = null;
-            setTimeout(() => {
-                root === null || root === void 0 ? void 0 : root.unmount();
-            });
-        };
-    }, [RenderingComponent, theme, rest]);
-    return (0, jsx_runtime_1.jsx)("g", { ref: ref, dangerouslySetInnerHTML: { __html: html } });
+    const { html, RenderingComponent, ...rest } = props;
+    return (0, jsx_runtime_1.jsx)(RenderingComponent, { ...rest });
 });
 exports.default = RpcRenderedSvgGroup;

package/pluggableElementTypes/renderers/ServerSideRenderedContent.d.ts

@@ -2,5 +2,5 @@ import type { RenderArgs, ResultsSerialized } from './ServerSideRendererType';
 interface Props extends ResultsSerialized, RenderArgs {
     RenderingComponent: React.ComponentType<any>;
 }
-declare const ServerSideRenderedContent: ({ theme, html, RenderingComponent, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const ServerSideRenderedContent: ({ html, RenderingComponent, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ServerSideRenderedContent;

package/pluggableElementTypes/renderers/ServerSideRenderedContent.js

@@ -1,36 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const mobx_react_1 = require("mobx-react");
-const client_1 = require("react-dom/client");
-const ui_1 = require("../../ui");
-const util_1 = require("../../util");
-const ServerSideRenderedContent = (0, mobx_react_1.observer)(function ServerSideRenderedContent({ theme, html, RenderingComponent, ...rest }) {
-    const ref = (0, react_1.useRef)(null);
-    const rootRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const renderTimeout = (0, util_1.rIC)(() => {
-            var _a;
-            if (!ref.current) {
-                return;
-            }
-            const jbrowseTheme = (0, ui_1.createJBrowseTheme)(theme);
-            rootRef.current =
-                (_a = rootRef.current) !== null && _a !== void 0 ? _a : (0, client_1.hydrateRoot)(ref.current, (0, jsx_runtime_1.jsx)(styles_1.ThemeProvider, { theme: jbrowseTheme, children: (0, jsx_runtime_1.jsx)(RenderingComponent, { ...rest }) }));
-        });
-        return () => {
-            if (renderTimeout !== undefined) {
-                clearTimeout(renderTimeout);
-            }
-            const root = rootRef.current;
-            rootRef.current = null;
-            setTimeout(() => {
-                root === null || root === void 0 ? void 0 : root.unmount();
-            });
-        };
-    }, [theme, rest, RenderingComponent]);
-    return (0, jsx_runtime_1.jsx)("div", { ref: ref, dangerouslySetInnerHTML: { __html: html } });
+const ServerSideRenderedContent = (0, mobx_react_1.observer)(function ServerSideRenderedContent({ html, RenderingComponent, ...props }) {
+    return (0, jsx_runtime_1.jsx)(RenderingComponent, { ...props });
 });
 exports.default = ServerSideRenderedContent;

package/pluggableElementTypes/renderers/ServerSideRendererType.js

@@ -28,18 +28,17 @@ class ServerSideRenderer extends RendererType_1.default {
         };
     }
     deserializeResultsInClient(res, args) {
-        if (args.exportSVG) {
-            return {
+        return args.exportSVG
+            ? {
                 ...res,
                 html: this.supportsSVG
                     ? res.html
                     : '<text y="12" fill="black">SVG export not supported for this track</text>',
+            }
+            : {
+                ...res,
+                reactElement: ((0, jsx_runtime_1.jsx)(ServerSideRenderedContent_1.default, { ...args, ...res, RenderingComponent: this.ReactComponent })),
             };
-        }
-        return {
-            ...res,
-            reactElement: ((0, jsx_runtime_1.jsx)(ServerSideRenderedContent_1.default, { ...args, ...res, RenderingComponent: this.ReactComponent })),
-        };
     }
     deserializeArgsInWorker(args) {
         const deserialized = { ...args };