@jbrowse/plugin-wiggle 4.1.1 → 4.1.4

package/esm/BigWigAdapter/BigWigAdapter.d.ts

@@ -29,6 +29,20 @@ export default class BigWigAdapter extends BaseFeatureDataAdapter {
         featureCount: number;
         basesCovered: number;
         featureDensity: number;
+        scoreMeanMin?: undefined;
+        scoreMeanMax?: undefined;
+    } | {
+        scoreMin: number;
+        scoreMax: number;
+        scoreMeanMin: number;
+        scoreMeanMax: number;
+        scoreSum: number;
+        scoreSumSquares: number;
+        scoreMean: number;
+        scoreStdDev: number;
+        featureCount: number;
+        basesCovered: number;
+        featureDensity: number;
     }>;
     getMultiRegionFeatureDensityStats(_regions: Region[]): Promise<{
         featureDensity: number;

package/esm/BigWigAdapter/BigWigAdapter.js

@@ -22,6 +22,8 @@ function computeStatsFromView(view, targetStart, targetEnd) {
     }
     let scoreMin = Number.MAX_VALUE;
     let scoreMax = Number.MIN_VALUE;
+    let scoreMeanMin = Number.MAX_VALUE;
+    let scoreMeanMax = Number.MIN_VALUE;
     let scoreSum = 0;
     let scoreSumSquares = 0;
     let featureCount = 0;
@@ -36,6 +38,8 @@ function computeStatsFromView(view, targetStart, targetEnd) {
         const max = view.maxScore(i) ?? score;
         scoreMin = Math.min(scoreMin, min);
         scoreMax = Math.max(scoreMax, max);
+        scoreMeanMin = Math.min(scoreMeanMin, score);
+        scoreMeanMax = Math.max(scoreMeanMax, score);
         scoreSum += score;
         scoreSumSquares += score * score;
         featureCount++;
@@ -58,6 +62,8 @@ function computeStatsFromView(view, targetStart, targetEnd) {
     return {
         scoreMin,
         scoreMax,
+        scoreMeanMin,
+        scoreMeanMax,
         scoreSum,
         scoreSumSquares,
         scoreMean,

package/esm/BigWigAdapter/configSchema.d.ts

@@ -1,4 +1,4 @@
-declare const BigWigAdapter: import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
+declare const BigWigAdapter: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     bigWigLocation: {
         type: string;
         defaultValue: {
@@ -16,5 +16,5 @@ declare const BigWigAdapter: import("node_modules/@jbrowse/core/src/configuratio
         defaultValue: number;
         description: string;
     };
-}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export default BigWigAdapter;

package/esm/DensityRenderer/configSchema.d.ts

@@ -1,4 +1,4 @@
-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<{
+declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     color: {
         type: string;
         description: string;
@@ -33,5 +33,5 @@ declare const configSchema: import("node_modules/@jbrowse/core/src/configuration
         defaultValue: number;
         description: string;
     };
-}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
 export default configSchema;

package/esm/LinePlotRenderer/configSchema.d.ts

@@ -1,10 +1,10 @@
-declare const configSchema: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     displayCrossHatches: {
         type: string;
         description: string;
         defaultValue: boolean;
     };
-}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     color: {
         type: string;
         description: string;
@@ -39,5 +39,5 @@ declare const configSchema: import("node_modules/@jbrowse/core/src/configuration
         defaultValue: number;
         description: string;
     };
-}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
 export default configSchema;

package/esm/LinearWiggleDisplay/configSchema.d.ts

@@ -1,16 +1,16 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
-export default function WiggleConfigFactory(pluginManager: PluginManager): import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+export default function WiggleConfigFactory(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     defaultRendering: {
         type: string;
         model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         defaultValue: string;
     };
-    renderers: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    renderers: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         DensityRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
         XYPlotRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
         LinePlotRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
-    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>;
-}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     autoscale: {
         type: string;
         defaultValue: string;
@@ -48,7 +48,7 @@ export default function WiggleConfigFactory(pluginManager: PluginManager): impor
         description: string;
         defaultValue: boolean;
     };
-}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     maxFeatureScreenDensity: {
         type: string;
         description: string;
@@ -75,4 +75,4 @@ export default function WiggleConfigFactory(pluginManager: PluginManager): impor
         description: string;
         defaultValue: never[];
     };
-}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>, undefined>>;
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>, undefined>>;

package/esm/LinearWiggleDisplay/model.d.ts

@@ -37,6 +37,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
                 statusMessage?: string;
                 reactElement?: React.ReactElement;
                 isRenderingPending?: boolean;
+                displayHeight?: number;
             };
         }) => import("react/jsx-runtime").JSX.Element;
         renderProps: any;
@@ -55,10 +56,11 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
         beforeDestroy(): void;
     } & {
         readonly statusMessage: any;
+        readonly displayHeight: number | undefined;
     } & {
         afterAttach(): void;
     }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
-    configuration: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         maxFeatureScreenDensity: {
             type: string;
             description: string;
@@ -85,7 +87,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             description: string;
             defaultValue: never[];
         };
-    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "displayId">>;
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
     showLegend: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>>;
     showTooltips: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>>;
 } & {
@@ -397,6 +399,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
                         statusMessage?: string;
                         reactElement?: React.ReactElement;
                         isRenderingPending?: boolean;
+                        displayHeight?: number;
                     };
                 }) => import("react/jsx-runtime").JSX.Element;
                 renderProps: any;
@@ -415,6 +418,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
                 beforeDestroy(): void;
             } & {
                 readonly statusMessage: any;
+                readonly displayHeight: number | undefined;
             } & {
                 afterAttach(): void;
             }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>> & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IMapType<import("@jbrowse/mobx-state-tree").IModelType<{
@@ -441,6 +445,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
                         statusMessage?: string;
                         reactElement?: React.ReactElement;
                         isRenderingPending?: boolean;
+                        displayHeight?: number;
                     };
                 }) => import("react/jsx-runtime").JSX.Element;
                 renderProps: any;
@@ -459,6 +464,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
                 beforeDestroy(): void;
             } & {
                 readonly statusMessage: any;
+                readonly displayHeight: number | undefined;
             } & {
                 afterAttach(): void;
             }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>>;
@@ -472,7 +478,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
                         [x: string]: any;
                     } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & any & import("@jbrowse/mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
                 } & import("@jbrowse/mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
-            } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+            } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
                 maxFeatureScreenDensity: {
                     type: string;
                     description: string;
@@ -499,7 +505,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
                     description: string;
                     defaultValue: never[];
                 };
-            }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "displayId">>>;
+            }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>>;
             showLegend: boolean | undefined;
             showTooltips: boolean | undefined;
         } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & {
@@ -789,6 +795,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
                         statusMessage?: string;
                         reactElement?: React.ReactElement;
                         isRenderingPending?: boolean;
+                        displayHeight?: number;
                     };
                 }) => import("react/jsx-runtime").JSX.Element;
                 renderProps: any;
@@ -807,10 +814,11 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
                 beforeDestroy(): void;
             } & {
                 readonly statusMessage: any;
+                readonly displayHeight: number | undefined;
             } & {
                 afterAttach(): void;
             }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
-            configuration: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+            configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
                 maxFeatureScreenDensity: {
                     type: string;
                     description: string;
@@ -837,7 +845,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
                     description: string;
                     defaultValue: never[];
                 };
-            }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "displayId">>;
+            }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
             showLegend: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>>;
             showTooltips: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>>;
         }, {
@@ -1108,6 +1116,8 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
         currStatsBpPerPx: number;
         scoreMin: number;
         scoreMax: number;
+        scoreMeanMin?: number;
+        scoreMeanMax?: number;
         statsRegion?: string;
     } | undefined;
     statsFetchInProgress: undefined | import("@jbrowse/core/util").StopToken;
@@ -1116,6 +1126,8 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
         currStatsBpPerPx: number;
         scoreMin: number;
         scoreMax: number;
+        scoreMeanMin?: number;
+        scoreMeanMax?: number;
     }, statsRegion?: string): void;
     setColor(color?: string): void;
     setPosColor(color?: string): void;
@@ -1164,6 +1176,8 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             currStatsBpPerPx: number;
             scoreMin: number;
             scoreMax: number;
+            scoreMeanMin?: number;
+            scoreMeanMax?: number;
             statsRegion?: string;
         } | undefined;
         autoscaleType: string;
@@ -1357,6 +1371,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
                 statusMessage?: string;
                 reactElement?: React.ReactElement;
                 isRenderingPending?: boolean;
+                displayHeight?: number;
             };
         }) => import("react/jsx-runtime").JSX.Element;
         renderProps: any;
@@ -1375,10 +1390,11 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
         beforeDestroy(): void;
     } & {
         readonly statusMessage: any;
+        readonly displayHeight: number | undefined;
     } & {
         afterAttach(): void;
     }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
-    configuration: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         maxFeatureScreenDensity: {
             type: string;
             description: string;
@@ -1405,7 +1421,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             description: string;
             defaultValue: never[];
         };
-    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "displayId">>;
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
     showLegend: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>>;
     showTooltips: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>>;
 } & {

package/esm/MultiDensityRenderer/configSchema.d.ts

@@ -1,4 +1,4 @@
-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<{
+declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     color: {
         type: string;
         description: string;
@@ -33,5 +33,5 @@ declare const configSchema: import("node_modules/@jbrowse/core/src/configuration
         defaultValue: number;
         description: string;
     };
-}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
 export default configSchema;

package/esm/MultiLineRenderer/configSchema.d.ts

@@ -1,4 +1,4 @@
-declare const configSchema: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     displayCrossHatches: {
         type: string;
         description: string;
@@ -10,7 +10,7 @@ declare const configSchema: import("node_modules/@jbrowse/core/src/configuration
         description: string;
         defaultValue: string;
     };
-}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     color: {
         type: string;
         description: string;
@@ -45,5 +45,5 @@ declare const configSchema: import("node_modules/@jbrowse/core/src/configuration
         defaultValue: number;
         description: string;
     };
-}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
 export default configSchema;

package/esm/MultiLinearWiggleDisplay/components/IndividualScaleBars.js

@@ -4,7 +4,8 @@ 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?.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;
+    const { sources, rowHeight, rowHeightTooSmallForScalebar, needsCustomLegend, ticks, hierarchy, showTree, } = model;
+    const treeIsShowing = hierarchy && showTree;
+    return sources?.length ? (_jsxs(_Fragment, { children: [treeIsShowing ? null : (_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/MultiWiggleColorLegend.d.ts

@@ -0,0 +1,10 @@
+import type { Source } from '../../util.ts';
+declare const MultiWiggleColorLegend: ({ model, labelWidth, }: {
+    model: {
+        canDisplayLegendLabels: boolean;
+        rowHeight: number;
+        sources?: Source[];
+    };
+    labelWidth: number;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default MultiWiggleColorLegend;

package/esm/MultiLinearWiggleDisplay/components/MultiWiggleColorLegend.js

@@ -0,0 +1,29 @@
+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 RectBg from "./RectBg.js";
+const LegendItem = function ({ source, idx, rowHeight, }) {
+    const { color } = source;
+    const colorBoxWidth = 15;
+    return color ? (_jsx(RectBg, { y: idx * rowHeight, x: 0, width: colorBoxWidth + 0.5, height: rowHeight + 0.5, color: color })) : null;
+};
+const LegendItemText = function ({ source, idx, rowHeight, textFillProps, }) {
+    const { color, name } = source;
+    const svgFontSize = Math.min(rowHeight, 12);
+    const colorBoxWidth = 15;
+    return (_jsx("text", { y: (idx + 0.5) * rowHeight, x: color ? colorBoxWidth + 2 : 0, fontSize: svgFontSize, dominantBaseline: "central", ...textFillProps, children: name }));
+};
+const MultiWiggleColorLegend = observer(function MultiWiggleColorLegend({ model, labelWidth, }) {
+    const { canDisplayLegendLabels, rowHeight, sources } = model;
+    const colorBoxWidth = 15;
+    const theme = useTheme();
+    const hasColors = useMemo(() => sources?.some(s => s.color) ?? false, [sources]);
+    const legendWidth = labelWidth + (hasColors ? colorBoxWidth + 5 : 0);
+    const textFillProps = useMemo(() => getFillProps(theme.palette.text.primary), [theme.palette.text.primary]);
+    return sources ? (_jsxs(_Fragment, { children: [canDisplayLegendLabels ? (_jsx(RectBg, { y: 0, x: 0, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null, sources.map((source, idx) => (_jsx(LegendItem, { source: source, idx: idx, rowHeight: rowHeight }, `${source.name}-${idx}`))), canDisplayLegendLabels
+                ? sources.map((source, idx) => (_jsx(LegendItemText, { source: source, idx: idx, rowHeight: rowHeight, textFillProps: textFillProps }, `${source.name}-text-${idx}`)))
+                : null] })) : null;
+});
+export default MultiWiggleColorLegend;

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

@@ -0,0 +1,7 @@
+import type { LegendBarModel } from './treeTypes.ts';
+declare const MultiWiggleLegendBar: (props: {
+    model: LegendBarModel;
+    orientation?: string;
+    exportSVG?: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default MultiWiggleLegendBar;

package/esm/MultiLinearWiggleDisplay/components/MultiWiggleLegendBar.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { measureText } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+import MultiWiggleColorLegend from "./MultiWiggleColorLegend.js";
+import MultiWiggleLegendBarWrapper from "./MultiWiggleLegendBarWrapper.js";
+const MultiWiggleLegendBar = observer(function MultiWiggleLegendBar(props) {
+    const { model } = props;
+    const { canDisplayLegendLabels, rowHeight, sources } = model;
+    const svgFontSize = Math.min(rowHeight, 12);
+    const labelWidth = useMemo(() => {
+        if (!sources) {
+            return 0;
+        }
+        let maxWidth = 0;
+        for (const s of sources) {
+            const width = canDisplayLegendLabels
+                ? measureText(s.name, svgFontSize) + 10
+                : 20;
+            if (width > maxWidth) {
+                maxWidth = width;
+            }
+        }
+        return maxWidth;
+    }, [sources, svgFontSize, canDisplayLegendLabels]);
+    return sources ? (_jsx(MultiWiggleLegendBarWrapper, { ...props, children: _jsx(MultiWiggleColorLegend, { model: model, labelWidth: labelWidth }) })) : null;
+});
+export default MultiWiggleLegendBar;

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

@@ -0,0 +1,7 @@
+import type { LegendBarModel } from './treeTypes.ts';
+declare const MultiWiggleLegendBarWrapper: ({ children, model, exportSVG, }: {
+    model: LegendBarModel;
+    children: React.ReactNode;
+    exportSVG?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MultiWiggleLegendBarWrapper;

package/esm/MultiLinearWiggleDisplay/components/MultiWiggleLegendBarWrapper.js

@@ -0,0 +1,18 @@
+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';
+const MultiWiggleLegendBarWrapper = observer(function MultiWiggleLegendBarWrapper({ children, model, exportSVG, }) {
+    const { id, scrollTop, height, hierarchy, treeAreaWidth, showTree } = model;
+    const clipid = `legend-${typeof jest === 'undefined' ? id : 'test'}`;
+    const leftOffset = hierarchy && showTree ? treeAreaWidth : 0;
+    return exportSVG ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipid, children: _jsx("rect", { x: 0, y: 0, width: 1000, height: height }) }) }), _jsx("g", { clipPath: `url(#${clipid})`, children: _jsx("g", { transform: `translate(0,${-scrollTop})`, children: children }) })] })) : (_jsx("svg", { style: {
+            position: 'absolute',
+            top: 0,
+            left: leftOffset,
+            zIndex: 100,
+            pointerEvents: 'none',
+            height: model.totalHeight,
+            width: getContainingView(model).width,
+        }, children: children }));
+});
+export default MultiWiggleLegendBarWrapper;

package/esm/MultiLinearWiggleDisplay/components/RectBg.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getFillProps } from '@jbrowse/core/util';
 import { alpha, useTheme } from '@mui/material';
+import { SIDEBAR_BACKGROUND_OPACITY } from "./constants.js";
 const RectBg = ({ x, y, width, height, color, }) => {
     const theme = useTheme();
-    return (_jsx("rect", { pointerEvents: "auto", x: x, y: y, width: width, height: height, ...getFillProps(color || alpha(theme.palette.background.paper, 0.3)) }));
+    return (_jsx("rect", { pointerEvents: "auto", x: x, y: y, width: width, height: height, ...getFillProps(color ||
+            alpha(theme.palette.background.paper, SIDEBAR_BACKGROUND_OPACITY)) }));
 };
 export default RectBg;

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

@@ -0,0 +1,5 @@
+import type { LegendBarModel } from './treeTypes.ts';
+declare const SvgTree: ({ model, }: {
+    model: LegendBarModel;
+}) => import("react/jsx-runtime").JSX.Element[];
+export default SvgTree;

package/esm/MultiLinearWiggleDisplay/components/SvgTree.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+const SvgTree = observer(function SvgTree({ model, }) {
+    const { treeAreaWidth: _treeAreaWidth, hierarchy } = model;
+    const svg = [];
+    let idx = 0;
+    if (hierarchy) {
+        for (const link of hierarchy.links()) {
+            const { source, target } = link;
+            const sy = source.x;
+            const ty = target.x;
+            const tx = target.y;
+            const sx = source.y;
+            svg.push(_jsx("line", { x1: sx, y1: sy, x2: sx, y2: ty, stroke: "black", opacity: "0.4" }, `${sx}-${sy}-${tx}-${ty}-${idx++}`), _jsx("line", { x1: sx, y1: ty, x2: tx, y2: ty, stroke: "black", opacity: "0.4" }, `${sx}-${sy}-${tx}-${ty}-${idx++}`));
+        }
+    }
+    return svg;
+});
+export default SvgTree;

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

@@ -0,0 +1,5 @@
+import type { TreeSidebarModel } from './treeTypes.ts';
+declare const TreeSidebar: ({ model, }: {
+    model: TreeSidebarModel;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default TreeSidebar;