@jbrowse/plugin-wiggle 2.6.3 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/dist/CreateMultiWiggleExtension/index.js +14 -11
  2. package/dist/LinearWiggleDisplay/components/SetColorDialog.d.ts +6 -7
  3. package/dist/LinearWiggleDisplay/components/SetColorDialog.js +3 -3
  4. package/dist/LinearWiggleDisplay/components/Tooltip.js +1 -1
  5. package/dist/MultiLinearWiggleDisplay/components/DraggableDialog.d.ts +3 -4
  6. package/dist/MultiLinearWiggleDisplay/components/DraggableDialog.js +3 -3
  7. package/dist/MultiLinearWiggleDisplay/components/SetColorDialog.js +7 -1
  8. package/dist/MultiLinearWiggleDisplay/components/Tooltip.d.ts +3 -2
  9. package/dist/MultiLinearWiggleDisplay/components/Tooltip.js +1 -1
  10. package/dist/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.d.ts +2 -3
  11. package/dist/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.js +2 -4
  12. package/dist/MultiLinearWiggleDisplay/components/util.js +2 -4
  13. package/dist/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.js +0 -25
  14. package/dist/MultiWiggleAddTrackWidget/AddTrackWorkflow.js +16 -12
  15. package/dist/MultiWiggleRendering.d.ts +3 -4
  16. package/dist/MultiWiggleRendering.js +7 -5
  17. package/dist/MultiXYPlotRenderer/MultiXYPlotRenderer.js +0 -25
  18. package/dist/Tooltip.d.ts +5 -6
  19. package/dist/Tooltip.js +3 -3
  20. package/dist/WiggleRendering.d.ts +3 -4
  21. package/dist/WiggleRendering.js +3 -3
  22. package/dist/XYPlotRenderer/XYPlotRenderer.js +0 -25
  23. package/dist/drawxy.d.ts +0 -1
  24. package/dist/drawxy.js +17 -6
  25. package/dist/shared/YScaleBar.d.ts +2 -2
  26. package/dist/shared/YScaleBar.js +2 -1
  27. package/dist/shared/modelShared.d.ts +4 -1
  28. package/esm/CreateMultiWiggleExtension/index.js +14 -11
  29. package/esm/LinearWiggleDisplay/components/SetColorDialog.d.ts +6 -7
  30. package/esm/LinearWiggleDisplay/components/SetColorDialog.js +3 -3
  31. package/esm/LinearWiggleDisplay/components/Tooltip.js +1 -1
  32. package/esm/MultiLinearWiggleDisplay/components/DraggableDialog.d.ts +3 -4
  33. package/esm/MultiLinearWiggleDisplay/components/DraggableDialog.js +3 -3
  34. package/esm/MultiLinearWiggleDisplay/components/SetColorDialog.js +7 -1
  35. package/esm/MultiLinearWiggleDisplay/components/Tooltip.d.ts +3 -2
  36. package/esm/MultiLinearWiggleDisplay/components/Tooltip.js +1 -1
  37. package/esm/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.d.ts +2 -3
  38. package/esm/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.js +2 -2
  39. package/esm/MultiLinearWiggleDisplay/components/util.js +2 -4
  40. package/esm/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.js +0 -2
  41. package/esm/MultiWiggleAddTrackWidget/AddTrackWorkflow.js +17 -13
  42. package/esm/MultiWiggleRendering.d.ts +3 -4
  43. package/esm/MultiWiggleRendering.js +7 -5
  44. package/esm/MultiXYPlotRenderer/MultiXYPlotRenderer.js +0 -2
  45. package/esm/Tooltip.d.ts +5 -6
  46. package/esm/Tooltip.js +3 -3
  47. package/esm/WiggleRendering.d.ts +3 -4
  48. package/esm/WiggleRendering.js +3 -3
  49. package/esm/XYPlotRenderer/XYPlotRenderer.js +0 -2
  50. package/esm/drawxy.d.ts +0 -1
  51. package/esm/drawxy.js +17 -6
  52. package/esm/shared/YScaleBar.d.ts +2 -2
  53. package/esm/shared/YScaleBar.js +2 -1
  54. package/esm/shared/modelShared.d.ts +4 -1
  55. package/package.json +3 -4
@@ -23,17 +23,20 @@ export default function (pm) {
23
23
  ];
24
24
  const now = +Date.now();
25
25
  const trackId = `multitrack-${now}-sessionTrack`;
26
- getSession(model).addTrackConf({
27
- type: 'MultiQuantitativeTrack',
28
- trackId,
29
- name: arg.name,
30
- assemblyNames,
31
- adapter: {
32
- type: 'MultiWiggleAdapter',
33
- subadapters,
34
- },
35
- });
36
- model.view.showTrack(trackId);
26
+ const session = getSession(model);
27
+ if (isSessionWithAddTracks(session)) {
28
+ session.addTrackConf({
29
+ type: 'MultiQuantitativeTrack',
30
+ trackId,
31
+ name: arg.name,
32
+ assemblyNames,
33
+ adapter: {
34
+ type: 'MultiWiggleAdapter',
35
+ subadapters,
36
+ },
37
+ });
38
+ model.view.showTrack(trackId);
39
+ }
37
40
  }
38
41
  getSession(model).queueDialog(handleClose => [
39
42
  ConfirmDialog,
@@ -1,14 +1,13 @@
1
1
  import React from 'react';
2
- declare function SetColorDialog({ model, handleClose, }: {
2
+ declare const SetColorDialog: ({ model, handleClose, }: {
3
3
  model: {
4
- color?: string;
5
- posColor?: string;
6
- negColor?: string;
4
+ color?: string | undefined;
5
+ posColor?: string | undefined;
6
+ negColor?: string | undefined;
7
7
  setColor: (arg?: string) => void;
8
8
  setPosColor: (arg?: string) => void;
9
9
  setNegColor: (arg?: string) => void;
10
10
  };
11
11
  handleClose: () => void;
12
- }): React.JSX.Element;
13
- declare const _default: typeof SetColorDialog;
14
- export default _default;
12
+ }) => React.JSX.Element;
13
+ export default SetColorDialog;
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
3
3
  import { Button, DialogContent, DialogActions, FormControlLabel, Radio, Typography, } from '@mui/material';
4
4
  import { Dialog } from '@jbrowse/core/ui';
5
5
  import { ColorPicker } from '@jbrowse/core/ui/ColorPicker';
6
- function SetColorDialog({ model, handleClose, }) {
6
+ const SetColorDialog = observer(function SetColorDialog({ model, handleClose, }) {
7
7
  const [posneg, setPosNeg] = useState(false);
8
8
  return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Set color" },
9
9
  React.createElement(DialogContent, null,
@@ -30,5 +30,5 @@ function SetColorDialog({ model, handleClose, }) {
30
30
  model.setColor(undefined);
31
31
  }, color: "secondary", variant: "contained" }, "Restore default"),
32
32
  React.createElement(Button, { variant: "contained", color: "primary", type: "submit", onClick: () => handleClose() }, "Submit"))));
33
- }
34
- export default observer(SetColorDialog);
33
+ });
34
+ export default SetColorDialog;
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
4
4
  import Tooltip from '../../Tooltip';
5
5
  import { toP } from '../../util';
6
6
  const en = (n) => n.toLocaleString('en-US');
7
- const TooltipContents = React.forwardRef(function ({ feature }, ref) {
7
+ const TooltipContents = React.forwardRef(function TooltipContents2({ feature }, ref) {
8
8
  const start = feature.get('start');
9
9
  const end = feature.get('end');
10
10
  const name = feature.get('refName');
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
2
  import { DialogProps } from '@mui/material';
3
- declare function DraggableDialog(props: DialogProps & {
3
+ declare const DraggableDialog: (props: DialogProps & {
4
4
  title: string;
5
- }): React.JSX.Element;
6
- declare const _default: typeof DraggableDialog;
7
- export default _default;
5
+ }) => React.JSX.Element;
6
+ export default DraggableDialog;
@@ -18,7 +18,7 @@ function PaperComponent(props) {
18
18
  return (React.createElement(Draggable, { handle: "#draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]' },
19
19
  React.createElement(Paper, { ...props })));
20
20
  }
21
- function DraggableDialog(props) {
21
+ const DraggableDialog = observer(function DraggableDialog(props) {
22
22
  const { classes } = useStyles();
23
23
  const { title, children, onClose } = props;
24
24
  return (React.createElement(Dialog, { ...props, PaperComponent: PaperComponent, "aria-labelledby": "draggable-dialog-title" // this area is important for the draggable functionality
@@ -33,5 +33,5 @@ function DraggableDialog(props) {
33
33
  React.createElement(CloseIcon, null))) : null),
34
34
  React.createElement(Divider, null),
35
35
  children)));
36
- }
37
- export default observer(DraggableDialog);
36
+ });
37
+ export default DraggableDialog;
@@ -18,6 +18,11 @@ const useStyles = makeStyles()({
18
18
  content: {
19
19
  minWidth: 800,
20
20
  },
21
+ cell: {
22
+ whiteSpace: 'nowrap',
23
+ overflow: 'hidden',
24
+ textOverflow: 'ellipsis',
25
+ },
21
26
  });
22
27
  export default function SetColorDialog({ model, handleClose, }) {
23
28
  const { classes } = useStyles();
@@ -54,6 +59,7 @@ export default function SetColorDialog({ model, handleClose, }) {
54
59
  } }, "Submit"))));
55
60
  }
56
61
  function SourcesGrid({ rows, onChange, showTips, }) {
62
+ const { classes } = useStyles();
57
63
  const [anchorEl, setAnchorEl] = useState(null);
58
64
  const [selected, setSelected] = useState([]);
59
65
  // @ts-expect-error
@@ -114,7 +120,7 @@ function SourcesGrid({ rows, onChange, showTips, }) {
114
120
  sortingOrder: [null],
115
121
  renderCell: (params) => {
116
122
  const { value } = params;
117
- return isUriLocation(value) ? (React.createElement(UriLink, { value: value })) : (getStr(value));
123
+ return (React.createElement("div", { className: classes.cell }, isUriLocation(value) ? (React.createElement(UriLink, { value: value })) : (React.createElement(React.Fragment, null, getStr(value)))));
118
124
  },
119
125
  // @ts-ignore
120
126
  width: measureGridWidth(rows.map(r => r[val])),
@@ -2,12 +2,13 @@ import React from 'react';
2
2
  import { Feature } from '@jbrowse/core/util';
3
3
  import { Source } from '../../util';
4
4
  import { TooltipContentsComponent } from '../../Tooltip';
5
- declare const TooltipContents: React.ForwardRefExoticComponent<{
5
+ interface Props {
6
6
  model: {
7
7
  sources: Source[];
8
8
  };
9
9
  feature: Feature;
10
- } & React.RefAttributes<HTMLDivElement>>;
10
+ }
11
+ declare const TooltipContents: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
11
12
  type Coord = [number, number];
12
13
  declare const WiggleTooltip: (props: {
13
14
  model: {
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
4
4
  import { toP } from '../../util';
5
5
  import Tooltip from '../../Tooltip';
6
6
  const en = (n) => n.toLocaleString('en-US');
7
- const TooltipContents = React.forwardRef(({ model, feature }, ref) => {
7
+ const TooltipContents = React.forwardRef(function TooltipContents2({ model, feature }, ref) {
8
8
  const start = feature.get('start');
9
9
  const end = feature.get('end');
10
10
  const refName = feature.get('refName');
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
2
  import { WiggleDisplayModel } from '../models/model';
3
- declare const _default: (props: {
3
+ declare const MultiLinearWiggleDisplayComponent: (props: {
4
4
  model: WiggleDisplayModel;
5
5
  }) => React.JSX.Element;
6
- export default _default;
7
- export { default as YScaleBar } from '../../shared/YScaleBar';
6
+ export default MultiLinearWiggleDisplayComponent;
@@ -2,10 +2,10 @@ import React from 'react';
2
2
  import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
3
3
  import { observer } from 'mobx-react';
4
4
  import YScaleBars from './YScaleBars';
5
- export default observer((props) => {
5
+ const MultiLinearWiggleDisplayComponent = observer((props) => {
6
6
  const { model } = props;
7
7
  return (React.createElement("div", null,
8
8
  React.createElement(BaseLinearDisplayComponent, { ...props }),
9
9
  React.createElement(YScaleBars, { model: model })));
10
10
  });
11
- export { default as YScaleBar } from '../../shared/YScaleBar';
11
+ export default MultiLinearWiggleDisplayComponent;
@@ -5,8 +5,7 @@ export function moveUp(arr, sel, by = 1) {
5
5
  .map(l => arr.findIndex(v => v.name === l))
6
6
  .sort((a, b) => a - b);
7
7
  let lastIdx = 0;
8
- for (let i = 0; i < idxs.length; i++) {
9
- const old = idxs[i];
8
+ for (const old of idxs) {
10
9
  const idx = Math.max(lastIdx, old - by);
11
10
  if (idx >= lastIdx) {
12
11
  arr.splice(idx, 0, arr.splice(old, 1)[0]);
@@ -20,8 +19,7 @@ export function moveDown(arr, sel, by = 1) {
20
19
  .map(l => arr.findIndex(v => v.name === l))
21
20
  .sort((a, b) => b - a);
22
21
  let lastIdx = arr.length - 1;
23
- for (let i = 0; i < idxs.length; i++) {
24
- const old = idxs[i];
22
+ for (const old of idxs) {
25
23
  const idx = Math.min(lastIdx, old + by);
26
24
  if (idx <= lastIdx) {
27
25
  arr.splice(idx, 0, arr.splice(old, 1)[0]);
@@ -9,7 +9,6 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
9
9
  const groups = groupBy([...features.values()], f => f.get('source'));
10
10
  const height = props.height / sources.length;
11
11
  const width = (region.end - region.start) / bpPerPx;
12
- const Color = await import('color').then(f => f.default);
13
12
  let feats = [];
14
13
  ctx.save();
15
14
  sources.forEach(source => {
@@ -22,7 +21,6 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
22
21
  features,
23
22
  height,
24
23
  colorCallback: () => source.color || 'blue',
25
- Color,
26
24
  });
27
25
  ctx.strokeStyle = 'rgba(200,200,200,0.8)';
28
26
  ctx.beginPath();
@@ -1,7 +1,7 @@
1
1
  import React, { useState } from 'react';
2
2
  import { Button, Paper, TextField } from '@mui/material';
3
3
  import { makeStyles } from 'tss-react/mui';
4
- import { getSession, isElectron } from '@jbrowse/core/util';
4
+ import { getSession, isElectron, isSessionModelWithWidgets, isSessionWithAddTracks, } from '@jbrowse/core/util';
5
5
  import { storeBlobLocation } from '@jbrowse/core/util/tracks';
6
6
  const useStyles = makeStyles()(theme => ({
7
7
  textbox: {
@@ -60,19 +60,23 @@ export default function MultiWiggleWidget({ model }) {
60
60
  const obj = typeof bigWigs[0] === 'string'
61
61
  ? { bigWigs }
62
62
  : { subadapters: bigWigs };
63
- session.addTrackConf({
64
- trackId,
65
- type: 'MultiQuantitativeTrack',
66
- name: trackName,
67
- assemblyNames: [model.assembly],
68
- adapter: {
69
- type: 'MultiWiggleAdapter',
70
- ...obj,
71
- },
72
- });
73
- (_a = model.view) === null || _a === void 0 ? void 0 : _a.showTrack(trackId);
63
+ if (isSessionWithAddTracks(session)) {
64
+ session.addTrackConf({
65
+ trackId,
66
+ type: 'MultiQuantitativeTrack',
67
+ name: trackName,
68
+ assemblyNames: [model.assembly],
69
+ adapter: {
70
+ type: 'MultiWiggleAdapter',
71
+ ...obj,
72
+ },
73
+ });
74
+ (_a = model.view) === null || _a === void 0 ? void 0 : _a.showTrack(trackId);
75
+ }
74
76
  model.clearData();
75
- session.hideWidget(model);
77
+ if (isSessionModelWithWidgets(session)) {
78
+ session.hideWidget(model);
79
+ }
76
80
  } }, "Submit"),
77
81
  React.createElement("p", null, "Additional notes: "),
78
82
  React.createElement("ul", null,
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { Region } from '@jbrowse/core/util/types';
3
3
  import { Feature } from '@jbrowse/core/util';
4
4
  import { Source } from './util';
5
- declare function WiggleRendering(props: {
5
+ declare const MultiWiggleRendering: (props: {
6
6
  regions: Region[];
7
7
  features: Map<string, Feature>;
8
8
  bpPerPx: number;
@@ -16,6 +16,5 @@ declare function WiggleRendering(props: {
16
16
  displayModel: {
17
17
  isMultiRow: boolean;
18
18
  };
19
- }): React.JSX.Element;
20
- declare const _default: typeof WiggleRendering;
21
- export default _default;
19
+ }) => React.JSX.Element;
20
+ export default MultiWiggleRendering;
@@ -2,7 +2,7 @@ import { observer } from 'mobx-react';
2
2
  import React, { useRef } from 'react';
3
3
  import { SimpleFeature } from '@jbrowse/core/util';
4
4
  import { PrerenderedCanvas } from '@jbrowse/core/ui';
5
- function WiggleRendering(props) {
5
+ const MultiWiggleRendering = observer(function (props) {
6
6
  const { regions, features, bpPerPx, width, height, sources, onMouseLeave = () => { }, onMouseMove = () => { }, onFeatureClick = () => { }, displayModel, } = props;
7
7
  const [region] = regions;
8
8
  const ref = useRef(null);
@@ -59,10 +59,12 @@ function WiggleRendering(props) {
59
59
  return featureUnderMouse;
60
60
  }
61
61
  return (React.createElement("div", { ref: ref, onMouseMove: event => {
62
- const featureUnderMouse = getFeatureUnderMouse(event.clientX, event.clientY);
62
+ const { clientX, clientY } = event;
63
+ const featureUnderMouse = getFeatureUnderMouse(clientX, clientY);
63
64
  onMouseMove(event, featureUnderMouse);
64
65
  }, onClick: event => {
65
- const featureUnderMouse = getFeatureUnderMouse(event.clientX, event.clientY);
66
+ const { clientX, clientY } = event;
67
+ const featureUnderMouse = getFeatureUnderMouse(clientX, clientY);
66
68
  onFeatureClick(event, featureUnderMouse);
67
69
  }, onMouseLeave: event => onMouseLeave(event), style: {
68
70
  overflow: 'visible',
@@ -70,5 +72,5 @@ function WiggleRendering(props) {
70
72
  height,
71
73
  } },
72
74
  React.createElement(PrerenderedCanvas, { ...props })));
73
- }
74
- export default observer(WiggleRendering);
75
+ });
76
+ export default MultiWiggleRendering;
@@ -7,7 +7,6 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
7
7
  async draw(ctx, props) {
8
8
  const { sources, features } = props;
9
9
  const groups = groupBy([...features.values()], f => f.get('source'));
10
- const Color = await import('color').then(f => f.default);
11
10
  let feats = [];
12
11
  for (const source of sources) {
13
12
  const features = groups[source.name];
@@ -19,7 +18,6 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
19
18
  features,
20
19
  offset: YSCALEBAR_LABEL_OFFSET,
21
20
  colorCallback: () => source.color || 'blue',
22
- Color,
23
21
  });
24
22
  feats = [...feats, ...reducedFeatures];
25
23
  }
package/esm/Tooltip.d.ts CHANGED
@@ -5,16 +5,15 @@ export type TooltipContentsComponent = React.ForwardRefExoticComponent<{
5
5
  feature: Feature;
6
6
  model: any;
7
7
  } & React.RefAttributes<HTMLDivElement>>;
8
- declare function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }: {
8
+ declare const Tooltip: ({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }: {
9
9
  model: {
10
10
  featureUnderMouse: Feature;
11
11
  };
12
- useClientY?: boolean;
12
+ useClientY?: boolean | undefined;
13
13
  height: number;
14
14
  clientMouseCoord: Coord;
15
15
  offsetMouseCoord: Coord;
16
- clientRect?: DOMRect;
16
+ clientRect?: DOMRect | undefined;
17
17
  TooltipContents: TooltipContentsComponent;
18
- }): React.JSX.Element | null;
19
- declare const _default: typeof Tooltip;
20
- export default _default;
18
+ }) => React.JSX.Element | null;
19
+ export default Tooltip;
package/esm/Tooltip.js CHANGED
@@ -32,7 +32,7 @@ const useStyles = makeStyles()(theme => ({
32
32
  pointerEvents: 'none',
33
33
  },
34
34
  }));
35
- function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }) {
35
+ const Tooltip = observer(function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }) {
36
36
  const { featureUnderMouse } = model;
37
37
  const [width, setWidth] = useState(0);
38
38
  const [anchorEl, setAnchorEl] = useState(null);
@@ -66,5 +66,5 @@ function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect
66
66
  left: offsetMouseCoord[0],
67
67
  height: height - YSCALEBAR_LABEL_OFFSET * 2,
68
68
  } }))) : null;
69
- }
70
- export default observer(Tooltip);
69
+ });
70
+ export default Tooltip;
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { Region } from '@jbrowse/core/util/types';
3
3
  import { Feature } from '@jbrowse/core/util';
4
- declare function WiggleRendering(props: {
4
+ declare const WiggleRendering: (props: {
5
5
  regions: Region[];
6
6
  features: Map<string, Feature>;
7
7
  bpPerPx: number;
@@ -11,6 +11,5 @@ declare function WiggleRendering(props: {
11
11
  onMouseMove: Function;
12
12
  onFeatureClick: Function;
13
13
  blockKey: string;
14
- }): React.JSX.Element;
15
- declare const _default: typeof WiggleRendering;
16
- export default _default;
14
+ }) => React.JSX.Element;
15
+ export default WiggleRendering;
@@ -1,7 +1,7 @@
1
1
  import { observer } from 'mobx-react';
2
2
  import React, { useRef } from 'react';
3
3
  import { PrerenderedCanvas } from '@jbrowse/core/ui';
4
- function WiggleRendering(props) {
4
+ const WiggleRendering = observer(function (props) {
5
5
  const { regions, features, bpPerPx, width, height, onMouseLeave = () => { }, onMouseMove = () => { }, onFeatureClick = () => { }, } = props;
6
6
  const [region] = regions;
7
7
  const ref = useRef(null);
@@ -31,5 +31,5 @@ function WiggleRendering(props) {
31
31
  height,
32
32
  } },
33
33
  React.createElement(PrerenderedCanvas, { ...props })));
34
- }
35
- export default observer(WiggleRendering);
34
+ });
35
+ export default WiggleRendering;
@@ -11,7 +11,6 @@ export default class XYPlotRenderer extends WiggleBaseRenderer {
11
11
  const pivotValue = readConfObject(config, 'bicolorPivotValue');
12
12
  const negColor = readConfObject(config, 'negColor');
13
13
  const posColor = readConfObject(config, 'posColor');
14
- const Color = await import('color').then(f => f.default);
15
14
  return drawXY(ctx, {
16
15
  ...props,
17
16
  colorCallback: readConfObject(config, 'color') === '#f0f'
@@ -19,7 +18,6 @@ export default class XYPlotRenderer extends WiggleBaseRenderer {
19
18
  : (feature, _score) => readConfObject(config, 'color', { feature }),
20
19
  offset: YSCALEBAR_LABEL_OFFSET,
21
20
  features: [...features.values()],
22
- Color,
23
21
  });
24
22
  }
25
23
  }
package/esm/drawxy.d.ts CHANGED
@@ -14,7 +14,6 @@ export declare function drawXY(ctx: CanvasRenderingContext2D, props: {
14
14
  displayCrossHatches: boolean;
15
15
  offset?: number;
16
16
  colorCallback: (f: Feature, score: number) => string;
17
- Color: typeof import('color');
18
17
  }): {
19
18
  reducedFeatures: Feature[];
20
19
  };
package/esm/drawxy.js CHANGED
@@ -1,5 +1,16 @@
1
1
  import { readConfObject, } from '@jbrowse/core/configuration';
2
+ import { colord } from '@jbrowse/core/util/colord';
2
3
  import { clamp, featureSpanPx } from '@jbrowse/core/util';
4
+ function lighten(color, amount) {
5
+ const hslColor = color.toHsl();
6
+ const l = hslColor.l * (1 + amount);
7
+ return colord({ ...hslColor, l: clamp(l, 0, 100) });
8
+ }
9
+ function darken(color, amount) {
10
+ const hslColor = color.toHsl();
11
+ const l = hslColor.l * (1 - amount);
12
+ return colord({ ...hslColor, l: clamp(l, 0, 100) });
13
+ }
3
14
  // locals
4
15
  import { getOrigin, getScale } from './util';
5
16
  // avoid drawing negative width features for SVG exports
@@ -17,10 +28,10 @@ function fillRectCtx(x, y, width, height, ctx, color) {
17
28
  }
18
29
  ctx.fillRect(x, y, width, height);
19
30
  }
20
- const fudgeFactor = 0.4;
31
+ const fudgeFactor = 0.3;
21
32
  const clipHeight = 2;
22
33
  export function drawXY(ctx, props) {
23
- const { features, bpPerPx, regions, scaleOpts, height: unadjustedHeight, config, ticks, displayCrossHatches, offset = 0, colorCallback, Color, } = props;
34
+ const { features, bpPerPx, regions, scaleOpts, height: unadjustedHeight, config, ticks, displayCrossHatches, offset = 0, colorCallback, } = props;
24
35
  const [region] = regions;
25
36
  const width = (region.end - region.start) / bpPerPx;
26
37
  // the adjusted height takes into account YSCALEBAR_LABEL_OFFSET from the
@@ -58,7 +69,7 @@ export function drawXY(ctx, props) {
58
69
  ? c
59
70
  : c === lastCol
60
71
  ? lastMix
61
- : (lastMix = Color(c).lighten(0.4).toString());
72
+ : (lastMix = lighten(colord(c), 0.4).toHex());
62
73
  fillRectCtx(leftPx, toY(max), w, getHeight(max), ctx, effectiveC);
63
74
  lastCol = c;
64
75
  }
@@ -75,8 +86,8 @@ export function drawXY(ctx, props) {
75
86
  const effectiveC = crossingOrigin && summary
76
87
  ? c === lastCol
77
88
  ? lastMix
78
- : (lastMix = Color(colorCallback(feature, max))
79
- .mix(Color(colorCallback(feature, min)))
89
+ : (lastMix = colord(colorCallback(feature, max))
90
+ .mix(colord(colorCallback(feature, min)))
80
91
  .toString())
81
92
  : c;
82
93
  const w = Math.max(rightPx - leftPx + fudgeFactor, minSize);
@@ -101,7 +112,7 @@ export function drawXY(ctx, props) {
101
112
  ? c
102
113
  : c === lastCol
103
114
  ? lastMix
104
- : (lastMix = Color(c).darken(0.4).toString());
115
+ : (lastMix = darken(colord(c), 0.4).toHex());
105
116
  fillRectCtx(leftPx, toY(min), w, getHeight(min), ctx, effectiveC);
106
117
  lastCol = c;
107
118
  }
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
2
  import { axisPropsFromTickScale } from 'react-d3-axis-mod';
3
3
  type Ticks = ReturnType<typeof axisPropsFromTickScale>;
4
- declare const _default: ({ model, orientation, }: {
4
+ declare const YScaleBar: ({ model, orientation, }: {
5
5
  model: {
6
6
  ticks?: Ticks;
7
7
  };
8
8
  orientation?: string | undefined;
9
9
  }) => React.JSX.Element | null;
10
- export default _default;
10
+ export default YScaleBar;
@@ -2,8 +2,9 @@ import React from 'react';
2
2
  import { useTheme } from '@mui/material';
3
3
  import { observer } from 'mobx-react';
4
4
  import { Axis, LEFT, RIGHT } from 'react-d3-axis-mod';
5
- export default observer(function YScaleBar({ model, orientation, }) {
5
+ const YScaleBar = observer(function ({ model, orientation, }) {
6
6
  const { ticks } = model;
7
7
  const theme = useTheme();
8
8
  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;
9
9
  });
10
+ export default YScaleBar;
@@ -247,7 +247,10 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
247
247
  readonly regionTooLargeReason: string;
248
248
  } & {
249
249
  regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
250
- regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
250
+ regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null; /**
251
+ * #getter
252
+ * subclasses can define these, as snpcoverage track does
253
+ */
251
254
  } & {
252
255
  featureIdUnderMouse: string | undefined;
253
256
  contextMenuFeature: Feature | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jbrowse/plugin-wiggle",
3
- "version": "2.6.3",
3
+ "version": "2.7.0",
4
4
  "description": "JBrowse 2 wiggle adapters, tracks, etc.",
5
5
  "keywords": [
6
6
  "jbrowse",
@@ -40,7 +40,6 @@
40
40
  "@mui/icons-material": "^5.0.2",
41
41
  "@popperjs/core": "^2.11.0",
42
42
  "clone": "^2.1.2",
43
- "color": "^3.1.1",
44
43
  "d3-color": "^3.0.2",
45
44
  "d3-scale": "^3.0.2",
46
45
  "fast-deep-equal": "^3.1.3",
@@ -56,7 +55,7 @@
56
55
  "@mui/material": "^5.0.0",
57
56
  "@mui/x-data-grid": "^6.0.1",
58
57
  "mobx": "^6.0.0",
59
- "mobx-react": "^7.0.0",
58
+ "mobx-react": "^9.0.0",
60
59
  "mobx-state-tree": "^5.0.0",
61
60
  "react": ">=16.8.0",
62
61
  "rxjs": "^7.0.0",
@@ -68,5 +67,5 @@
68
67
  "distModule": "esm/index.js",
69
68
  "srcModule": "src/index.ts",
70
69
  "module": "esm/index.js",
71
- "gitHead": "ed402c87efb0904858d602c363bd1757d5742129"
70
+ "gitHead": "dbe7fb1af01fc89f833d2744635eb44a17365b41"
72
71
  }