From 850fa87102d9ccf9cf430e0c0c146b01789ed22d Mon Sep 17 00:00:00 2001 From: fsimonjetz Date: Thu, 1 Aug 2024 15:54:56 +0000 Subject: [PATCH] experiment with table view --- .../ui/fragment/CuneiformFragmentEditor.tsx | 10 ++- .../ui/fragment/TokenAnnotationTool.sass | 15 +++- .../ui/fragment/TokenAnnotationTool.tsx | 57 ++++++------ src/transliteration/ui/MarkableToken.tsx | 12 ++- .../ui/annotation-line-tokens.tsx | 86 +++++++------------ 5 files changed, 90 insertions(+), 90 deletions(-) diff --git a/src/fragmentarium/ui/fragment/CuneiformFragmentEditor.tsx b/src/fragmentarium/ui/fragment/CuneiformFragmentEditor.tsx index 05fc0e8ce..fdf40ab8c 100644 --- a/src/fragmentarium/ui/fragment/CuneiformFragmentEditor.tsx +++ b/src/fragmentarium/ui/fragment/CuneiformFragmentEditor.tsx @@ -247,9 +247,11 @@ function AnnotationContents(props: TabsProps): JSX.Element { console.log('Saved fragment!') } return ( - +
+ +
) } diff --git a/src/fragmentarium/ui/fragment/TokenAnnotationTool.sass b/src/fragmentarium/ui/fragment/TokenAnnotationTool.sass index e6e7743fb..c76af9ca1 100644 --- a/src/fragmentarium/ui/fragment/TokenAnnotationTool.sass +++ b/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 diff --git a/src/fragmentarium/ui/fragment/TokenAnnotationTool.tsx b/src/fragmentarium/ui/fragment/TokenAnnotationTool.tsx index 3f74cced5..1d5ee2659 100644 --- a/src/fragmentarium/ui/fragment/TokenAnnotationTool.tsx +++ b/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 { const text = this.fragment.text return ( - <> - {text.allLines.map((line: AbstractLine, index) => { - const LineComponent = - lineComponents.get(line.type) || DisplayControlLine + + + {text.allLines + .filter((line) => !isEmptyLine(line)) + .map((line: AbstractLine, index) => { + const LineComponent = + lineComponents.get(line.type) || DisplayControlLine - return ( -
- - {isTextLine(line) ? ( - - ) : ( - - - - )} - -
- ) - })} - + return ( + + {isTextLine(line) ? ( + <> + + + + ) : ( + + + + )} + + ) + })} + + ) } } diff --git a/src/transliteration/ui/MarkableToken.tsx b/src/transliteration/ui/MarkableToken.tsx index e1f22d003..76f82146f 100644 --- a/src/transliteration/ui/MarkableToken.tsx +++ b/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 { diff --git a/src/transliteration/ui/annotation-line-tokens.tsx b/src/transliteration/ui/annotation-line-tokens.tsx index 3ab46aa08..15245d8d1 100644 --- a/src/transliteration/ui/annotation-line-tokens.tsx +++ b/src/transliteration/ui/annotation-line-tokens.tsx @@ -1,11 +1,10 @@ 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[] @@ -13,14 +12,12 @@ function createTokenMarkables( 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 ( + <> + {markable.display()} + + ) +} + export function AnnotationLine({ line, lineIndex, @@ -59,57 +66,26 @@ export function AnnotationLine({ }): JSX.Element { const markables = createTokenMarkables(line.columns) - const sourceTextLine = ( - - - - + const checkbox = + + return ( + <> + + {checkbox} + ({lineNumberToString(line.lineNumber)}) + + {markables.map((markable, index) => { return ( - - console.log(markable)} - > - {markable.display()} - - {markable.hasTrailingWhitespace && <>  } - - ) - })} - - ) - const lemmaAnnotationLayer = _.some( - markables, - (markable) => markable.token.lemmatizable - ) ? ( - - - {markables.map((markable, index) => { - const token = markable.token - return token.lemmatizable ? ( - - console.log(markable)} - > - {_.isEmpty(token.uniqueLemma) ? '➕' : token.uniqueLemma} - - {markable.hasTrailingWhitespace && <>  } - - ) : ( - + + {checkbox} + + + + {markable.lemma} + ) })} - - ) : ( - <> - ) - - return ( - <> - {sourceTextLine} - {lemmaAnnotationLayer} ) }