@apollo-annotation/jbrowse-plugin-apollo 0.1.0

package/src/BackendDrivers/index.ts

@@ -0,0 +1,4 @@
+export * from './BackendDriver'
+export * from './CollaborationServerDriver'
+export * from './InMemoryFileDriver'
+export * from './DesktopFileDriver'

package/src/ChangeManager.ts

@@ -0,0 +1,148 @@
+import { getSession } from '@jbrowse/core/util'
+import {
+  Change,
+  ClientDataStore,
+  isAssemblySpecificChange,
+} from 'apollo-common'
+import { ValidationResultSet, validationRegistry } from 'apollo-shared'
+import { IAnyStateTreeNode } from 'mobx-state-tree'
+
+import { ApolloSessionModel } from './session'
+
+export interface SubmitOpts {
+  /** defaults to true */
+  submitToBackend?: boolean
+  /** defaults to true */
+  addToRecents?: boolean
+  /** defaults to undefined */
+  internetAccountId?: string
+  /** defaults to false */
+  updateJobsManager?: boolean
+}
+
+export class ChangeManager {
+  constructor(private dataStore: ClientDataStore & IAnyStateTreeNode) {}
+
+  recentChanges: Change[] = []
+
+  async submit(change: Change, opts: SubmitOpts = {}) {
+    const {
+      addToRecents = true,
+      submitToBackend = true,
+      updateJobsManager = false,
+    } = opts
+    // pre-validate
+    const session = getSession(this.dataStore)
+    const controller = new AbortController()
+
+    const { jobsManager } = getSession(
+      this.dataStore,
+    ) as unknown as ApolloSessionModel
+
+    const job = {
+      name: `${change.typeName}`,
+      statusMessage: 'Pre-validating',
+      progressPct: 0,
+      cancelCallback: () => {
+        controller.abort()
+      },
+    }
+
+    if (updateJobsManager) {
+      jobsManager.runJob(job)
+    }
+
+    const result = await validationRegistry.frontendPreValidate(change)
+    if (!result.ok) {
+      const msg = `Pre-validation failed: "${result.resultsMessages}"`
+      if (updateJobsManager) {
+        jobsManager.abortJob(job.name, msg)
+      }
+      session.notify(msg, 'error')
+      return
+    }
+
+    try {
+      // submit to client data store
+      await change.execute(this.dataStore)
+    } catch (error) {
+      if (updateJobsManager) {
+        jobsManager.abortJob(job.name, String(error))
+      }
+      console.error(error)
+      session.notify(String(error), 'error')
+      return
+    }
+
+    // post-validate
+    const results2 = await validationRegistry.frontendPostValidate(
+      change,
+      this.dataStore,
+    )
+    if (!results2.ok) {
+      // notify of invalid change and revert
+      await this.revert(change)
+    }
+
+    if (submitToBackend) {
+      if (updateJobsManager) {
+        jobsManager.update(job.name, 'Submitting to driver')
+      }
+      // submit to driver
+      const { collaborationServerDriver, getBackendDriver } = this.dataStore
+      const backendDriver = isAssemblySpecificChange(change)
+        ? getBackendDriver(change.assembly)
+        : collaborationServerDriver
+      let backendResult: ValidationResultSet
+      try {
+        backendResult = await backendDriver.submitChange(change, opts)
+      } catch (error) {
+        if (updateJobsManager) {
+          jobsManager.abortJob(job.name, String(error))
+        }
+        console.error(error)
+        session.notify(String(error), 'error')
+        await this.revert(change, false)
+        return
+      }
+      if (!backendResult.ok) {
+        const msg = `Post-validation failed: "${result.resultsMessages}"`
+        if (updateJobsManager) {
+          jobsManager.abortJob(job.name, msg)
+        }
+        session.notify(msg, 'error')
+        await this.revert(change, false)
+        return
+      }
+      if (change.notification) {
+        session.notify(change.notification, 'success')
+      }
+    }
+    if (addToRecents) {
+      // Push the change into array
+      this.recentChanges.push(change)
+    }
+
+    if (updateJobsManager) {
+      jobsManager.done(job)
+    }
+  }
+
+  async revert(change: Change, submitToBackend = true) {
+    const inverseChange = change.getInverse()
+    return this.submit(inverseChange, { submitToBackend, addToRecents: false })
+  }
+
+  /**
+   * Undo the last change
+   */
+  async revertLastChange() {
+    const lastChange = this.recentChanges.pop()
+    if (!lastChange) {
+      const session = getSession(this.dataStore)
+      session.notify('No changes to undo!', 'warning')
+      return
+    }
+    return this.revert(lastChange)
+  }
+}

package/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx

@@ -0,0 +1,248 @@
+import { Menu, MenuItem } from '@jbrowse/core/ui'
+import {
+  AbstractSessionModel,
+  doesIntersect2,
+  getContainingView,
+} from '@jbrowse/core/util'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import ErrorIcon from '@mui/icons-material/Error'
+import { Alert, Avatar, Tooltip, useTheme } from '@mui/material'
+import { observer } from 'mobx-react'
+import React, { useEffect, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { LinearApolloDisplay as LinearApolloDisplayI } from '../stateModel'
+
+interface LinearApolloDisplayProps {
+  model: LinearApolloDisplayI
+}
+export type Coord = [number, number]
+
+const useStyles = makeStyles()((theme) => ({
+  canvasContainer: {
+    position: 'relative',
+    left: 0,
+  },
+  canvas: {
+    position: 'absolute',
+    left: 0,
+  },
+  ellipses: {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  },
+  avatar: {
+    position: 'absolute',
+    color: theme.palette.warning.light,
+    backgroundColor: theme.palette.warning.contrastText,
+  },
+}))
+
+export const LinearApolloDisplay = observer(function LinearApolloDisplay(
+  props: LinearApolloDisplayProps,
+) {
+  const theme = useTheme()
+  const { model } = props
+  const {
+    apolloRowHeight,
+    contextMenuItems: getContextMenuItems,
+    cursor,
+    featuresHeight,
+    isShown,
+    onMouseDown,
+    onMouseLeave,
+    onMouseMove,
+    onMouseUp,
+    regionCannotBeRendered,
+    session,
+    setCanvas,
+    setCollaboratorCanvas,
+    setOverlayCanvas,
+    setSeqTrackCanvas,
+    setSeqTrackOverlayCanvas,
+    setTheme,
+    tabularEditor,
+  } = model
+  const { classes } = useStyles()
+  const lgv = getContainingView(model) as unknown as LinearGenomeViewModel
+
+  useEffect(() => setTheme(theme), [theme, setTheme])
+  const [contextCoord, setContextCoord] = useState<Coord>()
+  const [contextMenuItems, setContextMenuItems] = useState<MenuItem[]>([])
+  const message = regionCannotBeRendered()
+  if (!isShown) {
+    return null
+  }
+  const { assemblyManager } = session as unknown as AbstractSessionModel
+  return (
+    <>
+      {lgv.bpPerPx <= 3 ? (
+        <div
+          className={classes.canvasContainer}
+          style={{
+            width: lgv.dynamicBlocks.totalWidthPx,
+            height: lgv.bpPerPx <= 1 ? 125 : 95,
+          }}
+        >
+          <canvas
+            ref={async (node: HTMLCanvasElement) => {
+              await Promise.resolve()
+              setSeqTrackCanvas(node)
+            }}
+            width={lgv.dynamicBlocks.totalWidthPx}
+            height={lgv.bpPerPx <= 1 ? 125 : 95}
+            className={classes.canvas}
+            data-testid="seqTrackCanvas"
+          />
+          <canvas
+            ref={async (node: HTMLCanvasElement) => {
+              await Promise.resolve()
+              setSeqTrackOverlayCanvas(node)
+            }}
+            width={lgv.dynamicBlocks.totalWidthPx}
+            height={lgv.bpPerPx <= 1 ? 125 : 95}
+            className={classes.canvas}
+            data-testid="seqTrackOverlayCanvas"
+          />
+        </div>
+      ) : null}
+      <div
+        className={classes.canvasContainer}
+        style={{
+          width: lgv.dynamicBlocks.totalWidthPx,
+          height: featuresHeight,
+        }}
+        onContextMenu={(event) => {
+          event.preventDefault()
+          if (contextMenuItems.length > 0) {
+            // There's already a context menu open, so close it
+            setContextMenuItems([])
+          } else {
+            const coord: [number, number] = [event.clientX, event.clientY]
+            setContextCoord(coord)
+            setContextMenuItems(getContextMenuItems(coord))
+          }
+        }}
+      >
+        {message ? (
+          <Alert severity="warning" classes={{ message: classes.ellipses }}>
+            <Tooltip title={message}>
+              <div>{message}</div>
+            </Tooltip>
+          </Alert>
+        ) : (
+          // Promise.resolve() in these 3 callbacks is to avoid infinite rendering loop
+          // https://github.com/mobxjs/mobx/issues/3728#issuecomment-1715400931
+          <>
+            <canvas
+              ref={async (node: HTMLCanvasElement) => {
+                await Promise.resolve()
+                setCollaboratorCanvas(node)
+              }}
+              width={lgv.dynamicBlocks.totalWidthPx}
+              height={featuresHeight}
+              className={classes.canvas}
+              data-testid="collaboratorCanvas"
+            />
+            <canvas
+              ref={async (node: HTMLCanvasElement) => {
+                await Promise.resolve()
+                setCanvas(node)
+              }}
+              width={lgv.dynamicBlocks.totalWidthPx}
+              height={featuresHeight}
+              className={classes.canvas}
+              data-testid="canvas"
+            />
+            <canvas
+              ref={async (node: HTMLCanvasElement) => {
+                await Promise.resolve()
+                setOverlayCanvas(node)
+              }}
+              width={lgv.dynamicBlocks.totalWidthPx}
+              height={featuresHeight}
+              onMouseMove={onMouseMove}
+              onMouseLeave={onMouseLeave}
+              onMouseDown={onMouseDown}
+              onMouseUp={onMouseUp}
+              onClick={() => {
+                tabularEditor.showPane()
+              }}
+              className={classes.canvas}
+              style={{ cursor: cursor ?? 'default' }}
+              data-testid="overlayCanvas"
+            />
+            {lgv.displayedRegions.flatMap((region, idx) => {
+              const assembly = assemblyManager.get(region.assemblyName)
+              return [...session.apolloDataStore.checkResults.values()]
+                .filter(
+                  (checkResult) =>
+                    assembly?.isValidRefName(checkResult.refSeq) &&
+                    assembly?.getCanonicalRefName(checkResult.refSeq) ===
+                      region.refName &&
+                    doesIntersect2(
+                      region.start,
+                      region.end,
+                      checkResult.start,
+                      checkResult.end,
+                    ),
+                )
+                .map((checkResult) => {
+                  const left =
+                    (lgv.bpToPx({
+                      refName: region.refName,
+                      coord: checkResult.start,
+                      regionNumber: idx,
+                    })?.offsetPx ?? 0) - lgv.offsetPx
+                  const [feature] = checkResult.ids
+                  if (!feature) {
+                    return null
+                  }
+                  const { topLevelFeature } = feature
+                  const row = parent
+                    ? model.getFeatureLayoutPosition(topLevelFeature)
+                        ?.layoutRow ?? 0
+                    : 0
+                  const top = row * apolloRowHeight
+                  const height = apolloRowHeight
+                  return (
+                    <Tooltip key={checkResult._id} title={checkResult.message}>
+                      <Avatar
+                        className={classes.avatar}
+                        style={{ top, left, height, width: height }}
+                      >
+                        <ErrorIcon />
+                      </Avatar>
+                    </Tooltip>
+                  )
+                })
+            })}
+            <Menu
+              open={contextMenuItems.length > 0}
+              onMenuItemClick={(_, callback) => {
+                callback()
+                setContextMenuItems([])
+              }}
+              onClose={() => {
+                setContextMenuItems([])
+              }}
+              TransitionProps={{
+                onExit: () => {
+                  setContextMenuItems([])
+                },
+              }}
+              anchorReference="anchorPosition"
+              anchorPosition={
+                contextCoord
+                  ? { top: contextCoord[1], left: contextCoord[0] }
+                  : undefined
+              }
+              style={{ zIndex: theme.zIndex.tooltip }}
+              menuItems={contextMenuItems}
+            />
+          </>
+        )}
+      </div>
+    </>
+  )
+})

package/src/LinearApolloDisplay/components/index.ts

@@ -0,0 +1 @@
+export * from './LinearApolloDisplay'

package/src/LinearApolloDisplay/configSchema.ts

@@ -0,0 +1,16 @@
+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 },
+  )
+}