@apollo-annotation/jbrowse-plugin-apollo 0.1.0

package/src/components/OntologyTermMultiSelect.tsx

@@ -0,0 +1,349 @@
+import { isAbortException } from '@jbrowse/core/util'
+import {
+  Autocomplete,
+  AutocompleteRenderGetTagProps,
+  Chip,
+  Grid,
+  TextField,
+  Tooltip,
+  Typography,
+} from '@mui/material'
+import { debounce } from '@mui/material/utils'
+import highlightMatch from 'autosuggest-highlight/match'
+import highlightParse from 'autosuggest-highlight/parse'
+import { getParent } from 'mobx-state-tree'
+import * as React from 'react'
+
+import {
+  OntologyManager,
+  OntologyRecord,
+  OntologyTerm,
+  isOntologyClass,
+} from '../OntologyManager'
+import { Match } from '../OntologyManager/OntologyStore/fulltext'
+import { isDeprecated } from '../OntologyManager/OntologyStore/indexeddb-schema'
+import { ApolloSessionModel } from '../session'
+
+interface TermValue {
+  term: OntologyTerm
+  matches?: Match[]
+}
+
+// interface TermAutocompleteResult extends TermValue {
+//   label: string[]
+//   match: string
+//   category: string[]
+//   taxon: string
+//   taxon_label: string
+//   highlight: string
+//   has_highlight: boolean
+// }
+
+// interface TermAutocompleteResponse {
+//   docs: TermAutocompleteResult[]
+// }
+
+// const hiliteRegex = /(?<=<em class="hilite">)(.*?)(?=<\/em>)/g
+
+function TermTagWithTooltip({
+  getTagProps,
+  index,
+  ontology,
+  termId,
+}: {
+  termId: string
+  index: number
+  getTagProps: AutocompleteRenderGetTagProps
+  ontology: OntologyRecord
+}) {
+  const manager = getParent<OntologyManager>(ontology, 2)
+
+  const [description, setDescription] = React.useState('')
+  const [errorMessage, setErrorMessage] = React.useState('')
+
+  React.useEffect(() => {
+    const controller = new AbortController()
+    const { signal } = controller
+    async function fetchDescription() {
+      const termUrl = manager.expandPrefixes(termId)
+      const db = await ontology.dataStore?.db
+      if (!db || signal.aborted) {
+        return
+      }
+      const term = await db
+        .transaction('nodes')
+        .objectStore('nodes')
+        .get(termUrl)
+
+      if (term && term.lbl && !signal.aborted) {
+        setDescription(term.lbl || 'no label')
+      }
+    }
+    fetchDescription().catch((error) => {
+      if (!signal.aborted) {
+        setErrorMessage(String(error))
+      }
+    })
+
+    return () => {
+      controller.abort()
+    }
+  }, [termId, ontology, manager])
+
+  return (
+    <Tooltip title={description}>
+      <div>
+        <Chip
+          label={errorMessage || manager.applyPrefixes(termId)}
+          color={errorMessage ? 'error' : 'default'}
+          size="small"
+          {...getTagProps({ index })}
+        />
+      </div>
+    </Tooltip>
+  )
+}
+
+export function OntologyTermMultiSelect({
+  includeDeprecated,
+  onChange,
+  ontologyName,
+  ontologyVersion,
+  session,
+  value: initialValue,
+}: {
+  session: ApolloSessionModel
+  value: string[]
+  ontologyName: string
+  ontologyVersion?: string
+  /** if true, include deprecated/obsolete terms */
+  includeDeprecated?: boolean
+  onChange(newValue: string[]): void
+}) {
+  const ontologyManager = session.apolloDataStore
+    .ontologyManager as OntologyManager
+  const ontology = ontologyManager.findOntology(ontologyName, ontologyVersion)
+
+  const [value, setValue] = React.useState<TermValue[]>(
+    initialValue.map((id) => ({ term: { id, type: 'CLASS' } })),
+  )
+  const [inputValue, setInputValue] = React.useState('')
+  const [options, setOptions] = React.useState<readonly TermValue[]>([])
+  const [loading, setLoading] = React.useState(false)
+  const [errorMessage, setErrorMessage] = React.useState('')
+
+  const getOntologyTerms = React.useMemo(
+    () =>
+      debounce(
+        async (
+          request: { input: string; signal: AbortSignal },
+          callback: (results: TermValue[]) => void,
+        ) => {
+          if (!ontology) {
+            return
+          }
+          const { dataStore } = ontology
+          if (!dataStore) {
+            return
+          }
+          const { input, signal } = request
+          try {
+            const matches = await dataStore.getTermsByFulltext(
+              input,
+              undefined,
+              signal,
+            )
+            // aggregate the matches by term
+            const byTerm = new Map<string, Required<TermValue>>()
+            const options: Required<TermValue>[] = []
+            for (const match of matches) {
+              if (
+                !isOntologyClass(match.term) ||
+                (!includeDeprecated && isDeprecated(match.term))
+              ) {
+                continue
+              }
+              let slot = byTerm.get(match.term.id)
+              if (!slot) {
+                slot = { term: match.term, matches: [] }
+                byTerm.set(match.term.id, slot)
+                options.push(slot)
+              }
+              slot.matches.push(match)
+            }
+            callback(options)
+          } catch (error) {
+            if (!isAbortException(error)) {
+              setErrorMessage(String(error))
+            }
+          }
+        },
+        400,
+      ),
+    [includeDeprecated, ontology],
+  )
+
+  React.useEffect(() => {
+    const aborter = new AbortController()
+    const { signal } = aborter
+
+    if (inputValue === '') {
+      setOptions([])
+      return
+    }
+
+    setLoading(true)
+
+    void getOntologyTerms({ input: inputValue, signal }, (results) => {
+      let newOptions: readonly TermValue[] = []
+      if (value.length > 0) {
+        newOptions = value
+      }
+      if (results) {
+        newOptions = [...newOptions, ...results]
+      }
+      setOptions(newOptions)
+      setLoading(false)
+    })
+
+    return () => {
+      aborter.abort()
+    }
+  }, [getOntologyTerms, ontology, includeDeprecated, inputValue, value])
+
+  if (!ontology) {
+    return null
+  }
+
+  const extraTextFieldParams: { error?: boolean; helperText?: string } = {}
+  if (errorMessage) {
+    extraTextFieldParams.error = true
+    extraTextFieldParams.helperText = errorMessage
+  }
+
+  return (
+    <Autocomplete
+      getOptionLabel={(option) => ontologyManager.applyPrefixes(option.term.id)}
+      filterOptions={(terms) => terms.filter((t) => isOntologyClass(t.term))}
+      options={options}
+      autoComplete
+      includeInputInList
+      filterSelectedOptions
+      value={value}
+      loading={loading}
+      isOptionEqualToValue={(option, v) =>
+        ontologyManager.applyPrefixes(option.term.id) ===
+        ontologyManager.applyPrefixes(v.term.id)
+      }
+      noOptionsText={inputValue ? 'No matches' : 'Start typing to search'}
+      onChange={(_, newValue) => {
+        setOptions(newValue ? [...newValue, ...options] : options)
+        onChange(newValue.map((v) => ontologyManager.applyPrefixes(v.term.id)))
+        setValue(newValue)
+      }}
+      onInputChange={(event, newInputValue) => {
+        if (newInputValue) {
+          setLoading(true)
+        }
+        setOptions([])
+        setInputValue(newInputValue)
+      }}
+      multiple
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          {...extraTextFieldParams}
+          variant="outlined"
+          fullWidth
+        />
+      )}
+      renderOption={(props, option) => (
+        <Option
+          {...props}
+          ontologyManager={ontologyManager}
+          option={option}
+          inputValue={inputValue}
+        />
+      )}
+      renderTags={(v, getTagProps) =>
+        v.map((option, index) => (
+          <TermTagWithTooltip
+            termId={option.term.id}
+            index={index}
+            ontology={ontology}
+            getTagProps={getTagProps}
+            key={option.term.id}
+          />
+        ))
+      }
+    />
+  )
+}
+
+function HighlightedText(props: { str: string; search: string }) {
+  const { search, str } = props
+
+  const highlights = highlightMatch(str, search, {
+    insideWords: true,
+    findAllOccurrences: true,
+  })
+  const parts = highlightParse(str, highlights)
+  return (
+    <>
+      {parts.map((part, index) => (
+        <Typography
+          key={index}
+          component="span"
+          sx={{ fontWeight: part.highlight ? 'bold' : 'regular' }}
+          variant="body2"
+          color="text.secondary"
+        >
+          {part.text}
+        </Typography>
+      ))}
+    </>
+  )
+}
+function Option(props: {
+  ontologyManager: OntologyManager
+  inputValue: string
+  option: TermValue
+}) {
+  const { inputValue, ontologyManager, option, ...other } = props
+  const matches = option.matches ?? []
+  const fields = matches
+    .filter((match) => match.field.jsonPath !== '$.lbl')
+    .map((match) => {
+      return (
+        <React.Fragment key={`option-${match.term.id}-${match.str}`}>
+          <Typography component="dt" variant="body2" color="text.secondary">
+            {match.field.displayName}
+          </Typography>
+          <dd>
+            <HighlightedText str={match.str} search={inputValue} />
+          </dd>
+        </React.Fragment>
+      )
+    })
+  // const lblScore = matches
+  //   .filter((match) => match.field.jsonPath === '$.lbl')
+  //   .map((m) => m.score)
+  //   .join(', ')
+  return (
+    <li {...other}>
+      <Grid container>
+        <Grid item>
+          <Typography component="span">
+            {ontologyManager.applyPrefixes(option.term.id)}
+          </Typography>{' '}
+          <HighlightedText
+            str={option.term.lbl ?? '(no label)'}
+            search={inputValue}
+          />{' '}
+          {/* ({lblScore}) */}
+          <dl>{fields}</dl>
+        </Grid>
+      </Grid>
+    </li>
+  )
+}

package/src/components/OpenLocalFile.tsx

@@ -0,0 +1,178 @@
+import { AbstractSessionModel, isElectron } from '@jbrowse/core/util'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  FormControl,
+  FormHelperText,
+  TextField,
+  useTheme,
+} from '@mui/material'
+import { nanoid } from 'nanoid'
+import React, { useState } from 'react'
+
+import { InMemoryFileDriver } from '../BackendDrivers'
+import { ApolloSessionModel } from '../session'
+import { loadAssemblyIntoClient } from '../util'
+import { Dialog } from './Dialog'
+
+interface OpenLocalFileProps {
+  session: ApolloSessionModel
+  handleClose(): void
+  inMemoryFileDriver: InMemoryFileDriver
+}
+
+export interface RefSeqInterface {
+  refName: string
+  uniqueId: string
+  aliases?: string[]
+}
+
+export function OpenLocalFile({ handleClose, session }: OpenLocalFileProps) {
+  const { addApolloTrackConfig, apolloDataStore } = session
+  const { addAssembly, addSessionAssembly, assemblyManager, notify } =
+    session as unknown as AbstractSessionModel & {
+      // eslint-disable-next-line @typescript-eslint/ban-types
+      addSessionAssembly: Function
+    }
+
+  const [file, setFile] = useState<File | null>(null)
+  const [assemblyName, setAssemblyName] = useState('')
+  const [errorMessage, setErrorMessage] = useState('')
+  const [submitted, setSubmitted] = useState(false)
+  const theme = useTheme()
+
+  async function handleChangeFile(e: React.ChangeEvent<HTMLInputElement>) {
+    const selectedFile = e.target.files?.item(0)
+    if (!selectedFile) {
+      return
+    }
+    setErrorMessage('')
+    setFile(selectedFile)
+    if (!assemblyName) {
+      const fileName = selectedFile.name
+      const lastDotIndex = fileName.lastIndexOf('.')
+      if (lastDotIndex === -1) {
+        setAssemblyName(fileName)
+      } else {
+        setAssemblyName(fileName.slice(0, lastDotIndex))
+      }
+    }
+  }
+
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setErrorMessage('')
+    setSubmitted(true)
+
+    if (!file) {
+      throw new Error('No file selected')
+    }
+
+    // Right now we are not using stream because there was a problem with 'pipe' in ReadStream
+    const fileData = await new Response(file).text()
+    const assemblyId = `${assemblyName}-${file.name}-${nanoid(8)}`
+    try {
+      await loadAssemblyIntoClient(assemblyId, fileData, apolloDataStore)
+    } catch (error) {
+      setErrorMessage(String(error))
+      setSubmitted(false)
+    }
+
+    const assemblyConfig = {
+      name: assemblyId,
+      aliases: [assemblyName],
+      displayName: assemblyName,
+      sequence: {
+        trackId: `sequenceConfigId-${assemblyName}`,
+        type: 'ReferenceSequenceTrack',
+        adapter: { type: 'ApolloSequenceAdapter', assemblyId },
+        metadata: {
+          apollo: true,
+          ...(isElectron
+            ? { file: (file as File & { path: string }).path }
+            : {}),
+        },
+      },
+    }
+
+    // Save assembly into session
+    await (addSessionAssembly || addAssembly)(assemblyConfig)
+    const a = await assemblyManager.waitForAssembly(assemblyConfig.name)
+    if (a) {
+      // @ts-expect-error MST type coercion problem?
+      addApolloTrackConfig(a)
+      notify(`Loaded GFF3 ${file?.name}`, 'success')
+    } else {
+      notify(`Error loading GFF3 ${file?.name}`, 'error')
+    }
+    handleClose()
+  }
+
+  function handleAssemblyNameChange(
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) {
+    setAssemblyName(event.target.value)
+  }
+
+  return (
+    <Dialog
+      open
+      title="Open local GFF3 file"
+      handleClose={handleClose}
+      maxWidth={false}
+      data-testid="open-local-file"
+    >
+      <form onSubmit={onSubmit}>
+        <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
+          <FormControl>
+            <div style={{ flexDirection: 'row' }}>
+              <Button
+                variant="contained"
+                component="label"
+                style={{ marginRight: theme.spacing() }}
+              >
+                Choose File
+                <input
+                  type="file"
+                  required
+                  hidden
+                  onChange={handleChangeFile}
+                />
+              </Button>
+              {file ? file.name : 'No file chosen'}
+            </div>
+            <FormHelperText>
+              Make sure your GFF3 has an embedded FASTA section
+            </FormHelperText>
+          </FormControl>
+          <TextField
+            required
+            label="Assembly name"
+            value={assemblyName}
+            onChange={handleAssemblyNameChange}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button disabled={false} variant="contained" type="submit">
+            {submitted ? 'Submitting...' : 'Submit'}
+          </Button>
+          <Button
+            disabled={submitted}
+            variant="outlined"
+            type="submit"
+            onClick={handleClose}
+          >
+            Cancel
+          </Button>
+        </DialogActions>
+      </form>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}