tweak display layout

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

Hide file tree

Showing 4 changed files with 41 additions and 30 deletions.
diff --git a/src/fragmentarium/ui/fragment/TokenAnnotationTool.sass b/src/fragmentarium/ui/fragment/TokenAnnotationTool.sass
@@ -0,0 +1,11 @@
+.annotation-tool
+.annotation-line
+    &__source
+    &__annotation-layer
+        font-size: .7em
+        td
+            padding-bottom: 1em
+        .markable-token
+            white-space: nowrap
+            border: 1px dashed orange
+            margin-right: 1em
diff --git a/src/fragmentarium/ui/fragment/TokenAnnotationTool.tsx b/src/fragmentarium/ui/fragment/TokenAnnotationTool.tsx
@@ -5,7 +5,8 @@ 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 { AnnotationLineColumns } from 'transliteration/ui/annotation-line-tokens'
+import { AnnotationLine } from 'transliteration/ui/annotation-line-tokens'
+import './TokenAnnotationTool.sass'
 
 type Props = {
   fragment: Fragment
@@ -27,7 +28,7 @@ export default class TokenAnnotationTool extends Component<Props> {
     line: TextLine
     lineIndex: number
   }): JSX.Element {
-    return <AnnotationLineColumns line={line} lineIndex={lineIndex} />
+    return <AnnotationLine line={line} lineIndex={lineIndex} />
   }
 
   render(): JSX.Element {
@@ -40,7 +41,7 @@ export default class TokenAnnotationTool extends Component<Props> {
             lineComponents.get(line.type) || DisplayControlLine
 
           return (
-            <table key={index}>
+            <table key={index} className={'annotation-tool'}>
               <tbody>
                 {isTextLine(line) ? (
                   <this.displayMarkableLine

diff --git a/src/transliteration/ui/MarkableToken.tsx b/src/transliteration/ui/MarkableToken.tsx
@@ -10,28 +10,27 @@ export class MarkableToken {
   readonly isInGloss: boolean
   readonly protocol: Protocol | null = null
   readonly language: string
-  readonly hasLeadingWhitespace: boolean
+  readonly hasTrailingWhitespace: boolean
 
   constructor(
     token: Token,
     index: number,
     isInGloss: boolean,
     protocol: Protocol | null,
     language: string,
-    hasLeadingWhitespace?: boolean
+    hasTrailingWhitespace?: boolean
   ) {
     this.token = token
     this.index = index
     this.isInGloss = isInGloss
     this.protocol = protocol
     this.language = language
-    this.hasLeadingWhitespace = hasLeadingWhitespace || false
+    this.hasTrailingWhitespace = hasTrailingWhitespace || false
   }
 
   display(): JSX.Element {
     return (
       <>
-        {this.hasLeadingWhitespace && ' '}
         <DisplayToken
           token={this.token}
           bemModifiers={

diff --git a/src/transliteration/ui/annotation-line-tokens.tsx b/src/transliteration/ui/annotation-line-tokens.tsx
@@ -3,9 +3,9 @@ import { TextLineColumn } from 'transliteration/domain/columns'
 import { TextLine } from 'transliteration/domain/text-line'
 import { LineNumber } from './line-number'
 import { isCloseEnclosure, isOpenEnclosure } from './LineAccumulator'
-import './annotation-line-tokens.sass'
 import { isLeftSide, Protocol } from 'transliteration/domain/token'
 import { MarkableToken } from './MarkableToken'
+import _ from 'lodash'
 
 function createTokenMarkables(
   columns: readonly TextLineColumn[]
@@ -20,6 +20,7 @@ function createTokenMarkables(
 
   columns.forEach((column) =>
     column.content.forEach((token, index) => {
+      const nextToken = column.content[index + 1] || null
       switch (token.type) {
         case 'LanguageShift':
           language = token.language
@@ -33,23 +34,23 @@ function createTokenMarkables(
         case 'Column':
           throw new Error('Unexpected column token.')
         default:
+          enclosureIsOpen = isOpenEnclosure(token)
           markable = new MarkableToken(
             token,
             index,
             isInGloss,
             protocol,
             language,
-            index !== 0 && !isCloseEnclosure(token) && !enclosureIsOpen
+            nextToken && !isCloseEnclosure(nextToken) && !enclosureIsOpen
           )
-          enclosureIsOpen = isOpenEnclosure(token)
           markables.push(markable)
       }
     })
   )
   return markables
 }
 
-export function AnnotationLineColumns({
+export function AnnotationLine({
   line,
   lineIndex,
 }: {
@@ -63,47 +64,46 @@ export function AnnotationLineColumns({
       <td>
         <LineNumber line={line} />
       </td>
-      {markables.map((token, index) => {
+      {markables.map((markable, index) => {
         return (
           <td key={index}>
             <span
               className={'source-token'}
-              onClick={() =>
-                console.log(
-                  `display token ${token.token.cleanValue} at ` +
-                    `line=${lineIndex}, index in array=${index}, token index = ${token.index}`,
-                  token.token
-                )
-              }
+              onClick={() => console.log(markable)}
             >
-              {token.display()}
+              {markable.display()}
             </span>
+            {markable.hasTrailingWhitespace && <>&nbsp;&nbsp;</>}
           </td>
         )
       })}
     </tr>
   )
-  const lemmaAnnotationLayer = (
+  const lemmaAnnotationLayer = _.some(
+    markables,
+    (markable) => markable.token.lemmatizable
+  ) ? (
     <tr className={'annotation-line__annotation-layer'}>
       <td></td>
-      {markables.map((token, index) => {
-        return (
+      {markables.map((markable, index) => {
+        const token = markable.token
+        return token.lemmatizable ? (
           <td key={index}>
             <span
               className={'markable-token'}
-              onClick={() =>
-                console.log(
-                  `lemma of token ${token.token.cleanValue} at line=${lineIndex}, index=${index}`,
-                  token.token
-                )
-              }
+              onClick={() => console.log(markable)}
             >
-              {token.token.uniqueLemma}
+              {_.isEmpty(token.uniqueLemma) ? '➕' : token.uniqueLemma}
             </span>
+            {markable.hasTrailingWhitespace && <>&nbsp;&nbsp;</>}
           </td>
+        ) : (
+          <td key={index}></td>
         )
       })}
     </tr>
+  ) : (
+    <></>
   )
 
   return (