From 75075e1d1b1a9c8b6e46e6de7164d74d32e570c5 Mon Sep 17 00:00:00 2001
From: fsimonjetz <fabian.simonjetz@ruhr-uni-bochum.de>
Date: Wed, 31 Jul 2024 15:40:29 +0000
Subject: [PATCH] extend TokenAnnotationTool, make each line a separate table

---
 .../ui/fragment/TokenAnnotationTool.tsx       | 51 +++++++++++--------
 src/transliteration/ui/line-tokens.tsx        |  5 +-
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/fragmentarium/ui/fragment/TokenAnnotationTool.tsx b/src/fragmentarium/ui/fragment/TokenAnnotationTool.tsx
index 756d7e45d..cd9759423 100644
--- a/src/fragmentarium/ui/fragment/TokenAnnotationTool.tsx
+++ b/src/fragmentarium/ui/fragment/TokenAnnotationTool.tsx
@@ -23,9 +23,11 @@ export default class TokenAnnotationTool extends Component<Props> {
 
   displayMarkableLine({
     line,
+    lineIndex,
     numberOfColumns,
   }: {
     line: TextLine
+    lineIndex: number
     numberOfColumns: number
   }): JSX.Element {
     return (
@@ -34,6 +36,7 @@ export default class TokenAnnotationTool extends Component<Props> {
           <LineNumber line={line} />
         </td>
         <AnnotationLineColumns
+          lineIndex={lineIndex}
           columns={line.columns}
           maxColumns={numberOfColumns}
         />
@@ -43,29 +46,33 @@ export default class TokenAnnotationTool extends Component<Props> {
 
   render(): JSX.Element {
     const text = this.fragment.text
+
     return (
-      <table>
-        <tbody>
-          {text.allLines.map((line: AbstractLine, index) => {
-            if (isTextLine(line)) {
-              return (
-                <this.displayMarkableLine
-                  key={index}
-                  line={line}
-                  numberOfColumns={text.numberOfColumns}
-                />
-              )
-            }
-            const LineComponent =
-              lineComponents.get(line.type) || DisplayControlLine
-            return (
-              <tr key={index}>
-                <LineComponent line={line} columns={text.numberOfColumns} />
-              </tr>
-            )
-          })}
-        </tbody>
-      </table>
+      <>
+        {text.allLines.map((line: AbstractLine, index) => {
+          const LineComponent =
+            lineComponents.get(line.type) || DisplayControlLine
+
+          return (
+            <table key={index}>
+              <tbody>
+                {isTextLine(line) ? (
+                  <this.displayMarkableLine
+                    key={index}
+                    line={line}
+                    lineIndex={index}
+                    numberOfColumns={text.numberOfColumns}
+                  />
+                ) : (
+                  <tr key={index}>
+                    <LineComponent line={line} columns={text.numberOfColumns} />
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          )
+        })}
+      </>
     )
   }
 }
diff --git a/src/transliteration/ui/line-tokens.tsx b/src/transliteration/ui/line-tokens.tsx
index 41fd232be..eee3439cf 100644
--- a/src/transliteration/ui/line-tokens.tsx
+++ b/src/transliteration/ui/line-tokens.tsx
@@ -82,9 +82,11 @@ export function LineColumns({
 }
 
 export function AnnotationLineColumns({
+  lineIndex,
   columns,
   maxColumns,
 }: {
+  lineIndex: number
   columns: readonly TextLineColumn[]
   maxColumns: number
 }): JSX.Element {
@@ -101,7 +103,8 @@ export function AnnotationLineColumns({
                   key={index}
                   onClick={() =>
                     console.log(
-                      `clicked on token ${markableToken.token.cleanValue} at index=${index}`
+                      `clicked on token ${markableToken.token.cleanValue} at line=${lineIndex}, index=${index}`,
+                      markableToken.token
                     )
                   }
                 >