simplify markable creation logic

ElectronicBabylonianLiterature · Aug 1, 2024 · ad651ff · ad651ff
1 parent e37da95
commit ad651ff
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 291 deletions.
diff --git a/src/fragmentarium/ui/fragment/TokenAnnotationTool.tsx b/src/fragmentarium/ui/fragment/TokenAnnotationTool.tsx
@@ -5,68 +5,7 @@ import { isTextLine } from 'transliteration/domain/type-guards'
 import DisplayControlLine from 'transliteration/ui/DisplayControlLine'
 import { TextLine } from 'transliteration/domain/text-line'
 import { lineComponents } from 'transliteration/ui/TransliterationLines'
-import {
-  annotationLineAccFromColumns,
-  TextLineColumn,
-} from 'transliteration/domain/columns'
-import { LineNumber } from 'transliteration/ui/line-number'
-
-function AnnotationLineColumns({
-  line,
-  lineIndex,
-  columns,
-}: {
-  line: TextLine
-  lineIndex: number
-  columns: readonly TextLineColumn[]
-}): JSX.Element {
-  const lineAccumulator = annotationLineAccFromColumns(columns)
-
-  return (
-    <>
-      <tr className={'annotation-line__source'}>
-        <td>
-          <LineNumber line={line} />
-        </td>
-        {lineAccumulator.flatResult.map((token, index) => {
-          return (
-            <td key={index}>
-              <span
-                onClick={() =>
-                  console.log(
-                    `clicked on token ${token.token.cleanValue} at line=${lineIndex}, index=${index}`,
-                    token.token
-                  )
-                }
-              >
-                {token.display()}
-              </span>
-            </td>
-          )
-        })}
-      </tr>
-      <tr className={'annotation-line__lemmatization'}>
-        <td></td>
-        {lineAccumulator.flatResult.map((token, index) => {
-          return (
-            <td key={index}>
-              <span
-                onClick={() =>
-                  console.log(
-                    `clicked on lemma of token ${token.token.cleanValue} at line=${lineIndex}, index=${index}`,
-                    token.token
-                  )
-                }
-              >
-                {token.token.uniqueLemma}
-              </span>
-            </td>
-          )
-        })}
-      </tr>
-    </>
-  )
-}
+import { AnnotationLineColumns } from 'transliteration/ui/annotation-line-tokens'
 
 type Props = {
   fragment: Fragment
@@ -88,13 +27,7 @@ export default class TokenAnnotationTool extends Component<Props> {
     line: TextLine
     lineIndex: number
   }): JSX.Element {
-    return (
-      <AnnotationLineColumns
-        line={line}
-        lineIndex={lineIndex}
-        columns={line.columns}
-      />
-    )
+    return <AnnotationLineColumns line={line} lineIndex={lineIndex} />
   }
 
   render(): JSX.Element {

diff --git a/src/transliteration/domain/columns.ts b/src/transliteration/domain/columns.ts
@@ -3,7 +3,6 @@ import { Token } from './token'
 import { isAkkadianWord, isColumn } from './type-guards'
 import { LineAccumulator } from 'transliteration/ui/LineAccumulator'
 import { PhoneticProps } from 'akkadian/application/phonetics/segments'
-import { AnnotationLineAccumulator } from 'transliteration/ui/AnnotationLineAccumulator'
 
 export interface TextLineColumn {
   span: number | null
@@ -76,22 +75,6 @@ export function lineAccFromColumns({
   }, new LineAccumulator(isInLineGroup, showMeter, showIpa))
 }
 
-export function annotationLineAccFromColumns(
-  columns: readonly TextLineColumn[]
-): AnnotationLineAccumulator {
-  return columns.reduce((acc: AnnotationLineAccumulator, column) => {
-    acc.addColumn(column.span)
-    column.content.reduce(
-      (acc: AnnotationLineAccumulator, token: Token, index: number) => {
-        acc.addColumnToken(token, index)
-        return acc
-      },
-      acc
-    )
-    return acc
-  }, new AnnotationLineAccumulator())
-}
-
 export function numberOfColumns(columns: readonly TextLineColumn[]): number {
   return _(columns)
     .map((column) => column.span ?? defaultSpan)

diff --git a/src/transliteration/ui/AnnotationLineAccumulator.tsx b/src/transliteration/ui/AnnotationLineAccumulator.tsx
diff --git a/src/transliteration/ui/LineAccumulator.tsx b/src/transliteration/ui/LineAccumulator.tsx
@@ -199,50 +199,3 @@ export class LineAccumulator {
       .sum()
   }
 }
-
-export class MarkableToken {
-  readonly token: Token
-  readonly isInGloss: boolean
-  readonly protocol: Protocol | null = null
-  readonly language: string
-  readonly hasLeadingWhitespace: boolean
-
-  constructor(
-    token: Token,
-    isInGloss: boolean,
-    protocol: Protocol | null,
-    language: string,
-    hasLeadingWhitespace?: boolean
-  ) {
-    this.token = token
-    this.isInGloss = isInGloss
-    this.protocol = protocol
-    this.language = language
-    this.hasLeadingWhitespace = hasLeadingWhitespace || false
-  }
-
-  display() {
-    return (
-      <>
-        {this.hasLeadingWhitespace && ' '}
-        <DisplayToken
-          token={this.token}
-          bemModifiers={
-            this.protocol === null
-              ? [this.language]
-              : [
-                  this.language,
-                  this.protocol.replace('!', 'commentary-protocol-'),
-                ]
-          }
-          Wrapper={
-            this.isInGloss && !isEnclosure(this.token)
-              ? GlossWrapper
-              : undefined
-          }
-          isInPopover={true}
-        />
-      </>
-    )
-  }
-}
diff --git a/src/transliteration/ui/MarkableToken.tsx b/src/transliteration/ui/MarkableToken.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import { Protocol, Token } from 'transliteration/domain/token'
+import { isEnclosure } from 'transliteration/domain/type-guards'
+import DisplayToken from './DisplayToken'
+import { GlossWrapper } from './LineAccumulator'
+
+export class MarkableToken {
+  readonly token: Token
+  readonly index: number
+  readonly isInGloss: boolean
+  readonly protocol: Protocol | null = null
+  readonly language: string
+  readonly hasLeadingWhitespace: boolean
+
+  constructor(
+    token: Token,
+    index: number,
+    isInGloss: boolean,
+    protocol: Protocol | null,
+    language: string,
+    hasLeadingWhitespace?: boolean
+  ) {
+    this.token = token
+    this.index = index
+    this.isInGloss = isInGloss
+    this.protocol = protocol
+    this.language = language
+    this.hasLeadingWhitespace = hasLeadingWhitespace || false
+  }
+
+  display(): JSX.Element {
+    return (
+      <>
+        {this.hasLeadingWhitespace && ' '}
+        <DisplayToken
+          token={this.token}
+          bemModifiers={
+            this.protocol === null
+              ? [this.language]
+              : [
+                  this.language,
+                  this.protocol.replace('!', 'commentary-protocol-'),
+                ]
+          }
+          Wrapper={
+            this.isInGloss && !isEnclosure(this.token)
+              ? GlossWrapper
+              : undefined
+          }
+          isInPopover={true}
+        />
+      </>
+    )
+  }
+}