jbrowse-plugin-mafviewer 1.2.3 → 1.3.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/BgzipTaffyAdapter/BgzipTaffyAdapter.d.ts +1 -1
- package/dist/BigMafAdapter/BigMafAdapter.d.ts +1 -1
- package/dist/BigMafAdapter/BigMafAdapter.js +50 -49
- package/dist/BigMafAdapter/BigMafAdapter.js.map +1 -1
- package/dist/LinearMafDisplay/components/Crosshairs.d.ts +10 -0
- package/dist/LinearMafDisplay/components/Crosshairs.js +18 -0
- package/dist/LinearMafDisplay/components/Crosshairs.js.map +1 -0
- package/dist/LinearMafDisplay/components/GetSequenceDialog/GetSequenceDialog.d.ts +11 -0
- package/dist/LinearMafDisplay/components/GetSequenceDialog/GetSequenceDialog.js +97 -0
- package/dist/LinearMafDisplay/components/GetSequenceDialog/GetSequenceDialog.js.map +1 -0
- package/dist/LinearMafDisplay/components/{ReactComponent.d.ts → LinearMafDisplayComponent.d.ts} +1 -1
- package/dist/LinearMafDisplay/components/LinearMafDisplayComponent.js +168 -0
- package/dist/LinearMafDisplay/components/LinearMafDisplayComponent.js.map +1 -0
- package/dist/LinearMafDisplay/components/MAFTooltip.d.ts +12 -0
- package/dist/LinearMafDisplay/components/MAFTooltip.js +29 -0
- package/dist/LinearMafDisplay/components/MAFTooltip.js.map +1 -0
- package/dist/LinearMafDisplay/components/SetRowHeightDialog/SetRowHeightDialog.js +38 -0
- package/dist/LinearMafDisplay/components/SetRowHeightDialog/SetRowHeightDialog.js.map +1 -0
- package/dist/LinearMafDisplay/components/Sidebar/ColorLegend.d.ts +6 -0
- package/dist/LinearMafDisplay/components/{ColorLegend.js → Sidebar/ColorLegend.js} +2 -3
- package/dist/LinearMafDisplay/components/Sidebar/ColorLegend.js.map +1 -0
- package/dist/LinearMafDisplay/components/Sidebar/RectBg.js.map +1 -0
- package/dist/LinearMafDisplay/components/{SvgWrapper.d.ts → Sidebar/SvgWrapper.d.ts} +1 -1
- package/dist/LinearMafDisplay/components/{SvgWrapper.js → Sidebar/SvgWrapper.js} +3 -1
- package/dist/LinearMafDisplay/components/Sidebar/SvgWrapper.js.map +1 -0
- package/dist/LinearMafDisplay/components/{Tree.d.ts → Sidebar/Tree.d.ts} +2 -1
- package/dist/LinearMafDisplay/components/{Tree.js → Sidebar/Tree.js} +2 -0
- package/dist/LinearMafDisplay/components/Sidebar/Tree.js.map +1 -0
- package/dist/LinearMafDisplay/components/{YScaleBars.d.ts → Sidebar/YScaleBars.d.ts} +1 -1
- package/dist/LinearMafDisplay/components/Sidebar/YScaleBars.js +11 -0
- package/dist/LinearMafDisplay/components/Sidebar/YScaleBars.js.map +1 -0
- package/dist/LinearMafDisplay/index.js +1 -1
- package/dist/LinearMafDisplay/index.js.map +1 -1
- package/dist/LinearMafDisplay/renderSvg.js +1 -1
- package/dist/LinearMafDisplay/renderSvg.js.map +1 -1
- package/dist/LinearMafDisplay/stateModel.d.ts +23 -20
- package/dist/LinearMafDisplay/stateModel.js +62 -8
- package/dist/LinearMafDisplay/stateModel.js.map +1 -1
- package/dist/LinearMafDisplay/types.d.ts +5 -3
- package/dist/LinearMafDisplay/types.js +1 -15
- package/dist/LinearMafDisplay/types.js.map +1 -1
- package/dist/LinearMafDisplay/util.d.ts +4 -0
- package/dist/LinearMafDisplay/util.js +16 -0
- package/dist/LinearMafDisplay/util.js.map +1 -0
- package/dist/LinearMafRenderer/LinearMafRenderer.d.ts +5 -4
- package/dist/LinearMafRenderer/LinearMafRenderer.js +8 -10
- package/dist/LinearMafRenderer/LinearMafRenderer.js.map +1 -1
- package/dist/LinearMafRenderer/makeImageData.d.ts +1 -0
- package/dist/LinearMafRenderer/makeImageData.js +25 -20
- package/dist/LinearMafRenderer/makeImageData.js.map +1 -1
- package/dist/MafAddTrackWorkflow/index.js +0 -1
- package/dist/MafAddTrackWorkflow/index.js.map +1 -1
- package/dist/{MafRPC/index.d.ts → MafGetSamples/MafGetSamples.d.ts} +1 -3
- package/dist/{MafRPC/index.js → MafGetSamples/MafGetSamples.js} +2 -7
- package/dist/MafGetSamples/MafGetSamples.js.map +1 -0
- package/dist/MafGetSamples/index.d.ts +2 -0
- package/dist/MafGetSamples/index.js +7 -0
- package/dist/MafGetSamples/index.js.map +1 -0
- package/dist/MafGetSequences/MafGetSequences.d.ts +16 -0
- package/dist/MafGetSequences/MafGetSequences.js +20 -0
- package/dist/MafGetSequences/MafGetSequences.js.map +1 -0
- package/dist/MafGetSequences/index.d.ts +2 -0
- package/dist/MafGetSequences/index.js +7 -0
- package/dist/MafGetSequences/index.js.map +1 -0
- package/dist/MafTabixAdapter/MafTabixAdapter.d.ts +1 -1
- package/dist/MafTabixAdapter/MafTabixAdapter.js +9 -11
- package/dist/MafTabixAdapter/MafTabixAdapter.js.map +1 -1
- package/dist/MafTabixAdapter/configSchema.js +29 -1
- package/dist/MafTabixAdapter/configSchema.js.map +1 -1
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/dist/jbrowse-plugin-mafviewer.umd.production.min.js +9 -20
- package/dist/jbrowse-plugin-mafviewer.umd.production.min.js.map +4 -4
- package/dist/util/extractSubsequence.d.ts +12 -0
- package/dist/util/extractSubsequence.js +60 -0
- package/dist/util/extractSubsequence.js.map +1 -0
- package/dist/util/extractSubsequence.test.d.ts +1 -0
- package/dist/util/extractSubsequence.test.js +42 -0
- package/dist/util/extractSubsequence.test.js.map +1 -0
- package/dist/util/fastaUtils.d.ts +16 -0
- package/dist/util/fastaUtils.js +84 -0
- package/dist/util/fastaUtils.js.map +1 -0
- package/dist/util/fastaUtils.test.d.ts +1 -0
- package/dist/util/fastaUtils.test.js +95 -0
- package/dist/util/fastaUtils.test.js.map +1 -0
- package/dist/util/fetchSequences.d.ts +18 -0
- package/dist/util/fetchSequences.js +39 -0
- package/dist/util/fetchSequences.js.map +1 -0
- package/dist/util/useSequences.d.ts +21 -0
- package/dist/util/useSequences.js +64 -0
- package/dist/util/useSequences.js.map +1 -0
- package/dist/util.d.ts +2 -2
- package/dist/util.js +5 -1
- package/dist/util.js.map +1 -1
- package/package.json +13 -13
- package/src/BigMafAdapter/BigMafAdapter.ts +52 -49
- package/src/LinearMafDisplay/components/Crosshairs.tsx +50 -0
- package/src/LinearMafDisplay/components/GetSequenceDialog/GetSequenceDialog.tsx +175 -0
- package/src/LinearMafDisplay/components/LinearMafDisplayComponent.tsx +257 -0
- package/src/LinearMafDisplay/components/MAFTooltip.tsx +59 -0
- package/src/LinearMafDisplay/components/SetRowHeightDialog/SetRowHeightDialog.tsx +83 -0
- package/src/LinearMafDisplay/components/{ColorLegend.tsx → Sidebar/ColorLegend.tsx} +11 -7
- package/src/LinearMafDisplay/components/{SvgWrapper.tsx → Sidebar/SvgWrapper.tsx} +5 -3
- package/src/LinearMafDisplay/components/{Tree.tsx → Sidebar/Tree.tsx} +5 -1
- package/src/LinearMafDisplay/components/Sidebar/YScaleBars.tsx +23 -0
- package/src/LinearMafDisplay/index.ts +1 -1
- package/src/LinearMafDisplay/renderSvg.tsx +1 -1
- package/src/LinearMafDisplay/stateModel.ts +71 -18
- package/src/LinearMafDisplay/types.ts +4 -24
- package/src/LinearMafDisplay/util.ts +27 -0
- package/src/LinearMafRenderer/LinearMafRenderer.ts +10 -14
- package/src/LinearMafRenderer/makeImageData.ts +33 -22
- package/src/MafAddTrackWorkflow/index.ts +0 -1
- package/src/{MafRPC/index.ts → MafGetSamples/MafGetSamples.ts} +1 -8
- package/src/MafGetSamples/index.ts +9 -0
- package/src/MafGetSequences/MafGetSequences.ts +47 -0
- package/src/MafGetSequences/index.ts +9 -0
- package/src/MafTabixAdapter/MafTabixAdapter.ts +13 -12
- package/src/MafTabixAdapter/configSchema.ts +29 -1
- package/src/index.ts +4 -2
- package/src/util/__snapshots__/fastaUtils.test.ts.snap +22 -0
- package/src/util/extractSubsequence.test.ts +54 -0
- package/src/util/extractSubsequence.ts +74 -0
- package/src/util/fastaUtils.test.ts +99 -0
- package/src/util/fastaUtils.ts +102 -0
- package/src/util/fetchSequences.ts +57 -0
- package/src/util/useSequences.ts +90 -0
- package/src/util.ts +6 -2
- package/dist/LinearMafDisplay/components/ColorLegend.d.ts +0 -8
- package/dist/LinearMafDisplay/components/ColorLegend.js.map +0 -1
- package/dist/LinearMafDisplay/components/ReactComponent.js +0 -50
- package/dist/LinearMafDisplay/components/ReactComponent.js.map +0 -1
- package/dist/LinearMafDisplay/components/RectBg.js.map +0 -1
- package/dist/LinearMafDisplay/components/SetRowHeight.js +0 -36
- package/dist/LinearMafDisplay/components/SetRowHeight.js.map +0 -1
- package/dist/LinearMafDisplay/components/SvgWrapper.js.map +0 -1
- package/dist/LinearMafDisplay/components/Tree.js.map +0 -1
- package/dist/LinearMafDisplay/components/YScaleBars.js +0 -20
- package/dist/LinearMafDisplay/components/YScaleBars.js.map +0 -1
- package/dist/MafRPC/index.js.map +0 -1
- package/src/LinearMafDisplay/components/ReactComponent.tsx +0 -91
- package/src/LinearMafDisplay/components/SetRowHeight.tsx +0 -83
- package/src/LinearMafDisplay/components/YScaleBars.tsx +0 -41
- /package/dist/LinearMafDisplay/components/{SetRowHeight.d.ts → SetRowHeightDialog/SetRowHeightDialog.d.ts} +0 -0
- /package/dist/LinearMafDisplay/components/{RectBg.d.ts → Sidebar/RectBg.d.ts} +0 -0
- /package/dist/LinearMafDisplay/components/{RectBg.js → Sidebar/RectBg.js} +0 -0
- /package/src/LinearMafDisplay/components/{RectBg.tsx → Sidebar/RectBg.tsx} +0 -0
|
@@ -12,12 +12,11 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
|
|
|
12
12
|
if (!this.getSubAdapter) {
|
|
13
13
|
throw new Error('no getSubAdapter available');
|
|
14
14
|
}
|
|
15
|
-
const adapter = await this.getSubAdapter({
|
|
16
|
-
...getSnapshot(this.config),
|
|
17
|
-
type: 'BigBedAdapter',
|
|
18
|
-
});
|
|
19
15
|
return {
|
|
20
|
-
adapter:
|
|
16
|
+
adapter: (await this.getSubAdapter({
|
|
17
|
+
...getSnapshot(this.config),
|
|
18
|
+
type: 'BigBedAdapter',
|
|
19
|
+
})).dataAdapter,
|
|
21
20
|
};
|
|
22
21
|
}
|
|
23
22
|
async setupPre() {
|
|
@@ -41,53 +40,55 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
|
|
|
41
40
|
const { statusCallback = () => { } } = opts || {};
|
|
42
41
|
return ObservableCreate(async (observer) => {
|
|
43
42
|
const { adapter } = await this.setup();
|
|
44
|
-
const features = await updateStatus('Downloading
|
|
45
|
-
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
if (
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
43
|
+
const features = await updateStatus('Downloading alignments', statusCallback, () => firstValueFrom(adapter.getFeatures(query).pipe(toArray())));
|
|
44
|
+
await updateStatus('Processing alignments', statusCallback, () => {
|
|
45
|
+
for (const feature of features) {
|
|
46
|
+
const maf = feature.get('mafBlock');
|
|
47
|
+
const blocks = maf.split(';');
|
|
48
|
+
let aln;
|
|
49
|
+
const alns = [];
|
|
50
|
+
const alignments = {};
|
|
51
|
+
const blocks2 = [];
|
|
52
|
+
for (const block of blocks) {
|
|
53
|
+
if (block.startsWith('s')) {
|
|
54
|
+
if (aln) {
|
|
55
|
+
alns.push(block.split(/ +/)[6]);
|
|
56
|
+
blocks2.push(block);
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
aln = block.split(/ +/)[6];
|
|
60
|
+
alns.push(aln);
|
|
61
|
+
blocks2.push(block);
|
|
62
|
+
}
|
|
62
63
|
}
|
|
63
64
|
}
|
|
65
|
+
for (let i = 0; i < blocks2.length; i++) {
|
|
66
|
+
const elt = blocks2[i];
|
|
67
|
+
const ad = elt.split(/ +/);
|
|
68
|
+
const y = ad[1].split('.');
|
|
69
|
+
const org = y[0];
|
|
70
|
+
const chr = y[1];
|
|
71
|
+
alignments[org] = {
|
|
72
|
+
chr: chr,
|
|
73
|
+
start: +ad[1],
|
|
74
|
+
srcSize: +ad[2],
|
|
75
|
+
strand: ad[3] === '+' ? 1 : -1,
|
|
76
|
+
unknown: +ad[4],
|
|
77
|
+
data: alns[i],
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
observer.next(new SimpleFeature({
|
|
81
|
+
id: feature.id(),
|
|
82
|
+
data: {
|
|
83
|
+
start: feature.get('start'),
|
|
84
|
+
end: feature.get('end'),
|
|
85
|
+
refName: feature.get('refName'),
|
|
86
|
+
seq: alns[0],
|
|
87
|
+
alignments: alignments,
|
|
88
|
+
},
|
|
89
|
+
}));
|
|
64
90
|
}
|
|
65
|
-
|
|
66
|
-
const elt = blocks2[i];
|
|
67
|
-
const ad = elt.split(/ +/);
|
|
68
|
-
const y = ad[1].split('.');
|
|
69
|
-
const org = y[0];
|
|
70
|
-
const chr = y[1];
|
|
71
|
-
alignments[org] = {
|
|
72
|
-
chr: chr,
|
|
73
|
-
start: +ad[1],
|
|
74
|
-
srcSize: +ad[2],
|
|
75
|
-
strand: ad[3] === '+' ? 1 : -1,
|
|
76
|
-
unknown: +ad[4],
|
|
77
|
-
data: alns[i],
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
observer.next(new SimpleFeature({
|
|
81
|
-
id: feature.id(),
|
|
82
|
-
data: {
|
|
83
|
-
start: feature.get('start'),
|
|
84
|
-
end: feature.get('end'),
|
|
85
|
-
refName: feature.get('refName'),
|
|
86
|
-
seq: alns[0],
|
|
87
|
-
alignments: alignments,
|
|
88
|
-
},
|
|
89
|
-
}));
|
|
90
|
-
}
|
|
91
|
+
});
|
|
91
92
|
observer.complete();
|
|
92
93
|
});
|
|
93
94
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BigMafAdapter.js","sourceRoot":"","sources":["../../src/BigMafAdapter/BigMafAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,MAAM,CAAA;AAE9C,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAanC,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,sBAAsB;IACxD,MAAM,CAA+C;IAE5D,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,MAAM,IAAI,KAAK,CAAC,4BAA4B,CAAC,CAAA;QAC/C,CAAC;QACD,
|
|
1
|
+
{"version":3,"file":"BigMafAdapter.js","sourceRoot":"","sources":["../../src/BigMafAdapter/BigMafAdapter.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface CrosshairsProps {
|
|
3
|
+
width: number;
|
|
4
|
+
height: number;
|
|
5
|
+
scrollTop: number;
|
|
6
|
+
mouseX?: number;
|
|
7
|
+
mouseY: number;
|
|
8
|
+
}
|
|
9
|
+
declare const Crosshairs: ({ width, height, scrollTop, mouseX, mouseY, }: CrosshairsProps) => React.JSX.Element;
|
|
10
|
+
export default Crosshairs;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { makeStyles } from 'tss-react/mui';
|
|
3
|
+
const useStyles = makeStyles()({
|
|
4
|
+
cursor: {
|
|
5
|
+
pointerEvents: 'none',
|
|
6
|
+
},
|
|
7
|
+
});
|
|
8
|
+
const Crosshairs = ({ width, height, scrollTop, mouseX, mouseY, }) => {
|
|
9
|
+
const { classes } = useStyles();
|
|
10
|
+
return (React.createElement("svg", { className: classes.cursor, width: width, height: height, style: {
|
|
11
|
+
position: 'absolute',
|
|
12
|
+
top: scrollTop,
|
|
13
|
+
} },
|
|
14
|
+
React.createElement("line", { x1: 0, x2: width, y1: mouseY - scrollTop, y2: mouseY - scrollTop, stroke: "black" }),
|
|
15
|
+
React.createElement("line", { x1: mouseX, x2: mouseX, y1: 0, y2: height, stroke: "black" })));
|
|
16
|
+
};
|
|
17
|
+
export default Crosshairs;
|
|
18
|
+
//# sourceMappingURL=Crosshairs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Crosshairs.js","sourceRoot":"","sources":["../../../src/LinearMafDisplay/components/Crosshairs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,EAAE;QACN,aAAa,EAAE,MAAM;KACtB;CACF,CAAC,CAAA;AAUF,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,MAAM,EACN,MAAM,GACU,EAAE,EAAE;IACpB,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAE/B,OAAO,CACL,6BACE,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,SAAS;SACf;QAED,8BACE,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,KAAK,EACT,EAAE,EAAE,MAAM,GAAG,SAAS,EACtB,EAAE,EAAE,MAAM,GAAG,SAAS,EACtB,MAAM,EAAC,OAAO,GACd;QACF,8BAAM,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAC,OAAO,GAAG,CAC9D,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { LinearMafDisplayModel } from '../../stateModel';
|
|
3
|
+
declare const GetSequenceDialog: ({ onClose, model, selectionCoords, }: {
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
model: LinearMafDisplayModel;
|
|
6
|
+
selectionCoords?: {
|
|
7
|
+
dragStartX: number;
|
|
8
|
+
dragEndX: number;
|
|
9
|
+
};
|
|
10
|
+
}) => React.JSX.Element;
|
|
11
|
+
export default GetSequenceDialog;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { Dialog, ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
|
|
3
|
+
import { getSession } from '@jbrowse/core/util';
|
|
4
|
+
import { Button, DialogActions, DialogContent, TextField, ToggleButton, ToggleButtonGroup, } from '@mui/material';
|
|
5
|
+
import { observer } from 'mobx-react';
|
|
6
|
+
import { makeStyles } from 'tss-react/mui';
|
|
7
|
+
import { useSequences } from '../../../util/useSequences';
|
|
8
|
+
const useStyles = makeStyles()({
|
|
9
|
+
dialogContent: {
|
|
10
|
+
width: '80em',
|
|
11
|
+
},
|
|
12
|
+
textAreaInput: {
|
|
13
|
+
fontFamily: 'monospace',
|
|
14
|
+
whiteSpace: 'pre',
|
|
15
|
+
overflowX: 'auto',
|
|
16
|
+
},
|
|
17
|
+
ml: {
|
|
18
|
+
marginLeft: 10,
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
const GetSequenceDialog = observer(function ({ onClose, model, selectionCoords, }) {
|
|
22
|
+
const [showAllLetters, setShowAllLetters] = useState(true);
|
|
23
|
+
const { classes } = useStyles();
|
|
24
|
+
const { sequence, loading, error } = useSequences({
|
|
25
|
+
model,
|
|
26
|
+
selectionCoords,
|
|
27
|
+
showAllLetters,
|
|
28
|
+
});
|
|
29
|
+
const sequenceTooLarge = sequence ? sequence.length > 1_000_000 : false;
|
|
30
|
+
return (React.createElement(Dialog, { open: true, onClose: onClose, title: "Subsequence Data", maxWidth: "xl" },
|
|
31
|
+
React.createElement(DialogContent, null,
|
|
32
|
+
React.createElement("div", { style: {
|
|
33
|
+
display: 'flex',
|
|
34
|
+
alignItems: 'center',
|
|
35
|
+
marginBottom: '16px',
|
|
36
|
+
} },
|
|
37
|
+
React.createElement(ToggleButtonGroup, { value: showAllLetters, exclusive: true, size: "small", onChange: (_event, newDisplayMode) => {
|
|
38
|
+
if (newDisplayMode !== null) {
|
|
39
|
+
setShowAllLetters(newDisplayMode);
|
|
40
|
+
}
|
|
41
|
+
} },
|
|
42
|
+
React.createElement(ToggleButton, { value: true }, "Show All Letters"),
|
|
43
|
+
React.createElement(ToggleButton, { value: false }, "Show Only Differences")),
|
|
44
|
+
React.createElement("div", { style: { flexGrow: 1 } }),
|
|
45
|
+
React.createElement(Button, { variant: "contained", color: "primary", disabled: loading || !sequence, onClick: () => {
|
|
46
|
+
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
|
47
|
+
;
|
|
48
|
+
(async () => {
|
|
49
|
+
try {
|
|
50
|
+
await navigator.clipboard.writeText(sequence);
|
|
51
|
+
getSession(model).notify('Sequence copied to clipboard', 'info');
|
|
52
|
+
}
|
|
53
|
+
catch (e) {
|
|
54
|
+
console.error(e);
|
|
55
|
+
getSession(model).notifyError(`${e}`, e);
|
|
56
|
+
}
|
|
57
|
+
})();
|
|
58
|
+
} }, "Copy to Clipboard"),
|
|
59
|
+
React.createElement(Button, { variant: "contained", color: "secondary", disabled: loading || !sequence, onClick: () => {
|
|
60
|
+
try {
|
|
61
|
+
const url = URL.createObjectURL(new Blob([sequence], { type: 'text/plain' }));
|
|
62
|
+
// Create a temporary anchor element
|
|
63
|
+
const a = document.createElement('a');
|
|
64
|
+
a.href = url;
|
|
65
|
+
a.download = 'sequence.fasta';
|
|
66
|
+
// Trigger the download
|
|
67
|
+
document.body.append(a);
|
|
68
|
+
a.click();
|
|
69
|
+
// Clean up
|
|
70
|
+
a.remove();
|
|
71
|
+
URL.revokeObjectURL(url);
|
|
72
|
+
getSession(model).notify('Sequence downloaded', 'info');
|
|
73
|
+
}
|
|
74
|
+
catch (e) {
|
|
75
|
+
console.error(e);
|
|
76
|
+
getSession(model).notifyError(`${e}`, e);
|
|
77
|
+
}
|
|
78
|
+
} }, "Download")),
|
|
79
|
+
error ? (React.createElement(ErrorMessage, { error: error })) : (React.createElement(React.Fragment, null,
|
|
80
|
+
loading ? React.createElement(LoadingEllipses, null) : null,
|
|
81
|
+
React.createElement(TextField, { variant: "outlined", multiline: true, minRows: 5, maxRows: 10, disabled: sequenceTooLarge, className: classes.dialogContent, fullWidth: true, value: loading
|
|
82
|
+
? 'Loading...'
|
|
83
|
+
: sequenceTooLarge
|
|
84
|
+
? 'Reference sequence too large to display, use the download FASTA button'
|
|
85
|
+
: sequence, slotProps: {
|
|
86
|
+
input: {
|
|
87
|
+
readOnly: true,
|
|
88
|
+
classes: {
|
|
89
|
+
input: classes.textAreaInput,
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
} })))),
|
|
93
|
+
React.createElement(DialogActions, null,
|
|
94
|
+
React.createElement(Button, { color: "primary", variant: "outlined", onClick: onClose }, "Close"))));
|
|
95
|
+
});
|
|
96
|
+
export default GetSequenceDialog;
|
|
97
|
+
//# sourceMappingURL=GetSequenceDialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GetSequenceDialog.js","sourceRoot":"","sources":["../../../../src/LinearMafDisplay/components/GetSequenceDialog/GetSequenceDialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import { Menu } from '@jbrowse/core/ui';
|
|
3
|
+
import { getContainingView, getEnv } from '@jbrowse/core/util';
|
|
4
|
+
import { useTheme } from '@mui/material';
|
|
5
|
+
import { observer } from 'mobx-react';
|
|
6
|
+
import Crosshairs from './Crosshairs';
|
|
7
|
+
import SequenceDialog from './GetSequenceDialog/GetSequenceDialog';
|
|
8
|
+
import MAFTooltip from './MAFTooltip';
|
|
9
|
+
import YScaleBars from './Sidebar/YScaleBars';
|
|
10
|
+
const LinearMafDisplay = observer(function (props) {
|
|
11
|
+
const { model } = props;
|
|
12
|
+
const { pluginManager } = getEnv(model);
|
|
13
|
+
const { rowHeight, height, scrollTop, samples: sources } = model;
|
|
14
|
+
const ref = useRef(null);
|
|
15
|
+
const theme = useTheme();
|
|
16
|
+
const LinearGenomePlugin = pluginManager.getPlugin('LinearGenomeViewPlugin');
|
|
17
|
+
const { BaseLinearDisplayComponent } = LinearGenomePlugin.exports;
|
|
18
|
+
const [mouseY, setMouseY] = useState();
|
|
19
|
+
const [mouseX, setMouseX] = useState();
|
|
20
|
+
const [isDragging, setIsDragging] = useState(false);
|
|
21
|
+
const [dragStartX, setDragStartX] = useState();
|
|
22
|
+
const [dragEndX, setDragEndX] = useState();
|
|
23
|
+
const [showSelectionBox, setShowSelectionBox] = useState(false);
|
|
24
|
+
const [contextCoord, setContextCoord] = useState();
|
|
25
|
+
const [showSequenceDialog, setShowSequenceDialog] = useState(false);
|
|
26
|
+
const [selectionCoords, setSelectionCoords] = useState();
|
|
27
|
+
const { width } = getContainingView(model);
|
|
28
|
+
const handleMouseDown = (event) => {
|
|
29
|
+
const rect = ref.current?.getBoundingClientRect();
|
|
30
|
+
const left = rect?.left || 0;
|
|
31
|
+
const clientX = event.clientX - left;
|
|
32
|
+
// Clear the previous selection box when starting a new drag
|
|
33
|
+
setShowSelectionBox(false);
|
|
34
|
+
setIsDragging(true);
|
|
35
|
+
setDragStartX(clientX);
|
|
36
|
+
setDragEndX(clientX);
|
|
37
|
+
event.stopPropagation();
|
|
38
|
+
};
|
|
39
|
+
const handleMouseMove = (event) => {
|
|
40
|
+
const rect = ref.current?.getBoundingClientRect();
|
|
41
|
+
const top = rect?.top || 0;
|
|
42
|
+
const left = rect?.left || 0;
|
|
43
|
+
const clientX = event.clientX - left;
|
|
44
|
+
const clientY = event.clientY - top;
|
|
45
|
+
setMouseY(clientY);
|
|
46
|
+
setMouseX(clientX);
|
|
47
|
+
if (isDragging) {
|
|
48
|
+
setDragEndX(clientX);
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
const handleMouseUp = (event) => {
|
|
52
|
+
if (isDragging && dragStartX !== undefined && dragEndX !== undefined) {
|
|
53
|
+
// Calculate the drag distance
|
|
54
|
+
const dragDistanceX = Math.abs(dragEndX - dragStartX);
|
|
55
|
+
// Only show context menu if the drag distance is at least 2 pixels in either direction
|
|
56
|
+
if (dragDistanceX >= 2) {
|
|
57
|
+
setContextCoord({
|
|
58
|
+
coord: [event.clientX, event.clientY],
|
|
59
|
+
dragEndX: event.clientX,
|
|
60
|
+
dragStartX: dragStartX,
|
|
61
|
+
});
|
|
62
|
+
// Set showSelectionBox to true to keep the selection visible
|
|
63
|
+
setShowSelectionBox(true);
|
|
64
|
+
}
|
|
65
|
+
else {
|
|
66
|
+
// For very small drags (less than 2px), don't show selection box or context menu
|
|
67
|
+
clearSelectionBox();
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
// Only set isDragging to false, but keep the coordinates
|
|
71
|
+
setIsDragging(false);
|
|
72
|
+
};
|
|
73
|
+
// Function to clear the selection box
|
|
74
|
+
const clearSelectionBox = () => {
|
|
75
|
+
setShowSelectionBox(false);
|
|
76
|
+
setDragStartX(undefined);
|
|
77
|
+
setDragEndX(undefined);
|
|
78
|
+
};
|
|
79
|
+
// Add keydown event handler to clear selection box when Escape key is pressed
|
|
80
|
+
useEffect(() => {
|
|
81
|
+
const handleKeyDown = (event) => {
|
|
82
|
+
if (event.key === 'Escape' && showSelectionBox) {
|
|
83
|
+
clearSelectionBox();
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
// Add click handler to clear selection box when clicking outside of it
|
|
87
|
+
const handleClickOutside = (event) => {
|
|
88
|
+
if (ref.current &&
|
|
89
|
+
!ref.current.contains(event.target) &&
|
|
90
|
+
showSelectionBox) {
|
|
91
|
+
clearSelectionBox();
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
95
|
+
document.addEventListener('click', handleClickOutside);
|
|
96
|
+
return () => {
|
|
97
|
+
document.removeEventListener('keydown', handleKeyDown);
|
|
98
|
+
document.removeEventListener('click', handleClickOutside);
|
|
99
|
+
};
|
|
100
|
+
}, [showSelectionBox, clearSelectionBox]);
|
|
101
|
+
return (React.createElement("div", { ref: ref, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onDoubleClick: () => {
|
|
102
|
+
// Clear selection box on double click
|
|
103
|
+
if (showSelectionBox) {
|
|
104
|
+
clearSelectionBox();
|
|
105
|
+
}
|
|
106
|
+
}, onMouseLeave: () => {
|
|
107
|
+
setMouseY(undefined);
|
|
108
|
+
setMouseX(undefined);
|
|
109
|
+
setIsDragging(false);
|
|
110
|
+
} },
|
|
111
|
+
React.createElement(BaseLinearDisplayComponent, { ...props }),
|
|
112
|
+
React.createElement(YScaleBars, { model: model }),
|
|
113
|
+
mouseY && mouseX && sources && !contextCoord && !showSequenceDialog ? (React.createElement("div", { style: { position: 'relative' } },
|
|
114
|
+
React.createElement(Crosshairs, { width: width, height: height, scrollTop: scrollTop, mouseX: mouseX, mouseY: mouseY }),
|
|
115
|
+
React.createElement(MAFTooltip, { model: model, mouseX: mouseX, mouseY: mouseY, origMouseX: dragStartX, rowHeight: rowHeight, sources: sources }))) : null,
|
|
116
|
+
(isDragging || showSelectionBox) &&
|
|
117
|
+
dragStartX !== undefined &&
|
|
118
|
+
dragEndX !== undefined ? (React.createElement("div", { style: {
|
|
119
|
+
position: 'absolute',
|
|
120
|
+
left: Math.min(dragStartX, dragEndX),
|
|
121
|
+
top: 0,
|
|
122
|
+
width: Math.abs(dragEndX - dragStartX),
|
|
123
|
+
height,
|
|
124
|
+
backgroundColor: 'rgba(0, 0, 255, 0.2)',
|
|
125
|
+
border: '1px solid rgba(0, 0, 255, 0.5)',
|
|
126
|
+
pointerEvents: 'none',
|
|
127
|
+
} })) : null,
|
|
128
|
+
React.createElement(Menu, { open: Boolean(contextCoord), onMenuItemClick: (_, callback) => {
|
|
129
|
+
callback();
|
|
130
|
+
setContextCoord(undefined);
|
|
131
|
+
}, onClose: () => {
|
|
132
|
+
setContextCoord(undefined);
|
|
133
|
+
}, slotProps: {
|
|
134
|
+
transition: {
|
|
135
|
+
onExit: () => {
|
|
136
|
+
setContextCoord(undefined);
|
|
137
|
+
},
|
|
138
|
+
},
|
|
139
|
+
}, anchorReference: "anchorPosition", anchorPosition: contextCoord
|
|
140
|
+
? { top: contextCoord.coord[1], left: contextCoord.coord[0] }
|
|
141
|
+
: undefined, style: {
|
|
142
|
+
zIndex: theme.zIndex.tooltip,
|
|
143
|
+
}, menuItems: [
|
|
144
|
+
{
|
|
145
|
+
label: 'View subsequence',
|
|
146
|
+
onClick: () => {
|
|
147
|
+
if (!contextCoord) {
|
|
148
|
+
return;
|
|
149
|
+
}
|
|
150
|
+
// Store the selection coordinates for the SequenceDialog to use
|
|
151
|
+
setSelectionCoords({
|
|
152
|
+
dragStartX: contextCoord.dragStartX,
|
|
153
|
+
dragEndX: contextCoord.dragEndX,
|
|
154
|
+
});
|
|
155
|
+
// Show the dialog
|
|
156
|
+
setShowSequenceDialog(true);
|
|
157
|
+
// Close the context menu
|
|
158
|
+
setContextCoord(undefined);
|
|
159
|
+
},
|
|
160
|
+
},
|
|
161
|
+
] }),
|
|
162
|
+
showSequenceDialog ? (React.createElement(SequenceDialog, { model: model, selectionCoords: selectionCoords, onClose: () => {
|
|
163
|
+
setShowSequenceDialog(false);
|
|
164
|
+
setSelectionCoords(undefined);
|
|
165
|
+
} })) : null));
|
|
166
|
+
});
|
|
167
|
+
export default LinearMafDisplay;
|
|
168
|
+
//# sourceMappingURL=LinearMafDisplayComponent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LinearMafDisplayComponent.js","sourceRoot":"","sources":["../../../src/LinearMafDisplay/components/LinearMafDisplayComponent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { LinearMafDisplayModel } from '../stateModel';
|
|
3
|
+
interface MAFTooltipProps {
|
|
4
|
+
mouseY: number;
|
|
5
|
+
mouseX: number;
|
|
6
|
+
rowHeight: number;
|
|
7
|
+
sources: Record<string, any>[];
|
|
8
|
+
model: LinearMafDisplayModel;
|
|
9
|
+
origMouseX?: number;
|
|
10
|
+
}
|
|
11
|
+
declare const MAFTooltip: ({ model, mouseY, mouseX, origMouseX, rowHeight, sources, }: MAFTooltipProps) => React.JSX.Element | null;
|
|
12
|
+
export default MAFTooltip;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SanitizedHTML } from '@jbrowse/core/ui';
|
|
3
|
+
import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
|
|
4
|
+
import { getBpDisplayStr, getContainingView, toLocale, } from '@jbrowse/core/util';
|
|
5
|
+
import { observer } from 'mobx-react';
|
|
6
|
+
const MAFTooltip = observer(function ({ model, mouseY, mouseX, origMouseX, rowHeight, sources, }) {
|
|
7
|
+
const view = getContainingView(model);
|
|
8
|
+
const ret = Object.entries(sources[Math.floor(mouseY / rowHeight)] || {})
|
|
9
|
+
.filter(([key]) => key !== 'color' && key !== 'id')
|
|
10
|
+
.map(([key, value]) => `${key}:${value}`)
|
|
11
|
+
.join('\n');
|
|
12
|
+
const p1 = origMouseX ? view.pxToBp(origMouseX) : undefined;
|
|
13
|
+
const p2 = view.pxToBp(mouseX);
|
|
14
|
+
return ret ? (React.createElement(BaseTooltip, null,
|
|
15
|
+
React.createElement(SanitizedHTML, { html: [
|
|
16
|
+
ret,
|
|
17
|
+
...(p1
|
|
18
|
+
? [
|
|
19
|
+
`Start: ${p1.refName}:${toLocale(p1.coord)}`,
|
|
20
|
+
`End: ${p2.refName}:${toLocale(p2.coord)}`,
|
|
21
|
+
`Length: ${getBpDisplayStr(Math.abs(p1.coord - p2.coord))}`,
|
|
22
|
+
]
|
|
23
|
+
: [`${p2.refName}:${toLocale(p2.coord)}`]),
|
|
24
|
+
]
|
|
25
|
+
.filter(f => !!f)
|
|
26
|
+
.join('<br/>') }))) : null;
|
|
27
|
+
});
|
|
28
|
+
export default MAFTooltip;
|
|
29
|
+
//# sourceMappingURL=MAFTooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MAFTooltip.js","sourceRoot":"","sources":["../../../src/LinearMafDisplay/components/MAFTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,QAAQ,GACT,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAcrC,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,EACpC,KAAK,EACL,MAAM,EACN,MAAM,EACN,UAAU,EACV,SAAS,EACT,OAAO,GACS;IAChB,MAAM,IAAI,GAAG,iBAAiB,CAAC,KAAK,CAA0B,CAAA;IAC9D,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC;SACtE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,IAAI,CAAC;SAClD,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;SACxC,IAAI,CAAC,IAAI,CAAC,CAAA;IACb,MAAM,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC3D,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,GAAG,CAAC,CAAC,CAAC,CACX,oBAAC,WAAW;QACV,oBAAC,aAAa,IACZ,IAAI,EAAE;gBACJ,GAAG;gBACH,GAAG,CAAC,EAAE;oBACJ,CAAC,CAAC;wBACE,UAAU,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE;wBAC5C,QAAQ,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE;wBAC1C,WAAW,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE;qBAC5D;oBACH,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;aAC7C;iBACE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;iBAChB,IAAI,CAAC,OAAO,CAAC,GAChB,CACU,CACf,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAC,CAAA;AAEF,eAAe,UAAU,CAAA"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { Dialog } from '@jbrowse/core/ui';
|
|
3
|
+
import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
|
|
4
|
+
import { observer } from 'mobx-react';
|
|
5
|
+
import { makeStyles } from 'tss-react/mui';
|
|
6
|
+
const useStyles = makeStyles()({
|
|
7
|
+
root: {
|
|
8
|
+
width: 500,
|
|
9
|
+
},
|
|
10
|
+
});
|
|
11
|
+
const SetRowHeightDialog = observer(function (props) {
|
|
12
|
+
const { model, handleClose } = props;
|
|
13
|
+
const { classes } = useStyles();
|
|
14
|
+
const [rowHeight, setRowHeight] = useState(`${model.rowHeight}`);
|
|
15
|
+
const [rowProportion, setRowProportion] = useState(`${model.rowProportion}`);
|
|
16
|
+
return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Set row height" },
|
|
17
|
+
React.createElement("form", { onSubmit: event => {
|
|
18
|
+
event.preventDefault();
|
|
19
|
+
model.setRowProportion(+rowProportion);
|
|
20
|
+
model.setRowHeight(+rowHeight);
|
|
21
|
+
handleClose();
|
|
22
|
+
} },
|
|
23
|
+
React.createElement(DialogContent, { className: classes.root },
|
|
24
|
+
React.createElement(Typography, null, "Set row height and the proportion of the row height to use for drawing each row"),
|
|
25
|
+
React.createElement(TextField, { value: rowHeight, helperText: "Enter row height", autoFocus: true, onChange: event => {
|
|
26
|
+
setRowHeight(event.target.value);
|
|
27
|
+
} }),
|
|
28
|
+
React.createElement(TextField, { value: rowProportion, helperText: "Enter row proportion", onChange: event => {
|
|
29
|
+
setRowProportion(event.target.value);
|
|
30
|
+
} }),
|
|
31
|
+
React.createElement(DialogActions, null,
|
|
32
|
+
React.createElement(Button, { variant: "contained", color: "primary", type: "submit" }, "Submit"),
|
|
33
|
+
React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
|
|
34
|
+
handleClose();
|
|
35
|
+
} }, "Cancel"))))));
|
|
36
|
+
});
|
|
37
|
+
export default SetRowHeightDialog;
|
|
38
|
+
//# sourceMappingURL=SetRowHeightDialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SetRowHeightDialog.js","sourceRoot":"","sources":["../../../../src/LinearMafDisplay/components/SetRowHeightDialog/SetRowHeightDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EACL,MAAM,EACN,aAAa,EACb,aAAa,EACb,SAAS,EACT,UAAU,GACX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;KACX;CACF,CAAC,CAAA;AAEF,MAAM,kBAAkB,GAAG,QAAQ,CAAC,UAAU,KAQ7C;IACC,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IACpC,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC,CAAA;IAChE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC,CAAA;IAE5E,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAC,gBAAgB;QACvD,8BACE,QAAQ,EAAE,KAAK,CAAC,EAAE;gBAChB,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,KAAK,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAA;gBACtC,KAAK,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAA;gBAC9B,WAAW,EAAE,CAAA;YACf,CAAC;YAED,oBAAC,aAAa,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI;gBACpC,oBAAC,UAAU,0FAGE;gBACb,oBAAC,SAAS,IACR,KAAK,EAAE,SAAS,EAChB,UAAU,EAAC,kBAAkB,EAC7B,SAAS,QACT,QAAQ,EAAE,KAAK,CAAC,EAAE;wBAChB,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBAClC,CAAC,GACD;gBACF,oBAAC,SAAS,IACR,KAAK,EAAE,aAAa,EACpB,UAAU,EAAC,sBAAsB,EACjC,QAAQ,EAAE,KAAK,CAAC,EAAE;wBAChB,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBACtC,CAAC,GACD;gBACF,oBAAC,aAAa;oBACZ,oBAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,aAEhD;oBACT,oBAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE;4BACZ,WAAW,EAAE,CAAA;wBACf,CAAC,aAGM,CACK,CACF,CACX,CACA,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AACF,eAAe,kBAAkB,CAAA"}
|
|
@@ -2,9 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { observer } from 'mobx-react';
|
|
3
3
|
import RectBg from './RectBg';
|
|
4
4
|
import Tree from './Tree';
|
|
5
|
-
const ColorLegend = observer(function ({ model,
|
|
6
|
-
const { totalHeight, treeWidth, samples = [], rowHeight } = model;
|
|
7
|
-
const canDisplayLabel = rowHeight >= 8;
|
|
5
|
+
const ColorLegend = observer(function ({ model, }) {
|
|
6
|
+
const { labelWidth, canDisplayLabel, totalHeight, treeWidth, samples = [], rowHeight, svgFontSize, } = model;
|
|
8
7
|
const boxHeight = Math.min(20, rowHeight);
|
|
9
8
|
return (React.createElement(React.Fragment, null,
|
|
10
9
|
React.createElement(RectBg, { y: 0, x: 0, width: labelWidth + 5 + treeWidth, height: totalHeight }),
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorLegend.js","sourceRoot":"","sources":["../../../../src/LinearMafDisplay/components/Sidebar/ColorLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,IAAI,MAAM,QAAQ,CAAA;AAIzB,MAAM,WAAW,GAAG,QAAQ,CAAC,UAAU,EACrC,KAAK,GAGN;IACC,MAAM,EACJ,UAAU,EACV,eAAe,EACf,WAAW,EACX,SAAS,EACT,OAAO,GAAG,EAAE,EACZ,SAAS,EACT,WAAW,GACZ,GAAG,KAAK,CAAA;IACT,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,CAAA;IAEzC,OAAO,CACL;QACE,oBAAC,MAAM,IACL,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,UAAU,GAAG,CAAC,GAAG,SAAS,EACjC,MAAM,EAAE,WAAW,GACnB;QACF,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,GAAI;QACtB,2BAAG,SAAS,EAAE,aAAa,SAAS,GAAG,CAAC,KAAK;YAC1C,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5B,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,MAAM,CAAC,EAAE,IAAI,GAAG,EAAE,EAC1B,CAAC,EAAE,GAAG,GAAG,SAAS,EAClB,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,UAAU,GAAG,CAAC,EACrB,MAAM,EAAE,SAAS,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,GACnB,CACH,CAAC;YACD,eAAe;gBACd,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3B,8BACE,GAAG,EAAE,GAAG,MAAM,CAAC,EAAE,IAAI,GAAG,EAAE,EAC1B,gBAAgB,EAAC,QAAQ,EACzB,QAAQ,EAAE,WAAW,EACrB,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,GAAG,GAAG,SAAS,GAAG,SAAS,GAAG,CAAC,IAEjC,MAAM,CAAC,KAAK,CACR,CACR,CAAC;gBACJ,CAAC,CAAC,IAAI,CACN,CACH,CACJ,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,WAAW,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RectBg.js","sourceRoot":"","sources":["../../../../src/LinearMafDisplay/components/Sidebar/RectBg.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,GAAG,CAAC,KAMf,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,GAAG,sBAAsB,EAAE,GAAG,KAAK,CAAA;IAChD,OAAO,iCAAU,KAAK,EAAE,IAAI,EAAE,KAAK,GAAI,CAAA;AACzC,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}
|