@jbrowse/plugin-arc 2.11.0 → 2.11.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.
- package/dist/ArcRenderer/ArcRenderer.d.ts +1 -1
- package/dist/ArcRenderer/ArcRenderer.js +2 -2
- package/dist/ArcRenderer/ArcRendering.d.ts +2 -1
- package/dist/ArcRenderer/ArcRendering.js +9 -9
- package/dist/ArcRenderer/index.d.ts +1 -2
- package/dist/ArcRenderer/index.js +3 -2
- package/dist/ArcTooltip.js +1 -0
- package/dist/LinearArcDisplay/configSchema.d.ts +5 -0
- package/dist/LinearArcDisplay/index.d.ts +1 -2
- package/dist/LinearArcDisplay/index.js +3 -2
- package/dist/LinearArcDisplay/model.d.ts +24 -21
- package/dist/LinearPairedArcDisplay/components/Arcs.js +3 -3
- package/dist/LinearPairedArcDisplay/configSchema.d.ts +5 -0
- package/esm/ArcRenderer/ArcRenderer.d.ts +1 -1
- package/esm/ArcRenderer/ArcRenderer.js +1 -1
- package/esm/ArcRenderer/ArcRendering.d.ts +2 -1
- package/esm/ArcRenderer/ArcRendering.js +10 -10
- package/esm/ArcRenderer/index.d.ts +1 -2
- package/esm/ArcRenderer/index.js +2 -2
- package/esm/ArcTooltip.js +1 -0
- package/esm/LinearArcDisplay/configSchema.d.ts +5 -0
- package/esm/LinearArcDisplay/index.d.ts +1 -2
- package/esm/LinearArcDisplay/index.js +2 -2
- package/esm/LinearArcDisplay/model.d.ts +24 -21
- package/esm/LinearPairedArcDisplay/components/Arcs.js +4 -4
- package/esm/LinearPairedArcDisplay/configSchema.d.ts +5 -0
- package/package.json +2 -2
|
@@ -4,6 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const FeatureRendererType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType"));
|
|
7
|
-
class
|
|
7
|
+
class ArcRenderer extends FeatureRendererType_1.default {
|
|
8
8
|
}
|
|
9
|
-
exports.default =
|
|
9
|
+
exports.default = ArcRenderer;
|
|
@@ -1,7 +1,7 @@
|
|
|
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, displayModel: { selectedFeatureId }, }: {
|
|
4
|
+
declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, onFeatureClick, displayModel: { selectedFeatureId }, }: {
|
|
5
5
|
features: Map<string, Feature>;
|
|
6
6
|
config: AnyConfigurationModel;
|
|
7
7
|
regions: Region[];
|
|
@@ -10,6 +10,7 @@ declare const ArcRendering: ({ features, config, regions, bpPerPx, height, expor
|
|
|
10
10
|
displayModel: {
|
|
11
11
|
selectedFeatureId: string;
|
|
12
12
|
};
|
|
13
|
+
onFeatureClick: (event: React.MouseEvent, featureId: string) => void;
|
|
13
14
|
exportSVG: boolean;
|
|
14
15
|
}) => React.JSX.Element;
|
|
15
16
|
export default ArcRendering;
|
|
@@ -46,15 +46,15 @@ function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, featu
|
|
|
46
46
|
const strokeWidth = (0, configuration_1.readConfObject)(config, 'thickness', { feature }) || 1;
|
|
47
47
|
const height = (0, configuration_1.readConfObject)(config, 'height', { feature }) || 100;
|
|
48
48
|
const ref = react_1.default.createRef();
|
|
49
|
-
const t = 0.5;
|
|
50
49
|
// formula: https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B%C3%A9zier_curves
|
|
50
|
+
const t = 0.5;
|
|
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", { d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`,
|
|
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" }),
|
|
55
55
|
isMouseOvered ? react_1.default.createElement(ArcTooltip_1.default, { contents: caption }) : null,
|
|
56
|
-
react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3,
|
|
57
|
-
react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3,
|
|
56
|
+
react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
|
|
57
|
+
react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
|
|
58
58
|
}
|
|
59
59
|
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
|
|
60
60
|
const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
|
|
@@ -96,16 +96,16 @@ function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClic
|
|
|
96
96
|
const ref = react_1.default.createRef();
|
|
97
97
|
const textYCoord = (right - left) / 2;
|
|
98
98
|
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),
|
|
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" }),
|
|
100
100
|
isMouseOvered ? react_1.default.createElement(ArcTooltip_1.default, { contents: caption }) : null,
|
|
101
|
-
react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3,
|
|
102
|
-
react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3,
|
|
101
|
+
react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
|
|
102
|
+
react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
|
|
103
103
|
}
|
|
104
|
-
const ArcRendering = (0, mobx_react_1.observer)(function ({ features, config, regions, bpPerPx, height, exportSVG, displayModel: { selectedFeatureId }, }) {
|
|
104
|
+
const ArcRendering = (0, mobx_react_1.observer)(function ({ features, config, regions, bpPerPx, height, exportSVG, onFeatureClick, displayModel: { selectedFeatureId }, }) {
|
|
105
105
|
const [region] = regions;
|
|
106
106
|
const width = (region.end - region.start) / bpPerPx;
|
|
107
107
|
const semicircles = (0, configuration_1.readConfObject)(config, 'displayMode') === 'semicircles';
|
|
108
|
-
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, feature: f })) : (react_1.default.createElement(Arc, { key: f.id(), config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, feature: f })))));
|
|
108
|
+
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
109
|
});
|
|
110
110
|
function Wrapper({ exportSVG, width, height, children, }) {
|
|
111
111
|
return exportSVG ? (children) : (react_1.default.createElement("svg", { width: width, height: height }, children));
|
|
@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const ArcRendering_1 = __importDefault(require("./ArcRendering"));
|
|
7
7
|
const configSchema_1 = __importDefault(require("./configSchema"));
|
|
8
8
|
const ArcRenderer_1 = __importDefault(require("./ArcRenderer"));
|
|
9
|
-
|
|
9
|
+
function ArcRendererF(pluginManager) {
|
|
10
10
|
pluginManager.addRendererType(() => new ArcRenderer_1.default({
|
|
11
11
|
name: 'ArcRenderer',
|
|
12
12
|
ReactComponent: ArcRendering_1.default,
|
|
13
13
|
configSchema: configSchema_1.default,
|
|
14
14
|
pluginManager,
|
|
15
15
|
}));
|
|
16
|
-
}
|
|
16
|
+
}
|
|
17
|
+
exports.default = ArcRendererF;
|
package/dist/ArcTooltip.js
CHANGED
|
@@ -36,6 +36,7 @@ const ArcTooltip = (0, mobx_react_1.observer)(function ({ contents }) {
|
|
|
36
36
|
const { theme, classes } = useStyles();
|
|
37
37
|
const { refs, floatingStyles, context } = (0, react_2.useFloating)({
|
|
38
38
|
placement: 'right',
|
|
39
|
+
strategy: 'fixed',
|
|
39
40
|
});
|
|
40
41
|
const clientPoint = (0, react_2.useClientPoint)(context);
|
|
41
42
|
const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
|
|
@@ -29,4 +29,9 @@ export declare function configSchemaFactory(pluginManager: PluginManager): impor
|
|
|
29
29
|
defaultValue: string;
|
|
30
30
|
contextVariable: string[];
|
|
31
31
|
};
|
|
32
|
+
jexlFilters: {
|
|
33
|
+
type: string;
|
|
34
|
+
description: string;
|
|
35
|
+
defaultValue: never[];
|
|
36
|
+
};
|
|
32
37
|
}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
|
|
@@ -4,7 +4,7 @@ const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
|
|
|
4
4
|
const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
|
|
5
5
|
const configSchema_1 = require("./configSchema");
|
|
6
6
|
const model_1 = require("./model");
|
|
7
|
-
|
|
7
|
+
function LinearArcDisplayF(pluginManager) {
|
|
8
8
|
pluginManager.addDisplayType(() => {
|
|
9
9
|
const configSchema = (0, configSchema_1.configSchemaFactory)(pluginManager);
|
|
10
10
|
return new pluggableElementTypes_1.DisplayType({
|
|
@@ -17,4 +17,5 @@ exports.default = (pluginManager) => {
|
|
|
17
17
|
ReactComponent: plugin_linear_genome_view_1.BaseLinearDisplayComponent,
|
|
18
18
|
});
|
|
19
19
|
});
|
|
20
|
-
}
|
|
20
|
+
}
|
|
21
|
+
exports.default = LinearArcDisplayF;
|
|
@@ -77,24 +77,21 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
77
77
|
maxFeatureScreenDensity: {
|
|
78
78
|
type: string;
|
|
79
79
|
description: string;
|
|
80
|
-
defaultValue: number;
|
|
81
|
-
|
|
82
|
-
*/
|
|
83
|
-
}; /**
|
|
84
|
-
* #property
|
|
85
|
-
*/
|
|
80
|
+
defaultValue: number;
|
|
81
|
+
};
|
|
86
82
|
fetchSizeLimit: {
|
|
87
83
|
type: string;
|
|
88
84
|
defaultValue: number;
|
|
89
|
-
|
|
85
|
+
/**
|
|
90
86
|
* #getter
|
|
91
87
|
*/
|
|
88
|
+
description: string;
|
|
92
89
|
};
|
|
93
90
|
height: {
|
|
94
|
-
type: string;
|
|
95
|
-
defaultValue: number; /**
|
|
91
|
+
type: string; /**
|
|
96
92
|
* #getter
|
|
97
93
|
*/
|
|
94
|
+
defaultValue: number;
|
|
98
95
|
description: string;
|
|
99
96
|
};
|
|
100
97
|
mouseover: {
|
|
@@ -103,6 +100,11 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
103
100
|
defaultValue: string;
|
|
104
101
|
contextVariable: string[];
|
|
105
102
|
};
|
|
103
|
+
jexlFilters: {
|
|
104
|
+
type: string;
|
|
105
|
+
description: string;
|
|
106
|
+
defaultValue: never[];
|
|
107
|
+
};
|
|
106
108
|
}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
|
|
107
109
|
} & {
|
|
108
110
|
/**
|
|
@@ -210,9 +212,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
210
212
|
regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
|
|
211
213
|
} & {
|
|
212
214
|
featureIdUnderMouse: string | undefined;
|
|
213
|
-
contextMenuFeature: import("@jbrowse/core/util").Feature | undefined;
|
|
214
|
-
* #method
|
|
215
|
-
*/
|
|
215
|
+
contextMenuFeature: import("@jbrowse/core/util").Feature | undefined;
|
|
216
216
|
} & {
|
|
217
217
|
readonly blockType: "dynamicBlocks" | "staticBlocks";
|
|
218
218
|
readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
@@ -231,6 +231,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
231
231
|
addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
|
|
232
232
|
deleteBlock(key: string): void;
|
|
233
233
|
selectFeature(feature: import("@jbrowse/core/util").Feature): void;
|
|
234
|
+
navToFeature(feature: import("@jbrowse/core/util").Feature): void;
|
|
234
235
|
clearFeatureSelection(): void;
|
|
235
236
|
setFeatureIdUnderMouse(feature?: string | undefined): void;
|
|
236
237
|
setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature | undefined): void;
|
|
@@ -367,24 +368,21 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
367
368
|
maxFeatureScreenDensity: {
|
|
368
369
|
type: string;
|
|
369
370
|
description: string;
|
|
370
|
-
defaultValue: number;
|
|
371
|
-
|
|
372
|
-
*/
|
|
373
|
-
}; /**
|
|
374
|
-
* #property
|
|
375
|
-
*/
|
|
371
|
+
defaultValue: number;
|
|
372
|
+
};
|
|
376
373
|
fetchSizeLimit: {
|
|
377
374
|
type: string;
|
|
378
375
|
defaultValue: number;
|
|
379
|
-
|
|
376
|
+
/**
|
|
380
377
|
* #getter
|
|
381
378
|
*/
|
|
379
|
+
description: string;
|
|
382
380
|
};
|
|
383
381
|
height: {
|
|
384
|
-
type: string;
|
|
385
|
-
defaultValue: number; /**
|
|
382
|
+
type: string; /**
|
|
386
383
|
* #getter
|
|
387
384
|
*/
|
|
385
|
+
defaultValue: number;
|
|
388
386
|
description: string;
|
|
389
387
|
};
|
|
390
388
|
mouseover: {
|
|
@@ -393,6 +391,11 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
393
391
|
defaultValue: string;
|
|
394
392
|
contextVariable: string[];
|
|
395
393
|
};
|
|
394
|
+
jexlFilters: {
|
|
395
|
+
type: string;
|
|
396
|
+
description: string;
|
|
397
|
+
defaultValue: never[];
|
|
398
|
+
};
|
|
396
399
|
}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
|
|
397
400
|
}>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, {
|
|
398
401
|
id: string;
|
|
@@ -56,9 +56,9 @@ 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,
|
|
60
|
-
k1.mateDirection !== undefined ? (react_1.default.createElement("line", {
|
|
61
|
-
k2.mateDirection !== undefined ? (react_1.default.createElement("line", {
|
|
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,
|
|
62
62
|
mouseOvered ? (react_1.default.createElement(ArcTooltip_1.default, { contents: (0, util_2.makeSummary)(feature, alt) })) : null)) : null;
|
|
63
63
|
}
|
|
64
64
|
return null;
|
|
@@ -33,4 +33,9 @@ export declare function configSchemaFactory(): import("@jbrowse/core/configurati
|
|
|
33
33
|
defaultValue: string;
|
|
34
34
|
contextVariable: string[];
|
|
35
35
|
};
|
|
36
|
+
jexlFilters: {
|
|
37
|
+
type: string;
|
|
38
|
+
description: string;
|
|
39
|
+
defaultValue: never[];
|
|
40
|
+
};
|
|
36
41
|
}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
|
|
@@ -1,7 +1,7 @@
|
|
|
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, displayModel: { selectedFeatureId }, }: {
|
|
4
|
+
declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, onFeatureClick, displayModel: { selectedFeatureId }, }: {
|
|
5
5
|
features: Map<string, Feature>;
|
|
6
6
|
config: AnyConfigurationModel;
|
|
7
7
|
regions: Region[];
|
|
@@ -10,6 +10,7 @@ declare const ArcRendering: ({ features, config, regions, bpPerPx, height, expor
|
|
|
10
10
|
displayModel: {
|
|
11
11
|
selectedFeatureId: string;
|
|
12
12
|
};
|
|
13
|
+
onFeatureClick: (event: React.MouseEvent, featureId: string) => void;
|
|
13
14
|
exportSVG: boolean;
|
|
14
15
|
}) => React.JSX.Element;
|
|
15
16
|
export default ArcRendering;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import { readConfObject, } from '@jbrowse/core/configuration';
|
|
3
|
-
import { bpSpanPx } from '@jbrowse/core/util';
|
|
3
|
+
import { bpSpanPx, getStrokeProps } from '@jbrowse/core/util';
|
|
4
4
|
import { observer } from 'mobx-react';
|
|
5
5
|
// locals
|
|
6
6
|
import ArcTooltip from '../ArcTooltip';
|
|
@@ -18,15 +18,15 @@ function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, featu
|
|
|
18
18
|
const strokeWidth = readConfObject(config, 'thickness', { feature }) || 1;
|
|
19
19
|
const height = readConfObject(config, 'height', { feature }) || 100;
|
|
20
20
|
const ref = React.createRef();
|
|
21
|
-
const t = 0.5;
|
|
22
21
|
// formula: https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B%C3%A9zier_curves
|
|
22
|
+
const t = 0.5;
|
|
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", { d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`,
|
|
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" }),
|
|
27
27
|
isMouseOvered ? React.createElement(ArcTooltip, { contents: caption }) : null,
|
|
28
|
-
React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3,
|
|
29
|
-
React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3,
|
|
28
|
+
React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
|
|
29
|
+
React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
|
|
30
30
|
}
|
|
31
31
|
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
|
|
32
32
|
const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
|
|
@@ -68,16 +68,16 @@ function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClic
|
|
|
68
68
|
const ref = React.createRef();
|
|
69
69
|
const textYCoord = (right - left) / 2;
|
|
70
70
|
return (React.createElement("g", null,
|
|
71
|
-
React.createElement("path", { d: describeArc(left + (right - left) / 2, 0, (right - left) / 2, 90, 270), stroke
|
|
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" }),
|
|
72
72
|
isMouseOvered ? React.createElement(ArcTooltip, { contents: caption }) : null,
|
|
73
|
-
React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3,
|
|
74
|
-
React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3,
|
|
73
|
+
React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
|
|
74
|
+
React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
|
|
75
75
|
}
|
|
76
|
-
const ArcRendering = observer(function ({ features, config, regions, bpPerPx, height, exportSVG, displayModel: { selectedFeatureId }, }) {
|
|
76
|
+
const ArcRendering = observer(function ({ features, config, regions, bpPerPx, height, exportSVG, onFeatureClick, displayModel: { selectedFeatureId }, }) {
|
|
77
77
|
const [region] = regions;
|
|
78
78
|
const width = (region.end - region.start) / bpPerPx;
|
|
79
79
|
const semicircles = readConfObject(config, 'displayMode') === 'semicircles';
|
|
80
|
-
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, feature: f })) : (React.createElement(Arc, { key: f.id(), config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, feature: f })))));
|
|
80
|
+
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
81
|
});
|
|
82
82
|
function Wrapper({ exportSVG, width, height, children, }) {
|
|
83
83
|
return exportSVG ? (children) : (React.createElement("svg", { width: width, height: height }, children));
|
package/esm/ArcRenderer/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import ReactComponent from './ArcRendering';
|
|
2
2
|
import configSchema from './configSchema';
|
|
3
3
|
import ArcRenderer from './ArcRenderer';
|
|
4
|
-
export default (pluginManager)
|
|
4
|
+
export default function ArcRendererF(pluginManager) {
|
|
5
5
|
pluginManager.addRendererType(() => new ArcRenderer({
|
|
6
6
|
name: 'ArcRenderer',
|
|
7
7
|
ReactComponent,
|
|
8
8
|
configSchema,
|
|
9
9
|
pluginManager,
|
|
10
10
|
}));
|
|
11
|
-
}
|
|
11
|
+
}
|
package/esm/ArcTooltip.js
CHANGED
|
@@ -31,6 +31,7 @@ const ArcTooltip = observer(function ({ contents }) {
|
|
|
31
31
|
const { theme, classes } = useStyles();
|
|
32
32
|
const { refs, floatingStyles, context } = useFloating({
|
|
33
33
|
placement: 'right',
|
|
34
|
+
strategy: 'fixed',
|
|
34
35
|
});
|
|
35
36
|
const clientPoint = useClientPoint(context);
|
|
36
37
|
const { getFloatingProps } = useInteractions([clientPoint]);
|
|
@@ -29,4 +29,9 @@ export declare function configSchemaFactory(pluginManager: PluginManager): impor
|
|
|
29
29
|
defaultValue: string;
|
|
30
30
|
contextVariable: string[];
|
|
31
31
|
};
|
|
32
|
+
jexlFilters: {
|
|
33
|
+
type: string;
|
|
34
|
+
description: string;
|
|
35
|
+
defaultValue: never[];
|
|
36
|
+
};
|
|
32
37
|
}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
|
|
@@ -2,7 +2,7 @@ import { DisplayType } from '@jbrowse/core/pluggableElementTypes';
|
|
|
2
2
|
import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
|
|
3
3
|
import { configSchemaFactory } from './configSchema';
|
|
4
4
|
import { stateModelFactory } from './model';
|
|
5
|
-
export default (pluginManager)
|
|
5
|
+
export default function LinearArcDisplayF(pluginManager) {
|
|
6
6
|
pluginManager.addDisplayType(() => {
|
|
7
7
|
const configSchema = configSchemaFactory(pluginManager);
|
|
8
8
|
return new DisplayType({
|
|
@@ -15,4 +15,4 @@ export default (pluginManager) => {
|
|
|
15
15
|
ReactComponent: BaseLinearDisplayComponent,
|
|
16
16
|
});
|
|
17
17
|
});
|
|
18
|
-
}
|
|
18
|
+
}
|
|
@@ -77,24 +77,21 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
77
77
|
maxFeatureScreenDensity: {
|
|
78
78
|
type: string;
|
|
79
79
|
description: string;
|
|
80
|
-
defaultValue: number;
|
|
81
|
-
|
|
82
|
-
*/
|
|
83
|
-
}; /**
|
|
84
|
-
* #property
|
|
85
|
-
*/
|
|
80
|
+
defaultValue: number;
|
|
81
|
+
};
|
|
86
82
|
fetchSizeLimit: {
|
|
87
83
|
type: string;
|
|
88
84
|
defaultValue: number;
|
|
89
|
-
|
|
85
|
+
/**
|
|
90
86
|
* #getter
|
|
91
87
|
*/
|
|
88
|
+
description: string;
|
|
92
89
|
};
|
|
93
90
|
height: {
|
|
94
|
-
type: string;
|
|
95
|
-
defaultValue: number; /**
|
|
91
|
+
type: string; /**
|
|
96
92
|
* #getter
|
|
97
93
|
*/
|
|
94
|
+
defaultValue: number;
|
|
98
95
|
description: string;
|
|
99
96
|
};
|
|
100
97
|
mouseover: {
|
|
@@ -103,6 +100,11 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
103
100
|
defaultValue: string;
|
|
104
101
|
contextVariable: string[];
|
|
105
102
|
};
|
|
103
|
+
jexlFilters: {
|
|
104
|
+
type: string;
|
|
105
|
+
description: string;
|
|
106
|
+
defaultValue: never[];
|
|
107
|
+
};
|
|
106
108
|
}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
|
|
107
109
|
} & {
|
|
108
110
|
/**
|
|
@@ -210,9 +212,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
210
212
|
regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
|
|
211
213
|
} & {
|
|
212
214
|
featureIdUnderMouse: string | undefined;
|
|
213
|
-
contextMenuFeature: import("@jbrowse/core/util").Feature | undefined;
|
|
214
|
-
* #method
|
|
215
|
-
*/
|
|
215
|
+
contextMenuFeature: import("@jbrowse/core/util").Feature | undefined;
|
|
216
216
|
} & {
|
|
217
217
|
readonly blockType: "dynamicBlocks" | "staticBlocks";
|
|
218
218
|
readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
@@ -231,6 +231,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
231
231
|
addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
|
|
232
232
|
deleteBlock(key: string): void;
|
|
233
233
|
selectFeature(feature: import("@jbrowse/core/util").Feature): void;
|
|
234
|
+
navToFeature(feature: import("@jbrowse/core/util").Feature): void;
|
|
234
235
|
clearFeatureSelection(): void;
|
|
235
236
|
setFeatureIdUnderMouse(feature?: string | undefined): void;
|
|
236
237
|
setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature | undefined): void;
|
|
@@ -367,24 +368,21 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
367
368
|
maxFeatureScreenDensity: {
|
|
368
369
|
type: string;
|
|
369
370
|
description: string;
|
|
370
|
-
defaultValue: number;
|
|
371
|
-
|
|
372
|
-
*/
|
|
373
|
-
}; /**
|
|
374
|
-
* #property
|
|
375
|
-
*/
|
|
371
|
+
defaultValue: number;
|
|
372
|
+
};
|
|
376
373
|
fetchSizeLimit: {
|
|
377
374
|
type: string;
|
|
378
375
|
defaultValue: number;
|
|
379
|
-
|
|
376
|
+
/**
|
|
380
377
|
* #getter
|
|
381
378
|
*/
|
|
379
|
+
description: string;
|
|
382
380
|
};
|
|
383
381
|
height: {
|
|
384
|
-
type: string;
|
|
385
|
-
defaultValue: number; /**
|
|
382
|
+
type: string; /**
|
|
386
383
|
* #getter
|
|
387
384
|
*/
|
|
385
|
+
defaultValue: number;
|
|
388
386
|
description: string;
|
|
389
387
|
};
|
|
390
388
|
mouseover: {
|
|
@@ -393,6 +391,11 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
393
391
|
defaultValue: string;
|
|
394
392
|
contextVariable: string[];
|
|
395
393
|
};
|
|
394
|
+
jexlFilters: {
|
|
395
|
+
type: string;
|
|
396
|
+
description: string;
|
|
397
|
+
defaultValue: never[];
|
|
398
|
+
};
|
|
396
399
|
}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
|
|
397
400
|
}>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, {
|
|
398
401
|
id: string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useRef, useState } from 'react';
|
|
2
2
|
import { observer } from 'mobx-react';
|
|
3
|
-
import { getContainingView, getSession, } from '@jbrowse/core/util';
|
|
3
|
+
import { getContainingView, getSession, getStrokeProps, } from '@jbrowse/core/util';
|
|
4
4
|
import { getConf } from '@jbrowse/core/configuration';
|
|
5
5
|
import ArcTooltip from '../../ArcTooltip';
|
|
6
6
|
import { makeFeaturePair, makeSummary } from './util';
|
|
@@ -28,9 +28,9 @@ 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,
|
|
32
|
-
k1.mateDirection !== undefined ? (React.createElement("line", {
|
|
33
|
-
k2.mateDirection !== undefined ? (React.createElement("line", {
|
|
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,
|
|
34
34
|
mouseOvered ? (React.createElement(ArcTooltip, { contents: makeSummary(feature, alt) })) : null)) : null;
|
|
35
35
|
}
|
|
36
36
|
return null;
|
|
@@ -33,4 +33,9 @@ export declare function configSchemaFactory(): import("@jbrowse/core/configurati
|
|
|
33
33
|
defaultValue: string;
|
|
34
34
|
contextVariable: string[];
|
|
35
35
|
};
|
|
36
|
+
jexlFilters: {
|
|
37
|
+
type: string;
|
|
38
|
+
description: string;
|
|
39
|
+
defaultValue: never[];
|
|
40
|
+
};
|
|
36
41
|
}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-arc",
|
|
3
|
-
"version": "2.11.
|
|
3
|
+
"version": "2.11.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": "
|
|
56
|
+
"gitHead": "511048cb6965f0bf624c96de244e7fd47fce17d6"
|
|
57
57
|
}
|