@jbrowse/plugin-dotplot-view 2.9.0 → 2.10.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 (15) hide show
  1. package/dist/DotplotView/components/Axes.js +4 -11
  2. package/dist/DotplotView/components/DotplotTooltip.d.ts +3 -4
  3. package/dist/DotplotView/components/DotplotTooltip.js +38 -81
  4. package/dist/DotplotView/components/DotplotView.js +18 -14
  5. package/dist/DotplotView/model.d.ts +65 -77
  6. package/dist/DotplotView/model.js +11 -8
  7. package/dist/DotplotView/svgcomponents/SVGDotplotView.js +5 -3
  8. package/esm/DotplotView/components/Axes.js +4 -11
  9. package/esm/DotplotView/components/DotplotTooltip.d.ts +3 -4
  10. package/esm/DotplotView/components/DotplotTooltip.js +37 -60
  11. package/esm/DotplotView/components/DotplotView.js +18 -14
  12. package/esm/DotplotView/model.d.ts +65 -77
  13. package/esm/DotplotView/model.js +12 -9
  14. package/esm/DotplotView/svgcomponents/SVGDotplotView.js +5 -3
  15. package/package.json +4 -5
package/dist/DotplotView/components/Axes.js CHANGED
@@ -67,15 +67,10 @@ exports.HorizontalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
67
67
  const xoff = Math.floor(x - hview.offsetPx);
68
68
  return (react_1.default.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end" }, region.refName));
69
69
  }),
70
- ticks.map(([tick, x]) => {
71
- return (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.grey[400] }));
72
- }),
70
+ ticks.map(([tick, x]) => x > 0 && x < width ? (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.grey[400] })) : null),
73
71
  ticks
74
72
  .filter(t => t[0].type === 'major')
75
- .map(([tick, x]) => {
76
- const y = 0;
77
- return x > 10 ? (react_1.default.createElement("text", { x: x - 7, y: y, transform: `rotate(${htextRotation},${x},${y})`, key: `text-${JSON.stringify(tick)}`, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "middle", textAnchor: "end" }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null;
78
- }),
73
+ .map(([tick, x]) => x > 10 && x < width ? (react_1.default.createElement("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},${0})`, key: `text-${JSON.stringify(tick)}`, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "middle", textAnchor: "end" }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null),
79
74
  react_1.default.createElement("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, fill: theme.palette.text.primary, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging" }, hview.assemblyNames.join(','))));
80
75
  });
81
76
  exports.VerticalAxis = (0, mobx_react_1.observer)(function ({ model, }) {
@@ -118,11 +113,9 @@ exports.VerticalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
118
113
  const yoff = Math.floor(viewHeight - y + offsetPx);
119
114
  return (react_1.default.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff, fill: theme.palette.text.primary, fontSize: 11, textAnchor: "end" }, region.refName));
120
115
  }),
121
- ticks.map(([tick, y]) => (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, stroke: theme.palette.grey[400] }))),
116
+ ticks.map(([tick, y]) => y > 0 ? (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, stroke: theme.palette.grey[400] })) : null),
122
117
  ticks
123
118
  .filter(t => t[0].type === 'major')
124
- .map(([tick, y]) => {
125
- return y > 10 ? (react_1.default.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", fill: theme.palette.text.primary, dominantBaseline: "hanging", fontSize: 11 }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null;
126
- }),
119
+ .map(([tick, y]) => y > 10 && y < viewHeight ? (react_1.default.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", fill: theme.palette.text.primary, dominantBaseline: "hanging", fontSize: 11 }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null),
127
120
  react_1.default.createElement("text", { y: (viewHeight - borderY) / 2, x: 12, fill: theme.palette.text.primary, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11 }, vview.assemblyNames.join(','))));
128
121
  });
package/dist/DotplotView/components/DotplotTooltip.d.ts CHANGED
@@ -1,18 +1,17 @@
1
1
  import React from 'react';
2
2
  import { DotplotViewModel } from '../model';
3
3
  type Coord = [number, number] | undefined;
4
- export declare const TooltipWhereMouseovered: ({ model, mouserect, mouserectClient, xdistance, ydistance, }: {
4
+ export declare const TooltipWhereMouseovered: ({ model, mouserect, mouserectClient, xdistance, }: {
5
5
  model: DotplotViewModel;
6
6
  mouserect: Coord;
7
7
  mouserectClient: Coord;
8
8
  xdistance: number;
9
- ydistance: number;
10
- }) => React.JSX.Element;
9
+ }) => React.JSX.Element | null;
11
10
  export declare const TooltipWhereClicked: ({ model, mousedown, mousedownClient, xdistance, ydistance, }: {
12
11
  model: DotplotViewModel;
13
12
  mousedown: Coord;
14
13
  mousedownClient: Coord;
15
14
  xdistance: number;
16
15
  ydistance: number;
17
- }) => React.JSX.Element;
16
+ }) => React.JSX.Element | null;
18
17
  export {};
package/dist/DotplotView/components/DotplotTooltip.js CHANGED
@@ -1,35 +1,15 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
24
4
  };
25
5
  Object.defineProperty(exports, "__esModule", { value: true });
26
6
  exports.TooltipWhereClicked = exports.TooltipWhereMouseovered = void 0;
27
- const react_1 = __importStar(require("react"));
7
+ const react_1 = __importDefault(require("react"));
28
8
  const mobx_react_1 = require("mobx-react");
29
9
  const mui_1 = require("tss-react/mui");
30
10
  const util_1 = require("./util");
31
11
  const material_1 = require("@mui/material");
32
- const react_popper_1 = require("react-popper");
12
+ const react_2 = require("@floating-ui/react");
33
13
  function round(value) {
34
14
  return Math.round(value * 1e5) / 1e5;
35
15
  }
@@ -50,77 +30,54 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
50
30
  wordWrap: 'break-word',
51
31
  },
52
32
  }));
53
- const blank = { left: 0, top: 0, width: 0, height: 0 };
54
- exports.TooltipWhereMouseovered = (0, mobx_react_1.observer)(function ({ model, mouserect, mouserectClient, xdistance, ydistance, }) {
55
- var _a;
33
+ exports.TooltipWhereMouseovered = (0, mobx_react_1.observer)(function ({ model, mouserect, mouserectClient, xdistance, }) {
34
+ var _a, _b;
56
35
  const { classes } = useStyles();
57
36
  const { hview, vview, viewHeight } = model;
58
- const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
59
- const ref = (0, react_1.useRef)(null);
60
- const rect = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || blank;
61
- const offset = 6;
62
- const w = rect.height + offset * 2;
63
- // must be memoized a la https://github.com/popperjs/react-popper/issues/391
64
- const virtElement = (0, react_1.useMemo)(() => ({
65
- getBoundingClientRect: () => {
66
- const x = offset + ((mouserectClient === null || mouserectClient === void 0 ? void 0 : mouserectClient[0]) || 0) - (xdistance < 0 ? w : 0);
67
- const y = offset + ((mouserectClient === null || mouserectClient === void 0 ? void 0 : mouserectClient[1]) || 0) - (ydistance < 0 ? w : 0);
68
- return {
69
- top: y,
70
- left: x,
71
- bottom: y,
72
- right: x,
73
- width: 0,
74
- height: 0,
75
- x,
76
- y,
77
- toJSON() { },
78
- };
79
- },
80
- }), [mouserectClient, xdistance, ydistance, w]);
81
- const { styles, attributes } = (0, react_popper_1.usePopper)(virtElement, anchorEl, {
37
+ const theme = (0, material_1.useTheme)();
38
+ const { refs, floatingStyles, context } = (0, react_2.useFloating)({
82
39
  placement: xdistance < 0 ? 'left' : 'right',
83
40
  });
84
- return (react_1.default.createElement(react_1.default.Fragment, null, mouserect ? (react_1.default.createElement(material_1.Portal, null,
85
- react_1.default.createElement("div", { ref: setAnchorEl, className: classes.tooltip,
86
- // zIndex needed to go over widget drawer
87
- style: { ...styles.popper, zIndex: 100000 }, ...attributes.popper },
41
+ const clientPoint = (0, react_2.useClientPoint)(context, mouserectClient
42
+ ? {
43
+ x: mouserectClient[0],
44
+ y: mouserectClient[1],
45
+ }
46
+ : undefined);
47
+ const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
48
+ const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
49
+ return mouserect ? (react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
50
+ react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
51
+ ...floatingStyles,
52
+ zIndex: 100000,
53
+ pointerEvents: 'none',
54
+ }, ...getFloatingProps() },
88
55
  `x - ${(0, util_1.locstr)(mouserect[0], hview)}`,
89
56
  react_1.default.createElement("br", null),
90
57
  `y - ${(0, util_1.locstr)(viewHeight - mouserect[1], vview)}`,
91
- react_1.default.createElement("br", null)))) : null));
58
+ react_1.default.createElement("br", null)))) : null;
92
59
  });
93
60
  exports.TooltipWhereClicked = (0, mobx_react_1.observer)(function ({ model, mousedown, mousedownClient, xdistance, ydistance, }) {
61
+ var _a, _b;
94
62
  const { classes } = useStyles();
95
63
  const { hview, vview, viewHeight } = model;
96
- const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
97
- // must be memoized a la https://github.com/popperjs/react-popper/issues/391
98
- const virtElement = (0, react_1.useMemo)(() => ({
99
- getBoundingClientRect: () => {
100
- const x = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[0]) || 0) - (xdistance < 0 ? 0 : 0);
101
- const y = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[1]) || 0) - (ydistance < 0 ? 0 : 0);
102
- return {
103
- top: y,
104
- left: x,
105
- bottom: y,
106
- right: x,
107
- width: 0,
108
- height: 0,
109
- x,
110
- y,
111
- toJSON() { },
112
- };
113
- },
114
- }), [mousedownClient, xdistance, ydistance]);
115
- const { styles, attributes } = (0, react_popper_1.usePopper)(virtElement, anchorEl, {
64
+ const theme = (0, material_1.useTheme)();
65
+ const x = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[0]) || 0) - (xdistance < 0 ? 0 : 0);
66
+ const y = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[1]) || 0) - (ydistance < 0 ? 0 : 0);
67
+ const { refs, floatingStyles, context } = (0, react_2.useFloating)({
116
68
  placement: xdistance < 0 ? 'right' : 'left',
117
69
  });
118
- return (react_1.default.createElement(react_1.default.Fragment, null, mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (react_1.default.createElement(material_1.Portal, null,
119
- react_1.default.createElement("div", { ref: setAnchorEl, className: classes.tooltip,
120
- // zIndex needed to go over widget drawer
121
- style: { ...styles.popper, zIndex: 100000 }, ...attributes.popper },
70
+ const clientPoint = (0, react_2.useClientPoint)(context, { x, y });
71
+ const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
72
+ const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
73
+ return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
74
+ react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
75
+ ...floatingStyles,
76
+ zIndex: 100000,
77
+ pointerEvents: 'none',
78
+ }, ...getFloatingProps() },
122
79
  `x - ${(0, util_1.locstr)(mousedown[0], hview)}`,
123
80
  react_1.default.createElement("br", null),
124
81
  `y - ${(0, util_1.locstr)(viewHeight - mousedown[1], vview)}`,
125
- react_1.default.createElement("br", null)))) : null));
82
+ react_1.default.createElement("br", null)))) : null;
126
83
  });
package/dist/DotplotView/components/DotplotView.js CHANGED
@@ -109,8 +109,8 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
109
109
  const mousedown = getOffset(mousedownClient, svg);
110
110
  const mousecurr = getOffset(mousecurrClient, svg);
111
111
  const mouseup = getOffset(mouseupClient, svg);
112
- const mouserectClient = mouseupClient || mousecurrClient;
113
112
  const mouserect = mouseup || mousecurr;
113
+ const mouserectClient = mouseupClient || mousecurrClient;
114
114
  const xdistance = mousedown && mouserect ? mouserect[0] - mousedown[0] : 0;
115
115
  const ydistance = mousedown && mouserect ? mouserect[1] - mousedown[1] : 0;
116
116
  const { hview, vview, wheelMode, cursorMode } = model;
@@ -175,22 +175,26 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
175
175
  hview,
176
176
  vview,
177
177
  ]);
178
- // detect a mouseup after a mousedown was submitted, autoremoves mouseup
179
- // once that single mouseup is set
178
+ // detect a mouseup after a mousedown was submitted, autoremoves mouseup once
179
+ // that single mouseup is set
180
180
  (0, react_1.useEffect)(() => {
181
- function globalMouseUp(event) {
182
- if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
183
- setMouseUpClient([event.clientX, event.clientY]);
184
- }
185
- else {
186
- setMouseDownClient(undefined);
187
- }
188
- }
189
181
  if (mousedown && !mouseup) {
182
+ function globalMouseUp(event) {
183
+ if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
184
+ setMouseUpClient([event.clientX, event.clientY]);
185
+ }
186
+ else {
187
+ setMouseDownClient(undefined);
188
+ }
189
+ }
190
190
  window.addEventListener('mouseup', globalMouseUp, true);
191
- return () => window.removeEventListener('mouseup', globalMouseUp, true);
191
+ return () => {
192
+ window.removeEventListener('mouseup', globalMouseUp, true);
193
+ };
194
+ }
195
+ else {
196
+ return () => { };
192
197
  }
193
- return () => { };
194
198
  }, [
195
199
  validSelect,
196
200
  mousedown,
@@ -213,7 +217,7 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
213
217
  react_1.default.createElement(Axes_1.VerticalAxis, { model: model }),
214
218
  react_1.default.createElement(Axes_1.HorizontalAxis, { model: model }),
215
219
  react_1.default.createElement("div", { ref: ref, className: classes.content },
216
- mouseOvered && validSelect ? (react_1.default.createElement(DotplotTooltip_1.TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance, ydistance: ydistance })) : null,
220
+ mouseOvered && validSelect ? (react_1.default.createElement(DotplotTooltip_1.TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance })) : null,
217
221
  validSelect ? (react_1.default.createElement(DotplotTooltip_1.TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance })) : null,
218
222
  react_1.default.createElement("div", { style: { cursor: ctrlKeyWasUsed ? 'pointer' : cursorMode }, onMouseDown: event => {
219
223
  if (event.button === 0) {
package/dist/DotplotView/model.d.ts CHANGED
@@ -7,13 +7,16 @@ type Coord = [number, number];
7
7
  export interface ExportSvgOptions {
8
8
  rasterizeLayers?: boolean;
9
9
  filename?: string;
10
- Wrapper?: React.FC<any>;
10
+ Wrapper?: React.FC<{
11
+ children: React.ReactNode;
12
+ }>;
11
13
  themeName?: string;
12
14
  }
13
15
  /**
14
16
  * #stateModel DotplotView
15
17
  * #category view
16
- * extends `BaseViewModel`
18
+ * extends
19
+ * - [BaseViewModel](../baseviewmodel)
17
20
  */
18
21
  export default function stateModelFactory(pm: PluginManager): import("mobx-state-tree").IModelType<{
19
22
  id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -59,23 +62,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
59
62
  readonly assemblyNames: string[];
60
63
  readonly displayedRegionsTotalPx: number;
61
64
  readonly maxOffset: number;
62
- readonly minOffset: number; /**
63
- * #stateModel DotplotView
64
- * #category view
65
- * extends `BaseViewModel`
66
- */
65
+ readonly minOffset: number;
67
66
  readonly totalBp: number;
68
67
  } & {
69
68
  readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
70
69
  readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
71
- readonly currBp: number; /**
72
- * #property
73
- */
70
+ readonly currBp: number;
74
71
  } & {
75
72
  pxToBp(px: number): {
76
- coord: number; /**
77
- * #property
78
- */
73
+ coord: number;
79
74
  index: number;
80
75
  refName: string;
81
76
  oob: boolean;
@@ -94,18 +89,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
94
89
  * #property
95
90
  */
96
91
  coord: number;
97
- regionNumber?: number | undefined;
92
+ regionNumber?: number | undefined; /**
93
+ * #property
94
+ */
98
95
  }): number | undefined;
99
96
  } & {
100
97
  setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
101
98
  showAllRegions(): void;
102
- zoomOut(): void; /**
103
- * #property
104
- */
99
+ zoomOut(): void;
105
100
  zoomIn(): void;
106
101
  zoomTo(bpPerPx: number, offset?: number | undefined): number;
107
102
  scrollTo(offsetPx: number): number;
108
- centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
103
+ centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
104
+ * #property
105
+ * this represents tracks specific to this view specifically used
106
+ * for read vs ref dotplots where this track would not really apply
107
+ * elsewhere
108
+ */
109
109
  scroll(distance: number): number;
110
110
  } & {
111
111
  moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -150,23 +150,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
150
150
  readonly assemblyNames: string[];
151
151
  readonly displayedRegionsTotalPx: number;
152
152
  readonly maxOffset: number;
153
- readonly minOffset: number; /**
154
- * #stateModel DotplotView
155
- * #category view
156
- * extends `BaseViewModel`
157
- */
153
+ readonly minOffset: number;
158
154
  readonly totalBp: number;
159
155
  } & {
160
156
  readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
161
157
  readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
162
- readonly currBp: number; /**
163
- * #property
164
- */
158
+ readonly currBp: number;
165
159
  } & {
166
160
  pxToBp(px: number): {
167
- coord: number; /**
168
- * #property
169
- */
161
+ coord: number;
170
162
  index: number;
171
163
  refName: string;
172
164
  oob: boolean;
@@ -185,18 +177,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
185
177
  * #property
186
178
  */
187
179
  coord: number;
188
- regionNumber?: number | undefined;
180
+ regionNumber?: number | undefined; /**
181
+ * #property
182
+ */
189
183
  }): number | undefined;
190
184
  } & {
191
185
  setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
192
186
  showAllRegions(): void;
193
- zoomOut(): void; /**
194
- * #property
195
- */
187
+ zoomOut(): void;
196
188
  zoomIn(): void;
197
189
  zoomTo(bpPerPx: number, offset?: number | undefined): number;
198
190
  scrollTo(offsetPx: number): number;
199
- centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
191
+ centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
192
+ * #property
193
+ * this represents tracks specific to this view specifically used
194
+ * for read vs ref dotplots where this track would not really apply
195
+ * elsewhere
196
+ */
200
197
  scroll(distance: number): number;
201
198
  } & {
202
199
  moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -233,9 +230,6 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
233
230
  } & {
234
231
  setMinimized(flag: boolean): void;
235
232
  showDisplay(displayId: string, initialSnapshot?: {} | undefined): void;
236
- /**
237
- * #property
238
- */
239
233
  hideDisplay(displayId: string): number; /**
240
234
  * #property
241
235
  */
@@ -243,18 +237,20 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
243
237
  } & {
244
238
  trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
245
239
  type: string;
246
- label: string;
240
+ label: string; /**
241
+ * #property
242
+ */
247
243
  subMenu: {
248
244
  type: string;
249
245
  label: string; /**
250
246
  * #property
251
247
  */
252
248
  checked: boolean;
253
- onClick: () => void;
249
+ onClick: () => void; /**
250
+ * #property
251
+ */
254
252
  }[];
255
- })[]; /**
256
- * #property
257
- */
253
+ })[];
258
254
  }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
259
255
  viewTrackConfigs: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
260
256
  }, {
@@ -362,23 +358,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
362
358
  readonly assemblyNames: string[];
363
359
  readonly displayedRegionsTotalPx: number;
364
360
  readonly maxOffset: number;
365
- readonly minOffset: number; /**
366
- * #stateModel DotplotView
367
- * #category view
368
- * extends `BaseViewModel`
369
- */
361
+ readonly minOffset: number;
370
362
  readonly totalBp: number;
371
363
  } & {
372
364
  readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
373
365
  readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
374
- readonly currBp: number; /**
375
- * #property
376
- */
366
+ readonly currBp: number;
377
367
  } & {
378
368
  pxToBp(px: number): {
379
- coord: number; /**
380
- * #property
381
- */
369
+ coord: number;
382
370
  index: number;
383
371
  refName: string;
384
372
  oob: boolean;
@@ -397,18 +385,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
397
385
  * #property
398
386
  */
399
387
  coord: number;
400
- regionNumber?: number | undefined;
388
+ regionNumber?: number | undefined; /**
389
+ * #property
390
+ */
401
391
  }): number | undefined;
402
392
  } & {
403
393
  setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
404
394
  showAllRegions(): void;
405
- zoomOut(): void; /**
406
- * #property
407
- */
395
+ zoomOut(): void;
408
396
  zoomIn(): void;
409
397
  zoomTo(bpPerPx: number, offset?: number | undefined): number;
410
398
  scrollTo(offsetPx: number): number;
411
- centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
399
+ centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
400
+ * #property
401
+ * this represents tracks specific to this view specifically used
402
+ * for read vs ref dotplots where this track would not really apply
403
+ * elsewhere
404
+ */
412
405
  scroll(distance: number): number;
413
406
  } & {
414
407
  moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -452,23 +445,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
452
445
  readonly assemblyNames: string[];
453
446
  readonly displayedRegionsTotalPx: number;
454
447
  readonly maxOffset: number;
455
- readonly minOffset: number; /**
456
- * #stateModel DotplotView
457
- * #category view
458
- * extends `BaseViewModel`
459
- */
448
+ readonly minOffset: number;
460
449
  readonly totalBp: number;
461
450
  } & {
462
451
  readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
463
452
  readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
464
- readonly currBp: number; /**
465
- * #property
466
- */
453
+ readonly currBp: number;
467
454
  } & {
468
455
  pxToBp(px: number): {
469
- coord: number; /**
470
- * #property
471
- */
456
+ coord: number;
472
457
  index: number;
473
458
  refName: string;
474
459
  oob: boolean;
@@ -487,18 +472,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
487
472
  * #property
488
473
  */
489
474
  coord: number;
490
- regionNumber?: number | undefined;
475
+ regionNumber?: number | undefined; /**
476
+ * #property
477
+ */
491
478
  }): number | undefined;
492
479
  } & {
493
480
  setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
494
481
  showAllRegions(): void;
495
- zoomOut(): void; /**
496
- * #property
497
- */
482
+ zoomOut(): void;
498
483
  zoomIn(): void;
499
484
  zoomTo(bpPerPx: number, offset?: number | undefined): number;
500
485
  scrollTo(offsetPx: number): number;
501
- centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
486
+ centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
487
+ * #property
488
+ * this represents tracks specific to this view specifically used
489
+ * for read vs ref dotplots where this track would not really apply
490
+ * elsewhere
491
+ */
502
492
  scroll(distance: number): number;
503
493
  } & {
504
494
  moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -603,9 +593,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
603
593
  * #action
604
594
  */
605
595
  getCoords(mousedown: Coord, mouseup: Coord): {
606
- coord: number; /**
607
- * #property
608
- */
596
+ coord: number;
609
597
  index: number;
610
598
  refName: string;
611
599
  oob: boolean;
package/dist/DotplotView/model.js CHANGED
@@ -46,19 +46,22 @@ const util_2 = require("./components/util");
46
46
  // lazies
47
47
  const ExportSvgDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ExportSvgDialog'))));
48
48
  const ReturnToImportFormDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@jbrowse/core/ui/ReturnToImportFormDialog'))));
49
- const len = (a) => (0, util_1.measureText)(a.slice(0, 30));
50
- const pxWidthForBlocks = (blocks, hide) => {
49
+ function stringLenPx(a) {
50
+ return (0, util_1.measureText)(a.slice(0, 30));
51
+ }
52
+ function pxWidthForBlocks(blocks, bpPerPx, hide) {
51
53
  return (0, util_1.max)([
52
- ...blocks.filter(b => !hide.has(b.key)).map(b => len(b.refName)),
54
+ ...blocks.filter(b => !hide.has(b.key)).map(b => stringLenPx(b.refName)),
53
55
  ...blocks
54
56
  .filter(b => !hide.has(b.key))
55
- .map(b => len(b.end.toLocaleString('en-us'))),
57
+ .map(b => stringLenPx((0, util_1.getTickDisplayStr)(b.end, bpPerPx))),
56
58
  ]);
57
- };
59
+ }
58
60
  /**
59
61
  * #stateModel DotplotView
60
62
  * #category view
61
- * extends `BaseViewModel`
63
+ * extends
64
+ * - [BaseViewModel](../baseviewmodel)
62
65
  */
63
66
  function stateModelFactory(pm) {
64
67
  return mobx_state_tree_1.types
@@ -561,8 +564,8 @@ function stateModelFactory(pm) {
561
564
  const voffset = vview.offsetPx;
562
565
  const vhide = (0, util_2.getBlockLabelKeysToHide)(vblocks, viewHeight, voffset);
563
566
  const hhide = (0, util_2.getBlockLabelKeysToHide)(hblocks, viewWidth, hoffset);
564
- const by = pxWidthForBlocks(hblocks, hhide);
565
- const bx = pxWidthForBlocks(vblocks, vhide);
567
+ const by = pxWidthForBlocks(hblocks, vview.bpPerPx, hhide);
568
+ const bx = pxWidthForBlocks(vblocks, hview.bpPerPx, vhide);
566
569
  // these are set via autorun to avoid dependency cycle
567
570
  self.setBorderY(Math.max(by + padding, 50));
568
571
  self.setBorderX(Math.max(bx + padding, 50));
package/dist/DotplotView/svgcomponents/SVGDotplotView.js CHANGED
@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.renderToSvg = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
- const server_1 = require("react-dom/server");
9
8
  const mobx_1 = require("mobx");
10
9
  const util_1 = require("@jbrowse/core/util");
11
10
  const material_1 = require("@mui/material");
12
11
  const ui_1 = require("@jbrowse/core/ui");
12
+ const mobx_state_tree_1 = require("mobx-state-tree");
13
13
  const Grid_1 = require("../components/Grid");
14
14
  const Axes_1 = require("../components/Axes");
15
15
  const SVGBackground_1 = __importDefault(require("./SVGBackground"));
@@ -18,6 +18,8 @@ async function renderToSvg(model, opts) {
18
18
  var _a;
19
19
  await (0, mobx_1.when)(() => model.initialized);
20
20
  const { themeName = 'default', Wrapper = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children) } = opts;
21
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
22
+ const { createRootFn } = (0, mobx_state_tree_1.getRoot)(model);
21
23
  const session = (0, util_1.getSession)(model);
22
24
  const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
23
25
  const { width, borderX, viewWidth, viewHeight, tracks, height } = model;
@@ -29,7 +31,7 @@ async function renderToSvg(model, opts) {
29
31
  }));
30
32
  const w = width + shift * 2;
31
33
  // the xlink namespace is used for rendering <image> tag
32
- return (0, server_1.renderToStaticMarkup)(react_1.default.createElement(material_1.ThemeProvider, { theme: (0, ui_1.createJBrowseTheme)(theme) },
34
+ return (0, util_1.renderToStaticMarkup)(react_1.default.createElement(material_1.ThemeProvider, { theme: (0, ui_1.createJBrowseTheme)(theme) },
33
35
  react_1.default.createElement(Wrapper, null,
34
36
  react_1.default.createElement("svg", { width: width, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w, height].toString() },
35
37
  react_1.default.createElement(SVGBackground_1.default, { width: w, height: height }),
@@ -41,6 +43,6 @@ async function renderToSvg(model, opts) {
41
43
  react_1.default.createElement("rect", { x: 0, y: 0, width: viewWidth, height: viewHeight }))),
42
44
  react_1.default.createElement("g", { clipPath: "url(#clip-ruler)" }, displayResults.map(({ result }, i) => (react_1.default.createElement("g", { key: i }, result))))),
43
45
  react_1.default.createElement("g", { transform: `translate(${borderX} ${viewHeight})` },
44
- react_1.default.createElement(Axes_1.HorizontalAxisRaw, { model: model }))))));
46
+ react_1.default.createElement(Axes_1.HorizontalAxisRaw, { model: model }))))), createRootFn);
45
47
  }
46
48
  exports.renderToSvg = renderToSvg;
package/esm/DotplotView/components/Axes.js CHANGED
@@ -61,15 +61,10 @@ export const HorizontalAxisRaw = observer(function ({ model, }) {
61
61
  const xoff = Math.floor(x - hview.offsetPx);
62
62
  return (React.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end" }, region.refName));
63
63
  }),
64
- ticks.map(([tick, x]) => {
65
- return (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.grey[400] }));
66
- }),
64
+ ticks.map(([tick, x]) => x > 0 && x < width ? (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.grey[400] })) : null),
67
65
  ticks
68
66
  .filter(t => t[0].type === 'major')
69
- .map(([tick, x]) => {
70
- const y = 0;
71
- return x > 10 ? (React.createElement("text", { x: x - 7, y: y, transform: `rotate(${htextRotation},${x},${y})`, key: `text-${JSON.stringify(tick)}`, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "middle", textAnchor: "end" }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null;
72
- }),
67
+ .map(([tick, x]) => x > 10 && x < width ? (React.createElement("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},${0})`, key: `text-${JSON.stringify(tick)}`, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "middle", textAnchor: "end" }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null),
73
68
  React.createElement("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, fill: theme.palette.text.primary, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging" }, hview.assemblyNames.join(','))));
74
69
  });
75
70
  export const VerticalAxis = observer(function ({ model, }) {
@@ -112,11 +107,9 @@ export const VerticalAxisRaw = observer(function ({ model, }) {
112
107
  const yoff = Math.floor(viewHeight - y + offsetPx);
113
108
  return (React.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff, fill: theme.palette.text.primary, fontSize: 11, textAnchor: "end" }, region.refName));
114
109
  }),
115
- ticks.map(([tick, y]) => (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, stroke: theme.palette.grey[400] }))),
110
+ ticks.map(([tick, y]) => y > 0 ? (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, stroke: theme.palette.grey[400] })) : null),
116
111
  ticks
117
112
  .filter(t => t[0].type === 'major')
118
- .map(([tick, y]) => {
119
- return y > 10 ? (React.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", fill: theme.palette.text.primary, dominantBaseline: "hanging", fontSize: 11 }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null;
120
- }),
113
+ .map(([tick, y]) => y > 10 && y < viewHeight ? (React.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", fill: theme.palette.text.primary, dominantBaseline: "hanging", fontSize: 11 }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null),
121
114
  React.createElement("text", { y: (viewHeight - borderY) / 2, x: 12, fill: theme.palette.text.primary, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11 }, vview.assemblyNames.join(','))));
122
115
  });
package/esm/DotplotView/components/DotplotTooltip.d.ts CHANGED
@@ -1,18 +1,17 @@
1
1
  import React from 'react';
2
2
  import { DotplotViewModel } from '../model';
3
3
  type Coord = [number, number] | undefined;
4
- export declare const TooltipWhereMouseovered: ({ model, mouserect, mouserectClient, xdistance, ydistance, }: {
4
+ export declare const TooltipWhereMouseovered: ({ model, mouserect, mouserectClient, xdistance, }: {
5
5
  model: DotplotViewModel;
6
6
  mouserect: Coord;
7
7
  mouserectClient: Coord;
8
8
  xdistance: number;
9
- ydistance: number;
10
- }) => React.JSX.Element;
9
+ }) => React.JSX.Element | null;
11
10
  export declare const TooltipWhereClicked: ({ model, mousedown, mousedownClient, xdistance, ydistance, }: {
12
11
  model: DotplotViewModel;
13
12
  mousedown: Coord;
14
13
  mousedownClient: Coord;
15
14
  xdistance: number;
16
15
  ydistance: number;
17
- }) => React.JSX.Element;
16
+ }) => React.JSX.Element | null;
18
17
  export {};
package/esm/DotplotView/components/DotplotTooltip.js CHANGED
@@ -1,9 +1,9 @@
1
- import React, { useMemo, useRef, useState } from 'react';
1
+ import React from 'react';
2
2
  import { observer } from 'mobx-react';
3
3
  import { makeStyles } from 'tss-react/mui';
4
4
  import { locstr } from './util';
5
- import { Portal, alpha } from '@mui/material';
6
- import { usePopper } from 'react-popper';
5
+ import { Portal, alpha, useTheme } from '@mui/material';
6
+ import { useFloating, useClientPoint, useInteractions, } from '@floating-ui/react';
7
7
  function round(value) {
8
8
  return Math.round(value * 1e5) / 1e5;
9
9
  }
@@ -24,77 +24,54 @@ const useStyles = makeStyles()(theme => ({
24
24
  wordWrap: 'break-word',
25
25
  },
26
26
  }));
27
- const blank = { left: 0, top: 0, width: 0, height: 0 };
28
- export const TooltipWhereMouseovered = observer(function ({ model, mouserect, mouserectClient, xdistance, ydistance, }) {
29
- var _a;
27
+ export const TooltipWhereMouseovered = observer(function ({ model, mouserect, mouserectClient, xdistance, }) {
28
+ var _a, _b;
30
29
  const { classes } = useStyles();
31
30
  const { hview, vview, viewHeight } = model;
32
- const [anchorEl, setAnchorEl] = useState(null);
33
- const ref = useRef(null);
34
- const rect = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || blank;
35
- const offset = 6;
36
- const w = rect.height + offset * 2;
37
- // must be memoized a la https://github.com/popperjs/react-popper/issues/391
38
- const virtElement = useMemo(() => ({
39
- getBoundingClientRect: () => {
40
- const x = offset + ((mouserectClient === null || mouserectClient === void 0 ? void 0 : mouserectClient[0]) || 0) - (xdistance < 0 ? w : 0);
41
- const y = offset + ((mouserectClient === null || mouserectClient === void 0 ? void 0 : mouserectClient[1]) || 0) - (ydistance < 0 ? w : 0);
42
- return {
43
- top: y,
44
- left: x,
45
- bottom: y,
46
- right: x,
47
- width: 0,
48
- height: 0,
49
- x,
50
- y,
51
- toJSON() { },
52
- };
53
- },
54
- }), [mouserectClient, xdistance, ydistance, w]);
55
- const { styles, attributes } = usePopper(virtElement, anchorEl, {
31
+ const theme = useTheme();
32
+ const { refs, floatingStyles, context } = useFloating({
56
33
  placement: xdistance < 0 ? 'left' : 'right',
57
34
  });
58
- return (React.createElement(React.Fragment, null, mouserect ? (React.createElement(Portal, null,
59
- React.createElement("div", { ref: setAnchorEl, className: classes.tooltip,
60
- // zIndex needed to go over widget drawer
61
- style: { ...styles.popper, zIndex: 100000 }, ...attributes.popper },
35
+ const clientPoint = useClientPoint(context, mouserectClient
36
+ ? {
37
+ x: mouserectClient[0],
38
+ y: mouserectClient[1],
39
+ }
40
+ : undefined);
41
+ const { getFloatingProps } = useInteractions([clientPoint]);
42
+ const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
43
+ return mouserect ? (React.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
44
+ React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
45
+ ...floatingStyles,
46
+ zIndex: 100000,
47
+ pointerEvents: 'none',
48
+ }, ...getFloatingProps() },
62
49
  `x - ${locstr(mouserect[0], hview)}`,
63
50
  React.createElement("br", null),
64
51
  `y - ${locstr(viewHeight - mouserect[1], vview)}`,
65
- React.createElement("br", null)))) : null));
52
+ React.createElement("br", null)))) : null;
66
53
  });
67
54
  export const TooltipWhereClicked = observer(function ({ model, mousedown, mousedownClient, xdistance, ydistance, }) {
55
+ var _a, _b;
68
56
  const { classes } = useStyles();
69
57
  const { hview, vview, viewHeight } = model;
70
- const [anchorEl, setAnchorEl] = useState(null);
71
- // must be memoized a la https://github.com/popperjs/react-popper/issues/391
72
- const virtElement = useMemo(() => ({
73
- getBoundingClientRect: () => {
74
- const x = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[0]) || 0) - (xdistance < 0 ? 0 : 0);
75
- const y = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[1]) || 0) - (ydistance < 0 ? 0 : 0);
76
- return {
77
- top: y,
78
- left: x,
79
- bottom: y,
80
- right: x,
81
- width: 0,
82
- height: 0,
83
- x,
84
- y,
85
- toJSON() { },
86
- };
87
- },
88
- }), [mousedownClient, xdistance, ydistance]);
89
- const { styles, attributes } = usePopper(virtElement, anchorEl, {
58
+ const theme = useTheme();
59
+ const x = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[0]) || 0) - (xdistance < 0 ? 0 : 0);
60
+ const y = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[1]) || 0) - (ydistance < 0 ? 0 : 0);
61
+ const { refs, floatingStyles, context } = useFloating({
90
62
  placement: xdistance < 0 ? 'right' : 'left',
91
63
  });
92
- return (React.createElement(React.Fragment, null, mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (React.createElement(Portal, null,
93
- React.createElement("div", { ref: setAnchorEl, className: classes.tooltip,
94
- // zIndex needed to go over widget drawer
95
- style: { ...styles.popper, zIndex: 100000 }, ...attributes.popper },
64
+ const clientPoint = useClientPoint(context, { x, y });
65
+ const { getFloatingProps } = useInteractions([clientPoint]);
66
+ const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
67
+ return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (React.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
68
+ React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
69
+ ...floatingStyles,
70
+ zIndex: 100000,
71
+ pointerEvents: 'none',
72
+ }, ...getFloatingProps() },
96
73
  `x - ${locstr(mousedown[0], hview)}`,
97
74
  React.createElement("br", null),
98
75
  `y - ${locstr(viewHeight - mousedown[1], vview)}`,
99
- React.createElement("br", null)))) : null));
76
+ React.createElement("br", null)))) : null;
100
77
  });
package/esm/DotplotView/components/DotplotView.js CHANGED
@@ -81,8 +81,8 @@ const DotplotViewInternal = observer(function ({ model, }) {
81
81
  const mousedown = getOffset(mousedownClient, svg);
82
82
  const mousecurr = getOffset(mousecurrClient, svg);
83
83
  const mouseup = getOffset(mouseupClient, svg);
84
- const mouserectClient = mouseupClient || mousecurrClient;
85
84
  const mouserect = mouseup || mousecurr;
85
+ const mouserectClient = mouseupClient || mousecurrClient;
86
86
  const xdistance = mousedown && mouserect ? mouserect[0] - mousedown[0] : 0;
87
87
  const ydistance = mousedown && mouserect ? mouserect[1] - mousedown[1] : 0;
88
88
  const { hview, vview, wheelMode, cursorMode } = model;
@@ -147,22 +147,26 @@ const DotplotViewInternal = observer(function ({ model, }) {
147
147
  hview,
148
148
  vview,
149
149
  ]);
150
- // detect a mouseup after a mousedown was submitted, autoremoves mouseup
151
- // once that single mouseup is set
150
+ // detect a mouseup after a mousedown was submitted, autoremoves mouseup once
151
+ // that single mouseup is set
152
152
  useEffect(() => {
153
- function globalMouseUp(event) {
154
- if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
155
- setMouseUpClient([event.clientX, event.clientY]);
156
- }
157
- else {
158
- setMouseDownClient(undefined);
159
- }
160
- }
161
153
  if (mousedown && !mouseup) {
154
+ function globalMouseUp(event) {
155
+ if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
156
+ setMouseUpClient([event.clientX, event.clientY]);
157
+ }
158
+ else {
159
+ setMouseDownClient(undefined);
160
+ }
161
+ }
162
162
  window.addEventListener('mouseup', globalMouseUp, true);
163
- return () => window.removeEventListener('mouseup', globalMouseUp, true);
163
+ return () => {
164
+ window.removeEventListener('mouseup', globalMouseUp, true);
165
+ };
166
+ }
167
+ else {
168
+ return () => { };
164
169
  }
165
- return () => { };
166
170
  }, [
167
171
  validSelect,
168
172
  mousedown,
@@ -185,7 +189,7 @@ const DotplotViewInternal = observer(function ({ model, }) {
185
189
  React.createElement(VerticalAxis, { model: model }),
186
190
  React.createElement(HorizontalAxis, { model: model }),
187
191
  React.createElement("div", { ref: ref, className: classes.content },
188
- mouseOvered && validSelect ? (React.createElement(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance, ydistance: ydistance })) : null,
192
+ mouseOvered && validSelect ? (React.createElement(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance })) : null,
189
193
  validSelect ? (React.createElement(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance })) : null,
190
194
  React.createElement("div", { style: { cursor: ctrlKeyWasUsed ? 'pointer' : cursorMode }, onMouseDown: event => {
191
195
  if (event.button === 0) {
package/esm/DotplotView/model.d.ts CHANGED
@@ -7,13 +7,16 @@ type Coord = [number, number];
7
7
  export interface ExportSvgOptions {
8
8
  rasterizeLayers?: boolean;
9
9
  filename?: string;
10
- Wrapper?: React.FC<any>;
10
+ Wrapper?: React.FC<{
11
+ children: React.ReactNode;
12
+ }>;
11
13
  themeName?: string;
12
14
  }
13
15
  /**
14
16
  * #stateModel DotplotView
15
17
  * #category view
16
- * extends `BaseViewModel`
18
+ * extends
19
+ * - [BaseViewModel](../baseviewmodel)
17
20
  */
18
21
  export default function stateModelFactory(pm: PluginManager): import("mobx-state-tree").IModelType<{
19
22
  id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -59,23 +62,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
59
62
  readonly assemblyNames: string[];
60
63
  readonly displayedRegionsTotalPx: number;
61
64
  readonly maxOffset: number;
62
- readonly minOffset: number; /**
63
- * #stateModel DotplotView
64
- * #category view
65
- * extends `BaseViewModel`
66
- */
65
+ readonly minOffset: number;
67
66
  readonly totalBp: number;
68
67
  } & {
69
68
  readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
70
69
  readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
71
- readonly currBp: number; /**
72
- * #property
73
- */
70
+ readonly currBp: number;
74
71
  } & {
75
72
  pxToBp(px: number): {
76
- coord: number; /**
77
- * #property
78
- */
73
+ coord: number;
79
74
  index: number;
80
75
  refName: string;
81
76
  oob: boolean;
@@ -94,18 +89,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
94
89
  * #property
95
90
  */
96
91
  coord: number;
97
- regionNumber?: number | undefined;
92
+ regionNumber?: number | undefined; /**
93
+ * #property
94
+ */
98
95
  }): number | undefined;
99
96
  } & {
100
97
  setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
101
98
  showAllRegions(): void;
102
- zoomOut(): void; /**
103
- * #property
104
- */
99
+ zoomOut(): void;
105
100
  zoomIn(): void;
106
101
  zoomTo(bpPerPx: number, offset?: number | undefined): number;
107
102
  scrollTo(offsetPx: number): number;
108
- centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
103
+ centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
104
+ * #property
105
+ * this represents tracks specific to this view specifically used
106
+ * for read vs ref dotplots where this track would not really apply
107
+ * elsewhere
108
+ */
109
109
  scroll(distance: number): number;
110
110
  } & {
111
111
  moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -150,23 +150,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
150
150
  readonly assemblyNames: string[];
151
151
  readonly displayedRegionsTotalPx: number;
152
152
  readonly maxOffset: number;
153
- readonly minOffset: number; /**
154
- * #stateModel DotplotView
155
- * #category view
156
- * extends `BaseViewModel`
157
- */
153
+ readonly minOffset: number;
158
154
  readonly totalBp: number;
159
155
  } & {
160
156
  readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
161
157
  readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
162
- readonly currBp: number; /**
163
- * #property
164
- */
158
+ readonly currBp: number;
165
159
  } & {
166
160
  pxToBp(px: number): {
167
- coord: number; /**
168
- * #property
169
- */
161
+ coord: number;
170
162
  index: number;
171
163
  refName: string;
172
164
  oob: boolean;
@@ -185,18 +177,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
185
177
  * #property
186
178
  */
187
179
  coord: number;
188
- regionNumber?: number | undefined;
180
+ regionNumber?: number | undefined; /**
181
+ * #property
182
+ */
189
183
  }): number | undefined;
190
184
  } & {
191
185
  setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
192
186
  showAllRegions(): void;
193
- zoomOut(): void; /**
194
- * #property
195
- */
187
+ zoomOut(): void;
196
188
  zoomIn(): void;
197
189
  zoomTo(bpPerPx: number, offset?: number | undefined): number;
198
190
  scrollTo(offsetPx: number): number;
199
- centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
191
+ centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
192
+ * #property
193
+ * this represents tracks specific to this view specifically used
194
+ * for read vs ref dotplots where this track would not really apply
195
+ * elsewhere
196
+ */
200
197
  scroll(distance: number): number;
201
198
  } & {
202
199
  moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -233,9 +230,6 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
233
230
  } & {
234
231
  setMinimized(flag: boolean): void;
235
232
  showDisplay(displayId: string, initialSnapshot?: {} | undefined): void;
236
- /**
237
- * #property
238
- */
239
233
  hideDisplay(displayId: string): number; /**
240
234
  * #property
241
235
  */
@@ -243,18 +237,20 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
243
237
  } & {
244
238
  trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
245
239
  type: string;
246
- label: string;
240
+ label: string; /**
241
+ * #property
242
+ */
247
243
  subMenu: {
248
244
  type: string;
249
245
  label: string; /**
250
246
  * #property
251
247
  */
252
248
  checked: boolean;
253
- onClick: () => void;
249
+ onClick: () => void; /**
250
+ * #property
251
+ */
254
252
  }[];
255
- })[]; /**
256
- * #property
257
- */
253
+ })[];
258
254
  }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
259
255
  viewTrackConfigs: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
260
256
  }, {
@@ -362,23 +358,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
362
358
  readonly assemblyNames: string[];
363
359
  readonly displayedRegionsTotalPx: number;
364
360
  readonly maxOffset: number;
365
- readonly minOffset: number; /**
366
- * #stateModel DotplotView
367
- * #category view
368
- * extends `BaseViewModel`
369
- */
361
+ readonly minOffset: number;
370
362
  readonly totalBp: number;
371
363
  } & {
372
364
  readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
373
365
  readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
374
- readonly currBp: number; /**
375
- * #property
376
- */
366
+ readonly currBp: number;
377
367
  } & {
378
368
  pxToBp(px: number): {
379
- coord: number; /**
380
- * #property
381
- */
369
+ coord: number;
382
370
  index: number;
383
371
  refName: string;
384
372
  oob: boolean;
@@ -397,18 +385,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
397
385
  * #property
398
386
  */
399
387
  coord: number;
400
- regionNumber?: number | undefined;
388
+ regionNumber?: number | undefined; /**
389
+ * #property
390
+ */
401
391
  }): number | undefined;
402
392
  } & {
403
393
  setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
404
394
  showAllRegions(): void;
405
- zoomOut(): void; /**
406
- * #property
407
- */
395
+ zoomOut(): void;
408
396
  zoomIn(): void;
409
397
  zoomTo(bpPerPx: number, offset?: number | undefined): number;
410
398
  scrollTo(offsetPx: number): number;
411
- centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
399
+ centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
400
+ * #property
401
+ * this represents tracks specific to this view specifically used
402
+ * for read vs ref dotplots where this track would not really apply
403
+ * elsewhere
404
+ */
412
405
  scroll(distance: number): number;
413
406
  } & {
414
407
  moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -452,23 +445,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
452
445
  readonly assemblyNames: string[];
453
446
  readonly displayedRegionsTotalPx: number;
454
447
  readonly maxOffset: number;
455
- readonly minOffset: number; /**
456
- * #stateModel DotplotView
457
- * #category view
458
- * extends `BaseViewModel`
459
- */
448
+ readonly minOffset: number;
460
449
  readonly totalBp: number;
461
450
  } & {
462
451
  readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
463
452
  readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
464
- readonly currBp: number; /**
465
- * #property
466
- */
453
+ readonly currBp: number;
467
454
  } & {
468
455
  pxToBp(px: number): {
469
- coord: number; /**
470
- * #property
471
- */
456
+ coord: number;
472
457
  index: number;
473
458
  refName: string;
474
459
  oob: boolean;
@@ -487,18 +472,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
487
472
  * #property
488
473
  */
489
474
  coord: number;
490
- regionNumber?: number | undefined;
475
+ regionNumber?: number | undefined; /**
476
+ * #property
477
+ */
491
478
  }): number | undefined;
492
479
  } & {
493
480
  setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
494
481
  showAllRegions(): void;
495
- zoomOut(): void; /**
496
- * #property
497
- */
482
+ zoomOut(): void;
498
483
  zoomIn(): void;
499
484
  zoomTo(bpPerPx: number, offset?: number | undefined): number;
500
485
  scrollTo(offsetPx: number): number;
501
- centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
486
+ centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
487
+ * #property
488
+ * this represents tracks specific to this view specifically used
489
+ * for read vs ref dotplots where this track would not really apply
490
+ * elsewhere
491
+ */
502
492
  scroll(distance: number): number;
503
493
  } & {
504
494
  moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -603,9 +593,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
603
593
  * #action
604
594
  */
605
595
  getCoords(mousedown: Coord, mouseup: Coord): {
606
- coord: number; /**
607
- * #property
608
- */
596
+ coord: number;
609
597
  index: number;
610
598
  refName: string;
611
599
  oob: boolean;
package/esm/DotplotView/model.js CHANGED
@@ -4,7 +4,7 @@ import { saveAs } from 'file-saver';
4
4
  import { autorun, transaction } from 'mobx';
5
5
  import { getParentRenderProps } from '@jbrowse/core/util/tracks';
6
6
  import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
7
- import { getSession, isSessionModelWithWidgets, minmax, measureText, max, localStorageGetItem, } from '@jbrowse/core/util';
7
+ import { getSession, isSessionModelWithWidgets, minmax, measureText, max, localStorageGetItem, getTickDisplayStr, } from '@jbrowse/core/util';
8
8
  import { getConf } from '@jbrowse/core/configuration';
9
9
  import { ElementId } from '@jbrowse/core/util/types/mst';
10
10
  // icons
@@ -17,19 +17,22 @@ import { getBlockLabelKeysToHide, makeTicks } from './components/util';
17
17
  // lazies
18
18
  const ExportSvgDialog = lazy(() => import('./components/ExportSvgDialog'));
19
19
  const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
20
- const len = (a) => measureText(a.slice(0, 30));
21
- const pxWidthForBlocks = (blocks, hide) => {
20
+ function stringLenPx(a) {
21
+ return measureText(a.slice(0, 30));
22
+ }
23
+ function pxWidthForBlocks(blocks, bpPerPx, hide) {
22
24
  return max([
23
- ...blocks.filter(b => !hide.has(b.key)).map(b => len(b.refName)),
25
+ ...blocks.filter(b => !hide.has(b.key)).map(b => stringLenPx(b.refName)),
24
26
  ...blocks
25
27
  .filter(b => !hide.has(b.key))
26
- .map(b => len(b.end.toLocaleString('en-us'))),
28
+ .map(b => stringLenPx(getTickDisplayStr(b.end, bpPerPx))),
27
29
  ]);
28
- };
30
+ }
29
31
  /**
30
32
  * #stateModel DotplotView
31
33
  * #category view
32
- * extends `BaseViewModel`
34
+ * extends
35
+ * - [BaseViewModel](../baseviewmodel)
33
36
  */
34
37
  export default function stateModelFactory(pm) {
35
38
  return types
@@ -532,8 +535,8 @@ export default function stateModelFactory(pm) {
532
535
  const voffset = vview.offsetPx;
533
536
  const vhide = getBlockLabelKeysToHide(vblocks, viewHeight, voffset);
534
537
  const hhide = getBlockLabelKeysToHide(hblocks, viewWidth, hoffset);
535
- const by = pxWidthForBlocks(hblocks, hhide);
536
- const bx = pxWidthForBlocks(vblocks, vhide);
538
+ const by = pxWidthForBlocks(hblocks, vview.bpPerPx, hhide);
539
+ const bx = pxWidthForBlocks(vblocks, hview.bpPerPx, vhide);
537
540
  // these are set via autorun to avoid dependency cycle
538
541
  self.setBorderY(Math.max(by + padding, 50));
539
542
  self.setBorderX(Math.max(bx + padding, 50));
package/esm/DotplotView/svgcomponents/SVGDotplotView.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
- import { renderToStaticMarkup } from 'react-dom/server';
3
2
  import { when } from 'mobx';
4
- import { getSession } from '@jbrowse/core/util';
3
+ import { getSession, renderToStaticMarkup } from '@jbrowse/core/util';
5
4
  import { ThemeProvider } from '@mui/material';
6
5
  import { createJBrowseTheme } from '@jbrowse/core/ui';
6
+ import { getRoot } from 'mobx-state-tree';
7
7
  import { GridRaw } from '../components/Grid';
8
8
  import { HorizontalAxisRaw, VerticalAxisRaw } from '../components/Axes';
9
9
  import SVGBackground from './SVGBackground';
@@ -12,6 +12,8 @@ export async function renderToSvg(model, opts) {
12
12
  var _a;
13
13
  await when(() => model.initialized);
14
14
  const { themeName = 'default', Wrapper = ({ children }) => React.createElement(React.Fragment, null, children) } = opts;
15
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
16
+ const { createRootFn } = getRoot(model);
15
17
  const session = getSession(model);
16
18
  const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
17
19
  const { width, borderX, viewWidth, viewHeight, tracks, height } = model;
@@ -35,5 +37,5 @@ export async function renderToSvg(model, opts) {
35
37
  React.createElement("rect", { x: 0, y: 0, width: viewWidth, height: viewHeight }))),
36
38
  React.createElement("g", { clipPath: "url(#clip-ruler)" }, displayResults.map(({ result }, i) => (React.createElement("g", { key: i }, result))))),
37
39
  React.createElement("g", { transform: `translate(${borderX} ${viewHeight})` },
38
- React.createElement(HorizontalAxisRaw, { model: model }))))));
40
+ React.createElement(HorizontalAxisRaw, { model: model }))))), createRootFn);
39
41
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jbrowse/plugin-dotplot-view",
3
- "version": "2.9.0",
3
+ "version": "2.10.0",
4
4
  "description": "JBrowse 2 dotplot view",
5
5
  "keywords": [
6
6
  "jbrowse",
@@ -36,15 +36,14 @@
36
36
  "clean": "rimraf dist esm *.tsbuildinfo"
37
37
  },
38
38
  "dependencies": {
39
+ "@floating-ui/react": "^0.26.3",
39
40
  "@mui/icons-material": "^5.0.1",
40
41
  "@mui/x-data-grid": "^6.0.1",
41
- "@popperjs/core": "^2.11.0",
42
42
  "@types/file-saver": "^2.0.1",
43
43
  "@types/normalize-wheel": "^1.0.0",
44
44
  "clone": "^2.1.2",
45
45
  "file-saver": "^2.0.0",
46
- "normalize-wheel": "^1.0.1",
47
- "react-popper": "^2.0.0"
46
+ "normalize-wheel": "^1.0.1"
48
47
  },
49
48
  "peerDependencies": {
50
49
  "@jbrowse/core": "^2.0.0",
@@ -64,5 +63,5 @@
64
63
  "publishConfig": {
65
64
  "access": "public"
66
65
  },
67
- "gitHead": "a50b6f67cf8c8f3c65a7b8cd858de2fcca1f2909"
66
+ "gitHead": "223d8bfb68fd1bacaf22852639ad5920f1b7f43b"
68
67
  }