@jbrowse/plugin-circular-view 2.18.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/BaseChordDisplay/components/BaseChordDisplay.d.ts +1 -2
- package/dist/BaseChordDisplay/components/BaseChordDisplay.js +3 -3
- package/dist/BaseChordDisplay/components/DisplayError.d.ts +1 -2
- package/dist/BaseChordDisplay/components/DisplayError.js +2 -11
- package/dist/BaseChordDisplay/components/Loading.d.ts +1 -2
- package/dist/BaseChordDisplay/components/Loading.js +3 -32
- package/dist/BaseChordDisplay/model.d.ts +1 -2
- package/dist/BaseChordDisplay/model.js +2 -5
- package/dist/CircularView/components/CircularView.d.ts +1 -2
- package/dist/CircularView/components/CircularView.js +20 -28
- package/dist/CircularView/components/Controls.d.ts +1 -2
- package/dist/CircularView/components/Controls.js +22 -58
- package/dist/CircularView/components/ExportSvgDialog.d.ts +1 -2
- package/dist/CircularView/components/ExportSvgDialog.js +31 -64
- package/dist/CircularView/components/ImportForm.d.ts +1 -2
- package/dist/CircularView/components/ImportForm.js +9 -39
- package/dist/CircularView/components/Ruler.d.ts +1 -2
- package/dist/CircularView/components/Ruler.js +17 -30
- package/dist/CircularView/index.js +17 -7
- package/dist/CircularView/model.js +17 -7
- package/dist/CircularView/svgcomponents/SVGBackground.d.ts +1 -2
- package/dist/CircularView/svgcomponents/SVGBackground.js +2 -5
- package/dist/CircularView/svgcomponents/SVGCircularView.js +3 -10
- package/esm/BaseChordDisplay/components/BaseChordDisplay.d.ts +1 -2
- package/esm/BaseChordDisplay/components/BaseChordDisplay.js +3 -3
- package/esm/BaseChordDisplay/components/DisplayError.d.ts +1 -2
- package/esm/BaseChordDisplay/components/DisplayError.js +2 -8
- package/esm/BaseChordDisplay/components/Loading.d.ts +1 -2
- package/esm/BaseChordDisplay/components/Loading.js +3 -9
- package/esm/BaseChordDisplay/model.d.ts +1 -2
- package/esm/BaseChordDisplay/model.js +2 -2
- package/esm/CircularView/components/CircularView.d.ts +1 -2
- package/esm/CircularView/components/CircularView.js +20 -28
- package/esm/CircularView/components/Controls.d.ts +1 -2
- package/esm/CircularView/components/Controls.js +22 -35
- package/esm/CircularView/components/ExportSvgDialog.d.ts +1 -2
- package/esm/CircularView/components/ExportSvgDialog.js +31 -41
- package/esm/CircularView/components/ImportForm.d.ts +1 -2
- package/esm/CircularView/components/ImportForm.js +9 -16
- package/esm/CircularView/components/Ruler.d.ts +1 -2
- package/esm/CircularView/components/Ruler.js +17 -27
- package/esm/CircularView/svgcomponents/SVGBackground.d.ts +1 -2
- package/esm/CircularView/svgcomponents/SVGBackground.js +2 -2
- package/esm/CircularView/svgcomponents/SVGCircularView.js +3 -10
- package/package.json +2 -2
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
declare const BaseChordDisplay: ({ display, }: {
|
|
3
2
|
display: {
|
|
4
3
|
filled: boolean;
|
|
@@ -8,5 +7,5 @@ declare const BaseChordDisplay: ({ display, }: {
|
|
|
8
7
|
radius: number;
|
|
9
8
|
};
|
|
10
9
|
};
|
|
11
|
-
}) =>
|
|
10
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
12
11
|
export default BaseChordDisplay;
|
|
@@ -3,16 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const
|
|
6
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
7
|
const mobx_react_1 = require("mobx-react");
|
|
8
8
|
const DisplayError_1 = __importDefault(require("./DisplayError"));
|
|
9
9
|
const Loading_1 = __importDefault(require("./Loading"));
|
|
10
10
|
const BaseChordDisplay = (0, mobx_react_1.observer)(function ({ display, }) {
|
|
11
11
|
if (display.error) {
|
|
12
|
-
return
|
|
12
|
+
return (0, jsx_runtime_1.jsx)(DisplayError_1.default, { model: display });
|
|
13
13
|
}
|
|
14
14
|
else if (!display.filled) {
|
|
15
|
-
return
|
|
15
|
+
return (0, jsx_runtime_1.jsx)(Loading_1.default, { model: display });
|
|
16
16
|
}
|
|
17
17
|
else {
|
|
18
18
|
return display.reactElement;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
declare const DisplayError: ({ model, }: {
|
|
3
2
|
model: {
|
|
4
3
|
renderProps: {
|
|
@@ -6,5 +5,5 @@ declare const DisplayError: ({ model, }: {
|
|
|
6
5
|
};
|
|
7
6
|
error: unknown;
|
|
8
7
|
};
|
|
9
|
-
}) =>
|
|
8
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
10
9
|
export default DisplayError;
|
|
@@ -1,18 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
4
|
const mobx_react_1 = require("mobx-react");
|
|
8
5
|
const DisplayError = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
9
6
|
const { renderProps: { radius }, error, } = model;
|
|
10
|
-
return (
|
|
11
|
-
react_1.default.createElement("defs", null,
|
|
12
|
-
react_1.default.createElement("pattern", { id: "diagonalHatch", width: "10", height: "10", patternTransform: "rotate(45 0 0)", patternUnits: "userSpaceOnUse" },
|
|
13
|
-
react_1.default.createElement("line", { x1: "0", y1: "0", x2: "0", y2: "10", style: { stroke: 'rgba(255,0,0,0.5)', strokeWidth: 10 } }))),
|
|
14
|
-
react_1.default.createElement("circle", { cx: "0", cy: "0", r: radius, fill: "#ffb4b4" }),
|
|
15
|
-
react_1.default.createElement("circle", { cx: "0", cy: "0", r: radius, fill: "url(#diagonalHatch)" }),
|
|
16
|
-
react_1.default.createElement("text", { x: "0", y: "0", transform: "rotate(90 0 0)", dominantBaseline: "middle", textAnchor: "middle" }, String(error))));
|
|
7
|
+
return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("pattern", { id: "diagonalHatch", width: "10", height: "10", patternTransform: "rotate(45 0 0)", patternUnits: "userSpaceOnUse", children: (0, jsx_runtime_1.jsx)("line", { x1: "0", y1: "0", x2: "0", y2: "10", style: { stroke: 'rgba(255,0,0,0.5)', strokeWidth: 10 } }) }) }), (0, jsx_runtime_1.jsx)("circle", { cx: "0", cy: "0", r: radius, fill: "#ffb4b4" }), (0, jsx_runtime_1.jsx)("circle", { cx: "0", cy: "0", r: radius, fill: "url(#diagonalHatch)" }), (0, jsx_runtime_1.jsx)("text", { x: "0", y: "0", transform: "rotate(90 0 0)", dominantBaseline: "middle", textAnchor: "middle", children: String(error) })] }));
|
|
17
8
|
});
|
|
18
9
|
exports.default = DisplayError;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
declare const Loading: ({ model: { renderProps: { radius }, }, }: {
|
|
3
2
|
model: {
|
|
4
3
|
renderProps: {
|
|
5
4
|
radius: number;
|
|
6
5
|
};
|
|
7
6
|
};
|
|
8
|
-
}) =>
|
|
7
|
+
}) => import("react/jsx-runtime").JSX.Element | null;
|
|
9
8
|
export default Loading;
|
|
@@ -1,29 +1,7 @@
|
|
|
1
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 (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
const
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
const react_1 = require("react");
|
|
27
5
|
const mobx_react_1 = require("mobx-react");
|
|
28
6
|
const mui_1 = require("tss-react/mui");
|
|
29
7
|
const useStyles = (0, mui_1.makeStyles)()(theme => {
|
|
@@ -79,13 +57,6 @@ const Loading = (0, mobx_react_1.observer)(function ({ model: { renderProps: { r
|
|
|
79
57
|
clearTimeout(timeout);
|
|
80
58
|
};
|
|
81
59
|
});
|
|
82
|
-
return !shown ? null : (
|
|
83
|
-
react_1.default.createElement("defs", null,
|
|
84
|
-
react_1.default.createElement("pattern", { id: "diagonalHatch", width: "10", height: "10", patternTransform: "rotate(45 0 0)", patternUnits: "userSpaceOnUse" },
|
|
85
|
-
react_1.default.createElement("line", { x1: "0", y1: "0", x2: "0", y2: "10", style: { stroke: 'rgba(255,255,255,0.5)', strokeWidth: 10 } }))),
|
|
86
|
-
react_1.default.createElement("circle", { cx: "0", cy: "0", r: radius, fill: "#f1f1f1" }),
|
|
87
|
-
react_1.default.createElement("circle", { cx: "0", cy: "0", r: radius, fill: "url(#diagonalHatch)" }),
|
|
88
|
-
react_1.default.createElement("text", { x: "0", y: "0", transform: "rotate(90 0 0)", dominantBaseline: "middle", textAnchor: "middle" }, "Loading\u2026"),
|
|
89
|
-
react_1.default.createElement("circle", { className: classes.path, fill: "none", strokeWidth: "4", strokeLinecap: "round", cx: "0", cy: "0", r: "60" })));
|
|
60
|
+
return !shown ? null : ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("pattern", { id: "diagonalHatch", width: "10", height: "10", patternTransform: "rotate(45 0 0)", patternUnits: "userSpaceOnUse", children: (0, jsx_runtime_1.jsx)("line", { x1: "0", y1: "0", x2: "0", y2: "10", style: { stroke: 'rgba(255,255,255,0.5)', strokeWidth: 10 } }) }) }), (0, jsx_runtime_1.jsx)("circle", { cx: "0", cy: "0", r: radius, fill: "#f1f1f1" }), (0, jsx_runtime_1.jsx)("circle", { cx: "0", cy: "0", r: radius, fill: "url(#diagonalHatch)" }), (0, jsx_runtime_1.jsx)("text", { x: "0", y: "0", transform: "rotate(90 0 0)", dominantBaseline: "middle", textAnchor: "middle", children: "Loading\u2026" }), (0, jsx_runtime_1.jsx)("circle", { className: classes.path, fill: "none", strokeWidth: "4", strokeLinecap: "round", cx: "0", cy: "0", r: "60" })] }));
|
|
90
61
|
});
|
|
91
62
|
exports.default = Loading;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { ExportSvgOptions } from '../CircularView/model';
|
|
3
2
|
import type { AnyReactComponentType, Feature } from '@jbrowse/core/util';
|
|
4
3
|
import type { ThemeOptions } from '@mui/material';
|
|
@@ -106,5 +105,5 @@ export declare const BaseChordDisplayModel: import("mobx-state-tree").IModelType
|
|
|
106
105
|
} & {
|
|
107
106
|
renderSvg(opts: ExportSvgOptions & {
|
|
108
107
|
theme?: ThemeOptions;
|
|
109
|
-
}): Promise<
|
|
108
|
+
}): Promise<import("react/jsx-runtime").JSX.Element>;
|
|
110
109
|
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.BaseChordDisplayModel = void 0;
|
|
7
|
-
const
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
5
|
const configuration_1 = require("@jbrowse/core/configuration");
|
|
9
6
|
const models_1 = require("@jbrowse/core/pluggableElementTypes/models");
|
|
10
7
|
const util_1 = require("@jbrowse/core/util");
|
|
@@ -164,6 +161,6 @@ exports.BaseChordDisplayModel = mobx_state_tree_1.types
|
|
|
164
161
|
exportSVG: opts,
|
|
165
162
|
theme: opts.theme || data.renderProps.theme,
|
|
166
163
|
});
|
|
167
|
-
return
|
|
164
|
+
return (0, jsx_runtime_1.jsx)(util_1.ReactRendering, { rendering: rendering });
|
|
168
165
|
},
|
|
169
166
|
}));
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { CircularViewModel } from '../model';
|
|
3
2
|
declare const CircularView: ({ model }: {
|
|
4
3
|
model: CircularViewModel;
|
|
5
|
-
}) =>
|
|
4
|
+
}) => import("react/jsx-runtime").JSX.Element | null;
|
|
6
5
|
export default CircularView;
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const
|
|
6
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
7
|
const ui_1 = require("@jbrowse/core/ui");
|
|
8
8
|
const util_1 = require("@jbrowse/core/util");
|
|
9
9
|
const mobx_react_1 = require("mobx-react");
|
|
@@ -23,12 +23,10 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
|
23
23
|
},
|
|
24
24
|
}));
|
|
25
25
|
const Slices = (0, mobx_react_1.observer)(({ model }) => {
|
|
26
|
-
return (
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
return (react_1.default.createElement(display.RenderingComponent, { key: display.id, display: display, view: model }));
|
|
31
|
-
})));
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [model.staticSlices.map(slice => ((0, jsx_runtime_1.jsx)(Ruler_1.default, { model: model, slice: slice }, (0, util_1.assembleLocString)(slice.region.elided ? slice.region.regions[0] : slice.region)))), model.tracks.map(track => {
|
|
27
|
+
const display = track.displays[0];
|
|
28
|
+
return ((0, jsx_runtime_1.jsx)(display.RenderingComponent, { display: display, view: model }, display.id));
|
|
29
|
+
})] }));
|
|
32
30
|
});
|
|
33
31
|
const CircularView = (0, mobx_react_1.observer)(({ model }) => {
|
|
34
32
|
const initialized = !!model.displayedRegions.length &&
|
|
@@ -37,32 +35,26 @@ const CircularView = (0, mobx_react_1.observer)(({ model }) => {
|
|
|
37
35
|
model.initialized;
|
|
38
36
|
const showImportForm = !initialized && !model.disableImportForm;
|
|
39
37
|
const showFigure = initialized && !showImportForm;
|
|
40
|
-
return showImportForm || model.error ? (
|
|
38
|
+
return showImportForm || model.error ? ((0, jsx_runtime_1.jsx)(ImportForm_1.default, { model: model })) : showFigure ? ((0, jsx_runtime_1.jsx)(CircularViewLoaded, { model: model })) : null;
|
|
41
39
|
});
|
|
42
40
|
const CircularViewLoaded = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
43
41
|
const { width, height, id, offsetRadians, centerXY, figureWidth, figureHeight, hideVerticalResizeHandle, } = model;
|
|
44
42
|
const { classes } = useStyles();
|
|
45
|
-
return (
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
43
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: classes.root, style: { width, height }, "data-testid": id, children: [(0, jsx_runtime_1.jsx)("div", { className: classes.scroller, style: { width, height }, children: (0, jsx_runtime_1.jsx)("svg", { style: {
|
|
44
|
+
transform: `rotate(${offsetRadians}rad)`,
|
|
45
|
+
transition: 'transform 0.5s',
|
|
46
|
+
transformOrigin: centerXY.map(x => `${x}px`).join(' '),
|
|
47
|
+
position: 'absolute',
|
|
48
|
+
left: 0,
|
|
49
|
+
top: 0,
|
|
50
|
+
}, width: figureWidth, height: figureHeight, children: (0, jsx_runtime_1.jsx)("g", { transform: `translate(${centerXY})`, children: (0, jsx_runtime_1.jsx)(Slices, { model: model }) }) }) }), (0, jsx_runtime_1.jsx)(Controls_1.default, { model: model }), hideVerticalResizeHandle ? null : ((0, jsx_runtime_1.jsx)(ui_1.ResizeHandle, { onDrag: model.resizeHeight, style: {
|
|
51
|
+
height: dragHandleHeight,
|
|
51
52
|
position: 'absolute',
|
|
53
|
+
bottom: 0,
|
|
52
54
|
left: 0,
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
react_1.default.createElement(Controls_1.default, { model: model }),
|
|
58
|
-
hideVerticalResizeHandle ? null : (react_1.default.createElement(ui_1.ResizeHandle, { onDrag: model.resizeHeight, style: {
|
|
59
|
-
height: dragHandleHeight,
|
|
60
|
-
position: 'absolute',
|
|
61
|
-
bottom: 0,
|
|
62
|
-
left: 0,
|
|
63
|
-
background: '#ccc',
|
|
64
|
-
boxSizing: 'border-box',
|
|
65
|
-
borderTop: '1px solid #fafafa',
|
|
66
|
-
} }))));
|
|
55
|
+
background: '#ccc',
|
|
56
|
+
boxSizing: 'border-box',
|
|
57
|
+
borderTop: '1px solid #fafafa',
|
|
58
|
+
} }))] }));
|
|
67
59
|
});
|
|
68
60
|
exports.default = CircularView;
|
|
@@ -1,32 +1,10 @@
|
|
|
1
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 (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
4
|
};
|
|
28
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
const
|
|
6
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
const react_1 = require("react");
|
|
30
8
|
const Icons_1 = require("@jbrowse/core/ui/Icons");
|
|
31
9
|
const Menu_1 = __importDefault(require("@jbrowse/core/ui/Menu"));
|
|
32
10
|
const util_1 = require("@jbrowse/core/util");
|
|
@@ -54,40 +32,26 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
|
54
32
|
const Controls = (0, mobx_react_1.observer)(function ({ model }) {
|
|
55
33
|
const { classes } = useStyles();
|
|
56
34
|
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
|
|
57
|
-
return (
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
} },
|
|
72
|
-
react_1.default.createElement(MoreVert_1.default, null)),
|
|
73
|
-
model.hideTrackSelectorButton ? null : (react_1.default.createElement(material_1.IconButton, { onClick: model.activateTrackSelector, title: "Open track selector", "data-testid": "circular_track_select" },
|
|
74
|
-
react_1.default.createElement(Icons_1.TrackSelector, null))),
|
|
75
|
-
anchorEl ? (react_1.default.createElement(Menu_1.default, { anchorEl: anchorEl, menuItems: [
|
|
76
|
-
{
|
|
77
|
-
label: 'Export SVG',
|
|
78
|
-
icon: PhotoCamera_1.default,
|
|
79
|
-
onClick: () => {
|
|
80
|
-
(0, util_1.getSession)(model).queueDialog(handleClose => [
|
|
81
|
-
ExportSvgDialog_1.default,
|
|
82
|
-
{ model, handleClose },
|
|
83
|
-
]);
|
|
35
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: classes.controls, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: model.zoomOutButton, title: model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out', disabled: model.atMaxBpPerPx || model.lockedFitToWindow, children: (0, jsx_runtime_1.jsx)(ZoomOut_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: model.zoomInButton, disabled: model.atMinBpPerPx, title: "zoom in", children: (0, jsx_runtime_1.jsx)(ZoomIn_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: model.rotateCounterClockwiseButton, title: "rotate counter-clockwise", children: (0, jsx_runtime_1.jsx)(RotateLeft_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: model.rotateClockwiseButton, title: "rotate clockwise", children: (0, jsx_runtime_1.jsx)(RotateRight_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: model.toggleFitToWindowLock, title: model.lockedFitToWindow
|
|
36
|
+
? 'locked model to window size'
|
|
37
|
+
: 'unlocked model to zoom further', disabled: model.tooSmallToLock, children: model.lockedFitToWindow ? (0, jsx_runtime_1.jsx)(Lock_1.default, {}) : (0, jsx_runtime_1.jsx)(LockOpen_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: event => {
|
|
38
|
+
setAnchorEl(event.currentTarget);
|
|
39
|
+
}, children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, {}) }), model.hideTrackSelectorButton ? null : ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: model.activateTrackSelector, title: "Open track selector", "data-testid": "circular_track_select", children: (0, jsx_runtime_1.jsx)(Icons_1.TrackSelector, {}) })), anchorEl ? ((0, jsx_runtime_1.jsx)(Menu_1.default, { anchorEl: anchorEl, menuItems: [
|
|
40
|
+
{
|
|
41
|
+
label: 'Export SVG',
|
|
42
|
+
icon: PhotoCamera_1.default,
|
|
43
|
+
onClick: () => {
|
|
44
|
+
(0, util_1.getSession)(model).queueDialog(handleClose => [
|
|
45
|
+
ExportSvgDialog_1.default,
|
|
46
|
+
{ model, handleClose },
|
|
47
|
+
]);
|
|
48
|
+
},
|
|
84
49
|
},
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
} })) : null));
|
|
50
|
+
], onMenuItemClick: (_event, callback) => {
|
|
51
|
+
callback();
|
|
52
|
+
setAnchorEl(null);
|
|
53
|
+
}, open: Boolean(anchorEl), onClose: () => {
|
|
54
|
+
setAnchorEl(null);
|
|
55
|
+
} })) : null] }));
|
|
92
56
|
});
|
|
93
57
|
exports.default = Controls;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { ExportSvgOptions } from '../model';
|
|
3
2
|
export default function ExportSvgDialog({ model, handleClose, }: {
|
|
4
3
|
model: {
|
|
5
4
|
exportSvg(opts: ExportSvgOptions): Promise<void>;
|
|
6
5
|
};
|
|
7
6
|
handleClose: () => void;
|
|
8
|
-
}):
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,41 +1,16 @@
|
|
|
1
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 (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
3
|
exports.default = ExportSvgDialog;
|
|
27
|
-
const
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
28
6
|
const ui_1 = require("@jbrowse/core/ui");
|
|
29
7
|
const util_1 = require("@jbrowse/core/util");
|
|
30
8
|
const material_1 = require("@mui/material");
|
|
31
9
|
function LoadingMessage() {
|
|
32
|
-
return (
|
|
33
|
-
react_1.default.createElement(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }),
|
|
34
|
-
react_1.default.createElement(material_1.Typography, { display: "inline" }, "Creating SVG")));
|
|
10
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { display: "inline", children: "Creating SVG" })] }));
|
|
35
11
|
}
|
|
36
12
|
function TextField2({ children, ...rest }) {
|
|
37
|
-
return (
|
|
38
|
-
react_1.default.createElement(material_1.TextField, { ...rest }, children)));
|
|
13
|
+
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { ...rest, children: children }) }));
|
|
39
14
|
}
|
|
40
15
|
function useSvgLocal(key, val) {
|
|
41
16
|
return (0, util_1.useLocalStorage)(`svg-${key}`, val);
|
|
@@ -48,39 +23,31 @@ function ExportSvgDialog({ model, handleClose, }) {
|
|
|
48
23
|
const [error, setError] = (0, react_1.useState)();
|
|
49
24
|
const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
|
|
50
25
|
const [themeName, setThemeName] = useSvgLocal('theme', session.themeName || 'default');
|
|
51
|
-
return (
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
catch (e) {
|
|
79
|
-
console.error(e);
|
|
80
|
-
setError(e);
|
|
81
|
-
}
|
|
82
|
-
finally {
|
|
83
|
-
setLoading(false);
|
|
84
|
-
}
|
|
85
|
-
} }, "Submit"))));
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, onClose: handleClose, title: "Export SVG", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : loading ? ((0, jsx_runtime_1.jsx)(LoadingMessage, {})) : null, (0, jsx_runtime_1.jsx)(TextField2, { helperText: "filename", value: filename, onChange: event => {
|
|
27
|
+
setFilename(event.target.value);
|
|
28
|
+
} }), session.allThemes ? ((0, jsx_runtime_1.jsx)(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => {
|
|
29
|
+
setThemeName(event.target.value);
|
|
30
|
+
}, children: Object.entries(session.allThemes()).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, offscreenCanvas ? ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => {
|
|
31
|
+
setRasterizeLayers(val => !val);
|
|
32
|
+
} }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Note: rasterizing layers not yet supported in this browser, so SVG size may be large" }))] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
|
|
33
|
+
handleClose();
|
|
34
|
+
}, children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
|
|
35
|
+
setLoading(true);
|
|
36
|
+
setError(undefined);
|
|
37
|
+
try {
|
|
38
|
+
await model.exportSvg({
|
|
39
|
+
rasterizeLayers,
|
|
40
|
+
filename,
|
|
41
|
+
themeName,
|
|
42
|
+
});
|
|
43
|
+
handleClose();
|
|
44
|
+
}
|
|
45
|
+
catch (e) {
|
|
46
|
+
console.error(e);
|
|
47
|
+
setError(e);
|
|
48
|
+
}
|
|
49
|
+
finally {
|
|
50
|
+
setLoading(false);
|
|
51
|
+
}
|
|
52
|
+
}, children: "Submit" })] })] }));
|
|
86
53
|
}
|
|
@@ -1,29 +1,7 @@
|
|
|
1
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 (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
const
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
const react_1 = require("react");
|
|
27
5
|
const ui_1 = require("@jbrowse/core/ui");
|
|
28
6
|
const util_1 = require("@jbrowse/core/util");
|
|
29
7
|
const material_1 = require("@mui/material");
|
|
@@ -46,20 +24,12 @@ const ImportForm = (0, mobx_react_1.observer)(function ({ model }) {
|
|
|
46
24
|
: 'No configured assemblies';
|
|
47
25
|
const regions = (assembly === null || assembly === void 0 ? void 0 : assembly.regions) || [];
|
|
48
26
|
const err = assemblyError || error;
|
|
49
|
-
return (
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
model.setError(undefined);
|
|
57
|
-
setSelectedAsm(val);
|
|
58
|
-
}, session: session, selected: selectedAsm })),
|
|
59
|
-
react_1.default.createElement(material_1.Grid, { item: true },
|
|
60
|
-
react_1.default.createElement(material_1.Button, { disabled: !regions.length, onClick: () => {
|
|
61
|
-
model.setError(undefined);
|
|
62
|
-
model.setDisplayedRegions(regions);
|
|
63
|
-
}, variant: "contained", color: "primary" }, regions.length || err ? 'Open' : 'Loading...')))));
|
|
27
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Container, { className: classes.importFormContainer, children: [err ? ((0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", children: (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: err }) }) })) : null, (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(ui_1.AssemblySelector, { onChange: val => {
|
|
28
|
+
model.setError(undefined);
|
|
29
|
+
setSelectedAsm(val);
|
|
30
|
+
}, session: session, selected: selectedAsm }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { disabled: !regions.length, onClick: () => {
|
|
31
|
+
model.setError(undefined);
|
|
32
|
+
model.setDisplayedRegions(regions);
|
|
33
|
+
}, variant: "contained", color: "primary", children: regions.length || err ? 'Open' : 'Loading...' }) })] })] }));
|
|
64
34
|
});
|
|
65
35
|
exports.default = ImportForm;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { CircularViewModel } from '../model';
|
|
3
2
|
import type { Slice } from '../slices';
|
|
4
3
|
declare const Ruler: ({ model, slice, }: {
|
|
5
4
|
model: CircularViewModel;
|
|
6
5
|
slice: Slice;
|
|
7
|
-
}) =>
|
|
6
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
8
7
|
export default Ruler;
|