@jbrowse/plugin-linear-genome-view 3.1.0 → 3.2.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 (29) hide show
  1. package/dist/BaseLinearDisplay/models/BaseLinearDisplayModel.js +9 -9
  2. package/dist/LaunchLinearGenomeView/index.js +9 -5
  3. package/dist/LinearGenomeView/components/OverviewRubberband.js +2 -14
  4. package/dist/LinearGenomeView/components/OverviewRubberbandHoverTooltip.d.ts +10 -0
  5. package/dist/LinearGenomeView/components/OverviewRubberbandHoverTooltip.js +36 -0
  6. package/dist/LinearGenomeView/components/Rubberband.js +3 -21
  7. package/dist/LinearGenomeView/components/RubberbandSpan.js +6 -20
  8. package/dist/LinearGenomeView/components/RubberbandTooltip.d.ts +5 -0
  9. package/dist/LinearGenomeView/components/RubberbandTooltip.js +28 -0
  10. package/dist/LinearGenomeView/components/TracksContainer.js +2 -2
  11. package/dist/LinearGenomeView/components/VerticalGuide.js +3 -21
  12. package/dist/LinearGenomeView/model.d.ts +27 -3
  13. package/dist/LinearGenomeView/model.js +59 -26
  14. package/dist/LinearGenomeView/types.d.ts +5 -0
  15. package/esm/BaseLinearDisplay/models/BaseLinearDisplayModel.js +9 -9
  16. package/esm/LaunchLinearGenomeView/index.js +9 -5
  17. package/esm/LinearGenomeView/components/OverviewRubberband.js +3 -15
  18. package/esm/LinearGenomeView/components/OverviewRubberbandHoverTooltip.d.ts +10 -0
  19. package/esm/LinearGenomeView/components/OverviewRubberbandHoverTooltip.js +34 -0
  20. package/esm/LinearGenomeView/components/Rubberband.js +4 -22
  21. package/esm/LinearGenomeView/components/RubberbandSpan.js +4 -21
  22. package/esm/LinearGenomeView/components/RubberbandTooltip.d.ts +5 -0
  23. package/esm/LinearGenomeView/components/RubberbandTooltip.js +25 -0
  24. package/esm/LinearGenomeView/components/TracksContainer.js +2 -2
  25. package/esm/LinearGenomeView/components/VerticalGuide.js +4 -22
  26. package/esm/LinearGenomeView/model.d.ts +27 -3
  27. package/esm/LinearGenomeView/model.js +59 -26
  28. package/esm/LinearGenomeView/types.d.ts +5 -0
  29. package/package.json +3 -3
@@ -117,14 +117,14 @@ function stateModelFactory() {
117
117
  return (_b = (_a = self.blockState.get(blockKey)) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.getByID(id);
118
118
  },
119
119
  searchFeatureByID(id) {
120
+ var _a;
120
121
  let ret;
121
- self.blockState.forEach(block => {
122
- var _a;
122
+ for (const block of self.blockState.values()) {
123
123
  const val = (_a = block.layout) === null || _a === void 0 ? void 0 : _a.getByID(id);
124
124
  if (val) {
125
125
  ret = val;
126
126
  }
127
- });
127
+ }
128
128
  return ret;
129
129
  },
130
130
  }))
@@ -177,9 +177,9 @@ function stateModelFactory() {
177
177
  self.setError();
178
178
  self.setCurrStatsBpPerPx(0);
179
179
  self.clearFeatureDensityStats();
180
- [...self.blockState.values()].forEach(val => {
180
+ for (const val of self.blockState.values()) {
181
181
  val.doReload();
182
- });
182
+ }
183
183
  superReload();
184
184
  },
185
185
  };
@@ -269,17 +269,17 @@ function stateModelFactory() {
269
269
  if (!view.initialized) {
270
270
  return;
271
271
  }
272
- self.blockDefinitions.contentBlocks.forEach(block => {
272
+ for (const block of self.blockDefinitions.contentBlocks) {
273
273
  blocksPresent[block.key] = true;
274
274
  if (!self.blockState.has(block.key)) {
275
275
  self.addBlock(block.key, block);
276
276
  }
277
- });
278
- self.blockState.forEach((_, key) => {
277
+ }
278
+ for (const key of self.blockState.keys()) {
279
279
  if (!blocksPresent[key]) {
280
280
  self.deleteBlock(key);
281
281
  }
282
- });
282
+ }
283
283
  }));
284
284
  },
285
285
  }))
@@ -23,7 +23,7 @@ function LaunchLinearGenomeViewF(pluginManager) {
23
23
  view.setHideHeader(!nav);
24
24
  }
25
25
  if (highlight !== undefined) {
26
- highlight.forEach(async (h) => {
26
+ for (const h of highlight) {
27
27
  const p = (0, util_1.parseLocString)(h, refName => assemblyManager.isValidRefName(refName, assembly));
28
28
  const { start, end } = p;
29
29
  if (start !== undefined && end !== undefined) {
@@ -34,13 +34,17 @@ function LaunchLinearGenomeViewF(pluginManager) {
34
34
  assemblyName: assembly,
35
35
  });
36
36
  }
37
- });
37
+ }
38
38
  }
39
- await (0, searchUtils_1.handleSelectedRegion)({ input: loc, model: view, assembly: asm });
39
+ await (0, searchUtils_1.handleSelectedRegion)({
40
+ input: loc,
41
+ model: view,
42
+ assembly: asm,
43
+ });
40
44
  const idsNotFound = [];
41
- tracks.forEach(track => {
45
+ for (const track of tracks) {
42
46
  tryTrack(view, track, idsNotFound);
43
- });
47
+ }
44
48
  if (idsNotFound.length) {
45
49
  throw new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`);
46
50
  }
@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  const jsx_runtime_1 = require("react/jsx-runtime");
7
7
  const react_1 = require("react");
8
8
  const util_1 = require("@jbrowse/core/util");
9
- const material_1 = require("@mui/material");
10
9
  const mobx_react_1 = require("mobx-react");
11
10
  const mui_1 = require("tss-react/mui");
11
+ const OverviewRubberbandHoverTooltip_1 = __importDefault(require("./OverviewRubberbandHoverTooltip"));
12
12
  const RubberbandSpan_1 = __importDefault(require("./RubberbandSpan"));
13
13
  const util_2 = require("./util");
14
14
  const useStyles = (0, mui_1.makeStyles)()({
@@ -27,18 +27,6 @@ const useStyles = (0, mui_1.makeStyles)()({
27
27
  position: 'relative',
28
28
  },
29
29
  });
30
- const HoverTooltip = (0, mobx_react_1.observer)(function ({ model, open, guideX, overview, }) {
31
- var _a;
32
- const { classes } = useStyles();
33
- const { cytobandOffset } = model;
34
- const { assemblyManager } = (0, util_1.getSession)(model);
35
- const px = overview.pxToBp(guideX - cytobandOffset);
36
- const assembly = assemblyManager.get(px.assemblyName);
37
- 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') &&
38
- px.coord < f.get('end') &&
39
- px.refName === assembly.getCanonicalRefName(f.get('refName')));
40
- 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 } }) }));
41
- });
42
30
  const OverviewRubberband = (0, mobx_react_1.observer)(function OverviewRubberband({ model, overview, ControlComponent = (0, jsx_runtime_1.jsx)("div", {}), }) {
43
31
  const { cytobandOffset } = model;
44
32
  const [startX, setStartX] = (0, react_1.useState)();
@@ -108,7 +96,7 @@ const OverviewRubberband = (0, mobx_react_1.observer)(function OverviewRubberban
108
96
  setGuideX(undefined);
109
97
  }
110
98
  if (startX === undefined) {
111
- return ((0, jsx_runtime_1.jsxs)("div", { className: classes.rel, children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(HoverTooltip, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
99
+ return ((0, jsx_runtime_1.jsxs)("div", { className: classes.rel, children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(OverviewRubberbandHoverTooltip_1.default, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
112
100
  }
113
101
  let left = startX || 0;
114
102
  let width = 0;
@@ -0,0 +1,10 @@
1
+ import type { LinearGenomeViewModel } from '..';
2
+ import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
3
+ type LGV = LinearGenomeViewModel;
4
+ declare const OverviewRubberbandHoverTooltip: ({ model, open, guideX, overview, }: {
5
+ model: LGV;
6
+ open: boolean;
7
+ guideX: number;
8
+ overview: Base1DViewModel;
9
+ }) => import("react/jsx-runtime").JSX.Element;
10
+ export default OverviewRubberbandHoverTooltip;
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const util_1 = require("@jbrowse/core/util");
5
+ const material_1 = require("@mui/material");
6
+ const mobx_react_1 = require("mobx-react");
7
+ const mui_1 = require("tss-react/mui");
8
+ const useStyles = (0, mui_1.makeStyles)()({
9
+ rubberbandControl: {
10
+ cursor: 'crosshair',
11
+ width: '100%',
12
+ minHeight: 8,
13
+ },
14
+ guide: {
15
+ pointerEvents: 'none',
16
+ height: '100%',
17
+ width: 1,
18
+ position: 'absolute',
19
+ },
20
+ rel: {
21
+ position: 'relative',
22
+ },
23
+ });
24
+ const OverviewRubberbandHoverTooltip = (0, mobx_react_1.observer)(function ({ model, open, guideX, overview, }) {
25
+ var _a;
26
+ const { classes } = useStyles();
27
+ const { cytobandOffset } = model;
28
+ const { assemblyManager } = (0, util_1.getSession)(model);
29
+ const px = overview.pxToBp(guideX - cytobandOffset);
30
+ const assembly = assemblyManager.get(px.assemblyName);
31
+ 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
+ px.coord < f.get('end') &&
33
+ 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 } }) }));
35
+ });
36
+ exports.default = OverviewRubberbandHoverTooltip;
@@ -6,14 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  const jsx_runtime_1 = require("react/jsx-runtime");
7
7
  const react_1 = require("react");
8
8
  const ui_1 = require("@jbrowse/core/ui");
9
- const util_1 = require("@jbrowse/core/util");
10
- const product_core_1 = require("@jbrowse/product-core");
11
9
  const mobx_react_1 = require("mobx-react");
12
10
  const mui_1 = require("tss-react/mui");
13
11
  const RubberbandSpan_1 = __importDefault(require("./RubberbandSpan"));
14
12
  const VerticalGuide_1 = __importDefault(require("./VerticalGuide"));
15
13
  const useRangeSelect_1 = require("./useRangeSelect");
16
- const consts_1 = require("../consts");
17
14
  const useStyles = (0, mui_1.makeStyles)()({
18
15
  rubberbandControl: {
19
16
  cursor: 'crosshair',
@@ -25,28 +22,13 @@ const useStyles = (0, mui_1.makeStyles)()({
25
22
  const Rubberband = (0, mobx_react_1.observer)(function ({ model, ControlComponent = (0, jsx_runtime_1.jsx)("div", {}), }) {
26
23
  const ref = (0, react_1.useRef)(null);
27
24
  const { classes } = useStyles();
28
- const session = (0, util_1.getSession)(model);
25
+ const { stickyViewHeaders, rubberbandTop } = model;
29
26
  const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = (0, useRangeSelect_1.useRangeSelect)(ref, model);
30
- let stickyViewHeaders = false;
31
- if ((0, product_core_1.isSessionWithMultipleViews)(session)) {
32
- ;
33
- ({ stickyViewHeaders } = session);
34
- }
35
- let rubberbandControlTop = 0;
36
- if (stickyViewHeaders) {
37
- rubberbandControlTop = ui_1.VIEW_HEADER_HEIGHT;
38
- if (!model.hideHeader) {
39
- rubberbandControlTop += consts_1.HEADER_BAR_HEIGHT;
40
- if (!model.hideHeaderOverview) {
41
- rubberbandControlTop += consts_1.HEADER_OVERVIEW_HEIGHT;
42
- }
43
- }
44
- }
45
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(RubberbandSpan_1.default, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandControlTop, sticky: stickyViewHeaders })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
27
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(RubberbandSpan_1.default, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
46
28
  left: anchorPosition.clientX,
47
29
  top: anchorPosition.clientY,
48
30
  }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, (0, jsx_runtime_1.jsx)("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, style: {
49
- top: rubberbandControlTop,
31
+ top: rubberbandTop,
50
32
  position: stickyViewHeaders ? 'sticky' : undefined,
51
33
  }, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut, children: ControlComponent })] }));
52
34
  });
@@ -1,4 +1,7 @@
1
1
  "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
2
5
  Object.defineProperty(exports, "__esModule", { value: true });
3
6
  exports.default = RubberbandSpan;
4
7
  const jsx_runtime_1 = require("react/jsx-runtime");
@@ -6,6 +9,7 @@ const react_1 = require("react");
6
9
  const util_1 = require("@jbrowse/core/util");
7
10
  const material_1 = require("@mui/material");
8
11
  const mui_1 = require("tss-react/mui");
12
+ const RubberbandTooltip_1 = __importDefault(require("./RubberbandTooltip"));
9
13
  const useStyles = (0, mui_1.makeStyles)()(theme => {
10
14
  const { tertiary } = theme.palette;
11
15
  const background = (0, material_1.alpha)(tertiary.light, 0.7);
@@ -23,32 +27,14 @@ const useStyles = (0, mui_1.makeStyles)()(theme => {
23
27
  minHeight: 8,
24
28
  },
25
29
  rubberbandText: {
26
- color: tertiary.contrastText,
27
- },
28
- popover: {
29
- mouseEvents: 'none',
30
- cursor: 'crosshair',
31
- },
32
- paper: {
33
- paddingLeft: theme.spacing(1),
34
- paddingRight: theme.spacing(1),
30
+ color: theme.palette.tertiary.contrastText,
35
31
  },
36
32
  };
37
33
  });
38
- function Tooltip({ anchorEl, side, text, }) {
39
- const { classes } = useStyles();
40
- return ((0, jsx_runtime_1.jsx)(material_1.Popover, { className: classes.popover, classes: { paper: classes.paper }, open: true, anchorEl: anchorEl, anchorOrigin: {
41
- vertical: 'top',
42
- horizontal: side === 'left' ? 'right' : 'left',
43
- }, transformOrigin: {
44
- vertical: 'bottom',
45
- horizontal: side === 'left' ? 'left' : 'right',
46
- }, keepMounted: true, disableRestoreFocus: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: text }) }));
47
- }
48
34
  function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top = 0, sticky = false, }) {
49
35
  const { classes } = useStyles();
50
36
  const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
51
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [anchorEl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tooltip, { side: "left", anchorEl: anchorEl, text: (0, util_1.stringify)(leftBpOffset) }), (0, jsx_runtime_1.jsx)(Tooltip, { side: "right", anchorEl: anchorEl, text: (0, util_1.stringify)(rightBpOffset) })] })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { ref: el => {
37
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [anchorEl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RubberbandTooltip_1.default, { side: "left", anchorEl: anchorEl, text: (0, util_1.stringify)(leftBpOffset) }), (0, jsx_runtime_1.jsx)(RubberbandTooltip_1.default, { side: "right", anchorEl: anchorEl, text: (0, util_1.stringify)(rightBpOffset) })] })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { ref: el => {
52
38
  setAnchorEl(el);
53
39
  }, variant: "h6", className: classes.rubberbandText, style: {
54
40
  top,
@@ -0,0 +1,5 @@
1
+ export default function RubberbandTooltip({ anchorEl, side, text, }: {
2
+ anchorEl: HTMLSpanElement;
3
+ side: string;
4
+ text: string;
5
+ }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = RubberbandTooltip;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const material_1 = require("@mui/material");
6
+ const mui_1 = require("tss-react/mui");
7
+ const useStyles = (0, mui_1.makeStyles)()(theme => {
8
+ return {
9
+ popover: {
10
+ mouseEvents: 'none',
11
+ cursor: 'crosshair',
12
+ },
13
+ paper: {
14
+ paddingLeft: theme.spacing(1),
15
+ paddingRight: theme.spacing(1),
16
+ },
17
+ };
18
+ });
19
+ function RubberbandTooltip({ anchorEl, side, text, }) {
20
+ const { classes } = useStyles();
21
+ return ((0, jsx_runtime_1.jsx)(material_1.Popover, { className: classes.popover, classes: { paper: classes.paper }, open: true, anchorEl: anchorEl, anchorOrigin: {
22
+ vertical: 'top',
23
+ horizontal: side === 'left' ? 'left' : 'right',
24
+ }, transformOrigin: {
25
+ vertical: 'bottom',
26
+ horizontal: side === 'left' ? 'right' : 'left',
27
+ }, keepMounted: true, disableRestoreFocus: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: text }) }));
28
+ }
@@ -62,7 +62,7 @@ const TracksContainer = (0, mobx_react_1.observer)(function TracksContainer({ ch
62
62
  const { classes } = useStyles();
63
63
  const { pluginManager } = (0, util_1.getEnv)(model);
64
64
  const { mouseDown: mouseDown1, mouseUp } = (0, useSideScroll_1.useSideScroll)(model);
65
- const { stickyViewHeaders, pinnedTracksTop, showGridlines, showCenterLine } = model;
65
+ const { stickyViewHeaders, rubberbandTop, showGridlines, showCenterLine } = model;
66
66
  const ref = (0, react_1.useRef)(null);
67
67
  const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown: mouseDown2, } = (0, useRangeSelect_1.useRangeSelect)(ref, model, true);
68
68
  (0, useWheelScroll_1.useWheelScroll)(ref, model);
@@ -70,7 +70,7 @@ const TracksContainer = (0, mobx_react_1.observer)(function TracksContainer({ ch
70
70
  return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onMouseDown: event => {
71
71
  mouseDown1(event);
72
72
  mouseDown2(event);
73
- }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? (0, jsx_runtime_1.jsx)(Gridlines_1.default, { model: model }) : null, (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: showCenterLine ? (0, jsx_runtime_1.jsx)(CenterLine, { model: model }) : null }), guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: pinnedTracksTop, sticky: stickyViewHeaders }) })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
73
+ }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? (0, jsx_runtime_1.jsx)(Gridlines_1.default, { model: model }) : null, (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: showCenterLine ? (0, jsx_runtime_1.jsx)(CenterLine, { model: model }) : null }), guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders }) })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
74
74
  left: anchorPosition.clientX,
75
75
  top: anchorPosition.clientY,
76
76
  }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, (0, jsx_runtime_1.jsx)(Rubberband_1.default, { model: model, ControlComponent: (0, jsx_runtime_1.jsx)(Scalebar_1.default, { model: model, style: {
@@ -1,13 +1,10 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const jsx_runtime_1 = require("react/jsx-runtime");
4
- const ui_1 = require("@jbrowse/core/ui");
5
4
  const util_1 = require("@jbrowse/core/util");
6
- const product_core_1 = require("@jbrowse/product-core");
7
5
  const material_1 = require("@mui/material");
8
6
  const mobx_react_1 = require("mobx-react");
9
7
  const mui_1 = require("tss-react/mui");
10
- const consts_1 = require("../consts");
11
8
  const useStyles = (0, mui_1.makeStyles)()({
12
9
  guide: {
13
10
  pointerEvents: 'none',
@@ -15,7 +12,7 @@ const useStyles = (0, mui_1.makeStyles)()({
15
12
  width: 1,
16
13
  position: 'absolute',
17
14
  background: 'red',
18
- zIndex: 4,
15
+ zIndex: 1001,
19
16
  },
20
17
  tooltipTarget: {
21
18
  position: 'sticky',
@@ -24,25 +21,10 @@ const useStyles = (0, mui_1.makeStyles)()({
24
21
  });
25
22
  const VerticalGuide = (0, mobx_react_1.observer)(function VerticalGuide({ model, coordX, }) {
26
23
  const { classes } = useStyles();
27
- const session = (0, util_1.getSession)(model);
28
- let stickyViewHeaders = false;
29
- if ((0, product_core_1.isSessionWithMultipleViews)(session)) {
30
- ;
31
- ({ stickyViewHeaders } = session);
32
- }
33
- let tooltipTop = 0;
34
- if (stickyViewHeaders) {
35
- tooltipTop = ui_1.VIEW_HEADER_HEIGHT;
36
- if (!model.hideHeader) {
37
- tooltipTop += consts_1.HEADER_BAR_HEIGHT;
38
- if (!model.hideHeaderOverview) {
39
- tooltipTop += consts_1.HEADER_OVERVIEW_HEIGHT;
40
- }
41
- }
42
- }
24
+ const { stickyViewHeaders, rubberbandTop } = model;
43
25
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: true, placement: "top", title: (0, util_1.stringify)(model.pxToBp(coordX)), arrow: true, children: (0, jsx_runtime_1.jsx)("div", { className: classes.tooltipTarget, style: {
44
26
  left: coordX + 6,
45
- top: tooltipTop,
27
+ top: rubberbandTop,
46
28
  position: stickyViewHeaders ? 'sticky' : undefined,
47
29
  } }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: { left: coordX } })] }));
48
30
  });
@@ -1,5 +1,5 @@
1
1
  import type React from 'react';
2
- import type { BpOffset, ExportSvgOptions, HighlightType, NavLocation } from './types';
2
+ import type { BpOffset, ExportSvgOptions, HighlightType, InitState, NavLocation } from './types';
3
3
  import type PluginManager from '@jbrowse/core/PluginManager';
4
4
  import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
5
5
  import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
@@ -30,6 +30,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
30
30
  highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<HighlightType, HighlightType, HighlightType>>, [undefined]>;
31
31
  colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
32
32
  showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
33
+ init: import("mobx-state-tree").IType<InitState | undefined, InitState | undefined, InitState | undefined>;
33
34
  }, {
34
35
  width: number;
35
36
  } & {
@@ -58,6 +59,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
58
59
  readonly interRegionPaddingWidth: number;
59
60
  readonly assemblyNames: string[];
60
61
  readonly stickyViewHeaders: boolean;
62
+ readonly rubberbandTop: number;
61
63
  readonly pinnedTracksTop: number;
62
64
  } & {
63
65
  scaleBarDisplayPrefix(): string | undefined;
@@ -144,6 +146,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
144
146
  setDraggingTrackId(idx?: string): void;
145
147
  setScaleFactor(factor: number): void;
146
148
  clearView(): void;
149
+ setInit(arg?: InitState): void;
147
150
  exportSvg(opts?: ExportSvgOptions): Promise<void>;
148
151
  } & {
149
152
  slide: (viewWidths: number) => void;
@@ -164,7 +167,6 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
164
167
  readonly coarseVisibleLocStrings: string;
165
168
  } & {
166
169
  setCoarseDynamicBlocks(blocks: BlockSet): void;
167
- afterAttach(): void;
168
170
  } & {
169
171
  moveTo(start?: BpOffset, end?: BpOffset): void;
170
172
  navToLocString(input: string, optAssemblyName?: string): Promise<void>;
@@ -210,6 +212,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
210
212
  } | undefined;
211
213
  } & {
212
214
  afterCreate(): void;
215
+ afterAttach(): void;
213
216
  }, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
214
217
  id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
215
218
  displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -232,7 +235,28 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
232
235
  highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<HighlightType, HighlightType, HighlightType>>, [undefined]>;
233
236
  colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
234
237
  showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
235
- }>>, import("mobx-state-tree")._NotCustomized>;
238
+ init: import("mobx-state-tree").IType<InitState | undefined, InitState | undefined, InitState | undefined>;
239
+ }>>, {
240
+ type: string;
241
+ id: string;
242
+ displayName: string | undefined;
243
+ tracks: any[];
244
+ minimized: boolean;
245
+ displayedRegions: Region[];
246
+ offsetPx: number;
247
+ bpPerPx: number;
248
+ hideHeader: boolean;
249
+ hideHeaderOverview: boolean;
250
+ hideNoTracksActive: boolean;
251
+ trackSelectorType: string;
252
+ showCenterLine: boolean;
253
+ showCytobandsSetting: boolean;
254
+ trackLabels: string;
255
+ showGridlines: boolean;
256
+ highlight: HighlightType[];
257
+ colorByCDS: boolean;
258
+ showTrackOutlines: boolean;
259
+ }>;
236
260
  export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>;
237
261
  export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>;
238
262
  export { default as LinearGenomeView, default as ReactComponent, } from './components/LinearGenomeView';
@@ -93,6 +93,7 @@ function stateModelFactory(pluginManager) {
93
93
  highlight: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.array(mobx_state_tree_1.types.frozen()), []),
94
94
  colorByCDS: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => (0, util_1.localStorageGetBoolean)('lgv-colorByCDS', false)),
95
95
  showTrackOutlines: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => (0, util_1.localStorageGetBoolean)('lgv-showTrackOutlines', true)),
96
+ init: mobx_state_tree_1.types.frozen(),
96
97
  }))
97
98
  .volatile(() => ({
98
99
  volatileWidth: undefined,
@@ -141,10 +142,10 @@ function stateModelFactory(pluginManager) {
141
142
  ? session.stickyViewHeaders
142
143
  : false;
143
144
  },
144
- get pinnedTracksTop() {
145
+ get rubberbandTop() {
145
146
  let pinnedTracksTop = 0;
146
147
  if (this.stickyViewHeaders) {
147
- pinnedTracksTop = ui_1.VIEW_HEADER_HEIGHT + consts_1.SCALE_BAR_HEIGHT;
148
+ pinnedTracksTop = ui_1.VIEW_HEADER_HEIGHT;
148
149
  if (!self.hideHeader) {
149
150
  pinnedTracksTop += consts_1.HEADER_BAR_HEIGHT;
150
151
  if (!self.hideHeaderOverview) {
@@ -154,6 +155,9 @@ function stateModelFactory(pluginManager) {
154
155
  }
155
156
  return pinnedTracksTop;
156
157
  },
158
+ get pinnedTracksTop() {
159
+ return this.rubberbandTop + consts_1.SCALE_BAR_HEIGHT;
160
+ },
157
161
  }))
158
162
  .views(self => ({
159
163
  scaleBarDisplayPrefix() {
@@ -267,32 +271,32 @@ function stateModelFactory(pluginManager) {
267
271
  return results;
268
272
  },
269
273
  rewriteOnClicks(trackType, viewMenuActions) {
270
- viewMenuActions.forEach(action => {
274
+ for (const action of viewMenuActions) {
271
275
  if ('subMenu' in action) {
272
276
  this.rewriteOnClicks(trackType, action.subMenu);
273
277
  }
274
278
  if ('onClick' in action) {
275
279
  const holdOnClick = action.onClick;
276
280
  action.onClick = (...args) => {
277
- self.tracks.forEach(track => {
281
+ for (const track of self.tracks) {
278
282
  if (track.type === trackType) {
279
283
  holdOnClick.apply(track, [track, ...args]);
280
284
  }
281
- });
285
+ }
282
286
  };
283
287
  }
284
- });
288
+ }
285
289
  },
286
290
  get trackTypeActions() {
287
291
  const allActions = new Map();
288
- self.tracks.forEach(track => {
292
+ for (const track of self.tracks) {
289
293
  const trackInMap = allActions.get(track.type);
290
294
  if (!trackInMap) {
291
295
  const viewMenuActions = structuredClone(track.viewMenuActions);
292
296
  this.rewriteOnClicks(track.type, viewMenuActions);
293
297
  allActions.set(track.type, viewMenuActions);
294
298
  }
295
- });
299
+ }
296
300
  return allActions;
297
301
  },
298
302
  }))
@@ -417,11 +421,13 @@ function stateModelFactory(pluginManager) {
417
421
  hideTrack(trackId) {
418
422
  const schema = pluginManager.pluggableConfigSchemaType('track');
419
423
  const conf = (0, mobx_state_tree_1.resolveIdentifier)(schema, (0, mobx_state_tree_1.getRoot)(self), trackId);
420
- const t = self.tracks.filter(t => t.configuration === conf);
424
+ const tracks = self.tracks.filter(t => t.configuration === conf);
421
425
  (0, mobx_1.transaction)(() => {
422
- t.forEach(t => self.tracks.remove(t));
426
+ for (const track of tracks) {
427
+ self.tracks.remove(track);
428
+ }
423
429
  });
424
- return t.length;
430
+ return tracks.length;
425
431
  },
426
432
  }))
427
433
  .actions(self => ({
@@ -562,6 +568,9 @@ function stateModelFactory(pluginManager) {
562
568
  self.scrollTo(0);
563
569
  self.zoomTo(10);
564
570
  },
571
+ setInit(arg) {
572
+ self.init = arg;
573
+ },
565
574
  async exportSvg(opts = {}) {
566
575
  const { renderToSvg } = await Promise.resolve().then(() => __importStar(require('./svgcomponents/SVGLinearGenomeView')));
567
576
  const html = await renderToSvg(self, opts);
@@ -782,7 +791,9 @@ function stateModelFactory(pluginManager) {
782
791
  for (const [key, value] of self.trackTypeActions.entries()) {
783
792
  if (value.length) {
784
793
  menuItems.push({ type: 'divider' }, { type: 'subHeader', label: key });
785
- value.forEach(action => menuItems.push(action));
794
+ for (const action of value) {
795
+ menuItems.push(action);
796
+ }
786
797
  }
787
798
  }
788
799
  return menuItems;
@@ -824,20 +835,6 @@ function stateModelFactory(pluginManager) {
824
835
  self.coarseDynamicBlocks = blocks.contentBlocks;
825
836
  self.coarseTotalBp = blocks.totalBp;
826
837
  },
827
- afterAttach() {
828
- (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
829
- if (self.initialized) {
830
- this.setCoarseDynamicBlocks(self.dynamicBlocks);
831
- }
832
- }, { delay: 150 }));
833
- (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
834
- const s = (s) => JSON.stringify(s);
835
- const { showCytobandsSetting, showCenterLine, colorByCDS } = self;
836
- (0, util_1.localStorageSetItem)('lgv-showCytobands', s(showCytobandsSetting));
837
- (0, util_1.localStorageSetItem)('lgv-showCenterLine', s(showCenterLine));
838
- (0, util_1.localStorageSetItem)('lgv-colorByCDS', s(colorByCDS));
839
- }));
840
- },
841
838
  }))
842
839
  .actions(self => ({
843
840
  moveTo(start, end) {
@@ -1004,6 +1001,33 @@ function stateModelFactory(pluginManager) {
1004
1001
  document.removeEventListener('keydown', handler);
1005
1002
  });
1006
1003
  },
1004
+ afterAttach() {
1005
+ (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
1006
+ var _a;
1007
+ const { init } = self;
1008
+ if (init) {
1009
+ self
1010
+ .navToLocString(init.loc, init.assembly)
1011
+ .catch((e) => {
1012
+ (0, util_1.getSession)(self).notifyError(`${e}`, e);
1013
+ });
1014
+ (_a = init.tracks) === null || _a === void 0 ? void 0 : _a.map(t => self.showTrack(t));
1015
+ self.setInit(undefined);
1016
+ }
1017
+ }));
1018
+ (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
1019
+ if (self.initialized) {
1020
+ self.setCoarseDynamicBlocks(self.dynamicBlocks);
1021
+ }
1022
+ }, { delay: 150 }));
1023
+ (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
1024
+ const s = (s) => JSON.stringify(s);
1025
+ const { showCytobandsSetting, showCenterLine, colorByCDS } = self;
1026
+ (0, util_1.localStorageSetItem)('lgv-showCytobands', s(showCytobandsSetting));
1027
+ (0, util_1.localStorageSetItem)('lgv-showCenterLine', s(showCenterLine));
1028
+ (0, util_1.localStorageSetItem)('lgv-colorByCDS', s(colorByCDS));
1029
+ }));
1030
+ },
1007
1031
  }))
1008
1032
  .preProcessSnapshot(snap => {
1009
1033
  if (!snap) {
@@ -1016,6 +1040,15 @@ function stateModelFactory(pluginManager) {
1016
1040
  : [highlight],
1017
1041
  ...rest,
1018
1042
  };
1043
+ })
1044
+ .postProcessSnapshot(snap => {
1045
+ if (!snap) {
1046
+ return snap;
1047
+ }
1048
+ else {
1049
+ const { init, ...rest } = snap;
1050
+ return rest;
1051
+ }
1019
1052
  });
1020
1053
  }
1021
1054
  var LinearGenomeView_1 = require("./components/LinearGenomeView");
@@ -36,3 +36,8 @@ export interface NavLocation {
36
36
  end?: number;
37
37
  assemblyName?: string;
38
38
  }
39
+ export interface InitState {
40
+ loc: string;
41
+ assembly: string;
42
+ tracks?: string[];
43
+ }