@jbrowse/plugin-alignments 3.2.0 → 3.3.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/AlignmentsFeatureDetail/LinkedPairedAlignments.d.ts +1 -1
- package/dist/AlignmentsFeatureDetail/LinkedPairedAlignments.js +1 -1
- package/dist/AlignmentsFeatureDetail/stateModelFactory.js +1 -2
- package/dist/PileupRenderer/PileupRenderer.d.ts +1 -30
- package/dist/PileupRenderer/makeImageData.js +9 -14
- package/dist/SNPCoverageRenderer/makeImage.js +25 -36
- package/esm/AlignmentsFeatureDetail/LinkedPairedAlignments.d.ts +1 -1
- package/esm/AlignmentsFeatureDetail/LinkedPairedAlignments.js +1 -1
- package/esm/AlignmentsFeatureDetail/stateModelFactory.js +1 -2
- package/esm/PileupRenderer/PileupRenderer.d.ts +1 -30
- package/esm/PileupRenderer/makeImageData.js +3 -8
- package/esm/SNPCoverageRenderer/makeImage.js +26 -37
- package/package.json +8 -8
|
@@ -3,4 +3,4 @@ import type { SimpleFeatureSerialized } from '@jbrowse/core/util';
|
|
|
3
3
|
export default function SuppAlignments(props: {
|
|
4
4
|
model: AlignmentFeatureWidgetModel;
|
|
5
5
|
feature: SimpleFeatureSerialized;
|
|
6
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -18,5 +18,5 @@ function SuppAlignments(props) {
|
|
|
18
18
|
}
|
|
19
19
|
catch (e) {
|
|
20
20
|
}
|
|
21
|
-
return ((0, jsx_runtime_1.jsx)(BaseCard_1.default, { ...props, title: "Paired alignments", children:
|
|
21
|
+
return hasBreakendSplitView ? ((0, jsx_runtime_1.jsx)(BaseCard_1.default, { ...props, title: "Paired alignments", children: (0, jsx_runtime_1.jsx)(LaunchPairedEndBreakpointSplitViewPanel_1.default, { model: model, feature: feature }) })) : null;
|
|
22
22
|
}
|
|
@@ -4,8 +4,7 @@ exports.stateModelFactory = stateModelFactory;
|
|
|
4
4
|
const BaseFeatureWidget_1 = require("@jbrowse/core/BaseFeatureWidget");
|
|
5
5
|
const mobx_state_tree_1 = require("mobx-state-tree");
|
|
6
6
|
function stateModelFactory(pluginManager) {
|
|
7
|
-
|
|
8
|
-
return mobx_state_tree_1.types.compose(baseModel, mobx_state_tree_1.types.model('AlignmentsFeatureWidget', {
|
|
7
|
+
return mobx_state_tree_1.types.compose((0, BaseFeatureWidget_1.stateModelFactory)(pluginManager), mobx_state_tree_1.types.model('AlignmentsFeatureWidget', {
|
|
9
8
|
type: mobx_state_tree_1.types.literal('AlignmentsFeatureWidget'),
|
|
10
9
|
}));
|
|
11
10
|
}
|
|
@@ -13,36 +13,7 @@ export default class PileupRenderer extends BoxRendererType {
|
|
|
13
13
|
reversed?: boolean | undefined;
|
|
14
14
|
assemblyName: string;
|
|
15
15
|
};
|
|
16
|
-
render(renderProps: RenderArgsDeserialized): Promise<
|
|
17
|
-
features: Map<any, any>;
|
|
18
|
-
layout: import("@jbrowse/core/util/layouts").GranularRectLayout<unknown>;
|
|
19
|
-
height: number;
|
|
20
|
-
width: number;
|
|
21
|
-
maxHeightReached: boolean;
|
|
22
|
-
containsNoTransferables: boolean;
|
|
23
|
-
canvasRecordedData: any;
|
|
24
|
-
reactElement?: React.ReactElement;
|
|
25
|
-
html?: string;
|
|
26
|
-
} | {
|
|
27
|
-
features: Map<any, any>;
|
|
28
|
-
layout: import("@jbrowse/core/util/layouts").GranularRectLayout<unknown>;
|
|
29
|
-
height: number;
|
|
30
|
-
width: number;
|
|
31
|
-
maxHeightReached: boolean;
|
|
32
|
-
containsNoTransferables: boolean;
|
|
33
|
-
reactElement: import("react/jsx-runtime").JSX.Element;
|
|
34
|
-
html?: string;
|
|
35
|
-
} | {
|
|
36
|
-
features: Map<any, any>;
|
|
37
|
-
layout: import("@jbrowse/core/util/layouts").GranularRectLayout<unknown>;
|
|
38
|
-
height: number;
|
|
39
|
-
width: number;
|
|
40
|
-
maxHeightReached: boolean;
|
|
41
|
-
containsNoTransferables: boolean;
|
|
42
|
-
imageData: any;
|
|
43
|
-
reactElement?: React.ReactElement;
|
|
44
|
-
html?: string;
|
|
45
|
-
}>;
|
|
16
|
+
render(renderProps: RenderArgsDeserialized): Promise<any>;
|
|
46
17
|
createLayoutSession(args: PileupLayoutSessionProps): PileupLayoutSession;
|
|
47
18
|
}
|
|
48
19
|
export type { RenderArgs, RenderArgsSerialized, RenderResults, ResultsDeserialized, ResultsSerialized, } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
|
|
@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.makeImageData = makeImageData;
|
|
4
4
|
const configuration_1 = require("@jbrowse/core/configuration");
|
|
5
5
|
const ui_1 = require("@jbrowse/core/ui");
|
|
6
|
-
const
|
|
6
|
+
const util_1 = require("@jbrowse/core/util");
|
|
7
7
|
const renderAlignment_1 = require("./renderAlignment");
|
|
8
8
|
const renderMismatches_1 = require("./renderMismatches");
|
|
9
9
|
const renderSoftClipping_1 = require("./renderSoftClipping");
|
|
10
|
-
const
|
|
10
|
+
const util_2 = require("./util");
|
|
11
11
|
function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
|
|
12
12
|
const { stopToken, config, showSoftClip, colorBy, theme: configTheme, } = renderArgs;
|
|
13
13
|
const mismatchAlpha = (0, configuration_1.readConfObject)(config, 'mismatchAlpha');
|
|
@@ -16,18 +16,13 @@ function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
|
|
|
16
16
|
const hideSmallIndels = (0, configuration_1.readConfObject)(config, 'hideSmallIndels');
|
|
17
17
|
const defaultColor = (0, configuration_1.readConfObject)(config, 'color') === '#f0f';
|
|
18
18
|
const theme = (0, ui_1.createJBrowseTheme)(configTheme);
|
|
19
|
-
const colorMap = (0,
|
|
20
|
-
const colorContrastMap = (0,
|
|
19
|
+
const colorMap = (0, util_2.getColorBaseMap)(theme);
|
|
20
|
+
const colorContrastMap = (0, util_2.getContrastBaseMap)(theme);
|
|
21
21
|
ctx.font = 'bold 10px Courier New,monospace';
|
|
22
|
-
const { charWidth, charHeight } = (0,
|
|
23
|
-
const drawSNPsMuted = (0,
|
|
24
|
-
const drawIndels = (0,
|
|
25
|
-
|
|
26
|
-
for (const feat of layoutRecords) {
|
|
27
|
-
if (performance.now() - start > 400) {
|
|
28
|
-
(0, stopToken_1.checkStopToken)(stopToken);
|
|
29
|
-
start = performance.now();
|
|
30
|
-
}
|
|
22
|
+
const { charWidth, charHeight } = (0, util_2.getCharWidthHeight)();
|
|
23
|
+
const drawSNPsMuted = (0, util_2.shouldDrawSNPsMuted)(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
|
|
24
|
+
const drawIndels = (0, util_2.shouldDrawIndels)();
|
|
25
|
+
(0, util_1.forEachWithStopTokenCheck)(layoutRecords, stopToken, feat => {
|
|
31
26
|
(0, renderAlignment_1.renderAlignment)({
|
|
32
27
|
ctx,
|
|
33
28
|
feat,
|
|
@@ -66,6 +61,6 @@ function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
|
|
|
66
61
|
canvasWidth,
|
|
67
62
|
});
|
|
68
63
|
}
|
|
69
|
-
}
|
|
64
|
+
});
|
|
70
65
|
return undefined;
|
|
71
66
|
}
|
|
@@ -4,7 +4,6 @@ exports.makeImage = makeImage;
|
|
|
4
4
|
const configuration_1 = require("@jbrowse/core/configuration");
|
|
5
5
|
const ui_1 = require("@jbrowse/core/ui");
|
|
6
6
|
const util_1 = require("@jbrowse/core/util");
|
|
7
|
-
const stopToken_1 = require("@jbrowse/core/util/stopToken");
|
|
8
7
|
const plugin_wiggle_1 = require("@jbrowse/plugin-wiggle");
|
|
9
8
|
const util_2 = require("../shared/util");
|
|
10
9
|
const INTERBASE_INDICATOR_WIDTH = 7;
|
|
@@ -18,7 +17,7 @@ const complementBase = {
|
|
|
18
17
|
};
|
|
19
18
|
const fudgeFactor = 0.6;
|
|
20
19
|
async function makeImage(ctx, props) {
|
|
21
|
-
var _a
|
|
20
|
+
var _a;
|
|
22
21
|
const { features, regions, bpPerPx, colorBy, displayCrossHatches, visibleModifications = {}, scaleOpts, height: unadjustedHeight, theme: configTheme, config: cfg, ticks, stopToken, } = props;
|
|
23
22
|
const theme = (0, ui_1.createJBrowseTheme)(configTheme);
|
|
24
23
|
const region = regions[0];
|
|
@@ -56,35 +55,25 @@ async function makeImage(ctx, props) {
|
|
|
56
55
|
cpg_meth: 'red',
|
|
57
56
|
cpg_unmeth: 'blue',
|
|
58
57
|
};
|
|
59
|
-
const feats = [...features.values()];
|
|
60
58
|
ctx.fillStyle = colorMap.total;
|
|
61
|
-
|
|
62
|
-
for (const feature of feats) {
|
|
59
|
+
(0, util_1.forEachWithStopTokenCheck)(features.values(), stopToken, feature => {
|
|
63
60
|
if (feature.get('type') === 'skip') {
|
|
64
|
-
|
|
61
|
+
return;
|
|
65
62
|
}
|
|
66
63
|
const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
|
|
67
64
|
const w = rightPx - leftPx + fudgeFactor;
|
|
68
65
|
const score = feature.get('score');
|
|
69
66
|
ctx.fillRect(leftPx, toY(score), w, toHeight(score));
|
|
70
|
-
|
|
71
|
-
(0, stopToken_1.checkStopToken)(stopToken);
|
|
72
|
-
start = performance.now();
|
|
73
|
-
}
|
|
74
|
-
}
|
|
67
|
+
});
|
|
75
68
|
let prevTotal = 0;
|
|
76
69
|
const extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx : 0;
|
|
77
70
|
const drawingModifications = colorBy.type === 'modifications';
|
|
78
71
|
const drawingMethylation = colorBy.type === 'methylation';
|
|
79
72
|
const isolatedModification = (_a = colorBy.modifications) === null || _a === void 0 ? void 0 : _a.isolatedModification;
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
const now = performance.now();
|
|
83
|
-
if (now - start > 400) {
|
|
84
|
-
(0, stopToken_1.checkStopToken)(stopToken);
|
|
85
|
-
}
|
|
73
|
+
(0, util_1.forEachWithStopTokenCheck)(features.values(), stopToken, feature => {
|
|
74
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
86
75
|
if (feature.get('type') === 'skip') {
|
|
87
|
-
|
|
76
|
+
return;
|
|
88
77
|
}
|
|
89
78
|
const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
|
|
90
79
|
const snpinfo = feature.get('snpinfo');
|
|
@@ -92,7 +81,7 @@ async function makeImage(ctx, props) {
|
|
|
92
81
|
const score0 = feature.get('score');
|
|
93
82
|
if (drawingModifications) {
|
|
94
83
|
let curr = 0;
|
|
95
|
-
const refbase = (
|
|
84
|
+
const refbase = (_a = snpinfo.refbase) === null || _a === void 0 ? void 0 : _a.toUpperCase();
|
|
96
85
|
const { nonmods, mods, snps, ref } = snpinfo;
|
|
97
86
|
for (const m of Object.keys(nonmods).sort().reverse()) {
|
|
98
87
|
const mod = visibleModifications[m.replace('nonmod_', '')] ||
|
|
@@ -107,14 +96,14 @@ async function makeImage(ctx, props) {
|
|
|
107
96
|
const cmp = complementBase[mod.base];
|
|
108
97
|
const detectable = mod.base === 'N'
|
|
109
98
|
? score0
|
|
110
|
-
: (((
|
|
111
|
-
(((
|
|
99
|
+
: (((_b = snps[mod.base]) === null || _b === void 0 ? void 0 : _b.entryDepth) || 0) +
|
|
100
|
+
(((_c = snps[cmp]) === null || _c === void 0 ? void 0 : _c.entryDepth) || 0) +
|
|
112
101
|
(refbase === mod.base ? ref['1'] : 0) +
|
|
113
102
|
(refbase === cmp ? ref['-1'] : 0);
|
|
114
103
|
const modifiable = mod.base === 'N'
|
|
115
104
|
? score0
|
|
116
|
-
: (((
|
|
117
|
-
(((
|
|
105
|
+
: (((_d = snps[mod.base]) === null || _d === void 0 ? void 0 : _d.entryDepth) || 0) +
|
|
106
|
+
(((_e = snps[cmp]) === null || _e === void 0 ? void 0 : _e.entryDepth) || 0) +
|
|
118
107
|
(refbase === mod.base ? ref.entryDepth : 0) +
|
|
119
108
|
(refbase === cmp ? ref.entryDepth : 0);
|
|
120
109
|
const { entryDepth, avgProbability = 0 } = snpinfo.nonmods[m];
|
|
@@ -139,14 +128,14 @@ async function makeImage(ctx, props) {
|
|
|
139
128
|
const cmp = complementBase[mod.base];
|
|
140
129
|
const detectable = mod.base === 'N'
|
|
141
130
|
? score0
|
|
142
|
-
: (((
|
|
143
|
-
(((
|
|
131
|
+
: (((_f = snps[mod.base]) === null || _f === void 0 ? void 0 : _f.entryDepth) || 0) +
|
|
132
|
+
(((_g = snps[cmp]) === null || _g === void 0 ? void 0 : _g.entryDepth) || 0) +
|
|
144
133
|
(refbase === mod.base ? ref['1'] : 0) +
|
|
145
134
|
(refbase === cmp ? ref['-1'] : 0);
|
|
146
135
|
const modifiable = mod.base === 'N'
|
|
147
136
|
? score0
|
|
148
|
-
: (((
|
|
149
|
-
(((
|
|
137
|
+
: (((_h = snps[mod.base]) === null || _h === void 0 ? void 0 : _h.entryDepth) || 0) +
|
|
138
|
+
(((_j = snps[cmp]) === null || _j === void 0 ? void 0 : _j.entryDepth) || 0) +
|
|
150
139
|
(refbase === mod.base ? ref.entryDepth : 0) +
|
|
151
140
|
(refbase === cmp ? ref.entryDepth : 0);
|
|
152
141
|
const { entryDepth, avgProbability = 0 } = mods[m];
|
|
@@ -228,17 +217,17 @@ async function makeImage(ctx, props) {
|
|
|
228
217
|
}
|
|
229
218
|
}
|
|
230
219
|
prevTotal = score0;
|
|
231
|
-
}
|
|
220
|
+
});
|
|
232
221
|
if (showArcs) {
|
|
233
|
-
|
|
234
|
-
if (
|
|
235
|
-
|
|
222
|
+
(0, util_1.forEachWithStopTokenCheck)(features.values(), stopToken, feature => {
|
|
223
|
+
if (feature.get('type') !== 'skip') {
|
|
224
|
+
return;
|
|
236
225
|
}
|
|
237
|
-
const s =
|
|
238
|
-
const e =
|
|
226
|
+
const s = feature.get('start');
|
|
227
|
+
const e = feature.get('end');
|
|
239
228
|
const [left, right] = (0, util_1.bpSpanPx)(s, e, region, bpPerPx);
|
|
240
229
|
ctx.beginPath();
|
|
241
|
-
const effectiveStrand =
|
|
230
|
+
const effectiveStrand = feature.get('effectiveStrand');
|
|
242
231
|
const pos = 'rgba(255,200,200,0.7)';
|
|
243
232
|
const neg = 'rgba(200,200,255,0.7)';
|
|
244
233
|
const neutral = 'rgba(200,200,200,0.7)';
|
|
@@ -251,11 +240,11 @@ async function makeImage(ctx, props) {
|
|
|
251
240
|
else {
|
|
252
241
|
ctx.strokeStyle = neutral;
|
|
253
242
|
}
|
|
254
|
-
ctx.lineWidth = Math.log(
|
|
243
|
+
ctx.lineWidth = Math.log(feature.get('score') + 1);
|
|
255
244
|
ctx.moveTo(left, height - offset * 2);
|
|
256
245
|
ctx.bezierCurveTo(left, 0, right, 0, right, height - offset * 2);
|
|
257
246
|
ctx.stroke();
|
|
258
|
-
}
|
|
247
|
+
});
|
|
259
248
|
}
|
|
260
249
|
if (displayCrossHatches) {
|
|
261
250
|
ctx.lineWidth = 1;
|
|
@@ -3,4 +3,4 @@ import type { SimpleFeatureSerialized } from '@jbrowse/core/util';
|
|
|
3
3
|
export default function SuppAlignments(props: {
|
|
4
4
|
model: AlignmentFeatureWidgetModel;
|
|
5
5
|
feature: SimpleFeatureSerialized;
|
|
6
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -12,5 +12,5 @@ export default function SuppAlignments(props) {
|
|
|
12
12
|
}
|
|
13
13
|
catch (e) {
|
|
14
14
|
}
|
|
15
|
-
return (_jsx(BaseCard, { ...props, title: "Paired alignments", children:
|
|
15
|
+
return hasBreakendSplitView ? (_jsx(BaseCard, { ...props, title: "Paired alignments", children: _jsx(LaunchPairedEndBreakpointSplitViewPanel, { model: model, feature: feature }) })) : null;
|
|
16
16
|
}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { stateModelFactory as baseModelFactory } from '@jbrowse/core/BaseFeatureWidget';
|
|
2
2
|
import { types } from 'mobx-state-tree';
|
|
3
3
|
export function stateModelFactory(pluginManager) {
|
|
4
|
-
|
|
5
|
-
return types.compose(baseModel, types.model('AlignmentsFeatureWidget', {
|
|
4
|
+
return types.compose(baseModelFactory(pluginManager), types.model('AlignmentsFeatureWidget', {
|
|
6
5
|
type: types.literal('AlignmentsFeatureWidget'),
|
|
7
6
|
}));
|
|
8
7
|
}
|
|
@@ -13,36 +13,7 @@ export default class PileupRenderer extends BoxRendererType {
|
|
|
13
13
|
reversed?: boolean | undefined;
|
|
14
14
|
assemblyName: string;
|
|
15
15
|
};
|
|
16
|
-
render(renderProps: RenderArgsDeserialized): Promise<
|
|
17
|
-
features: Map<any, any>;
|
|
18
|
-
layout: import("@jbrowse/core/util/layouts").GranularRectLayout<unknown>;
|
|
19
|
-
height: number;
|
|
20
|
-
width: number;
|
|
21
|
-
maxHeightReached: boolean;
|
|
22
|
-
containsNoTransferables: boolean;
|
|
23
|
-
canvasRecordedData: any;
|
|
24
|
-
reactElement?: React.ReactElement;
|
|
25
|
-
html?: string;
|
|
26
|
-
} | {
|
|
27
|
-
features: Map<any, any>;
|
|
28
|
-
layout: import("@jbrowse/core/util/layouts").GranularRectLayout<unknown>;
|
|
29
|
-
height: number;
|
|
30
|
-
width: number;
|
|
31
|
-
maxHeightReached: boolean;
|
|
32
|
-
containsNoTransferables: boolean;
|
|
33
|
-
reactElement: import("react/jsx-runtime").JSX.Element;
|
|
34
|
-
html?: string;
|
|
35
|
-
} | {
|
|
36
|
-
features: Map<any, any>;
|
|
37
|
-
layout: import("@jbrowse/core/util/layouts").GranularRectLayout<unknown>;
|
|
38
|
-
height: number;
|
|
39
|
-
width: number;
|
|
40
|
-
maxHeightReached: boolean;
|
|
41
|
-
containsNoTransferables: boolean;
|
|
42
|
-
imageData: any;
|
|
43
|
-
reactElement?: React.ReactElement;
|
|
44
|
-
html?: string;
|
|
45
|
-
}>;
|
|
16
|
+
render(renderProps: RenderArgsDeserialized): Promise<any>;
|
|
46
17
|
createLayoutSession(args: PileupLayoutSessionProps): PileupLayoutSession;
|
|
47
18
|
}
|
|
48
19
|
export type { RenderArgs, RenderArgsSerialized, RenderResults, ResultsDeserialized, ResultsSerialized, } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { readConfObject } from '@jbrowse/core/configuration';
|
|
2
2
|
import { createJBrowseTheme } from '@jbrowse/core/ui';
|
|
3
|
-
import {
|
|
3
|
+
import { forEachWithStopTokenCheck } from '@jbrowse/core/util';
|
|
4
4
|
import { renderAlignment } from './renderAlignment';
|
|
5
5
|
import { renderMismatches } from './renderMismatches';
|
|
6
6
|
import { renderSoftClipping } from './renderSoftClipping';
|
|
@@ -19,12 +19,7 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, })
|
|
|
19
19
|
const { charWidth, charHeight } = getCharWidthHeight();
|
|
20
20
|
const drawSNPsMuted = shouldDrawSNPsMuted(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
|
|
21
21
|
const drawIndels = shouldDrawIndels();
|
|
22
|
-
|
|
23
|
-
for (const feat of layoutRecords) {
|
|
24
|
-
if (performance.now() - start > 400) {
|
|
25
|
-
checkStopToken(stopToken);
|
|
26
|
-
start = performance.now();
|
|
27
|
-
}
|
|
22
|
+
forEachWithStopTokenCheck(layoutRecords, stopToken, feat => {
|
|
28
23
|
renderAlignment({
|
|
29
24
|
ctx,
|
|
30
25
|
feat,
|
|
@@ -63,6 +58,6 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, })
|
|
|
63
58
|
canvasWidth,
|
|
64
59
|
});
|
|
65
60
|
}
|
|
66
|
-
}
|
|
61
|
+
});
|
|
67
62
|
return undefined;
|
|
68
63
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { readConfObject } from '@jbrowse/core/configuration';
|
|
2
2
|
import { createJBrowseTheme } from '@jbrowse/core/ui';
|
|
3
|
-
import { bpSpanPx, featureSpanPx } from '@jbrowse/core/util';
|
|
4
|
-
import { checkStopToken } from '@jbrowse/core/util/stopToken';
|
|
3
|
+
import { bpSpanPx, featureSpanPx, forEachWithStopTokenCheck, } from '@jbrowse/core/util';
|
|
5
4
|
import { YSCALEBAR_LABEL_OFFSET, getOrigin, getScale, } from '@jbrowse/plugin-wiggle';
|
|
6
5
|
import { alphaColor } from '../shared/util';
|
|
7
6
|
const INTERBASE_INDICATOR_WIDTH = 7;
|
|
@@ -15,7 +14,7 @@ const complementBase = {
|
|
|
15
14
|
};
|
|
16
15
|
const fudgeFactor = 0.6;
|
|
17
16
|
export async function makeImage(ctx, props) {
|
|
18
|
-
var _a
|
|
17
|
+
var _a;
|
|
19
18
|
const { features, regions, bpPerPx, colorBy, displayCrossHatches, visibleModifications = {}, scaleOpts, height: unadjustedHeight, theme: configTheme, config: cfg, ticks, stopToken, } = props;
|
|
20
19
|
const theme = createJBrowseTheme(configTheme);
|
|
21
20
|
const region = regions[0];
|
|
@@ -53,35 +52,25 @@ export async function makeImage(ctx, props) {
|
|
|
53
52
|
cpg_meth: 'red',
|
|
54
53
|
cpg_unmeth: 'blue',
|
|
55
54
|
};
|
|
56
|
-
const feats = [...features.values()];
|
|
57
55
|
ctx.fillStyle = colorMap.total;
|
|
58
|
-
|
|
59
|
-
for (const feature of feats) {
|
|
56
|
+
forEachWithStopTokenCheck(features.values(), stopToken, feature => {
|
|
60
57
|
if (feature.get('type') === 'skip') {
|
|
61
|
-
|
|
58
|
+
return;
|
|
62
59
|
}
|
|
63
60
|
const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
|
|
64
61
|
const w = rightPx - leftPx + fudgeFactor;
|
|
65
62
|
const score = feature.get('score');
|
|
66
63
|
ctx.fillRect(leftPx, toY(score), w, toHeight(score));
|
|
67
|
-
|
|
68
|
-
checkStopToken(stopToken);
|
|
69
|
-
start = performance.now();
|
|
70
|
-
}
|
|
71
|
-
}
|
|
64
|
+
});
|
|
72
65
|
let prevTotal = 0;
|
|
73
66
|
const extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx : 0;
|
|
74
67
|
const drawingModifications = colorBy.type === 'modifications';
|
|
75
68
|
const drawingMethylation = colorBy.type === 'methylation';
|
|
76
69
|
const isolatedModification = (_a = colorBy.modifications) === null || _a === void 0 ? void 0 : _a.isolatedModification;
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
const now = performance.now();
|
|
80
|
-
if (now - start > 400) {
|
|
81
|
-
checkStopToken(stopToken);
|
|
82
|
-
}
|
|
70
|
+
forEachWithStopTokenCheck(features.values(), stopToken, feature => {
|
|
71
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
83
72
|
if (feature.get('type') === 'skip') {
|
|
84
|
-
|
|
73
|
+
return;
|
|
85
74
|
}
|
|
86
75
|
const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
|
|
87
76
|
const snpinfo = feature.get('snpinfo');
|
|
@@ -89,7 +78,7 @@ export async function makeImage(ctx, props) {
|
|
|
89
78
|
const score0 = feature.get('score');
|
|
90
79
|
if (drawingModifications) {
|
|
91
80
|
let curr = 0;
|
|
92
|
-
const refbase = (
|
|
81
|
+
const refbase = (_a = snpinfo.refbase) === null || _a === void 0 ? void 0 : _a.toUpperCase();
|
|
93
82
|
const { nonmods, mods, snps, ref } = snpinfo;
|
|
94
83
|
for (const m of Object.keys(nonmods).sort().reverse()) {
|
|
95
84
|
const mod = visibleModifications[m.replace('nonmod_', '')] ||
|
|
@@ -104,14 +93,14 @@ export async function makeImage(ctx, props) {
|
|
|
104
93
|
const cmp = complementBase[mod.base];
|
|
105
94
|
const detectable = mod.base === 'N'
|
|
106
95
|
? score0
|
|
107
|
-
: (((
|
|
108
|
-
(((
|
|
96
|
+
: (((_b = snps[mod.base]) === null || _b === void 0 ? void 0 : _b.entryDepth) || 0) +
|
|
97
|
+
(((_c = snps[cmp]) === null || _c === void 0 ? void 0 : _c.entryDepth) || 0) +
|
|
109
98
|
(refbase === mod.base ? ref['1'] : 0) +
|
|
110
99
|
(refbase === cmp ? ref['-1'] : 0);
|
|
111
100
|
const modifiable = mod.base === 'N'
|
|
112
101
|
? score0
|
|
113
|
-
: (((
|
|
114
|
-
(((
|
|
102
|
+
: (((_d = snps[mod.base]) === null || _d === void 0 ? void 0 : _d.entryDepth) || 0) +
|
|
103
|
+
(((_e = snps[cmp]) === null || _e === void 0 ? void 0 : _e.entryDepth) || 0) +
|
|
115
104
|
(refbase === mod.base ? ref.entryDepth : 0) +
|
|
116
105
|
(refbase === cmp ? ref.entryDepth : 0);
|
|
117
106
|
const { entryDepth, avgProbability = 0 } = snpinfo.nonmods[m];
|
|
@@ -136,14 +125,14 @@ export async function makeImage(ctx, props) {
|
|
|
136
125
|
const cmp = complementBase[mod.base];
|
|
137
126
|
const detectable = mod.base === 'N'
|
|
138
127
|
? score0
|
|
139
|
-
: (((
|
|
140
|
-
(((
|
|
128
|
+
: (((_f = snps[mod.base]) === null || _f === void 0 ? void 0 : _f.entryDepth) || 0) +
|
|
129
|
+
(((_g = snps[cmp]) === null || _g === void 0 ? void 0 : _g.entryDepth) || 0) +
|
|
141
130
|
(refbase === mod.base ? ref['1'] : 0) +
|
|
142
131
|
(refbase === cmp ? ref['-1'] : 0);
|
|
143
132
|
const modifiable = mod.base === 'N'
|
|
144
133
|
? score0
|
|
145
|
-
: (((
|
|
146
|
-
(((
|
|
134
|
+
: (((_h = snps[mod.base]) === null || _h === void 0 ? void 0 : _h.entryDepth) || 0) +
|
|
135
|
+
(((_j = snps[cmp]) === null || _j === void 0 ? void 0 : _j.entryDepth) || 0) +
|
|
147
136
|
(refbase === mod.base ? ref.entryDepth : 0) +
|
|
148
137
|
(refbase === cmp ? ref.entryDepth : 0);
|
|
149
138
|
const { entryDepth, avgProbability = 0 } = mods[m];
|
|
@@ -225,17 +214,17 @@ export async function makeImage(ctx, props) {
|
|
|
225
214
|
}
|
|
226
215
|
}
|
|
227
216
|
prevTotal = score0;
|
|
228
|
-
}
|
|
217
|
+
});
|
|
229
218
|
if (showArcs) {
|
|
230
|
-
|
|
231
|
-
if (
|
|
232
|
-
|
|
219
|
+
forEachWithStopTokenCheck(features.values(), stopToken, feature => {
|
|
220
|
+
if (feature.get('type') !== 'skip') {
|
|
221
|
+
return;
|
|
233
222
|
}
|
|
234
|
-
const s =
|
|
235
|
-
const e =
|
|
223
|
+
const s = feature.get('start');
|
|
224
|
+
const e = feature.get('end');
|
|
236
225
|
const [left, right] = bpSpanPx(s, e, region, bpPerPx);
|
|
237
226
|
ctx.beginPath();
|
|
238
|
-
const effectiveStrand =
|
|
227
|
+
const effectiveStrand = feature.get('effectiveStrand');
|
|
239
228
|
const pos = 'rgba(255,200,200,0.7)';
|
|
240
229
|
const neg = 'rgba(200,200,255,0.7)';
|
|
241
230
|
const neutral = 'rgba(200,200,200,0.7)';
|
|
@@ -248,11 +237,11 @@ export async function makeImage(ctx, props) {
|
|
|
248
237
|
else {
|
|
249
238
|
ctx.strokeStyle = neutral;
|
|
250
239
|
}
|
|
251
|
-
ctx.lineWidth = Math.log(
|
|
240
|
+
ctx.lineWidth = Math.log(feature.get('score') + 1);
|
|
252
241
|
ctx.moveTo(left, height - offset * 2);
|
|
253
242
|
ctx.bezierCurveTo(left, 0, right, 0, right, height - offset * 2);
|
|
254
243
|
ctx.stroke();
|
|
255
|
-
}
|
|
244
|
+
});
|
|
256
245
|
}
|
|
257
246
|
if (displayCrossHatches) {
|
|
258
247
|
ctx.lineWidth = 1;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-alignments",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.3.0",
|
|
4
4
|
"description": "JBrowse 2 alignments adapters, tracks, etc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jbrowse",
|
|
@@ -38,12 +38,12 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@gmod/bam": "^5.0.0",
|
|
40
40
|
"@gmod/cram": "^4.0.1",
|
|
41
|
-
"@jbrowse/core": "^3.
|
|
42
|
-
"@jbrowse/plugin-linear-genome-view": "^3.
|
|
43
|
-
"@jbrowse/plugin-wiggle": "^3.
|
|
44
|
-
"@jbrowse/sv-core": "^3.
|
|
45
|
-
"@mui/icons-material": "^
|
|
46
|
-
"@mui/material": "^
|
|
41
|
+
"@jbrowse/core": "^3.3.0",
|
|
42
|
+
"@jbrowse/plugin-linear-genome-view": "^3.3.0",
|
|
43
|
+
"@jbrowse/plugin-wiggle": "^3.3.0",
|
|
44
|
+
"@jbrowse/sv-core": "^3.3.0",
|
|
45
|
+
"@mui/icons-material": "^7.0.0",
|
|
46
|
+
"@mui/material": "^7.0.0",
|
|
47
47
|
"canvas2svg": "^1.0.16",
|
|
48
48
|
"copy-to-clipboard": "^3.3.1",
|
|
49
49
|
"fast-deep-equal": "^3.1.3",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"distModule": "esm/index.js",
|
|
64
64
|
"srcModule": "src/index.ts",
|
|
65
65
|
"module": "esm/index.js",
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "0bb64d8cc7ecdd167515308b31eec3d9acbc59e4"
|
|
67
67
|
}
|