@jbrowse/plugin-linear-genome-view 1.6.7 → 1.7.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 (74) hide show
  1. package/dist/BaseLinearDisplay/components/BaseLinearDisplay.js +232 -0
  2. package/dist/BaseLinearDisplay/components/Block.js +86 -0
  3. package/dist/BaseLinearDisplay/components/LinearBlocks.js +110 -0
  4. package/dist/BaseLinearDisplay/components/ServerSideRenderedBlockContent.js +192 -0
  5. package/dist/BaseLinearDisplay/index.js +41 -0
  6. package/dist/BaseLinearDisplay/models/BaseLinearDisplayModel.js +763 -0
  7. package/dist/BaseLinearDisplay/models/baseLinearDisplayConfigSchema.js +24 -0
  8. package/dist/BaseLinearDisplay/models/serverSideRenderedBlock.js +328 -0
  9. package/dist/LinearBareDisplay/configSchema.js +19 -0
  10. package/dist/LinearBareDisplay/index.js +21 -0
  11. package/dist/LinearBareDisplay/index.test.js +33 -0
  12. package/dist/LinearBareDisplay/model.d.ts +7 -7
  13. package/dist/LinearBareDisplay/model.js +44 -0
  14. package/dist/LinearBasicDisplay/components/SetMaxHeight.js +94 -0
  15. package/dist/LinearBasicDisplay/configSchema.js +25 -0
  16. package/dist/LinearBasicDisplay/index.js +23 -0
  17. package/dist/LinearBasicDisplay/model.d.ts +7 -7
  18. package/dist/LinearBasicDisplay/model.js +162 -0
  19. package/dist/LinearGenomeView/components/CenterLine.js +80 -0
  20. package/dist/LinearGenomeView/components/ExportSvgDialog.js +137 -0
  21. package/dist/LinearGenomeView/components/Header.js +144 -0
  22. package/dist/LinearGenomeView/components/HelpDialog.js +48 -0
  23. package/dist/LinearGenomeView/components/ImportForm.js +330 -0
  24. package/dist/LinearGenomeView/components/LinearGenomeView.js +129 -0
  25. package/dist/LinearGenomeView/components/LinearGenomeView.test.js +234 -0
  26. package/dist/LinearGenomeView/components/LinearGenomeViewSvg.js +349 -0
  27. package/dist/LinearGenomeView/components/MiniControls.js +83 -0
  28. package/dist/LinearGenomeView/components/OverviewRubberBand.js +310 -0
  29. package/dist/LinearGenomeView/components/OverviewScaleBar.d.ts +6 -6
  30. package/dist/LinearGenomeView/components/OverviewScaleBar.js +403 -0
  31. package/dist/LinearGenomeView/components/RefNameAutocomplete.js +331 -0
  32. package/dist/LinearGenomeView/components/RubberBand.js +309 -0
  33. package/dist/LinearGenomeView/components/Ruler.js +101 -0
  34. package/dist/LinearGenomeView/components/ScaleBar.js +184 -0
  35. package/dist/LinearGenomeView/components/ScaleBar.test.js +180 -0
  36. package/dist/LinearGenomeView/components/SearchBox.js +201 -0
  37. package/dist/LinearGenomeView/components/SearchResultsDialog.js +159 -0
  38. package/dist/LinearGenomeView/components/SequenceDialog.js +304 -0
  39. package/dist/LinearGenomeView/components/TrackContainer.js +179 -0
  40. package/dist/LinearGenomeView/components/TrackLabel.js +165 -0
  41. package/dist/LinearGenomeView/components/TracksContainer.js +214 -0
  42. package/dist/LinearGenomeView/components/VerticalGuides.js +116 -0
  43. package/dist/LinearGenomeView/components/ZoomControls.js +92 -0
  44. package/dist/LinearGenomeView/components/util.js +16 -0
  45. package/dist/LinearGenomeView/index.js +1418 -0
  46. package/dist/LinearGenomeView/index.test.js +1170 -0
  47. package/dist/LinearGenomeView/util.js +93 -0
  48. package/dist/LinearGenomeView/util.test.js +78 -0
  49. package/dist/index.d.ts +21 -21
  50. package/dist/index.js +293 -6
  51. package/dist/plugin-linear-genome-view.cjs.development.js +37 -22
  52. package/dist/plugin-linear-genome-view.cjs.development.js.map +1 -1
  53. package/dist/plugin-linear-genome-view.cjs.production.min.js +1 -1
  54. package/dist/plugin-linear-genome-view.cjs.production.min.js.map +1 -1
  55. package/dist/plugin-linear-genome-view.esm.js +37 -22
  56. package/dist/plugin-linear-genome-view.esm.js.map +1 -1
  57. package/package.json +4 -8
  58. package/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx +9 -12
  59. package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx +2 -0
  60. package/src/BaseLinearDisplay/models/serverSideRenderedBlock.ts +10 -8
  61. package/src/LinearBasicDisplay/components/SetMaxHeight.tsx +21 -12
  62. package/src/LinearBasicDisplay/model.ts +17 -18
  63. package/src/LinearGenomeView/components/Header.tsx +1 -1
  64. package/src/LinearGenomeView/components/ImportForm.tsx +10 -4
  65. package/src/LinearGenomeView/components/LinearGenomeView.test.js +1 -0
  66. package/src/LinearGenomeView/components/OverviewScaleBar.tsx +2 -2
  67. package/src/LinearGenomeView/components/RubberBand.tsx +14 -24
  68. package/src/LinearGenomeView/components/ScaleBar.test.tsx +1 -0
  69. package/src/LinearGenomeView/components/ScaleBar.tsx +3 -6
  70. package/src/LinearGenomeView/components/SequenceDialog.tsx +1 -1
  71. package/src/LinearGenomeView/components/TrackContainer.tsx +31 -24
  72. package/src/LinearGenomeView/components/TrackLabel.tsx +1 -1
  73. package/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap +23 -47
  74. package/src/LinearGenomeView/index.tsx +2 -3
@@ -0,0 +1,232 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports["default"] = exports.Tooltip = void 0;
11
+
12
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
+
14
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
+
16
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
+
18
+ var _react = _interopRequireWildcard(require("react"));
19
+
20
+ var _mobxReact = require("mobx-react");
21
+
22
+ var _core = require("@material-ui/core");
23
+
24
+ var _configuration = require("@jbrowse/core/configuration");
25
+
26
+ var _ui = require("@jbrowse/core/ui");
27
+
28
+ var _reactPopper = require("react-popper");
29
+
30
+ var _LinearBlocks = _interopRequireDefault(require("./LinearBlocks"));
31
+
32
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
33
+
34
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
35
+
36
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
37
+
38
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
39
+
40
+ function round(value) {
41
+ return Math.round(value * 1e5) / 1e5;
42
+ }
43
+
44
+ var useStyles = (0, _core.makeStyles)(function (theme) {
45
+ return {
46
+ display: {
47
+ position: 'relative',
48
+ whiteSpace: 'nowrap',
49
+ textAlign: 'left',
50
+ width: '100%',
51
+ minHeight: '100%'
52
+ },
53
+ // these styles come from
54
+ // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
55
+ tooltip: {
56
+ pointerEvents: 'none',
57
+ backgroundColor: (0, _core.alpha)(theme.palette.grey[700], 0.9),
58
+ borderRadius: theme.shape.borderRadius,
59
+ color: theme.palette.common.white,
60
+ fontFamily: theme.typography.fontFamily,
61
+ padding: '4px 8px',
62
+ fontSize: theme.typography.pxToRem(12),
63
+ lineHeight: "".concat(round(14 / 10), "em"),
64
+ maxWidth: 300,
65
+ wordWrap: 'break-word'
66
+ }
67
+ };
68
+ });
69
+
70
+ var TooltipContents = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
71
+ var message = _ref.message;
72
+ return /*#__PURE__*/_react["default"].createElement("div", {
73
+ ref: ref
74
+ }, message);
75
+ });
76
+
77
+ var Tooltip = (0, _mobxReact.observer)(function (_ref2) {
78
+ var model = _ref2.model,
79
+ clientMouseCoord = _ref2.clientMouseCoord;
80
+ var classes = useStyles();
81
+ var featureUnderMouse = model.featureUnderMouse;
82
+
83
+ var _useState = (0, _react.useState)(0),
84
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
85
+ width = _useState2[0],
86
+ setWidth = _useState2[1];
87
+
88
+ var _useState3 = (0, _react.useState)(null),
89
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
90
+ popperElt = _useState4[0],
91
+ setPopperElt = _useState4[1]; // must be memoized a la https://github.com/popperjs/react-popper/issues/391
92
+
93
+
94
+ var virtElement = (0, _react.useMemo)(function () {
95
+ return {
96
+ getBoundingClientRect: function getBoundingClientRect() {
97
+ var x = clientMouseCoord[0] + width / 2 + 20;
98
+ var y = clientMouseCoord[1];
99
+ return {
100
+ top: y,
101
+ left: x,
102
+ bottom: y,
103
+ right: x,
104
+ width: 0,
105
+ height: 0,
106
+ x: x,
107
+ y: y,
108
+ toJSON: function toJSON() {}
109
+ };
110
+ }
111
+ };
112
+ }, [clientMouseCoord, width]);
113
+
114
+ var _usePopper = (0, _reactPopper.usePopper)(virtElement, popperElt),
115
+ styles = _usePopper.styles,
116
+ attributes = _usePopper.attributes;
117
+
118
+ var contents = featureUnderMouse ? (0, _configuration.getConf)(model, 'mouseover', {
119
+ feature: featureUnderMouse
120
+ }) : undefined;
121
+ return featureUnderMouse && contents ? /*#__PURE__*/_react["default"].createElement(_core.Portal, null, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
122
+ ref: setPopperElt,
123
+ className: classes.tooltip // zIndex needed to go over widget drawer
124
+ ,
125
+ style: _objectSpread(_objectSpread({}, styles.popper), {}, {
126
+ zIndex: 100000
127
+ })
128
+ }, attributes.popper), /*#__PURE__*/_react["default"].createElement(TooltipContents, {
129
+ ref: function ref(elt) {
130
+ return setWidth((elt === null || elt === void 0 ? void 0 : elt.getBoundingClientRect().width) || 0);
131
+ },
132
+ message: contents
133
+ }))) : null;
134
+ });
135
+ exports.Tooltip = Tooltip;
136
+ var BaseLinearDisplay = (0, _mobxReact.observer)(function (props) {
137
+ var classes = useStyles();
138
+ var theme = (0, _core.useTheme)();
139
+ var ref = (0, _react.useRef)(null);
140
+
141
+ var _useState5 = (0, _react.useState)(),
142
+ _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
143
+ clientRect = _useState6[0],
144
+ setClientRect = _useState6[1];
145
+
146
+ var _useState7 = (0, _react.useState)([0, 0]),
147
+ _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
148
+ offsetMouseCoord = _useState8[0],
149
+ setOffsetMouseCoord = _useState8[1];
150
+
151
+ var _useState9 = (0, _react.useState)([0, 0]),
152
+ _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
153
+ clientMouseCoord = _useState10[0],
154
+ setClientMouseCoord = _useState10[1];
155
+
156
+ var _useState11 = (0, _react.useState)(),
157
+ _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
158
+ contextCoord = _useState12[0],
159
+ setContextCoord = _useState12[1];
160
+
161
+ var model = props.model,
162
+ children = props.children;
163
+ var TooltipComponent = model.TooltipComponent,
164
+ DisplayMessageComponent = model.DisplayMessageComponent,
165
+ contextMenuItems = model.contextMenuItems,
166
+ height = model.height,
167
+ setContextMenuFeature = model.setContextMenuFeature;
168
+ return /*#__PURE__*/_react["default"].createElement("div", {
169
+ ref: ref,
170
+ "data-testid": "display-".concat((0, _configuration.getConf)(model, 'displayId')),
171
+ className: classes.display,
172
+ onContextMenu: function onContextMenu(event) {
173
+ event.preventDefault();
174
+
175
+ if (contextCoord) {
176
+ // There's already a context menu open, so close it
177
+ setContextCoord(undefined);
178
+ } else if (ref.current) {
179
+ setContextCoord([event.clientX, event.clientY]);
180
+ }
181
+ },
182
+ onMouseMove: function onMouseMove(event) {
183
+ if (!ref.current) {
184
+ return;
185
+ }
186
+
187
+ var rect = ref.current.getBoundingClientRect();
188
+ var left = rect.left,
189
+ top = rect.top;
190
+ setOffsetMouseCoord([event.clientX - left, event.clientY - top]);
191
+ setClientMouseCoord([event.clientX, event.clientY]);
192
+ setClientRect(rect);
193
+ }
194
+ }, DisplayMessageComponent ? /*#__PURE__*/_react["default"].createElement(DisplayMessageComponent, {
195
+ model: model
196
+ }) : /*#__PURE__*/_react["default"].createElement(_LinearBlocks["default"], props), children, /*#__PURE__*/_react["default"].createElement(TooltipComponent, {
197
+ model: model,
198
+ height: height,
199
+ offsetMouseCoord: offsetMouseCoord,
200
+ clientMouseCoord: clientMouseCoord,
201
+ clientRect: clientRect,
202
+ mouseCoord: offsetMouseCoord
203
+ }), /*#__PURE__*/_react["default"].createElement(_ui.Menu, {
204
+ open: Boolean(contextCoord) && Boolean(contextMenuItems().length),
205
+ onMenuItemClick: function onMenuItemClick(_, callback) {
206
+ callback();
207
+ setContextCoord(undefined);
208
+ },
209
+ onClose: function onClose() {
210
+ setContextCoord(undefined);
211
+ setContextMenuFeature(undefined);
212
+ },
213
+ TransitionProps: {
214
+ onExit: function onExit() {
215
+ setContextCoord(undefined);
216
+ setContextMenuFeature(undefined);
217
+ }
218
+ },
219
+ anchorReference: "anchorPosition",
220
+ anchorPosition: contextCoord ? {
221
+ top: contextCoord[1],
222
+ left: contextCoord[0]
223
+ } : undefined,
224
+ style: {
225
+ zIndex: theme.zIndex.tooltip
226
+ },
227
+ menuItems: contextMenuItems(),
228
+ "data-testid": "base_linear_display_context_menu"
229
+ }));
230
+ });
231
+ var _default = BaseLinearDisplay;
232
+ exports["default"] = _default;
@@ -0,0 +1,86 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.ContentBlock = void 0;
9
+ exports.ElidedBlock = ElidedBlock;
10
+ exports.InterRegionPaddingBlock = InterRegionPaddingBlock;
11
+
12
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
+
14
+ var _react = _interopRequireDefault(require("react"));
15
+
16
+ var _styles = require("@material-ui/core/styles");
17
+
18
+ var _mobxReact = require("mobx-react");
19
+
20
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
21
+
22
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
23
+
24
+ var useStyles = (0, _styles.makeStyles)(function (theme) {
25
+ return {
26
+ contentBlock: {
27
+ position: 'relative',
28
+ minHeight: '100%',
29
+ boxSizing: 'border-box',
30
+ whiteSpace: 'nowrap',
31
+ overflow: 'hidden'
32
+ },
33
+ elidedBlock: {
34
+ minHeight: '100%',
35
+ boxSizing: 'border-box',
36
+ backgroundColor: '#999',
37
+ backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)'
38
+ },
39
+ interRegionPaddingBlock: {
40
+ minHeight: '100%',
41
+ backgroundColor: theme.palette.text.primary
42
+ },
43
+ boundaryPaddingBlock: {
44
+ minHeight: '100%',
45
+ backgroundColor: theme.palette.action.disabledBackground
46
+ }
47
+ };
48
+ });
49
+ var ContentBlock = (0, _mobxReact.observer)(function (_ref) {
50
+ var block = _ref.block,
51
+ children = _ref.children;
52
+ var classes = useStyles();
53
+ var widthPx = block.widthPx;
54
+ return /*#__PURE__*/_react["default"].createElement("div", {
55
+ style: {
56
+ width: widthPx
57
+ },
58
+ className: classes.contentBlock
59
+ }, children);
60
+ });
61
+ exports.ContentBlock = ContentBlock;
62
+
63
+ function ElidedBlock(_ref2) {
64
+ var width = _ref2.width;
65
+ var classes = useStyles();
66
+ return /*#__PURE__*/_react["default"].createElement("div", {
67
+ className: classes.elidedBlock,
68
+ style: {
69
+ width: width
70
+ }
71
+ });
72
+ }
73
+
74
+ function InterRegionPaddingBlock(_ref3) {
75
+ var boundary = _ref3.boundary,
76
+ width = _ref3.width,
77
+ _ref3$style = _ref3.style,
78
+ style = _ref3$style === void 0 ? {} : _ref3$style;
79
+ var classes = useStyles();
80
+ return /*#__PURE__*/_react["default"].createElement("div", {
81
+ style: _objectSpread(_objectSpread({}, style), {}, {
82
+ width: width
83
+ }),
84
+ className: boundary ? classes.boundaryPaddingBlock : classes.interRegionPaddingBlock
85
+ });
86
+ }
@@ -0,0 +1,110 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.useStyles = exports["default"] = exports.RenderedBlocks = void 0;
9
+
10
+ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
11
+
12
+ var _react = _interopRequireDefault(require("react"));
13
+
14
+ var _styles = require("@material-ui/core/styles");
15
+
16
+ var _util = require("@jbrowse/core/util");
17
+
18
+ var _mobxReact = require("mobx-react");
19
+
20
+ var _blockTypes = require("@jbrowse/core/util/blockTypes");
21
+
22
+ var _Block = require("./Block");
23
+
24
+ var useStyles = (0, _styles.makeStyles)({
25
+ linearBlocks: {
26
+ whiteSpace: 'nowrap',
27
+ textAlign: 'left',
28
+ position: 'absolute',
29
+ minHeight: '100%',
30
+ display: 'flex'
31
+ },
32
+ heightOverflowed: {
33
+ position: 'absolute',
34
+ color: 'rgb(77,77,77)',
35
+ borderBottom: '2px solid rgb(77,77,77)',
36
+ textShadow: 'white 0px 0px 1px',
37
+ whiteSpace: 'nowrap',
38
+ width: '100%',
39
+ fontWeight: 'bold',
40
+ textAlign: 'center',
41
+ zIndex: 2000,
42
+ boxSizing: 'border-box'
43
+ }
44
+ });
45
+ exports.useStyles = useStyles;
46
+ var RenderedBlocks = (0, _mobxReact.observer)(function (_ref) {
47
+ var model = _ref.model;
48
+ var classes = useStyles();
49
+ var blockDefinitions = model.blockDefinitions,
50
+ blockState = model.blockState;
51
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, blockDefinitions.map(function (block) {
52
+ if (block instanceof _blockTypes.ContentBlock) {
53
+ var state = blockState.get(block.key);
54
+ return /*#__PURE__*/_react["default"].createElement(_Block.ContentBlock, {
55
+ block: block,
56
+ key: "".concat(model.id, "-").concat(block.key)
57
+ }, state && state.ReactComponent ? /*#__PURE__*/_react["default"].createElement(state.ReactComponent, {
58
+ model: state
59
+ }) : null, state && state.maxHeightReached ? /*#__PURE__*/_react["default"].createElement("div", {
60
+ className: classes.heightOverflowed,
61
+ style: {
62
+ top: state.layout.getTotalHeight() - 16,
63
+ pointerEvents: 'none',
64
+ height: 16
65
+ }
66
+ }, "Max height reached") : null);
67
+ }
68
+
69
+ if (block instanceof _blockTypes.ElidedBlock) {
70
+ return /*#__PURE__*/_react["default"].createElement(_Block.ElidedBlock, {
71
+ key: "".concat(model.id, "-").concat(block.key),
72
+ width: block.widthPx
73
+ });
74
+ }
75
+
76
+ if (block instanceof _blockTypes.InterRegionPaddingBlock) {
77
+ return /*#__PURE__*/_react["default"].createElement(_Block.InterRegionPaddingBlock, {
78
+ key: block.key,
79
+ width: block.widthPx,
80
+ style: {
81
+ background: 'none'
82
+ },
83
+ boundary: block.variant === 'boundary'
84
+ });
85
+ }
86
+
87
+ throw new Error("invalid block type ".concat((0, _typeof2["default"])(block)));
88
+ }));
89
+ });
90
+ exports.RenderedBlocks = RenderedBlocks;
91
+
92
+ function LinearBlocks(_ref2) {
93
+ var model = _ref2.model;
94
+ var classes = useStyles();
95
+ var blockDefinitions = model.blockDefinitions;
96
+ var viewModel = (0, _util.getContainingView)(model);
97
+ return /*#__PURE__*/_react["default"].createElement("div", {
98
+ "data-testid": "Blockset",
99
+ className: classes.linearBlocks,
100
+ style: {
101
+ left: blockDefinitions.offsetPx - viewModel.offsetPx
102
+ }
103
+ }, /*#__PURE__*/_react["default"].createElement(RenderedBlocks, {
104
+ model: model
105
+ }));
106
+ }
107
+
108
+ var _default = (0, _mobxReact.observer)(LinearBlocks);
109
+
110
+ exports["default"] = _default;
@@ -0,0 +1,192 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports["default"] = void 0;
11
+
12
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
+
14
+ var _react = _interopRequireWildcard(require("react"));
15
+
16
+ var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
17
+
18
+ var _styles = require("@material-ui/core/styles");
19
+
20
+ var _mobxReact = require("mobx-react");
21
+
22
+ var _mobxStateTree = require("mobx-state-tree");
23
+
24
+ var _tracks = require("@jbrowse/core/util/tracks");
25
+
26
+ var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
27
+
28
+ var _Refresh = _interopRequireDefault(require("@material-ui/icons/Refresh"));
29
+
30
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
31
+
32
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
33
+
34
+ var useStyles = (0, _styles.makeStyles)(function (theme) {
35
+ return {
36
+ loading: {
37
+ paddingLeft: '0.6em',
38
+ backgroundColor: theme.palette.action.disabledBackground,
39
+ backgroundImage: 'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
40
+ height: '100%',
41
+ width: '100%',
42
+ pointerEvents: 'none',
43
+ textAlign: 'center'
44
+ },
45
+ blockMessage: {
46
+ width: '100%',
47
+ background: theme.palette.action.disabledBackground,
48
+ padding: theme.spacing(2),
49
+ pointerEvents: 'none',
50
+ textAlign: 'center'
51
+ },
52
+ blockError: {
53
+ padding: theme.spacing(2),
54
+ width: '100%',
55
+ whiteSpace: 'normal',
56
+ color: theme.palette.error.main,
57
+ overflowY: 'auto'
58
+ },
59
+ blockReactNodeMessage: {
60
+ width: '100%',
61
+ background: theme.palette.action.disabledBackground,
62
+ padding: theme.spacing(2),
63
+ textAlign: 'center'
64
+ },
65
+ dots: {
66
+ '&::after': {
67
+ display: 'inline-block',
68
+ animation: '$ellipsis 1.5s infinite',
69
+ content: '"."',
70
+ width: '1em',
71
+ textAlign: 'left'
72
+ }
73
+ },
74
+ '@keyframes ellipsis': {
75
+ '0%': {
76
+ content: '"."'
77
+ },
78
+ '33%': {
79
+ content: '".."'
80
+ },
81
+ '66%': {
82
+ content: '"..."'
83
+ }
84
+ }
85
+ };
86
+ });
87
+
88
+ function Repeater(_ref) {
89
+ var children = _ref.children;
90
+ return /*#__PURE__*/_react["default"].createElement("div", {
91
+ style: {
92
+ display: 'flex'
93
+ }
94
+ }, children, children);
95
+ } // eslint-disable-next-line @typescript-eslint/no-explicit-any
96
+
97
+
98
+ var LoadingMessage = (0, _mobxReact.observer)(function (_ref2) {
99
+ var model = _ref2.model;
100
+
101
+ // only show the loading message after 300ms to prevent excessive flickering
102
+ var _useState = (0, _react.useState)(false),
103
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
104
+ shown = _useState2[0],
105
+ setShown = _useState2[1];
106
+
107
+ var classes = useStyles();
108
+ (0, _react.useEffect)(function () {
109
+ var killed = false;
110
+ var timeout = setTimeout(function () {
111
+ if (!killed) {
112
+ setShown(true);
113
+ }
114
+ }, 300);
115
+ return function () {
116
+ clearTimeout(timeout);
117
+ killed = true;
118
+ };
119
+ }, []);
120
+ var blockStatus = model.status;
121
+
122
+ var _getParent = (0, _mobxStateTree.getParent)(model, 2),
123
+ displayStatus = _getParent.message;
124
+
125
+ var status = displayStatus || blockStatus;
126
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, shown ? /*#__PURE__*/_react["default"].createElement("div", {
127
+ className: classes.loading
128
+ }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
129
+ className: classes.dots,
130
+ variant: "body2"
131
+ }, status ? "".concat(status) : 'Loading')) : null);
132
+ });
133
+
134
+ function BlockMessage(_ref3) {
135
+ var messageContent = _ref3.messageContent;
136
+ var classes = useStyles();
137
+ return /*#__PURE__*/_react["default"].isValidElement(messageContent) ? /*#__PURE__*/_react["default"].createElement("div", {
138
+ className: classes.blockReactNodeMessage
139
+ }, messageContent) : /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
140
+ variant: "body2",
141
+ className: classes.blockMessage
142
+ }, messageContent);
143
+ }
144
+
145
+ function BlockError(_ref4) {
146
+ var error = _ref4.error,
147
+ reload = _ref4.reload,
148
+ displayHeight = _ref4.displayHeight;
149
+ var classes = useStyles();
150
+ return /*#__PURE__*/_react["default"].createElement("div", {
151
+ className: classes.blockError,
152
+ style: {
153
+ height: displayHeight
154
+ }
155
+ }, reload ? /*#__PURE__*/_react["default"].createElement(_Button["default"], {
156
+ "data-testid": "reload_button",
157
+ onClick: reload,
158
+ startIcon: /*#__PURE__*/_react["default"].createElement(_Refresh["default"], null)
159
+ }, "Reload") : null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
160
+ color: "error",
161
+ variant: "body2",
162
+ display: "inline"
163
+ }, "".concat(error)));
164
+ }
165
+
166
+ var ServerSideRenderedBlockContent = (0, _mobxReact.observer)(function (_ref5) {
167
+ var model = _ref5.model;
168
+
169
+ if (model.error) {
170
+ return /*#__PURE__*/_react["default"].createElement(Repeater, null, /*#__PURE__*/_react["default"].createElement(BlockError, {
171
+ error: model.error,
172
+ reload: model.reload,
173
+ displayHeight: (0, _tracks.getParentRenderProps)(model).displayModel.height
174
+ }));
175
+ }
176
+
177
+ if (model.message) {
178
+ return /*#__PURE__*/_react["default"].createElement(Repeater, null, /*#__PURE__*/_react["default"].createElement(BlockMessage, {
179
+ messageContent: model.message
180
+ }));
181
+ }
182
+
183
+ if (!model.filled) {
184
+ return /*#__PURE__*/_react["default"].createElement(Repeater, null, /*#__PURE__*/_react["default"].createElement(LoadingMessage, {
185
+ model: model
186
+ }));
187
+ }
188
+
189
+ return model.reactElement;
190
+ });
191
+ var _default = ServerSideRenderedBlockContent;
192
+ exports["default"] = _default;
@@ -0,0 +1,41 @@
1
+ "use strict";
2
+
3
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ Object.defineProperty(exports, "BaseLinearDisplay", {
9
+ enumerable: true,
10
+ get: function get() {
11
+ return _BaseLinearDisplayModel.BaseLinearDisplay;
12
+ }
13
+ });
14
+ Object.defineProperty(exports, "BaseLinearDisplayComponent", {
15
+ enumerable: true,
16
+ get: function get() {
17
+ return _BaseLinearDisplay["default"];
18
+ }
19
+ });
20
+ Object.defineProperty(exports, "Tooltip", {
21
+ enumerable: true,
22
+ get: function get() {
23
+ return _BaseLinearDisplay.Tooltip;
24
+ }
25
+ });
26
+ Object.defineProperty(exports, "baseLinearDisplayConfigSchema", {
27
+ enumerable: true,
28
+ get: function get() {
29
+ return _baseLinearDisplayConfigSchema.baseLinearDisplayConfigSchema;
30
+ }
31
+ });
32
+
33
+ var _baseLinearDisplayConfigSchema = require("./models/baseLinearDisplayConfigSchema");
34
+
35
+ var _BaseLinearDisplayModel = require("./models/BaseLinearDisplayModel");
36
+
37
+ var _BaseLinearDisplay = _interopRequireWildcard(require("./components/BaseLinearDisplay"));
38
+
39
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
40
+
41
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }