@jbrowse/plugin-linear-comparative-view 2.6.1

package/src/LinearComparativeView/components/Header.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react'
+import { IconButton, Typography } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { SearchBox } from '@jbrowse/plugin-linear-genome-view'
+import { observer } from 'mobx-react'
+import { Menu } from '@jbrowse/core/ui'
+
+// icons
+import MoreVertIcon from '@mui/icons-material/MoreVert'
+
+// locals
+import { LinearComparativeViewModel } from '../model'
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
+
+type LCV = LinearComparativeViewModel
+
+const useStyles = makeStyles()(() => ({
+  headerBar: {
+    gridArea: '1/1/auto/span 2',
+    display: 'flex',
+  },
+  spacer: {
+    flexGrow: 1,
+  },
+  iconButton: {
+    margin: 5,
+  },
+  bp: {
+    display: 'flex',
+    alignItems: 'center',
+    marginLeft: 10,
+  },
+  searchContainer: {
+    marginLeft: 5,
+  },
+  searchBox: {
+    display: 'flex',
+  },
+}))
+
+const TrackSelector = observer(({ model }: { model: LCV }) => {
+  return (
+    <IconButton
+      onClick={model.activateTrackSelector}
+      title="Open track selector"
+    >
+      <TrackSelectorIcon />
+    </IconButton>
+  )
+})
+
+const Header = observer(function ({ model }: { model: LCV }) {
+  const { classes } = useStyles()
+  const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement>()
+  const anyShowHeaders = model.views.some(view => !view.hideHeader)
+  return (
+    <div className={classes.headerBar}>
+      <TrackSelector model={model} />
+
+      <IconButton
+        onClick={event => setMenuAnchorEl(event.currentTarget)}
+        className={classes.iconButton}
+      >
+        <MoreVertIcon />
+      </IconButton>
+      {!anyShowHeaders
+        ? model.views.map(view => (
+            <div key={view.id} className={classes.searchBox}>
+              <div className={classes.searchContainer}>
+                <SearchBox model={view} showHelp={false} />
+              </div>
+              <div className={classes.bp}>
+                <Typography
+                  variant="body2"
+                  color="textSecondary"
+                  className={classes.bp}
+                >
+                  {Math.round(view.coarseTotalBp).toLocaleString('en-US')} bp
+                </Typography>
+              </div>
+            </div>
+          ))
+        : null}
+
+      <div className={classes.spacer} />
+
+      {menuAnchorEl ? (
+        <Menu
+          anchorEl={menuAnchorEl}
+          open
+          onMenuItemClick={(_event, callback) => {
+            callback()
+            setMenuAnchorEl(undefined)
+          }}
+          menuItems={model.headerMenuItems()}
+          onClose={() => setMenuAnchorEl(undefined)}
+        />
+      ) : null}
+    </div>
+  )
+})
+
+export default Header

package/src/LinearComparativeView/components/LinearComparativeView.tsx

@@ -0,0 +1,152 @@
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import { getConf, AnyConfigurationModel } from '@jbrowse/core/configuration'
+import { getEnv } from '@jbrowse/core/util'
+import { ResizeHandle } from '@jbrowse/core/ui'
+
+// locals
+import { LinearComparativeViewModel } from '../model'
+import Rubberband from './Rubberband'
+import Header from './Header'
+
+const useStyles = makeStyles()(theme => ({
+  container: {
+    display: 'grid',
+  },
+  overlay: {
+    zIndex: 100,
+    gridArea: '1/1',
+  },
+  content: {
+    gridArea: '1/1',
+    position: 'relative',
+  },
+  grid: {
+    display: 'grid',
+  },
+  relative: {
+    position: 'relative',
+  },
+
+  // this helps keep the vertical guide inside the parent view container,
+  // similar style exists in the single LGV's trackscontainer
+  rubberbandContainer: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
+
+  rubberbandDiv: {
+    width: '100%',
+    background: theme.palette.action.disabledBackground,
+    height: 15,
+    '&:hover': {
+      background: theme.palette.action.selected,
+    },
+  },
+}))
+
+type LCV = LinearComparativeViewModel
+
+const Overlays = observer(({ model }: { model: LCV }) => {
+  const { classes } = useStyles()
+  return (
+    <>
+      {model.tracks.map(track => {
+        const [display] = track.displays
+        const { RenderingComponent } = display
+        const trackId = getConf(track, 'trackId')
+        return RenderingComponent ? (
+          <div
+            className={classes.overlay}
+            key={trackId}
+            style={{
+              height: model.middleComparativeHeight,
+              overflow: 'hidden',
+            }}
+          >
+            <RenderingComponent model={display} />
+          </div>
+        ) : null
+      })}
+    </>
+  )
+})
+
+// The comparative is in the middle of the views
+const MiddleComparativeView = observer(({ model }: { model: LCV }) => {
+  const { classes } = useStyles()
+  const { views } = model
+  const { pluginManager } = getEnv(model)
+  const { ReactComponent } = pluginManager.getViewType(views[0].type)
+
+  return (
+    <div className={classes.rubberbandContainer}>
+      <Header model={model} />
+      <Rubberband
+        model={model}
+        ControlComponent={<div className={classes.rubberbandDiv} />}
+      />
+      <div className={classes.container}>
+        <ReactComponent model={views[0]} />
+        <div className={classes.grid}>
+          <Overlays model={model} />
+        </div>
+        <ResizeHandle
+          onDrag={n =>
+            model.setMiddleComparativeHeight(model.middleComparativeHeight + n)
+          }
+          style={{
+            height: 4,
+            background: '#ccc',
+          }}
+        />
+        <ReactComponent model={views[1]} />
+      </div>
+    </div>
+  )
+})
+const OverlayComparativeView = observer(({ model }: { model: LCV }) => {
+  const { classes } = useStyles()
+  const { views } = model
+  const { pluginManager } = getEnv(model)
+  return (
+    <div className={classes.rubberbandContainer}>
+      <Header model={model} />
+      <Rubberband
+        model={model}
+        ControlComponent={<div className={classes.rubberbandDiv} />}
+      />
+
+      <div className={classes.container}>
+        <div className={classes.content}>
+          <div className={classes.relative}>
+            {views.map(view => {
+              const { ReactComponent } = pluginManager.getViewType(view.type)
+              return <ReactComponent key={view.id} model={view} />
+            })}
+          </div>
+          <Overlays model={model} />
+        </div>
+      </div>
+    </div>
+  )
+})
+
+export default observer(function (props: {
+  ExtraButtons?: React.ReactNode
+  model: LCV
+}) {
+  const { model } = props
+
+  const middle = model.tracks.some(({ displays }) =>
+    displays.some((d: { configuration: AnyConfigurationModel }) =>
+      getConf(d, 'middle'),
+    ),
+  )
+  return middle ? (
+    <MiddleComparativeView {...props} />
+  ) : (
+    <OverlayComparativeView {...props} />
+  )
+})

package/src/LinearComparativeView/components/Rubberband.tsx

@@ -0,0 +1,329 @@
+import React, { useRef, useEffect, useState } from 'react'
+import { observer } from 'mobx-react'
+import { Popover, Tooltip, Typography, alpha } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { stringify } from '@jbrowse/core/util'
+import { Menu } from '@jbrowse/core/ui'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { LinearComparativeViewModel } from '../model'
+
+type LCV = LinearComparativeViewModel
+type LGV = LinearGenomeViewModel
+
+const useStyles = makeStyles()(theme => {
+  const { tertiary, primary } = theme.palette
+  const background = tertiary
+    ? alpha(tertiary.main, 0.7)
+    : alpha(primary.main, 0.7)
+  return {
+    rubberband: {
+      height: '100%',
+      background,
+      position: 'absolute',
+      zIndex: 10,
+      textAlign: 'center',
+      overflow: 'hidden',
+    },
+    rubberbandControl: {
+      cursor: 'crosshair',
+      width: '100%',
+      minHeight: 8,
+    },
+    rubberbandText: {
+      color: tertiary ? tertiary.contrastText : primary.contrastText,
+    },
+    popover: {
+      mouseEvents: 'none',
+      cursor: 'crosshair',
+    },
+    paper: {
+      paddingLeft: theme.spacing(1),
+      paddingRight: theme.spacing(1),
+    },
+    guide: {
+      pointerEvents: 'none',
+      height: '100%',
+      width: 1,
+      position: 'absolute',
+      zIndex: 10,
+    },
+    sm: {
+      fontSize: 10,
+    },
+  }
+})
+
+const VerticalGuide = observer(
+  ({ model, coordX }: { model: LCV; coordX: number }) => {
+    const { classes } = useStyles()
+    return (
+      <Tooltip
+        open
+        placement="top"
+        title={model.views
+          .map(view => view.pxToBp(coordX))
+          .map(elt => (
+            <Typography className={classes.sm} key={JSON.stringify(elt)}>
+              {stringify(elt)}
+            </Typography>
+          ))}
+        arrow
+      >
+        <div
+          className={classes.guide}
+          style={{
+            left: coordX,
+            background: 'red',
+          }}
+        />
+      </Tooltip>
+    )
+  },
+)
+
+function Rubberband({
+  model,
+  ControlComponent = <div />,
+}: {
+  model: LCV
+  ControlComponent?: React.ReactElement
+}) {
+  const [startX, setStartX] = useState<number>()
+  const [currentX, setCurrentX] = useState<number>()
+
+  // clientX and clientY used for anchorPosition for menu
+  // offsetX used for calculations about width of selection
+  const [anchorPosition, setAnchorPosition] = useState<{
+    offsetX: number
+    clientX: number
+    clientY: number
+  }>()
+  const [guideX, setGuideX] = useState<number>()
+  const controlsRef = useRef<HTMLDivElement>(null)
+  const rubberbandRef = useRef(null)
+  const { classes } = useStyles()
+  const mouseDragging = startX !== undefined && anchorPosition === undefined
+
+  useEffect(() => {
+    function computeOffsets(offsetX: number, view: LGV) {
+      if (startX === undefined) {
+        return
+      }
+      let leftPx = startX
+      let rightPx = offsetX
+      // handles clicking and dragging to the left
+      if (rightPx < leftPx) {
+        ;[leftPx, rightPx] = [rightPx, leftPx]
+      }
+      const leftOffset = view.pxToBp(leftPx)
+      const rightOffset = view.pxToBp(rightPx)
+
+      return { leftOffset, rightOffset }
+    }
+
+    function globalMouseMove(event: MouseEvent) {
+      if (controlsRef.current && mouseDragging) {
+        const relativeX =
+          event.clientX - controlsRef.current.getBoundingClientRect().left
+        setCurrentX(relativeX)
+      }
+    }
+
+    function globalMouseUp(event: MouseEvent) {
+      if (startX !== undefined && controlsRef.current) {
+        const { clientX, clientY } = event
+        const ref = controlsRef.current
+        const offsetX = clientX - ref.getBoundingClientRect().left
+        // as stated above, store both clientX/Y and offsetX for different
+        // purposes
+        setAnchorPosition({
+          offsetX,
+          clientX,
+          clientY,
+        })
+        model.views.forEach(view => {
+          const args = computeOffsets(offsetX, view)
+          if (args) {
+            const { leftOffset, rightOffset } = args
+            view.setOffsets(leftOffset, rightOffset)
+          }
+        })
+        setGuideX(undefined)
+      }
+    }
+    if (mouseDragging) {
+      window.addEventListener('mousemove', globalMouseMove)
+      window.addEventListener('mouseup', globalMouseUp)
+      return () => {
+        window.removeEventListener('mousemove', globalMouseMove)
+        window.removeEventListener('mouseup', globalMouseUp)
+      }
+    }
+    return () => {}
+  }, [startX, mouseDragging, anchorPosition, model])
+
+  useEffect(() => {
+    if (
+      !mouseDragging &&
+      currentX !== undefined &&
+      startX !== undefined &&
+      Math.abs(currentX - startX) <= 3
+    ) {
+      handleClose()
+    }
+  }, [mouseDragging, currentX, startX])
+
+  function mouseDown(event: React.MouseEvent<HTMLDivElement>) {
+    event.preventDefault()
+    event.stopPropagation()
+    const relativeX =
+      event.clientX -
+      (event.target as HTMLDivElement).getBoundingClientRect().left
+    setStartX(relativeX)
+    setCurrentX(relativeX)
+  }
+
+  function mouseMove(event: React.MouseEvent<HTMLDivElement>) {
+    const target = event.target as HTMLDivElement
+    setGuideX(event.clientX - target.getBoundingClientRect().left)
+  }
+
+  function mouseOut() {
+    setGuideX(undefined)
+    model.views.forEach(view => view.setOffsets(undefined, undefined))
+  }
+
+  function handleClose() {
+    setAnchorPosition(undefined)
+    setStartX(undefined)
+    setCurrentX(undefined)
+  }
+
+  const open = Boolean(anchorPosition)
+
+  function handleMenuItemClick(_: unknown, callback: Function) {
+    callback()
+    handleClose()
+  }
+
+  if (startX === undefined) {
+    return (
+      <>
+        {guideX !== undefined ? (
+          <VerticalGuide model={model} coordX={guideX} />
+        ) : null}
+        <div
+          data-testid="rubberband_controls"
+          className={classes.rubberbandControl}
+          role="presentation"
+          ref={controlsRef}
+          onMouseDown={mouseDown}
+          onMouseOut={mouseOut}
+          onMouseMove={mouseMove}
+        >
+          {ControlComponent}
+        </div>
+      </>
+    )
+  }
+
+  /* Calculating Pixels for Mouse Dragging */
+  const right = anchorPosition ? anchorPosition.offsetX : currentX || 0
+  const left = right < startX ? right : startX
+  const width = Math.abs(right - startX)
+  const { views } = model
+  const leftBpOffset = views.map(view => view.pxToBp(left))
+  const rightBpOffset = views.map(view => view.pxToBp(left + width))
+  const numOfBpSelected = views.map(view => Math.ceil(width * view.bpPerPx))
+  return (
+    <>
+      {rubberbandRef.current ? (
+        <>
+          <Popover
+            className={classes.popover}
+            classes={{
+              paper: classes.paper,
+            }}
+            open
+            anchorEl={rubberbandRef.current}
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'left',
+            }}
+            transformOrigin={{
+              vertical: 'bottom',
+              horizontal: 'right',
+            }}
+            keepMounted
+            disableRestoreFocus
+          >
+            {leftBpOffset.map(l => (
+              <Typography key={JSON.stringify(l)}>{stringify(l)}</Typography>
+            ))}
+          </Popover>
+          <Popover
+            className={classes.popover}
+            classes={{
+              paper: classes.paper,
+            }}
+            open
+            anchorEl={rubberbandRef.current}
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'right',
+            }}
+            transformOrigin={{
+              vertical: 'bottom',
+              horizontal: 'left',
+            }}
+            keepMounted
+            disableRestoreFocus
+          >
+            {rightBpOffset.map(l => (
+              <Typography key={JSON.stringify(l)}>{stringify(l)}</Typography>
+            ))}
+          </Popover>
+        </>
+      ) : null}
+      <div
+        ref={rubberbandRef}
+        className={classes.rubberband}
+        style={{ left, width }}
+      >
+        <Typography variant="h6" className={classes.rubberbandText}>
+          {numOfBpSelected.map((n, i) => (
+            <Typography key={`${n}_${i}`}>{`${n.toLocaleString(
+              'en-US',
+            )}bp`}</Typography>
+          ))}
+        </Typography>
+      </div>
+      <div
+        data-testid="rubberband_controls"
+        className={classes.rubberbandControl}
+        role="presentation"
+        ref={controlsRef}
+        onMouseDown={mouseDown}
+        onMouseOut={mouseOut}
+        onMouseMove={mouseMove}
+      >
+        {ControlComponent}
+      </div>
+      {anchorPosition ? (
+        <Menu
+          anchorReference="anchorPosition"
+          anchorPosition={{
+            left: anchorPosition.clientX,
+            top: anchorPosition.clientY,
+          }}
+          onMenuItemClick={handleMenuItemClick}
+          open={open}
+          onClose={handleClose}
+          menuItems={model.rubberBandMenuItems()}
+        />
+      ) : null}
+    </>
+  )
+}
+
+export default observer(Rubberband)

package/src/LinearComparativeView/index.ts

@@ -0,0 +1,15 @@
+import { lazy } from 'react'
+import PluginManager from '@jbrowse/core/PluginManager'
+import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
+import modelFactory from './model'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addViewType(() => {
+    return new ViewType({
+      name: 'LinearComparativeView',
+      displayName: 'Linear comparative view',
+      stateModel: modelFactory(pluginManager),
+      ReactComponent: lazy(() => import('./components/LinearComparativeView')),
+    })
+  })
+}