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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apollo-annotation/jbrowse-plugin-apollo",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "Apollo plugin for JBrowse 2",
   "keywords": [
     "jbrowse",
@@ -48,9 +48,9 @@
     }
   },
   "dependencies": {
-    "@apollo-annotation/common": "^0.1.20",
-    "@apollo-annotation/mst": "^0.1.20",
-    "@apollo-annotation/shared": "^0.1.20",
+    "@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",

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/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/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
-    },
-  }))