@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.
- package/dist/CreateMultiWiggleExtension/index.js +14 -11
- package/dist/LinearWiggleDisplay/components/SetColorDialog.d.ts +6 -7
- package/dist/LinearWiggleDisplay/components/SetColorDialog.js +3 -3
- package/dist/LinearWiggleDisplay/components/Tooltip.js +1 -1
- package/dist/MultiLinearWiggleDisplay/components/DraggableDialog.d.ts +3 -4
- package/dist/MultiLinearWiggleDisplay/components/DraggableDialog.js +3 -3
- package/dist/MultiLinearWiggleDisplay/components/SetColorDialog.js +7 -1
- package/dist/MultiLinearWiggleDisplay/components/Tooltip.d.ts +3 -2
- package/dist/MultiLinearWiggleDisplay/components/Tooltip.js +1 -1
- package/dist/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.d.ts +2 -3
- package/dist/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.js +2 -4
- package/dist/MultiLinearWiggleDisplay/components/util.js +2 -4
- package/dist/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.js +0 -25
- package/dist/MultiWiggleAddTrackWidget/AddTrackWorkflow.js +16 -12
- package/dist/MultiWiggleRendering.d.ts +3 -4
- package/dist/MultiWiggleRendering.js +7 -5
- package/dist/MultiXYPlotRenderer/MultiXYPlotRenderer.js +0 -25
- package/dist/Tooltip.d.ts +5 -6
- package/dist/Tooltip.js +3 -3
- package/dist/WiggleRendering.d.ts +3 -4
- package/dist/WiggleRendering.js +3 -3
- package/dist/XYPlotRenderer/XYPlotRenderer.js +0 -25
- package/dist/drawxy.d.ts +0 -1
- package/dist/drawxy.js +17 -6
- package/dist/shared/YScaleBar.d.ts +2 -2
- package/dist/shared/YScaleBar.js +2 -1
- package/dist/shared/modelShared.d.ts +4 -1
- package/esm/CreateMultiWiggleExtension/index.js +14 -11
- package/esm/LinearWiggleDisplay/components/SetColorDialog.d.ts +6 -7
- package/esm/LinearWiggleDisplay/components/SetColorDialog.js +3 -3
- package/esm/LinearWiggleDisplay/components/Tooltip.js +1 -1
- package/esm/MultiLinearWiggleDisplay/components/DraggableDialog.d.ts +3 -4
- package/esm/MultiLinearWiggleDisplay/components/DraggableDialog.js +3 -3
- package/esm/MultiLinearWiggleDisplay/components/SetColorDialog.js +7 -1
- package/esm/MultiLinearWiggleDisplay/components/Tooltip.d.ts +3 -2
- package/esm/MultiLinearWiggleDisplay/components/Tooltip.js +1 -1
- package/esm/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.d.ts +2 -3
- package/esm/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.js +2 -2
- package/esm/MultiLinearWiggleDisplay/components/util.js +2 -4
- package/esm/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.js +0 -2
- package/esm/MultiWiggleAddTrackWidget/AddTrackWorkflow.js +17 -13
- package/esm/MultiWiggleRendering.d.ts +3 -4
- package/esm/MultiWiggleRendering.js +7 -5
- package/esm/MultiXYPlotRenderer/MultiXYPlotRenderer.js +0 -2
- package/esm/Tooltip.d.ts +5 -6
- package/esm/Tooltip.js +3 -3
- package/esm/WiggleRendering.d.ts +3 -4
- package/esm/WiggleRendering.js +3 -3
- package/esm/XYPlotRenderer/XYPlotRenderer.js +0 -2
- package/esm/drawxy.d.ts +0 -1
- package/esm/drawxy.js +17 -6
- package/esm/shared/YScaleBar.d.ts +2 -2
- package/esm/shared/YScaleBar.js +2 -1
- package/esm/shared/modelShared.d.ts +4 -1
- 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)
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
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
|
|
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
|
-
})
|
|
13
|
-
|
|
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
|
|
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
|
|
3
|
+
declare const DraggableDialog: (props: DialogProps & {
|
|
4
4
|
title: string;
|
|
5
|
-
})
|
|
6
|
-
|
|
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
|
|
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
|
-
|
|
5
|
+
interface Props {
|
|
6
6
|
model: {
|
|
7
7
|
sources: Source[];
|
|
8
8
|
};
|
|
9
9
|
feature: Feature;
|
|
10
|
-
}
|
|
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
|
|
3
|
+
declare const MultiLinearWiggleDisplayComponent: (props: {
|
|
4
4
|
model: WiggleDisplayModel;
|
|
5
5
|
}) => React.JSX.Element;
|
|
6
|
-
export 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
|
-
|
|
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
|
|
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 (
|
|
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 (
|
|
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
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
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
|
|
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
|
|
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
|
-
})
|
|
20
|
-
|
|
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
|
|
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
|
|
62
|
+
const { clientX, clientY } = event;
|
|
63
|
+
const featureUnderMouse = getFeatureUnderMouse(clientX, clientY);
|
|
63
64
|
onMouseMove(event, featureUnderMouse);
|
|
64
65
|
}, onClick: event => {
|
|
65
|
-
const
|
|
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
|
|
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
|
|
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
|
-
})
|
|
19
|
-
|
|
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
|
|
69
|
+
});
|
|
70
|
+
export default Tooltip;
|
package/esm/WiggleRendering.d.ts
CHANGED
|
@@ -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
|
|
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
|
-
})
|
|
15
|
-
|
|
16
|
-
export default _default;
|
|
14
|
+
}) => React.JSX.Element;
|
|
15
|
+
export default WiggleRendering;
|
package/esm/WiggleRendering.js
CHANGED
|
@@ -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
|
-
|
|
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
|
|
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
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.
|
|
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,
|
|
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 =
|
|
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 =
|
|
79
|
-
.mix(
|
|
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 =
|
|
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
|
|
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
|
|
10
|
+
export default YScaleBar;
|
package/esm/shared/YScaleBar.js
CHANGED
|
@@ -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
|
-
|
|
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.
|
|
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": "^
|
|
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": "
|
|
70
|
+
"gitHead": "dbe7fb1af01fc89f833d2744635eb44a17365b41"
|
|
72
71
|
}
|