@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.
- package/dist/ArcRenderer/ArcRendering.d.ts +3 -4
- package/dist/ArcRenderer/ArcRendering.js +37 -37
- package/dist/ArcRenderer/configSchema.d.ts +0 -18
- package/dist/ArcRenderer/configSchema.js +1 -22
- package/dist/ArcRenderer/index.d.ts +1 -1
- package/dist/ArcRenderer/index.js +1 -1
- package/dist/ArcTooltip.d.ts +1 -2
- package/dist/ArcTooltip.js +6 -30
- package/dist/LinearArcDisplay/configSchema.d.ts +1 -7
- package/dist/LinearArcDisplay/configSchema.js +1 -10
- package/dist/LinearArcDisplay/index.d.ts +1 -1
- package/dist/LinearArcDisplay/model.d.ts +18 -87
- package/dist/LinearArcDisplay/model.js +2 -40
- package/dist/LinearPairedArcDisplay/afterAttach.d.ts +1 -1
- package/dist/LinearPairedArcDisplay/afterAttach.js +1 -1
- package/dist/LinearPairedArcDisplay/components/Arcs.d.ts +2 -3
- package/dist/LinearPairedArcDisplay/components/Arcs.js +46 -40
- package/dist/LinearPairedArcDisplay/components/BaseDisplayComponent.d.ts +2 -3
- package/dist/LinearPairedArcDisplay/components/BaseDisplayComponent.js +33 -32
- package/dist/LinearPairedArcDisplay/components/ReactComponent.d.ts +2 -3
- package/dist/LinearPairedArcDisplay/components/ReactComponent.js +3 -4
- package/dist/LinearPairedArcDisplay/components/util.d.ts +1 -1
- package/dist/LinearPairedArcDisplay/components/util.js +1 -7
- package/dist/LinearPairedArcDisplay/configSchema.d.ts +0 -6
- package/dist/LinearPairedArcDisplay/configSchema.js +0 -9
- package/dist/LinearPairedArcDisplay/fetchChains.d.ts +1 -1
- package/dist/LinearPairedArcDisplay/fetchChains.js +1 -2
- package/dist/LinearPairedArcDisplay/index.d.ts +1 -1
- package/dist/LinearPairedArcDisplay/index.js +18 -8
- package/dist/LinearPairedArcDisplay/model.d.ts +9 -53
- package/dist/LinearPairedArcDisplay/model.js +19 -48
- package/dist/LinearPairedArcDisplay/renderSvg.d.ts +2 -3
- package/dist/LinearPairedArcDisplay/renderSvg.js +2 -7
- package/dist/LinearPairedArcDisplay/util.d.ts +4 -4
- package/dist/LinearPairedArcDisplay/util.js +3 -14
- package/dist/index.d.ts +1 -1
- package/dist/index.js +3 -3
- package/esm/ArcRenderer/ArcRendering.d.ts +3 -4
- package/esm/ArcRenderer/ArcRendering.js +21 -31
- package/esm/ArcRenderer/configSchema.d.ts +0 -18
- package/esm/ArcRenderer/configSchema.js +1 -22
- package/esm/ArcRenderer/index.d.ts +1 -1
- package/esm/ArcRenderer/index.js +1 -1
- package/esm/ArcTooltip.d.ts +1 -2
- package/esm/ArcTooltip.js +6 -7
- package/esm/LinearArcDisplay/configSchema.d.ts +1 -7
- package/esm/LinearArcDisplay/configSchema.js +1 -10
- package/esm/LinearArcDisplay/index.d.ts +1 -1
- package/esm/LinearArcDisplay/model.d.ts +18 -87
- package/esm/LinearArcDisplay/model.js +3 -41
- package/esm/LinearPairedArcDisplay/afterAttach.d.ts +1 -1
- package/esm/LinearPairedArcDisplay/afterAttach.js +1 -1
- package/esm/LinearPairedArcDisplay/components/Arcs.d.ts +2 -3
- package/esm/LinearPairedArcDisplay/components/Arcs.js +29 -33
- package/esm/LinearPairedArcDisplay/components/BaseDisplayComponent.d.ts +2 -3
- package/esm/LinearPairedArcDisplay/components/BaseDisplayComponent.js +16 -25
- package/esm/LinearPairedArcDisplay/components/ReactComponent.d.ts +2 -3
- package/esm/LinearPairedArcDisplay/components/ReactComponent.js +3 -4
- package/esm/LinearPairedArcDisplay/components/util.d.ts +1 -1
- package/esm/LinearPairedArcDisplay/components/util.js +1 -7
- package/esm/LinearPairedArcDisplay/configSchema.d.ts +0 -6
- package/esm/LinearPairedArcDisplay/configSchema.js +0 -9
- package/esm/LinearPairedArcDisplay/fetchChains.d.ts +1 -1
- package/esm/LinearPairedArcDisplay/fetchChains.js +1 -2
- package/esm/LinearPairedArcDisplay/index.d.ts +1 -1
- package/esm/LinearPairedArcDisplay/index.js +1 -1
- package/esm/LinearPairedArcDisplay/model.d.ts +9 -53
- package/esm/LinearPairedArcDisplay/model.js +3 -42
- package/esm/LinearPairedArcDisplay/renderSvg.d.ts +2 -3
- package/esm/LinearPairedArcDisplay/renderSvg.js +2 -7
- package/esm/LinearPairedArcDisplay/util.d.ts +4 -4
- package/esm/LinearPairedArcDisplay/util.js +3 -14
- package/esm/index.d.ts +1 -1
- package/esm/index.js +3 -3
- 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 (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
|
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<
|
|
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
|
|
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 (
|
|
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 {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
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
|
-
|
|
16
|
-
|
|
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];
|
|
38
|
+
return colors_1.set1[6];
|
|
39
39
|
}
|
|
40
40
|
});
|
|
41
41
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
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
|
-
}) =>
|
|
14
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
16
15
|
export default ArcRendering;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
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 =
|
|
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 (
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
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 =
|
|
65
|
+
const ref = useRef(null);
|
|
72
66
|
const textYCoord = (right - left) / 2;
|
|
73
|
-
return (
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
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 (
|
|
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) : (
|
|
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;
|
package/esm/ArcRenderer/index.js
CHANGED
|
@@ -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',
|
package/esm/ArcTooltip.d.ts
CHANGED
package/esm/ArcTooltip.js
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
import
|
|
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
|
-
|
|
6
|
-
|
|
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 ? (
|
|
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;
|