#434

frontend/src/components/counts/CountsSummaryResults.tsx

@@ -1,4 +1,5 @@
 import PrefetchLink from '@/components/PrefetchLink'
+import CountsRowNumber from '@/components/counts/CountsRowNumber'
 import CountsSelectableTable from '@/components/counts/CountsSelectableTable'
 import CountsSortHeader from '@/components/counts/CountsSortHeader'
 import { changeCountSort, countsRequestParams, readCountSort, writeCountSort } from '@/lib/counts'
@@ -15,11 +16,13 @@ const CountsSummaryResults = (
         pending: boolean; update: (key: string, value: string) => void },
 ) => {
   const { label, message } = useUITranslation ('counts')
+  const rowNumbers = params.get ('row_numbers') === '1'
   const rows = data.rows ?? []
   const cols = data.cols ?? []
   const axes = [...rows, ...cols]
   const cells = data.cells ?? []
-  const rowKeys = [...new Set (cells.map (cell => JSON.stringify (cell.values.slice (0, rows.length))))]
+  const rowKeys = [...new Set (cells.map (cell => JSON.stringify (
+      cell.values.slice (0, rows.length))))]
   const columnKeys = data.columnValues?.map (values => JSON.stringify (values))
       ?? [...new Set (cells.map (cell => JSON.stringify (cell.values.slice (rows.length))))]
   if (cols.length === 0 && columnKeys.length === 0) columnKeys.push ('[]')
@@ -46,12 +49,13 @@ const CountsSummaryResults = (
     next.delete ('page')
     return `/counts/${resource}?${next}`
   }
-  const keys = [...rows.map ((_, index) => `a${index}`),
+  const keys = [...(rowNumbers ? ['row_number'] : []), ...rows.map ((_, index) => `a${index}`),
       ...columnKeys.map ((_, index) => `cell${index}`)]
   return <div className="min-h-0 flex-1 overflow-auto" data-counts-results aria-busy={pending}>
     <CountsSelectableTable family={`pivot_${resource}`} columns={keys}
         identity={`${countsRequestParams (params)}:${keys}`} className="text-left text-sm">
       <thead className="sticky top-0 z-20"><tr>
+	{rowNumbers && <CountsRowNumber/>}
         {rows.map ((axis, index) => <CountsSortHeader key={axis.field} field={`a${index}`}
             label={message (countsFieldLabel (axis.field))} sorts={sorts}
             change={(key, additive) => update ('sort', writeCountSort (
@@ -65,16 +69,18 @@ const CountsSummaryResults = (
               ...new TextEncoder ().encode (key)].map (byte =>
                   byte.toString (16).padStart (2, '0')).join ('')}`
           return <CountsSortHeader key={key} field={`cell${index}`}
-              label={{ text: name || message ('count').text, language: message ('count').language }}
+	      label={{ text: name || message ('count').text,
+		  language: message ('count').language }}
               sorts={sorts.map (sort => sort.key === sortKey
                   ? { ...sort, key: `cell${index}` } : sort)}
               change={(_, additive) => update ('sort', writeCountSort (
                   changeCountSort (sorts, sortKey, additive)))}/>
         })}
       </tr></thead>
-      <tbody>{rowKeys.map (rowKey => {
+      <tbody>{rowKeys.map ((rowKey, rowIndex) => {
         const rowValues = JSON.parse (rowKey) as (string | number | null)[]
         return <tr key={rowKey}>
+	  {rowNumbers && <CountsRowNumber value={(data.page - 1) * data.limit + rowIndex + 1}/>}
           {rowValues.map ((value, index) => <td key={index}
               className="overflow-hidden break-words border px-2 py-1 dark:border-slate-700"
               data-counts-copy={display (value, rows[index], index)}>
@@ -82,7 +88,8 @@ const CountsSummaryResults = (
           {columnKeys.map (columnKey => {
             const columnValues = JSON.parse (columnKey) as (string | number | null)[]
             const values = [...rowValues, ...columnValues]
-            const cell = cells.find (cell => JSON.stringify (cell.values) === JSON.stringify (values))
+	    const cell = cells.find (cell => JSON.stringify (
+		cell.values) === JSON.stringify (values))
             return <td key={columnKey} data-counts-copy={String (cell?.count ?? 0)}
                 className="border px-2 py-1 dark:border-slate-700">
               <PrefetchLink to={drill (values)}>{cell?.count ?? 0}</PrefetchLink>