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

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -1,321 +0,0 @@
-import React, { Suspense, lazy, useMemo, useEffect, useState } from 'react'
-import { observer } from 'mobx-react'
-import { getSession, useDebounce, measureText } from '@jbrowse/core/util'
-import BaseResult, {
-  RefSequenceResult,
-} from '@jbrowse/core/TextSearch/BaseResults'
-import {
-  Autocomplete,
-  AutocompleteRenderInputParams,
-  IconButton,
-  InputAdornment,
-  TextField,
-  TextFieldProps as TFP,
-} from '@mui/material'
-
-// icons
-import SearchIcon from '@mui/icons-material/Search'
-import HelpIcon from '@mui/icons-material/Help'
-
-// locals
-import { LinearGenomeViewModel } from '..'
-
-// lazy
-const HelpDialog = lazy(() => import('./HelpDialog'))
-
-export interface Option {
-  group?: string
-  result: BaseResult
-}
-
-function aggregateResults(results: BaseResult[]) {
-  const m: { [key: string]: BaseResult[] } = {}
-
-  for (const result of results) {
-    const displayString = result.getDisplayString()
-    if (!m[displayString]) {
-      m[displayString] = []
-    }
-    m[displayString].push(result)
-  }
-  return m
-}
-
-function getDeduplicatedResult(results: BaseResult[]) {
-  return Object.entries(aggregateResults(results)).map(
-    ([displayString, results]) =>
-      results.length === 1
-        ? {
-            result: results[0],
-          }
-        : {
-            // deduplicate a "multi-result"
-            result: new BaseResult({
-              displayString,
-              results,
-              label: displayString,
-            }),
-          },
-  )
-}
-
-// the logic of this method is to only apply a filter to RefSequenceResults
-// because they do not have a matchedObject. the trix search results already
-// filter so don't need re-filtering
-function filterOptions(options: Option[], searchQuery: string) {
-  return options.filter(
-    ({ result }) =>
-      result.getLabel().toLowerCase().includes(searchQuery) ||
-      result.matchedObject,
-  )
-}
-
-function getFiltered(opts: Option[], inputValue: string) {
-  const filtered = filterOptions(opts, inputValue.toLocaleLowerCase())
-  return [
-    ...filtered.slice(0, 100),
-    ...(filtered.length > 100
-      ? [
-          {
-            group: 'limitOption',
-            result: new BaseResult({
-              label: 'keep typing for more results',
-            }),
-          },
-        ]
-      : []),
-  ]
-}
-
-function RefNameAutocomplete({
-  model,
-  onSelect,
-  assemblyName,
-  style,
-  fetchResults,
-  onChange,
-  value,
-  showHelp = true,
-  minWidth = 200,
-  maxWidth = 550,
-  TextFieldProps = {},
-}: {
-  model: LinearGenomeViewModel
-  onSelect?: (region: BaseResult) => void
-  onChange?: (val: string) => void
-  assemblyName?: string
-  value?: string
-  fetchResults: (query: string) => Promise<BaseResult[]>
-  style?: React.CSSProperties
-  minWidth?: number
-  maxWidth?: number
-  showHelp?: boolean
-  TextFieldProps?: TFP
-}) {
-  const session = getSession(model)
-  const { assemblyManager } = session
-  const [open, setOpen] = useState(false)
-  const [loaded, setLoaded] = useState(true)
-  const [currentSearch, setCurrentSearch] = useState('')
-  const [inputValue, setInputValue] = useState('')
-  const [searchOptions, setSearchOptions] = useState<Option[]>()
-  const debouncedSearch = useDebounce(currentSearch, 300)
-  const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined
-  const { coarseVisibleLocStrings, hasDisplayedRegions } = model
-
-  const regions = assembly?.regions
-
-  const options = useMemo(
-    () =>
-      regions?.map(option => ({
-        result: new RefSequenceResult({
-          refName: option.refName,
-          label: option.refName,
-          matchedAttribute: 'refName',
-        }),
-      })) || [],
-    [regions],
-  )
-
-  useEffect(() => {
-    let active = true
-
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    ;(async () => {
-      try {
-        if (debouncedSearch === '' || !assemblyName) {
-          return
-        }
-
-        setLoaded(false)
-        const results = await fetchResults(debouncedSearch)
-        if (active) {
-          setLoaded(true)
-          setSearchOptions(getDeduplicatedResult(results))
-        }
-      } catch (e) {
-        console.error(e)
-        if (active) {
-          session.notify(`${e}`, 'error')
-        }
-      }
-    })()
-
-    return () => {
-      active = false
-    }
-  }, [assemblyName, fetchResults, debouncedSearch, session, model])
-
-  const inputBoxVal = coarseVisibleLocStrings || value || ''
-
-  // heuristic, text width + 60 accommodates help icon and search
-  // icon
-  const width = Math.min(
-    Math.max(measureText(inputBoxVal, 14) + 100, minWidth),
-    maxWidth,
-  )
-
-  // notes on implementation:
-  // The selectOnFocus setting helps highlight the field when clicked
-  return (
-    <>
-      <Autocomplete
-        data-testid="autocomplete"
-        disableListWrap
-        disableClearable
-        disabled={!assemblyName}
-        freeSolo
-        includeInputInList
-        selectOnFocus
-        style={{ ...style, width }}
-        value={inputBoxVal}
-        loading={!loaded}
-        inputValue={inputValue}
-        onInputChange={(_event, newInputValue) => {
-          setInputValue(newInputValue)
-          onChange?.(newInputValue)
-        }}
-        loadingText="loading results"
-        open={open}
-        onOpen={() => setOpen(true)}
-        onClose={() => {
-          setOpen(false)
-          setLoaded(true)
-          if (hasDisplayedRegions) {
-            setCurrentSearch('')
-            setSearchOptions(undefined)
-          }
-        }}
-        onChange={(_event, selectedOption) => {
-          if (!selectedOption || !assemblyName) {
-            return
-          }
-
-          if (typeof selectedOption === 'string') {
-            // handles string inputs on keyPress enter
-            onSelect?.(new BaseResult({ label: selectedOption }))
-          } else {
-            onSelect?.(selectedOption.result)
-          }
-          setInputValue(inputBoxVal)
-        }}
-        options={!searchOptions?.length ? options : searchOptions}
-        getOptionDisabled={option => option.group === 'limitOption'}
-        filterOptions={(opts, { inputValue }) => getFiltered(opts, inputValue)}
-        renderInput={params => (
-          <AutocompleteTextField
-            showHelp={showHelp}
-            params={params}
-            inputBoxVal={inputBoxVal}
-            TextFieldProps={TextFieldProps}
-            setCurrentSearch={setCurrentSearch}
-            setInputValue={setInputValue}
-          />
-        )}
-        getOptionLabel={opt =>
-          typeof opt === 'string' ? opt : opt.result.getDisplayString()
-        }
-      />
-    </>
-  )
-}
-
-function AutocompleteTextField({
-  TextFieldProps,
-  inputBoxVal,
-  params,
-  showHelp,
-  setInputValue,
-  setCurrentSearch,
-}: {
-  TextFieldProps: TFP
-  inputBoxVal: string
-  showHelp?: boolean
-  params: AutocompleteRenderInputParams
-  setInputValue: (arg: string) => void
-  setCurrentSearch: (arg: string) => void
-}) {
-  const { helperText, InputProps = {} } = TextFieldProps
-  return (
-    <TextField
-      onBlur={() =>
-        // this is used to restore a refName or the non-user-typed input
-        // to the box on blurring
-        setInputValue(inputBoxVal)
-      }
-      {...params}
-      {...TextFieldProps}
-      size="small"
-      helperText={helperText}
-      InputProps={{
-        ...params.InputProps,
-        ...InputProps,
-
-        endAdornment: (
-          <EndAdornment
-            showHelp={showHelp}
-            endAdornment={params.InputProps.endAdornment}
-          />
-        ),
-      }}
-      placeholder="Search for location"
-      onChange={e => setCurrentSearch(e.target.value)}
-    />
-  )
-}
-
-function HelpAdornment() {
-  const [isHelpDialogDisplayed, setHelpDialogDisplayed] = useState(false)
-  return (
-    <>
-      <IconButton onClick={() => setHelpDialogDisplayed(true)} size="small">
-        <HelpIcon fontSize="small" />
-      </IconButton>
-      {isHelpDialogDisplayed ? (
-        <Suspense fallback={<div />}>
-          <HelpDialog handleClose={() => setHelpDialogDisplayed(false)} />
-        </Suspense>
-      ) : null}
-    </>
-  )
-}
-
-function EndAdornment({
-  showHelp,
-  endAdornment,
-}: {
-  showHelp?: boolean
-  endAdornment: React.ReactNode
-}) {
-  return (
-    <>
-      <InputAdornment position="end" style={{ marginRight: 7 }}>
-        <SearchIcon fontSize="small" />
-        {showHelp ? <HelpAdornment /> : null}
-      </InputAdornment>
-      {endAdornment}
-    </>
-  )
-}
-
-export default observer(RefNameAutocomplete)

package/src/LinearGenomeView/components/Rubberband.tsx

@@ -1,89 +0,0 @@
-import React, { useRef } from 'react'
-import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
-import { Menu } from '@jbrowse/core/ui'
-
-// locals
-import VerticalGuide from './VerticalGuide'
-import RubberbandSpan from './RubberbandSpan'
-import { useRangeSelect } from './hooks'
-import { LinearGenomeViewModel } from '..'
-
-type LGV = LinearGenomeViewModel
-
-const useStyles = makeStyles()({
-  rubberbandControl: {
-    cursor: 'crosshair',
-    width: '100%',
-    minHeight: 8,
-  },
-})
-
-function Rubberband({
-  model,
-  ControlComponent = <div />,
-}: {
-  model: LGV
-  ControlComponent?: React.ReactElement
-}) {
-  const ref = useRef<HTMLDivElement>(null)
-  const { classes } = useStyles()
-
-  const {
-    guideX,
-    rubberbandOn,
-    leftBpOffset,
-    rightBpOffset,
-    numOfBpSelected,
-    width,
-    left,
-    anchorPosition,
-    handleMenuItemClick,
-    open,
-    handleClose,
-    mouseMove,
-    mouseDown,
-    mouseOut,
-  } = useRangeSelect(ref, model)
-
-  return (
-    <>
-      {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}
-      <div
-        data-testid="rubberband_controls"
-        className={classes.rubberbandControl}
-        ref={ref}
-        onMouseDown={mouseDown}
-        onMouseMove={mouseMove}
-        onMouseOut={mouseOut}
-      >
-        {ControlComponent}
-      </div>
-    </>
-  )
-}
-
-export default observer(Rubberband)

package/src/LinearGenomeView/components/RubberbandSpan.tsx

@@ -1,99 +0,0 @@
-import React, { useRef } from 'react'
-import { makeStyles } from 'tss-react/mui'
-import { Popover, Typography, alpha } from '@mui/material'
-import { stringify, toLocale } from '@jbrowse/core/util'
-
-const useStyles = makeStyles()(theme => {
-  const { primary, tertiary } = theme.palette
-  const background = tertiary
-    ? alpha(tertiary.light, 0.7)
-    : alpha(primary.light, 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),
-    },
-  }
-})
-
-interface Offset {
-  coord: number
-  refName?: string
-  oob?: boolean
-}
-
-export default function RubberbandSpan({
-  leftBpOffset,
-  rightBpOffset,
-  numOfBpSelected,
-  left,
-  width,
-}: {
-  leftBpOffset: Offset
-  rightBpOffset: Offset
-  numOfBpSelected?: number
-  left: number
-  width: number
-}) {
-  const ref = useRef(null)
-  const { classes } = useStyles()
-  return (
-    <>
-      {ref.current ? (
-        <>
-          <Popover
-            className={classes.popover}
-            classes={{ paper: classes.paper }}
-            open
-            anchorEl={ref.current}
-            anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
-            transformOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-            keepMounted
-            disableRestoreFocus
-          >
-            <Typography>{stringify(leftBpOffset)}</Typography>
-          </Popover>
-          <Popover
-            className={classes.popover}
-            classes={{ paper: classes.paper }}
-            open
-            anchorEl={ref.current}
-            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-            transformOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-            keepMounted
-            disableRestoreFocus
-          >
-            <Typography>{stringify(rightBpOffset)}</Typography>
-          </Popover>
-        </>
-      ) : null}
-      <div ref={ref} className={classes.rubberband} style={{ left, width }}>
-        {numOfBpSelected ? (
-          <Typography variant="h6" className={classes.rubberbandText}>
-            {toLocale(numOfBpSelected)} bp
-          </Typography>
-        ) : null}
-      </div>
-    </>
-  )
-}

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

@@ -1,145 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react'
-import { render } from '@testing-library/react'
-import { createTestSession } from '@jbrowse/web/src/rootModel'
-import Scalebar from './Scalebar'
-jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
-
-describe('Scalebar genome view component', () => {
-  it('renders two regions', () => {
-    const session = createTestSession({
-      views: [
-        {
-          type: 'LinearGenomeView',
-          offsetPx: 0,
-          bpPerPx: 1,
-          displayedRegions: [
-            { assemblyName: 'volvox', refName: 'ctgA', start: 0, end: 100 },
-            {
-              assemblyName: 'volvox',
-              refName: 'ctgB',
-              start: 100,
-              end: 200,
-            },
-          ],
-          tracks: [],
-          configuration: {},
-        },
-      ],
-    }) as any
-    session.addAssemblyConf({
-      name: 'volMyt1',
-      sequence: {
-        trackId: 'ref0',
-        type: 'ReferenceSequenceTrack',
-        adapter: {
-          type: 'FromConfigSequenceAdapter',
-          features: [
-            {
-              refName: 'ctgA',
-              uniqueId: 'firstId',
-              start: 0,
-              end: 10,
-              seq: 'cattgttgcg',
-            },
-          ],
-        },
-      },
-    })
-    const model = session.views[0]
-    const { getByTestId } = render(<Scalebar model={model} />)
-    const ret1 = getByTestId('refLabel-ctgA')
-    const ret2 = getByTestId('refLabel-ctgB')
-    expect(ret1.style.left).toBe('-1px')
-    expect(ret2.style.left).toBe('101px')
-  })
-  it('renders two regions when scrolled to the left, the label is ctgA to the actual blocks', () => {
-    const session = createTestSession({
-      views: [
-        {
-          type: 'LinearGenomeView',
-          offsetPx: -100,
-          bpPerPx: 1,
-          displayedRegions: [
-            { assemblyName: 'volvox', refName: 'ctgA', start: 0, end: 100 },
-            { assemblyName: 'volvox', refName: 'ctgB', start: 0, end: 100 },
-          ],
-          tracks: [],
-          configuration: {},
-        },
-      ],
-    }) as any
-    session.addAssemblyConf({
-      name: 'volMyt1',
-      sequence: {
-        trackId: 'ref0',
-        type: 'ReferenceSequenceTrack',
-        adapter: {
-          type: 'FromConfigSequenceAdapter',
-          features: [
-            {
-              refName: 'ctgA',
-              uniqueId: 'firstId',
-              start: 0,
-              end: 10,
-              seq: 'cattgttgcg',
-            },
-          ],
-        },
-      },
-    })
-    const model = session.views[0]
-    const { getByTestId } = render(<Scalebar model={model} />)
-    const ret1 = getByTestId('refLabel-ctgA')
-    const ret2 = getByTestId('refLabel-ctgB')
-    expect(ret1.style.left).toBe('99px')
-    expect(ret2.style.left).toBe('201px')
-  })
-
-  it('renders two regions when scrolled to the left, the label is ctgA to the actual blocks', () => {
-    const session = createTestSession({
-      views: [
-        {
-          type: 'LinearGenomeView',
-          offsetPx: -100,
-          bpPerPx: 1,
-          displayedRegions: [
-            { assemblyName: 'volvox', refName: 'ctgA', start: 0, end: 1000 },
-            { assemblyName: 'volvox', refName: 'ctgB', start: 0, end: 1 },
-            { assemblyName: 'volvox', refName: 'ctgC', start: 0, end: 1 },
-            { assemblyName: 'volvox', refName: 'ctgD', start: 0, end: 1 },
-          ],
-          tracks: [],
-          configuration: {},
-        },
-      ],
-    }) as any
-    session.addAssemblyConf({
-      name: 'volMyt1',
-      sequence: {
-        trackId: 'ref0',
-        type: 'ReferenceSequenceTrack',
-        adapter: {
-          type: 'FromConfigSequenceAdapter',
-          features: [
-            {
-              refName: 'ctgA',
-              uniqueId: 'firstId',
-              start: 0,
-              end: 10,
-              seq: 'cattgttgcg',
-            },
-          ],
-        },
-      },
-    })
-    const model = session.views[0]
-    const { queryByTestId } = render(<Scalebar model={model} />)
-    const ret2 = queryByTestId('refLabel-ctgB')
-    const ret3 = queryByTestId('refLabel-ctgC')
-    const ret4 = queryByTestId('refLabel-ctgD')
-    expect(ret2).toBe(null)
-    expect(ret3).toBe(null)
-    expect(ret4).toBe(null)
-  })
-})