@jbrowse/app-core 2.9.0 → 2.10.0

package/dist/AppFocus/index.d.ts

@@ -9,5 +9,8 @@ export declare function AppFocusMixin(): import("mobx-state-tree").IModelType<{
      */
     focusedViewId: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
 }, {
+    /**
+     * #action
+     */
     setFocusedViewId(viewId: string): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/dist/AppFocus/index.js

@@ -16,6 +16,9 @@ function AppFocusMixin() {
         focusedViewId: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
     })
         .actions(self => ({
+        /**
+         * #action
+         */
         setFocusedViewId(viewId) {
             self.focusedViewId = viewId;
         },

package/dist/JBrowseConfig/index.d.ts

@@ -4,7 +4,22 @@ import PluginManager from '@jbrowse/core/PluginManager';
 /**
  * #config JBrowseRootConfig
  * #category root
- * configuration in a config.json/file.jbrowse
+ *
+ * this is a config model representing a config.json (for jbrowse-web) or
+ * somefile.jbrowse (for jbrowse-desktop, where configs have the .jbrowse
+ * extension)
+ *
+ * includes
+ * - [FormatDetails](../formatdetails) for global (instead of per-track)
+ *   feature detail formatters
+ * - [FormatAbout](../formatabout) for global (instead of per-track) about
+ *   track formatters
+ * - [HierarchicalConfigSchema](../hierarchicalconfigschema) for track selector
+ *   configs
+ *
+ * also includes any pluginManager.pluginConfigurationSchemas(), so plugins
+ * that have a configurationSchema field on their class are mixed into this
+ * object
  */
 export declare function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }: {
     pluginManager: PluginManager;
@@ -90,9 +105,7 @@ export declare function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }:
             defaultCollapsed: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
                 categoryNames: {
                     type: string;
-                    defaultValue: never[]; /**
-                     * #slot configuration.highResolutionScaling
-                     */
+                    defaultValue: never[];
                 };
                 topLevelCategories: {
                     type: string;
@@ -161,10 +174,13 @@ export declare function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }:
     internetAccounts: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
     /**
      * #slot
+     * configuration for aggregate text search adapters (created by e.g.
+     * jbrowse text-index, but can be a pluggable TextSearchAdapter type)
      */
     aggregateTextSearchAdapters: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
     /**
      * #slot
+     * configuration for connections
      */
     connections: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
     /**

package/dist/JBrowseConfig/index.js

@@ -11,7 +11,22 @@ const mobx_state_tree_1 = require("mobx-state-tree");
 /**
  * #config JBrowseRootConfig
  * #category root
- * configuration in a config.json/file.jbrowse
+ *
+ * this is a config model representing a config.json (for jbrowse-web) or
+ * somefile.jbrowse (for jbrowse-desktop, where configs have the .jbrowse
+ * extension)
+ *
+ * includes
+ * - [FormatDetails](../formatdetails) for global (instead of per-track)
+ *   feature detail formatters
+ * - [FormatAbout](../formatabout) for global (instead of per-track) about
+ *   track formatters
+ * - [HierarchicalConfigSchema](../hierarchicalconfigschema) for track selector
+ *   configs
+ *
+ * also includes any pluginManager.pluginConfigurationSchemas(), so plugins
+ * that have a configurationSchema field on their class are mixed into this
+ * object
  */
 function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }) {
     return mobx_state_tree_1.types.model('JBrowseConfig', {
@@ -99,10 +114,13 @@ function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }) {
         internetAccounts: mobx_state_tree_1.types.array(pluginManager.pluggableConfigSchemaType('internet account')),
         /**
          * #slot
+         * configuration for aggregate text search adapters (created by e.g.
+         * jbrowse text-index, but can be a pluggable TextSearchAdapter type)
          */
         aggregateTextSearchAdapters: mobx_state_tree_1.types.array(pluginManager.pluggableConfigSchemaType('text search adapter')),
         /**
          * #slot
+         * configuration for connections
          */
         connections: mobx_state_tree_1.types.array(pluginManager.pluggableConfigSchemaType('connection')),
         /**

package/dist/JBrowseModel/index.d.ts

@@ -3,6 +3,17 @@ import { BaseAssemblyConfigSchema } from '@jbrowse/core/assemblyManager';
 import RpcManager from '@jbrowse/core/rpc/RpcManager';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import { PluginDefinition } from '@jbrowse/core/PluginLoader';
+/**
+ * #stateModel AppCoreJBrowseModel
+ * note that JBrowseRootConfig is a config model, but config models are MST
+ * trees themselves, which is why this stateModel is allowed to extend it
+ *
+ * the AppCoreJBrowseModel is generally on a property named rootModel.jbrowse
+ *
+ * extends
+ * - [JBrowseRootConfig](/docs/config/jbrowserootconfig)
+
+ */
 export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }: {
     pluginManager: PluginManager;
     assemblyConfigSchema: BaseAssemblyConfigSchema;
@@ -15,9 +26,7 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
                 defaultValue: string;
             };
             drivers: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IMapType<import("mobx-state-tree").ITypeUnion<import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> | undefined, import("mobx-state-tree").ModelSnapshotType<Record<string, any>>, (Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> & import("mobx-state-tree/dist/internal").NonEmptyObject) | undefined>>, [undefined]>;
-        }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>; /**
-         * #getter
-         */
+        }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
         highResolutionScaling: {
             type: string;
             defaultValue: number;
@@ -87,7 +96,9 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
                     defaultValue: boolean;
                 };
                 subCategories: {
-                    type: string;
+                    type: string; /**
+                     * #getter
+                     */
                     defaultValue: boolean;
                 };
             }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;

package/dist/JBrowseModel/index.js

@@ -6,6 +6,17 @@ const configuration_1 = require("@jbrowse/core/configuration");
 const mobx_1 = require("mobx");
 // locals
 const JBrowseConfig_1 = require("../JBrowseConfig");
+/**
+ * #stateModel AppCoreJBrowseModel
+ * note that JBrowseRootConfig is a config model, but config models are MST
+ * trees themselves, which is why this stateModel is allowed to extend it
+ *
+ * the AppCoreJBrowseModel is generally on a property named rootModel.jbrowse
+ *
+ * extends
+ * - [JBrowseRootConfig](/docs/config/jbrowserootconfig)
+
+ */
 function JBrowseModelF({ pluginManager, assemblyConfigSchema, }) {
     return (0, JBrowseConfig_1.JBrowseConfigF)({ pluginManager, assemblyConfigSchema })
         .views(self => ({

package/dist/RootMenu/index.d.ts

@@ -3,6 +3,9 @@ export interface Menu {
     label: string;
     menuItems: MenuItem[];
 }
+/**
+ * #stateModel RootAppMenuMixin
+ */
 export declare function RootAppMenuMixin(): import("mobx-state-tree").IModelType<{}, {
     /**
      * #action
@@ -11,57 +14,76 @@ export declare function RootAppMenuMixin(): import("mobx-state-tree").IModelType
     /**
      * #action
      * Add a top-level menu
+     *
      * @param menuName - Name of the menu to insert.
+     *
      * @returns The new length of the top-level menus array
      */
     appendMenu(menuName: string): number;
     /**
      * #action
      * Insert a top-level menu
+     *
      * @param menuName - Name of the menu to insert.
+     *
      * @param position - Position to insert menu. If negative, counts from th
      * end, e.g. `insertMenu('My Menu', -1)` will insert the menu as the
      * second-to-last one.
+     *
      * @returns The new length of the top-level menus array
      */
     insertMenu(menuName: string, position: number): number;
     /**
      * #action
      * Add a menu item to a top-level menu
+     *
      * @param menuName - Name of the top-level menu to append to.
+     *
      * @param menuItem - Menu item to append.
+     *
      * @returns The new length of the menu
      */
     appendToMenu(menuName: string, menuItem: MenuItem): number;
     /**
      * #action
      * Insert a menu item into a top-level menu
+     *
      * @param menuName - Name of the top-level menu to insert into
+     *
      * @param menuItem - Menu item to insert
+     *
      * @param position - Position to insert menu item. If negative, counts
      * from the end, e.g. `insertMenu('My Menu', -1)` will insert the menu as
      * the second-to-last one.
+     *
      * @returns The new length of the menu
      */
     insertInMenu(menuName: string, menuItem: MenuItem, position: number): number;
     /**
      * #action
      * Add a menu item to a sub-menu
+     *
      * @param menuPath - Path to the sub-menu to add to, starting with the
      * top-level menu (e.g. `['File', 'Insert']`).
+     *
      * @param menuItem - Menu item to append.
+     *
      * @returns The new length of the sub-menu
      */
     appendToSubMenu(menuPath: string[], menuItem: MenuItem): number;
     /**
      * #action
      * Insert a menu item into a sub-menu
+     *
      * @param menuPath - Path to the sub-menu to add to, starting with the
      * top-level menu (e.g. `['File', 'Insert']`).
+     *
      * @param menuItem - Menu item to insert.
+     *
      * @param position - Position to insert menu item. If negative, counts
      * from the end, e.g. `insertMenu('My Menu', -1)` will insert the menu as
      * the second-to-last one.
+     *
      * @returns The new length of the sub-menu
      */
     insertInSubMenu(menuPath: string[], menuItem: MenuItem, position: number): number;

package/dist/RootMenu/index.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RootAppMenuMixin = void 0;
 const mobx_state_tree_1 = require("mobx-state-tree");
+/**
+ * #stateModel RootAppMenuMixin
+ */
 function RootAppMenuMixin() {
     return mobx_state_tree_1.types.model({}).actions(s => {
         const self = s;
@@ -15,7 +18,9 @@ function RootAppMenuMixin() {
             /**
              * #action
              * Add a top-level menu
+             *
              * @param menuName - Name of the menu to insert.
+             *
              * @returns The new length of the top-level menus array
              */
             appendMenu(menuName) {
@@ -24,10 +29,13 @@ function RootAppMenuMixin() {
             /**
              * #action
              * Insert a top-level menu
+             *
              * @param menuName - Name of the menu to insert.
+             *
              * @param position - Position to insert menu. If negative, counts from th
              * end, e.g. `insertMenu('My Menu', -1)` will insert the menu as the
              * second-to-last one.
+             *
              * @returns The new length of the top-level menus array
              */
             insertMenu(menuName, position) {
@@ -40,8 +48,11 @@ function RootAppMenuMixin() {
             /**
              * #action
              * Add a menu item to a top-level menu
+             *
              * @param menuName - Name of the top-level menu to append to.
+             *
              * @param menuItem - Menu item to append.
+             *
              * @returns The new length of the menu
              */
             appendToMenu(menuName, menuItem) {
@@ -55,11 +66,15 @@ function RootAppMenuMixin() {
             /**
              * #action
              * Insert a menu item into a top-level menu
+             *
              * @param menuName - Name of the top-level menu to insert into
+             *
              * @param menuItem - Menu item to insert
+             *
              * @param position - Position to insert menu item. If negative, counts
              * from the end, e.g. `insertMenu('My Menu', -1)` will insert the menu as
              * the second-to-last one.
+             *
              * @returns The new length of the menu
              */
             insertInMenu(menuName, menuItem, position) {
@@ -75,9 +90,12 @@ function RootAppMenuMixin() {
             /**
              * #action
              * Add a menu item to a sub-menu
+             *
              * @param menuPath - Path to the sub-menu to add to, starting with the
              * top-level menu (e.g. `['File', 'Insert']`).
+             *
              * @param menuItem - Menu item to append.
+             *
              * @returns The new length of the sub-menu
              */
             appendToSubMenu(menuPath, menuItem) {
@@ -105,12 +123,16 @@ function RootAppMenuMixin() {
             /**
              * #action
              * Insert a menu item into a sub-menu
+             *
              * @param menuPath - Path to the sub-menu to add to, starting with the
              * top-level menu (e.g. `['File', 'Insert']`).
+             *
              * @param menuItem - Menu item to insert.
+             *
              * @param position - Position to insert menu item. If negative, counts
              * from the end, e.g. `insertMenu('My Menu', -1)` will insert the menu as
              * the second-to-last one.
+             *
              * @returns The new length of the sub-menu
              */
             insertInSubMenu(menuPath, menuItem, position) {

package/dist/ui/App/ViewMenu.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { SvgIconProps, IconButtonProps as IconButtonPropsType } from '@mui/material';
 import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
-declare const ViewMenu: ({ model, IconProps, }: {
+declare const ViewMenu: ({ model, IconButtonProps, IconProps, }: {
     model: IBaseViewModel;
     IconButtonProps?: IconButtonPropsType | undefined;
     IconProps: SvgIconProps;
-}) => React.JSX.Element | null;
+}) => React.JSX.Element;
 export default ViewMenu;

package/dist/ui/App/ViewMenu.js

@@ -4,16 +4,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const util_1 = require("@jbrowse/core/util");
-const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
+const hooks_1 = require("material-ui-popup-state/hooks");
+const CascadingMenu_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenu"));
 // icons
 const Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
 const ArrowDownward_1 = __importDefault(require("@mui/icons-material/ArrowDownward"));
 const ArrowUpward_1 = __importDefault(require("@mui/icons-material/ArrowUpward"));
-const ViewMenu = (0, mobx_react_1.observer)(function ({ model, IconProps, }) {
+const ViewMenu = (0, mobx_react_1.observer)(function ({ model, IconButtonProps, IconProps, }) {
     const { menuItems } = model;
     const session = (0, util_1.getSession)(model);
+    const popupState = (0, hooks_1.usePopupState)({
+        popupId: 'viewMenu',
+        variant: 'popover',
+    });
     const items = [
         ...(session.views.length > 1
             ? [
@@ -32,7 +38,15 @@ const ViewMenu = (0, mobx_react_1.observer)(function ({ model, IconProps, }) {
         // <=1.3.3 didn't use a function, so check as value also
         ...((typeof menuItems === 'function' ? menuItems() : menuItems) || []),
     ];
-    return items.length ? (react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: items, "data-testid": "view_menu_icon" },
-        react_1.default.createElement(Menu_1.default, { ...IconProps, fontSize: "small" }))) : null;
+    // note: This does not use CascadingMenuButton on purpose, because there was a confusing bug related to it!
+    // see https://github.com/GMOD/jbrowse-components/issues/4115
+    //
+    // Make sure to test the Breakpoint split view menu checkboxes if you intend to change this
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.IconButton, { ...IconButtonProps, ...(0, hooks_1.bindTrigger)(popupState), "data-testid": "view_menu_icon" },
+            react_1.default.createElement(Menu_1.default, { ...IconProps, fontSize: "small" })),
+        react_1.default.createElement(CascadingMenu_1.default, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_event, callback) => {
+                callback();
+            }, menuItems: items, popupState: popupState })));
 });
 exports.default = ViewMenu;

package/esm/AppFocus/index.d.ts

@@ -9,5 +9,8 @@ export declare function AppFocusMixin(): import("mobx-state-tree").IModelType<{
      */
     focusedViewId: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
 }, {
+    /**
+     * #action
+     */
     setFocusedViewId(viewId: string): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/esm/AppFocus/index.js

@@ -13,6 +13,9 @@ export function AppFocusMixin() {
         focusedViewId: types.maybe(types.string),
     })
         .actions(self => ({
+        /**
+         * #action
+         */
         setFocusedViewId(viewId) {
             self.focusedViewId = viewId;
         },

package/esm/JBrowseConfig/index.d.ts

@@ -4,7 +4,22 @@ import PluginManager from '@jbrowse/core/PluginManager';
 /**
  * #config JBrowseRootConfig
  * #category root
- * configuration in a config.json/file.jbrowse
+ *
+ * this is a config model representing a config.json (for jbrowse-web) or
+ * somefile.jbrowse (for jbrowse-desktop, where configs have the .jbrowse
+ * extension)
+ *
+ * includes
+ * - [FormatDetails](../formatdetails) for global (instead of per-track)
+ *   feature detail formatters
+ * - [FormatAbout](../formatabout) for global (instead of per-track) about
+ *   track formatters
+ * - [HierarchicalConfigSchema](../hierarchicalconfigschema) for track selector
+ *   configs
+ *
+ * also includes any pluginManager.pluginConfigurationSchemas(), so plugins
+ * that have a configurationSchema field on their class are mixed into this
+ * object
  */
 export declare function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }: {
     pluginManager: PluginManager;
@@ -90,9 +105,7 @@ export declare function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }:
             defaultCollapsed: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
                 categoryNames: {
                     type: string;
-                    defaultValue: never[]; /**
-                     * #slot configuration.highResolutionScaling
-                     */
+                    defaultValue: never[];
                 };
                 topLevelCategories: {
                     type: string;
@@ -161,10 +174,13 @@ export declare function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }:
     internetAccounts: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
     /**
      * #slot
+     * configuration for aggregate text search adapters (created by e.g.
+     * jbrowse text-index, but can be a pluggable TextSearchAdapter type)
      */
     aggregateTextSearchAdapters: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
     /**
      * #slot
+     * configuration for connections
      */
     connections: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
     /**

package/esm/JBrowseConfig/index.js

@@ -5,7 +5,22 @@ import { types } from 'mobx-state-tree';
 /**
  * #config JBrowseRootConfig
  * #category root
- * configuration in a config.json/file.jbrowse
+ *
+ * this is a config model representing a config.json (for jbrowse-web) or
+ * somefile.jbrowse (for jbrowse-desktop, where configs have the .jbrowse
+ * extension)
+ *
+ * includes
+ * - [FormatDetails](../formatdetails) for global (instead of per-track)
+ *   feature detail formatters
+ * - [FormatAbout](../formatabout) for global (instead of per-track) about
+ *   track formatters
+ * - [HierarchicalConfigSchema](../hierarchicalconfigschema) for track selector
+ *   configs
+ *
+ * also includes any pluginManager.pluginConfigurationSchemas(), so plugins
+ * that have a configurationSchema field on their class are mixed into this
+ * object
  */
 export function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }) {
     return types.model('JBrowseConfig', {
@@ -93,10 +108,13 @@ export function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }) {
         internetAccounts: types.array(pluginManager.pluggableConfigSchemaType('internet account')),
         /**
          * #slot
+         * configuration for aggregate text search adapters (created by e.g.
+         * jbrowse text-index, but can be a pluggable TextSearchAdapter type)
          */
         aggregateTextSearchAdapters: types.array(pluginManager.pluggableConfigSchemaType('text search adapter')),
         /**
          * #slot
+         * configuration for connections
          */
         connections: types.array(pluginManager.pluggableConfigSchemaType('connection')),
         /**

package/esm/JBrowseModel/index.d.ts

@@ -3,6 +3,17 @@ import { BaseAssemblyConfigSchema } from '@jbrowse/core/assemblyManager';
 import RpcManager from '@jbrowse/core/rpc/RpcManager';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import { PluginDefinition } from '@jbrowse/core/PluginLoader';
+/**
+ * #stateModel AppCoreJBrowseModel
+ * note that JBrowseRootConfig is a config model, but config models are MST
+ * trees themselves, which is why this stateModel is allowed to extend it
+ *
+ * the AppCoreJBrowseModel is generally on a property named rootModel.jbrowse
+ *
+ * extends
+ * - [JBrowseRootConfig](/docs/config/jbrowserootconfig)
+
+ */
 export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }: {
     pluginManager: PluginManager;
     assemblyConfigSchema: BaseAssemblyConfigSchema;
@@ -15,9 +26,7 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
                 defaultValue: string;
             };
             drivers: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IMapType<import("mobx-state-tree").ITypeUnion<import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> | undefined, import("mobx-state-tree").ModelSnapshotType<Record<string, any>>, (Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> & import("mobx-state-tree/dist/internal").NonEmptyObject) | undefined>>, [undefined]>;
-        }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>; /**
-         * #getter
-         */
+        }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
         highResolutionScaling: {
             type: string;
             defaultValue: number;
@@ -87,7 +96,9 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
                     defaultValue: boolean;
                 };
                 subCategories: {
-                    type: string;
+                    type: string; /**
+                     * #getter
+                     */
                     defaultValue: boolean;
                 };
             }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;

package/esm/JBrowseModel/index.js

@@ -3,6 +3,17 @@ import { readConfObject, } from '@jbrowse/core/configuration';
 import { toJS } from 'mobx';
 // locals
 import { JBrowseConfigF } from '../JBrowseConfig';
+/**
+ * #stateModel AppCoreJBrowseModel
+ * note that JBrowseRootConfig is a config model, but config models are MST
+ * trees themselves, which is why this stateModel is allowed to extend it
+ *
+ * the AppCoreJBrowseModel is generally on a property named rootModel.jbrowse
+ *
+ * extends
+ * - [JBrowseRootConfig](/docs/config/jbrowserootconfig)
+
+ */
 export function JBrowseModelF({ pluginManager, assemblyConfigSchema, }) {
     return JBrowseConfigF({ pluginManager, assemblyConfigSchema })
         .views(self => ({

package/esm/RootMenu/index.d.ts

@@ -3,6 +3,9 @@ export interface Menu {
     label: string;
     menuItems: MenuItem[];
 }
+/**
+ * #stateModel RootAppMenuMixin
+ */
 export declare function RootAppMenuMixin(): import("mobx-state-tree").IModelType<{}, {
     /**
      * #action
@@ -11,57 +14,76 @@ export declare function RootAppMenuMixin(): import("mobx-state-tree").IModelType
     /**
      * #action
      * Add a top-level menu
+     *
      * @param menuName - Name of the menu to insert.
+     *
      * @returns The new length of the top-level menus array
      */
     appendMenu(menuName: string): number;
     /**
      * #action
      * Insert a top-level menu
+     *
      * @param menuName - Name of the menu to insert.
+     *
      * @param position - Position to insert menu. If negative, counts from th
      * end, e.g. `insertMenu('My Menu', -1)` will insert the menu as the
      * second-to-last one.
+     *
      * @returns The new length of the top-level menus array
      */
     insertMenu(menuName: string, position: number): number;
     /**
      * #action
      * Add a menu item to a top-level menu
+     *
      * @param menuName - Name of the top-level menu to append to.
+     *
      * @param menuItem - Menu item to append.
+     *
      * @returns The new length of the menu
      */
     appendToMenu(menuName: string, menuItem: MenuItem): number;
     /**
      * #action
      * Insert a menu item into a top-level menu
+     *
      * @param menuName - Name of the top-level menu to insert into
+     *
      * @param menuItem - Menu item to insert
+     *
      * @param position - Position to insert menu item. If negative, counts
      * from the end, e.g. `insertMenu('My Menu', -1)` will insert the menu as
      * the second-to-last one.
+     *
      * @returns The new length of the menu
      */
     insertInMenu(menuName: string, menuItem: MenuItem, position: number): number;
     /**
      * #action
      * Add a menu item to a sub-menu
+     *
      * @param menuPath - Path to the sub-menu to add to, starting with the
      * top-level menu (e.g. `['File', 'Insert']`).
+     *
      * @param menuItem - Menu item to append.
+     *
      * @returns The new length of the sub-menu
      */
     appendToSubMenu(menuPath: string[], menuItem: MenuItem): number;
     /**
      * #action
      * Insert a menu item into a sub-menu
+     *
      * @param menuPath - Path to the sub-menu to add to, starting with the
      * top-level menu (e.g. `['File', 'Insert']`).
+     *
      * @param menuItem - Menu item to insert.
+     *
      * @param position - Position to insert menu item. If negative, counts
      * from the end, e.g. `insertMenu('My Menu', -1)` will insert the menu as
      * the second-to-last one.
+     *
      * @returns The new length of the sub-menu
      */
     insertInSubMenu(menuPath: string[], menuItem: MenuItem, position: number): number;

package/esm/RootMenu/index.js

@@ -1,4 +1,7 @@
 import { types } from 'mobx-state-tree';
+/**
+ * #stateModel RootAppMenuMixin
+ */
 export function RootAppMenuMixin() {
     return types.model({}).actions(s => {
         const self = s;
@@ -12,7 +15,9 @@ export function RootAppMenuMixin() {
             /**
              * #action
              * Add a top-level menu
+             *
              * @param menuName - Name of the menu to insert.
+             *
              * @returns The new length of the top-level menus array
              */
             appendMenu(menuName) {
@@ -21,10 +26,13 @@ export function RootAppMenuMixin() {
             /**
              * #action
              * Insert a top-level menu
+             *
              * @param menuName - Name of the menu to insert.
+             *
              * @param position - Position to insert menu. If negative, counts from th
              * end, e.g. `insertMenu('My Menu', -1)` will insert the menu as the
              * second-to-last one.
+             *
              * @returns The new length of the top-level menus array
              */
             insertMenu(menuName, position) {
@@ -37,8 +45,11 @@ export function RootAppMenuMixin() {
             /**
              * #action
              * Add a menu item to a top-level menu
+             *
              * @param menuName - Name of the top-level menu to append to.
+             *
              * @param menuItem - Menu item to append.
+             *
              * @returns The new length of the menu
              */
             appendToMenu(menuName, menuItem) {
@@ -52,11 +63,15 @@ export function RootAppMenuMixin() {
             /**
              * #action
              * Insert a menu item into a top-level menu
+             *
              * @param menuName - Name of the top-level menu to insert into
+             *
              * @param menuItem - Menu item to insert
+             *
              * @param position - Position to insert menu item. If negative, counts
              * from the end, e.g. `insertMenu('My Menu', -1)` will insert the menu as
              * the second-to-last one.
+             *
              * @returns The new length of the menu
              */
             insertInMenu(menuName, menuItem, position) {
@@ -72,9 +87,12 @@ export function RootAppMenuMixin() {
             /**
              * #action
              * Add a menu item to a sub-menu
+             *
              * @param menuPath - Path to the sub-menu to add to, starting with the
              * top-level menu (e.g. `['File', 'Insert']`).
+             *
              * @param menuItem - Menu item to append.
+             *
              * @returns The new length of the sub-menu
              */
             appendToSubMenu(menuPath, menuItem) {
@@ -102,12 +120,16 @@ export function RootAppMenuMixin() {
             /**
              * #action
              * Insert a menu item into a sub-menu
+             *
              * @param menuPath - Path to the sub-menu to add to, starting with the
              * top-level menu (e.g. `['File', 'Insert']`).
+             *
              * @param menuItem - Menu item to insert.
+             *
              * @param position - Position to insert menu item. If negative, counts
              * from the end, e.g. `insertMenu('My Menu', -1)` will insert the menu as
              * the second-to-last one.
+             *
              * @returns The new length of the sub-menu
              */
             insertInSubMenu(menuPath, menuItem, position) {

package/esm/ui/App/ViewMenu.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { SvgIconProps, IconButtonProps as IconButtonPropsType } from '@mui/material';
 import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
-declare const ViewMenu: ({ model, IconProps, }: {
+declare const ViewMenu: ({ model, IconButtonProps, IconProps, }: {
     model: IBaseViewModel;
     IconButtonProps?: IconButtonPropsType | undefined;
     IconProps: SvgIconProps;
-}) => React.JSX.Element | null;
+}) => React.JSX.Element;
 export default ViewMenu;

package/esm/ui/App/ViewMenu.js

@@ -1,14 +1,20 @@
 import React from 'react';
+import { IconButton, } from '@mui/material';
 import { observer } from 'mobx-react';
 import { getSession } from '@jbrowse/core/util';
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import { bindTrigger, bindPopover, usePopupState, } from 'material-ui-popup-state/hooks';
+import CascadingMenu from '@jbrowse/core/ui/CascadingMenu';
 // icons
 import MenuIcon from '@mui/icons-material/Menu';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
-const ViewMenu = observer(function ({ model, IconProps, }) {
+const ViewMenu = observer(function ({ model, IconButtonProps, IconProps, }) {
     const { menuItems } = model;
     const session = getSession(model);
+    const popupState = usePopupState({
+        popupId: 'viewMenu',
+        variant: 'popover',
+    });
     const items = [
         ...(session.views.length > 1
             ? [
@@ -27,7 +33,15 @@ const ViewMenu = observer(function ({ model, IconProps, }) {
         // <=1.3.3 didn't use a function, so check as value also
         ...((typeof menuItems === 'function' ? menuItems() : menuItems) || []),
     ];
-    return items.length ? (React.createElement(CascadingMenuButton, { menuItems: items, "data-testid": "view_menu_icon" },
-        React.createElement(MenuIcon, { ...IconProps, fontSize: "small" }))) : null;
+    // note: This does not use CascadingMenuButton on purpose, because there was a confusing bug related to it!
+    // see https://github.com/GMOD/jbrowse-components/issues/4115
+    //
+    // Make sure to test the Breakpoint split view menu checkboxes if you intend to change this
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IconButton, { ...IconButtonProps, ...bindTrigger(popupState), "data-testid": "view_menu_icon" },
+            React.createElement(MenuIcon, { ...IconProps, fontSize: "small" })),
+        React.createElement(CascadingMenu, { ...bindPopover(popupState), onMenuItemClick: (_event, callback) => {
+                callback();
+            }, menuItems: items, popupState: popupState })));
 });
 export default ViewMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/app-core",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "JBrowse 2 code shared between the 'full featured' apps e.g. jbrowse-web and jbrowse-desktop",
   "keywords": [
     "jbrowse",
@@ -42,10 +42,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@jbrowse/product-core": "^2.9.0",
+    "@jbrowse/product-core": "^2.10.0",
     "@mui/icons-material": "^5.0.0",
     "@mui/material": "^5.10.17",
-    "clsx": "^2.0.0",
     "copy-to-clipboard": "^3.3.1",
     "react-error-boundary": "^4.0.3"
   },
@@ -61,5 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a50b6f67cf8c8f3c65a7b8cd858de2fcca1f2909"
+  "gitHead": "223d8bfb68fd1bacaf22852639ad5920f1b7f43b"
 }