@apollo-annotation/jbrowse-plugin-apollo 0.1.19 → 0.1.21

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@apollo-annotation/jbrowse-plugin-apollo",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "Apollo plugin for JBrowse 2",
+  "keywords": [
+    "jbrowse",
+    "jbrowse2"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/GMOD/Apollo3.git",
     "directory": "packages/jbrowse-plugin-apollo"
   },
-  "author": "JBrowse Team",
   "license": "Apache-2.0",
-  "keywords": [
-    "jbrowse",
-    "jbrowse2"
-  ],
+  "author": "JBrowse Team",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",
@@ -20,13 +20,6 @@
     "dist",
     "src"
   ],
-  "config": {
-    "jbrowse": {
-      "plugin": {
-        "name": "Apollo"
-      }
-    }
-  },
   "scripts": {
     "setup": "rimraf .jbrowse && jbrowse create .jbrowse",
     "clean": "rimraf dist",
@@ -47,13 +40,17 @@
     "prepack": "yarn build",
     "postversion": "git push --follow-tags"
   },
-  "jbrowse-plugin": {
-    "name": "Apollo"
+  "config": {
+    "jbrowse": {
+      "plugin": {
+        "name": "Apollo"
+      }
+    }
   },
   "dependencies": {
-    "@apollo-annotation/common": "^0.1.19",
-    "@apollo-annotation/mst": "^0.1.19",
-    "@apollo-annotation/shared": "^0.1.19",
+    "@apollo-annotation/common": "^0.1.21",
+    "@apollo-annotation/mst": "^0.1.21",
+    "@apollo-annotation/shared": "^0.1.21",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@gmod/gff": "1.2.0",
@@ -74,18 +71,6 @@
     "socket.io-client": "^4.5.4",
     "tslib": "^2.3.1"
   },
-  "peerDependencies": {
-    "@jbrowse/core": "^2.13.1",
-    "@mui/material": "^5.11.14",
-    "mobx": "^6.6.1",
-    "mobx-react": "^7.2.1",
-    "mobx-state-tree": "^5.1.7",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rxjs": "^7.4.0",
-    "tss-react": "^4.6.1"
-  },
   "devDependencies": {
     "@jbrowse/cli": "^2.6.2",
     "@jbrowse/core": "^2.13.1",
@@ -97,7 +82,7 @@
     "@types/file-saver": "^2",
     "@types/node": "^18.14.2",
     "@types/prop-types": "^15",
-    "@types/react": "^17.0.34",
+    "@types/react": "^18.3.4",
     "@types/react-dom": "^18",
     "cypress": "12.17.3",
     "cypress-mongodb": "^6.2.0",
@@ -123,7 +108,22 @@
     "tss-react": "^4.6.1",
     "typescript": "^5.5.3"
   },
+  "peerDependencies": {
+    "@jbrowse/core": "^2.13.1",
+    "@mui/material": "^5.11.14",
+    "mobx": "^6.6.1",
+    "mobx-react": "^7.2.1",
+    "mobx-state-tree": "^5.1.7",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rxjs": "^7.4.0",
+    "tss-react": "^4.6.1"
+  },
   "publishConfig": {
     "access": "public"
+  },
+  "jbrowse-plugin": {
+    "name": "Apollo"
   }
 }

package/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx

@@ -64,7 +64,6 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
     setSeqTrackCanvas,
     setSeqTrackOverlayCanvas,
     setTheme,
-    tabularEditor,
   } = model
   const { classes } = useStyles()
   const lgv = getContainingView(model) as unknown as LinearGenomeViewModel
@@ -170,9 +169,6 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
               onMouseLeave={onMouseLeave}
               onMouseDown={onMouseDown}
               onMouseUp={onMouseUp}
-              onClick={() => {
-                tabularEditor.showPane()
-              }}
               className={classes.canvas}
               style={{ cursor: cursor ?? 'default' }}
               data-testid="overlayCanvas"

package/src/LinearApolloDisplay/configSchema.ts

@@ -1,16 +1,7 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import PluginManager from '@jbrowse/core/PluginManager'
-import type LinearGenomeViewPlugin from '@jbrowse/plugin-linear-genome-view'
 
-export function configSchemaFactory(pluginManager: PluginManager) {
-  const LGVPlugin = pluginManager.getPlugin(
-    'LinearGenomeViewPlugin',
-  ) as LinearGenomeViewPlugin
-  const { baseLinearDisplayConfigSchema } = LGVPlugin.exports
-
-  return ConfigurationSchema(
-    'LinearApolloDisplay',
-    { height: { type: 'number', defaultValue: 500 } },
-    { baseConfiguration: baseLinearDisplayConfigSchema, explicitlyTyped: true },
-  )
-}
+export const configSchema = ConfigurationSchema(
+  'LinearApolloDisplay',
+  {},
+  { explicitIdentifier: 'displayId', explicitlyTyped: true },
+)

package/src/LinearApolloDisplay/index.ts

@@ -1,2 +1,2 @@
-export { configSchemaFactory } from './configSchema'
+export { configSchema } from './configSchema'
 export { stateModelFactory } from './stateModel'

package/src/LinearApolloDisplay/stateModel/base.ts

@@ -22,29 +22,27 @@ import { addDisposer, getRoot, types } from 'mobx-state-tree'
 import { ApolloInternetAccountModel } from '../../ApolloInternetAccount/model'
 import { ApolloSessionModel } from '../../session'
 import { ApolloRootModel } from '../../types'
-import { TrackHeightMixin } from './trackHeightMixin'
+
+const minDisplayHeight = 20
 
 export function baseModelFactory(
   _pluginManager: PluginManager,
   configSchema: AnyConfigurationSchemaType,
 ) {
-  // TODO: Restore this when TRackHeightMixin is in LGV runtime exports
-
-  // const LGVPlugin = pluginManager.getPlugin(
-  //   'LinearGenomeViewPlugin',
-  // ) as LinearGenomeViewPlugin
-  // const { TrackHeightMixin } = LGVPlugin.exports
-
-  return types
-    .compose(BaseDisplay, TrackHeightMixin)
-    .named('BaseLinearApolloDisplay')
+  return BaseDisplay.named('BaseLinearApolloDisplay')
     .props({
       type: types.literal('LinearApolloDisplay'),
       configuration: ConfigurationReference(configSchema),
+      graphical: true,
+      table: false,
+      heightPreConfig: types.maybe(
+        types.refinement(
+          'displayHeight',
+          types.number,
+          (n) => n >= minDisplayHeight,
+        ),
+      ),
     })
-    .volatile((self) => ({
-      lgv: getContainingView(self) as unknown as LinearGenomeViewModel,
-    }))
     .views((self) => {
       const { configuration, renderProps: superRenderProps } = self
       return {
@@ -57,6 +55,26 @@ export function baseModelFactory(
         },
       }
     })
+    .volatile(() => ({
+      scrollTop: 0,
+    }))
+    .views((self) => ({
+      get lgv() {
+        return getContainingView(self) as unknown as LinearGenomeViewModel
+      },
+      get height() {
+        if (self.heightPreConfig) {
+          return self.heightPreConfig
+        }
+        if (self.graphical && self.table) {
+          return 500
+        }
+        if (self.graphical) {
+          return 200
+        }
+        return 300
+      },
+    }))
     .views((self) => ({
       get rendererTypeName() {
         return self.configuration.renderer.type
@@ -119,6 +137,73 @@ export function baseModelFactory(
           .apolloSelectedFeature
       },
     }))
+    .actions((self) => ({
+      setScrollTop(scrollTop: number) {
+        self.scrollTop = scrollTop
+      },
+      setHeight(displayHeight: number) {
+        self.heightPreConfig = Math.max(displayHeight, minDisplayHeight)
+        return self.height
+      },
+      resizeHeight(distance: number) {
+        const oldHeight = self.height
+        const newHeight = this.setHeight(self.height + distance)
+        return newHeight - oldHeight
+      },
+      showGraphicalOnly() {
+        self.graphical = true
+        self.table = false
+      },
+      showTableOnly() {
+        self.graphical = false
+        self.table = true
+      },
+      showGraphicalAndTable() {
+        self.graphical = true
+        self.table = true
+      },
+    }))
+    .views((self) => {
+      const { trackMenuItems: superTrackMenuItems } = self
+      return {
+        trackMenuItems() {
+          const { graphical, table } = self
+          return [
+            ...superTrackMenuItems(),
+            {
+              type: 'subMenu',
+              label: 'Appearance',
+              subMenu: [
+                {
+                  label: 'Show graphical display',
+                  type: 'radio',
+                  checked: graphical && !table,
+                  onClick: () => {
+                    self.showGraphicalOnly()
+                  },
+                },
+                {
+                  label: 'Show table display',
+                  type: 'radio',
+                  checked: table && !graphical,
+                  onClick: () => {
+                    self.showTableOnly()
+                  },
+                },
+                {
+                  label: 'Show both graphical and table display',
+                  type: 'radio',
+                  checked: table && graphical,
+                  onClick: () => {
+                    self.showGraphicalAndTable()
+                  },
+                },
+              ],
+            },
+          ]
+        },
+      }
+    })
     .actions((self) => ({
       setSelectedFeature(feature?: AnnotationFeature) {
         ;(

package/src/OntologyManager/OntologyStore/fulltext.ts

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable import/no-named-as-default-member */
 // jsonpath triggers this rule for some reason. import { query } from 'jsonpath' does not work
 
 import { checkAbortSignal } from '@jbrowse/core/util'

package/src/components/AddAssembly.tsx

@@ -225,7 +225,7 @@ export function AddAssembly({
       const fileUploadChangeBase = {
         assembly: new ObjectID().toHexString(),
         assemblyName,
-        fileId,
+        fileIds: { fa: fileId },
       }
       change =
         fileType === FileType.GFF3 && importFeatures

package/src/components/ManageUsers.tsx

@@ -124,7 +124,26 @@ export function ManageUsers({
       headerName: 'Role',
       width: 140,
       type: 'singleSelect',
-      valueOptions: ['', 'readOnly', 'user', 'admin'],
+      valueOptions: ['readOnly', 'user', 'admin', 'none'],
+      getOptionLabel(value) {
+        switch (value) {
+          case 'readOnly': {
+            return 'Read-only'
+          }
+          case 'user': {
+            return 'User'
+          }
+          case 'admin': {
+            return 'Admin'
+          }
+          case 'none': {
+            return 'None'
+          }
+          default: {
+            return 'unknown'
+          }
+        }
+      },
       editable: true,
     },
     {

package/src/index.ts

@@ -64,7 +64,7 @@ import {
 } from './FeatureDetailsWidget'
 import {
   stateModelFactory as LinearApolloDisplayStateModelFactory,
-  configSchemaFactory as linearApolloDisplayConfigSchemaFactory,
+  configSchema as linearApolloDisplayConfigSchema,
 } from './LinearApolloDisplay'
 import {
   DisplayComponent,
@@ -174,7 +174,7 @@ export default class ApolloPlugin extends Plugin {
     })
 
     pluginManager.addDisplayType(() => {
-      const configSchema = linearApolloDisplayConfigSchemaFactory(pluginManager)
+      const configSchema = linearApolloDisplayConfigSchema
       return new DisplayType({
         name: 'LinearApolloDisplay',
         configSchema,

package/src/makeDisplayComponent.tsx

@@ -158,48 +158,72 @@ export const DisplayComponent = observer(function DisplayComponent({
   const { classes } = useStyles()
 
   const {
+    detailsHeight,
+    graphical,
     height: overallHeight,
     isShown,
     selectedFeature,
+    table,
     tabularEditor,
     toggleShown,
   } = model
-  const detailsHeight = tabularEditor.isShown ? model.detailsHeight : 0
-  const featureAreaHeight = isShown
-    ? overallHeight - detailsHeight - accordionControlHeight * 2
-    : 0
-
-  const onDetailsResize = (delta: number) => {
-    model.setDetailsHeight(model.detailsHeight - delta)
-  }
 
   const canvasScrollContainerRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
     scrollSelectedFeatureIntoView(model, canvasScrollContainerRef)
   }, [model, selectedFeature])
-  return (
-    <div className={classes.details} style={{ height: overallHeight }}>
-      <AccordionControl
-        open={isShown}
-        title="Graphical"
-        onClick={toggleShown}
-      />
+
+  const onDetailsResize = (delta: number) => {
+    model.setDetailsHeight(detailsHeight - delta)
+  }
+
+  if (graphical && table) {
+    const tabularHeight = tabularEditor.isShown ? detailsHeight : 0
+    const featureAreaHeight = isShown
+      ? overallHeight - detailsHeight - accordionControlHeight * 2
+      : 0
+    return (
+      <div style={{ height: overallHeight }}>
+        <AccordionControl
+          open={isShown}
+          title="Graphical"
+          onClick={toggleShown}
+        />
+        <div
+          className={classes.shading}
+          ref={canvasScrollContainerRef}
+          style={{ height: featureAreaHeight }}
+        >
+          <LinearApolloDisplay model={model} {...other} />
+        </div>
+        <AccordionControl
+          title="Table"
+          open={tabularEditor.isShown}
+          onClick={tabularEditor.togglePane}
+          onResize={onDetailsResize}
+        />
+        <div className={classes.details} style={{ height: tabularHeight }}>
+          <TabularEditorPane model={model} />
+        </div>
+      </div>
+    )
+  }
+
+  if (graphical) {
+    return (
       <div
         className={classes.shading}
         ref={canvasScrollContainerRef}
-        style={{ height: featureAreaHeight }}
+        style={{ height: overallHeight }}
       >
         <LinearApolloDisplay model={model} {...other} />
       </div>
-      <AccordionControl
-        title="Table"
-        open={tabularEditor.isShown}
-        onClick={tabularEditor.togglePane}
-        onResize={onDetailsResize}
-      />
-      <div style={{ height: detailsHeight }}>
-        <TabularEditorPane model={model} />
-      </div>
+    )
+  }
+
+  return (
+    <div className={classes.details} style={{ height: overallHeight }}>
+      <TabularEditorPane model={model} />
     </div>
   )
 })

package/src/session/session.ts

@@ -323,7 +323,7 @@ export function extendSession(
                     if (Object.keys(filteredConfig).length === 0) {
                       filteredConfig = undefined
                     }
-                    let trackConfigSnapshot = getSnapshot(conf) as {
+                    const trackConfigSnapshot = getSnapshot(conf) as {
                       trackId: string
                       type: string
                     }
@@ -331,7 +331,7 @@ export function extendSession(
                       0,
                       trackId.length - sessionTrackIdentifier.length,
                     )
-                    trackConfigSnapshot = {
+                    const newTrackConfigSnapshot = {
                       ...trackConfigSnapshot,
                       trackId: newTrackId,
                     }
@@ -346,7 +346,7 @@ export function extendSession(
                           ...filteredConfig,
                           tracks: filteredConfig?.tracks && [
                             ...filteredConfig.tracks,
-                            trackConfigSnapshot,
+                            newTrackConfigSnapshot,
                           ],
                         },
                       })
@@ -357,6 +357,10 @@ export function extendSession(
                       const { notify } = self as unknown as AbstractSessionModel
                       notify('Track added', 'success')
                     }
+                    // @ts-expect-error This method is missing in the JB types
+                    self.deleteTrackConf(conf)
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+                    jbrowse.addTrackConf(newTrackConfigSnapshot)
                   },
                   icon: SaveIcon,
                 },
@@ -396,6 +400,10 @@ export function extendSession(
                       const { notify } = self as unknown as AbstractSessionModel
                       notify('Track removed', 'success')
                     }
+                    // @ts-expect-error This method is missing in the JB types
+                    self.deleteTrackConf(conf)
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+                    jbrowse.deleteTrackConf(conf)
                   },
                   icon: SaveIcon,
                 },

package/src/LinearApolloDisplay/stateModel/trackHeightMixin.ts

@@ -1,43 +0,0 @@
-// TODO: get this added to LGV runtime exports so we don't have to duplicate it
-import { getConf } from '@jbrowse/core/configuration'
-import { types } from 'mobx-state-tree'
-
-const minDisplayHeight = 20
-
-/**
- * #stateModel TrackHeightMixin
- * #category display
- */
-export const TrackHeightMixin = types
-  .model({
-    heightPreConfig: types.maybe(
-      types.refinement(
-        'displayHeight',
-        types.number,
-        (n) => n >= minDisplayHeight,
-      ),
-    ),
-  })
-  .volatile(() => ({
-    scrollTop: 0,
-  }))
-  .views((self) => ({
-    get height() {
-      // @ts-expect-error getConf needs self.configuration
-      return self.heightPreConfig ?? (getConf(self, 'height') as number)
-    },
-  }))
-  .actions((self) => ({
-    setScrollTop(scrollTop: number) {
-      self.scrollTop = scrollTop
-    },
-    setHeight(displayHeight: number) {
-      self.heightPreConfig = Math.max(displayHeight, minDisplayHeight)
-      return self.height
-    },
-    resizeHeight(distance: number) {
-      const oldHeight = self.height
-      const newHeight = this.setHeight(self.height + distance)
-      return newHeight - oldHeight
-    },
-  }))