@jbrowse/plugin-wiggle 2.3.4 → 2.4.1

package/src/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.ts

@@ -7,7 +7,7 @@ import WiggleBaseRenderer, {
 } from '../WiggleBaseRenderer'
 
 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
@@ -35,7 +35,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/MultiWiggleAdapter/MultiWiggleAdapter.ts

@@ -19,6 +19,7 @@ function getFilename(uri: string) {
 
 interface AdapterEntry {
   dataAdapter: BaseFeatureDataAdapter
+  source: string
   [key: string]: unknown
 }
 
@@ -73,7 +74,7 @@ export default class MultiWiggleAdapter extends BaseFeatureDataAdapter {
     const adapters = await this.getAdapters()
     const stats = (
       await Promise.all(
-        // @ts-ignore
+        // @ts-expect-error
         adapters.map(adp => adp.dataAdapter.getGlobalStats?.(opts)),
       )
     ).filter(f => !!f)
@@ -94,7 +95,7 @@ export default class MultiWiggleAdapter extends BaseFeatureDataAdapter {
                 ? p
                 : new SimpleFeature({
                     ...p.toJSON(),
-                    uniqueId: adp.source + '-' + p.id(),
+                    uniqueId: `${adp.source}-${p.id()}`,
                     source: adp.source,
                   }),
             ),

package/src/MultiWiggleAddTrackWidget/AddTrackWorkflow.tsx

@@ -23,7 +23,7 @@ const useStyles = makeStyles()(theme => ({
 export default function MultiWiggleWidget({ model }: { model: AddTrackModel }) {
   const { classes } = useStyles()
   const [val, setVal] = useState('')
-  const [trackName, setTrackName] = useState('MultiWiggle ' + Date.now())
+  const [trackName, setTrackName] = useState(`MultiWiggle${+Date.now()}`)
   return (
     <Paper className={classes.paper}>
       <ul>
@@ -51,7 +51,7 @@ export default function MultiWiggleWidget({ model }: { model: AddTrackModel }) {
           hidden
           multiple
           onChange={({ target }) => {
-            const res = Array.from(target?.files || []).map(file => ({
+            const res = [...(target?.files || [])].map(file => ({
               type: 'BigWigAdapter',
               bigWigLocation: isElectron
                 ? {

package/src/MultiXYPlotRenderer/MultiXYPlotRenderer.ts

@@ -7,16 +7,16 @@ import WiggleBaseRenderer, {
 } from '../WiggleBaseRenderer'
 
 export default class MultiXYPlotRenderer 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'))
     const Color = await import('color').then(f => f.default)
     let feats = [] as Feature[]
-    sources.forEach(source => {
+    for (const source of sources) {
       const features = groups[source.name]
       if (!features) {
-        return
+        continue
       }
       const { reducedFeatures } = drawXY(ctx, {
         ...props,
@@ -25,8 +25,8 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
         colorCallback: () => source.color || 'blue',
         Color,
       })
-      feats = feats.concat(reducedFeatures)
-    })
+      feats = [...feats, ...reducedFeatures]
+    }
     return { reducedFeatures: feats }
   }
 }

package/src/WiggleBaseRenderer.tsx

@@ -1,10 +1,6 @@
 import FeatureRendererType, {
   RenderArgs as FeatureRenderArgs,
-  RenderArgsSerialized,
   RenderArgsDeserialized as FeatureRenderArgsDeserialized,
-  RenderResults,
-  ResultsSerialized,
-  ResultsDeserialized,
 } from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType'
 import { renderToAbstractCanvas, Feature } from '@jbrowse/core/util'
 import { ThemeOptions } from '@mui/material'
@@ -34,13 +30,6 @@ export interface MultiRenderArgsDeserialized
   sources: Source[]
 }
 
-export type {
-  RenderArgsSerialized,
-  RenderResults,
-  ResultsSerialized,
-  ResultsDeserialized,
-}
-
 export default abstract class WiggleBaseRenderer extends FeatureRendererType {
   supportsSVG = true
 
@@ -50,7 +39,7 @@ export default abstract class WiggleBaseRenderer extends FeatureRendererType {
     const [region] = regions
     const width = (region.end - region.start) / bpPerPx
 
-    // @ts-ignore
+    // @ts-expect-error
     const { reducedFeatures, ...rest } = await renderToAbstractCanvas(
       width,
       height,
@@ -73,9 +62,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,
@@ -91,3 +82,10 @@ export default abstract class WiggleBaseRenderer extends FeatureRendererType {
     props: T,
   ): Promise<Record<string, unknown> | void>
 }
+
+export {
+  type RenderArgsSerialized,
+  type RenderResults,
+  type ResultsDeserialized,
+  type ResultsSerialized,
+} from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType'

package/src/WiggleRPC/rpcMethods.ts

@@ -40,7 +40,7 @@ export class WiggleGetGlobalStats extends RpcMethodType {
     const { adapterConfig, sessionId } = deserializedArgs
     const { dataAdapter } = await getAdapter(pm, sessionId, adapterConfig)
 
-    // @ts-ignore
+    // @ts-expect-error
     return dataAdapter.getGlobalStats(deserializedArgs)
   }
 }
@@ -164,7 +164,7 @@ export class MultiWiggleGetSources extends RpcMethodType {
     const { regions, adapterConfig, sessionId } = deserializedArgs
     const { dataAdapter } = await getAdapter(pm, sessionId, adapterConfig)
 
-    // @ts-ignore
+    // @ts-expect-error
     return dataAdapter.getSources(regions, deserializedArgs)
   }
 }

package/src/WiggleRendering.test.js

@@ -15,7 +15,7 @@ test('one', async () => {
       config={{ type: 'DummyRenderer' }}
     />,
   )
-  const test = await getByTestId('wiggle-rendering-test')
+  const test = getByTestId('wiggle-rendering-test')
   expect(fireEvent.click(test)).toBeTruthy()
   expect(container.firstChild).toMatchSnapshot()
 })

package/src/XYPlotRenderer/XYPlotRenderer.test.ts

@@ -6,9 +6,9 @@ import configSchema from './configSchema'
 import XYPlotRenderer from './XYPlotRenderer'
 import ReactComponent from '../WiggleRendering'
 
-// @ts-ignore
+// @ts-expect-error
 global.nodeImage = Image
-// @ts-ignore
+// @ts-expect-error
 global.nodeCreateCanvas = createCanvas
 
 test('several features', async () => {
@@ -43,7 +43,7 @@ test('several features', async () => {
   }
 
   const res = await renderToAbstractCanvas(1000, 200, renderProps, ctx =>
-    // @ts-ignore
+    // @ts-expect-error
     renderer.draw(ctx, renderProps),
   )
   expect(res).toMatchSnapshot({

package/src/XYPlotRenderer/index.ts

@@ -2,7 +2,6 @@ import ReactComponent from '../WiggleRendering'
 import PluginManager from '@jbrowse/core/PluginManager'
 import XYPlotRenderer from './XYPlotRenderer'
 import configSchema from './configSchema'
-export { XYPlotRenderer, configSchema, ReactComponent }
 
 export default (pluginManager: PluginManager) => {
   pluginManager.addRendererType(
@@ -15,3 +14,7 @@ export default (pluginManager: PluginManager) => {
       }),
   )
 }
+
+export { default as XYPlotRenderer } from './XYPlotRenderer'
+export { default as ReactComponent } from '../WiggleRendering'
+export { default as configSchema } from './configSchema'

package/src/drawxy.ts

@@ -277,7 +277,7 @@ export function drawLine(
 
     ctx.beginPath()
     ctx.strokeStyle = c
-    const startPos = typeof lastVal !== 'undefined' ? lastVal : score
+    const startPos = lastVal !== undefined ? lastVal : score
     if (!region.reversed) {
       ctx.moveTo(leftPx, toY(startPos))
       ctx.lineTo(leftPx, toY(score))
@@ -341,13 +341,11 @@ export function drawDensity(
   })
 
   const scale2 = getScale({ ...scaleOpts, range: [0, height] })
-  let cb
-  if (color === '#f0f') {
-    cb = (_feature: Feature, score: number) => scale(score)
-  } else {
-    cb = (feature: Feature, score: number) =>
-      readConfObject(config, 'color', { feature, score })
-  }
+  const cb =
+    color === '#f0f'
+      ? (_: Feature, score: number) => scale(score)
+      : (feature: Feature, score: number) =>
+          readConfObject(config, 'color', { feature, score })
   const [niceMin, niceMax] = scale2.domain()
 
   let prevLeftPx = -Infinity

package/src/index.ts

@@ -9,7 +9,7 @@ import {
 
 // locals
 import WiggleBaseRenderer from './WiggleBaseRenderer'
-import WiggleRendering from './WiggleRendering'
+
 import BigWigAdapterF from './BigWigAdapter'
 import QuantitativeTrackF from './QuantitativeTrack'
 import MultiQuantitativeTrackF from './MultiQuantitativeTrack'
@@ -38,9 +38,8 @@ import {
 import {
   ReactComponent as LinearWiggleDisplayReactComponent,
   modelFactory as linearWiggleDisplayModelFactory,
-  Tooltip,
 } from './LinearWiggleDisplay'
-import { TooltipContentsComponent } from './Tooltip'
+
 import {
   ReactComponent as XYPlotRendererReactComponent,
   configSchema as xyPlotRendererConfigSchema,
@@ -120,12 +119,12 @@ export default class WigglePlugin extends Plugin {
 
 export * from './util'
 
+export { default as WiggleRendering } from './WiggleRendering'
 export {
-  LinearWiggleDisplayReactComponent,
   Tooltip,
-  WiggleRendering,
-  WiggleBaseRenderer,
-  linearWiggleDisplayModelFactory,
-}
+  ReactComponent as LinearWiggleDisplayReactComponent,
+  modelFactory as linearWiggleDisplayModelFactory,
+} from './LinearWiggleDisplay'
+export { type TooltipContentsComponent } from './Tooltip'
 
-export type { TooltipContentsComponent }
+export { default as WiggleBaseRenderer } from './WiggleBaseRenderer'

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/src/util.ts

@@ -168,11 +168,12 @@ export function getNiceDomain({
 }
 
 export function groupBy<T>(array: T[], predicate: (v: T) => string) {
-  return array.reduce((acc, value) => {
-    const entry = (acc[predicate(value)] ||= [])
+  const result = {} as { [key: string]: T[] }
+  for (const value of array) {
+    const entry = (result[predicate(value)] ||= [])
     entry.push(value)
-    return acc
-  }, {} as { [key: string]: T[] })
+  }
+  return result
 }
 
 export async function getStats(

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