@jbrowse/plugin-dotplot-view 4.0.2 → 4.0.4
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.
|
@@ -58,6 +58,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
58
58
|
}> | null;
|
|
59
59
|
readonly adapterConfig: any;
|
|
60
60
|
readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
|
|
61
|
+
readonly isMinimized: boolean;
|
|
61
62
|
readonly parentDisplay: any;
|
|
62
63
|
readonly effectiveRpcDriverName: any;
|
|
63
64
|
} & {
|
|
@@ -114,6 +115,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
114
115
|
}> | null;
|
|
115
116
|
readonly adapterConfig: any;
|
|
116
117
|
readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
|
|
118
|
+
readonly isMinimized: boolean;
|
|
117
119
|
readonly parentDisplay: any;
|
|
118
120
|
readonly effectiveRpcDriverName: any;
|
|
119
121
|
} & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
|
|
@@ -167,6 +169,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
167
169
|
}> | null;
|
|
168
170
|
readonly adapterConfig: any;
|
|
169
171
|
readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
|
|
172
|
+
readonly isMinimized: boolean;
|
|
170
173
|
readonly parentDisplay: any;
|
|
171
174
|
readonly effectiveRpcDriverName: any;
|
|
172
175
|
}, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
|
|
@@ -36,13 +36,6 @@ const DotplotControls = observer(function DotplotControls({ model, }) {
|
|
|
36
36
|
},
|
|
37
37
|
helpText: 'Adjusts zoom levels proportionally so both views show the same total number of base pairs. This accounts for different view widths while maintaining the same total genomic span.',
|
|
38
38
|
},
|
|
39
|
-
{
|
|
40
|
-
label: 'Show all regions',
|
|
41
|
-
onClick: () => {
|
|
42
|
-
model.showAllRegions();
|
|
43
|
-
},
|
|
44
|
-
helpText: 'Zooms out to display all genome assemblies in their entirety. Useful for getting a high-level overview or resetting the view after zooming into specific regions.',
|
|
45
|
-
},
|
|
46
39
|
{
|
|
47
40
|
label: 'Re-order chromosomes',
|
|
48
41
|
icon: ShuffleIcon,
|
|
@@ -58,31 +51,43 @@ const DotplotControls = observer(function DotplotControls({ model, }) {
|
|
|
58
51
|
helpText: 'Diagonalization algorithmically reorders and reorients chromosomes to minimize crossing synteny lines, creating a more diagonal pattern. This makes it easier to identify large-scale genomic rearrangements, inversions, and translocations. The process runs on the webworker for better performance.',
|
|
59
52
|
},
|
|
60
53
|
{
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
54
|
+
label: 'Show...',
|
|
55
|
+
subMenu: [
|
|
56
|
+
{
|
|
57
|
+
label: 'Show all regions',
|
|
58
|
+
onClick: () => {
|
|
59
|
+
model.showAllRegions();
|
|
60
|
+
},
|
|
61
|
+
helpText: 'Zooms out to display all genome assemblies in their entirety. Useful for getting a high-level overview or resetting the view after zooming into specific regions.',
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
label: 'Show pan buttons',
|
|
65
|
+
type: 'checkbox',
|
|
66
|
+
checked: model.showPanButtons,
|
|
67
|
+
onClick: () => {
|
|
68
|
+
model.setShowPanButtons(!model.showPanButtons);
|
|
69
|
+
},
|
|
70
|
+
helpText: 'Show or hide directional pan buttons that allow you to navigate the dotplot view by clicking arrows. Useful for precise navigation without using mouse drag.',
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
label: 'Show dynamic controls',
|
|
74
|
+
type: 'checkbox',
|
|
75
|
+
checked: showDynamicControls,
|
|
76
|
+
onClick: () => {
|
|
77
|
+
setShowDynamicControls(!showDynamicControls);
|
|
78
|
+
},
|
|
79
|
+
helpText: 'Toggle visibility of dynamic controls like opacity and minimum length sliders. These controls allow you to adjust dotplot visualization parameters in real-time.',
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
type: 'checkbox',
|
|
83
|
+
label: 'Draw CIGAR insertions/deletions',
|
|
84
|
+
checked: model.drawCigar,
|
|
85
|
+
onClick: () => {
|
|
86
|
+
model.setDrawCigar(!model.drawCigar);
|
|
87
|
+
},
|
|
88
|
+
helpText: 'Toggle detailed CIGAR string visualization showing matches, insertions, and deletions in alignments. Disable for a cleaner view that shows only broad syntenic blocks.',
|
|
89
|
+
},
|
|
90
|
+
],
|
|
86
91
|
},
|
|
87
92
|
{
|
|
88
93
|
label: 'Click and drag mode',
|
|
@@ -5,7 +5,7 @@ import { makeStyles } from '@jbrowse/core/util/tss-react';
|
|
|
5
5
|
import { Slider, Typography } from '@mui/material';
|
|
6
6
|
import { observer } from 'mobx-react';
|
|
7
7
|
import SliderTooltip from "./SliderTooltip.js";
|
|
8
|
-
const useStyles = makeStyles()({
|
|
8
|
+
const useStyles = makeStyles()(theme => ({
|
|
9
9
|
container: {
|
|
10
10
|
display: 'flex',
|
|
11
11
|
alignItems: 'center',
|
|
@@ -13,7 +13,11 @@ const useStyles = makeStyles()({
|
|
|
13
13
|
marginRight: 16,
|
|
14
14
|
minWidth: 150,
|
|
15
15
|
},
|
|
16
|
-
|
|
16
|
+
slider: {
|
|
17
|
+
width: 100,
|
|
18
|
+
color: theme.palette.text.secondary,
|
|
19
|
+
},
|
|
20
|
+
}));
|
|
17
21
|
const MinLengthSlider = observer(function MinLengthSlider({ model, }) {
|
|
18
22
|
const { classes } = useStyles();
|
|
19
23
|
const firstDisplay = model.tracks[0]?.displays[0];
|
|
@@ -32,7 +36,7 @@ const MinLengthSlider = observer(function MinLengthSlider({ model, }) {
|
|
|
32
36
|
display.setMinAlignmentLength(newMinLength);
|
|
33
37
|
}
|
|
34
38
|
}
|
|
35
|
-
}, min: 0, max: Math.log2(1000000) * 100, valueLabelDisplay: "auto", valueLabelFormat: newValue => toLocale(Math.round(2 ** (newValue / 100))), size: "small",
|
|
39
|
+
}, min: 0, max: Math.log2(1000000) * 100, valueLabelDisplay: "auto", valueLabelFormat: newValue => toLocale(Math.round(2 ** (newValue / 100))), size: "small", className: classes.slider, slots: {
|
|
36
40
|
valueLabel: SliderTooltip,
|
|
37
41
|
} })] }));
|
|
38
42
|
});
|
|
@@ -3,7 +3,7 @@ import { makeStyles } from '@jbrowse/core/util/tss-react';
|
|
|
3
3
|
import { Slider, Typography } from '@mui/material';
|
|
4
4
|
import { observer } from 'mobx-react';
|
|
5
5
|
import SliderTooltip from "./SliderTooltip.js";
|
|
6
|
-
const useStyles = makeStyles()({
|
|
6
|
+
const useStyles = makeStyles()(theme => ({
|
|
7
7
|
container: {
|
|
8
8
|
display: 'flex',
|
|
9
9
|
alignItems: 'center',
|
|
@@ -11,7 +11,11 @@ const useStyles = makeStyles()({
|
|
|
11
11
|
marginRight: 16,
|
|
12
12
|
minWidth: 150,
|
|
13
13
|
},
|
|
14
|
-
|
|
14
|
+
slider: {
|
|
15
|
+
width: 100,
|
|
16
|
+
color: theme.palette.text.secondary,
|
|
17
|
+
},
|
|
18
|
+
}));
|
|
15
19
|
const OpacitySlider = observer(function OpacitySlider({ model, }) {
|
|
16
20
|
const { classes } = useStyles();
|
|
17
21
|
const firstDisplay = model.tracks[0]?.displays[0];
|
|
@@ -30,7 +34,7 @@ const OpacitySlider = observer(function OpacitySlider({ model, }) {
|
|
|
30
34
|
}
|
|
31
35
|
}
|
|
32
36
|
};
|
|
33
|
-
return (_jsxs("span", { className: classes.container, children: [_jsx(Typography, { variant: "body2", style: { marginRight: 8 }, children: "Opacity:" }), _jsx(Slider, { value: sliderValue, onChange: handleAlphaChange, min: 0, max: 1, step: 0.01, valueLabelDisplay: "auto", size: "small",
|
|
37
|
+
return (_jsxs("span", { className: classes.container, children: [_jsx(Typography, { variant: "body2", style: { marginRight: 8 }, children: "Opacity:" }), _jsx(Slider, { value: sliderValue, onChange: handleAlphaChange, min: 0, max: 1, step: 0.01, valueLabelDisplay: "auto", size: "small", className: classes.slider, slots: {
|
|
34
38
|
valueLabel: SliderTooltip,
|
|
35
39
|
}, valueLabelFormat: value => sliderToAlpha(value).toFixed(3) })] }));
|
|
36
40
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-dotplot-view",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.4",
|
|
4
4
|
"description": "JBrowse 2 dotplot view",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jbrowse",
|
|
@@ -23,13 +23,13 @@
|
|
|
23
23
|
"@jbrowse/mobx-state-tree": "^5.5.0",
|
|
24
24
|
"@mui/icons-material": "^7.3.6",
|
|
25
25
|
"@mui/material": "^7.3.6",
|
|
26
|
-
"@mui/x-data-grid": "^8.
|
|
26
|
+
"@mui/x-data-grid": "^8.25.0",
|
|
27
27
|
"@types/file-saver-es": "^2.0.3",
|
|
28
28
|
"file-saver-es": "^2.0.5",
|
|
29
29
|
"mobx": "^6.15.0",
|
|
30
30
|
"mobx-react": "^9.2.1",
|
|
31
|
-
"@jbrowse/plugin-alignments": "^4.0.
|
|
32
|
-
"@jbrowse/core": "^4.0.
|
|
31
|
+
"@jbrowse/plugin-alignments": "^4.0.4",
|
|
32
|
+
"@jbrowse/core": "^4.0.4"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": ">=18.0.0",
|