EXPERIMENT: Dramatically improve table scrolling performance

mathesar_ui/src/components/cell-fabric/CellFabric.svelte

@@ -20,6 +20,7 @@
     | ((recordId: string, recordSummary: string) => void)
     | undefined = undefined;
   export let isActive = false;
+  export let isEditMode = false;
   export let disabled = false;
   export let showAsSkeleton = false;
   export let horizontalAlignment: HorizontalAlignment | undefined = undefined;
@@ -47,6 +48,7 @@
     {...props}
     {columnFabric}
     {isActive}
+    {isEditMode}
     {disabled}
     {isIndependentOfSheet}
     {horizontalAlignment}
@@ -61,6 +63,8 @@
     bind:value
     on:movementKeyDown
     on:update
+    on:enterEditMode
+    on:exitEditMode
   />
 
   <div class="loader">

mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte

@@ -24,6 +24,7 @@
   export let isActive: Props['isActive'];
   export let value: Props['value'];
   export let disabled: Props['disabled'];
+  export let isEditMode = false;
   export let multiLineTruncate = false;
   export let formatValue: CellValueFormatter<Value> | undefined = undefined;
   export let horizontalAlignment: HorizontalAlignment | undefined = undefined;
@@ -34,7 +35,6 @@
   export let useTabularNumbers = false;
 
   let cellRef: HTMLElement;
-  let isEditMode = false;
   let lastSavedValue: Value | undefined | null = undefined;
 
   $: formattedValue = formatValue?.(value) ?? value;
@@ -59,12 +59,12 @@
 
   function setModeToEdit() {
     if (!disabled) {
-      isEditMode = true;
+      dispatch('enterEditMode');
     }
   }
 
   function resetEditMode() {
-    isEditMode = false;
+    dispatch('exitEditMode');
   }
 
   function revertValue() {

mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte

@@ -9,6 +9,7 @@
   export let isActive: $$Props['isActive'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
+  export let isEditMode = false;
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
   export let showTruncationPopover: $$Props['showTruncationPopover'] = false;
   export let type: $$Props['type'];
@@ -22,6 +23,7 @@
 <SteppedInputCell
   bind:value
   {isActive}
+  {isEditMode}
   {disabled}
   highlightSubstringMatches={false}
   {isIndependentOfSheet}
@@ -33,6 +35,8 @@
   on:movementKeyDown
   on:mouseenter
   on:update
+  on:enterEditMode
+  on:exitEditMode
 >
   <DateTimeInput
     focusOnMount={true}

mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte

@@ -9,6 +9,7 @@
   export let isActive: $$Props['isActive'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
+  export let isEditMode = false;
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
   export let showTruncationPopover: $$Props['showTruncationPopover'] = false;
   export let formatter: $$Props['formatter'];
@@ -19,6 +20,7 @@
 <SteppedInputCell
   bind:value
   {isActive}
+  {isEditMode}
   {disabled}
   {isIndependentOfSheet}
   {showTruncationPopover}
@@ -30,6 +32,8 @@
   on:movementKeyDown
   on:mouseenter
   on:update
+  on:enterEditMode
+  on:exitEditMode
 >
   <FormattedInput
     focusOnMount={true}

mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte

@@ -9,6 +9,7 @@
   export let isActive: $$Props['isActive'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
+  export let isEditMode = false;
   export let searchValue: $$Props['searchValue'] = undefined;
   export let formatterOptions: $$Props['formatterOptions'];
   export let formatForDisplay: $$Props['formatForDisplay'];
@@ -19,6 +20,7 @@
 <SteppedInputCell
   bind:value
   {isActive}
+  {isEditMode}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
@@ -31,6 +33,8 @@
   on:movementKeyDown
   on:mouseenter
   on:update
+  on:enterEditMode
+  on:exitEditMode
 >
   <MoneyCellInput
     focusOnMount={true}

mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte

@@ -12,6 +12,7 @@
   export let isActive: $$Props['isActive'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
+  export let isEditMode = false;
   export let searchValue: $$Props['searchValue'] = undefined;
   export let formatterOptions: $$Props['formatterOptions'];
   export let horizontalAlignment: HorizontalAlignment = 'right';
@@ -23,6 +24,7 @@
 <SteppedInputCell
   bind:value
   {isActive}
+  {isEditMode}
   {disabled}
   {isIndependentOfSheet}
   {showTruncationPopover}
@@ -35,6 +37,8 @@
   on:movementKeyDown
   on:mouseenter
   on:update
+  on:enterEditMode
+  on:exitEditMode
 >
   <NumberCellInput
     focusOnMount={true}

mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte

@@ -10,6 +10,7 @@
   export let isActive: $$Props['isActive'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
+  export let isEditMode = false;
   export let searchValue: $$Props['searchValue'] = undefined;
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
   export let showTruncationPopover: $$Props['showTruncationPopover'] = false;
@@ -33,6 +34,7 @@
 <SteppedInputCell
   bind:value
   {isActive}
+  {isEditMode}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
@@ -43,6 +45,8 @@
   on:movementKeyDown
   on:mouseenter
   on:update
+  on:enterEditMode
+  on:exitEditMode
 >
   <TextArea
     focusOnMount={true}

mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte

@@ -9,6 +9,7 @@
   export let isActive: $$Props['isActive'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
+  export let isEditMode = false;
   export let searchValue: $$Props['searchValue'] = undefined;
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
   export let showTruncationPopover: $$Props['showTruncationPopover'] = false;
@@ -20,6 +21,7 @@
 <SteppedInputCell
   bind:value
   {isActive}
+  {isEditMode}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
@@ -29,6 +31,8 @@
   on:movementKeyDown
   on:mouseenter
   on:update
+  on:enterEditMode
+  on:exitEditMode
 >
   <TextInput
     focusOnMount={true}

mathesar_ui/src/components/cell-fabric/data-types/components/typeDefinitions.ts

@@ -37,6 +37,7 @@ export type CellValueFormatter<T> = (
 export interface CellTypeProps<Value> {
   value: Value | null | undefined;
   isActive: boolean;
+  isEditMode?: boolean;
   disabled: boolean;
   searchValue?: unknown;
   isProcessing: boolean;

mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte

@@ -15,6 +15,7 @@
   export let isActive: $$Props['isActive'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
+  export let isEditMode = false;
   export let searchValue: $$Props['searchValue'] = undefined;
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
   export let showTruncationPopover: $$Props['showTruncationPopover'] = false;
@@ -23,6 +24,7 @@
 <SteppedInputCell
   bind:value
   {isActive}
+  {isEditMode}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
@@ -32,6 +34,8 @@
   on:movementKeyDown
   on:mouseenter
   on:update
+  on:enterEditMode
+  on:exitEditMode
 >
   <span slot="content" let:matchParts>
     <CellValue {value}>

mathesar_ui/src/components/sheet/Sheet.svelte

@@ -65,13 +65,15 @@
   ));
 
   const selectionInProgress = writable(false);
+  const editingCellId = writable<string | undefined>(undefined);
   const stores = {
     columnStyleMap: writable(columnStyleMap),
     rowWidth: writable(rowWidth),
     horizontalScrollOffset: writable(horizontalScrollOffset),
     scrollOffset: writable(scrollOffset),
     paddingRight: writable(paddingRight),
     selectionInProgress,
+    editingCellId,
   };
 
   // Setting these values in stores for reactivity in context
@@ -97,6 +99,9 @@
       setScrollOffset: (offset) => {
         scrollOffset = offset;
       },
+      setEditingCellId: (cellId) => {
+        editingCellId.set(cellId);
+      },
     },
   });
 

mathesar_ui/src/components/sheet/utils.ts

@@ -1,5 +1,5 @@
 import { getContext, setContext } from 'svelte';
-import type { Readable } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
 
 import {
   DEFAULT_COLUMN_WIDTH_PX,
@@ -21,6 +21,7 @@ export interface SheetContextStores<SheetColumnIdentifierKey> {
   scrollOffset: Readable<number>;
   paddingRight: Readable<number>;
   selectionInProgress: Readable<boolean>;
+  editingCellId: Writable<string | undefined>;
 }
 
 export interface SheetContext<SheetColumnIdentifierKey> {
@@ -34,6 +35,7 @@ export interface SheetContext<SheetColumnIdentifierKey> {
     resetColumnWidth: (columnIdentifierKey: SheetColumnIdentifierKey) => void;
     setHorizontalScrollOffset: (offset: number) => void;
     setScrollOffset: (offset: number) => void;
+    setEditingCellId: (cellId: string | undefined) => void;
   };
 }
 

mathesar_ui/src/components/sheet/virtual-list/listUtils.ts

@@ -222,6 +222,7 @@ function getItemStyle(props: Props, index: number): Item['style'] {
 
 function getItemsInfo(props: Props): ItemInfo {
   const { itemKey, itemCount, isScrolling } = props;
+
   const [startIndex, stopIndex] = getRangeToRender(props);
   const items: Item[] = [];
   if (itemCount > 0) {

mathesar_ui/src/systems/data-explorer/result-pane/ExplorationResults.svelte

@@ -120,7 +120,7 @@
         itemSize={() => ROW_HEIGHT_PX}
         let:items
       >
-        {#each items as item (item.key)}
+        {#each items as item, i (i)}
           {@const row = arrayIndex(rows, item.index)}
           {@const rowSelectionId = (row && getRowSelectionId(row)) ?? ''}
           {@const isSelected = $selection.rowIds.has(rowSelectionId)}

mathesar_ui/src/systems/table-view/Body.svelte

@@ -63,7 +63,7 @@
       let:api
     >
       <ScrollAndRowHeightHandler {api} />
-      {#each items as item (item.key)}
+      {#each items as item, i (i)}
         {@const shouldRender = !(
           isPlaceholderRecordRow($displayRowDescriptors[item.index].row) &&
           !$canInsertRecords

mathesar_ui/src/systems/table-view/row/RowCell.svelte

@@ -13,6 +13,7 @@
   import { makeCellId } from '@mathesar/components/sheet/cellIds';
   import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
   import { handleKeyboardEventOnCell } from '@mathesar/components/sheet/sheetKeyboardUtils';
+  import { getSheetContext } from '@mathesar/components/sheet/utils';
   import type { RpcError } from '@mathesar/packages/json-rpc-client-builder';
   import {
     type CellKey,
@@ -42,6 +43,9 @@
   export let value: unknown = undefined;
   export let canUpdateRecords: boolean;
 
+  const { stores, api } = getSheetContext();
+  const { editingCellId } = stores;
+
   $: effectiveProcessedColumn = isProvisionalRecordRow(row)
     ? processedColumn.withoutEnhancedPkCell()
     : processedColumn;
@@ -100,6 +104,14 @@
     await setValue(e.detail.value);
     focus();
   }
+
+  function handleEnterEditMode() {
+    api.setEditingCellId(cellId);
+  }
+
+  function handleExitEditMode() {
+    api.setEditingCellId(undefined);
+  }
 </script>
 
 <SheetDataCell
@@ -126,6 +138,7 @@
   <CellFabric
     columnFabric={effectiveProcessedColumn}
     {isActive}
+    isEditMode={cellId === $editingCellId}
     {value}
     {isProcessing}
     {canViewLinkedEntities}
@@ -149,6 +162,8 @@
     on:movementKeyDown={({ detail }) =>
       handleKeyboardEventOnCell(detail.originalEvent, selection)}
     on:update={valueUpdated}
+    on:enterEditMode={handleEnterEditMode}
+    on:exitEditMode={handleExitEditMode}
     horizontalAlignment={column.primary_key ? 'left' : undefined}
     lightText={hasError || isProcessing}
   />