@jbrowse/plugin-arc 2.13.1 → 2.14.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.
@@ -1,13 +1,13 @@
1
1
  import React from 'react';
2
2
  import { AnyConfigurationModel } from '@jbrowse/core/configuration';
3
3
  import { Feature, Region } from '@jbrowse/core/util';
4
- declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, onFeatureClick, displayModel: { selectedFeatureId }, }: {
4
+ declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, displayModel, onFeatureClick, }: {
5
5
  features: Map<string, Feature>;
6
6
  config: AnyConfigurationModel;
7
7
  regions: Region[];
8
8
  bpPerPx: number;
9
9
  height: number;
10
- displayModel: {
10
+ displayModel?: {
11
11
  selectedFeatureId: string;
12
12
  };
13
13
  onFeatureClick: (event: React.MouseEvent, featureId: string) => void;
@@ -51,7 +51,13 @@ function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, featu
51
51
  const t1 = 1 - t;
52
52
  const textYCoord = 3 * (t1 * t1) * (t * height) + 3 * t1 * (t * t) * height;
53
53
  return (react_1.default.createElement("g", null,
54
- react_1.default.createElement("path", { ref: ref, ...(0, util_1.getStrokeProps)(stroke), d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, strokeWidth: strokeWidth, fill: "transparent", onClick: e => onFeatureClick === null || onFeatureClick === void 0 ? void 0 : onFeatureClick(e, featureId), onMouseOver: () => setIsMouseOvered(true), onMouseLeave: () => setIsMouseOvered(false), pointerEvents: "stroke" }),
54
+ react_1.default.createElement("path", { ref: ref, ...(0, util_1.getStrokeProps)(stroke), d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
55
+ onFeatureClick(e, featureId);
56
+ }, onMouseOver: () => {
57
+ setIsMouseOvered(true);
58
+ }, onMouseLeave: () => {
59
+ setIsMouseOvered(false);
60
+ }, pointerEvents: "stroke" }),
55
61
  isMouseOvered ? react_1.default.createElement(ArcTooltip_1.default, { contents: caption }) : null,
56
62
  react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
57
63
  react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
@@ -96,15 +102,22 @@ function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClic
96
102
  const ref = react_1.default.createRef();
97
103
  const textYCoord = (right - left) / 2;
98
104
  return (react_1.default.createElement("g", null,
99
- react_1.default.createElement("path", { d: describeArc(left + (right - left) / 2, 0, (right - left) / 2, 90, 270), ...(0, util_1.getStrokeProps)(stroke), strokeWidth: strokeWidth, fill: "transparent", onClick: e => onFeatureClick === null || onFeatureClick === void 0 ? void 0 : onFeatureClick(e, featureId), onMouseOver: () => setIsMouseOvered(true), onMouseLeave: () => setIsMouseOvered(false), ref: ref, pointerEvents: "stroke" }),
105
+ react_1.default.createElement("path", { d: describeArc(left + (right - left) / 2, 0, (right - left) / 2, 90, 270), ...(0, util_1.getStrokeProps)(stroke), strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
106
+ onFeatureClick(e, featureId);
107
+ }, onMouseOver: () => {
108
+ setIsMouseOvered(true);
109
+ }, onMouseLeave: () => {
110
+ setIsMouseOvered(false);
111
+ }, ref: ref, pointerEvents: "stroke" }),
100
112
  isMouseOvered ? react_1.default.createElement(ArcTooltip_1.default, { contents: caption }) : null,
101
113
  react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
102
114
  react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
103
115
  }
104
- const ArcRendering = (0, mobx_react_1.observer)(function ({ features, config, regions, bpPerPx, height, exportSVG, onFeatureClick, displayModel: { selectedFeatureId }, }) {
105
- const [region] = regions;
116
+ const ArcRendering = (0, mobx_react_1.observer)(function ({ features, config, regions, bpPerPx, height, exportSVG, displayModel, onFeatureClick, }) {
117
+ const region = regions[0];
106
118
  const width = (region.end - region.start) / bpPerPx;
107
119
  const semicircles = (0, configuration_1.readConfObject)(config, 'displayMode') === 'semicircles';
120
+ const { selectedFeatureId } = displayModel || {};
108
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 })))));
109
122
  });
110
123
  function Wrapper({ exportSVG, width, height, children, }) {
@@ -40,7 +40,7 @@ const ArcTooltip = (0, mobx_react_1.observer)(function ({ contents }) {
40
40
  });
41
41
  const clientPoint = (0, react_2.useClientPoint)(context);
42
42
  const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
43
- const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
43
+ const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
44
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
45
  react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
46
46
  ...floatingStyles,
@@ -133,7 +133,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
133
133
  error: unknown;
134
134
  message: string | undefined;
135
135
  }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
136
- onHorizontalScroll?: Function;
136
+ onHorizontalScroll?: () => void;
137
137
  blockState?: Record<string, any>;
138
138
  }>;
139
139
  readonly DisplayBlurb: import("react").FC<{
@@ -146,9 +146,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
146
146
  error: unknown;
147
147
  message: string | undefined;
148
148
  } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
149
- id: import("mobx-state-tree" /**
150
- * #method
151
- */).IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
149
+ id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
152
150
  type: import("mobx-state-tree").ISimpleType<string>;
153
151
  rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
154
152
  }, {
@@ -107,13 +107,17 @@ function stateModelFactory(configSchema) {
107
107
  {
108
108
  type: 'radio',
109
109
  label: 'Arcs',
110
- onClick: () => self.setDisplayMode('arcs'),
110
+ onClick: () => {
111
+ self.setDisplayMode('arcs');
112
+ },
111
113
  checked: self.displayMode === 'arcs',
112
114
  },
113
115
  {
114
116
  type: 'radio',
115
117
  label: 'Semi-circles',
116
- onClick: () => self.setDisplayMode('semicircles'),
118
+ onClick: () => {
119
+ self.setDisplayMode('semicircles');
120
+ },
117
121
  checked: self.displayMode === 'semicircles',
118
122
  },
119
123
  ],
@@ -56,9 +56,27 @@ const Arc = (0, mobx_react_1.observer)(function ({ model, feature, alt, assembly
56
56
  const col = mouseOvered ? 'black' : c;
57
57
  const sw = 3;
58
58
  return absrad > 1 ? (react_1.default.createElement(react_1.default.Fragment, null,
59
- react_1.default.createElement("path", { d: `M ${left} 0 C ${left} ${destY}, ${right} ${destY}, ${right} 0`, ref: ref, ...(0, util_1.getStrokeProps)(col), strokeWidth: sw, onMouseOut: () => setMouseOvered(false), onMouseOver: () => setMouseOvered(true), onClick: () => model.selectFeature(feature), fill: "none", pointerEvents: "stroke" }),
60
- k1.mateDirection !== undefined ? (react_1.default.createElement("line", { ...(0, util_1.getStrokeProps)(col), strokeWidth: sw, onMouseOut: () => setMouseOvered(false), onMouseOver: () => setMouseOvered(true), onClick: () => model.selectFeature(feature), x1: left, x2: left + k1.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null,
61
- k2.mateDirection !== undefined ? (react_1.default.createElement("line", { ...(0, util_1.getStrokeProps)(col), strokeWidth: sw, onMouseOut: () => setMouseOvered(false), onMouseOver: () => setMouseOvered(true), onClick: () => model.selectFeature(feature), x1: right, x2: right + k2.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null,
59
+ react_1.default.createElement("path", { d: `M ${left} 0 C ${left} ${destY}, ${right} ${destY}, ${right} 0`, ref: ref, ...(0, util_1.getStrokeProps)(col), strokeWidth: sw, onMouseOut: () => {
60
+ setMouseOvered(false);
61
+ }, onMouseOver: () => {
62
+ setMouseOvered(true);
63
+ }, onClick: () => {
64
+ model.selectFeature(feature);
65
+ }, fill: "none", pointerEvents: "stroke" }),
66
+ k1.mateDirection ? (react_1.default.createElement("line", { ...(0, util_1.getStrokeProps)(col), strokeWidth: sw, onMouseOut: () => {
67
+ setMouseOvered(false);
68
+ }, onMouseOver: () => {
69
+ setMouseOvered(true);
70
+ }, onClick: () => {
71
+ model.selectFeature(feature);
72
+ }, x1: left, x2: left + k1.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null,
73
+ k2.mateDirection ? (react_1.default.createElement("line", { ...(0, util_1.getStrokeProps)(col), strokeWidth: sw, onMouseOut: () => {
74
+ setMouseOvered(false);
75
+ }, onMouseOver: () => {
76
+ setMouseOvered(true);
77
+ }, onClick: () => {
78
+ model.selectFeature(feature);
79
+ }, x1: right, x2: right + k2.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null,
62
80
  mouseOvered ? (react_1.default.createElement(ArcTooltip_1.default, { contents: (0, util_2.makeSummary)(feature, alt) })) : null)) : null;
63
81
  }
64
82
  return null;
@@ -78,7 +96,7 @@ const Arcs = (0, mobx_react_1.observer)(function ({ model, exportSVG, }) {
78
96
  return assembly ? (react_1.default.createElement(Wrapper, { model: model, exportSVG: exportSVG }, features === null || features === void 0 ? void 0 : features.map(f => {
79
97
  var _a;
80
98
  const alts = f.get('ALT');
81
- return ((_a = alts === null || alts === void 0 ? void 0 : alts.map(a => (react_1.default.createElement(Arc, { key: f.id() + '-' + a, session: session, feature: f, alt: a, view: view, model: model, assembly: assembly })))) !== null && _a !== void 0 ? _a : (react_1.default.createElement(Arc, { key: f.id(), session: session, feature: f, view: view, model: model, assembly: assembly })));
99
+ return ((_a = alts === null || alts === void 0 ? void 0 : alts.map(a => (react_1.default.createElement(Arc, { key: `${f.id()}-${a}`, session: session, feature: f, alt: a, view: view, model: model, assembly: assembly })))) !== null && _a !== void 0 ? _a : (react_1.default.createElement(Arc, { key: f.id(), session: session, feature: f, view: view, model: model, assembly: assembly })));
82
100
  }))) : null;
83
101
  });
84
102
  exports.default = Arcs;
@@ -54,7 +54,9 @@ const BaseDisplayComponent = (0, mobx_react_1.observer)(function ({ model, child
54
54
  const { error, regionTooLarge } = model;
55
55
  return error ? (react_1.default.createElement(plugin_linear_genome_view_1.BlockMsg, { message: `${error}`, severity: "error", action: react_1.default.createElement(react_1.default.Fragment, null,
56
56
  react_1.default.createElement(material_1.Tooltip, { title: "Reload" },
57
- react_1.default.createElement(material_1.IconButton, { "data-testid": "reload_button", onClick: () => model.reload() },
57
+ react_1.default.createElement(material_1.IconButton, { "data-testid": "reload_button", onClick: () => {
58
+ model.reload();
59
+ } },
58
60
  react_1.default.createElement(Refresh_1.default, null))),
59
61
  react_1.default.createElement(material_1.Tooltip, { title: "Show stack trace" },
60
62
  react_1.default.createElement(material_1.IconButton, { onClick: () => {
@@ -49,7 +49,7 @@ function makeFeaturePair(feature, alt) {
49
49
  mateDirection,
50
50
  },
51
51
  k2: mate !== null && mate !== void 0 ? mate : {
52
- refName: mateRefName,
52
+ refName: mateRefName || 'unknown',
53
53
  end: mateEnd,
54
54
  start: mateStart,
55
55
  mateDirection: joinDirection,
@@ -65,7 +65,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
65
65
  }, import("mobx-state-tree" /**
66
66
  * #action
67
67
  */)._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
68
- onHorizontalScroll?: Function;
68
+ onHorizontalScroll?: () => void;
69
69
  blockState?: Record<string, any>;
70
70
  }>;
71
71
  readonly DisplayBlurb: React.FC<{
@@ -12,7 +12,7 @@ async function renderArcSvg(model, _opts) {
12
12
  const view = (0, util_1.getContainingView)(model);
13
13
  const width = view.dynamicBlocks.totalWidthPx;
14
14
  const height = model.height;
15
- const clipid = 'arc-' + model.id;
15
+ const clipid = `arc-${model.id}`;
16
16
  return (react_1.default.createElement(react_1.default.Fragment, null,
17
17
  react_1.default.createElement("defs", null,
18
18
  react_1.default.createElement("clipPath", { id: clipid },
@@ -18,7 +18,7 @@ export declare const pairMap: {
18
18
  export declare function getColorWGBS(strand: number, base: string): "#f00" | "#00f" | "#888";
19
19
  export declare function fetchSequence(region: AugmentedRegion, adapter: BaseFeatureDataAdapter): Promise<any>;
20
20
  export declare function shouldFetchReferenceSequence(type?: string): type is "methylation";
21
- export declare const modificationColors: Record<string, string | undefined>;
21
+ export declare const modificationColors: Record<string, string>;
22
22
  type DisplayModel = IAnyStateTreeNode & {
23
23
  setError: (arg: unknown) => void;
24
24
  };
@@ -1,13 +1,13 @@
1
1
  import React from 'react';
2
2
  import { AnyConfigurationModel } from '@jbrowse/core/configuration';
3
3
  import { Feature, Region } from '@jbrowse/core/util';
4
- declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, onFeatureClick, displayModel: { selectedFeatureId }, }: {
4
+ declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, displayModel, onFeatureClick, }: {
5
5
  features: Map<string, Feature>;
6
6
  config: AnyConfigurationModel;
7
7
  regions: Region[];
8
8
  bpPerPx: number;
9
9
  height: number;
10
- displayModel: {
10
+ displayModel?: {
11
11
  selectedFeatureId: string;
12
12
  };
13
13
  onFeatureClick: (event: React.MouseEvent, featureId: string) => void;
@@ -23,7 +23,13 @@ function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, featu
23
23
  const t1 = 1 - t;
24
24
  const textYCoord = 3 * (t1 * t1) * (t * height) + 3 * t1 * (t * t) * height;
25
25
  return (React.createElement("g", null,
26
- React.createElement("path", { ref: ref, ...getStrokeProps(stroke), d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, strokeWidth: strokeWidth, fill: "transparent", onClick: e => onFeatureClick === null || onFeatureClick === void 0 ? void 0 : onFeatureClick(e, featureId), onMouseOver: () => setIsMouseOvered(true), onMouseLeave: () => setIsMouseOvered(false), pointerEvents: "stroke" }),
26
+ React.createElement("path", { ref: ref, ...getStrokeProps(stroke), d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
27
+ onFeatureClick(e, featureId);
28
+ }, onMouseOver: () => {
29
+ setIsMouseOvered(true);
30
+ }, onMouseLeave: () => {
31
+ setIsMouseOvered(false);
32
+ }, pointerEvents: "stroke" }),
27
33
  isMouseOvered ? React.createElement(ArcTooltip, { contents: caption }) : null,
28
34
  React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
29
35
  React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
@@ -68,15 +74,22 @@ function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClic
68
74
  const ref = React.createRef();
69
75
  const textYCoord = (right - left) / 2;
70
76
  return (React.createElement("g", null,
71
- React.createElement("path", { d: describeArc(left + (right - left) / 2, 0, (right - left) / 2, 90, 270), ...getStrokeProps(stroke), strokeWidth: strokeWidth, fill: "transparent", onClick: e => onFeatureClick === null || onFeatureClick === void 0 ? void 0 : onFeatureClick(e, featureId), onMouseOver: () => setIsMouseOvered(true), onMouseLeave: () => setIsMouseOvered(false), ref: ref, pointerEvents: "stroke" }),
77
+ React.createElement("path", { d: describeArc(left + (right - left) / 2, 0, (right - left) / 2, 90, 270), ...getStrokeProps(stroke), strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
78
+ onFeatureClick(e, featureId);
79
+ }, onMouseOver: () => {
80
+ setIsMouseOvered(true);
81
+ }, onMouseLeave: () => {
82
+ setIsMouseOvered(false);
83
+ }, ref: ref, pointerEvents: "stroke" }),
72
84
  isMouseOvered ? React.createElement(ArcTooltip, { contents: caption }) : null,
73
85
  React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
74
86
  React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
75
87
  }
76
- const ArcRendering = observer(function ({ features, config, regions, bpPerPx, height, exportSVG, onFeatureClick, displayModel: { selectedFeatureId }, }) {
77
- const [region] = regions;
88
+ const ArcRendering = observer(function ({ features, config, regions, bpPerPx, height, exportSVG, displayModel, onFeatureClick, }) {
89
+ const region = regions[0];
78
90
  const width = (region.end - region.start) / bpPerPx;
79
91
  const semicircles = readConfObject(config, 'displayMode') === 'semicircles';
92
+ const { selectedFeatureId } = displayModel || {};
80
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 })))));
81
94
  });
82
95
  function Wrapper({ exportSVG, width, height, children, }) {
package/esm/ArcTooltip.js CHANGED
@@ -35,7 +35,7 @@ const ArcTooltip = observer(function ({ contents }) {
35
35
  });
36
36
  const clientPoint = useClientPoint(context);
37
37
  const { getFloatingProps } = useInteractions([clientPoint]);
38
- const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
38
+ const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
39
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
40
  React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
41
41
  ...floatingStyles,
@@ -133,7 +133,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
133
133
  error: unknown;
134
134
  message: string | undefined;
135
135
  }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
136
- onHorizontalScroll?: Function;
136
+ onHorizontalScroll?: () => void;
137
137
  blockState?: Record<string, any>;
138
138
  }>;
139
139
  readonly DisplayBlurb: import("react").FC<{
@@ -146,9 +146,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
146
146
  error: unknown;
147
147
  message: string | undefined;
148
148
  } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
149
- id: import("mobx-state-tree" /**
150
- * #method
151
- */).IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
149
+ id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
152
150
  type: import("mobx-state-tree").ISimpleType<string>;
153
151
  rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
154
152
  }, {
@@ -104,13 +104,17 @@ export function stateModelFactory(configSchema) {
104
104
  {
105
105
  type: 'radio',
106
106
  label: 'Arcs',
107
- onClick: () => self.setDisplayMode('arcs'),
107
+ onClick: () => {
108
+ self.setDisplayMode('arcs');
109
+ },
108
110
  checked: self.displayMode === 'arcs',
109
111
  },
110
112
  {
111
113
  type: 'radio',
112
114
  label: 'Semi-circles',
113
- onClick: () => self.setDisplayMode('semicircles'),
115
+ onClick: () => {
116
+ self.setDisplayMode('semicircles');
117
+ },
114
118
  checked: self.displayMode === 'semicircles',
115
119
  },
116
120
  ],
@@ -28,9 +28,27 @@ const Arc = observer(function ({ model, feature, alt, assembly, view, }) {
28
28
  const col = mouseOvered ? 'black' : c;
29
29
  const sw = 3;
30
30
  return absrad > 1 ? (React.createElement(React.Fragment, null,
31
- React.createElement("path", { d: `M ${left} 0 C ${left} ${destY}, ${right} ${destY}, ${right} 0`, ref: ref, ...getStrokeProps(col), strokeWidth: sw, onMouseOut: () => setMouseOvered(false), onMouseOver: () => setMouseOvered(true), onClick: () => model.selectFeature(feature), fill: "none", pointerEvents: "stroke" }),
32
- k1.mateDirection !== undefined ? (React.createElement("line", { ...getStrokeProps(col), strokeWidth: sw, onMouseOut: () => setMouseOvered(false), onMouseOver: () => setMouseOvered(true), onClick: () => model.selectFeature(feature), x1: left, x2: left + k1.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null,
33
- k2.mateDirection !== undefined ? (React.createElement("line", { ...getStrokeProps(col), strokeWidth: sw, onMouseOut: () => setMouseOvered(false), onMouseOver: () => setMouseOvered(true), onClick: () => model.selectFeature(feature), x1: right, x2: right + k2.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null,
31
+ React.createElement("path", { d: `M ${left} 0 C ${left} ${destY}, ${right} ${destY}, ${right} 0`, ref: ref, ...getStrokeProps(col), strokeWidth: sw, onMouseOut: () => {
32
+ setMouseOvered(false);
33
+ }, onMouseOver: () => {
34
+ setMouseOvered(true);
35
+ }, onClick: () => {
36
+ model.selectFeature(feature);
37
+ }, fill: "none", pointerEvents: "stroke" }),
38
+ k1.mateDirection ? (React.createElement("line", { ...getStrokeProps(col), strokeWidth: sw, onMouseOut: () => {
39
+ setMouseOvered(false);
40
+ }, onMouseOver: () => {
41
+ setMouseOvered(true);
42
+ }, onClick: () => {
43
+ model.selectFeature(feature);
44
+ }, x1: left, x2: left + k1.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null,
45
+ k2.mateDirection ? (React.createElement("line", { ...getStrokeProps(col), strokeWidth: sw, onMouseOut: () => {
46
+ setMouseOvered(false);
47
+ }, onMouseOver: () => {
48
+ setMouseOvered(true);
49
+ }, onClick: () => {
50
+ model.selectFeature(feature);
51
+ }, x1: right, x2: right + k2.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null,
34
52
  mouseOvered ? (React.createElement(ArcTooltip, { contents: makeSummary(feature, alt) })) : null)) : null;
35
53
  }
36
54
  return null;
@@ -50,7 +68,7 @@ const Arcs = observer(function ({ model, exportSVG, }) {
50
68
  return assembly ? (React.createElement(Wrapper, { model: model, exportSVG: exportSVG }, features === null || features === void 0 ? void 0 : features.map(f => {
51
69
  var _a;
52
70
  const alts = f.get('ALT');
53
- return ((_a = alts === null || alts === void 0 ? void 0 : alts.map(a => (React.createElement(Arc, { key: f.id() + '-' + a, session: session, feature: f, alt: a, view: view, model: model, assembly: assembly })))) !== null && _a !== void 0 ? _a : (React.createElement(Arc, { key: f.id(), session: session, feature: f, view: view, model: model, assembly: assembly })));
71
+ return ((_a = alts === null || alts === void 0 ? void 0 : alts.map(a => (React.createElement(Arc, { key: `${f.id()}-${a}`, session: session, feature: f, alt: a, view: view, model: model, assembly: assembly })))) !== null && _a !== void 0 ? _a : (React.createElement(Arc, { key: f.id(), session: session, feature: f, view: view, model: model, assembly: assembly })));
54
72
  }))) : null;
55
73
  });
56
74
  export default Arcs;
@@ -26,7 +26,9 @@ const BaseDisplayComponent = observer(function ({ model, children, }) {
26
26
  const { error, regionTooLarge } = model;
27
27
  return error ? (React.createElement(BlockMsg, { message: `${error}`, severity: "error", action: React.createElement(React.Fragment, null,
28
28
  React.createElement(Tooltip, { title: "Reload" },
29
- React.createElement(IconButton, { "data-testid": "reload_button", onClick: () => model.reload() },
29
+ React.createElement(IconButton, { "data-testid": "reload_button", onClick: () => {
30
+ model.reload();
31
+ } },
30
32
  React.createElement(RefreshIcon, null))),
31
33
  React.createElement(Tooltip, { title: "Show stack trace" },
32
34
  React.createElement(IconButton, { onClick: () => {
@@ -45,7 +45,7 @@ export function makeFeaturePair(feature, alt) {
45
45
  mateDirection,
46
46
  },
47
47
  k2: mate !== null && mate !== void 0 ? mate : {
48
- refName: mateRefName,
48
+ refName: mateRefName || 'unknown',
49
49
  end: mateEnd,
50
50
  start: mateStart,
51
51
  mateDirection: joinDirection,
@@ -65,7 +65,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
65
65
  }, import("mobx-state-tree" /**
66
66
  * #action
67
67
  */)._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
68
- onHorizontalScroll?: Function;
68
+ onHorizontalScroll?: () => void;
69
69
  blockState?: Record<string, any>;
70
70
  }>;
71
71
  readonly DisplayBlurb: React.FC<{
@@ -6,7 +6,7 @@ export async function renderArcSvg(model, _opts) {
6
6
  const view = getContainingView(model);
7
7
  const width = view.dynamicBlocks.totalWidthPx;
8
8
  const height = model.height;
9
- const clipid = 'arc-' + model.id;
9
+ const clipid = `arc-${model.id}`;
10
10
  return (React.createElement(React.Fragment, null,
11
11
  React.createElement("defs", null,
12
12
  React.createElement("clipPath", { id: clipid },
@@ -18,7 +18,7 @@ export declare const pairMap: {
18
18
  export declare function getColorWGBS(strand: number, base: string): "#f00" | "#00f" | "#888";
19
19
  export declare function fetchSequence(region: AugmentedRegion, adapter: BaseFeatureDataAdapter): Promise<any>;
20
20
  export declare function shouldFetchReferenceSequence(type?: string): type is "methylation";
21
- export declare const modificationColors: Record<string, string | undefined>;
21
+ export declare const modificationColors: Record<string, string>;
22
22
  type DisplayModel = IAnyStateTreeNode & {
23
23
  setError: (arg: unknown) => void;
24
24
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jbrowse/plugin-arc",
3
- "version": "2.13.1",
3
+ "version": "2.14.0",
4
4
  "description": "JBrowse 2 arc adapters, tracks, etc.",
5
5
  "keywords": [
6
6
  "jbrowse",
@@ -24,7 +24,7 @@
24
24
  ],
25
25
  "scripts": {
26
26
  "build": "npm-run-all build:*",
27
- "test": "cd ../..; jest plugins/arc",
27
+ "test": "cd ../..; jest --passWithNoTests plugins/arc",
28
28
  "prepublishOnly": "yarn test",
29
29
  "prepack": "yarn build && yarn useDist",
30
30
  "postpack": "yarn useSrc",
@@ -53,5 +53,5 @@
53
53
  "publishConfig": {
54
54
  "access": "public"
55
55
  },
56
- "gitHead": "fcebca71cc1d066654603e1a9accfa6c6d4f764d"
56
+ "gitHead": "9fb8231d932db40adf0a283081765431756c66ff"
57
57
  }