@jbrowse/plugin-wiggle 2.13.1 → 2.14.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/BigWigAdapter/BigWigAdapter.d.ts +1 -1
- package/dist/BigWigAdapter/BigWigAdapter.js +1 -1
- package/dist/CreateMultiWiggleExtension/ConfirmDialog.js +12 -4
- package/dist/LinearWiggleDisplay/components/SetColorDialog.js +12 -4
- package/dist/LinearWiggleDisplay/components/Tooltip.d.ts +1 -1
- package/dist/LinearWiggleDisplay/components/Tooltip.js +7 -2
- package/dist/LinearWiggleDisplay/models/model.d.ts +1 -1
- package/dist/LinearWiggleDisplay/models/model.js +10 -4
- package/dist/MultiLinearWiggleDisplay/components/ScoreLegend.js +1 -2
- package/dist/MultiLinearWiggleDisplay/components/SetColorDialog.js +3 -1
- package/dist/MultiLinearWiggleDisplay/components/SourcesGrid.js +22 -8
- package/dist/MultiLinearWiggleDisplay/components/Tooltip.js +4 -7
- package/dist/MultiLinearWiggleDisplay/components/YScaleBars.js +2 -2
- package/dist/MultiLinearWiggleDisplay/models/model.d.ts +1 -1
- package/dist/MultiLinearWiggleDisplay/models/model.js +16 -6
- package/dist/MultiRowLineRenderer/MultiRowLineRenderer.js +1 -1
- package/dist/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.js +1 -1
- package/dist/MultiWiggleAdapter/MultiWiggleAdapter.js +1 -3
- package/dist/MultiWiggleAddTrackWorkflow/AddTrackWorkflow.js +8 -4
- package/dist/MultiWiggleRendering.d.ts +4 -4
- package/dist/MultiWiggleRendering.js +6 -3
- package/dist/Tooltip.d.ts +1 -1
- package/dist/Tooltip.js +1 -1
- package/dist/WiggleBaseRenderer.d.ts +1 -1
- package/dist/WiggleBaseRenderer.js +1 -1
- package/dist/WiggleRPC/MultiWiggleGetSources.d.ts +1 -1
- package/dist/WiggleRPC/MultiWiggleGetSources.js +0 -1
- package/dist/WiggleRPC/WiggleGetGlobalQuantitativeStats.js +0 -1
- package/dist/WiggleRPC/WiggleGetMultiRegionQuantitativeStats.d.ts +2 -2
- package/dist/WiggleRPC/WiggleGetMultiRegionQuantitativeStats.js +0 -1
- package/dist/WiggleRendering.d.ts +3 -3
- package/dist/WiggleRendering.js +3 -3
- package/dist/drawDensity.js +5 -3
- package/dist/drawLine.js +5 -3
- package/dist/drawXY.js +5 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +1 -1
- package/dist/shared/SetMinMaxDialog.d.ts +2 -2
- package/dist/shared/SetMinMaxDialog.js +6 -2
- package/dist/shared/YScaleBar.d.ts +1 -1
- package/dist/shared/modelShared.d.ts +5 -5
- package/dist/shared/modelShared.js +15 -5
- package/dist/util.d.ts +2 -2
- package/dist/util.js +8 -11
- package/esm/BigWigAdapter/BigWigAdapter.d.ts +1 -1
- package/esm/BigWigAdapter/BigWigAdapter.js +1 -1
- package/esm/CreateMultiWiggleExtension/ConfirmDialog.js +12 -4
- package/esm/LinearWiggleDisplay/components/SetColorDialog.js +12 -4
- package/esm/LinearWiggleDisplay/components/Tooltip.d.ts +1 -1
- package/esm/LinearWiggleDisplay/components/Tooltip.js +7 -2
- package/esm/LinearWiggleDisplay/models/model.d.ts +1 -1
- package/esm/LinearWiggleDisplay/models/model.js +10 -4
- package/esm/MultiLinearWiggleDisplay/components/ScoreLegend.js +1 -2
- package/esm/MultiLinearWiggleDisplay/components/SetColorDialog.js +3 -1
- package/esm/MultiLinearWiggleDisplay/components/SourcesGrid.js +22 -8
- package/esm/MultiLinearWiggleDisplay/components/Tooltip.js +4 -7
- package/esm/MultiLinearWiggleDisplay/components/YScaleBars.js +2 -2
- package/esm/MultiLinearWiggleDisplay/models/model.d.ts +1 -1
- package/esm/MultiLinearWiggleDisplay/models/model.js +16 -6
- package/esm/MultiRowLineRenderer/MultiRowLineRenderer.js +1 -1
- package/esm/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.js +1 -1
- package/esm/MultiWiggleAdapter/MultiWiggleAdapter.js +1 -3
- package/esm/MultiWiggleAddTrackWorkflow/AddTrackWorkflow.js +8 -4
- package/esm/MultiWiggleRendering.d.ts +4 -4
- package/esm/MultiWiggleRendering.js +6 -3
- package/esm/Tooltip.d.ts +1 -1
- package/esm/Tooltip.js +1 -1
- package/esm/WiggleBaseRenderer.d.ts +1 -1
- package/esm/WiggleBaseRenderer.js +1 -1
- package/esm/WiggleRPC/MultiWiggleGetSources.d.ts +1 -1
- package/esm/WiggleRPC/MultiWiggleGetSources.js +0 -1
- package/esm/WiggleRPC/WiggleGetGlobalQuantitativeStats.js +0 -1
- package/esm/WiggleRPC/WiggleGetMultiRegionQuantitativeStats.d.ts +2 -2
- package/esm/WiggleRPC/WiggleGetMultiRegionQuantitativeStats.js +0 -1
- package/esm/WiggleRendering.d.ts +3 -3
- package/esm/WiggleRendering.js +3 -3
- package/esm/drawDensity.js +5 -3
- package/esm/drawLine.js +5 -3
- package/esm/drawXY.js +5 -3
- package/esm/index.d.ts +3 -3
- package/esm/index.js +1 -1
- package/esm/shared/SetMinMaxDialog.d.ts +2 -2
- package/esm/shared/SetMinMaxDialog.js +6 -2
- package/esm/shared/YScaleBar.d.ts +1 -1
- package/esm/shared/modelShared.d.ts +5 -5
- package/esm/shared/modelShared.js +15 -5
- package/esm/util.d.ts +2 -2
- package/esm/util.js +8 -11
- package/package.json +5 -6
package/dist/drawLine.js
CHANGED
|
@@ -9,7 +9,7 @@ const fudgeFactor = 0.3;
|
|
|
9
9
|
const clipHeight = 2;
|
|
10
10
|
function drawLine(ctx, props) {
|
|
11
11
|
const { features, regions, bpPerPx, scaleOpts, height: unadjustedHeight, ticks: { values }, displayCrossHatches, colorCallback, config, offset = 0, } = props;
|
|
12
|
-
const
|
|
12
|
+
const region = regions[0];
|
|
13
13
|
const width = (region.end - region.start) / bpPerPx;
|
|
14
14
|
// the adjusted height takes into account YSCALEBAR_LABEL_OFFSET from the
|
|
15
15
|
// wiggle display, and makes the height of the actual drawn area add
|
|
@@ -17,10 +17,12 @@ function drawLine(ctx, props) {
|
|
|
17
17
|
const height = unadjustedHeight - offset * 2;
|
|
18
18
|
const clipColor = (0, configuration_1.readConfObject)(config, 'clipColor');
|
|
19
19
|
const scale = (0, util_2.getScale)({ ...scaleOpts, range: [0, height] });
|
|
20
|
-
const
|
|
20
|
+
const domain = scale.domain();
|
|
21
|
+
const niceMin = domain[0];
|
|
22
|
+
const niceMax = domain[1];
|
|
21
23
|
const toY = (n) => (0, util_1.clamp)(height - (scale(n) || 0), 0, height) + offset;
|
|
22
24
|
let lastVal;
|
|
23
|
-
let prevLeftPx =
|
|
25
|
+
let prevLeftPx = Number.NEGATIVE_INFINITY;
|
|
24
26
|
const reducedFeatures = [];
|
|
25
27
|
for (const feature of features.values()) {
|
|
26
28
|
const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
|
package/dist/drawXY.js
CHANGED
|
@@ -20,7 +20,7 @@ const fudgeFactor = 0.3;
|
|
|
20
20
|
const clipHeight = 2;
|
|
21
21
|
function drawXY(ctx, props) {
|
|
22
22
|
const { features, bpPerPx, regions, scaleOpts, height: unadjustedHeight, config, ticks, displayCrossHatches, offset = 0, colorCallback, } = props;
|
|
23
|
-
const
|
|
23
|
+
const region = regions[0];
|
|
24
24
|
const width = (region.end - region.start) / bpPerPx;
|
|
25
25
|
// the adjusted height takes into account YSCALEBAR_LABEL_OFFSET from the
|
|
26
26
|
// wiggle display, and makes the height of the actual drawn area add
|
|
@@ -33,12 +33,14 @@ function drawXY(ctx, props) {
|
|
|
33
33
|
const minSize = (0, configuration_1.readConfObject)(config, 'minSize');
|
|
34
34
|
const scale = (0, util_2.getScale)({ ...scaleOpts, range: [0, height] });
|
|
35
35
|
const originY = (0, util_2.getOrigin)(scaleOpts.scaleType);
|
|
36
|
-
const
|
|
36
|
+
const domain = scale.domain();
|
|
37
|
+
const niceMin = domain[0];
|
|
38
|
+
const niceMax = domain[1];
|
|
37
39
|
const toY = (n) => (0, util_1.clamp)(height - (scale(n) || 0), 0, height) + offset;
|
|
38
40
|
const toOrigin = (n) => toY(originY) - toY(n);
|
|
39
41
|
const getHeight = (n) => (filled ? toOrigin(n) : Math.max(minSize, 1));
|
|
40
42
|
let hasClipping = false;
|
|
41
|
-
let prevLeftPx =
|
|
43
|
+
let prevLeftPx = Number.NEGATIVE_INFINITY;
|
|
42
44
|
const reducedFeatures = [];
|
|
43
45
|
const crossingOrigin = niceMin < pivotValue && niceMax > pivotValue;
|
|
44
46
|
// we handle whiskers separately to render max row, min row, and avg in three
|
package/dist/index.d.ts
CHANGED
|
@@ -17,10 +17,10 @@ export default class WigglePlugin extends Plugin {
|
|
|
17
17
|
bpPerPx: number;
|
|
18
18
|
width: number;
|
|
19
19
|
height: number;
|
|
20
|
-
onMouseLeave: Function;
|
|
21
|
-
onMouseMove: Function;
|
|
22
|
-
onFeatureClick: Function;
|
|
23
20
|
blockKey: string;
|
|
21
|
+
onMouseLeave?: (event: import("react").MouseEvent) => void;
|
|
22
|
+
onMouseMove?: (event: import("react").MouseEvent, arg?: string) => void;
|
|
23
|
+
onFeatureClick?: (event: import("react").MouseEvent, arg?: string) => void;
|
|
24
24
|
}) => import("react").JSX.Element;
|
|
25
25
|
XYPlotRenderer: typeof XYPlotRenderer;
|
|
26
26
|
WiggleBaseRenderer: typeof WiggleBaseRenderer;
|
package/dist/index.js
CHANGED
|
@@ -4,8 +4,8 @@ export default function SetMinMaxDialog(props: {
|
|
|
4
4
|
minScore: number;
|
|
5
5
|
maxScore: number;
|
|
6
6
|
scaleType: string;
|
|
7
|
-
setMinScore:
|
|
8
|
-
setMaxScore:
|
|
7
|
+
setMinScore: (arg?: number) => void;
|
|
8
|
+
setMaxScore: (arg?: number) => void;
|
|
9
9
|
};
|
|
10
10
|
handleClose: () => void;
|
|
11
11
|
}): React.JSX.Element;
|
|
@@ -41,8 +41,12 @@ function SetMinMaxDialog(props) {
|
|
|
41
41
|
react_1.default.createElement(material_1.Typography, null, "Enter min/max score: "),
|
|
42
42
|
!ok ? (react_1.default.createElement(material_1.Typography, { color: "error" }, "Max is greater than or equal to min")) : null,
|
|
43
43
|
!logOk ? (react_1.default.createElement(material_1.Typography, { color: "error" }, "Min score should be greater than 0 for log scale")) : null,
|
|
44
|
-
react_1.default.createElement(material_1.TextField, { value: min, onChange: event =>
|
|
45
|
-
|
|
44
|
+
react_1.default.createElement(material_1.TextField, { value: min, onChange: event => {
|
|
45
|
+
setMin(event.target.value);
|
|
46
|
+
}, placeholder: "Enter min score" }),
|
|
47
|
+
react_1.default.createElement(material_1.TextField, { value: max, onChange: event => {
|
|
48
|
+
setMax(event.target.value);
|
|
49
|
+
}, placeholder: "Enter max score" })),
|
|
46
50
|
react_1.default.createElement(material_1.DialogActions, null,
|
|
47
51
|
react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", style: { marginLeft: 20 }, disabled: !ok, onClick: () => {
|
|
48
52
|
model.setMinScore(min !== '' && !Number.isNaN(+min) ? +min : undefined);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { axisPropsFromTickScale } from 'react-d3-axis-mod';
|
|
2
|
+
import type { axisPropsFromTickScale } from 'react-d3-axis-mod';
|
|
3
3
|
type Ticks = ReturnType<typeof axisPropsFromTickScale>;
|
|
4
4
|
declare const YScaleBar: ({ model, orientation, }: {
|
|
5
5
|
model: {
|
|
@@ -181,7 +181,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
|
|
|
181
181
|
error: unknown;
|
|
182
182
|
message: string | undefined;
|
|
183
183
|
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
|
|
184
|
-
onHorizontalScroll?:
|
|
184
|
+
onHorizontalScroll?: () => void;
|
|
185
185
|
blockState?: Record<string, any>;
|
|
186
186
|
}>;
|
|
187
187
|
readonly DisplayBlurb: import("react").FC<{
|
|
@@ -407,10 +407,10 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
|
|
|
407
407
|
} & import("mobx-state-tree/dist/internal").NonEmptyObject & {
|
|
408
408
|
setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
|
|
409
409
|
[x: string]: any;
|
|
410
|
-
} & import("mobx-state-tree/dist/internal"
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
410
|
+
} & import("mobx-state-tree/dist/internal" /**
|
|
411
|
+
* #property
|
|
412
|
+
*/).NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
|
|
413
|
+
} & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
|
|
414
414
|
} & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
|
|
415
415
|
/**
|
|
416
416
|
* #getter
|
|
@@ -411,11 +411,15 @@ function SharedWiggleMixin(configSchema) {
|
|
|
411
411
|
subMenu: [
|
|
412
412
|
{
|
|
413
413
|
label: 'Finer resolution',
|
|
414
|
-
onClick: () =>
|
|
414
|
+
onClick: () => {
|
|
415
|
+
self.setResolution(self.resolution * 5);
|
|
416
|
+
},
|
|
415
417
|
},
|
|
416
418
|
{
|
|
417
419
|
label: 'Coarser resolution',
|
|
418
|
-
onClick: () =>
|
|
420
|
+
onClick: () => {
|
|
421
|
+
self.setResolution(self.resolution / 5);
|
|
422
|
+
},
|
|
419
423
|
},
|
|
420
424
|
],
|
|
421
425
|
},
|
|
@@ -425,14 +429,18 @@ function SharedWiggleMixin(configSchema) {
|
|
|
425
429
|
label: elt,
|
|
426
430
|
type: 'radio',
|
|
427
431
|
checked: self.summaryScoreModeSetting === elt,
|
|
428
|
-
onClick: () =>
|
|
432
|
+
onClick: () => {
|
|
433
|
+
self.setSummaryScoreMode(elt);
|
|
434
|
+
},
|
|
429
435
|
})),
|
|
430
436
|
},
|
|
431
437
|
]
|
|
432
438
|
: []),
|
|
433
439
|
{
|
|
434
440
|
label: self.scaleType === 'log' ? 'Set linear scale' : 'Set log scale',
|
|
435
|
-
onClick: () =>
|
|
441
|
+
onClick: () => {
|
|
442
|
+
self.toggleLogScale();
|
|
443
|
+
},
|
|
436
444
|
},
|
|
437
445
|
{
|
|
438
446
|
label: 'Autoscale type',
|
|
@@ -449,7 +457,9 @@ function SharedWiggleMixin(configSchema) {
|
|
|
449
457
|
label,
|
|
450
458
|
type: 'radio',
|
|
451
459
|
checked: self.autoscaleType === val,
|
|
452
|
-
onClick: () =>
|
|
460
|
+
onClick: () => {
|
|
461
|
+
self.setAutoscale(val);
|
|
462
|
+
},
|
|
453
463
|
})),
|
|
454
464
|
},
|
|
455
465
|
{
|
package/dist/util.d.ts
CHANGED
|
@@ -25,7 +25,7 @@ export interface Source {
|
|
|
25
25
|
* - pivotValue (number)
|
|
26
26
|
* - inverted (boolean)
|
|
27
27
|
*/
|
|
28
|
-
export declare function getScale({ domain, range, scaleType, pivotValue, inverted, }: ScaleOpts): import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleQuantize<number, never>;
|
|
28
|
+
export declare function getScale({ domain, range, scaleType, pivotValue, inverted, }: ScaleOpts): import("@mui/x-charts-vendor/d3-scale").ScaleLinear<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleLogarithmic<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleQuantize<number, never>;
|
|
29
29
|
/**
|
|
30
30
|
* gets the origin for drawing the graph. for linear this is 0, for log this is arbitrarily set to log(1)==0
|
|
31
31
|
*
|
|
@@ -56,7 +56,7 @@ export declare function getQuantitativeStats(self: {
|
|
|
56
56
|
}, opts: {
|
|
57
57
|
headers?: Record<string, string>;
|
|
58
58
|
signal?: AbortSignal;
|
|
59
|
-
filters
|
|
59
|
+
filters: string[];
|
|
60
60
|
}): Promise<QuantitativeStats>;
|
|
61
61
|
export declare function quantitativeStatsAutorun(self: {
|
|
62
62
|
featureDensityStatsReady: boolean;
|
package/dist/util.js
CHANGED
|
@@ -9,7 +9,7 @@ exports.quantitativeStatsAutorun = quantitativeStatsAutorun;
|
|
|
9
9
|
exports.toP = toP;
|
|
10
10
|
exports.round = round;
|
|
11
11
|
exports.fillRectCtx = fillRectCtx;
|
|
12
|
-
const d3_scale_1 = require("d3-scale");
|
|
12
|
+
const d3_scale_1 = require("@mui/x-charts-vendor/d3-scale");
|
|
13
13
|
const mobx_1 = require("mobx");
|
|
14
14
|
const util_1 = require("@jbrowse/core/util");
|
|
15
15
|
const tracks_1 = require("@jbrowse/core/util/tracks");
|
|
@@ -37,8 +37,7 @@ function getScale({ domain = [], range = [], scaleType, pivotValue, inverted, })
|
|
|
37
37
|
scale = (0, d3_scale_1.scaleLinear)();
|
|
38
38
|
}
|
|
39
39
|
else if (scaleType === 'log') {
|
|
40
|
-
scale = (0, d3_scale_1.scaleLog)();
|
|
41
|
-
scale.base(2);
|
|
40
|
+
scale = (0, d3_scale_1.scaleLog)().base(2);
|
|
42
41
|
}
|
|
43
42
|
else if (scaleType === 'quantize') {
|
|
44
43
|
scale = (0, d3_scale_1.scaleQuantize)();
|
|
@@ -108,9 +107,6 @@ function getNiceDomain({ scaleType, domain, bounds, }) {
|
|
|
108
107
|
min = 1;
|
|
109
108
|
}
|
|
110
109
|
}
|
|
111
|
-
if (min === undefined || max === undefined) {
|
|
112
|
-
throw new Error('invalid domain supplied to stats function');
|
|
113
|
-
}
|
|
114
110
|
if (minScore !== undefined && minScore !== Number.MIN_VALUE) {
|
|
115
111
|
min = minScore;
|
|
116
112
|
}
|
|
@@ -138,7 +134,7 @@ function getNiceDomain({ scaleType, domain, bounds, }) {
|
|
|
138
134
|
}
|
|
139
135
|
async function getQuantitativeStats(self, opts) {
|
|
140
136
|
const { rpcManager } = (0, util_1.getSession)(self);
|
|
141
|
-
const
|
|
137
|
+
const numStdDev = (0, configuration_1.getConf)(self, 'numStdDev') || 3;
|
|
142
138
|
const { adapterConfig, autoscaleType } = self;
|
|
143
139
|
const sessionId = (0, tracks_1.getRpcSessionId)(self);
|
|
144
140
|
const params = {
|
|
@@ -160,8 +156,8 @@ async function getQuantitativeStats(self, opts) {
|
|
|
160
156
|
return autoscaleType === 'globalsd'
|
|
161
157
|
? {
|
|
162
158
|
...results,
|
|
163
|
-
scoreMin: scoreMin >= 0 ? 0 : scoreMean -
|
|
164
|
-
scoreMax: scoreMean +
|
|
159
|
+
scoreMin: scoreMin >= 0 ? 0 : scoreMean - numStdDev * scoreStdDev,
|
|
160
|
+
scoreMax: scoreMean + numStdDev * scoreStdDev,
|
|
165
161
|
}
|
|
166
162
|
: results;
|
|
167
163
|
}
|
|
@@ -186,8 +182,8 @@ async function getQuantitativeStats(self, opts) {
|
|
|
186
182
|
return autoscaleType === 'localsd'
|
|
187
183
|
? {
|
|
188
184
|
...results,
|
|
189
|
-
scoreMin: scoreMin >= 0 ? 0 : scoreMean -
|
|
190
|
-
scoreMax: scoreMean +
|
|
185
|
+
scoreMin: scoreMin >= 0 ? 0 : scoreMean - numStdDev * scoreStdDev,
|
|
186
|
+
scoreMax: scoreMean + numStdDev * scoreStdDev,
|
|
191
187
|
}
|
|
192
188
|
: results;
|
|
193
189
|
}
|
|
@@ -211,6 +207,7 @@ function quantitativeStatsAutorun(self) {
|
|
|
211
207
|
const statsRegion = JSON.stringify(view.dynamicBlocks);
|
|
212
208
|
const wiggleStats = await getQuantitativeStats(self, {
|
|
213
209
|
signal: aborter.signal,
|
|
210
|
+
filters: [],
|
|
214
211
|
...self.renderProps(),
|
|
215
212
|
});
|
|
216
213
|
if ((0, mobx_state_tree_1.isAlive)(self)) {
|
|
@@ -14,7 +14,7 @@ export default class BigWigAdapter extends BaseFeatureDataAdapter {
|
|
|
14
14
|
header: Awaited<ReturnType<BigWig["getHeader"]>>;
|
|
15
15
|
}>;
|
|
16
16
|
getRefNames(opts?: BaseOptions): Promise<string[]>;
|
|
17
|
-
refIdToName(refId: number): Promise<string>;
|
|
17
|
+
refIdToName(refId: number): Promise<string | undefined>;
|
|
18
18
|
getGlobalStats(opts?: BaseOptions): Promise<import("@jbrowse/core/util/stats").QuantitativeStats>;
|
|
19
19
|
getFeatures(region: Region, opts?: WiggleOptions): import("rxjs").Observable<Feature>;
|
|
20
20
|
getMultiRegionFeatureDensityStats(_regions: Region[]): Promise<{
|
|
@@ -5,7 +5,9 @@ import { readConfObject, } from '@jbrowse/core/configuration';
|
|
|
5
5
|
const ConfirmDialog = ({ tracks, onClose, }) => {
|
|
6
6
|
const [val, setVal] = useState(`MultiWiggle ${Date.now()}`);
|
|
7
7
|
const allQuant = tracks.every(t => t.type === 'QuantitativeTrack');
|
|
8
|
-
return (React.createElement(Dialog, { open: true, onClose: () =>
|
|
8
|
+
return (React.createElement(Dialog, { open: true, onClose: () => {
|
|
9
|
+
onClose(false);
|
|
10
|
+
}, title: "Confirm multi-wiggle track create" },
|
|
9
11
|
React.createElement(DialogContent, null,
|
|
10
12
|
React.createElement(Typography, null,
|
|
11
13
|
!allQuant
|
|
@@ -16,10 +18,16 @@ const ConfirmDialog = ({ tracks, onClose, }) => {
|
|
|
16
18
|
readConfObject(track, 'name'),
|
|
17
19
|
" - ",
|
|
18
20
|
track.type)))),
|
|
19
|
-
React.createElement(TextField, { value: val, onChange: event =>
|
|
21
|
+
React.createElement(TextField, { value: val, onChange: event => {
|
|
22
|
+
setVal(event.target.value);
|
|
23
|
+
}, helperText: "Track name" }),
|
|
20
24
|
React.createElement(Typography, null, "Confirm creation of track?")),
|
|
21
25
|
React.createElement(DialogActions, null,
|
|
22
|
-
React.createElement(Button, { onClick: () =>
|
|
23
|
-
|
|
26
|
+
React.createElement(Button, { onClick: () => {
|
|
27
|
+
onClose(false);
|
|
28
|
+
}, color: "primary" }, "Cancel"),
|
|
29
|
+
React.createElement(Button, { onClick: () => {
|
|
30
|
+
onClose(true, { name: val });
|
|
31
|
+
}, color: "primary", variant: "contained", autoFocus: true }, "Submit"))));
|
|
24
32
|
};
|
|
25
33
|
export default ConfirmDialog;
|
|
@@ -8,8 +8,12 @@ const SetColorDialog = observer(function SetColorDialog({ model, handleClose, })
|
|
|
8
8
|
return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Set color" },
|
|
9
9
|
React.createElement(DialogContent, null,
|
|
10
10
|
React.createElement(Typography, null, "Select either an overall color, or the positive/negative colors. Note that density renderers only work properly with positive/negative colors"),
|
|
11
|
-
React.createElement(FormControlLabel, { checked: !posneg, onClick: () =>
|
|
12
|
-
|
|
11
|
+
React.createElement(FormControlLabel, { checked: !posneg, onClick: () => {
|
|
12
|
+
setPosNeg(false);
|
|
13
|
+
}, control: React.createElement(Radio, null), label: "Overall color" }),
|
|
14
|
+
React.createElement(FormControlLabel, { checked: posneg, onClick: () => {
|
|
15
|
+
setPosNeg(true);
|
|
16
|
+
}, control: React.createElement(Radio, null), label: "Positive/negative color" }),
|
|
13
17
|
posneg ? (React.createElement(React.Fragment, null,
|
|
14
18
|
React.createElement(Typography, null, "Positive color"),
|
|
15
19
|
React.createElement(ColorPicker, { color: model.posColor || 'black', onChange: event => {
|
|
@@ -22,13 +26,17 @@ const SetColorDialog = observer(function SetColorDialog({ model, handleClose, })
|
|
|
22
26
|
model.setColor(undefined);
|
|
23
27
|
} }))) : (React.createElement(React.Fragment, null,
|
|
24
28
|
React.createElement(Typography, null, "Overall color"),
|
|
25
|
-
React.createElement(ColorPicker, { color: model.color || 'black', onChange: event =>
|
|
29
|
+
React.createElement(ColorPicker, { color: model.color || 'black', onChange: event => {
|
|
30
|
+
model.setColor(event);
|
|
31
|
+
} })))),
|
|
26
32
|
React.createElement(DialogActions, null,
|
|
27
33
|
React.createElement(Button, { onClick: () => {
|
|
28
34
|
model.setPosColor(undefined);
|
|
29
35
|
model.setNegColor(undefined);
|
|
30
36
|
model.setColor(undefined);
|
|
31
37
|
}, color: "secondary", variant: "contained" }, "Restore default"),
|
|
32
|
-
React.createElement(Button, { variant: "contained", color: "primary", type: "submit", onClick: () =>
|
|
38
|
+
React.createElement(Button, { variant: "contained", color: "primary", type: "submit", onClick: () => {
|
|
39
|
+
handleClose();
|
|
40
|
+
} }, "Submit"))));
|
|
33
41
|
});
|
|
34
42
|
export default SetColorDialog;
|
|
@@ -7,8 +7,13 @@ const en = (n) => n.toLocaleString('en-US');
|
|
|
7
7
|
const TooltipContents = React.forwardRef(function TooltipContents2({ feature }, ref) {
|
|
8
8
|
const start = feature.get('start');
|
|
9
9
|
const end = feature.get('end');
|
|
10
|
-
const
|
|
11
|
-
const
|
|
10
|
+
const refName = feature.get('refName');
|
|
11
|
+
const name = feature.get('name');
|
|
12
|
+
const loc = [
|
|
13
|
+
refName,
|
|
14
|
+
name,
|
|
15
|
+
start === end ? en(start) : `${en(start)}..${en(end)}`,
|
|
16
|
+
]
|
|
12
17
|
.filter(f => !!f)
|
|
13
18
|
.join(':');
|
|
14
19
|
return feature.get('summary') !== undefined ? (React.createElement("div", { ref: ref },
|
|
@@ -155,7 +155,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
|
|
|
155
155
|
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree" /**
|
|
156
156
|
* #getter
|
|
157
157
|
*/)._NotCustomized>>;
|
|
158
|
-
onHorizontalScroll?:
|
|
158
|
+
onHorizontalScroll?: () => void;
|
|
159
159
|
blockState?: Record<string, any>;
|
|
160
160
|
}>;
|
|
161
161
|
readonly DisplayBlurb: React.FC<{
|
|
@@ -108,7 +108,7 @@ function stateModelFactory(pluginManager, configSchema) {
|
|
|
108
108
|
if (self.filled) {
|
|
109
109
|
return 0;
|
|
110
110
|
}
|
|
111
|
-
else if (
|
|
111
|
+
else if (self.minSize === 1) {
|
|
112
112
|
return 1;
|
|
113
113
|
}
|
|
114
114
|
else {
|
|
@@ -139,7 +139,9 @@ function stateModelFactory(pluginManager, configSchema) {
|
|
|
139
139
|
label: elt,
|
|
140
140
|
type: 'radio',
|
|
141
141
|
checked: self.fillSetting === idx,
|
|
142
|
-
onClick: () =>
|
|
142
|
+
onClick: () => {
|
|
143
|
+
self.setFill(idx);
|
|
144
|
+
},
|
|
143
145
|
})),
|
|
144
146
|
},
|
|
145
147
|
]
|
|
@@ -150,7 +152,9 @@ function stateModelFactory(pluginManager, configSchema) {
|
|
|
150
152
|
type: 'checkbox',
|
|
151
153
|
label: 'Draw cross hatches',
|
|
152
154
|
checked: self.displayCrossHatchesSetting,
|
|
153
|
-
onClick: () =>
|
|
155
|
+
onClick: () => {
|
|
156
|
+
self.toggleCrossHatches();
|
|
157
|
+
},
|
|
154
158
|
},
|
|
155
159
|
]
|
|
156
160
|
: []),
|
|
@@ -162,7 +166,9 @@ function stateModelFactory(pluginManager, configSchema) {
|
|
|
162
166
|
label: key,
|
|
163
167
|
type: 'radio',
|
|
164
168
|
checked: self.rendererTypeNameSimple === key,
|
|
165
|
-
onClick: () =>
|
|
169
|
+
onClick: () => {
|
|
170
|
+
self.setRendererType(key);
|
|
171
|
+
},
|
|
166
172
|
})),
|
|
167
173
|
},
|
|
168
174
|
]
|
|
@@ -5,8 +5,7 @@ import RectBg from './RectBg';
|
|
|
5
5
|
const ScoreLegend = observer(({ model }) => {
|
|
6
6
|
const { ticks, scaleType } = model;
|
|
7
7
|
const { width } = getContainingView(model);
|
|
8
|
-
const legend = `[${ticks === null || ticks === void 0 ? void 0 : ticks.values[0]}-${ticks === null || ticks === void 0 ? void 0 : ticks.values[1]}]
|
|
9
|
-
(scaleType === 'log' ? ' (log scale)' : '');
|
|
8
|
+
const legend = `[${ticks === null || ticks === void 0 ? void 0 : ticks.values[0]}-${ticks === null || ticks === void 0 ? void 0 : ticks.values[1]}]${scaleType === 'log' ? ' (log scale)' : ''}`;
|
|
10
9
|
const len = measureText(legend, 14);
|
|
11
10
|
const padding = 25;
|
|
12
11
|
const xpos = width - len - padding;
|
|
@@ -18,7 +18,9 @@ export default function SetColorDialog({ model, handleClose, }) {
|
|
|
18
18
|
const [showTips, setShowTips] = useLocalStorage('multiwiggle-showTips', true);
|
|
19
19
|
return (React.createElement(DraggableDialog, { open: true, onClose: handleClose, maxWidth: "xl", title: 'Multi-wiggle color/arrangement editor' },
|
|
20
20
|
React.createElement(DialogContent, { className: classes.content },
|
|
21
|
-
React.createElement(Button, { variant: "contained", style: { float: 'right' }, onClick: () =>
|
|
21
|
+
React.createElement(Button, { variant: "contained", style: { float: 'right' }, onClick: () => {
|
|
22
|
+
setShowTips(!showTips);
|
|
23
|
+
} }, showTips ? 'Hide tips' : 'Show tips'),
|
|
22
24
|
React.createElement("br", null),
|
|
23
25
|
showTips ? (React.createElement(React.Fragment, null,
|
|
24
26
|
"Helpful tips",
|
|
@@ -30,17 +30,27 @@ function SourcesGrid({ rows, onChange, showTips, }) {
|
|
|
30
30
|
field: null,
|
|
31
31
|
});
|
|
32
32
|
return (React.createElement("div", null,
|
|
33
|
-
React.createElement(Button, { disabled: !selected.length, onClick: event =>
|
|
34
|
-
|
|
33
|
+
React.createElement(Button, { disabled: !selected.length, onClick: event => {
|
|
34
|
+
setAnchorEl(event.currentTarget);
|
|
35
|
+
} }, "Change color of selected items"),
|
|
36
|
+
React.createElement(Button, { onClick: () => {
|
|
37
|
+
onChange(moveUp([...rows], selected));
|
|
38
|
+
}, disabled: !selected.length },
|
|
35
39
|
React.createElement(KeyboardArrowUpIcon, null),
|
|
36
40
|
showTips ? 'Move selected items up' : null),
|
|
37
|
-
React.createElement(Button, { onClick: () =>
|
|
41
|
+
React.createElement(Button, { onClick: () => {
|
|
42
|
+
onChange(moveDown([...rows], selected));
|
|
43
|
+
}, disabled: !selected.length },
|
|
38
44
|
React.createElement(KeyboardArrowDownIcon, null),
|
|
39
45
|
showTips ? 'Move selected items down' : null),
|
|
40
|
-
React.createElement(Button, { onClick: () =>
|
|
46
|
+
React.createElement(Button, { onClick: () => {
|
|
47
|
+
onChange(moveUp([...rows], selected, rows.length));
|
|
48
|
+
}, disabled: !selected.length },
|
|
41
49
|
React.createElement(KeyboardDoubleArrowUpIcon, null),
|
|
42
50
|
showTips ? 'Move selected items to top' : null),
|
|
43
|
-
React.createElement(Button, { onClick: () =>
|
|
51
|
+
React.createElement(Button, { onClick: () => {
|
|
52
|
+
onChange(moveDown([...rows], selected, rows.length));
|
|
53
|
+
}, disabled: !selected.length },
|
|
44
54
|
React.createElement(KeyboardDoubleArrowDownIcon, null),
|
|
45
55
|
showTips ? 'Move selected items to bottom' : null),
|
|
46
56
|
React.createElement(ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
|
|
@@ -52,9 +62,13 @@ function SourcesGrid({ rows, onChange, showTips, }) {
|
|
|
52
62
|
}
|
|
53
63
|
});
|
|
54
64
|
onChange([...rows]);
|
|
55
|
-
}, onClose: () =>
|
|
65
|
+
}, onClose: () => {
|
|
66
|
+
setAnchorEl(null);
|
|
67
|
+
} }),
|
|
56
68
|
React.createElement("div", { style: { height: 400, width: '100%' } },
|
|
57
|
-
React.createElement(DataGrid, { getRowId: row => row.name, checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg =>
|
|
69
|
+
React.createElement(DataGrid, { getRowId: row => row.name, checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => {
|
|
70
|
+
setSelected(arg);
|
|
71
|
+
}, rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
|
|
58
72
|
{
|
|
59
73
|
field: 'color',
|
|
60
74
|
headerName: 'Color',
|
|
@@ -89,7 +103,7 @@ function SourcesGrid({ rows, onChange, showTips, }) {
|
|
|
89
103
|
// thing since we are controlling sort instead of the default data
|
|
90
104
|
// grid sort anyways
|
|
91
105
|
const idx = (currSort.idx + 1) % 2;
|
|
92
|
-
const field =
|
|
106
|
+
const field = sort.field || currSort.field;
|
|
93
107
|
setCurrSort({ idx, field });
|
|
94
108
|
onChange(field
|
|
95
109
|
? [...rows].sort((a, b) => {
|
|
@@ -22,13 +22,10 @@ const TooltipContents = React.forwardRef(function TooltipContents2({ model, feat
|
|
|
22
22
|
React.createElement("th", null, "color"),
|
|
23
23
|
React.createElement("th", null, "source"),
|
|
24
24
|
React.createElement("th", null, "score"))),
|
|
25
|
-
React.createElement("tbody", null, Object.entries(sources).map(([source, data]) => {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
React.createElement("td", null, source),
|
|
30
|
-
React.createElement("td", null, toP(data.score))));
|
|
31
|
-
})))) : (React.createElement("span", null,
|
|
25
|
+
React.createElement("tbody", null, Object.entries(sources).map(([source, data]) => (React.createElement("tr", { key: source },
|
|
26
|
+
React.createElement("td", { style: { background: obj[source].color } }, " "),
|
|
27
|
+
React.createElement("td", null, source),
|
|
28
|
+
React.createElement("td", null, toP(data.score)))))))) : (React.createElement("span", null,
|
|
32
29
|
source,
|
|
33
30
|
' ',
|
|
34
31
|
summary
|
|
@@ -27,9 +27,9 @@ export const YScaleBars = observer(function (props) {
|
|
|
27
27
|
if (!ready) {
|
|
28
28
|
return null;
|
|
29
29
|
}
|
|
30
|
-
const labelWidth = Math.max(...
|
|
30
|
+
const labelWidth = Math.max(...sources
|
|
31
31
|
.map(s => measureText(s.name, svgFontSize))
|
|
32
|
-
.map(width => (canDisplayLabel ? width : minWidth))
|
|
32
|
+
.map(width => (canDisplayLabel ? width : minWidth)));
|
|
33
33
|
return (React.createElement(Wrapper, { ...props }, needsFullHeightScalebar ? (React.createElement(React.Fragment, null,
|
|
34
34
|
React.createElement("g", { transform: `translate(${!exportSVG ? getOffset(model) : 0},0)` },
|
|
35
35
|
React.createElement(YScaleBar, { model: model, orientation: orientation })),
|
|
@@ -157,7 +157,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
|
|
|
157
157
|
}, import("mobx-state-tree" /**
|
|
158
158
|
* #property
|
|
159
159
|
*/)._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
|
|
160
|
-
onHorizontalScroll?:
|
|
160
|
+
onHorizontalScroll?: () => void;
|
|
161
161
|
blockState?: Record<string, any>;
|
|
162
162
|
}>;
|
|
163
163
|
readonly DisplayBlurb: React.FC<{
|
|
@@ -248,8 +248,12 @@ export function stateModelFactory(pluginManager, configSchema) {
|
|
|
248
248
|
scaleOpts,
|
|
249
249
|
sources,
|
|
250
250
|
ticks,
|
|
251
|
-
onMouseMove: (_, f) =>
|
|
252
|
-
|
|
251
|
+
onMouseMove: (_, f) => {
|
|
252
|
+
self.setFeatureUnderMouse(f);
|
|
253
|
+
},
|
|
254
|
+
onMouseLeave: () => {
|
|
255
|
+
self.setFeatureUnderMouse(undefined);
|
|
256
|
+
},
|
|
253
257
|
};
|
|
254
258
|
},
|
|
255
259
|
/**
|
|
@@ -271,7 +275,7 @@ export function stateModelFactory(pluginManager, configSchema) {
|
|
|
271
275
|
if (self.filled) {
|
|
272
276
|
return 0;
|
|
273
277
|
}
|
|
274
|
-
else if (
|
|
278
|
+
else if (self.minSize === 1) {
|
|
275
279
|
return 1;
|
|
276
280
|
}
|
|
277
281
|
else {
|
|
@@ -302,7 +306,9 @@ export function stateModelFactory(pluginManager, configSchema) {
|
|
|
302
306
|
label: elt,
|
|
303
307
|
type: 'radio',
|
|
304
308
|
checked: self.fillSetting === idx,
|
|
305
|
-
onClick: () =>
|
|
309
|
+
onClick: () => {
|
|
310
|
+
self.setFill(idx);
|
|
311
|
+
},
|
|
306
312
|
})),
|
|
307
313
|
},
|
|
308
314
|
]
|
|
@@ -313,7 +319,9 @@ export function stateModelFactory(pluginManager, configSchema) {
|
|
|
313
319
|
type: 'checkbox',
|
|
314
320
|
label: 'Draw cross hatches',
|
|
315
321
|
checked: self.displayCrossHatchesSetting,
|
|
316
|
-
onClick: () =>
|
|
322
|
+
onClick: () => {
|
|
323
|
+
self.toggleCrossHatches();
|
|
324
|
+
},
|
|
317
325
|
},
|
|
318
326
|
]
|
|
319
327
|
: []),
|
|
@@ -331,7 +339,9 @@ export function stateModelFactory(pluginManager, configSchema) {
|
|
|
331
339
|
label: key,
|
|
332
340
|
type: 'radio',
|
|
333
341
|
checked: self.rendererTypeNameSimple === key,
|
|
334
|
-
onClick: () =>
|
|
342
|
+
onClick: () => {
|
|
343
|
+
self.setRendererType(key);
|
|
344
|
+
},
|
|
335
345
|
})),
|
|
336
346
|
},
|
|
337
347
|
]
|
|
@@ -5,7 +5,7 @@ export default class MultiRowLineRenderer extends WiggleBaseRenderer {
|
|
|
5
5
|
// @ts-expect-error
|
|
6
6
|
async draw(ctx, props) {
|
|
7
7
|
const { bpPerPx, sources, regions, features } = props;
|
|
8
|
-
const
|
|
8
|
+
const region = regions[0];
|
|
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;
|