@jbrowse/core 2.1.3 → 2.1.5
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/BaseFeatureWidget/BaseFeatureDetail.d.ts +2 -2
- package/BaseFeatureWidget/BaseFeatureDetail.js +2 -2
- package/BaseFeatureWidget/SequenceFeatureDetails.d.ts +6 -3
- package/BaseFeatureWidget/SequenceFeatureDetails.js +74 -34
- package/BaseFeatureWidget/SequenceFeatureSettingsDialog.d.ts +9 -0
- package/BaseFeatureWidget/SequenceFeatureSettingsDialog.js +71 -0
- package/BaseFeatureWidget/test_data/DLGAP3.d.ts +80 -0
- package/BaseFeatureWidget/test_data/DLGAP3.js +585 -0
- package/BaseFeatureWidget/test_data/NCDN.d.ts +141 -0
- package/BaseFeatureWidget/test_data/NCDN.js +1118 -0
- package/BaseFeatureWidget/types.d.ts +2 -2
- package/BaseFeatureWidget/util.d.ts +2 -2
- package/PluginManager.d.ts +3 -3
- package/PluginManager.js +7 -5
- package/assemblyManager/assemblyManager.js +2 -1
- package/package.json +2 -2
- package/pluggableElementTypes/ViewType.d.ts +2 -0
- package/pluggableElementTypes/ViewType.js +1 -0
- package/pluggableElementTypes/models/BaseConnectionModelFactory.d.ts +7 -5
- package/pluggableElementTypes/models/BaseConnectionModelFactory.js +3 -2
- package/tsconfig.build.tsbuildinfo +1 -1
- package/ui/App.d.ts +1 -1
- package/ui/App.js +49 -42
- package/ui/DrawerWidget.js +4 -1
- package/ui/theme.d.ts +18 -171
- package/ui/theme.js +17 -20
- package/util/calculateStaticBlocks.js +3 -8
- package/util/index.d.ts +1 -1
- package/util/index.js +29 -10
- package/util/simpleFeature.d.ts +1 -2
- package/util/types/index.d.ts +1 -1
- package/util/types/index.js +3 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { IAnyStateTreeNode } from 'mobx-state-tree';
|
|
3
3
|
import { BaseCardProps, BaseProps } from './types';
|
|
4
|
-
import {
|
|
4
|
+
import { SimpleFeatureSerializedNoId } from '../util/simpleFeature';
|
|
5
5
|
export declare const useStyles: (params: void, styleOverrides?: {
|
|
6
6
|
props: {
|
|
7
7
|
classes?: Record<string, string> | undefined;
|
|
@@ -54,7 +54,7 @@ export interface BaseInputProps extends BaseCardProps {
|
|
|
54
54
|
}
|
|
55
55
|
export declare const FeatureDetails: (props: {
|
|
56
56
|
model: IAnyStateTreeNode;
|
|
57
|
-
feature:
|
|
57
|
+
feature: SimpleFeatureSerializedNoId;
|
|
58
58
|
depth?: number | undefined;
|
|
59
59
|
omit?: string[] | undefined;
|
|
60
60
|
formatter?: ((val: unknown, key: string) => React.ReactNode) | undefined;
|
|
@@ -325,7 +325,7 @@ const FeatureDetails = (props) => {
|
|
|
325
325
|
const { omit = [], model, feature, depth = 0 } = props;
|
|
326
326
|
const { name = '', id = '', type = '', subfeatures } = feature;
|
|
327
327
|
const session = (0, util_1.getSession)(model);
|
|
328
|
-
const defaultSeqTypes = ['mRNA', 'transcript'];
|
|
328
|
+
const defaultSeqTypes = ['mRNA', 'transcript', 'gene'];
|
|
329
329
|
const sequenceTypes = (0, configuration_1.getConf)(session, ['featureDetails', 'sequenceTypes']) || defaultSeqTypes;
|
|
330
330
|
return (react_1.default.createElement(BaseCard, { title: generateTitle(name, id, type) },
|
|
331
331
|
react_1.default.createElement(material_1.Typography, null, "Core details"),
|
|
@@ -335,7 +335,7 @@ const FeatureDetails = (props) => {
|
|
|
335
335
|
react_1.default.createElement(Attributes, { attributes: feature, ...props, omit: [...omit, ...coreDetails] }),
|
|
336
336
|
sequenceTypes.includes(feature.type) ? (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) },
|
|
337
337
|
react_1.default.createElement(SequenceFeatureDetails_1.default, { ...props }))) : null,
|
|
338
|
-
(subfeatures === null || subfeatures === void 0 ? void 0 : subfeatures.length) ? (react_1.default.createElement(BaseCard, { title: "Subfeatures", defaultExpanded: !sequenceTypes.includes(feature.type) }, subfeatures.map(
|
|
338
|
+
(subfeatures === null || subfeatures === void 0 ? void 0 : subfeatures.length) ? (react_1.default.createElement(BaseCard, { title: "Subfeatures", defaultExpanded: !sequenceTypes.includes(feature.type) }, subfeatures.map(sub => (react_1.default.createElement(exports.FeatureDetails, { key: JSON.stringify(sub), feature: sub, model: model, depth: depth + 1 }))))) : null));
|
|
339
339
|
};
|
|
340
340
|
exports.FeatureDetails = FeatureDetails;
|
|
341
341
|
const BaseFeatureDetails = (0, mobx_react_1.observer)((props) => {
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BaseProps } from './types';
|
|
3
3
|
import { ParentFeat, SeqState } from './util';
|
|
4
|
-
|
|
4
|
+
interface SequencePanelProps {
|
|
5
5
|
sequence: SeqState;
|
|
6
6
|
feature: ParentFeat;
|
|
7
7
|
mode: string;
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
intronBp?: number;
|
|
9
|
+
}
|
|
10
|
+
export declare const SequencePanel: React.ForwardRefExoticComponent<SequencePanelProps & React.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
export default function SequenceFeatureDetails({ model, feature }: BaseProps): JSX.Element | null;
|
|
12
|
+
export {};
|
|
@@ -32,13 +32,23 @@ const material_1 = require("@mui/material");
|
|
|
32
32
|
const mui_1 = require("tss-react/mui");
|
|
33
33
|
const react_intersection_observer_1 = require("react-intersection-observer");
|
|
34
34
|
const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
|
|
35
|
+
// locals
|
|
36
|
+
const SequenceFeatureSettingsDialog_1 = __importDefault(require("./SequenceFeatureSettingsDialog"));
|
|
35
37
|
const util_1 = require("../util");
|
|
36
38
|
const configuration_1 = require("../configuration");
|
|
37
39
|
const util_2 = require("./util");
|
|
40
|
+
// icons
|
|
41
|
+
const Settings_1 = __importDefault(require("@mui/icons-material/Settings"));
|
|
38
42
|
const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
39
43
|
button: {
|
|
40
44
|
margin: theme.spacing(1),
|
|
41
45
|
},
|
|
46
|
+
formControl: {
|
|
47
|
+
margin: 0,
|
|
48
|
+
},
|
|
49
|
+
container: {
|
|
50
|
+
margin: theme.spacing(1),
|
|
51
|
+
},
|
|
42
52
|
}));
|
|
43
53
|
// note that these are currently put into the style section instead of being
|
|
44
54
|
// defined in classes to aid copy and paste to an external document e.g. word
|
|
@@ -59,7 +69,7 @@ function GeneProtein({ cds, sequence, codonTable, }) {
|
|
|
59
69
|
}
|
|
60
70
|
return react_1.default.createElement("span", { style: { background: proteinColor } }, protein);
|
|
61
71
|
}
|
|
62
|
-
function GenecDNA({ utr, cds, exons, sequence, upstream, downstream, includeIntrons, collapseIntron, }) {
|
|
72
|
+
function GenecDNA({ utr, cds, exons, sequence, upstream, downstream, includeIntrons, collapseIntron, intronBp, }) {
|
|
63
73
|
const chunks = cds.length
|
|
64
74
|
? [...cds, ...utr].sort((a, b) => a.start - b.start)
|
|
65
75
|
: exons;
|
|
@@ -74,15 +84,16 @@ function GenecDNA({ utr, cds, exons, sequence, upstream, downstream, includeIntr
|
|
|
74
84
|
react_1.default.createElement("span", { style: {
|
|
75
85
|
background: chunk.type === 'CDS' ? cdsColor : utrColor,
|
|
76
86
|
} }, sequence.slice(chunk.start, chunk.end)),
|
|
77
|
-
includeIntrons && index < chunks.length - 1 ? (react_1.default.createElement("span", { style: { background: intronColor } }, collapseIntron && intron.length >
|
|
78
|
-
? `${intron.slice(0,
|
|
87
|
+
includeIntrons && index < chunks.length - 1 ? (react_1.default.createElement("span", { style: { background: intronColor } }, collapseIntron && intron.length > intronBp * 2
|
|
88
|
+
? `${intron.slice(0, intronBp)}...${intron.slice(-intronBp)}`
|
|
79
89
|
: intron)) : null));
|
|
80
90
|
}),
|
|
81
91
|
downstream ? (react_1.default.createElement("span", { style: { background: updownstreamColor } }, downstream)) : null));
|
|
82
92
|
}
|
|
83
|
-
exports.SequencePanel = react_1.default.forwardRef((
|
|
93
|
+
exports.SequencePanel = react_1.default.forwardRef((props, ref) => {
|
|
94
|
+
const { feature, mode, intronBp = 10 } = props;
|
|
95
|
+
let { sequence: { seq, upstream = '', downstream = '' }, } = props;
|
|
84
96
|
const { subfeatures } = feature;
|
|
85
|
-
const codonTable = (0, util_1.generateCodonTable)(util_1.defaultCodonTable);
|
|
86
97
|
if (!subfeatures) {
|
|
87
98
|
return null;
|
|
88
99
|
}
|
|
@@ -112,15 +123,16 @@ exports.SequencePanel = react_1.default.forwardRef(({ feature, mode, sequence: {
|
|
|
112
123
|
// doing this in a single assignment is needed because downstream and
|
|
113
124
|
// upstream are swapped so this avoids a temp variable
|
|
114
125
|
;
|
|
115
|
-
[
|
|
116
|
-
(0, util_1.revcom)(
|
|
126
|
+
[seq, upstream, downstream] = [
|
|
127
|
+
(0, util_1.revcom)(seq),
|
|
117
128
|
(0, util_1.revcom)(downstream),
|
|
118
129
|
(0, util_1.revcom)(upstream),
|
|
119
130
|
];
|
|
120
|
-
cds = (0, util_2.revlist)(cds,
|
|
121
|
-
exons = (0, util_2.revlist)(exons,
|
|
122
|
-
utr = (0, util_2.revlist)(utr,
|
|
131
|
+
cds = (0, util_2.revlist)(cds, seq.length);
|
|
132
|
+
exons = (0, util_2.revlist)(exons, seq.length);
|
|
133
|
+
utr = (0, util_2.revlist)(utr, seq.length);
|
|
123
134
|
}
|
|
135
|
+
const codonTable = (0, util_1.generateCodonTable)(util_1.defaultCodonTable);
|
|
124
136
|
return (react_1.default.createElement("div", { ref: ref, "data-testid": "sequence_panel" },
|
|
125
137
|
react_1.default.createElement("div", { style: {
|
|
126
138
|
fontFamily: 'monospace',
|
|
@@ -129,7 +141,7 @@ exports.SequencePanel = react_1.default.forwardRef(({ feature, mode, sequence: {
|
|
|
129
141
|
maxWidth: 600,
|
|
130
142
|
} },
|
|
131
143
|
`>${feature.name || feature.id || 'unknown'}-${mode}\n`,
|
|
132
|
-
mode === 'cds' ? (react_1.default.createElement(GeneCDS, { cds: cds, sequence:
|
|
144
|
+
mode === 'cds' ? (react_1.default.createElement(GeneCDS, { cds: cds, sequence: seq })) : mode === 'cdna' ? (react_1.default.createElement(GenecDNA, { exons: exons, cds: cds, utr: utr, sequence: seq, intronBp: intronBp })) : mode === 'protein' ? (react_1.default.createElement(GeneProtein, { cds: cds, codonTable: codonTable, sequence: seq })) : mode === 'gene' ? (react_1.default.createElement(GenecDNA, { exons: exons, cds: cds, utr: utr, sequence: seq, includeIntrons: true, intronBp: intronBp })) : mode === 'gene_collapsed_intron' ? (react_1.default.createElement(GenecDNA, { exons: exons, cds: cds, sequence: seq, utr: utr, includeIntrons: true, collapseIntron: true, intronBp: intronBp })) : mode === 'gene_updownstream' ? (react_1.default.createElement(GenecDNA, { exons: exons, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, intronBp: intronBp })) : mode === 'gene_updownstream_collapsed_intron' ? (react_1.default.createElement(GenecDNA, { exons: exons, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, collapseIntron: true, intronBp: intronBp })) : (react_1.default.createElement("div", null, "Unknown type")))));
|
|
133
145
|
});
|
|
134
146
|
// display the stitched-together sequence of a gene's CDS, cDNA, or protein
|
|
135
147
|
// sequence. this is a best effort and weird genomic phenomena could lead these
|
|
@@ -140,12 +152,15 @@ function SequenceFeatureDetails({ model, feature }) {
|
|
|
140
152
|
const parentFeature = feature;
|
|
141
153
|
const hasCDS = (_a = parentFeature.subfeatures) === null || _a === void 0 ? void 0 : _a.find(sub => sub.type === 'CDS');
|
|
142
154
|
const seqPanelRef = (0, react_1.useRef)(null);
|
|
155
|
+
const [settingsDlgOpen, setSettingsDlgOpen] = (0, react_1.useState)(false);
|
|
143
156
|
const { ref, inView } = (0, react_intersection_observer_1.useInView)();
|
|
144
157
|
const [sequence, setSequence] = (0, react_1.useState)();
|
|
145
158
|
const [error, setError] = (0, react_1.useState)();
|
|
146
159
|
const [mode, setMode] = (0, react_1.useState)(hasCDS ? 'cds' : 'cdna');
|
|
147
160
|
const [copied, setCopied] = (0, react_1.useState)(false);
|
|
148
161
|
const [copiedHtml, setCopiedHtml] = (0, react_1.useState)(false);
|
|
162
|
+
const [intronBp, setIntronBp] = (0, util_1.useLocalStorage)('intronBp', 10);
|
|
163
|
+
const [upDownBp, setUpDownBp] = (0, util_1.useLocalStorage)('upDownBp', 500);
|
|
149
164
|
(0, react_1.useEffect)(() => {
|
|
150
165
|
var _a;
|
|
151
166
|
let finished = false;
|
|
@@ -182,8 +197,8 @@ function SequenceFeatureDetails({ model, feature }) {
|
|
|
182
197
|
try {
|
|
183
198
|
const { start, end, refName } = feature;
|
|
184
199
|
const seq = await fetchSeq(start, end, refName);
|
|
185
|
-
const up = await fetchSeq(Math.max(0, start -
|
|
186
|
-
const down = await fetchSeq(end, end +
|
|
200
|
+
const up = await fetchSeq(Math.max(0, start - upDownBp), start, refName);
|
|
201
|
+
const down = await fetchSeq(end, end + upDownBp, refName);
|
|
187
202
|
if (!finished) {
|
|
188
203
|
setSequence({ seq, upstream: up, downstream: down });
|
|
189
204
|
}
|
|
@@ -195,35 +210,60 @@ function SequenceFeatureDetails({ model, feature }) {
|
|
|
195
210
|
return () => {
|
|
196
211
|
finished = true;
|
|
197
212
|
};
|
|
198
|
-
}, [feature, inView, model]);
|
|
213
|
+
}, [feature, inView, model, upDownBp]);
|
|
199
214
|
const loading = !sequence;
|
|
200
|
-
return (react_1.default.createElement("div", { ref: ref },
|
|
201
|
-
react_1.default.createElement(material_1.FormControl,
|
|
202
|
-
react_1.default.createElement(material_1.Select, { value: mode, onChange: event => setMode(event.target.value) },
|
|
215
|
+
return !model ? null : (react_1.default.createElement("div", { ref: ref, className: classes.container },
|
|
216
|
+
react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
|
|
217
|
+
react_1.default.createElement(material_1.Select, { style: { margin: 0 }, value: mode, onChange: event => setMode(event.target.value) },
|
|
203
218
|
hasCDS ? react_1.default.createElement(material_1.MenuItem, { value: "cds" }, "CDS") : null,
|
|
204
219
|
hasCDS ? react_1.default.createElement(material_1.MenuItem, { value: "protein" }, "Protein") : null,
|
|
205
220
|
react_1.default.createElement(material_1.MenuItem, { value: "gene" }, "Gene w/ introns"),
|
|
206
|
-
react_1.default.createElement(material_1.MenuItem, { value: "gene_collapsed_intron" },
|
|
207
|
-
|
|
208
|
-
|
|
221
|
+
react_1.default.createElement(material_1.MenuItem, { value: "gene_collapsed_intron" },
|
|
222
|
+
"Gene w/ ",
|
|
223
|
+
intronBp,
|
|
224
|
+
"bp of intron"),
|
|
225
|
+
react_1.default.createElement(material_1.MenuItem, { value: "gene_updownstream" },
|
|
226
|
+
"Gene w/ ",
|
|
227
|
+
upDownBp,
|
|
228
|
+
"bp up+down stream"),
|
|
229
|
+
react_1.default.createElement(material_1.MenuItem, { value: "gene_updownstream_collapsed_intron" },
|
|
230
|
+
"Gene w/ ",
|
|
231
|
+
upDownBp,
|
|
232
|
+
"bp up+down stream w/ ",
|
|
233
|
+
intronBp,
|
|
234
|
+
"bp intron"),
|
|
209
235
|
react_1.default.createElement(material_1.MenuItem, { value: "cdna" }, "cDNA"))),
|
|
210
|
-
react_1.default.createElement(material_1.
|
|
211
|
-
const ref = seqPanelRef.current;
|
|
212
|
-
if (ref) {
|
|
213
|
-
(0, copy_to_clipboard_1.default)(ref.textContent || '', { format: 'text/plain' });
|
|
214
|
-
setCopied(true);
|
|
215
|
-
setTimeout(() => setCopied(false), 1000);
|
|
216
|
-
}
|
|
217
|
-
} }, copied ? 'Copied to clipboard!' : 'Copy as plaintext'),
|
|
218
|
-
react_1.default.createElement(material_1.Tooltip, { title: "Note that 'Copy as HTML' can retain the colors but cannot be pasted into some programs like notepad that only expect plain text" },
|
|
236
|
+
react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
|
|
219
237
|
react_1.default.createElement(material_1.Button, { className: classes.button, type: "button", variant: "contained", onClick: () => {
|
|
220
238
|
const ref = seqPanelRef.current;
|
|
221
239
|
if (ref) {
|
|
222
|
-
(0, copy_to_clipboard_1.default)(ref.
|
|
223
|
-
|
|
224
|
-
setTimeout(() =>
|
|
240
|
+
(0, copy_to_clipboard_1.default)(ref.textContent || '', { format: 'text/plain' });
|
|
241
|
+
setCopied(true);
|
|
242
|
+
setTimeout(() => setCopied(false), 1000);
|
|
225
243
|
}
|
|
226
|
-
} },
|
|
227
|
-
react_1.default.createElement(
|
|
244
|
+
} }, copied ? 'Copied to clipboard!' : 'Copy as plaintext')),
|
|
245
|
+
react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
|
|
246
|
+
react_1.default.createElement(material_1.Tooltip, { title: "Note that 'Copy as HTML' can retain the colors but cannot be pasted into some programs like notepad that only expect plain text" },
|
|
247
|
+
react_1.default.createElement(material_1.Button, { className: classes.button, type: "button", variant: "contained", onClick: () => {
|
|
248
|
+
const ref = seqPanelRef.current;
|
|
249
|
+
if (ref) {
|
|
250
|
+
(0, copy_to_clipboard_1.default)(ref.innerHTML, { format: 'text/html' });
|
|
251
|
+
setCopiedHtml(true);
|
|
252
|
+
setTimeout(() => setCopiedHtml(false), 1000);
|
|
253
|
+
}
|
|
254
|
+
} }, copiedHtml ? 'Copied to clipboard!' : 'Copy as HTML'))),
|
|
255
|
+
react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
|
|
256
|
+
react_1.default.createElement(material_1.IconButton, { onClick: () => setSettingsDlgOpen(true), style: { margin: 0, padding: 0 } },
|
|
257
|
+
react_1.default.createElement(Settings_1.default, null))),
|
|
258
|
+
react_1.default.createElement("br", null),
|
|
259
|
+
react_1.default.createElement(react_1.default.Fragment, null, error ? (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) : loading ? (react_1.default.createElement(material_1.Typography, null, "Loading gene sequence...")) : sequence ? (react_1.default.createElement(exports.SequencePanel, { ref: seqPanelRef, feature: parentFeature, mode: mode, sequence: sequence, intronBp: intronBp })) : (react_1.default.createElement(material_1.Typography, null, "No sequence found"))),
|
|
260
|
+
settingsDlgOpen ? (react_1.default.createElement(SequenceFeatureSettingsDialog_1.default, { handleClose: arg => {
|
|
261
|
+
if (arg) {
|
|
262
|
+
const { upDownBp, intronBp } = arg;
|
|
263
|
+
setIntronBp(intronBp);
|
|
264
|
+
setUpDownBp(upDownBp);
|
|
265
|
+
}
|
|
266
|
+
setSettingsDlgOpen(false);
|
|
267
|
+
}, upDownBp: upDownBp, intronBp: intronBp })) : null));
|
|
228
268
|
}
|
|
229
269
|
exports.default = SequenceFeatureDetails;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export default function SequenceFeatureSettingsDialog({ handleClose, intronBp: intronBpArg, upDownBp: upDownBpArg, }: {
|
|
3
|
+
handleClose: (arg?: {
|
|
4
|
+
intronBp: number;
|
|
5
|
+
upDownBp: number;
|
|
6
|
+
}) => void;
|
|
7
|
+
intronBp: number;
|
|
8
|
+
upDownBp: number;
|
|
9
|
+
}): JSX.Element;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
const react_1 = __importStar(require("react"));
|
|
30
|
+
const material_1 = require("@mui/material");
|
|
31
|
+
const mui_1 = require("tss-react/mui");
|
|
32
|
+
// icons
|
|
33
|
+
const Close_1 = __importDefault(require("@mui/icons-material/Close"));
|
|
34
|
+
const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
35
|
+
formElt: {
|
|
36
|
+
margin: theme.spacing(3),
|
|
37
|
+
width: 400,
|
|
38
|
+
},
|
|
39
|
+
closeButton: {
|
|
40
|
+
position: 'absolute',
|
|
41
|
+
right: theme.spacing(1),
|
|
42
|
+
top: theme.spacing(1),
|
|
43
|
+
color: theme.palette.grey[500],
|
|
44
|
+
},
|
|
45
|
+
dialogContent: {
|
|
46
|
+
width: '80em',
|
|
47
|
+
},
|
|
48
|
+
}));
|
|
49
|
+
function SequenceFeatureSettingsDialog({ handleClose, intronBp: intronBpArg, upDownBp: upDownBpArg, }) {
|
|
50
|
+
const { classes } = useStyles();
|
|
51
|
+
const [intronBp, setIntronBp] = (0, react_1.useState)(`${intronBpArg}`);
|
|
52
|
+
const [upDownBp, setUpDownBp] = (0, react_1.useState)(`${upDownBpArg}`);
|
|
53
|
+
const intronBpValid = !Number.isNaN(+intronBp);
|
|
54
|
+
const upDownBpValid = !Number.isNaN(+upDownBp);
|
|
55
|
+
return (react_1.default.createElement(material_1.Dialog, { maxWidth: "xl", open: true, onClose: () => handleClose() },
|
|
56
|
+
react_1.default.createElement(material_1.DialogTitle, null,
|
|
57
|
+
"Feature sequence settings",
|
|
58
|
+
handleClose ? (react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: () => handleClose() },
|
|
59
|
+
react_1.default.createElement(Close_1.default, null))) : null),
|
|
60
|
+
react_1.default.createElement(material_1.Divider, null),
|
|
61
|
+
react_1.default.createElement(material_1.DialogContent, { className: classes.dialogContent },
|
|
62
|
+
react_1.default.createElement(material_1.TextField, { label: "Number of intronic bases around splice site to display", className: classes.formElt, value: intronBp, helperText: !intronBpValid ? 'Not a number' : '', error: !intronBpValid, onChange: event => setIntronBp(event.target.value) }),
|
|
63
|
+
react_1.default.createElement(material_1.TextField, { label: "Number of bases up/down stream of feature to display", className: classes.formElt, value: upDownBp, helperText: !upDownBpValid ? 'Not a number' : '', error: !upDownBpValid, onChange: event => setUpDownBp(event.target.value) })),
|
|
64
|
+
react_1.default.createElement(material_1.DialogActions, null,
|
|
65
|
+
react_1.default.createElement(material_1.Button, { onClick: () => handleClose({
|
|
66
|
+
upDownBp: +upDownBp,
|
|
67
|
+
intronBp: +intronBp,
|
|
68
|
+
}), disabled: !intronBpValid || !upDownBpValid, color: "primary", variant: "contained" }, "Submit"),
|
|
69
|
+
react_1.default.createElement(material_1.Button, { onClick: () => handleClose(), color: "secondary", autoFocus: true, variant: "contained" }, "Cancel"))));
|
|
70
|
+
}
|
|
71
|
+
exports.default = SequenceFeatureSettingsDialog;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
declare namespace _default {
|
|
2
|
+
const source: string;
|
|
3
|
+
const type: string;
|
|
4
|
+
const start: number;
|
|
5
|
+
const end: number;
|
|
6
|
+
const strand: number;
|
|
7
|
+
const phase: number;
|
|
8
|
+
const refName: string;
|
|
9
|
+
const id: string;
|
|
10
|
+
const dbxref: string[];
|
|
11
|
+
const name: string;
|
|
12
|
+
const description: string;
|
|
13
|
+
const gbkey: string;
|
|
14
|
+
const gene: string;
|
|
15
|
+
const gene_biotype: string;
|
|
16
|
+
const gene_synonym: string[];
|
|
17
|
+
const subfeatures: {
|
|
18
|
+
source: string;
|
|
19
|
+
type: string;
|
|
20
|
+
start: number;
|
|
21
|
+
end: number;
|
|
22
|
+
strand: number;
|
|
23
|
+
phase: number;
|
|
24
|
+
refName: string;
|
|
25
|
+
id: string;
|
|
26
|
+
parent: string;
|
|
27
|
+
dbxref: string[];
|
|
28
|
+
name: string;
|
|
29
|
+
gbkey: string;
|
|
30
|
+
gene: string;
|
|
31
|
+
product: string;
|
|
32
|
+
tag: string;
|
|
33
|
+
transcript_id: string;
|
|
34
|
+
subfeatures: ({
|
|
35
|
+
source: string;
|
|
36
|
+
type: string;
|
|
37
|
+
start: number;
|
|
38
|
+
end: number;
|
|
39
|
+
strand: number;
|
|
40
|
+
phase: number;
|
|
41
|
+
refName: string;
|
|
42
|
+
parent: string;
|
|
43
|
+
dbxref: string[];
|
|
44
|
+
gbkey: string;
|
|
45
|
+
gene: string;
|
|
46
|
+
product: string;
|
|
47
|
+
tag: string;
|
|
48
|
+
transcript_id: string;
|
|
49
|
+
uniqueId: string;
|
|
50
|
+
parentId: string;
|
|
51
|
+
id?: undefined;
|
|
52
|
+
name?: undefined;
|
|
53
|
+
protein_id?: undefined;
|
|
54
|
+
} | {
|
|
55
|
+
source: string;
|
|
56
|
+
type: string;
|
|
57
|
+
start: number;
|
|
58
|
+
end: number;
|
|
59
|
+
strand: number;
|
|
60
|
+
phase: number;
|
|
61
|
+
refName: string;
|
|
62
|
+
id: string;
|
|
63
|
+
parent: string;
|
|
64
|
+
dbxref: string[];
|
|
65
|
+
name: string;
|
|
66
|
+
gbkey: string;
|
|
67
|
+
gene: string;
|
|
68
|
+
product: string;
|
|
69
|
+
protein_id: string;
|
|
70
|
+
tag: string;
|
|
71
|
+
uniqueId: string;
|
|
72
|
+
parentId: string;
|
|
73
|
+
transcript_id?: undefined;
|
|
74
|
+
})[];
|
|
75
|
+
uniqueId: string;
|
|
76
|
+
parentId: string;
|
|
77
|
+
}[];
|
|
78
|
+
const uniqueId: string;
|
|
79
|
+
}
|
|
80
|
+
export default _default;
|