@jbrowse/plugin-circular-view 2.6.2 → 2.7.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/BaseChordDisplay/components/BaseChordDisplay.d.ts +2 -2
- package/dist/BaseChordDisplay/components/BaseChordDisplay.js +2 -1
- package/dist/BaseChordDisplay/models/renderReaction.d.ts +20 -2
- package/dist/CircularView/components/Controls.d.ts +2 -2
- package/dist/CircularView/components/Controls.js +2 -1
- package/dist/CircularView/components/Ruler.d.ts +2 -2
- package/dist/CircularView/components/Ruler.js +2 -1
- package/dist/CircularView/models/slices.d.ts +4 -4
- package/dist/CircularView/models/viewportVisibleRegion.js +2 -4
- package/dist/CircularView/svgcomponents/SVGBackground.js +2 -1
- package/dist/LaunchCircularView/index.js +1 -1
- package/esm/BaseChordDisplay/components/BaseChordDisplay.d.ts +2 -2
- package/esm/BaseChordDisplay/components/BaseChordDisplay.js +2 -1
- package/esm/BaseChordDisplay/models/renderReaction.d.ts +20 -2
- package/esm/CircularView/components/Controls.d.ts +2 -2
- package/esm/CircularView/components/Controls.js +2 -1
- package/esm/CircularView/components/Ruler.d.ts +2 -2
- package/esm/CircularView/components/Ruler.js +2 -1
- package/esm/CircularView/models/slices.d.ts +4 -4
- package/esm/CircularView/models/viewportVisibleRegion.js +2 -4
- package/esm/CircularView/svgcomponents/SVGBackground.js +2 -1
- package/esm/LaunchCircularView/index.js +1 -1
- package/package.json +3 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const
|
|
2
|
+
declare const BaseChordDisplay: ({ display, }: {
|
|
3
3
|
display: {
|
|
4
4
|
filled: boolean;
|
|
5
5
|
error: unknown;
|
|
@@ -9,4 +9,4 @@ declare const _default: ({ display, }: {
|
|
|
9
9
|
};
|
|
10
10
|
};
|
|
11
11
|
}) => React.JSX.Element;
|
|
12
|
-
export default
|
|
12
|
+
export default BaseChordDisplay;
|
|
@@ -8,7 +8,7 @@ const mobx_react_1 = require("mobx-react");
|
|
|
8
8
|
// locals
|
|
9
9
|
const Loading_1 = __importDefault(require("./Loading"));
|
|
10
10
|
const DisplayError_1 = __importDefault(require("./DisplayError"));
|
|
11
|
-
|
|
11
|
+
const BaseChordDisplay = (0, mobx_react_1.observer)(function ({ display, }) {
|
|
12
12
|
if (display.error) {
|
|
13
13
|
return react_1.default.createElement(DisplayError_1.default, { model: display });
|
|
14
14
|
}
|
|
@@ -17,3 +17,4 @@ exports.default = (0, mobx_react_1.observer)(function BaseChordDisplay({ display
|
|
|
17
17
|
}
|
|
18
18
|
return display.reactElement;
|
|
19
19
|
});
|
|
20
|
+
exports.default = BaseChordDisplay;
|
|
@@ -3,10 +3,28 @@ export declare function renderReactionData(self: any): {
|
|
|
3
3
|
rpcManager: import("@jbrowse/core/rpc/RpcManager").default;
|
|
4
4
|
renderProps: any;
|
|
5
5
|
renderArgs: {
|
|
6
|
-
assemblyName:
|
|
6
|
+
assemblyName: string;
|
|
7
7
|
adapterConfig: any;
|
|
8
8
|
rendererType: any;
|
|
9
|
-
regions:
|
|
9
|
+
regions: import("mobx-state-tree").IMSTArray<import("mobx-state-tree").IModelType<{
|
|
10
|
+
refName: import("mobx-state-tree").ISimpleType<string>;
|
|
11
|
+
start: import("mobx-state-tree").ISimpleType<number>;
|
|
12
|
+
end: import("mobx-state-tree").ISimpleType<number>;
|
|
13
|
+
reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
|
|
14
|
+
} & {
|
|
15
|
+
assemblyName: import("mobx-state-tree").ISimpleType<string>;
|
|
16
|
+
}, {
|
|
17
|
+
setRefName(newRefName: string): void;
|
|
18
|
+
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
|
|
19
|
+
refName: import("mobx-state-tree").ISimpleType<string>;
|
|
20
|
+
start: import("mobx-state-tree").ISimpleType<number>;
|
|
21
|
+
end: import("mobx-state-tree").ISimpleType<number>;
|
|
22
|
+
reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
|
|
23
|
+
} & {
|
|
24
|
+
assemblyName: import("mobx-state-tree").ISimpleType<string>;
|
|
25
|
+
}, {
|
|
26
|
+
setRefName(newRefName: string): void;
|
|
27
|
+
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>>;
|
|
10
28
|
blockDefinitions: any;
|
|
11
29
|
sessionId: string;
|
|
12
30
|
timeout: number;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { CircularViewModel } from '../models/CircularView';
|
|
3
|
-
declare const
|
|
3
|
+
declare const Controls: ({ model }: {
|
|
4
4
|
model: CircularViewModel;
|
|
5
5
|
}) => React.JSX.Element;
|
|
6
|
-
export default
|
|
6
|
+
export default Controls;
|
|
@@ -52,7 +52,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
|
52
52
|
top: 0,
|
|
53
53
|
},
|
|
54
54
|
}));
|
|
55
|
-
|
|
55
|
+
const Controls = (0, mobx_react_1.observer)(function ({ model }) {
|
|
56
56
|
const { classes } = useStyles();
|
|
57
57
|
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
|
|
58
58
|
return (react_1.default.createElement("div", { className: classes.controls },
|
|
@@ -87,3 +87,4 @@ exports.default = (0, mobx_react_1.observer)(function ({ model }) {
|
|
|
87
87
|
setAnchorEl(null);
|
|
88
88
|
}, open: Boolean(anchorEl), onClose: () => setAnchorEl(null) })) : null));
|
|
89
89
|
});
|
|
90
|
+
exports.default = Controls;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Slice } from '../models/slices';
|
|
3
3
|
import { CircularViewModel } from '../models/CircularView';
|
|
4
|
-
declare const
|
|
4
|
+
declare const Ruler: ({ model, slice, }: {
|
|
5
5
|
model: CircularViewModel;
|
|
6
6
|
slice: Slice;
|
|
7
7
|
}) => React.JSX.Element;
|
|
8
|
-
export default
|
|
8
|
+
export default Ruler;
|
|
@@ -120,9 +120,10 @@ const RegionRulerArc = (0, mobx_react_1.observer)(function ({ model, slice, regi
|
|
|
120
120
|
react_1.default.createElement(RulerLabel, { text: region.refName, view: model, maxWidthPx: widthPx, radians: centerRadians, radiusPx: radiusPx, color: color }),
|
|
121
121
|
react_1.default.createElement("path", { d: sliceArcPath(slice, radiusPx + 1, region.start, region.end), stroke: color, strokeWidth: 2, fill: "none" })));
|
|
122
122
|
});
|
|
123
|
-
|
|
123
|
+
const Ruler = (0, mobx_react_1.observer)(function ({ model, slice, }) {
|
|
124
124
|
if (slice.region.elided) {
|
|
125
125
|
return (react_1.default.createElement(ElisionRulerArc, { key: (0, util_1.assembleLocString)(slice.region.regions[0]), model: model, region: slice.region, slice: slice }));
|
|
126
126
|
}
|
|
127
127
|
return (react_1.default.createElement(RegionRulerArc, { key: (0, util_1.assembleLocString)(slice.region), region: slice.region, model: model, slice: slice }));
|
|
128
128
|
});
|
|
129
|
+
exports.default = Ruler;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { Region } from '@jbrowse/core/util';
|
|
2
|
-
export
|
|
2
|
+
export interface SliceElidedRegion {
|
|
3
3
|
elided: true;
|
|
4
4
|
widthBp: number;
|
|
5
5
|
regions: Region[];
|
|
6
|
-
}
|
|
7
|
-
export
|
|
6
|
+
}
|
|
7
|
+
export interface SliceNonElidedRegion {
|
|
8
8
|
elided: false;
|
|
9
9
|
widthBp: number;
|
|
10
10
|
start: number;
|
|
11
11
|
end: number;
|
|
12
12
|
refName: string;
|
|
13
13
|
assemblyName: string;
|
|
14
|
-
}
|
|
14
|
+
}
|
|
15
15
|
export type SliceRegion = SliceNonElidedRegion | SliceElidedRegion;
|
|
16
16
|
export declare class Slice {
|
|
17
17
|
region: SliceRegion;
|
|
@@ -86,8 +86,7 @@ function viewportVisibleSection(viewSides, circleCenter, circleRadius) {
|
|
|
86
86
|
[viewR, viewB],
|
|
87
87
|
];
|
|
88
88
|
let maxRho = -Infinity;
|
|
89
|
-
for (
|
|
90
|
-
const [x, y] = vertices[i];
|
|
89
|
+
for (const [x, y] of vertices) {
|
|
91
90
|
const rho = Math.sqrt(x * x + y * y);
|
|
92
91
|
if (rho > maxRho) {
|
|
93
92
|
maxRho = rho;
|
|
@@ -187,9 +186,8 @@ function viewportVisibleSection(viewSides, circleCenter, circleRadius) {
|
|
|
187
186
|
let rhoMax = -Infinity;
|
|
188
187
|
let thetaMin = Infinity;
|
|
189
188
|
let thetaMax = -Infinity;
|
|
190
|
-
for (
|
|
189
|
+
for (const [vx, vy] of vertices) {
|
|
191
190
|
// ignore vertex if outside the viewport
|
|
192
|
-
const [vx, vy] = vertices[i];
|
|
193
191
|
if (vx >= viewL && vx <= viewR && vy >= viewT && vy <= viewB) {
|
|
194
192
|
const [rho, theta] = cartesianToPolar(vx * reflect, vy * reflect);
|
|
195
193
|
// ignore vertex if outside the circle
|
|
@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
const material_1 = require("@mui/material");
|
|
8
|
+
const util_1 = require("@jbrowse/core/util");
|
|
8
9
|
function SVGBackground({ width, height, shift, }) {
|
|
9
10
|
const theme = (0, material_1.useTheme)();
|
|
10
|
-
return (react_1.default.createElement("rect", { width: width + shift * 2, height: height, fill: theme.palette.background.default }));
|
|
11
|
+
return (react_1.default.createElement("rect", { width: width + shift * 2, height: height, fill: (0, util_1.stripAlpha)(theme.palette.background.default) }));
|
|
11
12
|
}
|
|
12
13
|
exports.default = SVGBackground;
|
|
@@ -4,7 +4,7 @@ const mobx_1 = require("mobx");
|
|
|
4
4
|
exports.default = (pluginManager) => {
|
|
5
5
|
pluginManager.addToExtensionPoint('LaunchView-CircularView',
|
|
6
6
|
// @ts-expect-error
|
|
7
|
-
async ({ session, assembly,
|
|
7
|
+
async ({ session, assembly, tracks = [], }) => {
|
|
8
8
|
const { assemblyManager } = session;
|
|
9
9
|
const view = session.addView('CircularView', {});
|
|
10
10
|
await (0, mobx_1.when)(() => view.initialized);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const
|
|
2
|
+
declare const BaseChordDisplay: ({ display, }: {
|
|
3
3
|
display: {
|
|
4
4
|
filled: boolean;
|
|
5
5
|
error: unknown;
|
|
@@ -9,4 +9,4 @@ declare const _default: ({ display, }: {
|
|
|
9
9
|
};
|
|
10
10
|
};
|
|
11
11
|
}) => React.JSX.Element;
|
|
12
|
-
export default
|
|
12
|
+
export default BaseChordDisplay;
|
|
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
|
|
|
3
3
|
// locals
|
|
4
4
|
import Loading from './Loading';
|
|
5
5
|
import DisplayError from './DisplayError';
|
|
6
|
-
|
|
6
|
+
const BaseChordDisplay = observer(function ({ display, }) {
|
|
7
7
|
if (display.error) {
|
|
8
8
|
return React.createElement(DisplayError, { model: display });
|
|
9
9
|
}
|
|
@@ -12,3 +12,4 @@ export default observer(function BaseChordDisplay({ display, }) {
|
|
|
12
12
|
}
|
|
13
13
|
return display.reactElement;
|
|
14
14
|
});
|
|
15
|
+
export default BaseChordDisplay;
|
|
@@ -3,10 +3,28 @@ export declare function renderReactionData(self: any): {
|
|
|
3
3
|
rpcManager: import("@jbrowse/core/rpc/RpcManager").default;
|
|
4
4
|
renderProps: any;
|
|
5
5
|
renderArgs: {
|
|
6
|
-
assemblyName:
|
|
6
|
+
assemblyName: string;
|
|
7
7
|
adapterConfig: any;
|
|
8
8
|
rendererType: any;
|
|
9
|
-
regions:
|
|
9
|
+
regions: import("mobx-state-tree").IMSTArray<import("mobx-state-tree").IModelType<{
|
|
10
|
+
refName: import("mobx-state-tree").ISimpleType<string>;
|
|
11
|
+
start: import("mobx-state-tree").ISimpleType<number>;
|
|
12
|
+
end: import("mobx-state-tree").ISimpleType<number>;
|
|
13
|
+
reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
|
|
14
|
+
} & {
|
|
15
|
+
assemblyName: import("mobx-state-tree").ISimpleType<string>;
|
|
16
|
+
}, {
|
|
17
|
+
setRefName(newRefName: string): void;
|
|
18
|
+
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
|
|
19
|
+
refName: import("mobx-state-tree").ISimpleType<string>;
|
|
20
|
+
start: import("mobx-state-tree").ISimpleType<number>;
|
|
21
|
+
end: import("mobx-state-tree").ISimpleType<number>;
|
|
22
|
+
reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
|
|
23
|
+
} & {
|
|
24
|
+
assemblyName: import("mobx-state-tree").ISimpleType<string>;
|
|
25
|
+
}, {
|
|
26
|
+
setRefName(newRefName: string): void;
|
|
27
|
+
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>>;
|
|
10
28
|
blockDefinitions: any;
|
|
11
29
|
sessionId: string;
|
|
12
30
|
timeout: number;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { CircularViewModel } from '../models/CircularView';
|
|
3
|
-
declare const
|
|
3
|
+
declare const Controls: ({ model }: {
|
|
4
4
|
model: CircularViewModel;
|
|
5
5
|
}) => React.JSX.Element;
|
|
6
|
-
export default
|
|
6
|
+
export default Controls;
|
|
@@ -24,7 +24,7 @@ const useStyles = makeStyles()(theme => ({
|
|
|
24
24
|
top: 0,
|
|
25
25
|
},
|
|
26
26
|
}));
|
|
27
|
-
|
|
27
|
+
const Controls = observer(function ({ model }) {
|
|
28
28
|
const { classes } = useStyles();
|
|
29
29
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
30
30
|
return (React.createElement("div", { className: classes.controls },
|
|
@@ -59,3 +59,4 @@ export default observer(function ({ model }) {
|
|
|
59
59
|
setAnchorEl(null);
|
|
60
60
|
}, open: Boolean(anchorEl), onClose: () => setAnchorEl(null) })) : null));
|
|
61
61
|
});
|
|
62
|
+
export default Controls;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Slice } from '../models/slices';
|
|
3
3
|
import { CircularViewModel } from '../models/CircularView';
|
|
4
|
-
declare const
|
|
4
|
+
declare const Ruler: ({ model, slice, }: {
|
|
5
5
|
model: CircularViewModel;
|
|
6
6
|
slice: Slice;
|
|
7
7
|
}) => React.JSX.Element;
|
|
8
|
-
export default
|
|
8
|
+
export default Ruler;
|
|
@@ -115,9 +115,10 @@ const RegionRulerArc = observer(function ({ model, slice, region, }) {
|
|
|
115
115
|
React.createElement(RulerLabel, { text: region.refName, view: model, maxWidthPx: widthPx, radians: centerRadians, radiusPx: radiusPx, color: color }),
|
|
116
116
|
React.createElement("path", { d: sliceArcPath(slice, radiusPx + 1, region.start, region.end), stroke: color, strokeWidth: 2, fill: "none" })));
|
|
117
117
|
});
|
|
118
|
-
|
|
118
|
+
const Ruler = observer(function ({ model, slice, }) {
|
|
119
119
|
if (slice.region.elided) {
|
|
120
120
|
return (React.createElement(ElisionRulerArc, { key: assembleLocString(slice.region.regions[0]), model: model, region: slice.region, slice: slice }));
|
|
121
121
|
}
|
|
122
122
|
return (React.createElement(RegionRulerArc, { key: assembleLocString(slice.region), region: slice.region, model: model, slice: slice }));
|
|
123
123
|
});
|
|
124
|
+
export default Ruler;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { Region } from '@jbrowse/core/util';
|
|
2
|
-
export
|
|
2
|
+
export interface SliceElidedRegion {
|
|
3
3
|
elided: true;
|
|
4
4
|
widthBp: number;
|
|
5
5
|
regions: Region[];
|
|
6
|
-
}
|
|
7
|
-
export
|
|
6
|
+
}
|
|
7
|
+
export interface SliceNonElidedRegion {
|
|
8
8
|
elided: false;
|
|
9
9
|
widthBp: number;
|
|
10
10
|
start: number;
|
|
11
11
|
end: number;
|
|
12
12
|
refName: string;
|
|
13
13
|
assemblyName: string;
|
|
14
|
-
}
|
|
14
|
+
}
|
|
15
15
|
export type SliceRegion = SliceNonElidedRegion | SliceElidedRegion;
|
|
16
16
|
export declare class Slice {
|
|
17
17
|
region: SliceRegion;
|
|
@@ -81,8 +81,7 @@ export function viewportVisibleSection(viewSides, circleCenter, circleRadius) {
|
|
|
81
81
|
[viewR, viewB],
|
|
82
82
|
];
|
|
83
83
|
let maxRho = -Infinity;
|
|
84
|
-
for (
|
|
85
|
-
const [x, y] = vertices[i];
|
|
84
|
+
for (const [x, y] of vertices) {
|
|
86
85
|
const rho = Math.sqrt(x * x + y * y);
|
|
87
86
|
if (rho > maxRho) {
|
|
88
87
|
maxRho = rho;
|
|
@@ -182,9 +181,8 @@ export function viewportVisibleSection(viewSides, circleCenter, circleRadius) {
|
|
|
182
181
|
let rhoMax = -Infinity;
|
|
183
182
|
let thetaMin = Infinity;
|
|
184
183
|
let thetaMax = -Infinity;
|
|
185
|
-
for (
|
|
184
|
+
for (const [vx, vy] of vertices) {
|
|
186
185
|
// ignore vertex if outside the viewport
|
|
187
|
-
const [vx, vy] = vertices[i];
|
|
188
186
|
if (vx >= viewL && vx <= viewR && vy >= viewT && vy <= viewB) {
|
|
189
187
|
const [rho, theta] = cartesianToPolar(vx * reflect, vy * reflect);
|
|
190
188
|
// ignore vertex if outside the circle
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useTheme } from '@mui/material';
|
|
3
|
+
import { stripAlpha } from '@jbrowse/core/util';
|
|
3
4
|
export default function SVGBackground({ width, height, shift, }) {
|
|
4
5
|
const theme = useTheme();
|
|
5
|
-
return (React.createElement("rect", { width: width + shift * 2, height: height, fill: theme.palette.background.default }));
|
|
6
|
+
return (React.createElement("rect", { width: width + shift * 2, height: height, fill: stripAlpha(theme.palette.background.default) }));
|
|
6
7
|
}
|
|
@@ -2,7 +2,7 @@ import { when } from 'mobx';
|
|
|
2
2
|
export default (pluginManager) => {
|
|
3
3
|
pluginManager.addToExtensionPoint('LaunchView-CircularView',
|
|
4
4
|
// @ts-expect-error
|
|
5
|
-
async ({ session, assembly,
|
|
5
|
+
async ({ session, assembly, tracks = [], }) => {
|
|
6
6
|
const { assemblyManager } = session;
|
|
7
7
|
const view = session.addView('CircularView', {});
|
|
8
8
|
await when(() => view.initialized);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-circular-view",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.7.0",
|
|
4
4
|
"description": "JBrowse 2 circular view",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jbrowse",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"@jbrowse/core": "^2.0.0",
|
|
46
46
|
"@mui/material": "^5.0.0",
|
|
47
47
|
"mobx": "^6.0.0",
|
|
48
|
-
"mobx-react": "^
|
|
48
|
+
"mobx-react": "^9.0.0",
|
|
49
49
|
"mobx-state-tree": "^5.0.0",
|
|
50
50
|
"react": ">=16.8.0",
|
|
51
51
|
"react-dom": ">=16.8.0",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"distModule": "esm/index.js",
|
|
58
58
|
"srcModule": "src/index.ts",
|
|
59
59
|
"module": "esm/index.js",
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "dbe7fb1af01fc89f833d2744635eb44a17365b41"
|
|
61
61
|
}
|