@jbrowse/plugin-wiggle 3.6.5 → 4.0.0

package/esm/LinearWiggleDisplay/model.js

@@ -1,15 +1,15 @@
 import { lazy } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { getContainingView, getSession } from '@jbrowse/core/util';
+import { types } from '@jbrowse/mobx-state-tree';
 import EqualizerIcon from '@mui/icons-material/Equalizer';
 import PaletteIcon from '@mui/icons-material/Palette';
 import VisibilityIcon from '@mui/icons-material/Visibility';
-import { types } from 'mobx-state-tree';
-import { axisPropsFromTickScale } from 'react-d3-axis-mod';
-import SharedWiggleMixin from '../shared/SharedWiggleMixin';
-import { YSCALEBAR_LABEL_OFFSET, getScale } from '../util';
-const Tooltip = lazy(() => import('./components/Tooltip'));
-const SetColorDialog = lazy(() => import('./components/SetColorDialog'));
+import SharedWiggleMixin from "../shared/SharedWiggleMixin.js";
+import axisPropsFromTickScale from "../shared/axisPropsFromTickScale.js";
+import { YSCALEBAR_LABEL_OFFSET, getScale } from "../util.js";
+const Tooltip = lazy(() => import("./components/Tooltip.js"));
+const SetColorDialog = lazy(() => import("./components/SetColorDialog.js"));
 const rendererTypes = new Map([
     ['xyplot', 'XYPlotRenderer'],
     ['density', 'DensityRenderer'],
@@ -39,17 +39,15 @@ function stateModelFactory(pluginManager, configSchema) {
             return rendererType;
         },
         get quantitativeStatsRelevantToCurrentZoom() {
-            var _a;
             const view = getContainingView(self);
-            return ((_a = self.stats) === null || _a === void 0 ? void 0 : _a.currStatsBpPerPx) === view.bpPerPx;
+            return self.stats?.currStatsBpPerPx === view.bpPerPx;
         },
         get graphType() {
             return (self.rendererTypeName === 'XYPlotRenderer' ||
                 self.rendererTypeName === 'LinePlotRenderer');
         },
         get inverted() {
-            var _a;
-            return (_a = self.invertedSetting) !== null && _a !== void 0 ? _a : getConf(self, 'inverted');
+            return self.invertedSetting ?? getConf(self, 'inverted');
         },
     }))
         .views(self => {
@@ -60,8 +58,7 @@ function stateModelFactory(pluginManager, configSchema) {
                 const { filters, resolution, scaleOpts } = self;
                 return {
                     ...superProps,
-                    rpcDriverName: self.rpcDriverName,
-                    displayModel: self,
+                    rpcDriverName: self.effectiveRpcDriverName,
                     config: self.rendererConfig,
                     displayCrossHatches: self.displayCrossHatchesSetting,
                     scaleOpts,
@@ -94,14 +91,19 @@ function stateModelFactory(pluginManager, configSchema) {
     })
         .views(self => ({
         renderProps() {
-            const { inverted, ticks, height } = self;
+            const { inverted, ticks, height, domain } = self;
             const superProps = self.adapterProps();
+            const view = getContainingView(self);
+            const statsRegion = JSON.stringify(view.dynamicBlocks);
             return {
                 ...self.adapterProps(),
-                notReady: superProps.notReady || !self.stats,
+                notReady: superProps.notReady ||
+                    !domain ||
+                    self.stats?.statsRegion !== statsRegion,
                 height,
                 ticks,
                 inverted,
+                offset: YSCALEBAR_LABEL_OFFSET,
             };
         },
         get fillSetting() {
@@ -117,14 +119,16 @@ function stateModelFactory(pluginManager, configSchema) {
         },
         get quantitativeStatsReady() {
             const view = getContainingView(self);
-            return (view.initialized && self.statsReadyAndRegionNotTooLarge && !self.error);
+            return (view.initialized &&
+                self.featureDensityStatsReadyAndRegionNotTooLarge &&
+                !self.error);
         },
     }))
         .views(self => {
         const { trackMenuItems: superTrackMenuItems } = self;
         const hasRenderings = getConf(self, 'defaultRendering');
         return {
-            trackMenuItems() {
+            wiggleBaseTrackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
                     {
@@ -132,6 +136,10 @@ function stateModelFactory(pluginManager, configSchema) {
                         icon: EqualizerIcon,
                         subMenu: self.scoreTrackMenuItems(),
                     },
+                ];
+            },
+            wiggleOnlyTrackMenuItems() {
+                return [
                     ...(self.graphType
                         ? [
                             {
@@ -204,21 +212,53 @@ function stateModelFactory(pluginManager, configSchema) {
             },
         };
     })
+        .views(self => ({
+        trackMenuItems() {
+            return [
+                ...self.wiggleBaseTrackMenuItems(),
+                {
+                    label: 'Show...',
+                    icon: VisibilityIcon,
+                    subMenu: [
+                        {
+                            label: 'Show tooltips',
+                            type: 'checkbox',
+                            checked: self.showTooltipsEnabled,
+                            onClick: () => {
+                                self.setShowTooltips(!self.showTooltipsEnabled);
+                            },
+                        },
+                    ],
+                },
+                ...self.wiggleOnlyTrackMenuItems(),
+            ];
+        },
+    }))
         .actions(self => {
         const { renderSvg: superRenderSvg } = self;
         return {
             afterAttach() {
                 ;
                 (async () => {
-                    const { getQuantitativeStatsAutorun } = await import('../getQuantitativeStatsAutorun');
+                    const { getQuantitativeStatsAutorun } = await import("../getQuantitativeStatsAutorun.js");
                     getQuantitativeStatsAutorun(self);
                 })();
             },
             async renderSvg(opts) {
-                const { renderSvg } = await import('./renderSvg');
+                const { renderSvg } = await import("./renderSvg.js");
                 return renderSvg(self, opts, superRenderSvg);
             },
         };
+    })
+        .postProcessSnapshot(snap => {
+        if (!snap) {
+            return snap;
+        }
+        const { invertedSetting, ...rest } = snap;
+        return {
+            ...rest,
+            ...(invertedSetting !== undefined ? { invertedSetting } : {}),
+        };
     });
 }
 export default stateModelFactory;

package/esm/LinearWiggleDisplay/renderSvg.d.ts

@@ -1,3 +1,3 @@
-import type { WiggleDisplayModel } from './model';
+import type { WiggleDisplayModel } from './model.ts';
 import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
 export declare function renderSvg(self: WiggleDisplayModel, opts: ExportSvgDisplayOptions, superRenderSvg: (opts: ExportSvgDisplayOptions) => Promise<React.ReactNode>): Promise<import("react/jsx-runtime").JSX.Element>;

package/esm/LinearWiggleDisplay/renderSvg.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getContainingView } from '@jbrowse/core/util';
 import { when } from 'mobx';
-import YScaleBar from '../shared/YScaleBar';
+import YScaleBar from "../shared/YScaleBar.js";
+import { isReadyOrHasError } from "../svgExportUtil.js";
 export async function renderSvg(self, opts, superRenderSvg) {
-    await when(() => !!self.stats && !!self.regionCannotBeRenderedText);
+    await when(() => isReadyOrHasError(self));
     const { graphType, stats } = self;
     const { offsetPx } = getContainingView(self);
     return (_jsxs(_Fragment, { children: [_jsx("g", { children: await superRenderSvg(opts) }), graphType && stats ? (_jsx("g", { transform: `translate(${Math.max(-offsetPx, 0)})`, children: _jsx(YScaleBar, { model: self, orientation: "left" }) })) : null] }));

package/esm/MultiDensityRenderer/MultiDensityRenderer.d.ts

@@ -1,8 +1,6 @@
-import WiggleBaseRenderer from '../WiggleBaseRenderer';
-import type { MultiRenderArgsDeserialized as MultiArgs } from '../WiggleBaseRenderer';
-import type { Feature } from '@jbrowse/core/util';
-export default class MultiDensityPlotRenderer extends WiggleBaseRenderer {
-    draw(ctx: CanvasRenderingContext2D, props: MultiArgs): Promise<{
-        reducedFeatures: Feature[];
-    }>;
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+import type { MultiRenderArgsDeserialized } from '../types.ts';
+export default class MultiDensityPlotRenderer extends FeatureRendererType {
+    supportsSVG: boolean;
+    render(renderProps: MultiRenderArgsDeserialized): Promise<import("@jbrowse/core/pluggableElementTypes/renderers/RendererType").RenderReturn>;
 }

package/esm/MultiDensityRenderer/MultiDensityRenderer.js

@@ -1,26 +1,8 @@
-import { forEachWithStopTokenCheck, groupBy } from '@jbrowse/core/util';
-import WiggleBaseRenderer from '../WiggleBaseRenderer';
-export default class MultiDensityPlotRenderer extends WiggleBaseRenderer {
-    async draw(ctx, props) {
-        const { stopToken, sources, features } = props;
-        const groups = groupBy(features.values(), f => f.get('source'));
-        const height = props.height / sources.length;
-        let feats = [];
-        const { drawDensity } = await import('../drawDensity');
-        ctx.save();
-        forEachWithStopTokenCheck(sources, stopToken, source => {
-            const features = groups[source.name] || [];
-            const { reducedFeatures } = drawDensity(ctx, {
-                ...props,
-                features,
-                height,
-            });
-            ctx.translate(0, height);
-            feats = feats.concat(reducedFeatures);
-        });
-        ctx.restore();
-        return {
-            reducedFeatures: feats,
-        };
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+export default class MultiDensityPlotRenderer extends FeatureRendererType {
+    supportsSVG = true;
+    async render(renderProps) {
+        const { makeImageData } = await import("./makeImageData.js");
+        return makeImageData(renderProps, this.pluginManager);
     }
 }

package/esm/MultiDensityRenderer/configSchema.d.ts

@@ -1,4 +1,4 @@
-declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+declare const configSchema: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
     color: {
         type: string;
         description: string;
@@ -24,7 +24,7 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
     };
     bicolorPivot: {
         type: string;
-        model: import("mobx-state-tree").ISimpleType<string>;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         description: string;
         defaultValue: string;
     };
@@ -33,5 +33,5 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
         defaultValue: number;
         description: string;
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
 export default configSchema;

package/esm/MultiDensityRenderer/configSchema.js

@@ -1,5 +1,5 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
-import baseWiggleRendererConfigSchema from '../configSchema';
+import baseWiggleRendererConfigSchema from "../configSchema.js";
 function x() { }
 const configSchema = ConfigurationSchema('MultiDensityRenderer', {}, {
     baseConfiguration: baseWiggleRendererConfigSchema,

package/esm/MultiDensityRenderer/index.js

@@ -1,10 +1,10 @@
-import configSchema from './configSchema';
-import ReactComponent from '../MultiWiggleRendering';
-import MultiDensityRenderer from './MultiDensityRenderer';
+import { lazy } from 'react';
+import MultiDensityRenderer from "./MultiDensityRenderer.js";
+import configSchema from "./configSchema.js";
 export default function MultiDensityRendererF(pluginManager) {
     pluginManager.addRendererType(() => new MultiDensityRenderer({
         name: 'MultiDensityRenderer',
-        ReactComponent,
+        ReactComponent: lazy(() => import("../MultiWiggleRendering.js")),
         configSchema,
         pluginManager,
     }));

package/esm/MultiDensityRenderer/makeImageData.d.ts

@@ -0,0 +1,3 @@
+import type { MultiRenderArgsDeserialized } from '../types.ts';
+import type PluginManager from '@jbrowse/core/PluginManager';
+export declare function makeImageData(renderProps: MultiRenderArgsDeserialized, pluginManager: PluginManager): Promise<import("@jbrowse/core/pluggableElementTypes/renderers/RendererType").RenderReturn>;

package/esm/MultiDensityRenderer/makeImageData.js

@@ -0,0 +1,7 @@
+export async function makeImageData(renderProps, pluginManager) {
+    const { renderMultiWiggle } = await import("../multiRendererHelper.js");
+    return renderMultiWiggle(pluginManager, renderProps, async (props, features) => {
+        const { renderMultiDensity } = await import("./renderMultiDensity.js");
+        return renderMultiDensity(props, features);
+    });
+}

package/esm/MultiDensityRenderer/renderMultiDensity.d.ts

@@ -0,0 +1,3 @@
+import type { MultiRenderArgsDeserialized } from '../types.ts';
+import type { Feature } from '@jbrowse/core/util';
+export declare function renderMultiDensity(renderProps: MultiRenderArgsDeserialized, features: Feature[]): Promise<import("librpc-web-mod").RpcResult>;

package/esm/MultiDensityRenderer/renderMultiDensity.js

@@ -0,0 +1,37 @@
+import { groupBy, renderToAbstractCanvas, updateStatus, } from '@jbrowse/core/util';
+import { rpcResult } from '@jbrowse/core/util/librpc';
+import { collectTransferables } from '@jbrowse/core/util/offscreenCanvasPonyfill';
+import { createStopTokenChecker } from '@jbrowse/core/util/stopToken';
+import { drawDensity } from "../drawDensity.js";
+import { serializeWiggleFeature } from "../util.js";
+export async function renderMultiDensity(renderProps, features) {
+    const { sources, height, regions, bpPerPx, stopToken, statusCallback = () => { }, } = renderProps;
+    const region = regions[0];
+    const width = (region.end - region.start) / bpPerPx;
+    const rowHeight = height / sources.length;
+    const lastCheck = createStopTokenChecker(stopToken);
+    const { reducedFeatures, ...rest } = await updateStatus('Rendering plot', statusCallback, () => renderToAbstractCanvas(width, height, renderProps, ctx => {
+        const groups = groupBy(features, f => f.get('source'));
+        let feats = [];
+        ctx.save();
+        for (const source of sources) {
+            const { reducedFeatures } = drawDensity(ctx, {
+                ...renderProps,
+                features: groups[source.name] || [],
+                height: rowHeight,
+                lastCheck,
+            });
+            ctx.translate(0, rowHeight);
+            feats = feats.concat(reducedFeatures);
+        }
+        ctx.restore();
+        return { reducedFeatures: feats };
+    }));
+    const serialized = {
+        ...rest,
+        features: reducedFeatures.map(serializeWiggleFeature),
+        height,
+        width,
+    };
+    return rpcResult(serialized, collectTransferables(rest));
+}

package/esm/MultiLineRenderer/MultiLineRenderer.d.ts

@@ -1,8 +1,6 @@
-import WiggleBaseRenderer from '../WiggleBaseRenderer';
-import type { MultiRenderArgsDeserialized as MultiArgs } from '../WiggleBaseRenderer';
-import type { Feature } from '@jbrowse/core/util';
-export default class MultiLineRenderer extends WiggleBaseRenderer {
-    draw(ctx: CanvasRenderingContext2D, props: MultiArgs): Promise<{
-        reducedFeatures: Feature[];
-    }>;
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+import type { MultiRenderArgsDeserialized } from '../types.ts';
+export default class MultiLineRenderer extends FeatureRendererType {
+    supportsSVG: boolean;
+    render(renderProps: MultiRenderArgsDeserialized): Promise<import("@jbrowse/core/pluggableElementTypes/renderers/RendererType").RenderReturn>;
 }

package/esm/MultiLineRenderer/MultiLineRenderer.js

@@ -1,19 +1,8 @@
-import { forEachWithStopTokenCheck, groupBy } from '@jbrowse/core/util';
-import WiggleBaseRenderer from '../WiggleBaseRenderer';
-export default class MultiLineRenderer extends WiggleBaseRenderer {
-    async draw(ctx, props) {
-        const { stopToken, sources, features } = props;
-        const groups = groupBy(features.values(), f => f.get('source'));
-        const { drawLine } = await import('../drawLine');
-        let feats = [];
-        forEachWithStopTokenCheck(sources, stopToken, source => {
-            const { reducedFeatures } = drawLine(ctx, {
-                ...props,
-                features: groups[source.name] || [],
-                colorCallback: () => source.color || 'blue',
-            });
-            feats = feats.concat(reducedFeatures);
-        });
-        return { reducedFeatures: feats };
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+export default class MultiLineRenderer extends FeatureRendererType {
+    supportsSVG = true;
+    async render(renderProps) {
+        const { makeImageData } = await import("./makeImageData.js");
+        return makeImageData(renderProps, this.pluginManager);
     }
 }

package/esm/MultiLineRenderer/configSchema.d.ts

@@ -1,4 +1,4 @@
-declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+declare const configSchema: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
     displayCrossHatches: {
         type: string;
         description: string;
@@ -6,11 +6,11 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
     };
     summaryScoreMode: {
         type: string;
-        model: import("mobx-state-tree").ISimpleType<string>;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         description: string;
         defaultValue: string;
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
     color: {
         type: string;
         description: string;
@@ -36,7 +36,7 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
     };
     bicolorPivot: {
         type: string;
-        model: import("mobx-state-tree").ISimpleType<string>;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         description: string;
         defaultValue: string;
     };
@@ -45,5 +45,5 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
         defaultValue: number;
         description: string;
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
 export default configSchema;

package/esm/MultiLineRenderer/configSchema.js

@@ -1,6 +1,6 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
-import { types } from 'mobx-state-tree';
-import baseWiggleRendererConfigSchema from '../configSchema';
+import { types } from '@jbrowse/mobx-state-tree';
+import baseWiggleRendererConfigSchema from "../configSchema.js";
 function x() { }
 const configSchema = ConfigurationSchema('MultiLineRenderer', {
     displayCrossHatches: {

package/esm/MultiLineRenderer/index.js

@@ -1,10 +1,10 @@
-import ReactComponent from '../MultiWiggleRendering';
-import MultiLineRenderer from './MultiLineRenderer';
-import configSchema from './configSchema';
+import { lazy } from 'react';
+import MultiLineRenderer from "./MultiLineRenderer.js";
+import configSchema from "./configSchema.js";
 export default function MultiLineRendererF(pluginManager) {
     pluginManager.addRendererType(() => new MultiLineRenderer({
         name: 'MultiLineRenderer',
-        ReactComponent,
+        ReactComponent: lazy(() => import("../MultiWiggleRendering.js")),
         configSchema,
         pluginManager,
     }));

package/esm/MultiLineRenderer/makeImageData.d.ts

@@ -0,0 +1,3 @@
+import type { MultiRenderArgsDeserialized } from '../types.ts';
+import type PluginManager from '@jbrowse/core/PluginManager';
+export declare function makeImageData(renderProps: MultiRenderArgsDeserialized, pluginManager: PluginManager): Promise<import("@jbrowse/core/pluggableElementTypes/renderers/RendererType").RenderReturn>;

package/esm/MultiLineRenderer/makeImageData.js

@@ -0,0 +1,7 @@
+export async function makeImageData(renderProps, pluginManager) {
+    const { renderMultiWiggle } = await import("../multiRendererHelper.js");
+    return renderMultiWiggle(pluginManager, renderProps, async (props, features) => {
+        const { renderMultiLine } = await import("./renderMultiLine.js");
+        return renderMultiLine(props, features);
+    });
+}

package/esm/MultiLineRenderer/renderMultiLine.d.ts

@@ -0,0 +1,3 @@
+import type { MultiRenderArgsDeserialized } from '../types.ts';
+import type { Feature } from '@jbrowse/core/util';
+export declare function renderMultiLine(renderProps: MultiRenderArgsDeserialized, features: Feature[]): Promise<import("librpc-web-mod").RpcResult>;

package/esm/MultiLineRenderer/renderMultiLine.js

@@ -0,0 +1,34 @@
+import { groupBy, renderToAbstractCanvas, updateStatus, } from '@jbrowse/core/util';
+import { rpcResult } from '@jbrowse/core/util/librpc';
+import { collectTransferables } from '@jbrowse/core/util/offscreenCanvasPonyfill';
+import { createStopTokenChecker } from '@jbrowse/core/util/stopToken';
+import { drawLine } from "../drawLine.js";
+import { serializeWiggleFeature } from "../util.js";
+export async function renderMultiLine(renderProps, features) {
+    const { sources, height, regions, bpPerPx, stopToken, statusCallback = () => { }, } = renderProps;
+    const region = regions[0];
+    const width = (region.end - region.start) / bpPerPx;
+    const lastCheck = createStopTokenChecker(stopToken);
+    const { reducedFeatures, ...rest } = await updateStatus('Rendering plot', statusCallback, () => renderToAbstractCanvas(width, height, renderProps, ctx => {
+        const groups = groupBy(features, f => f.get('source'));
+        let feats = [];
+        for (const source of sources) {
+            const { reducedFeatures } = drawLine(ctx, {
+                ...renderProps,
+                features: groups[source.name] || [],
+                staticColor: source.color || 'blue',
+                colorCallback: () => '',
+                lastCheck,
+            });
+            feats = feats.concat(reducedFeatures);
+        }
+        return { reducedFeatures: feats };
+    }));
+    const serialized = {
+        ...rest,
+        features: reducedFeatures.map(serializeWiggleFeature),
+        height,
+        width,
+    };
+    return rpcResult(serialized, collectTransferables(rest));
+}

package/esm/MultiLinearWiggleDisplay/components/ColorLegend.d.ts

@@ -1,6 +1,6 @@
-import type { WiggleDisplayModel } from '../model';
+import type { MinimalModel } from './types.ts';
 declare const ColorLegend: ({ model, rowHeight, exportSVG, }: {
-    model: WiggleDisplayModel;
+    model: MinimalModel;
     rowHeight: number;
     exportSVG?: boolean;
 }) => import("react/jsx-runtime").JSX.Element | null;

package/esm/MultiLinearWiggleDisplay/components/ColorLegend.js

@@ -1,13 +1,19 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { getFillProps } from '@jbrowse/core/util';
+import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import LegendItem from './LegendItem';
-import RectBg from './RectBg';
-const ColorLegend = observer(function ({ model, rowHeight, exportSVG, }) {
+import LegendItem from "./LegendItem.js";
+import LegendItemText from "./LegendItemText.js";
+import RectBg from "./RectBg.js";
+const ColorLegend = observer(function ColorLegend({ model, rowHeight, exportSVG, }) {
     const { graphType, needsFullHeightScalebar, rowHeightTooSmallForScalebar, renderColorBoxes, sources, labelWidth, } = model;
-    const colorBoxWidth = renderColorBoxes ? 15 : 0;
+    const colorBoxWidth = renderColorBoxes ? 20 : 0;
     const legendWidth = labelWidth + colorBoxWidth + 5;
     const svgOffset = exportSVG ? 10 : 0;
     const extraOffset = svgOffset || (graphType && !rowHeightTooSmallForScalebar ? 50 : 0);
-    return sources ? (_jsxs(_Fragment, { children: [needsFullHeightScalebar ? (_jsx(RectBg, { y: 0, x: extraOffset, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null, sources.map((source, idx) => (_jsx(LegendItem, { source: source, idx: idx, model: model, rowHeight: rowHeight, exportSVG: exportSVG, labelWidth: labelWidth }, `${source.name}-${idx}`)))] })) : null;
+    const theme = useTheme();
+    const textFillProps = useMemo(() => getFillProps(theme.palette.text.primary), [theme.palette.text.primary]);
+    return sources ? (_jsxs(_Fragment, { children: [needsFullHeightScalebar ? (_jsx(RectBg, { y: 0, x: extraOffset, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null, sources.map((source, idx) => (_jsx(LegendItem, { source: source, idx: idx, model: model, rowHeight: rowHeight, exportSVG: exportSVG, labelWidth: legendWidth }, `${source.name}-${idx}`))), sources.map((source, idx) => (_jsx(LegendItemText, { source: source, idx: idx, model: model, rowHeight: rowHeight, exportSVG: exportSVG, textFillProps: textFillProps }, `${source.name}-text-${idx}`)))] })) : null;
 });
 export default ColorLegend;

package/esm/MultiLinearWiggleDisplay/components/FullHeightScaleBar.d.ts

@@ -1,4 +1,4 @@
-import type { WiggleDisplayModel } from '../model';
+import type { WiggleDisplayModel } from '../model.ts';
 declare const FullHeightScaleBar: ({ model, orientation, exportSVG, }: {
     model: WiggleDisplayModel;
     orientation?: string;

package/esm/MultiLinearWiggleDisplay/components/FullHeightScaleBar.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getContainingView } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-import ColorLegend from './ColorLegend';
-import { getOffset } from './util';
-import YScaleBar from '../../shared/YScaleBar';
-const FullHeightScaleBar = observer(function ({ model, orientation, exportSVG, }) {
+import ColorLegend from "./ColorLegend.js";
+import { getOffset } from "./util.js";
+import YScaleBar from "../../shared/YScaleBar.js";
+const FullHeightScaleBar = observer(function FullHeightScaleBar({ model, orientation, exportSVG, }) {
     const { labelWidth } = model;
     const { width: viewWidth } = getContainingView(model);
     return (_jsxs(_Fragment, { children: [_jsx("g", { transform: `translate(${!exportSVG ? getOffset(model) : 0},0)`, children: _jsx(YScaleBar, { model: model, orientation: orientation }) }), _jsx("g", { transform: `translate(${viewWidth - labelWidth - 100},0)`, children: _jsx(ColorLegend, { exportSVG: exportSVG, model: model, rowHeight: 12 }) })] }));

package/esm/MultiLinearWiggleDisplay/components/IndividualScaleBars.d.ts

@@ -1,4 +1,4 @@
-import type { WiggleDisplayModel } from '../model';
+import type { WiggleDisplayModel } from '../model.ts';
 declare const IndividualScaleBars: ({ model, orientation, exportSVG, }: {
     model: WiggleDisplayModel;
     orientation?: string;

package/esm/MultiLinearWiggleDisplay/components/IndividualScaleBars.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import ColorLegend from './ColorLegend';
-import ScoreLegend from './ScoreLegend';
-import YScaleBar from '../../shared/YScaleBar';
-const IndividualScaleBars = observer(function ({ model, orientation, exportSVG, }) {
+import ColorLegend from "./ColorLegend.js";
+import ScoreLegend from "./ScoreLegend.js";
+import YScaleBar from "../../shared/YScaleBar.js";
+const IndividualScaleBars = observer(function IndividualScaleBars({ model, orientation, exportSVG, }) {
     const { sources, rowHeight, rowHeightTooSmallForScalebar, needsCustomLegend, ticks, } = model;
-    return (sources === null || sources === void 0 ? void 0 : sources.length) ? (_jsxs(_Fragment, { children: [_jsx(ColorLegend, { exportSVG: exportSVG, model: model, rowHeight: model.rowHeight }), rowHeightTooSmallForScalebar || needsCustomLegend ? (_jsx(ScoreLegend, { model: model })) : (sources.map((_source, idx) => (_jsx("g", { transform: `translate(0 ${rowHeight * idx})`, children: _jsx(YScaleBar, { model: model, orientation: orientation }) }, `${JSON.stringify(ticks)}-${idx}`))))] })) : null;
+    return sources?.length ? (_jsxs(_Fragment, { children: [_jsx(ColorLegend, { exportSVG: exportSVG, model: model, rowHeight: model.rowHeight }), rowHeightTooSmallForScalebar || needsCustomLegend ? (_jsx(ScoreLegend, { model: model })) : (sources.map((_source, idx) => (_jsx("g", { transform: `translate(0 ${rowHeight * idx})`, children: _jsx(YScaleBar, { model: model, orientation: orientation }) }, `${JSON.stringify(ticks)}-${idx}`))))] })) : null;
 });
 export default IndividualScaleBars;

package/esm/MultiLinearWiggleDisplay/components/LegendItem.d.ts

@@ -1,11 +1,11 @@
-import type { Source } from '../../util';
-import type { WiggleDisplayModel } from '../model';
+import type { MinimalModel } from './types.ts';
+import type { Source } from '../../util.ts';
 declare const LegendItem: ({ source, idx, rowHeight, labelWidth, model, exportSVG, }: {
     source: Source;
     idx: number;
     rowHeight: number;
     labelWidth: number;
-    model: WiggleDisplayModel;
+    model: MinimalModel;
     exportSVG?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default LegendItem;

package/esm/MultiLinearWiggleDisplay/components/LegendItem.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import RectBg from './RectBg';
+import RectBg from "./RectBg.js";
 const LegendItem = function ({ source, idx, rowHeight, labelWidth, model, exportSVG, }) {
     const boxHeight = Math.min(20, rowHeight);
     const { needsCustomLegend, graphType, needsFullHeightScalebar, rowHeightTooSmallForScalebar, renderColorBoxes, } = model;
-    const svgFontSize = Math.min(rowHeight, 12);
-    const canDisplayLabel = rowHeight > 11;
     const colorBoxWidth = renderColorBoxes ? 15 : 0;
     const legendWidth = labelWidth + colorBoxWidth + 5;
     const svgOffset = exportSVG ? 10 : 0;
     const extraOffset = svgOffset || (graphType && !rowHeightTooSmallForScalebar ? 50 : 0);
-    return (_jsxs(_Fragment, { children: [needsFullHeightScalebar ? null : (_jsx(RectBg, { y: idx * rowHeight + 1, x: extraOffset, width: legendWidth, height: boxHeight })), source.color ? (_jsx(RectBg, { y: idx * rowHeight + 1, x: extraOffset, width: colorBoxWidth, height: needsCustomLegend ? rowHeight : boxHeight, color: source.color })) : null, canDisplayLabel ? (_jsx("text", { y: idx * rowHeight + 13, x: extraOffset + colorBoxWidth + 2, fontSize: svgFontSize, children: source.name })) : null] }));
+    return (_jsxs(_Fragment, { children: [needsFullHeightScalebar ? null : (_jsx(RectBg, { y: idx * rowHeight + 1, x: extraOffset, width: legendWidth, height: boxHeight })), source.color ? (_jsx(RectBg, { y: idx * rowHeight + 1, x: extraOffset, width: colorBoxWidth, height: needsCustomLegend ? rowHeight : boxHeight, color: source.color })) : null] }));
 };
 export default LegendItem;

package/esm/MultiLinearWiggleDisplay/components/LegendItemText.d.ts

@@ -0,0 +1,12 @@
+import type { MinimalModel } from './types.ts';
+import type { Source } from '../../util.ts';
+import type { getFillProps } from '@jbrowse/core/util';
+declare const LegendItemText: ({ source, idx, rowHeight, model, exportSVG, textFillProps, }: {
+    source: Source;
+    idx: number;
+    rowHeight: number;
+    model: MinimalModel;
+    exportSVG?: boolean;
+    textFillProps: ReturnType<typeof getFillProps>;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default LegendItemText;