Time bound > Time unit tab: Fix lower/upper bound column and make table SimpleTable

frontend/src/components/Locality/Tabs/SpeciesTab.tsx

@@ -13,7 +13,7 @@ export const SpeciesTab = () => {
   const { mode, editData, setEditData } = useDetailContext<LocalityDetailsType>()
   const { data: speciesData, isError } = useGetAllSpeciesQuery(mode.read ? skipToken : undefined)
 
-  const columns: MRT_ColumnDef<Species>[] = [
+  const speciesColumns: MRT_ColumnDef<Species>[] = [
     {
       accessorKey: 'order_name',
       header: 'Order',
@@ -47,7 +47,7 @@ export const SpeciesTab = () => {
       header: 'Taxon status',
     },
   ]
-  const columns2: MRT_ColumnDef<LocalitySpecies>[] = [
+  const localitySpeciesColumns: MRT_ColumnDef<LocalitySpecies>[] = [
     {
       accessorKey: 'com_species.order_name',
       header: 'Order',
@@ -118,7 +118,7 @@ export const SpeciesTab = () => {
             buttonText="Select Species"
             data={speciesData}
             isError={isError}
-            columns={columns}
+            columns={speciesColumns}
             fieldName="now_ls"
             idFieldName="species_id"
             editingAction={(newSpecies: Species) => {
@@ -138,7 +138,7 @@ export const SpeciesTab = () => {
           />
         </Box>
       )}
-      <EditableTable<LocalitySpecies, LocalityDetailsType> columns={columns2} field="now_ls" />
+      <EditableTable<LocalitySpecies, LocalityDetailsType> columns={localitySpeciesColumns} field="now_ls" />
     </Grouped>
   )
 }

frontend/src/components/TimeBound/Tabs/BoundTab.tsx

@@ -3,11 +3,10 @@ import { ArrayFrame } from '@/components/DetailView/common/tabLayoutHelpers'
 import { useDetailContext } from '@/components/DetailView/Context/DetailContext'
 
 export const BoundTab = () => {
-  const { textField } = useDetailContext<TimeBoundDetailsType>()
+  const { data, textField } = useDetailContext<TimeBoundDetailsType>()
 
   const bound = [
-    // TODO Add static Class field
-    ['Bound Id', textField('bid')],
+    ['Bound Id', data.bid],
     ['Name', textField('b_name')],
     ['Age (Ma)', textField('age')],
     ['Comment', textField('b_comment')],

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

@@ -1,8 +1,9 @@
 import { TimeUnit, TimeBoundDetailsType } from '@/backendTypes'
 import { useGetTimeBoundTimeUnitsQuery } from '@/redux/timeBoundReducer'
 import { CircularProgress } from '@mui/material'
-import { TableView } from '../../TableView/TableView'
 import { useDetailContext } from '@/components/DetailView/Context/DetailContext'
+import { MRT_ColumnDef } from 'material-react-table'
+import { SimpleTable } from '@/components/DetailView/common/SimpleTable'
 
 export const TimeUnitTab = () => {
   const { data } = useDetailContext<TimeBoundDetailsType>()
@@ -11,7 +12,7 @@ export const TimeUnitTab = () => {
   if (isError) return 'Error loading Time Units.'
   if (!timeUnitsData) return <CircularProgress />
 
-  const columns = [
+  const columns: MRT_ColumnDef<TimeUnit>[] = [
     {
       accessorKey: 'tu_name',
       header: 'ID',
@@ -21,14 +22,8 @@ export const TimeUnitTab = () => {
       header: 'Name',
     },
     {
-      accessorKey: 'up_bnd',
-      // accessorFn: ({ up_bnd }) => up_bnd === data.bid,
-      header: 'Upper Bound',
-    },
-    {
-      accessorKey: 'low_bnd',
-      // accessorFn: ({ low_bnd }) => low_bnd === data.bid,
-      header: 'Lower Bound',
+      accessorFn: ({ up_bound }) => (up_bound === data.bid ? 'Upper' : 'Lower'),
+      header: 'Upper/Lower',
     },
     {
       accessorKey: 'rank',
@@ -44,5 +39,5 @@ export const TimeUnitTab = () => {
     },
   ]
 
-  return <TableView<TimeUnit> idFieldName="tu_name" columns={columns} data={timeUnitsData} url="time-unit" />
+  return <SimpleTable<TimeUnit> columns={columns} data={timeUnitsData} />
 }