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

package/src/LinearGenomeView/components/OverviewScalebar.tsx

@@ -93,11 +93,14 @@ const Polygon = observer(function ({
   const { tertiary, primary } = theme.palette
   const polygonColor = tertiary ? tertiary.light : primary.light
 
+  // catches possible null from at's below
   if (!contentBlocks.length) {
     return null
   }
-  const first = contentBlocks[0]
-  const last = contentBlocks[contentBlocks.length - 1]
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const first = contentBlocks.at(0)!
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const last = contentBlocks.at(-1)!
   const topLeft =
     (overview.bpToPx({
       ...first,
@@ -238,18 +241,21 @@ const Scalebar = observer(function ({
 
   const { tertiary, primary } = theme.palette
   const scalebarColor = tertiary ? tertiary.light : primary.light
-
+  // catches possible null from at's below
   if (!visibleRegions.length) {
     return null
   }
-  const first = visibleRegions[0]
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const first = visibleRegions.at(0)!
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const last = visibleRegions.at(-1)!
+
   const firstOverviewPx =
     overview.bpToPx({
       ...first,
       coord: first.reversed ? first.end : first.start,
     }) || 0
 
-  const last = visibleRegions[visibleRegions.length - 1]
   const lastOverviewPx =
     overview.bpToPx({
       ...last,

package/src/LinearGenomeView/components/RefNameAutocomplete/AutocompleteTextField.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import {
+  AutocompleteRenderInputParams,
+  TextField,
+  TextFieldProps as TFP,
+} from '@mui/material'
+
+// locals
+import EndAdornment from './EndAdornment'
+
+export default 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)}
+    />
+  )
+}

package/src/LinearGenomeView/components/RefNameAutocomplete/EndAdornment.tsx

@@ -0,0 +1,44 @@
+import React, { Suspense, lazy, useState } from 'react'
+
+import { IconButton, InputAdornment } from '@mui/material'
+
+// icons
+import SearchIcon from '@mui/icons-material/Search'
+import HelpIcon from '@mui/icons-material/Help'
+
+// lazy
+const HelpDialog = lazy(() => import('./HelpDialog'))
+
+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}
+    </>
+  )
+}
+
+export default function EndAdornment({
+  showHelp,
+  endAdornment,
+}: {
+  showHelp?: boolean
+  endAdornment: React.ReactNode
+}) {
+  return (
+    <>
+      <InputAdornment position="end" style={{ marginRight: 7 }}>
+        <SearchIcon fontSize="small" />
+        {showHelp ? <HelpAdornment /> : null}
+      </InputAdornment>
+      {endAdornment}
+    </>
+  )
+}

package/src/LinearGenomeView/components/RefNameAutocomplete/index.tsx

@@ -0,0 +1,160 @@
+import React, { 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, TextFieldProps as TFP } from '@mui/material'
+
+// locals
+import { LinearGenomeViewModel } from '../../model'
+import { getDeduplicatedResult, getFiltered, Option } from './util'
+import AutocompleteTextField from './AutocompleteTextField'
+
+export default observer(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
+
+  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
+            ? assembly?.regions?.map(option => ({
+                result: new RefSequenceResult({
+                  refName: option.refName,
+                  label: option.refName,
+                  matchedAttribute: 'refName',
+                }),
+              })) || []
+            : 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()
+        }
+      />
+    </>
+  )
+})

package/src/LinearGenomeView/components/RefNameAutocomplete/util.ts

@@ -0,0 +1,65 @@
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
+
+export interface Option {
+  group?: string
+  result: BaseResult
+}
+
+// filter so don't need re-filtering
+function filterOptions(options: Option[], searchQuery: string) {
+  return options.filter(
+    ({ result }) =>
+      result.getLabel().toLowerCase().includes(searchQuery) ||
+      result.matchedObject,
+  )
+}
+
+// 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
+export 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',
+            }),
+          },
+        ]
+      : []),
+  ]
+}
+
+export 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
+}
+
+export 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,
+            }),
+          },
+  )
+}

package/src/LinearGenomeView/components/TrackContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useRef } from 'react'
 import { Paper } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
@@ -7,13 +7,13 @@ 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'
+import TrackLabelContainer from './TrackLabelContainer'
+import TrackRenderingContainer from './TrackRenderingContainer'
 
 const useStyles = makeStyles()({
   root: {
@@ -33,55 +33,11 @@ const useStyles = makeStyles()({
     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({
+export default observer(function TrackContainer({
   model,
   track,
 }: {
@@ -90,76 +46,34 @@ function TrackContainer({
 }) {
   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 { draggingTrackId } = model
+  const ref2 = 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)
+      model.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}
+      ref={ref2}
       className={classes.root}
       variant="outlined"
       onClick={event => {
         if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
-          const left = ref.current?.getBoundingClientRect().left || 0
+          const left = ref2.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)}
+      <TrackLabelContainer track={track} view={model} />
+      <ErrorBoundary FallbackComponent={e => <ErrorMessage error={e.error} />}>
+        <TrackRenderingContainer
+          model={model}
+          track={track}
           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}
@@ -175,6 +89,4 @@ function TrackContainer({
       />
     </Paper>
   )
-}
-
-export default observer(TrackContainer)
+})

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -7,13 +7,7 @@ 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'
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 
 // icons
 import MoreVertIcon from '@mui/icons-material/MoreVert'
@@ -71,12 +65,6 @@ const TrackLabel = React.forwardRef<HTMLDivElement, Props>(function (
   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',
@@ -119,23 +107,15 @@ const TrackLabel = React.forwardRef<HTMLDivElement, Props>(function (
         className={classes.trackName}
       >
         <SanitizedHTML
-          html={`${trackName}${minimized ? ' (minimized)' : ''}`}
+          html={[trackName, minimized ? '(minimized)' : '']
+            .filter(f => !!f)
+            .join(' ')}
         />
       </Typography>
-      <IconButton
-        {...bindTrigger(popupState)}
-        className={classes.iconButton}
-        data-testid="track_menu_icon"
-        disabled={items.length === 0}
-      >
+
+      <CascadingMenuButton menuItems={items} data-testid="track_menu_icon">
         <MoreVertIcon fontSize="small" />
-      </IconButton>
-      <CascadingMenu
-        {...bindPopover(popupState)}
-        onMenuItemClick={(_: unknown, callback: Function) => callback()}
-        menuItems={items}
-        popupState={popupState}
-      />
+      </CascadingMenuButton>
     </Paper>
   )
 })

package/src/LinearGenomeView/components/TrackLabelContainer.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+
+// jbrowse core
+import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
+
+// locals
+import { LinearGenomeViewModel } from '..'
+import TrackLabel from './TrackLabel'
+
+const useStyles = makeStyles()({
+  trackLabel: {
+    zIndex: 3,
+  },
+
+  trackLabelOffset: {
+    position: 'relative',
+    display: 'inline-block',
+  },
+  trackLabelOverlap: {
+    position: 'absolute',
+  },
+})
+
+type LGV = LinearGenomeViewModel
+
+const TrackLabelContainer = observer(function ({
+  track,
+  view,
+}: {
+  track: BaseTrackModel
+  view: LGV
+}) {
+  const { classes, cx } = useStyles()
+  const display = track.displays[0]
+  const { trackLabel, trackLabelOverlap, trackLabelOffset } = classes
+  const labelStyle =
+    view.trackLabels !== 'overlapping' || display.prefersOffset
+      ? trackLabelOffset
+      : trackLabelOverlap
+
+  return view.trackLabels !== 'hidden' ? (
+    <TrackLabel track={track} className={cx(trackLabel, labelStyle)} />
+  ) : null
+})
+
+export default TrackLabelContainer