@apollo-annotation/jbrowse-plugin-apollo 0.1.0

package/src/TabularEditor/HybridGrid/Feature.tsx

@@ -0,0 +1,346 @@
+import { AbstractSessionModel } from '@jbrowse/core/util'
+import { AnnotationFeatureI } from 'apollo-mst'
+import { observer } from 'mobx-react'
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { OntologyTermAutocomplete } from '../../components/OntologyTermAutocomplete'
+import { isOntologyClass } from '../../OntologyManager'
+import OntologyStore from '../../OntologyManager/OntologyStore'
+import { DisplayStateModel } from '../types'
+import {
+  handleFeatureEndChange,
+  handleFeatureStartChange,
+  handleFeatureTypeChange,
+} from './ChangeHandling'
+import { FeatureAttributes } from './FeatureAttributes'
+import { featureContextMenuItems } from './featureContextMenuItems'
+import type { ContextMenuState } from './HybridGrid'
+import { NumberCell } from './NumberCell'
+
+const useStyles = makeStyles()((theme) => ({
+  typeContent: {
+    display: 'inline-block',
+    width: '174px',
+    height: '100%',
+    cursor: 'text',
+  },
+  feature: {
+    td: {
+      position: 'relative',
+      verticalAlign: 'top',
+      paddingLeft: '0.5em',
+    },
+  },
+  arrow: {
+    display: 'inline-block',
+    width: '1.6em',
+    textAlign: 'center',
+    cursor: 'pointer',
+  },
+  arrowExpanded: {
+    transform: 'rotate(90deg)',
+  },
+  hoveredFeature: {
+    backgroundColor: theme.palette.action.hover,
+  },
+  typeInputElement: {
+    border: 'none',
+    background: 'none',
+  },
+  typeErrorMessage: {
+    color: 'red',
+  },
+}))
+
+function makeContextMenuItems(
+  display: DisplayStateModel,
+  feature: AnnotationFeatureI,
+) {
+  const {
+    changeManager,
+    getAssemblyId,
+    regions,
+    selectedFeature,
+    session,
+    setSelectedFeature,
+  } = display
+  return featureContextMenuItems(
+    feature,
+    regions[0],
+    getAssemblyId,
+    selectedFeature,
+    setSelectedFeature,
+    session,
+    changeManager,
+  )
+}
+
+function getTopLevelFeature(feature: AnnotationFeatureI): AnnotationFeatureI {
+  let cur = feature
+  while (cur.parent) {
+    cur = cur.parent
+  }
+  return cur
+}
+
+export const Feature = observer(function Feature({
+  depth,
+  feature,
+  isHovered,
+  isSelected,
+  model: displayState,
+  selectedFeatureClass,
+  setContextMenu,
+}: {
+  model: DisplayStateModel
+  feature: AnnotationFeatureI
+  depth: number
+  isHovered: boolean
+  isSelected: boolean
+  selectedFeatureClass: string
+  setContextMenu: (menu: ContextMenuState) => void
+}) {
+  const { classes } = useStyles()
+  const {
+    apolloHover,
+    changeManager,
+    selectedFeature,
+    session,
+    tabularEditor: tabularEditorState,
+  } = displayState
+  const { featureCollapsed, filterText } = tabularEditorState
+  const {
+    _id,
+    children,
+    discontinuousLocations,
+    end,
+    phase,
+    start,
+    strand,
+    type,
+  } = feature
+  const expanded = !featureCollapsed.get(_id)
+  const toggleExpanded = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    tabularEditorState.setFeatureCollapsed(_id, expanded)
+  }
+
+  // pop up a snackbar in the session notifying user of an error
+  const notifyError = (e: Error) =>
+    (session as unknown as AbstractSessionModel).notify(e.message, 'error')
+
+  return (
+    <>
+      <tr
+        onMouseEnter={(_e) => {
+          displayState.setApolloHover({
+            feature,
+            topLevelFeature: getTopLevelFeature(feature),
+          })
+        }}
+        className={
+          classes.feature +
+          (isSelected
+            ? ` ${selectedFeatureClass}`
+            : isHovered
+            ? ` ${classes.hoveredFeature}`
+            : '')
+        }
+        onClick={(e) => {
+          e.stopPropagation()
+          displayState.setSelectedFeature(feature)
+        }}
+        onContextMenu={(e) => {
+          e.preventDefault()
+          setContextMenu({
+            position: { left: e.clientX + 2, top: e.clientY - 6 },
+            items: makeContextMenuItems(displayState, feature),
+          })
+          return false
+        }}
+      >
+        <td
+          style={{
+            whiteSpace: 'nowrap',
+            borderLeft: `${depth * 2}em solid transparent`,
+          }}
+        >
+          {children?.size ? (
+            // TODO: a11y
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+            <div
+              onClick={toggleExpanded}
+              className={
+                classes.arrow + (expanded ? ` ${classes.arrowExpanded}` : '')
+              }
+            >
+              ❯
+            </div>
+          ) : null}
+          <div className={classes.typeContent}>
+            <OntologyTermAutocomplete
+              session={session}
+              ontologyName="Sequence Ontology"
+              style={{ width: 170 }}
+              value={type}
+              filterTerms={isOntologyClass}
+              fetchValidTerms={fetchValidTypeTerms.bind(null, feature)}
+              renderInput={(params) => {
+                return (
+                  <div ref={params.InputProps.ref}>
+                    <input
+                      type="text"
+                      {...params.inputProps}
+                      className={classes.typeInputElement}
+                      style={{ width: 170 }}
+                    />
+                    {params.error ? (
+                      <div className={classes.typeErrorMessage}>
+                        {params.errorMessage ?? 'unknown error'}
+                      </div>
+                    ) : null}
+                  </div>
+                )
+              }}
+              onChange={(oldValue, newValue) => {
+                if (newValue) {
+                  handleFeatureTypeChange(
+                    changeManager,
+                    feature,
+                    oldValue,
+                    newValue,
+                  ).catch(notifyError)
+                }
+              }}
+            />
+          </div>
+        </td>
+        <td>
+          {discontinuousLocations && discontinuousLocations.length > 0 ? (
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              {discontinuousLocations.map((loc, index) => (
+                <NumberCell
+                  key={`${_id}:${loc.start},${loc.phase}`}
+                  initialValue={loc.start + 1}
+                  notifyError={notifyError}
+                  onChangeCommitted={(newStart) =>
+                    handleFeatureStartChange(
+                      changeManager,
+                      feature,
+                      discontinuousLocations[index].start,
+                      newStart - 1,
+                      index,
+                    )
+                  }
+                />
+              ))}
+            </div>
+          ) : (
+            <NumberCell
+              initialValue={start + 1}
+              notifyError={notifyError}
+              onChangeCommitted={(newStart) =>
+                handleFeatureStartChange(
+                  changeManager,
+                  feature,
+                  start,
+                  newStart - 1,
+                )
+              }
+            />
+          )}
+        </td>
+        <td>
+          {discontinuousLocations && discontinuousLocations.length > 0 ? (
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              {discontinuousLocations.map((loc, index) => (
+                <NumberCell
+                  key={`${_id}:${loc.end},${loc.phase}`}
+                  initialValue={loc.end}
+                  notifyError={notifyError}
+                  onChangeCommitted={(newEnd) =>
+                    handleFeatureEndChange(
+                      changeManager,
+                      feature,
+                      discontinuousLocations[index].end,
+                      newEnd,
+                      index,
+                    )
+                  }
+                />
+              ))}
+            </div>
+          ) : (
+            <NumberCell
+              initialValue={end}
+              notifyError={notifyError}
+              onChangeCommitted={(newEnd) =>
+                handleFeatureEndChange(changeManager, feature, end, newEnd)
+              }
+            />
+          )}
+        </td>
+        <td>{strand === 1 ? '+' : strand === -1 ? '-' : undefined}</td>
+        <td>{phase}</td>
+        <td>
+          <FeatureAttributes filterText={filterText} feature={feature} />
+        </td>
+      </tr>
+      {expanded && children
+        ? [...children.entries()]
+            .filter((entry) => {
+              if (!filterText) {
+                return true
+              }
+              const [, childFeature] = entry
+              // search feature and its subfeatures for the text
+              const text = JSON.stringify(childFeature)
+              return text.includes(filterText)
+            })
+            .map(([featureId, childFeature]) => {
+              const childHovered =
+                apolloHover?.feature?._id === childFeature._id
+              const childSelected = selectedFeature?._id === childFeature._id
+              return (
+                <Feature
+                  isHovered={childHovered}
+                  isSelected={childSelected}
+                  selectedFeatureClass={selectedFeatureClass}
+                  key={featureId}
+                  depth={(depth || 0) + 1}
+                  feature={childFeature}
+                  model={displayState}
+                  setContextMenu={setContextMenu}
+                />
+              )
+            })
+        : null}
+    </>
+  )
+})
+async function fetchValidTypeTerms(
+  feature: AnnotationFeatureI,
+  ontologyStore: OntologyStore,
+  _signal: AbortSignal,
+) {
+  const { parent: parentFeature } = feature
+  if (parentFeature) {
+    // if this is a child of an existing feature, restrict the autocomplete choices to valid
+    // parts of that feature
+    const parentTypeTerms = await ontologyStore.getTermsWithLabelOrSynonym(
+      parentFeature.type,
+      { includeSubclasses: false },
+    )
+    // eslint-disable-next-line unicorn/no-array-callback-reference
+    const parentTypeClassTerms = parentTypeTerms.filter(isOntologyClass)
+    if (parentTypeClassTerms.length > 0) {
+      const subpartTerms = await ontologyStore.getClassesThat(
+        'part_of',
+        parentTypeClassTerms,
+      )
+      return subpartTerms
+    }
+  }
+  return
+}

package/src/TabularEditor/HybridGrid/FeatureAttributes.tsx

@@ -0,0 +1,34 @@
+import { AnnotationFeatureI } from 'apollo-mst'
+import { observer } from 'mobx-react'
+import { getSnapshot } from 'mobx-state-tree'
+import React from 'react'
+
+import Highlight from './Highlight'
+
+export const FeatureAttributes = observer(function FeatureAttributes({
+  feature,
+  filterText,
+}: {
+  feature: AnnotationFeatureI
+  filterText: string
+}) {
+  const attrString = [...feature.attributes.entries()]
+    .map(([key, value]) => {
+      if (key.startsWith('gff_')) {
+        const newKey = key.slice(4)
+        const capitalizedKey = newKey.charAt(0).toUpperCase() + newKey.slice(1)
+        return [capitalizedKey, getSnapshot(value)]
+      }
+      if (key === '_id') {
+        return ['ID', getSnapshot(value)]
+      }
+      return [key, getSnapshot(value)]
+    })
+    .map(
+      ([key, values]) =>
+        `${key}=${Array.isArray(values) ? values.join(', ') : values}`,
+    )
+    .join(', ')
+
+  return <Highlight text={attrString} highlight={filterText} />
+})

package/src/TabularEditor/HybridGrid/Highlight.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()({
+  highlighted: {
+    background: 'orange',
+  },
+})
+
+const Highlight = ({
+  highlight,
+  text,
+}: {
+  text: string
+  highlight: string
+}) => {
+  const { classes } = useStyles()
+  if (!highlight) {
+    return <>{text}</>
+  }
+  const split = text.split(highlight)
+  if (split.length === 1) {
+    return <>{text}</>
+  }
+  const highlighted: React.ReactNode[] = []
+  for (let i = 0; i < split.length - 1; i++) {
+    highlighted.push(
+      split[i],
+      <span className={classes.highlighted}>{highlight}</span>,
+    )
+  }
+  return (
+    <>
+      {highlighted}
+      {split.at(-1)}
+    </>
+  )
+}
+
+export default Highlight

package/src/TabularEditor/HybridGrid/HybridGrid.tsx

@@ -0,0 +1,138 @@
+import { Menu, MenuItem } from '@jbrowse/core/ui'
+import { useTheme } from '@mui/material'
+import { observer } from 'mobx-react'
+import React, { useEffect, useRef, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { DisplayStateModel } from '../types'
+import { Feature } from './Feature'
+
+const useStyles = makeStyles()((theme) => ({
+  scrollableTable: {
+    width: '100%',
+    height: '100%',
+    th: {
+      position: 'sticky',
+      top: 0,
+      zIndex: 2,
+      textAlign: 'left',
+      background: theme.palette.background.paper,
+      paddingTop: '3.2em',
+    },
+    td: { whiteSpace: 'normal' },
+  },
+  selectedFeature: {
+    backgroundColor: theme.palette.action.selected,
+  },
+}))
+
+export type ContextMenuState = null | {
+  position: { top: number; left: number }
+  items: MenuItem[]
+}
+
+const HybridGrid = observer(function HybridGrid({
+  model,
+}: {
+  model: DisplayStateModel
+}) {
+  const { apolloHover, seenFeatures, selectedFeature, tabularEditor } = model
+  const theme = useTheme()
+  const { classes } = useStyles()
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const [contextMenu, setContextMenu] = useState<ContextMenuState>(null)
+
+  const { filterText } = tabularEditor
+
+  // scrolls to selected feature if one is selected and it's not already visible
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current
+    if (scrollContainer && selectedFeature) {
+      const selectedRow = scrollContainer.querySelector(
+        `.${classes.selectedFeature}`,
+      ) as HTMLElement | null
+      if (selectedRow) {
+        const currScroll = scrollContainer.scrollTop
+        const newScrollTop = selectedRow.offsetTop - 25
+        const isVisible =
+          newScrollTop > currScroll &&
+          newScrollTop < currScroll + scrollContainer.offsetHeight
+        if (!isVisible) {
+          scrollContainer.scroll({ top: newScrollTop - 40, behavior: 'smooth' })
+        }
+      }
+    }
+  }, [selectedFeature, seenFeatures, classes.selectedFeature])
+
+  return (
+    <div
+      ref={scrollContainerRef}
+      style={{ width: '100%', overflowY: 'auto', height: '100%' }}
+    >
+      <table className={classes.scrollableTable}>
+        <thead>
+          <tr>
+            <th>Type</th>
+            <th>Start</th>
+            <th>End</th>
+            <th>Strand</th>
+            <th>Phase</th>
+            <th>Attributes</th>
+          </tr>
+        </thead>
+        <tbody>
+          {[...seenFeatures.entries()]
+            .filter((entry) => {
+              if (!filterText) {
+                return true
+              }
+              const [, feature] = entry
+              // search feature and its subfeatures for the text
+              const text = JSON.stringify(feature)
+              return text.includes(filterText)
+            })
+            .sort((a, b) => {
+              return a[1].start - b[1].start
+            })
+            .map(([featureId, feature]) => {
+              const isSelected = selectedFeature?._id === featureId
+              const isHovered = apolloHover?.feature?._id === featureId
+              return (
+                <Feature
+                  key={featureId}
+                  isSelected={isSelected}
+                  isHovered={isHovered}
+                  selectedFeatureClass={classes.selectedFeature}
+                  feature={feature}
+                  model={model}
+                  depth={0}
+                  setContextMenu={setContextMenu}
+                />
+              )
+            })}
+        </tbody>
+      </table>
+      <Menu
+        open={Boolean(contextMenu)}
+        onMenuItemClick={(_, callback) => {
+          callback()
+          setContextMenu(null)
+        }}
+        onClose={() => {
+          setContextMenu(null)
+        }}
+        TransitionProps={{
+          onExit: () => {
+            setContextMenu(null)
+          },
+        }}
+        style={{ zIndex: theme.zIndex.tooltip }}
+        menuItems={contextMenu?.items ?? []}
+        anchorReference="anchorPosition"
+        anchorPosition={contextMenu?.position}
+      />
+    </div>
+  )
+})
+
+export default HybridGrid

package/src/TabularEditor/HybridGrid/NumberCell.tsx

@@ -0,0 +1,77 @@
+import { observer } from 'mobx-react'
+import React, { useEffect, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()((theme) => ({
+  inputWrapper: {
+    position: 'relative',
+  },
+  hiddenWidthSpan: {
+    padding: theme.spacing(0.5),
+    color: 'transparent',
+  },
+  numberTextInput: {
+    border: 'none',
+    background: 'inherit',
+    font: 'inherit',
+    position: 'absolute',
+    width: '100%',
+    left: 0,
+  },
+}))
+
+interface NumberCellProps {
+  initialValue: number
+  notifyError(error: Error): void
+  onChangeCommitted(newValue: number): Promise<void>
+}
+
+export const NumberCell = observer(function NumberCell({
+  initialValue,
+  notifyError,
+  onChangeCommitted,
+}: NumberCellProps) {
+  const [value, setValue] = useState(initialValue)
+  const [blur, setBlur] = useState(false)
+  const [inputNode, setInputNode] = useState<HTMLInputElement | null>(null)
+  const { classes } = useStyles()
+  useEffect(() => {
+    if (blur) {
+      inputNode?.blur()
+      setBlur(false)
+    }
+  }, [blur, inputNode])
+  function onChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const newValue = Number(event.target.value)
+    if (!Number.isNaN(newValue)) {
+      setValue(newValue)
+    }
+  }
+  return (
+    <span className={classes.inputWrapper}>
+      <span className={classes.hiddenWidthSpan} aria-hidden>
+        {value}
+      </span>
+      <input
+        type="text"
+        value={value}
+        className={classes.numberTextInput}
+        onChange={onChange}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            inputNode?.blur()
+          } else if (event.key === 'Escape') {
+            setValue(initialValue)
+            setBlur(true)
+          }
+        }}
+        onBlur={() => {
+          if (value !== initialValue) {
+            onChangeCommitted(value).catch(notifyError)
+          }
+        }}
+        ref={(node) => setInputNode(node)}
+      />
+    </span>
+  )
+})

package/src/TabularEditor/HybridGrid/ToolBar.tsx

@@ -0,0 +1,59 @@
+import ClearIcon from '@mui/icons-material/Clear'
+import UnfoldLessIcon from '@mui/icons-material/UnfoldLess'
+import { IconButton, InputAdornment, TextField, Tooltip } from '@mui/material'
+import { observer } from 'mobx-react'
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { DisplayStateModel } from '../types'
+
+const useStyles = makeStyles()({
+  toolbar: {
+    width: '100%',
+    display: 'flex',
+    paddingRight: '2em',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    position: 'absolute',
+    zIndex: 4,
+  },
+  filterText: {},
+})
+export const ToolBar = observer(function ToolBar({
+  model: displayState,
+}: {
+  model: DisplayStateModel
+}) {
+  const model = displayState.tabularEditor
+  const { classes } = useStyles()
+  return (
+    <div className={classes.toolbar}>
+      <Tooltip title="Collapse all">
+        <IconButton
+          aria-label="collapse"
+          sx={{ marginTop: 0 }}
+          onClick={model.collapseAllFeatures}
+        >
+          <UnfoldLessIcon />
+        </IconButton>
+      </Tooltip>
+      <TextField
+        className={classes.filterText}
+        label="Filter features"
+        value={model.filterText}
+        sx={{ marginTop: 0 }}
+        variant="outlined"
+        onChange={(event) => model.setFilterText(event.target.value)}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton onClick={() => model.clearFilterText()}>
+                <ClearIcon />
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
+      />
+    </div>
+  )
+})