@apollo-annotation/jbrowse-plugin-apollo 0.3.6 → 0.3.8

package/src/LinearApolloSixFrameDisplay/stateModel/rendering.ts

@@ -2,15 +2,15 @@
 import type PluginManager from '@jbrowse/core/PluginManager'
 import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
 import { doesIntersect2 } from '@jbrowse/core/util'
-import { type Theme } from '@mui/material'
+import { type Theme, createTheme } from '@mui/material'
 import { autorun } from 'mobx'
-import { type Instance, addDisposer } from 'mobx-state-tree'
+import { type Instance, addDisposer, types } from 'mobx-state-tree'
 
 import { type ApolloSessionModel } from '../../session'
 
 import { layoutsModelFactory } from './layouts'
 
-export function renderingModelIntermediateFactory(
+export function renderingModelFactory(
   pluginManager: PluginManager,
   configSchema: AnyConfigurationSchemaType,
 ) {
@@ -23,23 +23,24 @@ export function renderingModelIntermediateFactory(
     'LinearApolloSixFrameDisplayRendering',
   )
     .props({
-      sequenceRowHeight: 15,
       apolloRowHeight: 20,
       detailsMinHeight: 200,
       detailsHeight: 200,
-      lastRowTooltipBufferHeight: 80,
+      lastRowTooltipBufferHeight: 120,
       isShown: true,
+      filteredTranscripts: types.array(types.string),
     })
     .volatile(() => ({
       canvas: null as HTMLCanvasElement | null,
       overlayCanvas: null as HTMLCanvasElement | null,
       collaboratorCanvas: null as HTMLCanvasElement | null,
-      theme: undefined as Theme | undefined,
+      theme: createTheme(),
     }))
     .views((self) => ({
       get featuresHeight() {
+        const featureLabelSpacer = self.showFeatureLabels ? 2 : 1
         return (
-          (self.highestRow + 1) * self.apolloRowHeight +
+          featureLabelSpacer * ((self.highestRow + 1) * self.apolloRowHeight) +
           self.lastRowTooltipBufferHeight
         )
       },
@@ -68,6 +69,8 @@ export function renderingModelIntermediateFactory(
       setTheme(theme: Theme) {
         self.theme = theme
       },
+    }))
+    .actions((self) => ({
       afterAttach() {
         addDisposer(
           self,
@@ -128,69 +131,56 @@ export function renderingModelIntermediateFactory(
             { name: 'LinearApolloSixFrameDisplayRenderCollaborators' },
           ),
         )
-      },
-    }))
-}
-
-export function renderingModelFactory(
-  pluginManager: PluginManager,
-  configSchema: AnyConfigurationSchemaType,
-) {
-  const LinearApolloSixFrameDisplayRendering =
-    renderingModelIntermediateFactory(pluginManager, configSchema)
-
-  return LinearApolloSixFrameDisplayRendering.actions((self) => ({
-    afterAttach() {
-      addDisposer(
-        self,
-        autorun(
-          () => {
-            const { canvas, featureLayouts, featuresHeight, lgv } = self
-            if (!lgv.initialized || self.regionCannotBeRendered()) {
-              return
-            }
-            const { displayedRegions, dynamicBlocks } = lgv
+        addDisposer(
+          self,
+          autorun(
+            () => {
+              const { canvas, featureLayouts, featuresHeight, lgv } = self
+              if (!lgv.initialized || self.regionCannotBeRendered()) {
+                return
+              }
+              const { displayedRegions, dynamicBlocks } = lgv
 
-            const ctx = canvas?.getContext('2d')
-            if (!ctx) {
-              return
-            }
-            ctx.clearRect(0, 0, dynamicBlocks.totalWidthPx, featuresHeight)
-            for (const [idx, featureLayout] of featureLayouts.entries()) {
-              const displayedRegion = displayedRegions[idx]
-              for (const [row, featureLayoutRow] of featureLayout.entries()) {
-                for (const { feature } of featureLayoutRow) {
-                  if (!feature.looksLikeGene) {
-                    continue
-                  }
-                  if (
-                    !doesIntersect2(
-                      displayedRegion.start,
-                      displayedRegion.end,
-                      feature.min,
-                      feature.max,
-                    )
-                  ) {
-                    continue
-                  }
-                  const { topLevelFeature } = feature
-                  const glyph = self.getGlyph(topLevelFeature)
-                  if (glyph !== undefined) {
-                    glyph.draw(ctx, topLevelFeature, row, self, idx)
+              const ctx = canvas?.getContext('2d')
+              if (!ctx) {
+                return
+              }
+              ctx.clearRect(0, 0, dynamicBlocks.totalWidthPx, featuresHeight)
+              for (const [idx, featureLayout] of featureLayouts.entries()) {
+                const displayedRegion = displayedRegions[idx]
+                for (const [row, featureLayoutRow] of featureLayout.entries()) {
+                  for (const { feature } of featureLayoutRow) {
+                    if (!feature.looksLikeGene) {
+                      continue
+                    }
+                    if (
+                      !doesIntersect2(
+                        displayedRegion.start,
+                        displayedRegion.end,
+                        feature.min,
+                        feature.max,
+                      )
+                    ) {
+                      continue
+                    }
+                    const { topLevelFeature } = feature
+                    const glyph = self.getGlyph(topLevelFeature)
+                    if (glyph !== undefined) {
+                      glyph.draw(ctx, topLevelFeature, row, self, idx)
+                    }
                   }
                 }
               }
-            }
-          },
-          { name: 'LinearApolloSixFrameDisplayRenderFeatures' },
-        ),
-      )
-    },
-  }))
+            },
+            { name: 'LinearApolloSixFrameDisplayRenderFeatures' },
+          ),
+        )
+      },
+    }))
 }
 
 export type LinearApolloSixFrameDisplayRenderingModel = ReturnType<
-  typeof renderingModelIntermediateFactory
+  typeof renderingModelFactory
 >
 // eslint disable because of
 // https://mobx-state-tree.js.org/tips/typescript#using-a-mst-type-at-design-time

package/src/OntologyManager/index.ts

@@ -15,6 +15,7 @@ import {
   flow,
   getRoot,
   getSnapshot,
+  isAlive,
   types,
 } from 'mobx-state-tree'
 
@@ -79,7 +80,9 @@ export const OntologyRecordType = types
       const equivalents: string[] = terms
         .map((term) => term.lbl)
         .filter((term) => term != undefined)
-      self.setEquivalentTypes(type, equivalents)
+      if (isAlive(self)) {
+        self.setEquivalentTypes(type, equivalents)
+      }
     }),
   }))
   .actions((self) => ({

package/src/TabularEditor/HybridGrid/Feature.tsx

@@ -10,6 +10,7 @@ import { makeStyles } from 'tss-react/mui'
 import { isOntologyClass } from '../../OntologyManager'
 import type OntologyStore from '../../OntologyManager/OntologyStore'
 import { OntologyTermAutocomplete } from '../../components/OntologyTermAutocomplete'
+import { navToFeatureCenter } from '../../util'
 import { type DisplayStateModel } from '../types'
 
 import {
@@ -68,6 +69,8 @@ function makeContextMenuItems(
     selectedFeature,
     session,
     setSelectedFeature,
+    filteredTranscripts,
+    updateFilteredTranscripts,
   } = display
   return featureContextMenuItems(
     feature,
@@ -77,15 +80,18 @@ function makeContextMenuItems(
     setSelectedFeature,
     session,
     changeManager,
+    filteredTranscripts,
+    updateFilteredTranscripts,
   )
 }
 
-function getTopLevelFeature(feature: AnnotationFeature): AnnotationFeature {
-  let cur = feature
-  while (cur.parent) {
-    cur = cur.parent
-  }
-  return cur
+function navigateHere(
+  displayState: DisplayStateModel,
+  feature: AnnotationFeature,
+) {
+  displayState.lgv.navTo(
+    navToFeatureCenter(feature, 0.1, displayState.lgv.totalBp),
+  )
 }
 
 export const Feature = observer(function Feature({
@@ -107,8 +113,8 @@ export const Feature = observer(function Feature({
 }) {
   const { classes } = useStyles()
   const {
-    apolloHover,
     changeManager,
+    hoveredFeature,
     selectedFeature,
     session,
     tabularEditor: tabularEditorState,
@@ -130,12 +136,7 @@ export const Feature = observer(function Feature({
     <>
       <tr
         onMouseEnter={(_e) => {
-          displayState.setApolloHover({
-            feature,
-            topLevelFeature: getTopLevelFeature(feature),
-            // @ts-expect-error TODO fix in future when moving hover logic to session.
-            glyph: displayState.getGlyph(getTopLevelFeature(feature)),
-          })
+          displayState.setHoveredFeature({ feature, bp: min })
         }}
         className={
           classes.feature +
@@ -149,6 +150,10 @@ export const Feature = observer(function Feature({
           e.stopPropagation()
           displayState.setSelectedFeature(feature)
         }}
+        onDoubleClick={() => {
+          displayState.setSelectedFeature(feature)
+          navigateHere(displayState, feature)
+        }}
         onContextMenu={(e) => {
           e.preventDefault()
           setContextMenu({
@@ -254,7 +259,8 @@ export const Feature = observer(function Feature({
               return text.includes(filterText)
             })
             .map(([featureId, childFeature]) => {
-              const childHovered = apolloHover?.feature._id === childFeature._id
+              const childHovered =
+                hoveredFeature?.feature._id === childFeature._id
               const childSelected = selectedFeature?._id === childFeature._id
               return (
                 <Feature

package/src/TabularEditor/HybridGrid/HybridGrid.tsx

@@ -37,7 +37,7 @@ const HybridGrid = observer(function HybridGrid({
 }: {
   model: DisplayStateModel
 }) {
-  const { apolloHover, seenFeatures, selectedFeature, tabularEditor } = model
+  const { hoveredFeature, seenFeatures, selectedFeature, tabularEditor } = model
   const theme = useTheme()
   const { classes } = useStyles()
   const scrollContainerRef = useRef<HTMLDivElement>(null)
@@ -96,7 +96,7 @@ const HybridGrid = observer(function HybridGrid({
             })
             .map(([featureId, feature]) => {
               const isSelected = selectedFeature?._id === featureId
-              const isHovered = apolloHover?.feature._id === featureId
+              const isHovered = hoveredFeature?.feature._id === featureId
               return (
                 <Feature
                   key={featureId}
@@ -121,9 +121,11 @@ const HybridGrid = observer(function HybridGrid({
         onClose={() => {
           setContextMenu(null)
         }}
-        TransitionProps={{
-          onExit: () => {
-            setContextMenu(null)
+        slotProps={{
+          transition: {
+            onExit: () => {
+              setContextMenu(null)
+            },
           },
         }}
         style={{ zIndex: theme.zIndex.tooltip }}

package/src/TabularEditor/HybridGrid/featureContextMenuItems.ts

@@ -7,7 +7,14 @@ import {
 } from '@jbrowse/core/util'
 
 import { type ChangeManager } from '../../ChangeManager'
-import { AddChildFeature, CopyFeature, DeleteFeature } from '../../components'
+import {
+  AddChildFeature,
+  CopyFeature,
+  DeleteFeature,
+  MergeExons,
+  MergeTranscripts,
+  SplitExon,
+} from '../../components'
 import { type ApolloSessionModel } from '../../session'
 import { getApolloInternetAccount } from '../../util'
 
@@ -19,6 +26,8 @@ export function featureContextMenuItems(
   setSelectedFeature: (f: AnnotationFeature | undefined) => void,
   session: ApolloSessionModel,
   changeManager: ChangeManager,
+  filteredTranscripts: string[],
+  updateFilteredTranscripts: (forms: string[]) => void,
 ) {
   const internetAccount = getApolloInternetAccount(session)
   const role = internetAccount ? internetAccount.role : 'admin'
@@ -26,6 +35,7 @@ export function featureContextMenuItems(
   const readOnly = !(role && ['admin', 'user'].includes(role))
   const menuItems: MenuItem[] = []
   if (feature) {
+    const featureID = feature.attributes.get('gff_id')?.toString()
     const sourceAssemblyId = getAssemblyId(region.assemblyName)
     const currentAssemblyId = getAssemblyId(region.assemblyName)
     menuItems.push(
@@ -111,6 +121,72 @@ export function featureContextMenuItems(
           )
         },
       },
+      {
+        label: 'Merge transcripts',
+        disabled: !admin,
+        onClick: () => {
+          ;(session as unknown as AbstractSessionModel).queueDialog(
+            (doneCallback) => [
+              MergeTranscripts,
+              {
+                session,
+                handleClose: () => {
+                  doneCallback()
+                },
+                changeManager,
+                sourceFeature: feature,
+                sourceAssemblyId: currentAssemblyId,
+                selectedFeature,
+                setSelectedFeature,
+              },
+            ],
+          )
+        },
+      },
+      {
+        label: 'Merge exons',
+        disabled: !admin,
+        onClick: () => {
+          ;(session as unknown as AbstractSessionModel).queueDialog(
+            (doneCallback) => [
+              MergeExons,
+              {
+                session,
+                handleClose: () => {
+                  doneCallback()
+                },
+                changeManager,
+                sourceFeature: feature,
+                sourceAssemblyId: currentAssemblyId,
+                selectedFeature,
+                setSelectedFeature,
+              },
+            ],
+          )
+        },
+      },
+      {
+        label: 'Split exon',
+        disabled: !admin,
+        onClick: () => {
+          ;(session as unknown as AbstractSessionModel).queueDialog(
+            (doneCallback) => [
+              SplitExon,
+              {
+                session,
+                handleClose: () => {
+                  doneCallback()
+                },
+                changeManager,
+                sourceFeature: feature,
+                sourceAssemblyId: currentAssemblyId,
+                selectedFeature,
+                setSelectedFeature,
+              },
+            ],
+          )
+        },
+      },
     )
     const { featureTypeOntology } = session.apolloDataStore.ontologyManager
     if (!featureTypeOntology) {
@@ -121,22 +197,38 @@ export function featureContextMenuItems(
         featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')) &&
       isSessionModelWithWidgets(session)
     ) {
-      menuItems.push({
-        label: 'Edit transcript details',
-        onClick: () => {
-          const apolloTranscriptWidget = session.addWidget(
-            'ApolloTranscriptDetails',
-            'apolloTranscriptDetails',
-            {
-              feature,
-              assembly: currentAssemblyId,
-              changeManager,
-              refName: region.refName,
-            },
-          )
-          session.showWidget(apolloTranscriptWidget)
+      menuItems.push(
+        {
+          label: 'Edit transcript details',
+          onClick: () => {
+            const apolloTranscriptWidget = session.addWidget(
+              'ApolloTranscriptDetails',
+              'apolloTranscriptDetails',
+              {
+                feature,
+                assembly: currentAssemblyId,
+                changeManager,
+                refName: region.refName,
+              },
+            )
+            session.showWidget(apolloTranscriptWidget)
+          },
+        },
+        {
+          label: 'Visible',
+          type: 'checkbox',
+          checked:
+            featureID && filteredTranscripts.includes(featureID) ? false : true,
+          onClick: () => {
+            if (featureID) {
+              const newForms = filteredTranscripts.includes(featureID)
+                ? filteredTranscripts.filter((form) => form !== featureID)
+                : [...filteredTranscripts, featureID]
+              updateFilteredTranscripts(newForms)
+            }
+          },
         },
-      })
+      )
     }
   }
   return menuItems

package/src/components/AddAssembly.tsx

@@ -80,7 +80,7 @@ const useStyles = makeStyles()((theme) => ({
     borderTop: '1px solid rgba(0, 0, 0, .125)',
   },
   radioIcon: {
-    color: theme?.palette?.tertiary?.contrastText,
+    color: theme.palette.tertiary.contrastText,
   },
   dialog: {
     // minHeight: 500,

package/src/components/AddAssemblyAliases.tsx

@@ -0,0 +1,114 @@
+import { AddAssemblyAliasesChange } from '@apollo-annotation/shared'
+import { Box, DialogContent, DialogContentText } from '@mui/material'
+import { DataGrid, type GridColDef, type GridRowModel } from '@mui/x-data-grid'
+import React from 'react'
+
+import {
+  type ApolloInternetAccount,
+  type CollaborationServerDriver,
+} from '../BackendDrivers'
+import { type ChangeManager } from '../ChangeManager'
+import { type ApolloSessionModel } from '../session'
+
+import { Dialog } from './Dialog'
+
+interface AddAssemblyAliasProps {
+  session: ApolloSessionModel
+  handleClose: () => void
+  changeManager: ChangeManager
+}
+
+const columns: GridColDef[] = [
+  {
+    field: 'name',
+    headerName: 'Assembly Name',
+    width: 150,
+    editable: false,
+  },
+  {
+    field: 'aliases',
+    headerName: 'Aliases',
+    width: 300,
+    editable: true,
+  },
+]
+
+interface AssemblyAlias {
+  id: string
+  name: string
+  aliases: string
+}
+
+export function AddAssemblyAliases({
+  changeManager,
+  handleClose,
+  session,
+}: AddAssemblyAliasProps) {
+  const { apolloDataStore } = session
+  const { collaborationServerDriver } = apolloDataStore as {
+    collaborationServerDriver: CollaborationServerDriver
+    getInternetAccount(
+      assemblyName?: string,
+      internetAccountId?: string,
+    ): ApolloInternetAccount
+  }
+  const assemblies = collaborationServerDriver.getAssemblies()
+
+  const rows: AssemblyAlias[] = assemblies.map((assembly) => {
+    return {
+      id: assembly.name,
+      name: assembly.displayName,
+      aliases: assembly.aliases.join(', '),
+    } as AssemblyAlias
+  })
+
+  const [errorMessage, setErrorMessage] = React.useState('')
+
+  const processRowUpdate = (newRow: GridRowModel, _oldRow: GridRowModel) => {
+    const change = new AddAssemblyAliasesChange({
+      typeName: 'AddAssemblyAliasesChange',
+      assembly: newRow.id as string,
+      aliases: (newRow.aliases as string).split(','),
+    })
+    void changeManager.submit(change).catch(() => {
+      setErrorMessage('Error submitting change')
+    })
+    handleClose()
+    return newRow
+  }
+
+  return (
+    <Dialog
+      open
+      title="Add assembly aliases"
+      handleClose={handleClose}
+      maxWidth={'sm'}
+      data-testid="add-assembly-alias"
+      fullWidth
+    >
+      <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
+        <Box sx={{ height: 400, width: '100%' }}>
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            initialState={{
+              pagination: {
+                paginationModel: {
+                  pageSize: 5,
+                },
+              },
+            }}
+            pageSizeOptions={[5]}
+            processRowUpdate={processRowUpdate}
+            disableRowSelectionOnClick
+          />
+        </Box>
+      </DialogContent>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}

package/src/components/AddChildFeature.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-/* eslint-disable @typescript-eslint/no-misused-promises */
+
 import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { AddFeatureChange } from '@apollo-annotation/shared'
-import { type AbstractSessionModel } from '@jbrowse/core/util'
 import {
   Button,
   DialogActions,
@@ -37,7 +36,6 @@ export function AddChildFeature({
   sourceAssemblyId,
   sourceFeature,
 }: AddChildFeatureProps) {
-  const { notify } = session as unknown as AbstractSessionModel
   const [end, setEnd] = useState(String(sourceFeature.max))
   const [start, setStart] = useState(String(sourceFeature.min + 1))
   const [type, setType] = useState('')
@@ -63,15 +61,16 @@ export function AddChildFeature({
     return terms
   }
 
-  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault()
     setErrorMessage('')
+    const _id = new ObjectID().toHexString()
     const change = new AddFeatureChange({
       changedIds: [sourceFeature._id],
       typeName: 'AddFeatureChange',
       assembly: sourceAssemblyId,
       addedFeature: {
-        _id: new ObjectID().toHexString(),
+        _id,
         refSeq: sourceFeature.refSeq,
         min: Number(start) - 1,
         max: Number(end),
@@ -79,8 +78,9 @@ export function AddChildFeature({
       },
       parentFeatureId: sourceFeature._id,
     })
-    await changeManager.submit(change)
-    notify('Feature added successfully', 'success')
+    void changeManager.submit(change).then(() => {
+      session.apolloSetSelectedFeature(_id)
+    })
     handleClose()
     event.preventDefault()
   }