TimeUnit-Updates Tab (new), Sequence (new)

backend/src/services/timeUnit.ts

@@ -40,6 +40,11 @@ export const getTimeUnitDetails = async (id: string) => {
       now_tu_sequence: {},
       now_tu_bound_now_time_unit_low_bndTonow_tu_bound: {},
       now_tu_bound_now_time_unit_up_bndTonow_tu_bound: {},
+      now_tau: {
+        include: {
+          now_tr: true,
+        },
+      },
     },
   })
   return result

frontend/src/backendTypes.d.ts

@@ -58,6 +58,9 @@ export type Locality = {
   loc_status: boolean | null
 }
 
+export type Sequence = Prisma.now_tu_sequence
+export type SequenceDetailsType = Prisma.now_tu_sequence
+
 export type SpeciesDetailsType = Prisma.com_species & { now_ls: Array<Editable<SpeciesLocality>> } & {
   com_taxa_synonym: Array<Editable<SpeciesSynonym>>
 } & { now_sau: Array<Editable<SpeciesUpdate>> }
@@ -129,9 +132,10 @@ export type TimeUnit = {
 export type TimeBoundUpdate = Prisma.now_bau & { now_br: Prisma.now_br }
 
 export type TimeUnitDetailsType = EditDataType<
-  Prisma.now_time_unit & { now_tu_sequence: Array<Editable<TimeUnitSequence>> }
+  Prisma.now_time_unit & { now_tu_sequence: Array<Editable<SequenceDetailsType>> }
 >
-export type TimeUnitSequence = Prisma.now_tu_sequence
+
+export type TimeUnitUpdate = Prisma.now_time_update & { now_br: Prisma.now_tr }
 
 export type ReferenceType = Prisma.ref_ref_type & { ref_field_name: Prisma.ref_field_name[] }
 

frontend/src/components/Sequence/SequenceTable.tsx

@@ -0,0 +1,39 @@
+import { useMemo } from 'react'
+import { type MRT_ColumnDef } from 'material-react-table'
+import { useGetAllSequencesQuery } from '../../redux/sequenceReducer'
+import { Sequence } from '@/backendTypes'
+import { TableView } from '../TableView/TableView'
+
+export const SequenceTable = ({ selectorFn }: { selectorFn?: (id: Sequence) => void }) => {
+  const sequenceQuery = useGetAllSequencesQuery()
+  const columns = useMemo<MRT_ColumnDef<Sequence>[]>(
+    () => [
+      {
+        id: 'id',
+        accessorKey: 'sequence',
+        header: 'Sequence Id',
+        size: 20,
+      },
+      {
+        accessorKey: 'seq_name',
+        header: 'Sequence Name',
+        maxSize: 60,
+      },
+    ],
+    []
+  )
+  const checkRowRestriction = () => {
+    return false
+  }
+
+  return (
+    <TableView<Sequence>
+      selectorFn={selectorFn}
+      checkRowRestriction={checkRowRestriction}
+      idFieldName="sequence"
+      columns={columns}
+      data={sequenceQuery.data}
+      url="sequence"
+    />
+  )
+}

frontend/src/components/TimeUnit/Tabs/TimeUnitTab.tsx

@@ -1,6 +1,9 @@
-import { TimeUnitDetailsType } from '@/backendTypes'
+import { SequenceDetailsType, TimeBoundDetailsType, TimeUnitDetailsType } from '@/backendTypes'
+import { FieldWithTableSelection } from '@/components/DetailView/common/editingComponents'
 import { ArrayFrame } from '@/components/DetailView/common/tabLayoutHelpers'
 import { useDetailContext } from '@/components/DetailView/Context/DetailContext'
+import { SequenceTable } from '@/components/Sequence/SequenceTable'
+import { TimeBoundTable } from '@/components/TimeBound/TimeBoundTable'
 
 export const TimeUnitTab = () => {
   const { textField } = useDetailContext<TimeUnitDetailsType>()
@@ -10,17 +13,38 @@ export const TimeUnitTab = () => {
     ['Rank', textField('rank')],
     ['Sequence', textField('sequence')],
     ['Comment', textField('tu_comment')],
+    [
+      'Sequence',
+      <FieldWithTableSelection<SequenceDetailsType, TimeUnitDetailsType>
+        key="sequence"
+        sourceField="seq_name"
+        targetField="sequence"
+        selectorTable={<SequenceTable />}
+      />,
+    ],
+    [
+      'Upper Time Unit Bound',
+      <FieldWithTableSelection<TimeBoundDetailsType, TimeUnitDetailsType>
+        key="up_bnd"
+        sourceField="b_name"
+        targetField="up_bnd"
+        selectorTable={<TimeBoundTable />}
+      />,
+    ],
+    [
+      'Lower Time Unit Bound',
+      <FieldWithTableSelection<TimeBoundDetailsType, TimeUnitDetailsType>
+        key="low_bnd"
+        sourceField="b_name"
+        targetField="low_bnd"
+        selectorTable={<TimeBoundTable />}
+      />,
+    ],
   ]
 
-  const upperTimeUnitBound = [['ID', textField('up_bnd')]]
-
-  const lowerTimeUnitBound = [['ID', textField('low_bnd')]]
-
   return (
     <>
       <ArrayFrame array={timeUnit} title="Time Unit" />
-      <ArrayFrame array={upperTimeUnitBound} title="Upper Time Unit Bound" />
-      <ArrayFrame array={lowerTimeUnitBound} title="Lower Time Unit Bound" />
     </>
   )
 }

frontend/src/components/TimeUnit/Tabs/UpdateTab.tsx

@@ -0,0 +1,39 @@
+import { Editable, TimeUnitDetailsType, TimeUnitUpdate } from '@/backendTypes'
+import { EditableTable } from '@/components/DetailView/common/EditableTable'
+import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
+import { Box } from '@mui/material'
+import { MRT_ColumnDef } from 'material-react-table'
+
+export const UpdateTab = () => {
+  const formatDate = (date: Date | null) => {
+    if (!date) return 'No date'
+    return new Date(date).toISOString().split('T')[0]
+  }
+
+  const columns: MRT_ColumnDef<TimeUnitUpdate>[] = [
+    {
+      accessorKey: 'tau_date',
+      header: 'Date',
+      Cell: ({ cell }) => formatDate(cell.getValue() as Date | null),
+    },
+    {
+      accessorKey: 'tau_authorizer',
+      header: 'Editor',
+    },
+    {
+      accessorKey: 'tau_coordinator',
+      header: 'Coordinator',
+    },
+    {
+      accessorKey: 'now_tr',
+      header: 'Reference',
+      Cell: () => <Box>not implemented</Box>,
+    },
+  ]
+
+  return (
+    <Grouped title="Updates">
+      <EditableTable<Editable<TimeUnitUpdate>, TimeUnitDetailsType> columns={columns} field="now_tau" />
+    </Grouped>
+  )
+}

frontend/src/components/TimeUnit/TimeUnitDetails.tsx

@@ -4,6 +4,7 @@ import { CircularProgress } from '@mui/material'
 import { DetailView, TabType } from '../DetailView/DetailView'
 import { LocalityTab } from './Tabs/LocalityTab'
 import { TimeUnitTab } from './Tabs/TimeUnitTab'
+import { UpdateTab } from './Tabs/UpdateTab'
 
 export const TimeUnitDetails = () => {
   const { id } = useParams()
@@ -21,6 +22,10 @@ export const TimeUnitDetails = () => {
       title: 'Localities',
       content: <LocalityTab />,
     },
+    {
+      title: 'Updates',
+      content: <UpdateTab />,
+    },
   ]
 
   return <DetailView tabs={tabs} data={data} onWrite={() => {}} validator={() => ({ name: '', error: null })} />

frontend/src/redux/sequenceReducer.ts

@@ -0,0 +1,19 @@
+import { api } from './api'
+import { Sequence, SequenceDetailsType } from '@/backendTypes'
+
+const sequencesApi = api.injectEndpoints({
+  endpoints: builder => ({
+    getAllSequences: builder.query<Sequence[], void>({
+      query: () => ({
+        url: `/sequence/all`,
+      }),
+    }),
+    getSequenceDetails: builder.query<SequenceDetailsType, string>({
+      query: id => ({
+        url: `/sequence/${id}`,
+      }),
+    }),
+  }),
+})
+
+export const { useGetAllSequencesQuery, useGetSequenceDetailsQuery } = sequencesApi