@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.
Files changed (75) hide show
  1. package/dist/BaseLinearDisplay/components/BlockMsg.d.ts +2 -4
  2. package/dist/BaseLinearDisplay/components/BlockMsg.js +2 -3
  3. package/dist/BaseLinearDisplay/components/LinearBlocks.js +2 -2
  4. package/dist/BaseLinearDisplay/components/ServerSideRenderedBlockContent.d.ts +10 -2
  5. package/dist/BaseLinearDisplay/components/ServerSideRenderedBlockContent.js +40 -4
  6. package/dist/BaseLinearDisplay/components/TooLargeMessage.js +5 -4
  7. package/dist/BaseLinearDisplay/models/BaseLinearDisplayModel.d.ts +18 -4
  8. package/dist/BaseLinearDisplay/models/serverSideRenderedBlock.d.ts +9 -2
  9. package/dist/BaseLinearDisplay/models/serverSideRenderedBlock.js +0 -1
  10. package/dist/LaunchLinearGenomeView/index.js +24 -8
  11. package/dist/LinearBareDisplay/model.d.ts +18 -4
  12. package/dist/LinearBasicDisplay/components/SetMaxHeight.d.ts +1 -1
  13. package/dist/LinearBasicDisplay/model.d.ts +22 -4
  14. package/dist/LinearGenomeView/components/Cytobands.d.ts +1 -125
  15. package/dist/LinearGenomeView/components/ExportSvgDialog.js +9 -5
  16. package/dist/LinearGenomeView/components/Highlight.d.ts +7 -0
  17. package/dist/LinearGenomeView/components/Highlight.js +126 -0
  18. package/dist/LinearGenomeView/components/MiniControls.js +13 -15
  19. package/dist/LinearGenomeView/components/OverviewHighlight.d.ts +9 -0
  20. package/dist/LinearGenomeView/components/OverviewHighlight.js +62 -0
  21. package/dist/LinearGenomeView/components/OverviewRubberband.d.ts +1 -1
  22. package/dist/LinearGenomeView/components/OverviewScalebar.js +6 -1
  23. package/dist/LinearGenomeView/components/OverviewScalebarPolygon.d.ts +1 -1
  24. package/dist/LinearGenomeView/components/RefNameAutocomplete/index.d.ts +9 -9
  25. package/dist/LinearGenomeView/components/RefNameAutocomplete/index.js +28 -35
  26. package/dist/LinearGenomeView/components/Rubberband.d.ts +1 -1
  27. package/dist/LinearGenomeView/components/SearchBox.d.ts +1 -1
  28. package/dist/LinearGenomeView/components/SearchResultsTable.js +1 -1
  29. package/dist/LinearGenomeView/components/TrackContainer.js +10 -23
  30. package/dist/LinearGenomeView/components/TrackLabel.js +33 -6
  31. package/dist/LinearGenomeView/components/TracksContainer.js +2 -0
  32. package/dist/LinearGenomeView/components/ZoomControls.js +4 -4
  33. package/dist/LinearGenomeView/model.d.ts +70 -5
  34. package/dist/LinearGenomeView/model.js +111 -14
  35. package/dist/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js +1 -1
  36. package/dist/LinearGenomeView/util.d.ts +1 -1
  37. package/dist/index.d.ts +213 -21
  38. package/esm/BaseLinearDisplay/components/BlockMsg.d.ts +2 -4
  39. package/esm/BaseLinearDisplay/components/BlockMsg.js +3 -4
  40. package/esm/BaseLinearDisplay/components/LinearBlocks.js +2 -2
  41. package/esm/BaseLinearDisplay/components/ServerSideRenderedBlockContent.d.ts +10 -2
  42. package/esm/BaseLinearDisplay/components/ServerSideRenderedBlockContent.js +17 -4
  43. package/esm/BaseLinearDisplay/components/TooLargeMessage.js +5 -4
  44. package/esm/BaseLinearDisplay/models/BaseLinearDisplayModel.d.ts +18 -4
  45. package/esm/BaseLinearDisplay/models/serverSideRenderedBlock.d.ts +9 -2
  46. package/esm/BaseLinearDisplay/models/serverSideRenderedBlock.js +0 -1
  47. package/esm/LaunchLinearGenomeView/index.js +25 -9
  48. package/esm/LinearBareDisplay/model.d.ts +18 -4
  49. package/esm/LinearBasicDisplay/components/SetMaxHeight.d.ts +1 -1
  50. package/esm/LinearBasicDisplay/model.d.ts +22 -4
  51. package/esm/LinearGenomeView/components/Cytobands.d.ts +1 -125
  52. package/esm/LinearGenomeView/components/ExportSvgDialog.js +9 -5
  53. package/esm/LinearGenomeView/components/Highlight.d.ts +7 -0
  54. package/esm/LinearGenomeView/components/Highlight.js +98 -0
  55. package/esm/LinearGenomeView/components/MiniControls.js +14 -16
  56. package/esm/LinearGenomeView/components/OverviewHighlight.d.ts +9 -0
  57. package/esm/LinearGenomeView/components/OverviewHighlight.js +57 -0
  58. package/esm/LinearGenomeView/components/OverviewRubberband.d.ts +1 -1
  59. package/esm/LinearGenomeView/components/OverviewScalebar.js +7 -2
  60. package/esm/LinearGenomeView/components/OverviewScalebarPolygon.d.ts +1 -1
  61. package/esm/LinearGenomeView/components/RefNameAutocomplete/index.d.ts +9 -9
  62. package/esm/LinearGenomeView/components/RefNameAutocomplete/index.js +28 -35
  63. package/esm/LinearGenomeView/components/Rubberband.d.ts +1 -1
  64. package/esm/LinearGenomeView/components/SearchBox.d.ts +1 -1
  65. package/esm/LinearGenomeView/components/SearchResultsTable.js +1 -1
  66. package/esm/LinearGenomeView/components/TrackContainer.js +10 -23
  67. package/esm/LinearGenomeView/components/TrackLabel.js +33 -6
  68. package/esm/LinearGenomeView/components/TracksContainer.js +2 -0
  69. package/esm/LinearGenomeView/components/ZoomControls.js +4 -4
  70. package/esm/LinearGenomeView/model.d.ts +70 -5
  71. package/esm/LinearGenomeView/model.js +112 -15
  72. package/esm/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js +1 -1
  73. package/esm/LinearGenomeView/util.d.ts +1 -1
  74. package/esm/index.d.ts +213 -21
  75. 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 | undefined;
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?: ((region: BaseResult) => void) | undefined;
8
- onChange?: ((val: string) => void) | undefined;
9
- assemblyName?: string | undefined;
10
- value?: string | undefined;
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 | undefined;
13
- minWidth?: number | undefined;
14
- maxWidth?: number | undefined;
15
- showHelp?: boolean | undefined;
16
- TextFieldProps?: TFP | undefined;
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
- let active = true;
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
- if (active) {
29
- setLoaded(true);
30
- setSearchOptions(getDeduplicatedResult(results));
31
- }
29
+ setLoaded(true);
30
+ setSearchOptions(getDeduplicatedResult(results));
32
31
  }
33
32
  catch (e) {
34
33
  console.error(e);
35
- if (active) {
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(React.Fragment, null,
58
- 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) => {
59
- setInputValue(newInputValue);
60
- onChange === null || onChange === void 0 ? void 0 : onChange(newInputValue);
61
- }, loadingText: "loading results", open: open, onOpen: () => setOpen(true), onClose: () => {
62
- setOpen(false);
63
- setLoaded(true);
64
- if (hasDisplayedRegions) {
65
- setCurrentSearch('');
66
- setSearchOptions(undefined);
67
- }
68
- }, onChange: (_event, selectedOption) => {
69
- if (!selectedOption || !assemblyName) {
70
- return;
71
- }
72
- if (typeof selectedOption === 'string') {
73
- // handles string inputs on keyPress enter
74
- onSelect === null || onSelect === void 0 ? void 0 : onSelect(new BaseResult({ label: selectedOption }));
75
- }
76
- else {
77
- onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedOption.result);
78
- }
79
- setInputValue(inputBoxVal);
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<any, string | React.JSXElementConstructor<any>> | undefined;
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 | undefined;
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.notify(`${e}`, 'error');
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 ref2 = useRef(null);
35
- const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id;
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 = ref2.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0;
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: debouncedOnDragEnter })),
51
- React.createElement("div", { className: classes.overlay, style: {
52
- height: display.height,
53
- background: dimmed ? 'rgba(0, 0, 0, 0.4)' : undefined,
54
- }, onDragEnter: debouncedOnDragEnter }),
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: minimized ? 'Restore track' : 'Minimize track',
48
- icon: minimized ? AddIcon : MinimizeIcon,
49
- onClick: () => track.setMinimized(!minimized),
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, scaleFactor } = model;
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 || scaleFactor !== 1, size: "large" },
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)), disabled: scaleFactor !== 1 }),
29
- React.createElement(IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1, size: "large" },
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 | undefined;
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
- * of the displayed regions, does nothing
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: number): void;
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")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
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';