@apollo-annotation/jbrowse-plugin-apollo 0.1.0

package/src/index.ts

@@ -0,0 +1,394 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import {
+  DisplayType,
+  InternetAccountType,
+  PluggableElementType,
+  TrackType,
+  ViewType,
+  createBaseTrackConfig,
+  createBaseTrackModel,
+} from '@jbrowse/core/pluggableElementTypes'
+import Plugin from '@jbrowse/core/Plugin'
+import PluginManager from '@jbrowse/core/PluginManager'
+import {
+  AbstractSessionModel,
+  Region,
+  getSession,
+  isAbstractMenuManager,
+} from '@jbrowse/core/util'
+import { LinearGenomeViewStateModel } from '@jbrowse/plugin-linear-genome-view'
+import AddIcon from '@mui/icons-material/Add'
+import { changeRegistry, checkRegistry } from 'apollo-common'
+import {
+  CDSCheck,
+  CoreValidation,
+  ParentChildValidation,
+  changes,
+  validationRegistry,
+} from 'apollo-shared'
+
+import { version } from '../package.json'
+import {
+  configSchema as apolloInternetAccountConfigSchema,
+  modelFactory as apolloInternetAccountModelFactory,
+} from './ApolloInternetAccount'
+import { installApolloSequenceAdapter } from './ApolloSequenceAdapter'
+import {
+  ApolloSixFrameRenderer,
+  ReactComponent as ApolloSixFrameRendererReactComponent,
+  configSchema as apolloSixFrameRendererConfigSchema,
+} from './ApolloSixFrameRenderer'
+import { installApolloTextSearchAdapter } from './ApolloTextSearchAdapter'
+import { BackendDriver } from './BackendDrivers'
+import {
+  DownloadGFF3,
+  ManageChecks,
+  OpenLocalFile,
+  ViewChangeLog,
+} from './components'
+import { AddFeature } from './components/AddFeature'
+import { ViewCheckResults } from './components/ViewCheckResults'
+import ApolloPluginConfigurationSchema from './config'
+import { annotationFromPileup } from './extensions'
+import {
+  stateModelFactory as LinearApolloDisplayStateModelFactory,
+  configSchemaFactory as linearApolloDisplayConfigSchemaFactory,
+} from './LinearApolloDisplay'
+import {
+  DisplayComponent,
+  makeSixFrameDisplayComponent,
+} from './makeDisplayComponent'
+import { ApolloSessionModel, extendSession } from './session'
+import {
+  stateModelFactory as SixFrameFeatureDisplayStateModelFactory,
+  configSchemaFactory as sixFrameFeatureDisplayConfigSchemaFactory,
+} from './SixFrameFeatureDisplay'
+
+interface RpcHandle {
+  on(event: string, listener: (event: MessageEvent) => void): this
+  workers: Worker[]
+}
+
+interface ApolloMessageData {
+  apollo: true
+  messageId: string
+  method: string
+  region: Region
+  sequence: string
+  assembly: string
+}
+
+function isApolloMessageData(data?: unknown): data is ApolloMessageData {
+  return (
+    typeof data === 'object' &&
+    data !== null &&
+    'apollo' in data &&
+    data.apollo === true
+  )
+}
+
+const inWebWorker = 'WorkerGlobalScope' in globalThis
+
+for (const [changeName, change] of Object.entries(changes)) {
+  changeRegistry.registerChange(changeName, change)
+}
+
+const cdsCheck = new CDSCheck()
+checkRegistry.registerCheck(cdsCheck.name, cdsCheck)
+validationRegistry.registerValidation(new CoreValidation())
+validationRegistry.registerValidation(new ParentChildValidation())
+
+export default class ApolloPlugin extends Plugin {
+  name = 'ApolloPlugin'
+  version = version
+  configurationSchema = ApolloPluginConfigurationSchema
+
+  install(pluginManager: PluginManager) {
+    installApolloSequenceAdapter(pluginManager)
+    installApolloTextSearchAdapter(pluginManager)
+    pluginManager.addTrackType(() => {
+      const configSchema = ConfigurationSchema(
+        'ApolloTrack',
+        { adapter: '' },
+        {
+          baseConfiguration: createBaseTrackConfig(pluginManager),
+          explicitIdentifier: 'trackId',
+        },
+      )
+      return new TrackType({
+        name: 'ApolloTrack',
+        configSchema,
+        stateModel: createBaseTrackModel(
+          pluginManager,
+          'ApolloTrack',
+          configSchema,
+        ),
+      })
+    })
+
+    pluginManager.addInternetAccountType(() => {
+      return new InternetAccountType({
+        name: 'ApolloInternetAccount',
+        configSchema: apolloInternetAccountConfigSchema,
+        stateModel: apolloInternetAccountModelFactory(
+          apolloInternetAccountConfigSchema,
+        ),
+      })
+    })
+
+    pluginManager.addDisplayType(() => {
+      const configSchema = linearApolloDisplayConfigSchemaFactory(pluginManager)
+      return new DisplayType({
+        name: 'LinearApolloDisplay',
+        configSchema,
+        stateModel: LinearApolloDisplayStateModelFactory(
+          pluginManager,
+          configSchema,
+        ),
+        trackType: 'ApolloTrack',
+        viewType: 'LinearGenomeView',
+        ReactComponent: DisplayComponent,
+      })
+    })
+
+    pluginManager.addDisplayType(() => {
+      const configSchema =
+        sixFrameFeatureDisplayConfigSchemaFactory(pluginManager)
+      const SixFrameDisplayComponent =
+        makeSixFrameDisplayComponent(pluginManager)
+      return new DisplayType({
+        name: 'SixFrameFeatureDisplay',
+        configSchema,
+        stateModel: SixFrameFeatureDisplayStateModelFactory(
+          pluginManager,
+          configSchema,
+        ),
+        trackType: 'ApolloTrack',
+        viewType: 'LinearGenomeView',
+        ReactComponent: SixFrameDisplayComponent,
+      })
+    })
+
+    pluginManager.addRendererType(
+      () =>
+        new ApolloSixFrameRenderer({
+          name: 'ApolloSixFrameRenderer',
+          ReactComponent: ApolloSixFrameRendererReactComponent,
+          configSchema: apolloSixFrameRendererConfigSchema,
+          pluginManager,
+        }),
+    )
+
+    pluginManager.addToExtensionPoint(
+      'Core-extendSession',
+      extendSession.bind(this, pluginManager),
+    )
+
+    pluginManager.addToExtensionPoint(
+      'Core-extendPluggableElement',
+      (pluggableElement: PluggableElementType) => {
+        if (pluggableElement.name === 'LinearGenomeView') {
+          const { stateModel } = pluggableElement as ViewType
+          const lgv = stateModel as LinearGenomeViewStateModel
+          const newStateModel = lgv.views((self) => {
+            const superRubberBandMenuItems = self.rubberBandMenuItems
+            return {
+              rubberBandMenuItems() {
+                return [
+                  ...superRubberBandMenuItems(),
+                  {
+                    label: 'Add new feature',
+                    icon: AddIcon,
+                    onClick: () => {
+                      const session = getSession(
+                        self,
+                      ) as unknown as ApolloSessionModel
+                      const { leftOffset, rightOffset } = self
+                      const selectedRegions = self.getSelectedRegions(
+                        leftOffset,
+                        rightOffset,
+                      )
+                      ;(session as unknown as AbstractSessionModel).queueDialog(
+                        (doneCallback) => [
+                          AddFeature,
+                          {
+                            session,
+                            handleClose: () => {
+                              doneCallback()
+                            },
+                            region: selectedRegions[0],
+                            changeManager:
+                              session.apolloDataStore.changeManager,
+                          },
+                        ],
+                      )
+                    },
+                  },
+                ]
+              },
+            }
+          })
+          ;(pluggableElement as ViewType).stateModel = newStateModel
+        }
+        return pluggableElement
+      },
+    )
+
+    pluginManager.addToExtensionPoint(
+      'Core-extendPluggableElement',
+      annotationFromPileup,
+    )
+    if (!inWebWorker) {
+      pluginManager.addToExtensionPoint(
+        'Core-extendWorker',
+        (handle: RpcHandle) => {
+          if (!('on' in handle && handle.on)) {
+            return handle
+          }
+          handle.on('apollo', async (event: MessageEvent) => {
+            if (!isApolloMessageData(event)) {
+              return
+            }
+            const { apollo, messageId, method } = event
+            switch (method) {
+              case 'getSequence': {
+                const { region } = event
+                const { assemblyName } = region
+                const dataStore = (
+                  pluginManager.rootModel?.session as
+                    | ApolloSessionModel
+                    | undefined
+                )?.apolloDataStore
+                if (!dataStore) {
+                  break
+                }
+                const backendDriver = dataStore.getBackendDriver(
+                  assemblyName,
+                ) as BackendDriver
+                const { seq: sequence } =
+                  await backendDriver.getSequence(region)
+                handle.workers[0].postMessage({
+                  apollo,
+                  messageId,
+                  sequence,
+                })
+                break
+              }
+              case 'getRegions': {
+                const { assembly } = event
+                const dataStore = (
+                  pluginManager.rootModel?.session as
+                    | ApolloSessionModel
+                    | undefined
+                )?.apolloDataStore
+                if (!dataStore) {
+                  break
+                }
+                const backendDriver = dataStore.getBackendDriver(
+                  assembly,
+                ) as BackendDriver
+                const regions = await backendDriver.getRegions(assembly)
+                handle.workers[0].postMessage({
+                  apollo,
+                  messageId,
+                  regions,
+                })
+                break
+              }
+              default: {
+                break
+              }
+            }
+          })
+          return handle
+        },
+      )
+    }
+  }
+
+  configure(pluginManager: PluginManager) {
+    if (isAbstractMenuManager(pluginManager.rootModel)) {
+      pluginManager.rootModel.appendToMenu('Apollo', {
+        label: 'Download GFF3',
+        onClick: (session: ApolloSessionModel) => {
+          ;(session as unknown as AbstractSessionModel).queueDialog(
+            (doneCallback) => [
+              DownloadGFF3,
+              {
+                session,
+                handleClose: () => {
+                  doneCallback()
+                },
+              },
+            ],
+          )
+        },
+      })
+      pluginManager.rootModel.appendToMenu('Apollo', {
+        label: 'Manage Checks',
+        onClick: (session: ApolloSessionModel) => {
+          ;(session as unknown as AbstractSessionModel).queueDialog(
+            (doneCallback) => [
+              ManageChecks,
+              {
+                session,
+                handleClose: () => {
+                  doneCallback()
+                },
+              },
+            ],
+          )
+        },
+      })
+      pluginManager.rootModel.appendToMenu('Apollo', {
+        label: 'View Change Log',
+        onClick: (session: ApolloSessionModel) => {
+          ;(session as unknown as AbstractSessionModel).queueDialog(
+            (doneCallback) => [
+              ViewChangeLog,
+              {
+                session,
+                handleClose: () => {
+                  doneCallback()
+                },
+              },
+            ],
+          )
+        },
+      })
+      pluginManager.rootModel.appendToMenu('Apollo', {
+        label: 'Open local GFF3 file',
+        onClick: (session: ApolloSessionModel) => {
+          ;(session as unknown as AbstractSessionModel).queueDialog(
+            (doneCallback) => [
+              OpenLocalFile,
+              {
+                session,
+                handleClose: () => {
+                  doneCallback()
+                },
+                inMemoryFileDriver: session.apolloDataStore.inMemoryFileDriver,
+              },
+            ],
+          )
+        },
+      })
+      pluginManager.rootModel.appendToMenu('Apollo', {
+        label: 'View check results',
+        onClick: (session: ApolloSessionModel) => {
+          ;(session as unknown as AbstractSessionModel).queueDialog(
+            (doneCallback) => [
+              ViewCheckResults,
+              {
+                session,
+                handleClose: () => {
+                  doneCallback()
+                },
+              },
+            ],
+          )
+        },
+      })
+    }
+  }
+}

package/src/makeDisplayComponent.tsx

@@ -0,0 +1,244 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import type LinearGenomeViewPlugin from '@jbrowse/plugin-linear-genome-view'
+import ExpandLessIcon from '@mui/icons-material/ExpandLess'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { Typography } from '@mui/material'
+import { alpha } from '@mui/material/styles'
+import { observer } from 'mobx-react'
+import React, { useCallback, useEffect, useRef } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { LinearApolloDisplay } from './LinearApolloDisplay/components'
+import { LinearApolloDisplay as LinearApolloDisplayI } from './LinearApolloDisplay/stateModel'
+import { TrackLines } from './SixFrameFeatureDisplay/components'
+import { SixFrameFeatureDisplay } from './SixFrameFeatureDisplay/stateModel'
+import { TabularEditorPane } from './TabularEditor'
+
+const accordionControlHeight = 12
+
+const useStyles = makeStyles()((theme) => ({
+  shading: {
+    background: alpha(theme.palette.primary.main, 0.2),
+    overflowY: 'scroll',
+    overflowX: 'hidden',
+  },
+  details: {
+    background: theme.palette.background.paper,
+  },
+  accordionControl: {
+    height: accordionControlHeight,
+    width: '100%',
+    '&:hover': {
+      background: theme.palette.action.hover,
+    },
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  accordionRoot: {
+    background: theme.palette.divider,
+  },
+  resizeHandle: {
+    width: '100%',
+    height: 4,
+    position: 'absolute',
+    cursor: 'row-resize',
+    zIndex: 100,
+  },
+  expandIcon: {
+    // position: 'relative',
+  },
+  title: {
+    // position: 'relative',
+    userSelect: 'none',
+  },
+}))
+
+function scrollSelectedFeatureIntoView(
+  model: LinearApolloDisplayI,
+  scrollContainerRef: React.RefObject<HTMLDivElement>,
+) {
+  const { apolloRowHeight, selectedFeature } = model
+  if (scrollContainerRef.current && selectedFeature) {
+    const position = model.getFeatureLayoutPosition(selectedFeature)
+    if (position) {
+      const row = position.layoutRow + position.featureRow
+      const top = row * apolloRowHeight
+      scrollContainerRef.current.scroll({ top, behavior: 'smooth' })
+    }
+  }
+}
+
+const ResizeHandle = ({
+  onResize,
+}: {
+  onResize: (sizeDelta: number) => void
+}) => {
+  const { classes } = useStyles()
+  const mouseMove = useCallback(
+    (event: MouseEvent) => {
+      event.stopPropagation()
+      event.preventDefault()
+      onResize(event.movementY)
+    },
+    [onResize],
+  )
+  const cancelDrag: (event: MouseEvent) => void = useCallback(
+    (event: MouseEvent) => {
+      event.stopPropagation()
+      event.preventDefault()
+      window.removeEventListener('mousemove', mouseMove)
+      window.removeEventListener('mouseup', cancelDrag)
+      window.removeEventListener('mouseleave', cancelDrag)
+    },
+    [mouseMove],
+  )
+  return (
+    // TODO: a11y
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    <div
+      onMouseDown={(event: React.MouseEvent) => {
+        event.stopPropagation()
+        window.addEventListener('mousemove', mouseMove)
+        window.addEventListener('mouseup', cancelDrag)
+        window.addEventListener('mouseleave', cancelDrag)
+      }}
+      onClick={(e) => {
+        e.stopPropagation()
+        e.preventDefault()
+      }}
+      className={classes.resizeHandle}
+    />
+  )
+}
+
+const AccordionControl = observer(function AccordionControl({
+  onClick,
+  onResize,
+  open,
+  title,
+}: {
+  open: boolean
+  onClick: (e: React.MouseEvent) => void
+  onResize?: (sizeDelta: number) => void
+  title?: string
+}) {
+  const { classes } = useStyles()
+  return (
+    <div className={classes.accordionRoot}>
+      {open && onResize ? <ResizeHandle onResize={onResize} /> : null}
+      {/* TODO: a11y */}
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+      <div className={classes.accordionControl} onClick={onClick}>
+        {open ? (
+          <ExpandLessIcon className={classes.expandIcon} />
+        ) : (
+          <ExpandMoreIcon className={classes.expandIcon} />
+        )}
+        {title ? (
+          <Typography
+            className={classes.title}
+            variant="caption"
+            component="span"
+          >
+            {title}
+          </Typography>
+        ) : null}
+      </div>
+    </div>
+  )
+})
+
+export const DisplayComponent = observer(function DisplayComponent({
+  model,
+  ...other
+}: {
+  model: LinearApolloDisplayI
+}) {
+  const { classes } = useStyles()
+
+  const {
+    height: overallHeight,
+    isShown,
+    selectedFeature,
+    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}
+      />
+      <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 style={{ height: detailsHeight }}>
+        <TabularEditorPane model={model} />
+      </div>
+    </div>
+  )
+})
+
+export function makeSixFrameDisplayComponent(pluginManager: PluginManager) {
+  const LGVPlugin = pluginManager.getPlugin('LinearGenomeViewPlugin') as
+    | LinearGenomeViewPlugin
+    | undefined
+  if (!LGVPlugin) {
+    throw new Error('LinearGenomeView plugin not found')
+  }
+  const { BaseLinearDisplayComponent } = LGVPlugin.exports
+  function ApolloDisplayComponent({
+    model,
+    ...other
+  }: {
+    model: SixFrameFeatureDisplay
+  }) {
+    const { classes } = useStyles()
+    const { height, selectedFeature } = model
+    let { detailsHeight } = model
+    if (!selectedFeature) {
+      detailsHeight = 0
+    }
+    const featureAreaHeight = height - detailsHeight
+    return (
+      <div style={{ height: model.height }}>
+        <div className={classes.shading} style={{ height: featureAreaHeight }}>
+          <BaseLinearDisplayComponent model={model} {...other} />
+        </div>
+        {/* <div className={classes.details} style={{ height: detailsHeight }}>
+          <ApolloDetails model={model} />
+        </div> */}
+        <div className="testTrackLines">
+          <TrackLines model={model} />
+        </div>
+      </div>
+    )
+  }
+  return observer(ApolloDisplayComponent)
+}