Use a more normal snackbar model mixin

GMOD · Mar 13, 2024 · 47cea56 · 47cea56
1 parent ac99df7
commit 47cea56
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 69 deletions.
diff --git a/packages/core/ui/SnackbarModel.tsx b/packages/core/ui/SnackbarModel.tsx
@@ -1,13 +1,15 @@
 import React, { lazy } from 'react'
-import { IModelType, ModelProperties } from 'mobx-state-tree'
-import { IObservableArray, observable } from 'mobx'
+import { types } from 'mobx-state-tree'
+import { observable } from 'mobx'
+
 // locals
 import { NotificationLevel, SnackAction } from '../util/types'
+
 // icons
 import Report from '@mui/icons-material/Report'
 
 // lazies
-// eslint-disable-next-line react-refresh/only-export-components
+
 const ErrorMessageStackTraceDialog = lazy(
   () => import('@jbrowse/core/ui/ErrorMessageStackTraceDialog'),
 )
@@ -22,21 +24,13 @@ export interface SnackbarMessage {
  * #stateModel SnackbarModel
  * #category session
  */
-function makeExtension(
-  snackbarMessages: IObservableArray<SnackbarMessage>,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  self: any,
-) {
-  return {
-    views: {
-      /**
-       * #getter
-       */
-      get snackbarMessages() {
-        return snackbarMessages
-      },
-    },
-    actions: {
+export default function SnackbarModel() {
+  return types
+    .model({})
+    .volatile(() => ({
+      snackbarMessages: observable.array<SnackbarMessage>(),
+    }))
+    .actions(self => ({
       /**
        * #action
        */
@@ -52,6 +46,7 @@ function makeExtension(
         this.notify(errorMessage, 'error', {
           name: <Report />,
           onClick: () => {
+            // @ts-expect-error
             self.queueDialog((onClose: () => void) => [
               ErrorMessageStackTraceDialog,
               {
@@ -71,41 +66,22 @@ function makeExtension(
         level?: NotificationLevel,
         action?: SnackAction,
       ) {
-        return snackbarMessages.push({ message, level, action })
+        return self.snackbarMessages.push({ message, level, action })
       },
       /**
        * #action
        */
       popSnackbarMessage() {
-        return snackbarMessages.pop()
+        return self.snackbarMessages.pop()
       },
       /**
        * #action
        */
       removeSnackbarMessage(message: string) {
-        const element = snackbarMessages.find(f => f.message === message)
+        const element = self.snackbarMessages.find(f => f.message === message)
         if (element) {
-          snackbarMessages.remove(element)
+          self.snackbarMessages.remove(element)
         }
       },
-    },
-  }
-}
-
-export default function addSnackbarToModel<
-  PROPS extends ModelProperties,
-  OTHERS,
->(
-  tree: IModelType<PROPS, OTHERS>,
-): IModelType<
-  PROPS,
-  OTHERS &
-    ReturnType<typeof makeExtension>['actions'] &
-    ReturnType<typeof makeExtension>['views']
-> {
-  return tree.extend(self => {
-    const snackbarMessages = observable.array<SnackbarMessage>()
-
-    return makeExtension(snackbarMessages, self)
-  })
+    }))
 }
diff --git a/packages/web-core/src/BaseWebSession/index.ts b/packages/web-core/src/BaseWebSession/index.ts
@@ -9,7 +9,6 @@ import {
   AnyConfiguration,
 } from '@jbrowse/core/configuration'
 import { AssemblyManager, JBrowsePlugin } from '@jbrowse/core/util/types'
-import addSnackbarToModel from '@jbrowse/core/ui/SnackbarModel'
 import { localStorageGetItem, localStorageSetItem } from '@jbrowse/core/util'
 import { autorun } from 'mobx'
 import {
@@ -22,15 +21,6 @@ import {
   Instance,
 } from 'mobx-state-tree'
 import TextSearchManager from '@jbrowse/core/TextSearch/TextSearchManager'
-import { BaseTrackConfig } from '@jbrowse/core/pluggableElementTypes'
-
-// icons
-import SettingsIcon from '@mui/icons-material/Settings'
-import CopyIcon from '@mui/icons-material/FileCopy'
-import DeleteIcon from '@mui/icons-material/Delete'
-import InfoIcon from '@mui/icons-material/Info'
-
-// locals
 import PluginManager from '@jbrowse/core/PluginManager'
 import {
   DialogQueueSessionMixin,
@@ -45,11 +35,21 @@ import {
   SessionAssembliesMixin,
   TemporaryAssembliesMixin,
 } from '@jbrowse/app-core'
+import { BaseTrackConfig } from '@jbrowse/core/pluggableElementTypes'
 import { BaseAssemblyConfigSchema } from '@jbrowse/core/assemblyManager'
+import { BaseConnectionConfigModel } from '@jbrowse/core/pluggableElementTypes/models/baseConnectionConfig'
+import SnackbarModel from '@jbrowse/core/ui/SnackbarModel'
+
+// icons
+import SettingsIcon from '@mui/icons-material/Settings'
+import CopyIcon from '@mui/icons-material/FileCopy'
+import DeleteIcon from '@mui/icons-material/Delete'
+import InfoIcon from '@mui/icons-material/Info'
+
 // locals
 import { WebSessionConnectionsMixin } from '../SessionConnections'
-import { BaseConnectionConfigModel } from '@jbrowse/core/pluggableElementTypes/models/baseConnectionConfig'
 
+// lazies
 const AboutDialog = lazy(() => import('./AboutDialog'))
 
 /**
@@ -92,6 +92,7 @@ export function BaseWebSession({
         TemporaryAssembliesMixin(pluginManager, assemblyConfigSchema),
         WebSessionConnectionsMixin(pluginManager),
         AppFocusMixin(),
+        SnackbarModel(),
       ),
     )
     .props({
@@ -420,7 +421,7 @@ export function BaseWebSession({
     sessionModel,
   ) as typeof sessionModel
 
-  return types.snapshotProcessor(addSnackbarToModel(extendedSessionModel), {
+  return types.snapshotProcessor(extendedSessionModel, {
     // @ts-expect-error
     preProcessor(snapshot) {
       if (snapshot) {

diff --git a/products/jbrowse-desktop/src/sessionModel/index.ts b/products/jbrowse-desktop/src/sessionModel/index.ts
@@ -1,12 +1,7 @@
 import { getConf, readConfObject } from '@jbrowse/core/configuration'
-import addSnackbarToModel from '@jbrowse/core/ui/SnackbarModel'
 import { types, Instance, getParent } from 'mobx-state-tree'
 import PluginManager from '@jbrowse/core/PluginManager'
-
-// icons
-import { DesktopSessionTrackMenuMixin } from './TrackMenu'
 import { BaseTrackConfig } from '@jbrowse/core/pluggableElementTypes'
-import { DesktopRootModel } from '../rootModel'
 import {
   ConnectionManagementSessionMixin,
   DialogQueueSessionMixin,
@@ -16,14 +11,21 @@ import {
   ThemeManagerSessionMixin,
   TracksManagerSessionMixin,
 } from '@jbrowse/product-core'
-import { DesktopSessionFactory } from './DesktopSession'
 import {
   AppFocusMixin,
   SessionAssembliesMixin,
   TemporaryAssembliesMixin,
 } from '@jbrowse/app-core'
 import { BaseAssemblyConfigSchema } from '@jbrowse/core/assemblyManager/assemblyConfigSchema'
 import { AbstractSessionModel } from '@jbrowse/core/util'
+import SnackbarModel from '@jbrowse/core/ui/SnackbarModel'
+
+// icons
+import { DesktopSessionTrackMenuMixin } from './TrackMenu'
+
+// locals
+import { DesktopRootModel } from '../rootModel'
+import { DesktopSessionFactory } from './DesktopSession'
 
 /**
  * #stateModel JBrowseDesktopSessionModel
@@ -67,6 +69,7 @@ export default function sessionModelFactory({
       TemporaryAssembliesMixin(pluginManager, assemblyConfigSchema),
       DesktopSessionTrackMenuMixin(pluginManager),
       AppFocusMixin(),
+      SnackbarModel(),
     )
     .views(self => ({
       /**
@@ -150,7 +153,7 @@ export default function sessionModelFactory({
     sessionModel,
   ) as typeof sessionModel
 
-  return types.snapshotProcessor(addSnackbarToModel(extendedSessionModel), {
+  return types.snapshotProcessor(extendedSessionModel, {
     // @ts-expect-error
     preProcessor(snapshot) {
       if (snapshot) {

diff --git a/products/jbrowse-react-circular-genome-view/src/createModel/createSessionModel.ts b/products/jbrowse-react-circular-genome-view/src/createModel/createSessionModel.ts
@@ -3,9 +3,9 @@ import { lazy } from 'react'
 import { AbstractSessionModel } from '@jbrowse/core/util/types'
 import { getParent, types, Instance } from 'mobx-state-tree'
 import PluginManager from '@jbrowse/core/PluginManager'
+import SnackbarModel from '@jbrowse/core/ui/SnackbarModel'
 import { getConf } from '@jbrowse/core/configuration'
 import InfoIcon from '@mui/icons-material/Info'
-import addSnackbarToModel from '@jbrowse/core/ui/SnackbarModel'
 import {
   BaseSessionModel,
   ConnectionManagementSessionMixin,
@@ -29,7 +29,7 @@ const AboutDialog = lazy(() => import('./AboutDialog'))
  * - [SnackbarModel](../snackbarmodel)
  */
 export default function sessionModelFactory(pluginManager: PluginManager) {
-  const model = types
+  return types
     .compose(
       'ReactCircularGenomeViewSession',
       BaseSessionModel(pluginManager),
@@ -38,6 +38,7 @@ export default function sessionModelFactory(pluginManager: PluginManager) {
       DialogQueueSessionMixin(pluginManager),
       TracksManagerSessionMixin(pluginManager),
       ReferenceManagementSessionMixin(pluginManager),
+      SnackbarModel(),
     )
     .props({
       /**
@@ -143,8 +144,6 @@ export default function sessionModelFactory(pluginManager: PluginManager) {
         ]
       },
     }))
-
-  return addSnackbarToModel(model)
 }
 
 export type SessionStateModel = ReturnType<typeof sessionModelFactory>

diff --git a/products/jbrowse-react-linear-genome-view/src/createModel/createSessionModel.ts b/products/jbrowse-react-linear-genome-view/src/createModel/createSessionModel.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { lazy } from 'react'
 import { AbstractSessionModel } from '@jbrowse/core/util/types'
-import addSnackbarToModel from '@jbrowse/core/ui/SnackbarModel'
+import SnackbarModel from '@jbrowse/core/ui/SnackbarModel'
 import { getConf } from '@jbrowse/core/configuration'
 import { cast, getParent, types, Instance } from 'mobx-state-tree'
 import PluginManager from '@jbrowse/core/PluginManager'
@@ -34,7 +34,7 @@ const AboutDialog = lazy(() => import('./AboutDialog'))
 function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
 
 export default function sessionModelFactory(pluginManager: PluginManager) {
-  const model = types
+  return types
     .compose(
       'ReactLinearGenomeViewSession',
       BaseSessionModel(pluginManager),
@@ -44,6 +44,7 @@ export default function sessionModelFactory(pluginManager: PluginManager) {
       TracksManagerSessionMixin(pluginManager),
       ReferenceManagementSessionMixin(pluginManager),
       SessionTracksManagerSessionMixin(pluginManager),
+      SnackbarModel(),
     )
     .props({
       /**
@@ -149,8 +150,6 @@ export default function sessionModelFactory(pluginManager: PluginManager) {
         ]
       },
     }))
-
-  return addSnackbarToModel(model)
 }
 
 export type SessionStateModel = ReturnType<typeof sessionModelFactory>