@jbrowse/plugin-wiggle 2.14.0 → 2.15.1

package/dist/LinearWiggleDisplay/models/model.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
+import { AnyReactComponentType } from '@jbrowse/core/util';
 import { Instance } from 'mobx-state-tree';
 import PluginManager from '@jbrowse/core/PluginManager';
 import { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
@@ -45,16 +45,14 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
         maxHeightReached: boolean;
         ReactComponent: ({ model, }: {
             model: {
-                error? /**
-                 * #getter
-                 */: unknown;
+                error?: unknown;
                 reload: () => void;
                 message: React.ReactNode;
                 filled?: boolean;
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => React.JSX.Element | undefined;
+        }) => import("react").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -134,13 +132,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             id: string;
             type: string;
             rpcDriverName: string | undefined;
-        } & import(
-        /**
-         * #stateModel LinearWiggleDisplay
-         * extends
-         * - [SharedWiggleMixin](../sharedwigglemixin)
-         */
-        "mobx-state-tree/dist/internal").NonEmptyObject & {
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
@@ -152,10 +144,10 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree" /**
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        onHorizontalScroll? /**
          * #getter
-         */)._NotCustomized>>;
-        onHorizontalScroll?: () => void;
+         */: () => void;
         blockState?: Record<string, any>;
     }>;
     readonly DisplayBlurb: React.FC<{
@@ -222,18 +214,18 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     readonly regionTooLargeReason: string;
 } & {
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): React.JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
 } & {
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
+    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
     readonly blockType: "dynamicBlocks" | "staticBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
-    readonly TooltipComponent: React.FC<any>;
+    readonly TooltipComponent: AnyReactComponentType;
     readonly selectedFeatureId: string | undefined;
-    readonly DisplayMessageComponent: undefined | React.FC<any>;
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
     readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
@@ -255,7 +247,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     renderProps(): any;
 } & {
-    renderSvg(opts: ExportSvgDisplayOptions): Promise<React.JSX.Element>;
+    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
     afterAttach(): void;
 } & {
     message: undefined | string;
@@ -353,7 +345,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     /**
      * #getter
      */
-    readonly TooltipComponent: React.FC;
+    readonly TooltipComponent: AnyReactComponentType;
     /**
      * #getter
      */
@@ -434,7 +426,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     /**
      * #action
      */
-    renderSvg(opts: ExportSvgDisplayOptions): Promise<React.JSX.Element>;
+    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type WiggleDisplayStateModel = ReturnType<typeof stateModelFactory>;
 export type WiggleDisplayModel = Instance<WiggleDisplayStateModel>;

package/dist/LinearWiggleDisplay/models/model.js

@@ -33,9 +33,9 @@ const mobx_state_tree_1 = require("mobx-state-tree");
 const react_d3_axis_mod_1 = require("react-d3-axis-mod");
 // locals
 const util_2 = require("../../util");
-const Tooltip_1 = __importDefault(require("../components/Tooltip"));
 const modelShared_1 = __importDefault(require("../../shared/modelShared"));
 // lazies
+const Tooltip = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../components/Tooltip'))));
 const SetColorDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../components/SetColorDialog'))));
 // using a map because it preserves order
 const rendererTypes = new Map([
@@ -61,7 +61,7 @@ function stateModelFactory(pluginManager, configSchema) {
          * #getter
          */
         get TooltipComponent() {
-            return Tooltip_1.default;
+            return Tooltip;
         },
         /**
          * #getter

package/dist/MultiLinearWiggleDisplay/models/model.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import { Instance } from 'mobx-state-tree';
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
-import { Feature } from '@jbrowse/core/util';
+import { Feature, AnyReactComponentType } from '@jbrowse/core/util';
 import PluginManager from '@jbrowse/core/PluginManager';
 import { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
 interface Source {
@@ -58,7 +57,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => React.JSX.Element | undefined;
+        }) => import("react").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -154,9 +153,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        }, import("mobx-state-tree" /**
-         * #property
-         */)._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
@@ -169,7 +166,9 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+        } & import("mobx-state-tree" /**
+         * #action
+         */).IStateTreeNode<import("mobx-state-tree").IModelType<{
             id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
             type: import("mobx-state-tree").ISimpleType<string>;
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -224,18 +223,18 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
     readonly regionTooLargeReason: string;
 } & {
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): React.JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
 } & {
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
+    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
     readonly blockType: "dynamicBlocks" | "staticBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
-    readonly TooltipComponent: React.FC<any>;
+    readonly TooltipComponent: AnyReactComponentType;
     readonly selectedFeatureId: string | undefined;
-    readonly DisplayMessageComponent: undefined | React.FC<any>;
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, Feature>;
     readonly featureUnderMouse: Feature | undefined;
@@ -257,7 +256,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
     contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     renderProps(): any;
 } & {
-    renderSvg(opts: ExportSvgDisplayOptions): Promise<React.JSX.Element>;
+    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
     afterAttach(): void;
 } & {
     message: undefined | string;
@@ -379,7 +378,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
     /**
      * #getter
      */
-    readonly TooltipComponent: React.FC;
+    readonly TooltipComponent: AnyReactComponentType;
     /**
      * #getter
      */
@@ -522,7 +521,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
     /**
      * #action
      */
-    renderSvg(opts: ExportSvgDisplayOptions): Promise<React.JSX.Element>;
+    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type WiggleDisplayStateModel = ReturnType<typeof stateModelFactory>;
 export type WiggleDisplayModel = Instance<WiggleDisplayStateModel>;

package/dist/MultiLinearWiggleDisplay/models/model.js

@@ -39,10 +39,10 @@ const tracks_1 = require("@jbrowse/core/util/tracks");
 const colors_1 = require("@jbrowse/core/ui/colors");
 // locals
 const util_2 = require("../../util");
-const Tooltip_1 = __importDefault(require("../components/Tooltip"));
 const modelShared_1 = __importDefault(require("../../shared/modelShared"));
 const randomColor = () => '#000000'.replaceAll('0', () => (~~(Math.random() * 16)).toString(16));
 // lazies
+const Tooltip = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../components/Tooltip'))));
 const SetColorDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../components/SetColorDialog'))));
 // using a map because it preserves order
 const rendererTypes = new Map([
@@ -112,7 +112,7 @@ function stateModelFactory(pluginManager, configSchema) {
          * #getter
          */
         get TooltipComponent() {
-            return Tooltip_1.default;
+            return Tooltip;
         },
         /**
          * #getter

package/dist/Tooltip.js

@@ -1,31 +1,38 @@
 "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 });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const mobx_react_1 = require("mobx-react");
-const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
-const react_2 = require("@floating-ui/react");
+const BaseTooltip_1 = __importDefault(require("@jbrowse/core/ui/BaseTooltip"));
 // locals
 const util_1 = require("./util");
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    // these styles come from
-    // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
-    tooltip: {
-        position: 'absolute',
-        pointerEvents: 'none',
-        backgroundColor: (0, material_1.alpha)(theme.palette.grey[700], 0.9),
-        borderRadius: theme.shape.borderRadius,
-        color: theme.palette.common.white,
-        fontFamily: theme.typography.fontFamily,
-        padding: '4px 8px',
-        fontSize: theme.typography.pxToRem(12),
-        lineHeight: `${(0, util_1.round)(14 / 10)}em`,
-        maxWidth: 300,
-        wordWrap: 'break-word',
-    },
+const useStyles = (0, mui_1.makeStyles)()({
     hoverVertical: {
         background: '#333',
         border: 'none',
@@ -36,28 +43,15 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         position: 'absolute',
         pointerEvents: 'none',
     },
-}));
+});
 const Tooltip = (0, mobx_react_1.observer)(function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }) {
-    var _a, _b;
-    const theme = (0, material_1.useTheme)();
     const { featureUnderMouse } = model;
     const { classes } = useStyles();
-    const { refs, floatingStyles, context } = (0, react_2.useFloating)({
-        placement: 'right',
-        strategy: 'fixed',
-    });
     const x = clientMouseCoord[0] + 5;
     const y = useClientY ? clientMouseCoord[1] : (clientRect === null || clientRect === void 0 ? void 0 : clientRect.top) || 0;
-    const clientPoint = (0, react_2.useClientPoint)(context, { x, y });
-    const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
-    const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
     return featureUnderMouse ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
-            react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
-                    ...floatingStyles,
-                    zIndex: 100000,
-                    pointerEvents: 'none',
-                }, ...getFloatingProps() },
+        react_1.default.createElement(react_1.Suspense, { fallback: null },
+            react_1.default.createElement(BaseTooltip_1.default, { clientPoint: { x, y } },
                 react_1.default.createElement(TooltipContents, { model: model, feature: featureUnderMouse }))),
         react_1.default.createElement("div", { className: classes.hoverVertical, style: {
                 left: offsetMouseCoord[0],

package/dist/WiggleBaseRenderer.d.ts

@@ -37,7 +37,7 @@ export default abstract class WiggleBaseRenderer extends FeatureRendererType {
         height: number;
         width: number;
         containsNoTransferables: boolean;
-        reactElement: import("react").JSX.Element;
+        reactElement: React.JSX.Element;
         html?: string;
     } | {
         features: Map<string, Feature>;

package/dist/index.d.ts

@@ -18,9 +18,9 @@ export default class WigglePlugin extends Plugin {
             width: number;
             height: number;
             blockKey: string;
-            onMouseLeave?: (event: import("react").MouseEvent) => void;
-            onMouseMove?: (event: import("react").MouseEvent, arg?: string) => void;
-            onFeatureClick?: (event: import("react").MouseEvent, arg?: string) => void;
+            onMouseLeave?: (event: React.MouseEvent) => void;
+            onMouseMove?: (event: React.MouseEvent, arg?: string) => void;
+            onFeatureClick?: (event: React.MouseEvent, arg?: string) => void;
         }) => import("react").JSX.Element;
         XYPlotRenderer: typeof XYPlotRenderer;
         WiggleBaseRenderer: typeof WiggleBaseRenderer;

package/dist/shared/modelShared.d.ts

@@ -31,7 +31,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
     }, {
         renderInProgress: AbortController | undefined;
         filled: boolean;
-        reactElement: import("react").ReactElement | undefined;
+        reactElement: React.ReactElement | undefined;
         features: Map<string, Feature> | undefined;
         layout: any;
         status: string;
@@ -42,12 +42,12 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
             model: {
                 error?: unknown;
                 reload: () => void;
-                message: import("react").ReactNode;
+                message: React.ReactNode;
                 filled?: boolean;
                 status?: string;
                 reactElement? /**
                  * #property
-                 */: import("react").ReactElement;
+                 */: React.ReactElement;
             };
         }) => import("react").JSX.Element | undefined;
         renderProps: any;
@@ -58,7 +58,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
         setLoading(abortController: AbortController): void;
         setMessage(messageText: string): void;
         setRendered(props: {
-            reactElement: import("react").ReactElement;
+            reactElement: React.ReactElement;
             features: Map<string, Feature>;
             layout: any;
             maxHeightReached: boolean;
@@ -161,7 +161,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
     error: unknown;
     message: string | undefined;
 } & {
-    readonly RenderingComponent: import("react").FC<{
+    readonly RenderingComponent: React.FC<{
         model: {
             id: string;
             type: string;
@@ -184,7 +184,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
         onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
-    readonly DisplayBlurb: import("react").FC<{
+    readonly DisplayBlurb: React.FC<{
         model: {
             id: string;
             type: string;
@@ -207,7 +207,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
     readonly parentTrack: any;
     renderProps(): any;
     readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
-    readonly DisplayMessageComponent: undefined | import("react").FC<any>;
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
     trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
     regionCannotBeRendered(): null;
@@ -253,13 +253,13 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
+    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
     readonly blockType: "dynamicBlocks" | "staticBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
-    readonly TooltipComponent: import("react").FC<any>;
+    readonly TooltipComponent: import("@jbrowse/core/util").AnyReactComponentType;
     readonly selectedFeatureId: string | undefined;
-    readonly DisplayMessageComponent: undefined | import("react").FC<any>;
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, Feature>;
     readonly featureUnderMouse: Feature | undefined;
@@ -519,7 +519,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
     }, {
         renderInProgress: AbortController | undefined;
         filled: boolean;
-        reactElement: import("react").ReactElement | undefined;
+        reactElement: React.ReactElement | undefined;
         features: Map<string, Feature> | undefined;
         layout: any;
         status: string;
@@ -530,12 +530,12 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
             model: {
                 error?: unknown;
                 reload: () => void;
-                message: import("react").ReactNode;
+                message: React.ReactNode;
                 filled?: boolean;
                 status?: string;
                 reactElement? /**
                  * #property
-                 */: import("react").ReactElement;
+                 */: React.ReactElement;
             };
         }) => import("react").JSX.Element | undefined;
         renderProps: any;
@@ -546,7 +546,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
         setLoading(abortController: AbortController): void;
         setMessage(messageText: string): void;
         setRendered(props: {
-            reactElement: import("react").ReactElement;
+            reactElement: React.ReactElement;
             features: Map<string, Feature>;
             layout: any;
             maxHeightReached: boolean;
@@ -588,8 +588,8 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
     type: string;
     id: string;
     configuration: import("mobx-state-tree").ModelSnapshotType<Record<string, any>>;
-    rpcDriverName: string | undefined;
     heightPreConfig: number | undefined;
+    rpcDriverName: string | undefined;
     userBpPerPxLimit: number | undefined;
     userByteSizeLimit: number | undefined;
 } & import("mobx-state-tree")._NotCustomized>;

package/dist/util.d.ts

@@ -25,7 +25,7 @@ export interface Source {
  *   - pivotValue (number)
  *   - inverted (boolean)
  */
-export declare function getScale({ domain, range, scaleType, pivotValue, inverted, }: ScaleOpts): import("@mui/x-charts-vendor/d3-scale").ScaleLinear<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleLogarithmic<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleQuantize<number, never>;
+export declare function getScale({ domain, range, scaleType, pivotValue, inverted, }: ScaleOpts): import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleLogarithmic<number, number, never> | import("d3-scale").ScaleQuantize<number, never>;
 /**
  * gets the origin for drawing the graph. for linear this is 0, for log this is arbitrarily set to log(1)==0
  *

package/esm/LinearWiggleDisplay/models/model.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
+import { AnyReactComponentType } from '@jbrowse/core/util';
 import { Instance } from 'mobx-state-tree';
 import PluginManager from '@jbrowse/core/PluginManager';
 import { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
@@ -45,16 +45,14 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
         maxHeightReached: boolean;
         ReactComponent: ({ model, }: {
             model: {
-                error? /**
-                 * #getter
-                 */: unknown;
+                error?: unknown;
                 reload: () => void;
                 message: React.ReactNode;
                 filled?: boolean;
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => React.JSX.Element | undefined;
+        }) => import("react").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -134,13 +132,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             id: string;
             type: string;
             rpcDriverName: string | undefined;
-        } & import(
-        /**
-         * #stateModel LinearWiggleDisplay
-         * extends
-         * - [SharedWiggleMixin](../sharedwigglemixin)
-         */
-        "mobx-state-tree/dist/internal").NonEmptyObject & {
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
@@ -152,10 +144,10 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree" /**
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        onHorizontalScroll? /**
          * #getter
-         */)._NotCustomized>>;
-        onHorizontalScroll?: () => void;
+         */: () => void;
         blockState?: Record<string, any>;
     }>;
     readonly DisplayBlurb: React.FC<{
@@ -222,18 +214,18 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     readonly regionTooLargeReason: string;
 } & {
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): React.JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
 } & {
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
+    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
     readonly blockType: "dynamicBlocks" | "staticBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
-    readonly TooltipComponent: React.FC<any>;
+    readonly TooltipComponent: AnyReactComponentType;
     readonly selectedFeatureId: string | undefined;
-    readonly DisplayMessageComponent: undefined | React.FC<any>;
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
     readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
@@ -255,7 +247,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     renderProps(): any;
 } & {
-    renderSvg(opts: ExportSvgDisplayOptions): Promise<React.JSX.Element>;
+    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
     afterAttach(): void;
 } & {
     message: undefined | string;
@@ -353,7 +345,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     /**
      * #getter
      */
-    readonly TooltipComponent: React.FC;
+    readonly TooltipComponent: AnyReactComponentType;
     /**
      * #getter
      */
@@ -434,7 +426,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     /**
      * #action
      */
-    renderSvg(opts: ExportSvgDisplayOptions): Promise<React.JSX.Element>;
+    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type WiggleDisplayStateModel = ReturnType<typeof stateModelFactory>;
 export type WiggleDisplayModel = Instance<WiggleDisplayStateModel>;

package/esm/LinearWiggleDisplay/models/model.js

@@ -5,9 +5,9 @@ import { types } from 'mobx-state-tree';
 import { axisPropsFromTickScale } from 'react-d3-axis-mod';
 // locals
 import { getScale, YSCALEBAR_LABEL_OFFSET } from '../../util';
-import Tooltip from '../components/Tooltip';
 import SharedWiggleMixin from '../../shared/modelShared';
 // lazies
+const Tooltip = lazy(() => import('../components/Tooltip'));
 const SetColorDialog = lazy(() => import('../components/SetColorDialog'));
 // using a map because it preserves order
 const rendererTypes = new Map([

package/esm/MultiLinearWiggleDisplay/models/model.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import { Instance } from 'mobx-state-tree';
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
-import { Feature } from '@jbrowse/core/util';
+import { Feature, AnyReactComponentType } from '@jbrowse/core/util';
 import PluginManager from '@jbrowse/core/PluginManager';
 import { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
 interface Source {
@@ -58,7 +57,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => React.JSX.Element | undefined;
+        }) => import("react").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -154,9 +153,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        }, import("mobx-state-tree" /**
-         * #property
-         */)._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
@@ -169,7 +166,9 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+        } & import("mobx-state-tree" /**
+         * #action
+         */).IStateTreeNode<import("mobx-state-tree").IModelType<{
             id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
             type: import("mobx-state-tree").ISimpleType<string>;
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -224,18 +223,18 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
     readonly regionTooLargeReason: string;
 } & {
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): React.JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
 } & {
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
+    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
     readonly blockType: "dynamicBlocks" | "staticBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
-    readonly TooltipComponent: React.FC<any>;
+    readonly TooltipComponent: AnyReactComponentType;
     readonly selectedFeatureId: string | undefined;
-    readonly DisplayMessageComponent: undefined | React.FC<any>;
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, Feature>;
     readonly featureUnderMouse: Feature | undefined;
@@ -257,7 +256,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
     contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     renderProps(): any;
 } & {
-    renderSvg(opts: ExportSvgDisplayOptions): Promise<React.JSX.Element>;
+    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
     afterAttach(): void;
 } & {
     message: undefined | string;
@@ -379,7 +378,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
     /**
      * #getter
      */
-    readonly TooltipComponent: React.FC;
+    readonly TooltipComponent: AnyReactComponentType;
     /**
      * #getter
      */
@@ -522,7 +521,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
     /**
      * #action
      */
-    renderSvg(opts: ExportSvgDisplayOptions): Promise<React.JSX.Element>;
+    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type WiggleDisplayStateModel = ReturnType<typeof stateModelFactory>;
 export type WiggleDisplayModel = Instance<WiggleDisplayStateModel>;

package/esm/MultiLinearWiggleDisplay/models/model.js

@@ -10,10 +10,10 @@ import { getRpcSessionId } from '@jbrowse/core/util/tracks';
 import { set1 as colors } from '@jbrowse/core/ui/colors';
 // locals
 import { getScale, YSCALEBAR_LABEL_OFFSET } from '../../util';
-import Tooltip from '../components/Tooltip';
 import SharedWiggleMixin from '../../shared/modelShared';
 const randomColor = () => '#000000'.replaceAll('0', () => (~~(Math.random() * 16)).toString(16));
 // lazies
+const Tooltip = lazy(() => import('../components/Tooltip'));
 const SetColorDialog = lazy(() => import('../components/SetColorDialog'));
 // using a map because it preserves order
 const rendererTypes = new Map([

package/esm/Tooltip.js

@@ -1,26 +1,10 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { observer } from 'mobx-react';
-import { alpha, Portal, useTheme } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
-import { useClientPoint, useFloating, useInteractions, } from '@floating-ui/react';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
 // locals
-import { YSCALEBAR_LABEL_OFFSET, round } from './util';
-const useStyles = makeStyles()(theme => ({
-    // these styles come from
-    // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
-    tooltip: {
-        position: 'absolute',
-        pointerEvents: 'none',
-        backgroundColor: alpha(theme.palette.grey[700], 0.9),
-        borderRadius: theme.shape.borderRadius,
-        color: theme.palette.common.white,
-        fontFamily: theme.typography.fontFamily,
-        padding: '4px 8px',
-        fontSize: theme.typography.pxToRem(12),
-        lineHeight: `${round(14 / 10)}em`,
-        maxWidth: 300,
-        wordWrap: 'break-word',
-    },
+import { YSCALEBAR_LABEL_OFFSET } from './util';
+const useStyles = makeStyles()({
     hoverVertical: {
         background: '#333',
         border: 'none',
@@ -31,28 +15,15 @@ const useStyles = makeStyles()(theme => ({
         position: 'absolute',
         pointerEvents: 'none',
     },
-}));
+});
 const Tooltip = observer(function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }) {
-    var _a, _b;
-    const theme = useTheme();
     const { featureUnderMouse } = model;
     const { classes } = useStyles();
-    const { refs, floatingStyles, context } = useFloating({
-        placement: 'right',
-        strategy: 'fixed',
-    });
     const x = clientMouseCoord[0] + 5;
     const y = useClientY ? clientMouseCoord[1] : (clientRect === null || clientRect === void 0 ? void 0 : clientRect.top) || 0;
-    const clientPoint = useClientPoint(context, { x, y });
-    const { getFloatingProps } = useInteractions([clientPoint]);
-    const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
     return featureUnderMouse ? (React.createElement(React.Fragment, null,
-        React.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
-            React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
-                    ...floatingStyles,
-                    zIndex: 100000,
-                    pointerEvents: 'none',
-                }, ...getFloatingProps() },
+        React.createElement(Suspense, { fallback: null },
+            React.createElement(BaseTooltip, { clientPoint: { x, y } },
                 React.createElement(TooltipContents, { model: model, feature: featureUnderMouse }))),
         React.createElement("div", { className: classes.hoverVertical, style: {
                 left: offsetMouseCoord[0],

package/esm/WiggleBaseRenderer.d.ts

@@ -37,7 +37,7 @@ export default abstract class WiggleBaseRenderer extends FeatureRendererType {
         height: number;
         width: number;
         containsNoTransferables: boolean;
-        reactElement: import("react").JSX.Element;
+        reactElement: React.JSX.Element;
         html?: string;
     } | {
         features: Map<string, Feature>;

package/esm/index.d.ts

@@ -18,9 +18,9 @@ export default class WigglePlugin extends Plugin {
             width: number;
             height: number;
             blockKey: string;
-            onMouseLeave?: (event: import("react").MouseEvent) => void;
-            onMouseMove?: (event: import("react").MouseEvent, arg?: string) => void;
-            onFeatureClick?: (event: import("react").MouseEvent, arg?: string) => void;
+            onMouseLeave?: (event: React.MouseEvent) => void;
+            onMouseMove?: (event: React.MouseEvent, arg?: string) => void;
+            onFeatureClick?: (event: React.MouseEvent, arg?: string) => void;
         }) => import("react").JSX.Element;
         XYPlotRenderer: typeof XYPlotRenderer;
         WiggleBaseRenderer: typeof WiggleBaseRenderer;

package/esm/shared/modelShared.d.ts

@@ -31,7 +31,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
     }, {
         renderInProgress: AbortController | undefined;
         filled: boolean;
-        reactElement: import("react").ReactElement | undefined;
+        reactElement: React.ReactElement | undefined;
         features: Map<string, Feature> | undefined;
         layout: any;
         status: string;
@@ -42,12 +42,12 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
             model: {
                 error?: unknown;
                 reload: () => void;
-                message: import("react").ReactNode;
+                message: React.ReactNode;
                 filled?: boolean;
                 status?: string;
                 reactElement? /**
                  * #property
-                 */: import("react").ReactElement;
+                 */: React.ReactElement;
             };
         }) => import("react").JSX.Element | undefined;
         renderProps: any;
@@ -58,7 +58,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
         setLoading(abortController: AbortController): void;
         setMessage(messageText: string): void;
         setRendered(props: {
-            reactElement: import("react").ReactElement;
+            reactElement: React.ReactElement;
             features: Map<string, Feature>;
             layout: any;
             maxHeightReached: boolean;
@@ -161,7 +161,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
     error: unknown;
     message: string | undefined;
 } & {
-    readonly RenderingComponent: import("react").FC<{
+    readonly RenderingComponent: React.FC<{
         model: {
             id: string;
             type: string;
@@ -184,7 +184,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
         onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
-    readonly DisplayBlurb: import("react").FC<{
+    readonly DisplayBlurb: React.FC<{
         model: {
             id: string;
             type: string;
@@ -207,7 +207,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
     readonly parentTrack: any;
     renderProps(): any;
     readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
-    readonly DisplayMessageComponent: undefined | import("react").FC<any>;
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
     trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
     regionCannotBeRendered(): null;
@@ -253,13 +253,13 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
+    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
     readonly blockType: "dynamicBlocks" | "staticBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
-    readonly TooltipComponent: import("react").FC<any>;
+    readonly TooltipComponent: import("@jbrowse/core/util").AnyReactComponentType;
     readonly selectedFeatureId: string | undefined;
-    readonly DisplayMessageComponent: undefined | import("react").FC<any>;
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, Feature>;
     readonly featureUnderMouse: Feature | undefined;
@@ -519,7 +519,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
     }, {
         renderInProgress: AbortController | undefined;
         filled: boolean;
-        reactElement: import("react").ReactElement | undefined;
+        reactElement: React.ReactElement | undefined;
         features: Map<string, Feature> | undefined;
         layout: any;
         status: string;
@@ -530,12 +530,12 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
             model: {
                 error?: unknown;
                 reload: () => void;
-                message: import("react").ReactNode;
+                message: React.ReactNode;
                 filled?: boolean;
                 status?: string;
                 reactElement? /**
                  * #property
-                 */: import("react").ReactElement;
+                 */: React.ReactElement;
             };
         }) => import("react").JSX.Element | undefined;
         renderProps: any;
@@ -546,7 +546,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
         setLoading(abortController: AbortController): void;
         setMessage(messageText: string): void;
         setRendered(props: {
-            reactElement: import("react").ReactElement;
+            reactElement: React.ReactElement;
             features: Map<string, Feature>;
             layout: any;
             maxHeightReached: boolean;
@@ -588,8 +588,8 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
     type: string;
     id: string;
     configuration: import("mobx-state-tree").ModelSnapshotType<Record<string, any>>;
-    rpcDriverName: string | undefined;
     heightPreConfig: number | undefined;
+    rpcDriverName: string | undefined;
     userBpPerPxLimit: number | undefined;
     userByteSizeLimit: number | undefined;
 } & import("mobx-state-tree")._NotCustomized>;

package/esm/util.d.ts

@@ -25,7 +25,7 @@ export interface Source {
  *   - pivotValue (number)
  *   - inverted (boolean)
  */
-export declare function getScale({ domain, range, scaleType, pivotValue, inverted, }: ScaleOpts): import("@mui/x-charts-vendor/d3-scale").ScaleLinear<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleLogarithmic<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleQuantize<number, never>;
+export declare function getScale({ domain, range, scaleType, pivotValue, inverted, }: ScaleOpts): import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleLogarithmic<number, number, never> | import("d3-scale").ScaleQuantize<number, never>;
 /**
  * gets the origin for drawing the graph. for linear this is 0, for log this is arbitrarily set to log(1)==0
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-wiggle",
-  "version": "2.14.0",
+  "version": "2.15.1",
   "description": "JBrowse 2 wiggle adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.3",
     "@gmod/bbi": "^5.0.0",
-    "@mui/icons-material": "^5.0.2",
+    "@mui/icons-material": "^6.0.0",
     "@mui/x-charts-vendor": "^7.12.0",
     "@mui/x-data-grid": "^7.0.0",
     "clone": "^2.1.2",
@@ -51,7 +51,7 @@
     "@jbrowse/core": "^2.0.0",
     "@jbrowse/plugin-data-management": "^2.0.0",
     "@jbrowse/plugin-linear-genome-view": "^2.0.0",
-    "@mui/material": "^5.0.0",
+    "@mui/material": "^6.0.0",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",
@@ -65,5 +65,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "9fb8231d932db40adf0a283081765431756c66ff"
+  "gitHead": "86ed70124fc5a0b1161266659d1ca9f8796bf3fe"
 }