@apollo-annotation/jbrowse-plugin-apollo 0.3.13 → 1.0.1

package/src/BackendDrivers/LocalDriver/LocalDriver.ts

@@ -0,0 +1,370 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/require-await */
+import {
+  type Change,
+  type SerializedChange,
+  checkRegistry,
+  isFeatureChange,
+} from '@apollo-annotation/common'
+import type {
+  AnnotationFeature,
+  AnnotationFeatureSnapshot,
+  CheckResultSnapshot,
+} from '@apollo-annotation/mst'
+import {
+  ValidationResultSet,
+  isDeleteFeatureChange,
+} from '@apollo-annotation/shared'
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import type {
+  BaseRefNameAliasAdapter,
+  BaseSequenceAdapter,
+} from '@jbrowse/core/data_adapters/BaseAdapter'
+import {
+  type AbstractRootModel,
+  type Region,
+  getEnv,
+  getSession,
+} from '@jbrowse/core/util'
+import { getSnapshot } from '@jbrowse/mobx-state-tree'
+
+import type { SubmitOpts } from '../../ChangeManager'
+import {
+  BackendDriver,
+  type ChangeDocument,
+  type GetChangesOpts,
+  type GetChangesResult,
+  type RefNameAliases,
+} from '../BackendDriver'
+
+import { type FeatureDatabase, openDb } from './db'
+
+export class LocalDriver extends BackendDriver {
+  async getFeatures(
+    region: Region,
+  ): Promise<[AnnotationFeatureSnapshot[], CheckResultSnapshot[]]> {
+    const { assemblyName, end, refName, start } = region
+    const regions = await this.getRegions(assemblyName)
+    const refNames = regions.map((r) => r.refName)
+    const db = await openDb(assemblyName, refNames)
+    const featureStoreName = `features-${refName}`
+    const checkStoreName = `checkresults-${refName}`
+    const features: AnnotationFeatureSnapshot[] = []
+    const checkResults: CheckResultSnapshot[] = []
+    const tx = db.transaction([featureStoreName, checkStoreName])
+    for await (const cursor of tx
+      .objectStore(featureStoreName)
+      .index('min')
+      .iterate(IDBKeyRange.upperBound(end, true))) {
+      if ((cursor.value as { max: number }).max > start) {
+        features.push(cursor.value as AnnotationFeatureSnapshot)
+      }
+    }
+    for await (const cursor of tx
+      .objectStore(checkStoreName)
+      .index('min')
+      .iterate(IDBKeyRange.upperBound(end, true))) {
+      if ((cursor.value as { end: number }).end > start) {
+        checkResults.push(cursor.value as CheckResultSnapshot)
+      }
+    }
+    return [features, checkResults]
+  }
+
+  async getSequence(region: Region): Promise<{ seq: string; refSeq: string }> {
+    const session = getSession(this.clientStore)
+    const { assemblyManager } = session
+    const assembly = await assemblyManager.waitForAssembly(region.assemblyName)
+    if (!assembly) {
+      throw new Error(`Assembly not found: "${region.assemblyName}"`)
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const { configuration } = assembly
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+    const { adapter: adapterConf } = configuration.sequence
+    const { pluginManager } = getEnv(this.clientStore)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+    const type = pluginManager.getAdapterType(adapterConf.type)
+    if (!type) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      throw new Error(`No adapter found for "${adapterConf.type}"`)
+    }
+    const CLASS = await type.getAdapterClass()
+    const adapter = new CLASS(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      adapterConf,
+      undefined,
+      pluginManager,
+    ) as BaseSequenceAdapter
+    const seq = await adapter.getSequence({
+      ...region,
+      refName: assembly.getSeqAdapterRefName(region.refName),
+    })
+    if (!seq) {
+      throw new Error(`Sequence not found: ${JSON.stringify(region)}`)
+    }
+    return { seq, refSeq: region.refName }
+  }
+
+  async getRegions(assemblyName: string): Promise<Region[]> {
+    const session = getSession(this.clientStore)
+    const { assemblyManager } = session
+    const assembly = await assemblyManager.waitForAssembly(assemblyName)
+    if (!assembly) {
+      throw new Error(`Assembly not found: "${assemblyName}"`)
+    }
+    const { regions } = assembly
+    if (!regions) {
+      throw new Error(`Assembly not found: "${assemblyName}"`)
+    }
+    return regions
+  }
+
+  getAssemblies(internetAccountConfigId?: string): Assembly[] {
+    return []
+  }
+
+  async getRefNameAliases(assemblyName: string): Promise<RefNameAliases[]> {
+    const session = getSession(this.clientStore)
+    const { assemblyManager } = session
+    const assembly = await assemblyManager.waitForAssembly(assemblyName)
+    if (!assembly) {
+      throw new Error(`Assembly not found: "${assemblyName}"`)
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const { configuration } = assembly
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const { refNameAliases } = configuration
+    if (!refNameAliases) {
+      return []
+    }
+    const { pluginManager } = getEnv(this.clientStore)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+    const type = pluginManager.getAdapterType(refNameAliases.adapter.type)
+    if (!type) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      throw new Error(`No adapter found for "${refNameAliases.adapter.type}"`)
+    }
+    const CLASS = await type.getAdapterClass()
+    const adapter = new CLASS(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+      refNameAliases.adapter,
+      undefined,
+      pluginManager,
+    ) as BaseRefNameAliasAdapter
+    return adapter.getRefNameAliases({})
+  }
+
+  async submitChange(
+    change: Change,
+    opts: SubmitOpts,
+  ): Promise<ValidationResultSet> {
+    if (!isFeatureChange(change)) {
+      return new ValidationResultSet()
+    }
+    const { assembly, changedIds } = change
+    const regions = await this.getRegions(assembly)
+    const refNames = regions.map((r) => r.refName)
+    const db = await openDb(assembly, refNames)
+    const topLevelFeatures = new Set<AnnotationFeature>()
+    const deletedFeatureIds: { refSeq: string; featureId: string }[] = []
+    const neededRefNames = new Set<string>()
+    if (isDeleteFeatureChange(change)) {
+      for (const c of change.changes) {
+        if (c.parentFeatureId) {
+          const feature = this.clientStore.getFeature(c.parentFeatureId)
+          if (feature) {
+            topLevelFeatures.add(feature.topLevelFeature)
+            neededRefNames.add(feature.topLevelFeature.refSeq)
+          }
+        } else {
+          const { refSeq, _id } = c.deletedFeature
+          deletedFeatureIds.push({ refSeq, featureId: _id })
+          neededRefNames.add(refSeq)
+        }
+      }
+    } else {
+      for (const changedId of changedIds) {
+        const feature = this.clientStore.getFeature(changedId)
+        if (feature) {
+          topLevelFeatures.add(feature.topLevelFeature)
+          neededRefNames.add(feature.refSeq)
+        }
+      }
+    }
+    const storeNames = [...neededRefNames].flatMap((r) => [
+      `features-${r}`,
+      `checkresults-${r}`,
+    ])
+    storeNames.push('changes')
+    const tx = db.transaction(storeNames, 'readwrite')
+    for (const { refSeq, featureId } of deletedFeatureIds) {
+      void tx.objectStore(`features-${refSeq}`).delete(featureId)
+    }
+    for (const feature of topLevelFeatures) {
+      const snapshot = getSnapshot<AnnotationFeatureSnapshot>(feature)
+      void tx
+        .objectStore(`features-${feature.refSeq}`)
+        .put(snapshot, feature._id)
+    }
+    // Delete old check results for deleted features
+    for (const { featureId, refSeq } of deletedFeatureIds) {
+      const checkStore = tx.objectStore(`checkresults-${refSeq}`)
+      for await (const cursor of checkStore
+        .index('featureId')
+        .iterate(featureId)) {
+        this.clientStore.deleteCheckResult(
+          (cursor.value as CheckResultSnapshot)._id,
+        )
+        void cursor.delete()
+      }
+    }
+    // Delete old check results for modified features
+    for (const feature of topLevelFeatures) {
+      const checkStore = tx.objectStore(`checkresults-${feature.refSeq}`)
+      for await (const cursor of checkStore
+        .index('featureId')
+        .iterate(feature._id)) {
+        this.clientStore.deleteCheckResult(
+          (cursor.value as CheckResultSnapshot)._id,
+        )
+        void cursor.delete()
+      }
+    }
+    void tx
+      .objectStore('changes')
+      .put({ ...change.toJSON(), createdAt: new Date() })
+    await tx.done
+
+    // Run checks on modified features. Collect all results first since checks
+    // are async (need sequence data) and would cause the transaction to auto-commit.
+    if (topLevelFeatures.size > 0) {
+      const checks = [...checkRegistry.getChecks().values()]
+      const allResults: {
+        refSeq: string
+        result: CheckResultSnapshot
+        topLevelFeatureId: string
+      }[] = []
+      for (const feature of topLevelFeatures) {
+        const snapshot = getSnapshot<AnnotationFeatureSnapshot>(feature)
+        const getSequence = async (start: number, end: number) => {
+          const result = await this.getSequence({
+            assemblyName: assembly,
+            refName: feature.refSeq,
+            start,
+            end,
+          })
+          return result.seq
+        }
+        for (const check of checks) {
+          const results = await check.checkFeature(snapshot, getSequence)
+          for (const result of results) {
+            allResults.push({
+              refSeq: feature.refSeq,
+              result,
+              topLevelFeatureId: feature._id,
+            })
+          }
+        }
+      }
+      if (allResults.length > 0) {
+        const checkStoreNames = refNames.map((r) => `checkresults-${r}`)
+        const checkTx = db.transaction(checkStoreNames, 'readwrite')
+        for (const { refSeq, result, topLevelFeatureId } of allResults) {
+          void checkTx
+            .objectStore(`checkresults-${refSeq}`)
+            .put({ ...result, featureId: topLevelFeatureId })
+        }
+        await checkTx.done
+        // Add new check results to client store
+        for (const { result } of allResults) {
+          this.clientStore.addCheckResult(result)
+        }
+      }
+    }
+
+    return new ValidationResultSet()
+  }
+
+  async searchFeatures(
+    term: string,
+    assemblies: string[],
+  ): Promise<AnnotationFeatureSnapshot[]> {
+    return []
+  }
+
+  async getCheckResults(assemblyName: string): Promise<CheckResultSnapshot[]> {
+    const regions = await this.getRegions(assemblyName)
+    const refNames = regions.map((r) => r.refName)
+    const db = await openDb(assemblyName, refNames)
+    const checkResults: CheckResultSnapshot[] = []
+    const storeNames = refNames.map((r) => `checkresults-${r}`)
+    const tx = db.transaction(storeNames)
+    for (const storeName of storeNames) {
+      for await (const cursor of tx.objectStore(storeName).iterate()) {
+        checkResults.push(cursor.value as CheckResultSnapshot)
+      }
+    }
+    return checkResults
+  }
+
+  async getChanges(
+    assemblyName: string,
+    opts: GetChangesOpts = {},
+  ): Promise<GetChangesResult> {
+    const regions = await this.getRegions(assemblyName)
+    const refNames = regions.map((r) => r.refName)
+    const db = await openDb(assemblyName, refNames)
+    let changes: ChangeDocument[] = []
+    for await (const cursor of db.transaction('changes').store.iterate()) {
+      changes.push({
+        sequence: cursor.key,
+        ...(cursor.value as SerializedChange & { createdAt: string }),
+      })
+    }
+
+    const { filters } = opts
+    if (filters?.user) {
+      const re = new RegExp(filters.user, 'i')
+      changes = changes.filter((c) => c.user !== undefined && re.test(c.user))
+    }
+    if (filters?.typeName) {
+      changes = changes.filter((c) => c.typeName === filters.typeName)
+    }
+    if (filters?.startTime) {
+      const start = new Date(filters.startTime).getTime()
+      changes = changes.filter((c) => new Date(c.createdAt).getTime() >= start)
+    }
+    if (filters?.endTime) {
+      const end = new Date(filters.endTime).getTime()
+      changes = changes.filter((c) => new Date(c.createdAt).getTime() <= end)
+    }
+
+    const totalCount = changes.length
+
+    const sortField = opts.sortField ?? 'sequence'
+    const sortOrder = opts.sortOrder ?? 'desc'
+    const direction = sortOrder === 'asc' ? 1 : -1
+    changes.sort((a, b) => {
+      const aVal = a[sortField as keyof ChangeDocument]
+      const bVal = b[sortField as keyof ChangeDocument]
+      if (aVal === bVal) {
+        return 0
+      }
+      if (aVal === undefined) {
+        return 1
+      }
+      if (bVal === undefined) {
+        return -1
+      }
+      return aVal < bVal ? -direction : direction
+    })
+
+    if (opts.page !== undefined && opts.pageSize !== undefined) {
+      const start = opts.page * opts.pageSize
+      changes = changes.slice(start, start + opts.pageSize)
+    }
+
+    return { changes, totalCount }
+  }
+}

package/src/BackendDrivers/LocalDriver/db.ts

@@ -0,0 +1,37 @@
+import { type IDBPDatabase, openDB } from 'idb/with-async-ittr'
+
+export type FeatureDatabase = IDBPDatabase
+
+export async function openDb(
+  assemblyName: string,
+  refNames: string[],
+): Promise<FeatureDatabase> {
+  const dbName = `Apollo-${assemblyName}`
+  return openDB(dbName, 1, {
+    upgrade(db) {
+      const changesStoreName = 'changes'
+      if (!db.objectStoreNames.contains(changesStoreName)) {
+        db.createObjectStore(changesStoreName, { autoIncrement: true })
+      }
+      for (const refName of refNames) {
+        const storeName = `features-${refName}`
+        if (!db.objectStoreNames.contains(storeName)) {
+          const store = db.createObjectStore(storeName)
+          store.createIndex('min', 'min', { unique: false })
+          store.createIndex('max', 'max', { unique: false })
+        }
+        const checkStoreName = `checkresults-${refName}`
+        if (!db.objectStoreNames.contains(checkStoreName)) {
+          const store = db.createObjectStore(checkStoreName, {
+            keyPath: '_id',
+          })
+          store.createIndex('min', 'start', { unique: false })
+          store.createIndex('max', 'end', { unique: false })
+          store.createIndex('featureId', 'featureId', {
+            unique: false,
+          })
+        }
+      }
+    },
+  })
+}

package/src/BackendDrivers/index.ts

@@ -1,4 +1,3 @@
 export * from './BackendDriver'
+export * from './LocalDriver/LocalDriver'
 export * from './CollaborationServerDriver'
-export * from './InMemoryFileDriver'
-export * from './DesktopFileDriver'

package/src/ChangeManager.ts

@@ -1,9 +1,5 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import {
   type Change,
-  type ClientDataStore,
   isAssemblySpecificChange,
 } from '@apollo-annotation/common'
 import {
@@ -11,9 +7,10 @@ import {
   validationRegistry,
 } from '@apollo-annotation/shared'
 import { getSession } from '@jbrowse/core/util'
-import type { IAnyStateTreeNode } from '@jbrowse/mobx-state-tree'
 
 import type { ApolloSessionModel } from './session'
+import type { ClientDataStoreModel } from './session/ClientDataStore'
+import { changeHandlers, isLocalChange } from './session/changeHandlers'
 
 export interface SubmitOpts {
   /** defaults to true */
@@ -27,7 +24,7 @@ export interface SubmitOpts {
 }
 
 export class ChangeManager {
-  constructor(private dataStore: ClientDataStore & IAnyStateTreeNode) {}
+  constructor(private dataStore: ClientDataStoreModel) {}
 
   recentChanges: Change[] = []
   undoneChanges: Change[] = []
@@ -90,27 +87,31 @@ export class ChangeManager {
       return
     }
 
-    try {
-      // submit to client data store
-      await change.execute(this.dataStore)
-    } catch (error) {
-      if (updateJobsManager) {
-        jobsManager.abortJob(job.name, String(error))
+    const changeName = change.typeName
+    const handler = isLocalChange(changeName)
+      ? changeHandlers[changeName]
+      : undefined
+    if (handler) {
+      try {
+        // submit to client data store
+        // @ts-expect-error change not narrowing
+        await handler(this.dataStore, change)
+      } catch (error) {
+        if (updateJobsManager) {
+          jobsManager.abortJob(job.name, String(error))
+        }
+        console.error(error)
+        session.notify(
+          `Error encountered in client: ${String(error)}. Data may be out of sync, please refresh the page`,
+          'error',
+        )
+        setChangeInProgress(false)
+        return
       }
-      console.error(error)
-      session.notify(
-        `Error encountered in client: ${String(error)}. Data may be out of sync, please refresh the page`,
-        'error',
-      )
-      setChangeInProgress(false)
-      return
     }
 
     // post-validate
-    const results2 = await validationRegistry.frontendPostValidate(
-      change,
-      this.dataStore,
-    )
+    const results2 = await validationRegistry.frontendPostValidate(change)
     if (!results2.ok) {
       // notify of invalid change and revert
       await this.undo(change)
@@ -121,6 +122,7 @@ export class ChangeManager {
         jobsManager.update(job.name, 'Submitting to driver')
       }
       // submit to driver
+      // eslint-disable-next-line @typescript-eslint/unbound-method
       const { collaborationServerDriver, getBackendDriver } = this.dataStore
       const backendDriver = isAssemblySpecificChange(change)
         ? // for assembly-specific change, fall back in case it's an
@@ -136,8 +138,8 @@ export class ChangeManager {
         }
         console.error(error)
         session.notify(String(error), 'error')
-        await this.undo(change, false)
         setChangeInProgress(false)
+        await this.undo(change, false)
         return
       }
       if (!backendResult.ok) {
@@ -146,8 +148,8 @@ export class ChangeManager {
           jobsManager.abortJob(job.name, msg)
         }
         session.notify(msg, 'error')
-        await this.undo(change, false)
         setChangeInProgress(false)
+        await this.undo(change, false)
         return
       }
       if (change.notification) {

package/src/FeatureDetailsWidget/ApolloTranscriptDetailsWidget.tsx

@@ -40,7 +40,7 @@ const useStyles = makeStyles()((theme) => ({
   },
 }))
 
-export const StyledAccordionSummary = styled(AccordionSummary)(() => ({
+const StyledAccordionSummary = styled(AccordionSummary)(() => ({
   minHeight: 30,
   maxHeight: 30,
   '&.Mui-expanded': {

package/src/FeatureDetailsWidget/TranscriptWidgetEditLocation.tsx

@@ -22,6 +22,7 @@ import RemoveIcon from '@mui/icons-material/Remove'
 import {
   Accordion,
   AccordionDetails,
+  AccordionSummary,
   Grid,
   Tooltip,
   Typography,
@@ -33,7 +34,6 @@ import type { OntologyRecord } from '../OntologyManager'
 import type { ApolloSessionModel } from '../session'
 import { copyToClipboard } from '../util/copyToClipboard'
 
-import { StyledAccordionSummary } from './ApolloTranscriptDetailsWidget'
 import { NumberTextField } from './NumberTextField'
 
 const StyledTextField = styled(NumberTextField)(() => ({
@@ -64,6 +64,15 @@ const SequenceContainer = styled('div')({
   },
 })
 
+const StyledAccordionSummary = styled(AccordionSummary)(() => ({
+  minHeight: 30,
+  maxHeight: 30,
+  '&.Mui-expanded': {
+    minHeight: 30,
+    maxHeight: 30,
+  },
+}))
+
 const Strand = (props: { strand: 1 | -1 | undefined }) => {
   const { strand } = props
 
@@ -951,61 +960,11 @@ export const TranscriptWidgetEditLocation = observer(
       <div>
         {cdsPresent && (
           <div>
-            <Accordion>
-              <StyledAccordionSummary
-                expandIcon={<ExpandMoreIcon style={{ color: 'white' }} />}
-                aria-controls="panel1-content"
-                id="panel1-header"
-              >
-                <Typography component="span" fontWeight={'bold'}>
-                  Translation
-                </Typography>
-              </StyledAccordionSummary>
-              <AccordionDetails>
-                <SequenceContainer>
-                  <Typography
-                    component={'span'}
-                    ref={seqRef}
-                    style={{ maxHeight: 120, overflowY: 'scroll' }}
-                  >
-                    {getTranslationSequence()}
-                  </Typography>
-                </SequenceContainer>
-                <div
-                  style={{
-                    marginTop: 10,
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 10,
-                  }}
-                >
-                  <Tooltip title="Copy">
-                    <button
-                      onClick={onCopyClick}
-                      style={{ border: 'none', background: 'none', padding: 0 }}
-                      disabled={changeInProgress}
-                    >
-                      <ContentCopyIcon style={{ fontSize: 15 }} />
-                    </button>
-                  </Tooltip>
-                  <Tooltip title="Trim">
-                    <button
-                      onClick={trimTranslationSequence}
-                      style={{ border: 'none', background: 'none', padding: 0 }}
-                      disabled={changeInProgress}
-                    >
-                      <ContentCutIcon style={{ fontSize: 15 }} />
-                    </button>
-                  </Tooltip>
-                </div>
-              </AccordionDetails>
-            </Accordion>
             <Grid
               container
               justifyContent="center"
               alignItems="center"
-              style={{ textAlign: 'center', marginTop: 10 }}
+              style={{ textAlign: 'center' }}
             >
               <Grid size={1} />
               {strand === 1 ? (
@@ -1089,7 +1048,10 @@ export const TranscriptWidgetEditLocation = observer(
             </Grid>
           </div>
         )}
-        <div style={{ marginTop: 5 }}>
+        <div style={{ marginTop: 5, marginBottom: 10 }}>
+          <div style={{ textAlign: 'center' }}>
+            <Typography>Exons</Typography>
+          </div>
           {transcriptExonParts.map((loc, index) => {
             return (
               <div key={index}>
@@ -1203,6 +1165,60 @@ export const TranscriptWidgetEditLocation = observer(
             )
           })}
         </div>
+        {cdsPresent && (
+          <div>
+            <Accordion>
+              <StyledAccordionSummary
+                expandIcon={<ExpandMoreIcon style={{ color: 'white' }} />}
+                aria-controls="panel1-content"
+                id="panel1-header"
+              >
+                <Typography component="span" fontWeight={'bold'}>
+                  Translation
+                </Typography>
+              </StyledAccordionSummary>
+              <AccordionDetails>
+                <SequenceContainer>
+                  <Typography
+                    component={'span'}
+                    ref={seqRef}
+                    style={{ maxHeight: 120, overflowY: 'scroll' }}
+                  >
+                    {getTranslationSequence()}
+                  </Typography>
+                </SequenceContainer>
+                <div
+                  style={{
+                    marginTop: 10,
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 10,
+                  }}
+                >
+                  <Tooltip title="Copy">
+                    <button
+                      onClick={onCopyClick}
+                      style={{ border: 'none', background: 'none', padding: 0 }}
+                      disabled={changeInProgress}
+                    >
+                      <ContentCopyIcon style={{ fontSize: 15 }} />
+                    </button>
+                  </Tooltip>
+                  <Tooltip title="Trim">
+                    <button
+                      onClick={trimTranslationSequence}
+                      style={{ border: 'none', background: 'none', padding: 0 }}
+                      disabled={changeInProgress}
+                    >
+                      <ContentCutIcon style={{ fontSize: 15 }} />
+                    </button>
+                  </Tooltip>
+                </div>
+              </AccordionDetails>
+            </Accordion>
+          </div>
+        )}
       </div>
     )
   },