@jbrowse/plugin-wiggle 1.7.10 → 2.0.1

package/esm/index.js

@@ -0,0 +1,115 @@
+import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType';
+import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType';
+import Plugin from '@jbrowse/core/Plugin';
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { createBaseTrackConfig, createBaseTrackModel, } from '@jbrowse/core/pluggableElementTypes/models';
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
+import WiggleBaseRenderer from './WiggleBaseRenderer';
+import WiggleRendering from './WiggleRendering';
+import { configSchema as bigWigAdapterConfigSchema } from './BigWigAdapter';
+import DensityRenderer, { configSchema as densityRendererConfigSchema, ReactComponent as DensityRendererReactComponent, } from './DensityRenderer';
+import * as utils from './util';
+import { configSchemaFactory as linearWiggleDisplayConfigSchemaFactory, modelFactory as linearWiggleDisplayModelFactory, ReactComponent as LinearWiggleDisplayReactComponent, YSCALEBAR_LABEL_OFFSET, } from './LinearWiggleDisplay';
+import XYPlotRenderer, { configSchema as xyPlotRendererConfigSchema, ReactComponent as XYPlotRendererReactComponent, } from './XYPlotRenderer';
+import LinePlotRenderer, { configSchema as linePlotRendererConfigSchema, ReactComponent as LinePlotRendererReactComponent, } from './LinePlotRenderer';
+import { WiggleGetGlobalStats, WiggleGetMultiRegionStats, } from './WiggleRPC/rpcMethods';
+import { getFileName, } from '@jbrowse/core/util/tracks';
+export default class WigglePlugin extends Plugin {
+    constructor() {
+        super(...arguments);
+        this.name = 'WigglePlugin';
+        this.exports = {
+            LinearWiggleDisplayReactComponent,
+            XYPlotRendererReactComponent,
+            XYPlotRenderer,
+            xyPlotRendererConfigSchema,
+            utils,
+            WiggleBaseRenderer,
+            linearWiggleDisplayModelFactory,
+        };
+    }
+    install(pluginManager) {
+        pluginManager.addTrackType(() => {
+            const configSchema = ConfigurationSchema('QuantitativeTrack', {}, { baseConfiguration: createBaseTrackConfig(pluginManager) });
+            return new TrackType({
+                name: 'QuantitativeTrack',
+                configSchema,
+                stateModel: createBaseTrackModel(pluginManager, 'QuantitativeTrack', configSchema),
+            });
+        });
+        pluginManager.addDisplayType(() => {
+            const configSchema = linearWiggleDisplayConfigSchemaFactory(pluginManager);
+            return new DisplayType({
+                name: 'LinearWiggleDisplay',
+                configSchema,
+                stateModel: linearWiggleDisplayModelFactory(pluginManager, configSchema),
+                trackType: 'QuantitativeTrack',
+                viewType: 'LinearGenomeView',
+                ReactComponent: LinearWiggleDisplayReactComponent,
+            });
+        });
+        pluginManager.addAdapterType(() => new AdapterType({
+            name: 'BigWigAdapter',
+            configSchema: bigWigAdapterConfigSchema,
+            adapterCapabilities: [
+                'hasResolution',
+                'hasLocalStats',
+                'hasGlobalStats',
+            ],
+            getAdapterClass: () => import('./BigWigAdapter/BigWigAdapter').then(r => r.default),
+        }));
+        pluginManager.addToExtensionPoint('Core-guessAdapterForLocation', (adapterGuesser) => {
+            return (file, index, adapterHint) => {
+                const regexGuess = /\.(bw|bigwig)$/i;
+                const adapterName = 'BigWigAdapter';
+                const fileName = getFileName(file);
+                const obj = {
+                    type: adapterName,
+                    bigWigLocation: file,
+                };
+                if (regexGuess.test(fileName) && !adapterHint) {
+                    return obj;
+                }
+                else if (adapterHint === adapterName) {
+                    return obj;
+                }
+                return adapterGuesser(file, index, adapterHint);
+            };
+        });
+        pluginManager.addToExtensionPoint('Core-guessTrackTypeForLocation', (trackTypeGuesser) => {
+            return (adapterName) => {
+                if (adapterName === 'BigWigAdapter') {
+                    return 'QuantitativeTrack';
+                }
+                return trackTypeGuesser(adapterName);
+            };
+        });
+        pluginManager.addRendererType(() => new DensityRenderer({
+            name: 'DensityRenderer',
+            ReactComponent: DensityRendererReactComponent,
+            configSchema: densityRendererConfigSchema,
+            pluginManager,
+        }));
+        pluginManager.addRendererType(() => new LinePlotRenderer({
+            name: 'LinePlotRenderer',
+            ReactComponent: LinePlotRendererReactComponent,
+            configSchema: linePlotRendererConfigSchema,
+            pluginManager,
+        }));
+        pluginManager.addRendererType(() => new XYPlotRenderer({
+            name: 'XYPlotRenderer',
+            ReactComponent: XYPlotRendererReactComponent,
+            configSchema: xyPlotRendererConfigSchema,
+            pluginManager,
+        }));
+        pluginManager.addRpcMethod(() => new WiggleGetGlobalStats(pluginManager));
+        pluginManager.addRpcMethod(() => new WiggleGetMultiRegionStats(pluginManager));
+    }
+}
+export * from './util';
+export { WiggleRendering };
+export { WiggleBaseRenderer };
+export { LinearWiggleDisplayReactComponent, linearWiggleDisplayModelFactory };
+export { Tooltip } from './LinearWiggleDisplay/components/Tooltip';
+export { YSCALEBAR_LABEL_OFFSET };
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/esm/util.d.ts

@@ -0,0 +1,41 @@
+export interface ScaleOpts {
+    domain: number[];
+    range: number[];
+    scaleType: string;
+    pivotValue?: number;
+    inverted: boolean;
+}
+/**
+ * produces a d3-scale from arguments. applies a "nice domain" adjustment
+ *
+ * @param object - containing attributes
+ *   - domain [min,max]
+ *   - range [min,max]
+ *   - bounds [min,max]
+ *   - scaleType (linear or log)
+ *   - pivotValue (number)
+ *   - inverted (boolean)
+ */
+export declare function getScale({ domain, range, scaleType, pivotValue, inverted, }: ScaleOpts): import("d3-scale").ScaleLinear<number, number> | import("d3-scale").ScaleQuantize<number>;
+/**
+ * gets the origin for drawing the graph. for linear this is 0, for log this is arbitrarily set to log(1)==0
+ *
+ * @param scaleType -
+ */
+export declare function getOrigin(scaleType: string): 1 | 0;
+/**
+ * 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
+ *
+ * @param object - containing attributes
+ *   - domain [min,max]
+ *   - bounds [min,max]
+ *   - mean
+ *   - stddev
+ *   - scaleType (linear or log)
+ */
+export declare function getNiceDomain({ scaleType, domain, bounds, }: {
+    scaleType: string;
+    domain: number[];
+    bounds: number[];
+}): [number, number];

package/esm/util.js

@@ -0,0 +1,123 @@
+import { scaleLinear, scaleLog, scaleQuantize } from 'd3-scale';
+/**
+ * produces a d3-scale from arguments. applies a "nice domain" adjustment
+ *
+ * @param object - containing attributes
+ *   - domain [min,max]
+ *   - range [min,max]
+ *   - bounds [min,max]
+ *   - scaleType (linear or log)
+ *   - pivotValue (number)
+ *   - inverted (boolean)
+ */
+export function getScale({ domain = [], range = [], scaleType, pivotValue, inverted, }) {
+    let scale;
+    const [min, max] = domain;
+    if (min === undefined || max === undefined) {
+        throw new Error('invalid domain');
+    }
+    if (scaleType === 'linear') {
+        scale = scaleLinear();
+    }
+    else if (scaleType === 'log') {
+        scale = scaleLog();
+        scale.base(2);
+    }
+    else if (scaleType === 'quantize') {
+        scale = scaleQuantize();
+    }
+    else {
+        throw new Error('undefined scaleType');
+    }
+    scale.domain(pivotValue !== undefined ? [min, pivotValue, max] : [min, max]);
+    scale.nice();
+    const [rangeMin, rangeMax] = range;
+    if (rangeMin === undefined || rangeMax === undefined) {
+        throw new Error('invalid range');
+    }
+    scale.range(inverted ? range.slice().reverse() : range);
+    return scale;
+}
+/**
+ * gets the origin for drawing the graph. for linear this is 0, for log this is arbitrarily set to log(1)==0
+ *
+ * @param scaleType -
+ */
+export function getOrigin(scaleType /* , pivot, stats */) {
+    // if (pivot) {
+    //   if (pivot === 'mean') {
+    //     return stats.scoreMean || 0
+    //   }
+    //   if (pivot === 'zero') {
+    //     return 0
+    //   }
+    //   return parseFloat()
+    // }
+    // if (scaleType === 'z_score') {
+    //   return stats.scoreMean || 0
+    // }
+    if (scaleType === 'log') {
+        return 1;
+    }
+    return 0;
+}
+/**
+ * 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
+ *
+ * @param object - containing attributes
+ *   - domain [min,max]
+ *   - bounds [min,max]
+ *   - mean
+ *   - stddev
+ *   - scaleType (linear or log)
+ */
+export function getNiceDomain({ scaleType, domain, bounds, }) {
+    const [minScore, maxScore] = bounds;
+    let [min, max] = domain;
+    if (scaleType === 'linear') {
+        if (max < 0) {
+            max = 0;
+        }
+        if (min > 0) {
+            min = 0;
+        }
+    }
+    if (scaleType === 'log') {
+        // if the min is 0, assume that it's just something
+        // with no read coverage and that we should ignore it in calculations
+        // if it's greater than 1 pin to 1 for the full range also
+        // otherwise, we may see bigwigs with fractional values
+        if (min === 0 || min > 1) {
+            min = 1;
+        }
+    }
+    if (min === undefined || max === undefined) {
+        throw new Error('invalid domain supplied to stats function');
+    }
+    if (minScore !== undefined && minScore !== Number.MIN_VALUE) {
+        min = minScore;
+    }
+    if (maxScore !== undefined && maxScore !== Number.MAX_VALUE) {
+        max = maxScore;
+    }
+    const getScaleType = (type) => {
+        if (type === 'linear') {
+            return scaleLinear();
+        }
+        if (type === 'log') {
+            const scale = scaleLog();
+            scale.base(2);
+            return scale;
+        }
+        if (type === 'quantize') {
+            return scaleQuantize();
+        }
+        throw new Error(`undefined scaleType ${type}`);
+    };
+    const scale = getScaleType(scaleType);
+    scale.domain([min, max]);
+    scale.nice();
+    return scale.domain();
+}
+//# sourceMappingURL=util.js.map

package/esm/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-wiggle",
-  "version": "1.7.10",
+  "version": "2.0.1",
   "description": "JBrowse 2 wiggle adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -20,42 +20,50 @@
   "main": "dist/index.js",
   "files": [
     "dist",
-    "src"
+    "src",
+    "esm"
   ],
   "scripts": {
-    "build": "babel src --root-mode upward --out-dir dist --extensions .ts,.js,.tsx,.jsx",
-    "postbuild": "tsc --build tsconfig.build.json",
+    "build": "npm-run-all build:*",
     "test": "cd ../..; jest plugins/wiggle",
     "prepublishOnly": "yarn test",
     "prepack": "yarn build; yarn useDist",
     "postpack": "yarn useSrc",
     "useDist": "node ../../scripts/useDist.js",
-    "useSrc": "node ../../scripts/useSrc.js"
+    "useSrc": "node ../../scripts/useSrc.js",
+    "prebuild": "npm run clean",
+    "build:esm": "tsc --build tsconfig.build.esm.json",
+    "build:es5": "tsc --build tsconfig.build.es5.json",
+    "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
     "@gmod/bbi": "^1.0.35",
-    "@material-ui/icons": "^4.11.2",
+    "@mui/icons-material": "^5.0.2",
     "@popperjs/core": "^2.11.0",
     "color": "^3.1.1",
-    "d3-scale": "^3.2.3",
+    "d3-scale": "^3.0.2",
     "react-color": "^2.19.3",
     "react-d3-axis-mod": "^0.1.3",
     "react-popper": "^2.0.0"
   },
   "peerDependencies": {
-    "@jbrowse/core": "^1.0.0",
-    "@jbrowse/plugin-linear-genome-view": "^1.0.0",
-    "@material-ui/core": "^4.12.2",
-    "mobx": "^5.0.0",
-    "mobx-react": "^6.0.0",
-    "mobx-state-tree": "3.14.1",
+    "@jbrowse/core": "^2.0.0",
+    "@jbrowse/plugin-linear-genome-view": "^2.0.0",
+    "@mui/material": "^5.0.0",
+    "mobx": "^6.0.0",
+    "mobx-react": "^7.0.0",
+    "mobx-state-tree": "^5.0.0",
     "prop-types": "^15.0.0",
     "react": ">=16.8.0",
-    "rxjs": "^6.0.0"
+    "rxjs": "^6.0.0",
+    "tss-react": "^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "02d8c1e88e5603ea5855faed4ccb814e28071b32"
+  "distModule": "esm/index.js",
+  "srcModule": "src/index.ts",
+  "module": "esm/index.js",
+  "gitHead": "ed935bf5612af3818abdc8ef52d100d5d81d33a2"
 }

package/src/DensityRenderer/DensityRenderer.test.js

@@ -2,6 +2,11 @@ import SimpleFeature from '@jbrowse/core/util/simpleFeature'
 import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
 import DensityRenderer, { configSchema, ReactComponent } from '.'
 
+import { Image, createCanvas } from 'canvas'
+
+global.nodeImage = Image
+global.nodeCreateCanvas = createCanvas
+
 const pluginManager = {}
 const renderer = new DensityRenderer({
   name: 'DensityRenderer',

package/src/DensityRenderer/index.ts

@@ -14,7 +14,7 @@ import WiggleBaseRenderer, {
 export { default as ReactComponent } from '../WiggleRendering'
 
 export default class DensityRenderer extends WiggleBaseRenderer {
-  draw(
+  async draw(
     ctx: CanvasRenderingContext2D,
     props: RenderArgsDeserializedWithFeatures,
   ) {

package/src/LinePlotRenderer/LinePlotRenderer.js

@@ -5,7 +5,7 @@ import WiggleBaseRenderer from '../WiggleBaseRenderer'
 import { YSCALEBAR_LABEL_OFFSET } from '../LinearWiggleDisplay/models/model'
 
 export default class LinePlotRenderer extends WiggleBaseRenderer {
-  draw(ctx, props) {
+  async draw(ctx, props) {
     const {
       features,
       regions,

package/src/LinePlotRenderer/index.js

@@ -6,6 +6,12 @@ export { default } from './LinePlotRenderer'
 
 export const configSchema = ConfigurationSchema(
   'LinePlotRenderer',
-  {},
+  {
+    displayCrossHatches: {
+      type: 'boolean',
+      description: 'choose to draw cross hatches (sideways lines)',
+      defaultValue: false,
+    },
+  },
   { baseConfiguration: ConfigSchema, explicitlyTyped: true },
 )

package/src/LinearWiggleDisplay/components/SetColorDialog.tsx

@@ -5,16 +5,16 @@ import {
   DialogContent,
   DialogActions,
   DialogTitle,
-  IconButton,
-  Typography,
   FormControlLabel,
+  IconButton,
   Radio,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
 import { CompactPicker, Color, RGBColor } from 'react-color'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -45,7 +45,7 @@ export default function SetColorDialog({
   }
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [posneg, setPosNeg] = useState(false)
 
   return (
@@ -85,6 +85,7 @@ export default function SetColorDialog({
               }}
             />
             <Typography>Negative color</Typography>
+
             <CompactPicker
               onChange={event => {
                 model.setNegColor(serialize(event.rgb))
@@ -96,9 +97,7 @@ export default function SetColorDialog({
           <>
             <Typography>Overall color</Typography>
             <CompactPicker
-              onChange={event => {
-                model.setColor(serialize(event.rgb))
-              }}
+              onChange={event => model.setColor(serialize(event.rgb))}
             />
           </>
         )}
@@ -120,9 +119,7 @@ export default function SetColorDialog({
           variant="contained"
           color="primary"
           type="submit"
-          onClick={() => {
-            handleClose()
-          }}
+          onClick={() => handleClose()}
         >
           Submit
         </Button>

package/src/LinearWiggleDisplay/components/SetMinMaxDialog.tsx

@@ -1,15 +1,17 @@
 import React, { useState } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import Button from '@material-ui/core/Button'
-import TextField from '@material-ui/core/TextField'
-import Typography from '@material-ui/core/Typography'
-import Dialog from '@material-ui/core/Dialog'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import IconButton from '@material-ui/core/IconButton'
-import CloseIcon from '@material-ui/icons/Close'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {},
   closeButton: {
     position: 'absolute',
@@ -29,7 +31,7 @@ export default function SetMinMaxDlg(props: {
   }
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { model, handleClose } = props
   const { minScore, maxScore, scaleType } = model
 

package/src/LinearWiggleDisplay/components/Tooltip.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from 'react'
 import { observer } from 'mobx-react'
-import { makeStyles, alpha, Portal } from '@material-ui/core'
+import { alpha, Portal } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { Feature } from '@jbrowse/core/util/simpleFeature'
 
 // locals
@@ -18,7 +19,7 @@ function round(value: number) {
 
 const en = (n: number) => n.toLocaleString('en-US')
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   // these styles come from
   // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
   tooltip: {
@@ -99,7 +100,7 @@ const Tooltip = observer(
     const { featureUnderMouse } = model
     const [width, setWidth] = useState(0)
     const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null)
-    const classes = useStyles()
+    const { classes } = useStyles()
 
     // must be memoized a la https://github.com/popperjs/react-popper/issues/391
     const virtElement = useMemo(

package/src/LinearWiggleDisplay/components/WiggleDisplayComponent.tsx

@@ -5,20 +5,25 @@ import {
   getContainingTrack,
 } from '@jbrowse/core/util'
 import { getConf } from '@jbrowse/core/configuration'
-import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view'
+import {
+  BaseLinearDisplayComponent,
+  LinearGenomeViewModel,
+} from '@jbrowse/plugin-linear-genome-view'
 import { observer } from 'mobx-react'
 import { WiggleDisplayModel } from '../models/model'
 import YScaleBar from './YScaleBar'
 
+type LGV = LinearGenomeViewModel
+
 const LinearWiggleDisplay = observer((props: { model: WiggleDisplayModel }) => {
   const { model } = props
   const { stats, height, needsScalebar } = model
 
-  // @ts-ignore
-  const { trackLabels } = getContainingView(model)
+  const { trackLabels } = getContainingView(model) as LGV
+  const track = getContainingTrack(model)
   const left =
     trackLabels === 'overlapping'
-      ? measureText(getConf(getContainingTrack(model), 'name'), 12.8) + 100
+      ? measureText(getConf(track, 'name'), 12.8) + 100
       : 50
   return (
     <div>