resolve conflict

.github/workflows/pull_request.yml

@@ -25,3 +25,7 @@ jobs:
         run: yarn eslint --report-unused-disable-directives --max-warnings 0 --ext .js,.ts,.jsx,.tsx .
       - name: Test codebase
         run: yarn test
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v3
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

codecov.yml

@@ -0,0 +1,9 @@
+comment: false
+coverage:
+  status:
+    project:
+      default:
+        informational: true
+    patch:
+      default:
+        informational: true

package.json

@@ -12,7 +12,7 @@
     "start:server": "yarn workspace apollo-collaboration-server run start",
     "start:plugin": "yarn workspace jbrowse-plugin-apollo run start",
     "start": "npm-run-all --print-label --parallel start:shared start:server start:plugin",
-    "test": "yarn workspace jbrowse-plugin-apollo run test"
+    "test": "yarn workspace jbrowse-plugin-apollo run test:ci"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.1.0",

packages/jbrowse-plugin-apollo/jest.config.js

@@ -5,4 +5,5 @@ module.exports = {
   testPathIgnorePatterns: ['<rootDir>/cypress/'],
   automock: false,
   setupFiles: ['./jestSetup.js', 'fake-indexeddb/auto'],
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'],
 }

packages/jbrowse-plugin-apollo/package.json

@@ -36,6 +36,7 @@
     "build": "yarn build:shared && yarn clean && rollup --config",
     "browse": "serve --listen 8999 .jbrowse",
     "test": "jest",
+    "test:ci": "jest --coverage",
     "test:e2e": "start-test \"npm-run-all --parallel start browse\" \"9000|8999\" \"npm-run-all cypress:run\"",
     "cypress:run": "cypress run --browser chrome --config baseUrl=http://localhost:8999",
     "cypress:open": "cypress open --config baseUrl=http://localhost:8999",

packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx

@@ -47,6 +47,7 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
     setCollaboratorCanvas,
     setOverlayCanvas,
     setTheme,
+    tabularEditor,
   } = model
   const { classes } = useStyles()
   const lgv = getContainingView(model) as unknown as LinearGenomeViewModel
@@ -81,25 +82,30 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
           </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={(node) => {
+            ref={async (node: HTMLCanvasElement) => {
+              await Promise.resolve()
               setCollaboratorCanvas(node)
             }}
             width={lgv.dynamicBlocks.totalWidthPx}
             height={featuresHeight}
             className={classes.canvas}
           />
           <canvas
-            ref={(node) => {
+            ref={async (node: HTMLCanvasElement) => {
+              await Promise.resolve()
               setCanvas(node)
             }}
             width={lgv.dynamicBlocks.totalWidthPx}
             height={featuresHeight}
             className={classes.canvas}
           />
           <canvas
-            ref={(node) => {
+            ref={async (node: HTMLCanvasElement) => {
+              await Promise.resolve()
               setOverlayCanvas(node)
             }}
             width={lgv.dynamicBlocks.totalWidthPx}
@@ -108,6 +114,9 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
             onMouseLeave={onMouseLeave}
             onMouseDown={onMouseDown}
             onMouseUp={onMouseUp}
+            onClick={() => {
+              tabularEditor.showPane()
+            }}
             className={classes.canvas}
             style={{ cursor: cursor ?? 'default' }}
           />

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 },
   )
 }

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 {
@@ -138,6 +139,98 @@ export abstract class Glyph {
     return parentFeature
   }
 
+  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,

packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/mouseEvents.ts

@@ -347,6 +347,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.

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) => ({