@jbrowse/plugin-linear-genome-view 2.10.2 → 2.11.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/components/BlockMsg.d.ts +2 -4
- package/dist/BaseLinearDisplay/components/BlockMsg.js +2 -3
- package/dist/BaseLinearDisplay/components/LinearBlocks.js +2 -2
- package/dist/BaseLinearDisplay/components/ServerSideRenderedBlockContent.d.ts +10 -2
- package/dist/BaseLinearDisplay/components/ServerSideRenderedBlockContent.js +40 -4
- package/dist/BaseLinearDisplay/components/TooLargeMessage.js +5 -4
- package/dist/BaseLinearDisplay/models/BaseLinearDisplayModel.d.ts +18 -4
- package/dist/BaseLinearDisplay/models/serverSideRenderedBlock.d.ts +9 -2
- package/dist/BaseLinearDisplay/models/serverSideRenderedBlock.js +0 -1
- package/dist/LaunchLinearGenomeView/index.js +24 -8
- package/dist/LinearBareDisplay/model.d.ts +18 -4
- package/dist/LinearBasicDisplay/components/SetMaxHeight.d.ts +1 -1
- package/dist/LinearBasicDisplay/model.d.ts +22 -4
- package/dist/LinearGenomeView/components/Cytobands.d.ts +1 -125
- package/dist/LinearGenomeView/components/ExportSvgDialog.js +9 -5
- package/dist/LinearGenomeView/components/Highlight.d.ts +7 -0
- package/dist/LinearGenomeView/components/Highlight.js +126 -0
- package/dist/LinearGenomeView/components/MiniControls.js +13 -15
- package/dist/LinearGenomeView/components/OverviewHighlight.d.ts +9 -0
- package/dist/LinearGenomeView/components/OverviewHighlight.js +62 -0
- package/dist/LinearGenomeView/components/OverviewRubberband.d.ts +1 -1
- package/dist/LinearGenomeView/components/OverviewScalebar.js +6 -1
- package/dist/LinearGenomeView/components/OverviewScalebarPolygon.d.ts +1 -1
- package/dist/LinearGenomeView/components/RefNameAutocomplete/index.d.ts +9 -9
- package/dist/LinearGenomeView/components/RefNameAutocomplete/index.js +28 -35
- package/dist/LinearGenomeView/components/Rubberband.d.ts +1 -1
- package/dist/LinearGenomeView/components/SearchBox.d.ts +1 -1
- package/dist/LinearGenomeView/components/SearchResultsTable.js +1 -1
- package/dist/LinearGenomeView/components/TrackContainer.js +10 -23
- package/dist/LinearGenomeView/components/TrackLabel.js +33 -6
- package/dist/LinearGenomeView/components/TracksContainer.js +2 -0
- package/dist/LinearGenomeView/components/ZoomControls.js +4 -4
- package/dist/LinearGenomeView/model.d.ts +70 -5
- package/dist/LinearGenomeView/model.js +111 -14
- package/dist/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js +1 -1
- package/dist/LinearGenomeView/util.d.ts +1 -1
- package/dist/index.d.ts +213 -21
- package/esm/BaseLinearDisplay/components/BlockMsg.d.ts +2 -4
- package/esm/BaseLinearDisplay/components/BlockMsg.js +3 -4
- package/esm/BaseLinearDisplay/components/LinearBlocks.js +2 -2
- package/esm/BaseLinearDisplay/components/ServerSideRenderedBlockContent.d.ts +10 -2
- package/esm/BaseLinearDisplay/components/ServerSideRenderedBlockContent.js +17 -4
- package/esm/BaseLinearDisplay/components/TooLargeMessage.js +5 -4
- package/esm/BaseLinearDisplay/models/BaseLinearDisplayModel.d.ts +18 -4
- package/esm/BaseLinearDisplay/models/serverSideRenderedBlock.d.ts +9 -2
- package/esm/BaseLinearDisplay/models/serverSideRenderedBlock.js +0 -1
- package/esm/LaunchLinearGenomeView/index.js +25 -9
- package/esm/LinearBareDisplay/model.d.ts +18 -4
- package/esm/LinearBasicDisplay/components/SetMaxHeight.d.ts +1 -1
- package/esm/LinearBasicDisplay/model.d.ts +22 -4
- package/esm/LinearGenomeView/components/Cytobands.d.ts +1 -125
- package/esm/LinearGenomeView/components/ExportSvgDialog.js +9 -5
- package/esm/LinearGenomeView/components/Highlight.d.ts +7 -0
- package/esm/LinearGenomeView/components/Highlight.js +98 -0
- package/esm/LinearGenomeView/components/MiniControls.js +14 -16
- package/esm/LinearGenomeView/components/OverviewHighlight.d.ts +9 -0
- package/esm/LinearGenomeView/components/OverviewHighlight.js +57 -0
- package/esm/LinearGenomeView/components/OverviewRubberband.d.ts +1 -1
- package/esm/LinearGenomeView/components/OverviewScalebar.js +7 -2
- package/esm/LinearGenomeView/components/OverviewScalebarPolygon.d.ts +1 -1
- package/esm/LinearGenomeView/components/RefNameAutocomplete/index.d.ts +9 -9
- package/esm/LinearGenomeView/components/RefNameAutocomplete/index.js +28 -35
- package/esm/LinearGenomeView/components/Rubberband.d.ts +1 -1
- package/esm/LinearGenomeView/components/SearchBox.d.ts +1 -1
- package/esm/LinearGenomeView/components/SearchResultsTable.js +1 -1
- package/esm/LinearGenomeView/components/TrackContainer.js +10 -23
- package/esm/LinearGenomeView/components/TrackLabel.js +33 -6
- package/esm/LinearGenomeView/components/TracksContainer.js +2 -0
- package/esm/LinearGenomeView/components/ZoomControls.js +4 -4
- package/esm/LinearGenomeView/model.d.ts +70 -5
- package/esm/LinearGenomeView/model.js +112 -15
- package/esm/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js +1 -1
- package/esm/LinearGenomeView/util.d.ts +1 -1
- package/esm/index.d.ts +213 -21
- package/package.json +2 -2
|
@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
|
|
|
4
4
|
import { observer } from 'mobx-react';
|
|
5
5
|
// core
|
|
6
6
|
import Base1DView from '@jbrowse/core/util/Base1DViewModel';
|
|
7
|
-
import { getSession, getTickDisplayStr } from '@jbrowse/core/util';
|
|
7
|
+
import { getEnv, getSession, getTickDisplayStr } from '@jbrowse/core/util';
|
|
8
8
|
import { ContentBlock } from '@jbrowse/core/util/blockTypes';
|
|
9
9
|
// locals
|
|
10
10
|
import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT, } from '..';
|
|
@@ -13,6 +13,7 @@ import { getCytobands } from './util';
|
|
|
13
13
|
import OverviewRubberband from './OverviewRubberband';
|
|
14
14
|
import Cytobands from './Cytobands';
|
|
15
15
|
import OverviewScalebarPolygon from './OverviewScalebarPolygon';
|
|
16
|
+
import OverviewHighlight from './OverviewHighlight';
|
|
16
17
|
const wholeSeqSpacer = 2;
|
|
17
18
|
const useStyles = makeStyles()(theme => ({
|
|
18
19
|
scalebar: {
|
|
@@ -117,6 +118,7 @@ const Scalebar = observer(function ({ model, scale, overview, }) {
|
|
|
117
118
|
const { classes } = useStyles();
|
|
118
119
|
const theme = useTheme();
|
|
119
120
|
const { dynamicBlocks, showCytobands, cytobandOffset } = model;
|
|
121
|
+
const { pluginManager } = getEnv(model);
|
|
120
122
|
const visibleRegions = dynamicBlocks.contentBlocks;
|
|
121
123
|
const overviewVisibleRegions = overview.dynamicBlocks;
|
|
122
124
|
const { tertiary, primary } = theme.palette;
|
|
@@ -137,6 +139,7 @@ const Scalebar = observer(function ({ model, scale, overview, }) {
|
|
|
137
139
|
}) || 0;
|
|
138
140
|
const color = showCytobands ? '#f00' : scalebarColor;
|
|
139
141
|
const transparency = showCytobands ? 0.1 : 0.3;
|
|
142
|
+
const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-OverviewScalebarComponent', undefined, { model, overview });
|
|
140
143
|
return (React.createElement("div", { className: classes.scalebar },
|
|
141
144
|
React.createElement("div", { className: classes.scalebarVisibleRegion, style: {
|
|
142
145
|
width: lastOverviewPx - firstOverviewPx,
|
|
@@ -151,7 +154,9 @@ const Scalebar = observer(function ({ model, scale, overview, }) {
|
|
|
151
154
|
backgroundColor: '#999',
|
|
152
155
|
backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
|
|
153
156
|
} })) : (React.createElement(OverviewBox, { scale: scale, block: block, model: model, overview: overview, key: `${JSON.stringify(block)}-${idx}` }));
|
|
154
|
-
})
|
|
157
|
+
}),
|
|
158
|
+
React.createElement(OverviewHighlight, { model: model, overview: overview }),
|
|
159
|
+
additional));
|
|
155
160
|
});
|
|
156
161
|
const OverviewScalebar = observer(function ({ model, children, }) {
|
|
157
162
|
const { classes } = useStyles();
|
|
@@ -4,6 +4,6 @@ import { LinearGenomeViewModel } from '..';
|
|
|
4
4
|
declare const OverviewScalebarPolygon: ({ model, overview, useOffset, }: {
|
|
5
5
|
model: LinearGenomeViewModel;
|
|
6
6
|
overview: Base1DViewModel;
|
|
7
|
-
useOffset?: boolean
|
|
7
|
+
useOffset?: boolean;
|
|
8
8
|
}) => React.JSX.Element | null;
|
|
9
9
|
export default OverviewScalebarPolygon;
|
|
@@ -4,15 +4,15 @@ import { TextFieldProps as TFP } from '@mui/material';
|
|
|
4
4
|
import { LinearGenomeViewModel } from '../../model';
|
|
5
5
|
declare const RefNameAutocomplete: ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp, minWidth, maxWidth, TextFieldProps, }: {
|
|
6
6
|
model: LinearGenomeViewModel;
|
|
7
|
-
onSelect?: (
|
|
8
|
-
onChange?: (
|
|
9
|
-
assemblyName?: string
|
|
10
|
-
value?: string
|
|
7
|
+
onSelect?: (region: BaseResult) => void;
|
|
8
|
+
onChange?: (val: string) => void;
|
|
9
|
+
assemblyName?: string;
|
|
10
|
+
value?: string;
|
|
11
11
|
fetchResults: (query: string) => Promise<BaseResult[]>;
|
|
12
|
-
style?: React.CSSProperties
|
|
13
|
-
minWidth?: number
|
|
14
|
-
maxWidth?: number
|
|
15
|
-
showHelp?: boolean
|
|
16
|
-
TextFieldProps?: TFP
|
|
12
|
+
style?: React.CSSProperties;
|
|
13
|
+
minWidth?: number;
|
|
14
|
+
maxWidth?: number;
|
|
15
|
+
showHelp?: boolean;
|
|
16
|
+
TextFieldProps?: TFP;
|
|
17
17
|
}) => React.JSX.Element;
|
|
18
18
|
export default RefNameAutocomplete;
|
|
@@ -17,7 +17,8 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
|
|
|
17
17
|
const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined;
|
|
18
18
|
const { coarseVisibleLocStrings, hasDisplayedRegions } = model;
|
|
19
19
|
useEffect(() => {
|
|
20
|
-
|
|
20
|
+
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
|
21
|
+
;
|
|
21
22
|
(async () => {
|
|
22
23
|
try {
|
|
23
24
|
if (debouncedSearch === '' || !assemblyName) {
|
|
@@ -25,21 +26,14 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
|
|
|
25
26
|
}
|
|
26
27
|
setLoaded(false);
|
|
27
28
|
const results = await fetchResults(debouncedSearch);
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
setSearchOptions(getDeduplicatedResult(results));
|
|
31
|
-
}
|
|
29
|
+
setLoaded(true);
|
|
30
|
+
setSearchOptions(getDeduplicatedResult(results));
|
|
32
31
|
}
|
|
33
32
|
catch (e) {
|
|
34
33
|
console.error(e);
|
|
35
|
-
|
|
36
|
-
session.notify(`${e}`, 'error');
|
|
37
|
-
}
|
|
34
|
+
session.notifyError(`${e}`, e);
|
|
38
35
|
}
|
|
39
36
|
})();
|
|
40
|
-
return () => {
|
|
41
|
-
active = false;
|
|
42
|
-
};
|
|
43
37
|
}, [assemblyName, fetchResults, debouncedSearch, session, model]);
|
|
44
38
|
const inputBoxVal = coarseVisibleLocStrings || value || '';
|
|
45
39
|
// heuristic, text width + 60 accommodates help icon and search icon
|
|
@@ -54,29 +48,28 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
|
|
|
54
48
|
}))) || [], [regions]);
|
|
55
49
|
// notes on implementation:
|
|
56
50
|
// The selectOnFocus setting helps highlight the field when clicked
|
|
57
|
-
return (React.createElement(
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}, options: (searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.length) ? searchOptions : regionOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => getFiltered(opts, inputValue), renderInput: params => (React.createElement(AutocompleteTextField, { showHelp: showHelp, params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() })));
|
|
51
|
+
return (React.createElement(Autocomplete, { "data-testid": "autocomplete", disableListWrap: true, disableClearable: true, disabled: !assemblyName, freeSolo: true, includeInputInList: true, selectOnFocus: true, style: { ...style, width }, value: inputBoxVal, loading: !loaded, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
|
|
52
|
+
setInputValue(newInputValue);
|
|
53
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newInputValue);
|
|
54
|
+
}, loadingText: "loading results", open: open, onOpen: () => setOpen(true), onClose: () => {
|
|
55
|
+
setOpen(false);
|
|
56
|
+
setLoaded(true);
|
|
57
|
+
if (hasDisplayedRegions) {
|
|
58
|
+
setCurrentSearch('');
|
|
59
|
+
setSearchOptions(undefined);
|
|
60
|
+
}
|
|
61
|
+
}, onChange: (_event, selectedOption) => {
|
|
62
|
+
if (!selectedOption || !assemblyName) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
if (typeof selectedOption === 'string') {
|
|
66
|
+
// handles string inputs on keyPress enter
|
|
67
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(new BaseResult({ label: selectedOption }));
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedOption.result);
|
|
71
|
+
}
|
|
72
|
+
setInputValue(inputBoxVal);
|
|
73
|
+
}, options: (searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.length) ? searchOptions : regionOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => getFiltered(opts, inputValue), renderInput: params => (React.createElement(AutocompleteTextField, { showHelp: showHelp, params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() }));
|
|
81
74
|
});
|
|
82
75
|
export default RefNameAutocomplete;
|
|
@@ -3,6 +3,6 @@ import { LinearGenomeViewModel } from '..';
|
|
|
3
3
|
type LGV = LinearGenomeViewModel;
|
|
4
4
|
declare const Rubberband: ({ model, ControlComponent, }: {
|
|
5
5
|
model: LGV;
|
|
6
|
-
ControlComponent?: React.ReactElement
|
|
6
|
+
ControlComponent?: React.ReactElement;
|
|
7
7
|
}) => React.JSX.Element;
|
|
8
8
|
export default Rubberband;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { LinearGenomeViewModel } from '..';
|
|
3
3
|
declare const SearchBox: ({ model, showHelp, }: {
|
|
4
|
-
showHelp?: boolean
|
|
4
|
+
showHelp?: boolean;
|
|
5
5
|
model: LinearGenomeViewModel;
|
|
6
6
|
}) => React.JSX.Element;
|
|
7
7
|
export default SearchBox;
|
|
@@ -69,7 +69,7 @@ export default function SearchResultsTable({ searchResults, assemblyName: optAss
|
|
|
69
69
|
}
|
|
70
70
|
catch (e) {
|
|
71
71
|
console.error(e);
|
|
72
|
-
session.
|
|
72
|
+
session.notifyError(`${e}`, e);
|
|
73
73
|
}
|
|
74
74
|
handleClose();
|
|
75
75
|
}, color: "primary", variant: "contained" }, "Go")))))))));
|
|
@@ -5,7 +5,6 @@ import { observer } from 'mobx-react';
|
|
|
5
5
|
import { isAlive } from 'mobx-state-tree';
|
|
6
6
|
import { ErrorBoundary } from 'react-error-boundary';
|
|
7
7
|
import { ResizeHandle, ErrorMessage } from '@jbrowse/core/ui';
|
|
8
|
-
import { useDebouncedCallback } from '@jbrowse/core/util';
|
|
9
8
|
import TrackLabelContainer from './TrackLabelContainer';
|
|
10
9
|
import TrackRenderingContainer from './TrackRenderingContainer';
|
|
11
10
|
const useStyles = makeStyles()({
|
|
@@ -18,40 +17,28 @@ const useStyles = makeStyles()({
|
|
|
18
17
|
position: 'relative',
|
|
19
18
|
zIndex: 2,
|
|
20
19
|
},
|
|
21
|
-
overlay: {
|
|
22
|
-
pointerEvents: 'none',
|
|
23
|
-
position: 'absolute',
|
|
24
|
-
top: 0,
|
|
25
|
-
left: 0,
|
|
26
|
-
width: '100%',
|
|
27
|
-
zIndex: 3,
|
|
28
|
-
},
|
|
29
20
|
});
|
|
30
21
|
const TrackContainer = observer(function ({ model, track, }) {
|
|
31
22
|
const { classes } = useStyles();
|
|
32
23
|
const display = track.displays[0];
|
|
33
24
|
const { draggingTrackId } = model;
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
const debouncedOnDragEnter = useDebouncedCallback(() => {
|
|
37
|
-
if (isAlive(display) && dimmed) {
|
|
38
|
-
model.moveTrack(draggingTrackId, track.id);
|
|
39
|
-
}
|
|
40
|
-
}, 100);
|
|
41
|
-
return (React.createElement(Paper, { ref: ref2, className: classes.root, variant: "outlined", onClick: event => {
|
|
25
|
+
const ref = useRef(null);
|
|
26
|
+
return (React.createElement(Paper, { ref: ref, className: classes.root, variant: "outlined", onClick: event => {
|
|
42
27
|
var _a;
|
|
43
28
|
if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
|
|
44
|
-
const left = ((_a =
|
|
29
|
+
const left = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0;
|
|
45
30
|
model.zoomTo(model.bpPerPx / 2, event.clientX - left, true);
|
|
46
31
|
}
|
|
47
32
|
} },
|
|
48
33
|
React.createElement(TrackLabelContainer, { track: track, view: model }),
|
|
49
34
|
React.createElement(ErrorBoundary, { FallbackComponent: e => React.createElement(ErrorMessage, { error: e.error }) },
|
|
50
|
-
React.createElement(TrackRenderingContainer, { model: model, track: track, onDragEnter:
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
35
|
+
React.createElement(TrackRenderingContainer, { model: model, track: track, onDragEnter: () => {
|
|
36
|
+
if (isAlive(display) &&
|
|
37
|
+
draggingTrackId !== undefined &&
|
|
38
|
+
draggingTrackId !== display.id) {
|
|
39
|
+
model.moveTrack(draggingTrackId, track.id);
|
|
40
|
+
}
|
|
41
|
+
} })),
|
|
55
42
|
React.createElement(ResizeHandle, { onDrag: display.resizeHeight, className: classes.resizeHandle })));
|
|
56
43
|
});
|
|
57
44
|
export default TrackContainer;
|
|
@@ -12,6 +12,10 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
|
|
|
12
12
|
import CloseIcon from '@mui/icons-material/Close';
|
|
13
13
|
import MinimizeIcon from '@mui/icons-material/Minimize';
|
|
14
14
|
import AddIcon from '@mui/icons-material/Add';
|
|
15
|
+
import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
|
|
16
|
+
import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
|
|
17
|
+
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
|
18
|
+
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
|
|
15
19
|
import TrackLabelDragHandle from './TrackLabelDragHandle';
|
|
16
20
|
const useStyles = makeStyles()(theme => ({
|
|
17
21
|
root: {
|
|
@@ -19,9 +23,6 @@ const useStyles = makeStyles()(theme => ({
|
|
|
19
23
|
'&:hover': {
|
|
20
24
|
background: theme.palette.background.paper,
|
|
21
25
|
},
|
|
22
|
-
transition: theme.transitions.create(['background'], {
|
|
23
|
-
duration: theme.transitions.duration.shortest,
|
|
24
|
-
}),
|
|
25
26
|
},
|
|
26
27
|
trackName: {
|
|
27
28
|
margin: '0 auto',
|
|
@@ -44,9 +45,35 @@ const TrackLabel = observer(React.forwardRef(function TrackLabel2({ track, class
|
|
|
44
45
|
const trackName = getTrackName(trackConf, session);
|
|
45
46
|
const items = [
|
|
46
47
|
{
|
|
47
|
-
label:
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
label: 'Track order',
|
|
49
|
+
type: 'subMenu',
|
|
50
|
+
subMenu: [
|
|
51
|
+
{
|
|
52
|
+
label: minimized ? 'Restore track' : 'Minimize track',
|
|
53
|
+
icon: minimized ? AddIcon : MinimizeIcon,
|
|
54
|
+
onClick: () => track.setMinimized(!minimized),
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
label: 'Move track to top',
|
|
58
|
+
icon: KeyboardDoubleArrowUpIcon,
|
|
59
|
+
onClick: () => view.moveTrackToTop(track.id),
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
label: 'Move track up',
|
|
63
|
+
icon: KeyboardArrowUpIcon,
|
|
64
|
+
onClick: () => view.moveTrackUp(track.id),
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
label: 'Move track down',
|
|
68
|
+
icon: KeyboardArrowDownIcon,
|
|
69
|
+
onClick: () => view.moveTrackDown(track.id),
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
label: 'Move track to bottom',
|
|
73
|
+
icon: KeyboardDoubleArrowDownIcon,
|
|
74
|
+
onClick: () => view.moveTrackToBottom(track.id),
|
|
75
|
+
},
|
|
76
|
+
],
|
|
50
77
|
},
|
|
51
78
|
...(((_a = session.getTrackActionMenuItems) === null || _a === void 0 ? void 0 : _a.call(session, trackConf)) || []),
|
|
52
79
|
...track.trackMenuItems(),
|
|
@@ -13,6 +13,7 @@ import Gridlines from './Gridlines';
|
|
|
13
13
|
import CenterLine from './CenterLine';
|
|
14
14
|
import VerticalGuide from './VerticalGuide';
|
|
15
15
|
import RubberbandSpan from './RubberbandSpan';
|
|
16
|
+
import HighlightGroup from './Highlight';
|
|
16
17
|
const useStyles = makeStyles()({
|
|
17
18
|
tracksContainer: {
|
|
18
19
|
position: 'relative',
|
|
@@ -39,6 +40,7 @@ const TracksContainer = observer(function TracksContainer({ children, model, })
|
|
|
39
40
|
top: anchorPosition.clientY,
|
|
40
41
|
}, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null,
|
|
41
42
|
React.createElement(Rubberband, { model: model, ControlComponent: React.createElement(Scalebar, { model: model, style: { height: SCALE_BAR_HEIGHT, boxSizing: 'border-box' } }) }),
|
|
43
|
+
React.createElement(HighlightGroup, { model: model }),
|
|
42
44
|
additional,
|
|
43
45
|
children));
|
|
44
46
|
});
|
|
@@ -17,16 +17,16 @@ const useStyles = makeStyles()(theme => ({
|
|
|
17
17
|
}));
|
|
18
18
|
const ZoomControls = observer(function ({ model, }) {
|
|
19
19
|
const { classes } = useStyles();
|
|
20
|
-
const { maxBpPerPx, minBpPerPx, bpPerPx
|
|
20
|
+
const { maxBpPerPx, minBpPerPx, bpPerPx } = model;
|
|
21
21
|
const [value, setValue] = useState(-Math.log2(bpPerPx) * 100);
|
|
22
22
|
useEffect(() => {
|
|
23
23
|
setValue(-Math.log2(bpPerPx) * 100);
|
|
24
24
|
}, [setValue, bpPerPx]);
|
|
25
25
|
return (React.createElement("div", { className: classes.container },
|
|
26
|
-
React.createElement(IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001
|
|
26
|
+
React.createElement(IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001, size: "large" },
|
|
27
27
|
React.createElement(ZoomOut, null)),
|
|
28
|
-
React.createElement(Slider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChange: (_, val) => setValue(val), onChangeCommitted: () => model.zoomTo(2 ** (-value / 100))
|
|
29
|
-
React.createElement(IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001
|
|
28
|
+
React.createElement(Slider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChange: (_, val) => setValue(val), onChangeCommitted: () => model.zoomTo(2 ** (-value / 100)) }),
|
|
29
|
+
React.createElement(IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001, size: "large" },
|
|
30
30
|
React.createElement(ZoomIn, null))));
|
|
31
31
|
});
|
|
32
32
|
export default ZoomControls;
|
|
@@ -81,6 +81,8 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
81
81
|
showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
|
|
82
82
|
trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
|
|
83
83
|
showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
|
|
84
|
+
highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<ParsedLocString>, Required<ParsedLocString>, Required<ParsedLocString>>>, [undefined]>;
|
|
85
|
+
colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
|
|
84
86
|
}, {
|
|
85
87
|
width: number;
|
|
86
88
|
} & {
|
|
@@ -223,6 +225,10 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
223
225
|
*/
|
|
224
226
|
readonly trackTypeActions: Map<string, MenuItem[]>;
|
|
225
227
|
} & {
|
|
228
|
+
/**
|
|
229
|
+
* #action
|
|
230
|
+
*/
|
|
231
|
+
setColorByCDS(flag: boolean): void;
|
|
226
232
|
/**
|
|
227
233
|
* #action
|
|
228
234
|
*/
|
|
@@ -251,6 +257,18 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
251
257
|
* #action
|
|
252
258
|
*/
|
|
253
259
|
setShowGridlines(b: boolean): void;
|
|
260
|
+
/**
|
|
261
|
+
* #action
|
|
262
|
+
*/
|
|
263
|
+
addToHighlights(highlight: Required<ParsedLocString>): void;
|
|
264
|
+
/**
|
|
265
|
+
* #action
|
|
266
|
+
*/
|
|
267
|
+
setHighlight(highlight: Required<ParsedLocString>[] | undefined): void;
|
|
268
|
+
/**
|
|
269
|
+
* #action
|
|
270
|
+
*/
|
|
271
|
+
removeHighlight(highlight: Required<ParsedLocString>): void;
|
|
254
272
|
/**
|
|
255
273
|
* #action
|
|
256
274
|
*/
|
|
@@ -287,6 +305,22 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
287
305
|
*/
|
|
288
306
|
hideTrack(trackId: string): number;
|
|
289
307
|
} & {
|
|
308
|
+
/**
|
|
309
|
+
* #action
|
|
310
|
+
*/
|
|
311
|
+
moveTrackDown(id: string): void;
|
|
312
|
+
/**
|
|
313
|
+
* #action
|
|
314
|
+
*/
|
|
315
|
+
moveTrackUp(id: string): void;
|
|
316
|
+
/**
|
|
317
|
+
* #action
|
|
318
|
+
*/
|
|
319
|
+
moveTrackToTop(id: string): void;
|
|
320
|
+
/**
|
|
321
|
+
* #action
|
|
322
|
+
*/
|
|
323
|
+
moveTrackToBottom(id: string): void;
|
|
290
324
|
/**
|
|
291
325
|
* #action
|
|
292
326
|
*/
|
|
@@ -523,20 +557,21 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
523
557
|
bpToPx({ refName, coord, regionNumber, }: {
|
|
524
558
|
refName: string;
|
|
525
559
|
coord: number;
|
|
526
|
-
regionNumber?: number
|
|
560
|
+
regionNumber?: number;
|
|
527
561
|
}): {
|
|
528
562
|
index: number;
|
|
529
563
|
offsetPx: number;
|
|
530
564
|
} | undefined;
|
|
531
565
|
/**
|
|
532
566
|
* #method
|
|
533
|
-
* scrolls the view to center on the given bp. if that is not in any
|
|
534
|
-
*
|
|
567
|
+
* scrolls the view to center on the given bp. if that is not in any of
|
|
568
|
+
* the displayed regions, does nothing
|
|
569
|
+
*
|
|
535
570
|
* @param coord - basepair at which you want to center the view
|
|
536
571
|
* @param refName - refName of the displayedRegion you are centering at
|
|
537
572
|
* @param regionNumber - index of the displayedRegion
|
|
538
573
|
*/
|
|
539
|
-
centerAt(coord: number, refName: string, regionNumber
|
|
574
|
+
centerAt(coord: number, refName: string, regionNumber?: number): void;
|
|
540
575
|
/**
|
|
541
576
|
* #method
|
|
542
577
|
*/
|
|
@@ -567,7 +602,37 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
567
602
|
} | undefined;
|
|
568
603
|
} & {
|
|
569
604
|
afterCreate(): void;
|
|
570
|
-
}, import("mobx-state-tree").
|
|
605
|
+
}, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
|
|
606
|
+
id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
|
|
607
|
+
displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
|
|
608
|
+
minimized: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
|
|
609
|
+
} & {
|
|
610
|
+
id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
|
|
611
|
+
type: import("mobx-state-tree").IType<string | undefined, string, string>;
|
|
612
|
+
offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
|
|
613
|
+
bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
|
|
614
|
+
displayedRegions: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
|
|
615
|
+
refName: import("mobx-state-tree").ISimpleType<string>;
|
|
616
|
+
start: import("mobx-state-tree").ISimpleType<number>;
|
|
617
|
+
end: import("mobx-state-tree").ISimpleType<number>;
|
|
618
|
+
reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
|
|
619
|
+
} & {
|
|
620
|
+
assemblyName: import("mobx-state-tree").ISimpleType<string>;
|
|
621
|
+
}, {
|
|
622
|
+
setRefName(newRefName: string): void;
|
|
623
|
+
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
|
|
624
|
+
tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
|
|
625
|
+
hideHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
|
|
626
|
+
hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
|
|
627
|
+
hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
|
|
628
|
+
trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
|
|
629
|
+
showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
|
|
630
|
+
showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
|
|
631
|
+
trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
|
|
632
|
+
showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
|
|
633
|
+
highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<ParsedLocString>, Required<ParsedLocString>, Required<ParsedLocString>>>, [undefined]>;
|
|
634
|
+
colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
|
|
635
|
+
}>>, import("mobx-state-tree")._NotCustomized>;
|
|
571
636
|
export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>;
|
|
572
637
|
export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>;
|
|
573
638
|
export { default as ReactComponent, default as LinearGenomeView, } from './components/LinearGenomeView';
|