From 1cb2f88dfdd09f0be56547686066be5285589c4d Mon Sep 17 00:00:00 2001
From: fsimonjetz <fabian.simonjetz@ruhr-uni-bochum.de>
Date: Mon, 29 Jul 2024 10:59:31 +0000
Subject: [PATCH] initial prototype

---
 .../ui/fragment/CuneiformFragmentEditor.tsx   | 12 +++--
 .../ui/fragment/FragmentAnnotator.sass        |  4 ++
 .../ui/fragment/FragmentAnnotator.tsx         | 54 +++++++++++++++++++
 3 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 src/fragmentarium/ui/fragment/FragmentAnnotator.sass
 create mode 100644 src/fragmentarium/ui/fragment/FragmentAnnotator.tsx

diff --git a/src/fragmentarium/ui/fragment/CuneiformFragmentEditor.tsx b/src/fragmentarium/ui/fragment/CuneiformFragmentEditor.tsx
index f16bf2c23..0a7a9ed61 100644
--- a/src/fragmentarium/ui/fragment/CuneiformFragmentEditor.tsx
+++ b/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 FragmentAnnotator from 'fragmentarium/ui/fragment/FragmentAnnotator'
 
 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]()
 }
 
@@ -126,9 +130,7 @@ export const EditorTabs: FunctionComponent<TabsProps> = ({
       {(session) => (
         <Tabs
           id={tabsId}
-          defaultActiveKey={
-            session.isAllowedToTransliterateFragments() ? 'edition' : 'display'
-          }
+          defaultActiveKey={'annotation'}
           mountOnEnter={true}
           className={
             session.isGuestSession() ? 'CuneiformFragment__tabs-hidden' : ''
@@ -235,3 +237,7 @@ function ColophonContents(props: TabsProps): JSX.Element {
 
   return <ColophonEditor updateColophon={updateColophon} {...props} />
 }
+
+function AnnotationContents(props: TabsProps): JSX.Element {
+  return <FragmentAnnotator fragment={props.fragment} />
+}
diff --git a/src/fragmentarium/ui/fragment/FragmentAnnotator.sass b/src/fragmentarium/ui/fragment/FragmentAnnotator.sass
new file mode 100644
index 000000000..e3d05d991
--- /dev/null
+++ b/src/fragmentarium/ui/fragment/FragmentAnnotator.sass
@@ -0,0 +1,4 @@
+.fragment-annotator__markable-token
+    flex-grow: 0
+    padding-left: 0
+    padding-right: 0
diff --git a/src/fragmentarium/ui/fragment/FragmentAnnotator.tsx b/src/fragmentarium/ui/fragment/FragmentAnnotator.tsx
new file mode 100644
index 000000000..388c33866
--- /dev/null
+++ b/src/fragmentarium/ui/fragment/FragmentAnnotator.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { Fragment } from 'fragmentarium/domain/fragment'
+import { Col, Container, Row } from 'react-bootstrap'
+import { Token } from 'transliteration/domain/token'
+import { isShift, isTextLine } from 'transliteration/domain/type-guards'
+import './FragmentAnnotator.sass'
+import { TextLine } from 'transliteration/domain/text-line'
+import { AbstractLine } from 'transliteration/domain/abstract-line'
+
+function isMarkable(token: Token): boolean {
+  return !isShift(token)
+}
+
+function DisplayMarkableRow({ line }: { line: TextLine }): JSX.Element {
+  return (
+    <Row>
+      {line.content.map((token, index) => (
+        <React.Fragment key={index}>
+          {index !== 0 && <>&nbsp;</>}
+          {isMarkable(token) && (
+            <Col className={'fragment-annotator__markable-token'}>
+              {token.cleanValue}
+            </Col>
+          )}
+        </React.Fragment>
+      ))}
+    </Row>
+  )
+}
+
+function DisplayUnmarkableRow({ line }: { line: AbstractLine }): JSX.Element {
+  return <Row>{`(${line.prefix}A ${line.type})`}</Row>
+}
+
+export default function FragmentAnnotator({
+  fragment,
+}: {
+  fragment: Fragment
+}): JSX.Element {
+  console.log(fragment.text)
+  return (
+    <>
+      {fragment.text.lines.map((line, index) => (
+        <Container key={index}>
+          {isTextLine(line) ? (
+            <DisplayMarkableRow line={line} />
+          ) : (
+            <DisplayUnmarkableRow line={line} />
+          )}
+        </Container>
+      ))}
+    </>
+  )
+}