@jbrowse/plugin-dotplot-view 4.0.3 → 4.1.1

package/esm/DotplotDisplay/stateModelFactory.d.ts

@@ -58,6 +58,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     }> | null;
     readonly adapterConfig: any;
     readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+    readonly isMinimized: boolean;
     readonly parentDisplay: any;
     readonly effectiveRpcDriverName: any;
 } & {
@@ -114,6 +115,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
@@ -167,6 +169,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;

package/esm/DotplotView/components/DotplotControls.js

@@ -36,13 +36,6 @@ const DotplotControls = observer(function DotplotControls({ model, }) {
                         },
                         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.',
                     },
-                    {
-                        label: 'Show all regions',
-                        onClick: () => {
-                            model.showAllRegions();
-                        },
-                        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.',
-                    },
                     {
                         label: 'Re-order chromosomes',
                         icon: ShuffleIcon,
@@ -58,31 +51,43 @@ const DotplotControls = observer(function DotplotControls({ model, }) {
                         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.',
                     },
                     {
-                        type: 'checkbox',
-                        label: 'Draw CIGAR',
-                        checked: model.drawCigar,
-                        onClick: () => {
-                            model.setDrawCigar(!model.drawCigar);
-                        },
-                        helpText: 'Toggle detailed CIGAR string visualization showing matches, insertions, and deletions in alignments. Disable for a cleaner view that shows only broad syntenic blocks.',
-                    },
-                    {
-                        label: 'Show pan buttons',
-                        type: 'checkbox',
-                        checked: model.showPanButtons,
-                        onClick: () => {
-                            model.setShowPanButtons(!model.showPanButtons);
-                        },
-                        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.',
-                    },
-                    {
-                        label: 'Show dynamic controls',
-                        type: 'checkbox',
-                        checked: showDynamicControls,
-                        onClick: () => {
-                            setShowDynamicControls(!showDynamicControls);
-                        },
-                        helpText: 'Toggle visibility of dynamic controls like opacity and minimum length sliders. These controls allow you to adjust dotplot visualization parameters in real-time.',
+                        label: 'Show...',
+                        subMenu: [
+                            {
+                                label: 'Show all regions',
+                                onClick: () => {
+                                    model.showAllRegions();
+                                },
+                                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.',
+                            },
+                            {
+                                label: 'Show pan buttons',
+                                type: 'checkbox',
+                                checked: model.showPanButtons,
+                                onClick: () => {
+                                    model.setShowPanButtons(!model.showPanButtons);
+                                },
+                                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.',
+                            },
+                            {
+                                label: 'Show dynamic controls',
+                                type: 'checkbox',
+                                checked: showDynamicControls,
+                                onClick: () => {
+                                    setShowDynamicControls(!showDynamicControls);
+                                },
+                                helpText: 'Toggle visibility of dynamic controls like opacity and minimum length sliders. These controls allow you to adjust dotplot visualization parameters in real-time.',
+                            },
+                            {
+                                type: 'checkbox',
+                                label: 'Draw CIGAR insertions/deletions',
+                                checked: model.drawCigar,
+                                onClick: () => {
+                                    model.setDrawCigar(!model.drawCigar);
+                                },
+                                helpText: 'Toggle detailed CIGAR string visualization showing matches, insertions, and deletions in alignments. Disable for a cleaner view that shows only broad syntenic blocks.',
+                            },
+                        ],
                     },
                     {
                         label: 'Click and drag mode',

package/esm/DotplotView/components/MinLengthSlider.js

@@ -5,7 +5,7 @@ import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Slider, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import SliderTooltip from "./SliderTooltip.js";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         alignItems: 'center',
@@ -13,7 +13,11 @@ const useStyles = makeStyles()({
         marginRight: 16,
         minWidth: 150,
     },
-});
+    slider: {
+        width: 100,
+        color: theme.palette.text.secondary,
+    },
+}));
 const MinLengthSlider = observer(function MinLengthSlider({ model, }) {
     const { classes } = useStyles();
     const firstDisplay = model.tracks[0]?.displays[0];
@@ -32,7 +36,7 @@ const MinLengthSlider = observer(function MinLengthSlider({ model, }) {
                             display.setMinAlignmentLength(newMinLength);
                         }
                     }
-                }, min: 0, max: Math.log2(1000000) * 100, valueLabelDisplay: "auto", valueLabelFormat: newValue => toLocale(Math.round(2 ** (newValue / 100))), size: "small", style: { minWidth: 100 }, slots: {
+                }, min: 0, max: Math.log2(1000000) * 100, valueLabelDisplay: "auto", valueLabelFormat: newValue => toLocale(Math.round(2 ** (newValue / 100))), size: "small", className: classes.slider, slots: {
                     valueLabel: SliderTooltip,
                 } })] }));
 });

package/esm/DotplotView/components/OpacitySlider.js

@@ -3,7 +3,7 @@ import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Slider, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import SliderTooltip from "./SliderTooltip.js";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         alignItems: 'center',
@@ -11,7 +11,11 @@ const useStyles = makeStyles()({
         marginRight: 16,
         minWidth: 150,
     },
-});
+    slider: {
+        width: 100,
+        color: theme.palette.text.secondary,
+    },
+}));
 const OpacitySlider = observer(function OpacitySlider({ model, }) {
     const { classes } = useStyles();
     const firstDisplay = model.tracks[0]?.displays[0];
@@ -30,7 +34,7 @@ const OpacitySlider = observer(function OpacitySlider({ model, }) {
             }
         }
     };
-    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", style: { minWidth: 100 }, slots: {
+    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: {
                     valueLabel: SliderTooltip,
                 }, valueLabelFormat: value => sliderToAlpha(value).toFixed(3) })] }));
 });

package/esm/DotplotView/model.d.ts

@@ -359,7 +359,7 @@ export default function stateModelFactory(pm: PluginManager): import("@jbrowse/m
 } & {
     activateTrackSelector(): import("@jbrowse/core/util").Widget;
     showTrack(trackId: string, initialSnapshot?: {}): any;
-    hideTrack(trackId: string): 0 | 1;
+    hideTrack(trackId: string): 1 | 0;
     toggleTrack(trackId: string): void;
     setAssemblyNames(target: string, query: string): void;
     setViews(arr: SnapshotIn<Base1DViewModel>[]): void;

package/esm/index.d.ts

@@ -1,6 +1,6 @@
 import Plugin from '@jbrowse/core/Plugin';
 import type PluginManager from '@jbrowse/core/PluginManager';
-export type { DotplotImportFormSyntenyOption } from './DotplotView/components/ImportForm/TrackSelector';
+export type { DotplotImportFormSyntenyOption } from './DotplotView/components/ImportForm/TrackSelector.ts';
 export default class DotplotPlugin extends Plugin {
     name: string;
     install(pluginManager: PluginManager): void;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@jbrowse/plugin-dotplot-view",
-  "version": "4.0.3",
+  "version": "4.1.1",
+  "type": "module",
   "description": "JBrowse 2 dotplot view",
   "keywords": [
     "jbrowse",
@@ -21,15 +22,15 @@
   ],
   "dependencies": {
     "@jbrowse/mobx-state-tree": "^5.5.0",
-    "@mui/icons-material": "^7.3.6",
-    "@mui/material": "^7.3.6",
-    "@mui/x-data-grid": "^8.23.0",
+    "@mui/icons-material": "^7.3.7",
+    "@mui/material": "^7.3.7",
+    "@mui/x-data-grid": "^8.26.0",
     "@types/file-saver-es": "^2.0.3",
     "file-saver-es": "^2.0.5",
     "mobx": "^6.15.0",
     "mobx-react": "^9.2.1",
-    "@jbrowse/core": "^4.0.3",
-    "@jbrowse/plugin-alignments": "^4.0.3"
+    "@jbrowse/core": "^4.1.1",
+    "@jbrowse/plugin-alignments": "^4.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",