@jbrowse/plugin-wiggle 2.3.3 → 2.4.0

package/esm/{LinearWiggleDisplay/components → shared}/YScaleBar.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
 import { Axis, LEFT, RIGHT } from 'react-d3-axis-mod';
-const YScaleBar = observer(({ model, orientation, }) => {
+export default observer(function ({ model, orientation, }) {
     const { ticks } = model;
-    return ticks ? (React.createElement(Axis, { ...ticks, shadow: 2, format: (n) => n, style: { orient: orientation === 'left' ? LEFT : RIGHT } })) : null;
+    const theme = useTheme();
+    return ticks ? (React.createElement(Axis, { ...ticks, shadow: 2, format: (n) => n, style: { orient: orientation === 'left' ? LEFT : RIGHT }, bg: theme.palette.background.default, fg: theme.palette.text.primary })) : null;
 });
-export default YScaleBar;
 //# sourceMappingURL=YScaleBar.js.map

package/esm/shared/YScaleBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"YScaleBar.js","sourceRoot":"","sources":["../../src/shared/YScaleBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAA0B,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAE7E,eAAe,QAAQ,CAAC,UAAU,EAChC,KAAK,EACL,WAAW,GAIZ;IACC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IACvB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,oBAAC,IAAI,OACC,KAAK,EACT,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,EACxB,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,EACxD,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,EACpC,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,GAC9B,CACH,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAC,CAAA"}

package/esm/util.d.ts

@@ -30,7 +30,7 @@ export declare function getScale({ domain, range, scaleType, pivotValue, inverte
  *
  * @param scaleType -
  */
-export declare function getOrigin(scaleType: string): 1 | 0;
+export declare function getOrigin(scaleType: string): 0 | 1;
 /**
  * produces a "nice" domain that actually rounds down to 0 for the min
  * or 0 to the max depending on if all values are positive or negative

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-wiggle",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "description": "JBrowse 2 wiggle adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -46,7 +46,7 @@
     "d3-scale": "^3.0.2",
     "fast-deep-equal": "^3.1.3",
     "is-object": "^1.0.1",
-    "react-d3-axis-mod": "^0.1.8",
+    "react-d3-axis-mod": "^0.1.9",
     "react-draggable": "^4.4.5",
     "react-popper": "^2.0.0"
   },
@@ -69,5 +69,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "283e0387ccd5acc9f092cf00804d1fcac212e68d"
+  "gitHead": "78707a2bc3ba8489f26a590ef83f62ede945d048"
 }

package/src/LinearWiggleDisplay/components/WiggleDisplayComponent.tsx

@@ -13,7 +13,7 @@ import {
 
 // locals
 import { WiggleDisplayModel } from '../models/model'
-import YScaleBar from './YScaleBar'
+import YScaleBar from '../../shared/YScaleBar'
 
 type LGV = LinearGenomeViewModel
 

package/src/LinearWiggleDisplay/models/model.tsx

@@ -30,7 +30,7 @@ import {
 } from '../../util'
 
 import Tooltip from '../components/Tooltip'
-import { YScaleBar } from '../components/WiggleDisplayComponent'
+import YScaleBar from '../../shared/YScaleBar'
 
 const SetMinMaxDlg = lazy(() => import('../../shared/SetMinMaxDialog'))
 const SetColorDlg = lazy(() => import('../components/SetColorDialog'))

package/src/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.tsx

@@ -13,7 +13,7 @@ import { observer } from 'mobx-react'
 
 // locals
 import { WiggleDisplayModel } from '../models/model'
-import YScaleBar from './YScaleBar'
+import YScaleBar from '../../shared/YScaleBar'
 
 type LGV = LinearGenomeViewModel
 
@@ -29,37 +29,35 @@ function getOffset(model: WiggleDisplayModel) {
     : 10
 }
 
-const Wrapper = observer(
-  ({
-    children,
-    model,
-    exportSVG,
-  }: {
-    model: WiggleDisplayModel
-    children: React.ReactNode
-    exportSVG?: boolean
-  }) => {
-    if (exportSVG) {
-      return <>{children}</>
-    } else {
-      const { height } = model
-      return (
-        <svg
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            pointerEvents: 'none',
-            height,
-            width: getContainingView(model).width,
-          }}
-        >
-          {children}
-        </svg>
-      )
-    }
-  },
-)
+const Wrapper = observer(function ({
+  children,
+  model,
+  exportSVG,
+}: {
+  model: WiggleDisplayModel
+  children: React.ReactNode
+  exportSVG?: boolean
+}) {
+  if (exportSVG) {
+    return <>{children}</>
+  } else {
+    const { height } = model
+    return (
+      <svg
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          pointerEvents: 'none',
+          height,
+          width: getContainingView(model).width,
+        }}
+      >
+        {children}
+      </svg>
+    )
+  }
+})
 
 const RectBg = (props: {
   x: number
@@ -91,161 +89,158 @@ const ScoreLegend = observer(({ model }: { model: WiggleDisplayModel }) => {
   )
 })
 
-const ColorLegend = observer(
-  ({
-    model,
-    rowHeight,
-    labelWidth,
-    exportSVG,
-  }: {
-    model: WiggleDisplayModel
-    rowHeight: number
-    labelWidth: number
-    exportSVG?: boolean
-  }) => {
-    const {
-      needsCustomLegend,
-      needsScalebar,
-      needsFullHeightScalebar,
-      rowHeightTooSmallForScalebar,
-      renderColorBoxes,
-      sources,
-    } = 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 || (needsScalebar && !rowHeightTooSmallForScalebar ? 50 : 0)
-    return sources ? (
-      <>
-        {
-          /* 0.25 for hanging letters like g */
-          needsFullHeightScalebar ? (
-            <RectBg
-              y={0}
-              x={extraOffset}
-              width={legendWidth}
-              height={(sources.length + 0.25) * rowHeight}
-            />
-          ) : null
-        }
-        {sources.map((source, idx) => {
-          const boxHeight = Math.min(20, rowHeight)
-          return (
-            <React.Fragment key={source.name + '-' + idx}>
-              {!needsFullHeightScalebar ? (
-                <RectBg
-                  y={idx * rowHeight + 1}
-                  x={extraOffset}
-                  width={legendWidth}
-                  height={boxHeight}
-                />
-              ) : null}
-              {source.color ? (
-                <RectBg
-                  y={idx * rowHeight + 1}
-                  x={extraOffset}
-                  width={colorBoxWidth}
-                  height={needsCustomLegend ? rowHeight : boxHeight}
-                  color={source.color}
-                />
-              ) : null}
-              {canDisplayLabel ? (
-                <text
-                  y={idx * rowHeight + 13}
-                  x={extraOffset + colorBoxWidth + 2}
-                  fontSize={svgFontSize}
-                >
-                  {source.name}
-                </text>
-              ) : null}
-            </React.Fragment>
-          )
-        })}
-      </>
-    ) : null
-  },
-)
-
-export const StatBars = observer(
-  (props: {
-    model: WiggleDisplayModel
-    orientation?: string
-    exportSVG?: boolean
-  }) => {
-    const { model, orientation, exportSVG } = props
-    const {
-      stats,
-      needsCustomLegend,
-      needsFullHeightScalebar,
-      rowHeightTooSmallForScalebar,
-      rowHeight,
-      sources,
-      ticks,
-    } = model
-    const svgFontSize = Math.min(rowHeight, 12)
-    const canDisplayLabel = rowHeight > 11
-    const { width: viewWidth } = getContainingView(model) as LGV
-    const minWidth = 20
-
-    const ready = stats && sources
-    if (!ready) {
-      return null
-    }
+const ColorLegend = observer(function ({
+  model,
+  rowHeight,
+  labelWidth,
+  exportSVG,
+}: {
+  model: WiggleDisplayModel
+  rowHeight: number
+  labelWidth: number
+  exportSVG?: boolean
+}) {
+  const {
+    needsCustomLegend,
+    needsScalebar,
+    needsFullHeightScalebar,
+    rowHeightTooSmallForScalebar,
+    renderColorBoxes,
+    sources,
+  } = 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 || (needsScalebar && !rowHeightTooSmallForScalebar ? 50 : 0)
+
+  return sources ? (
+    <>
+      {
+        /* 0.25 for hanging letters like g */
+        needsFullHeightScalebar ? (
+          <RectBg
+            y={0}
+            x={extraOffset}
+            width={legendWidth}
+            height={(sources.length + 0.25) * rowHeight}
+          />
+        ) : null
+      }
+      {sources.map((source, idx) => {
+        const boxHeight = Math.min(20, rowHeight)
+        return (
+          <React.Fragment key={source.name + '-' + idx}>
+            {!needsFullHeightScalebar ? (
+              <RectBg
+                y={idx * rowHeight + 1}
+                x={extraOffset}
+                width={legendWidth}
+                height={boxHeight}
+              />
+            ) : null}
+            {source.color ? (
+              <RectBg
+                y={idx * rowHeight + 1}
+                x={extraOffset}
+                width={colorBoxWidth}
+                height={needsCustomLegend ? rowHeight : boxHeight}
+                color={source.color}
+              />
+            ) : null}
+            {canDisplayLabel ? (
+              <text
+                y={idx * rowHeight + 13}
+                x={extraOffset + colorBoxWidth + 2}
+                fontSize={svgFontSize}
+              >
+                {source.name}
+              </text>
+            ) : null}
+          </React.Fragment>
+        )
+      })}
+    </>
+  ) : null
+})
 
-    const labelWidth = Math.max(
-      ...(sources
-        .map(s => measureText(s.name, svgFontSize))
-        .map(width => (canDisplayLabel ? width : minWidth)) || [0]),
-    )
+export const StatBars = observer(function (props: {
+  model: WiggleDisplayModel
+  orientation?: string
+  exportSVG?: boolean
+}) {
+  const { model, orientation, exportSVG } = props
+  const {
+    stats,
+    needsCustomLegend,
+    needsFullHeightScalebar,
+    rowHeightTooSmallForScalebar,
+    rowHeight,
+    sources,
+    ticks,
+  } = model
+  const svgFontSize = Math.min(rowHeight, 12)
+  const canDisplayLabel = rowHeight > 11
+  const { width: viewWidth } = getContainingView(model) as LGV
+  const minWidth = 20
+
+  const ready = stats && sources
+  if (!ready) {
+    return null
+  }
+
+  const labelWidth = Math.max(
+    ...(sources
+      .map(s => measureText(s.name, svgFontSize))
+      .map(width => (canDisplayLabel ? width : minWidth)) || [0]),
+  )
 
-    return (
-      <Wrapper {...props}>
-        {needsFullHeightScalebar ? (
-          <>
-            <g transform={`translate(${!exportSVG ? getOffset(model) : 0},0)`}>
-              <YScaleBar model={model} orientation={orientation} />
-            </g>
-            <g transform={`translate(${viewWidth - labelWidth - 100},0)`}>
-              <ColorLegend
-                exportSVG={exportSVG}
-                model={model}
-                rowHeight={12}
-                labelWidth={labelWidth}
-              />
-            </g>
-          </>
-        ) : (
-          <>
+  return (
+    <Wrapper {...props}>
+      {needsFullHeightScalebar ? (
+        <>
+          <g transform={`translate(${!exportSVG ? getOffset(model) : 0},0)`}>
+            <YScaleBar model={model} orientation={orientation} />
+          </g>
+          <g transform={`translate(${viewWidth - labelWidth - 100},0)`}>
             <ColorLegend
               exportSVG={exportSVG}
               model={model}
-              rowHeight={model.rowHeight}
+              rowHeight={12}
               labelWidth={labelWidth}
             />
+          </g>
+        </>
+      ) : (
+        <>
+          <ColorLegend
+            exportSVG={exportSVG}
+            model={model}
+            rowHeight={model.rowHeight}
+            labelWidth={labelWidth}
+          />
+
+          {rowHeightTooSmallForScalebar || needsCustomLegend ? (
+            <ScoreLegend {...props} />
+          ) : (
+            sources.map((_source, idx) => (
+              <g
+                transform={`translate(0 ${rowHeight * idx})`}
+                key={JSON.stringify(ticks) + '-' + idx}
+              >
+                <YScaleBar model={model} orientation={orientation} />
+              </g>
+            ))
+          )}
+        </>
+      )}
+    </Wrapper>
+  )
+})
 
-            {rowHeightTooSmallForScalebar || needsCustomLegend ? (
-              <ScoreLegend {...props} />
-            ) : (
-              sources.map((_source, idx) => (
-                <g
-                  transform={`translate(0 ${rowHeight * idx})`}
-                  key={JSON.stringify(ticks) + '-' + idx}
-                >
-                  <YScaleBar model={model} orientation={orientation} />
-                </g>
-              ))
-            )}
-          </>
-        )}
-      </Wrapper>
-    )
-  },
-)
-
-const LinearWiggleDisplay = observer((props: { model: WiggleDisplayModel }) => {
+export default observer((props: { model: WiggleDisplayModel }) => {
   const { model } = props
 
   return (
@@ -256,6 +251,4 @@ const LinearWiggleDisplay = observer((props: { model: WiggleDisplayModel }) => {
   )
 })
 
-export default LinearWiggleDisplay
-
 export { YScaleBar }

package/src/MultiLinearWiggleDisplay/models/configSchema.ts

@@ -122,6 +122,14 @@ export default function WiggleConfigFactory(pluginManager: PluginManager) {
         MultiLineRenderer: MultiLineRendererConfigSchema,
         MultiRowLineRenderer: MultiRowLineRendererConfigSchema,
       }),
+
+      /**
+       * #slot
+       */
+      height: {
+        type: 'number',
+        defaultValue: 200,
+      },
     },
     {
       /**

package/src/MultiLinearWiggleDisplay/models/model.tsx

@@ -77,7 +77,6 @@ const stateModelFactory = (
         resolution: types.optional(types.number, 1),
         fill: types.maybe(types.boolean),
         minSize: types.maybe(types.number),
-        height: 200,
         color: types.maybe(types.string),
         posColor: types.maybe(types.string),
         negColor: types.maybe(types.string),

package/src/WiggleBaseRenderer.tsx

@@ -73,9 +73,11 @@ export default abstract class WiggleBaseRenderer extends FeatureRendererType {
     return {
       ...results,
       ...rest,
-      features: (reducedFeatures
-        ? new Map(reducedFeatures.map((r: Feature) => [r.id(), r]))
-        : results.features) as Map<string, Feature>,
+      features: reducedFeatures
+        ? new Map<string, Feature>(
+            reducedFeatures.map((r: Feature) => [r.id(), r]),
+          )
+        : results.features,
       height,
       width,
       containsNoTransferables: true,

package/src/shared/YScaleBar.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { useTheme } from '@mui/material'
+import { observer } from 'mobx-react'
+import { axisPropsFromTickScale, Axis, LEFT, RIGHT } from 'react-d3-axis-mod'
+
+export default observer(function ({
+  model,
+  orientation,
+}: {
+  model: { ticks?: ReturnType<typeof axisPropsFromTickScale> }
+  orientation?: string
+}) {
+  const { ticks } = model
+  const theme = useTheme()
+  return ticks ? (
+    <Axis
+      {...ticks}
+      shadow={2}
+      format={(n: number) => n}
+      style={{ orient: orientation === 'left' ? LEFT : RIGHT }}
+      bg={theme.palette.background.default}
+      fg={theme.palette.text.primary}
+    />
+  ) : null
+})

package/dist/LinearWiggleDisplay/components/YScaleBar.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { WiggleDisplayModel } from '../models/model';
-declare const YScaleBar: ({ model, orientation, }: {
-    model: WiggleDisplayModel;
-    orientation?: string | undefined;
-}) => JSX.Element | null;
-export default YScaleBar;

package/dist/LinearWiggleDisplay/components/YScaleBar.js

@@ -1,14 +0,0 @@
-"use strict";
-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 mobx_react_1 = require("mobx-react");
-const react_d3_axis_mod_1 = require("react-d3-axis-mod");
-const YScaleBar = (0, mobx_react_1.observer)(({ model, orientation, }) => {
-    const { ticks } = model;
-    return ticks ? (react_1.default.createElement(react_d3_axis_mod_1.Axis, { ...ticks, shadow: 2, format: (n) => n, style: { orient: orientation === 'left' ? react_d3_axis_mod_1.LEFT : react_d3_axis_mod_1.RIGHT } })) : null;
-});
-exports.default = YScaleBar;
-//# sourceMappingURL=YScaleBar.js.map

package/dist/LinearWiggleDisplay/components/YScaleBar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"YScaleBar.js","sourceRoot":"","sources":["../../../src/LinearWiggleDisplay/components/YScaleBar.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,2CAAqC;AACrC,yDAAqD;AAGrD,MAAM,SAAS,GAAG,IAAA,qBAAQ,EACxB,CAAC,EACC,KAAK,EACL,WAAW,GAIZ,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IAEvB,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,8BAAC,wBAAI,OACC,KAAK,EACT,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,EACxB,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,wBAAI,CAAC,CAAC,CAAC,yBAAK,EAAE,GACxD,CACH,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CACF,CAAA;AACD,kBAAe,SAAS,CAAA"}

package/dist/MultiLinearWiggleDisplay/components/YScaleBar.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { WiggleDisplayModel } from '../models/model';
-declare const YScaleBar: ({ model, orientation, }: {
-    model: WiggleDisplayModel;
-    orientation?: string | undefined;
-}) => JSX.Element | null;
-export default YScaleBar;

package/dist/MultiLinearWiggleDisplay/components/YScaleBar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"YScaleBar.js","sourceRoot":"","sources":["../../../src/MultiLinearWiggleDisplay/components/YScaleBar.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,2CAAqC;AACrC,yDAAqD;AAGrD,MAAM,SAAS,GAAG,IAAA,qBAAQ,EACxB,CAAC,EACC,KAAK,EACL,WAAW,GAIZ,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IACvB,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,8BAAC,wBAAI,OACC,KAAK,EACT,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,EACxB,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,wBAAI,CAAC,CAAC,CAAC,yBAAK,EAAE,GACxD,CACH,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CACF,CAAA;AACD,kBAAe,SAAS,CAAA"}

package/esm/LinearWiggleDisplay/components/YScaleBar.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { WiggleDisplayModel } from '../models/model';
-declare const YScaleBar: ({ model, orientation, }: {
-    model: WiggleDisplayModel;
-    orientation?: string | undefined;
-}) => JSX.Element | null;
-export default YScaleBar;

package/esm/LinearWiggleDisplay/components/YScaleBar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"YScaleBar.js","sourceRoot":"","sources":["../../../src/LinearWiggleDisplay/components/YScaleBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGrD,MAAM,SAAS,GAAG,QAAQ,CACxB,CAAC,EACC,KAAK,EACL,WAAW,GAIZ,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IAEvB,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,oBAAC,IAAI,OACC,KAAK,EACT,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,EACxB,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,GACxD,CACH,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CACF,CAAA;AACD,eAAe,SAAS,CAAA"}

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { WiggleDisplayModel } from '../models/model';
-declare const YScaleBar: ({ model, orientation, }: {
-    model: WiggleDisplayModel;
-    orientation?: string | undefined;
-}) => JSX.Element | null;
-export default YScaleBar;

package/esm/MultiLinearWiggleDisplay/components/YScaleBar.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { observer } from 'mobx-react';
-import { Axis, LEFT, RIGHT } from 'react-d3-axis-mod';
-const YScaleBar = observer(({ model, orientation, }) => {
-    const { ticks } = model;
-    return ticks ? (React.createElement(Axis, { ...ticks, shadow: 2, format: (n) => n, style: { orient: orientation === 'left' ? LEFT : RIGHT } })) : null;
-});
-export default YScaleBar;
-//# sourceMappingURL=YScaleBar.js.map

package/esm/MultiLinearWiggleDisplay/components/YScaleBar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"YScaleBar.js","sourceRoot":"","sources":["../../../src/MultiLinearWiggleDisplay/components/YScaleBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGrD,MAAM,SAAS,GAAG,QAAQ,CACxB,CAAC,EACC,KAAK,EACL,WAAW,GAIZ,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IACvB,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,oBAAC,IAAI,OACC,KAAK,EACT,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,EACxB,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,GACxD,CACH,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CACF,CAAA;AACD,eAAe,SAAS,CAAA"}

package/src/LinearWiggleDisplay/components/YScaleBar.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { Axis, LEFT, RIGHT } from 'react-d3-axis-mod'
-import { WiggleDisplayModel } from '../models/model'
-
-const YScaleBar = observer(
-  ({
-    model,
-    orientation,
-  }: {
-    model: WiggleDisplayModel
-    orientation?: string
-  }) => {
-    const { ticks } = model
-
-    return ticks ? (
-      <Axis
-        {...ticks}
-        shadow={2}
-        format={(n: number) => n}
-        style={{ orient: orientation === 'left' ? LEFT : RIGHT }}
-      />
-    ) : null
-  },
-)
-export default YScaleBar

package/src/MultiLinearWiggleDisplay/components/YScaleBar.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { Axis, LEFT, RIGHT } from 'react-d3-axis-mod'
-import { WiggleDisplayModel } from '../models/model'
-
-const YScaleBar = observer(
-  ({
-    model,
-    orientation,
-  }: {
-    model: WiggleDisplayModel
-    orientation?: string
-  }) => {
-    const { ticks } = model
-    return ticks ? (
-      <Axis
-        {...ticks}
-        shadow={2}
-        format={(n: number) => n}
-        style={{ orient: orientation === 'left' ? LEFT : RIGHT }}
-      />
-    ) : null
-  },
-)
-export default YScaleBar