@jbrowse/plugin-linear-genome-view 2.6.1 → 2.6.2

package/src/LaunchLinearGenomeView/index.ts

@@ -1,66 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import { AbstractSessionModel, when } from '@jbrowse/core/util'
-import { LinearGenomeViewModel } from '../LinearGenomeView'
-
-type LGV = LinearGenomeViewModel
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addToExtensionPoint(
-    'LaunchView-LinearGenomeView',
-    // @ts-expect-error
-    async ({
-      session,
-      assembly,
-      loc,
-      tracks = [],
-    }: {
-      session: AbstractSessionModel
-      assembly?: string
-      loc: string
-      tracks?: string[]
-    }) => {
-      try {
-        const { assemblyManager } = session
-        const view = session.addView('LinearGenomeView', {}) as LGV
-
-        await when(() => !!view.volatileWidth)
-
-        if (!assembly) {
-          throw new Error(
-            'No assembly provided when launching linear genome view',
-          )
-        }
-
-        const asm = await assemblyManager.waitForAssembly(assembly)
-        if (!asm) {
-          throw new Error(
-            `Assembly "${assembly}" not found when launching linear genome view`,
-          )
-        }
-
-        await view.navToLocString(loc, assembly)
-
-        const idsNotFound = [] as string[]
-        tracks.forEach(track => {
-          try {
-            view.showTrack(track)
-          } catch (e) {
-            if (`${e}`.match('Could not resolve identifier')) {
-              idsNotFound.push(track)
-            } else {
-              throw e
-            }
-          }
-        })
-        if (idsNotFound.length) {
-          throw new Error(
-            `Could not resolve identifiers: ${idsNotFound.join(',')}`,
-          )
-        }
-      } catch (e) {
-        session.notify(`${e}`, 'error')
-        throw e
-      }
-    },
-  )
-}

package/src/LinearBareDisplay/configSchema.ts

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

package/src/LinearBareDisplay/index.test.js

@@ -1,34 +0,0 @@
-import { types } from 'mobx-state-tree'
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import { configSchemaFactory } from '.'
-
-test('config schema renderer type', () => {
-  const stubPluginManager = {
-    pluggableConfigSchemaType(type) {
-      const one = ConfigurationSchema(
-        `${type}_TypeOne`,
-        {},
-        { explicitlyTyped: true },
-      )
-      const two = ConfigurationSchema(
-        `${type}_TypeTwo`,
-        {},
-        { explicitlyTyped: true },
-      )
-      const three = ConfigurationSchema(
-        `${type}_TypeThree`,
-        {},
-        { explicitlyTyped: true },
-      )
-      return types.union(one, two, three)
-    },
-  }
-
-  const configSchema = configSchemaFactory(stubPluginManager)
-  const instance = configSchema.create({
-    type: 'LinearBareDisplay',
-    displayId: 'displayId0',
-    renderer: { type: 'renderer_TypeTwo' },
-  })
-  expect(instance.renderer.type).toBe('renderer_TypeTwo')
-})

package/src/LinearBareDisplay/index.ts

@@ -1,25 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import { DisplayType } from '@jbrowse/core/pluggableElementTypes'
-
-// locals
-import { configSchemaFactory } from './configSchema'
-import { stateModelFactory } from './model'
-import { BaseLinearDisplayComponent } from '../BaseLinearDisplay/'
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addDisplayType(() => {
-    const configSchema = configSchemaFactory(pluginManager)
-    return new DisplayType({
-      name: 'LinearBareDisplay',
-      configSchema,
-      displayName: 'Bare feature display',
-      stateModel: stateModelFactory(configSchema),
-      trackType: 'BasicTrack',
-      viewType: 'LinearGenomeView',
-      ReactComponent: BaseLinearDisplayComponent,
-    })
-  })
-}
-
-export { configSchemaFactory } from './configSchema'
-export { stateModelFactory } from './model'

package/src/LinearBareDisplay/model.ts

@@ -1,54 +0,0 @@
-import {
-  AnyConfigurationSchemaType,
-  ConfigurationReference,
-} from '@jbrowse/core/configuration'
-import { getParentRenderProps } from '@jbrowse/core/util/tracks'
-import { types } from 'mobx-state-tree'
-import { BaseLinearDisplay } from '../BaseLinearDisplay'
-
-/**
- * #stateModel LinearBareDisplay
- * #category display
- * extends `BaseLinearDisplay`
- */
-export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
-  return types
-    .compose(
-      'LinearBareDisplay',
-      BaseLinearDisplay,
-      types.model({
-        /**
-         * #property
-         */
-        type: types.literal('LinearBareDisplay'),
-        /**
-         * #property
-         */
-        configuration: ConfigurationReference(configSchema),
-      }),
-    )
-
-    .views(self => {
-      const { renderProps: superRenderProps } = self
-      return {
-        /**
-         * #method
-         */
-        renderProps() {
-          return {
-            ...superRenderProps(),
-            ...getParentRenderProps(self),
-            rpcDriverName: self.rpcDriverName,
-            config: self.configuration.renderer,
-          }
-        },
-
-        /**
-         * #getter
-         */
-        get rendererTypeName() {
-          return self.configuration.renderer.type
-        },
-      }
-    })
-}

package/src/LinearBasicDisplay/components/SetMaxHeight.tsx

@@ -1,73 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import { Dialog } from '@jbrowse/core/ui'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  Typography,
-  TextField,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
-const useStyles = makeStyles()({
-  root: {
-    width: 500,
-  },
-})
-
-function SetMaxHeightDlg({
-  model,
-  handleClose,
-}: {
-  model: {
-    maxHeight?: number
-    setMaxHeight: (arg?: number) => void
-  }
-  handleClose: () => void
-}) {
-  const { classes } = useStyles()
-  const { maxHeight = '' } = model
-  const [max, setMax] = useState(`${maxHeight}`)
-
-  return (
-    <Dialog open onClose={handleClose} title="Set max height">
-      <DialogContent className={classes.root}>
-        <Typography>
-          Set max height for the track. For example, you can increase this if
-          the layout says &quot;Max height reached&quot;
-        </Typography>
-        <TextField
-          value={max}
-          onChange={event => setMax(event.target.value)}
-          placeholder="Enter max score"
-        />
-        <DialogActions>
-          <Button
-            variant="contained"
-            color="primary"
-            type="submit"
-            autoFocus
-            onClick={() => {
-              model.setMaxHeight(
-                max !== '' && !Number.isNaN(+max) ? +max : undefined,
-              )
-              handleClose()
-            }}
-          >
-            Submit
-          </Button>
-          <Button
-            variant="contained"
-            color="secondary"
-            onClick={() => handleClose()}
-          >
-            Cancel
-          </Button>
-        </DialogActions>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default observer(SetMaxHeightDlg)

package/src/LinearBasicDisplay/configSchema.ts

@@ -1,28 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { baseLinearDisplayConfigSchema } from '../BaseLinearDisplay'
-
-/**
- * #config LinearBasicDisplay
- * #category display
- */
-function configSchemaFactory(pluginManager: PluginManager) {
-  return ConfigurationSchema(
-    'LinearBasicDisplay',
-    {
-      /**
-       * #slot
-       */
-      renderer: pluginManager.pluggableConfigSchemaType('renderer'),
-    },
-    {
-      /**
-       * #baseConfiguration
-       */
-      baseConfiguration: baseLinearDisplayConfigSchema,
-      explicitlyTyped: true,
-    },
-  )
-}
-
-export default configSchemaFactory

package/src/LinearBasicDisplay/index.ts

@@ -1,25 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import { DisplayType } from '@jbrowse/core/pluggableElementTypes'
-import { BaseLinearDisplayComponent } from '../BaseLinearDisplay'
-
-// locals
-import configSchema from './configSchema'
-import modelFactory from './model'
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addDisplayType(() => {
-    const config = configSchema(pluginManager)
-    return new DisplayType({
-      name: 'LinearBasicDisplay',
-      displayName: 'Basic feature display',
-      configSchema: config,
-      stateModel: modelFactory(config),
-      trackType: 'FeatureTrack',
-      viewType: 'LinearGenomeView',
-      ReactComponent: BaseLinearDisplayComponent,
-    })
-  })
-}
-
-export { default as modelFactory } from './model'
-export { default as configSchema } from './configSchema'

package/src/LinearBasicDisplay/model.ts

@@ -1,215 +0,0 @@
-import { lazy } from 'react'
-import {
-  getConf,
-  ConfigurationReference,
-  AnyConfigurationSchemaType,
-} from '@jbrowse/core/configuration'
-import { getSession } from '@jbrowse/core/util'
-import { MenuItem } from '@jbrowse/core/ui'
-import { types, getEnv, Instance } from 'mobx-state-tree'
-
-// icons
-import VisibilityIcon from '@mui/icons-material/Visibility'
-
-// locals
-import { BaseLinearDisplay } from '../BaseLinearDisplay'
-
-const SetMaxHeightDlg = lazy(() => import('./components/SetMaxHeight'))
-
-/**
- * #stateModel LinearBasicDisplay
- * #category display
- * 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 ??
-          getConf(self, ['renderer', 'showDescriptions'])
-        )
-      },
-
-      /**
-       * #getter
-       */
-      get maxHeight() {
-        return self.trackMaxHeight ?? getConf(self, ['renderer', 'maxHeight'])
-      },
-
-      /**
-       * #getter
-       */
-      get displayMode() {
-        return (
-          self.trackDisplayMode ?? getConf(self, ['renderer', 'displayMode'])
-        )
-      },
-    }))
-    .views(self => ({
-      /**
-       * #getter
-       */
-      get rendererConfig() {
-        const configBlob = getConf(self, ['renderer']) || {}
-        const config = configBlob as Omit<typeof configBlob, symbol>
-
-        return self.rendererType.configSchema.create(
-          {
-            ...config,
-            showLabels: self.showLabels,
-            showDescriptions: self.showDescriptions,
-            displayMode: self.displayMode,
-            maxHeight: self.maxHeight,
-          },
-          getEnv(self),
-        )
-      },
-    }))
-
-    .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
-      },
-    }))
-    .views(self => {
-      const {
-        trackMenuItems: superTrackMenuItems,
-        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(),
-            {
-              label: 'Show labels',
-              icon: VisibilityIcon,
-              type: 'checkbox',
-              checked: self.showLabels,
-              onClick: () => self.toggleShowLabels(),
-            },
-            {
-              label: 'Show descriptions',
-              icon: VisibilityIcon,
-              type: 'checkbox',
-              checked: self.showDescriptions,
-              onClick: () => self.toggleShowDescriptions(),
-            },
-            {
-              label: 'Display mode',
-              icon: VisibilityIcon,
-              subMenu: [
-                'compact',
-                'reducedRepresentation',
-                'normal',
-                'collapse',
-              ].map(val => ({
-                label: val,
-                onClick: () => self.setDisplayMode(val),
-              })),
-            },
-            {
-              label: 'Set max height',
-              onClick: () => {
-                getSession(self).queueDialog(handleClose => [
-                  SetMaxHeightDlg,
-                  { model: self, handleClose },
-                ])
-              },
-            },
-          ]
-        },
-      }
-    })
-}
-
-export type FeatureTrackStateModel = ReturnType<typeof stateModelFactory>
-export type FeatureTrackModel = Instance<FeatureTrackStateModel>
-
-export default stateModelFactory

package/src/LinearGenomeView/README.md

@@ -1,9 +0,0 @@
-# Key LinearGenomeView state fields
-
-- displayedRegions - array of { refName, start, end }, tiled in the display left
-  to right
-- offsetPx - the offset in px of the left edge of the view
-- bpPerPx - ratio of basepairs to screen pixels
-- width - width in px of the view
-
-Everything runs off of these four things.

package/src/LinearGenomeView/components/CenterLine.tsx

@@ -1,65 +0,0 @@
-import React, { useRef } from 'react'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { LinearGenomeViewModel } from '..'
-
-type LGV = LinearGenomeViewModel
-
-const useStyles = makeStyles()(theme => ({
-  centerLineContainer: {
-    background: 'transparent',
-    height: '100%',
-    zIndex: 5, // above the track but under menu
-    position: 'absolute',
-    border: `1px ${theme.palette.action.active} dashed`,
-    borderTop: 'none',
-    borderBottom: 'none',
-    pointerEvents: 'none',
-  },
-  centerLineText: {
-    position: 'absolute',
-    pointerEvents: 'none',
-    whiteSpace: 'nowrap',
-    fontWeight: 'bold',
-  },
-}))
-
-function CenterLine({ model }: { model: LGV }) {
-  const { bpPerPx, centerLineInfo, trackHeights, tracks, width } = model
-  const ref = useRef<HTMLDivElement>(null)
-  const { classes } = useStyles()
-  const startingPosition = width / 2
-
-  return tracks.length ? (
-    <div
-      data-testid="centerline_container"
-      className={classes.centerLineContainer}
-      role="presentation"
-      ref={ref}
-      style={{
-        left: `${startingPosition}px`,
-        width: Math.max(1 / bpPerPx, 1),
-      }}
-    >
-      {centerLineInfo && (
-        <div
-          // text that indicates what bp is center, positioned
-          // at the bottom right of the center line
-          data-testid="centerline_text"
-          className={classes.centerLineText}
-          role="presentation"
-          style={{
-            left: Math.max(1 / bpPerPx, 1) + 5,
-            top: trackHeights,
-          }}
-        >
-          {/* change bp to refName */}
-          {centerLineInfo.refName}:{' '}
-          {Math.max(Math.round(centerLineInfo.offset) + 1, 0)}
-        </div>
-      )}
-    </div>
-  ) : null
-}
-
-export default observer(CenterLine)