@jbrowse/plugin-alignments 3.4.0 → 3.5.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/LinearAlignmentsDisplay/model.d.ts +1 -0
- package/dist/LinearAlignmentsDisplay/model.js +5 -2
- package/dist/LinearPileupDisplay/SharedLinearPileupDisplayMixin.d.ts +1 -1
- package/dist/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js +2 -4
- package/dist/LinearPileupDisplay/model.d.ts +1 -1
- package/dist/LinearSNPCoverageDisplay/components/Tooltip.js +5 -44
- package/dist/LinearSNPCoverageDisplay/components/TooltipContents.d.ts +11 -0
- package/dist/LinearSNPCoverageDisplay/components/TooltipContents.js +48 -0
- package/dist/LinearSNPCoverageDisplay/model.js +2 -5
- package/dist/shared/fetchChains.js +2 -1
- package/esm/LinearAlignmentsDisplay/model.d.ts +1 -0
- package/esm/LinearAlignmentsDisplay/model.js +5 -2
- package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.d.ts +1 -1
- package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js +2 -4
- package/esm/LinearPileupDisplay/model.d.ts +1 -1
- package/esm/LinearSNPCoverageDisplay/components/Tooltip.js +2 -44
- package/esm/LinearSNPCoverageDisplay/components/TooltipContents.d.ts +11 -0
- package/esm/LinearSNPCoverageDisplay/components/TooltipContents.js +46 -0
- package/esm/LinearSNPCoverageDisplay/model.js +2 -5
- package/esm/shared/fetchChains.js +3 -2
- package/package.json +6 -6
|
@@ -91,6 +91,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
|
|
|
91
91
|
readonly DisplayBlurb: any;
|
|
92
92
|
readonly sortedBy: any;
|
|
93
93
|
readonly coverageConf: any;
|
|
94
|
+
notReady(): any;
|
|
94
95
|
} & {
|
|
95
96
|
setSNPCoverageDisplay(configuration: AnyConfigurationModel): void;
|
|
96
97
|
setFeatureDensityStatsLimit(stats?: FeatureDensityStats): void;
|
|
@@ -98,6 +98,10 @@ function stateModelFactory(pluginManager, configSchema) {
|
|
|
98
98
|
displayId: `${self.configuration.displayId}_snpcoverage_xyz`,
|
|
99
99
|
};
|
|
100
100
|
},
|
|
101
|
+
notReady() {
|
|
102
|
+
return (self.PileupDisplay.renderProps().notReady ||
|
|
103
|
+
self.SNPCoverageDisplay.renderProps().notReady);
|
|
104
|
+
},
|
|
101
105
|
}))
|
|
102
106
|
.actions(self => ({
|
|
103
107
|
setSNPCoverageDisplay(configuration) {
|
|
@@ -163,8 +167,7 @@ function stateModelFactory(pluginManager, configSchema) {
|
|
|
163
167
|
},
|
|
164
168
|
async renderSvg(opts) {
|
|
165
169
|
const pileupHeight = self.height - self.SNPCoverageDisplay.height;
|
|
166
|
-
await (0, mobx_1.when)(() => !self.
|
|
167
|
-
!self.SNPCoverageDisplay.renderProps().notReady);
|
|
170
|
+
await (0, mobx_1.when)(() => !self.notReady());
|
|
168
171
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("g", { children: await self.SNPCoverageDisplay.renderSvg(opts) }), (0, jsx_runtime_1.jsx)("g", { transform: `translate(0 ${self.SNPCoverageDisplay.height})`, children: await self.PileupDisplay.renderSvg({
|
|
169
172
|
...opts,
|
|
170
173
|
overrideHeight: pileupHeight,
|
|
@@ -201,7 +201,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
|
|
|
201
201
|
} & {
|
|
202
202
|
addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
|
|
203
203
|
deleteBlock(key: string): void;
|
|
204
|
-
selectFeature(feature: Feature):
|
|
204
|
+
selectFeature(feature: Feature): void;
|
|
205
205
|
navToFeature(feature: Feature): void;
|
|
206
206
|
clearFeatureSelection(): void;
|
|
207
207
|
setFeatureIdUnderMouse(feature?: string): void;
|
|
@@ -225,9 +225,7 @@ function SharedLinearPileupDisplayMixin(configSchema) {
|
|
|
225
225
|
icon: MenuOpen_1.default,
|
|
226
226
|
onClick: () => {
|
|
227
227
|
self.clearFeatureSelection();
|
|
228
|
-
self.selectFeature(feat)
|
|
229
|
-
(0, util_1.getSession)(self).notifyError(`${e}`, e);
|
|
230
|
-
});
|
|
228
|
+
self.selectFeature(feat);
|
|
231
229
|
},
|
|
232
230
|
},
|
|
233
231
|
{
|
|
@@ -273,7 +271,7 @@ function SharedLinearPileupDisplayMixin(configSchema) {
|
|
|
273
271
|
rendererType: 'PileupRenderer',
|
|
274
272
|
}));
|
|
275
273
|
if ((0, mobx_state_tree_1.isAlive)(self) && feature) {
|
|
276
|
-
|
|
274
|
+
self.selectFeature(new util_1.SimpleFeature(feature));
|
|
277
275
|
}
|
|
278
276
|
}
|
|
279
277
|
}
|
|
@@ -205,7 +205,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
|
|
|
205
205
|
} & {
|
|
206
206
|
addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
|
|
207
207
|
deleteBlock(key: string): void;
|
|
208
|
-
selectFeature(feature: import("@jbrowse/core/util").Feature):
|
|
208
|
+
selectFeature(feature: import("@jbrowse/core/util").Feature): void;
|
|
209
209
|
navToFeature(feature: import("@jbrowse/core/util").Feature): void;
|
|
210
210
|
clearFeatureSelection(): void;
|
|
211
211
|
setFeatureIdUnderMouse(feature?: string): void;
|
|
@@ -1,54 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
-
const react_1 = require("react");
|
|
5
|
-
const util_1 = require("@jbrowse/core/util");
|
|
6
7
|
const plugin_wiggle_1 = require("@jbrowse/plugin-wiggle");
|
|
7
8
|
const mobx_react_1 = require("mobx-react");
|
|
8
|
-
const
|
|
9
|
-
const useStyles = (0, mui_1.makeStyles)()(() => ({
|
|
10
|
-
td: {
|
|
11
|
-
whiteSpace: 'nowrap',
|
|
12
|
-
},
|
|
13
|
-
}));
|
|
14
|
-
const toP = (s = 0) => +(+s).toFixed(1);
|
|
15
|
-
const pct = (n, total = 1) => `${toP((n / (total || 1)) * 100)}%`;
|
|
16
|
-
const TooltipContents = (0, react_1.forwardRef)(function TooltipContents2(props, reactRef) {
|
|
17
|
-
const { feature, model } = props;
|
|
18
|
-
const { classes } = useStyles();
|
|
19
|
-
const start = feature.get('start') + 1;
|
|
20
|
-
const end = feature.get('end');
|
|
21
|
-
const name = feature.get('refName');
|
|
22
|
-
const { refbase, readsCounted, depth, ref, ...info } = feature.get('snpinfo');
|
|
23
|
-
const loc = [
|
|
24
|
-
name,
|
|
25
|
-
start === end ? (0, util_1.toLocale)(start) : `${(0, util_1.toLocale)(start)}..${(0, util_1.toLocale)(end)}`,
|
|
26
|
-
]
|
|
27
|
-
.filter(f => !!f)
|
|
28
|
-
.join(':');
|
|
29
|
-
return ((0, jsx_runtime_1.jsx)("div", { ref: reactRef, children: (0, jsx_runtime_1.jsxs)("table", { children: [(0, jsx_runtime_1.jsx)("caption", { children: loc }), (0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", {}), (0, jsx_runtime_1.jsx)("th", { children: "Base" }), (0, jsx_runtime_1.jsx)("th", { children: "Count" }), (0, jsx_runtime_1.jsx)("th", { children: "% of Total" }), (0, jsx_runtime_1.jsx)("th", { children: "Strands" })] }) }), (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", {}), (0, jsx_runtime_1.jsx)("td", { children: "Total" }), (0, jsx_runtime_1.jsx)("td", { children: readsCounted }), (0, jsx_runtime_1.jsx)("td", { children: " " }), (0, jsx_runtime_1.jsx)("td", { children: " " })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", {}), (0, jsx_runtime_1.jsxs)("td", { children: ["REF ", refbase ? `(${refbase.toUpperCase()})` : ''] }), (0, jsx_runtime_1.jsx)("td", { children: ref.entryDepth }), (0, jsx_runtime_1.jsx)("td", { children: pct(ref.entryDepth, readsCounted) }), (0, jsx_runtime_1.jsxs)("td", { children: [ref['-1'] ? `${ref['-1']}(-)` : '', ref['1'] ? `${ref['1']}(+)` : ''] })] }), Object.entries(info).map(([key, entry]) => Object.entries(entry).map(([base, score]) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(ColorSquare, { model: model, base: base }) }), (0, jsx_runtime_1.jsxs)("td", { children: [base.toUpperCase(), " "] }), (0, jsx_runtime_1.jsx)("td", { className: classes.td, children: [
|
|
30
|
-
score.entryDepth,
|
|
31
|
-
score.avgProbability !== undefined
|
|
32
|
-
? `(avg. ${pct(score.avgProbability)} prob.)`
|
|
33
|
-
: '',
|
|
34
|
-
]
|
|
35
|
-
.filter(f => !!f)
|
|
36
|
-
.join(' ') }), (0, jsx_runtime_1.jsx)("td", { children: base === 'depth' || base === 'skip'
|
|
37
|
-
? '---'
|
|
38
|
-
: pct(score.entryDepth, readsCounted) }), (0, jsx_runtime_1.jsxs)("td", { children: [score['-1'] ? `${score['-1']}(-)` : '', score['1'] ? `${score['1']}(+)` : ''] })] }, `${key}_${base}`))))] })] }) }));
|
|
39
|
-
});
|
|
40
|
-
function ColorSquare({ base, model, }) {
|
|
41
|
-
var _a;
|
|
42
|
-
const { visibleModifications } = model;
|
|
43
|
-
return base.startsWith('mod_') ? ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
44
|
-
width: 10,
|
|
45
|
-
height: 10,
|
|
46
|
-
background: (_a = visibleModifications.get(base.replace('mod_', ''))) === null || _a === void 0 ? void 0 : _a.color,
|
|
47
|
-
} })) : null;
|
|
48
|
-
}
|
|
9
|
+
const TooltipContents_1 = __importDefault(require("./TooltipContents"));
|
|
49
10
|
const SNPCoverageTooltip = (0, mobx_react_1.observer)(function (props) {
|
|
50
11
|
const { model } = props;
|
|
51
12
|
const { featureUnderMouse: feat } = model;
|
|
52
|
-
return feat && feat.get('type') === 'skip' ? null : ((0, jsx_runtime_1.jsx)(plugin_wiggle_1.Tooltip, { TooltipContents:
|
|
13
|
+
return feat && feat.get('type') === 'skip' ? null : ((0, jsx_runtime_1.jsx)(plugin_wiggle_1.Tooltip, { TooltipContents: TooltipContents_1.default, ...props }));
|
|
53
14
|
});
|
|
54
15
|
exports.default = SNPCoverageTooltip;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Feature } from '@jbrowse/core/util';
|
|
2
|
+
interface Props {
|
|
3
|
+
feature: Feature;
|
|
4
|
+
model: {
|
|
5
|
+
visibleModifications: Map<string, {
|
|
6
|
+
color: string;
|
|
7
|
+
}>;
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
declare const TooltipContents: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
|
|
11
|
+
export default TooltipContents;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
const util_1 = require("@jbrowse/core/util");
|
|
6
|
+
const mui_1 = require("tss-react/mui");
|
|
7
|
+
const useStyles = (0, mui_1.makeStyles)()(() => ({
|
|
8
|
+
td: {
|
|
9
|
+
whiteSpace: 'nowrap',
|
|
10
|
+
},
|
|
11
|
+
}));
|
|
12
|
+
const toP = (s = 0) => +(+s).toFixed(1);
|
|
13
|
+
const pct = (n, total = 1) => `${toP((n / (total || 1)) * 100)}%`;
|
|
14
|
+
function ColorSquare({ base, model, }) {
|
|
15
|
+
var _a;
|
|
16
|
+
const { visibleModifications } = model;
|
|
17
|
+
return base.startsWith('mod_') ? ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
18
|
+
width: 10,
|
|
19
|
+
height: 10,
|
|
20
|
+
background: (_a = visibleModifications.get(base.replace('mod_', ''))) === null || _a === void 0 ? void 0 : _a.color,
|
|
21
|
+
} })) : null;
|
|
22
|
+
}
|
|
23
|
+
const TooltipContents = (0, react_1.forwardRef)(function TooltipContents2(props, reactRef) {
|
|
24
|
+
const { feature, model } = props;
|
|
25
|
+
const { classes } = useStyles();
|
|
26
|
+
const start = feature.get('start') + 1;
|
|
27
|
+
const end = feature.get('end');
|
|
28
|
+
const name = feature.get('refName');
|
|
29
|
+
const { refbase, readsCounted, depth, ref, ...info } = feature.get('snpinfo');
|
|
30
|
+
return ((0, jsx_runtime_1.jsx)("div", { ref: reactRef, children: (0, jsx_runtime_1.jsxs)("table", { children: [(0, jsx_runtime_1.jsx)("caption", { children: [
|
|
31
|
+
name,
|
|
32
|
+
start === end
|
|
33
|
+
? (0, util_1.toLocale)(start)
|
|
34
|
+
: `${(0, util_1.toLocale)(start)}..${(0, util_1.toLocale)(end)}`,
|
|
35
|
+
]
|
|
36
|
+
.filter(f => !!f)
|
|
37
|
+
.join(':') }), (0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", {}), (0, jsx_runtime_1.jsx)("th", { children: "Base" }), (0, jsx_runtime_1.jsx)("th", { children: "Count" }), (0, jsx_runtime_1.jsx)("th", { children: "% of Total" }), (0, jsx_runtime_1.jsx)("th", { children: "Strands" })] }) }), (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", {}), (0, jsx_runtime_1.jsx)("td", { children: "Total" }), (0, jsx_runtime_1.jsx)("td", { children: readsCounted }), (0, jsx_runtime_1.jsx)("td", { children: " " }), (0, jsx_runtime_1.jsx)("td", { children: " " })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", {}), (0, jsx_runtime_1.jsxs)("td", { children: ["REF ", refbase ? `(${refbase.toUpperCase()})` : ''] }), (0, jsx_runtime_1.jsx)("td", { children: ref.entryDepth }), (0, jsx_runtime_1.jsx)("td", { children: pct(ref.entryDepth, readsCounted) }), (0, jsx_runtime_1.jsxs)("td", { children: [ref['-1'] ? `${ref['-1']}(-)` : '', ref['1'] ? `${ref['1']}(+)` : ''] })] }), Object.entries(info).map(([key, entry]) => Object.entries(entry).map(([base, score]) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(ColorSquare, { model: model, base: base }) }), (0, jsx_runtime_1.jsxs)("td", { children: [base.toUpperCase(), " "] }), (0, jsx_runtime_1.jsx)("td", { className: classes.td, children: [
|
|
38
|
+
score.entryDepth,
|
|
39
|
+
score.avgProbability !== undefined
|
|
40
|
+
? `(avg. ${pct(score.avgProbability)} prob.)`
|
|
41
|
+
: '',
|
|
42
|
+
]
|
|
43
|
+
.filter(f => !!f)
|
|
44
|
+
.join(' ') }), (0, jsx_runtime_1.jsx)("td", { children: base === 'depth' || base === 'skip'
|
|
45
|
+
? '---'
|
|
46
|
+
: pct(score.entryDepth, readsCounted) }), (0, jsx_runtime_1.jsxs)("td", { children: [score['-1'] ? `${score['-1']}(-)` : '', score['1'] ? `${score['1']}(+)` : ''] })] }, `${key}_${base}`))))] })] }) }));
|
|
47
|
+
});
|
|
48
|
+
exports.default = TooltipContents;
|
|
@@ -189,18 +189,15 @@ function stateModelFactory(pluginManager, configSchema) {
|
|
|
189
189
|
.views(self => {
|
|
190
190
|
const { renderProps: superRenderProps, trackMenuItems: superTrackMenuItems, } = self;
|
|
191
191
|
return {
|
|
192
|
-
|
|
192
|
+
renderReady() {
|
|
193
193
|
const superProps = superRenderProps();
|
|
194
194
|
return !superProps.notReady && self.modificationsReady;
|
|
195
195
|
},
|
|
196
|
-
get ready() {
|
|
197
|
-
return this.renderReady;
|
|
198
|
-
},
|
|
199
196
|
renderProps() {
|
|
200
197
|
const { colorBy, visibleModifications } = self;
|
|
201
198
|
return {
|
|
202
199
|
...superRenderProps(),
|
|
203
|
-
notReady: !this.
|
|
200
|
+
notReady: !this.renderReady(),
|
|
204
201
|
colorBy,
|
|
205
202
|
visibleModifications: Object.fromEntries(visibleModifications.toJSON()),
|
|
206
203
|
};
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.fetchChains = fetchChains;
|
|
4
4
|
const util_1 = require("@jbrowse/core/util");
|
|
5
|
+
const tracks_1 = require("@jbrowse/core/util/tracks");
|
|
5
6
|
async function fetchChains(self) {
|
|
6
|
-
const
|
|
7
|
+
const sessionId = (0, tracks_1.getRpcSessionId)(self);
|
|
7
8
|
const { rpcManager } = (0, util_1.getSession)(self);
|
|
8
9
|
const view = (0, util_1.getContainingView)(self);
|
|
9
10
|
if (!view.initialized || self.error || !self.statsReadyAndRegionNotTooLarge) {
|
|
@@ -91,6 +91,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
|
|
|
91
91
|
readonly DisplayBlurb: any;
|
|
92
92
|
readonly sortedBy: any;
|
|
93
93
|
readonly coverageConf: any;
|
|
94
|
+
notReady(): any;
|
|
94
95
|
} & {
|
|
95
96
|
setSNPCoverageDisplay(configuration: AnyConfigurationModel): void;
|
|
96
97
|
setFeatureDensityStatsLimit(stats?: FeatureDensityStats): void;
|
|
@@ -93,6 +93,10 @@ function stateModelFactory(pluginManager, configSchema) {
|
|
|
93
93
|
displayId: `${self.configuration.displayId}_snpcoverage_xyz`,
|
|
94
94
|
};
|
|
95
95
|
},
|
|
96
|
+
notReady() {
|
|
97
|
+
return (self.PileupDisplay.renderProps().notReady ||
|
|
98
|
+
self.SNPCoverageDisplay.renderProps().notReady);
|
|
99
|
+
},
|
|
96
100
|
}))
|
|
97
101
|
.actions(self => ({
|
|
98
102
|
setSNPCoverageDisplay(configuration) {
|
|
@@ -158,8 +162,7 @@ function stateModelFactory(pluginManager, configSchema) {
|
|
|
158
162
|
},
|
|
159
163
|
async renderSvg(opts) {
|
|
160
164
|
const pileupHeight = self.height - self.SNPCoverageDisplay.height;
|
|
161
|
-
await when(() => !self.
|
|
162
|
-
!self.SNPCoverageDisplay.renderProps().notReady);
|
|
165
|
+
await when(() => !self.notReady());
|
|
163
166
|
return (_jsxs(_Fragment, { children: [_jsx("g", { children: await self.SNPCoverageDisplay.renderSvg(opts) }), _jsx("g", { transform: `translate(0 ${self.SNPCoverageDisplay.height})`, children: await self.PileupDisplay.renderSvg({
|
|
164
167
|
...opts,
|
|
165
168
|
overrideHeight: pileupHeight,
|
|
@@ -201,7 +201,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
|
|
|
201
201
|
} & {
|
|
202
202
|
addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
|
|
203
203
|
deleteBlock(key: string): void;
|
|
204
|
-
selectFeature(feature: Feature):
|
|
204
|
+
selectFeature(feature: Feature): void;
|
|
205
205
|
navToFeature(feature: Feature): void;
|
|
206
206
|
clearFeatureSelection(): void;
|
|
207
207
|
setFeatureIdUnderMouse(feature?: string): void;
|
|
@@ -186,9 +186,7 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
|
|
|
186
186
|
icon: MenuOpenIcon,
|
|
187
187
|
onClick: () => {
|
|
188
188
|
self.clearFeatureSelection();
|
|
189
|
-
self.selectFeature(feat)
|
|
190
|
-
getSession(self).notifyError(`${e}`, e);
|
|
191
|
-
});
|
|
189
|
+
self.selectFeature(feat);
|
|
192
190
|
},
|
|
193
191
|
},
|
|
194
192
|
{
|
|
@@ -234,7 +232,7 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
|
|
|
234
232
|
rendererType: 'PileupRenderer',
|
|
235
233
|
}));
|
|
236
234
|
if (isAlive(self) && feature) {
|
|
237
|
-
|
|
235
|
+
self.selectFeature(new SimpleFeature(feature));
|
|
238
236
|
}
|
|
239
237
|
}
|
|
240
238
|
}
|
|
@@ -205,7 +205,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
|
|
|
205
205
|
} & {
|
|
206
206
|
addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
|
|
207
207
|
deleteBlock(key: string): void;
|
|
208
|
-
selectFeature(feature: import("@jbrowse/core/util").Feature):
|
|
208
|
+
selectFeature(feature: import("@jbrowse/core/util").Feature): void;
|
|
209
209
|
navToFeature(feature: import("@jbrowse/core/util").Feature): void;
|
|
210
210
|
clearFeatureSelection(): void;
|
|
211
211
|
setFeatureIdUnderMouse(feature?: string): void;
|
|
@@ -1,49 +1,7 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import { toLocale } from '@jbrowse/core/util';
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
2
|
import { Tooltip } from '@jbrowse/plugin-wiggle';
|
|
5
3
|
import { observer } from 'mobx-react';
|
|
6
|
-
import
|
|
7
|
-
const useStyles = makeStyles()(() => ({
|
|
8
|
-
td: {
|
|
9
|
-
whiteSpace: 'nowrap',
|
|
10
|
-
},
|
|
11
|
-
}));
|
|
12
|
-
const toP = (s = 0) => +(+s).toFixed(1);
|
|
13
|
-
const pct = (n, total = 1) => `${toP((n / (total || 1)) * 100)}%`;
|
|
14
|
-
const TooltipContents = forwardRef(function TooltipContents2(props, reactRef) {
|
|
15
|
-
const { feature, model } = props;
|
|
16
|
-
const { classes } = useStyles();
|
|
17
|
-
const start = feature.get('start') + 1;
|
|
18
|
-
const end = feature.get('end');
|
|
19
|
-
const name = feature.get('refName');
|
|
20
|
-
const { refbase, readsCounted, depth, ref, ...info } = feature.get('snpinfo');
|
|
21
|
-
const loc = [
|
|
22
|
-
name,
|
|
23
|
-
start === end ? toLocale(start) : `${toLocale(start)}..${toLocale(end)}`,
|
|
24
|
-
]
|
|
25
|
-
.filter(f => !!f)
|
|
26
|
-
.join(':');
|
|
27
|
-
return (_jsx("div", { ref: reactRef, children: _jsxs("table", { children: [_jsx("caption", { children: loc }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: "Base" }), _jsx("th", { children: "Count" }), _jsx("th", { children: "% of Total" }), _jsx("th", { children: "Strands" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", {}), _jsx("td", { children: "Total" }), _jsx("td", { children: readsCounted }), _jsx("td", { children: " " }), _jsx("td", { children: " " })] }), _jsxs("tr", { children: [_jsx("td", {}), _jsxs("td", { children: ["REF ", refbase ? `(${refbase.toUpperCase()})` : ''] }), _jsx("td", { children: ref.entryDepth }), _jsx("td", { children: pct(ref.entryDepth, readsCounted) }), _jsxs("td", { children: [ref['-1'] ? `${ref['-1']}(-)` : '', ref['1'] ? `${ref['1']}(+)` : ''] })] }), Object.entries(info).map(([key, entry]) => Object.entries(entry).map(([base, score]) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(ColorSquare, { model: model, base: base }) }), _jsxs("td", { children: [base.toUpperCase(), " "] }), _jsx("td", { className: classes.td, children: [
|
|
28
|
-
score.entryDepth,
|
|
29
|
-
score.avgProbability !== undefined
|
|
30
|
-
? `(avg. ${pct(score.avgProbability)} prob.)`
|
|
31
|
-
: '',
|
|
32
|
-
]
|
|
33
|
-
.filter(f => !!f)
|
|
34
|
-
.join(' ') }), _jsx("td", { children: base === 'depth' || base === 'skip'
|
|
35
|
-
? '---'
|
|
36
|
-
: pct(score.entryDepth, readsCounted) }), _jsxs("td", { children: [score['-1'] ? `${score['-1']}(-)` : '', score['1'] ? `${score['1']}(+)` : ''] })] }, `${key}_${base}`))))] })] }) }));
|
|
37
|
-
});
|
|
38
|
-
function ColorSquare({ base, model, }) {
|
|
39
|
-
var _a;
|
|
40
|
-
const { visibleModifications } = model;
|
|
41
|
-
return base.startsWith('mod_') ? (_jsx("div", { style: {
|
|
42
|
-
width: 10,
|
|
43
|
-
height: 10,
|
|
44
|
-
background: (_a = visibleModifications.get(base.replace('mod_', ''))) === null || _a === void 0 ? void 0 : _a.color,
|
|
45
|
-
} })) : null;
|
|
46
|
-
}
|
|
4
|
+
import TooltipContents from './TooltipContents';
|
|
47
5
|
const SNPCoverageTooltip = observer(function (props) {
|
|
48
6
|
const { model } = props;
|
|
49
7
|
const { featureUnderMouse: feat } = model;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Feature } from '@jbrowse/core/util';
|
|
2
|
+
interface Props {
|
|
3
|
+
feature: Feature;
|
|
4
|
+
model: {
|
|
5
|
+
visibleModifications: Map<string, {
|
|
6
|
+
color: string;
|
|
7
|
+
}>;
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
declare const TooltipContents: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
|
|
11
|
+
export default TooltipContents;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { toLocale } from '@jbrowse/core/util';
|
|
4
|
+
import { makeStyles } from 'tss-react/mui';
|
|
5
|
+
const useStyles = makeStyles()(() => ({
|
|
6
|
+
td: {
|
|
7
|
+
whiteSpace: 'nowrap',
|
|
8
|
+
},
|
|
9
|
+
}));
|
|
10
|
+
const toP = (s = 0) => +(+s).toFixed(1);
|
|
11
|
+
const pct = (n, total = 1) => `${toP((n / (total || 1)) * 100)}%`;
|
|
12
|
+
function ColorSquare({ base, model, }) {
|
|
13
|
+
var _a;
|
|
14
|
+
const { visibleModifications } = model;
|
|
15
|
+
return base.startsWith('mod_') ? (_jsx("div", { style: {
|
|
16
|
+
width: 10,
|
|
17
|
+
height: 10,
|
|
18
|
+
background: (_a = visibleModifications.get(base.replace('mod_', ''))) === null || _a === void 0 ? void 0 : _a.color,
|
|
19
|
+
} })) : null;
|
|
20
|
+
}
|
|
21
|
+
const TooltipContents = forwardRef(function TooltipContents2(props, reactRef) {
|
|
22
|
+
const { feature, model } = props;
|
|
23
|
+
const { classes } = useStyles();
|
|
24
|
+
const start = feature.get('start') + 1;
|
|
25
|
+
const end = feature.get('end');
|
|
26
|
+
const name = feature.get('refName');
|
|
27
|
+
const { refbase, readsCounted, depth, ref, ...info } = feature.get('snpinfo');
|
|
28
|
+
return (_jsx("div", { ref: reactRef, children: _jsxs("table", { children: [_jsx("caption", { children: [
|
|
29
|
+
name,
|
|
30
|
+
start === end
|
|
31
|
+
? toLocale(start)
|
|
32
|
+
: `${toLocale(start)}..${toLocale(end)}`,
|
|
33
|
+
]
|
|
34
|
+
.filter(f => !!f)
|
|
35
|
+
.join(':') }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: "Base" }), _jsx("th", { children: "Count" }), _jsx("th", { children: "% of Total" }), _jsx("th", { children: "Strands" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", {}), _jsx("td", { children: "Total" }), _jsx("td", { children: readsCounted }), _jsx("td", { children: " " }), _jsx("td", { children: " " })] }), _jsxs("tr", { children: [_jsx("td", {}), _jsxs("td", { children: ["REF ", refbase ? `(${refbase.toUpperCase()})` : ''] }), _jsx("td", { children: ref.entryDepth }), _jsx("td", { children: pct(ref.entryDepth, readsCounted) }), _jsxs("td", { children: [ref['-1'] ? `${ref['-1']}(-)` : '', ref['1'] ? `${ref['1']}(+)` : ''] })] }), Object.entries(info).map(([key, entry]) => Object.entries(entry).map(([base, score]) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(ColorSquare, { model: model, base: base }) }), _jsxs("td", { children: [base.toUpperCase(), " "] }), _jsx("td", { className: classes.td, children: [
|
|
36
|
+
score.entryDepth,
|
|
37
|
+
score.avgProbability !== undefined
|
|
38
|
+
? `(avg. ${pct(score.avgProbability)} prob.)`
|
|
39
|
+
: '',
|
|
40
|
+
]
|
|
41
|
+
.filter(f => !!f)
|
|
42
|
+
.join(' ') }), _jsx("td", { children: base === 'depth' || base === 'skip'
|
|
43
|
+
? '---'
|
|
44
|
+
: pct(score.entryDepth, readsCounted) }), _jsxs("td", { children: [score['-1'] ? `${score['-1']}(-)` : '', score['1'] ? `${score['1']}(+)` : ''] })] }, `${key}_${base}`))))] })] }) }));
|
|
45
|
+
});
|
|
46
|
+
export default TooltipContents;
|
|
@@ -151,18 +151,15 @@ function stateModelFactory(pluginManager, configSchema) {
|
|
|
151
151
|
.views(self => {
|
|
152
152
|
const { renderProps: superRenderProps, trackMenuItems: superTrackMenuItems, } = self;
|
|
153
153
|
return {
|
|
154
|
-
|
|
154
|
+
renderReady() {
|
|
155
155
|
const superProps = superRenderProps();
|
|
156
156
|
return !superProps.notReady && self.modificationsReady;
|
|
157
157
|
},
|
|
158
|
-
get ready() {
|
|
159
|
-
return this.renderReady;
|
|
160
|
-
},
|
|
161
158
|
renderProps() {
|
|
162
159
|
const { colorBy, visibleModifications } = self;
|
|
163
160
|
return {
|
|
164
161
|
...superRenderProps(),
|
|
165
|
-
notReady: !this.
|
|
162
|
+
notReady: !this.renderReady(),
|
|
166
163
|
colorBy,
|
|
167
164
|
visibleModifications: Object.fromEntries(visibleModifications.toJSON()),
|
|
168
165
|
};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getContainingView, getSession } from '@jbrowse/core/util';
|
|
2
|
+
import { getRpcSessionId } from '@jbrowse/core/util/tracks';
|
|
2
3
|
export async function fetchChains(self) {
|
|
3
|
-
const
|
|
4
|
+
const sessionId = getRpcSessionId(self);
|
|
4
5
|
const { rpcManager } = getSession(self);
|
|
5
6
|
const view = getContainingView(self);
|
|
6
7
|
if (!view.initialized || self.error || !self.statsReadyAndRegionNotTooLarge) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-alignments",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.5.0",
|
|
4
4
|
"description": "JBrowse 2 alignments adapters, tracks, etc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jbrowse",
|
|
@@ -38,10 +38,10 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@gmod/bam": "^6.0.1",
|
|
40
40
|
"@gmod/cram": "^5.0.4",
|
|
41
|
-
"@jbrowse/core": "^3.
|
|
42
|
-
"@jbrowse/plugin-linear-genome-view": "^3.
|
|
43
|
-
"@jbrowse/plugin-wiggle": "^3.
|
|
44
|
-
"@jbrowse/sv-core": "^3.
|
|
41
|
+
"@jbrowse/core": "^3.5.0",
|
|
42
|
+
"@jbrowse/plugin-linear-genome-view": "^3.5.0",
|
|
43
|
+
"@jbrowse/plugin-wiggle": "^3.5.0",
|
|
44
|
+
"@jbrowse/sv-core": "^3.5.0",
|
|
45
45
|
"@mui/icons-material": "^7.0.0",
|
|
46
46
|
"@mui/material": "^7.0.0",
|
|
47
47
|
"canvas2svg": "^1.0.16",
|
|
@@ -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": "8a8aa0aab2229dece106a5715a767e649e2fe92b"
|
|
67
67
|
}
|