@jbrowse/plugin-arc 2.17.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/dist/ArcRenderer/ArcRendering.d.ts +3 -4
  2. package/dist/ArcRenderer/ArcRendering.js +37 -37
  3. package/dist/ArcRenderer/configSchema.d.ts +0 -18
  4. package/dist/ArcRenderer/configSchema.js +1 -22
  5. package/dist/ArcRenderer/index.d.ts +1 -1
  6. package/dist/ArcRenderer/index.js +1 -1
  7. package/dist/ArcTooltip.d.ts +1 -2
  8. package/dist/ArcTooltip.js +6 -30
  9. package/dist/LinearArcDisplay/configSchema.d.ts +1 -7
  10. package/dist/LinearArcDisplay/configSchema.js +1 -10
  11. package/dist/LinearArcDisplay/index.d.ts +1 -1
  12. package/dist/LinearArcDisplay/model.d.ts +18 -87
  13. package/dist/LinearArcDisplay/model.js +2 -40
  14. package/dist/LinearPairedArcDisplay/afterAttach.d.ts +1 -1
  15. package/dist/LinearPairedArcDisplay/afterAttach.js +1 -1
  16. package/dist/LinearPairedArcDisplay/components/Arcs.d.ts +2 -3
  17. package/dist/LinearPairedArcDisplay/components/Arcs.js +46 -40
  18. package/dist/LinearPairedArcDisplay/components/BaseDisplayComponent.d.ts +2 -3
  19. package/dist/LinearPairedArcDisplay/components/BaseDisplayComponent.js +33 -32
  20. package/dist/LinearPairedArcDisplay/components/ReactComponent.d.ts +2 -3
  21. package/dist/LinearPairedArcDisplay/components/ReactComponent.js +3 -4
  22. package/dist/LinearPairedArcDisplay/components/util.d.ts +1 -1
  23. package/dist/LinearPairedArcDisplay/components/util.js +1 -7
  24. package/dist/LinearPairedArcDisplay/configSchema.d.ts +0 -6
  25. package/dist/LinearPairedArcDisplay/configSchema.js +0 -9
  26. package/dist/LinearPairedArcDisplay/fetchChains.d.ts +1 -1
  27. package/dist/LinearPairedArcDisplay/fetchChains.js +1 -2
  28. package/dist/LinearPairedArcDisplay/index.d.ts +1 -1
  29. package/dist/LinearPairedArcDisplay/index.js +18 -8
  30. package/dist/LinearPairedArcDisplay/model.d.ts +9 -53
  31. package/dist/LinearPairedArcDisplay/model.js +19 -48
  32. package/dist/LinearPairedArcDisplay/renderSvg.d.ts +2 -3
  33. package/dist/LinearPairedArcDisplay/renderSvg.js +2 -7
  34. package/dist/LinearPairedArcDisplay/util.d.ts +4 -4
  35. package/dist/LinearPairedArcDisplay/util.js +3 -14
  36. package/dist/index.d.ts +1 -1
  37. package/dist/index.js +3 -3
  38. package/esm/ArcRenderer/ArcRendering.d.ts +3 -4
  39. package/esm/ArcRenderer/ArcRendering.js +21 -31
  40. package/esm/ArcRenderer/configSchema.d.ts +0 -18
  41. package/esm/ArcRenderer/configSchema.js +1 -22
  42. package/esm/ArcRenderer/index.d.ts +1 -1
  43. package/esm/ArcRenderer/index.js +1 -1
  44. package/esm/ArcTooltip.d.ts +1 -2
  45. package/esm/ArcTooltip.js +6 -7
  46. package/esm/LinearArcDisplay/configSchema.d.ts +1 -7
  47. package/esm/LinearArcDisplay/configSchema.js +1 -10
  48. package/esm/LinearArcDisplay/index.d.ts +1 -1
  49. package/esm/LinearArcDisplay/model.d.ts +18 -87
  50. package/esm/LinearArcDisplay/model.js +3 -41
  51. package/esm/LinearPairedArcDisplay/afterAttach.d.ts +1 -1
  52. package/esm/LinearPairedArcDisplay/afterAttach.js +1 -1
  53. package/esm/LinearPairedArcDisplay/components/Arcs.d.ts +2 -3
  54. package/esm/LinearPairedArcDisplay/components/Arcs.js +29 -33
  55. package/esm/LinearPairedArcDisplay/components/BaseDisplayComponent.d.ts +2 -3
  56. package/esm/LinearPairedArcDisplay/components/BaseDisplayComponent.js +16 -25
  57. package/esm/LinearPairedArcDisplay/components/ReactComponent.d.ts +2 -3
  58. package/esm/LinearPairedArcDisplay/components/ReactComponent.js +3 -4
  59. package/esm/LinearPairedArcDisplay/components/util.d.ts +1 -1
  60. package/esm/LinearPairedArcDisplay/components/util.js +1 -7
  61. package/esm/LinearPairedArcDisplay/configSchema.d.ts +0 -6
  62. package/esm/LinearPairedArcDisplay/configSchema.js +0 -9
  63. package/esm/LinearPairedArcDisplay/fetchChains.d.ts +1 -1
  64. package/esm/LinearPairedArcDisplay/fetchChains.js +1 -2
  65. package/esm/LinearPairedArcDisplay/index.d.ts +1 -1
  66. package/esm/LinearPairedArcDisplay/index.js +1 -1
  67. package/esm/LinearPairedArcDisplay/model.d.ts +9 -53
  68. package/esm/LinearPairedArcDisplay/model.js +3 -42
  69. package/esm/LinearPairedArcDisplay/renderSvg.d.ts +2 -3
  70. package/esm/LinearPairedArcDisplay/renderSvg.js +2 -7
  71. package/esm/LinearPairedArcDisplay/util.d.ts +4 -4
  72. package/esm/LinearPairedArcDisplay/util.js +3 -14
  73. package/esm/index.d.ts +1 -1
  74. package/esm/index.js +3 -3
  75. package/package.json +2 -2
@@ -15,44 +15,35 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
15
15
  }) : function(o, v) {
16
16
  o["default"] = v;
17
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
- };
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
25
35
  Object.defineProperty(exports, "__esModule", { value: true });
26
36
  exports.stateModelFactory = stateModelFactory;
27
37
  const configuration_1 = require("@jbrowse/core/configuration");
28
- const mobx_state_tree_1 = require("mobx-state-tree");
29
- const util_1 = require("@jbrowse/core/util");
30
38
  const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
39
+ const util_1 = require("@jbrowse/core/util");
31
40
  const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
32
- /**
33
- * #stateModel LinearPairedArcDisplay
34
- * this is a non-block-based track type, and can connect arcs across multiple
35
- * displayedRegions
36
- *
37
- * extends
38
- * - [BaseDisplay](../basedisplay)
39
- * - [TrackHeightMixin](../trackheightmixin)
40
- * - [FeatureDensityMixin](../featuredensitymixin)
41
- */
41
+ const mobx_state_tree_1 = require("mobx-state-tree");
42
42
  function stateModelFactory(configSchema) {
43
43
  return mobx_state_tree_1.types
44
44
  .compose('LinearPairedArcDisplay', pluggableElementTypes_1.BaseDisplay, (0, plugin_linear_genome_view_1.TrackHeightMixin)(), (0, plugin_linear_genome_view_1.FeatureDensityMixin)(), mobx_state_tree_1.types.model({
45
- /**
46
- * #property
47
- */
48
45
  type: mobx_state_tree_1.types.literal('LinearPairedArcDisplay'),
49
- /**
50
- * #property
51
- */
52
46
  configuration: (0, configuration_1.ConfigurationReference)(configSchema),
53
- /**
54
- * #property
55
- */
56
47
  displayMode: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
57
48
  }))
58
49
  .volatile(() => ({
@@ -62,18 +53,12 @@ function stateModelFactory(configSchema) {
62
53
  drawn: true,
63
54
  }))
64
55
  .views(self => ({
65
- /**
66
- * #getter
67
- */
68
56
  get displayModeSetting() {
69
57
  var _a;
70
58
  return (_a = self.displayMode) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)(self, ['renderer', 'displayMode']);
71
59
  },
72
60
  }))
73
61
  .actions(self => ({
74
- /**
75
- * #action
76
- */
77
62
  selectFeature(feature) {
78
63
  const session = (0, util_1.getSession)(self);
79
64
  if ((0, util_1.isSessionModelWithWidgets)(session)) {
@@ -88,28 +73,18 @@ function stateModelFactory(configSchema) {
88
73
  session.setSelection(feature);
89
74
  }
90
75
  },
91
- /**
92
- * #action
93
- */
94
76
  setLoading(flag) {
95
77
  self.loading = flag;
96
78
  },
97
- /**
98
- * #action
99
- */
100
79
  setFeatures(f) {
101
80
  self.features = f;
102
81
  },
103
- /**
104
- * #action
105
- */
106
82
  setDisplayMode(flag) {
107
83
  self.displayMode = flag;
108
84
  },
109
85
  }))
110
86
  .actions(self => ({
111
87
  afterAttach() {
112
- // eslint-disable-next-line @typescript-eslint/no-floating-promises
113
88
  ;
114
89
  (async () => {
115
90
  try {
@@ -122,12 +97,8 @@ function stateModelFactory(configSchema) {
122
97
  }
123
98
  })();
124
99
  },
125
- /**
126
- * #action
127
- */
128
100
  async renderSvg(opts) {
129
101
  const { renderArcSvg } = await Promise.resolve().then(() => __importStar(require('./renderSvg')));
130
- // @ts-expect-error
131
102
  return renderArcSvg(self, opts);
132
103
  },
133
104
  }));
@@ -1,5 +1,4 @@
1
- import React from 'react';
2
- import { LinearArcDisplayModel } from './model';
1
+ import type { LinearArcDisplayModel } from './model';
3
2
  export declare function renderArcSvg(model: LinearArcDisplayModel, _opts: {
4
3
  rasterizeLayers?: boolean;
5
- }): Promise<React.JSX.Element>;
4
+ }): Promise<import("react/jsx-runtime").JSX.Element>;
@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.renderArcSvg = renderArcSvg;
7
- const react_1 = __importDefault(require("react"));
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const util_1 = require("@jbrowse/core/util");
9
9
  const Arcs_1 = __importDefault(require("./components/Arcs"));
10
10
  async function renderArcSvg(model, _opts) {
@@ -13,10 +13,5 @@ async function renderArcSvg(model, _opts) {
13
13
  const width = view.dynamicBlocks.totalWidthPx;
14
14
  const height = model.height;
15
15
  const clipid = `arc-${model.id}`;
16
- return (react_1.default.createElement(react_1.default.Fragment, null,
17
- react_1.default.createElement("defs", null,
18
- react_1.default.createElement("clipPath", { id: clipid },
19
- react_1.default.createElement("rect", { x: 0, y: 0, width: width, height: height }))),
20
- react_1.default.createElement("g", { clipPath: `url(#${clipid})` },
21
- react_1.default.createElement(Arcs_1.default, { model: model, exportSVG: true }))));
16
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipid, children: (0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: width, height: height }) }) }), (0, jsx_runtime_1.jsx)("g", { clipPath: `url(#${clipid})`, children: (0, jsx_runtime_1.jsx)(Arcs_1.default, { model: model, exportSVG: true }) })] }));
22
17
  }
@@ -1,7 +1,7 @@
1
- import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter';
2
- import { Feature, AugmentedRegion } from '@jbrowse/core/util';
3
- import { IAnyStateTreeNode } from 'mobx-state-tree';
4
- import { IAutorunOptions } from 'mobx';
1
+ import type { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter';
2
+ import type { AugmentedRegion, Feature } from '@jbrowse/core/util';
3
+ import type { IAutorunOptions } from 'mobx';
4
+ import type { IAnyStateTreeNode } from 'mobx-state-tree';
5
5
  export declare function getTag(feature: Feature, tag: string): any;
6
6
  export declare function getTagAlt(feature: Feature, tag: string, alt: string): any;
7
7
  export declare const orientationTypes: {
@@ -8,23 +8,17 @@ exports.fetchSequence = fetchSequence;
8
8
  exports.shouldFetchReferenceSequence = shouldFetchReferenceSequence;
9
9
  exports.createAutorun = createAutorun;
10
10
  exports.randomColor = randomColor;
11
- const operators_1 = require("rxjs/operators");
12
- const rxjs_1 = require("rxjs");
13
- const mobx_state_tree_1 = require("mobx-state-tree");
14
11
  const mobx_1 = require("mobx");
15
- // get tag from BAM or CRAM feature, where CRAM uses feature.get('tags') and
16
- // BAM does not
12
+ const mobx_state_tree_1 = require("mobx-state-tree");
13
+ const rxjs_1 = require("rxjs");
14
+ const operators_1 = require("rxjs/operators");
17
15
  function getTag(feature, tag) {
18
16
  return feature.get('tags')[tag];
19
17
  }
20
- // use fallback alt tag, used in situations where upper case/lower case tags
21
- // exist e.g. Mm/MM for base modifications
22
18
  function getTagAlt(feature, tag, alt) {
23
19
  var _a;
24
20
  return (_a = getTag(feature, tag)) !== null && _a !== void 0 ? _a : getTag(feature, alt);
25
21
  }
26
- // orientation definitions from igv.js, see also
27
- // https://software.broadinstitute.org/software/igv/interpreting_pair_orientations
28
22
  exports.orientationTypes = {
29
23
  fr: {
30
24
  F1R2: 'LR',
@@ -82,8 +76,6 @@ function getColorWGBS(strand, base) {
82
76
  }
83
77
  return '#888';
84
78
  }
85
- // fetches region sequence augmenting by +/- 1bp for CpG on either side of
86
- // requested region
87
79
  async function fetchSequence(region, adapter) {
88
80
  var _a;
89
81
  const { start, end, originalRefName, refName } = region;
@@ -97,12 +89,9 @@ async function fetchSequence(region, adapter) {
97
89
  .pipe((0, operators_1.toArray)()));
98
90
  return (_a = feats[0]) === null || _a === void 0 ? void 0 : _a.get('seq');
99
91
  }
100
- // has to check underlying C-G (aka CpG) on the reference sequence
101
92
  function shouldFetchReferenceSequence(type) {
102
93
  return type === 'methylation';
103
94
  }
104
- // adapted from IGV
105
- // https://github.com/igvteam/igv/blob/e803e3af2d8c9ea049961dfd4628146bdde9a574/src/main/java/org/broad/igv/sam/mods/BaseModificationColors.java#L27
106
95
  exports.modificationColors = {
107
96
  m: 'rgb(255,0,0)',
108
97
  h: 'rgb(11, 132, 165)',
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import Plugin from '@jbrowse/core/Plugin';
2
- import PluginManager from '@jbrowse/core/PluginManager';
2
+ import type PluginManager from '@jbrowse/core/PluginManager';
3
3
  export default class ArcPlugin extends Plugin {
4
4
  name: string;
5
5
  install(pluginManager: PluginManager): void;
package/dist/index.js CHANGED
@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  const Plugin_1 = __importDefault(require("@jbrowse/core/Plugin"));
7
+ const colors_1 = require("@jbrowse/core/ui/colors");
8
+ const ArcRenderer_1 = __importDefault(require("./ArcRenderer"));
7
9
  const LinearArcDisplay_1 = __importDefault(require("./LinearArcDisplay"));
8
10
  const LinearPairedArcDisplay_1 = __importDefault(require("./LinearPairedArcDisplay"));
9
- const ArcRenderer_1 = __importDefault(require("./ArcRenderer"));
10
- const colors_1 = require("@jbrowse/core/ui/colors");
11
11
  class ArcPlugin extends Plugin_1.default {
12
12
  constructor() {
13
13
  super(...arguments);
@@ -35,7 +35,7 @@ class ArcPlugin extends Plugin_1.default {
35
35
  return colors_1.set1[4];
36
36
  }
37
37
  else {
38
- return colors_1.set1[6]; // skip 5, yellow
38
+ return colors_1.set1[6];
39
39
  }
40
40
  });
41
41
  }
@@ -1,6 +1,5 @@
1
- import React from 'react';
2
- import { AnyConfigurationModel } from '@jbrowse/core/configuration';
3
- import { Feature, Region } from '@jbrowse/core/util';
1
+ import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
2
+ import type { Feature, Region } from '@jbrowse/core/util';
4
3
  declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, displayModel, onFeatureClick, }: {
5
4
  features: Map<string, Feature>;
6
5
  config: AnyConfigurationModel;
@@ -12,5 +11,5 @@ declare const ArcRendering: ({ features, config, regions, bpPerPx, height, expor
12
11
  };
13
12
  onFeatureClick: (event: React.MouseEvent, featureId: string) => void;
14
13
  exportSVG: boolean;
15
- }) => React.JSX.Element;
14
+ }) => import("react/jsx-runtime").JSX.Element;
16
15
  export default ArcRendering;
@@ -1,8 +1,8 @@
1
- import React, { lazy, Suspense, useState } from 'react';
2
- import { readConfObject, } from '@jbrowse/core/configuration';
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Suspense, lazy, useRef, useState } from 'react';
3
+ import { readConfObject } from '@jbrowse/core/configuration';
3
4
  import { bpSpanPx, getStrokeProps } from '@jbrowse/core/util';
4
5
  import { observer } from 'mobx-react';
5
- // locals
6
6
  const ArcTooltip = lazy(() => import('../ArcTooltip'));
7
7
  function Arc({ selectedFeatureId, region, bpPerPx, config, height: displayHeight, feature, onFeatureClick, }) {
8
8
  const [isMouseOvered, setIsMouseOvered] = useState(false);
@@ -15,23 +15,17 @@ function Arc({ selectedFeatureId, region, bpPerPx, config, height: displayHeight
15
15
  const caption = readConfObject(config, 'caption', { feature });
16
16
  const strokeWidth = readConfObject(config, 'thickness', { feature }) || 2;
17
17
  const height = Math.min(readConfObject(config, 'height', { feature }) || 100, displayHeight);
18
- const ref = React.createRef();
19
- // formula: https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B%C3%A9zier_curves
18
+ const ref = useRef(null);
20
19
  const t = 0.5;
21
20
  const t1 = 1 - t;
22
21
  const textYCoord = 3 * (t1 * t1) * (t * height) + 3 * t1 * (t * t) * height;
23
- return (React.createElement("g", null,
24
- React.createElement("path", { ref: ref, ...getStrokeProps(stroke), d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
25
- onFeatureClick(e, featureId);
26
- }, onMouseOver: () => {
27
- setIsMouseOvered(true);
28
- }, onMouseLeave: () => {
29
- setIsMouseOvered(false);
30
- }, pointerEvents: "stroke" }),
31
- isMouseOvered ? (React.createElement(Suspense, { fallback: null },
32
- React.createElement(ArcTooltip, { contents: caption }))) : null,
33
- React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
34
- React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
22
+ return (_jsxs("g", { children: [_jsx("path", { ref: ref, ...getStrokeProps(stroke), d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
23
+ onFeatureClick(e, featureId);
24
+ }, onMouseOver: () => {
25
+ setIsMouseOvered(true);
26
+ }, onMouseLeave: () => {
27
+ setIsMouseOvered(false);
28
+ }, pointerEvents: "stroke" }), isMouseOvered ? (_jsx(Suspense, { fallback: null, children: _jsx(ArcTooltip, { contents: caption }) })) : null, _jsx("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em", children: label }), _jsx("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke, children: label })] }));
35
29
  }
36
30
  function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
37
31
  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
@@ -68,28 +62,24 @@ function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClic
68
62
  const label = readConfObject(config, 'label', { feature });
69
63
  const caption = readConfObject(config, 'caption', { feature });
70
64
  const strokeWidth = readConfObject(config, 'thickness', { feature }) || 2;
71
- const ref = React.createRef();
65
+ const ref = useRef(null);
72
66
  const textYCoord = (right - left) / 2;
73
- return (React.createElement("g", null,
74
- React.createElement("path", { d: describeArc(left + (right - left) / 2, 0, (right - left) / 2, 90, 270), ...getStrokeProps(stroke), strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
75
- onFeatureClick(e, featureId);
76
- }, onMouseOver: () => {
77
- setIsMouseOvered(true);
78
- }, onMouseLeave: () => {
79
- setIsMouseOvered(false);
80
- }, ref: ref, pointerEvents: "stroke" }),
81
- isMouseOvered ? React.createElement(ArcTooltip, { contents: caption }) : null,
82
- React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
83
- React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
67
+ return (_jsxs("g", { children: [_jsx("path", { d: describeArc(left + (right - left) / 2, 0, (right - left) / 2, 90, 270), ...getStrokeProps(stroke), strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
68
+ onFeatureClick(e, featureId);
69
+ }, onMouseOver: () => {
70
+ setIsMouseOvered(true);
71
+ }, onMouseLeave: () => {
72
+ setIsMouseOvered(false);
73
+ }, ref: ref, pointerEvents: "stroke" }), isMouseOvered ? _jsx(ArcTooltip, { contents: caption }) : null, _jsx("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em", children: label }), _jsx("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke, children: label })] }));
84
74
  }
85
75
  const ArcRendering = observer(function ({ features, config, regions, bpPerPx, height, exportSVG, displayModel, onFeatureClick, }) {
86
76
  const region = regions[0];
87
77
  const width = (region.end - region.start) / bpPerPx;
88
78
  const semicircles = readConfObject(config, 'displayMode') === 'semicircles';
89
79
  const { selectedFeatureId } = displayModel || {};
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 })))));
80
+ return (_jsx(Wrapper, { exportSVG: exportSVG, width: width, height: height, children: [...features.values()].map(f => semicircles ? (_jsx(SemiCircles, { config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f }, f.id())) : (_jsx(Arc, { height: height, config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f }, f.id()))) }));
91
81
  });
92
82
  function Wrapper({ exportSVG, width, height, children, }) {
93
- return exportSVG ? (children) : (React.createElement("svg", { width: width, height: height }, children));
83
+ return exportSVG ? (children) : (_jsx("svg", { width: width, height: height, children: children }));
94
84
  }
95
85
  export default ArcRendering;
@@ -1,52 +1,34 @@
1
1
  declare const ArcRenderer: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
2
- /**
3
- * #slot
4
- */
5
2
  color: {
6
3
  type: string;
7
4
  description: string;
8
5
  defaultValue: string;
9
6
  contextVariable: string[];
10
7
  };
11
- /**
12
- * #slot
13
- */
14
8
  thickness: {
15
9
  type: string;
16
10
  description: string;
17
11
  defaultValue: string;
18
12
  contextVariable: string[];
19
13
  };
20
- /**
21
- * #slot
22
- */
23
14
  label: {
24
15
  type: string;
25
16
  description: string;
26
17
  defaultValue: string;
27
18
  contextVariable: string[];
28
19
  };
29
- /**
30
- * #slot
31
- */
32
20
  height: {
33
21
  type: string;
34
22
  description: string;
35
23
  defaultValue: string;
36
24
  contextVariable: string[];
37
25
  };
38
- /**
39
- * #slot
40
- */
41
26
  caption: {
42
27
  type: string;
43
28
  description: string;
44
29
  defaultValue: string;
45
30
  contextVariable: string[];
46
31
  };
47
- /**
48
- * #slot
49
- */
50
32
  displayMode: {
51
33
  type: string;
52
34
  defaultValue: string;
@@ -1,58 +1,37 @@
1
1
  import { ConfigurationSchema } from '@jbrowse/core/configuration';
2
2
  import { types } from 'mobx-state-tree';
3
- /**
4
- * #config ArcRenderer
5
- */
6
- function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
3
+ function x() { }
7
4
  const ArcRenderer = ConfigurationSchema('ArcRenderer', {
8
- /**
9
- * #slot
10
- */
11
5
  color: {
12
6
  type: 'color',
13
7
  description: 'the color of the arcs',
14
8
  defaultValue: 'darkblue',
15
9
  contextVariable: ['feature'],
16
10
  },
17
- /**
18
- * #slot
19
- */
20
11
  thickness: {
21
12
  type: 'number',
22
13
  description: 'the thickness of the arcs',
23
14
  defaultValue: `jexl:logThickness(feature,'score')`,
24
15
  contextVariable: ['feature'],
25
16
  },
26
- /**
27
- * #slot
28
- */
29
17
  label: {
30
18
  type: 'string',
31
19
  description: 'the label to appear at the apex of the arcs',
32
20
  defaultValue: `jexl:get(feature,'score')`,
33
21
  contextVariable: ['feature'],
34
22
  },
35
- /**
36
- * #slot
37
- */
38
23
  height: {
39
24
  type: 'number',
40
25
  description: 'the height of the arcs',
41
26
  defaultValue: `jexl:log10(get(feature,'end')-get(feature,'start'))*50`,
42
27
  contextVariable: ['feature'],
43
28
  },
44
- /**
45
- * #slot
46
- */
47
29
  caption: {
48
30
  type: 'string',
49
31
  description: 'the caption to appear when hovering over any point on the arcs',
50
32
  defaultValue: `jexl:get(feature,'name')`,
51
33
  contextVariable: ['feature'],
52
34
  },
53
- /**
54
- * #slot
55
- */
56
35
  displayMode: {
57
36
  type: 'enum',
58
37
  defaultValue: 'arcs',
@@ -1,2 +1,2 @@
1
- import PluginManager from '@jbrowse/core/PluginManager';
1
+ import type PluginManager from '@jbrowse/core/PluginManager';
2
2
  export default function ArcRendererF(pluginManager: PluginManager): void;
@@ -1,6 +1,6 @@
1
+ import ArcRenderer from './ArcRenderer';
1
2
  import ReactComponent from './ArcRendering';
2
3
  import configSchema from './configSchema';
3
- import ArcRenderer from './ArcRenderer';
4
4
  export default function ArcRendererF(pluginManager) {
5
5
  pluginManager.addRendererType(() => new ArcRenderer({
6
6
  name: 'ArcRenderer',
@@ -1,5 +1,4 @@
1
- import React from 'react';
2
1
  declare const ArcTooltip: ({ contents }: {
3
2
  contents?: string;
4
- }) => React.JSX.Element | null;
3
+ }) => import("react/jsx-runtime").JSX.Element | null;
5
4
  export default ArcTooltip;
package/esm/ArcTooltip.js CHANGED
@@ -1,13 +1,12 @@
1
- import React, { Suspense } from 'react';
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Suspense, forwardRef, isValidElement } from 'react';
2
3
  import { SanitizedHTML } from '@jbrowse/core/ui';
3
- import { observer } from 'mobx-react';
4
4
  import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
5
- const TooltipContents = React.forwardRef(function TooltipContents2({ message }, ref) {
6
- return (React.createElement("div", { ref: ref }, React.isValidElement(message) ? (message) : message ? (React.createElement(SanitizedHTML, { html: String(message) })) : null));
5
+ import { observer } from 'mobx-react';
6
+ const TooltipContents = forwardRef(function TooltipContents2({ message }, ref) {
7
+ return (_jsx("div", { ref: ref, children: isValidElement(message) ? (message) : message ? (_jsx(SanitizedHTML, { html: String(message) })) : null }));
7
8
  });
8
9
  const ArcTooltip = observer(function ({ contents }) {
9
- return contents ? (React.createElement(Suspense, { fallback: null },
10
- React.createElement(BaseTooltip, null,
11
- React.createElement(TooltipContents, { message: contents })))) : null;
10
+ return contents ? (_jsx(Suspense, { fallback: null, children: _jsx(BaseTooltip, { children: _jsx(TooltipContents, { message: contents }) }) })) : null;
12
11
  });
13
12
  export default ArcTooltip;
@@ -1,11 +1,5 @@
1
- import PluginManager from '@jbrowse/core/PluginManager';
2
- /**
3
- * #config LinearArcDisplay
4
- */
1
+ import type PluginManager from '@jbrowse/core/PluginManager';
5
2
  export declare function configSchemaFactory(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
6
- /**
7
- * #slot
8
- */
9
3
  renderer: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IAnyModelType, [undefined]>;
10
4
  }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
11
5
  maxFeatureScreenDensity: {
@@ -1,19 +1,10 @@
1
- import { types } from 'mobx-state-tree';
2
1
  import { ConfigurationSchema } from '@jbrowse/core/configuration';
3
2
  import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view';
4
- /**
5
- * #config LinearArcDisplay
6
- */
3
+ import { types } from 'mobx-state-tree';
7
4
  export function configSchemaFactory(pluginManager) {
8
5
  return ConfigurationSchema('LinearArcDisplay', {
9
- /**
10
- * #slot
11
- */
12
6
  renderer: types.optional(pluginManager.pluggableConfigSchemaType('renderer'), { type: 'ArcRenderer' }),
13
7
  }, {
14
- /**
15
- * #baseConfiguration
16
- */
17
8
  baseConfiguration: baseLinearDisplayConfigSchema,
18
9
  explicitlyTyped: true,
19
10
  });
@@ -1,2 +1,2 @@
1
- import PluginManager from '@jbrowse/core/PluginManager';
1
+ import type PluginManager from '@jbrowse/core/PluginManager';
2
2
  export default function LinearArcDisplayF(pluginManager: PluginManager): void;