Rework external resources section

src/corpus/ui/TextView.sass

@@ -40,5 +40,5 @@
   align-items: flex-start
   justify-content: center
 
-  .OrganizationLinks__image
+  .ExternalResources__image
     max-height: 5em

src/corpus/ui/__snapshots__/TextView.integration.test.ts.snap

@@ -240,7 +240,7 @@ exports[`Chapter Show chapter 1`] = `
           >
             <img
               alt="Cuneiform Artefacts of Iraq in Context"
-              class="OrganizationLinks__image"
+              class="ExternalResources__image"
               src="CAIC Briefkopf 2023.png"
             />
           </a>
@@ -567,7 +567,7 @@ exports[`Chapter Show list of manuscripts 1`] = `
           >
             <img
               alt="Cuneiform Artefacts of Iraq in Context"
-              class="OrganizationLinks__image"
+              class="ExternalResources__image"
               src="CAIC Briefkopf 2023.png"
             />
           </a>
@@ -1068,7 +1068,7 @@ exports[`With session 1`] = `
           >
             <img
               alt="Cuneiform Artefacts of Iraq in Context"
-              class="OrganizationLinks__image"
+              class="ExternalResources__image"
               src="CAIC Briefkopf 2023.png"
             />
           </a>

src/fragmentarium/domain/FragmentDtos.ts

@@ -55,14 +55,23 @@ type RecordEntryDto = Pick<RecordEntry, 'user' | 'date' | 'type'>
 
 type FolioDto = Pick<Folio, 'name' | 'number'>
 
-export interface ExternalNumbers {
-  cdliNumber: string
-  bmIdNumber: string
-  archibabNumber: string
-  bdtnsNumber: string
-  urOnlineNumber: string
-  hilprechtJenaNumber: string
-  hilprechtHeidelbergNumber: string
+export const ExternalNumberTypes = [
+  'cdliNumber',
+  'bmIdNumber',
+  'archibabNumber',
+  'bdtnsNumber',
+  'urOnlineNumber',
+  'hilprechtJenaNumber',
+  'hilprechtHeidelbergNumber',
+  'metropolitanNumber',
+  'yalePeabodyNumber',
+] as const
+export type ExternalNumber = typeof ExternalNumberTypes[number]
+
+export type ExternalNumbers = {
+  [K in ExternalNumber]?: string
+} & {
+  oraccNumbers?: readonly string[]
 }
 
 export default interface FragmentDto {

src/fragmentarium/domain/fragment.ts

@@ -10,7 +10,11 @@ import { Joins } from './join'
 import { MarkupPart } from 'transliteration/domain/markup'
 import { Period, PeriodModifier } from 'common/period'
 import { Session } from 'auth/Session'
-import { ExternalNumbers } from './FragmentDtos'
+import {
+  ExternalNumber,
+  ExternalNumbers,
+  ExternalNumberTypes,
+} from './FragmentDtos'
 import { RecordEntry } from './RecordEntry'
 import { ResearchProject } from 'research-projects/researchProject'
 import { MesopotamianDate } from 'fragmentarium/domain/Date'
@@ -227,8 +231,10 @@ export class Fragment {
     })
   }
 
-  private getExternalNumber(numberType: keyof ExternalNumbers): string {
-    return this.externalNumbers[numberType]
+  private getExternalNumber(
+    numberType: Exclude<ExternalNumber, 'oraccNumbers'>
+  ): string {
+    return this.externalNumbers[numberType] || ''
   }
 
   get cdliNumber(): string {
@@ -252,6 +258,21 @@ export class Fragment {
   get hilprechtHeidelbergNumber(): string {
     return this.getExternalNumber('hilprechtHeidelbergNumber')
   }
+  get metropolitanNumber(): string {
+    return this.getExternalNumber('metropolitanNumber')
+  }
+  get yalePeabodyNumber(): string {
+    return this.getExternalNumber('yalePeabodyNumber')
+  }
+  get oraccNumbers(): readonly string[] {
+    return this.externalNumbers['oraccNumbers'] || []
+  }
+  get hasExternalResources(): boolean {
+    return _.some([
+      ...this.oraccNumbers,
+      ...ExternalNumberTypes.map((number) => this.getExternalNumber(number)),
+    ])
+  }
 
   get atfHeading(): string {
     const cdliNumber = this.cdliNumber || 'X000001'

src/fragmentarium/ui/fragment/CuneiformFragment.test.tsx

@@ -146,17 +146,6 @@ it('Renders all folios', () => {
   }
 })
 
-it('Links museum record', () => {
-  expect(
-    screen.getByLabelText(`The British Museum object ${fragment.bmIdNumber}`)
-  ).toHaveAttribute(
-    'href',
-    `https://www.britishmuseum.org/collection/object/${encodeURIComponent(
-      fragment.bmIdNumber
-    )}`
-  )
-})
-
 it('Updates view on Edition save', async () => {
   fragmentService.updateEdition.mockReturnValueOnce(
     Promise.resolve(updatedFragment)

src/fragmentarium/ui/info/Details.test.tsx

@@ -138,26 +138,6 @@ describe('All details', () => {
     expect(screen.getByText(expectedMeasures)).toBeInTheDocument()
   })
 
-  it('Renders editedInOraccProject', () => {
-    expect(screen.getByText(fragment.editedInOraccProject)).toBeInTheDocument()
-  })
-
-  it('Renders CDLI number', () => {
-    expect(
-      screen.getByText((_, node) => {
-        return node?.textContent === `CDLI: ${fragment.cdliNumber}`
-      })
-    ).toBeInTheDocument()
-  })
-
-  it('Links CDLI number', () =>
-    expect(screen.getByText(fragment.cdliNumber)).toHaveAttribute(
-      'href',
-      `https://cdli.mpiwg-berlin.mpg.de/${encodeURIComponent(
-        fragment.cdliNumber
-      )}`
-    ))
-
   it('Renders accession', () => {
     expect(
       screen.getByText(`Accession: ${fragment.accession}`)
@@ -212,10 +192,6 @@ describe('Missing details', () => {
     ).toBeInTheDocument()
   })
 
-  it('Renders dash for CDLI number', () => {
-    expect(screen.getByText('CDLI: -')).toBeInTheDocument()
-  })
-
   it('Renders dash for accession', () => {
     expect(screen.getByText('Accession: -')).toBeInTheDocument()
   })

src/fragmentarium/ui/info/Details.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 
 import _ from 'lodash'
 import { Fragment, Script } from 'fragmentarium/domain/fragment'
-import CdliLink from './CdliLink'
 import FragmentLink from 'fragmentarium/ui/FragmentLink'
 import ExternalLink from 'common/ExternalLink'
 import './Details.css'
@@ -82,47 +81,6 @@ function Measurements({ fragment: { measures } }: Props): JSX.Element {
   return <>{_.isEmpty(measurements) ? '' : `${measurements}  cm`}</>
 }
 
-function CdliNumber({ fragment: { cdliNumber } }: Props): JSX.Element {
-  return (
-    <>
-      CDLI:{' '}
-      {cdliNumber ? (
-        <CdliLink cdliNumber={cdliNumber}>{cdliNumber}</CdliLink>
-      ) : (
-        '-'
-      )}
-    </>
-  )
-}
-
-function EditedInOraccProject({
-  fragment: { editedInOraccProject, cdliNumber },
-}: Props): JSX.Element {
-  const encodedCdliNumber = encodeURIComponent(cdliNumber)
-  const projectLink =
-    editedInOraccProject == 'ccp'
-      ? `https://ccp.yale.edu/${encodedCdliNumber}`
-      : `http://oracc.org/${encodeURIComponent(
-          editedInOraccProject.toLowerCase()
-        )}/${encodedCdliNumber}`
-  return (
-    <>
-      {editedInOraccProject && (
-        <>
-          Oracc Edition:{' '}
-          <ExternalLink
-            href={projectLink}
-            aria-label={`Oracc text ${cdliNumber}`}
-            className={'text-dark'}
-          >
-            {editedInOraccProject} <i className="fas fa-external-link-alt" />
-          </ExternalLink>
-        </>
-      )}
-    </>
-  )
-}
-
 function Accession({ fragment }: Props): JSX.Element {
   return <>Accession: {fragment.accession || '-'}</>
 }
@@ -160,12 +118,6 @@ function Details({
       <li className="Details__item Details-item--extra-margin">
         <Measurements fragment={fragment} />
       </li>
-      <li className="Details__item">
-        <CdliNumber fragment={fragment} />
-      </li>
-      <li className="Details__item">
-        <EditedInOraccProject fragment={fragment} />
-      </li>
       <li className="Details__item">
         <Accession fragment={fragment} />
       </li>

src/fragmentarium/ui/info/ExternalNumberLink.tsx

@@ -0,0 +1,139 @@
+import ExternalLink from 'common/ExternalLink'
+import React from 'react'
+
+interface Props {
+  number: string
+  baseUrl?: string
+  label: string
+}
+function ExternalNumberLink({ baseUrl, number, label }: Props): JSX.Element {
+  const url = `${baseUrl}${encodeURIComponent(number)}`
+  return (
+    <>
+      {`${label} (`}
+      <ExternalLink href={url} aria-label={`${label} text ${number}`}>
+        {number}
+      </ExternalLink>
+      {')'}
+    </>
+  )
+}
+
+export function BmIdLink({ number }: { number: string }): JSX.Element {
+  return (
+    <ExternalNumberLink
+      number={number}
+      baseUrl={'https://www.britishmuseum.org/collection/object/'}
+      label={'The British Museum'}
+    />
+  )
+}
+export function CdliLink({ number }: { number: string }): JSX.Element {
+  return (
+    <ExternalNumberLink
+      number={number}
+      baseUrl={'https://cdli.mpiwg-berlin.mpg.de/'}
+      label={'CDLI'}
+    />
+  )
+}
+export function BdtnsLink({ number }: { number: string }): JSX.Element {
+  return (
+    <ExternalNumberLink
+      number={number}
+      baseUrl={'http://bdtns.filol.csic.es/'}
+      label={'BDTNS'}
+    />
+  )
+}
+export function ArchibabLink({ number }: { number: string }): JSX.Element {
+  return (
+    <ExternalNumberLink
+      number={number}
+      baseUrl={'http://www.archibab.fr/'}
+      label={'Archibab'}
+    />
+  )
+}
+export function UrOnlineLink({ number }: { number: string }): JSX.Element {
+  return (
+    <ExternalNumberLink
+      number={number}
+      baseUrl={'http://www.ur-online.org/subject/'}
+      label={'Ur Online'}
+    />
+  )
+}
+export function HilprechtJenaLink({ number }: { number: string }): JSX.Element {
+  return (
+    <ExternalNumberLink
+      number={number}
+      baseUrl={'https://hilprecht.mpiwg-berlin.mpg.de/object3d/'}
+      label={'Hilprecht Collection'}
+    />
+  )
+}
+export function HilprechtHeidelbergLink({
+  number,
+}: {
+  number: string
+}): JSX.Element {
+  return (
+    <ExternalNumberLink
+      number={number}
+      baseUrl={'https://doi.org/10.11588/heidicon/'}
+      label={'Hilprecht Collection – HeiCuBeDa'}
+    />
+  )
+}
+export function YalePeabodyLink({ number }: { number: string }): JSX.Element {
+  return (
+    <ExternalNumberLink
+      number={number}
+      baseUrl={'https://collections.peabody.yale.edu/search/Record/YPM-'}
+      label={'Yale Babylonian Collection'}
+    />
+  )
+}
+
+function OraccLink({
+  project,
+  cdliNumber,
+}: {
+  project: string
+  cdliNumber: string
+}): JSX.Element {
+  const baseUrl =
+    project === 'ccp'
+      ? 'https://ccp.yale.edu/'
+      : `https://oracc.org/${project}/`
+  return (
+    <ExternalLink
+      href={`${baseUrl}${encodeURIComponent(cdliNumber)}`}
+      aria-label={`Oracc text ${project} ${cdliNumber}`}
+    >
+      {project.toUpperCase()}
+    </ExternalLink>
+  )
+}
+
+export function OraccLinks({
+  projects,
+  cdliNumber,
+}: {
+  projects: readonly string[]
+  cdliNumber: string
+}): JSX.Element {
+  return (
+    <>
+      {'Oracc ('}
+      {projects.map((project, index) => (
+        <>
+          {index !== 0 && ', '}
+          <OraccLink project={project} cdliNumber={cdliNumber} key={index} />
+        </>
+      ))}
+      {')'}
+    </>
+  )
+}