@jbrowse/plugin-arc 2.13.0 → 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.
- package/dist/ArcRenderer/ArcRendering.d.ts +2 -2
- package/dist/ArcRenderer/ArcRendering.js +17 -4
- package/dist/ArcTooltip.js +1 -1
- package/dist/LinearArcDisplay/model.d.ts +2 -4
- package/dist/LinearArcDisplay/model.js +6 -2
- package/dist/LinearPairedArcDisplay/components/Arcs.js +22 -4
- package/dist/LinearPairedArcDisplay/components/BaseDisplayComponent.js +3 -1
- package/dist/LinearPairedArcDisplay/components/util.js +1 -1
- package/dist/LinearPairedArcDisplay/model.d.ts +1 -1
- package/dist/LinearPairedArcDisplay/renderSvg.js +1 -1
- package/dist/LinearPairedArcDisplay/util.d.ts +1 -1
- package/esm/ArcRenderer/ArcRendering.d.ts +2 -2
- package/esm/ArcRenderer/ArcRendering.js +17 -4
- package/esm/ArcTooltip.js +1 -1
- package/esm/LinearArcDisplay/model.d.ts +2 -4
- package/esm/LinearArcDisplay/model.js +6 -2
- package/esm/LinearPairedArcDisplay/components/Arcs.js +22 -4
- package/esm/LinearPairedArcDisplay/components/BaseDisplayComponent.js +3 -1
- package/esm/LinearPairedArcDisplay/components/util.js +1 -1
- package/esm/LinearPairedArcDisplay/model.d.ts +1 -1
- package/esm/LinearPairedArcDisplay/renderSvg.js +1 -1
- package/esm/LinearPairedArcDisplay/util.d.ts +1 -1
- package/package.json +3 -3
|
@@ -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,
|
|
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 =>
|
|
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 =>
|
|
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,
|
|
105
|
-
const
|
|
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, }) {
|
package/dist/ArcTooltip.js
CHANGED
|
@@ -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
|
|
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?:
|
|
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: () =>
|
|
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: () =>
|
|
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: () =>
|
|
60
|
-
|
|
61
|
-
|
|
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()
|
|
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: () =>
|
|
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: () => {
|
|
@@ -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?:
|
|
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 =
|
|
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
|
|
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,
|
|
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 =>
|
|
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 =>
|
|
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,
|
|
77
|
-
const
|
|
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
|
|
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?:
|
|
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: () =>
|
|
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: () =>
|
|
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: () =>
|
|
32
|
-
|
|
33
|
-
|
|
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()
|
|
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: () =>
|
|
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: () => {
|
|
@@ -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?:
|
|
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 =
|
|
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
|
|
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.
|
|
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": "
|
|
56
|
+
"gitHead": "9fb8231d932db40adf0a283081765431756c66ff"
|
|
57
57
|
}
|