early results when filtering

example/src/FastGrid.tsx

@@ -380,31 +380,26 @@ function skewedRandom() {
   return 1 - a;
 }
 
-const generateRow = (i: number): Row => {
-  const cells: Cell[] = [
-    { type: "string", value: String(i + 1), key: `${i}-index`, s: i },
-  ];
-  for (let j = 0; j < N_COLS; j++) {
-    const v = Math.round(skewedRandom() * 100000000);
-    cells.push({
-      type: "string",
-      value: String(v),
-      key: `${i}-${j}`,
-      s: v, // TODO(gab): rm field, sorting on this for efficiency. will fix with separate number/string cells
-    });
-  }
-  return { key: i, cells };
-};
-
 const generateRows = async (rowCount: number, grid: Grid, cb: () => void) => {
   const rows: Rows = {};
+  let cellIndex = 0;
   for (let i = 0; i < rowCount; i++) {
     if (i % 10000 === 0 && isTimeToYield("background")) {
       // grid.rowManager.setRows(rows);
       await yieldControl("background");
     }
-    const row = generateRow(i);
-    rows[row.key] = row;
+    const cells: Cell[] = [{ id: -i - 1, text: String(i + 1), val: i }];
+    for (let j = 0; j < N_COLS; j++) {
+      const v = Math.round(skewedRandom() * 100000000);
+      cells.push({
+        id: cellIndex,
+        text: String(v),
+        val: v, // TODO(gab): rm field, sorting on this for efficiency. will fix with separate number/string cells
+      });
+      cellIndex += 1;
+    }
+    const row = { id: i, cells } satisfies Row;
+    rows[row.id] = row;
   }
   grid.rowManager.setRows(rows);
   cb();

src/cell.ts

@@ -2,10 +2,9 @@
 export const CELL_WIDTH = 150;
 
 export interface Cell {
-  type: "string" | "enum";
-  value: string;
-  s: number;
-  key: string;
+  id: number;
+  text: string;
+  val: number;
 }
 
 // class EnumCell {
@@ -66,7 +65,7 @@ export class CellComponent {
   }
   setValue(cellRef: Cell) {
     this.cellRef = cellRef;
-    this.el.innerText = cellRef.value;
+    this.el.innerText = cellRef.text;
   }
   setOffset(offset: number, force: boolean = false) {
     if (force || offset !== this._offset) {

src/grid.ts

@@ -191,53 +191,52 @@ export class Grid {
       if (row == null) {
         continue;
       }
-      renderRows[row.key] = true;
+      renderRows[row.id] = true;
     }
 
     const removeRows: RowComponent[] = [];
-    for (const key in this.rowComponentMap) {
-      if (key in renderRows) {
+    for (const id in this.rowComponentMap) {
+      if (id in renderRows) {
         continue;
       }
-      const rowComponent = this.rowComponentMap[key]!;
+      const rowComponent = this.rowComponentMap[id]!;
       removeRows.push(rowComponent);
     }
 
     for (let i = state.startRow; i < state.endRow; i++) {
       const row = rowObj[Atomics.load(viewBuffer, i)];
+      // const row = rowObj[viewBuffer[i]
       if (row == null) {
         console.error("cannot find row", i);
         continue;
       }
 
       const offset = state.rowOffset + (i - state.startRow) * ROW_HEIGHT;
-      const existingRow = this.rowComponentMap[row.key];
+      const existingRow = this.rowComponentMap[row.id];
       if (existingRow != null) {
         existingRow.setOffset(offset);
         continue;
       }
 
       const reuseRow = removeRows.pop();
       if (reuseRow != null) {
-        delete this.rowComponentMap[reuseRow.key];
-        reuseRow.key = row.key;
+        delete this.rowComponentMap[reuseRow.id];
+        reuseRow.id = row.id;
         reuseRow.cells = row.cells;
         reuseRow.setOffset(offset);
         reuseRow.renderCells();
-        this.rowComponentMap[row.key] = reuseRow;
+        this.rowComponentMap[row.id] = reuseRow;
         continue;
       }
 
-      const rowComponent = new RowComponent(this, row.key, row.cells, offset);
+      const rowComponent = new RowComponent(this, row.id, row.cells, offset);
       this.container.appendChild(rowComponent.el);
-      this.rowComponentMap[row.key] = rowComponent;
+      this.rowComponentMap[row.id] = rowComponent;
     }
 
     for (const row of removeRows) {
       row.destroy();
-
-      console.log("remove");
-      delete this.rowComponentMap[row.key];
+      delete this.rowComponentMap[row.id];
     }
   };
   // TODO(gab): should only be done on X scroll, row reusing and creating a new row
@@ -263,8 +262,8 @@ export class Grid {
     this.scrollbar.refreshThumb();
   };
   destroy = () => {
-    for (const key in this.rowComponentMap) {
-      this.rowComponentMap[key].destroy();
+    for (const id in this.rowComponentMap) {
+      this.rowComponentMap[id].destroy();
     }
   };
 }

src/row-manager/row-manager.ts

@@ -1,11 +1,11 @@
 import { Grid } from "../grid";
 import { Row } from "../row";
+import { ComputeViewEvent, SetRowsEvent } from "./view-worker";
 import ViewWorker from "./view-worker?worker";
 
 const viewWorker = new ViewWorker();
-console.log(viewWorker);
 
-export type Rows = { [key: number]: Row };
+export type Rows = { [id: number]: Row };
 
 // const prevFilterMs: number[] = [];
 
@@ -60,7 +60,7 @@ export class RowManager {
       version: Date.now(),
     };
 
-    viewWorker.postMessage({ type: "set-rows", rows });
+    viewWorker.postMessage({ type: "set-rows", rows } satisfies SetRowsEvent);
 
     const sharedBuffer = new SharedArrayBuffer(
       1_000_000 * Int32Array.BYTES_PER_ELEMENT
@@ -70,8 +70,8 @@ export class RowManager {
     const noFilterBuffer = new Int32Array(
       1_000_000 * Int32Array.BYTES_PER_ELEMENT
     );
-    for (const key in rows) {
-      noFilterBuffer[key] = Number(key);
+    for (const id in rows) {
+      noFilterBuffer[id] = Number(id);
     }
     this.noViewBuffer = {
       buffer: noFilterBuffer,
@@ -110,7 +110,7 @@ export class RowManager {
     this.rowData = { obj: rows, arr: Object.values(rows), version: Date.now() };
 
     for (let i = 0; i < this.rowData.arr.length; i++) {
-      this.noViewBuffer.buffer[i] = this.rowData.arr[i].key;
+      this.noViewBuffer.buffer[i] = this.rowData.arr[i].id;
     }
 
     this.noViewBuffer = {
@@ -127,7 +127,10 @@ export class RowManager {
     // TODO: this is blocking wtf, gotta split this up
     setTimeout(() => {
       const t0 = performance.now();
-      viewWorker.postMessage({ type: "set-rows", rows: this.rowData.obj });
+      viewWorker.postMessage({
+        type: "set-rows",
+        rows: this.rowData.obj,
+      } satisfies SetRowsEvent);
       console.log("Ms to send rows to worker", performance.now() - t0);
     });
   };
@@ -184,25 +187,29 @@ export class RowManager {
   // };
 
   updateFilterOrCreateNew = (query: string) => {
-    // TODO(gab): hardcoded to column 2 for now
-    const filter = this.view.filter.find((f) => f.column === 2);
+    const filter = this.view.filter.find((f) => f.column === FILTER_COL);
     if (filter != null) {
       filter.query = query;
     } else {
       this.view.filter.push({
         type: "string",
-        column: 2,
+        column: FILTER_COL,
         query,
       });
     }
   };
 
   multithreadFilterBy = async (query: string) => {
-    console.count("----------");
+    console.count("---------- start filter");
     this.view.version = Date.now();
     if (query === "") {
-      const filterIndex = this.view.filter.findIndex((f) => f.column === 2);
+      // hack for only filtering one col for now
+      const filterIndex = this.view.filter.findIndex(
+        (f) => f.column === FILTER_COL
+      );
       this.view.filter.splice(filterIndex, 1);
+      // ----------------
+
       this.grid.renderViewportRows();
       this.grid.renderViewportCells();
       this.grid.scrollbar.refreshThumb();
@@ -214,12 +221,9 @@ export class RowManager {
     viewWorker.postMessage({
       type: "compute-view",
       viewConfig: this.view,
-      recompute: {
-        filter: true,
-        sort: false,
-      },
       viewBuffer: this.viewBuffer.buffer,
-    });
+      useCachedSort: true,
+    } satisfies ComputeViewEvent);
   };
   multithreadSortBy = async (sort: "ascending" | "descending" | null) => {
     this.view.version = Date.now();
@@ -231,17 +235,17 @@ export class RowManager {
       return;
     }
     this.view.sort = {
-      column: 2,
+      column: SORT_COL,
       direction: sort,
     };
     viewWorker.postMessage({
       type: "compute-view",
       viewConfig: this.view,
-      recompute: {
-        filter: true,
-        sort: true,
-      },
       viewBuffer: this.viewBuffer.buffer,
-    });
+    } satisfies ComputeViewEvent);
   };
 }
+
+// temporary while i dont have multi column views. these are  columnindexes to be computed for sort/filter
+export const FILTER_COL = 1;
+export const SORT_COL = 1;