@jbrowse/plugin-arc 3.6.5 → 4.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/esm/ArcRenderer/ArcRendering.d.ts +1 -1
- package/esm/ArcRenderer/ArcRendering.js +31 -54
- package/esm/ArcRenderer/configSchema.d.ts +3 -3
- package/esm/ArcRenderer/configSchema.js +1 -1
- package/esm/ArcRenderer/index.js +4 -4
- package/esm/ArcTooltip.d.ts +1 -1
- package/esm/ArcTooltip.js +1 -1
- package/esm/LinearArcDisplay/configSchema.d.ts +4 -4
- package/esm/LinearArcDisplay/configSchema.js +1 -1
- package/esm/LinearArcDisplay/index.js +2 -2
- package/esm/LinearArcDisplay/model.d.ts +963 -94
- package/esm/LinearArcDisplay/model.js +4 -7
- package/esm/LinearPairedArcDisplay/afterAttach.d.ts +1 -1
- package/esm/LinearPairedArcDisplay/afterAttach.js +2 -2
- package/esm/LinearPairedArcDisplay/components/Arcs.d.ts +1 -1
- package/esm/LinearPairedArcDisplay/components/Arcs.js +9 -11
- package/esm/LinearPairedArcDisplay/components/BaseDisplayComponent.d.ts +1 -1
- package/esm/LinearPairedArcDisplay/components/BaseDisplayComponent.js +7 -38
- package/esm/LinearPairedArcDisplay/components/ErrorActions.d.ts +4 -0
- package/esm/LinearPairedArcDisplay/components/ErrorActions.js +20 -0
- package/esm/LinearPairedArcDisplay/components/ErrorMessage.d.ts +5 -0
- package/esm/LinearPairedArcDisplay/components/ErrorMessage.js +9 -0
- package/esm/LinearPairedArcDisplay/components/LoadingBar.d.ts +5 -0
- package/esm/LinearPairedArcDisplay/components/LoadingBar.js +23 -0
- package/esm/LinearPairedArcDisplay/components/ReactComponent.d.ts +1 -1
- package/esm/LinearPairedArcDisplay/components/ReactComponent.js +3 -3
- package/esm/LinearPairedArcDisplay/components/util.js +6 -8
- package/esm/LinearPairedArcDisplay/configSchema.d.ts +3 -3
- package/esm/LinearPairedArcDisplay/fetchChains.d.ts +2 -2
- package/esm/LinearPairedArcDisplay/fetchChains.js +3 -1
- package/esm/LinearPairedArcDisplay/index.js +5 -4
- package/esm/LinearPairedArcDisplay/model.d.ts +143 -31
- package/esm/LinearPairedArcDisplay/model.js +4 -5
- package/esm/LinearPairedArcDisplay/renderSvg.d.ts +1 -1
- package/esm/LinearPairedArcDisplay/renderSvg.js +1 -1
- package/esm/LinearPairedArcDisplay/util.d.ts +1 -1
- package/esm/LinearPairedArcDisplay/util.js +3 -5
- package/esm/index.js +9 -12
- package/package.json +27 -31
- package/dist/ArcRenderer/ArcRenderer.d.ts +0 -3
- package/dist/ArcRenderer/ArcRenderer.js +0 -9
- package/dist/ArcRenderer/ArcRendering.d.ts +0 -15
- package/dist/ArcRenderer/ArcRendering.js +0 -120
- package/dist/ArcRenderer/configSchema.d.ts +0 -39
- package/dist/ArcRenderer/configSchema.js +0 -44
- package/dist/ArcRenderer/index.d.ts +0 -2
- package/dist/ArcRenderer/index.js +0 -17
- package/dist/ArcTooltip.d.ts +0 -4
- package/dist/ArcTooltip.js +0 -17
- package/dist/LinearArcDisplay/configSchema.d.ts +0 -31
- package/dist/LinearArcDisplay/configSchema.js +0 -14
- package/dist/LinearArcDisplay/index.d.ts +0 -2
- package/dist/LinearArcDisplay/index.js +0 -21
- package/dist/LinearArcDisplay/model.d.ts +0 -327
- package/dist/LinearArcDisplay/model.js +0 -91
- package/dist/LinearPairedArcDisplay/afterAttach.d.ts +0 -2
- package/dist/LinearPairedArcDisplay/afterAttach.js +0 -10
- package/dist/LinearPairedArcDisplay/components/Arcs.d.ts +0 -6
- package/dist/LinearPairedArcDisplay/components/Arcs.js +0 -106
- package/dist/LinearPairedArcDisplay/components/BaseDisplayComponent.d.ts +0 -6
- package/dist/LinearPairedArcDisplay/components/BaseDisplayComponent.js +0 -83
- package/dist/LinearPairedArcDisplay/components/ReactComponent.d.ts +0 -6
- package/dist/LinearPairedArcDisplay/components/ReactComponent.js +0 -13
- package/dist/LinearPairedArcDisplay/components/util.d.ts +0 -17
- package/dist/LinearPairedArcDisplay/components/util.js +0 -66
- package/dist/LinearPairedArcDisplay/configSchema.d.ts +0 -35
- package/dist/LinearPairedArcDisplay/configSchema.js +0 -18
- package/dist/LinearPairedArcDisplay/fetchChains.d.ts +0 -27
- package/dist/LinearPairedArcDisplay/fetchChains.js +0 -21
- package/dist/LinearPairedArcDisplay/index.d.ts +0 -2
- package/dist/LinearPairedArcDisplay/index.js +0 -54
- package/dist/LinearPairedArcDisplay/model.d.ts +0 -129
- package/dist/LinearPairedArcDisplay/model.js +0 -105
- package/dist/LinearPairedArcDisplay/renderSvg.d.ts +0 -4
- package/dist/LinearPairedArcDisplay/renderSvg.js +0 -17
- package/dist/LinearPairedArcDisplay/util.d.ts +0 -27
- package/dist/LinearPairedArcDisplay/util.js +0 -119
- package/dist/index.d.ts +0 -6
- package/dist/index.js +0 -43
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
|
|
2
2
|
import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes';
|
|
3
3
|
import { getContainingTrack, getContainingView, getSession, isSelectionContainer, isSessionModelWithWidgets, } from '@jbrowse/core/util';
|
|
4
|
+
import { types } from '@jbrowse/mobx-state-tree';
|
|
4
5
|
import { FeatureDensityMixin, TrackHeightMixin, } from '@jbrowse/plugin-linear-genome-view';
|
|
5
|
-
import { types } from 'mobx-state-tree';
|
|
6
6
|
export function stateModelFactory(configSchema) {
|
|
7
7
|
return types
|
|
8
8
|
.compose('LinearPairedArcDisplay', BaseDisplay, TrackHeightMixin(), FeatureDensityMixin(), types.model({
|
|
@@ -18,8 +18,7 @@ export function stateModelFactory(configSchema) {
|
|
|
18
18
|
}))
|
|
19
19
|
.views(self => ({
|
|
20
20
|
get displayModeSetting() {
|
|
21
|
-
|
|
22
|
-
return (_a = self.displayMode) !== null && _a !== void 0 ? _a : getConf(self, ['renderer', 'displayMode']);
|
|
21
|
+
return self.displayMode ?? getConf(self, ['renderer', 'displayMode']);
|
|
23
22
|
},
|
|
24
23
|
}))
|
|
25
24
|
.actions(self => ({
|
|
@@ -52,7 +51,7 @@ export function stateModelFactory(configSchema) {
|
|
|
52
51
|
;
|
|
53
52
|
(async () => {
|
|
54
53
|
try {
|
|
55
|
-
const { doAfterAttach } = await import(
|
|
54
|
+
const { doAfterAttach } = await import("./afterAttach.js");
|
|
56
55
|
doAfterAttach(self);
|
|
57
56
|
}
|
|
58
57
|
catch (e) {
|
|
@@ -62,7 +61,7 @@ export function stateModelFactory(configSchema) {
|
|
|
62
61
|
})();
|
|
63
62
|
},
|
|
64
63
|
async renderSvg(opts) {
|
|
65
|
-
const { renderArcSvg } = await import(
|
|
64
|
+
const { renderArcSvg } = await import("./renderSvg.js");
|
|
66
65
|
return renderArcSvg(self, opts);
|
|
67
66
|
},
|
|
68
67
|
}));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { LinearArcDisplayModel } from './model';
|
|
1
|
+
import type { LinearArcDisplayModel } from './model.ts';
|
|
2
2
|
export declare function renderArcSvg(model: LinearArcDisplayModel, _opts: {
|
|
3
3
|
rasterizeLayers?: boolean;
|
|
4
4
|
}): Promise<import("react/jsx-runtime").JSX.Element>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { getContainingView, when } from '@jbrowse/core/util';
|
|
3
|
-
import Arcs from
|
|
3
|
+
import Arcs from "./components/Arcs.js";
|
|
4
4
|
export async function renderArcSvg(model, _opts) {
|
|
5
5
|
await when(() => !model.loading);
|
|
6
6
|
const view = getContainingView(model);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter';
|
|
2
2
|
import type { AugmentedRegion, Feature } from '@jbrowse/core/util';
|
|
3
|
+
import type { IAnyStateTreeNode } from '@jbrowse/mobx-state-tree';
|
|
3
4
|
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: {
|
|
@@ -1,13 +1,12 @@
|
|
|
1
|
+
import { addDisposer, isAlive } from '@jbrowse/mobx-state-tree';
|
|
1
2
|
import { autorun } from 'mobx';
|
|
2
|
-
import { addDisposer, isAlive } from 'mobx-state-tree';
|
|
3
3
|
import { firstValueFrom } from 'rxjs';
|
|
4
4
|
import { toArray } from 'rxjs/operators';
|
|
5
5
|
export function getTag(feature, tag) {
|
|
6
6
|
return feature.get('tags')[tag];
|
|
7
7
|
}
|
|
8
8
|
export function getTagAlt(feature, tag, alt) {
|
|
9
|
-
|
|
10
|
-
return (_a = getTag(feature, tag)) !== null && _a !== void 0 ? _a : getTag(feature, alt);
|
|
9
|
+
return getTag(feature, tag) ?? getTag(feature, alt);
|
|
11
10
|
}
|
|
12
11
|
export const orientationTypes = {
|
|
13
12
|
fr: {
|
|
@@ -67,7 +66,6 @@ export function getColorWGBS(strand, base) {
|
|
|
67
66
|
return '#888';
|
|
68
67
|
}
|
|
69
68
|
export async function fetchSequence(region, adapter) {
|
|
70
|
-
var _a;
|
|
71
69
|
const { start, end, originalRefName, refName } = region;
|
|
72
70
|
const feats = await firstValueFrom(adapter
|
|
73
71
|
.getFeatures({
|
|
@@ -77,7 +75,7 @@ export async function fetchSequence(region, adapter) {
|
|
|
77
75
|
start: Math.max(0, start - 1),
|
|
78
76
|
})
|
|
79
77
|
.pipe(toArray()));
|
|
80
|
-
return
|
|
78
|
+
return feats[0]?.get('seq');
|
|
81
79
|
}
|
|
82
80
|
export function shouldFetchReferenceSequence(type) {
|
|
83
81
|
return type === 'methylation';
|
package/esm/index.js
CHANGED
|
@@ -1,32 +1,29 @@
|
|
|
1
1
|
import Plugin from '@jbrowse/core/Plugin';
|
|
2
2
|
import { set1 } from '@jbrowse/core/ui/colors';
|
|
3
|
-
import ArcRendererF from
|
|
4
|
-
import LinearArcDisplayF from
|
|
5
|
-
import LinearPairedArcDisplayF from
|
|
3
|
+
import ArcRendererF from "./ArcRenderer/index.js";
|
|
4
|
+
import LinearArcDisplayF from "./LinearArcDisplay/index.js";
|
|
5
|
+
import LinearPairedArcDisplayF from "./LinearPairedArcDisplay/index.js";
|
|
6
6
|
export default class ArcPlugin extends Plugin {
|
|
7
|
-
|
|
8
|
-
super(...arguments);
|
|
9
|
-
this.name = 'ArcRenderer';
|
|
10
|
-
}
|
|
7
|
+
name = 'ArcRenderer';
|
|
11
8
|
install(pluginManager) {
|
|
12
9
|
ArcRendererF(pluginManager);
|
|
13
10
|
LinearArcDisplayF(pluginManager);
|
|
14
11
|
LinearPairedArcDisplayF(pluginManager);
|
|
15
12
|
pluginManager.jexl.addFunction('logThickness', (feature, attributeName) => Math.log(feature.get(attributeName) + 1));
|
|
16
13
|
pluginManager.jexl.addFunction('defaultPairedArcColor', (_feature, alt) => {
|
|
17
|
-
if (alt
|
|
14
|
+
if (alt?.startsWith('<DEL')) {
|
|
18
15
|
return set1[0];
|
|
19
16
|
}
|
|
20
|
-
else if (alt
|
|
17
|
+
else if (alt?.startsWith('<DUP')) {
|
|
21
18
|
return set1[1];
|
|
22
19
|
}
|
|
23
|
-
else if (alt
|
|
20
|
+
else if (alt?.startsWith('<INV')) {
|
|
24
21
|
return set1[2];
|
|
25
22
|
}
|
|
26
|
-
else if (alt
|
|
23
|
+
else if (alt?.startsWith('<TRA')) {
|
|
27
24
|
return set1[3];
|
|
28
25
|
}
|
|
29
|
-
else if (alt
|
|
26
|
+
else if (alt?.startsWith('<CNV')) {
|
|
30
27
|
return set1[4];
|
|
31
28
|
}
|
|
32
29
|
else {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-arc",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "JBrowse 2 arc adapters, tracks, etc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jbrowse",
|
|
@@ -15,45 +15,41 @@
|
|
|
15
15
|
"directory": "plugins/arc"
|
|
16
16
|
},
|
|
17
17
|
"author": "JBrowse Team",
|
|
18
|
-
"
|
|
19
|
-
"srcMain": "src/index.ts",
|
|
20
|
-
"main": "dist/index.js",
|
|
18
|
+
"main": "esm/index.js",
|
|
21
19
|
"files": [
|
|
22
|
-
"dist",
|
|
23
20
|
"esm"
|
|
24
21
|
],
|
|
25
|
-
"scripts": {
|
|
26
|
-
"build": "npm-run-all build:*",
|
|
27
|
-
"test": "cd ../..; jest --passWithNoTests plugins/arc",
|
|
28
|
-
"prepublishOnly": "yarn test",
|
|
29
|
-
"prepack": "yarn build && yarn useDist",
|
|
30
|
-
"postpack": "yarn useSrc",
|
|
31
|
-
"useDist": "node ../../scripts/useDist.js",
|
|
32
|
-
"useSrc": "node ../../scripts/useSrc.js",
|
|
33
|
-
"prebuild": "npm run clean",
|
|
34
|
-
"build:esm": "tsc --build tsconfig.build.esm.json",
|
|
35
|
-
"build:commonjs": "tsc --build tsconfig.build.commonjs.json",
|
|
36
|
-
"clean": "rimraf dist esm *.tsbuildinfo"
|
|
37
|
-
},
|
|
38
22
|
"dependencies": {
|
|
39
|
-
"@
|
|
40
|
-
"@jbrowse/
|
|
41
|
-
"@
|
|
42
|
-
"@mui/material": "^7.
|
|
43
|
-
"mobx": "^6.
|
|
44
|
-
"mobx-react": "^9.
|
|
45
|
-
"
|
|
46
|
-
"
|
|
23
|
+
"@gmod/vcf": "^6.1.0",
|
|
24
|
+
"@jbrowse/mobx-state-tree": "^5.5.0",
|
|
25
|
+
"@mui/icons-material": "^7.3.6",
|
|
26
|
+
"@mui/material": "^7.3.6",
|
|
27
|
+
"mobx": "^6.15.0",
|
|
28
|
+
"mobx-react": "^9.2.1",
|
|
29
|
+
"rxjs": "^7.8.2",
|
|
30
|
+
"@jbrowse/plugin-linear-genome-view": "^4.0.0",
|
|
31
|
+
"@jbrowse/core": "^4.0.0"
|
|
47
32
|
},
|
|
48
33
|
"peerDependencies": {
|
|
49
34
|
"react": ">=18.0.0",
|
|
50
35
|
"react-dom": ">=18.0.0"
|
|
51
36
|
},
|
|
52
|
-
"distModule": "esm/index.js",
|
|
53
|
-
"srcModule": "src/index.ts",
|
|
54
|
-
"module": "esm/index.js",
|
|
55
37
|
"publishConfig": {
|
|
56
38
|
"access": "public"
|
|
57
39
|
},
|
|
58
|
-
"
|
|
59
|
-
|
|
40
|
+
"sideEffects": false,
|
|
41
|
+
"scripts": {
|
|
42
|
+
"build": "pnpm run /^build:/",
|
|
43
|
+
"test": "cd ../..; jest --passWithNoTests plugins/arc",
|
|
44
|
+
"prebuild": "pnpm clean",
|
|
45
|
+
"build:esm": "tsc -p tsconfig.build.esm.json",
|
|
46
|
+
"clean": "rimraf esm *.tsbuildinfo"
|
|
47
|
+
},
|
|
48
|
+
"types": "esm/index.d.ts",
|
|
49
|
+
"exports": {
|
|
50
|
+
".": {
|
|
51
|
+
"types": "./esm/index.d.ts",
|
|
52
|
+
"import": "./esm/index.js"
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const FeatureRendererType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType"));
|
|
7
|
-
class ArcRenderer extends FeatureRendererType_1.default {
|
|
8
|
-
}
|
|
9
|
-
exports.default = ArcRenderer;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
|
|
2
|
-
import type { Feature, Region } from '@jbrowse/core/util';
|
|
3
|
-
declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, displayModel, onFeatureClick, }: {
|
|
4
|
-
features: Map<string, Feature>;
|
|
5
|
-
config: AnyConfigurationModel;
|
|
6
|
-
regions: Region[];
|
|
7
|
-
bpPerPx: number;
|
|
8
|
-
height: number;
|
|
9
|
-
displayModel?: {
|
|
10
|
-
selectedFeatureId: string;
|
|
11
|
-
};
|
|
12
|
-
onFeatureClick: (event: React.MouseEvent, featureId: string) => void;
|
|
13
|
-
exportSVG: boolean;
|
|
14
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
-
export default ArcRendering;
|
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
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
|
-
})();
|
|
35
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
37
|
-
const react_1 = require("react");
|
|
38
|
-
const configuration_1 = require("@jbrowse/core/configuration");
|
|
39
|
-
const util_1 = require("@jbrowse/core/util");
|
|
40
|
-
const mobx_react_1 = require("mobx-react");
|
|
41
|
-
const ArcTooltip = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../ArcTooltip'))));
|
|
42
|
-
function Arc({ selectedFeatureId, region, bpPerPx, config, height: displayHeight, feature, onFeatureClick, }) {
|
|
43
|
-
const [isMouseOvered, setIsMouseOvered] = (0, react_1.useState)(false);
|
|
44
|
-
const [left, right] = (0, util_1.bpSpanPx)(feature.get('start'), feature.get('end'), region, bpPerPx);
|
|
45
|
-
const featureId = feature.id();
|
|
46
|
-
const selected = selectedFeatureId && String(selectedFeatureId) === String(feature.id());
|
|
47
|
-
const stroke = selected ? 'red' : (0, configuration_1.readConfObject)(config, 'color', { feature });
|
|
48
|
-
const textStroke = selected ? 'red' : 'black';
|
|
49
|
-
const label = (0, configuration_1.readConfObject)(config, 'label', { feature });
|
|
50
|
-
const caption = (0, configuration_1.readConfObject)(config, 'caption', { feature });
|
|
51
|
-
const strokeWidth = (0, configuration_1.readConfObject)(config, 'thickness', { feature }) || 2;
|
|
52
|
-
const height = Math.min((0, configuration_1.readConfObject)(config, 'height', { feature }) || 100, displayHeight);
|
|
53
|
-
const ref = (0, react_1.useRef)(null);
|
|
54
|
-
const t = 0.5;
|
|
55
|
-
const t1 = 1 - t;
|
|
56
|
-
const textYCoord = 3 * (t1 * t1) * (t * height) + 3 * t1 * (t * t) * height;
|
|
57
|
-
return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("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 => {
|
|
58
|
-
onFeatureClick(e, featureId);
|
|
59
|
-
}, onMouseOver: () => {
|
|
60
|
-
setIsMouseOvered(true);
|
|
61
|
-
}, onMouseLeave: () => {
|
|
62
|
-
setIsMouseOvered(false);
|
|
63
|
-
}, pointerEvents: "stroke" }), isMouseOvered ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(ArcTooltip, { contents: caption }) })) : null, (0, jsx_runtime_1.jsx)("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em", children: label }), (0, jsx_runtime_1.jsx)("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke, children: label })] }));
|
|
64
|
-
}
|
|
65
|
-
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
|
|
66
|
-
const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
|
|
67
|
-
return {
|
|
68
|
-
x: centerX + radius * Math.cos(angleInRadians),
|
|
69
|
-
y: centerY + radius * Math.sin(angleInRadians),
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
function describeArc(x, y, radius, startAngle, endAngle) {
|
|
73
|
-
const start = polarToCartesian(x, y, radius, endAngle);
|
|
74
|
-
const end = polarToCartesian(x, y, radius, startAngle);
|
|
75
|
-
const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
|
|
76
|
-
return [
|
|
77
|
-
'M',
|
|
78
|
-
start.x,
|
|
79
|
-
start.y,
|
|
80
|
-
'A',
|
|
81
|
-
radius,
|
|
82
|
-
radius,
|
|
83
|
-
0,
|
|
84
|
-
largeArcFlag,
|
|
85
|
-
0,
|
|
86
|
-
end.x,
|
|
87
|
-
end.y,
|
|
88
|
-
].join(' ');
|
|
89
|
-
}
|
|
90
|
-
function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, feature, }) {
|
|
91
|
-
const [isMouseOvered, setIsMouseOvered] = (0, react_1.useState)(false);
|
|
92
|
-
const [left, right] = (0, util_1.bpSpanPx)(feature.get('start'), feature.get('end'), region, bpPerPx);
|
|
93
|
-
const featureId = feature.id();
|
|
94
|
-
const selected = selectedFeatureId && String(selectedFeatureId) === String(feature.id());
|
|
95
|
-
const stroke = selected ? 'red' : (0, configuration_1.readConfObject)(config, 'color', { feature });
|
|
96
|
-
const textStroke = selected ? 'red' : 'black';
|
|
97
|
-
const label = (0, configuration_1.readConfObject)(config, 'label', { feature });
|
|
98
|
-
const caption = (0, configuration_1.readConfObject)(config, 'caption', { feature });
|
|
99
|
-
const strokeWidth = (0, configuration_1.readConfObject)(config, 'thickness', { feature }) || 2;
|
|
100
|
-
const ref = (0, react_1.useRef)(null);
|
|
101
|
-
const textYCoord = (right - left) / 2;
|
|
102
|
-
return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: describeArc(left + (right - left) / 2, 0, (right - left) / 2, 90, 270), ...(0, util_1.getStrokeProps)(stroke), strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
|
|
103
|
-
onFeatureClick(e, featureId);
|
|
104
|
-
}, onMouseOver: () => {
|
|
105
|
-
setIsMouseOvered(true);
|
|
106
|
-
}, onMouseLeave: () => {
|
|
107
|
-
setIsMouseOvered(false);
|
|
108
|
-
}, ref: ref, pointerEvents: "stroke" }), isMouseOvered ? (0, jsx_runtime_1.jsx)(ArcTooltip, { contents: caption }) : null, (0, jsx_runtime_1.jsx)("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em", children: label }), (0, jsx_runtime_1.jsx)("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke, children: label })] }));
|
|
109
|
-
}
|
|
110
|
-
const ArcRendering = (0, mobx_react_1.observer)(function ({ features, config, regions, bpPerPx, height, exportSVG, displayModel, onFeatureClick, }) {
|
|
111
|
-
const region = regions[0];
|
|
112
|
-
const width = (region.end - region.start) / bpPerPx;
|
|
113
|
-
const semicircles = (0, configuration_1.readConfObject)(config, 'displayMode') === 'semicircles';
|
|
114
|
-
const { selectedFeatureId } = displayModel || {};
|
|
115
|
-
return ((0, jsx_runtime_1.jsx)(Wrapper, { exportSVG: exportSVG, width: width, height: height, children: [...features.values()].map(f => semicircles ? ((0, jsx_runtime_1.jsx)(SemiCircles, { config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f }, f.id())) : ((0, jsx_runtime_1.jsx)(Arc, { height: height, config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f }, f.id()))) }));
|
|
116
|
-
});
|
|
117
|
-
function Wrapper({ exportSVG, width, height, children, }) {
|
|
118
|
-
return exportSVG ? (children) : ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, children: children }));
|
|
119
|
-
}
|
|
120
|
-
exports.default = ArcRendering;
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
declare const ArcRenderer: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
|
|
2
|
-
color: {
|
|
3
|
-
type: string;
|
|
4
|
-
description: string;
|
|
5
|
-
defaultValue: string;
|
|
6
|
-
contextVariable: string[];
|
|
7
|
-
};
|
|
8
|
-
thickness: {
|
|
9
|
-
type: string;
|
|
10
|
-
description: string;
|
|
11
|
-
defaultValue: string;
|
|
12
|
-
contextVariable: string[];
|
|
13
|
-
};
|
|
14
|
-
label: {
|
|
15
|
-
type: string;
|
|
16
|
-
description: string;
|
|
17
|
-
defaultValue: string;
|
|
18
|
-
contextVariable: string[];
|
|
19
|
-
};
|
|
20
|
-
height: {
|
|
21
|
-
type: string;
|
|
22
|
-
description: string;
|
|
23
|
-
defaultValue: string;
|
|
24
|
-
contextVariable: string[];
|
|
25
|
-
};
|
|
26
|
-
caption: {
|
|
27
|
-
type: string;
|
|
28
|
-
description: string;
|
|
29
|
-
defaultValue: string;
|
|
30
|
-
contextVariable: string[];
|
|
31
|
-
};
|
|
32
|
-
displayMode: {
|
|
33
|
-
type: string;
|
|
34
|
-
defaultValue: string;
|
|
35
|
-
model: import("mobx-state-tree").ISimpleType<string>;
|
|
36
|
-
description: string;
|
|
37
|
-
};
|
|
38
|
-
}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
|
|
39
|
-
export default ArcRenderer;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const configuration_1 = require("@jbrowse/core/configuration");
|
|
4
|
-
const mobx_state_tree_1 = require("mobx-state-tree");
|
|
5
|
-
function x() { }
|
|
6
|
-
const ArcRenderer = (0, configuration_1.ConfigurationSchema)('ArcRenderer', {
|
|
7
|
-
color: {
|
|
8
|
-
type: 'color',
|
|
9
|
-
description: 'the color of the arcs',
|
|
10
|
-
defaultValue: 'darkblue',
|
|
11
|
-
contextVariable: ['feature'],
|
|
12
|
-
},
|
|
13
|
-
thickness: {
|
|
14
|
-
type: 'number',
|
|
15
|
-
description: 'the thickness of the arcs',
|
|
16
|
-
defaultValue: `jexl:logThickness(feature,'score')`,
|
|
17
|
-
contextVariable: ['feature'],
|
|
18
|
-
},
|
|
19
|
-
label: {
|
|
20
|
-
type: 'string',
|
|
21
|
-
description: 'the label to appear at the apex of the arcs',
|
|
22
|
-
defaultValue: `jexl:get(feature,'score')`,
|
|
23
|
-
contextVariable: ['feature'],
|
|
24
|
-
},
|
|
25
|
-
height: {
|
|
26
|
-
type: 'number',
|
|
27
|
-
description: 'the height of the arcs',
|
|
28
|
-
defaultValue: `jexl:log10(get(feature,'end')-get(feature,'start'))*50`,
|
|
29
|
-
contextVariable: ['feature'],
|
|
30
|
-
},
|
|
31
|
-
caption: {
|
|
32
|
-
type: 'string',
|
|
33
|
-
description: 'the caption to appear when hovering over any point on the arcs',
|
|
34
|
-
defaultValue: `jexl:get(feature,'name')`,
|
|
35
|
-
contextVariable: ['feature'],
|
|
36
|
-
},
|
|
37
|
-
displayMode: {
|
|
38
|
-
type: 'enum',
|
|
39
|
-
defaultValue: 'arcs',
|
|
40
|
-
model: mobx_state_tree_1.types.enumeration('DisplayMode', ['arcs', 'semicircles']),
|
|
41
|
-
description: 'render semi-circles instead of arcs',
|
|
42
|
-
},
|
|
43
|
-
}, { explicitlyTyped: true });
|
|
44
|
-
exports.default = ArcRenderer;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.default = ArcRendererF;
|
|
7
|
-
const ArcRenderer_1 = __importDefault(require("./ArcRenderer"));
|
|
8
|
-
const ArcRendering_1 = __importDefault(require("./ArcRendering"));
|
|
9
|
-
const configSchema_1 = __importDefault(require("./configSchema"));
|
|
10
|
-
function ArcRendererF(pluginManager) {
|
|
11
|
-
pluginManager.addRendererType(() => new ArcRenderer_1.default({
|
|
12
|
-
name: 'ArcRenderer',
|
|
13
|
-
ReactComponent: ArcRendering_1.default,
|
|
14
|
-
configSchema: configSchema_1.default,
|
|
15
|
-
pluginManager,
|
|
16
|
-
}));
|
|
17
|
-
}
|
package/dist/ArcTooltip.d.ts
DELETED
package/dist/ArcTooltip.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
-
const react_1 = require("react");
|
|
8
|
-
const ui_1 = require("@jbrowse/core/ui");
|
|
9
|
-
const BaseTooltip_1 = __importDefault(require("@jbrowse/core/ui/BaseTooltip"));
|
|
10
|
-
const mobx_react_1 = require("mobx-react");
|
|
11
|
-
const TooltipContents = (0, react_1.forwardRef)(function TooltipContents2({ message }, ref) {
|
|
12
|
-
return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, react_1.isValidElement)(message) ? (message) : message ? ((0, jsx_runtime_1.jsx)(ui_1.SanitizedHTML, { html: String(message) })) : null }));
|
|
13
|
-
});
|
|
14
|
-
const ArcTooltip = (0, mobx_react_1.observer)(function ({ contents }) {
|
|
15
|
-
return contents ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(BaseTooltip_1.default, { children: (0, jsx_runtime_1.jsx)(TooltipContents, { message: contents }) }) })) : null;
|
|
16
|
-
});
|
|
17
|
-
exports.default = ArcTooltip;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import type PluginManager from '@jbrowse/core/PluginManager';
|
|
2
|
-
export declare function configSchemaFactory(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
|
|
3
|
-
renderer: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IAnyModelType, [undefined]>;
|
|
4
|
-
}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
|
|
5
|
-
maxFeatureScreenDensity: {
|
|
6
|
-
type: string;
|
|
7
|
-
description: string;
|
|
8
|
-
defaultValue: number;
|
|
9
|
-
};
|
|
10
|
-
fetchSizeLimit: {
|
|
11
|
-
type: string;
|
|
12
|
-
defaultValue: number;
|
|
13
|
-
description: string;
|
|
14
|
-
};
|
|
15
|
-
height: {
|
|
16
|
-
type: string;
|
|
17
|
-
defaultValue: number;
|
|
18
|
-
description: string;
|
|
19
|
-
};
|
|
20
|
-
mouseover: {
|
|
21
|
-
type: string;
|
|
22
|
-
description: string;
|
|
23
|
-
defaultValue: string;
|
|
24
|
-
contextVariable: string[];
|
|
25
|
-
};
|
|
26
|
-
jexlFilters: {
|
|
27
|
-
type: string;
|
|
28
|
-
description: string;
|
|
29
|
-
defaultValue: never[];
|
|
30
|
-
};
|
|
31
|
-
}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.configSchemaFactory = configSchemaFactory;
|
|
4
|
-
const configuration_1 = require("@jbrowse/core/configuration");
|
|
5
|
-
const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
|
|
6
|
-
const mobx_state_tree_1 = require("mobx-state-tree");
|
|
7
|
-
function configSchemaFactory(pluginManager) {
|
|
8
|
-
return (0, configuration_1.ConfigurationSchema)('LinearArcDisplay', {
|
|
9
|
-
renderer: mobx_state_tree_1.types.optional(pluginManager.pluggableConfigSchemaType('renderer'), { type: 'ArcRenderer' }),
|
|
10
|
-
}, {
|
|
11
|
-
baseConfiguration: plugin_linear_genome_view_1.baseLinearDisplayConfigSchema,
|
|
12
|
-
explicitlyTyped: true,
|
|
13
|
-
});
|
|
14
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.default = LinearArcDisplayF;
|
|
4
|
-
const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
|
|
5
|
-
const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
|
|
6
|
-
const configSchema_1 = require("./configSchema");
|
|
7
|
-
const model_1 = require("./model");
|
|
8
|
-
function LinearArcDisplayF(pluginManager) {
|
|
9
|
-
pluginManager.addDisplayType(() => {
|
|
10
|
-
const configSchema = (0, configSchema_1.configSchemaFactory)(pluginManager);
|
|
11
|
-
return new pluggableElementTypes_1.DisplayType({
|
|
12
|
-
name: 'LinearArcDisplay',
|
|
13
|
-
displayName: 'Arc display',
|
|
14
|
-
configSchema,
|
|
15
|
-
stateModel: (0, model_1.stateModelFactory)(configSchema),
|
|
16
|
-
trackType: 'FeatureTrack',
|
|
17
|
-
viewType: 'LinearGenomeView',
|
|
18
|
-
ReactComponent: plugin_linear_genome_view_1.BaseLinearDisplayComponent,
|
|
19
|
-
});
|
|
20
|
-
});
|
|
21
|
-
}
|