add TokenAnnotationTool prototype

add isInPopover parameter
add AnnotationLineColumns

src/fragmentarium/ui/fragment/CuneiformFragmentEditor.tsx

@@ -20,6 +20,7 @@ import { FindspotService } from 'fragmentarium/application/FindspotService'
 import { Session } from 'auth/Session'
 import ColophonEditor from 'fragmentarium/ui/fragment/ColophonEditor'
 import { Colophon } from 'fragmentarium/domain/Colophon'
+import TokenAnnotationTool from './TokenAnnotationTool'
 
 const ContentSection: FunctionComponent = ({
   children,
@@ -47,6 +48,7 @@ type TabName =
   | 'references'
   | 'archaeology'
   | 'colophon'
+  | 'annotation'
 
 const tabNames: TabName[] = [
   'display',
@@ -55,6 +57,7 @@ const tabNames: TabName[] = [
   'references',
   'archaeology',
   'colophon',
+  'annotation',
 ]
 
 function EditorTab({
@@ -92,6 +95,7 @@ function TabContentsMatcher({
     references: () => ReferencesContents(props),
     archaeology: () => ArchaeologyContents(props),
     colophon: () => ColophonContents(props),
+    annotation: () => AnnotationContents(props),
   }[name]()
 }
 
@@ -127,7 +131,9 @@ export const EditorTabs: FunctionComponent<TabsProps> = ({
         <Tabs
           id={tabsId}
           defaultActiveKey={
-            session.isAllowedToTransliterateFragments() ? 'edition' : 'display'
+            session.isAllowedToTransliterateFragments()
+              ? 'annotation'
+              : 'display'
           }
           mountOnEnter={true}
           className={
@@ -235,3 +241,15 @@ function ColophonContents(props: TabsProps): JSX.Element {
 
   return <ColophonEditor updateColophon={updateColophon} {...props} />
 }
+
+function AnnotationContents(props: TabsProps): JSX.Element {
+  const updateFragmentAnnotation = async (fragment: Fragment) => {
+    console.log('Saved fragment!')
+  }
+  return (
+    <TokenAnnotationTool
+      fragment={props.fragment}
+      onSave={updateFragmentAnnotation}
+    />
+  )
+}

src/fragmentarium/ui/fragment/TokenAnnotationTool.tsx

@@ -0,0 +1,70 @@
+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 DisplayControlLine from 'transliteration/ui/DisplayControlLine'
+import { LineNumber } from 'transliteration/ui/line-number'
+import { TextLine } from 'transliteration/domain/text-line'
+import { AnnotationLineColumns } from 'transliteration/ui/line-tokens'
+import { lineComponents } from 'transliteration/ui/TransliterationLines'
+
+type Props = {
+  fragment: Fragment
+  onSave(fragment: Fragment): void
+}
+
+export default class TokenAnnotationTool extends Component<Props, any> {
+  readonly fragment: Fragment
+  constructor(props: Props) {
+    super(props)
+    this.fragment = props.fragment
+  }
+
+  markableLine({
+    line,
+    numberOfColumns,
+  }: {
+    line: TextLine
+    numberOfColumns: number
+  }): JSX.Element {
+    return (
+      <tr>
+        <td>
+          <LineNumber line={line} />
+        </td>
+        <AnnotationLineColumns
+          columns={line.columns}
+          maxColumns={numberOfColumns}
+        />
+      </tr>
+    )
+  }
+
+  render(): JSX.Element {
+    const text = this.fragment.text
+    return (
+      <table>
+        <tbody>
+          {text.allLines.map((line: AbstractLine, index) => {
+            if (isTextLine(line)) {
+              return (
+                <this.markableLine
+                  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>
+    )
+  }
+}

src/transliteration/domain/columns.ts

@@ -44,13 +44,15 @@ export function lineAccFromColumns({
   showIpa = false,
   phoneticProps,
   highlightLemmas = [],
+  isInPopover,
 }: {
   columns: readonly TextLineColumn[]
   isInLineGroup?: boolean
   showMeter?: boolean
   showIpa?: boolean
   phoneticProps?: PhoneticProps
   highlightLemmas: readonly string[]
+  isInPopover?: boolean
 }): LineAccumulator {
   return columns.reduce((acc: LineAccumulator, column) => {
     acc.addColumn(column.span)
@@ -65,7 +67,8 @@ export function lineAccFromColumns({
           updatePhoneticPropsContext(column.content, index, phoneticProps),
           _.isEmpty(_.intersection(token.uniqueLemma, highlightLemmas))
             ? []
-            : ['highlight']
+            : ['highlight'],
+          isInPopover
         )
         return acc
       },

src/transliteration/ui/LineAccumulator.tsx

@@ -44,13 +44,13 @@ function GlossWrapper({ children }: PropsWithChildren<unknown>): JSX.Element {
   )
 }
 
-interface ColumnData {
+export interface ColumnData {
   span: number | null
   content: React.ReactNode[]
 }
 
 export class LineAccumulator {
-  private columns: ColumnData[] = []
+  readonly columns: ColumnData[] = []
   private inGloss = false
   private language = 'AKKADIAN'
   private enclosureOpened = false
@@ -91,7 +91,8 @@ export class LineAccumulator {
     showMeter = false,
     showIpa = false,
     phoneticProps?: PhoneticProps,
-    bemModifiers: string[] = []
+    bemModifiers: string[] = [],
+    isInPopover?: boolean
   ): void {
     if (_.isEmpty(this.columns)) {
       this.addColumn(1)
@@ -113,6 +114,7 @@ export class LineAccumulator {
         showMeter={showMeter}
         showIpa={showIpa}
         phoneticProps={phoneticProps}
+        isInPopover={isInPopover}
       />
     )
     this.enclosureOpened = isOpenEnclosure(token)
@@ -143,7 +145,8 @@ export class LineAccumulator {
     showMeter?: boolean,
     showIpa?: boolean,
     phoneticProps?: PhoneticProps,
-    bemModifiers: string[] = []
+    bemModifiers: string[] = [],
+    isInPopover?: boolean
   ): void {
     switch (token.type) {
       case 'LanguageShift':
@@ -165,7 +168,8 @@ export class LineAccumulator {
           showMeter,
           showIpa,
           phoneticProps,
-          bemModifiers
+          bemModifiers,
+          isInPopover
         )
         this.pushLemma(token.uniqueLemma)
         this.isFirstWord = false

src/transliteration/ui/TransliterationLines.tsx

@@ -17,7 +17,7 @@ import DisplayTranslationLine from './DisplayTranslationLine'
 import DisplayControlLine from './DisplayControlLine'
 import { DisplayParallelLine } from './parallel-line'
 
-const lineComponents: ReadonlyMap<
+export const lineComponents: ReadonlyMap<
   string,
   FunctionComponent<LineProps>
 > = new Map([

src/transliteration/ui/line-tokens.tsx

@@ -7,7 +7,7 @@ import {
   LemmaMap,
   LineLemmasContext,
 } from './LineLemmasContext'
-import { LineAccumulator } from './LineAccumulator'
+import { ColumnData, LineAccumulator } from './LineAccumulator'
 import {
   lineAccFromColumns,
   TextLineColumn,
@@ -83,6 +83,46 @@ export function LineColumns({
   )
 }
 
+export function AnnotationLineColumns({
+  columns,
+  maxColumns,
+}: {
+  columns: readonly TextLineColumn[]
+  maxColumns: number
+}): JSX.Element {
+  const lineAccumulator = lineAccFromColumns({
+    columns,
+    highlightLemmas: [],
+    isInPopover: true,
+  })
+
+  const [lemmaMap, lemmaSetter] = useState<LemmaMap>(
+    createLemmaMap(lineAccumulator.lemmas)
+  )
+
+  return (
+    <LineLemmasContext.Provider
+      value={{
+        lemmaMap: lemmaMap,
+        lemmaSetter: lemmaSetter,
+      }}
+    >
+      {lineAccumulator.columns.map((column: ColumnData, index: number) => (
+        <td key={index} colSpan={column.span ?? maxColumns}>
+          {column.content.map((tokenComponent, index) => (
+            <span
+              key={index}
+              onClick={() => console.log(`clicked on token at index=${index}`)}
+            >
+              {tokenComponent}
+            </span>
+          ))}
+        </td>
+      ))}
+    </LineLemmasContext.Provider>
+  )
+}
+
 export class LineToken {
   token: LemmatizableToken
   lemma: DictionaryWord[] | null = null