New headers

frontend/src/components/DetailView/DetailBrowser.tsx

@@ -1,4 +1,4 @@
-import { Box, Button } from '@mui/material'
+import { Box, Button, Stack } from '@mui/material'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import { useDetailContext } from './Context/DetailContext'
@@ -9,37 +9,38 @@ export const DetailBrowser = <T extends object>() => {
   const { data, mode } = useDetailContext<T>()
   const navigate = useNavigate()
   const location = useLocation()
-  const { idList, idFieldName, viewName, createTitle } = usePageContext<T>()
+  const { idList, idFieldName, viewName, createTitle, createSubtitle } = usePageContext<T>()
   const idListExists = idList?.length > 0
   const currentIndex = idList.indexOf((data as { [key: string]: string })[idFieldName])
   const nextIndex = currentIndex + 1
   const previousIndex = currentIndex - 1
   const style = {
-    width: '18em',
+    width: '50em',
     marginLeft: '0em',
     overflow: 'hidden',
-    whiteSpace: 'nowrap',
+    whiteSpace: 'pre-wrap',
     textOverflow: 'ellipsis',
     position: 'relative',
     textAlign: 'left',
     fontSize: '2.3em',
-    '&::after': {
-      content: '""',
-      position: 'absolute',
-      right: 0,
-      width: '20%',
-      height: '100%',
-      background: 'linear-gradient(to right, transparent, white 50%)',
-    },
   }
-  const getText = () => {
+  const getTitleText = () => {
     if (mode.read) {
       return `${createTitle(data)}`
     } else if (mode.new) {
       return `Creating new ${viewName}`
     }
     return `${createTitle(data)}`
   }
+
+  const getSubtitleText = () => {
+    if (mode.read) {
+      return `${createSubtitle(data)}`
+    } else if (mode.new) {
+      return ''
+    }
+    return `${createSubtitle(data)}`
+  }
   const search = location.search
 
   return (
@@ -52,7 +53,10 @@ export const DetailBrowser = <T extends object>() => {
         gap: '1em',
       }}
     >
-      <Box sx={style}>{getText()}</Box>
+      <Stack sx={{ gap: '0.5em', width: '85%' }}>
+        <Box sx={style}>{getTitleText()}</Box>
+        <Box sx={{ ...style, fontSize: '1.2em' }}>{getSubtitleText()}</Box>
+      </Stack>
       {idListExists && mode.read && (
         <div>
           {previousIndex >= 0 && (

frontend/src/components/Page.tsx

@@ -15,6 +15,7 @@ export type PageContextType<T> = {
   tableUrl: string
   setTableUrl: (newUrl: string) => void
   createTitle: (data: T) => string
+  createSubtitle: (data: T) => string
   editRights: EditRights
 }
 
@@ -25,12 +26,14 @@ export const PageContextProvider = <T extends object>({
   idFieldName,
   viewName,
   createTitle,
+  createSubtitle,
   editRights,
 }: {
   children: ReactNode | ReactNode[]
   idFieldName: string
   viewName: string
   createTitle: (data: T) => string
+  createSubtitle: (data: T) => string
   editRights: EditRights
 }) => {
   const [idList, setIdList] = useState<string[]>([])
@@ -47,6 +50,7 @@ export const PageContextProvider = <T extends object>({
         tableUrl,
         setTableUrl: (newUrl: string) => setTableUrl(newUrl),
         createTitle: (data: unknown) => createTitle(data as T),
+        createSubtitle: (data: unknown) => createSubtitle(data as T),
       }}
     >
       {children}
@@ -68,6 +72,7 @@ export const Page = <T extends Record<string, unknown>>({
   idFieldName,
   viewName,
   createTitle,
+  createSubtitle,
   allowedRoles,
   getEditRights,
 }: {
@@ -76,6 +81,7 @@ export const Page = <T extends Record<string, unknown>>({
   idFieldName: keyof T
   viewName: string
   createTitle: (data: T) => string
+  createSubtitle?: (data: T) => string
   allowedRoles?: Role[]
   getEditRights: (user: UserState, id: string | number) => EditRights
 }) => {
@@ -90,6 +96,7 @@ export const Page = <T extends Record<string, unknown>>({
       idFieldName={idFieldName as string}
       viewName={viewName}
       createTitle={createTitle}
+      createSubtitle={createSubtitle ? createSubtitle : () => ''}
     >
       {id ? detailView : tableView}
     </PageContextProvider>

frontend/src/components/pages.tsx

@@ -39,7 +39,10 @@ export const localityPage = (
     detailView={<LocalityDetails />}
     viewName="locality"
     idFieldName="lid"
-    createTitle={(loc: LocalityDetailsType) => `${loc.loc_name}`}
+    createTitle={(loc: LocalityDetailsType) => `${loc.lid} ${loc.loc_name}, ${loc.country}`}
+    createSubtitle={(loc: LocalityDetailsType) =>
+      `${loc.dms_lat}, ${loc.dms_long}\n${loc.max_age} Ma (${loc.bfa_max}) – ${loc.min_age} Ma (${loc.bfa_min})`
+    }
     getEditRights={(user: UserState, id: string | number) => {
       if ([Role.Admin, Role.EditUnrestricted].includes(user.role)) return fullRights
       if (user.role === Role.EditRestricted && user.localities.includes(id as number)) return limitedRights
@@ -54,7 +57,10 @@ export const crossSearchPage = (
     detailView={<LocalityDetails />}
     viewName="crosssearch"
     idFieldName="lid"
-    createTitle={(loc: LocalityDetailsType) => `${loc.loc_name}`}
+    createTitle={(loc: LocalityDetailsType) => `${loc.lid} ${loc.loc_name}, ${loc.country}`}
+    createSubtitle={(loc: LocalityDetailsType) =>
+      `${loc.dms_lat}, ${loc.dms_long}` + `\n${loc.max_age} Ma (${loc.bfa_max}) – ${loc.min_age} Ma (${loc.bfa_min})`
+    }
     getEditRights={(user: UserState, id: string | number) => {
       if ([Role.Admin, Role.EditUnrestricted].includes(user.role)) return fullRights
       if (user.role === Role.EditRestricted && user.localities.includes(id as number)) return limitedRights
@@ -69,7 +75,14 @@ export const speciesPage = (
     detailView={<SpeciesDetails />}
     viewName="species"
     idFieldName="species_id"
-    createTitle={(species: SpeciesDetailsType) => `${species.genus_name + ' ' + species.species_name}`}
+    createTitle={(species: SpeciesDetailsType) =>
+      `${species.species_id} ${species.genus_name} ${species.species_name}` + `\n${species.unique_identifier}`
+    }
+    createSubtitle={(species: SpeciesDetailsType) =>
+      `Order ${species.order_name}` +
+      `\nFamily ${species.family_name}` +
+      `\nSubfamily or Tribe ${species.subfamily_name}`
+    }
     getEditRights={(user: UserState) => {
       if ([Role.Admin, Role.EditUnrestricted].includes(user.role)) return fullRights
       if (user.role === Role.EditRestricted) return limitedRights
@@ -78,13 +91,125 @@ export const speciesPage = (
   />
 )
 
+// from UpdateTab
+const makeNameList = (names: Array<string | null | undefined>) => {
+  if (names.length === 3) {
+    return `${names[0]}, ${names[1]} & ${names[2]}`
+  } else if (names.length >= 4) {
+    return `${names[0]} et al.`
+  } else if (names.length === 2) {
+    return `${names[0]} & ${names[1]}`
+  }
+  return names[0] ?? ''
+}
+
+const createReferenceSubtitle = (ref: ReferenceDetailsType) => {
+  const authorsSurnames = ref.ref_authors.filter(author => author.field_id === 2).map(author => author.author_surname)
+  const editorsSurnames = ref.ref_authors.filter(author => author.field_id === 12).map(author => author.author_surname)
+  const authorsPart = `${makeNameList(authorsSurnames)}`
+  const editorsPart = `${makeNameList(editorsSurnames)} ${editorsSurnames.length > 1 ? '(eds)' : '(ed)'}`
+
+  let title = `${authorsPart} (${ref.date_primary}).`
+
+  switch (ref.ref_type_id) {
+    case 1: // Journal
+      title += ` ${ref.title_primary}. ${ref.ref_journal.journal_title}`
+      if (ref.volume) {
+        title += ` ${ref.volume}`
+      }
+      if (ref.issue) {
+        title += ` (${ref.issue})`
+      }
+      if (ref.start_page || ref.end_page) {
+        title += `: `
+      }
+      if (ref.start_page) {
+        title += `${ref.start_page}-`
+      }
+      if (ref.end_page) {
+        title += `${ref.end_page}`
+      }
+      if (ref.volume || ref.issue || ref.start_page || ref.end_page) {
+        title += `.`
+      }
+      return title
+    case 2: // Book
+      title += ` ${ref.title_primary}.`
+      if (ref.publisher || ref.pub_place) {
+        title += ` `
+      }
+      if (ref.publisher) {
+        title += `${ref.publisher}`
+      }
+      if (ref.publisher && ref.pub_place) {
+        title += `, `
+      }
+      if (ref.pub_place) {
+        title += `${ref.pub_place}`
+      }
+      if (ref.publisher || ref.pub_place) {
+        title += `.`
+      }
+      return title
+    case 3: // Book Chapter
+      title += ` ${ref.title_primary}. IN: ${editorsPart} ${ref.title_secondary}.`
+
+      if (ref.start_page || ref.end_page) {
+        title += ` pp.`
+      }
+      if (ref.start_page) {
+        title += `${ref.start_page}`
+      }
+      if (ref.start_page && ref.end_page) {
+        title += `-`
+      }
+      if (ref.end_page) {
+        title += `${ref.end_page}`
+      }
+      if (ref.start_page || ref.end_page) {
+        title += `.`
+      }
+      if (ref.publisher || ref.pub_place) {
+        title += ` `
+      }
+      if (ref.publisher) {
+        title += `${ref.publisher}`
+      }
+      if (ref.publisher && ref.pub_place) {
+        title += `, `
+      }
+      if (ref.pub_place) {
+        title += `${ref.pub_place}`
+      }
+      if (ref.publisher || ref.pub_place) {
+        title += `.`
+      }
+      return title
+    default:
+      if (ref.title_primary) {
+        title += ` ${ref.title_primary}.`
+      }
+      if (ref.title_secondary) {
+        title += ` ${ref.title_secondary}.`
+      }
+      if (ref.title_series) {
+        title += ` ${ref.title_series}.`
+      }
+      if (ref.gen_notes) {
+        title += ` ${ref.gen_notes}.`
+      }
+      return title
+  }
+}
+
 export const referencePage = (
   <Page
     tableView={<ReferenceTable />}
     detailView={<ReferenceDetails />}
     viewName="reference"
     idFieldName="rid"
-    createTitle={(ref: ReferenceDetailsType) => `${ref.title_primary}`}
+    createTitle={(ref: ReferenceDetailsType) => `${ref.rid}`}
+    createSubtitle={createReferenceSubtitle}
     getEditRights={(user: UserState) => {
       if ([Role.Admin, Role.EditUnrestricted].includes(user.role)) return fullRights
       if (user.role === Role.EditRestricted) return { new: true }
@@ -99,7 +224,10 @@ export const timeUnitPage = (
     detailView={<TimeUnitDetails />}
     viewName="time-unit"
     idFieldName="tu_name"
-    createTitle={(tu: TimeUnitDetailsType) => `${tu.tu_display_name}`}
+    createTitle={(tu: TimeUnitDetailsType) => `(${tu.tu_name}) ${tu.tu_display_name} - ${tu.tu_comment}`}
+    createSubtitle={(tu: TimeUnitDetailsType) =>
+      `${tu.up_bnd} Ma – ${tu.low_bnd} Ma` + `\n${tu.sequence}` + `\n${tu.rank}`
+    }
     getEditRights={(user: UserState) => {
       if ([Role.Admin, Role.EditUnrestricted].includes(user.role)) return fullRights
       return noRights
@@ -114,7 +242,7 @@ export const timeBoundPage = (
     detailView={<TimeBoundDetails />}
     viewName="time-bound"
     idFieldName="bid"
-    createTitle={(tb: TimeBoundDetailsType) => `${tb.b_name}`}
+    createTitle={(tb: TimeBoundDetailsType) => `${tb.bid} ${tb.b_name}`}
     getEditRights={(user: UserState) => {
       if ([Role.Admin, Role.EditUnrestricted].includes(user.role)) return fullRights
       return noRights