@apollo-annotation/jbrowse-plugin-apollo 0.3.5 → 0.3.7

package/src/FeatureDetailsWidget/DefaultAttributeEditor.tsx

@@ -0,0 +1,104 @@
+import AddBoxIcon from '@mui/icons-material/AddBox'
+import DeleteIcon from '@mui/icons-material/Delete'
+import { Button, DialogActions, IconButton } from '@mui/material'
+import { observer } from 'mobx-react'
+import React, { useState } from 'react'
+
+import { type ApolloSessionModel } from '../session'
+
+import { StringTextField } from './StringTextField'
+
+export interface AttributeEditorProps {
+  session: ApolloSessionModel
+  attributeValues?: string[]
+  setAttribute: (newAttribute?: string[]) => void
+  isNew?: boolean
+}
+
+export const DefaultAttributeEditor = observer(function DefaultAttributeEditor({
+  attributeValues,
+  setAttribute,
+  isNew = false,
+}: AttributeEditorProps) {
+  const [newValues, setNewValues] = useState<string[]>(
+    attributeValues && attributeValues.length > 0 ? attributeValues : [''],
+  )
+
+  function updateValue(idx: number, newValue: string) {
+    setNewValues((oldValues) => {
+      const newValues = [...oldValues]
+      newValues[idx] = newValue
+      return newValues
+    })
+  }
+  function deleteValue(idx: number) {
+    setNewValues((oldValues) => {
+      const newValues = [...oldValues]
+      newValues.splice(idx, 1)
+      return newValues
+    })
+  }
+  function addValue() {
+    setNewValues((oldValues) => {
+      const newValues = [...oldValues]
+      newValues.push('')
+      return newValues
+    })
+  }
+
+  return (
+    <>
+      {newValues.map((value, idx) => (
+        <div key={`${idx}-${value}`} style={{ display: 'flex' }}>
+          <StringTextField
+            value={value}
+            onChangeCommitted={(editedValue) => {
+              updateValue(idx, editedValue)
+            }}
+            variant="outlined"
+            fullWidth
+          />
+          <IconButton
+            aria-label="delete"
+            size="medium"
+            edge="end"
+            onClick={() => {
+              deleteValue(idx)
+            }}
+          >
+            <DeleteIcon fontSize="inherit" />
+          </IconButton>
+        </div>
+      ))}
+      <IconButton
+        aria-label="add"
+        size="medium"
+        color="secondary"
+        edge="start"
+        onClick={addValue}
+      >
+        <AddBoxIcon fontSize="inherit" />
+      </IconButton>
+      <DialogActions>
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={() => {
+            setAttribute(newValues.filter(Boolean))
+          }}
+        >
+          {isNew ? 'Add' : 'Update'}
+        </Button>
+        <Button
+          variant="outlined"
+          type="submit"
+          onClick={() => {
+            setAttribute()
+          }}
+        >
+          Cancel
+        </Button>
+      </DialogActions>
+    </>
+  )
+})

package/src/FeatureDetailsWidget/DefaultAttributeViewer.tsx

@@ -0,0 +1,22 @@
+import { Typography } from '@mui/material'
+import React from 'react'
+
+export interface AttributeViewerProps {
+  values: string[] | undefined
+}
+
+export function DefaultAttributeViewer({ values }: AttributeViewerProps) {
+  return (
+    <>
+      {values?.map((value, idx) => (
+        <Typography
+          key={`${idx}.${value}`}
+          variant="body2"
+          color="textSecondary"
+        >
+          {value}
+        </Typography>
+      ))}
+    </>
+  )
+}

package/src/FeatureDetailsWidget/FeatureDetailsNavigation.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-
+import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { Button, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
+import React from 'react'
 
-import { AnnotationFeature } from '@apollo-annotation/mst'
-import { ApolloFeatureDetailsWidget as ApolloFeatureDetails } from './model'
 import { getFeatureNameOrId } from '../util'
 
+import { type ApolloFeatureDetailsWidget as ApolloFeatureDetails } from './model'
+
 export const FeatureDetailsNavigation = observer(
   function FeatureDetailsNavigation(props: {
     model: ApolloFeatureDetails

package/src/FeatureDetailsWidget/NumberTextField.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { TextField, TextFieldProps } from '@mui/material'
+import { TextField, type TextFieldProps } from '@mui/material'
 import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
 

package/src/FeatureDetailsWidget/Sequence.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { AnnotationFeature } from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { splitStringIntoChunks } from '@apollo-annotation/shared'
 import { observer } from 'mobx-react'
 import React from 'react'
 import { makeStyles } from 'tss-react/mui'
 
-import { ApolloSessionModel } from '../session'
+import { type ApolloSessionModel } from '../session'
 
 function formatSequence(
   seq: string,

package/src/FeatureDetailsWidget/StringTextField.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { TextField, TextFieldProps } from '@mui/material'
+import { TextField, type TextFieldProps } from '@mui/material'
 import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
 

package/src/FeatureDetailsWidget/TranscriptSequence.tsx

@@ -1,4 +1,4 @@
-import { AnnotationFeature } from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { splitStringIntoChunks } from '@apollo-annotation/shared'
 import { defaultCodonTable, revcom } from '@jbrowse/core/util'
 import {
@@ -6,13 +6,14 @@ import {
   MenuItem,
   Paper,
   Select,
-  SelectChangeEvent,
+  type SelectChangeEvent,
   useTheme,
 } from '@mui/material'
 import { observer } from 'mobx-react'
 import React, { useEffect, useRef, useState } from 'react'
 
-import { ApolloSessionModel } from '../session'
+import { type ApolloSessionModel } from '../session'
+import { copyToClipboard } from '../util/copyToClipboard'
 
 const SEQUENCE_WRAP_LENGTH = 60
 
@@ -112,13 +113,12 @@ function getSequenceSegments(
       const [firstLocation] = cdsLocations
       const locs: { min: number; max: number }[] = []
       for (const loc of firstLocation) {
-        let sequence = getSequence(loc.min, loc.max)
-        if (strand === -1) {
-          sequence = revcom(sequence)
-        }
-        wholeSequence += sequence
+        wholeSequence += getSequence(loc.min, loc.max)
         locs.push({ min: loc.min, max: loc.max })
       }
+      if (strand === -1) {
+        wholeSequence = revcom(wholeSequence)
+      }
       const sequenceLines = splitStringIntoChunks(
         wholeSequence,
         SEQUENCE_WRAP_LENGTH,
@@ -131,13 +131,12 @@ function getSequenceSegments(
       const [firstLocation] = cdsLocations
       const locs: { min: number; max: number }[] = []
       for (const loc of firstLocation) {
-        let sequence = getSequence(loc.min, loc.max)
-        if (strand === -1) {
-          sequence = revcom(sequence)
-        }
-        wholeSequence += sequence
+        wholeSequence += getSequence(loc.min, loc.max)
         locs.push({ min: loc.min, max: loc.max })
       }
+      if (strand === -1) {
+        wholeSequence = revcom(wholeSequence)
+      }
       let protein = ''
       for (let i = 0; i < wholeSequence.length; i += 3) {
         const codonSeq: string = wholeSequence.slice(i, i + 3).toUpperCase()
@@ -275,19 +274,12 @@ export const TranscriptSequence = observer(function TranscriptSequence({
     setLocationIntervals(locIntervals)
   }
 
-  // Function to copy text to clipboard
-  const copyToClipboard = () => {
+  const onCopyClick = () => {
     const seqDiv = seqRef.current
     if (!seqDiv) {
       return
     }
-    const textBlob = new Blob([seqDiv.outerText], { type: 'text/plain' })
-    const htmlBlob = new Blob([seqDiv.outerHTML], { type: 'text/html' })
-    const clipboardItem = new ClipboardItem({
-      [textBlob.type]: textBlob,
-      [htmlBlob.type]: htmlBlob,
-    })
-    void navigator.clipboard.write([clipboardItem])
+    void copyToClipboard(seqDiv)
   }
 
   return (
@@ -306,7 +298,7 @@ export const TranscriptSequence = observer(function TranscriptSequence({
       </Select>
       <Button
         variant="contained"
-        onClick={copyToClipboard}
+        onClick={onCopyClick}
         style={{ marginLeft: 10 }}
         size="medium"
       >