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

package/src/LinearGenomeView/components/TrackContainer.tsx

@@ -1,180 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { Paper } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { isAlive } from 'mobx-state-tree'
-import { ErrorBoundary } from 'react-error-boundary'
-
-// jbrowse core
-import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
-import { getConf } from '@jbrowse/core/configuration'
-import { ResizeHandle, ErrorMessage } from '@jbrowse/core/ui'
-import { useDebouncedCallback } from '@jbrowse/core/util'
-
-// locals
-import { LinearGenomeViewModel } from '..'
-import TrackLabel from './TrackLabel'
-
-const useStyles = makeStyles()({
-  root: {
-    marginTop: 2,
-  },
-  resizeHandle: {
-    height: 3,
-    boxSizing: 'border-box',
-    position: 'relative',
-    zIndex: 2,
-  },
-  overlay: {
-    pointerEvents: 'none',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    zIndex: 3,
-  },
-  trackLabel: {
-    zIndex: 3,
-  },
-
-  // aligns with block boundaries. check for example the breakpoint split view
-  // demo to see if features align if wanting to change things
-  renderingComponentContainer: {
-    position: 'absolute',
-    // -1 offset because of the 1px border of the Paper
-    left: -1,
-    height: '100%',
-    width: '100%',
-  },
-  trackLabelOffset: {
-    position: 'relative',
-    display: 'inline-block',
-  },
-  trackLabelOverlap: {
-    position: 'absolute',
-  },
-  trackRenderingContainer: {
-    overflowY: 'auto',
-    overflowX: 'hidden',
-    whiteSpace: 'nowrap',
-    position: 'relative',
-    background: 'none',
-    zIndex: 2,
-  },
-})
-
-type LGV = LinearGenomeViewModel
-
-const TrackContainerLabel = observer(
-  ({ model, view }: { model: BaseTrackModel; view: LGV }) => {
-    const { classes, cx } = useStyles()
-    const display = model.displays[0]
-    const { trackLabel, trackLabelOverlap, trackLabelOffset } = classes
-    const labelStyle =
-      view.trackLabels !== 'overlapping' || display.prefersOffset
-        ? trackLabelOffset
-        : trackLabelOverlap
-
-    return view.trackLabels !== 'hidden' ? (
-      <TrackLabel track={model} className={cx(trackLabel, labelStyle)} />
-    ) : null
-  },
-)
-
-function TrackContainer({
-  model,
-  track,
-}: {
-  model: LGV
-  track: BaseTrackModel
-}) {
-  const { classes } = useStyles()
-  const display = track.displays[0]
-  const { horizontalScroll, draggingTrackId, moveTrack } = model
-  const { height, RenderingComponent, DisplayBlurb } = display
-  const trackId = getConf(track, 'trackId')
-  const ref = useRef<HTMLDivElement>(null)
-  const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id
-  const minimized = track.minimized
-  const debouncedOnDragEnter = useDebouncedCallback(() => {
-    if (isAlive(display) && dimmed) {
-      moveTrack(draggingTrackId, track.id)
-    }
-  }, 100)
-  useEffect(() => {
-    if (ref.current) {
-      model.trackRefs[trackId] = ref.current
-    }
-    return () => {
-      delete model.trackRefs[trackId]
-    }
-  }, [model.trackRefs, trackId])
-
-  return (
-    <Paper
-      ref={ref}
-      className={classes.root}
-      variant="outlined"
-      onClick={event => {
-        if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
-          const left = ref.current?.getBoundingClientRect().left || 0
-          model.zoomTo(model.bpPerPx / 2, event.clientX - left, true)
-        }
-      }}
-    >
-      <TrackContainerLabel model={track} view={model} />
-      <ErrorBoundary
-        key={track.id}
-        FallbackComponent={({ error }) => <ErrorMessage error={error} />}
-      >
-        <div
-          className={classes.trackRenderingContainer}
-          style={{ height: minimized ? 20 : height }}
-          onScroll={evt => display.setScrollTop(evt.currentTarget.scrollTop)}
-          onDragEnter={debouncedOnDragEnter}
-          data-testid={`trackRenderingContainer-${model.id}-${trackId}`}
-        >
-          {!minimized ? (
-            <>
-              <div
-                className={classes.renderingComponentContainer}
-                style={{ transform: `scaleX(${model.scaleFactor})` }}
-              >
-                <RenderingComponent
-                  model={display}
-                  onHorizontalScroll={horizontalScroll}
-                />
-              </div>
-
-              {DisplayBlurb ? (
-                <div
-                  style={{
-                    position: 'absolute',
-                    left: 0,
-                    top: display.height - 20,
-                  }}
-                >
-                  <DisplayBlurb model={display} />
-                </div>
-              ) : null}
-            </>
-          ) : null}
-        </div>
-      </ErrorBoundary>
-      <div
-        className={classes.overlay}
-        style={{
-          height: display.height,
-          background: dimmed ? 'rgba(0, 0, 0, 0.4)' : undefined,
-        }}
-        onDragEnter={debouncedOnDragEnter}
-      />
-      <ResizeHandle
-        onDrag={display.resizeHeight}
-        className={classes.resizeHandle}
-      />
-    </Paper>
-  )
-}
-
-export default observer(TrackContainer)

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -1,143 +0,0 @@
-import React from 'react'
-import { IconButton, Paper, Typography, alpha } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { getConf } from '@jbrowse/core/configuration'
-import { getSession, getContainingView } from '@jbrowse/core/util'
-import { getTrackName } from '@jbrowse/core/util/tracks'
-import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
-import { SanitizedHTML } from '@jbrowse/core/ui'
-import CascadingMenu from '@jbrowse/core/ui/CascadingMenu'
-
-import {
-  bindTrigger,
-  bindPopover,
-  usePopupState,
-} from 'material-ui-popup-state/hooks'
-
-// icons
-import MoreVertIcon from '@mui/icons-material/MoreVert'
-import DragIcon from '@mui/icons-material/DragIndicator'
-import CloseIcon from '@mui/icons-material/Close'
-import MinimizeIcon from '@mui/icons-material/Minimize'
-import AddIcon from '@mui/icons-material/Add'
-
-import { LinearGenomeViewModel } from '..'
-
-const useStyles = makeStyles()(theme => ({
-  root: {
-    background: alpha(theme.palette.background.paper, 0.8),
-    '&:hover': {
-      background: theme.palette.background.paper,
-    },
-    transition: theme.transitions.create(['background'], {
-      duration: theme.transitions.duration.shortest,
-    }),
-  },
-  trackName: {
-    margin: '0 auto',
-    width: '90%',
-    fontSize: '0.8rem',
-    pointerEvents: 'none',
-  },
-  dragHandle: {
-    cursor: 'grab',
-  },
-  dragHandleIcon: {
-    display: 'inline-block',
-    verticalAlign: 'middle',
-    pointerEvents: 'none',
-  },
-  iconButton: {
-    padding: theme.spacing(1),
-  },
-}))
-
-type LGV = LinearGenomeViewModel
-
-interface Props {
-  track: BaseTrackModel
-  className?: string
-}
-
-const TrackLabel = React.forwardRef<HTMLDivElement, Props>(function (
-  { track, className },
-  ref,
-) {
-  const { classes, cx } = useStyles()
-  const view = getContainingView(track) as LGV
-  const session = getSession(track)
-  const trackConf = track.configuration
-  const minimized = track.minimized
-  const trackId = getConf(track, 'trackId')
-  const trackName = getTrackName(trackConf, session)
-
-  const popupState = usePopupState({
-    popupId: 'trackLabelMenu',
-    variant: 'popover',
-  })
-
-  const items = [
-    {
-      label: minimized ? 'Restore track' : 'Minimize track',
-      icon: minimized ? AddIcon : MinimizeIcon,
-      onClick: () => track.setMinimized(!minimized),
-    },
-    ...(session.getTrackActionMenuItems?.(trackConf) || []),
-    ...track.trackMenuItems(),
-  ].sort((a, b) => (b.priority || 0) - (a.priority || 0))
-
-  return (
-    <Paper ref={ref} className={cx(className, classes.root)}>
-      <span
-        draggable
-        className={classes.dragHandle}
-        onDragStart={event => {
-          const target = event.currentTarget
-          if (target.parentNode) {
-            const parent = target.parentNode as HTMLElement
-            event.dataTransfer.setDragImage(parent, 20, 20)
-            view.setDraggingTrackId(track.id)
-          }
-        }}
-        onDragEnd={() => view.setDraggingTrackId(undefined)}
-        data-testid={`dragHandle-${view.id}-${trackId}`}
-      >
-        <DragIcon className={classes.dragHandleIcon} fontSize="small" />
-      </span>
-      <IconButton
-        onClick={() => view.hideTrack(trackId)}
-        className={classes.iconButton}
-        title="close this track"
-      >
-        <CloseIcon fontSize="small" />
-      </IconButton>
-
-      <Typography
-        variant="body1"
-        component="span"
-        className={classes.trackName}
-      >
-        <SanitizedHTML
-          html={`${trackName}${minimized ? ' (minimized)' : ''}`}
-        />
-      </Typography>
-      <IconButton
-        {...bindTrigger(popupState)}
-        className={classes.iconButton}
-        data-testid="track_menu_icon"
-        disabled={items.length === 0}
-      >
-        <MoreVertIcon fontSize="small" />
-      </IconButton>
-      <CascadingMenu
-        {...bindPopover(popupState)}
-        onMenuItemClick={(_: unknown, callback: Function) => callback()}
-        menuItems={items}
-        popupState={popupState}
-      />
-    </Paper>
-  )
-})
-
-export default observer(TrackLabel)

package/src/LinearGenomeView/components/TracksContainer.tsx

@@ -1,114 +0,0 @@
-import React, { useRef } from 'react'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { Menu } from '@jbrowse/core/ui'
-
-// local utils
-import { LinearGenomeViewModel, SCALE_BAR_HEIGHT } from '..'
-import { useSideScroll, useRangeSelect, useWheelScroll } from './hooks'
-
-// local components
-import Rubberband from './Rubberband'
-import Scalebar from './Scalebar'
-import Gridlines from './Gridlines'
-import CenterLine from './CenterLine'
-import VerticalGuide from './VerticalGuide'
-import RubberbandSpan from './RubberbandSpan'
-import { getEnv } from '@jbrowse/core/util'
-
-const useStyles = makeStyles()({
-  tracksContainer: {
-    position: 'relative',
-    overflow: 'hidden',
-  },
-})
-
-type LGV = LinearGenomeViewModel
-
-export default observer(function TracksContainer({
-  children,
-  model,
-}: {
-  children: React.ReactNode
-  model: LGV
-}) {
-  const { classes } = useStyles()
-  const { pluginManager } = getEnv(model)
-  const { mouseDown: mouseDown1, mouseUp } = useSideScroll(model)
-  const ref = useRef<HTMLDivElement>(null)
-  const {
-    guideX,
-    rubberbandOn,
-    leftBpOffset,
-    rightBpOffset,
-    numOfBpSelected,
-    width,
-    left,
-    anchorPosition,
-    handleMenuItemClick,
-    open,
-    handleClose,
-    mouseMove,
-    mouseDown: mouseDown2,
-  } = useRangeSelect(ref, model, true)
-  useWheelScroll(ref, model)
-
-  const additionals = pluginManager.evaluateExtensionPoint(
-    'LinearGenomeView-TracksContainerComponent',
-    undefined,
-    { model },
-  ) as React.ReactNode
-
-  return (
-    <div
-      ref={ref}
-      data-testid="trackContainer"
-      className={classes.tracksContainer}
-      onMouseDown={event => {
-        mouseDown1(event)
-        mouseDown2(event)
-      }}
-      onMouseMove={mouseMove}
-      onMouseUp={mouseUp}
-    >
-      {model.showGridlines ? <Gridlines model={model} /> : null}
-      {model.showCenterLine ? <CenterLine model={model} /> : null}
-      {guideX !== undefined ? (
-        <VerticalGuide model={model} coordX={guideX} />
-      ) : rubberbandOn ? (
-        <RubberbandSpan
-          leftBpOffset={leftBpOffset}
-          rightBpOffset={rightBpOffset}
-          numOfBpSelected={numOfBpSelected}
-          width={width}
-          left={left}
-        />
-      ) : null}
-      {anchorPosition ? (
-        <Menu
-          anchorReference="anchorPosition"
-          anchorPosition={{
-            left: anchorPosition.clientX,
-            top: anchorPosition.clientY,
-          }}
-          onMenuItemClick={handleMenuItemClick}
-          open={open}
-          onClose={handleClose}
-          menuItems={model.rubberBandMenuItems()}
-        />
-      ) : null}
-
-      <Rubberband
-        model={model}
-        ControlComponent={
-          <Scalebar
-            model={model}
-            style={{ height: SCALE_BAR_HEIGHT, boxSizing: 'border-box' }}
-          />
-        }
-      />
-      {additionals}
-      {children}
-    </div>
-  )
-})

package/src/LinearGenomeView/components/VerticalGuide.tsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import { Tooltip } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { stringify } from '@jbrowse/core/util'
-
-// locals
-import { LinearGenomeViewModel } from '..'
-
-type LGV = LinearGenomeViewModel
-
-const useStyles = makeStyles()({
-  guide: {
-    pointerEvents: 'none',
-    height: '100%',
-    width: 1,
-    position: 'absolute',
-    zIndex: 10,
-  },
-})
-
-function VerticalGuide({ model, coordX }: { model: LGV; coordX: number }) {
-  const { classes } = useStyles()
-  return (
-    <Tooltip open placement="top" title={stringify(model.pxToBp(coordX))} arrow>
-      <div
-        className={classes.guide}
-        style={{
-          left: coordX,
-          background: 'red',
-        }}
-      />
-    </Tooltip>
-  )
-}
-
-export default observer(VerticalGuide)

package/src/LinearGenomeView/components/ZoomControls.tsx

@@ -1,62 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { observer } from 'mobx-react'
-import { Slider, IconButton } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import ZoomIn from '@mui/icons-material/ZoomIn'
-import ZoomOut from '@mui/icons-material/ZoomOut'
-import { LinearGenomeViewModel } from '..'
-
-const useStyles = makeStyles()(theme => ({
-  container: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  slider: {
-    width: 70,
-    color: theme.palette.text.secondary,
-  },
-}))
-
-function ZoomControls({ model }: { model: LinearGenomeViewModel }) {
-  const { classes } = useStyles()
-  const { maxBpPerPx, minBpPerPx, bpPerPx, scaleFactor } = model
-  const [value, setValue] = useState(-Math.log2(bpPerPx) * 100)
-  useEffect(() => {
-    setValue(-Math.log2(bpPerPx) * 100)
-  }, [setValue, bpPerPx])
-
-  return (
-    <div className={classes.container}>
-      <IconButton
-        data-testid="zoom_out"
-        onClick={() => model.zoom(bpPerPx * 2)}
-        disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
-        size="large"
-      >
-        <ZoomOut />
-      </IconButton>
-
-      <Slider
-        size="small"
-        className={classes.slider}
-        value={value}
-        min={-Math.log2(maxBpPerPx) * 100}
-        max={-Math.log2(minBpPerPx) * 100}
-        onChange={(_, val) => setValue(val as number)}
-        onChangeCommitted={() => model.zoomTo(2 ** (-value / 100))}
-        disabled={scaleFactor !== 1}
-      />
-      <IconButton
-        data-testid="zoom_in"
-        onClick={() => model.zoom(model.bpPerPx / 2)}
-        disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
-        size="large"
-      >
-        <ZoomIn />
-      </IconButton>
-    </div>
-  )
-}
-
-export default observer(ZoomControls)