@jbrowse/plugin-wiggle 2.2.0 → 2.2.2

package/esm/Tooltip.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Feature } from '@jbrowse/core/util';
-declare type Coord = [number, number];
-export declare type TooltipContentsComponent = React.ForwardRefExoticComponent<{
+type Coord = [number, number];
+export type TooltipContentsComponent = React.ForwardRefExoticComponent<{
     feature: Feature;
     model: any;
 } & React.RefAttributes<HTMLDivElement>>;

package/esm/WiggleRendering.js

@@ -16,7 +16,7 @@ function WiggleRendering(props) {
         const clientBp = region.start + bpPerPx * px;
         let featureUnderMouse;
         for (const feature of features.values()) {
-            // bpPerPx added to the end to accomodate "reduced features" (one feature per px)
+            // bpPerPx added to the end to accommodate "reduced features" (one feature per px)
             if (clientBp <= feature.get('end') + bpPerPx &&
                 clientBp >= feature.get('start')) {
                 featureUnderMouse = feature;

package/esm/WiggleRendering.js.map

@@ -1 +1 @@
-{"version":3,"file":"WiggleRendering.js","sourceRoot":"","sources":["../src/WiggleRendering.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAIrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,SAAS,eAAe,CAAC,KAUxB;IACC,MAAM,EACJ,OAAO,EACP,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,EACvB,WAAW,GAAG,GAAG,EAAE,GAAE,CAAC,EACtB,cAAc,GAAG,GAAG,EAAE,GAAE,CAAC,GAC1B,GAAG,KAAK,CAAA;IACT,MAAM,CAAC,MAAM,CAAC,GAAG,OAAO,CAAA;IACxB,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAExC,SAAS,oBAAoB,CAAC,YAAoB;QAChD,iCAAiC;QACjC,IAAI,MAAM,GAAG,CAAC,CAAA;QACd,IAAI,GAAG,CAAC,OAAO,EAAE;YACf,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,IAAI,CAAA;SAClD;QACD,MAAM,OAAO,GAAG,YAAY,GAAG,MAAM,CAAA;QACrC,MAAM,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAA;QACtD,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA;QAC5C,IAAI,iBAAiB,CAAA;QACrB,KAAK,MAAM,OAAO,IAAI,QAAQ,CAAC,MAAM,EAAE,EAAE;YACvC,iFAAiF;YACjF,IACE,QAAQ,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,OAAO;gBACxC,QAAQ,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAChC;gBACA,iBAAiB,GAAG,OAAO,CAAA;gBAC3B,MAAK;aACN;SACF;QACD,OAAO,iBAAiB,CAAA;IAC1B,CAAC;IACD,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,iBACI,uBAAuB,EACnC,WAAW,EAAE,KAAK,CAAC,EAAE,WACnB,OAAA,WAAW,CAAC,KAAK,EAAE,MAAA,oBAAoB,CAAC,KAAK,CAAC,OAAO,CAAC,0CAAE,EAAE,EAAE,CAAC,CAAA,EAAA,EAE/D,OAAO,EAAE,KAAK,CAAC,EAAE,WACf,OAAA,cAAc,CAAC,KAAK,EAAE,MAAA,oBAAoB,CAAC,KAAK,CAAC,OAAO,CAAC,0CAAE,EAAE,EAAE,CAAC,CAAA,EAAA,EAElE,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAC1C,KAAK,EAAE;YACL,QAAQ,EAAE,SAAS;YACnB,QAAQ,EAAE,UAAU;YACpB,MAAM;SACP;QAED,oBAAC,iBAAiB,OAAK,KAAK,GAAI,CAC5B,CACP,CAAA;AACH,CAAC;AAED,eAAe,QAAQ,CAAC,eAAe,CAAC,CAAA"}
+{"version":3,"file":"WiggleRendering.js","sourceRoot":"","sources":["../src/WiggleRendering.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAIrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,SAAS,eAAe,CAAC,KAUxB;IACC,MAAM,EACJ,OAAO,EACP,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,EACvB,WAAW,GAAG,GAAG,EAAE,GAAE,CAAC,EACtB,cAAc,GAAG,GAAG,EAAE,GAAE,CAAC,GAC1B,GAAG,KAAK,CAAA;IACT,MAAM,CAAC,MAAM,CAAC,GAAG,OAAO,CAAA;IACxB,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAExC,SAAS,oBAAoB,CAAC,YAAoB;QAChD,iCAAiC;QACjC,IAAI,MAAM,GAAG,CAAC,CAAA;QACd,IAAI,GAAG,CAAC,OAAO,EAAE;YACf,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,IAAI,CAAA;SAClD;QACD,MAAM,OAAO,GAAG,YAAY,GAAG,MAAM,CAAA;QACrC,MAAM,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAA;QACtD,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA;QAC5C,IAAI,iBAAiB,CAAA;QACrB,KAAK,MAAM,OAAO,IAAI,QAAQ,CAAC,MAAM,EAAE,EAAE;YACvC,kFAAkF;YAClF,IACE,QAAQ,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,OAAO;gBACxC,QAAQ,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAChC;gBACA,iBAAiB,GAAG,OAAO,CAAA;gBAC3B,MAAK;aACN;SACF;QACD,OAAO,iBAAiB,CAAA;IAC1B,CAAC;IACD,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,iBACI,uBAAuB,EACnC,WAAW,EAAE,KAAK,CAAC,EAAE,WACnB,OAAA,WAAW,CAAC,KAAK,EAAE,MAAA,oBAAoB,CAAC,KAAK,CAAC,OAAO,CAAC,0CAAE,EAAE,EAAE,CAAC,CAAA,EAAA,EAE/D,OAAO,EAAE,KAAK,CAAC,EAAE,WACf,OAAA,cAAc,CAAC,KAAK,EAAE,MAAA,oBAAoB,CAAC,KAAK,CAAC,OAAO,CAAC,0CAAE,EAAE,EAAE,CAAC,CAAA,EAAA,EAElE,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAC1C,KAAK,EAAE;YACL,QAAQ,EAAE,SAAS;YACnB,QAAQ,EAAE,UAAU;YACpB,MAAM;SACP;QAED,oBAAC,iBAAiB,OAAK,KAAK,GAAI,CAC5B,CACP,CAAA;AACH,CAAC;AAED,eAAe,QAAQ,CAAC,eAAe,CAAC,CAAA"}

package/esm/index.d.ts

@@ -328,7 +328,7 @@ export default class WigglePlugin extends Plugin {
                 renderProps(): any;
                 readonly hasResolution: boolean;
                 readonly hasGlobalStats: boolean;
-                readonly fillSetting: 2 | 1 | 0;
+                readonly fillSetting: 1 | 2 | 0;
             } & {
                 trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
                     label: string;
@@ -625,7 +625,7 @@ export default class WigglePlugin extends Plugin {
                 renderProps(): any;
                 readonly hasResolution: boolean;
                 readonly hasGlobalStats: boolean;
-                readonly fillSetting: 2 | 1 | 0;
+                readonly fillSetting: 1 | 2 | 0;
             } & {
                 trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
                     label: string;

package/esm/shared/SetMinMaxDialog.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+import { Dialog } from '@jbrowse/core/ui';
+export default function SetMinMaxDlg(props) {
+    const { model, handleClose } = props;
+    const { minScore, maxScore, scaleType } = model;
+    const [min, setMin] = useState(`${minScore !== Number.MIN_VALUE ? minScore : ''}`);
+    const [max, setMax] = useState(`${maxScore !== Number.MAX_VALUE ? maxScore : ''}`);
+    const ok = min !== '' && max !== '' && !Number.isNaN(+min) && !Number.isNaN(+max)
+        ? +max > +min
+        : true;
+    const logOk = scaleType === 'log' && min !== '' && !Number.isNaN(+min) ? +min > 0 : true;
+    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Set min/max score for track" },
+        React.createElement(DialogContent, null,
+            React.createElement(Typography, null, "Enter min/max score: "),
+            !ok ? (React.createElement(Typography, { color: "error" }, "Max is greater than or equal to min")) : null,
+            !logOk ? (React.createElement(Typography, { color: "error" }, "Min score should be greater than 0 for log scale")) : null,
+            React.createElement(TextField, { value: min, onChange: event => setMin(event.target.value), placeholder: "Enter min score" }),
+            React.createElement(TextField, { value: max, onChange: event => setMax(event.target.value), placeholder: "Enter max score" })),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { variant: "contained", color: "primary", type: "submit", style: { marginLeft: 20 }, disabled: !ok, onClick: () => {
+                    model.setMinScore(min !== '' && !Number.isNaN(+min) ? +min : undefined);
+                    model.setMaxScore(max !== '' && !Number.isNaN(+max) ? +max : undefined);
+                    handleClose();
+                } }, "Submit"))));
+}
+//# sourceMappingURL=SetMinMaxDialog.js.map

package/esm/shared/SetMinMaxDialog.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-wiggle",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "JBrowse 2 wiggle adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -27,7 +27,7 @@
     "build": "npm-run-all build:*",
     "test": "cd ../..; jest plugins/wiggle",
     "prepublishOnly": "yarn test",
-    "prepack": "yarn build; yarn useDist",
+    "prepack": "yarn build && yarn useDist",
     "postpack": "yarn useSrc",
     "useDist": "node ../../scripts/useDist.js",
     "useSrc": "node ../../scripts/useSrc.js",
@@ -70,5 +70,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "cf31db8d833117f8822510340664fb3f045975cb"
+  "gitHead": "abbc00e8feedbc58de84a7a3e735ec0224909b29"
 }

package/src/BigWigAdapter/__snapshots__/BigWigAdapter.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`adapter can fetch features from volvox.bw adapter can fetch stats from volvox.bw 1`] = `
-Object {
+{
   "basesCovered": 49984,
   "featureDensity": 0.00002000640204865557,
   "scoreMax": 38,
@@ -14,7 +14,7 @@ Object {
 `;
 
 exports[`adapter can fetch features from volvox.bw get local stats 1`] = `
-Object {
+{
   "basesCovered": 30100,
   "featureCount": 30000,
   "featureDensity": 0.9966777408637874,
@@ -28,7 +28,7 @@ Object {
 `;
 
 exports[`adapter can fetch features from volvox.bw get region stats 1`] = `
-Object {
+{
   "basesCovered": 30001,
   "featureCount": 30001,
   "featureDensity": 1,
@@ -42,71 +42,71 @@ Object {
 `;
 
 exports[`adapter can fetch features from volvox.bw test basic aspects of getfeatures 1`] = `
-Array [
-  Object {
+[
+  {
     "end": 1003,
     "refName": "ctgA",
     "score": 18,
     "start": 1002,
     "uniqueId": ":ctgA:1002-1003",
   },
-  Object {
+  {
     "end": 1004,
     "refName": "ctgA",
     "score": 18,
     "start": 1003,
     "uniqueId": ":ctgA:1003-1004",
   },
-  Object {
+  {
     "end": 1005,
     "refName": "ctgA",
     "score": 18,
     "start": 1004,
     "uniqueId": ":ctgA:1004-1005",
   },
-  Object {
+  {
     "end": 1006,
     "refName": "ctgA",
     "score": 19,
     "start": 1005,
     "uniqueId": ":ctgA:1005-1006",
   },
-  Object {
+  {
     "end": 1007,
     "refName": "ctgA",
     "score": 20,
     "start": 1006,
     "uniqueId": ":ctgA:1006-1007",
   },
-  Object {
+  {
     "end": 1008,
     "refName": "ctgA",
     "score": 20,
     "start": 1007,
     "uniqueId": ":ctgA:1007-1008",
   },
-  Object {
+  {
     "end": 1009,
     "refName": "ctgA",
     "score": 20,
     "start": 1008,
     "uniqueId": ":ctgA:1008-1009",
   },
-  Object {
+  {
     "end": 1010,
     "refName": "ctgA",
     "score": 20,
     "start": 1009,
     "uniqueId": ":ctgA:1009-1010",
   },
-  Object {
+  {
     "end": 1011,
     "refName": "ctgA",
     "score": 20,
     "start": 1010,
     "uniqueId": ":ctgA:1010-1011",
   },
-  Object {
+  {
     "end": 1012,
     "refName": "ctgA",
     "score": 19,

package/src/DensityRenderer/__snapshots__/DensityRenderer.test.js.snap

@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`inverted mode and reversed 1`] = `
-Object {
+{
   "imageData": Any<Object>,
-  "reducedFeatures": Array [
-    Object {
+  "reducedFeatures": [
+    {
       "end": 100,
       "score": 1,
       "start": 1,
       "uniqueId": "t1",
     },
-    Object {
+    {
       "end": 200,
       "score": 2,
       "start": 101,

package/src/LinearWiggleDisplay/components/SetColorDialog.tsx

@@ -2,28 +2,15 @@ import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import {
   Button,
-  Dialog,
   DialogContent,
   DialogActions,
-  DialogTitle,
   FormControlLabel,
-  IconButton,
   Radio,
   Typography,
 } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import CloseIcon from '@mui/icons-material/Close'
+import { Dialog } from '@jbrowse/core/ui'
 import { ColorPicker } from '@jbrowse/core/ui/ColorPicker'
 
-const useStyles = makeStyles()(theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-}))
-
 function SetColorDialog({
   model,
   handleClose,
@@ -38,23 +25,16 @@ function SetColorDialog({
   }
   handleClose: () => void
 }) {
-  const { classes } = useStyles()
   const [posneg, setPosNeg] = useState(false)
 
   return (
-    <Dialog open onClose={handleClose}>
-      <DialogTitle>
-        Select either an overall color, or the positive/negative colors. Note
-        that density renderers only work properly with positive/negative colors
-        <IconButton
-          aria-label="close"
-          className={classes.closeButton}
-          onClick={handleClose}
-        >
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
+    <Dialog open onClose={handleClose} title="Set color">
       <DialogContent>
+        <Typography>
+          Select either an overall color, or the positive/negative colors. Note
+          that density renderers only work properly with positive/negative
+          colors
+        </Typography>
         <FormControlLabel
           checked={!posneg}
           onClick={() => setPosNeg(false)}

package/src/LinearWiggleDisplay/models/model.tsx

@@ -10,6 +10,7 @@ import {
   getSession,
   getContainingView,
   isSelectionContainer,
+  Feature,
 } from '@jbrowse/core/util'
 import {
   BaseLinearDisplay,
@@ -19,7 +20,6 @@ import { when } from 'mobx'
 import { isAlive, types, Instance } from 'mobx-state-tree'
 import PluginManager from '@jbrowse/core/PluginManager'
 
-import { Feature } from '@jbrowse/core/util/simpleFeature'
 import { axisPropsFromTickScale } from 'react-d3-axis-mod'
 import {
   getNiceDomain,
@@ -32,7 +32,7 @@ import {
 import Tooltip from '../components/Tooltip'
 import { YScaleBar } from '../components/WiggleDisplayComponent'
 
-const SetMinMaxDlg = lazy(() => import('../components/SetMinMaxDialog'))
+const SetMinMaxDlg = lazy(() => import('../../shared/SetMinMaxDialog'))
 const SetColorDlg = lazy(() => import('../components/SetColorDialog'))
 
 // using a map because it preserves order
@@ -143,8 +143,8 @@ function stateModelFactory(
           Math.abs(self.stats.scoreMin - scoreMin) > EPSILON
         ) {
           self.stats = { scoreMin, scoreMax }
-          self.statsReady = true
         }
+        self.statsReady = true
       },
       /**
        * #action
@@ -491,8 +491,8 @@ function stateModelFactory(
        * #getter
        */
       get adapterCapabilities() {
-        return pluginManager.getAdapterType(self.adapterTypeName)
-          .adapterCapabilities
+        const type = self.adapterTypeName
+        return pluginManager.getAdapterType(type).adapterCapabilities
       },
     }))
     .views(self => {

package/src/MultiLinearWiggleDisplay/components/DraggableDialog.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import {
+  Dialog,
+  DialogTitle,
+  IconButton,
+  Divider,
+  DialogProps,
+  Paper,
+  PaperProps,
+  ScopedCssBaseline,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+import Draggable from 'react-draggable'
+
+// icons
+import CloseIcon from '@mui/icons-material/Close'
+
+const useStyles = makeStyles()(theme => ({
+  closeButton: {
+    position: 'absolute',
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+    color: theme.palette.grey[500],
+  },
+}))
+
+// draggable dialog demo https://mui.com/material-ui/react-dialog/#draggable-dialog
+function PaperComponent(props: PaperProps) {
+  return (
+    <Draggable
+      handle="#draggable-dialog-title"
+      cancel={'[class*="MuiDialogContent-root"]'}
+    >
+      <Paper {...props} />
+    </Draggable>
+  )
+}
+
+function DraggableDialog(props: DialogProps & { title: string }) {
+  const { classes } = useStyles()
+  const { title, children, onClose } = props
+
+  return (
+    <Dialog
+      {...props}
+      PaperComponent={PaperComponent}
+      aria-labelledby="draggable-dialog-title" // this area is important for the draggable functionality
+    >
+      <ScopedCssBaseline>
+        <DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
+          {title}
+          {onClose ? (
+            <IconButton
+              className={classes.closeButton}
+              onClick={() => {
+                // @ts-ignore
+                onClose()
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          ) : null}
+        </DialogTitle>
+        <Divider />
+        {children}
+      </ScopedCssBaseline>
+    </Dialog>
+  )
+}
+export default observer(DraggableDialog)

package/src/MultiLinearWiggleDisplay/components/SetColorDialog.tsx

@@ -1,14 +1,5 @@
 import React, { useState } from 'react'
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogActions,
-  DialogTitle,
-  IconButton,
-  Paper,
-  PaperProps,
-} from '@mui/material'
+import { Button, DialogContent, DialogActions } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import {
   getStr,
@@ -17,45 +8,27 @@ import {
   useLocalStorage,
 } from '@jbrowse/core/util'
 import { DataGrid, GridCellParams } from '@mui/x-data-grid'
-import Draggable from 'react-draggable'
 import clone from 'clone'
 
 // locals
+import DraggableDialog from './DraggableDialog'
 import ColorPicker, { ColorPopover } from '@jbrowse/core/ui/ColorPicker'
 import { UriLink } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
 import { moveUp, moveDown } from './util'
 import { Source } from '../../util'
 
 // icons
-import CloseIcon from '@mui/icons-material/Close'
 import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp'
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
 
-const useStyles = makeStyles()(theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
+const useStyles = makeStyles()({
   content: {
     minWidth: 800,
   },
-}))
+})
 
-// draggable dialog demo https://mui.com/material-ui/react-dialog/#draggable-dialog
-function PaperComponent(props: PaperProps) {
-  return (
-    <Draggable
-      handle="#draggable-dialog-title"
-      cancel={'[class*="MuiDialogContent-root"]'}
-    >
-      <Paper {...props} />
-    </Draggable>
-  )
-}
 export default function SetColorDialog({
   model,
   handleClose,
@@ -72,19 +45,12 @@ export default function SetColorDialog({
   const [currLayout, setCurrLayout] = useState(clone(sources || []))
   const [showTips, setShowTips] = useLocalStorage('multiwiggle-showTips', true)
   return (
-    <Dialog
-      PaperComponent={PaperComponent}
+    <DraggableDialog
       open
       onClose={handleClose}
       maxWidth="xl"
-      aria-labelledby="draggable-dialog-title" // this area is important for the draggable functionality
+      title={'Multi-wiggle color/arrangement editor'}
     >
-      <DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
-        Multi-wiggle color/arrangement editor{' '}
-        <IconButton className={classes.closeButton} onClick={handleClose}>
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
       <DialogContent className={classes.content}>
         <Button
           variant="contained"
@@ -159,7 +125,7 @@ export default function SetColorDialog({
           Submit
         </Button>
       </DialogActions>
-    </Dialog>
+    </DraggableDialog>
   )
 }
 

package/src/MultiLinearWiggleDisplay/models/model.tsx

@@ -42,7 +42,7 @@ const randomColor = () =>
   '#000000'.replace(/0/g, () => (~~(Math.random() * 16)).toString(16))
 
 // lazt components
-const SetMinMaxDlg = lazy(() => import('../components/SetMinMaxDialog'))
+const SetMinMaxDlg = lazy(() => import('../../shared/SetMinMaxDialog'))
 const SetColorDlg = lazy(() => import('../components/SetColorDialog'))
 
 // using a map because it preserves order

package/src/WiggleRendering.tsx

@@ -40,7 +40,7 @@ function WiggleRendering(props: {
     const clientBp = region.start + bpPerPx * px
     let featureUnderMouse
     for (const feature of features.values()) {
-      // bpPerPx added to the end to accomodate "reduced features" (one feature per px)
+      // bpPerPx added to the end to accommodate "reduced features" (one feature per px)
       if (
         clientBp <= feature.get('end') + bpPerPx &&
         clientBp >= feature.get('start')

package/src/XYPlotRenderer/__snapshots__/XYPlotRenderer.test.js.snap

@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`several features 1`] = `
-Object {
+{
   "imageData": Any<Object>,
-  "reducedFeatures": Array [
-    Object {
+  "reducedFeatures": [
+    {
       "end": 100,
       "score": 1,
       "start": 1,
       "uniqueId": "t1",
     },
-    Object {
+    {
       "end": 200,
       "score": 2,
       "start": 101,

package/src/__snapshots__/index.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`plugin in a stock JBrowse 1`] = `Object {}`;
+exports[`plugin in a stock JBrowse 1`] = `{}`;

package/src/shared/SetMinMaxDialog.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { Dialog } from '@jbrowse/core/ui'
+
+export default function SetMinMaxDlg(props: {
+  model: {
+    minScore: number
+    maxScore: number
+    scaleType: string
+    setMinScore: Function
+    setMaxScore: Function
+  }
+  handleClose: () => void
+}) {
+  const { model, handleClose } = props
+  const { minScore, maxScore, scaleType } = model
+
+  const [min, setMin] = useState(
+    `${minScore !== Number.MIN_VALUE ? minScore : ''}`,
+  )
+  const [max, setMax] = useState(
+    `${maxScore !== Number.MAX_VALUE ? maxScore : ''}`,
+  )
+
+  const ok =
+    min !== '' && max !== '' && !Number.isNaN(+min) && !Number.isNaN(+max)
+      ? +max > +min
+      : true
+
+  const logOk =
+    scaleType === 'log' && min !== '' && !Number.isNaN(+min) ? +min > 0 : true
+
+  return (
+    <Dialog open onClose={handleClose} title="Set min/max score for track">
+      <DialogContent>
+        <Typography>Enter min/max score: </Typography>
+        {!ok ? (
+          <Typography color="error">
+            Max is greater than or equal to min
+          </Typography>
+        ) : null}
+
+        {!logOk ? (
+          <Typography color="error">
+            Min score should be greater than 0 for log scale
+          </Typography>
+        ) : null}
+
+        <TextField
+          value={min}
+          onChange={event => setMin(event.target.value)}
+          placeholder="Enter min score"
+        />
+        <TextField
+          value={max}
+          onChange={event => setMax(event.target.value)}
+          placeholder="Enter max score"
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="primary"
+          type="submit"
+          style={{ marginLeft: 20 }}
+          disabled={!ok}
+          onClick={() => {
+            model.setMinScore(
+              min !== '' && !Number.isNaN(+min) ? +min : undefined,
+            )
+            model.setMaxScore(
+              max !== '' && !Number.isNaN(+max) ? +max : undefined,
+            )
+            handleClose()
+          }}
+        >
+          Submit
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}