@jbrowse/plugin-wiggle 2.3.4 → 2.4.1

package/src/BigWigAdapter/BigWigAdapter.ts

@@ -81,21 +81,20 @@ export default class BigWigAdapter extends BaseFeatureDataAdapter {
         basesPerSpan: bpPerPx / resolution,
       })
 
-      for (let i = 0; i < feats.length; i++) {
-        const data = feats[i]
+      for (const data of feats) {
         if (source) {
-          // @ts-ignore
+          // @ts-expect-error
           data.source = source
         }
         const uniqueId = `${source}:${region.refName}:${data.start}-${data.end}`
-        // @ts-ignore
+        // @ts-expect-error
         data.refName = refName
         data.uniqueId = uniqueId
         observer.next({
-          // @ts-ignore
+          // @ts-expect-error
           get: (str: string) => (data as Record<string, unknown>)[str],
           id: () => uniqueId,
-          // @ts-ignore
+          // @ts-expect-error
           toJSON: () => data,
         })
       }

package/src/CreateMultiWiggleExtension/ConfirmDialog.tsx

@@ -19,7 +19,7 @@ const ConfirmDialog = ({
   tracks: AnyConfigurationModel[]
   onClose: (arg: boolean, arg1?: { name: string }) => void
 }) => {
-  const [val, setVal] = useState('MultiWiggle ' + Date.now())
+  const [val, setVal] = useState(`MultiWiggle ${Date.now()}`)
   const allQuant = tracks.every(t => t.type === 'QuantitativeTrack')
   return (
     <Dialog

package/src/CreateMultiWiggleExtension/index.ts

@@ -26,9 +26,7 @@ export default function (pm: PluginManager) {
                       .map((c, idx) => ({ ...c, source: trackIds[idx] }))
                     const assemblyNames = [
                       ...new Set(
-                        tracks
-                          .map(c => readConfObject(c, 'assemblyNames'))
-                          .flat(),
+                        tracks.flatMap(c => readConfObject(c, 'assemblyNames')),
                       ),
                     ]
                     const now = +Date.now()

package/src/DensityRenderer/DensityRenderer.test.ts

@@ -6,10 +6,10 @@ import ReactComponent from '../WiggleRendering'
 
 import { Image, createCanvas } from 'canvas'
 
-// @ts-ignore
+// @ts-expect-error
 global.nodeImage = Image
 
-// @ts-ignore
+// @ts-expect-error
 global.nodeCreateCanvas = createCanvas
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -53,7 +53,7 @@ test('inverted mode and reversed', async () => {
   }
 
   const res = await renderToAbstractCanvas(1000, 200, renderProps, ctx =>
-    // @ts-ignore
+    // @ts-expect-error
     renderer.draw(ctx, renderProps),
   )
   expect(res).toMatchSnapshot({

package/src/LinearWiggleDisplay/components/Tooltip.tsx

@@ -55,4 +55,5 @@ const WiggleTooltip = observer(function (props: {
   return <Tooltip TooltipContents={TooltipContents} {...props} />
 })
 export default WiggleTooltip
-export { Tooltip }
+
+export { default as Tooltip } from '../../Tooltip'

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
 
@@ -50,4 +50,4 @@ const LinearWiggleDisplay = observer((props: { model: WiggleDisplayModel }) => {
 
 export default LinearWiggleDisplay
 
-export { YScaleBar }
+export { default as YScaleBar } from '../../shared/YScaleBar'

package/src/LinearWiggleDisplay/index.ts

@@ -4,7 +4,6 @@ import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
 import configSchemaFactory from './models/configSchema'
 import modelFactory from './models/model'
 import ReactComponent from './components/WiggleDisplayComponent'
-import Tooltip from './components/Tooltip'
 
 export default (pluginManager: PluginManager) => {
   pluginManager.addDisplayType(() => {
@@ -22,4 +21,6 @@ export default (pluginManager: PluginManager) => {
   })
 }
 
-export { ReactComponent, modelFactory, Tooltip }
+export { default as Tooltip } from './components/Tooltip'
+export { default as ReactComponent } from './components/WiggleDisplayComponent'
+export { default as modelFactory } from './models/model'

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'))
@@ -216,11 +216,7 @@ function stateModelFactory(
        * #action
        */
       toggleLogScale() {
-        if (self.scale !== 'log') {
-          self.scale = 'log'
-        } else {
-          self.scale = 'linear'
-        }
+        self.scale = self.scale === 'log' ? 'linear' : 'log'
       },
 
       /**

package/src/MultiDensityRenderer/MultiDensityRenderer.ts

@@ -6,7 +6,7 @@ import WiggleBaseRenderer, {
 import { drawDensity } from '../drawxy'
 
 export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
-  // @ts-ignore
+  // @ts-expect-error
   async draw(ctx: CanvasRenderingContext2D, props: MultiArgs) {
     const { bpPerPx, sources, regions, features } = props
     const [region] = regions
@@ -31,7 +31,7 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
       ctx.lineTo(width, height)
       ctx.stroke()
       ctx.translate(0, height)
-      feats = feats.concat(reducedFeatures)
+      feats = [...feats, ...reducedFeatures]
     })
     ctx.restore()
     return { reducedFeatures: feats }

package/src/MultiLineRenderer/MultiLineRenderer.ts

@@ -7,7 +7,7 @@ import WiggleBaseRenderer, {
 } from '../WiggleBaseRenderer'
 
 export default class MultiLineRenderer extends WiggleBaseRenderer {
-  // @ts-ignore
+  // @ts-expect-error
   async draw(ctx: CanvasRenderingContext2D, props: MultiArgs) {
     const { sources, features } = props
     const groups = groupBy([...features.values()], f => f.get('source'))
@@ -22,7 +22,7 @@ export default class MultiLineRenderer extends WiggleBaseRenderer {
         features,
         colorCallback: () => source.color || 'blue',
       })
-      feats = feats.concat(reducedFeatures)
+      feats = [...feats, ...reducedFeatures]
     })
     return { reducedFeatures: feats }
   }

package/src/MultiLinearWiggleDisplay/components/DraggableDialog.tsx

@@ -54,7 +54,7 @@ function DraggableDialog(props: DialogProps & { title: string }) {
             <IconButton
               className={classes.closeButton}
               onClick={() => {
-                // @ts-ignore
+                // @ts-expect-error
                 onClose()
               }}
             >

package/src/MultiLinearWiggleDisplay/components/SetColorDialog.tsx

@@ -141,7 +141,7 @@ function SourcesGrid({
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
   const [selected, setSelected] = useState([] as string[])
 
-  // @ts-ignore
+  // @ts-expect-error
   const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0]
 
   // similar to BaseFeatureDetail data-grid for auto-measuring columns
@@ -178,7 +178,7 @@ function SourcesGrid({
         const { value } = params
         return isUriLocation(value) ? <UriLink value={value} /> : getStr(value)
       },
-      // @ts-ignore
+      // @ts-expect-error
       width: measureGridWidth(rows.map(r => r[val])),
     })),
   ]
@@ -266,9 +266,9 @@ function SourcesGrid({
             onChange(
               field
                 ? [...rows].sort((a, b) => {
-                    // @ts-ignore
+                    // @ts-expect-error
                     const aa = getStr(a[field])
-                    // @ts-ignore
+                    // @ts-expect-error
                     const bb = getStr(b[field])
                     return idx === 1
                       ? aa.localeCompare(bb)

package/src/MultiLinearWiggleDisplay/components/Tooltip.tsx

@@ -73,4 +73,5 @@ const WiggleTooltip = observer(
   },
 )
 export default WiggleTooltip
-export { Tooltip }
+
+export { default as Tooltip } from '../../Tooltip'

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 ? null : (
+              <RectBg
+                y={idx * rowHeight + 1}
+                x={extraOffset}
+                width={legendWidth}
+                height={boxHeight}
+              />
+            )}
+            {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 }
+export { default as YScaleBar } from '../../shared/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),
@@ -177,11 +176,7 @@ const stateModelFactory = (
       },
 
       toggleLogScale() {
-        if (self.scale !== 'log') {
-          self.scale = 'log'
-        } else {
-          self.scale = 'linear'
-        }
+        self.scale = self.scale === 'log' ? 'linear' : 'log'
       },
 
       setScaleType(scale?: string) {

package/src/MultiRowLineRenderer/MultiRowLineRenderer.ts

@@ -6,7 +6,7 @@ import WiggleBaseRenderer, {
 } from '../WiggleBaseRenderer'
 
 export default class MultiRowLineRenderer extends WiggleBaseRenderer {
-  // @ts-ignore
+  // @ts-expect-error
   async draw(ctx: CanvasRenderingContext2D, props: MultiArgs) {
     const { bpPerPx, sources, regions, features } = props
     const [region] = regions
@@ -28,7 +28,7 @@ export default class MultiRowLineRenderer extends WiggleBaseRenderer {
       ctx.lineTo(width, height)
       ctx.stroke()
       ctx.translate(0, height)
-      feats = feats.concat(reducedFeatures)
+      feats = [...feats, ...reducedFeatures]
     })
     ctx.restore()
     return { reducedFeatures: feats }