Add basic aggregate selection

2025-05-21 20:11:59 +09:30
parent ece4a33e1c
commit 1fd7ce6d10
5 changed files with 187 additions and 25 deletions
--- a/src/app/duckdb.service.ts
+++ b/src/app/duckdb.service.ts
@@ -31,11 +31,20 @@ export const Filter = z.object({
  value: FilterValue.optional().array(),
  operator: z.enum(['and', 'or']),
 });
+export const aggregateTypes = ['avg', 'sum', 'min', 'max'] as const;
+export const AggregateType = z.enum(aggregateTypes);
+
+export const Aggregate = z.object({ column: z.string(), type: AggregateType });
+
+export const AggregateValue = z.object({
+  column: z.string(),
+  value: z.number(),
+});

 export const RowsResponse = z.object({
-  // TODO: Can't this just be a string[]?
  rows: z.any(),
  totalRows: z.bigint().nonnegative(),
+  aggregateValues: AggregateValue.array(),
 });

 export type Column = z.infer<typeof Column>;
@@ -43,6 +52,9 @@ export type SortColumn = z.infer<typeof SortColumn>;
 export type FilterValue = z.infer<typeof FilterValue>;
 export type FilterOperator = z.infer<typeof FilterOperator>;
 export type Filter = z.infer<typeof Filter>;
+export type AggregateType = z.infer<typeof AggregateType>;
+export type Aggregate = z.infer<typeof Aggregate>;
+export type AggregateValue = z.infer<typeof AggregateValue>;
 export type RowsResponse = z.infer<typeof RowsResponse>;

 const sanitisedFileName = (file: File) =>
@@ -168,7 +180,7 @@ export class DuckdbService {
    columns: Column[],
    sorts: SortColumn[],
    filters: Filter[],
-    aggregations: unknown[],
+    aggregates: Aggregate[],
  ): Promise<RowsResponse> {
    const conn = await this.db.connect();
    try {
@@ -181,10 +193,20 @@ export class DuckdbService {
              `${prefix(value?.matchType!)}${value?.value}${suffix(value?.matchType!)}`,
          ),
      );
-      const rowCountQuery = `SELECT COUNT(1) totalRows FROM ${sanitisedFileName(file)} ${whereClause}`;
-      const totalRowStmt = await conn.prepare(rowCountQuery);
+      let aggregatesQuery = 'SELECT COUNT(1) totalRows';
+      if (aggregates.length > 0) {
+        for (const aggregate of aggregates) {
+          aggregatesQuery += `, ${aggregate.type}("${aggregate.column}") "${aggregate.column}"`;
+        }
+      }
+      aggregatesQuery += ` FROM ${sanitisedFileName(file)} ${whereClause}`;
+      const totalRowStmt = await conn.prepare(aggregatesQuery);
      const totalRowResponse = await totalRowStmt.query(...mappedFilterValues);
-      const { totalRows } = totalRowResponse.get(0)?.toJSON()!;
+      const aggregatesJson = totalRowResponse.get(0)?.toJSON()!;
+      const totalRows = aggregatesJson['totalRows'];
+      const aggregateValues: AggregateValue[] = Object.entries(aggregatesJson)
+        .filter(([key]) => key !== 'totalRows')
+        .map(([key, value]) => AggregateValue.parse({ column: key, value }));
      let query = `SELECT ${columns.map((column) => `"${column.name}"`).join(', ')} FROM ${sanitisedFileName(file)} ${whereClause}`;
      if (sorts.length > 0) {
        query += ` ORDER BY ${sorts.map((sort) => `"${sort.name}" ${sort.sortType}`).join(', ')}`;
@@ -197,10 +219,10 @@ export class DuckdbService {
          rows.push(row.toJSON()!);
        }
      }
-      return { rows, totalRows };
+      return { rows, totalRows, aggregateValues };
    } catch (err) {
      console.error(err);
-      return { rows: [], totalRows: 0n };
+      return { rows: [], totalRows: 0n, aggregateValues: [] };
    } finally {
      conn.close();
    }
@@ -217,7 +239,7 @@ export class DuckdbService {
          let or = '';
          for (const value of filter.value) {
            if (value?.value) {
-              query += ` ${or} ${filter.column} ${sqlOperator(value?.matchType!)} ? `;
+              query += ` ${or} "${filter.column}" ${sqlOperator(value?.matchType!)} ? `;
              or = filter.operator;
            }
          }
@@ -228,4 +250,29 @@ export class DuckdbService {
    }
    return query;
  }
+
+  async getAggregateValue(file: File, filters: Filter[], aggregate: Aggregate) {
+    const conn = await this.db.connect();
+    try {
+      const whereClause = this.getWhereClause(filters);
+      const mappedFilterValues = filters.flatMap((filter) =>
+        filter.value
+          .filter((value) => value?.value)
+          .map(
+            (value) =>
+              `${prefix(value?.matchType!)}${value?.value}${suffix(value?.matchType!)}`,
+          ),
+      );
+      const aggregatesQuery = `SELECT ${aggregate.type}("${aggregate.column}") "${aggregate.column}" FROM ${sanitisedFileName(file)} ${whereClause}`;
+      const totalRowStmt = await conn.prepare(aggregatesQuery);
+      const totalRowResponse = await totalRowStmt.query(...mappedFilterValues);
+      const aggregatesJson = totalRowResponse.get(0)?.toJSON()!;
+      return aggregatesJson[aggregate.column];
+    } catch (err) {
+      console.error(err);
+      return { rows: [], totalRows: 0n, aggregateValues: [] };
+    } finally {
+      conn.close();
+    }
+  }
 }
--- a/src/app/file-tree/file-tree.component.css
+++ b/src/app/file-tree/file-tree.component.css
@@ -1 +0,0 @@
-
--- a/src/app/file-tree/file-tree.component.ts
+++ b/src/app/file-tree/file-tree.component.ts
@@ -41,7 +41,6 @@ const SKIP_FILES = '.DS_Store';
      </div>
    }
  `,
-  styleUrl: './file-tree.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FileTreeComponent {
--- a/src/app/file-viewer/file-viewer.component.ts
+++ b/src/app/file-viewer/file-viewer.component.ts
@@ -5,24 +5,50 @@ import {
  inject,
  input,
  signal,
+  viewChild,
 } from '@angular/core';
 import { Skeleton } from 'primeng/skeleton';
-import { Table, TableLazyLoadEvent, TableModule } from 'primeng/table';
-import { Column, DuckdbService, Filter, FilterValue } from '../duckdb.service';
+import {
+  Table,
+  TableColumnReorderEvent,
+  TableLazyLoadEvent,
+  TableModule,
+} from 'primeng/table';
+import {
+  Aggregate,
+  AggregateType,
+  Column,
+  DuckdbService,
+  Filter,
+  FilterValue,
+  aggregateTypes,
+} from '../duckdb.service';
 import { ButtonModule } from 'primeng/button';
 import { IconField } from 'primeng/iconfield';
 import { InputIconModule } from 'primeng/inputicon';
+import { InputTextModule } from 'primeng/inputtext';
+import { Menu } from 'primeng/menu';
+import { MenuItem } from 'primeng/api';
+import { DecimalPipe } from '@angular/common';

@Component({
  selector: 'app-file-viewer',
  standalone: true,
-  imports: [TableModule, Skeleton, ButtonModule, IconField, InputIconModule],
+  imports: [
+    TableModule,
+    Skeleton,
+    ButtonModule,
+    IconField,
+    InputIconModule,
+    InputTextModule,
+    Menu,
+    DecimalPipe,
+  ],
  template: `
    @if (file() && columns().length > 0) {
      <p-table
        #table
        sortMode="multiple"
-        [reorderableColumns]="true"
        [resizableColumns]="true"
        columnResizeMode="expand"
        [columns]="columns()"
@@ -66,6 +92,7 @@ import { InputIconModule } from 'primeng/inputicon';
                {{ col.name }}
                <p-columnFilter type="text" [field]="col.name" display="menu" />
                <p-sortIcon [field]="col.name" />
+                <!-- More options can go here... integrate it with the column filter? -->
              </th>
            }
          </tr>
@@ -88,7 +115,36 @@ import { InputIconModule } from 'primeng/inputicon';
            }
          </tr>
        </ng-template>
+        <ng-template #footer>
+          <tr>
+            @for (col of columns(); track $index) {
+              <td #attachment>
+                @if (col.type === 'DOUBLE') {
+                  <div class="flex items-baseline">
+                    <p-button
+                      (click)="
+                        currentAggregateColumn.set($index);
+                        aggregateMenu.toggle($event)
+                      "
+                      [label]="aggregates()[$index]?.type?.toUpperCase()"
+                    >
+                      <ng-template #icon>
+                        <span class="material-symbols-outlined">
+                          mediation
+                        </span>
+                      </ng-template>
+                    </p-button>
+                    <span class="flex-1 text-end">
+                      {{ aggregateValues()[$index] | number }}
+                    </span>
+                  </div>
+                }
+              </td>
+            }
+          </tr>
+        </ng-template>
      </p-table>
+      <p-menu #aggregateMenu [model]="aggregateItems" [popup]="true" />
    }
  `,
  styleUrl: './file-viewer.component.css',
@@ -101,9 +157,24 @@ export class FileViewerComponent {

  // Can't be computed since effect has to run first so file exists in duckdb
  protected columns = signal<Column[]>([]);
+  protected aggregates = signal<(Aggregate | undefined)[]>([]);
+  protected currentAggregateColumn = signal<number | undefined>(undefined);
+  protected aggregateValues = signal<(number | undefined)[]>([]);
  protected numRows = 200;

+  // TODO: This needs to be limited to 500000 or something, since exceeding the max safe integer
+  //       will cause weird layout and prevent the bottom rows/footer from being viewed. Alternately
+  //       we can use paging instead, but allow paging to be virtual with a max page size
+  //       of 500000
  protected currentValue = signal<any[]>([]);
+  protected appliedFilters = signal<Filter[]>([]);
+
+  private table = viewChild(Table);
+
+  protected aggregateItems: MenuItem[] = aggregateTypes.map((type) => ({
+    label: type,
+    command: () => this.updateAggregateValue(type),
+  }));

  constructor() {
    effect(async () => {
@@ -120,15 +191,7 @@ export class FileViewerComponent {
  protected async onLazyLoad(event: TableLazyLoadEvent) {
    const file = this.file();
    if (file) {
-      const rows = await this.duckdbService.getRows(
-        file,
-        event.first ?? 0,
-        event.rows ?? 0,
-        this.columns(),
-        event.multiSortMeta?.map((meta) => ({
-          name: meta.field,
-          sortType: meta.order < 0 ? 'desc' : 'asc',
-        })) ?? [],
+      this.appliedFilters.set(
        event.filters
          ? Object.entries(event.filters).flatMap(([column, filter]) => {
              if (Array.isArray(filter)) {
@@ -160,7 +223,18 @@ export class FileViewerComponent {
              return [];
            })
          : [],
-        [],
+      );
+      const rows = await this.duckdbService.getRows(
+        file,
+        event.first ?? 0,
+        event.rows ?? 0,
+        this.columns(),
+        event.multiSortMeta?.map((meta) => ({
+          name: meta.field,
+          sortType: meta.order < 0 ? 'desc' : 'asc',
+        })) ?? [],
+        this.appliedFilters(),
+        this.aggregates().filter((agg) => !!agg) as Aggregate[],
      );
      if (this.currentValue().length !== Number(rows.totalRows)) {
        this.currentValue.set(Array.from({ length: Number(rows.totalRows) }));
@@ -188,6 +262,7 @@ export class FileViewerComponent {
    if (file) {
      await this.duckdbService.addFile(file);
      this.columns.set(await this.duckdbService.getColumns(file));
+      this.aggregates.set(new Array(this.columns().length));
      const rows = await this.duckdbService.getRows(
        file,
        0,
@@ -200,5 +275,33 @@ export class FileViewerComponent {
      const newValue = Array.from({ length: Number(rows.totalRows) });
      this.currentValue.set(newValue);
    }
+    // TODO: Replace this with previous state once persistence is implemented
+    const table = this.table();
+    if (table) {
+      table.multiSortMeta = [{ field: this.columns()[0].name, order: 1 }];
+      table.sortMultiple();
+    }
+  }
+
+  private async updateAggregateValue(type: AggregateType) {
+    this.aggregates.update((aggregates) => {
+      const copy = aggregates.slice();
+      copy[this.currentAggregateColumn()!] = {
+        type,
+        column: this.columns()[this.currentAggregateColumn()!].name,
+      };
+      return copy;
+    });
+
+    const aggregateValue = await this.duckdbService.getAggregateValue(
+      this.file()!,
+      this.appliedFilters(),
+      this.aggregates()[this.currentAggregateColumn()!]!,
+    );
+    this.aggregateValues.update((values) => {
+      const copy = values.slice();
+      copy[this.currentAggregateColumn()!] = aggregateValue;
+      return copy;
+    });
  }
 }
--- a/src/index.html
+++ b/src/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
@@ -6,6 +6,20 @@
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=mediation"
+    />
+    <style>
+      .material-symbols-outlined {
+        font-variation-settings:
+          "FILL" 0,
+          "wght" 400,
+          "GRAD" 0,
+          "opsz" 20;
+        font-size: 1rem;
+      }
+    </style>
  </head>
  <body class="h-screen">
    <app-root></app-root>