@jbrowse/product-core 5.0.0-beta.1 → 5.0.0-beta.10

package/esm/Session/DrawerWidgets.d.ts

@@ -39,6 +39,12 @@ export declare function DrawerWidgetSessionMixin(pluginManager: PluginManager):
      * modal, with no drawer behind it, is disorienting
      */
     poppedOut: boolean;
+    /**
+     * #volatile
+     * set by a host with no room for a drawer column beside its views (a
+     * phone), so every widget shows in a modal instead
+     */
+    modalWidgets: boolean;
 } & {
     /**
      * #getter
@@ -51,6 +57,12 @@ export declare function DrawerWidgetSessionMixin(pluginManager: PluginManager):
      * the modal and the drawer at once.
      */
     readonly drawerVisible: boolean;
+    /**
+     * #getter
+     * whether the visible widget shows in a modal: popped out of the drawer,
+     * or on a host with no room for one
+     */
+    readonly modalWidgetVisible: boolean;
 } & {
     /**
      * #action
@@ -93,10 +105,28 @@ export declare function DrawerWidgetSessionMixin(pluginManager: PluginManager):
      * #action
      */
     returnWidgetToDrawer(): void;
+    /**
+     * #action
+     */
+    setModalWidgets(flag: boolean): void;
     /**
      * #action
      */
     hideAllWidgets(): void;
+    afterAttach(): void;
+} & {
+    /**
+     * #action
+     * the modal's close button: a popped-out widget goes back to the drawer,
+     * and with no drawer to go back to the widget closes
+     */
+    closeModalWidget(): void;
+    /**
+     * #action
+     * adds the widget, replacing one with the same id, and shows it
+     */
+    openWidget(typeName: string, id: string, initialState?: any, conf?: unknown): any;
+} & {
     /**
      * #action
      * opens a configuration editor to configure the given thing,
@@ -108,7 +138,6 @@ export declare function DrawerWidgetSessionMixin(pluginManager: PluginManager):
     }, opts?: {
         expandedDisplayId?: string;
     }): void;
-    afterAttach(): void;
 }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree").ModelSnapshotType<{
     /**
      * #property

package/esm/Session/DrawerWidgets.js

@@ -89,6 +89,12 @@ export function DrawerWidgetSessionMixin(pluginManager) {
          * modal, with no drawer behind it, is disorienting
          */
         poppedOut: false,
+        /**
+         * #volatile
+         * set by a host with no room for a drawer column beside its views (a
+         * phone), so every widget shows in a modal instead
+         */
+        modalWidgets: false,
     }))
         .views(self => ({
         /**
@@ -102,7 +108,20 @@ export function DrawerWidgetSessionMixin(pluginManager) {
          * the modal and the drawer at once.
          */
         get drawerVisible() {
-            return Boolean(self.visibleWidget) && !self.minimized && !self.poppedOut;
+            return (Boolean(self.visibleWidget) &&
+                !self.minimized &&
+                !self.poppedOut &&
+                !self.modalWidgets);
+        },
+        /**
+         * #getter
+         * whether the visible widget shows in a modal: popped out of the drawer,
+         * or on a host with no room for one
+         */
+        get modalWidgetVisible() {
+            return (Boolean(self.visibleWidget) &&
+                !self.minimized &&
+                (self.poppedOut || self.modalWidgets));
         },
     }))
         .actions(self => ({
@@ -184,6 +203,12 @@ export function DrawerWidgetSessionMixin(pluginManager) {
         returnWidgetToDrawer() {
             self.poppedOut = false;
         },
+        /**
+         * #action
+         */
+        setModalWidgets(flag) {
+            self.modalWidgets = flag;
+        },
         /**
          * #action
          */
@@ -191,6 +216,38 @@ export function DrawerWidgetSessionMixin(pluginManager) {
             self.activeWidgets.clear();
             self.poppedOut = false;
         },
+        afterAttach() {
+            addDisposer(self, autorun(function drawerPositionAutorun() {
+                localStorageSetItem('drawerPosition', self.drawerPosition);
+            }, { name: 'DrawerPosition' }));
+        },
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         * the modal's close button: a popped-out widget goes back to the drawer,
+         * and with no drawer to go back to the widget closes
+         */
+        closeModalWidget() {
+            const widget = self.visibleWidget;
+            if (self.modalWidgets && widget) {
+                self.hideWidget(widget);
+            }
+            else {
+                self.returnWidgetToDrawer();
+            }
+        },
+        /**
+         * #action
+         * adds the widget, replacing one with the same id, and shows it
+         */
+        openWidget(typeName, id, initialState = {}, conf) {
+            const widget = self.addWidget(typeName, id, initialState, conf);
+            self.showWidget(widget);
+            return widget;
+        },
+    }))
+        .actions(self => ({
         /**
          * #action
          * opens a configuration editor to configure the given thing,
@@ -212,16 +269,10 @@ export function DrawerWidgetSessionMixin(pluginManager) {
             else {
                 throw new Error('must pass a configuration model or frozen config with trackId to editConfiguration');
             }
-            const editor = this.addWidget('ConfigurationEditorWidget', 'configEditor', {});
+            const editor = self.openWidget('ConfigurationEditorWidget', 'configEditor');
             // Set target via action since it's now volatile
             editor.setTarget(targetConfig);
             editor.setExpandedDisplayId(opts?.expandedDisplayId);
-            this.showWidget(editor);
-        },
-        afterAttach() {
-            addDisposer(self, autorun(function drawerPositionAutorun() {
-                localStorageSetItem('drawerPosition', self.drawerPosition);
-            }, { name: 'DrawerPosition' }));
         },
     }))
         .postProcessSnapshot(snap => {