Skip to content

Commit

Permalink
feat: show number of results in results panel
Browse files Browse the repository at this point in the history 
Ref #184
  • Loading branch information
@stdavis
stdavis committed Nov 29, 2024
1 parent a229bf4 commit 22be15d
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 65 deletions.
4 changes: 1 addition & 3 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
121 changes: 62 additions & 59 deletions src/components/ResultsGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 [];
}
Expand Down Expand Up @@ -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>
</>
);
}
6 changes: 3 additions & 3 deletions src/components/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand All @@ -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) {
Expand Down Expand Up @@ -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. */}
Expand Down

0 comments on commit 22be15d

Please sign in to comment.