@jbrowse/plugin-circular-view 3.7.0 → 4.0.1
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/CircularView/components/CircularView.d.ts +2 -2
- package/esm/CircularView/components/CircularView.js +21 -15
- package/esm/CircularView/components/Controls.d.ts +2 -2
- package/esm/CircularView/components/Controls.js +3 -3
- package/esm/CircularView/components/ExportSvgDialog.d.ts +1 -1
- package/esm/CircularView/components/ImportForm.d.ts +2 -2
- package/esm/CircularView/components/ImportForm.js +4 -4
- package/esm/CircularView/components/Ruler.d.ts +2 -2
- package/esm/CircularView/components/Ruler.js +7 -7
- package/esm/CircularView/index.js +2 -2
- package/esm/CircularView/model.d.ts +73 -34
- package/esm/CircularView/model.js +146 -54
- package/esm/CircularView/slices.js +9 -1
- package/esm/CircularView/svgcomponents/SVGCircularView.d.ts +1 -1
- package/esm/CircularView/svgcomponents/SVGCircularView.js +3 -4
- package/esm/LaunchCircularView/index.js +6 -12
- package/esm/index.d.ts +1 -2
- package/esm/index.js +4 -7
- package/package.json +26 -32
- package/dist/BaseChordDisplay/components/BaseChordDisplay.d.ts +0 -11
- package/dist/BaseChordDisplay/components/BaseChordDisplay.js +0 -21
- package/dist/BaseChordDisplay/components/DisplayError.d.ts +0 -9
- package/dist/BaseChordDisplay/components/DisplayError.js +0 -9
- package/dist/BaseChordDisplay/components/Loading.d.ts +0 -8
- package/dist/BaseChordDisplay/components/Loading.js +0 -62
- package/dist/BaseChordDisplay/configSchema.d.ts +0 -9
- package/dist/BaseChordDisplay/configSchema.js +0 -16
- package/dist/BaseChordDisplay/index.d.ts +0 -3
- package/dist/BaseChordDisplay/index.js +0 -12
- package/dist/BaseChordDisplay/model.d.ts +0 -109
- package/dist/BaseChordDisplay/model.js +0 -166
- package/dist/BaseChordDisplay/renderReaction.d.ts +0 -27
- package/dist/BaseChordDisplay/renderReaction.js +0 -50
- package/dist/CircularView/components/CircularView.d.ts +0 -5
- package/dist/CircularView/components/CircularView.js +0 -60
- package/dist/CircularView/components/Controls.d.ts +0 -5
- package/dist/CircularView/components/Controls.js +0 -57
- package/dist/CircularView/components/ExportSvgDialog.d.ts +0 -7
- package/dist/CircularView/components/ExportSvgDialog.js +0 -53
- package/dist/CircularView/components/ImportForm.d.ts +0 -5
- package/dist/CircularView/components/ImportForm.js +0 -35
- package/dist/CircularView/components/Ruler.d.ts +0 -7
- package/dist/CircularView/components/Ruler.js +0 -106
- package/dist/CircularView/index.d.ts +0 -2
- package/dist/CircularView/index.js +0 -50
- package/dist/CircularView/model.d.ts +0 -107
- package/dist/CircularView/model.js +0 -376
- package/dist/CircularView/slices.d.ts +0 -45
- package/dist/CircularView/slices.js +0 -57
- package/dist/CircularView/svgcomponents/SVGBackground.d.ts +0 -5
- package/dist/CircularView/svgcomponents/SVGBackground.js +0 -10
- package/dist/CircularView/svgcomponents/SVGCircularView.d.ts +0 -4
- package/dist/CircularView/svgcomponents/SVGCircularView.js +0 -31
- package/dist/CircularView/viewportVisibleRegion.d.ts +0 -6
- package/dist/CircularView/viewportVisibleRegion.js +0 -153
- package/dist/LaunchCircularView/index.d.ts +0 -2
- package/dist/LaunchCircularView/index.js +0 -22
- package/dist/index.d.ts +0 -9
- package/dist/index.js +0 -37
- package/esm/BaseChordDisplay/components/BaseChordDisplay.d.ts +0 -11
- package/esm/BaseChordDisplay/components/BaseChordDisplay.js +0 -16
- package/esm/BaseChordDisplay/components/DisplayError.d.ts +0 -9
- package/esm/BaseChordDisplay/components/DisplayError.js +0 -7
- package/esm/BaseChordDisplay/components/Loading.d.ts +0 -8
- package/esm/BaseChordDisplay/components/Loading.js +0 -60
- package/esm/BaseChordDisplay/configSchema.d.ts +0 -9
- package/esm/BaseChordDisplay/configSchema.js +0 -13
- package/esm/BaseChordDisplay/index.d.ts +0 -3
- package/esm/BaseChordDisplay/index.js +0 -3
- package/esm/BaseChordDisplay/model.d.ts +0 -109
- package/esm/BaseChordDisplay/model.js +0 -163
- package/esm/BaseChordDisplay/renderReaction.d.ts +0 -27
- package/esm/BaseChordDisplay/renderReaction.js +0 -46
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import type { ExportSvgOptions } from '../CircularView/model';
|
|
2
|
-
import type { AnyReactComponentType, Feature } from '@jbrowse/core/util';
|
|
3
|
-
import type { ThemeOptions } from '@mui/material';
|
|
4
|
-
export declare const BaseChordDisplayModel: import("mobx-state-tree").IModelType<{
|
|
5
|
-
id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
|
|
6
|
-
type: import("mobx-state-tree").ISimpleType<string>;
|
|
7
|
-
rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
|
|
8
|
-
} & {
|
|
9
|
-
bezierRadiusRatio: import("mobx-state-tree").IType<number | undefined, number, number>;
|
|
10
|
-
assemblyName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
|
|
11
|
-
configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
|
|
12
|
-
onChordClick: {
|
|
13
|
-
type: string;
|
|
14
|
-
description: string;
|
|
15
|
-
defaultValue: boolean;
|
|
16
|
-
contextVariable: string[];
|
|
17
|
-
};
|
|
18
|
-
}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
|
|
19
|
-
}, {
|
|
20
|
-
rendererTypeName: string;
|
|
21
|
-
error: unknown;
|
|
22
|
-
message: string | undefined;
|
|
23
|
-
} & {
|
|
24
|
-
readonly RenderingComponent: React.FC<{
|
|
25
|
-
model: {
|
|
26
|
-
id: string;
|
|
27
|
-
type: string;
|
|
28
|
-
rpcDriverName: string | undefined;
|
|
29
|
-
} & import("mobx-state-tree/dist/internal").NonEmptyObject & {
|
|
30
|
-
rendererTypeName: string;
|
|
31
|
-
error: unknown;
|
|
32
|
-
message: string | undefined;
|
|
33
|
-
} & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
|
|
34
|
-
id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
|
|
35
|
-
type: import("mobx-state-tree").ISimpleType<string>;
|
|
36
|
-
rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
|
|
37
|
-
}, {
|
|
38
|
-
rendererTypeName: string;
|
|
39
|
-
error: unknown;
|
|
40
|
-
message: string | undefined;
|
|
41
|
-
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
|
|
42
|
-
onHorizontalScroll?: () => void;
|
|
43
|
-
blockState?: Record<string, any>;
|
|
44
|
-
}>;
|
|
45
|
-
readonly DisplayBlurb: React.FC<{
|
|
46
|
-
model: {
|
|
47
|
-
id: string;
|
|
48
|
-
type: string;
|
|
49
|
-
rpcDriverName: string | undefined;
|
|
50
|
-
} & import("mobx-state-tree/dist/internal").NonEmptyObject & {
|
|
51
|
-
rendererTypeName: string;
|
|
52
|
-
error: unknown;
|
|
53
|
-
message: string | undefined;
|
|
54
|
-
} & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
|
|
55
|
-
id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
|
|
56
|
-
type: import("mobx-state-tree").ISimpleType<string>;
|
|
57
|
-
rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
|
|
58
|
-
}, {
|
|
59
|
-
rendererTypeName: string;
|
|
60
|
-
error: unknown;
|
|
61
|
-
message: string | undefined;
|
|
62
|
-
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
|
|
63
|
-
}> | null;
|
|
64
|
-
readonly adapterConfig: any;
|
|
65
|
-
readonly parentTrack: any;
|
|
66
|
-
renderProps(): any;
|
|
67
|
-
readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
|
|
68
|
-
readonly DisplayMessageComponent: undefined | React.FC<any>;
|
|
69
|
-
trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
|
|
70
|
-
readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
|
|
71
|
-
regionCannotBeRendered(): null;
|
|
72
|
-
} & {
|
|
73
|
-
setMessage(arg?: string): void;
|
|
74
|
-
setError(error?: unknown): void;
|
|
75
|
-
setRpcDriverName(rpcDriverName: string): void;
|
|
76
|
-
reload(): void;
|
|
77
|
-
} & {
|
|
78
|
-
filled: boolean;
|
|
79
|
-
reactElement: React.ReactElement | undefined;
|
|
80
|
-
data: undefined;
|
|
81
|
-
html: string | undefined;
|
|
82
|
-
message: string;
|
|
83
|
-
renderingComponent: undefined | AnyReactComponentType;
|
|
84
|
-
refNameMap: Record<string, string> | undefined;
|
|
85
|
-
} & {
|
|
86
|
-
onChordClick(feature: Feature): void;
|
|
87
|
-
} & {
|
|
88
|
-
readonly blockDefinitions: import("../CircularView/slices").Slice[];
|
|
89
|
-
renderProps(): any;
|
|
90
|
-
readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType | undefined;
|
|
91
|
-
readonly selectedFeatureId: string | undefined;
|
|
92
|
-
} & {
|
|
93
|
-
renderStarted(): void;
|
|
94
|
-
renderSuccess({ message, data, reactElement, html, renderingComponent, }: {
|
|
95
|
-
message?: string;
|
|
96
|
-
data?: any;
|
|
97
|
-
html?: string;
|
|
98
|
-
reactElement?: React.ReactElement;
|
|
99
|
-
renderingComponent?: AnyReactComponentType;
|
|
100
|
-
}): void;
|
|
101
|
-
renderError(error: unknown): void;
|
|
102
|
-
setRefNameMap(refNameMap: Record<string, string>): void;
|
|
103
|
-
} & {
|
|
104
|
-
afterAttach(): void;
|
|
105
|
-
} & {
|
|
106
|
-
renderSvg(opts: ExportSvgOptions & {
|
|
107
|
-
theme?: ThemeOptions;
|
|
108
|
-
}): Promise<import("react/jsx-runtime").JSX.Element>;
|
|
109
|
-
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
|
|
@@ -1,166 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.BaseChordDisplayModel = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const configuration_1 = require("@jbrowse/core/configuration");
|
|
6
|
-
const models_1 = require("@jbrowse/core/pluggableElementTypes/models");
|
|
7
|
-
const util_1 = require("@jbrowse/core/util");
|
|
8
|
-
const tracks_1 = require("@jbrowse/core/util/tracks");
|
|
9
|
-
const mobx_state_tree_1 = require("mobx-state-tree");
|
|
10
|
-
const configSchema_1 = require("./configSchema");
|
|
11
|
-
const renderReaction_1 = require("./renderReaction");
|
|
12
|
-
function x() { }
|
|
13
|
-
exports.BaseChordDisplayModel = mobx_state_tree_1.types
|
|
14
|
-
.compose('BaseChordDisplay', models_1.BaseDisplay, mobx_state_tree_1.types.model({
|
|
15
|
-
bezierRadiusRatio: 0.1,
|
|
16
|
-
assemblyName: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
|
|
17
|
-
configuration: (0, configuration_1.ConfigurationReference)(configSchema_1.baseChordDisplayConfig),
|
|
18
|
-
}))
|
|
19
|
-
.volatile(() => ({
|
|
20
|
-
filled: false,
|
|
21
|
-
reactElement: undefined,
|
|
22
|
-
data: undefined,
|
|
23
|
-
html: undefined,
|
|
24
|
-
message: '',
|
|
25
|
-
renderingComponent: undefined,
|
|
26
|
-
refNameMap: undefined,
|
|
27
|
-
}))
|
|
28
|
-
.actions(self => {
|
|
29
|
-
const { pluginManager } = (0, util_1.getEnv)(self);
|
|
30
|
-
const track = self;
|
|
31
|
-
return {
|
|
32
|
-
onChordClick(feature) {
|
|
33
|
-
(0, configuration_1.getConf)(self, 'onChordClick', { feature, track, pluginManager });
|
|
34
|
-
},
|
|
35
|
-
};
|
|
36
|
-
})
|
|
37
|
-
.views(self => ({
|
|
38
|
-
get blockDefinitions() {
|
|
39
|
-
const view = (0, util_1.getContainingView)(self);
|
|
40
|
-
const origSlices = view.staticSlices;
|
|
41
|
-
if (!self.refNameMap) {
|
|
42
|
-
return origSlices;
|
|
43
|
-
}
|
|
44
|
-
const slices = structuredClone(origSlices);
|
|
45
|
-
for (const slice of slices) {
|
|
46
|
-
const regions = slice.region.elided
|
|
47
|
-
? slice.region.regions
|
|
48
|
-
: [slice.region];
|
|
49
|
-
for (const region of regions) {
|
|
50
|
-
const renamed = self.refNameMap[region.refName];
|
|
51
|
-
if (renamed && region.refName !== renamed) {
|
|
52
|
-
region.refName = renamed;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
return slices;
|
|
57
|
-
},
|
|
58
|
-
renderProps() {
|
|
59
|
-
const view = (0, util_1.getContainingView)(self);
|
|
60
|
-
return {
|
|
61
|
-
...(0, tracks_1.getParentRenderProps)(self),
|
|
62
|
-
rpcDriverName: self.rpcDriverName,
|
|
63
|
-
bezierRadius: view.radiusPx * self.bezierRadiusRatio,
|
|
64
|
-
radius: view.radiusPx,
|
|
65
|
-
blockDefinitions: this.blockDefinitions,
|
|
66
|
-
onChordClick: self.onChordClick,
|
|
67
|
-
};
|
|
68
|
-
},
|
|
69
|
-
get rendererType() {
|
|
70
|
-
return (0, util_1.getEnv)(self).pluginManager.getRendererType(self.rendererTypeName);
|
|
71
|
-
},
|
|
72
|
-
get selectedFeatureId() {
|
|
73
|
-
if (!(0, mobx_state_tree_1.isAlive)(self)) {
|
|
74
|
-
return undefined;
|
|
75
|
-
}
|
|
76
|
-
const { selection } = (0, util_1.getSession)(self);
|
|
77
|
-
return (0, util_1.isFeature)(selection) ? selection.id() : undefined;
|
|
78
|
-
},
|
|
79
|
-
}))
|
|
80
|
-
.actions(self => ({
|
|
81
|
-
renderStarted() {
|
|
82
|
-
self.filled = false;
|
|
83
|
-
self.message = '';
|
|
84
|
-
self.reactElement = undefined;
|
|
85
|
-
self.data = undefined;
|
|
86
|
-
self.html = undefined;
|
|
87
|
-
self.error = undefined;
|
|
88
|
-
self.renderingComponent = undefined;
|
|
89
|
-
},
|
|
90
|
-
renderSuccess({ message, data, reactElement, html, renderingComponent, }) {
|
|
91
|
-
if (message) {
|
|
92
|
-
self.filled = false;
|
|
93
|
-
self.message = message;
|
|
94
|
-
self.reactElement = undefined;
|
|
95
|
-
self.data = undefined;
|
|
96
|
-
self.html = undefined;
|
|
97
|
-
self.error = undefined;
|
|
98
|
-
self.renderingComponent = undefined;
|
|
99
|
-
}
|
|
100
|
-
else {
|
|
101
|
-
self.filled = true;
|
|
102
|
-
self.message = '';
|
|
103
|
-
self.reactElement = reactElement;
|
|
104
|
-
self.data = data;
|
|
105
|
-
self.html = html;
|
|
106
|
-
self.error = undefined;
|
|
107
|
-
self.renderingComponent = renderingComponent;
|
|
108
|
-
}
|
|
109
|
-
},
|
|
110
|
-
renderError(error) {
|
|
111
|
-
console.error(error);
|
|
112
|
-
self.filled = false;
|
|
113
|
-
self.message = '';
|
|
114
|
-
self.reactElement = undefined;
|
|
115
|
-
self.html = undefined;
|
|
116
|
-
self.data = undefined;
|
|
117
|
-
self.error = error;
|
|
118
|
-
self.renderingComponent = undefined;
|
|
119
|
-
},
|
|
120
|
-
setRefNameMap(refNameMap) {
|
|
121
|
-
self.refNameMap = refNameMap;
|
|
122
|
-
},
|
|
123
|
-
}))
|
|
124
|
-
.actions(self => ({
|
|
125
|
-
afterAttach() {
|
|
126
|
-
(0, util_1.makeAbortableReaction)(self, renderReaction_1.renderReactionData, renderReaction_1.renderReactionEffect, {
|
|
127
|
-
name: `${self.type} ${self.id} rendering`,
|
|
128
|
-
fireImmediately: true,
|
|
129
|
-
}, self.renderStarted, self.renderSuccess, self.renderError);
|
|
130
|
-
(0, util_1.makeAbortableReaction)(self, () => {
|
|
131
|
-
return {
|
|
132
|
-
assemblyNames: (0, tracks_1.getTrackAssemblyNames)(self.parentTrack),
|
|
133
|
-
adapter: (0, configuration_1.getConf)((0, mobx_state_tree_1.getParent)(self, 2), 'adapter'),
|
|
134
|
-
assemblyManager: (0, util_1.getSession)(self).assemblyManager,
|
|
135
|
-
};
|
|
136
|
-
}, async (args, stopToken) => {
|
|
137
|
-
return args
|
|
138
|
-
? args.assemblyManager.getRefNameMapForAdapter(args.adapter, args.assemblyNames[0], {
|
|
139
|
-
stopToken,
|
|
140
|
-
sessionId: (0, tracks_1.getRpcSessionId)(self),
|
|
141
|
-
})
|
|
142
|
-
: undefined;
|
|
143
|
-
}, {
|
|
144
|
-
name: `${self.type} ${self.id} getting refNames`,
|
|
145
|
-
fireImmediately: true,
|
|
146
|
-
}, () => { }, refNameMap => {
|
|
147
|
-
if (refNameMap) {
|
|
148
|
-
self.setRefNameMap(refNameMap);
|
|
149
|
-
}
|
|
150
|
-
}, error => {
|
|
151
|
-
console.error(error);
|
|
152
|
-
self.setError(error);
|
|
153
|
-
});
|
|
154
|
-
},
|
|
155
|
-
}))
|
|
156
|
-
.views(self => ({
|
|
157
|
-
async renderSvg(opts) {
|
|
158
|
-
const data = (0, renderReaction_1.renderReactionData)(self);
|
|
159
|
-
const rendering = await (0, renderReaction_1.renderReactionEffect)({
|
|
160
|
-
...data,
|
|
161
|
-
exportSVG: opts,
|
|
162
|
-
theme: opts.theme || data.renderProps.theme,
|
|
163
|
-
});
|
|
164
|
-
return (0, jsx_runtime_1.jsx)(util_1.ReactRendering, { rendering: rendering });
|
|
165
|
-
},
|
|
166
|
-
}));
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
export declare function renderReactionData(self: any): {
|
|
2
|
-
rendererType: any;
|
|
3
|
-
rpcManager: import("@jbrowse/core/rpc/RpcManager").default;
|
|
4
|
-
renderProps: any;
|
|
5
|
-
renderArgs: {
|
|
6
|
-
assemblyName: string;
|
|
7
|
-
adapterConfig: any;
|
|
8
|
-
rendererType: any;
|
|
9
|
-
regions: import("@jbrowse/core/util").Region[] & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>>;
|
|
10
|
-
blockDefinitions: any;
|
|
11
|
-
sessionId: string;
|
|
12
|
-
timeout: number;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
export declare function renderReactionEffect(props?: any, stopToken?: string): Promise<{
|
|
16
|
-
message: any;
|
|
17
|
-
html?: undefined;
|
|
18
|
-
data?: undefined;
|
|
19
|
-
reactElement?: undefined;
|
|
20
|
-
renderingComponent?: undefined;
|
|
21
|
-
} | {
|
|
22
|
-
html: any;
|
|
23
|
-
data: any;
|
|
24
|
-
reactElement: any;
|
|
25
|
-
renderingComponent: any;
|
|
26
|
-
message?: undefined;
|
|
27
|
-
}>;
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.renderReactionData = renderReactionData;
|
|
4
|
-
exports.renderReactionEffect = renderReactionEffect;
|
|
5
|
-
const util_1 = require("@jbrowse/core/util");
|
|
6
|
-
const tracks_1 = require("@jbrowse/core/util/tracks");
|
|
7
|
-
function renderReactionData(self) {
|
|
8
|
-
const view = (0, util_1.getContainingView)(self);
|
|
9
|
-
const { rendererType } = self;
|
|
10
|
-
const { rpcManager } = (0, util_1.getSession)(view);
|
|
11
|
-
return {
|
|
12
|
-
rendererType,
|
|
13
|
-
rpcManager,
|
|
14
|
-
renderProps: self.renderProps(),
|
|
15
|
-
renderArgs: {
|
|
16
|
-
assemblyName: view.displayedRegions[0].assemblyName,
|
|
17
|
-
adapterConfig: structuredClone(self.adapterConfig),
|
|
18
|
-
rendererType: rendererType.name,
|
|
19
|
-
regions: structuredClone(view.displayedRegions),
|
|
20
|
-
blockDefinitions: self.blockDefinitions,
|
|
21
|
-
sessionId: (0, tracks_1.getRpcSessionId)(self),
|
|
22
|
-
timeout: 1000000,
|
|
23
|
-
},
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
async function renderReactionEffect(props, stopToken) {
|
|
27
|
-
var _a;
|
|
28
|
-
if (!props) {
|
|
29
|
-
throw new Error('cannot render with no props');
|
|
30
|
-
}
|
|
31
|
-
const { rendererType, rpcManager, cannotBeRenderedReason, renderArgs, renderProps, exportSVG, } = props;
|
|
32
|
-
if (cannotBeRenderedReason) {
|
|
33
|
-
return { message: cannotBeRenderedReason };
|
|
34
|
-
}
|
|
35
|
-
if (!renderProps.radius || !((_a = renderArgs.regions) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
36
|
-
return { message: 'Skipping render' };
|
|
37
|
-
}
|
|
38
|
-
const { html, ...data } = await rendererType.renderInClient(rpcManager, {
|
|
39
|
-
...renderArgs,
|
|
40
|
-
...renderProps,
|
|
41
|
-
exportSVG,
|
|
42
|
-
stopToken,
|
|
43
|
-
});
|
|
44
|
-
return {
|
|
45
|
-
html,
|
|
46
|
-
data,
|
|
47
|
-
reactElement: data.reactElement,
|
|
48
|
-
renderingComponent: rendererType.ReactComponent,
|
|
49
|
-
};
|
|
50
|
-
}
|
|
@@ -1,60 +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 ui_1 = require("@jbrowse/core/ui");
|
|
8
|
-
const util_1 = require("@jbrowse/core/util");
|
|
9
|
-
const mobx_react_1 = require("mobx-react");
|
|
10
|
-
const mui_1 = require("tss-react/mui");
|
|
11
|
-
const Controls_1 = __importDefault(require("./Controls"));
|
|
12
|
-
const ImportForm_1 = __importDefault(require("./ImportForm"));
|
|
13
|
-
const Ruler_1 = __importDefault(require("./Ruler"));
|
|
14
|
-
const dragHandleHeight = 3;
|
|
15
|
-
const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
16
|
-
root: {
|
|
17
|
-
position: 'relative',
|
|
18
|
-
marginBottom: theme.spacing(1),
|
|
19
|
-
overflow: 'hidden',
|
|
20
|
-
},
|
|
21
|
-
scroller: {
|
|
22
|
-
overflow: 'auto',
|
|
23
|
-
},
|
|
24
|
-
}));
|
|
25
|
-
const Slices = (0, mobx_react_1.observer)(({ model }) => {
|
|
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
|
-
})] }));
|
|
30
|
-
});
|
|
31
|
-
const CircularView = (0, mobx_react_1.observer)(({ model }) => {
|
|
32
|
-
const initialized = !!model.displayedRegions.length &&
|
|
33
|
-
!!model.figureWidth &&
|
|
34
|
-
!!model.figureHeight &&
|
|
35
|
-
model.initialized;
|
|
36
|
-
const showImportForm = !initialized && !model.disableImportForm;
|
|
37
|
-
const showFigure = initialized && !showImportForm;
|
|
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;
|
|
39
|
-
});
|
|
40
|
-
const CircularViewLoaded = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
41
|
-
const { width, height, id, offsetRadians, centerXY, figureWidth, figureHeight, hideVerticalResizeHandle, } = model;
|
|
42
|
-
const { classes } = useStyles();
|
|
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,
|
|
52
|
-
position: 'absolute',
|
|
53
|
-
bottom: 0,
|
|
54
|
-
left: 0,
|
|
55
|
-
background: '#ccc',
|
|
56
|
-
boxSizing: 'border-box',
|
|
57
|
-
borderTop: '1px solid #fafafa',
|
|
58
|
-
} }))] }));
|
|
59
|
-
});
|
|
60
|
-
exports.default = CircularView;
|
|
@@ -1,57 +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 Icons_1 = require("@jbrowse/core/ui/Icons");
|
|
9
|
-
const Menu_1 = __importDefault(require("@jbrowse/core/ui/Menu"));
|
|
10
|
-
const util_1 = require("@jbrowse/core/util");
|
|
11
|
-
const Lock_1 = __importDefault(require("@mui/icons-material/Lock"));
|
|
12
|
-
const LockOpen_1 = __importDefault(require("@mui/icons-material/LockOpen"));
|
|
13
|
-
const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
|
|
14
|
-
const PhotoCamera_1 = __importDefault(require("@mui/icons-material/PhotoCamera"));
|
|
15
|
-
const RotateLeft_1 = __importDefault(require("@mui/icons-material/RotateLeft"));
|
|
16
|
-
const RotateRight_1 = __importDefault(require("@mui/icons-material/RotateRight"));
|
|
17
|
-
const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
|
|
18
|
-
const ZoomOut_1 = __importDefault(require("@mui/icons-material/ZoomOut"));
|
|
19
|
-
const material_1 = require("@mui/material");
|
|
20
|
-
const mobx_react_1 = require("mobx-react");
|
|
21
|
-
const mui_1 = require("tss-react/mui");
|
|
22
|
-
const ExportSvgDialog_1 = __importDefault(require("./ExportSvgDialog"));
|
|
23
|
-
const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
24
|
-
controls: {
|
|
25
|
-
position: 'absolute',
|
|
26
|
-
borderRight: `1px solid ${theme.palette.divider}`,
|
|
27
|
-
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
28
|
-
left: 0,
|
|
29
|
-
top: 0,
|
|
30
|
-
},
|
|
31
|
-
}));
|
|
32
|
-
const Controls = (0, mobx_react_1.observer)(function ({ model }) {
|
|
33
|
-
const { classes } = useStyles();
|
|
34
|
-
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
|
|
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
|
-
},
|
|
49
|
-
},
|
|
50
|
-
], onMenuItemClick: (_event, callback) => {
|
|
51
|
-
callback();
|
|
52
|
-
setAnchorEl(null);
|
|
53
|
-
}, open: Boolean(anchorEl), onClose: () => {
|
|
54
|
-
setAnchorEl(null);
|
|
55
|
-
} })) : null] }));
|
|
56
|
-
});
|
|
57
|
-
exports.default = Controls;
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.default = ExportSvgDialog;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_1 = require("react");
|
|
6
|
-
const ui_1 = require("@jbrowse/core/ui");
|
|
7
|
-
const util_1 = require("@jbrowse/core/util");
|
|
8
|
-
const material_1 = require("@mui/material");
|
|
9
|
-
function LoadingMessage() {
|
|
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" })] }));
|
|
11
|
-
}
|
|
12
|
-
function TextField2({ children, ...rest }) {
|
|
13
|
-
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { ...rest, children: children }) }));
|
|
14
|
-
}
|
|
15
|
-
function useSvgLocal(key, val) {
|
|
16
|
-
return (0, util_1.useLocalStorage)(`svg-${key}`, val);
|
|
17
|
-
}
|
|
18
|
-
function ExportSvgDialog({ model, handleClose, }) {
|
|
19
|
-
const session = (0, util_1.getSession)(model);
|
|
20
|
-
const offscreenCanvas = typeof OffscreenCanvas !== 'undefined';
|
|
21
|
-
const [rasterizeLayers, setRasterizeLayers] = (0, react_1.useState)(offscreenCanvas);
|
|
22
|
-
const [loading, setLoading] = (0, react_1.useState)(false);
|
|
23
|
-
const [error, setError] = (0, react_1.useState)();
|
|
24
|
-
const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
|
|
25
|
-
const [themeName, setThemeName] = useSvgLocal('theme', session.themeName || 'default');
|
|
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" })] })] }));
|
|
53
|
-
}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
-
const react_1 = require("react");
|
|
5
|
-
const ui_1 = require("@jbrowse/core/ui");
|
|
6
|
-
const util_1 = require("@jbrowse/core/util");
|
|
7
|
-
const material_1 = require("@mui/material");
|
|
8
|
-
const mobx_react_1 = require("mobx-react");
|
|
9
|
-
const mui_1 = require("tss-react/mui");
|
|
10
|
-
const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
11
|
-
importFormContainer: {
|
|
12
|
-
padding: theme.spacing(6),
|
|
13
|
-
},
|
|
14
|
-
}));
|
|
15
|
-
const ImportForm = (0, mobx_react_1.observer)(function ({ model }) {
|
|
16
|
-
const { classes } = useStyles();
|
|
17
|
-
const session = (0, util_1.getSession)(model);
|
|
18
|
-
const { error } = model;
|
|
19
|
-
const { assemblyNames, assemblyManager } = session;
|
|
20
|
-
const [selectedAsm, setSelectedAsm] = (0, react_1.useState)(assemblyNames[0]);
|
|
21
|
-
const assembly = assemblyManager.get(selectedAsm);
|
|
22
|
-
const assemblyError = assemblyNames.length
|
|
23
|
-
? assembly === null || assembly === void 0 ? void 0 : assembly.error
|
|
24
|
-
: 'No configured assemblies';
|
|
25
|
-
const regions = (assembly === null || assembly === void 0 ? void 0 : assembly.regions) || [];
|
|
26
|
-
const err = assemblyError || error;
|
|
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)(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)(ui_1.AssemblySelector, { onChange: val => {
|
|
28
|
-
model.setError(undefined);
|
|
29
|
-
setSelectedAsm(val);
|
|
30
|
-
}, session: session, selected: selectedAsm }), (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...' })] })] }));
|
|
34
|
-
});
|
|
35
|
-
exports.default = ImportForm;
|