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

package/src/BaseLinearDisplay/components/ServerSideRenderedBlockContent.tsx

@@ -1,69 +0,0 @@
-import React from 'react'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { getParent } from 'mobx-state-tree'
-import { LoadingEllipses } from '@jbrowse/core/ui'
-
-// icons
-import RefreshIcon from '@mui/icons-material/Refresh'
-
-// locals
-import BlockMsg from './BlockMsg'
-
-const useStyles = makeStyles()(theme => {
-  const bg = theme.palette.action.disabledBackground
-  return {
-    loading: {
-      paddingLeft: '0.6em',
-      backgroundColor: theme.palette.background.default,
-      backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
-      textAlign: 'center',
-    },
-  }
-})
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const LoadingMessage = observer(({ model }: { model: any }) => {
-  const { classes } = useStyles()
-  const { status: blockStatus } = model
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { message: displayStatus } = getParent<any>(model, 2)
-  const status = displayStatus || blockStatus
-  return (
-    <div className={classes.loading}>
-      <LoadingEllipses message={status} />
-    </div>
-  )
-})
-
-const ServerSideRenderedBlockContent = observer(function ({
-  model,
-}: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  model: any
-}) {
-  if (model.error) {
-    return (
-      <BlockMsg
-        message={`${model.error}`}
-        severity="error"
-        buttonText="reload"
-        icon={<RefreshIcon />}
-        action={model.reload}
-      />
-    )
-  } else if (model.message) {
-    // the message can be a fully rendered react component, e.g. the region too large message
-    return React.isValidElement(model.message) ? (
-      model.message
-    ) : (
-      <BlockMsg message={`${model.message}`} severity="info" />
-    )
-  } else if (!model.filled) {
-    return <LoadingMessage model={model} />
-  } else {
-    return model.reactElement
-  }
-})
-
-export default ServerSideRenderedBlockContent

package/src/BaseLinearDisplay/components/TooLargeMessage.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter'
-
-// locals
-import BlockMsg from '../components/BlockMsg'
-
-function TooLargeMessage({
-  model,
-}: {
-  model: {
-    regionTooLargeReason: string
-    featureDensityStats?: FeatureDensityStats
-    setFeatureDensityStatsLimit: (s?: FeatureDensityStats) => void
-    reload: () => void
-  }
-}) {
-  const { regionTooLargeReason } = model
-  return (
-    <BlockMsg
-      severity="warning"
-      action={() => {
-        model.setFeatureDensityStatsLimit(model.featureDensityStats)
-        model.reload()
-      }}
-      buttonText="Force load"
-      message={[
-        regionTooLargeReason,
-        'Zoom in to see features or force load (may be slow)',
-      ]
-        .filter(f => !!f)
-        .join('. ')}
-    />
-  )
-}
-
-export default TooLargeMessage

package/src/BaseLinearDisplay/components/Tooltip.tsx

@@ -1,107 +0,0 @@
-import React, { useState, useMemo } from 'react'
-import { getConf } from '@jbrowse/core/configuration'
-import { SanitizedHTML } from '@jbrowse/core/ui'
-import { observer } from 'mobx-react'
-import { Portal, alpha } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { usePopper } from 'react-popper'
-
-// locals
-import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
-
-function round(value: number) {
-  return Math.round(value * 1e5) / 1e5
-}
-const useStyles = makeStyles()(theme => ({
-  // these styles come from
-  // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
-  tooltip: {
-    pointerEvents: 'none',
-    backgroundColor: alpha(theme.palette.grey[700], 0.9),
-    borderRadius: theme.shape.borderRadius,
-    color: theme.palette.common.white,
-    fontFamily: theme.typography.fontFamily,
-    padding: '4px 8px',
-    fontSize: theme.typography.pxToRem(12),
-    lineHeight: `${round(14 / 10)}em`,
-    maxWidth: 300,
-    wordWrap: 'break-word',
-  },
-}))
-
-const TooltipContents = React.forwardRef<
-  HTMLDivElement,
-  { message: React.ReactNode | string }
->(({ message }: { message: React.ReactNode | string }, ref) => {
-  return (
-    <div ref={ref}>
-      {React.isValidElement(message) ? (
-        message
-      ) : message ? (
-        <SanitizedHTML html={String(message)} />
-      ) : null}
-    </div>
-  )
-})
-
-type Coord = [number, number]
-const Tooltip = observer(
-  ({
-    model,
-    clientMouseCoord,
-  }: {
-    model: BaseLinearDisplayModel
-    clientMouseCoord: Coord
-  }) => {
-    const { classes } = useStyles()
-    const { featureUnderMouse } = model
-    const [width, setWidth] = useState(0)
-    const [popperElt, setPopperElt] = useState<HTMLDivElement | null>(null)
-
-    // must be memoized a la https://github.com/popperjs/react-popper/issues/391
-    const virtElement = useMemo(
-      () => ({
-        getBoundingClientRect: () => {
-          const x = clientMouseCoord[0] + width / 2 + 20
-          const y = clientMouseCoord[1]
-          return {
-            top: y,
-            left: x,
-            bottom: y,
-            right: x,
-            width: 0,
-            height: 0,
-            x,
-            y,
-            toJSON() {},
-          }
-        },
-      }),
-      [clientMouseCoord, width],
-    )
-    const { styles, attributes } = usePopper(virtElement, popperElt)
-
-    const contents = featureUnderMouse
-      ? getConf(model, 'mouseover', { feature: featureUnderMouse })
-      : undefined
-
-    return featureUnderMouse && contents ? (
-      <Portal>
-        <div
-          ref={setPopperElt}
-          className={classes.tooltip}
-          // zIndex needed to go over widget drawer
-          style={{ ...styles.popper, zIndex: 100000 }}
-          {...attributes.popper}
-        >
-          <TooltipContents
-            ref={elt => setWidth(elt?.getBoundingClientRect().width || 0)}
-            message={contents}
-          />
-        </div>
-      </Portal>
-    ) : null
-  },
-)
-
-export default Tooltip

package/src/BaseLinearDisplay/index.ts

@@ -1,16 +0,0 @@
-export { default as baseLinearDisplayConfigSchema } from './models/configSchema'
-export type { BlockModel } from './models/serverSideRenderedBlock'
-export { BaseLinearDisplay } from './models/BaseLinearDisplayModel'
-export type {
-  ExportSvgDisplayOptions,
-  BaseLinearDisplayModel,
-  BaseLinearDisplayStateModel,
-} from './models/BaseLinearDisplayModel'
-export {
-  default as BaseLinearDisplayComponent,
-  Tooltip,
-  BlockMsg,
-} from './components/BaseLinearDisplay'
-export { default as TrackHeightMixin } from './models/TrackHeightMixin'
-export { default as FeatureDensityMixin } from './models/FeatureDensityMixin'
-export { default as TooLargeMessage } from './components/TooLargeMessage'

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -1,407 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react'
-import { ThemeOptions } from '@mui/material'
-import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
-import { ConfigurationReference } from '@jbrowse/core/configuration'
-import { MenuItem } from '@jbrowse/core/ui'
-import {
-  getContainingView,
-  getContainingTrack,
-  getSession,
-  isSelectionContainer,
-  isSessionModelWithWidgets,
-  isFeature,
-  Feature,
-} from '@jbrowse/core/util'
-import { BaseBlock } from '@jbrowse/core/util/blockTypes'
-import CompositeMap from '@jbrowse/core/util/compositeMap'
-import { getParentRenderProps } from '@jbrowse/core/util/tracks'
-import { autorun } from 'mobx'
-import { addDisposer, isAlive, types, Instance } from 'mobx-state-tree'
-
-// icons
-import MenuOpenIcon from '@mui/icons-material/MenuOpen'
-
-// locals
-import { LinearGenomeViewModel, ExportSvgOptions } from '../../LinearGenomeView'
-import { Tooltip } from '../components/BaseLinearDisplay'
-import BlockState from './serverSideRenderedBlock'
-import configSchema from './configSchema'
-import renderBaseLinearDisplaySvg from './renderSvg'
-import TrackHeightMixin from './TrackHeightMixin'
-import FeatureDensityMixin from './FeatureDensityMixin'
-
-type LGV = LinearGenomeViewModel
-
-export interface Layout {
-  minX: number
-  minY: number
-  maxX: number
-  maxY: number
-  name: string
-}
-
-type LayoutRecord = [number, number, number, number]
-
-export interface ExportSvgDisplayOptions extends ExportSvgOptions {
-  overrideHeight: number
-  theme: ThemeOptions
-}
-
-/**
- * #stateModel BaseLinearDisplay
- * #category display
- * extends `BaseDisplay`
- */
-function stateModelFactory() {
-  return types
-    .compose(
-      'BaseLinearDisplay',
-      BaseDisplay,
-      TrackHeightMixin(),
-      FeatureDensityMixin(),
-      types.model({
-        /**
-         * #property
-         * updated via autorun
-         */
-        blockState: types.map(BlockState),
-        /**
-         * #property
-         */
-        configuration: ConfigurationReference(configSchema),
-      }),
-    )
-    .volatile(() => ({
-      featureIdUnderMouse: undefined as undefined | string,
-      contextMenuFeature: undefined as undefined | Feature,
-    }))
-    .views(self => ({
-      /**
-       * #getter
-       */
-      get blockType(): 'staticBlocks' | 'dynamicBlocks' {
-        return 'staticBlocks'
-      },
-      /**
-       * #getter
-       */
-      get blockDefinitions() {
-        const view = getContainingView(self) as LGV
-        if (!view.initialized) {
-          throw new Error('view not initialized yet')
-        }
-        return view[this.blockType]
-      },
-    }))
-    .views(self => ({
-      /**
-       * #getter
-       * how many milliseconds to wait for the display to
-       * "settle" before re-rendering a block
-       */
-      get renderDelay() {
-        return 50
-      },
-
-      /**
-       * #getter
-       */
-      get TooltipComponent(): React.FC<any> {
-        return Tooltip as unknown as React.FC
-      },
-
-      /**
-       * #getter
-       * returns a string feature ID if the globally-selected object
-       * is probably a feature
-       */
-      get selectedFeatureId() {
-        if (isAlive(self)) {
-          const { selection } = getSession(self)
-          // does it quack like a feature?
-          if (isFeature(selection)) {
-            return selection.id()
-          }
-        }
-        return undefined
-      },
-      /**
-       * #getter
-       * if a display-level message should be displayed instead of the blocks,
-       * make this return a react component
-       */
-      get DisplayMessageComponent() {
-        return undefined as undefined | React.FC<any>
-      },
-    }))
-    .views(self => ({
-      /**
-       * #getter
-       * a CompositeMap of `featureId -> feature obj` that
-       * just looks in all the block data for that feature
-       */
-      get features() {
-        const featureMaps = []
-        for (const block of self.blockState.values()) {
-          if (block?.features) {
-            featureMaps.push(block.features)
-          }
-        }
-        return new CompositeMap(featureMaps)
-      },
-
-      /**
-       * #getter
-       */
-      get featureUnderMouse() {
-        const feat = self.featureIdUnderMouse
-        return feat ? this.features.get(feat) : undefined
-      },
-
-      /**
-       * #getter
-       */
-      getFeatureOverlapping(
-        blockKey: string,
-        x: number,
-        y: number,
-      ): string | undefined {
-        return self.blockState.get(blockKey)?.layout?.getByCoord(x, y)
-      },
-
-      /**
-       * #getter
-       */
-      getFeatureByID(blockKey: string, id: string): LayoutRecord | undefined {
-        return self.blockState.get(blockKey)?.layout?.getByID(id)
-      },
-
-      /**
-       * #getter
-       */
-      searchFeatureByID(id: string): LayoutRecord | undefined {
-        let ret
-        self.blockState.forEach(block => {
-          const val = block?.layout?.getByID(id)
-          if (val) {
-            ret = val
-          }
-        })
-        return ret
-      },
-    }))
-
-    .actions(self => ({
-      /**
-       * #action
-       */
-      addBlock(key: string, block: BaseBlock) {
-        self.blockState.set(
-          key,
-          BlockState.create({
-            key,
-            region: block.toRegion(),
-          }),
-        )
-      },
-
-      /**
-       * #action
-       */
-      deleteBlock(key: string) {
-        self.blockState.delete(key)
-      },
-      /**
-       * #action
-       */
-      selectFeature(feature: Feature) {
-        const session = getSession(self)
-        if (isSessionModelWithWidgets(session)) {
-          const featureWidget = session.addWidget(
-            'BaseFeatureWidget',
-            'baseFeature',
-            {
-              view: getContainingView(self),
-              track: getContainingTrack(self),
-              featureData: feature.toJSON(),
-            },
-          )
-
-          session.showWidget(featureWidget)
-        }
-        if (isSelectionContainer(session)) {
-          session.setSelection(feature)
-        }
-      },
-      /**
-       * #action
-       */
-      clearFeatureSelection() {
-        getSession(self).clearSelection()
-      },
-      /**
-       * #action
-       */
-      setFeatureIdUnderMouse(feature?: string) {
-        self.featureIdUnderMouse = feature
-      },
-
-      /**
-       * #action
-       */
-      setContextMenuFeature(feature?: Feature) {
-        self.contextMenuFeature = feature
-      },
-    }))
-
-    .actions(self => {
-      const { reload: superReload } = self
-
-      return {
-        /**
-         * #action
-         */
-        async reload() {
-          self.setError()
-          self.setCurrStatsBpPerPx(0)
-          self.clearFeatureDensityStats()
-          ;[...self.blockState.values()].map(val => val.doReload())
-          superReload()
-        },
-      }
-    })
-
-    .views(self => ({
-      /**
-       * #method
-       */
-      trackMenuItems(): MenuItem[] {
-        return []
-      },
-
-      /**
-       * #method
-       */
-      contextMenuItems(): MenuItem[] {
-        return [
-          ...(self.contextMenuFeature
-            ? [
-                {
-                  label: 'Open feature details',
-                  icon: MenuOpenIcon,
-                  onClick: () => {
-                    if (self.contextMenuFeature) {
-                      self.selectFeature(self.contextMenuFeature)
-                    }
-                  },
-                },
-              ]
-            : []),
-        ]
-      },
-      /**
-       * #method
-       */
-      renderProps() {
-        return {
-          ...getParentRenderProps(self),
-          notReady: !self.featureDensityStatsReady,
-          rpcDriverName: self.rpcDriverName,
-          displayModel: self,
-          onFeatureClick(_: unknown, featureId?: string) {
-            const f = featureId || self.featureIdUnderMouse
-            if (!f) {
-              self.clearFeatureSelection()
-            } else {
-              const feature = self.features.get(f)
-              if (feature) {
-                self.selectFeature(feature)
-              }
-            }
-          },
-          onClick() {
-            self.clearFeatureSelection()
-          },
-          // similar to click but opens a menu with further options
-          onFeatureContextMenu(_: unknown, featureId?: string) {
-            const f = featureId || self.featureIdUnderMouse
-            if (!f) {
-              self.clearFeatureSelection()
-            } else {
-              // feature id under mouse passed to context menu
-              self.setContextMenuFeature(self.features.get(f))
-            }
-          },
-
-          onMouseMove(_: unknown, featureId?: string) {
-            self.setFeatureIdUnderMouse(featureId)
-          },
-
-          onMouseLeave(_: unknown) {
-            self.setFeatureIdUnderMouse(undefined)
-          },
-
-          onContextMenu() {
-            self.setContextMenuFeature(undefined)
-            self.clearFeatureSelection()
-          },
-        }
-      },
-    }))
-    .actions(self => ({
-      /**
-       * #method
-       */
-      async renderSvg(opts: ExportSvgDisplayOptions) {
-        return renderBaseLinearDisplaySvg(self as BaseLinearDisplayModel, opts)
-      },
-      afterAttach() {
-        // watch the parent's blocks to update our block state when they change,
-        // then we recreate the blocks on our own model (creating and deleting to
-        // match the parent blocks)
-        addDisposer(
-          self,
-          autorun(() => {
-            const blocksPresent: { [key: string]: boolean } = {}
-            const view = getContainingView(self) as LGV
-            if (!view.initialized) {
-              return
-            }
-            self.blockDefinitions.contentBlocks.forEach(block => {
-              blocksPresent[block.key] = true
-              if (!self.blockState.has(block.key)) {
-                self.addBlock(block.key, block)
-              }
-            })
-            self.blockState.forEach((_, key) => {
-              if (!blocksPresent[key]) {
-                self.deleteBlock(key)
-              }
-            })
-          }),
-        )
-      },
-    }))
-    .preProcessSnapshot(snap => {
-      if (!snap) {
-        return snap
-      }
-      // rewrite "height" from older snapshots to "heightPreConfig", this allows
-      // us to maintain a height "getter" going forward
-      // @ts-expect-error
-      const { height, ...rest } = snap
-      return { heightPreConfig: height, ...rest }
-    })
-    .postProcessSnapshot(self => {
-      // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
-      const r = self as Omit<typeof self, symbol>
-      const { blockState, ...rest } = r
-      return rest
-    })
-}
-
-export const BaseLinearDisplay = stateModelFactory()
-
-export type BaseLinearDisplayStateModel = typeof BaseLinearDisplay
-export type BaseLinearDisplayModel = Instance<BaseLinearDisplayStateModel>