experiment with table view

src/fragmentarium/ui/fragment/CuneiformFragmentEditor.tsx

@@ -247,9 +247,11 @@ function AnnotationContents(props: TabsProps): JSX.Element {
     console.log('Saved fragment!')
   }
   return (
-    <TokenAnnotationTool
-      fragment={props.fragment}
-      onSave={updateFragmentAnnotation}
-    />
+    <div className="annotation-tool__wrapper">
+      <TokenAnnotationTool
+        fragment={props.fragment}
+        onSave={updateFragmentAnnotation}
+      />
+    </div>
   )
 }

src/fragmentarium/ui/fragment/TokenAnnotationTool.sass

@@ -1,11 +1,20 @@
 .annotation-tool
+    width: unset
+
+    &__wrapper
+        max-height: 50%
+        overflow-y: auto
+    td
+        padding: 0
+        border-top: 0
+    tr.line-separator
+        height: 1em
+        // border-top: 1px solid black
 .annotation-line
     &__source
     &__annotation-layer
         font-size: .7em
-        td
-            padding-bottom: 1em
         .markable-token
             white-space: nowrap
-            border: 1px dashed orange
+            // border: 1px dashed orange
             margin-right: 1em

src/fragmentarium/ui/fragment/TokenAnnotationTool.tsx

@@ -1,12 +1,13 @@
 import React, { Component } from 'react'
 import { Fragment } from 'fragmentarium/domain/fragment'
 import { AbstractLine } from 'transliteration/domain/abstract-line'
-import { isTextLine } from 'transliteration/domain/type-guards'
+import { isEmptyLine, 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 { AnnotationLine } from 'transliteration/ui/annotation-line-tokens'
 import './TokenAnnotationTool.sass'
+import { Table } from 'react-bootstrap'
 
 type Props = {
   fragment: Fragment
@@ -35,30 +36,38 @@ export default class TokenAnnotationTool extends Component<Props> {
     const text = this.fragment.text
 
     return (
-      <>
-        {text.allLines.map((line: AbstractLine, index) => {
-          const LineComponent =
-            lineComponents.get(line.type) || DisplayControlLine
+      <Table className={'annotation-tool'}>
+        <tbody>
+          {text.allLines
+            .filter((line) => !isEmptyLine(line))
+            .map((line: AbstractLine, index) => {
+              const LineComponent =
+                lineComponents.get(line.type) || DisplayControlLine
 
-          return (
-            <table key={index} className={'annotation-tool'}>
-              <tbody>
-                {isTextLine(line) ? (
-                  <this.displayMarkableLine
-                    key={index}
-                    line={line}
-                    lineIndex={index}
-                  />
-                ) : (
-                  <tr key={index}>
-                    <LineComponent line={line} columns={text.numberOfColumns} />
-                  </tr>
-                )}
-              </tbody>
-            </table>
-          )
-        })}
-      </>
+              return (
+                <React.Fragment key={index}>
+                  {isTextLine(line) ? (
+                    <>
+                      <this.displayMarkableLine
+                        key={index}
+                        line={line}
+                        lineIndex={index}
+                      />
+                      <tr className="line-separator"></tr>
+                    </>
+                  ) : (
+                    <tr key={index}>
+                      <LineComponent
+                        line={line}
+                        columns={text.numberOfColumns}
+                      />
+                    </tr>
+                  )}
+                </React.Fragment>
+              )
+            })}
+        </tbody>
+      </Table>
     )
   }
 }

src/transliteration/ui/MarkableToken.tsx

@@ -3,29 +3,33 @@ import { Protocol, Token } from 'transliteration/domain/token'
 import { isEnclosure } from 'transliteration/domain/type-guards'
 import DisplayToken from './DisplayToken'
 import { GlossWrapper } from './LineAccumulator'
+import _ from 'lodash'
 
 export class MarkableToken {
   readonly token: Token
   readonly index: number
+  lemma: readonly string[]
   readonly isInGloss: boolean
   readonly protocol: Protocol | null = null
   readonly language: string
-  readonly hasTrailingWhitespace: boolean
 
   constructor(
     token: Token,
     index: number,
     isInGloss: boolean,
     protocol: Protocol | null,
-    language: string,
-    hasTrailingWhitespace?: boolean
+    language: string
   ) {
     this.token = token
     this.index = index
     this.isInGloss = isInGloss
     this.protocol = protocol
     this.language = language
-    this.hasTrailingWhitespace = hasTrailingWhitespace || false
+    this.lemma = token.uniqueLemma || []
+  }
+
+  get hasLemma(): boolean {
+    return !_.isEmpty(this.lemma)
   }
 
   display(): JSX.Element {

src/transliteration/ui/annotation-line-tokens.tsx

@@ -1,26 +1,23 @@
 import React from 'react'
 import { TextLineColumn } from 'transliteration/domain/columns'
 import { TextLine } from 'transliteration/domain/text-line'
-import { LineNumber } from './line-number'
-import { isCloseEnclosure, isOpenEnclosure } from './LineAccumulator'
 import { isLeftSide, Protocol } from 'transliteration/domain/token'
 import { MarkableToken } from './MarkableToken'
-import _ from 'lodash'
+import { Form } from 'react-bootstrap'
+import lineNumberToString from 'transliteration/domain/lineNumberToString'
 
 function createTokenMarkables(
   columns: readonly TextLineColumn[]
 ): MarkableToken[] {
   let language = 'AKKADIAN'
   let isInGloss = false
   let protocol: Protocol | null = null
-  let enclosureIsOpen = false
   let markable: MarkableToken
 
   const markables: MarkableToken[] = []
 
   columns.forEach((column) =>
     column.content.forEach((token, index) => {
-      const nextToken = column.content[index + 1] || null
       switch (token.type) {
         case 'LanguageShift':
           language = token.language
@@ -34,14 +31,12 @@ function createTokenMarkables(
         case 'Column':
           throw new Error('Unexpected column token.')
         default:
-          enclosureIsOpen = isOpenEnclosure(token)
           markable = new MarkableToken(
             token,
             index,
             isInGloss,
             protocol,
-            language,
-            nextToken && !isCloseEnclosure(nextToken) && !enclosureIsOpen
+            language
           )
           markables.push(markable)
       }
@@ -50,6 +45,18 @@ function createTokenMarkables(
   return markables
 }
 
+function DisplayMarkable({
+  markable,
+}: {
+  markable: MarkableToken
+}): JSX.Element {
+  return (
+    <>
+      <span className={'source-token'}>{markable.display()}</span>
+    </>
+  )
+}
+
 export function AnnotationLine({
   line,
   lineIndex,
@@ -59,57 +66,26 @@ export function AnnotationLine({
 }): JSX.Element {
   const markables = createTokenMarkables(line.columns)
 
-  const sourceTextLine = (
-    <tr className={'annotation-line__source'}>
-      <td>
-        <LineNumber line={line} />
-      </td>
+  const checkbox = <Form.Check type={'checkbox'} />
+
+  return (
+    <>
+      <tr>
+        <td>{checkbox}</td>
+        <td>({lineNumberToString(line.lineNumber)})</td>
+        <td></td>
+      </tr>
       {markables.map((markable, index) => {
         return (
-          <td key={index}>
-            <span
-              className={'source-token'}
-              onClick={() => console.log(markable)}
-            >
-              {markable.display()}
-            </span>
-            {markable.hasTrailingWhitespace && <>&nbsp;&nbsp;</>}
-          </td>
-        )
-      })}
-    </tr>
-  )
-  const lemmaAnnotationLayer = _.some(
-    markables,
-    (markable) => markable.token.lemmatizable
-  ) ? (
-    <tr className={'annotation-line__annotation-layer'}>
-      <td></td>
-      {markables.map((markable, index) => {
-        const token = markable.token
-        return token.lemmatizable ? (
-          <td key={index}>
-            <span
-              className={'markable-token'}
-              onClick={() => console.log(markable)}
-            >
-              {_.isEmpty(token.uniqueLemma) ? '➕' : token.uniqueLemma}
-            </span>
-            {markable.hasTrailingWhitespace && <>&nbsp;&nbsp;</>}
-          </td>
-        ) : (
-          <td key={index}></td>
+          <tr key={index}>
+            <td>{checkbox}</td>
+            <td>
+              <DisplayMarkable markable={markable} />
+            </td>
+            <td>{markable.lemma}</td>
+          </tr>
         )
       })}
-    </tr>
-  ) : (
-    <></>
-  )
-
-  return (
-    <>
-      {sourceTextLine}
-      {lemmaAnnotationLayer}
     </>
   )
 }