@jbrowse/plugin-arc 2.15.0 → 2.15.2

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 (11) hide show
  1. package/dist/ArcRenderer/ArcRendering.js +15 -21
  2. package/dist/ArcTooltip.js +27 -38
  3. package/dist/LinearArcDisplay/model.d.ts +15 -15
  4. package/dist/LinearPairedArcDisplay/components/Arcs.js +3 -5
  5. package/dist/LinearPairedArcDisplay/fetchChains.js +1 -1
  6. package/esm/ArcRenderer/ArcRendering.js +15 -18
  7. package/esm/ArcTooltip.js +4 -38
  8. package/esm/LinearArcDisplay/model.d.ts +15 -15
  9. package/esm/LinearPairedArcDisplay/components/Arcs.js +4 -3
  10. package/esm/LinearPairedArcDisplay/fetchChains.js +2 -2
  11. package/package.json +2 -2
package/dist/ArcRenderer/ArcRendering.js CHANGED
@@ -22,29 +22,24 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
- var __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
28
25
  Object.defineProperty(exports, "__esModule", { value: true });
29
26
  const react_1 = __importStar(require("react"));
30
27
  const configuration_1 = require("@jbrowse/core/configuration");
31
28
  const util_1 = require("@jbrowse/core/util");
32
29
  const mobx_react_1 = require("mobx-react");
33
30
  // locals
34
- const ArcTooltip_1 = __importDefault(require("../ArcTooltip"));
35
- function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, feature, }) {
31
+ const ArcTooltip = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../ArcTooltip'))));
32
+ function Arc({ selectedFeatureId, region, bpPerPx, config, height: displayHeight, feature, onFeatureClick, }) {
36
33
  const [isMouseOvered, setIsMouseOvered] = (0, react_1.useState)(false);
37
34
  const [left, right] = (0, util_1.bpSpanPx)(feature.get('start'), feature.get('end'), region, bpPerPx);
38
35
  const featureId = feature.id();
39
- let stroke = (0, configuration_1.readConfObject)(config, 'color', { feature });
40
- let textStroke = 'black';
41
- if (selectedFeatureId && String(selectedFeatureId) === String(feature.id())) {
42
- stroke = textStroke = 'red';
43
- }
36
+ const selected = selectedFeatureId && String(selectedFeatureId) === String(feature.id());
37
+ const stroke = selected ? 'red' : (0, configuration_1.readConfObject)(config, 'color', { feature });
38
+ const textStroke = selected ? 'red' : 'black';
44
39
  const label = (0, configuration_1.readConfObject)(config, 'label', { feature });
45
40
  const caption = (0, configuration_1.readConfObject)(config, 'caption', { feature });
46
- const strokeWidth = (0, configuration_1.readConfObject)(config, 'thickness', { feature }) || 1;
47
- const height = (0, configuration_1.readConfObject)(config, 'height', { feature }) || 100;
41
+ const strokeWidth = (0, configuration_1.readConfObject)(config, 'thickness', { feature }) || 2;
42
+ const height = Math.min((0, configuration_1.readConfObject)(config, 'height', { feature }) || 100, displayHeight);
48
43
  const ref = react_1.default.createRef();
49
44
  // formula: https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B%C3%A9zier_curves
50
45
  const t = 0.5;
@@ -58,7 +53,8 @@ function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, featu
58
53
  }, onMouseLeave: () => {
59
54
  setIsMouseOvered(false);
60
55
  }, pointerEvents: "stroke" }),
61
- isMouseOvered ? react_1.default.createElement(ArcTooltip_1.default, { contents: caption }) : null,
56
+ isMouseOvered ? (react_1.default.createElement(react_1.Suspense, { fallback: null },
57
+ react_1.default.createElement(ArcTooltip, { contents: caption }))) : null,
62
58
  react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
63
59
  react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
64
60
  }
@@ -91,14 +87,12 @@ function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClic
91
87
  const [isMouseOvered, setIsMouseOvered] = (0, react_1.useState)(false);
92
88
  const [left, right] = (0, util_1.bpSpanPx)(feature.get('start'), feature.get('end'), region, bpPerPx);
93
89
  const featureId = feature.id();
94
- let stroke = (0, configuration_1.readConfObject)(config, 'color', { feature });
95
- let textStroke = 'black';
96
- if (selectedFeatureId && String(selectedFeatureId) === String(feature.id())) {
97
- stroke = textStroke = 'red';
98
- }
90
+ const selected = selectedFeatureId && String(selectedFeatureId) === String(feature.id());
91
+ const stroke = selected ? 'red' : (0, configuration_1.readConfObject)(config, 'color', { feature });
92
+ const textStroke = selected ? 'red' : 'black';
99
93
  const label = (0, configuration_1.readConfObject)(config, 'label', { feature });
100
94
  const caption = (0, configuration_1.readConfObject)(config, 'caption', { feature });
101
- const strokeWidth = (0, configuration_1.readConfObject)(config, 'thickness', { feature }) || 1;
95
+ const strokeWidth = (0, configuration_1.readConfObject)(config, 'thickness', { feature }) || 2;
102
96
  const ref = react_1.default.createRef();
103
97
  const textYCoord = (right - left) / 2;
104
98
  return (react_1.default.createElement("g", null,
@@ -109,7 +103,7 @@ function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClic
109
103
  }, onMouseLeave: () => {
110
104
  setIsMouseOvered(false);
111
105
  }, ref: ref, pointerEvents: "stroke" }),
112
- isMouseOvered ? react_1.default.createElement(ArcTooltip_1.default, { contents: caption }) : null,
106
+ isMouseOvered ? react_1.default.createElement(ArcTooltip, { contents: caption }) : null,
113
107
  react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
114
108
  react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
115
109
  }
@@ -118,7 +112,7 @@ const ArcRendering = (0, mobx_react_1.observer)(function ({ features, config, re
118
112
  const width = (region.end - region.start) / bpPerPx;
119
113
  const semicircles = (0, configuration_1.readConfObject)(config, 'displayMode') === 'semicircles';
120
114
  const { selectedFeatureId } = displayModel || {};
121
- return (react_1.default.createElement(Wrapper, { exportSVG: exportSVG, width: width, height: height }, [...features.values()].map(f => semicircles ? (react_1.default.createElement(SemiCircles, { key: f.id(), config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f })) : (react_1.default.createElement(Arc, { key: f.id(), config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f })))));
115
+ return (react_1.default.createElement(Wrapper, { exportSVG: exportSVG, width: width, height: height }, [...features.values()].map(f => semicircles ? (react_1.default.createElement(SemiCircles, { key: f.id(), config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f })) : (react_1.default.createElement(Arc, { key: f.id(), height: height, config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f })))));
122
116
  });
123
117
  function Wrapper({ exportSVG, width, height, children, }) {
124
118
  return exportSVG ? (children) : (react_1.default.createElement("svg", { width: width, height: height }, children));
package/dist/ArcTooltip.js CHANGED
@@ -1,52 +1,41 @@
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;
24
+ };
2
25
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
27
  };
5
28
  Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
29
+ const react_1 = __importStar(require("react"));
7
30
  const ui_1 = require("@jbrowse/core/ui");
8
31
  const mobx_react_1 = require("mobx-react");
9
- const material_1 = require("@mui/material");
10
- const mui_1 = require("tss-react/mui");
11
- const react_2 = require("@floating-ui/react");
12
- function round(value) {
13
- return Math.round(value * 1e5) / 1e5;
14
- }
15
- const useStyles = (0, mui_1.makeStyles)()(theme => ({
16
- // these styles come from
17
- // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
18
- tooltip: {
19
- pointerEvents: 'none',
20
- backgroundColor: (0, material_1.alpha)(theme.palette.grey[700], 0.9),
21
- borderRadius: theme.shape.borderRadius,
22
- color: theme.palette.common.white,
23
- fontFamily: theme.typography.fontFamily,
24
- padding: '4px 8px',
25
- fontSize: theme.typography.pxToRem(12),
26
- lineHeight: `${round(14 / 10)}em`,
27
- maxWidth: 300,
28
- wordWrap: 'break-word',
29
- },
30
- }));
32
+ const BaseTooltip_1 = __importDefault(require("@jbrowse/core/ui/BaseTooltip"));
31
33
  const TooltipContents = react_1.default.forwardRef(function TooltipContents2({ message }, ref) {
32
34
  return (react_1.default.createElement("div", { ref: ref }, react_1.default.isValidElement(message) ? (message) : message ? (react_1.default.createElement(ui_1.SanitizedHTML, { html: String(message) })) : null));
33
35
  });
34
36
  const ArcTooltip = (0, mobx_react_1.observer)(function ({ contents }) {
35
- var _a, _b;
36
- const { theme, classes } = useStyles();
37
- const { refs, floatingStyles, context } = (0, react_2.useFloating)({
38
- placement: 'right',
39
- strategy: 'fixed',
40
- });
41
- const clientPoint = (0, react_2.useClientPoint)(context);
42
- const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
43
- const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
44
- return contents ? (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 },
45
- react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
46
- ...floatingStyles,
47
- zIndex: 100000,
48
- pointerEvents: 'none',
49
- }, ...getFloatingProps() },
37
+ return contents ? (react_1.default.createElement(react_1.Suspense, { fallback: null },
38
+ react_1.default.createElement(BaseTooltip_1.default, null,
50
39
  react_1.default.createElement(TooltipContents, { message: contents })))) : null;
51
40
  });
52
41
  exports.default = ArcTooltip;
package/dist/LinearArcDisplay/model.d.ts CHANGED
@@ -32,7 +32,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
32
32
  }, {
33
33
  renderInProgress: AbortController | undefined;
34
34
  filled: boolean;
35
- reactElement: import("react").ReactElement | undefined;
35
+ reactElement: React.ReactElement | undefined;
36
36
  features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
37
37
  layout: any;
38
38
  status: string;
@@ -43,10 +43,10 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
43
43
  model: {
44
44
  error?: unknown;
45
45
  reload: () => void;
46
- message: import("react").ReactNode;
46
+ message: React.ReactNode;
47
47
  filled?: boolean;
48
48
  status?: string;
49
- reactElement?: import("react").ReactElement;
49
+ reactElement?: React.ReactElement;
50
50
  };
51
51
  }) => import("react").JSX.Element | undefined;
52
52
  renderProps: any;
@@ -57,7 +57,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
57
57
  setLoading(abortController: AbortController): void;
58
58
  setMessage(messageText: string): void;
59
59
  setRendered(props: {
60
- reactElement: import("react").ReactElement;
60
+ reactElement: React.ReactElement;
61
61
  features: Map<string, import("@jbrowse/core/util").Feature>;
62
62
  layout: any;
63
63
  maxHeightReached: boolean;
@@ -113,7 +113,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
113
113
  error: unknown;
114
114
  message: string | undefined;
115
115
  } & {
116
- readonly RenderingComponent: import("react").FC<{
116
+ readonly RenderingComponent: React.FC<{
117
117
  model: {
118
118
  id: string;
119
119
  type: string;
@@ -136,7 +136,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
136
136
  onHorizontalScroll?: () => void;
137
137
  blockState?: Record<string, any>;
138
138
  }>;
139
- readonly DisplayBlurb: import("react").FC<{
139
+ readonly DisplayBlurb: React.FC<{
140
140
  model: {
141
141
  id: string;
142
142
  type: string;
@@ -159,7 +159,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
159
159
  readonly parentTrack: any;
160
160
  renderProps(): any;
161
161
  readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
162
- readonly DisplayMessageComponent: undefined | import("react").FC<any>;
162
+ readonly DisplayMessageComponent: undefined | React.FC<any>;
163
163
  trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
164
164
  readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
165
165
  regionCannotBeRendered(): null;
@@ -205,13 +205,13 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
205
205
  featureIdUnderMouse: undefined | string;
206
206
  contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
207
207
  } & {
208
+ readonly DisplayMessageComponent: import("react").FC<any> | undefined;
208
209
  readonly blockType: "dynamicBlocks" | "staticBlocks";
209
210
  readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
210
211
  } & {
211
212
  readonly renderDelay: number;
212
- readonly TooltipComponent: import("react").FC<any>;
213
+ readonly TooltipComponent: import("@jbrowse/core/util").AnyReactComponentType;
213
214
  readonly selectedFeatureId: string | undefined;
214
- readonly DisplayMessageComponent: undefined | import("react").FC<any>;
215
215
  } & {
216
216
  readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
217
217
  readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
@@ -321,7 +321,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
321
321
  }, {
322
322
  renderInProgress: AbortController | undefined;
323
323
  filled: boolean;
324
- reactElement: import("react").ReactElement | undefined;
324
+ reactElement: React.ReactElement | undefined;
325
325
  features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
326
326
  layout: any;
327
327
  status: string;
@@ -332,10 +332,10 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
332
332
  model: {
333
333
  error?: unknown;
334
334
  reload: () => void;
335
- message: import("react").ReactNode;
335
+ message: React.ReactNode;
336
336
  filled?: boolean;
337
337
  status?: string;
338
- reactElement?: import("react").ReactElement;
338
+ reactElement?: React.ReactElement;
339
339
  };
340
340
  }) => import("react").JSX.Element | undefined;
341
341
  renderProps: any;
@@ -346,7 +346,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
346
346
  setLoading(abortController: AbortController): void;
347
347
  setMessage(messageText: string): void;
348
348
  setRendered(props: {
349
- reactElement: import("react").ReactElement;
349
+ reactElement: React.ReactElement;
350
350
  features: Map<string, import("@jbrowse/core/util").Feature>;
351
351
  layout: any;
352
352
  maxHeightReached: boolean;
@@ -385,11 +385,11 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
385
385
  };
386
386
  }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
387
387
  }>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, {
388
- id: string;
389
388
  type: string;
389
+ id: string;
390
390
  configuration: import("mobx-state-tree").ModelSnapshotType<Record<string, any>>;
391
- rpcDriverName: string | undefined;
392
391
  heightPreConfig: number | undefined;
392
+ rpcDriverName: string | undefined;
393
393
  userBpPerPxLimit: number | undefined;
394
394
  userByteSizeLimit: number | undefined;
395
395
  } & import("mobx-state-tree")._NotCustomized>;
package/dist/LinearPairedArcDisplay/components/Arcs.js CHANGED
@@ -22,16 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
- var __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
28
25
  Object.defineProperty(exports, "__esModule", { value: true });
29
26
  const react_1 = __importStar(require("react"));
30
27
  const mobx_react_1 = require("mobx-react");
31
28
  const util_1 = require("@jbrowse/core/util");
32
29
  const configuration_1 = require("@jbrowse/core/configuration");
33
- const ArcTooltip_1 = __importDefault(require("../../ArcTooltip"));
34
30
  const util_2 = require("./util");
31
+ const ArcTooltip = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../../ArcTooltip'))));
35
32
  const Arc = (0, mobx_react_1.observer)(function ({ model, feature, alt, assembly, view, }) {
36
33
  var _a, _b;
37
34
  const [mouseOvered, setMouseOvered] = (0, react_1.useState)(false);
@@ -77,7 +74,8 @@ const Arc = (0, mobx_react_1.observer)(function ({ model, feature, alt, assembly
77
74
  }, onClick: () => {
78
75
  model.selectFeature(feature);
79
76
  }, x1: right, x2: right + k2.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null,
80
- mouseOvered ? (react_1.default.createElement(ArcTooltip_1.default, { contents: (0, util_2.makeSummary)(feature, alt) })) : null)) : null;
77
+ mouseOvered ? (react_1.default.createElement(react_1.Suspense, { fallback: null },
78
+ react_1.default.createElement(ArcTooltip, { contents: (0, util_2.makeSummary)(feature, alt) }))) : null)) : null;
81
79
  }
82
80
  return null;
83
81
  });
package/dist/LinearPairedArcDisplay/fetchChains.js CHANGED
@@ -16,6 +16,6 @@ async function fetchChains(self) {
16
16
  regions: view.staticBlocks.contentBlocks,
17
17
  adapterConfig: self.adapterConfig,
18
18
  }));
19
- self.setFeatures(ret);
19
+ self.setFeatures((0, util_1.dedupe)(ret, r => r.id()));
20
20
  self.setLoading(false);
21
21
  }
package/esm/ArcRenderer/ArcRendering.js CHANGED
@@ -1,22 +1,20 @@
1
- import React, { useState } from 'react';
1
+ import React, { lazy, Suspense, useState } from 'react';
2
2
  import { readConfObject, } from '@jbrowse/core/configuration';
3
3
  import { bpSpanPx, getStrokeProps } from '@jbrowse/core/util';
4
4
  import { observer } from 'mobx-react';
5
5
  // locals
6
- import ArcTooltip from '../ArcTooltip';
7
- function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, feature, }) {
6
+ const ArcTooltip = lazy(() => import('../ArcTooltip'));
7
+ function Arc({ selectedFeatureId, region, bpPerPx, config, height: displayHeight, feature, onFeatureClick, }) {
8
8
  const [isMouseOvered, setIsMouseOvered] = useState(false);
9
9
  const [left, right] = bpSpanPx(feature.get('start'), feature.get('end'), region, bpPerPx);
10
10
  const featureId = feature.id();
11
- let stroke = readConfObject(config, 'color', { feature });
12
- let textStroke = 'black';
13
- if (selectedFeatureId && String(selectedFeatureId) === String(feature.id())) {
14
- stroke = textStroke = 'red';
15
- }
11
+ const selected = selectedFeatureId && String(selectedFeatureId) === String(feature.id());
12
+ const stroke = selected ? 'red' : readConfObject(config, 'color', { feature });
13
+ const textStroke = selected ? 'red' : 'black';
16
14
  const label = readConfObject(config, 'label', { feature });
17
15
  const caption = readConfObject(config, 'caption', { feature });
18
- const strokeWidth = readConfObject(config, 'thickness', { feature }) || 1;
19
- const height = readConfObject(config, 'height', { feature }) || 100;
16
+ const strokeWidth = readConfObject(config, 'thickness', { feature }) || 2;
17
+ const height = Math.min(readConfObject(config, 'height', { feature }) || 100, displayHeight);
20
18
  const ref = React.createRef();
21
19
  // formula: https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B%C3%A9zier_curves
22
20
  const t = 0.5;
@@ -30,7 +28,8 @@ function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, featu
30
28
  }, onMouseLeave: () => {
31
29
  setIsMouseOvered(false);
32
30
  }, pointerEvents: "stroke" }),
33
- isMouseOvered ? React.createElement(ArcTooltip, { contents: caption }) : null,
31
+ isMouseOvered ? (React.createElement(Suspense, { fallback: null },
32
+ React.createElement(ArcTooltip, { contents: caption }))) : null,
34
33
  React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
35
34
  React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
36
35
  }
@@ -63,14 +62,12 @@ function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClic
63
62
  const [isMouseOvered, setIsMouseOvered] = useState(false);
64
63
  const [left, right] = bpSpanPx(feature.get('start'), feature.get('end'), region, bpPerPx);
65
64
  const featureId = feature.id();
66
- let stroke = readConfObject(config, 'color', { feature });
67
- let textStroke = 'black';
68
- if (selectedFeatureId && String(selectedFeatureId) === String(feature.id())) {
69
- stroke = textStroke = 'red';
70
- }
65
+ const selected = selectedFeatureId && String(selectedFeatureId) === String(feature.id());
66
+ const stroke = selected ? 'red' : readConfObject(config, 'color', { feature });
67
+ const textStroke = selected ? 'red' : 'black';
71
68
  const label = readConfObject(config, 'label', { feature });
72
69
  const caption = readConfObject(config, 'caption', { feature });
73
- const strokeWidth = readConfObject(config, 'thickness', { feature }) || 1;
70
+ const strokeWidth = readConfObject(config, 'thickness', { feature }) || 2;
74
71
  const ref = React.createRef();
75
72
  const textYCoord = (right - left) / 2;
76
73
  return (React.createElement("g", null,
@@ -90,7 +87,7 @@ const ArcRendering = observer(function ({ features, config, regions, bpPerPx, he
90
87
  const width = (region.end - region.start) / bpPerPx;
91
88
  const semicircles = readConfObject(config, 'displayMode') === 'semicircles';
92
89
  const { selectedFeatureId } = displayModel || {};
93
- return (React.createElement(Wrapper, { exportSVG: exportSVG, width: width, height: height }, [...features.values()].map(f => semicircles ? (React.createElement(SemiCircles, { key: f.id(), config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f })) : (React.createElement(Arc, { key: f.id(), config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f })))));
90
+ return (React.createElement(Wrapper, { exportSVG: exportSVG, width: width, height: height }, [...features.values()].map(f => semicircles ? (React.createElement(SemiCircles, { key: f.id(), config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f })) : (React.createElement(Arc, { key: f.id(), height: height, config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f })))));
94
91
  });
95
92
  function Wrapper({ exportSVG, width, height, children, }) {
96
93
  return exportSVG ? (children) : (React.createElement("svg", { width: width, height: height }, children));
package/esm/ArcTooltip.js CHANGED
@@ -1,47 +1,13 @@
1
- import React from 'react';
1
+ import React, { Suspense } from 'react';
2
2
  import { SanitizedHTML } from '@jbrowse/core/ui';
3
3
  import { observer } from 'mobx-react';
4
- import { Portal, alpha } from '@mui/material';
5
- import { makeStyles } from 'tss-react/mui';
6
- import { useClientPoint, useFloating, useInteractions, } from '@floating-ui/react';
7
- function round(value) {
8
- return Math.round(value * 1e5) / 1e5;
9
- }
10
- const useStyles = makeStyles()(theme => ({
11
- // these styles come from
12
- // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
13
- tooltip: {
14
- pointerEvents: 'none',
15
- backgroundColor: alpha(theme.palette.grey[700], 0.9),
16
- borderRadius: theme.shape.borderRadius,
17
- color: theme.palette.common.white,
18
- fontFamily: theme.typography.fontFamily,
19
- padding: '4px 8px',
20
- fontSize: theme.typography.pxToRem(12),
21
- lineHeight: `${round(14 / 10)}em`,
22
- maxWidth: 300,
23
- wordWrap: 'break-word',
24
- },
25
- }));
4
+ import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
26
5
  const TooltipContents = React.forwardRef(function TooltipContents2({ message }, ref) {
27
6
  return (React.createElement("div", { ref: ref }, React.isValidElement(message) ? (message) : message ? (React.createElement(SanitizedHTML, { html: String(message) })) : null));
28
7
  });
29
8
  const ArcTooltip = observer(function ({ contents }) {
30
- var _a, _b;
31
- const { theme, classes } = useStyles();
32
- const { refs, floatingStyles, context } = useFloating({
33
- placement: 'right',
34
- strategy: 'fixed',
35
- });
36
- const clientPoint = useClientPoint(context);
37
- const { getFloatingProps } = useInteractions([clientPoint]);
38
- const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
39
- return contents ? (React.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
40
- React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
41
- ...floatingStyles,
42
- zIndex: 100000,
43
- pointerEvents: 'none',
44
- }, ...getFloatingProps() },
9
+ return contents ? (React.createElement(Suspense, { fallback: null },
10
+ React.createElement(BaseTooltip, null,
45
11
  React.createElement(TooltipContents, { message: contents })))) : null;
46
12
  });
47
13
  export default ArcTooltip;
package/esm/LinearArcDisplay/model.d.ts CHANGED
@@ -32,7 +32,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
32
32
  }, {
33
33
  renderInProgress: AbortController | undefined;
34
34
  filled: boolean;
35
- reactElement: import("react").ReactElement | undefined;
35
+ reactElement: React.ReactElement | undefined;
36
36
  features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
37
37
  layout: any;
38
38
  status: string;
@@ -43,10 +43,10 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
43
43
  model: {
44
44
  error?: unknown;
45
45
  reload: () => void;
46
- message: import("react").ReactNode;
46
+ message: React.ReactNode;
47
47
  filled?: boolean;
48
48
  status?: string;
49
- reactElement?: import("react").ReactElement;
49
+ reactElement?: React.ReactElement;
50
50
  };
51
51
  }) => import("react").JSX.Element | undefined;
52
52
  renderProps: any;
@@ -57,7 +57,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
57
57
  setLoading(abortController: AbortController): void;
58
58
  setMessage(messageText: string): void;
59
59
  setRendered(props: {
60
- reactElement: import("react").ReactElement;
60
+ reactElement: React.ReactElement;
61
61
  features: Map<string, import("@jbrowse/core/util").Feature>;
62
62
  layout: any;
63
63
  maxHeightReached: boolean;
@@ -113,7 +113,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
113
113
  error: unknown;
114
114
  message: string | undefined;
115
115
  } & {
116
- readonly RenderingComponent: import("react").FC<{
116
+ readonly RenderingComponent: React.FC<{
117
117
  model: {
118
118
  id: string;
119
119
  type: string;
@@ -136,7 +136,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
136
136
  onHorizontalScroll?: () => void;
137
137
  blockState?: Record<string, any>;
138
138
  }>;
139
- readonly DisplayBlurb: import("react").FC<{
139
+ readonly DisplayBlurb: React.FC<{
140
140
  model: {
141
141
  id: string;
142
142
  type: string;
@@ -159,7 +159,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
159
159
  readonly parentTrack: any;
160
160
  renderProps(): any;
161
161
  readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
162
- readonly DisplayMessageComponent: undefined | import("react").FC<any>;
162
+ readonly DisplayMessageComponent: undefined | React.FC<any>;
163
163
  trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
164
164
  readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
165
165
  regionCannotBeRendered(): null;
@@ -205,13 +205,13 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
205
205
  featureIdUnderMouse: undefined | string;
206
206
  contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
207
207
  } & {
208
+ readonly DisplayMessageComponent: import("react").FC<any> | undefined;
208
209
  readonly blockType: "dynamicBlocks" | "staticBlocks";
209
210
  readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
210
211
  } & {
211
212
  readonly renderDelay: number;
212
- readonly TooltipComponent: import("react").FC<any>;
213
+ readonly TooltipComponent: import("@jbrowse/core/util").AnyReactComponentType;
213
214
  readonly selectedFeatureId: string | undefined;
214
- readonly DisplayMessageComponent: undefined | import("react").FC<any>;
215
215
  } & {
216
216
  readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
217
217
  readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
@@ -321,7 +321,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
321
321
  }, {
322
322
  renderInProgress: AbortController | undefined;
323
323
  filled: boolean;
324
- reactElement: import("react").ReactElement | undefined;
324
+ reactElement: React.ReactElement | undefined;
325
325
  features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
326
326
  layout: any;
327
327
  status: string;
@@ -332,10 +332,10 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
332
332
  model: {
333
333
  error?: unknown;
334
334
  reload: () => void;
335
- message: import("react").ReactNode;
335
+ message: React.ReactNode;
336
336
  filled?: boolean;
337
337
  status?: string;
338
- reactElement?: import("react").ReactElement;
338
+ reactElement?: React.ReactElement;
339
339
  };
340
340
  }) => import("react").JSX.Element | undefined;
341
341
  renderProps: any;
@@ -346,7 +346,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
346
346
  setLoading(abortController: AbortController): void;
347
347
  setMessage(messageText: string): void;
348
348
  setRendered(props: {
349
- reactElement: import("react").ReactElement;
349
+ reactElement: React.ReactElement;
350
350
  features: Map<string, import("@jbrowse/core/util").Feature>;
351
351
  layout: any;
352
352
  maxHeightReached: boolean;
@@ -385,11 +385,11 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
385
385
  };
386
386
  }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
387
387
  }>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, {
388
- id: string;
389
388
  type: string;
389
+ id: string;
390
390
  configuration: import("mobx-state-tree").ModelSnapshotType<Record<string, any>>;
391
- rpcDriverName: string | undefined;
392
391
  heightPreConfig: number | undefined;
392
+ rpcDriverName: string | undefined;
393
393
  userBpPerPxLimit: number | undefined;
394
394
  userByteSizeLimit: number | undefined;
395
395
  } & import("mobx-state-tree")._NotCustomized>;
package/esm/LinearPairedArcDisplay/components/Arcs.js CHANGED
@@ -1,9 +1,9 @@
1
- import React, { useRef, useState } from 'react';
1
+ import React, { lazy, Suspense, useRef, useState } from 'react';
2
2
  import { observer } from 'mobx-react';
3
3
  import { getContainingView, getSession, getStrokeProps, } from '@jbrowse/core/util';
4
4
  import { getConf } from '@jbrowse/core/configuration';
5
- import ArcTooltip from '../../ArcTooltip';
6
5
  import { makeFeaturePair, makeSummary } from './util';
6
+ const ArcTooltip = lazy(() => import('../../ArcTooltip'));
7
7
  const Arc = observer(function ({ model, feature, alt, assembly, view, }) {
8
8
  var _a, _b;
9
9
  const [mouseOvered, setMouseOvered] = useState(false);
@@ -49,7 +49,8 @@ const Arc = observer(function ({ model, feature, alt, assembly, view, }) {
49
49
  }, onClick: () => {
50
50
  model.selectFeature(feature);
51
51
  }, x1: right, x2: right + k2.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null,
52
- mouseOvered ? (React.createElement(ArcTooltip, { contents: makeSummary(feature, alt) })) : null)) : null;
52
+ mouseOvered ? (React.createElement(Suspense, { fallback: null },
53
+ React.createElement(ArcTooltip, { contents: makeSummary(feature, alt) }))) : null)) : null;
53
54
  }
54
55
  return null;
55
56
  });
package/esm/LinearPairedArcDisplay/fetchChains.js CHANGED
@@ -1,4 +1,4 @@
1
- import { getContainingTrack, getContainingView, getSession, } from '@jbrowse/core/util';
1
+ import { dedupe, getContainingTrack, getContainingView, getSession, } from '@jbrowse/core/util';
2
2
  export async function fetchChains(self) {
3
3
  // @ts-expect-error
4
4
  const { rpcSessionId: sessionId } = getContainingTrack(self);
@@ -13,6 +13,6 @@ export async function fetchChains(self) {
13
13
  regions: view.staticBlocks.contentBlocks,
14
14
  adapterConfig: self.adapterConfig,
15
15
  }));
16
- self.setFeatures(ret);
16
+ self.setFeatures(dedupe(ret, r => r.id()));
17
17
  self.setLoading(false);
18
18
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jbrowse/plugin-arc",
3
- "version": "2.15.0",
3
+ "version": "2.15.2",
4
4
  "description": "JBrowse 2 arc adapters, tracks, etc.",
5
5
  "keywords": [
6
6
  "jbrowse",
@@ -53,5 +53,5 @@
53
53
  "publishConfig": {
54
54
  "access": "public"
55
55
  },
56
- "gitHead": "87eeb1fbf8311dbf88d5e75b5a265f03beffdda8"
56
+ "gitHead": "8a58cefbfe39af4c97bcb6ead354d72c9fef9224"
57
57
  }