@jbrowse/plugin-linear-genome-view 2.5.0 → 2.6.1

package/src/BaseLinearDisplay/models/FeatureDensityMixin.tsx

@@ -0,0 +1,213 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react'
+import { getConf } from '@jbrowse/core/configuration'
+import { getContainingView } from '@jbrowse/core/util'
+import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter'
+import { Region } from '@jbrowse/core/util/types'
+import { autorun } from 'mobx'
+import { addDisposer, isAlive, types } from 'mobx-state-tree'
+
+// locals
+import { LinearGenomeViewModel } from '../../LinearGenomeView'
+import TooLargeMessage from '../components/TooLargeMessage'
+import { getDisplayStr, getFeatureDensityStatsPre } from './util'
+import autorunFeatureDensityStats from './autorunFeatureDensityStats'
+
+type LGV = LinearGenomeViewModel
+
+/**
+ * #stateModel FeatureDensityMixin
+ * #category display
+ */
+export default function FeatureDensityMixin() {
+  return types
+    .model({
+      /**
+       * #property
+       */
+      userBpPerPxLimit: types.maybe(types.number),
+      /**
+       * #property
+       */
+
+      userByteSizeLimit: types.maybe(types.number),
+    })
+    .volatile(() => ({
+      featureDensityStatsP: undefined as
+        | undefined
+        | Promise<FeatureDensityStats>,
+      featureDensityStats: undefined as undefined | FeatureDensityStats,
+      currStatsBpPerPx: 0,
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get currentBytesRequested() {
+        return self.featureDensityStats?.bytes || 0
+      },
+
+      /**
+       * #getter
+       */
+      get currentFeatureScreenDensity() {
+        const view = getContainingView(self) as LGV
+        return (self.featureDensityStats?.featureDensity || 0) * view.bpPerPx
+      },
+
+      /**
+       * #getter
+       */
+      get maxFeatureScreenDensity() {
+        // @ts-expect-error
+        return getConf(self, 'maxFeatureScreenDensity')
+      },
+      /**
+       * #getter
+       */
+      get featureDensityStatsReady() {
+        const view = getContainingView(self)
+        return (
+          self.currStatsBpPerPx === view.bpPerPx &&
+          (!!self.featureDensityStats || !!self.userBpPerPxLimit)
+        )
+      },
+
+      /**
+       * #getter
+       */
+      get maxAllowableBytes() {
+        return (
+          self.userByteSizeLimit ||
+          self.featureDensityStats?.fetchSizeLimit ||
+          // @ts-expect-error
+          (getConf(self, 'fetchSizeLimit') as number)
+        )
+      },
+    }))
+    .actions(self => ({
+      afterAttach() {
+        addDisposer(
+          self,
+          autorun(() => autorunFeatureDensityStats(self as any)),
+        )
+      },
+    }))
+    .actions(self => ({
+      /**
+       * #action
+       */
+      setCurrStatsBpPerPx(n: number) {
+        self.currStatsBpPerPx = n
+      },
+      /**
+       * #action
+       */
+      setFeatureDensityStatsLimit(stats?: FeatureDensityStats) {
+        const view = getContainingView(self) as LGV
+        if (stats?.bytes) {
+          self.userByteSizeLimit = stats.bytes
+        } else {
+          self.userBpPerPxLimit = view.bpPerPx
+        }
+      },
+      /**
+       * #action
+       */
+      async getFeatureDensityStats() {
+        if (!self.featureDensityStatsP) {
+          self.featureDensityStatsP = getFeatureDensityStatsPre(
+            self as any,
+          ).catch(e => {
+            if (isAlive(self)) {
+              this.setFeatureDensityStatsP(undefined)
+            }
+            throw e
+          })
+        }
+        return self.featureDensityStatsP
+      },
+
+      /**
+       * #action
+       */
+      setFeatureDensityStatsP(arg: any) {
+        self.featureDensityStatsP = arg
+      },
+
+      /**
+       * #action
+       */
+      setFeatureDensityStats(featureDensityStats?: FeatureDensityStats) {
+        self.featureDensityStats = featureDensityStats
+      },
+      /**
+       * #action
+       */
+      clearFeatureDensityStats() {
+        self.featureDensityStatsP = undefined
+        self.featureDensityStats = undefined
+      },
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       * region is too large if:
+       * - stats are ready
+       * - region is greater than 20kb (don't warn when zoomed in less than that)
+       * - and bytes is greater than max allowed bytes or density greater than max
+       *   density
+       */
+      get regionTooLarge() {
+        const view = getContainingView(self) as LGV
+        if (
+          !self.featureDensityStatsReady ||
+          view.dynamicBlocks.totalBp < 20_000
+        ) {
+          return false
+        }
+        return (
+          self.currentBytesRequested > self.maxAllowableBytes ||
+          (self.userBpPerPxLimit
+            ? view.bpPerPx > self.userBpPerPxLimit
+            : self.currentFeatureScreenDensity > self.maxFeatureScreenDensity)
+        )
+      },
+
+      /**
+       * #getter
+       * only shows a message of bytes requested is defined, the feature density
+       * based stats don't produce any helpful message besides to zoom in
+       */
+      get regionTooLargeReason() {
+        const req = self.currentBytesRequested
+        const max = self.maxAllowableBytes
+
+        return req && req > max
+          ? `Requested too much data (${getDisplayStr(req)})`
+          : ''
+      },
+    }))
+    .views(self => ({
+      /**
+       * #method
+       */
+      regionCannotBeRenderedText(_region: Region) {
+        return self.regionTooLarge ? 'Force load to see features' : ''
+      },
+
+      /**
+       * #method
+       * @param region -
+       * @returns falsy if the region is fine to try rendering. Otherwise,
+       *  return a react node + string of text.
+       *  string of text describes why it cannot be rendered
+       *  react node allows user to force load at current setting
+       */
+      regionCannotBeRendered(_region: Region) {
+        return self.regionTooLarge ? (
+          <TooLargeMessage model={self as any} />
+        ) : null
+      },
+    }))
+}

package/src/BaseLinearDisplay/models/TrackHeightMixin.tsx

@@ -0,0 +1,59 @@
+import { getConf } from '@jbrowse/core/configuration'
+import { types } from 'mobx-state-tree'
+
+const minDisplayHeight = 20
+
+/**
+ * #stateModel TrackHeightMixin
+ * #category display
+ */
+export default function TrackHeightMixin() {
+  return types
+    .model({
+      /**
+       * #property
+       */
+      heightPreConfig: types.maybe(
+        types.refinement(
+          'displayHeight',
+          types.number,
+          n => n >= minDisplayHeight,
+        ),
+      ),
+    })
+    .volatile(() => ({
+      /**
+       * #property
+       */
+      scrollTop: 0,
+    }))
+    .views(self => ({
+      get height() {
+        // @ts-expect-error
+        return self.heightPreConfig ?? (getConf(self, 'height') as number)
+      },
+    }))
+    .actions(self => ({
+      /**
+       * #action
+       */
+      setScrollTop(scrollTop: number) {
+        self.scrollTop = scrollTop
+      },
+      /**
+       * #action
+       */
+      setHeight(displayHeight: number) {
+        self.heightPreConfig = Math.max(displayHeight, minDisplayHeight)
+        return self.height
+      },
+      /**
+       * #action
+       */
+      resizeHeight(distance: number) {
+        const oldHeight = self.height
+        const newHeight = this.setHeight(self.height + distance)
+        return newHeight - oldHeight
+      },
+    }))
+}

package/src/BaseLinearDisplay/models/autorunFeatureDensityStats.ts

@@ -0,0 +1,46 @@
+import { getContainingView, isAbortException } from '@jbrowse/core/util'
+import { LinearGenomeViewModel } from '../../LinearGenomeView'
+import { isAlive } from 'mobx-state-tree'
+import { BaseLinearDisplayModel } from './BaseLinearDisplayModel'
+
+// stats estimation autorun calls getFeatureDensityStats against the data
+// adapter which by default uses featureDensity, but can also respond with a
+// byte size estimate and fetch size limit (data adapter can define what is too
+// much data)
+export default async function autorunFeatureDensityStats(
+  self: BaseLinearDisplayModel,
+) {
+  try {
+    const view = getContainingView(self) as LinearGenomeViewModel
+
+    // extra check for contentBlocks.length
+    // https://github.com/GMOD/jbrowse-components/issues/2694
+    if (
+      !view.initialized ||
+      !view.staticBlocks.contentBlocks.length ||
+      view.bpPerPx === self.currStatsBpPerPx ||
+      self.error
+    ) {
+      return
+    }
+
+    // don't re-estimate featureDensity even if zoom level changes,
+    // jbrowse1-style assume it's sort of representative
+    if (self.featureDensityStats?.featureDensity !== undefined) {
+      self.setCurrStatsBpPerPx(view.bpPerPx)
+      return
+    }
+
+    self.clearFeatureDensityStats()
+    self.setCurrStatsBpPerPx(view.bpPerPx)
+    const stats = await self.getFeatureDensityStats()
+    if (isAlive(self)) {
+      self.setFeatureDensityStats(stats)
+    }
+  } catch (e) {
+    if (!isAbortException(e) && isAlive(self)) {
+      console.error(e)
+      self.setError(e)
+    }
+  }
+}

package/src/BaseLinearDisplay/models/configSchema.ts

@@ -2,6 +2,7 @@ import { ConfigurationSchema } from '@jbrowse/core/configuration'
 
 /**
  * #config BaseLinearDisplay
+ * #category display
  * `BaseLinearDisplay` is a "base" config that is extended by classes like
  * `LinearBasicDisplay` (used for feature tracks, etc) and `LinearBareDisplay`
  * (more stripped down than even the basic display, not commonly used)

package/src/BaseLinearDisplay/models/renderSvg.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { ThemeOptions } from '@mui/material'
+import {
+  getContainingView,
+  getViewParams,
+  ReactRendering,
+} from '@jbrowse/core/util'
+
+// locals
+import { ExportSvgOptions, LinearGenomeViewModel } from '../../LinearGenomeView'
+import BlockState, { renderBlockData } from './serverSideRenderedBlock'
+import { getId } from './util'
+
+import { BaseLinearDisplayModel } from './BaseLinearDisplayModel'
+
+export default async function renderBaseLinearDisplaySvg(
+  self: BaseLinearDisplayModel,
+  opts: ExportSvgOptions & {
+    overrideHeight: number
+    theme: ThemeOptions
+  },
+) {
+  const { height, id } = self
+  const { overrideHeight } = opts
+  const view = getContainingView(self) as LinearGenomeViewModel
+  const { offsetPx: viewOffsetPx, roundedDynamicBlocks, width } = view
+  const renderings = await Promise.all(
+    roundedDynamicBlocks.map(async block => {
+      const blockState = BlockState.create({
+        key: block.key,
+        region: block,
+      })
+
+      // regionCannotBeRendered can return jsx so look for plaintext
+      // version, or just get the default if none available
+      const cannotBeRenderedReason =
+        self.regionCannotBeRenderedText(block) ||
+        self.regionCannotBeRendered(block)
+
+      if (cannotBeRenderedReason) {
+        return [
+          block,
+          {
+            reactElement: (
+              <>
+                <rect x={0} y={0} width={width} height={20} fill="#aaa" />
+                <text x={0} y={15}>
+                  {cannotBeRenderedReason}
+                </text>
+              </>
+            ),
+          },
+        ] as const
+      }
+
+      const { rpcManager, renderArgs, renderProps, rendererType } =
+        renderBlockData(blockState, self)
+
+      return [
+        block,
+        await rendererType.renderInClient(rpcManager, {
+          ...renderArgs,
+          ...renderProps,
+          viewParams: getViewParams(self, true),
+          exportSVG: opts,
+          theme: opts.theme || renderProps.theme,
+        }),
+      ] as const
+    }),
+  )
+
+  return (
+    <>
+      {renderings.map(([block, rendering], index) => {
+        const { offsetPx, widthPx } = block
+        const offset = offsetPx - viewOffsetPx
+        const clipid = getId(id, index)
+
+        return (
+          <React.Fragment key={`frag-${index}`}>
+            <defs>
+              <clipPath id={clipid}>
+                <rect
+                  x={0}
+                  y={0}
+                  width={widthPx}
+                  height={overrideHeight || height}
+                />
+              </clipPath>
+            </defs>
+            <g transform={`translate(${offset} 0)`}>
+              <g clipPath={`url(#${clipid})`}>
+                <ReactRendering rendering={rendering} />
+              </g>
+            </g>
+          </React.Fragment>
+        )
+      })}
+    </>
+  )
+}

package/src/BaseLinearDisplay/models/serverSideRenderedBlock.ts

@@ -181,25 +181,27 @@ const blockState = types
         getParent<any>(self, 2).reload()
       },
       beforeDestroy() {
-        if (renderInProgress && !renderInProgress.signal.aborted) {
-          renderInProgress.abort()
-        }
-        const display = getContainingDisplay(self)
-        const { rpcManager } = getSession(self)
-        const { rendererType } = display
-        const { renderArgs } = renderBlockData(cast(self))
-        // renderArgs can be undefined if an error occurred in this block
-        if (renderArgs) {
-          rendererType
-            .freeResourcesInClient(
-              rpcManager,
-              JSON.parse(JSON.stringify(renderArgs)),
-            )
-            .catch((e: Error) => {
-              // just console.error if it's something while it's being destroyed
-              console.warn('Error while destroying block', e)
-            })
-        }
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;(async () => {
+          try {
+            if (renderInProgress && !renderInProgress.signal.aborted) {
+              renderInProgress.abort()
+            }
+            const display = getContainingDisplay(self)
+            const { rpcManager } = getSession(self)
+            const { rendererType } = display
+            const { renderArgs } = renderBlockData(cast(self))
+            // renderArgs can be undefined if an error occurred in this block
+            if (renderArgs) {
+              await rendererType.freeResourcesInClient(
+                rpcManager,
+                JSON.parse(JSON.stringify(renderArgs)),
+              )
+            }
+          } catch (e) {
+            console.error('Error while destroying block', e)
+          }
+        })()
       },
     }
   })

package/src/BasicTrack/configSchema.ts

@@ -4,6 +4,7 @@ import PluginManager from '@jbrowse/core/PluginManager'
 
 /**
  * #config BasicTrack
+ * #category track
  * synonym for FeatureTrack
  */
 function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars

package/src/FeatureTrack/configSchema.ts

@@ -4,6 +4,7 @@ import PluginManager from '@jbrowse/core/PluginManager'
 
 /**
  * #config FeatureTrack
+ * #category track
  * used for basic gene and feature tracks, generally used with LinearBasicDisplay
  */
 function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars

package/src/LinearBareDisplay/configSchema.ts

@@ -4,6 +4,7 @@ import { baseLinearDisplayConfigSchema } from '../BaseLinearDisplay'
 
 /**
  * #config LinearBareDisplay
+ * #category display
  */
 function configSchemaFactory(pluginManager: PluginManager) {
   return ConfigurationSchema(

package/src/LinearBareDisplay/model.ts

@@ -8,6 +8,7 @@ import { BaseLinearDisplay } from '../BaseLinearDisplay'
 
 /**
  * #stateModel LinearBareDisplay
+ * #category display
  * extends `BaseLinearDisplay`
  */
 export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {

package/src/LinearBasicDisplay/configSchema.ts

@@ -4,6 +4,7 @@ import { baseLinearDisplayConfigSchema } from '../BaseLinearDisplay'
 
 /**
  * #config LinearBasicDisplay
+ * #category display
  */
 function configSchemaFactory(pluginManager: PluginManager) {
   return ConfigurationSchema(

package/src/LinearBasicDisplay/model.ts

@@ -18,6 +18,7 @@ const SetMaxHeightDlg = lazy(() => import('./components/SetMaxHeight'))
 
 /**
  * #stateModel LinearBasicDisplay
+ * #category display
  * used by `FeatureTrack`, has simple settings like "show/hide feature labels",
  * etc.
  */

package/src/LinearGenomeView/components/LinearGenomeView.test.tsx

@@ -157,11 +157,11 @@ test('renders two tracks, two regions', async () => {
   })
   const model = session.views[0]
   model.setWidth(800)
-  const { container, findByText, queryAllByTestId } = render(
-    <LinearGenomeView model={model} />,
-  )
+  const { container, findByDisplayValue, findByText, queryAllByTestId } =
+    render(<LinearGenomeView model={model} />)
   await findByText('Foo Track')
   await findByText('798bp')
+  await findByDisplayValue('ctgA:1..100 ctgB:1,001..1,698')
   await waitFor(() => expect(queryAllByTestId('svgfeatures').length).toBe(4))
   expect(container).toMatchSnapshot()
 }, 15000)

package/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -1,15 +1,18 @@
-import React from 'react'
+import React, { lazy } from 'react'
 import { Button, Paper, Typography } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
 import { LoadingEllipses } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
 
+// icons
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
+
 // locals
 import { LinearGenomeViewModel } from '..'
 import TrackContainer from './TrackContainer'
 import TracksContainer from './TracksContainer'
-import ImportForm from './ImportForm'
+
+const ImportForm = lazy(() => import('./ImportForm'))
 
 type LGV = LinearGenomeViewModel
 

package/src/LinearGenomeView/components/MiniControls.tsx

@@ -1,7 +1,6 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { observer } from 'mobx-react'
 import { IconButton, Paper } from '@mui/material'
-import Menu from '@jbrowse/core/ui/Menu'
 
 // icons
 import ZoomIn from '@mui/icons-material/ZoomIn'
@@ -10,45 +9,45 @@ import ArrowDown from '@mui/icons-material/KeyboardArrowDown'
 
 // locals
 import { LinearGenomeViewModel } from '..'
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import { makeStyles } from 'tss-react/mui'
 
-const MiniControls = observer((props: { model: LinearGenomeViewModel }) => {
-  const { model } = props
-  const { bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model
-  const [anchorEl, setAnchorEl] = useState<HTMLElement>()
+const useStyles = makeStyles()(theme => ({
+  bg: {
+    position: 'absolute',
+    right: 0,
+    zIndex: 1001,
+    background: theme.palette.background.paper,
+  },
+}))
 
+const MiniControls = observer(function ({
+  model,
+}: {
+  model: LinearGenomeViewModel
+}) {
+  const { classes } = useStyles()
+  const { bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model
   return hideHeader ? (
-    <div style={{ position: 'absolute', right: '0px', zIndex: '1001' }}>
-      <Paper style={{ background: '#aaa7' }}>
-        <IconButton onClick={event => setAnchorEl(event.currentTarget)}>
-          <ArrowDown fontSize="small" />
-        </IconButton>
-
-        <IconButton
-          data-testid="zoom_out"
-          onClick={() => model.zoom(bpPerPx * 2)}
-          disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
-        >
-          <ZoomOut fontSize="small" />
-        </IconButton>
-        <IconButton
-          data-testid="zoom_in"
-          onClick={() => model.zoom(model.bpPerPx / 2)}
-          disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
-        >
-          <ZoomIn fontSize="small" />
-        </IconButton>
-        <Menu
-          anchorEl={anchorEl}
-          open={Boolean(anchorEl)}
-          onMenuItemClick={(_, callback) => {
-            callback()
-            setAnchorEl(undefined)
-          }}
-          onClose={() => setAnchorEl(undefined)}
-          menuItems={model.menuItems()}
-        />
-      </Paper>
-    </div>
+    <Paper className={classes.bg}>
+      <CascadingMenuButton menuItems={model.menuItems()}>
+        <ArrowDown fontSize="small" />
+      </CascadingMenuButton>
+      <IconButton
+        data-testid="zoom_out"
+        onClick={() => model.zoom(bpPerPx * 2)}
+        disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
+      >
+        <ZoomOut fontSize="small" />
+      </IconButton>
+      <IconButton
+        data-testid="zoom_in"
+        onClick={() => model.zoom(model.bpPerPx / 2)}
+        disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
+      >
+        <ZoomIn fontSize="small" />
+      </IconButton>
+    </Paper>
   ) : null
 })