@jbrowse/plugin-linear-genome-view 3.3.0 → 3.4.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/BaseLinearDisplay/models/BaseLinearDisplayModel.d.ts +1 -1
- package/dist/BaseLinearDisplay/models/BaseLinearDisplayModel.js +22 -8
- package/dist/LinearBareDisplay/model.d.ts +1 -1
- package/dist/LinearBasicDisplay/model.d.ts +1 -1
- package/dist/LinearGenomeView/components/Cytobands.js +18 -4
- package/dist/LinearGenomeView/components/GetSequenceDialog.js +3 -2
- package/dist/LinearGenomeView/components/OverviewRubberband.js +0 -6
- package/dist/LinearGenomeView/components/OverviewRubberbandHoverTooltip.js +1 -9
- package/dist/LinearGenomeView/components/RefNameAutocomplete/index.js +16 -10
- package/dist/LinearGenomeView/components/SearchBox.d.ts +1 -1
- package/dist/LinearGenomeView/components/SearchBox.js +29 -16
- package/dist/LinearGenomeView/components/useWheelScroll.js +13 -1
- package/dist/LinearGenomeView/components/util.d.ts +1 -0
- package/dist/LinearGenomeView/components/util.js +7 -4
- package/dist/LinearGenomeView/model.d.ts +4 -4
- package/dist/LinearGenomeView/model.js +11 -12
- package/dist/LinearGenomeView/util.d.ts +6 -1
- package/dist/LinearGenomeView/util.js +20 -6
- package/dist/index.d.ts +1 -1
- package/dist/searchUtils.js +1 -1
- package/esm/BaseLinearDisplay/models/BaseLinearDisplayModel.d.ts +1 -1
- package/esm/BaseLinearDisplay/models/BaseLinearDisplayModel.js +24 -10
- package/esm/LinearBareDisplay/model.d.ts +1 -1
- package/esm/LinearBasicDisplay/model.d.ts +1 -1
- package/esm/LinearGenomeView/components/Cytobands.js +18 -4
- package/esm/LinearGenomeView/components/GetSequenceDialog.js +3 -2
- package/esm/LinearGenomeView/components/OverviewRubberband.js +0 -6
- package/esm/LinearGenomeView/components/OverviewRubberbandHoverTooltip.js +1 -9
- package/esm/LinearGenomeView/components/RefNameAutocomplete/index.js +16 -10
- package/esm/LinearGenomeView/components/SearchBox.d.ts +1 -1
- package/esm/LinearGenomeView/components/SearchBox.js +29 -16
- package/esm/LinearGenomeView/components/useWheelScroll.js +13 -1
- package/esm/LinearGenomeView/components/util.d.ts +1 -0
- package/esm/LinearGenomeView/components/util.js +7 -4
- package/esm/LinearGenomeView/model.d.ts +4 -4
- package/esm/LinearGenomeView/model.js +11 -12
- package/esm/LinearGenomeView/util.d.ts +6 -1
- package/esm/LinearGenomeView/util.js +20 -6
- package/esm/index.d.ts +1 -1
- package/esm/searchUtils.js +1 -1
- package/package.json +3 -3
|
@@ -206,7 +206,7 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
|
|
|
206
206
|
} & {
|
|
207
207
|
addBlock(key: string, block: BaseBlock): void;
|
|
208
208
|
deleteBlock(key: string): void;
|
|
209
|
-
selectFeature(feature: Feature): void
|
|
209
|
+
selectFeature(feature: Feature): Promise<void>;
|
|
210
210
|
navToFeature(feature: Feature): void;
|
|
211
211
|
clearFeatureSelection(): void;
|
|
212
212
|
setFeatureIdUnderMouse(feature?: string): void;
|
|
@@ -138,15 +138,23 @@ function stateModelFactory() {
|
|
|
138
138
|
deleteBlock(key) {
|
|
139
139
|
self.blockState.delete(key);
|
|
140
140
|
},
|
|
141
|
-
selectFeature(feature) {
|
|
141
|
+
async selectFeature(feature) {
|
|
142
142
|
const session = (0, util_1.getSession)(self);
|
|
143
143
|
if ((0, util_1.isSessionModelWithWidgets)(session)) {
|
|
144
|
-
const
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
144
|
+
const { rpcManager } = session;
|
|
145
|
+
const sessionId = (0, tracks_1.getRpcSessionId)(self);
|
|
146
|
+
const track = (0, util_1.getContainingTrack)(self);
|
|
147
|
+
const view = (0, util_1.getContainingView)(self);
|
|
148
|
+
const adapterConfig = (0, configuration_1.getConf)(track, 'adapter');
|
|
149
|
+
const descriptions = await rpcManager.call(sessionId, 'CoreGetMetadata', {
|
|
150
|
+
adapterConfig,
|
|
148
151
|
});
|
|
149
|
-
session.showWidget(
|
|
152
|
+
session.showWidget(session.addWidget('BaseFeatureWidget', 'baseFeature', {
|
|
153
|
+
featureData: feature.toJSON(),
|
|
154
|
+
view,
|
|
155
|
+
track,
|
|
156
|
+
descriptions,
|
|
157
|
+
}));
|
|
150
158
|
}
|
|
151
159
|
if ((0, util_1.isSelectionContainer)(session)) {
|
|
152
160
|
session.setSelection(feature);
|
|
@@ -197,7 +205,11 @@ function stateModelFactory() {
|
|
|
197
205
|
icon: MenuOpen_1.default,
|
|
198
206
|
onClick: () => {
|
|
199
207
|
if (self.contextMenuFeature) {
|
|
200
|
-
self
|
|
208
|
+
self
|
|
209
|
+
.selectFeature(self.contextMenuFeature)
|
|
210
|
+
.catch((e) => {
|
|
211
|
+
(0, util_1.getSession)(e).notifyError(`${e}`, e);
|
|
212
|
+
});
|
|
201
213
|
}
|
|
202
214
|
},
|
|
203
215
|
},
|
|
@@ -228,7 +240,9 @@ function stateModelFactory() {
|
|
|
228
240
|
else {
|
|
229
241
|
const feature = self.features.get(f);
|
|
230
242
|
if (feature) {
|
|
231
|
-
self.selectFeature(feature)
|
|
243
|
+
self.selectFeature(feature).catch((e) => {
|
|
244
|
+
(0, util_1.getSession)(e).notifyError(`${e}`, e);
|
|
245
|
+
});
|
|
232
246
|
}
|
|
233
247
|
}
|
|
234
248
|
},
|
|
@@ -190,7 +190,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
190
190
|
} & {
|
|
191
191
|
addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
|
|
192
192
|
deleteBlock(key: string): void;
|
|
193
|
-
selectFeature(feature: import("@jbrowse/core/util").Feature): void
|
|
193
|
+
selectFeature(feature: import("@jbrowse/core/util").Feature): Promise<void>;
|
|
194
194
|
navToFeature(feature: import("@jbrowse/core/util").Feature): void;
|
|
195
195
|
clearFeatureSelection(): void;
|
|
196
196
|
setFeatureIdUnderMouse(feature?: string): void;
|
|
@@ -198,7 +198,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
|
|
|
198
198
|
} & {
|
|
199
199
|
addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
|
|
200
200
|
deleteBlock(key: string): void;
|
|
201
|
-
selectFeature(feature: import("@jbrowse/core/util").Feature): void
|
|
201
|
+
selectFeature(feature: import("@jbrowse/core/util").Feature): Promise<void>;
|
|
202
202
|
navToFeature(feature: import("@jbrowse/core/util").Feature): void;
|
|
203
203
|
clearFeatureSelection(): void;
|
|
204
204
|
setFeatureIdUnderMouse(feature?: string): void;
|
|
@@ -11,14 +11,14 @@ function rightRoundedRect(x, y, width, height, radius) {
|
|
|
11
11
|
function leftRoundedRect(x, y, width, height, radius) {
|
|
12
12
|
return `M${x + radius},${y}h${width - radius}v${height}h${radius - width}a${radius},${radius} 0 0 1 ${-radius},${-radius}v${2 * radius - height}a${radius},${radius} 0 0 1 ${radius},${-radius}z`;
|
|
13
13
|
}
|
|
14
|
-
function leftTriangle(x,
|
|
14
|
+
function leftTriangle(x, _y, width, height) {
|
|
15
15
|
return [
|
|
16
16
|
[x, 0],
|
|
17
17
|
[x + width, height / 2],
|
|
18
18
|
[x, height],
|
|
19
19
|
].toString();
|
|
20
20
|
}
|
|
21
|
-
function rightTriangle(x,
|
|
21
|
+
function rightTriangle(x, _y, width, height) {
|
|
22
22
|
return [
|
|
23
23
|
[x, height / 2],
|
|
24
24
|
[x + width, 0],
|
|
@@ -42,14 +42,28 @@ const Cytobands = (0, mobx_react_1.observer)(function ({ overview, block, assemb
|
|
|
42
42
|
const rcap = reversed ? 0 : cytobands.length - 1;
|
|
43
43
|
const h = consts_1.HEADER_OVERVIEW_HEIGHT;
|
|
44
44
|
let centromereSeen = false;
|
|
45
|
+
let curr = '';
|
|
46
|
+
let idx = 0;
|
|
45
47
|
return ((0, jsx_runtime_1.jsx)("g", { transform: `translate(-${offsetPx})`, children: cytobands.map((args, index) => {
|
|
46
48
|
const k = JSON.stringify(args);
|
|
47
|
-
const { refName, type, start, end } = args;
|
|
49
|
+
const { refName, name, type, start, end } = args;
|
|
48
50
|
const s = overview.bpToPx({ refName, coord: start }) || 0;
|
|
49
51
|
const e = overview.bpToPx({ refName, coord: end }) || 0;
|
|
50
52
|
const l = Math.min(s, e);
|
|
51
53
|
const w = Math.abs(e - s);
|
|
52
|
-
|
|
54
|
+
if (type === 'n/a') {
|
|
55
|
+
const match = name === null || name === void 0 ? void 0 : name.match(/^(\d+)([A-Za-z])/);
|
|
56
|
+
const ret = match[1] + match[2];
|
|
57
|
+
if (ret && ret !== curr) {
|
|
58
|
+
curr = ret;
|
|
59
|
+
idx++;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
const c = type === 'n/a'
|
|
63
|
+
? idx % 2
|
|
64
|
+
? 'black'
|
|
65
|
+
: '#a77'
|
|
66
|
+
: colorMap[type] || 'black';
|
|
53
67
|
if (type === 'acen' && !centromereSeen) {
|
|
54
68
|
centromereSeen = true;
|
|
55
69
|
return ((0, jsx_runtime_1.jsx)("polygon", { points: reversed
|
|
@@ -33,8 +33,9 @@ async function fetchSequence(model, regions) {
|
|
|
33
33
|
if (!leftOffset || !rightOffset) {
|
|
34
34
|
throw new Error('no offsets on model to use for range');
|
|
35
35
|
}
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
const assemblyNames = new Set(regions.map(r => r.assemblyName));
|
|
37
|
+
if (assemblyNames.size > 1) {
|
|
38
|
+
throw new Error('not able to fetch sequences from multiple assemblies currently');
|
|
38
39
|
}
|
|
39
40
|
const { rpcManager, assemblyManager } = session;
|
|
40
41
|
const assemblyName = leftOffset.assemblyName || rightOffset.assemblyName || '';
|
|
@@ -6,20 +6,12 @@ const material_1 = require("@mui/material");
|
|
|
6
6
|
const mobx_react_1 = require("mobx-react");
|
|
7
7
|
const mui_1 = require("tss-react/mui");
|
|
8
8
|
const useStyles = (0, mui_1.makeStyles)()({
|
|
9
|
-
rubberbandControl: {
|
|
10
|
-
cursor: 'crosshair',
|
|
11
|
-
width: '100%',
|
|
12
|
-
minHeight: 8,
|
|
13
|
-
},
|
|
14
9
|
guide: {
|
|
15
10
|
pointerEvents: 'none',
|
|
16
11
|
height: '100%',
|
|
17
12
|
width: 1,
|
|
18
13
|
position: 'absolute',
|
|
19
14
|
},
|
|
20
|
-
rel: {
|
|
21
|
-
position: 'relative',
|
|
22
|
-
},
|
|
23
15
|
});
|
|
24
16
|
const OverviewRubberbandHoverTooltip = (0, mobx_react_1.observer)(function ({ model, open, guideX, overview, }) {
|
|
25
17
|
var _a;
|
|
@@ -31,6 +23,6 @@ const OverviewRubberbandHoverTooltip = (0, mobx_react_1.observer)(function ({ mo
|
|
|
31
23
|
const cytoband = (_a = assembly === null || assembly === void 0 ? void 0 : assembly.cytobands) === null || _a === void 0 ? void 0 : _a.find(f => px.coord > f.get('start') &&
|
|
32
24
|
px.coord < f.get('end') &&
|
|
33
25
|
px.refName === assembly.getCanonicalRefName(f.get('refName')));
|
|
34
|
-
return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: open, placement: "top", title: [(0, util_1.stringify)(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name')].join(' '), arrow: true, children: (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: { left: guideX } }) }));
|
|
26
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: open, placement: "top", title: [(0, util_1.stringify)(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name'), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('type')].join(' '), arrow: true, children: (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: { left: guideX } }) }));
|
|
35
27
|
});
|
|
36
28
|
exports.default = OverviewRubberbandHoverTooltip;
|
|
@@ -63,27 +63,31 @@ const RefNameAutocomplete = (0, mobx_react_1.observer)(function ({ model, onSele
|
|
|
63
63
|
return;
|
|
64
64
|
}
|
|
65
65
|
setLoaded(false);
|
|
66
|
-
|
|
67
|
-
setLoaded(true);
|
|
68
|
-
setSearchOptions((0, util_2.getDeduplicatedResult)(results));
|
|
66
|
+
setSearchOptions((0, util_2.getDeduplicatedResult)(await fetchResults(debouncedSearch)));
|
|
69
67
|
}
|
|
70
68
|
catch (e) {
|
|
71
69
|
console.error(e);
|
|
72
70
|
session.notifyError(`${e}`, e);
|
|
73
71
|
}
|
|
72
|
+
finally {
|
|
73
|
+
setLoaded(true);
|
|
74
|
+
}
|
|
74
75
|
})();
|
|
75
76
|
}, [assemblyName, fetchResults, debouncedSearch, session]);
|
|
76
77
|
const inputBoxVal = coarseVisibleLocStrings || value || '';
|
|
77
|
-
const
|
|
78
|
-
const
|
|
79
|
-
const regionOptions = (refNames === null || refNames === void 0 ? void 0 : refNames.map(refName => ({
|
|
78
|
+
const regions = assembly === null || assembly === void 0 ? void 0 : assembly.regions;
|
|
79
|
+
const regionOptions = (regions === null || regions === void 0 ? void 0 : regions.map(region => ({
|
|
80
80
|
result: new BaseResults_1.RefSequenceResult({
|
|
81
|
-
refName,
|
|
82
|
-
label: refName,
|
|
81
|
+
refName: region.refName,
|
|
82
|
+
label: region.refName,
|
|
83
|
+
displayString: region.refName,
|
|
83
84
|
matchedAttribute: 'refName',
|
|
84
85
|
}),
|
|
85
86
|
}))) || [];
|
|
86
|
-
return ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { "data-testid": "autocomplete", disableListWrap: true, disableClearable: true, disabled: !assemblyName, freeSolo: true, includeInputInList: true, selectOnFocus: true, style: {
|
|
87
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { "data-testid": "autocomplete", disableListWrap: true, disableClearable: true, disabled: !assemblyName, freeSolo: true, includeInputInList: true, selectOnFocus: true, style: {
|
|
88
|
+
...style,
|
|
89
|
+
width: Math.min(Math.max((0, util_1.measureText)(inputBoxVal, 14) + 100, minWidth), maxWidth),
|
|
90
|
+
}, value: inputBoxVal, loading: !loaded, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
|
|
87
91
|
setInputValue(newInputValue);
|
|
88
92
|
onChange === null || onChange === void 0 ? void 0 : onChange(newInputValue);
|
|
89
93
|
}, loadingText: "loading results", open: open, onOpen: () => {
|
|
@@ -100,7 +104,9 @@ const RefNameAutocomplete = (0, mobx_react_1.observer)(function ({ model, onSele
|
|
|
100
104
|
return;
|
|
101
105
|
}
|
|
102
106
|
if (typeof selectedOption === 'string') {
|
|
103
|
-
onSelect === null || onSelect === void 0 ? void 0 : onSelect(new BaseResults_1.default({
|
|
107
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(new BaseResults_1.default({
|
|
108
|
+
label: selectedOption,
|
|
109
|
+
}));
|
|
104
110
|
}
|
|
105
111
|
else {
|
|
106
112
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedOption.result);
|
|
@@ -13,11 +13,33 @@ const EndAdornment_1 = __importDefault(require("./RefNameAutocomplete/EndAdornme
|
|
|
13
13
|
const util_2 = require("./util");
|
|
14
14
|
const searchUtils_1 = require("../../searchUtils");
|
|
15
15
|
const consts_1 = require("../consts");
|
|
16
|
-
const useStyles = (0, mui_1.makeStyles)()(
|
|
16
|
+
const useStyles = (0, mui_1.makeStyles)()({
|
|
17
17
|
headerRefName: {
|
|
18
18
|
minWidth: 100,
|
|
19
19
|
},
|
|
20
|
-
})
|
|
20
|
+
});
|
|
21
|
+
async function onSelect({ option, model, assemblyName, }) {
|
|
22
|
+
var _a;
|
|
23
|
+
const { assemblyManager } = (0, util_1.getSession)(model);
|
|
24
|
+
const assembly = assemblyManager.get(assemblyName);
|
|
25
|
+
if (option.hasLocation()) {
|
|
26
|
+
await (0, searchUtils_1.navToOption)({
|
|
27
|
+
option,
|
|
28
|
+
model,
|
|
29
|
+
assemblyName,
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
else if ((_a = option.results) === null || _a === void 0 ? void 0 : _a.length) {
|
|
33
|
+
model.setSearchResults(option.results, option.getLabel());
|
|
34
|
+
}
|
|
35
|
+
else if (assembly) {
|
|
36
|
+
await (0, searchUtils_1.handleSelectedRegion)({
|
|
37
|
+
input: option.getLabel(),
|
|
38
|
+
assembly,
|
|
39
|
+
model,
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
}
|
|
21
43
|
const SearchBox = (0, mobx_react_1.observer)(function ({ model, showHelp = true, }) {
|
|
22
44
|
const { classes } = useStyles();
|
|
23
45
|
const theme = (0, material_1.useTheme)();
|
|
@@ -28,21 +50,12 @@ const SearchBox = (0, mobx_react_1.observer)(function ({ model, showHelp = true,
|
|
|
28
50
|
const assembly = assemblyManager.get(assemblyName);
|
|
29
51
|
const searchScope = model.searchScope(assemblyName);
|
|
30
52
|
return ((0, jsx_runtime_1.jsx)(RefNameAutocomplete_1.default, { onSelect: async (option) => {
|
|
31
|
-
var _a;
|
|
32
53
|
try {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
else if (assembly) {
|
|
40
|
-
await (0, searchUtils_1.handleSelectedRegion)({
|
|
41
|
-
input: option.getLabel(),
|
|
42
|
-
assembly,
|
|
43
|
-
model,
|
|
44
|
-
});
|
|
45
|
-
}
|
|
54
|
+
await onSelect({
|
|
55
|
+
model,
|
|
56
|
+
assemblyName,
|
|
57
|
+
option,
|
|
58
|
+
});
|
|
46
59
|
}
|
|
47
60
|
catch (e) {
|
|
48
61
|
console.error(e);
|
|
@@ -2,16 +2,27 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useWheelScroll = useWheelScroll;
|
|
4
4
|
const react_1 = require("react");
|
|
5
|
+
const util_1 = require("@jbrowse/core/util");
|
|
5
6
|
function useWheelScroll(ref, model) {
|
|
6
7
|
const delta = (0, react_1.useRef)(0);
|
|
7
8
|
const timeout = (0, react_1.useRef)(null);
|
|
8
9
|
const scheduled = (0, react_1.useRef)(false);
|
|
9
10
|
(0, react_1.useEffect)(() => {
|
|
11
|
+
let samples = [];
|
|
10
12
|
const curr = ref.current;
|
|
11
13
|
function onWheel(event) {
|
|
12
14
|
if (event.ctrlKey) {
|
|
13
15
|
event.preventDefault();
|
|
14
|
-
|
|
16
|
+
samples.push(event.deltaY);
|
|
17
|
+
const averageDeltaY = Math.abs((0, util_1.sum)(samples)) / samples.length;
|
|
18
|
+
const normalizer = averageDeltaY < 6
|
|
19
|
+
? 25
|
|
20
|
+
: averageDeltaY > 30
|
|
21
|
+
? averageDeltaY > 150
|
|
22
|
+
? 500
|
|
23
|
+
: 150
|
|
24
|
+
: 75;
|
|
25
|
+
delta.current += event.deltaY / normalizer;
|
|
15
26
|
model.setScaleFactor(delta.current < 0 ? 1 - delta.current : 1 / (1 + delta.current));
|
|
16
27
|
if (timeout.current) {
|
|
17
28
|
clearTimeout(timeout.current);
|
|
@@ -22,6 +33,7 @@ function useWheelScroll(ref, model) {
|
|
|
22
33
|
? model.bpPerPx * (1 + delta.current)
|
|
23
34
|
: model.bpPerPx / (1 - delta.current), event.clientX - ((curr === null || curr === void 0 ? void 0 : curr.getBoundingClientRect().left) || 0));
|
|
24
35
|
delta.current = 0;
|
|
36
|
+
samples = [];
|
|
25
37
|
}, 300);
|
|
26
38
|
}
|
|
27
39
|
else {
|
|
@@ -14,12 +14,14 @@ async function fetchResults({ queryString, searchType, searchScope, rankSearchRe
|
|
|
14
14
|
if (!textSearchManager) {
|
|
15
15
|
console.warn('No text search manager');
|
|
16
16
|
}
|
|
17
|
-
const textSearchResults = await (textSearchManager === null || textSearchManager === void 0 ? void 0 : textSearchManager.search({
|
|
17
|
+
const textSearchResults = (await (textSearchManager === null || textSearchManager === void 0 ? void 0 : textSearchManager.search({
|
|
18
18
|
queryString,
|
|
19
19
|
searchType,
|
|
20
|
-
}, searchScope, rankSearchResults));
|
|
21
|
-
const refNameResults = (_a = assembly === null || assembly === void 0 ? void 0 : assembly.allRefNames) === null || _a === void 0 ? void 0 : _a.filter(ref => ref.toLowerCase().startsWith(queryString.toLowerCase())).slice(0, 10).map(r => new BaseResults_1.default({
|
|
22
|
-
|
|
20
|
+
}, searchScope, rankSearchResults))) || [];
|
|
21
|
+
const refNameResults = ((_a = assembly === null || assembly === void 0 ? void 0 : assembly.allRefNames) === null || _a === void 0 ? void 0 : _a.filter(ref => ref.toLowerCase().startsWith(queryString.toLowerCase())).slice(0, 10).map(r => new BaseResults_1.default({
|
|
22
|
+
label: r,
|
|
23
|
+
}))) || [];
|
|
24
|
+
return (0, util_1.dedupe)([...refNameResults, ...textSearchResults], elt => elt.getId());
|
|
23
25
|
}
|
|
24
26
|
function splitLast(str, split) {
|
|
25
27
|
const lastIndex = str.lastIndexOf(split);
|
|
@@ -42,5 +44,6 @@ function getCytobands(assembly, refName) {
|
|
|
42
44
|
start: f.get('start'),
|
|
43
45
|
end: f.get('end'),
|
|
44
46
|
type: f.get('gieStain'),
|
|
47
|
+
name: f.get('name'),
|
|
45
48
|
})).filter(f => f.refName === refName)) || []);
|
|
46
49
|
}
|
|
@@ -169,13 +169,13 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
169
169
|
setCoarseDynamicBlocks(blocks: BlockSet): void;
|
|
170
170
|
} & {
|
|
171
171
|
moveTo(start?: BpOffset, end?: BpOffset): void;
|
|
172
|
-
navToLocString(input: string, optAssemblyName?: string): Promise<void>;
|
|
172
|
+
navToLocString(input: string, optAssemblyName?: string, grow?: number): Promise<void>;
|
|
173
173
|
navToSearchString({ input, assembly, }: {
|
|
174
174
|
input: string;
|
|
175
175
|
assembly: Assembly;
|
|
176
176
|
}): Promise<void>;
|
|
177
|
-
navToLocation(parsedLocString: ParsedLocString, assemblyName?: string): Promise<void>;
|
|
178
|
-
navToLocations(
|
|
177
|
+
navToLocation(parsedLocString: ParsedLocString, assemblyName?: string, grow?: number): Promise<void>;
|
|
178
|
+
navToLocations(regions: ParsedLocString[], assemblyName?: string, grow?: number): Promise<void>;
|
|
179
179
|
navTo(query: NavLocation): void;
|
|
180
180
|
navToMultiple(locations: NavLocation[]): void;
|
|
181
181
|
} & {
|
|
@@ -243,9 +243,9 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
243
243
|
displayName: string | undefined;
|
|
244
244
|
tracks: any[];
|
|
245
245
|
minimized: boolean;
|
|
246
|
-
displayedRegions: Region[];
|
|
247
246
|
offsetPx: number;
|
|
248
247
|
bpPerPx: number;
|
|
248
|
+
displayedRegions: Region[];
|
|
249
249
|
hideHeader: boolean;
|
|
250
250
|
hideHeaderOverview: boolean;
|
|
251
251
|
hideNoTracksActive: boolean;
|
|
@@ -262,12 +262,6 @@ function stateModelFactory(pluginManager) {
|
|
|
262
262
|
return self.tracks.find(t => t.configuration.trackId === id);
|
|
263
263
|
},
|
|
264
264
|
rankSearchResults(results) {
|
|
265
|
-
const openTrackIds = new Set(self.tracks.map(track => track.configuration.trackId));
|
|
266
|
-
for (const result of results) {
|
|
267
|
-
if (openTrackIds.has(result.trackId)) {
|
|
268
|
-
result.updateScore(result.getScore() + 1);
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
265
|
return results;
|
|
272
266
|
},
|
|
273
267
|
rewriteOnClicks(trackType, viewMenuActions) {
|
|
@@ -840,14 +834,14 @@ function stateModelFactory(pluginManager) {
|
|
|
840
834
|
moveTo(start, end) {
|
|
841
835
|
(0, Base1DUtils_1.moveTo)(self, start, end);
|
|
842
836
|
},
|
|
843
|
-
async navToLocString(input, optAssemblyName) {
|
|
837
|
+
async navToLocString(input, optAssemblyName, grow) {
|
|
844
838
|
const { assemblyNames } = self;
|
|
845
839
|
const { assemblyManager } = (0, util_1.getSession)(self);
|
|
846
840
|
const assemblyName = optAssemblyName || assemblyNames[0];
|
|
847
841
|
if (assemblyName) {
|
|
848
842
|
await assemblyManager.waitForAssembly(assemblyName);
|
|
849
843
|
}
|
|
850
|
-
return this.navToLocations((0, util_2.parseLocStrings)(input, assemblyName, (ref, asm) => assemblyManager.isValidRefName(ref, asm)), assemblyName);
|
|
844
|
+
return this.navToLocations((0, util_2.parseLocStrings)(input, assemblyName, (ref, asm) => assemblyManager.isValidRefName(ref, asm)), assemblyName, grow);
|
|
851
845
|
},
|
|
852
846
|
async navToSearchString({ input, assembly, }) {
|
|
853
847
|
await (0, searchUtils_1.handleSelectedRegion)({
|
|
@@ -856,13 +850,18 @@ function stateModelFactory(pluginManager) {
|
|
|
856
850
|
model: self,
|
|
857
851
|
});
|
|
858
852
|
},
|
|
859
|
-
async navToLocation(parsedLocString, assemblyName) {
|
|
860
|
-
return this.navToLocations([parsedLocString], assemblyName);
|
|
853
|
+
async navToLocation(parsedLocString, assemblyName, grow) {
|
|
854
|
+
return this.navToLocations([parsedLocString], assemblyName, grow);
|
|
861
855
|
},
|
|
862
|
-
async navToLocations(
|
|
856
|
+
async navToLocations(regions, assemblyName, grow) {
|
|
863
857
|
const { assemblyManager } = (0, util_1.getSession)(self);
|
|
864
858
|
await (0, mobx_1.when)(() => self.volatileWidth !== undefined);
|
|
865
|
-
const locations = await (0, util_2.generateLocations)(
|
|
859
|
+
const locations = await (0, util_2.generateLocations)({
|
|
860
|
+
regions,
|
|
861
|
+
assemblyManager,
|
|
862
|
+
assemblyName,
|
|
863
|
+
grow,
|
|
864
|
+
});
|
|
866
865
|
if (locations.length === 1) {
|
|
867
866
|
const loc = locations[0];
|
|
868
867
|
const { reversed, parentRegion, start, end } = loc;
|
|
@@ -9,7 +9,12 @@ export declare function makeTicks(start: number, end: number, bpPerPx: number, e
|
|
|
9
9
|
base: number;
|
|
10
10
|
index: number;
|
|
11
11
|
}[];
|
|
12
|
-
export declare function generateLocations(regions
|
|
12
|
+
export declare function generateLocations({ regions, assemblyManager, assemblyName, grow, }: {
|
|
13
|
+
regions: ParsedLocString[];
|
|
14
|
+
assemblyManager: AssemblyManager;
|
|
15
|
+
assemblyName?: string;
|
|
16
|
+
grow?: number;
|
|
17
|
+
}): Promise<{
|
|
13
18
|
assemblyName: string;
|
|
14
19
|
parentRegion: import("@jbrowse/core/assemblyManager/assembly").BasicRegion;
|
|
15
20
|
end?: number | undefined;
|
|
@@ -57,7 +57,7 @@ function makeTicks(start, end, bpPerPx, emitMajor = true, emitMinor = true) {
|
|
|
57
57
|
}
|
|
58
58
|
return ticks;
|
|
59
59
|
}
|
|
60
|
-
async function generateLocations(regions, assemblyManager, assemblyName) {
|
|
60
|
+
async function generateLocations({ regions, assemblyManager, assemblyName, grow, }) {
|
|
61
61
|
return Promise.all(regions.map(async (region) => {
|
|
62
62
|
const asmName = region.assemblyName || assemblyName;
|
|
63
63
|
if (!asmName) {
|
|
@@ -80,11 +80,25 @@ async function generateLocations(regions, assemblyManager, assemblyName) {
|
|
|
80
80
|
if (!parentRegion) {
|
|
81
81
|
throw new Error(`Could not find refName ${refName} in ${asmName}`);
|
|
82
82
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
83
|
+
const { start, end } = region;
|
|
84
|
+
if (grow && start && end) {
|
|
85
|
+
const len = end - start;
|
|
86
|
+
const margin = len * grow;
|
|
87
|
+
return {
|
|
88
|
+
...region,
|
|
89
|
+
start: Math.max(0, start - margin),
|
|
90
|
+
end: end + margin,
|
|
91
|
+
assemblyName: asmName,
|
|
92
|
+
parentRegion,
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
return {
|
|
97
|
+
...region,
|
|
98
|
+
assemblyName: asmName,
|
|
99
|
+
parentRegion,
|
|
100
|
+
};
|
|
101
|
+
}
|
|
88
102
|
}));
|
|
89
103
|
}
|
|
90
104
|
function parseLocStrings(input, assemblyName, isValidRefName) {
|
package/dist/index.d.ts
CHANGED
|
@@ -195,7 +195,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
|
|
|
195
195
|
} & {
|
|
196
196
|
addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
|
|
197
197
|
deleteBlock(key: string): void;
|
|
198
|
-
selectFeature(feature: import("@jbrowse/core/util").Feature): void
|
|
198
|
+
selectFeature(feature: import("@jbrowse/core/util").Feature): Promise<void>;
|
|
199
199
|
navToFeature(feature: import("@jbrowse/core/util").Feature): void;
|
|
200
200
|
clearFeatureSelection(): void;
|
|
201
201
|
setFeatureIdUnderMouse(feature?: string): void;
|
package/dist/searchUtils.js
CHANGED
|
@@ -14,7 +14,7 @@ async function navToOption({ option, model, assemblyName, }) {
|
|
|
14
14
|
const location = option.getLocation();
|
|
15
15
|
const trackId = option.getTrackId();
|
|
16
16
|
if (location) {
|
|
17
|
-
await model.navToLocString(location, assemblyName);
|
|
17
|
+
await model.navToLocString(location, assemblyName, 0.2);
|
|
18
18
|
if (trackId) {
|
|
19
19
|
model.showTrack(trackId);
|
|
20
20
|
}
|
|
@@ -206,7 +206,7 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
|
|
|
206
206
|
} & {
|
|
207
207
|
addBlock(key: string, block: BaseBlock): void;
|
|
208
208
|
deleteBlock(key: string): void;
|
|
209
|
-
selectFeature(feature: Feature): void
|
|
209
|
+
selectFeature(feature: Feature): Promise<void>;
|
|
210
210
|
navToFeature(feature: Feature): void;
|
|
211
211
|
clearFeatureSelection(): void;
|
|
212
212
|
setFeatureIdUnderMouse(feature?: string): void;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { lazy } from 'react';
|
|
2
|
-
import { ConfigurationReference } from '@jbrowse/core/configuration';
|
|
2
|
+
import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
|
|
3
3
|
import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
|
|
4
4
|
import { getContainingTrack, getContainingView, getSession, isFeature, isSelectionContainer, isSessionModelWithWidgets, } from '@jbrowse/core/util';
|
|
5
5
|
import CompositeMap from '@jbrowse/core/util/compositeMap';
|
|
6
|
-
import { getParentRenderProps } from '@jbrowse/core/util/tracks';
|
|
6
|
+
import { getParentRenderProps, getRpcSessionId, } from '@jbrowse/core/util/tracks';
|
|
7
7
|
import CenterFocusStrongIcon from '@mui/icons-material/CenterFocusStrong';
|
|
8
8
|
import MenuOpenIcon from '@mui/icons-material/MenuOpen';
|
|
9
9
|
import { autorun } from 'mobx';
|
|
@@ -99,15 +99,23 @@ function stateModelFactory() {
|
|
|
99
99
|
deleteBlock(key) {
|
|
100
100
|
self.blockState.delete(key);
|
|
101
101
|
},
|
|
102
|
-
selectFeature(feature) {
|
|
102
|
+
async selectFeature(feature) {
|
|
103
103
|
const session = getSession(self);
|
|
104
104
|
if (isSessionModelWithWidgets(session)) {
|
|
105
|
-
const
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
105
|
+
const { rpcManager } = session;
|
|
106
|
+
const sessionId = getRpcSessionId(self);
|
|
107
|
+
const track = getContainingTrack(self);
|
|
108
|
+
const view = getContainingView(self);
|
|
109
|
+
const adapterConfig = getConf(track, 'adapter');
|
|
110
|
+
const descriptions = await rpcManager.call(sessionId, 'CoreGetMetadata', {
|
|
111
|
+
adapterConfig,
|
|
109
112
|
});
|
|
110
|
-
session.showWidget(
|
|
113
|
+
session.showWidget(session.addWidget('BaseFeatureWidget', 'baseFeature', {
|
|
114
|
+
featureData: feature.toJSON(),
|
|
115
|
+
view,
|
|
116
|
+
track,
|
|
117
|
+
descriptions,
|
|
118
|
+
}));
|
|
111
119
|
}
|
|
112
120
|
if (isSelectionContainer(session)) {
|
|
113
121
|
session.setSelection(feature);
|
|
@@ -158,7 +166,11 @@ function stateModelFactory() {
|
|
|
158
166
|
icon: MenuOpenIcon,
|
|
159
167
|
onClick: () => {
|
|
160
168
|
if (self.contextMenuFeature) {
|
|
161
|
-
self
|
|
169
|
+
self
|
|
170
|
+
.selectFeature(self.contextMenuFeature)
|
|
171
|
+
.catch((e) => {
|
|
172
|
+
getSession(e).notifyError(`${e}`, e);
|
|
173
|
+
});
|
|
162
174
|
}
|
|
163
175
|
},
|
|
164
176
|
},
|
|
@@ -189,7 +201,9 @@ function stateModelFactory() {
|
|
|
189
201
|
else {
|
|
190
202
|
const feature = self.features.get(f);
|
|
191
203
|
if (feature) {
|
|
192
|
-
self.selectFeature(feature)
|
|
204
|
+
self.selectFeature(feature).catch((e) => {
|
|
205
|
+
getSession(e).notifyError(`${e}`, e);
|
|
206
|
+
});
|
|
193
207
|
}
|
|
194
208
|
}
|
|
195
209
|
},
|
|
@@ -190,7 +190,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
190
190
|
} & {
|
|
191
191
|
addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
|
|
192
192
|
deleteBlock(key: string): void;
|
|
193
|
-
selectFeature(feature: import("@jbrowse/core/util").Feature): void
|
|
193
|
+
selectFeature(feature: import("@jbrowse/core/util").Feature): Promise<void>;
|
|
194
194
|
navToFeature(feature: import("@jbrowse/core/util").Feature): void;
|
|
195
195
|
clearFeatureSelection(): void;
|
|
196
196
|
setFeatureIdUnderMouse(feature?: string): void;
|
|
@@ -198,7 +198,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
|
|
|
198
198
|
} & {
|
|
199
199
|
addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
|
|
200
200
|
deleteBlock(key: string): void;
|
|
201
|
-
selectFeature(feature: import("@jbrowse/core/util").Feature): void
|
|
201
|
+
selectFeature(feature: import("@jbrowse/core/util").Feature): Promise<void>;
|
|
202
202
|
navToFeature(feature: import("@jbrowse/core/util").Feature): void;
|
|
203
203
|
clearFeatureSelection(): void;
|
|
204
204
|
setFeatureIdUnderMouse(feature?: string): void;
|
|
@@ -9,14 +9,14 @@ function rightRoundedRect(x, y, width, height, radius) {
|
|
|
9
9
|
function leftRoundedRect(x, y, width, height, radius) {
|
|
10
10
|
return `M${x + radius},${y}h${width - radius}v${height}h${radius - width}a${radius},${radius} 0 0 1 ${-radius},${-radius}v${2 * radius - height}a${radius},${radius} 0 0 1 ${radius},${-radius}z`;
|
|
11
11
|
}
|
|
12
|
-
function leftTriangle(x,
|
|
12
|
+
function leftTriangle(x, _y, width, height) {
|
|
13
13
|
return [
|
|
14
14
|
[x, 0],
|
|
15
15
|
[x + width, height / 2],
|
|
16
16
|
[x, height],
|
|
17
17
|
].toString();
|
|
18
18
|
}
|
|
19
|
-
function rightTriangle(x,
|
|
19
|
+
function rightTriangle(x, _y, width, height) {
|
|
20
20
|
return [
|
|
21
21
|
[x, height / 2],
|
|
22
22
|
[x + width, 0],
|
|
@@ -40,14 +40,28 @@ const Cytobands = observer(function ({ overview, block, assembly, }) {
|
|
|
40
40
|
const rcap = reversed ? 0 : cytobands.length - 1;
|
|
41
41
|
const h = HEADER_OVERVIEW_HEIGHT;
|
|
42
42
|
let centromereSeen = false;
|
|
43
|
+
let curr = '';
|
|
44
|
+
let idx = 0;
|
|
43
45
|
return (_jsx("g", { transform: `translate(-${offsetPx})`, children: cytobands.map((args, index) => {
|
|
44
46
|
const k = JSON.stringify(args);
|
|
45
|
-
const { refName, type, start, end } = args;
|
|
47
|
+
const { refName, name, type, start, end } = args;
|
|
46
48
|
const s = overview.bpToPx({ refName, coord: start }) || 0;
|
|
47
49
|
const e = overview.bpToPx({ refName, coord: end }) || 0;
|
|
48
50
|
const l = Math.min(s, e);
|
|
49
51
|
const w = Math.abs(e - s);
|
|
50
|
-
|
|
52
|
+
if (type === 'n/a') {
|
|
53
|
+
const match = name === null || name === void 0 ? void 0 : name.match(/^(\d+)([A-Za-z])/);
|
|
54
|
+
const ret = match[1] + match[2];
|
|
55
|
+
if (ret && ret !== curr) {
|
|
56
|
+
curr = ret;
|
|
57
|
+
idx++;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
const c = type === 'n/a'
|
|
61
|
+
? idx % 2
|
|
62
|
+
? 'black'
|
|
63
|
+
: '#a77'
|
|
64
|
+
: colorMap[type] || 'black';
|
|
51
65
|
if (type === 'acen' && !centromereSeen) {
|
|
52
66
|
centromereSeen = true;
|
|
53
67
|
return (_jsx("polygon", { points: reversed
|
|
@@ -28,8 +28,9 @@ async function fetchSequence(model, regions) {
|
|
|
28
28
|
if (!leftOffset || !rightOffset) {
|
|
29
29
|
throw new Error('no offsets on model to use for range');
|
|
30
30
|
}
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
const assemblyNames = new Set(regions.map(r => r.assemblyName));
|
|
32
|
+
if (assemblyNames.size > 1) {
|
|
33
|
+
throw new Error('not able to fetch sequences from multiple assemblies currently');
|
|
33
34
|
}
|
|
34
35
|
const { rpcManager, assemblyManager } = session;
|
|
35
36
|
const assemblyName = leftOffset.assemblyName || rightOffset.assemblyName || '';
|
|
@@ -4,20 +4,12 @@ import { Tooltip } from '@mui/material';
|
|
|
4
4
|
import { observer } from 'mobx-react';
|
|
5
5
|
import { makeStyles } from 'tss-react/mui';
|
|
6
6
|
const useStyles = makeStyles()({
|
|
7
|
-
rubberbandControl: {
|
|
8
|
-
cursor: 'crosshair',
|
|
9
|
-
width: '100%',
|
|
10
|
-
minHeight: 8,
|
|
11
|
-
},
|
|
12
7
|
guide: {
|
|
13
8
|
pointerEvents: 'none',
|
|
14
9
|
height: '100%',
|
|
15
10
|
width: 1,
|
|
16
11
|
position: 'absolute',
|
|
17
12
|
},
|
|
18
|
-
rel: {
|
|
19
|
-
position: 'relative',
|
|
20
|
-
},
|
|
21
13
|
});
|
|
22
14
|
const OverviewRubberbandHoverTooltip = observer(function ({ model, open, guideX, overview, }) {
|
|
23
15
|
var _a;
|
|
@@ -29,6 +21,6 @@ const OverviewRubberbandHoverTooltip = observer(function ({ model, open, guideX,
|
|
|
29
21
|
const cytoband = (_a = assembly === null || assembly === void 0 ? void 0 : assembly.cytobands) === null || _a === void 0 ? void 0 : _a.find(f => px.coord > f.get('start') &&
|
|
30
22
|
px.coord < f.get('end') &&
|
|
31
23
|
px.refName === assembly.getCanonicalRefName(f.get('refName')));
|
|
32
|
-
return (_jsx(Tooltip, { open: open, placement: "top", title: [stringify(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name')].join(' '), arrow: true, children: _jsx("div", { className: classes.guide, style: { left: guideX } }) }));
|
|
24
|
+
return (_jsx(Tooltip, { open: open, placement: "top", title: [stringify(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name'), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('type')].join(' '), arrow: true, children: _jsx("div", { className: classes.guide, style: { left: guideX } }) }));
|
|
33
25
|
});
|
|
34
26
|
export default OverviewRubberbandHoverTooltip;
|
|
@@ -25,27 +25,31 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
|
|
|
25
25
|
return;
|
|
26
26
|
}
|
|
27
27
|
setLoaded(false);
|
|
28
|
-
|
|
29
|
-
setLoaded(true);
|
|
30
|
-
setSearchOptions(getDeduplicatedResult(results));
|
|
28
|
+
setSearchOptions(getDeduplicatedResult(await fetchResults(debouncedSearch)));
|
|
31
29
|
}
|
|
32
30
|
catch (e) {
|
|
33
31
|
console.error(e);
|
|
34
32
|
session.notifyError(`${e}`, e);
|
|
35
33
|
}
|
|
34
|
+
finally {
|
|
35
|
+
setLoaded(true);
|
|
36
|
+
}
|
|
36
37
|
})();
|
|
37
38
|
}, [assemblyName, fetchResults, debouncedSearch, session]);
|
|
38
39
|
const inputBoxVal = coarseVisibleLocStrings || value || '';
|
|
39
|
-
const
|
|
40
|
-
const
|
|
41
|
-
const regionOptions = (refNames === null || refNames === void 0 ? void 0 : refNames.map(refName => ({
|
|
40
|
+
const regions = assembly === null || assembly === void 0 ? void 0 : assembly.regions;
|
|
41
|
+
const regionOptions = (regions === null || regions === void 0 ? void 0 : regions.map(region => ({
|
|
42
42
|
result: new RefSequenceResult({
|
|
43
|
-
refName,
|
|
44
|
-
label: refName,
|
|
43
|
+
refName: region.refName,
|
|
44
|
+
label: region.refName,
|
|
45
|
+
displayString: region.refName,
|
|
45
46
|
matchedAttribute: 'refName',
|
|
46
47
|
}),
|
|
47
48
|
}))) || [];
|
|
48
|
-
return (_jsx(Autocomplete, { "data-testid": "autocomplete", disableListWrap: true, disableClearable: true, disabled: !assemblyName, freeSolo: true, includeInputInList: true, selectOnFocus: true, style: {
|
|
49
|
+
return (_jsx(Autocomplete, { "data-testid": "autocomplete", disableListWrap: true, disableClearable: true, disabled: !assemblyName, freeSolo: true, includeInputInList: true, selectOnFocus: true, style: {
|
|
50
|
+
...style,
|
|
51
|
+
width: Math.min(Math.max(measureText(inputBoxVal, 14) + 100, minWidth), maxWidth),
|
|
52
|
+
}, value: inputBoxVal, loading: !loaded, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
|
|
49
53
|
setInputValue(newInputValue);
|
|
50
54
|
onChange === null || onChange === void 0 ? void 0 : onChange(newInputValue);
|
|
51
55
|
}, loadingText: "loading results", open: open, onOpen: () => {
|
|
@@ -62,7 +66,9 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
|
|
|
62
66
|
return;
|
|
63
67
|
}
|
|
64
68
|
if (typeof selectedOption === 'string') {
|
|
65
|
-
onSelect === null || onSelect === void 0 ? void 0 : onSelect(new BaseResult({
|
|
69
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(new BaseResult({
|
|
70
|
+
label: selectedOption,
|
|
71
|
+
}));
|
|
66
72
|
}
|
|
67
73
|
else {
|
|
68
74
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedOption.result);
|
|
@@ -8,11 +8,33 @@ import EndAdornment from './RefNameAutocomplete/EndAdornment';
|
|
|
8
8
|
import { fetchResults } from './util';
|
|
9
9
|
import { handleSelectedRegion, navToOption } from '../../searchUtils';
|
|
10
10
|
import { SPACING, WIDGET_HEIGHT } from '../consts';
|
|
11
|
-
const useStyles = makeStyles()(
|
|
11
|
+
const useStyles = makeStyles()({
|
|
12
12
|
headerRefName: {
|
|
13
13
|
minWidth: 100,
|
|
14
14
|
},
|
|
15
|
-
})
|
|
15
|
+
});
|
|
16
|
+
async function onSelect({ option, model, assemblyName, }) {
|
|
17
|
+
var _a;
|
|
18
|
+
const { assemblyManager } = getSession(model);
|
|
19
|
+
const assembly = assemblyManager.get(assemblyName);
|
|
20
|
+
if (option.hasLocation()) {
|
|
21
|
+
await navToOption({
|
|
22
|
+
option,
|
|
23
|
+
model,
|
|
24
|
+
assemblyName,
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
else if ((_a = option.results) === null || _a === void 0 ? void 0 : _a.length) {
|
|
28
|
+
model.setSearchResults(option.results, option.getLabel());
|
|
29
|
+
}
|
|
30
|
+
else if (assembly) {
|
|
31
|
+
await handleSelectedRegion({
|
|
32
|
+
input: option.getLabel(),
|
|
33
|
+
assembly,
|
|
34
|
+
model,
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
}
|
|
16
38
|
const SearchBox = observer(function ({ model, showHelp = true, }) {
|
|
17
39
|
const { classes } = useStyles();
|
|
18
40
|
const theme = useTheme();
|
|
@@ -23,21 +45,12 @@ const SearchBox = observer(function ({ model, showHelp = true, }) {
|
|
|
23
45
|
const assembly = assemblyManager.get(assemblyName);
|
|
24
46
|
const searchScope = model.searchScope(assemblyName);
|
|
25
47
|
return (_jsx(RefNameAutocomplete, { onSelect: async (option) => {
|
|
26
|
-
var _a;
|
|
27
48
|
try {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
else if (assembly) {
|
|
35
|
-
await handleSelectedRegion({
|
|
36
|
-
input: option.getLabel(),
|
|
37
|
-
assembly,
|
|
38
|
-
model,
|
|
39
|
-
});
|
|
40
|
-
}
|
|
49
|
+
await onSelect({
|
|
50
|
+
model,
|
|
51
|
+
assemblyName,
|
|
52
|
+
option,
|
|
53
|
+
});
|
|
41
54
|
}
|
|
42
55
|
catch (e) {
|
|
43
56
|
console.error(e);
|
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
import { useEffect, useRef } from 'react';
|
|
2
|
+
import { sum } from '@jbrowse/core/util';
|
|
2
3
|
export function useWheelScroll(ref, model) {
|
|
3
4
|
const delta = useRef(0);
|
|
4
5
|
const timeout = useRef(null);
|
|
5
6
|
const scheduled = useRef(false);
|
|
6
7
|
useEffect(() => {
|
|
8
|
+
let samples = [];
|
|
7
9
|
const curr = ref.current;
|
|
8
10
|
function onWheel(event) {
|
|
9
11
|
if (event.ctrlKey) {
|
|
10
12
|
event.preventDefault();
|
|
11
|
-
|
|
13
|
+
samples.push(event.deltaY);
|
|
14
|
+
const averageDeltaY = Math.abs(sum(samples)) / samples.length;
|
|
15
|
+
const normalizer = averageDeltaY < 6
|
|
16
|
+
? 25
|
|
17
|
+
: averageDeltaY > 30
|
|
18
|
+
? averageDeltaY > 150
|
|
19
|
+
? 500
|
|
20
|
+
: 150
|
|
21
|
+
: 75;
|
|
22
|
+
delta.current += event.deltaY / normalizer;
|
|
12
23
|
model.setScaleFactor(delta.current < 0 ? 1 - delta.current : 1 / (1 + delta.current));
|
|
13
24
|
if (timeout.current) {
|
|
14
25
|
clearTimeout(timeout.current);
|
|
@@ -19,6 +30,7 @@ export function useWheelScroll(ref, model) {
|
|
|
19
30
|
? model.bpPerPx * (1 + delta.current)
|
|
20
31
|
: model.bpPerPx / (1 - delta.current), event.clientX - ((curr === null || curr === void 0 ? void 0 : curr.getBoundingClientRect().left) || 0));
|
|
21
32
|
delta.current = 0;
|
|
33
|
+
samples = [];
|
|
22
34
|
}, 300);
|
|
23
35
|
}
|
|
24
36
|
else {
|
|
@@ -5,12 +5,14 @@ export async function fetchResults({ queryString, searchType, searchScope, rankS
|
|
|
5
5
|
if (!textSearchManager) {
|
|
6
6
|
console.warn('No text search manager');
|
|
7
7
|
}
|
|
8
|
-
const textSearchResults = await (textSearchManager === null || textSearchManager === void 0 ? void 0 : textSearchManager.search({
|
|
8
|
+
const textSearchResults = (await (textSearchManager === null || textSearchManager === void 0 ? void 0 : textSearchManager.search({
|
|
9
9
|
queryString,
|
|
10
10
|
searchType,
|
|
11
|
-
}, searchScope, rankSearchResults));
|
|
12
|
-
const refNameResults = (_a = assembly === null || assembly === void 0 ? void 0 : assembly.allRefNames) === null || _a === void 0 ? void 0 : _a.filter(ref => ref.toLowerCase().startsWith(queryString.toLowerCase())).slice(0, 10).map(r => new BaseResult({
|
|
13
|
-
|
|
11
|
+
}, searchScope, rankSearchResults))) || [];
|
|
12
|
+
const refNameResults = ((_a = assembly === null || assembly === void 0 ? void 0 : assembly.allRefNames) === null || _a === void 0 ? void 0 : _a.filter(ref => ref.toLowerCase().startsWith(queryString.toLowerCase())).slice(0, 10).map(r => new BaseResult({
|
|
13
|
+
label: r,
|
|
14
|
+
}))) || [];
|
|
15
|
+
return dedupe([...refNameResults, ...textSearchResults], elt => elt.getId());
|
|
14
16
|
}
|
|
15
17
|
export function splitLast(str, split) {
|
|
16
18
|
const lastIndex = str.lastIndexOf(split);
|
|
@@ -33,5 +35,6 @@ export function getCytobands(assembly, refName) {
|
|
|
33
35
|
start: f.get('start'),
|
|
34
36
|
end: f.get('end'),
|
|
35
37
|
type: f.get('gieStain'),
|
|
38
|
+
name: f.get('name'),
|
|
36
39
|
})).filter(f => f.refName === refName)) || []);
|
|
37
40
|
}
|
|
@@ -169,13 +169,13 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
169
169
|
setCoarseDynamicBlocks(blocks: BlockSet): void;
|
|
170
170
|
} & {
|
|
171
171
|
moveTo(start?: BpOffset, end?: BpOffset): void;
|
|
172
|
-
navToLocString(input: string, optAssemblyName?: string): Promise<void>;
|
|
172
|
+
navToLocString(input: string, optAssemblyName?: string, grow?: number): Promise<void>;
|
|
173
173
|
navToSearchString({ input, assembly, }: {
|
|
174
174
|
input: string;
|
|
175
175
|
assembly: Assembly;
|
|
176
176
|
}): Promise<void>;
|
|
177
|
-
navToLocation(parsedLocString: ParsedLocString, assemblyName?: string): Promise<void>;
|
|
178
|
-
navToLocations(
|
|
177
|
+
navToLocation(parsedLocString: ParsedLocString, assemblyName?: string, grow?: number): Promise<void>;
|
|
178
|
+
navToLocations(regions: ParsedLocString[], assemblyName?: string, grow?: number): Promise<void>;
|
|
179
179
|
navTo(query: NavLocation): void;
|
|
180
180
|
navToMultiple(locations: NavLocation[]): void;
|
|
181
181
|
} & {
|
|
@@ -243,9 +243,9 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
243
243
|
displayName: string | undefined;
|
|
244
244
|
tracks: any[];
|
|
245
245
|
minimized: boolean;
|
|
246
|
-
displayedRegions: Region[];
|
|
247
246
|
offsetPx: number;
|
|
248
247
|
bpPerPx: number;
|
|
248
|
+
displayedRegions: Region[];
|
|
249
249
|
hideHeader: boolean;
|
|
250
250
|
hideHeaderOverview: boolean;
|
|
251
251
|
hideNoTracksActive: boolean;
|
|
@@ -222,12 +222,6 @@ export function stateModelFactory(pluginManager) {
|
|
|
222
222
|
return self.tracks.find(t => t.configuration.trackId === id);
|
|
223
223
|
},
|
|
224
224
|
rankSearchResults(results) {
|
|
225
|
-
const openTrackIds = new Set(self.tracks.map(track => track.configuration.trackId));
|
|
226
|
-
for (const result of results) {
|
|
227
|
-
if (openTrackIds.has(result.trackId)) {
|
|
228
|
-
result.updateScore(result.getScore() + 1);
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
225
|
return results;
|
|
232
226
|
},
|
|
233
227
|
rewriteOnClicks(trackType, viewMenuActions) {
|
|
@@ -800,14 +794,14 @@ export function stateModelFactory(pluginManager) {
|
|
|
800
794
|
moveTo(start, end) {
|
|
801
795
|
moveTo(self, start, end);
|
|
802
796
|
},
|
|
803
|
-
async navToLocString(input, optAssemblyName) {
|
|
797
|
+
async navToLocString(input, optAssemblyName, grow) {
|
|
804
798
|
const { assemblyNames } = self;
|
|
805
799
|
const { assemblyManager } = getSession(self);
|
|
806
800
|
const assemblyName = optAssemblyName || assemblyNames[0];
|
|
807
801
|
if (assemblyName) {
|
|
808
802
|
await assemblyManager.waitForAssembly(assemblyName);
|
|
809
803
|
}
|
|
810
|
-
return this.navToLocations(parseLocStrings(input, assemblyName, (ref, asm) => assemblyManager.isValidRefName(ref, asm)), assemblyName);
|
|
804
|
+
return this.navToLocations(parseLocStrings(input, assemblyName, (ref, asm) => assemblyManager.isValidRefName(ref, asm)), assemblyName, grow);
|
|
811
805
|
},
|
|
812
806
|
async navToSearchString({ input, assembly, }) {
|
|
813
807
|
await handleSelectedRegion({
|
|
@@ -816,13 +810,18 @@ export function stateModelFactory(pluginManager) {
|
|
|
816
810
|
model: self,
|
|
817
811
|
});
|
|
818
812
|
},
|
|
819
|
-
async navToLocation(parsedLocString, assemblyName) {
|
|
820
|
-
return this.navToLocations([parsedLocString], assemblyName);
|
|
813
|
+
async navToLocation(parsedLocString, assemblyName, grow) {
|
|
814
|
+
return this.navToLocations([parsedLocString], assemblyName, grow);
|
|
821
815
|
},
|
|
822
|
-
async navToLocations(
|
|
816
|
+
async navToLocations(regions, assemblyName, grow) {
|
|
823
817
|
const { assemblyManager } = getSession(self);
|
|
824
818
|
await when(() => self.volatileWidth !== undefined);
|
|
825
|
-
const locations = await generateLocations(
|
|
819
|
+
const locations = await generateLocations({
|
|
820
|
+
regions,
|
|
821
|
+
assemblyManager,
|
|
822
|
+
assemblyName,
|
|
823
|
+
grow,
|
|
824
|
+
});
|
|
826
825
|
if (locations.length === 1) {
|
|
827
826
|
const loc = locations[0];
|
|
828
827
|
const { reversed, parentRegion, start, end } = loc;
|
|
@@ -9,7 +9,12 @@ export declare function makeTicks(start: number, end: number, bpPerPx: number, e
|
|
|
9
9
|
base: number;
|
|
10
10
|
index: number;
|
|
11
11
|
}[];
|
|
12
|
-
export declare function generateLocations(regions
|
|
12
|
+
export declare function generateLocations({ regions, assemblyManager, assemblyName, grow, }: {
|
|
13
|
+
regions: ParsedLocString[];
|
|
14
|
+
assemblyManager: AssemblyManager;
|
|
15
|
+
assemblyName?: string;
|
|
16
|
+
grow?: number;
|
|
17
|
+
}): Promise<{
|
|
13
18
|
assemblyName: string;
|
|
14
19
|
parentRegion: import("@jbrowse/core/assemblyManager/assembly").BasicRegion;
|
|
15
20
|
end?: number | undefined;
|
|
@@ -50,7 +50,7 @@ export function makeTicks(start, end, bpPerPx, emitMajor = true, emitMinor = tru
|
|
|
50
50
|
}
|
|
51
51
|
return ticks;
|
|
52
52
|
}
|
|
53
|
-
export async function generateLocations(regions, assemblyManager, assemblyName) {
|
|
53
|
+
export async function generateLocations({ regions, assemblyManager, assemblyName, grow, }) {
|
|
54
54
|
return Promise.all(regions.map(async (region) => {
|
|
55
55
|
const asmName = region.assemblyName || assemblyName;
|
|
56
56
|
if (!asmName) {
|
|
@@ -73,11 +73,25 @@ export async function generateLocations(regions, assemblyManager, assemblyName)
|
|
|
73
73
|
if (!parentRegion) {
|
|
74
74
|
throw new Error(`Could not find refName ${refName} in ${asmName}`);
|
|
75
75
|
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
76
|
+
const { start, end } = region;
|
|
77
|
+
if (grow && start && end) {
|
|
78
|
+
const len = end - start;
|
|
79
|
+
const margin = len * grow;
|
|
80
|
+
return {
|
|
81
|
+
...region,
|
|
82
|
+
start: Math.max(0, start - margin),
|
|
83
|
+
end: end + margin,
|
|
84
|
+
assemblyName: asmName,
|
|
85
|
+
parentRegion,
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
else {
|
|
89
|
+
return {
|
|
90
|
+
...region,
|
|
91
|
+
assemblyName: asmName,
|
|
92
|
+
parentRegion,
|
|
93
|
+
};
|
|
94
|
+
}
|
|
81
95
|
}));
|
|
82
96
|
}
|
|
83
97
|
export function parseLocStrings(input, assemblyName, isValidRefName) {
|
package/esm/index.d.ts
CHANGED
|
@@ -195,7 +195,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
|
|
|
195
195
|
} & {
|
|
196
196
|
addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
|
|
197
197
|
deleteBlock(key: string): void;
|
|
198
|
-
selectFeature(feature: import("@jbrowse/core/util").Feature): void
|
|
198
|
+
selectFeature(feature: import("@jbrowse/core/util").Feature): Promise<void>;
|
|
199
199
|
navToFeature(feature: import("@jbrowse/core/util").Feature): void;
|
|
200
200
|
clearFeatureSelection(): void;
|
|
201
201
|
setFeatureIdUnderMouse(feature?: string): void;
|
package/esm/searchUtils.js
CHANGED
|
@@ -4,7 +4,7 @@ export async function navToOption({ option, model, assemblyName, }) {
|
|
|
4
4
|
const location = option.getLocation();
|
|
5
5
|
const trackId = option.getTrackId();
|
|
6
6
|
if (location) {
|
|
7
|
-
await model.navToLocString(location, assemblyName);
|
|
7
|
+
await model.navToLocString(location, assemblyName, 0.2);
|
|
8
8
|
if (trackId) {
|
|
9
9
|
model.showTrack(trackId);
|
|
10
10
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-linear-genome-view",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.4.0",
|
|
4
4
|
"description": "JBrowse 2 linear genome view",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jbrowse",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"useSrc": "node ../../scripts/useSrc.js"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@jbrowse/core": "^3.
|
|
41
|
+
"@jbrowse/core": "^3.4.0",
|
|
42
42
|
"@mui/icons-material": "^7.0.0",
|
|
43
43
|
"@mui/material": "^7.0.0",
|
|
44
44
|
"@types/file-saver": "^2.0.1",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"access": "public"
|
|
59
59
|
},
|
|
60
60
|
"module": "esm/index.js",
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "a9f1ac35fc2dd810bae92cdaf1fc19995bee4413"
|
|
62
62
|
}
|