Merge branch 'main' into cypress

GMOD · Sep 21, 2023 · d3da898 · d3da898
2 parents 407e6fe + 7a9af0f
commit d3da898
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 7 deletions.
diff --git a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/configSchema.ts b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/configSchema.ts
@@ -10,7 +10,7 @@ export function configSchemaFactory(pluginManager: PluginManager) {
 
   return ConfigurationSchema(
     'LinearApolloDisplay',
-    {},
+    { height: { type: 'number', defaultValue: 500 } },
     { baseConfiguration: baseLinearDisplayConfigSchema, explicitlyTyped: true },
   )
 }
diff --git a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/glyphs/Glyph.ts b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/glyphs/Glyph.ts
@@ -1,4 +1,5 @@
 import { MenuItem } from '@jbrowse/core/ui'
+import { alpha } from '@mui/material'
 import { AnnotationFeatureI } from 'apollo-mst'
 
 import {
@@ -99,6 +100,98 @@ export abstract class Glyph {
     return
   }
 
+  drawTooltip(
+    display: LinearApolloDisplayMouseEvents,
+    context: CanvasRenderingContext2D,
+  ): void {
+    const { apolloHover, apolloRowHeight, displayedRegions, lgv, theme } =
+      display
+    if (!apolloHover) {
+      return
+    }
+    const { feature, mousePosition } = apolloHover
+    if (!(feature && mousePosition)) {
+      return
+    }
+    const { regionNumber, y } = mousePosition
+    const displayedRegion = displayedRegions[regionNumber]
+    const { refName, reversed } = displayedRegion
+    const { bpPerPx, bpToPx, offsetPx } = lgv
+
+    const { discontinuousLocations } = feature
+    let start: number, end: number, length: number
+    let location = 'Loc: '
+    if (discontinuousLocations && discontinuousLocations.length > 0) {
+      const lastLoc = discontinuousLocations.at(-1)
+      if (!lastLoc) {
+        return
+      }
+      start = lastLoc?.start
+      end = lastLoc?.end
+      length = lastLoc?.end - lastLoc?.start
+
+      if (discontinuousLocations.length <= 2) {
+        for (const [i, loc] of discontinuousLocations.entries()) {
+          location += `${loc.start.toString()}-${loc.end.toString()}`
+          if (i !== discontinuousLocations.length - 1) {
+            location += ','
+          }
+        }
+      } else {
+        location += `${feature.start}-${feature.end},..,${start}-${end}`
+      }
+    } else {
+      ;({ end, length, start } = feature)
+      location += `${start.toString()}-${end.toString()}`
+    }
+
+    let startPx =
+      (bpToPx({ refName, coord: reversed ? end : start, regionNumber })
+        ?.offsetPx ?? 0) - offsetPx
+    const row = Math.floor(y / apolloRowHeight)
+    const top = row * apolloRowHeight
+    const widthPx = length / bpPerPx
+
+    const featureType = `Type: ${feature.type}`
+    const { attributes } = feature
+    const featureName = attributes.get('gff_name')?.find((name) => name !== '')
+    const textWidth = [
+      context.measureText(featureType).width,
+      context.measureText(location).width,
+    ]
+    if (featureName) {
+      textWidth.push(context.measureText(`Name: ${featureName}`).width)
+    }
+    const maxWidth = Math.max(...textWidth)
+
+    startPx = startPx + widthPx + 5
+    context.fillStyle = alpha(
+      theme?.palette.text.primary ?? 'rgb(1, 1, 1)',
+      0.7,
+    )
+    context.fillRect(
+      startPx,
+      top,
+      maxWidth + 4,
+      textWidth.length === 3 ? 45 : 35,
+    )
+    context.beginPath()
+    context.moveTo(startPx, top)
+    context.lineTo(startPx - 5, top + 5)
+    context.lineTo(startPx, top + 10)
+    context.fill()
+    context.fillStyle =
+      theme?.palette.background.default ?? 'rgba(255, 255, 255)'
+    let textTop = top + 12
+    context.fillText(featureType, startPx + 2, textTop)
+    if (featureName) {
+      textTop = textTop + 12
+      context.fillText(`Name: ${featureName}`, startPx + 2, textTop)
+    }
+    textTop = textTop + 12
+    context.fillText(location, startPx + 2, textTop)
+  }
+
   getContextMenuItems(display: LinearApolloDisplayMouseEvents): MenuItem[] {
     const {
       apolloHover,

diff --git a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/mouseEvents.ts b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/mouseEvents.ts
@@ -313,6 +313,9 @@ export function mouseEventsModelFactory(
               // draw mouseover hovers
               glyph?.drawHover(self, ctx, rowNum, xOffset, reversed)
 
+              // draw tooltip on hover
+              glyph?.drawTooltip(self, ctx)
+
               // dragging previews
               if (apolloDragging) {
                 // NOTE: the glyph where the drag started is responsible for drawing the preview.

diff --git a/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/rendering.ts b/packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/rendering.ts
@@ -23,6 +23,7 @@ export function renderingModelIntermediateFactory(
       apolloRowHeight: 20,
       detailsMinHeight: 200,
       detailsHeight: 200,
+      lastRowTooltipBufferHeight: 40,
       isShown: true,
     })
     .volatile(() => ({
@@ -33,7 +34,10 @@ export function renderingModelIntermediateFactory(
     }))
     .views((self) => ({
       get featuresHeight() {
-        return (self.highestRow + 1) * self.apolloRowHeight
+        return (
+          (self.highestRow + 1) * self.apolloRowHeight +
+          self.lastRowTooltipBufferHeight
+        )
       },
     }))
     .actions((self) => ({

diff --git a/packages/jbrowse-plugin-apollo/src/components/DownloadGFF3.tsx b/packages/jbrowse-plugin-apollo/src/components/DownloadGFF3.tsx
@@ -180,7 +180,10 @@ export function DownloadGFF3({ handleClose, session }: DownloadGFF3Props) {
       setErrorMessage('Must select assembly to download')
       return
     }
-    const internetAccount = getInternetAccount(internetAccountConfigId)
+    const internetAccount = getInternetAccount(
+      selectedAssembly.configuration.name,
+      internetAccountConfigId,
+    )
     const url = new URL('features/getExportID', internetAccount.baseURL)
     const searchParams = new URLSearchParams({
       assembly: selectedAssembly.name,

diff --git a/packages/jbrowse-plugin-apollo/src/makeDisplayComponent.tsx b/packages/jbrowse-plugin-apollo/src/makeDisplayComponent.tsx
@@ -162,15 +162,11 @@ export const DisplayComponent = observer(function DisplayComponent({
 
   const {
     height: overallHeight,
-    heightPreConfig,
     isShown,
     selectedFeature,
     tabularEditor,
     toggleShown,
   } = model
-  if (!heightPreConfig) {
-    model.setHeight(500)
-  }
   const detailsHeight = tabularEditor.isShown ? model.detailsHeight : 0
   const featureAreaHeight = isShown
     ? overallHeight - detailsHeight - accordionControlHeight * 2