Ngram Aligner Display

src/corpus/ui/search/CorpusSearchResult.tsx

@@ -16,7 +16,7 @@ import TranslationContext, {
 import { Markdown } from 'common/Markdown'
 import { genreFromAbbr } from '../Corpus'
 
-function GenreInfoRow({
+export function GenreInfoRow({
   chapterId,
   textName,
 }: {

src/fragmentarium/application/FragmentService.test.ts

@@ -78,6 +78,7 @@ const fragmentRepository = {
   findInCorpus: jest.fn(),
   query: jest.fn(),
   listAllFragments: jest.fn(),
+  ngramScores: jest.fn(),
 }
 
 const imageRepository = {

src/fragmentarium/application/FragmentService.ts

@@ -26,6 +26,7 @@ import { FragmentQuery } from 'query/FragmentQuery'
 import { QueryResult } from 'query/QueryResult'
 import { MesopotamianDate } from 'fragmentarium/domain/Date'
 import { ArchaeologyDto } from 'fragmentarium/domain/archaeology'
+import { NgramScore } from 'fragmentarium/domain/ngramMatching'
 
 export const onError = (error) => {
   if (error.message === '403 Forbidden') {
@@ -87,6 +88,7 @@ export interface FragmentRepository {
   findLemmas(lemma: string, isNormalized: boolean): Bluebird<Word[][]>
   fetchCdliInfo(cdliNumber: string): Bluebird<CdliInfo>
   lineToVecRanking(number: string): Bluebird<LineToVecRanking>
+  ngramScores(number: string): Bluebird<NgramScore[]>
   query(fragmentQuery: FragmentQuery): Bluebird<QueryResult>
   listAllFragments(): Bluebird<string[]>
 }
@@ -333,6 +335,10 @@ export class FragmentService {
     return this.fragmentRepository.query(fragmentQuery)
   }
 
+  ngramScores(number: string): Bluebird<NgramScore[]> {
+    return this.fragmentRepository.ngramScores(number)
+  }
+
   private injectReferences(fragment: Fragment): Bluebird<Fragment> {
     return this.referenceInjector
       .injectReferencesToText(fragment.text)

src/fragmentarium/domain/ngramMatching.ts

@@ -0,0 +1,6 @@
+import { ChapterId } from 'transliteration/domain/chapter-id'
+
+export type NgramScore = ChapterId & {
+  score: number
+  textName: string
+}

src/fragmentarium/infrastructure/FragmentRepository.ts

@@ -47,6 +47,7 @@ import {
   ArchaeologyDto,
   createArchaeology,
 } from 'fragmentarium/domain/archaeology'
+import { NgramScore } from 'fragmentarium/domain/ngramMatching'
 
 export function createScript(dto: ScriptDto): Script {
   return {
@@ -388,6 +389,10 @@ class ApiFragmentRepository
   listAllFragments(): Promise<string[]> {
     return this.apiClient.fetchJson(`/fragments/all`, false)
   }
+
+  ngramScores(number: string): Promise<NgramScore[]> {
+    return this.apiClient.fetchJson(createFragmentPath(number, 'ngrams'), false)
+  }
 }
 
 export default ApiFragmentRepository

src/fragmentarium/ui/ngram-matching/NgramMatching.tsx

@@ -0,0 +1,85 @@
+import React, { ReactNode } from 'react'
+import AppContent from 'common/AppContent'
+import { SectionCrumb, TextCrumb } from 'common/Breadcrumbs'
+import FragmentCrumb from 'fragmentarium/ui/FragmentCrumb'
+import SessionContext from 'auth/SessionContext'
+import { Session } from 'auth/Session'
+import withData from 'http/withData'
+import { HeadTags } from 'router/head'
+import FragmentService from 'fragmentarium/application/FragmentService'
+import { NgramScore } from 'fragmentarium/domain/ngramMatching'
+import { Col, Container, Row } from 'react-bootstrap'
+import { chapterIdToString } from 'transliteration/domain/chapter-id'
+import _ from 'lodash'
+import { Markdown } from 'common/Markdown'
+import { genreFromAbbr } from 'corpus/ui/Corpus'
+
+function NgramMatchingHeadTags({ number }: { number: string }): JSX.Element {
+  return (
+    <HeadTags
+      title={`Fragment ${number} N-gram Matching: eBL`}
+      description={`Fragment ${number} n-gram matching in the electronic Babylonian Library (eBL) Fragmentarium.`}
+    />
+  )
+}
+
+function NgramMatching({
+  number,
+  ngramScores,
+}: {
+  number: string
+  ngramScores: readonly NgramScore[]
+}): JSX.Element {
+  return (
+    <AppContent
+      crumbs={[
+        new SectionCrumb('Fragmentarium'),
+        new FragmentCrumb(number),
+        new TextCrumb('N-Gram Matching'),
+      ]}
+      title={`Find Similar Chapters for ${number}`}
+    >
+      <SessionContext.Consumer>
+        {(session: Session): ReactNode =>
+          session.isAllowedToReadFragments() ? (
+            <>
+              <NgramMatchingHeadTags number={number} />
+              <Container>
+                {ngramScores.map((score, index) => (
+                  <Row key={index}>
+                    <Col xs={1}>{index + 1}.</Col>
+                    <Col>
+                      <Markdown text={genreFromAbbr(score.textId.genre)} />
+                      {score.textName && (
+                        <>
+                          {' > '}
+                          <Markdown text={score.textName} />
+                        </>
+                      )}
+                      {' > '}
+                      {chapterIdToString(_.omit(score, 'score', 'textName'))}
+                    </Col>
+                    <Col xs={1}>{score.score.toFixed(4)}</Col>
+                  </Row>
+                ))}
+              </Container>
+            </>
+          ) : (
+            'Please log in to search for matching chapters'
+          )
+        }
+      </SessionContext.Consumer>
+    </AppContent>
+  )
+}
+
+export default withData<
+  { fragmentService: FragmentService; number: string },
+  { number: string },
+  readonly NgramScore[]
+>(
+  ({ data, ...props }) => (
+    <NgramMatching ngramScores={data} number={props.number} />
+  ),
+  (props) => props.fragmentService.ngramScores(props.number)
+)

src/router/fragmentariumRoutes.tsx

@@ -20,6 +20,7 @@ import SignService from 'signs/application/SignService'
 import { FragmentSlugs, sitemapDefaults } from 'router/sitemap'
 import { HeadTagsService } from 'router/head'
 import BibliographyService from 'bibliography/application/BibliographyService'
+import NgramMatching from 'fragmentarium/ui/ngram-matching/NgramMatching'
 
 function parseStringParam(location: Location, param: string): string | null {
   const value = parse(location.search)[param]
@@ -120,6 +121,16 @@ export default function FragmentariumRoutes({
         />
       )}
     />,
+    <Route
+      key="NgramScore"
+      path="/fragmentarium/:id/ngrams"
+      render={({ match }): ReactNode => (
+        <NgramMatching
+          fragmentService={fragmentService}
+          number={decodeURIComponent(match.params.id)}
+        />
+      )}
+    />,
     <Route
       key="FragmentView"
       path="/fragmentarium/:id"