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

package/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,OAAO,EAAwB,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAEhF,QAAQ;AACR,OAAO,aAAa,MAAM,+BAA+B,CAAA;AAEzD,SAAS;AACT,OAAO,EACL,iBAAiB,EACjB,0BAA0B,EAC1B,6BAA6B,GAC9B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,kBAAkB,MAAM,qBAAqB,CAAA;AACpD,OAAO,iBAAiB,EAAE,EACxB,SAAS,EACT,YAAY,EACZ,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,mBAAmB,MAAM,sBAAsB,CAAA;AACtD,OAAO,aAAa,MAAM,gBAAgB,CAAA;AAC1C,OAAO,WAAW,MAAM,cAAc,CAAA;AACtC,OAAO,uBAAuB,MAAM,0BAA0B,CAAA;AAE9D,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,MAAM;IAA1D;;QACE,SAAI,GAAG,wBAAwB,CAAA;QAE/B,YAAO,GAAG;YACR,0BAA0B;YAC1B,iBAAiB;YACjB,6BAA6B;YAC7B,SAAS;YACT,YAAY;YACZ,gBAAgB;SACjB,CAAA;IAsBH,CAAC;IApBC,OAAO,CAAC,aAA4B;QAClC,aAAa,CAAC,aAAa,CAAC,CAAA;QAC5B,WAAW,CAAC,aAAa,CAAC,CAAA;QAC1B,mBAAmB,CAAC,aAAa,CAAC,CAAA;QAClC,iBAAiB,CAAC,aAAa,CAAC,CAAA;QAChC,kBAAkB,CAAC,aAAa,CAAC,CAAA;QACjC,uBAAuB,CAAC,aAAa,CAAC,CAAA;IACxC,CAAC;IAED,SAAS,CAAC,aAA4B;QACpC,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YAClD,aAAa,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,EAAE;gBAC/C,KAAK,EAAE,oBAAoB;gBAC3B,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE,CAAC,OAA6B,EAAE,EAAE;oBACzC,OAAO,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAA;gBACzC,CAAC;aACF,CAAC,CAAA;SACH;IACH,CAAC;CACF;AAQD,OAAO,EAAE,mBAAmB,IAAI,oCAAoC,EAAE,MAAM,qBAAqB,CAAA;AACjG,OAAO,EACL,6BAA6B,EAC7B,iBAAiB,EACjB,QAAQ,EACR,0BAA0B,EAC1B,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,GAChB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAGL,mBAAmB,EACnB,SAAS,GACV,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,QAAQ,GACT,MAAM,sDAAsD,CAAA;AAC7D,OAAO,EACL,YAAY,IAAI,qCAAqC,EACrD,YAAY,IAAI,8BAA8B,GAC/C,MAAM,sBAAsB,CAAA"}

package/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx

@@ -1,117 +0,0 @@
-import React, { useState, useRef } from 'react'
-import { observer } from 'mobx-react'
-import { useTheme } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { getConf } from '@jbrowse/core/configuration'
-import { Menu } from '@jbrowse/core/ui'
-
-// locals
-
-import LinearBlocks from './LinearBlocks'
-import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
-
-const useStyles = makeStyles()({
-  display: {
-    position: 'relative',
-    whiteSpace: 'nowrap',
-    textAlign: 'left',
-    width: '100%',
-    minHeight: '100%',
-  },
-})
-
-type Coord = [number, number]
-const BaseLinearDisplay = observer(function (props: {
-  model: BaseLinearDisplayModel
-  children?: React.ReactNode
-}) {
-  const { classes } = useStyles()
-  const theme = useTheme()
-  const ref = useRef<HTMLDivElement>(null)
-  const [clientRect, setClientRect] = useState<DOMRect>()
-  const [offsetMouseCoord, setOffsetMouseCoord] = useState<Coord>([0, 0])
-  const [clientMouseCoord, setClientMouseCoord] = useState<Coord>([0, 0])
-  const [contextCoord, setContextCoord] = useState<Coord>()
-  const { model, children } = props
-  const {
-    TooltipComponent,
-    DisplayMessageComponent,
-    contextMenuItems,
-    height,
-    setContextMenuFeature,
-  } = model
-
-  return (
-    <div
-      ref={ref}
-      data-testid={`display-${getConf(model, 'displayId')}`}
-      className={classes.display}
-      onContextMenu={event => {
-        event.preventDefault()
-        if (contextCoord) {
-          // There's already a context menu open, so close it
-          setContextCoord(undefined)
-        } else if (ref.current) {
-          setContextCoord([event.clientX, event.clientY])
-        }
-      }}
-      onMouseMove={event => {
-        if (!ref.current) {
-          return
-        }
-        const rect = ref.current.getBoundingClientRect()
-        const { left, top } = rect
-        setOffsetMouseCoord([event.clientX - left, event.clientY - top])
-        setClientMouseCoord([event.clientX, event.clientY])
-        setClientRect(rect)
-      }}
-    >
-      {DisplayMessageComponent ? (
-        <DisplayMessageComponent model={model} />
-      ) : (
-        <LinearBlocks {...props} />
-      )}
-      {children}
-
-      <TooltipComponent
-        model={model}
-        height={height}
-        offsetMouseCoord={offsetMouseCoord}
-        clientMouseCoord={clientMouseCoord}
-        clientRect={clientRect}
-        mouseCoord={offsetMouseCoord}
-      />
-
-      <Menu
-        open={Boolean(contextCoord) && Boolean(contextMenuItems().length)}
-        onMenuItemClick={(_, callback) => {
-          callback()
-          setContextCoord(undefined)
-        }}
-        onClose={() => {
-          setContextCoord(undefined)
-          setContextMenuFeature(undefined)
-        }}
-        TransitionProps={{
-          onExit: () => {
-            setContextCoord(undefined)
-            setContextMenuFeature(undefined)
-          },
-        }}
-        anchorReference="anchorPosition"
-        anchorPosition={
-          contextCoord
-            ? { top: contextCoord[1], left: contextCoord[0] }
-            : undefined
-        }
-        style={{ zIndex: theme.zIndex.tooltip }}
-        menuItems={contextMenuItems()}
-      />
-    </div>
-  )
-})
-
-export default BaseLinearDisplay
-
-export { default as Tooltip } from './Tooltip'
-export { default as BlockMsg } from './BlockMsg'

package/src/BaseLinearDisplay/components/Block.tsx

@@ -1,77 +0,0 @@
-import React from 'react'
-import { BaseBlock } from '@jbrowse/core/util/blockTypes'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-
-const useStyles = makeStyles()(theme => ({
-  contentBlock: {
-    position: 'relative',
-    minHeight: '100%',
-    boxSizing: 'border-box',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-  },
-  elidedBlock: {
-    minHeight: '100%',
-    boxSizing: 'border-box',
-    backgroundColor: '#999',
-    backgroundImage:
-      'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
-  },
-  interRegionPaddingBlock: {
-    minHeight: '100%',
-    backgroundColor: theme.palette.text.disabled,
-  },
-  boundaryPaddingBlock: {
-    minHeight: '100%',
-    backgroundColor: theme.palette.action.disabledBackground,
-  },
-}))
-
-const ContentBlock = observer(function ({
-  block,
-  children,
-}: {
-  block: BaseBlock
-  children: React.ReactNode
-}) {
-  const { classes } = useStyles()
-  const { widthPx } = block
-  return (
-    <div style={{ width: widthPx }} className={classes.contentBlock}>
-      {children}
-    </div>
-  )
-})
-
-function ElidedBlock({ width }: { width: number }) {
-  const { classes } = useStyles()
-  return <div className={classes.elidedBlock} style={{ width }} />
-}
-
-function InterRegionPaddingBlock({
-  boundary,
-  width,
-  style = {},
-}: {
-  boundary: boolean
-  width: number
-  style?: React.CSSProperties
-}) {
-  const { classes } = useStyles()
-  return (
-    <div
-      style={{
-        ...style,
-        width,
-      }}
-      className={
-        boundary
-          ? classes.boundaryPaddingBlock
-          : classes.interRegionPaddingBlock
-      }
-    />
-  )
-}
-
-export { ContentBlock, ElidedBlock, InterRegionPaddingBlock }

package/src/BaseLinearDisplay/components/BlockMsg.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { Tooltip, Button, Alert, AlertColor } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
-const useStyles = makeStyles()({
-  ellipses: {
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-  },
-})
-
-export default function BlockMsg({
-  message,
-  severity,
-  buttonText,
-  icon,
-  action,
-}: {
-  message: string
-  severity?: AlertColor
-  buttonText?: string
-  icon?: React.ReactNode
-  action?: () => void
-}) {
-  const { classes } = useStyles()
-  const button = action ? (
-    <Button data-testid="reload_button" onClick={action} startIcon={icon}>
-      {buttonText}
-    </Button>
-  ) : null
-  return (
-    <Alert
-      severity={severity}
-      action={button}
-      classes={{ message: classes.ellipses }}
-    >
-      <Tooltip title={message}>
-        <div>{message}</div>
-      </Tooltip>
-    </Alert>
-  )
-}

package/src/BaseLinearDisplay/components/LinearBlocks.tsx

@@ -1,119 +0,0 @@
-import React from 'react'
-import { makeStyles } from 'tss-react/mui'
-import { getContainingView } from '@jbrowse/core/util'
-import { observer } from 'mobx-react'
-import {
-  ContentBlock,
-  ElidedBlock,
-  InterRegionPaddingBlock,
-} from '@jbrowse/core/util/blockTypes'
-import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
-
-import {
-  ContentBlock as ContentBlockComponent,
-  ElidedBlock as ElidedBlockComponent,
-  InterRegionPaddingBlock as InterRegionPaddingBlockComponent,
-} from './Block'
-import { LinearGenomeViewModel } from '../../LinearGenomeView'
-
-type LGV = LinearGenomeViewModel
-
-const useStyles = makeStyles()({
-  linearBlocks: {
-    whiteSpace: 'nowrap',
-    textAlign: 'left',
-    position: 'absolute',
-    minHeight: '100%',
-    display: 'flex',
-  },
-  heightOverflowed: {
-    position: 'absolute',
-    color: 'rgb(77,77,77)',
-    borderBottom: '2px solid rgb(77,77,77)',
-    textShadow: 'white 0px 0px 1px',
-    whiteSpace: 'nowrap',
-    width: '100%',
-    fontWeight: 'bold',
-    textAlign: 'center',
-    zIndex: 2000,
-    boxSizing: 'border-box',
-  },
-})
-
-const RenderedBlocks = observer(function ({
-  model,
-}: {
-  model: BaseLinearDisplayModel
-}) {
-  const { classes } = useStyles()
-  const { blockDefinitions, blockState } = model
-  return (
-    <>
-      {blockDefinitions.map(block => {
-        if (block instanceof ContentBlock) {
-          const state = blockState.get(block.key)
-
-          return (
-            <ContentBlockComponent
-              block={block}
-              key={`${model.id}-${block.key}`}
-            >
-              {state && state.ReactComponent ? (
-                <state.ReactComponent model={state} />
-              ) : null}
-              {state && state.maxHeightReached ? (
-                <div
-                  className={classes.heightOverflowed}
-                  style={{
-                    top: state.layout.getTotalHeight() - 16,
-                    pointerEvents: 'none',
-                    height: 16,
-                  }}
-                >
-                  Max height reached
-                </div>
-              ) : null}
-            </ContentBlockComponent>
-          )
-        }
-        if (block instanceof ElidedBlock) {
-          return (
-            <ElidedBlockComponent
-              key={`${model.id}-${block.key}`}
-              width={block.widthPx}
-            />
-          )
-        }
-        if (block instanceof InterRegionPaddingBlock) {
-          return (
-            <InterRegionPaddingBlockComponent
-              key={block.key}
-              width={block.widthPx}
-              style={{ background: 'none' }}
-              boundary={block.variant === 'boundary'}
-            />
-          )
-        }
-        throw new Error(`invalid block type ${typeof block}`)
-      })}
-    </>
-  )
-})
-function LinearBlocks({ model }: { model: BaseLinearDisplayModel }) {
-  const { classes } = useStyles()
-  const { blockDefinitions } = model
-  const viewModel = getContainingView(model) as LGV
-  return (
-    <div
-      className={classes.linearBlocks}
-      style={{
-        left: blockDefinitions.offsetPx - viewModel.offsetPx,
-      }}
-    >
-      <RenderedBlocks model={model} />
-    </div>
-  )
-}
-
-export { RenderedBlocks, useStyles }
-export default observer(LinearBlocks)

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'