react-msaview 8.3.0 → 8.4.0

package/src/components/header/goTo.ts

@@ -0,0 +1,75 @@
+import type { MsaViewModel } from '../../model.ts'
+
+export function findableRowNames(model: MsaViewModel) {
+  const collapsed = new Set(model.collapsed)
+  return model.leaves
+    .filter(({ data: { id, name } }) => !(collapsed.has(id) && name === id))
+    .map(leaf => leaf.data.name)
+}
+
+// not MUI's createFilterOptions: JBrowse hosts do not re-export it, so
+// jbrowse-plugin-msaview would fail to load
+export function rowNameSuggestions(names: string[], input: string, limit = 50) {
+  const query = input.toLowerCase()
+  return names
+    .filter(name => name.toLowerCase().includes(query))
+    .slice(0, limit)
+}
+
+/**
+ * The visible row and column a "Go to" entry names: a row by its name, the
+ * column the ruler numbers N, or residue N of a row written `name:N`. A name
+ * is tried whole first, so a row called `chr1:100` stays reachable.
+ */
+export function resolveGoTo(model: MsaViewModel, text: string) {
+  const query = text.trim()
+  const row = model.rowNamesSet.get(query)
+  if (row !== undefined) {
+    return { row }
+  }
+  const residue = /^(.+):(\d+)$/.exec(query)
+  if (residue) {
+    const [, name = '', pos] = residue
+    const rowIndex = model.rowNamesSet.get(name)
+    const col =
+      rowIndex === undefined ? undefined : columnOfResidue(model, name, +pos!)
+    return col === undefined ? undefined : { row: rowIndex, col }
+  }
+  if (/^\d+$/.test(query)) {
+    const n = +query
+    const { relativeTo, numColumns } = model
+    const col = relativeTo
+      ? columnOfResidue(model, relativeTo, n)
+      : n >= 1 && n <= numColumns
+        ? n - 1
+        : undefined
+    return col === undefined ? undefined : { col }
+  }
+  return undefined
+}
+
+// seqPosToVisibleCol maps a residue past the row's end to the column after
+// it; here that residue names nothing
+function columnOfResidue(model: MsaViewModel, name: string, pos: number) {
+  const globalCol = model.seqPosIndex(name)?.[pos - 1]
+  return globalCol === undefined
+    ? undefined
+    : model.globalColToVisibleCol(globalCol)
+}
+
+/** centers the view on the entry's target and lights it; false if none */
+export function goTo(model: MsaViewModel, text: string) {
+  const target = resolveGoTo(model, text)
+  if (target) {
+    const { row, col } = target
+    const { rowHeight, colWidth, msaAreaHeight, msaAreaWidth } = model
+    if (row !== undefined) {
+      model.setScrollY(-(row + 0.5) * rowHeight + msaAreaHeight / 2)
+    }
+    if (col !== undefined) {
+      model.setScrollX(-(col + 0.5) * colWidth + msaAreaWidth / 2)
+    }
+    model.setMousePos(col, row)
+  }
+  return target !== undefined
+}

package/src/components/msa/MSACanvas.tsx

@@ -54,13 +54,23 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       // col*colWidth + scrollX, row*rowHeight + scrollY
       data-testid="msa_canvas"
       tabIndex={0}
-      aria-label="Alignment. Arrow keys scroll, shift pages, + and - zoom, Home and End jump to the first and last column."
+      aria-label="Alignment. Arrow keys scroll, shift pages, + and - zoom, Home and End jump to the first and last column. Shift-drag selects cells, and Escape clears the selection."
       onKeyDown={event => {
         if (onMsaKey(model, event)) {
           event.preventDefault()
         }
       }}
-      onMouseDown={onMouseDown}
+      onMouseDown={event => {
+        // a shifted press selects cells (useMsaBlockMouse), so it takes the
+        // focus Escape clears from, and leaves out the pan and the page's own
+        // text selection
+        if (event.shiftKey) {
+          event.preventDefault()
+          ref.current?.focus({ preventScroll: true })
+        } else {
+          onMouseDown(event)
+        }
+      }}
       onMouseUp={onMouseUp}
       style={{
         position: 'relative',

package/src/components/msa/MSACanvasBlock.tsx

@@ -71,7 +71,11 @@ const MSACanvasBlock = observer(function ({
             onMouseMove(event, ref.current)
           }
         }}
-        onMouseDown={onMouseDown}
+        onMouseDown={event => {
+          if (ref.current) {
+            onMouseDown(event, ref.current)
+          }
+        }}
         onClick={event => {
           if (ref.current) {
             onClick(event, ref.current)

package/src/components/msa/msaKeys.ts

@@ -33,6 +33,12 @@ export function onMsaKey(
     case 'End':
       model.setScrollX(model.maxScrollX)
       return true
+    case 'Escape':
+      if (model.selection) {
+        model.clearSelection()
+        return true
+      }
+      return false
     default:
       return false
   }

package/src/components/msa/msaRaster.ts

@@ -297,6 +297,7 @@ function rasterKeys(model: MsaViewModel, theme: Theme) {
     model.columns,
     model.leaves,
     model.colorSchemeName,
+    model.customColorScheme,
     tileColorTable(model),
     model.relativeTo,
     theme.palette.action.hover,

package/src/components/msa/renderHighlights.ts

@@ -1,5 +1,9 @@
 import { setFontSize } from '../../setFontSize.ts'
-import { referenceColor } from '../overlayColors.ts'
+import {
+  referenceColor,
+  selectionBorder,
+  selectionFill,
+} from '../overlayColors.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type { RenderCtx } from '../renderCtx.ts'
@@ -172,11 +176,48 @@ export function renderHighlights({
   }
 }
 
+/**
+ * The selected block, a bordered band per run of consecutive selected rows,
+ * culled to the rows this block covers
+ */
+export function renderSelection({
+  ctx,
+  model,
+  offsetX,
+  offsetY,
+  height,
+}: {
+  ctx: RenderCtx
+  model: MsaViewModel
+  offsetX: number
+  offsetY: number
+  height: number
+}) {
+  const { resolvedSelection, colWidth, rowHeight } = model
+  if (!resolvedSelection) {
+    return
+  }
+  const { startCol, endCol, rowRuns } = resolvedSelection
+  const x = startCol * colWidth - offsetX
+  const w = (endCol - startCol + 1) * colWidth
+  ctx.lineWidth = 1
+  for (const [first, last] of rowRuns) {
+    const y = first * rowHeight - offsetY
+    const h = (last - first + 1) * rowHeight
+    if (y < height && y + h > 0) {
+      ctx.fillStyle = selectionFill
+      ctx.fillRect(x, y, w, h)
+      ctx.strokeStyle = selectionBorder
+      ctx.strokeRect(x, y, w, h)
+    }
+  }
+}
+
 /**
  * The overlay parts that come from the snapshot: the reference row's tint, a
- * bordered band per run of highlighted columns, and the `highlights` layer. The
- * live overlay draws these under its hover and click bands; the SVG export
- * draws only these.
+ * bordered band per run of highlighted columns, the `highlights` layer and the
+ * selected block. The live overlay draws these under its hover and click
+ * bands; the SVG export draws only these.
  */
 export function renderPersistentHighlights({
   ctx,
@@ -214,4 +255,5 @@ export function renderPersistentHighlights({
   }
 
   renderHighlights({ ctx, model, theme, offsetX, offsetY, width, height })
+  renderSelection({ ctx, model, offsetX, offsetY, height })
 }

package/src/components/msa/tileColor.ts

@@ -4,12 +4,12 @@ import type { MsaViewModel } from '../../model.ts'
 // only the active scheme's column table leaves the other per-column table
 // uncomputed.
 export function tileColorFn(model: MsaViewModel) {
-  const { colorSchemeName } = model
-  if (colorSchemeName === 'clustalx_protein_dynamic') {
+  const { dynamicColorSchemeName } = model
+  if (dynamicColorSchemeName === 'clustalx_protein_dynamic') {
     const { colClustalX } = model
     return (col: number, letter: string) => colClustalX[col]![letter]
   }
-  if (colorSchemeName === 'percent_identity_dynamic') {
+  if (dynamicColorSchemeName === 'percent_identity_dynamic') {
     const { colConsensus } = model
     return (col: number, letter: string) => {
       const consensus = colConsensus[col]!
@@ -20,14 +20,15 @@ export function tileColorFn(model: MsaViewModel) {
   return (_col: number, letter: string) => colorScheme[letter]
 }
 
-// The column table the active scheme colors from, or undefined for the static
-// schemes. A cache of rendered colors keys on its identity plus the scheme name.
+// The table the active scheme colors from: a dynamic scheme's per-column table,
+// or the letter table of a static scheme or a `customColorScheme` map. A cache
+// of rendered colors keys on its identity plus the scheme name.
 export function tileColorTable(model: MsaViewModel) {
-  const { colorSchemeName } = model
-  if (colorSchemeName === 'clustalx_protein_dynamic') {
+  const { dynamicColorSchemeName } = model
+  if (dynamicColorSchemeName === 'clustalx_protein_dynamic') {
     return model.colClustalX
   }
-  if (colorSchemeName === 'percent_identity_dynamic') {
+  if (dynamicColorSchemeName === 'percent_identity_dynamic') {
     return model.colConsensus
   }
   return model.colorScheme

package/src/components/msa/useMsaBlockMouse.ts

@@ -1,34 +1,12 @@
 import { useRef } from 'react'
 
+import { dragSelection, maxClickTravel } from '../selectionDrag.ts'
 import { useHoverAnchor } from '../useHoverAnchor.ts'
 
 import type { MsaViewModel } from '../../model.ts'
+import type { ClientPoint } from '../selectionDrag.ts'
 import type React from 'react'
 
-const maxClickTravel = 3
-
-function eventToColRow({
-  event,
-  el,
-  offsetX,
-  offsetY,
-  colWidth,
-  rowHeight,
-}: {
-  event: React.MouseEvent
-  el: HTMLElement
-  offsetX: number
-  offsetY: number
-  colWidth: number
-  rowHeight: number
-}) {
-  const { left, top } = el.getBoundingClientRect()
-  return {
-    col: Math.floor((event.clientX - left + offsetX) / colWidth),
-    row: Math.floor((event.clientY - top + offsetY) / rowHeight),
-  }
-}
-
 /**
  * Translates pointer events over one MSA block into model column/row hover and
  * click state, and reports where a tooltip should be anchored.
@@ -51,9 +29,23 @@ export function useMsaBlockMouse({
   const { anchor, hoverAt, clearAnchor } = useHoverAnchor<true>()
   const downAt = useRef<{ x: number; y: number }>(undefined)
 
+  // The block's rect places its cells on the page. A drag keeps the mapping
+  // it started with, so each point subtracts the scroll since then.
+  function cellMapper(el: HTMLElement) {
+    const { left, top } = el.getBoundingClientRect()
+    const { scrollX, scrollY } = model
+    return ({ clientX, clientY }: ClientPoint) => ({
+      col: Math.floor(
+        (clientX - left + offsetX - (model.scrollX - scrollX)) / model.colWidth,
+      ),
+      row: Math.floor(
+        (clientY - top + offsetY - (model.scrollY - scrollY)) / model.rowHeight,
+      ),
+    })
+  }
+
   function colRow(event: React.MouseEvent, el: HTMLElement) {
-    const { colWidth, rowHeight } = model
-    return eventToColRow({ event, el, offsetX, offsetY, colWidth, rowHeight })
+    return cellMapper(el)(event)
   }
 
   // a block can extend past the alignment (the last block is a full tile wide,
@@ -73,8 +65,13 @@ export function useMsaBlockMouse({
     hoverAt(event, hasTooltip || undefined)
   }
 
-  function onMouseDown(event: React.MouseEvent) {
+  // shift+drag selects a block; MSACanvas leaves a shifted press out of its
+  // pan
+  function onMouseDown(event: React.MouseEvent, el: HTMLElement) {
     downAt.current = { x: event.clientX, y: event.clientY }
+    if (event.shiftKey && event.button === 0) {
+      dragSelection(model, event, cellMapper(el))
+    }
   }
 
   function onClick(event: React.MouseEvent, el: HTMLElement) {

package/src/components/overlayColors.ts

@@ -16,3 +16,7 @@ export const multiRowHoverColor = 'rgba(255,165,0,0.15)'
 // match or the crosshair appears to change color as it crosses the tracks.
 export const hoverColor = 'rgba(0,0,0,0.15)'
 export const clickColor = 'rgba(128,128,0,0.2)'
+
+// the selected block, a blue that reads apart from the orange highlights
+export const selectionFill = 'rgba(25,118,210,0.22)'
+export const selectionBorder = 'rgba(25,118,210,0.95)'

package/src/components/selectionDrag.ts

@@ -0,0 +1,42 @@
+import { isAlive } from '@jbrowse/mobx-state-tree'
+
+import type { MsaViewModel } from '../model.ts'
+
+// a press that travels further than this, in px, is a drag and not a click
+export const maxClickTravel = 3
+
+export interface ClientPoint {
+  clientX: number
+  clientY: number
+}
+
+/**
+ * Follows a press through the window until its release, selecting the block
+ * between the cell it started on and the cell under the pointer. The selection
+ * starts once the pointer travels past `maxClickTravel`, so a press that stays
+ * put reaches the click handlers unchanged. `cellAt` maps a client point to a
+ * visible column and row index, or a column alone to select across every row.
+ */
+export function dragSelection(
+  model: MsaViewModel,
+  start: ClientPoint,
+  cellAt: (point: ClientPoint) => { col: number; row?: number },
+) {
+  const anchor = cellAt(start)
+  const { clientX, clientY } = start
+  let dragging = false
+  function onMove(event: MouseEvent) {
+    dragging ||=
+      Math.hypot(event.clientX - clientX, event.clientY - clientY) >
+      maxClickTravel
+    if (dragging && isAlive(model)) {
+      model.selectBlock(anchor, cellAt(event))
+    }
+  }
+  function onUp() {
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+  }
+  window.addEventListener('mousemove', onMove)
+  window.addEventListener('mouseup', onUp)
+}

package/src/components/tracks/useTrackHover.ts

@@ -1,3 +1,4 @@
+import { dragSelection } from '../selectionDrag.ts'
 import { useHoverAnchor } from '../useHoverAnchor.ts'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -6,7 +7,8 @@ import type React from 'react'
 /**
  * Translates pointer events over a track's row into the hovered column and a
  * tooltip anchor. The track shares the alignment's columns, so hovering it sets
- * the model's mouse column too and the alignment's hover band follows along.
+ * the model's mouse column too and the alignment's hover band follows along. A
+ * drag along the row selects the columns it covers across every row.
  *
  * `tooltip` off skips the anchor, so a track whose tooltip is turned off still
  * drives the hover band without re-rendering on every mouse move.
@@ -22,21 +24,41 @@ export function useTrackHover({
 
   // the blocks are laid out in column space and scrolled by a transform on
   // their container, so the pointer's column comes off the untransformed row
+  function colAt(clientX: number, left: number) {
+    return Math.floor((clientX - left - model.scrollX) / model.colWidth)
+  }
+
   function onMouseMove(event: React.MouseEvent, el: HTMLElement) {
-    const { colWidth, scrollX, numColumns } = model
-    const { left } = el.getBoundingClientRect()
-    const col = Math.floor((event.clientX - left - scrollX) / colWidth)
-    const hit = col >= 0 && col < numColumns
+    const col = colAt(event.clientX, el.getBoundingClientRect().left)
+    const hit = col >= 0 && col < model.numColumns
     model.setMousePos(hit ? col : undefined, undefined)
     if (tooltip) {
       hoverAt(event, hit ? col : undefined)
     }
   }
 
+  // a press on a track's canvas, which leaves out the resize divider under it.
+  // The row takes the focus, so Escape reaches onMsaKey from there too
+  function onMouseDown(event: React.MouseEvent, el: HTMLElement) {
+    if (event.button === 0 && event.target instanceof HTMLCanvasElement) {
+      event.preventDefault()
+      el.focus({ preventScroll: true })
+      const { left } = el.getBoundingClientRect()
+      dragSelection(model, event, ({ clientX }) => ({
+        col: colAt(clientX, left),
+      }))
+    }
+  }
+
   function onMouseLeave() {
     clearAnchor()
     model.setMousePos(undefined, undefined)
   }
 
-  return { anchor: tooltip ? anchor : undefined, onMouseMove, onMouseLeave }
+  return {
+    anchor: tooltip ? anchor : undefined,
+    onMouseMove,
+    onMouseDown,
+    onMouseLeave,
+  }
 }

package/src/components/tree/dialogs/TreeNodeInfoDialog.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
 
-import Attributes from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/Attributes'
-import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard'
 import { Dialog } from '@jbrowse/core/ui'
-import { DialogContent } from '@mui/material'
+import { DialogContent, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import MetadataTable from '../../MetadataTable.tsx'
 import SequenceTextArea from '../../SequenceTextArea.tsx'
 
 import type { MsaViewModel } from '../../../model.ts'
@@ -34,20 +33,19 @@ const TreeNodeInfoDialog = observer(function ({
       maxWidth="xl"
     >
       <DialogContent>
-        <BaseCard title="Attributes">
-          <Attributes attributes={{ nodeName, ...info }} />
-        </BaseCard>
-        <BaseCard title="Sequence">
-          {res ? (
-            <SequenceTextArea str={[res]} />
-          ) : (
-            <div>Sequence not found</div>
-          )}
-        </BaseCard>
+        <Typography variant="h6">Attributes</Typography>
+        <MetadataTable record={{ nodeName, ...info }} />
+        <Typography variant="h6">Sequence</Typography>
+        {res ? (
+          <SequenceTextArea str={[res]} />
+        ) : (
+          <Typography>Sequence not found</Typography>
+        )}
         {metadata ? (
-          <BaseCard title="Extra metadata">
-            <Attributes attributes={metadata} />
-          </BaseCard>
+          <>
+            <Typography variant="h6">Extra metadata</Typography>
+            <MetadataTable record={metadata} />
+          </>
         ) : null}
       </DialogContent>
     </Dialog>

package/src/constants.ts

@@ -106,12 +106,12 @@ export const rowTintAlpha = 0.25
 export const cladeHighlightColor = '#fff3c4'
 export const cladeHighlightAlpha = 0.6
 
-// The largest inline document the snapshot carries. A larger pasted or
-// locally-opened file stays in the live model and out of the snapshot, and
-// `unshareableData` warns using the same number. The demo app gzips the
-// snapshot into `?data=`, where 15 kB of the hosted protein alignments encodes
-// to 6,300-7,600 characters, under the 8,192 gmod.org accepts.
-export const maxInlineSnapshotBytes = 15_000
+// The largest inline document a snapshot carries by default, which keeps a
+// jbrowse session small. A larger pasted or locally-opened file stays in the
+// live model and out of the snapshot, and `unshareableData` warns using the
+// same number. `MSAModelF({ maxInlineSnapshotBytes })` sets another; the demo
+// app's links hold far more.
+export const maxInlineSnapshotBytes = 50_000
 
 // Height of the band the `rowPanels` headers draw in, above the strips in the
 // top area beside the tree ruler and the minimap. A panel wider than the band

package/src/element.ts

@@ -7,15 +7,26 @@ import type { MsaViewModel } from './model.ts'
 import type { MountedViewer } from './mount.tsx'
 import type {
   Cell,
+  ColorScheme,
   ColumnTrackSpec,
+  Feature,
   Highlight,
+  MsaSelection,
   ResidueMapping,
   Viewport,
 } from './types.ts'
 
 type ElementData = Pick<
   MSAViewerProps,
-  'msa' | 'tree' | 'gff' | 'highlights' | 'columnTracks' | 'residueMappings'
+  | 'msa'
+  | 'tree'
+  | 'gff'
+  | 'features'
+  | 'colorScheme'
+  | 'highlights'
+  | 'columnTracks'
+  | 'residueMappings'
+  | 'selection'
 >
 
 interface NightingaleManager extends HTMLElement {
@@ -78,9 +89,13 @@ function residueRange(model: MsaViewModel, row: string, viewport: Viewport) {
 /**
  * Registers a custom element that renders MSAViewer, for pages with no React.
  * Attributes: msa-url, tree-url, gff-url, color-scheme, height, hide-header,
- * theme, tree-area-width and reference-row. Properties: msa, tree and gff text, highlights,
- * columnTracks and residueMappings. Events: cell-hover, cell-click and
- * viewport-change, each with the MSAViewer callback's value as detail.
+ * theme, tree-area-width and reference-row. Properties: msa, tree and gff text,
+ * features, colorScheme, highlights, columnTracks, residueMappings and
+ * selection. The
+ * colorScheme property takes a `{map}` the color-scheme attribute cannot hold,
+ * and wins over the attribute while set. Events: cell-hover, cell-click,
+ * viewport-change and selection-change, each with the MSAViewer callback's
+ * value as detail.
  *
  * Inside a <nightingale-manager>, the element registers with it and speaks its
  * protocol: it follows the display-start, display-end and highlight attributes
@@ -122,6 +137,18 @@ export function defineMsaElement(tagName = 'jbrowse-msa') {
     set gff(value: string | undefined) {
       this.#setData({ gff: value })
     }
+    get features() {
+      return this.#data.features
+    }
+    set features(value: Feature[] | undefined) {
+      this.#setData({ features: value })
+    }
+    get colorScheme() {
+      return this.#data.colorScheme
+    }
+    set colorScheme(value: ColorScheme | undefined) {
+      this.#setData({ colorScheme: value })
+    }
     get highlights() {
       return this.#data.highlights
     }
@@ -140,6 +167,13 @@ export function defineMsaElement(tagName = 'jbrowse-msa') {
     set residueMappings(value: ResidueMapping[] | undefined) {
       this.#setData({ residueMappings: value })
     }
+    // the viewer's selection, which the reader's drags change
+    get selection() {
+      return this.#model ? this.#model.selection : this.#data.selection
+    }
+    set selection(value: MsaSelection | undefined) {
+      this.#setData({ selection: value })
+    }
 
     get #referenceRow() {
       return this.getAttribute('reference-row') ?? undefined
@@ -157,7 +191,10 @@ export function defineMsaElement(tagName = 'jbrowse-msa') {
         msaFilehandle: location(this.getAttribute('msa-url')),
         treeFilehandle: location(this.getAttribute('tree-url')),
         gffFilehandle: location(this.getAttribute('gff-url')),
-        colorScheme: this.getAttribute('color-scheme') ?? undefined,
+        colorScheme:
+          this.#data.colorScheme ??
+          this.getAttribute('color-scheme') ??
+          undefined,
         height: numberAttribute(this.getAttribute('height')),
         treeAreaWidth: numberAttribute(this.getAttribute('tree-area-width')),
         hideHeader: this.hasAttribute('hide-header'),
@@ -173,6 +210,9 @@ export function defineMsaElement(tagName = 'jbrowse-msa') {
           this.#emit('viewport-change', viewport)
           this.#reportRange(viewport)
         },
+        onSelectionChange: selection => {
+          this.#emit('selection-change', selection)
+        },
         onModel: model => {
           this.#model = model
           this.#followRange()

package/src/featuresLayer.ts

@@ -0,0 +1,48 @@
+import type { Annotation, Feature } from './types.ts'
+
+const placement = new Set(['row', 'start', 'end'])
+
+// The colors and labels are maps keyed by annotation, and a getter read
+// outside a reaction recomputes on every read. Caching on the frozen feature
+// gives it one annotation however often the layer converts.
+const converted = new WeakMap<Feature, Annotation>()
+
+/**
+ * The `features` layer as the annotations a GFF would parse to. Every field
+ * but the placement is also an attribute, as a string like a GFF value, so an
+ * encoding reads `type` or a host's own field the way it reads a GFF column 9
+ * key.
+ */
+export function featuresToAnnotations(features: Feature[]): Annotation[] {
+  return features.map(feature => {
+    const cached = converted.get(feature)
+    if (cached) {
+      return cached
+    }
+    const annotation = featureAnnotation(feature)
+    converted.set(feature, annotation)
+    return annotation
+  })
+}
+
+function featureAnnotation(feature: Feature): Annotation {
+  const { row, start, end, name, description, type, strand, color } = feature
+  const accession = name ?? `${row}:${start}-${end}`
+  const attributes = Object.fromEntries(
+    Object.entries(feature)
+      .filter(([key, value]) => !placement.has(key) && value !== undefined)
+      .map(([key, value]) => [key, String(value)]),
+  )
+  return {
+    id: row,
+    accession,
+    name: name ?? accession,
+    description: description ?? name ?? accession,
+    featureType: type,
+    start,
+    end,
+    strand: strand === '+' ? 1 : strand === '-' ? -1 : undefined,
+    color,
+    attributes,
+  }
+}