@jbrowse/plugin-linear-comparative-view 4.0.3 → 4.1.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.
Files changed (26) hide show
  1. package/esm/LGVSyntenyDisplay/model.d.ts +20 -1
  2. package/esm/LinearComparativeDisplay/stateModelFactory.d.ts +3 -0
  3. package/esm/LinearComparativeView/components/LinearComparativeRenderArea.js +3 -0
  4. package/esm/LinearComparativeView/components/OpacitySlider.js +7 -3
  5. package/esm/LinearComparativeView/components/useRangeSelect.js +3 -0
  6. package/esm/LinearComparativeView/model.d.ts +90 -57
  7. package/esm/LinearSyntenyDisplay/afterAttach.js +9 -0
  8. package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.js +15 -15
  9. package/esm/LinearSyntenyDisplay/components/util.d.ts +1 -0
  10. package/esm/LinearSyntenyDisplay/components/util.js +23 -38
  11. package/esm/LinearSyntenyDisplay/drawCigarClickMap.d.ts +2 -0
  12. package/esm/LinearSyntenyDisplay/drawCigarClickMap.js +88 -0
  13. package/esm/LinearSyntenyDisplay/{drawMouseoverClickMap.js → drawMouseover.js} +9 -11
  14. package/esm/LinearSyntenyDisplay/drawRef.d.ts +2 -0
  15. package/esm/LinearSyntenyDisplay/drawRef.js +190 -0
  16. package/esm/LinearSyntenyDisplay/drawSynteny.d.ts +4 -6
  17. package/esm/LinearSyntenyDisplay/drawSynteny.js +4 -461
  18. package/esm/LinearSyntenyDisplay/drawSyntenyUtils.d.ts +58 -0
  19. package/esm/LinearSyntenyDisplay/drawSyntenyUtils.js +62 -0
  20. package/esm/LinearSyntenyDisplay/model.d.ts +47 -2
  21. package/esm/LinearSyntenyDisplay/model.js +50 -2
  22. package/esm/LinearSyntenyView/model.d.ts +111 -69
  23. package/esm/LinearSyntenyView/model.js +23 -24
  24. package/esm/SyntenyFeatureDetail/LinkToSyntenyView.js +4 -4
  25. package/package.json +8 -7
  26. /package/esm/LinearSyntenyDisplay/{drawMouseoverClickMap.d.ts → drawMouseover.d.ts} +0 -0
@@ -90,13 +90,6 @@ export default function stateModelFactory(pluginManager) {
90
90
  icon: CropFreeIcon,
91
91
  helpText: 'Square view synchronizes the zoom levels of both genome views by calculating the average zoom level and applying it to both panels. This helps ensure features are displayed at comparable scales, making it easier to compare syntenic regions visually.',
92
92
  },
93
- {
94
- label: 'Show all regions',
95
- onClick: self.showAllRegions,
96
- description: 'Show entire genome assemblies',
97
- icon: VisibilityIcon,
98
- helpText: 'This command will zoom out all views to display the entire genome assemblies. This is useful when you want to get a high-level overview of syntenic relationships across whole genomes or when you need to reset the view after zooming into specific regions.',
99
- },
100
93
  {
101
94
  label: 'Re-order chromosomes',
102
95
  onClick: () => {
@@ -113,39 +106,46 @@ export default function stateModelFactory(pluginManager) {
113
106
  helpText: "This operation 'diagonalizes' the data which 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 may take a few moments for large genomes.",
114
107
  },
115
108
  {
116
- label: 'Show dynamic controls',
117
- type: 'checkbox',
118
- checked: self.showDynamicControls,
119
- onClick: () => {
120
- self.setShowDynamicControls(!self.showDynamicControls);
121
- },
122
- helpText: 'Toggle visibility of dynamic controls like opacity and minimum length sliders. These controls allow you to adjust synteny visualization parameters in real-time.',
123
- },
124
- {
125
- label: 'Draw',
109
+ label: 'Show...',
126
110
  subMenu: [
127
111
  {
128
- label: 'Draw CIGAR',
112
+ label: 'Show all regions',
113
+ onClick: self.showAllRegions,
114
+ description: 'Show entire genome assemblies',
115
+ icon: VisibilityIcon,
116
+ helpText: 'This command will zoom out all views to display the entire genome assemblies. This is useful when you want to get a high-level overview of syntenic relationships across whole genomes or when you need to reset the view after zooming into specific regions.',
117
+ },
118
+ {
119
+ label: 'Show dynamic controls',
120
+ type: 'checkbox',
121
+ checked: self.showDynamicControls,
122
+ onClick: () => {
123
+ self.setShowDynamicControls(!self.showDynamicControls);
124
+ },
125
+ helpText: 'Toggle visibility of dynamic controls like opacity and minimum length sliders. These controls allow you to adjust synteny visualization parameters in real-time.',
126
+ },
127
+ {
128
+ label: 'Show CIGAR insertions/deletions',
129
129
  checked: self.drawCIGAR,
130
130
  type: 'checkbox',
131
- description: 'If disabled, only draws the broad scale CIGAR match',
131
+ description: 'If disabled, only shows the broad scale CIGAR match',
132
132
  onClick: () => {
133
133
  self.setDrawCIGAR(!self.drawCIGAR);
134
134
  },
135
135
  helpText: 'CIGAR strings encode detailed alignment information including matches, insertions, and deletions. When enabled, this option visualizes the fine-scale variations in syntenic alignments. Disable this for a cleaner view that shows only broad syntenic blocks.',
136
136
  },
137
137
  {
138
- label: 'Draw only CIGAR matches',
138
+ label: 'Show CIGAR matches only',
139
139
  checked: self.drawCIGARMatchesOnly,
140
140
  type: 'checkbox',
141
- description: 'If enabled, it hides the insertions and deletions in the CIGAR strings, helps with divergent',
141
+ description: 'If enabled, hides the insertions and deletions in the CIGAR strings',
142
142
  onClick: () => {
143
143
  self.setDrawCIGARMatchesOnly(!self.drawCIGARMatchesOnly);
144
144
  },
145
145
  helpText: 'When comparing divergent genomes, showing all insertions and deletions can clutter the view. This option filters the CIGAR visualization to show only the matching regions, providing a cleaner view of conserved syntenic blocks while hiding small-scale indels.',
146
146
  },
147
147
  {
148
- label: 'Draw curved lines',
148
+ label: 'Show curved lines',
149
149
  type: 'checkbox',
150
150
  checked: self.drawCurves,
151
151
  icon: Curves,
@@ -155,7 +155,7 @@ export default function stateModelFactory(pluginManager) {
155
155
  helpText: 'Toggle between straight lines and smooth bezier curves for synteny connections. Curved lines can make the visualization more aesthetically pleasing and may help reduce visual clutter when many syntenic regions are displayed. Straight lines provide a more direct representation.',
156
156
  },
157
157
  {
158
- label: 'Draw location markers',
158
+ label: 'Show location markers',
159
159
  type: 'checkbox',
160
160
  checked: self.drawLocationMarkers,
161
161
  description: 'Draw periodic markers to show location within large matches',
@@ -188,7 +188,6 @@ export default function stateModelFactory(pluginManager) {
188
188
  },
189
189
  ]);
190
190
  },
191
- helpText: 'Export the current synteny view as a scalable vector graphics (SVG) file. SVG format preserves quality at any zoom level and can be edited in vector graphics software like Inkscape or Adobe Illustrator. Perfect for creating publication-quality figures.',
192
191
  },
193
192
  ];
194
193
  },
@@ -10,8 +10,8 @@ const LinkToSyntenyView = observer(function LinkToSyntenyView({ model, feat, })
10
10
  event.preventDefault();
11
11
  const { views } = view;
12
12
  if (level !== undefined) {
13
- views[level]?.navTo(feat);
14
- views[level + 1]?.navTo(feat.mate);
13
+ views[level]?.navTo(feat, 0.2);
14
+ views[level + 1]?.navTo(feat.mate, 0.2);
15
15
  }
16
16
  else {
17
17
  const f1 = feat;
@@ -30,8 +30,8 @@ const LinkToSyntenyView = observer(function LinkToSyntenyView({ model, feat, })
30
30
  : '',
31
31
  ].join(' ... '));
32
32
  }
33
- v1?.navTo(f1);
34
- v2?.navTo(f2);
33
+ v1?.navTo(f1, 0.2);
34
+ v2?.navTo(f2, 0.2);
35
35
  }
36
36
  }, children: "Center view on this feature" }) })) : null, _jsx("li", { children: _jsx(Link, { href: "#", onClick: event => {
37
37
  event.preventDefault();
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@jbrowse/plugin-linear-comparative-view",
3
- "version": "4.0.3",
3
+ "version": "4.1.1",
4
+ "type": "module",
4
5
  "description": "JBrowse 2 linear comparative view",
5
6
  "keywords": [
6
7
  "jbrowse",
@@ -21,16 +22,16 @@
21
22
  ],
22
23
  "dependencies": {
23
24
  "@jbrowse/mobx-state-tree": "^5.5.0",
24
- "@mui/icons-material": "^7.3.6",
25
- "@mui/material": "^7.3.6",
26
- "copy-to-clipboard": "^3.3.3",
25
+ "@mui/icons-material": "^7.3.7",
26
+ "@mui/material": "^7.3.7",
27
27
  "@types/file-saver-es": "^2.0.3",
28
+ "copy-to-clipboard": "^3.3.3",
28
29
  "file-saver-es": "^2.0.5",
29
30
  "mobx": "^6.15.0",
30
31
  "mobx-react": "^9.2.1",
31
- "@jbrowse/plugin-linear-genome-view": "^4.0.3",
32
- "@jbrowse/plugin-alignments": "^4.0.3",
33
- "@jbrowse/core": "^4.0.3"
32
+ "@jbrowse/core": "^4.1.1",
33
+ "@jbrowse/plugin-alignments": "^4.1.1",
34
+ "@jbrowse/plugin-linear-genome-view": "^4.1.1"
34
35
  },
35
36
  "peerDependencies": {
36
37
  "react": ">=18.0.0",