From 73017f05496a4d583f82b3cce499c5c64d00647e Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Mon, 17 Jun 2024 17:28:28 -0400
Subject: [PATCH 1/4] Store feature in sequence feature detail model

---
 .../SequenceFeatureDetails.tsx                | 104 ++++++++++--------
 .../dialogs/SequenceDialog.tsx                |   5 +-
 .../dialogs/SequenceTypeSelector.tsx          |  23 +---
 .../SequenceFeatureDetails/model.ts           |  78 +++++++++++--
 .../seqtypes/CDNASequence.tsx                 |  10 +-
 .../seqtypes/CDSSequence.tsx                  |   4 +-
 .../seqtypes/GenomicSequence.tsx              |   8 +-
 .../seqtypes/ProteinSequence.tsx              |   4 +-
 .../seqtypes/SequenceDisplay.tsx              |  12 +-
 .../SequenceFeatureDetails/util.ts            |  10 +-
 10 files changed, 155 insertions(+), 103 deletions(-)

diff --git a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.tsx b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.tsx
index 92aa113138..171874c53d 100644
--- a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.tsx
+++ b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.tsx
@@ -1,11 +1,11 @@
-import React, { lazy, useRef, useState, Suspense } from 'react'
+import React, { lazy, useRef, useState, Suspense, useEffect } from 'react'
 import { Button, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
 // locals
 import { useFeatureSequence } from './hooks'
 import { ErrorMessage, LoadingEllipses } from '../../ui'
-import { SimpleFeatureSerialized, getSession } from '../../util'
+import { SimpleFeatureSerialized } from '../../util'
 import { BaseFeatureWidgetModel } from '../stateModelFactory'
 
 // icons
@@ -29,6 +29,7 @@ const SequenceFeatureDetails = observer(function ({
   const { upDownBp } = sequenceFeatureDetails
   const seqPanelRef = useRef<HTMLDivElement>(null)
 
+  const [openInDialog, setOpenInDialog] = useState(false)
   const [force, setForce] = useState(false)
   const { sequence, error } = useFeatureSequence(
     model,
@@ -36,15 +37,14 @@ const SequenceFeatureDetails = observer(function ({
     upDownBp,
     force,
   )
+  useEffect(() => {
+    sequenceFeatureDetails.setFeature(feature)
+  }, [sequenceFeatureDetails, feature])
 
   return (
     <>
       <div>
-        <SequenceTypeSelector
-          feature={feature}
-          model={sequenceFeatureDetails}
-        />
-
+        <SequenceTypeSelector model={sequenceFeatureDetails} />
         <SequenceFeatureMenu
           ref={seqPanelRef}
           model={sequenceFeatureDetails}
@@ -52,51 +52,63 @@ const SequenceFeatureDetails = observer(function ({
             {
               label: 'Open in dialog',
               onClick: () => {
-                getSession(model).queueDialog(handleClose => [
-                  SequenceDialog,
-                  { model, feature, handleClose },
-                ])
+                // this is given a setTimeout because it allows the menu to
+                // close before dialog opens
+                setTimeout(() => setOpenInDialog(true), 1)
               },
             },
           ]}
         />
       </div>
-      <div>
-        {feature.type === 'gene' ? (
-          <Typography>
-            Note: inspect subfeature sequences for protein/CDS computations
-          </Typography>
-        ) : null}
-        {error ? (
-          <ErrorMessage error={error} />
-        ) : !sequence ? (
-          <LoadingEllipses />
-        ) : sequence ? (
-          'error' in sequence ? (
-            <>
-              <Typography color="error">{sequence.error}</Typography>
-              <Button
-                variant="contained"
-                color="inherit"
-                onClick={() => setForce(true)}
-              >
-                Force load
-              </Button>
-            </>
+      {openInDialog ? (
+        <div>
+          Open in dialog...
+          <Suspense fallback={<LoadingEllipses />}>
+            <SequenceDialog
+              model={model}
+              feature={feature}
+              handleClose={() => setOpenInDialog(false)}
+            />
+          </Suspense>
+        </div>
+      ) : (
+        <div>
+          {feature.type === 'gene' ? (
+            <Typography>
+              Note: inspect subfeature sequences for protein/CDS computations
+            </Typography>
+          ) : null}
+          {error ? (
+            <ErrorMessage error={error} />
+          ) : !sequence ? (
+            <LoadingEllipses />
+          ) : sequence ? (
+            'error' in sequence ? (
+              <>
+                <Typography color="error">{sequence.error}</Typography>
+                <Button
+                  variant="contained"
+                  color="inherit"
+                  onClick={() => setForce(true)}
+                >
+                  Force load
+                </Button>
+              </>
+            ) : (
+              <Suspense fallback={<LoadingEllipses />}>
+                <SequencePanel
+                  ref={seqPanelRef}
+                  feature={feature}
+                  sequence={sequence}
+                  model={sequenceFeatureDetails}
+                />
+              </Suspense>
+            )
           ) : (
-            <Suspense fallback={<LoadingEllipses />}>
-              <SequencePanel
-                ref={seqPanelRef}
-                feature={feature}
-                sequence={sequence}
-                model={sequenceFeatureDetails}
-              />
-            </Suspense>
-          )
-        ) : (
-          <Typography>No sequence found</Typography>
-        )}
-      </div>
+            <Typography>No sequence found</Typography>
+          )}
+        </div>
+      )}
     </>
   )
 })
diff --git a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceDialog.tsx b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceDialog.tsx
index e1379c67ea..1d1438bb21 100644
--- a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceDialog.tsx
+++ b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceDialog.tsx
@@ -52,10 +52,7 @@ const SequenceDialog = observer(function ({
     >
       <DialogContent className={classes.dialogContent}>
         <div>
-          <SequenceTypeSelector
-            feature={feature}
-            model={sequenceFeatureDetails}
-          />
+          <SequenceTypeSelector model={sequenceFeatureDetails} />
           <SequenceFeatureMenu
             ref={seqPanelRef}
             model={sequenceFeatureDetails}
diff --git a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceTypeSelector.tsx b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceTypeSelector.tsx
index 83336685e8..d323b02a5a 100644
--- a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceTypeSelector.tsx
+++ b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceTypeSelector.tsx
@@ -1,9 +1,8 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { FormControl, MenuItem, Select } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 // locals
-import { SimpleFeatureSerialized } from '../../../util'
 import { SequenceFeatureDetailsModel } from '../model'
 
 const useStyles = makeStyles()({
@@ -14,33 +13,19 @@ const useStyles = makeStyles()({
 })
 
 const SequenceTypeSelector = observer(function ({
-  feature,
   model,
 }: {
-  feature: SimpleFeatureSerialized
   model: SequenceFeatureDetailsModel
 }) {
   const { classes } = useStyles()
-  const { intronBp, upDownBp, setMode } = model
-
-  const hasCDS = feature.subfeatures?.some(sub => sub.type === 'CDS')
-  const hasExon = feature.subfeatures?.some(sub => sub.type === 'exon')
-  const hasExonOrCDS = hasExon || hasCDS
-
-  const [selectMode, setSelectMode] = useState(
-    hasCDS ? 'cds' : hasExon ? 'cdna' : 'genomic',
-  )
-
-  useEffect(() => {
-    setMode(selectMode)
-  }, [setMode, hasCDS, hasExon, selectMode])
+  const { intronBp, upDownBp, mode, hasCDS, hasExonOrCDS } = model
 
   return (
     <FormControl className={classes.formControl}>
       <Select
         size="small"
-        value={selectMode}
-        onChange={event => setSelectMode(event.target.value)}
+        value={mode}
+        onChange={event => model.setMode(event.target.value)}
       >
         {Object.entries({
           ...(hasCDS
diff --git a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/model.ts b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/model.ts
index d16846053b..a54b9c6da9 100644
--- a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/model.ts
+++ b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/model.ts
@@ -2,7 +2,11 @@ import { types, addDisposer, Instance } from 'mobx-state-tree'
 import { autorun } from 'mobx'
 
 // locals
-import { localStorageGetItem, localStorageSetItem } from '../../util'
+import {
+  SimpleFeatureSerialized,
+  localStorageGetItem,
+  localStorageSetItem,
+} from '../../util'
 
 function localStorageGetNumber(key: string, defaultVal: number) {
   return +(localStorageGetItem(key) ?? defaultVal)
@@ -22,34 +26,80 @@ export function SequenceFeatureDetailsF() {
           localStorageGetItem('sequenceFeatureDetails-upperCaseCDS') || 'true',
         ),
       ),
-      width: 100,
+      charactersPerRow: 100,
+      feature: undefined as SimpleFeatureSerialized | undefined,
       mode: '',
     }))
-    .views(self => ({
-      get showCoordinates() {
-        return self.showCoordinatesSetting !== 'none'
-      },
-      get showGenomicCoordsOption() {
-        return self.mode === 'gene' || self.mode === 'gene_updownstream'
-      },
-    }))
     .actions(self => ({
+      /**
+       * #action
+       */
+      setFeature(f: SimpleFeatureSerialized) {
+        self.feature = f
+      },
+      /**
+       * #action
+       */
       setUpDownBp(f: number) {
         self.upDownBp = f
       },
+      /**
+       * #action
+       */
       setIntronBp(f: number) {
         self.intronBp = f
       },
+      /**
+       * #action
+       */
       setUpperCaseCDS(f: boolean) {
         self.upperCaseCDS = f
       },
+      /**
+       * #action
+       */
       setShowCoordinates(f: 'none' | 'relative' | 'genomic') {
         self.showCoordinatesSetting = f
       },
+      /**
+       * #action
+       */
       setMode(mode: string) {
         self.mode = mode
       },
     }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get showCoordinates() {
+        return self.showCoordinatesSetting !== 'none'
+      },
+      /**
+       * #getter
+       */
+      get showGenomicCoordsOption() {
+        return self.mode === 'gene' || self.mode === 'gene_updownstream'
+      },
+      /**
+       * #getter
+       */
+      get hasCDS() {
+        return self.feature?.subfeatures?.some(sub => sub.type === 'CDS')
+      },
+      /**
+       * #getter
+       */
+      get hasExon() {
+        return self.feature?.subfeatures?.some(sub => sub.type === 'exon')
+      },
+      /**
+       * #getter
+       */
+      get hasExonOrCDS() {
+        return this.hasExon || this.hasCDS
+      },
+    }))
     .actions(self => ({
       afterAttach() {
         addDisposer(
@@ -73,6 +123,14 @@ export function SequenceFeatureDetailsF() {
             )
           }),
         )
+        addDisposer(
+          self,
+          autorun(() => {
+            self.setMode(
+              self.hasCDS ? 'cds' : self.hasExon ? 'cdna' : 'genomic',
+            )
+          }),
+        )
       },
     }))
 }
diff --git a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/CDNASequence.tsx b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/CDNASequence.tsx
index c8d0c8dc6e..c00dc7ecf7 100644
--- a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/CDNASequence.tsx
+++ b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/CDNASequence.tsx
@@ -34,7 +34,7 @@ const CDNASequence = observer(function ({
   const {
     upperCaseCDS,
     intronBp,
-    width,
+    charactersPerRow,
     showCoordinates,
     showCoordinatesSetting,
   } = model
@@ -66,7 +66,7 @@ const CDNASequence = observer(function ({
       : 0
     const { segments, remainder } = splitString({
       str: toLower(upstream),
-      width,
+      charactersPerRow,
       showCoordinates,
     })
     currRemainder = remainder
@@ -103,7 +103,7 @@ const CDNASequence = observer(function ({
           ? toUpper(s)
           : toLower(s)
         : toUpper(s),
-      width,
+      charactersPerRow,
       currRemainder,
       showCoordinates,
     })
@@ -139,7 +139,7 @@ const CDNASequence = observer(function ({
       )
       const { segments, remainder } = splitString({
         str,
-        width,
+        charactersPerRow,
         currRemainder,
         showCoordinates,
       })
@@ -174,7 +174,7 @@ const CDNASequence = observer(function ({
   if (downstream) {
     const { segments, remainder } = splitString({
       str: toLower(downstream),
-      width,
+      charactersPerRow,
       currRemainder,
       showCoordinates,
     })
diff --git a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/CDSSequence.tsx b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/CDSSequence.tsx
index 418127f2b4..9da1fd6f8b 100644
--- a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/CDSSequence.tsx
+++ b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/CDSSequence.tsx
@@ -16,10 +16,10 @@ const CDSSequence = observer(function ({
   sequence: string
   model: SequenceFeatureDetailsModel
 }) {
-  const { width, showCoordinates } = model
+  const { charactersPerRow, showCoordinates } = model
   const { segments } = splitString({
     str: stitch(cds, sequence),
-    width,
+    charactersPerRow,
     showCoordinates,
   })
   return (
diff --git a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/GenomicSequence.tsx b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/GenomicSequence.tsx
index e32498484e..864c472d31 100644
--- a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/GenomicSequence.tsx
+++ b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/GenomicSequence.tsx
@@ -17,7 +17,7 @@ const GenomicSequence = observer(function ({
   downstream?: string
   model: SequenceFeatureDetailsModel
 }) {
-  const { width, showCoordinates } = model
+  const { charactersPerRow, showCoordinates } = model
   let currStart = 0
   let upstreamChunk = null as React.ReactNode
   let currRemainder = 0
@@ -25,7 +25,7 @@ const GenomicSequence = observer(function ({
   if (upstream) {
     const { segments, remainder } = splitString({
       str: upstream,
-      width,
+      charactersPerRow,
       showCoordinates,
     })
     currRemainder = remainder
@@ -42,7 +42,7 @@ const GenomicSequence = observer(function ({
 
   const { segments, remainder } = splitString({
     str: sequence,
-    width,
+    charactersPerRow,
     showCoordinates,
     currRemainder,
   })
@@ -61,7 +61,7 @@ const GenomicSequence = observer(function ({
   if (downstream) {
     const { segments, remainder } = splitString({
       str: downstream,
-      width,
+      charactersPerRow,
       currRemainder,
       showCoordinates,
     })
diff --git a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/ProteinSequence.tsx b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/ProteinSequence.tsx
index fa33cce762..21efb0fa5d 100644
--- a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/ProteinSequence.tsx
+++ b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/ProteinSequence.tsx
@@ -18,7 +18,7 @@ const ProteinSequence = observer(function ({
   codonTable: Record<string, string>
   model: SequenceFeatureDetailsModel
 }) {
-  const { width, showCoordinates } = model
+  const { charactersPerRow, showCoordinates } = model
   const str = stitch(cds, sequence)
   let protein = ''
   for (let i = 0; i < str.length; i += 3) {
@@ -27,7 +27,7 @@ const ProteinSequence = observer(function ({
   }
   const { segments } = splitString({
     str: protein,
-    width,
+    charactersPerRow,
     showCoordinates,
   })
   return (
diff --git a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/SequenceDisplay.tsx b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/SequenceDisplay.tsx
index fb4a712d23..da395ec8a3 100644
--- a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/SequenceDisplay.tsx
+++ b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/SequenceDisplay.tsx
@@ -17,19 +17,19 @@ const SequenceDisplay = observer(function ({
   color?: string
   model: SequenceFeatureDetailsModel
 }) {
-  const { width, showCoordinates } = model
+  const { charactersPerRow, showCoordinates } = model
 
   return chunks.map((chunk, idx) => {
-    const f = coordStart - (start % 100)
+    const f = coordStart - (start % charactersPerRow)
     const prefix =
-      (idx == 0 && start % width == 0) || idx > 0
-        ? `${f + idx * strand * width}`.padStart(4) + '   '
+      (idx == 0 && start % charactersPerRow == 0) || idx > 0
+        ? `${f + idx * strand * charactersPerRow}`.padStart(4) + '   '
         : ''
     const postfix =
       idx === chunks.length - 1 &&
       (chunks.at(-1)?.replaceAll(' ', '').length || 0) +
-        (idx === 0 ? start % 100 : 0) !==
-        width
+        (idx === 0 ? start % charactersPerRow : 0) !==
+        charactersPerRow
         ? null
         : showCoordinates
           ? ' \n'
diff --git a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/util.ts b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/util.ts
index ebd988f3f4..133d3c2522 100644
--- a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/util.ts
+++ b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/util.ts
@@ -9,26 +9,26 @@ export const genomeColor = 'rgb(200,280,200)'
 
 export function splitString({
   str,
-  width,
+  charactersPerRow,
   showCoordinates,
   currRemainder = 0,
   splitSize = 10,
 }: {
   str: string
-  width: number
+  charactersPerRow: number
   showCoordinates: boolean
   currRemainder?: number
   splitStart?: number
   splitSize?: number
 }) {
-  const numChunks = Math.ceil(str.length / width)
+  const numChunks = Math.ceil(str.length / charactersPerRow)
   const chunks = new Array(numChunks)
   let splitStart = currRemainder % 10
 
   let iter = 0
   let offset = 0
   for (; iter < numChunks + 1; ++iter) {
-    const inc = iter === 0 ? width - currRemainder : width
+    const inc = iter === 0 ? charactersPerRow - currRemainder : charactersPerRow
     const r = str.slice(offset, offset + inc)
     if (!r) {
       break
@@ -59,6 +59,6 @@ export function splitString({
     remainder:
       ((chunks.at(-1)?.replaceAll(' ', '').length || 0) +
         (iter < 2 ? currRemainder : 0)) %
-      width,
+      charactersPerRow,
   }
 }

From 31fca7d825378bf9d26eb2f9aaf942d36349fb9b Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Mon, 17 Jun 2024 17:39:42 -0400
Subject: [PATCH 2/4] Locale string

---
 .../SequenceFeatureDetails/SequencePanel.tsx                 | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel.tsx b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel.tsx
index 09156f2137..30de2e3ff7 100644
--- a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel.tsx
+++ b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel.tsx
@@ -5,6 +5,7 @@ import {
   defaultCodonTable,
   generateCodonTable,
   revcom,
+  toLocale,
 } from '../../util'
 import {
   SeqState,
@@ -137,9 +138,9 @@ const SequencePanel = observer(
             <div style={{ background: 'white' }}>
               {`>${[
                 (feature.name || feature.id) + '-' + mode,
-                `${feature.refName}:${feature.start + 1}-${feature.end}(${getStrand(feature.strand as number)})`,
+                `${feature.refName}:${toLocale(feature.start + 1)}-${toLocale(feature.end)}(${getStrand(feature.strand as number)})`,
                 mode.endsWith('updownstream')
-                  ? `+/- ${model.upDownBp} up/downstream bp`
+                  ? `+/- ${toLocale(model.upDownBp)} up/downstream bp`
                   : '',
               ]
                 .filter(f => !!f)

From 148ce6ba3eb572b64ce43be75796e1f9a4ada0ee Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Mon, 17 Jun 2024 17:45:51 -0400
Subject: [PATCH 3/4] Fix storybook

---
 packages/core/.storybook/main.js                              | 1 -
 .../__snapshots__/SequenceFeatureDetails.test.tsx.snap        | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/core/.storybook/main.js b/packages/core/.storybook/main.js
index 840601b0f6..52a1d5b4b4 100644
--- a/packages/core/.storybook/main.js
+++ b/packages/core/.storybook/main.js
@@ -1,6 +1,5 @@
 module.exports = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-  staticDirs: ['../public'],
   addons: ['@storybook/addon-essentials'],
   framework: {
     name: '@storybook/react-webpack5',
diff --git a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/__snapshots__/SequenceFeatureDetails.test.tsx.snap b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/__snapshots__/SequenceFeatureDetails.test.tsx.snap
index 057c0b841a..66357b9235 100644
--- a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/__snapshots__/SequenceFeatureDetails.test.tsx.snap
+++ b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/__snapshots__/SequenceFeatureDetails.test.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NCDN collapsed intron 1`] = `
-">NM_014284.3-gene_collapsed_intron NC_000001.10:36023400-36032380(+)
+">NM_014284.3-gene_collapsed_intron NC_000001.10:36,023,400-36,032,380(+)
 agtgggcaacgcggcgtgagcagcggcccgaggctcccggagcatcgcgctgggagaagacttcgccgctcggggccgcagcctggtgagctcagcccccttcgggccctcccctgcatcccagccggggcctctccgagccggcgctgatcgatgccgacacaccccggggaccctatcgcgactccatcgcgccatatcgcgacaccatcgtgccctgtcgagactccattttgtcacagcccttttcaatatatatcttttttttttttaatttgccctgtcatctttgggggctgtctcccatgtcgtgattttgacgtgatctctccgtgacatcaccgcgccatcgtgaagtgtgatctcatcgccgccctgtcgtgacttcatcaATGTCGTGTTGTGACCTGGCTGCGGCGGGACAGgtggtgaccg...gtgttcacagTTGGGCAAGGCGAGCATCATGGCCTCGGATTGCGAGCCAGCTCTGAACCAGGCAGAGGGCCGAAACCCCACCCTGGAGCGCTACCTGGGAGCCCTCCGTGAGGCCAAGAATGACAGCGAGCAGTTTGCAGCCCTGCTGCTAgtaaggaact...ccccctatagGTGACCAAGGCAGTCAAAGCAGGTGACATAGATGCCAAAACTCGGCGGCGGATCTTCGATGCTGTCGGCTTCACCTTCCCCAATCGTCTCCTGACCACCAAGGAGGCGCCGGATGGCTGCCCTGACCATGTTCTGCGGGCTTTGGGTGTGGCCCTGCTGGCCTGCTTCTGCAGTGACCCTGAACTGGCCGCCCATCCCCAAGTCCTGAACAAGATTCCCATTCTTAGCACCTTCCTCACAGCCCGGGGGGACCCGGACGATGCTGCCCGCCGCTCCATGATTGATGACACCTACCAGTGCCTGACGGCTGTAGCAGGCACACCCAGAGGGCCTCGGCACCTCATTGCTGGTGGCACCGTGTCTGCCCTATGCCAGGCATACCTGGGGCACGGCTATGGCTTTGACCAGGCCCTGGCACTCCTGGTGGGGCTGCTGGCTGCTGCCGAGACACAGTGCTGGAAGGAGGCGGAGCCCGACCTGCTGGCCGTGTTGCGGGGCCTCAGTGAGGATTTCCAGAAAGCTGAGGATGCCAGCAAGTTTGAGCTCTGCCAGCTGCTGCCCCTCTTTTTGCCCCCGACAACCGTGCCCCCTGAATGCTACCGGGATCTGCAGGCCGGGCTGGCACGCATCCTGGGAAGCAAGCTGAGCTCCTGGCAGCGCAACCCTGCACTGAAGCTGGCAGCCCGCCTGGCACACGCCTGCGGCTCCGACTGGATCCCGGCGGGCAGCTCCGGGAGCAAGTTCCTGGCCCTGCTGGTGAATCTGGCGTGCGTGGAAGTGCGGCTGGCACTGGAGGAGACGGGCACGGAGGTGAAAGAGGATGTGGTGACCGCCTGCTATGCCCTCATGGAGTTGGGGATCCAGGAATGCACTCGCTGTGAGCAGTCACTGCTTAAGGAGCCACAGAAGGTGCAGCTCGTGAGCGTCATGAAGGAGGCCATAGGGGCTGTTATCCACTACCTGCTGCAGgtgagggtgc...gtggcaacagGTGGGGTCAGAGAAGCAGAAGGAGCCCTTTGTGTTTGCCTCGGTGCGGATCCTGGGTGCCTGGCTGGCCGAGGAGACCTCATCCTTGCGTAAGGAGGTGTGCCAGCTGCTGCCCTTCCTCGTCCGCTATGCCAAGACCCTCTACGAGGAGGCCGAGGAGGCCAATGACCTTTCCCAGCAGGTGGCCAACCTGGCCATCTCCCCCACCACCCCAGGGCCCACCTGGCCAGGAGACGCTCTCCGgtgagtctgt...acatccccagGCTCCTCCTGCCTGGCTGGTGCCACCTGACCGTTGAAGATGGGCCCCGGGAGATCCTGATCAAGGAAGGGGCCCCCTCGCTTCTGTGCAAGTATTTCCTGCAGCAGTGGGAACTCACATCCCCTGGCCACGACACCTCGGTGCTGCCTGACAGCGTGGAGATTGGCCTGCAGACCTGCTGCCACATCTTCCTCAACCTCGTGGTCACCGCACCGGGGCTGATCAAgtgaggggct...tcttttccagGCGTGACGCCTGCTTCACATCTCTAATGAACACCCTCATGACGTCGCTACCAGCACTAGTGCAGCAACAGGGAAGGCTGCTTCTGGCTGCTAATGTGGCCACCCTGGGGCTCCTCATGGCCCGGCTCCTTAGCACCTCTCCAGgtaagaactg...taccttgcagCTCTTCAGGGAACACCAGCATCCCGAGGGTTCTTCGCAGCTGCCATCCTCTTCCTATCACAGTCCCACGTGGCGCGGGCCACCCCGGGCTCAGACCAGGCAGTGCTAGCCCTGTCCCCTGAGTATGAGGGCATCTGGGCCGACCTGCAGGAGCTCTGGTTCCTGGGCATGCAGGCCTTCACCGGCTGTGTGCCTCTGCTGCCCTGGCTGGCCCCCGCTGCCCTGCGCTCCCGCTGGCCGCAGGAGCTGCTCCAGCTGCTAGGCAGTGTCAGCCCCAACTCTGTCAAGCCCGAGATGGTGGCCGCCTATCAGGGTGTCCTGGTGGAGCTGGCGCGGGCCAACCGGCTGTGCCGGGAGGCCATGAGGCTGCAGGCGGGCGAGGAGACGGCCAGCCACTACCGCATGGCTGCCTTGGAGCAGTGCCTGTCAGAGCCCTGAggggtgtccaccggggacagacccaggggcgggcagagagggaaggagggaggaggcatcttccctgaagcccccaatctggcccccccctccccagacttcctccccaaaacaccccagctttctggcttttctgagggcaagggcatggtgcccacccctcaagtgtaaggaactgcgttccgcccctcaggcccccatgggggcagggatcggcttggaaatcaacgtggttgtccccgccaggccggggaaggttggagcagcccccagggaggggggcactaggtgtcattgtgcccgatgtctggctcccctgcaggagggaggctccagggtaagacagggctggcaggagcagactgcctcagcccatgtgccctgccggccagggcgtgggctcccctcggctgtggtgcctcctctggccccccaggtccacgtcctttaaattggccctttggctcttgcccttggctcccttgggcagacagcaggcttaggccattgatatcgcagttcttcctatcagcttcagtgacccagggtctgaactgcctccatcctagggcaacctggggcagacaggcctggtggggggtggggaaacctccttccacctgagcttgcttgaagggacccagagtctttgggcccagatctttaaacctttgtgtcgtgttgcagcagagtgacgatgggggttggggggttatttattttgcctgtccttatccctgcttggacacctgagcatctgattcctgtccccctggtgccatctggcctggctggagccaggaacaggagggacacttccccagaatccgcatgtttccccagtgattacactccactgccaccgtggtgcctggctttaactcccacccctgctatgactcctctctgcagagacgcgactggcggctccagcagggactacctttcttataaacccagggggaccacacacacacacacacacacacacacacacacacacacacacacacacactcttgatcccttgcttccctcccccagtgcgttctgtgatcgccaagttcaaagctgtgcacatgtggacactcaataaatgttcattggtgacgagaa"
 `;
 
 exports[`NCDN updownstream 1`] = `
-">NM_014284.3-gene_updownstream NC_000001.10:36023400-36032380(+) +/- 100 up/downstream bp
+">NM_014284.3-gene_updownstream NC_000001.10:36,023,400-36,032,380(+) +/- 100 up/downstream bp
 ctcacccggaggaggaggaggaagaggaagaaggtagtgcgggctccccacccggacagctacctctcgcctcagcctccctggacagcgacggcggccggaaacaccgcctcctcccacctccccgggaccgacccggaaacacactctccatgctaaccaagccctcccgcccctcccccgggaagggcaatgccggccgcgagaccaagggggaggaggggcagtgctgggcgggtaaaactacgcacaagcgaaggaatctgggcccccagcctctcgccgcccgctctccagaggcagtctgcaccttgcctccttcgctcgagccccagcccccagactcgggcaatacccacaagcaagatggcggcaacggcggcaccccctactgcttagcaccctgacttgccattggccagagcccggagtgaagcagccgcggattcgtcaagagcggtgcgggggtgggggtggagctgcagcagcctggagccaggagtgggcaacgcggcgtgagcagcggcccgaggctcccggagcatcgcgctgggagaagacttcgccgctcggggccgcagcctggtgagctcagcccccttcgggccctcccctgcatcccagccggggcctctccgagccggcgctgatcgatgccgacacaccccggggaccctatcgcgactccatcgcgccatatcgcgacaccatcgtgccctgtcgagactccattttgtcacagcccttttcaatatatatcttttttttttttaatttgccctgtcatctttgggggctgtctcccatgtcgtgattttgacgtgatctctccgtgacatcaccgcgccatcgtgaagtgtgatctcatcgccgccctgtcgtgacttcatcaATGTCGTGTTGTGACCTGGCTGCGGCGGGACAGgtggtgaccgccaggaaccctcctccccttctcatctccccatctcagcagccctgcttcgattatccggcttttggattctccgttgtcctgggaactatccgggaccccctcttgcttctccagcccctgccggcatccacaggctggtagcgggacggggagggcgagaagagggagcgcaaggggttaattctgctgctgccgccgccgctgctgctgctgctgcagcctctacccgagggagggaaaggagaggaggcaaggagcctgcgggggcgactgagagccctggctggaggggtggggtccccaaaggggcctccaagccttccctgttgagcgtcttgtattctcacttctgaagcgtatctctgcctctgaagaagggaggggaaaggaagcctggggtgtccttttctcccatgtcagcctgagtccggataatcgaacttcacccatgtatgtctccatttctccctgtctgtcctcaccactcactccctctgtgtccctgtggagggagataaaacccagcctccggtgccagggggacagctgagcagtggggccagctcccgcccacccccaggagactggtgaggagagctgtccggctgagcagcagcatgcatggtccttctttcccgctttctggaggtgaccttggaccagggtcccttctttatccctaaggatttgcagatccagccccttaaaggggcttctggggggaggtcagtcctgaggagtccacccctccagattctctcctcccctccctctgtgctaatccctccctccctccatcctccactctcacccccaccccacccccgtccctcctctgcagagggatgctcagtccctcttgtgttcacagTTGGGCAAGGCGAGCATCATGGCCTCGGATTGCGAGCCAGCTCTGAACCAGGCAGAGGGCCGAAACCCCACCCTGGAGCGCTACCTGGGAGCCCTCCGTGAGGCCAAGAATGACAGCGAGCAGTTTGCAGCCCTGCTGCTAgtaaggaactggctgaaaattgggaggtgggaagggctgggtggttgggcccccaaggaatggggtcagtgagtccccaaggatatgtacgtagtgctagcaaccctggaggcaccaacgaaggcccaagacccctacctttgtgctcttttttgctccccctgagaatgggggcaaagaggagaatgggactgaataaggctgtggcactaggggctgcctgggtctgttttctggggcgtcccagagcagatggaagctgactcatagggtaacagcagcaggtagtaactagtgcagagtacttgagggctggggatggttgttctgggcctggagagagtagcagggctggaagtggctggggaggggtcctaggggaaggccaggatggcagtaggtaggttaaggaatgggagctagtttggggcttagcctttttggaggaacccaagctggggacagcagagcagaagctgcagtgctaggaagggggggttgtgtgtggggggtgaagggaggagggagtacagccgctgcttgtttgccatggcaacaaggagaaggctctggagtcaagggctcacactgcagcagaggaggtgtttaggtgaaatgtaaggggaaatgttttgacaggcggagcggcgagacacaggagccatttcccctgagaaggtggcagaaatggatcagggacttctctggagggagcaattaaggaaggactttaaatccttgggagatcttaaaacattgagttctaagccccttccatcccaggttgtgggcatttagacatcaggaagaacttctcaactggccaggtgttgaaatgctcaaatgaatggttgaggaagactagacctcacttccatgggacagtcacagatgagagggatcccagaggtcacatttatctgcctctaaggagaaaaaaggagctggatgaaatgacctcagatgagtcctgttgcataacctcatcttgctagtcctcagtgccccaggatgcaggagagggacagtctttcccacttcttcctttcatcctgatgatagcacataccccctatagGTGACCAAGGCAGTCAAAGCAGGTGACATAGATGCCAAAACTCGGCGGCGGATCTTCGATGCTGTCGGCTTCACCTTCCCCAATCGTCTCCTGACCACCAAGGAGGCGCCGGATGGCTGCCCTGACCATGTTCTGCGGGCTTTGGGTGTGGCCCTGCTGGCCTGCTTCTGCAGTGACCCTGAACTGGCCGCCCATCCCCAAGTCCTGAACAAGATTCCCATTCTTAGCACCTTCCTCACAGCCCGGGGGGACCCGGACGATGCTGCCCGCCGCTCCATGATTGATGACACCTACCAGTGCCTGACGGCTGTAGCAGGCACACCCAGAGGGCCTCGGCACCTCATTGCTGGTGGCACCGTGTCTGCCCTATGCCAGGCATACCTGGGGCACGGCTATGGCTTTGACCAGGCCCTGGCACTCCTGGTGGGGCTGCTGGCTGCTGCCGAGACACAGTGCTGGAAGGAGGCGGAGCCCGACCTGCTGGCCGTGTTGCGGGGCCTCAGTGAGGATTTCCAGAAAGCTGAGGATGCCAGCAAGTTTGAGCTCTGCCAGCTGCTGCCCCTCTTTTTGCCCCCGACAACCGTGCCCCCTGAATGCTACCGGGATCTGCAGGCCGGGCTGGCACGCATCCTGGGAAGCAAGCTGAGCTCCTGGCAGCGCAACCCTGCACTGAAGCTGGCAGCCCGCCTGGCACACGCCTGCGGCTCCGACTGGATCCCGGCGGGCAGCTCCGGGAGCAAGTTCCTGGCCCTGCTGGTGAATCTGGCGTGCGTGGAAGTGCGGCTGGCACTGGAGGAGACGGGCACGGAGGTGAAAGAGGATGTGGTGACCGCCTGCTATGCCCTCATGGAGTTGGGGATCCAGGAATGCACTCGCTGTGAGCAGTCACTGCTTAAGGAGCCACAGAAGGTGCAGCTCGTGAGCGTCATGAAGGAGGCCATAGGGGCTGTTATCCACTACCTGCTGCAGgtgagggtgcagtgacccacagagggggcccagtatggggggagccagtgctggagctgggaggcaagggggaggagaataatggggagacagcgaagctgcatgtccacacaagctgatactgtagccagcactccagggagtagtgtgcggcccaacctccctctctctccctccctccacacaagcaccataccacacaccatatgtgcactcacatcacagtacacacacacgcacacacacacaacacagtaacctcccactcaaacgctccccccaatacacacacactacacgccacacacctctccccaacacatgcacacaagattgaagcagtctgttctgctcactccatagcattgttttatacacgcacacacccgaacttctaatggtgcagggaagagaagcagggctgcctggttcctggcctctatagaggtctggctagatcaattcgcctgcctcccctacatcccctcctgcctccccgcctgagaggccagctgtcctgtcccacagggattcagtcatgactctggtctctttaatggcctgctccagccaccgagctcaccagccatatattccatgcaccacgctaagctcatgtcttttttctgacttagcacaaaagagagcatcccctcactcccaccattgggagcagttacacagtagccaggaacctgccctcccaccccaggtcagagctgctgtaaagggtgtttaacttagcttttgacctatgaatttccttctagccttgagacactccagaggtagggagttagggagatgtgactggagcctcagcgagtacgggggcatgtcactcaattcactcaggcccagttcactcagcagacgtgtgtggagggcctggctcactctgtgccagtcccttgtgtgcgtccctaccacatgctaggtgctgggttcatgggacagaataaaggttggggcctgcctttgaaaggctcacaggccagaatttccttctagttgtattatttctagctggctggcctctggcaaggcagggagggtccctggtcctgctccatctcaagggggtcctgtggcaacagGTGGGGTCAGAGAAGCAGAAGGAGCCCTTTGTGTTTGCCTCGGTGCGGATCCTGGGTGCCTGGCTGGCCGAGGAGACCTCATCCTTGCGTAAGGAGGTGTGCCAGCTGCTGCCCTTCCTCGTCCGCTATGCCAAGACCCTCTACGAGGAGGCCGAGGAGGCCAATGACCTTTCCCAGCAGGTGGCCAACCTGGCCATCTCCCCCACCACCCCAGGGCCCACCTGGCCAGGAGACGCTCTCCGgtgagtctgtagttacagtctgtccagctagatcattctaccgaaaagcgttaacacaaggacacccctccccacaaactgagctgtgccaggcttcctgattgggccatgagatatcccttagggttatttctgttttggggggcttgttcccacaggactcctcggctgccaggtgtcacttgccaaccccagatttctcagttaaaagagaacttatacttattgagcacctactacgagccaggtattttgctataccctttaccaaaatgatctcatttggtccacgtggtaaatataacagaagtctcattcacatatgaaagattaggaaactgaggctcatagagattaaagtcacttgcccacagtcacactttgtggcagagcccaagtttggtcctgggttgtgcgactctgaagcttgtactttttctgtggtacctgcgaggatgtgtccttctcccctacttccatttctcttaggcaaggtgccctaaaaagggaatctatgtgccttcatctctcccaatcccacacacgtctgtcccttccacatccccagGCTCCTCCTGCCTGGCTGGTGCCACCTGACCGTTGAAGATGGGCCCCGGGAGATCCTGATCAAGGAAGGGGCCCCCTCGCTTCTGTGCAAGTATTTCCTGCAGCAGTGGGAACTCACATCCCCTGGCCACGACACCTCGGTGCTGCCTGACAGCGTGGAGATTGGCCTGCAGACCTGCTGCCACATCTTCCTCAACCTCGTGGTCACCGCACCGGGGCTGATCAAgtgaggggctcgggagaggtgggggaggaggccggaggaggcaaaggaggctgcccagttgcctcaattctcagtctcctactttgccccccatgcccatggatttgttagtggtagcatgggggtctcagagtagacatagccagccccgcacaaggattcggcatgctggaacccccaggtactgtctcagcatgtctgcttgttccaatctctgccccccagatgctatgtttggggcccaaagttaatcaccctactgcctaatttcttgccaagggcttgatttggctgtactagacccccacctacctccatccttcccccctttcttttccagGCGTGACGCCTGCTTCACATCTCTAATGAACACCCTCATGACGTCGCTACCAGCACTAGTGCAGCAACAGGGAAGGCTGCTTCTGGCTGCTAATGTGGCCACCCTGGGGCTCCTCATGGCCCGGCTCCTTAGCACCTCTCCAGgtaagaactggggatccagtcctgatgggtgaggacagaagacctgggtggacctcctgtgtttggggcaaaagtcaccatttttagaagatggttttgcagcattttctaagcaagaggaaatctttgcagtgtatctccatcccctacccccaccgttcttcccaaaatgctaacattctctttcttctgaagacttttaaggcaaagtctggtgggtgttaagtacagacctgctcacaggcacaggcataggcacctggaatccctggcagccagaggaatctgaatccagtgttttcaaggtggagccgcccccacccaggccttgagtcagaaacctgacttccttccattgatgtttttctctgctctgctcggtacctcacccccatcagtgacagccttcagcacttggtgtccctctatgcacaccttctccctagctctgcctcactctggctgtttgcagggggagggacgtcccctccagcccctggcagccctccgtgtctccctctttggctgtgggtgtctgcttgggtccctctgtccctgcctgttccctgtgccccatctgtcaggttggaggagctgagcagatgcctgggaacagggcgtaacatgcccgtaccttccactgcctctgtgttccttttgaggggttcccagcagggtaccccgtcatgggaaggggtgcacatccctgtacaccaggagcccactctgcactctcagtcccaggctgcatctctgcagcccccaatttcatggtcccagttctggctcaccctcaaataccaccaggttaggttgacagcttcctggagagcacctgcagtgtgagggtcaccccttgaacagccagtaagcaaagcagggtcacttgcttatgttcctctctggcgccctcttctggcccaaggatcaaatggtgcaactcccttaacctgtgtctgagctctgtgtccagaaccctgaggggttctctctcccatctgaccctgtgactcacccccacctccagtgccggtagaggtcttggtggttgagtgtaccaagatgatcacatttaattctcacaacaaatttctaagatgagcactattggcccattttacaagtaaagaaacagacccagaaaagttaattacccaaggtcacacagtgagcatctaaggcagggtttcaacgcaggcagtctgattccaggctgtgccctggctcctgcatgtgtctacacagaggactagggaagggtctgacacagcagctggcctgtccgattcatgccccactccttccgttaccttgcagCTCTTCAGGGAACACCAGCATCCCGAGGGTTCTTCGCAGCTGCCATCCTCTTCCTATCACAGTCCCACGTGGCGCGGGCCACCCCGGGCTCAGACCAGGCAGTGCTAGCCCTGTCCCCTGAGTATGAGGGCATCTGGGCCGACCTGCAGGAGCTCTGGTTCCTGGGCATGCAGGCCTTCACCGGCTGTGTGCCTCTGCTGCCCTGGCTGGCCCCCGCTGCCCTGCGCTCCCGCTGGCCGCAGGAGCTGCTCCAGCTGCTAGGCAGTGTCAGCCCCAACTCTGTCAAGCCCGAGATGGTGGCCGCCTATCAGGGTGTCCTGGTGGAGCTGGCGCGGGCCAACCGGCTGTGCCGGGAGGCCATGAGGCTGCAGGCGGGCGAGGAGACGGCCAGCCACTACCGCATGGCTGCCTTGGAGCAGTGCCTGTCAGAGCCCTGAggggtgtccaccggggacagacccaggggcgggcagagagggaaggagggaggaggcatcttccctgaagcccccaatctggcccccccctccccagacttcctccccaaaacaccccagctttctggcttttctgagggcaagggcatggtgcccacccctcaagtgtaaggaactgcgttccgcccctcaggcccccatgggggcagggatcggcttggaaatcaacgtggttgtccccgccaggccggggaaggttggagcagcccccagggaggggggcactaggtgtcattgtgcccgatgtctggctcccctgcaggagggaggctccagggtaagacagggctggcaggagcagactgcctcagcccatgtgccctgccggccagggcgtgggctcccctcggctgtggtgcctcctctggccccccaggtccacgtcctttaaattggccctttggctcttgcccttggctcccttgggcagacagcaggcttaggccattgatatcgcagttcttcctatcagcttcagtgacccagggtctgaactgcctccatcctagggcaacctggggcagacaggcctggtggggggtggggaaacctccttccacctgagcttgcttgaagggacccagagtctttgggcccagatctttaaacctttgtgtcgtgttgcagcagagtgacgatgggggttggggggttatttattttgcctgtccttatccctgcttggacacctgagcatctgattcctgtccccctggtgccatctggcctggctggagccaggaacaggagggacacttccccagaatccgcatgtttccccagtgattacactccactgccaccgtggtgcctggctttaactcccacccctgctatgactcctctctgcagagacgcgactggcggctccagcagggactacctttcttataaacccagggggaccacacacacacacacacacacacacacacacacacacacacacacacacactcttgatcccttgcttccctcccccagtgcgttctgtgatcgccaagttcaaagctgtgcacatgtggacactcaataaatgttcattggtgacgagaa"
 `;

From f7c32319258f054443978e18cbf8d354c64be5b7 Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Mon, 17 Jun 2024 17:54:50 -0400
Subject: [PATCH 4/4] Couple more tests

---
 .../SequenceFeatureDetails.test.tsx           | 67 ++++++++++++-------
 .../SequenceFeatureDetails.test.tsx.snap      | 16 +++++
 2 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.test.tsx b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.test.tsx
index 23a2b194c4..afbb62694d 100644
--- a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.test.tsx
+++ b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.test.tsx
@@ -10,6 +10,20 @@ import { SequenceFeatureDetailsF } from './model'
 import DLGAP3 from './test_data/DLGAP3'
 import NCDN from './test_data/NCDN'
 
+const f = {
+  start: 1200,
+  end: 1500,
+  refName: 'chr1',
+  strand: 1,
+  type: 'mRNA',
+  uniqueId: 'unique',
+  name: 'made_up',
+  subfeatures: [
+    { refName: 'chr1', start: 1200, end: 1500, type: 'exon' },
+    { refName: 'chr1', start: 1200, end: 1500, type: 'CDS' },
+  ],
+}
+
 const readFasta = (filename: string) => {
   return fs
     .readFileSync(require.resolve(filename), 'utf8')
@@ -129,18 +143,7 @@ test('NCDN updownstream', () => {
   )
 
   const element = getByTestId('sequence_panel')
-
   expect(element.textContent).toMatchSnapshot()
-
-  // expect(element.children[1].textContent).toEqual(
-  //   'AGTGGGCAACGCGGCGTGAGCAGCGGCCCGAGGCTCCCGGAGCATCGCGCTGGGAGAAGACTTCGCCGCTCGGGGCCGCAGCCTGGTGAGCTCAGCCCCCTTCGGGCCCTCCCCTGCATCCCAGCCGGGGCCTCTCCGAGCCGGCGCTGATCGATGCCGACACACCCCGGGGACCCTATCGCGACTCCATCGCGCCATATCGCGACACCATCGTGCCCTGTCGAGACTCCATTTTGTCACAGCCCTTTTCAATATATATCTTTTTTTTTTTTAATTTGCCCTGTCATCTTTGGGGGCTGTCTCCCATGTCGTGATTTTGACGTGATCTCTCCGTGACATCACCGCGCCATCGTGAAGTGTGATCTCATCGCCGCCCTGTCGTGACTTCATCA',
-  // )
-
-  // 3rd is a blank element, so go to 4th, not strictly needed for 3rd to be
-  // blank but helps test
-  // expect(element.children[3].textContent).toEqual(
-  //   'ATGTCGTGTTGTGACCTGGCTGCGGCGGGACAG',
-  // )
 })
 
 test('single exon cDNA should not have duplicate sequences', () => {
@@ -148,21 +151,7 @@ test('single exon cDNA should not have duplicate sequences', () => {
   const model = SequenceFeatureDetailsF().create()
   model.setMode('cdna')
   const { getByTestId } = render(
-    <SequencePanel
-      model={model}
-      sequence={{ seq }}
-      feature={{
-        start: 1200,
-        end: 1500,
-        refName: 'chr1',
-        type: 'mRNA',
-        uniqueId: 'unique',
-        subfeatures: [
-          { refName: 'chr1', start: 1200, end: 1500, type: 'exon' },
-          { refName: 'chr1', start: 1200, end: 1500, type: 'CDS' },
-        ],
-      }}
-    />,
+    <SequencePanel model={model} sequence={{ seq }} feature={f} />,
   )
 
   const element = getByTestId('sequence_panel')
@@ -177,3 +166,29 @@ test('single exon cDNA should not have duplicate sequences', () => {
     'ATGTCACCTCGGGTACTGCCTCTATTACAGAGGTATCTTAATGGCGCATCCAGCCTTGTGGCTGGGTCTACGTACGCGTGGGCACCATACGTATGTTGGCAGGAAAGGTCAATCATGCTTGTTTCCTCGTCGCAGAAACGTTCACACTATTGGCTCGCGGGATCGAACGGGCCTGATTATTTTTCCAGCTCCTGCGTTCCTATCACGCCAACTGTCGCTAATAAAATGTTATATAGAGATAACCCATTGCTATGCAAGGATGGAGAAACCGCTTCACAACACCCTAGAATTACTTCAGCA',
   )
 })
+
+test('single exon cDNA display genomic coords', () => {
+  const seq = readFasta('./test_data/volvox.fa')
+  const model = SequenceFeatureDetailsF().create()
+  model.setMode('gene')
+  model.setShowCoordinates('genomic')
+  const { getByTestId } = render(
+    <SequencePanel model={model} sequence={{ seq }} feature={f} />,
+  )
+
+  const element = getByTestId('sequence_panel')
+  expect(element.textContent).toMatchSnapshot()
+})
+
+test('single exon cDNA display relative coords', () => {
+  const seq = readFasta('./test_data/volvox.fa')
+  const model = SequenceFeatureDetailsF().create()
+  model.setMode('gene')
+  model.setShowCoordinates('relative')
+  const { getByTestId } = render(
+    <SequencePanel model={model} sequence={{ seq }} feature={f} />,
+  )
+
+  const element = getByTestId('sequence_panel')
+  expect(element.textContent).toMatchSnapshot()
+})
diff --git a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/__snapshots__/SequenceFeatureDetails.test.tsx.snap b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/__snapshots__/SequenceFeatureDetails.test.tsx.snap
index 66357b9235..79ddb15aa2 100644
--- a/packages/core/BaseFeatureWidget/SequenceFeatureDetails/__snapshots__/SequenceFeatureDetails.test.tsx.snap
+++ b/packages/core/BaseFeatureWidget/SequenceFeatureDetails/__snapshots__/SequenceFeatureDetails.test.tsx.snap
@@ -9,3 +9,19 @@ exports[`NCDN updownstream 1`] = `
 ">NM_014284.3-gene_updownstream NC_000001.10:36,023,400-36,032,380(+) +/- 100 up/downstream bp
 ctcacccggaggaggaggaggaagaggaagaaggtagtgcgggctccccacccggacagctacctctcgcctcagcctccctggacagcgacggcggccggaaacaccgcctcctcccacctccccgggaccgacccggaaacacactctccatgctaaccaagccctcccgcccctcccccgggaagggcaatgccggccgcgagaccaagggggaggaggggcagtgctgggcgggtaaaactacgcacaagcgaaggaatctgggcccccagcctctcgccgcccgctctccagaggcagtctgcaccttgcctccttcgctcgagccccagcccccagactcgggcaatacccacaagcaagatggcggcaacggcggcaccccctactgcttagcaccctgacttgccattggccagagcccggagtgaagcagccgcggattcgtcaagagcggtgcgggggtgggggtggagctgcagcagcctggagccaggagtgggcaacgcggcgtgagcagcggcccgaggctcccggagcatcgcgctgggagaagacttcgccgctcggggccgcagcctggtgagctcagcccccttcgggccctcccctgcatcccagccggggcctctccgagccggcgctgatcgatgccgacacaccccggggaccctatcgcgactccatcgcgccatatcgcgacaccatcgtgccctgtcgagactccattttgtcacagcccttttcaatatatatcttttttttttttaatttgccctgtcatctttgggggctgtctcccatgtcgtgattttgacgtgatctctccgtgacatcaccgcgccatcgtgaagtgtgatctcatcgccgccctgtcgtgacttcatcaATGTCGTGTTGTGACCTGGCTGCGGCGGGACAGgtggtgaccgccaggaaccctcctccccttctcatctccccatctcagcagccctgcttcgattatccggcttttggattctccgttgtcctgggaactatccgggaccccctcttgcttctccagcccctgccggcatccacaggctggtagcgggacggggagggcgagaagagggagcgcaaggggttaattctgctgctgccgccgccgctgctgctgctgctgcagcctctacccgagggagggaaaggagaggaggcaaggagcctgcgggggcgactgagagccctggctggaggggtggggtccccaaaggggcctccaagccttccctgttgagcgtcttgtattctcacttctgaagcgtatctctgcctctgaagaagggaggggaaaggaagcctggggtgtccttttctcccatgtcagcctgagtccggataatcgaacttcacccatgtatgtctccatttctccctgtctgtcctcaccactcactccctctgtgtccctgtggagggagataaaacccagcctccggtgccagggggacagctgagcagtggggccagctcccgcccacccccaggagactggtgaggagagctgtccggctgagcagcagcatgcatggtccttctttcccgctttctggaggtgaccttggaccagggtcccttctttatccctaaggatttgcagatccagccccttaaaggggcttctggggggaggtcagtcctgaggagtccacccctccagattctctcctcccctccctctgtgctaatccctccctccctccatcctccactctcacccccaccccacccccgtccctcctctgcagagggatgctcagtccctcttgtgttcacagTTGGGCAAGGCGAGCATCATGGCCTCGGATTGCGAGCCAGCTCTGAACCAGGCAGAGGGCCGAAACCCCACCCTGGAGCGCTACCTGGGAGCCCTCCGTGAGGCCAAGAATGACAGCGAGCAGTTTGCAGCCCTGCTGCTAgtaaggaactggctgaaaattgggaggtgggaagggctgggtggttgggcccccaaggaatggggtcagtgagtccccaaggatatgtacgtagtgctagcaaccctggaggcaccaacgaaggcccaagacccctacctttgtgctcttttttgctccccctgagaatgggggcaaagaggagaatgggactgaataaggctgtggcactaggggctgcctgggtctgttttctggggcgtcccagagcagatggaagctgactcatagggtaacagcagcaggtagtaactagtgcagagtacttgagggctggggatggttgttctgggcctggagagagtagcagggctggaagtggctggggaggggtcctaggggaaggccaggatggcagtaggtaggttaaggaatgggagctagtttggggcttagcctttttggaggaacccaagctggggacagcagagcagaagctgcagtgctaggaagggggggttgtgtgtggggggtgaagggaggagggagtacagccgctgcttgtttgccatggcaacaaggagaaggctctggagtcaagggctcacactgcagcagaggaggtgtttaggtgaaatgtaaggggaaatgttttgacaggcggagcggcgagacacaggagccatttcccctgagaaggtggcagaaatggatcagggacttctctggagggagcaattaaggaaggactttaaatccttgggagatcttaaaacattgagttctaagccccttccatcccaggttgtgggcatttagacatcaggaagaacttctcaactggccaggtgttgaaatgctcaaatgaatggttgaggaagactagacctcacttccatgggacagtcacagatgagagggatcccagaggtcacatttatctgcctctaaggagaaaaaaggagctggatgaaatgacctcagatgagtcctgttgcataacctcatcttgctagtcctcagtgccccaggatgcaggagagggacagtctttcccacttcttcctttcatcctgatgatagcacataccccctatagGTGACCAAGGCAGTCAAAGCAGGTGACATAGATGCCAAAACTCGGCGGCGGATCTTCGATGCTGTCGGCTTCACCTTCCCCAATCGTCTCCTGACCACCAAGGAGGCGCCGGATGGCTGCCCTGACCATGTTCTGCGGGCTTTGGGTGTGGCCCTGCTGGCCTGCTTCTGCAGTGACCCTGAACTGGCCGCCCATCCCCAAGTCCTGAACAAGATTCCCATTCTTAGCACCTTCCTCACAGCCCGGGGGGACCCGGACGATGCTGCCCGCCGCTCCATGATTGATGACACCTACCAGTGCCTGACGGCTGTAGCAGGCACACCCAGAGGGCCTCGGCACCTCATTGCTGGTGGCACCGTGTCTGCCCTATGCCAGGCATACCTGGGGCACGGCTATGGCTTTGACCAGGCCCTGGCACTCCTGGTGGGGCTGCTGGCTGCTGCCGAGACACAGTGCTGGAAGGAGGCGGAGCCCGACCTGCTGGCCGTGTTGCGGGGCCTCAGTGAGGATTTCCAGAAAGCTGAGGATGCCAGCAAGTTTGAGCTCTGCCAGCTGCTGCCCCTCTTTTTGCCCCCGACAACCGTGCCCCCTGAATGCTACCGGGATCTGCAGGCCGGGCTGGCACGCATCCTGGGAAGCAAGCTGAGCTCCTGGCAGCGCAACCCTGCACTGAAGCTGGCAGCCCGCCTGGCACACGCCTGCGGCTCCGACTGGATCCCGGCGGGCAGCTCCGGGAGCAAGTTCCTGGCCCTGCTGGTGAATCTGGCGTGCGTGGAAGTGCGGCTGGCACTGGAGGAGACGGGCACGGAGGTGAAAGAGGATGTGGTGACCGCCTGCTATGCCCTCATGGAGTTGGGGATCCAGGAATGCACTCGCTGTGAGCAGTCACTGCTTAAGGAGCCACAGAAGGTGCAGCTCGTGAGCGTCATGAAGGAGGCCATAGGGGCTGTTATCCACTACCTGCTGCAGgtgagggtgcagtgacccacagagggggcccagtatggggggagccagtgctggagctgggaggcaagggggaggagaataatggggagacagcgaagctgcatgtccacacaagctgatactgtagccagcactccagggagtagtgtgcggcccaacctccctctctctccctccctccacacaagcaccataccacacaccatatgtgcactcacatcacagtacacacacacgcacacacacacaacacagtaacctcccactcaaacgctccccccaatacacacacactacacgccacacacctctccccaacacatgcacacaagattgaagcagtctgttctgctcactccatagcattgttttatacacgcacacacccgaacttctaatggtgcagggaagagaagcagggctgcctggttcctggcctctatagaggtctggctagatcaattcgcctgcctcccctacatcccctcctgcctccccgcctgagaggccagctgtcctgtcccacagggattcagtcatgactctggtctctttaatggcctgctccagccaccgagctcaccagccatatattccatgcaccacgctaagctcatgtcttttttctgacttagcacaaaagagagcatcccctcactcccaccattgggagcagttacacagtagccaggaacctgccctcccaccccaggtcagagctgctgtaaagggtgtttaacttagcttttgacctatgaatttccttctagccttgagacactccagaggtagggagttagggagatgtgactggagcctcagcgagtacgggggcatgtcactcaattcactcaggcccagttcactcagcagacgtgtgtggagggcctggctcactctgtgccagtcccttgtgtgcgtccctaccacatgctaggtgctgggttcatgggacagaataaaggttggggcctgcctttgaaaggctcacaggccagaatttccttctagttgtattatttctagctggctggcctctggcaaggcagggagggtccctggtcctgctccatctcaagggggtcctgtggcaacagGTGGGGTCAGAGAAGCAGAAGGAGCCCTTTGTGTTTGCCTCGGTGCGGATCCTGGGTGCCTGGCTGGCCGAGGAGACCTCATCCTTGCGTAAGGAGGTGTGCCAGCTGCTGCCCTTCCTCGTCCGCTATGCCAAGACCCTCTACGAGGAGGCCGAGGAGGCCAATGACCTTTCCCAGCAGGTGGCCAACCTGGCCATCTCCCCCACCACCCCAGGGCCCACCTGGCCAGGAGACGCTCTCCGgtgagtctgtagttacagtctgtccagctagatcattctaccgaaaagcgttaacacaaggacacccctccccacaaactgagctgtgccaggcttcctgattgggccatgagatatcccttagggttatttctgttttggggggcttgttcccacaggactcctcggctgccaggtgtcacttgccaaccccagatttctcagttaaaagagaacttatacttattgagcacctactacgagccaggtattttgctataccctttaccaaaatgatctcatttggtccacgtggtaaatataacagaagtctcattcacatatgaaagattaggaaactgaggctcatagagattaaagtcacttgcccacagtcacactttgtggcagagcccaagtttggtcctgggttgtgcgactctgaagcttgtactttttctgtggtacctgcgaggatgtgtccttctcccctacttccatttctcttaggcaaggtgccctaaaaagggaatctatgtgccttcatctctcccaatcccacacacgtctgtcccttccacatccccagGCTCCTCCTGCCTGGCTGGTGCCACCTGACCGTTGAAGATGGGCCCCGGGAGATCCTGATCAAGGAAGGGGCCCCCTCGCTTCTGTGCAAGTATTTCCTGCAGCAGTGGGAACTCACATCCCCTGGCCACGACACCTCGGTGCTGCCTGACAGCGTGGAGATTGGCCTGCAGACCTGCTGCCACATCTTCCTCAACCTCGTGGTCACCGCACCGGGGCTGATCAAgtgaggggctcgggagaggtgggggaggaggccggaggaggcaaaggaggctgcccagttgcctcaattctcagtctcctactttgccccccatgcccatggatttgttagtggtagcatgggggtctcagagtagacatagccagccccgcacaaggattcggcatgctggaacccccaggtactgtctcagcatgtctgcttgttccaatctctgccccccagatgctatgtttggggcccaaagttaatcaccctactgcctaatttcttgccaagggcttgatttggctgtactagacccccacctacctccatccttcccccctttcttttccagGCGTGACGCCTGCTTCACATCTCTAATGAACACCCTCATGACGTCGCTACCAGCACTAGTGCAGCAACAGGGAAGGCTGCTTCTGGCTGCTAATGTGGCCACCCTGGGGCTCCTCATGGCCCGGCTCCTTAGCACCTCTCCAGgtaagaactggggatccagtcctgatgggtgaggacagaagacctgggtggacctcctgtgtttggggcaaaagtcaccatttttagaagatggttttgcagcattttctaagcaagaggaaatctttgcagtgtatctccatcccctacccccaccgttcttcccaaaatgctaacattctctttcttctgaagacttttaaggcaaagtctggtgggtgttaagtacagacctgctcacaggcacaggcataggcacctggaatccctggcagccagaggaatctgaatccagtgttttcaaggtggagccgcccccacccaggccttgagtcagaaacctgacttccttccattgatgtttttctctgctctgctcggtacctcacccccatcagtgacagccttcagcacttggtgtccctctatgcacaccttctccctagctctgcctcactctggctgtttgcagggggagggacgtcccctccagcccctggcagccctccgtgtctccctctttggctgtgggtgtctgcttgggtccctctgtccctgcctgttccctgtgccccatctgtcaggttggaggagctgagcagatgcctgggaacagggcgtaacatgcccgtaccttccactgcctctgtgttccttttgaggggttcccagcagggtaccccgtcatgggaaggggtgcacatccctgtacaccaggagcccactctgcactctcagtcccaggctgcatctctgcagcccccaatttcatggtcccagttctggctcaccctcaaataccaccaggttaggttgacagcttcctggagagcacctgcagtgtgagggtcaccccttgaacagccagtaagcaaagcagggtcacttgcttatgttcctctctggcgccctcttctggcccaaggatcaaatggtgcaactcccttaacctgtgtctgagctctgtgtccagaaccctgaggggttctctctcccatctgaccctgtgactcacccccacctccagtgccggtagaggtcttggtggttgagtgtaccaagatgatcacatttaattctcacaacaaatttctaagatgagcactattggcccattttacaagtaaagaaacagacccagaaaagttaattacccaaggtcacacagtgagcatctaaggcagggtttcaacgcaggcagtctgattccaggctgtgccctggctcctgcatgtgtctacacagaggactagggaagggtctgacacagcagctggcctgtccgattcatgccccactccttccgttaccttgcagCTCTTCAGGGAACACCAGCATCCCGAGGGTTCTTCGCAGCTGCCATCCTCTTCCTATCACAGTCCCACGTGGCGCGGGCCACCCCGGGCTCAGACCAGGCAGTGCTAGCCCTGTCCCCTGAGTATGAGGGCATCTGGGCCGACCTGCAGGAGCTCTGGTTCCTGGGCATGCAGGCCTTCACCGGCTGTGTGCCTCTGCTGCCCTGGCTGGCCCCCGCTGCCCTGCGCTCCCGCTGGCCGCAGGAGCTGCTCCAGCTGCTAGGCAGTGTCAGCCCCAACTCTGTCAAGCCCGAGATGGTGGCCGCCTATCAGGGTGTCCTGGTGGAGCTGGCGCGGGCCAACCGGCTGTGCCGGGAGGCCATGAGGCTGCAGGCGGGCGAGGAGACGGCCAGCCACTACCGCATGGCTGCCTTGGAGCAGTGCCTGTCAGAGCCCTGAggggtgtccaccggggacagacccaggggcgggcagagagggaaggagggaggaggcatcttccctgaagcccccaatctggcccccccctccccagacttcctccccaaaacaccccagctttctggcttttctgagggcaagggcatggtgcccacccctcaagtgtaaggaactgcgttccgcccctcaggcccccatgggggcagggatcggcttggaaatcaacgtggttgtccccgccaggccggggaaggttggagcagcccccagggaggggggcactaggtgtcattgtgcccgatgtctggctcccctgcaggagggaggctccagggtaagacagggctggcaggagcagactgcctcagcccatgtgccctgccggccagggcgtgggctcccctcggctgtggtgcctcctctggccccccaggtccacgtcctttaaattggccctttggctcttgcccttggctcccttgggcagacagcaggcttaggccattgatatcgcagttcttcctatcagcttcagtgacccagggtctgaactgcctccatcctagggcaacctggggcagacaggcctggtggggggtggggaaacctccttccacctgagcttgcttgaagggacccagagtctttgggcccagatctttaaacctttgtgtcgtgttgcagcagagtgacgatgggggttggggggttatttattttgcctgtccttatccctgcttggacacctgagcatctgattcctgtccccctggtgccatctggcctggctggagccaggaacaggagggacacttccccagaatccgcatgtttccccagtgattacactccactgccaccgtggtgcctggctttaactcccacccctgctatgactcctctctgcagagacgcgactggcggctccagcagggactacctttcttataaacccagggggaccacacacacacacacacacacacacacacacacacacacacacacacacactcttgatcccttgcttccctcccccagtgcgttctgtgatcgccaagttcaaagctgtgcacatgtggacactcaataaatgttcattggtgacgagaa"
 `;
+
+exports[`single exon cDNA display genomic coords 1`] = `
+">made_up-gene chr1:1,201-1,500(+)
+1201    ATGTCACCTC GGGTACTGCC TCTATTACAG AGGTATCTTA ATGGCGCATC CAGCCTTGTG GCTGGGTCTA CGTACGCGTG GGCACCATAC GTATGTTGGC 
+1301    AGGAAAGGTC AATCATGCTT GTTTCCTCGT CGCAGAAACG TTCACACTAT TGGCTCGCGG GATCGAACGG GCCTGATTAT TTTTCCAGCT CCTGCGTTCC 
+1401    TATCACGCCA ACTGTCGCTA ATAAAATGTT ATATAGAGAT AACCCATTGC TATGCAAGGA TGGAGAAACC GCTTCACAAC ACCCTAGAAT TACTTCAGCA 
+"
+`;
+
+exports[`single exon cDNA display relative coords 1`] = `
+">made_up-gene chr1:1,201-1,500(+)
+   0    ATGTCACCTC GGGTACTGCC TCTATTACAG AGGTATCTTA ATGGCGCATC CAGCCTTGTG GCTGGGTCTA CGTACGCGTG GGCACCATAC GTATGTTGGC 
+ 100    AGGAAAGGTC AATCATGCTT GTTTCCTCGT CGCAGAAACG TTCACACTAT TGGCTCGCGG GATCGAACGG GCCTGATTAT TTTTCCAGCT CCTGCGTTCC 
+ 200    TATCACGCCA ACTGTCGCTA ATAAAATGTT ATATAGAGAT AACCCATTGC TATGCAAGGA TGGAGAAACC GCTTCACAAC ACCCTAGAAT TACTTCAGCA 
+"
+`;