+
+
+ }
+ `,
+ styleUrl: './file-viewer.component.css',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileViewerComponent {
+ file = input();
+
+ private duckdbService = inject(DuckdbService);
+
+ // Can't be computed since effect has to run first so file exists in duckdb
+ protected columns = signal([]);
+
+ private table = viewChild(Table);
+
+ // TODO: Basically make this an array of the same length as the number of rows, but an empty array.
+ // We'll then store the actual current values in a separate array, then use the offset + row index
+ // to get the actual value. This is so we don't store a crazy amount of data.
+ // Alternative is to store current page data in the array (but keep the array length), and clear out the array each
+ // time the page changes.
+ protected currentValue = signal([]);
+
+ constructor() {
+ effect(async () => {
+ const file = this.file();
+ if (file) {
+ await this.duckdbService.addFile(file);
+ this.columns.set(await this.duckdbService.getColumns(file));
+ const rows = await this.duckdbService.getRows(
+ file,
+ 0,
+ 100,
+ this.columns(),
+ [],
+ [],
+ );
+ const newValue = Array.from({ length: Number(rows.totalRows) });
+ newValue.splice(0, 100, ...rows.rows);
+ this.currentValue.set(newValue);
+ }
+ // TODO: Refresh table? Or is this automatic when columns change?
+ // this.table().
+ //TODO: Get rows in file
+ });
+ }
+
+ // TODO: Getting an infinite loop
+ 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(),
+ [],
+ [],
+ );
+ if (!this.currentValue()) {
+ this.currentValue.set(Array.from({ length: Number(rows.totalRows) }));
+ }
+ this.currentValue().splice(event.first!, event.rows!, ...rows.rows);
+ }
+ }
+}
diff --git a/src/index.html b/src/index.html
index 7ece0f5..b470225 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,13 +1,13 @@
-
+
-
-
- IngeyEager
-
-
-
-
-
-
-
+
+
+ IngeyEager
+
+
+
+
+
+
+
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..14b4ef9 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,6 @@
-/* You can add global styles to this file, and also import other style files */
+@import "./tailwind-import.css";
+@import "primeicons/primeicons.css";
+
+html {
+ font-size: 14px;
+}
diff --git a/src/tailwind-import.css b/src/tailwind-import.css
new file mode 100644
index 0000000..0d51205
--- /dev/null
+++ b/src/tailwind-import.css
@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "tailwindcss-primeui";