@jbrowse/plugin-linear-genome-view 2.1.6 → 2.2.0

package/src/BaseLinearDisplay/models/baseLinearDisplayConfigSchema.ts

@@ -1,14 +1,28 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
 
+/**
+ * #config BaseLinearDisplay
+ * BaseLinearDisplay is a "base" config that is extended by classes like
+ * "LinearBasicDisplay" (used for feature tracks, etc) and "LinearBareDisplay"
+ * (more stripped down than even the basic display, not commonly used)
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
 export const baseLinearDisplayConfigSchema = ConfigurationSchema(
   'BaseLinearDisplay',
   {
+    /**
+     * #slot
+     */
     maxFeatureScreenDensity: {
       type: 'number',
       description:
         'maximum features per pixel that is displayed in the view, used if byte size estimates not available',
       defaultValue: 0.3,
     },
+    /**
+     * #slot
+     */
     fetchSizeLimit: {
       type: 'number',
       defaultValue: 1_000_000,
@@ -16,5 +30,10 @@ export const baseLinearDisplayConfigSchema = ConfigurationSchema(
         "maximum data to attempt to download for a given track, used if adapter doesn't specify one",
     },
   },
-  { explicitIdentifier: 'displayId' },
+  {
+    /**
+     * #identifier
+     */
+    explicitIdentifier: 'displayId',
+  },
 )

package/src/BasicTrack/configSchema.ts

@@ -0,0 +1,23 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { createBaseTrackConfig } from '@jbrowse/core/pluggableElementTypes'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+/**
+ * #config BasicTrack
+ * synonym for FeatureTrack
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+const configSchema = (pluginManager: PluginManager) =>
+  ConfigurationSchema(
+    'BasicTrack',
+    {},
+    {
+      /**
+       * #baseConfiguration
+       */
+      baseConfiguration: createBaseTrackConfig(pluginManager),
+      explicitIdentifier: 'trackId',
+    },
+  )
+export default configSchema

package/src/BasicTrack/index.ts

@@ -0,0 +1,22 @@
+import {
+  createBaseTrackModel,
+  TrackType,
+} from '@jbrowse/core/pluggableElementTypes'
+import PluginManager from '@jbrowse/core/PluginManager'
+import configSchemaF from './configSchema'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addTrackType(() => {
+    const configSchema = configSchemaF(pluginManager)
+
+    return new TrackType({
+      name: 'BasicTrack',
+      configSchema,
+      stateModel: createBaseTrackModel(
+        pluginManager,
+        'BasicTrack',
+        configSchema,
+      ),
+    })
+  })
+}

package/src/FeatureTrack/configSchema.ts

@@ -0,0 +1,27 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { createBaseTrackConfig } from '@jbrowse/core/pluggableElementTypes'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+/**
+ * #config FeatureTrack
+ * used for basic gene and feature tracks, generally used with LinearBasicDisplay
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+const configSchema = (pluginManager: PluginManager) =>
+  ConfigurationSchema(
+    'FeatureTrack',
+    {},
+    {
+      /**
+       * #baseConfiguration
+       */
+      baseConfiguration: createBaseTrackConfig(pluginManager),
+      /**
+       * #identifier
+       */
+      explicitIdentifier: 'trackId',
+    },
+  )
+
+export default configSchema

package/src/FeatureTrack/index.ts

@@ -0,0 +1,21 @@
+import {
+  createBaseTrackModel,
+  TrackType,
+} from '@jbrowse/core/pluggableElementTypes'
+import PluginManager from '@jbrowse/core/PluginManager'
+import configSchemaF from './configSchema'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addTrackType(() => {
+    const configSchema = configSchemaF(pluginManager)
+    return new TrackType({
+      name: 'FeatureTrack',
+      configSchema,
+      stateModel: createBaseTrackModel(
+        pluginManager,
+        'FeatureTrack',
+        configSchema,
+      ),
+    })
+  })
+}

package/src/LinearBareDisplay/configSchema.ts

@@ -2,13 +2,26 @@ import PluginManager from '@jbrowse/core/PluginManager'
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
 import { baseLinearDisplayConfigSchema } from '../BaseLinearDisplay'
 
-export function configSchemaFactory(pluginManager: PluginManager) {
+/**
+ * #config LinearBareDisplay
+ */
+function configSchemaFactory(pluginManager: PluginManager) {
   return ConfigurationSchema(
     'LinearBareDisplay',
-    { renderer: pluginManager.pluggableConfigSchemaType('renderer') },
     {
+      /**
+       * #slot
+       */
+      renderer: pluginManager.pluggableConfigSchemaType('renderer'),
+    },
+    {
+      /**
+       * #baseConfiguration
+       */
       baseConfiguration: baseLinearDisplayConfigSchema,
       explicitlyTyped: true,
     },
   )
 }
+
+export { configSchemaFactory }

package/src/LinearBareDisplay/model.ts

@@ -6,13 +6,23 @@ import { getParentRenderProps } from '@jbrowse/core/util/tracks'
 import { types } from 'mobx-state-tree'
 import { BaseLinearDisplay } from '../BaseLinearDisplay'
 
+/**
+ * #stateModel LinearBareDisplay
+ * extends `BaseLinearDisplay`
+ */
 export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
   return types
     .compose(
       'LinearBareDisplay',
       BaseLinearDisplay,
       types.model({
+        /**
+         * #property
+         */
         type: types.literal('LinearBareDisplay'),
+        /**
+         * #property
+         */
         configuration: ConfigurationReference(configSchema),
       }),
     )
@@ -20,6 +30,9 @@ export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
     .views(self => {
       const { renderProps: superRenderProps } = self
       return {
+        /**
+         * #method
+         */
         renderProps() {
           return {
             ...superRenderProps(),
@@ -29,6 +42,9 @@ export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
           }
         },
 
+        /**
+         * #getter
+         */
         get rendererTypeName() {
           return self.configuration.renderer.type
         },

package/src/LinearBasicDisplay/configSchema.ts

@@ -2,10 +2,16 @@ import { ConfigurationSchema } from '@jbrowse/core/configuration'
 import PluginManager from '@jbrowse/core/PluginManager'
 import { baseLinearDisplayConfigSchema } from '../BaseLinearDisplay'
 
-export default function configSchemaFactory(pluginManager: PluginManager) {
+/**
+ * #config LinearBasicDisplay
+ */
+function configSchemaFactory(pluginManager: PluginManager) {
   return ConfigurationSchema(
     'LinearBasicDisplay',
     {
+      /**
+       * #slot
+       */
       mouseover: {
         type: 'string',
         description: 'what to display in a given mouseover',
@@ -13,8 +19,19 @@ export default function configSchemaFactory(pluginManager: PluginManager) {
 
         contextVariable: ['feature'],
       },
+      /**
+       * #slot
+       */
       renderer: pluginManager.pluggableConfigSchemaType('renderer'),
     },
-    { baseConfiguration: baseLinearDisplayConfigSchema, explicitlyTyped: true },
+    {
+      /**
+       * #baseConfiguration
+       */
+      baseConfiguration: baseLinearDisplayConfigSchema,
+      explicitlyTyped: true,
+    },
   )
 }
+
+export default configSchemaFactory

package/src/LinearBasicDisplay/model.ts

@@ -16,29 +16,60 @@ import { BaseLinearDisplay } from '../BaseLinearDisplay'
 
 const SetMaxHeightDlg = lazy(() => import('./components/SetMaxHeight'))
 
-const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
-  types
+/**
+ * #stateModel LinearBasicDisplay
+ * used by `FeatureTrack`, has simple settings like "show/hide feature labels", etc.
+ */
+function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
+  return types
     .compose(
       'LinearBasicDisplay',
       BaseLinearDisplay,
       types.model({
+        /**
+         * #property
+         */
         type: types.literal('LinearBasicDisplay'),
+        /**
+         * #property
+         */
         trackShowLabels: types.maybe(types.boolean),
+        /**
+         * #property
+         */
         trackShowDescriptions: types.maybe(types.boolean),
+        /**
+         * #property
+         */
         trackDisplayMode: types.maybe(types.string),
+        /**
+         * #property
+         */
         trackMaxHeight: types.maybe(types.number),
+        /**
+         * #property
+         */
         configuration: ConfigurationReference(configSchema),
       }),
     )
     .views(self => ({
+      /**
+       * #getter
+       */
       get rendererTypeName() {
         return getConf(self, ['renderer', 'type'])
       },
 
+      /**
+       * #getter
+       */
       get showLabels() {
         return self.trackShowLabels ?? getConf(self, ['renderer', 'showLabels'])
       },
 
+      /**
+       * #getter
+       */
       get showDescriptions() {
         return (
           self.trackShowDescriptions ??
@@ -46,10 +77,16 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
         )
       },
 
+      /**
+       * #getter
+       */
       get maxHeight() {
         return self.trackMaxHeight ?? getConf(self, ['renderer', 'maxHeight'])
       },
 
+      /**
+       * #getter
+       */
       get displayMode() {
         return (
           self.trackDisplayMode ?? getConf(self, ['renderer', 'displayMode'])
@@ -57,6 +94,9 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
       },
     }))
     .views(self => ({
+      /**
+       * #getter
+       */
       get rendererConfig() {
         const configBlob = getConf(self, ['renderer']) || {}
         const config = configBlob as Omit<typeof configBlob, symbol>
@@ -75,15 +115,27 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
     }))
 
     .actions(self => ({
+      /**
+       * #action
+       */
       toggleShowLabels() {
         self.trackShowLabels = !self.showLabels
       },
+      /**
+       * #action
+       */
       toggleShowDescriptions() {
         self.trackShowDescriptions = !self.showDescriptions
       },
+      /**
+       * #action
+       */
       setDisplayMode(val: string) {
         self.trackDisplayMode = val
       },
+      /**
+       * #action
+       */
       setMaxHeight(val: number) {
         self.trackMaxHeight = val
       },
@@ -94,19 +146,22 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
         renderProps: superRenderProps,
       } = self
       return {
+        /**
+         * #method
+         */
         renderProps() {
           const config = self.rendererConfig
           const superProps = superRenderProps()
-
           const superPropsOmit = superProps as Omit<typeof superProps, symbol>
-
           return {
             ...superPropsOmit,
-
             config,
           }
         },
 
+        /**
+         * #method
+         */
         trackMenuItems(): MenuItem[] {
           return [
             ...superTrackMenuItems(),
@@ -115,9 +170,7 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
               icon: VisibilityIcon,
               type: 'checkbox',
               checked: self.showLabels,
-              onClick: () => {
-                self.toggleShowLabels()
-              },
+              onClick: () => self.toggleShowLabels(),
             },
             {
               label: 'Show descriptions',
@@ -136,9 +189,7 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
                 'collapse',
               ].map(val => ({
                 label: val,
-                onClick: () => {
-                  self.setDisplayMode(val)
-                },
+                onClick: () => self.setDisplayMode(val),
               })),
             },
             {
@@ -154,6 +205,7 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
         },
       }
     })
+}
 
 export type FeatureTrackStateModel = ReturnType<typeof stateModelFactory>
 export type FeatureTrackModel = Instance<FeatureTrackStateModel>

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -1,8 +1,14 @@
-import React, { useState, lazy } from 'react'
+import React, { useState, useEffect, lazy } from 'react'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { getSession } from '@jbrowse/core/util'
-import { Button, CircularProgress, Container, Grid } from '@mui/material'
+import {
+  Button,
+  CircularProgress,
+  FormControl,
+  Container,
+  Grid,
+} from '@mui/material'
 import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 import CloseIcon from '@mui/icons-material/Close'
@@ -10,7 +16,7 @@ import CloseIcon from '@mui/icons-material/Close'
 // locals
 import RefNameAutocomplete from './RefNameAutocomplete'
 import { fetchResults, splitLast } from './util'
-import { LinearGenomeViewModel, WIDGET_HEIGHT } from '..'
+import { LinearGenomeViewModel } from '..'
 const SearchResultsDialog = lazy(() => import('./SearchResultsDialog'))
 
 const useStyles = makeStyles()(theme => ({
@@ -44,8 +50,14 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     : 'No configured assemblies'
   const regions = assembly?.regions || []
   const err = assemblyError || importError
-  const [myVal, setValue] = useState('')
-  const value = myVal || regions[0]?.refName
+  const [value, setValue] = useState('')
+  const r0 = regions[0]?.refName
+
+  // useEffect resets to an "initial state" of displaying first region from assembly
+  // after assembly change
+  useEffect(() => {
+    setValue(r0)
+  }, [r0])
 
   function navToOption(option: BaseResult) {
     const location = option.getLocation()
@@ -100,8 +112,6 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     }
   }
 
-  const height = WIDGET_HEIGHT + 5
-
   // implementation notes:
   // having this wrapped in a form allows intuitive use of enter key to submit
   return (
@@ -124,47 +134,49 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
             alignItems="center"
           >
             <Grid item>
-              <AssemblySelector
-                onChange={val => {
-                  setImportError('')
-                  setSelectedAsm(val)
-                  setValue('')
-                }}
-                session={session}
-                selected={selectedAsm}
-                InputProps={{ style: { height } }}
-              />
+              <FormControl>
+                <AssemblySelector
+                  onChange={val => {
+                    setImportError('')
+                    setSelectedAsm(val)
+                    setValue('')
+                  }}
+                  session={session}
+                  selected={selectedAsm}
+                />
+              </FormControl>
             </Grid>
             <Grid item>
               {selectedAsm ? (
                 err ? (
                   <CloseIcon style={{ color: 'red' }} />
                 ) : value ? (
-                  <RefNameAutocomplete
-                    fetchResults={queryString =>
-                      fetchResults({
-                        queryString,
-                        assembly,
-                        textSearchManager,
-                        rankSearchResults,
-                        searchScope,
-                      })
-                    }
-                    model={model}
-                    assemblyName={assemblyError ? undefined : selectedAsm}
-                    value={value}
-                    // note: minWidth 270 accomodates full width of helperText
-                    minWidth={270}
-                    onChange={str => setValue(str)}
-                    onSelect={val => setOption(val)}
-                    TextFieldProps={{
-                      variant: 'outlined',
-                      helperText:
-                        'Enter sequence name, feature name, or location',
-                      style: { minWidth: '175px' },
-                      InputProps: { style: { height } },
-                    }}
-                  />
+                  <FormControl>
+                    <RefNameAutocomplete
+                      fetchResults={queryString =>
+                        fetchResults({
+                          queryString,
+                          assembly,
+                          textSearchManager,
+                          rankSearchResults,
+                          searchScope,
+                        })
+                      }
+                      model={model}
+                      assemblyName={assemblyError ? undefined : selectedAsm}
+                      value={value}
+                      // note: minWidth 270 accomodates full width of helperText
+                      minWidth={270}
+                      onChange={str => setValue(str)}
+                      onSelect={val => setOption(val)}
+                      TextFieldProps={{
+                        variant: 'outlined',
+                        helperText:
+                          'Enter sequence name, feature name, or location',
+                        style: { minWidth: '175px' },
+                      }}
+                    />
+                  </FormControl>
                 ) : (
                   <CircularProgress
                     role="progressbar"
@@ -175,27 +187,31 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
               ) : null}
             </Grid>
             <Grid item>
-              <Button
-                type="submit"
-                disabled={!value}
-                className={classes.button}
-                variant="contained"
-                color="primary"
-              >
-                Open
-              </Button>
-              <Button
-                disabled={!value}
-                className={classes.button}
-                onClick={() => {
-                  model.setError(undefined)
-                  model.showAllRegionsInAssembly(selectedAsm)
-                }}
-                variant="contained"
-                color="secondary"
-              >
-                Show all regions in assembly
-              </Button>
+              <FormControl>
+                <Button
+                  type="submit"
+                  disabled={!value}
+                  className={classes.button}
+                  variant="contained"
+                  color="primary"
+                >
+                  Open
+                </Button>
+              </FormControl>
+              <FormControl>
+                <Button
+                  disabled={!value}
+                  className={classes.button}
+                  onClick={() => {
+                    model.setError(undefined)
+                    model.showAllRegionsInAssembly(selectedAsm)
+                  }}
+                  variant="contained"
+                  color="secondary"
+                >
+                  Show all regions in assembly
+                </Button>
+              </FormControl>
             </Grid>
           </Grid>
         </form>

package/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -3,7 +3,7 @@ import { Button, Paper, Typography } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { ErrorBoundary } from 'react-error-boundary'
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
-import { ErrorMessage } from '@jbrowse/core/ui'
+import { LoadingEllipses, ErrorMessage } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
 
 // locals
@@ -22,26 +22,6 @@ const useStyles = makeStyles()(theme => ({
     paddingTop: theme.spacing(1),
     paddingBottom: theme.spacing(1),
   },
-  dots: {
-    '&::after': {
-      display: 'inline-block',
-      animation: '$ellipsis 1.5s infinite',
-      content: '"."',
-      width: '1em',
-      textAlign: 'left',
-    },
-  },
-  '@keyframes ellipsis': {
-    '0%': {
-      content: '"."',
-    },
-    '33%': {
-      content: '".."',
-    },
-    '66%': {
-      content: '"..."',
-    },
-  },
 }))
 
 const LinearGenomeView = observer(({ model }: { model: LGV }) => {
@@ -49,11 +29,7 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
   const { classes } = useStyles()
 
   if (!initialized && !error) {
-    return (
-      <Typography className={classes.dots} variant="h5">
-        Loading
-      </Typography>
-    )
+    return <LoadingEllipses variant="h5" />
   }
   if (!hasDisplayedRegions || error) {
     return <ImportForm model={model} />