@lavalogic/scoria 0.11.14 → 0.12.0

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -1,6 +1,6 @@
 import { browser, dev } from '$app/environment';
-import { asyncAll, asyncFilterIndices, asyncSleep, getCanvasContext, getErrorMessage } from '../../../../Helpers/Helpers.svelte.js';
-import { tick, untrack } from 'svelte';
+import { asyncAll, asyncFilterIndices, asyncSleep, devCatch, getCanvasContext, getErrorMessage } from '../../../../Helpers/Helpers.svelte.js';
+import { tick } from 'svelte';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import { ColumnType } from '../Columns/ColumnType.js';
 import { AccessorDef } from '../Columns/Definitions/Accessors/AccessorDef.svelte.js';
@@ -45,7 +45,7 @@ export class TableContext {
         return context;
     }
     // #region constructor
-    constructor(INTERNAL_ONLY, defaultColumnDefs, tableName, dataRepo, allowCopy, enableResize, allowColumnReordering, allowQuickFiltering, showQuickFilterByDefault, allowAdvancedFiltering, toolbarPosition, displayFooter, selectionExtractor, getUserId, _onEditCell = async () => {
+    constructor(INTERNAL_ONLY, defaultColumnDefs, tableName, dataRepo, allowCopy, enableResize, allowColumnReordering, allowQuickFiltering, showQuickFilterByDefault, allowAdvancedFiltering, toolbarPosition, displayFooter, selectionExtractor, getUserId, _onEditCell = () => {
         console.warn('Cannot edit immutable table');
     }) {
         this.defaultColumnDefs = defaultColumnDefs;
@@ -66,76 +66,6 @@ export class TableContext {
         }
         this._dataRepo = $state(dataRepo);
         // this.dataRepo.forceRefresh = this.forceVisibilityUpdate;
-        $effect(() => {
-            const fd = (() => {
-                if (this.paginationRepo?.paginationType == PaginationType.Local) {
-                    const data = this.showSelectedOnly
-                        ? // FIXME this will show the selected items by order of insertion to the selectedItems map.
-                            [...this.selectedItems.values()]
-                        : (this.filteredIndices.map((index) => {
-                            return dataRepo.data[index];
-                        }) ?? []);
-                    return data;
-                }
-                return this.showSelectedOnly ? [...this.selectedItems.values()] : (dataRepo?.data ?? []);
-            })();
-            const sd = (() => {
-                if (this.paginationRepo?.paginationType == PaginationType.Local) {
-                    const state = dataRepo.sorting ?? [];
-                    const dataToSort = fd.concat();
-                    dataToSort.sort((a, b) => {
-                        const end = state.length;
-                        for (let i = 0; i < end; i++) {
-                            const { id, desc } = state[i];
-                            const sortingFn = this.getSortingFn(id, desc);
-                            if (sortingFn) {
-                                const result = sortingFn(a, b);
-                                if (result != 0) {
-                                    return result;
-                                }
-                            }
-                            else if (dev) {
-                                console.warn('no sorting fn found for ' + id);
-                            }
-                        }
-                        return 0;
-                    });
-                    return dataToSort;
-                }
-                return fd ?? [];
-            })();
-            const cpd = (() => {
-                if (dataRepo.paginationType != PaginationType.Local) {
-                    return sd ?? [];
-                }
-                const x = sd.slice(dataRepo.pageStartIndex, dataRepo.pageEndIndexExclusive);
-                if (dev) {
-                    console.log(x);
-                }
-                return x;
-            })();
-            const ori = new Map((dataRepo.data ?? []).map((item, index) => [item, index]));
-            this._filteredData = fd;
-            this._sortedData = sd;
-            this._currentPageData = cpd;
-            this._originalRowIndices = ori;
-        });
-        $effect(() => {
-            if (this._currentPageData) {
-                void this.selectedItems;
-                untrack(() => {
-                    if (this.paginationRepo?.paginationState.pageIndex != undefined &&
-                        this.paginationRepo?.paginationState.pageSize != undefined) {
-                        this.updateSelectedItems();
-                        this.resetHighlightedRows();
-                        this.recalculateAllSelectedInCurrentPage();
-                    }
-                });
-            }
-        });
-        $effect(() => {
-            $inspect(this.sortedData, this._currentPageData, this._originalRowIndices);
-        });
         if (defaultColumnDefs.remoteFilters) {
             this.remoteFilters = defaultColumnDefs.remoteFilters;
         }
@@ -193,45 +123,44 @@ export class TableContext {
                     const preset = presets.find((it) => it.name === savedPresetName);
                     if (preset && areDefsEquivalent(this.columnDefs, preset.columnDefs)) {
                         this.columnDefs = preset.columnDefs;
-                        if (preset.visibilityState) {
-                            this.columnVisibility = preset.visibilityState;
-                        }
-                        if (preset.columnPinningState) {
-                            this.columnPinning = preset.columnPinningState;
-                        }
+                        this.columnVisibility = preset.visibilityState;
+                        this.columnPinning = preset.columnPinningState;
                         this.selectedPreset = preset;
                     }
                     else {
                         localStorage.removeItem(`${this.userId}-${tableName}-selected-preset-name`);
                         this.selectedPreset = presets[0];
-                        if (presets[0].visibilityState) {
+                        if (presets.at(0)?.visibilityState) {
                             this.columnVisibility = presets[0].visibilityState;
                         }
                     }
                     this.columnPresets = presets;
                 }
-            });
+            })
+                .catch(devCatch);
         }
         $effect(() => {
             void this.paginationRepo?.paginationType;
-            void this.dataRepo?.filtering;
-            void this.dataRepo?.filterModes.values();
-            void this.dataRepo?.data;
+            void this.dataRepo.filtering;
+            void this.dataRepo.filterModes.values();
+            void this.dataRepo.data;
             (async () => {
                 const startTime = Date.now();
                 let currentTimerPromise;
                 const abortController = new AbortController();
                 try {
                     if (this.paginationRepo?.paginationType == PaginationType.Local) {
+                        // eslint-disable-next-line svelte/prefer-svelte-reactivity
                         const checkedIds = new Set();
-                        const filterState = this.dataRepo?.filtering?.filter((filter) => {
+                        const filterState = this.dataRepo.filtering.filter((filter) => {
                             const snapshot = $state.snapshot(filter.value);
                             checkedIds.add(filter.id);
-                            const x = this.dataRepo.filterModes.get(filter.id);
-                            return (allowedEmptyFilterModes.has(x) ||
-                                (snapshot !== '' && (!Array.isArray(snapshot) || snapshot[0] !== '')));
-                        }) ?? [];
-                        const data = this.dataRepo?.data ?? [];
+                            const filterMode = this.dataRepo.filterModes.get(filter.id);
+                            return (!!filterMode &&
+                                (allowedEmptyFilterModes.has(filterMode) ||
+                                    (snapshot !== '' && (!Array.isArray(snapshot) || snapshot[0] !== ''))));
+                        });
+                        const data = this.dataRepo.data;
                         // HACK add filter state for filters that don't require a value to function
                         // this.dataRepo?.filterModes?.entries().forEach(([key, value]) => {
                         // 	if (!checkedIds.has(key)) {
@@ -247,11 +176,11 @@ export class TableContext {
                         // 	}
                         // });
                         if (!filterState.length) {
-                            this.filteredIndices = data.map((_, index) => index) ?? [];
+                            this.filteredIndices = data.map((_, index) => index);
                         }
                         currentTimerPromise = this.filterTimer = this.filterTimer + 1;
                         await asyncSleep(150);
-                        const currentTimer = await currentTimerPromise;
+                        const currentTimer = currentTimerPromise;
                         if (currentTimerPromise != this.filterTimer) {
                             throw new Error('stale filter');
                         }
@@ -291,8 +220,10 @@ export class TableContext {
                             if (currentTimerPromise !== this.filterTimer) {
                                 abortController.abort('stale data');
                             }
+                            // HACK this warning is wrong. We're in an async context and settled is being changed in the finally callback above
+                            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                             if (settled) {
-                                console.log(`iteration ${await currentTimerPromise} finished ${Date.now() - startTime}ms`);
+                                console.log(`iteration ${currentTimerPromise} finished ${Date.now() - startTime}ms`);
                                 return;
                             }
                             await tick();
@@ -305,10 +236,10 @@ export class TableContext {
                         if (!message.toLocaleLowerCase().startsWith('stale')) {
                             console.error(e);
                         }
-                        console.log(`iteration ${await currentTimerPromise} cancelled after ${Date.now() - startTime}ms`);
+                        console.log(`iteration ${currentTimerPromise} cancelled after ${Date.now() - startTime}ms`);
                     }
                 }
-            })();
+            })().catch(devCatch);
         });
     }
     // #endregion
@@ -374,7 +305,12 @@ export class TableContext {
         return this._columnDefs;
     }
     set columnDefs(v) {
+        // if (this._columnDefs.length > 0 && v != this._columnDefs) {
+        // 	debugger;
+        // }
         this._columnDefs = v;
+        // this causes an error...?
+        // this.table = createTable(this.tableOptions);
     }
     _columnPresets = $state([]);
     get columnPresets() {
@@ -510,16 +446,13 @@ export class TableContext {
         this._openModalCoordinates = v;
     }
     _allSelectedInCurrentPage = $derived.by(() => {
-        if (!this.dataRepo || this.selectedItems.size === 0) {
+        if (this.selectedItems.size === 0) {
             return Promise.resolve(false);
         }
         const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
         const pageEndIndexExclusive = this.paginationRepo
             ? Math.min(this.paginationRepo.pageEndIndexExclusive, this.sortedData.length)
             : this.sortedData.length;
-        if (pageStartIndex == undefined || pageEndIndexExclusive == undefined) {
-            return Promise.resolve(false);
-        }
         const selectableMethod = this.columnDefs.find((it) => it instanceof RowSelectionDef)?.isSelectable;
         return this.allSelectedBySelectableMethod(pageStartIndex, pageEndIndexExclusive, selectableMethod);
     });
@@ -527,9 +460,6 @@ export class TableContext {
         return this._allSelectedInCurrentPage;
     }
     async allSelectedBySelectableMethod(pageStartIndex, pageEndIndexExclusive, selectableMethod) {
-        if (!this.dataRepo) {
-            return Promise.resolve(false);
-        }
         if (selectableMethod) {
             for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
                 const item = this.sortedData[index];
@@ -550,9 +480,6 @@ export class TableContext {
         return Promise.resolve(true);
     }
     async _areAllHighlighted(pageStartIndex, pageEndIndexExclusive) {
-        if (!this.dataRepo) {
-            return Promise.resolve(false);
-        }
         for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
             const item = this.sortedData[index];
             if (!this.highlightedItems.has(this.selectionExtractor(item))) {
@@ -562,16 +489,13 @@ export class TableContext {
         return Promise.resolve(true);
     }
     _allHighlighted = $derived.by(() => {
-        if (!this.dataRepo || this.highlightedItems.size === 0) {
+        if (this.highlightedItems.size === 0) {
             return Promise.resolve(false);
         }
         const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
         const pageEndIndexExclusive = this.paginationRepo
             ? Math.min(this.paginationRepo.pageEndIndexExclusive, this.sortedData.length)
             : this.sortedData.length;
-        if (pageStartIndex == undefined || pageEndIndexExclusive == undefined) {
-            return Promise.resolve(false);
-        }
         return this._areAllHighlighted(pageStartIndex, pageEndIndexExclusive);
     });
     get allHighlighted() {
@@ -636,12 +560,14 @@ export class TableContext {
     set hasInvalidSelectedItems(v) {
         this._hasInvalidSelectedItems = v;
     }
+    // FIXME decide
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
     columnDefsById = $derived(new Map(this.columnDefs.map((it) => [it.id, it])));
     getSortingFn = (id, desc) => {
-        if (this.dataRepo?.data.length == 0) {
+        if (this.dataRepo.data.length == 0) {
             return undefined;
         }
-        const def = this.columnDefsById?.get(id);
+        const def = this.columnDefsById.get(id);
         if (!def) {
             return undefined;
         }
@@ -665,6 +591,10 @@ export class TableContext {
         // }
         return comparableSortingFn(id, desc);
     };
+    originalRowIndices = $derived(
+    // TODO decide
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    new Map(this.dataRepo.data.map((item, index) => [item, index])));
     // private _filterTimer: ReturnType<typeof setTimeout> | undefined;
     _filterTimer = 1;
     get filterTimer() {
@@ -680,21 +610,49 @@ export class TableContext {
     set filteredIndices(v) {
         this._filteredIndices = v;
     }
-    _filteredData = $state([]);
-    get filteredData() {
-        return this._filteredData;
-    }
-    _sortedData = $state([]);
-    get sortedData() {
-        return this._sortedData;
-    }
+    filteredData = $derived.by(() => {
+        if (this.paginationRepo?.paginationType == PaginationType.Local) {
+            const data = this.showSelectedOnly
+                ? // FIXME this will show the selected items by order of insertion to the selectedItems map.
+                    [...this.selectedItems.values()]
+                : this.filteredIndices.map((index) => {
+                    return this.dataRepo.data[index];
+                });
+            return data;
+        }
+        return this.showSelectedOnly ? [...this.selectedItems.values()] : this.dataRepo.data;
+    });
+    sortedData = $derived.by(() => {
+        if (this.paginationRepo?.paginationType == PaginationType.Local) {
+            const state = this.dataRepo.sorting;
+            const sortedData = this.showSelectedOnly
+                ? // FIXME this will show the selected items by order of insertion to the selectedItems map.
+                    [...this.selectedItems.values()]
+                : this.filteredData.concat();
+            sortedData.sort((a, b) => {
+                const end = state.length;
+                for (let i = 0; i < end; i++) {
+                    const { id, desc } = state[i];
+                    const sortingFn = this.getSortingFn(id, desc);
+                    if (sortingFn) {
+                        const result = sortingFn(a, b);
+                        if (result != 0) {
+                            return result;
+                        }
+                    }
+                    else {
+                        console.warn('no sorting fn found for ' + id);
+                    }
+                }
+                return 0;
+            });
+            return sortedData;
+        }
+        return this.filteredData;
+    });
     sortedRowModel = $derived.by(() => {
         const rows = this.sortedData.map((item, index) => {
-            const originalIndex = this._originalRowIndices.get(item);
-            const unsortedIndex = originalIndex ?? index;
-            if (originalIndex == null) {
-                throw new Error(`Sorted Data not found in Original Row Indices: original index ${originalIndex}, index ${index}`);
-            }
+            const unsortedIndex = this.originalRowIndices.get(item) ?? index;
             return this.createRow(item, index, unsortedIndex);
         });
         return {
@@ -703,26 +661,16 @@ export class TableContext {
             rowsById: new Map(rows.map((it, index) => [index.toString(), it])) //FIXME should this be by sorted id or by original id?
         };
     });
-    _currentPageData = $state([]);
-    get currentPageData() {
-        return this._currentPageData;
-    }
-    // FIXME this is most likely the cuplrit for add pod not working on receipt. It may be one tick behind the other values
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity
-    _originalRowIndices = $state(new Map());
-    get originalRowIndices() {
-        return this._originalRowIndices;
-    }
+    _currentPageData = $derived(this.dataRepo.paginationType == PaginationType.Local
+        ? this.sortedData.slice(this.dataRepo.pageStartIndex, this.dataRepo.pageEndIndexExclusive)
+        : this.sortedData);
     paginationRowModel = $derived.by(() => {
-        const currentPageData = this._currentPageData;
-        const rows = currentPageData.map((item, index) => {
-            const unsortedIndex = this._originalRowIndices.get(item) ?? index;
-            if (!item) {
-                throw new Error(`No Item was found at index ${index}`);
-            }
+        const sortedData = this._currentPageData;
+        const rows = sortedData.map((item, index) => {
+            const unsortedIndex = this.originalRowIndices.get(item) ?? index;
             const row = {
                 getValue: async (key) => {
-                    const gotValue = this.columnDefsById.get(key).accessorFn?.(item, index);
+                    const gotValue = await this.columnDefsById.get(key)?.accessorFn?.(item, index);
                     if (gotValue !== undefined) {
                         return gotValue;
                     }
@@ -771,10 +719,13 @@ export class TableContext {
             };
             const makeCellFromId = (columnId) => {
                 const def = this.columnDefsById.get(columnId);
+                if (!def) {
+                    throw new Error(`Could not find column with id ${columnId}`);
+                }
                 return makeRow(def);
             };
-            const leftVisibleCells = $derived([...(this.columnPinning.left?.keys() ?? [])].map(makeCellFromId) ?? []);
-            const rightVisibleCells = $derived([...(this.columnPinning.right?.keys() ?? [])].map(makeCellFromId) ?? []);
+            const leftVisibleCells = $derived([...(this.columnPinning.left?.keys() ?? [])].map(makeCellFromId));
+            const rightVisibleCells = $derived([...(this.columnPinning.right?.keys() ?? [])].map(makeCellFromId));
             const centerVisibleCells = $derived(this.columnDefs
                 .filter((it) => {
                 return !(this.columnPinning.left?.has(it.id) || this.columnPinning.right?.has(it.id));
@@ -788,17 +739,33 @@ export class TableContext {
             rowsById: new Map(rows.map((it, index) => [index.toString(), it])) //FIXME should this be by sorted id or by original id?
         };
     });
+    get currentPageData() {
+        return this._currentPageData;
+    }
     // #endregion
     // #region public methods
     selectionContains = (item) => {
-        if (!this.selectionExtractor) {
-            throw new Error('No selection extractor was supplied');
-        }
         if (!this.isSelectable) {
             return true;
         }
         return this.selectedItems.has(this.selectionExtractor(item));
     };
+    // public readonly HACK__reselectItem = (item: T) => {
+    // 	if (!this.selectionExtractor) {
+    // 		throw new Error('No selection extractor was supplied');
+    // 	}
+    // 	if (!this.isSelectable) {
+    // 		return true;
+    // 	}
+    // 	const key = this.selectionExtractor(item);
+    // 	if (this.selectedItems.has(key)) {
+    // 		this.selectedItems.delete(key);
+    // 		this.selectedItems.set(key, item);
+    // 	} else {
+    // 		this.selectedItems.set(key, item);
+    // 		this.selectedItems.delete(key);
+    // 	}
+    // };
     addInvalidValue = (item) => {
         this.invalidValues.set(this.selectionExtractor(item), item);
     };
@@ -817,6 +784,13 @@ export class TableContext {
             this.highlightedItems.set(key, item);
         }
     };
+    // public readonly toggleHighlightedRow = (rowIndex: number) => {
+    // 	if (this.highlightedRowIndexIds.has(rowIndex)) {
+    // 		this.highlightedRowIndexIds.delete(rowIndex);
+    // 	} else {
+    // 		this.highlightedRowIndexIds.add(rowIndex);
+    // 	}
+    // };
     resetHighlightedRows = () => {
         this.highlightedItems.clear();
     };
@@ -828,50 +802,40 @@ export class TableContext {
         else {
             this.selectedItems.delete(key);
         }
+        this.recalculateAllSelectedInCurrentPage();
     };
     setSelectionMap = (set) => {
         this.selectedItems = set;
     };
     updateSelectedItems = async () => {
-        if (!this.dataRepo) {
-            return;
-        }
         const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
         const pageEndIndexExclusive = this.paginationRepo
             ? Math.min(this.paginationRepo.pageEndIndexExclusive, this.sortedData.length)
             : this.sortedData.length;
         const selectableMethod = this.columnDefs.find((it) => it instanceof RowSelectionDef)?.isSelectable;
-        const updateSelectedItem = (item) => {
-            const key = this.selectionExtractor(item);
-            if (this.selectedItems.has(key)) {
-                //replace selected item with newer version of the same identity
-                this.selectedItems.set(key, item);
-            }
-        };
         if (selectableMethod) {
             for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
                 const item = this.sortedData[index];
-                // HACK: Please find why this is happening and fix it properly
-                if (!item) {
-                    console.warn(`skipping update because there is a data mismatch (with selectable method)`);
-                    return;
-                }
                 if (await selectableMethod(item, index)) {
-                    updateSelectedItem(item);
+                    const key = this.selectionExtractor(item);
+                    if (this.selectedItems.has(key)) {
+                        //replace selected item with newer version of the same identity
+                        this.selectedItems.set(key, item);
+                    }
                 }
             }
         }
         else {
             for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
                 const item = this.sortedData[index];
-                // HACK: Please find why this is happening and fix it properly
-                if (!item) {
-                    console.warn(`skipping update because there is a data mismatch (no selectable method)`);
-                    return;
+                const key = this.selectionExtractor(item);
+                if (this.selectedItems.has(key)) {
+                    //replace selected item with newer version of the same identity
+                    this.selectedItems.set(key, item);
                 }
-                updateSelectedItem(item);
             }
         }
+        this.recalculateAllSelectedInCurrentPage();
     };
     resetSelectedItems = () => {
         for (const key of this.selectedItems.keys()) {
@@ -879,32 +843,16 @@ export class TableContext {
         }
         this.recalculateAllSelectedInCurrentPage();
     };
-    lastIncrement = Number.MIN_SAFE_INTEGER;
     recalculateAllSelectedInCurrentPage = () => {
-        const invalidValues = this._invalidValues;
-        const allSelectedInCurrentPage = [...this.selectedItems.keys()];
-        const currentIncrement = ++this.lastIncrement;
-        this.allSelectedInCurrentPage
-            ?.then(() => {
-            if (this.lastIncrement == currentIncrement) {
-                this.hasInvalidSelectedItems = allSelectedInCurrentPage.some((key) => {
-                    return invalidValues.has(key);
-                });
-            }
-            else {
-                if (dev) {
-                    console.log('skipping recalculation due to stale data');
-                }
-            }
+        tick()
+            .then(() => {
+            return this.allSelectedInCurrentPage.then(() => {
+                this.hasInvalidSelectedItems = [...this.selectedItems.keys()].some((key) => this._invalidValues.has(key));
+            });
         })
-            .catch((e) => {
-            console.log(e);
-        });
+            .catch(devCatch);
     };
     selectAllInCurrentPage = async () => {
-        if (!this.dataRepo) {
-            return;
-        }
         if (await this.allSelectedInCurrentPage) {
             // this.resetSelectedItems();
             const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
@@ -939,12 +887,11 @@ export class TableContext {
                 }
             }
         }
+        this.recalculateAllSelectedInCurrentPage();
     };
     onHighlightAll = () => {
-        if (!this.dataRepo) {
-            return;
-        }
-        this.allHighlighted.then((areAllHighlighted) => {
+        this.allHighlighted
+            .then((areAllHighlighted) => {
             if (areAllHighlighted) {
                 this.highlightedItems.clear();
             }
@@ -953,17 +900,19 @@ export class TableContext {
                     this.highlightedItems.set(this.selectionExtractor(item), item);
                 });
             }
-        });
+        })
+            .catch(devCatch);
     };
     onEditCell = async (item, coords, value) => {
-        const oldKey = this.selectionExtractor?.(item);
+        const oldKey = this.selectionExtractor(item);
         const wasSelected = oldKey != null && this.selectedItems.has(oldKey);
+        // debugger;
         if (wasSelected) {
             this.selectedItems.delete(oldKey);
         }
-        await this._onEditCell(item, coords, value);
+        await this._onEditCell?.(item, coords, value);
         if (wasSelected && this.isSelectable) {
-            const newKey = this.selectionExtractor?.(item);
+            const newKey = this.selectionExtractor(item);
             if (newKey) {
                 this.selectedItems.set(newKey, item);
             }
@@ -1002,7 +951,7 @@ export class TableContext {
         switch (e.key) {
             case 'Enter':
             case 'F2':
-                if (!e.target?.classList?.contains('editable')) {
+                if (!e.target?.classList.contains('editable')) {
                     break;
                 }
                 e.preventDefault();
@@ -1074,10 +1023,10 @@ export class TableContext {
                     }
                     //these two at the bottom shouldn't happen on a home press
                 }
-                else if (e.getModifierState('Shift') && this.allowCopy && e.key === 'ArrowLeft') {
+                else if (e.getModifierState('Shift') && this.allowCopy) {
                     this.moveFocusLeft();
                 }
-                else if (e.key === 'ArrowLeft') {
+                else {
                     this.setFocusLeft();
                 }
                 return;
@@ -1096,10 +1045,10 @@ export class TableContext {
                         this.moveToEnd();
                     }
                 }
-                else if (e.getModifierState('Shift') && this.allowCopy && e.key === 'ArrowRight') {
+                else if (e.getModifierState('Shift') && this.allowCopy) {
                     this.moveFocusRight();
                 }
-                else if (e.key === 'ArrowRight') {
+                else {
                     this.setFocusRight();
                 }
             }
@@ -1120,9 +1069,7 @@ export class TableContext {
                 case 'C':
                     if (e.getModifierState('Control')) {
                         e.preventDefault();
-                        if (this.allowCopy) {
-                            this.copyDataToClipboard();
-                        }
+                        this.copyDataToClipboard().catch(devCatch);
                     }
                     break;
             }
@@ -1136,11 +1083,13 @@ export class TableContext {
                     ? `#${this.tableName}-cell-${fs.row}-${fs.id}`
                     : `#${this.tableName}-cell-quicksearch-${fs.id}`);
             this.showQuickFiltering = !this.showQuickFiltering;
-            tick().then(() => {
+            tick()
+                .then(() => {
                 if (idToFocusTo) {
                     document.querySelector(idToFocusTo)?.focus();
                 }
-            });
+            })
+                .catch(devCatch);
         }
     };
     setColumnPinning = (updater) => {
@@ -1172,10 +1121,10 @@ export class TableContext {
     // public get rowModel() {
     // 	return this._rowModel;
     // }
-    lastPage = $derived(this.dataRepo?.lastPage ?? 0);
+    lastPage = $derived(this.dataRepo.lastPage ?? 0);
     measureHeaderWidth = (columnDef) => {
         const label = columnDef.header;
-        if (typeof label === 'string' && localStorage) {
+        if (typeof label === 'string' && browser) {
             const extraWidth = columnDef.allowSorting ? SORTING_ICON_WIDTH : 0;
             const canvasContext = getCanvasContext();
             if (canvasContext) {
@@ -1195,7 +1144,7 @@ export class TableContext {
         return 0;
     };
     autoResize = async (columnDef) => {
-        if (!localStorage) {
+        if (!browser) {
             return;
         }
         const ctx = getCanvasContext();
@@ -1208,16 +1157,13 @@ export class TableContext {
         if (columnDef.accessorFn) {
             for (let i = currentPageContents.length - 1; i > -1; i--) {
                 const row = currentPageContents[i];
-                const label = ((await columnDef.accessorFn?.(row, i)) ?? Promise.resolve())?.toString() ?? '';
-                const currentWidth = ctx.measureText(label).width;
+                const label = (await columnDef.accessorFn(row, i))?.toString() ?? '';
+                const currentWidth = ctx?.measureText(label).width ?? 0;
                 maxWidth = Math.max(maxWidth, currentWidth);
             }
         }
         else {
-            const currentWidth = columnDef.width ??
-                ctx.measureText(
-                // TODO
-                (typeof columnDef.header == 'string' ? columnDef.header : 'TODO') ?? '-').width;
+            const currentWidth = columnDef.width;
             maxWidth = Math.max(maxWidth, currentWidth);
         }
         this.columnSizing[colId] = maxWidth + 32; //standard extra cell padding
@@ -1229,16 +1175,17 @@ export class TableContext {
         if (!this.dragTarget || !dropTarget) {
             return;
         }
+        const dragTarget = this.dragTarget;
         const newDefs = this.columnDefs.concat();
         newDefs
             .sort((a, b) => a.index - b.index)
             .forEach((element, index) => {
             element.index = index;
         });
-        const originalIndex = newDefs.findIndex((it) => it.id === this.dragTarget?.id);
+        const originalIndex = newDefs.findIndex((it) => it.id === dragTarget.id);
         if (originalIndex === -1) {
-            console.warn("couldn't find target's original index");
-            return newDefs;
+            console.warn("couldn't find target's original index", dragTarget);
+            return;
         }
         newDefs.splice(originalIndex, 1);
         const isDraggedToFirst = dropTarget.id === `${this.tableName}-column-settings-top-anchor` ||
@@ -1283,6 +1230,8 @@ export class TableContext {
         // this.forceVisibilityUpdate();
     };
     copyHighlightedRowsToClipboard = async () => {
+        // HACK clipboard does not exist in http environments
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (!navigator.clipboard) {
             alert('cannot copy in an insecure connection');
             return;
@@ -1290,6 +1239,8 @@ export class TableContext {
         return this._performRowCopy(await this.getHighlightedRowData());
     };
     copyDataToClipboard = async () => {
+        // HACK clipboard does not exist in http environments
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (!navigator.clipboard) {
             alert('cannot copy in an insecure connection');
             return;
@@ -1299,13 +1250,16 @@ export class TableContext {
     _performRowCopy = async ({ items, indicesByItem, focusedElementData, affectedColumns }) => {
         const focusedColumnIds = affectedColumns.map((it) => encapsulate(typeof it.header === 'string' ? it.header : it.id));
         const value = await (async () => {
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
             const selectColumns = new Map();
             for (let i = affectedColumns.length - 1; i > -1; i--) {
                 const columnDef = affectedColumns[i];
                 if (columnDef instanceof SelectDef) {
                     const item = items[i];
-                    selectColumns.set(i, await (columnDef.getSpecificOptions?.(item, indicesByItem.get(item)) ??
-                        columnDef.getOptions()));
+                    const defOptions = indicesByItem.get(item);
+                    selectColumns.set(i, await (defOptions
+                        ? (columnDef.getSpecificOptions?.(item, defOptions) ?? columnDef.getOptions())
+                        : columnDef.getOptions()));
                 }
             }
             const separator = this.commaSeparatedCopy ? ',' : '\t';
@@ -1315,7 +1269,7 @@ export class TableContext {
             if (focusedElementData.length === 1 && focusedElementData[0].length === 1) {
                 if (selectColumns.has(0)) {
                     const columnOptions = selectColumns.get(0);
-                    const value = columnOptions.find((it) => it.value === focusedElementData[0][0])?.label ??
+                    const value = columnOptions?.find((it) => it.value === focusedElementData[0][0])?.label ??
                         focusedElementData[0][0]?.toString() ??
                         '';
                     return value;
@@ -1333,7 +1287,10 @@ export class TableContext {
                 }
                 if (selectColumns.has(i)) {
                     const columnOptions = selectColumns.get(i);
-                    const value = columnOptions.find((it) => it.value === toCopy)?.label ??
+                    if (dev && !columnOptions) {
+                        console.warn(`could not find colum with index ${i}`);
+                    }
+                    const value = columnOptions?.find((it) => it.value === toCopy)?.label ??
                         toCopy?.toString() ??
                         '';
                     return encapsulate(value);
@@ -1346,7 +1303,7 @@ export class TableContext {
                 .join(separator))
                 .join('\n')}`;
         })();
-        navigator.clipboard.writeText(value ?? '');
+        navigator.clipboard.writeText(value).catch(devCatch);
     };
     startFocus = (coords) => {
         this.isMousingDown = true;
@@ -1356,9 +1313,11 @@ export class TableContext {
         this.focusStart = { ...coords };
         this.focusEnd = { ...coords };
         if (startEditing) {
-            tick().then(() => {
+            tick()
+                .then(() => {
                 this.focusStartIsBeingEdited = true;
-            });
+            })
+                .catch(devCatch);
         }
     };
     unfocus = () => {
@@ -1449,7 +1408,7 @@ export class TableContext {
             return;
         }
         if (!this.focusEnd) {
-            return null;
+            return;
         }
         const visibility = this.columnVisibility;
         const columnDefs = this.columnDefs;
@@ -1485,8 +1444,9 @@ export class TableContext {
         if (!this.allowCopy) {
             return;
         }
-        if (!this.focusEnd)
-            return null;
+        if (!this.focusEnd) {
+            return;
+        }
         const current = this.focusEnd;
         const visibility = this.columnVisibility;
         const columnDefs = this.columnDefs;
@@ -1503,8 +1463,9 @@ export class TableContext {
         this.focusEnd = current;
     };
     moveToEnd = () => {
-        if (!this.focusStart)
+        if (!this.focusStart) {
             return;
+        }
         const visibility = this.columnVisibility;
         const columnDefs = this.columnDefs;
         const current = this.focusStart.column;
@@ -1546,22 +1507,21 @@ export class TableContext {
         }
     };
     setFocusLeft = () => {
-        if (!this.focusStart)
+        if (!this.focusStart) {
             return;
-        if (this.focusStart != null) {
-            const visibility = this.columnVisibility;
-            const columnDefs = this.columnDefs;
-            let index = this.focusStart.column - 1;
-            while (index > -1) {
-                const newId = columnDefs[index].id;
-                if (newId && visibility[newId] !== false) {
-                    this.moveFocus({ ...this.focusStart, id: newId, column: index });
-                    return;
-                }
-                --index;
+        }
+        const visibility = this.columnVisibility;
+        const columnDefs = this.columnDefs;
+        let index = this.focusStart.column - 1;
+        while (index > -1) {
+            const newId = columnDefs[index].id;
+            if (newId && visibility[newId] !== false) {
+                this.moveFocus({ ...this.focusStart, id: newId, column: index });
+                return;
             }
-            //otherwise return without doing anything
+            --index;
         }
+        //otherwise return without doing anything
     };
     moveFocusRight = () => {
         if (!this.allowCopy) {
@@ -1583,23 +1543,22 @@ export class TableContext {
         }
     };
     setFocusRight = () => {
-        if (!this.focusStart)
+        if (!this.focusStart) {
             return;
-        if (this.focusStart != null) {
-            const visibility = this.columnVisibility;
-            const columnDefs = this.columnDefs;
-            const upperBounds = columnDefs.length;
-            let index = this.focusStart.column + 1;
-            while (index < upperBounds) {
-                const newId = columnDefs[index].id;
-                if (newId && visibility[newId] !== false) {
-                    this.moveFocus({ ...this.focusStart, id: newId, column: index });
-                    return;
-                }
-                ++index;
+        }
+        const visibility = this.columnVisibility;
+        const columnDefs = this.columnDefs;
+        const upperBounds = columnDefs.length;
+        let index = this.focusStart.column + 1;
+        while (index < upperBounds) {
+            const newId = columnDefs[index].id;
+            if (newId && visibility[newId] !== false) {
+                this.moveFocus({ ...this.focusStart, id: newId, column: index });
+                return;
             }
-            //otherwise return without doing anything
+            ++index;
         }
+        //otherwise return without doing anything
     };
     endFocus = (coords) => {
         if (this.isMousingDown) {
@@ -1653,18 +1612,12 @@ export class TableContext {
     // };
     setSelectedPreset = (preset) => {
         this.columnDefs = preset.columnDefs;
-        if (preset.sortingState) {
-            if (!this.paginationRepo?.updateSorting) {
-                console.warn('no sorting state found');
-            }
-            this.paginationRepo?.updateSorting?.(preset.sortingState);
-        }
-        if (preset.visibilityState) {
-            this.columnVisibility = preset.visibilityState;
-        }
-        if (preset.columnPinningState) {
-            this.columnPinning = preset.columnPinningState;
+        if (!this.paginationRepo?.updateSorting) {
+            console.warn('no sorting state found');
         }
+        this.paginationRepo?.updateSorting?.(preset.sortingState);
+        this.columnVisibility = preset.visibilityState;
+        this.columnPinning = preset.columnPinningState;
         this.selectedPreset = preset;
         localStorage.setItem(`${this.userId}-${this.tableName}-selected-preset-name`, preset.name);
     };
@@ -1675,7 +1628,7 @@ export class TableContext {
         const visibilityState = this.columnVisibility;
         const columnPinningState = this.columnPinning;
         const columnDefs = this.columnDefs;
-        const sortingState = (this.paginationRepo && this.paginationRepo.sorting) || [];
+        const sortingState = this.paginationRepo?.sorting || [];
         const newPreset = { columnDefs, name, visibilityState, columnPinningState, sortingState };
         const lowercasePresetname = name.toLocaleLowerCase();
         const indexToReplace = this.columnPresets.findIndex((oldPreset) => oldPreset.name.toLocaleLowerCase() === lowercasePresetname);
@@ -1711,12 +1664,9 @@ export class TableContext {
     };
     // #region private methods
     createRow(item, index, unsortedIndex) {
-        if (!item) {
-            throw new Error(`No Item was found at index ${index} (unsorted index ${unsortedIndex})`);
-        }
         const row = {
             getValue: async (key) => {
-                const gotValue = this.columnDefsById.get(key).accessorFn?.(item, unsortedIndex);
+                const gotValue = await this.columnDefsById.get(key)?.accessorFn?.(item, unsortedIndex);
                 if (gotValue !== undefined) {
                     return gotValue;
                 }
@@ -1765,10 +1715,13 @@ export class TableContext {
         };
         const makeCellFromId = (columnId) => {
             const def = this.columnDefsById.get(columnId);
+            if (!def) {
+                throw new Error(`Could not make cell from id ${columnId}: Coloumn Def was not found`);
+            }
             return makeRow(def);
         };
-        const leftVisibleCells = $derived([...(this.columnPinning.left?.keys() ?? [])].map(makeCellFromId) ?? []);
-        const rightVisibleCells = $derived([...(this.columnPinning.right?.keys() ?? [])].map(makeCellFromId) ?? []);
+        const leftVisibleCells = $derived([...(this.columnPinning.left?.keys() ?? [])].map(makeCellFromId));
+        const rightVisibleCells = $derived([...(this.columnPinning.right?.keys() ?? [])].map(makeCellFromId));
         const centerVisibleCells = $derived(this.columnDefs
             .filter((it) => {
             return !(this.columnPinning.left?.has(it.id) || this.columnPinning.right?.has(it.id));
@@ -1777,9 +1730,6 @@ export class TableContext {
         return row;
     }
     columnDefReturnsTextValue = (it) => {
-        if (!this.dataRepo) {
-            return false;
-        }
         return ('index' in it &&
             this.columnVisibility[it.id] !== false &&
             !uncopyableColumns.has(it.columnType));
@@ -1809,8 +1759,9 @@ export class TableContext {
             console.warn('no focusEnd found');
             return;
         }
+        const focusEnd = this.focusEnd;
         const rows = this.paginationRowModel.rows;
-        const endRowIndex = rows.findIndex((row) => row.visibleIndex === this.focusEnd.row);
+        const endRowIndex = rows.findIndex((row) => row.visibleIndex === focusEnd.row);
         this.focusEnd = {
             ...this.focusEnd,
             row: rows[Math.max(Math.min(endRowIndex + offset, rows.length - 1), 0)].visibleIndex
@@ -1819,11 +1770,12 @@ export class TableContext {
     _moveFocusRow(offset) {
         if (!this.focusStart) {
             console.warn('no focusStart found');
-            return null;
+            return;
         }
+        const focusStart = this.focusStart;
         const newEndRowIndex = (() => {
             const rows = this.paginationRowModel.rows;
-            const endRowIndex = rows.findIndex((row) => row.visibleIndex === this.focusStart.row);
+            const endRowIndex = rows.findIndex((row) => row.visibleIndex === focusStart.row);
             return rows[Math.max(Math.min(endRowIndex + offset, rows.length - 1), 0)].visibleIndex;
         })();
         this.moveFocus({ ...this.focusStart, row: newEndRowIndex });
@@ -1837,9 +1789,9 @@ export class TableContext {
         const { row: startRowIndexId, column: startColumnIndex } = this.focusStart;
         const { row: endRowIndexId, column: endColumnIndex } = this.focusEnd;
         const model = this.sortedRowModel;
-        const startRowIndex = model?.rows.findIndex((row) => row.visibleIndex === startRowIndexId) ?? -1;
-        const endRowIndex = model?.rows.findIndex((row) => row.visibleIndex === endRowIndexId) ?? -1;
-        if (!model || startRowIndex == -1 || endRowIndex == -1) {
+        const startRowIndex = model.rows.findIndex((row) => row.visibleIndex === startRowIndexId);
+        const endRowIndex = model.rows.findIndex((row) => row.visibleIndex === endRowIndexId);
+        if (startRowIndex == -1 || endRowIndex == -1) {
             return;
         }
         const minRowIndex = Math.min(startRowIndex, endRowIndex);
@@ -1866,17 +1818,15 @@ export class TableContext {
         this.focusedColumnIds = affectedColumns;
     }
     async getHighlightedRowData() {
-        if (!this.dataRepo) {
-            throw new Error('No data found');
-        }
         const affectedColumns = this.columnDefs.filter(this.columnDefReturnsTextValue);
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
         const indices = new Map();
         const selectedRows = [...this.highlightedItems.values()];
         for (const item of selectedRows) {
             const rowIndex = this.sortedData.indexOf(item);
             if (rowIndex == -1) {
-                console.warn(`row index for highlighted row data not found`);
-                continue;
+                // eslint-disable-next-line no-debugger
+                debugger;
             }
             indices.set(item, rowIndex);
         }
@@ -1885,7 +1835,7 @@ export class TableContext {
         const rowLength = selectedRows.length;
         for (let rowIndex = 0; rowIndex < rowLength; rowIndex++) {
             const item = selectedRows[rowIndex];
-            const key = this.selectionExtractor?.(item);
+            const key = this.selectionExtractor(item);
             selectedCells[rowIndex] = [];
             const targetRow = selectedCells[rowIndex];
             const colLength = affectedColumns.length;
@@ -1929,9 +1879,9 @@ export class TableContext {
             const { row: endRowIndexId, column: endColumnIndex } = this.focusEnd;
             // const model = this._currentPageData;
             const model = this.paginationRowModel;
-            const startRowIndex = model?.rows.findIndex((row) => row.visibleIndex === startRowIndexId) ?? -1;
-            const endRowIndex = model?.rows.findIndex((row) => row.visibleIndex === endRowIndexId) ?? -1;
-            if (!this._currentPageData?.length || startRowIndex == -1 || endRowIndex == -1) {
+            const startRowIndex = model.rows.findIndex((row) => row.visibleIndex === startRowIndexId);
+            const endRowIndex = model.rows.findIndex((row) => row.visibleIndex === endRowIndexId);
+            if (!this._currentPageData.length || startRowIndex == -1 || endRowIndex == -1) {
                 throw new Error(`copy was missing one of the two indices. First: ${startRowIndex}, second: ${endRowIndex}`);
             }
             const minRowIndex = Math.min(startRowIndex, endRowIndex);
@@ -1958,7 +1908,7 @@ export class TableContext {
             const rowLength = selectedRows.length;
             for (let rowIndex = 0; rowIndex < rowLength; rowIndex++) {
                 const item = selectedRows[rowIndex];
-                const key = this.selectionExtractor?.(item);
+                const key = this.selectionExtractor(item);
                 selectedCells[rowIndex] = [];
                 const targetRow = selectedCells[rowIndex];
                 const colLength = affectedColumns.length;
@@ -1996,6 +1946,7 @@ export class TableContext {
                 affectedColumns
             };
         }
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
         return { items: [], indicesByItem: new Map(), focusedElementData: [], affectedColumns: [] };
     }
     updateDefsBasedOnPinning = () => {
@@ -2023,6 +1974,7 @@ export class TableContext {
         return allDefs;
     };
     assertNoDuplicateIds() {
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
         const foundIds = new Set();
         this.defaultColumnDefs.defs.forEach((def) => {
             if (foundIds.has(def.id)) {
@@ -2031,12 +1983,14 @@ export class TableContext {
             foundIds.add(def.id);
         });
     }
+    // FIXME
+    // eslint-disable-next-line @typescript-eslint/require-await
     async setupDefaultColumnDefs() {
         // const helper = createColumnHelper<T>();
         this.assertNoDuplicateIds();
-        const adjustedDefsPromises = this.defaultColumnDefs.defs.map(async (def) => {
+        const adjustedDefsPromises = this.defaultColumnDefs.defs.map((def) => {
             if (def instanceof AccessorDef) {
-                if (def.allowFiltering == false) {
+                if (!def.allowFiltering) {
                     if (def.debug) {
                         console.log(`${def.id}: does not allow filtering`, def);
                     }
@@ -2093,7 +2047,7 @@ export class TableContext {
             else if (
             // this.paginationRepo?.paginationType == PaginationType.Local &&
             !def.filterFn &&
-                def.allowFiltering !== false) {
+                def.allowFiltering) {
                 if (def instanceof DisplayDef) {
                     if (def.debug) {
                         console.log(`${def.id}: is a display def`, def);
@@ -2158,7 +2112,7 @@ export class TableContext {
             }
             return def;
         });
-        const adjustedDefs = (await Promise.all(adjustedDefsPromises))
+        const adjustedDefs = adjustedDefsPromises
             .sort((a, b) => a.index - b.index)
             .map((def, index) => {
             def.index = index;
@@ -2199,7 +2153,7 @@ export class TableContext {
             left: new Map(this.columnPinning.left &&
                 this.columnDefs
                     .filter((col) => {
-                    this.columnPinning.left?.has(col.id);
+                    return this.columnPinning.left?.has(col.id);
                 })
                     .map((col, index) => [col.id, index])),
             // eslint-disable-next-line svelte/prefer-svelte-reactivity
@@ -2209,7 +2163,7 @@ export class TableContext {
                     .map((col, index) => [col.id, index]))
         }; // TODO
     }
-    getToggleSortingHandler = (def) => (e) => {
+    getToggleSortingHandler = (def) => () => {
         this.paginationRepo?.updateSorting?.((state) => {
             const newState = state.concat();
             const index = newState.findIndex((it) => it.id === def.id);
@@ -2231,6 +2185,8 @@ export class TableContext {
             return newState;
         });
     };
+    // FIXME
+    // eslint-disable-next-line @typescript-eslint/require-await
     async reassignDefsToPresets(presets) {
         const adjustedDefs = this.columnDefs;
         const asMap = columnDefsToMap(adjustedDefs);
@@ -2279,6 +2235,7 @@ function areDefsEquivalent(newColumnDefs, oldColumnDefs) {
     });
 }
 function columnDefsToMap(defs) {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
     const map = new Map();
     defs.forEach((def) => {
         map.set(def.id, def);
@@ -2299,8 +2256,8 @@ function encapsulate(value) {
 }
 function generateTableOptions(contextObj) {
     const _pagination = $derived.by(() => {
-        void contextObj.paginationRepo?.paginationState?.pageSize;
-        void contextObj.paginationRepo?.paginationState?.pageIndex;
+        void contextObj.paginationRepo?.paginationState.pageSize;
+        void contextObj.paginationRepo?.paginationState.pageIndex;
         return contextObj.paginationRepo?.paginationState;
     });
     const makeHeader = (def) => {
@@ -2318,7 +2275,6 @@ function generateTableOptions(contextObj) {
         });
         let originalWidth = 0;
         let mouseStartingPoint = 0;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         function addOverrideResizeHandler(e) {
             originalWidth = def.width;
             mouseStartingPoint = e.clientX;
@@ -2329,7 +2285,7 @@ function generateTableOptions(contextObj) {
         function onResize(e) {
             def.width = originalWidth - (mouseStartingPoint - e.clientX);
         }
-        function removeOverrideResizeHandler(e) {
+        function removeOverrideResizeHandler() {
             def.isResizing = false;
             window.removeEventListener('mousemove', onResize);
         }