feat: show number of results in results panel

Ref #184
agrc · Nov 1, 2024 · 62ffec4 · 62ffec4
1 parent d79dd37
commit 62ffec4
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 65 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -216,9 +216,7 @@ export default function App() {
                   state={trayState}
                   {...trayTriggerProps}
                 >
-                  <section className="grid gap-2 px-7 pt-2">
-                    <ResultsGrid />
-                  </section>
+                  <ResultsGrid />
                 </Drawer>
               </div>
             </div>

diff --git a/src/components/ResultsGrid.tsx b/src/components/ResultsGrid.tsx
@@ -10,7 +10,7 @@ import { Cell, Column, Row, Table, TableHeader } from './Table';
 
 const STATION_NAME = 'STATION_NAME';
 type Result = Record<string, string | number | null>;
-async function getData(where: string, currentUser: User): Promise<Iterable<Result>> {
+async function getData(where: string, currentUser: User): Promise<Result[]> {
   if (where === '') {
     return [];
   }
@@ -122,63 +122,66 @@ export default function ResultsGrid() {
   }
 
   return (
-    <Table aria-label="query results" className="h-full w-full">
-      <TableHeader>
-        <Column id={config.fieldNames.EVENT_DATE} minWidth={120}>
-          Event Date
-        </Column>
-        <Column id={config.fieldNames.OBSERVERS} minWidth={120}>
-          Observers
-        </Column>
-        <Column id={`${config.fieldNames.WaterName}_Stream`} minWidth={170}>
-          Stream
-        </Column>
-        <Column id={`${config.fieldNames.DWR_WaterID}_Stream`} minWidth={120}>
-          Stream ID
-        </Column>
-        <Column id={`${config.fieldNames.ReachCode}_Stream`} minWidth={200}>
-          Stream Reach Code
-        </Column>
-        <Column id={`${config.fieldNames.WaterName}_Lake`} minWidth={150}>
-          Lake
-        </Column>
-        <Column id={`${config.fieldNames.DWR_WaterID}_Lake`} minWidth={120}>
-          Lake ID
-        </Column>
-        <Column id={`${config.fieldNames.ReachCode}_Lake`} minWidth={200}>
-          Lake Reach Code
-        </Column>
-        <Column id={STATION_NAME} minWidth={180}>
-          Station Name
-        </Column>
-        <Column id={config.fieldNames.SPECIES} minWidth={180}>
-          Species Codes
-        </Column>
-        <Column id={config.fieldNames.TYPES} minWidth={150}>
-          Equipment
-        </Column>
-        <Column id={config.fieldNames.EVENT_ID} isRowHeader minWidth={350}>
-          Event ID
-        </Column>
-      </TableHeader>
-      <TableBody items={data}>
-        {(row) => (
-          <Row>
-            <Cell>{new Date(row[config.fieldNames.EVENT_DATE] as number).toLocaleDateString()}</Cell>
-            <Cell>{row[config.fieldNames.OBSERVERS]}</Cell>
-            <Cell>{row[`${config.fieldNames.WaterName}_Stream`]}</Cell>
-            <Cell>{row[`${config.fieldNames.DWR_WaterID}_Stream`]}</Cell>
-            <Cell>{row[`${config.fieldNames.ReachCode}_Stream`]}</Cell>
-            <Cell>{row[`${config.fieldNames.WaterName}_Lake`]}</Cell>
-            <Cell>{row[`${config.fieldNames.DWR_WaterID}_Lake`]}</Cell>
-            <Cell>{row[`${config.fieldNames.ReachCode}_Lake`]}</Cell>
-            <Cell>{row[STATION_NAME]}</Cell>
-            <Cell>{row[config.fieldNames.SPECIES]}</Cell>
-            <Cell>{row[config.fieldNames.TYPES]}</Cell>
-            <Cell>{row[config.fieldNames.EVENT_ID]}</Cell>
-          </Row>
-        )}
-      </TableBody>
-    </Table>
+    <>
+      <div className="px-2 py-2">Results: {data?.length}</div>
+      <Table aria-label="query results" className="-z-10 h-full w-full border-t dark:border-t-zinc-300">
+        <TableHeader>
+          <Column id={config.fieldNames.EVENT_DATE} minWidth={120}>
+            Event Date
+          </Column>
+          <Column id={config.fieldNames.OBSERVERS} minWidth={120}>
+            Observers
+          </Column>
+          <Column id={`${config.fieldNames.WaterName}_Stream`} minWidth={170}>
+            Stream
+          </Column>
+          <Column id={`${config.fieldNames.DWR_WaterID}_Stream`} minWidth={120}>
+            Stream ID
+          </Column>
+          <Column id={`${config.fieldNames.ReachCode}_Stream`} minWidth={200}>
+            Stream Reach Code
+          </Column>
+          <Column id={`${config.fieldNames.WaterName}_Lake`} minWidth={150}>
+            Lake
+          </Column>
+          <Column id={`${config.fieldNames.DWR_WaterID}_Lake`} minWidth={120}>
+            Lake ID
+          </Column>
+          <Column id={`${config.fieldNames.ReachCode}_Lake`} minWidth={200}>
+            Lake Reach Code
+          </Column>
+          <Column id={STATION_NAME} minWidth={180}>
+            Station Name
+          </Column>
+          <Column id={config.fieldNames.SPECIES} minWidth={180}>
+            Species Codes
+          </Column>
+          <Column id={config.fieldNames.TYPES} minWidth={150}>
+            Equipment
+          </Column>
+          <Column id={config.fieldNames.EVENT_ID} isRowHeader minWidth={350}>
+            Event ID
+          </Column>
+        </TableHeader>
+        <TableBody items={data}>
+          {(row) => (
+            <Row>
+              <Cell>{new Date(row[config.fieldNames.EVENT_DATE] as number).toLocaleDateString()}</Cell>
+              <Cell>{row[config.fieldNames.OBSERVERS]}</Cell>
+              <Cell>{row[`${config.fieldNames.WaterName}_Stream`]}</Cell>
+              <Cell>{row[`${config.fieldNames.DWR_WaterID}_Stream`]}</Cell>
+              <Cell>{row[`${config.fieldNames.ReachCode}_Stream`]}</Cell>
+              <Cell>{row[`${config.fieldNames.WaterName}_Lake`]}</Cell>
+              <Cell>{row[`${config.fieldNames.DWR_WaterID}_Lake`]}</Cell>
+              <Cell>{row[`${config.fieldNames.ReachCode}_Lake`]}</Cell>
+              <Cell>{row[STATION_NAME]}</Cell>
+              <Cell>{row[config.fieldNames.SPECIES]}</Cell>
+              <Cell>{row[config.fieldNames.TYPES]}</Cell>
+              <Cell>{row[config.fieldNames.EVENT_ID]}</Cell>
+            </Row>
+          )}
+        </TableBody>
+      </Table>
+    </>
   );
 }
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -24,7 +24,7 @@ import { composeTailwindRenderProps, focusRing } from './utils.ts';
 
 export function Table(props: TableProps) {
   return (
-    <ResizableTableContainer className="relative h-full w-full overflow-auto rounded-lg border dark:border-zinc-200/40">
+    <ResizableTableContainer className="relative h-full w-full overflow-auto">
       <AriaTable {...props} />
     </ResizableTableContainer>
   );
@@ -37,7 +37,7 @@ const columnStyles = tv({
 
 const resizerStyles = tv({
   extend: focusRing,
-  base: 'box-content h-5 w-px translate-x-[8px] cursor-col-resize rounded bg-gray-400 bg-clip-content px-[8px] py-1 -outline-offset-2 resizing:w-[2px] resizing:bg-blue-600 resizing:pl-[7px] dark:bg-zinc-500 forced-colors:bg-[ButtonBorder] forced-colors:resizing:bg-[Highlight]',
+  base: 'box-content h-5 w-px translate-x-[8px] cursor-col-resize bg-gray-400 bg-clip-content px-[8px] py-1 -outline-offset-2 resizing:w-[2px] resizing:bg-blue-600 resizing:pl-[7px] dark:bg-zinc-500 forced-colors:bg-[ButtonBorder] forced-colors:resizing:bg-[Highlight]',
 });
 
 export function Column(props: ColumnProps) {
@@ -83,7 +83,7 @@ export function TableHeader<T extends object>(props: TableHeaderProps<T>) {
       {...props}
       className={composeTailwindRenderProps(
         props.className,
-        'sticky top-0 z-10 rounded-t-lg border-b backdrop-blur-md supports-[-moz-appearance:none]:bg-gray-100 dark:border-b-zinc-300 dark:supports-[-moz-appearance:none]:bg-zinc-700 forced-colors:bg-[Canvas]',
+        'sticky top-0 z-10 border-b backdrop-blur-md supports-[-moz-appearance:none]:bg-gray-100 dark:border-b-zinc-300 dark:supports-[-moz-appearance:none]:bg-zinc-700 forced-colors:bg-[Canvas]',
       )}
     >
       {/* Add extra columns for drag and drop and selection. */}