@jbrowse/app-core 2.6.1 → 2.6.3

package/esm/JBrowseConfig/index.js

@@ -1,5 +1,6 @@
 import { ConfigurationSchema, } from '@jbrowse/core/configuration';
 import RpcManager from '@jbrowse/core/rpc/RpcManager';
+import { FormatAboutConfigSchemaFactory, FormatDetailsConfigSchemaFactory, HierarchicalConfigSchemaFactory, } from '@jbrowse/product-core';
 import { types } from 'mobx-state-tree';
 /**
  * #config JBrowseRootConfig
@@ -20,52 +21,8 @@ export function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }) {
                 type: 'number',
                 defaultValue: 2,
             },
-            formatDetails: ConfigurationSchema('FormatDetails', {
-                /**
-                 * #slot configuration.formatDetails.feature
-                 */
-                feature: {
-                    type: 'frozen',
-                    description: 'adds extra fields to the feature details',
-                    defaultValue: {},
-                    contextVariable: ['feature'],
-                },
-                /**
-                 * #slot configuration.formatDetails.subfeatures
-                 */
-                subfeatures: {
-                    type: 'frozen',
-                    description: 'adds extra fields to the subfeatures of a feature',
-                    defaultValue: {},
-                    contextVariable: ['feature'],
-                },
-                /**
-                 * #slot configuration.formatDetails.depth
-                 */
-                depth: {
-                    type: 'number',
-                    defaultValue: 2,
-                    description: 'depth to iterate on subfeatures',
-                },
-            }),
-            formatAbout: ConfigurationSchema('FormatAbout', {
-                /**
-                 * #slot configuration.formatAbout.config
-                 */
-                config: {
-                    type: 'frozen',
-                    description: 'formats configuration object in about dialog',
-                    defaultValue: {},
-                    contextVariable: ['config'],
-                },
-                /**
-                 * #slot configuration.formatAbout.hideUris
-                 */
-                hideUris: {
-                    type: 'boolean',
-                    defaultValue: false,
-                },
-            }),
+            formatDetails: FormatDetailsConfigSchemaFactory(),
+            formatAbout: FormatAboutConfigSchemaFactory(),
             /*
              * #slot configuration.shareURL
              */
@@ -80,6 +37,7 @@ export function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }) {
                 type: 'boolean',
                 defaultValue: false,
             },
+            hierarchical: HierarchicalConfigSchemaFactory(),
             /**
              * #slot configuration.theme
              */
@@ -90,7 +48,10 @@ export function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }) {
             /**
              * #slot configuration.extraThemes
              */
-            extraThemes: { type: 'frozen', defaultValue: {} },
+            extraThemes: {
+                type: 'frozen',
+                defaultValue: {},
+            },
             /**
              * #slot configuration.logoPath
              */

package/esm/JBrowseModel/index.d.ts

@@ -29,12 +29,16 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
             };
             subfeatures: {
                 type: string;
-                description: string;
+                description: string; /**
+                 * #getter
+                 */
                 defaultValue: {};
                 contextVariable: string[];
             };
             depth: {
-                type: string;
+                type: string; /**
+                 * #getter
+                 */
                 defaultValue: number;
                 description: string;
             };
@@ -59,21 +63,46 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
             type: string;
             defaultValue: boolean;
         };
+        hierarchical: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+            sort: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+                trackNames: {
+                    type: string;
+                    defaultValue: boolean;
+                };
+                categories: {
+                    type: string;
+                    defaultValue: boolean;
+                };
+            }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+            defaultCollapsed: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+                categoryNames: {
+                    type: string;
+                    defaultValue: never[];
+                };
+                topLevelCategories: {
+                    type: string;
+                    defaultValue: boolean; /**
+                     * #action
+                     */
+                };
+                subCategories: {
+                    type: string;
+                    defaultValue: boolean;
+                };
+            }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+        }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
         theme: {
             type: string;
-            defaultValue: {}; /**
-             * #action
-             */
+            defaultValue: {};
         };
         extraThemes: {
-            type: string;
+            type: string; /**
+             * #action
+             */
             defaultValue: {};
         };
         logoPath: {
             type: string;
-            /**
-             * #action
-             */
             defaultValue: {
                 uri: string;
                 locationType: string;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SessionWithDrawerWidgets } from '@jbrowse/core/util/types';
+declare const _default: ({ session, setToolbarHeight, }: {
+    session: SessionWithDrawerWidgets;
+    setToolbarHeight: (arg: number) => void;
+}) => React.JSX.Element;
+export default _default;

package/esm/ui/App/DrawerHeader.js

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import { AppBar, FormControl, IconButton, Menu, MenuItem, Select, Toolbar, Tooltip, Typography, } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+import { getEnv } from '@jbrowse/core/util';
+// icons
+import DeleteIcon from '@mui/icons-material/Delete';
+import CloseIcon from '@mui/icons-material/Close';
+import MinimizeIcon from '@mui/icons-material/Minimize';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+const useStyles = makeStyles()(theme => ({
+    formControl: {
+        margin: 0,
+    },
+    spacer: {
+        flexGrow: 1,
+    },
+    drawerSelect: {
+        margin: 0,
+        color: theme.palette.secondary.contrastText,
+    },
+    dropDownIcon: {
+        color: theme.palette.secondary.contrastText,
+    },
+    header: {
+        background: theme.palette.secondary.main,
+    },
+}));
+export default observer(function ({ session, setToolbarHeight, }) {
+    const { classes } = useStyles();
+    return (React.createElement(AppBar, { position: "sticky", className: classes.header, ref: ref => setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0) },
+        React.createElement(Toolbar, { disableGutters: true },
+            React.createElement(DrawerWidgetSelector, { session: session }),
+            React.createElement("div", { className: classes.spacer }),
+            React.createElement(DrawerControls, { session: session }))));
+});
+const DrawerWidgetSelector = observer(function ({ session, }) {
+    const { visibleWidget, activeWidgets } = session;
+    const { classes } = useStyles();
+    const { pluginManager } = getEnv(session);
+    return (React.createElement(FormControl, { className: classes.formControl },
+        React.createElement(Select, { value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id, "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
+                const widget = session.activeWidgets.get(widgetId);
+                if (!widget) {
+                    return (React.createElement(Typography, { variant: "h6", color: "inherit" }, "Unknown widget"));
+                }
+                const widgetType = pluginManager.getWidgetType(widget.type);
+                const { HeadingComponent, heading } = widgetType;
+                return HeadingComponent ? (React.createElement(HeadingComponent, { model: widget })) : (React.createElement(Typography, { variant: "h6", color: "inherit" }, heading));
+            }, onChange: e => {
+                const w = session.activeWidgets.get(e.target.value);
+                if (w) {
+                    session.showWidget(w);
+                }
+                else {
+                    session.notify(`Widget not found ${e.target.value}`, 'warning');
+                }
+            } }, [...activeWidgets.values()].map(widget => {
+            const widgetType = pluginManager.getWidgetType(widget.type);
+            const { HeadingComponent, heading } = widgetType;
+            return (React.createElement(MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, key: widget.id, value: widget.id },
+                HeadingComponent ? (React.createElement(HeadingComponent, { model: widget })) : (React.createElement(Typography, { variant: "h6", color: "inherit" }, heading)),
+                React.createElement(IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: () => session.hideWidget(widget) },
+                    React.createElement(DeleteIcon, null))));
+        }))));
+});
+const DrawerControls = observer(function ({ session, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const { drawerPosition, visibleWidget } = session;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IconButton, { color: "inherit", onClick: event => setAnchorEl(event.currentTarget) },
+            React.createElement(MoreVertIcon, null)),
+        React.createElement(Tooltip, { title: "Minimize drawer" },
+            React.createElement(IconButton, { "data-testid": "drawer-minimize", color: "inherit", onClick: () => {
+                    session.notify(`Drawer minimized, click button on ${drawerPosition} side of screen to re-open`, 'info');
+                    session.minimizeWidgetDrawer();
+                } },
+                React.createElement(MinimizeIcon, null))),
+        React.createElement(Tooltip, { title: "Close drawer" },
+            React.createElement(IconButton, { color: "inherit", onClick: () => session.hideWidget(visibleWidget) },
+                React.createElement(CloseIcon, null))),
+        React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null) }, ['left', 'right'].map(option => (React.createElement(MenuItem, { key: option, selected: drawerPosition === 'option', onClick: () => {
+                session.setDrawerPosition(option);
+                setAnchorEl(null);
+            } }, option))))));
+});

package/esm/ui/App/DrawerWidget.js

@@ -1,86 +1,12 @@
 import React, { Suspense, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { AppBar, FormControl, IconButton, Menu, MenuItem, Select, Toolbar, Tooltip, Typography, } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 import { getEnv } from '@jbrowse/core/util';
 import LoadingEllipses from '@jbrowse/core/ui/LoadingEllipses';
 import ErrorMessage from '@jbrowse/core/ui/ErrorMessage';
-// icons
-import DeleteIcon from '@mui/icons-material/Delete';
-import CloseIcon from '@mui/icons-material/Close';
-import MinimizeIcon from '@mui/icons-material/Minimize';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
 // locals
 import Drawer from './Drawer';
-const useStyles = makeStyles()(theme => ({
-    formControl: {
-        margin: 0,
-    },
-    spacer: {
-        flexGrow: 1,
-    },
-    drawerSelect: {
-        margin: 0,
-        color: theme.palette.secondary.contrastText,
-    },
-    dropDownIcon: {
-        color: theme.palette.secondary.contrastText,
-    },
-    header: {
-        background: theme.palette.secondary.main,
-    },
-}));
-const DrawerHeader = observer(function ({ session, setToolbarHeight, }) {
-    const { pluginManager } = getEnv(session);
-    const { visibleWidget, activeWidgets, drawerPosition } = session;
-    const { classes } = useStyles();
-    const [anchorEl, setAnchorEl] = useState(null);
-    return (React.createElement(AppBar, { position: "sticky", className: classes.header, ref: ref => setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0) },
-        React.createElement(Toolbar, { disableGutters: true },
-            React.createElement(FormControl, { className: classes.formControl },
-                React.createElement(Select, { value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id, "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
-                        const widget = session.activeWidgets.get(widgetId);
-                        if (!widget) {
-                            return (React.createElement(Typography, { variant: "h6", color: "inherit" }, "Unknown widget"));
-                        }
-                        const widgetType = pluginManager.getWidgetType(widget.type);
-                        const { HeadingComponent, heading } = widgetType;
-                        return HeadingComponent ? (React.createElement(HeadingComponent, { model: widget })) : (React.createElement(Typography, { variant: "h6", color: "inherit" }, heading));
-                    }, onChange: e => {
-                        const w = session.activeWidgets.get(e.target.value);
-                        if (w) {
-                            session.showWidget(w);
-                        }
-                        else {
-                            session.notify(`Widget not found ${e.target.value}`, 'warning');
-                        }
-                    } }, [...activeWidgets.values()].map(widget => {
-                    const widgetType = pluginManager.getWidgetType(widget.type);
-                    const { HeadingComponent, heading } = widgetType;
-                    return (React.createElement(MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, key: widget.id, value: widget.id },
-                        HeadingComponent ? (React.createElement(HeadingComponent, { model: widget })) : (React.createElement(Typography, { variant: "h6", color: "inherit" }, heading)),
-                        React.createElement(IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: () => session.hideWidget(widget) },
-                            React.createElement(DeleteIcon, null))));
-                }))),
-            React.createElement("div", { className: classes.spacer }),
-            React.createElement("div", null,
-                React.createElement(IconButton, { "data-testid": "drawer-close", color: "inherit", onClick: event => setAnchorEl(event.currentTarget) },
-                    React.createElement(MoreVertIcon, null)),
-                React.createElement(Tooltip, { title: "Minimize drawer" },
-                    React.createElement(IconButton, { "data-testid": "drawer-minimize", color: "inherit", onClick: () => {
-                            session.notify(`Drawer minimized, click button on ${drawerPosition} side of screen to re-open`, 'info');
-                            session.minimizeWidgetDrawer();
-                        } },
-                        React.createElement(MinimizeIcon, null))),
-                React.createElement(Tooltip, { title: "Close drawer" },
-                    React.createElement(IconButton, { "data-testid": "drawer-close", color: "inherit", onClick: () => session.hideWidget(visibleWidget) },
-                        React.createElement(CloseIcon, null))))),
-        React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null) }, ['left', 'right'].map(option => (React.createElement(MenuItem, { key: option, selected: drawerPosition === 'option', onClick: () => {
-                session.setDrawerPosition(option);
-                setAnchorEl(null);
-            } }, option))))));
-});
+import DrawerHeader from './DrawerHeader';
 const DrawerWidget = observer(function ({ session, }) {
     const { visibleWidget } = session;
     const { pluginManager } = getEnv(session);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/app-core",
-  "version": "2.6.1",
+  "version": "2.6.3",
   "description": "JBrowse 2 code shared between the 'full featured' apps e.g. jbrowse-web and jbrowse-desktop",
   "keywords": [
     "jbrowse",
@@ -26,13 +26,12 @@
   "module": "esm/index.js",
   "files": [
     "dist",
-    "esm",
-    "src"
+    "esm"
   ],
   "scripts": {
     "build:esm": "tsc --build tsconfig.build.esm.json",
-    "build:es5": "tsc --build tsconfig.build.es5.json",
-    "build": "npm run build:esm && npm run build:es5",
+    "build:commonjs": "tsc --build tsconfig.build.commonjs.json",
+    "build": "npm run build:esm && npm run build:commonjs",
     "test": "cd ../..; jest packages/app-core",
     "clean": "rimraf dist esm *.tsbuildinfo",
     "prebuild": "yarn clean",
@@ -43,7 +42,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@jbrowse/product-core": "^2.6.1",
+    "@jbrowse/product-core": "^2.6.3",
     "@mui/icons-material": "^5.0.0",
     "@mui/material": "^5.10.17",
     "copy-to-clipboard": "^3.3.1",
@@ -62,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1cbe7ba097fb2d2763c776e5e429e4670cdd583c"
+  "gitHead": "ed402c87efb0904858d602c363bd1757d5742129"
 }

package/src/Assemblies/SessionAssembliesMixin.ts

@@ -1,50 +0,0 @@
-import { types } from 'mobx-state-tree'
-
-import PluginManager from '@jbrowse/core/PluginManager'
-import { AnyConfiguration } from '@jbrowse/core/configuration'
-import { BaseSession } from '@jbrowse/product-core'
-import { BaseAssemblyConfigSchema } from '@jbrowse/core/assemblyManager'
-
-/**
- * #stateModel SessionAssembliesMixin
- * #category root
- */
-export function SessionAssembliesMixin(
-  pluginManager: PluginManager,
-  assemblyConfigSchemasType: BaseAssemblyConfigSchema,
-) {
-  return types
-    .model({
-      /**
-       * #property
-       */
-      sessionAssemblies: types.array(assemblyConfigSchemasType),
-    })
-    .actions(s => {
-      const self = s as typeof s & BaseSession
-      return {
-        /**
-         * #action
-         */
-        addSessionAssembly(conf: AnyConfiguration) {
-          const asm = self.sessionAssemblies.find(f => f.name === conf.name)
-          if (asm) {
-            console.warn(`Assembly ${conf.name} already exists`)
-            return asm
-          }
-          const length = self.sessionAssemblies.push(conf)
-          return self.sessionAssemblies[length - 1]
-        },
-
-        /**
-         * #action
-         */
-        removeSessionAssembly(assemblyName: string) {
-          const elt = self.sessionAssemblies.find(a => a.name === assemblyName)
-          if (elt) {
-            self.sessionAssemblies.remove(elt)
-          }
-        },
-      }
-    })
-}

package/src/Assemblies/TemporaryAssembliesMixin.ts

@@ -1,51 +0,0 @@
-import { types } from 'mobx-state-tree'
-
-import PluginManager from '@jbrowse/core/PluginManager'
-import { AnyConfiguration } from '@jbrowse/core/configuration'
-import { BaseSession } from '@jbrowse/product-core'
-
-/**
- * #stateModel TemporaryAssembliesMixin
- * #category root
- */
-export function TemporaryAssembliesMixin(
-  pluginManager: PluginManager,
-  assemblyConfigSchemasType = types.frozen(),
-) {
-  return types
-    .model({
-      /**
-       * #property
-       */
-      temporaryAssemblies: types.array(assemblyConfigSchemasType),
-    })
-
-    .actions(s => {
-      const self = s as typeof s & BaseSession
-      return {
-        /**
-         * #action
-         * used for read vs ref type assemblies.
-         */
-        addTemporaryAssembly(conf: AnyConfiguration) {
-          const asm = self.temporaryAssemblies.find(f => f.name === conf.name)
-          if (asm) {
-            console.warn(`Assembly ${conf.name} was already existing`)
-            return asm
-          }
-          const length = self.temporaryAssemblies.push(conf)
-          return self.temporaryAssemblies[length - 1]
-        },
-
-        /**
-         * #action
-         */
-        removeTemporaryAssembly(name: string) {
-          const elt = self.temporaryAssemblies.find(a => a.name === name)
-          if (elt) {
-            self.temporaryAssemblies.remove(elt)
-          }
-        },
-      }
-    })
-}

package/src/Assemblies/index.ts

@@ -1,2 +0,0 @@
-export * from './SessionAssembliesMixin'
-export * from './TemporaryAssembliesMixin'

package/src/HistoryManagement/index.ts

@@ -1,56 +0,0 @@
-import TimeTraveller from '@jbrowse/core/util/TimeTraveller'
-import type { BaseRootModel } from '@jbrowse/product-core'
-import { autorun } from 'mobx'
-import { addDisposer, types } from 'mobx-state-tree'
-
-/**
- * #stateModel HistoryManagementMixin
- * #category root
- */
-export function HistoryManagementMixin() {
-  return types
-    .model({
-      /**
-       * #property
-       * used for undo/redo
-       */
-      history: types.optional(TimeTraveller, { targetPath: '../session' }),
-    })
-    .actions(self => ({
-      afterCreate() {
-        document.addEventListener('keydown', e => {
-          if (
-            self.history.canRedo &&
-            // ctrl+shift+z or cmd+shift+z
-            (((e.ctrlKey || e.metaKey) && e.shiftKey && e.code === 'KeyZ') ||
-              // ctrl+y
-              (e.ctrlKey && !e.shiftKey && e.code === 'KeyY'))
-          ) {
-            self.history.redo()
-          }
-          if (
-            self.history.canUndo &&
-            // ctrl+z or cmd+z
-            (e.ctrlKey || e.metaKey) &&
-            !e.shiftKey &&
-            e.code === 'KeyZ'
-          ) {
-            self.history.undo()
-          }
-        })
-        addDisposer(
-          self,
-          autorun(() => {
-            const { session } = self as typeof self & BaseRootModel
-            if (session) {
-              // we use a specific initialization routine after session is
-              // created to get it to start tracking itself sort of related
-              // issue here
-              // https://github.com/mobxjs/mobx-state-tree/issues/1089#issuecomment-441207911
-              self.history.initialize()
-            }
-          }),
-        )
-      },
-    }))
-}