@jbrowse/plugin-linear-comparative-view 2.11.0 → 2.11.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/dist/LGVSyntenyDisplay/index.d.ts +1 -2
- package/dist/LGVSyntenyDisplay/index.js +3 -2
- package/dist/LinearComparativeDisplay/index.d.ts +1 -2
- package/dist/LinearComparativeDisplay/index.js +3 -2
- package/dist/LinearComparativeView/index.d.ts +1 -2
- package/dist/LinearComparativeView/index.js +3 -2
- package/dist/LinearReadVsRef/index.d.ts +1 -1
- package/dist/LinearReadVsRef/index.js +2 -2
- package/dist/LinearSyntenyDisplay/components/SyntenyTooltip.js +1 -0
- package/dist/LinearSyntenyDisplay/index.d.ts +1 -2
- package/dist/LinearSyntenyDisplay/index.js +3 -2
- package/dist/LinearSyntenyView/index.d.ts +1 -2
- package/dist/LinearSyntenyView/index.js +3 -2
- package/dist/LinearSyntenyView/svgcomponents/SVGLinearSyntenyView.js +9 -6
- package/dist/SyntenyFeatureDetail/index.d.ts +1 -2
- package/dist/SyntenyFeatureDetail/index.js +3 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/esm/LGVSyntenyDisplay/index.d.ts +1 -2
- package/esm/LGVSyntenyDisplay/index.js +2 -2
- package/esm/LinearComparativeDisplay/index.d.ts +1 -2
- package/esm/LinearComparativeDisplay/index.js +2 -2
- package/esm/LinearComparativeView/index.d.ts +1 -2
- package/esm/LinearComparativeView/index.js +2 -2
- package/esm/LinearReadVsRef/index.d.ts +1 -1
- package/esm/LinearReadVsRef/index.js +1 -1
- package/esm/LinearSyntenyDisplay/components/SyntenyTooltip.js +1 -0
- package/esm/LinearSyntenyDisplay/index.d.ts +1 -2
- package/esm/LinearSyntenyDisplay/index.js +2 -2
- package/esm/LinearSyntenyView/index.d.ts +1 -2
- package/esm/LinearSyntenyView/index.js +2 -2
- package/esm/LinearSyntenyView/svgcomponents/SVGLinearSyntenyView.js +10 -7
- package/esm/SyntenyFeatureDetail/index.d.ts +1 -2
- package/esm/SyntenyFeatureDetail/index.js +2 -2
- package/esm/index.d.ts +1 -1
- package/esm/index.js +3 -3
- package/package.json +2 -2
|
@@ -7,7 +7,7 @@ const DisplayType_1 = __importDefault(require("@jbrowse/core/pluggableElementTyp
|
|
|
7
7
|
const configSchemaF_1 = __importDefault(require("./configSchemaF"));
|
|
8
8
|
const model_1 = __importDefault(require("./model"));
|
|
9
9
|
const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
|
|
10
|
-
|
|
10
|
+
function LGVSyntenyDisplayF(pluginManager) {
|
|
11
11
|
pluginManager.addDisplayType(() => {
|
|
12
12
|
const configSchema = (0, configSchemaF_1.default)(pluginManager);
|
|
13
13
|
const stateModel = (0, model_1.default)(configSchema);
|
|
@@ -20,4 +20,5 @@ exports.default = (pluginManager) => {
|
|
|
20
20
|
ReactComponent: plugin_linear_genome_view_1.BaseLinearDisplayComponent,
|
|
21
21
|
});
|
|
22
22
|
});
|
|
23
|
-
}
|
|
23
|
+
}
|
|
24
|
+
exports.default = LGVSyntenyDisplayF;
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const DisplayType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/DisplayType"));
|
|
7
7
|
const configSchemaF_1 = __importDefault(require("./configSchemaF"));
|
|
8
8
|
const stateModelFactory_1 = __importDefault(require("./stateModelFactory"));
|
|
9
|
-
|
|
9
|
+
function LinearComparativeDisplayF(pluginManager) {
|
|
10
10
|
pluginManager.addDisplayType(() => {
|
|
11
11
|
const configSchema = (0, configSchemaF_1.default)(pluginManager);
|
|
12
12
|
return new DisplayType_1.default({
|
|
@@ -20,4 +20,5 @@ exports.default = (pluginManager) => {
|
|
|
20
20
|
},
|
|
21
21
|
});
|
|
22
22
|
});
|
|
23
|
-
}
|
|
23
|
+
}
|
|
24
|
+
exports.default = LinearComparativeDisplayF;
|
|
@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
29
29
|
const react_1 = require("react");
|
|
30
30
|
const ViewType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/ViewType"));
|
|
31
31
|
const model_1 = __importDefault(require("./model"));
|
|
32
|
-
|
|
32
|
+
function LinearComparativeViewF(pluginManager) {
|
|
33
33
|
pluginManager.addViewType(() => {
|
|
34
34
|
return new ViewType_1.default({
|
|
35
35
|
name: 'LinearComparativeView',
|
|
@@ -38,4 +38,5 @@ exports.default = (pluginManager) => {
|
|
|
38
38
|
ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/LinearComparativeView')))),
|
|
39
39
|
});
|
|
40
40
|
});
|
|
41
|
-
}
|
|
41
|
+
}
|
|
42
|
+
exports.default = LinearComparativeViewF;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import PluginManager from '@jbrowse/core/PluginManager';
|
|
2
|
-
export default function (pm: PluginManager): void;
|
|
2
|
+
export default function LinearReadVsRefMenuItemF(pm: PluginManager): void;
|
|
@@ -35,7 +35,7 @@ const ReadVsRefDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __i
|
|
|
35
35
|
function isDisplay(elt) {
|
|
36
36
|
return elt.name === 'LinearPileupDisplay';
|
|
37
37
|
}
|
|
38
|
-
function
|
|
38
|
+
function LinearReadVsRefMenuItemF(pm) {
|
|
39
39
|
pm.addToExtensionPoint('Core-extendPluggableElement', (pluggableElement) => {
|
|
40
40
|
if (!isDisplay(pluggableElement)) {
|
|
41
41
|
return pluggableElement;
|
|
@@ -75,4 +75,4 @@ function default_1(pm) {
|
|
|
75
75
|
return pluggableElement;
|
|
76
76
|
});
|
|
77
77
|
}
|
|
78
|
-
exports.default =
|
|
78
|
+
exports.default = LinearReadVsRefMenuItemF;
|
|
@@ -35,6 +35,7 @@ const SyntenyTooltip = (0, mobx_react_1.observer)(function ({ title }) {
|
|
|
35
35
|
const { classes } = useStyles();
|
|
36
36
|
const { refs, floatingStyles, context } = (0, react_2.useFloating)({
|
|
37
37
|
placement: 'right',
|
|
38
|
+
strategy: 'fixed',
|
|
38
39
|
});
|
|
39
40
|
const clientPoint = (0, react_2.useClientPoint)(context);
|
|
40
41
|
const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
|
|
@@ -31,7 +31,7 @@ const DisplayType_1 = __importDefault(require("@jbrowse/core/pluggableElementTyp
|
|
|
31
31
|
const configSchemaF_1 = __importDefault(require("./configSchemaF"));
|
|
32
32
|
const model_1 = __importDefault(require("./model"));
|
|
33
33
|
const react_1 = require("react");
|
|
34
|
-
|
|
34
|
+
function LinearSyntenyDisplayF(pluginManager) {
|
|
35
35
|
pluginManager.addDisplayType(() => {
|
|
36
36
|
const configSchema = (0, configSchemaF_1.default)(pluginManager);
|
|
37
37
|
return new DisplayType_1.default({
|
|
@@ -43,4 +43,5 @@ exports.default = (pluginManager) => {
|
|
|
43
43
|
ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/Component')))),
|
|
44
44
|
});
|
|
45
45
|
});
|
|
46
|
-
}
|
|
46
|
+
}
|
|
47
|
+
exports.default = LinearSyntenyDisplayF;
|
|
@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
29
29
|
const react_1 = require("react");
|
|
30
30
|
const model_1 = __importDefault(require("./model"));
|
|
31
31
|
const ViewType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/ViewType"));
|
|
32
|
-
|
|
32
|
+
function LinearSyntenyViewF(pluginManager) {
|
|
33
33
|
pluginManager.addViewType(() => {
|
|
34
34
|
return new ViewType_1.default({
|
|
35
35
|
name: 'LinearSyntenyView',
|
|
@@ -38,4 +38,5 @@ exports.default = (pluginManager) => {
|
|
|
38
38
|
ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/LinearSyntenyView')))),
|
|
39
39
|
});
|
|
40
40
|
});
|
|
41
|
-
}
|
|
41
|
+
}
|
|
42
|
+
exports.default = LinearSyntenyViewF;
|
|
@@ -21,7 +21,7 @@ async function renderToSvg(model, opts) {
|
|
|
21
21
|
await (0, mobx_1.when)(() => model.initialized);
|
|
22
22
|
const { textHeight = 18, headerHeight = 30, rulerHeight = 30, fontSize = 13, trackLabels = 'offset', Wrapper = ({ children }) => children, themeName = 'default', } = opts;
|
|
23
23
|
const session = (0, util_1.getSession)(model);
|
|
24
|
-
const
|
|
24
|
+
const themeVar = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
|
|
25
25
|
const { width, views, middleComparativeHeight: synH, tracks } = model;
|
|
26
26
|
const shift = 50;
|
|
27
27
|
const offset = headerHeight + rulerHeight;
|
|
@@ -34,7 +34,10 @@ async function renderToSvg(model, opts) {
|
|
|
34
34
|
data: await Promise.all(view.tracks.map(async (track) => {
|
|
35
35
|
const d = track.displays[0];
|
|
36
36
|
await (0, mobx_1.when)(() => (d.ready !== undefined ? d.ready : true));
|
|
37
|
-
return {
|
|
37
|
+
return {
|
|
38
|
+
track,
|
|
39
|
+
result: await d.renderSvg({ ...opts, theme: themeVar }),
|
|
40
|
+
};
|
|
38
41
|
})),
|
|
39
42
|
})));
|
|
40
43
|
const renderings = await Promise.all(tracks.map(async (track) => {
|
|
@@ -60,15 +63,15 @@ async function renderToSvg(model, opts) {
|
|
|
60
63
|
const trackLabelMaxLen = (0, util_1.max)(views.flatMap(view => view.tracks.map(t => (0, util_1.measureText)((0, tracks_1.getTrackName)(t.configuration, session), fontSize))), 0) + 40;
|
|
61
64
|
const trackLabelOffset = trackLabels === 'left' ? trackLabelMaxLen : 0;
|
|
62
65
|
const w = width + trackLabelOffset;
|
|
63
|
-
const
|
|
66
|
+
const theme = (0, ui_1.createJBrowseTheme)(themeVar);
|
|
64
67
|
// the xlink namespace is used for rendering <image> tag
|
|
65
|
-
return (0, util_1.renderToStaticMarkup)(react_1.default.createElement(material_1.ThemeProvider, { theme:
|
|
68
|
+
return (0, util_1.renderToStaticMarkup)(react_1.default.createElement(material_1.ThemeProvider, { theme: theme },
|
|
66
69
|
react_1.default.createElement(Wrapper, null,
|
|
67
70
|
react_1.default.createElement("svg", { width: width, height: totalHeightSvg, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w + shift * 2, totalHeightSvg].toString() },
|
|
68
71
|
react_1.default.createElement(SVGBackground_1.default, { width: w, height: totalHeightSvg, shift: shift }),
|
|
69
72
|
react_1.default.createElement("g", { transform: `translate(${shift} ${fontSize})` },
|
|
70
73
|
react_1.default.createElement("g", { transform: `translate(${trackLabelOffset})` },
|
|
71
|
-
react_1.default.createElement("text", { x: 0, fontSize: fontSize,
|
|
74
|
+
react_1.default.createElement("text", { x: 0, fontSize: fontSize, ...(0, util_1.getFillProps)(theme.palette.text.primary) }, views[0].assemblyNames.join(', ')),
|
|
72
75
|
react_1.default.createElement(plugin_linear_genome_view_1.SVGRuler, { model: displayResults[0].view, fontSize: fontSize })),
|
|
73
76
|
react_1.default.createElement(plugin_linear_genome_view_1.SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[0].view, displayResults: displayResults[0].data, offset: offset, trackLabelOffset: trackLabelOffset })),
|
|
74
77
|
react_1.default.createElement("defs", null,
|
|
@@ -77,7 +80,7 @@ async function renderToSvg(model, opts) {
|
|
|
77
80
|
react_1.default.createElement("g", { transform: `translate(${shift + trackLabelOffset} ${fontSize + heights[0]})`, clipPath: `url(#synclip)` }, renderings.map((r, i) => (react_1.default.createElement(util_1.ReactRendering, { key: i, rendering: r })))),
|
|
78
81
|
react_1.default.createElement("g", { transform: `translate(${shift} ${fontSize + heights[0] + synH})` },
|
|
79
82
|
react_1.default.createElement("g", { transform: `translate(${trackLabelOffset})` },
|
|
80
|
-
react_1.default.createElement("text", { x: 0, fontSize: fontSize,
|
|
83
|
+
react_1.default.createElement("text", { x: 0, fontSize: fontSize, ...(0, util_1.getFillProps)(theme.palette.text.primary) }, views[1].assemblyNames.join(', ')),
|
|
81
84
|
react_1.default.createElement(plugin_linear_genome_view_1.SVGRuler, { model: displayResults[1].view, fontSize: fontSize })),
|
|
82
85
|
react_1.default.createElement(plugin_linear_genome_view_1.SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[1].view, displayResults: displayResults[1].data, offset: offset, trackLabelOffset: trackLabelOffset }))))), createRootFn);
|
|
83
86
|
}
|
|
@@ -46,7 +46,7 @@ const stateModel = mobx_state_tree_1.types
|
|
|
46
46
|
self.featureData = undefined;
|
|
47
47
|
},
|
|
48
48
|
}));
|
|
49
|
-
|
|
49
|
+
function SyntenyFeatureWidgetF(pluginManager) {
|
|
50
50
|
pluginManager.addWidgetType(() => new WidgetType_1.default({
|
|
51
51
|
name: 'SyntenyFeatureWidget',
|
|
52
52
|
heading: 'Synteny feature details',
|
|
@@ -54,4 +54,5 @@ exports.default = (pluginManager) => {
|
|
|
54
54
|
stateModel,
|
|
55
55
|
ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SyntenyFeatureDetail')))),
|
|
56
56
|
}));
|
|
57
|
-
}
|
|
57
|
+
}
|
|
58
|
+
exports.default = SyntenyFeatureWidgetF;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import Plugin from '@jbrowse/core/Plugin';
|
|
2
2
|
import PluginManager from '@jbrowse/core/PluginManager';
|
|
3
|
-
export default class extends Plugin {
|
|
3
|
+
export default class LinearComparativeViewPlugin extends Plugin {
|
|
4
4
|
name: string;
|
|
5
5
|
install(pluginManager: PluginManager): void;
|
|
6
6
|
configure(pluginManager: PluginManager): void;
|
package/dist/index.js
CHANGED
|
@@ -15,7 +15,7 @@ const LaunchLinearSyntenyView_1 = __importDefault(require("./LaunchLinearSynteny
|
|
|
15
15
|
const SyntenyTrack_1 = __importDefault(require("./SyntenyTrack"));
|
|
16
16
|
const SyntenyFeatureDetail_1 = __importDefault(require("./SyntenyFeatureDetail"));
|
|
17
17
|
const LinearReadVsRef_1 = __importDefault(require("./LinearReadVsRef"));
|
|
18
|
-
class
|
|
18
|
+
class LinearComparativeViewPlugin extends Plugin_1.default {
|
|
19
19
|
constructor() {
|
|
20
20
|
super(...arguments);
|
|
21
21
|
this.name = 'LinearComparativeViewPlugin';
|
|
@@ -43,4 +43,4 @@ class default_1 extends Plugin_1.default {
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
|
-
exports.default =
|
|
46
|
+
exports.default = LinearComparativeViewPlugin;
|
|
@@ -2,7 +2,7 @@ import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
|
|
|
2
2
|
import configSchemaF from './configSchemaF';
|
|
3
3
|
import stateModelF from './model';
|
|
4
4
|
import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
|
|
5
|
-
export default (pluginManager)
|
|
5
|
+
export default function LGVSyntenyDisplayF(pluginManager) {
|
|
6
6
|
pluginManager.addDisplayType(() => {
|
|
7
7
|
const configSchema = configSchemaF(pluginManager);
|
|
8
8
|
const stateModel = stateModelF(configSchema);
|
|
@@ -15,4 +15,4 @@ export default (pluginManager) => {
|
|
|
15
15
|
ReactComponent: BaseLinearDisplayComponent,
|
|
16
16
|
});
|
|
17
17
|
});
|
|
18
|
-
}
|
|
18
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
|
|
2
2
|
import configSchemaFactory from './configSchemaF';
|
|
3
3
|
import stateModelFactory from './stateModelFactory';
|
|
4
|
-
export default (pluginManager)
|
|
4
|
+
export default function LinearComparativeDisplayF(pluginManager) {
|
|
5
5
|
pluginManager.addDisplayType(() => {
|
|
6
6
|
const configSchema = configSchemaFactory(pluginManager);
|
|
7
7
|
return new DisplayType({
|
|
@@ -15,4 +15,4 @@ export default (pluginManager) => {
|
|
|
15
15
|
},
|
|
16
16
|
});
|
|
17
17
|
});
|
|
18
|
-
}
|
|
18
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { lazy } from 'react';
|
|
2
2
|
import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
|
|
3
3
|
import modelFactory from './model';
|
|
4
|
-
export default (pluginManager)
|
|
4
|
+
export default function LinearComparativeViewF(pluginManager) {
|
|
5
5
|
pluginManager.addViewType(() => {
|
|
6
6
|
return new ViewType({
|
|
7
7
|
name: 'LinearComparativeView',
|
|
@@ -10,4 +10,4 @@ export default (pluginManager) => {
|
|
|
10
10
|
ReactComponent: lazy(() => import('./components/LinearComparativeView')),
|
|
11
11
|
});
|
|
12
12
|
});
|
|
13
|
-
}
|
|
13
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import PluginManager from '@jbrowse/core/PluginManager';
|
|
2
|
-
export default function (pm: PluginManager): void;
|
|
2
|
+
export default function LinearReadVsRefMenuItemF(pm: PluginManager): void;
|
|
@@ -7,7 +7,7 @@ const ReadVsRefDialog = lazy(() => import('./LinearReadVsRef'));
|
|
|
7
7
|
function isDisplay(elt) {
|
|
8
8
|
return elt.name === 'LinearPileupDisplay';
|
|
9
9
|
}
|
|
10
|
-
export default function (pm) {
|
|
10
|
+
export default function LinearReadVsRefMenuItemF(pm) {
|
|
11
11
|
pm.addToExtensionPoint('Core-extendPluggableElement', (pluggableElement) => {
|
|
12
12
|
if (!isDisplay(pluggableElement)) {
|
|
13
13
|
return pluggableElement;
|
|
@@ -30,6 +30,7 @@ const SyntenyTooltip = observer(function ({ title }) {
|
|
|
30
30
|
const { classes } = useStyles();
|
|
31
31
|
const { refs, floatingStyles, context } = useFloating({
|
|
32
32
|
placement: 'right',
|
|
33
|
+
strategy: 'fixed',
|
|
33
34
|
});
|
|
34
35
|
const clientPoint = useClientPoint(context);
|
|
35
36
|
const { getFloatingProps } = useInteractions([clientPoint]);
|
|
@@ -3,7 +3,7 @@ import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
|
|
|
3
3
|
import configSchemaF from './configSchemaF';
|
|
4
4
|
import stateModelFactory from './model';
|
|
5
5
|
import { lazy } from 'react';
|
|
6
|
-
export default (pluginManager)
|
|
6
|
+
export default function LinearSyntenyDisplayF(pluginManager) {
|
|
7
7
|
pluginManager.addDisplayType(() => {
|
|
8
8
|
const configSchema = configSchemaF(pluginManager);
|
|
9
9
|
return new DisplayType({
|
|
@@ -15,4 +15,4 @@ export default (pluginManager) => {
|
|
|
15
15
|
ReactComponent: lazy(() => import('./components/Component')),
|
|
16
16
|
});
|
|
17
17
|
});
|
|
18
|
-
}
|
|
18
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { lazy } from 'react';
|
|
2
2
|
import modelFactory from './model';
|
|
3
3
|
import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
|
|
4
|
-
export default (pluginManager)
|
|
4
|
+
export default function LinearSyntenyViewF(pluginManager) {
|
|
5
5
|
pluginManager.addViewType(() => {
|
|
6
6
|
return new ViewType({
|
|
7
7
|
name: 'LinearSyntenyView',
|
|
@@ -10,4 +10,4 @@ export default (pluginManager) => {
|
|
|
10
10
|
ReactComponent: lazy(() => import('./components/LinearSyntenyView')),
|
|
11
11
|
});
|
|
12
12
|
});
|
|
13
|
-
}
|
|
13
|
+
}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { ThemeProvider } from '@mui/material';
|
|
3
3
|
import { getRoot } from 'mobx-state-tree';
|
|
4
4
|
import { when } from 'mobx';
|
|
5
|
-
import { getSession, getSerializedSvg, max, measureText, ReactRendering, renderToAbstractCanvas, renderToStaticMarkup, sum, } from '@jbrowse/core/util';
|
|
5
|
+
import { getSession, getSerializedSvg, max, measureText, ReactRendering, renderToAbstractCanvas, renderToStaticMarkup, sum, getFillProps, } from '@jbrowse/core/util';
|
|
6
6
|
import { getTrackName } from '@jbrowse/core/util/tracks';
|
|
7
7
|
import { createJBrowseTheme } from '@jbrowse/core/ui';
|
|
8
8
|
import { SVGTracks, SVGRuler, totalHeight, } from '@jbrowse/plugin-linear-genome-view';
|
|
@@ -15,7 +15,7 @@ export async function renderToSvg(model, opts) {
|
|
|
15
15
|
await when(() => model.initialized);
|
|
16
16
|
const { textHeight = 18, headerHeight = 30, rulerHeight = 30, fontSize = 13, trackLabels = 'offset', Wrapper = ({ children }) => children, themeName = 'default', } = opts;
|
|
17
17
|
const session = getSession(model);
|
|
18
|
-
const
|
|
18
|
+
const themeVar = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
|
|
19
19
|
const { width, views, middleComparativeHeight: synH, tracks } = model;
|
|
20
20
|
const shift = 50;
|
|
21
21
|
const offset = headerHeight + rulerHeight;
|
|
@@ -28,7 +28,10 @@ export async function renderToSvg(model, opts) {
|
|
|
28
28
|
data: await Promise.all(view.tracks.map(async (track) => {
|
|
29
29
|
const d = track.displays[0];
|
|
30
30
|
await when(() => (d.ready !== undefined ? d.ready : true));
|
|
31
|
-
return {
|
|
31
|
+
return {
|
|
32
|
+
track,
|
|
33
|
+
result: await d.renderSvg({ ...opts, theme: themeVar }),
|
|
34
|
+
};
|
|
32
35
|
})),
|
|
33
36
|
})));
|
|
34
37
|
const renderings = await Promise.all(tracks.map(async (track) => {
|
|
@@ -54,15 +57,15 @@ export async function renderToSvg(model, opts) {
|
|
|
54
57
|
const trackLabelMaxLen = max(views.flatMap(view => view.tracks.map(t => measureText(getTrackName(t.configuration, session), fontSize))), 0) + 40;
|
|
55
58
|
const trackLabelOffset = trackLabels === 'left' ? trackLabelMaxLen : 0;
|
|
56
59
|
const w = width + trackLabelOffset;
|
|
57
|
-
const
|
|
60
|
+
const theme = createJBrowseTheme(themeVar);
|
|
58
61
|
// the xlink namespace is used for rendering <image> tag
|
|
59
|
-
return renderToStaticMarkup(React.createElement(ThemeProvider, { theme:
|
|
62
|
+
return renderToStaticMarkup(React.createElement(ThemeProvider, { theme: theme },
|
|
60
63
|
React.createElement(Wrapper, null,
|
|
61
64
|
React.createElement("svg", { width: width, height: totalHeightSvg, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w + shift * 2, totalHeightSvg].toString() },
|
|
62
65
|
React.createElement(SVGBackground, { width: w, height: totalHeightSvg, shift: shift }),
|
|
63
66
|
React.createElement("g", { transform: `translate(${shift} ${fontSize})` },
|
|
64
67
|
React.createElement("g", { transform: `translate(${trackLabelOffset})` },
|
|
65
|
-
React.createElement("text", { x: 0, fontSize: fontSize,
|
|
68
|
+
React.createElement("text", { x: 0, fontSize: fontSize, ...getFillProps(theme.palette.text.primary) }, views[0].assemblyNames.join(', ')),
|
|
66
69
|
React.createElement(SVGRuler, { model: displayResults[0].view, fontSize: fontSize })),
|
|
67
70
|
React.createElement(SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[0].view, displayResults: displayResults[0].data, offset: offset, trackLabelOffset: trackLabelOffset })),
|
|
68
71
|
React.createElement("defs", null,
|
|
@@ -71,7 +74,7 @@ export async function renderToSvg(model, opts) {
|
|
|
71
74
|
React.createElement("g", { transform: `translate(${shift + trackLabelOffset} ${fontSize + heights[0]})`, clipPath: `url(#synclip)` }, renderings.map((r, i) => (React.createElement(ReactRendering, { key: i, rendering: r })))),
|
|
72
75
|
React.createElement("g", { transform: `translate(${shift} ${fontSize + heights[0] + synH})` },
|
|
73
76
|
React.createElement("g", { transform: `translate(${trackLabelOffset})` },
|
|
74
|
-
React.createElement("text", { x: 0, fontSize: fontSize,
|
|
77
|
+
React.createElement("text", { x: 0, fontSize: fontSize, ...getFillProps(theme.palette.text.primary) }, views[1].assemblyNames.join(', ')),
|
|
75
78
|
React.createElement(SVGRuler, { model: displayResults[1].view, fontSize: fontSize })),
|
|
76
79
|
React.createElement(SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[1].view, displayResults: displayResults[1].data, offset: offset, trackLabelOffset: trackLabelOffset }))))), createRootFn);
|
|
77
80
|
}
|
|
@@ -18,7 +18,7 @@ const stateModel = types
|
|
|
18
18
|
self.featureData = undefined;
|
|
19
19
|
},
|
|
20
20
|
}));
|
|
21
|
-
export default (pluginManager)
|
|
21
|
+
export default function SyntenyFeatureWidgetF(pluginManager) {
|
|
22
22
|
pluginManager.addWidgetType(() => new WidgetType({
|
|
23
23
|
name: 'SyntenyFeatureWidget',
|
|
24
24
|
heading: 'Synteny feature details',
|
|
@@ -26,4 +26,4 @@ export default (pluginManager) => {
|
|
|
26
26
|
stateModel,
|
|
27
27
|
ReactComponent: lazy(() => import('./SyntenyFeatureDetail')),
|
|
28
28
|
}));
|
|
29
|
-
}
|
|
29
|
+
}
|
package/esm/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import Plugin from '@jbrowse/core/Plugin';
|
|
2
2
|
import PluginManager from '@jbrowse/core/PluginManager';
|
|
3
|
-
export default class extends Plugin {
|
|
3
|
+
export default class LinearComparativeViewPlugin extends Plugin {
|
|
4
4
|
name: string;
|
|
5
5
|
install(pluginManager: PluginManager): void;
|
|
6
6
|
configure(pluginManager: PluginManager): void;
|
package/esm/index.js
CHANGED
|
@@ -9,8 +9,8 @@ import LinearSyntenyViewF from './LinearSyntenyView';
|
|
|
9
9
|
import LaunchLinearSyntenyViewF from './LaunchLinearSyntenyView';
|
|
10
10
|
import SyntenyTrackF from './SyntenyTrack';
|
|
11
11
|
import SyntenyFeatureWidgetF from './SyntenyFeatureDetail';
|
|
12
|
-
import
|
|
13
|
-
export default class extends Plugin {
|
|
12
|
+
import LinearReadVsRefMenuItemF from './LinearReadVsRef';
|
|
13
|
+
export default class LinearComparativeViewPlugin extends Plugin {
|
|
14
14
|
constructor() {
|
|
15
15
|
super(...arguments);
|
|
16
16
|
this.name = 'LinearComparativeViewPlugin';
|
|
@@ -24,7 +24,7 @@ export default class extends Plugin {
|
|
|
24
24
|
LaunchLinearSyntenyViewF(pluginManager);
|
|
25
25
|
SyntenyTrackF(pluginManager);
|
|
26
26
|
SyntenyFeatureWidgetF(pluginManager);
|
|
27
|
-
|
|
27
|
+
LinearReadVsRefMenuItemF(pluginManager);
|
|
28
28
|
}
|
|
29
29
|
configure(pluginManager) {
|
|
30
30
|
if (isAbstractMenuManager(pluginManager.rootModel)) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-linear-comparative-view",
|
|
3
|
-
"version": "2.11.
|
|
3
|
+
"version": "2.11.1",
|
|
4
4
|
"description": "JBrowse 2 linear comparative view",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jbrowse",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"publishConfig": {
|
|
62
62
|
"access": "public"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "11b28d66d782eb06f92ccb993108bb6c3c82819e"
|
|
65
65
|
}
|