feat: show position indices in msa viewer

src/components/Msa/Msa.tsx

@@ -8,8 +8,8 @@ import styled from 'styled-components'
 import { Card, CardBody, CardHeader, Col, Container, Row } from 'reactstrap'
 import { LOADING } from 'src/components/Loading/Loading'
 import { MSA_CHAR_HEIGHT, MSA_CHAR_WIDTH } from 'src/components/Msa/MsaCharacter'
+import { MsaRefSequence } from 'src/components/Msa/MsaPositionRow'
 import { MsaRow } from 'src/components/Msa/MsaRow'
-import { MsaSequence } from 'src/components/Msa/MsaSequence'
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
 import type { GeneCluster, SpeciesDesc } from 'src/hooks/useDataIndexQuery'
 import { SequenceType, useGeneClusterData } from 'src/hooks/useDataIndexQuery'
@@ -151,7 +151,7 @@ function MsaSized({ species, gene, seqType, width, height }: MsaSizedProps) {
         <Stage width={width + PADDING} height={height + PADDING} ref={stage}>
           <Layer clearBeforeDraw>
             {rows}
-            <MsaSequence seq={data.refEntry.seq} seqType={seqType} ref={refSeqRow} />
+            <MsaRefSequence seq={data.refEntry.seq} seqType={seqType} ref={refSeqRow} />
           </Layer>
         </Stage>
       </MsaLargeContainer>

src/components/Msa/MsaPositionRow.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react/no-array-index-key */
+import React, { ComponentProps, ForwardedRef, forwardRef, useMemo } from 'react'
+import Konva from 'konva'
+import { Group, Rect, Text } from 'react-konva'
+import { MSA_CHAR_HEIGHT, MSA_CHAR_WIDTH, MsaCharacter } from 'src/components/Msa/MsaCharacter'
+import type { SequenceType } from 'src/hooks/useDataIndexQuery'
+
+const MSA_POS_FONT_SIZE = 8
+
+export interface MsaRefSequenceProps extends ComponentProps<typeof Group> {
+  seq: string
+  seqType: SequenceType
+}
+
+export const MsaRefSequence = forwardRef(function MsaRefSequenceWithRef(
+  { seq, seqType, ...restProps }: MsaRefSequenceProps,
+  ref: ForwardedRef<Konva.Group>,
+) {
+  const chars = useMemo(
+    () =>
+      seq.split('').map((c, pos) => (
+        <Group key={pos} x={MSA_CHAR_WIDTH * pos}>
+          {(pos + 1) % 2 === 0 && <MsaPosition pos={pos + 1} />}
+          <MsaCharacter y={MSA_CHAR_HEIGHT} character={c} seqType={seqType} />
+        </Group>
+      )),
+    [seq, seqType],
+  )
+  return (
+    <Group ref={ref} {...restProps}>
+      {chars}
+    </Group>
+  )
+})
+
+export interface MsaPositionProps extends ComponentProps<typeof Group> {
+  pos: number
+}
+
+function MsaPosition({ pos, ...restProps }: MsaPositionProps) {
+  const text = useMemo(() => {
+    return (
+      <Text
+        width={MSA_CHAR_WIDTH}
+        height={MSA_CHAR_HEIGHT}
+        fill="#222a"
+        text={pos.toString()}
+        fontSize={MSA_POS_FONT_SIZE}
+        fontFamily="monospace"
+        align="center"
+        verticalAlign="middle"
+      />
+    )
+  }, [pos])
+
+  return (
+    <Group {...restProps}>
+      <Rect x={-MSA_CHAR_WIDTH} width={MSA_CHAR_WIDTH * 2} height={MSA_CHAR_HEIGHT} fill="#aaa" />
+      {text}
+    </Group>
+  )
+}