From 6c67004e2406c0953e1f6692a381d7bf80ea0ec3 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 12 Jul 2023 20:26:26 -0400
Subject: [PATCH 01/85] Begin scaffolding new Selection data structure

---
 mathesar_ui/.eslintrc.cjs                     |   1 +
 mathesar_ui/src/components/sheet/cellIds.ts   |  24 ++
 .../components/sheet/selection/IdSequence.ts  |  50 ++++
 .../src/components/sheet/selection/Plane.ts   |  72 ++++++
 .../components/sheet/selection/Selection.ts   | 243 ++++++++++++++++++
 .../components/sheet/tests/cellIds.test.ts    |  27 ++
 .../src/utils/__tests__/iterUtils.test.ts     |  21 ++
 mathesar_ui/src/utils/iterUtils.ts            |  14 +
 8 files changed, 452 insertions(+)
 create mode 100644 mathesar_ui/src/components/sheet/cellIds.ts
 create mode 100644 mathesar_ui/src/components/sheet/selection/IdSequence.ts
 create mode 100644 mathesar_ui/src/components/sheet/selection/Plane.ts
 create mode 100644 mathesar_ui/src/components/sheet/selection/Selection.ts
 create mode 100644 mathesar_ui/src/components/sheet/tests/cellIds.test.ts
 create mode 100644 mathesar_ui/src/utils/__tests__/iterUtils.test.ts
 create mode 100644 mathesar_ui/src/utils/iterUtils.ts

diff --git a/mathesar_ui/.eslintrc.cjs b/mathesar_ui/.eslintrc.cjs
index 5487252656..7de5aaf976 100644
--- a/mathesar_ui/.eslintrc.cjs
+++ b/mathesar_ui/.eslintrc.cjs
@@ -21,6 +21,7 @@ module.exports = {
   rules: {
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     'no-console': ['warn', { allow: ['error'] }],
+    'generator-star-spacing': 'off',
     '@typescript-eslint/explicit-member-accessibility': 'off',
     '@typescript-eslint/ban-ts-comment': [
       'error',
diff --git a/mathesar_ui/src/components/sheet/cellIds.ts b/mathesar_ui/src/components/sheet/cellIds.ts
new file mode 100644
index 0000000000..40c8297dea
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cellIds.ts
@@ -0,0 +1,24 @@
+const CELL_ID_DELIMITER = '-';
+
+/**
+ * We can serialize a cell id this way only because we're confident that the
+ * rowId will never contain the delimiter. Some columnIds _do_ contain
+ * delimiters (e.g. in the Data Explorer), but that's okay because we can still
+ * separate the values based on the first delimiter.
+ */
+export function makeCellId(rowId: string, columnId: string): string {
+  return `${rowId}${CELL_ID_DELIMITER}${columnId}`;
+}
+
+export function parseCellId(cellId: string): {
+  rowId: string;
+  columnId: string;
+} {
+  const delimiterIndex = cellId.indexOf(CELL_ID_DELIMITER);
+  if (delimiterIndex === -1) {
+    throw new Error(`Unable to parse cell id without a delimiter: ${cellId}.`);
+  }
+  const rowId = cellId.slice(0, delimiterIndex);
+  const columnId = cellId.slice(delimiterIndex + 1);
+  return { rowId, columnId };
+}
diff --git a/mathesar_ui/src/components/sheet/selection/IdSequence.ts b/mathesar_ui/src/components/sheet/selection/IdSequence.ts
new file mode 100644
index 0000000000..85eb73ebe6
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/IdSequence.ts
@@ -0,0 +1,50 @@
+import { ImmutableMap } from '@mathesar/component-library';
+
+export default class IdSequence<Id> {
+  private readonly values: Id[];
+
+  /** Maps the id value to its index */
+  private readonly indexLookup: ImmutableMap<Id, number>;
+
+  /**
+   * @throws Error if duplicate values are provided
+   */
+  constructor(values: Id[]) {
+    this.values = values;
+    this.indexLookup = new ImmutableMap(
+      values.map((value, index) => [value, index]),
+    );
+    if (new Set(values).size !== values.length) {
+      throw new Error('Duplicate values are not allowed within an IdSequence.');
+    }
+  }
+
+  get length(): number {
+    return this.values.length;
+  }
+
+  /**
+   * Return an iterator of all values between the two provided values,
+   * inclusive. Iteration occurs in the order stored. The two provided values
+   * may be present in any order.
+   *
+   * @throws an Error if either value is not present in the sequence
+   */
+  range(a: Id, b: Id): Iterable<Id> {
+    const aIndex = this.indexLookup.get(a);
+    const bIndex = this.indexLookup.get(b);
+
+    if (aIndex === undefined || bIndex === undefined) {
+      throw new Error('Id value not found within sequence.');
+    }
+
+    const startIndex = Math.min(aIndex, bIndex);
+    const endIndex = Math.max(aIndex, bIndex);
+
+    return this.values.slice(startIndex, endIndex + 1);
+  }
+
+  [Symbol.iterator](): Iterator<Id> {
+    return this.values[Symbol.iterator]();
+  }
+}
diff --git a/mathesar_ui/src/components/sheet/selection/Plane.ts b/mathesar_ui/src/components/sheet/selection/Plane.ts
new file mode 100644
index 0000000000..cec6abe732
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/Plane.ts
@@ -0,0 +1,72 @@
+import { map } from 'iter-tools';
+
+import { cartesianProduct } from '@mathesar/utils/iterUtils';
+import type IdSequence from './IdSequence';
+import { makeCellId } from '../cellIds';
+
+function makeCells(
+  rowIds: Iterable<string>,
+  columnIds: Iterable<string>,
+): Iterable<string> {
+  return map(
+    ([rowId, columnId]) => makeCellId(rowId, columnId),
+    cartesianProduct(rowIds, columnIds),
+  );
+}
+
+export default class Plane {
+  readonly rowIds: IdSequence<string>;
+
+  readonly columnIds: IdSequence<string>;
+
+  readonly placeholderRowId: string | undefined;
+
+  constructor(
+    rowIds: IdSequence<string>,
+    columnIds: IdSequence<string>,
+    placeholderRowId: string | undefined,
+  ) {
+    this.rowIds = rowIds;
+    this.columnIds = columnIds;
+    this.placeholderRowId = placeholderRowId;
+  }
+
+  /**
+   * @returns an iterable of all the data cells in the plane. This does not
+   * include header cells or placeholder cells.
+   */
+  allDataCells(): Iterable<string> {
+    return makeCells(this.rowIds, this.columnIds);
+  }
+
+  /**
+   * @returns an iterable of all the data cells in the plane that are in or
+   * between the two given rows. This does not include header cells.
+   *
+   * @throws Error if the id of the placeholder row is specified because the
+   * placeholder row is not a data row.
+   */
+  dataCellsInRowRange(rowIdA: string, rowIdB: string): Iterable<string> {
+    return makeCells(this.rowIds.range(rowIdA, rowIdB), this.columnIds);
+  }
+
+  /**
+   * @returns an iterable of all the data cells in the plane that are in or
+   * between the two given columns. This does not include header cells or
+   * placeholder cells.
+   */
+  dataCellsInColumnRange(
+    columnIdA: string,
+    columnIdB: string,
+  ): Iterable<string> {
+    return makeCells(this.rowIds, this.columnIds.range(columnIdA, columnIdB));
+  }
+
+  get hasResultRows(): boolean {
+    return this.rowIds.length > 0;
+  }
+
+  get hasPlaceholder(): boolean {
+    return this.placeholderRowId !== undefined;
+  }
+}
diff --git a/mathesar_ui/src/components/sheet/selection/Selection.ts b/mathesar_ui/src/components/sheet/selection/Selection.ts
new file mode 100644
index 0000000000..44f70d27c4
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/Selection.ts
@@ -0,0 +1,243 @@
+import { first } from 'iter-tools';
+
+import { ImmutableSet } from '@mathesar/component-library';
+import type Plane from './Plane';
+import { parseCellId } from '../cellIds';
+
+export enum Direction {
+  Up = 'up',
+  Down = 'down',
+  Left = 'left',
+  Right = 'right',
+}
+
+interface Basis {
+  /**
+   * - `'dataCells'` means that the selection contains data cells. This is by
+   *   far the most common type of selection basis.
+   *
+   * - `'emptyColumns'` is used when the sheet has no rows. In this case we
+   *   still want to allow the user to select columns, so we use this basis.
+   *
+   * - `'placeholderCell'` is used when the user is selecting a cell in the
+   *   placeholder row. This is a special case because we don't want to allow
+   *   the user to select multiple cells in the placeholder row, and we also
+   *   don't want to allow selections that include cells in data rows _and_ the
+   *   placeholder row.
+   */
+  readonly type: 'dataCells' | 'emptyColumns' | 'placeholderCell';
+  readonly activeCellId: string | undefined;
+  readonly cellIds: ImmutableSet<string>;
+  readonly rowIds: ImmutableSet<string>;
+  readonly columnIds: ImmutableSet<string>;
+}
+
+function basisFromDataCells(
+  cellIds: Iterable<string>,
+  activeCellId?: string,
+): Basis {
+  const parsedCells = [...cellIds].map(parseCellId);
+  return {
+    type: 'dataCells',
+    activeCellId: activeCellId ?? first(cellIds),
+    cellIds: new ImmutableSet(cellIds),
+    columnIds: new ImmutableSet(parsedCells.map((cellId) => cellId.columnId)),
+    rowIds: new ImmutableSet(parsedCells.map((cellId) => cellId.rowId)),
+  };
+}
+
+function basisFromEmptyColumns(columnIds: Iterable<string>): Basis {
+  return {
+    type: 'emptyColumns',
+    activeCellId: undefined,
+    cellIds: new ImmutableSet(),
+    columnIds: new ImmutableSet(columnIds),
+    rowIds: new ImmutableSet(),
+  };
+}
+
+function basisFromZeroEmptyColumns(): Basis {
+  return basisFromEmptyColumns([]);
+}
+
+function basisFromPlaceholderCell(activeCellId: string): Basis {
+  return {
+    type: 'placeholderCell',
+    activeCellId,
+    cellIds: new ImmutableSet([activeCellId]),
+    columnIds: new ImmutableSet([parseCellId(activeCellId).columnId]),
+    rowIds: new ImmutableSet(),
+  };
+}
+
+export default class Selection {
+  private readonly plane: Plane;
+
+  private readonly basis: Basis;
+
+  constructor(plane: Plane, basis: Basis) {
+    this.plane = plane;
+    this.basis = basis;
+  }
+
+  get activeCellId() {
+    return this.basis.activeCellId;
+  }
+
+  get cellIds() {
+    return this.basis.cellIds;
+  }
+
+  get rowIds() {
+    return this.basis.rowIds;
+  }
+
+  get columnIds() {
+    return this.basis.columnIds;
+  }
+
+  private withBasis(basis: Basis): Selection {
+    return new Selection(this.plane, basis);
+  }
+
+  /**
+   * @returns a new selection with all cells selected. The active cell will be the
+   * cell in the first row and first column.
+   */
+  ofAllDataCells(): Selection {
+    if (!this.plane.hasResultRows) {
+      return this.withBasis(basisFromZeroEmptyColumns());
+    }
+    return this.withBasis(basisFromDataCells(this.plane.allDataCells()));
+  }
+
+  /**
+   * @returns a new selection with the cell in the first row and first column
+   * selected.
+   */
+  ofFirstDataCell(): Selection {
+    const firstCellId = first(this.plane.allDataCells());
+    if (firstCellId === undefined) {
+      return this.withBasis(basisFromZeroEmptyColumns());
+    }
+    return this.withBasis(basisFromDataCells([firstCellId]));
+  }
+
+  /**
+   * @returns a new selection with all rows selected between (and including) the
+   * provided rows.
+   *
+   * If either of the provided rows are placeholder rows, then the last data row
+   * will be used in their place. This ensures that the selection is made only
+   * of data rows, and will never include the placeholder row, even if a user
+   * drags to select it.
+   */
+  ofRowRange(rowIdA: string, rowIdB: string): Selection {
+    throw new Error('Not implemented');
+  }
+
+  /**
+   * @returns a new selection of all data cells in all columns between the
+   * provided columnIds, inclusive.
+   */
+  ofColumnRange(columnIdA: string, columnIdB: string): Selection {
+    if (!this.plane.hasResultRows) {
+      throw new Error('Not implemented');
+    }
+    throw new Error('Not implemented');
+  }
+
+  /**
+   * @returns a new selection formed by the rectangle between the provided
+   * cells, inclusive.
+   *
+   * If either of the provided cells are in the placeholder row, then the cell
+   * in the last data row will be used in its place. This ensures that the
+   * selection is made only of data cells, and will never include cells in the
+   * placeholder row, even if a user drags to select a cell in it.
+   */
+  ofCellRange(cellIdA: string, cellIdB: string): Selection {
+    throw new Error('Not implemented');
+  }
+
+  /**
+   * @returns a new selection formed from one cell within the placeholder row.
+   * Note that we do not support selections of multiple cells in the placeholder
+   * row.
+   */
+  atPlaceholderCell(cellId: string): Selection {
+    throw new Error('Not implemented');
+  }
+
+  /**
+   * @returns a new selection that fits within the provided plane. This is
+   * useful when a column is deleted, reordered, or inserted.
+   */
+  forNewPlane(plane: Plane): Selection {
+    throw new Error('Not implemented');
+  }
+
+  /**
+   * @returns a new selection formed by the rectangle between the currently
+   * active cell and provided cell, inclusive.
+   *
+   * This operation is designed to mimic the behavior of Google Sheets when
+   * shift-clicking a specific cell, or when dragging to create a new selection.
+   * A new selection is created that contains all cells in a rectangle bounded
+   * by the active cell (also the first cell selected when dragging) and the
+   * provided cell.
+   */
+  drawnToCell(cellId: string): Selection {
+    throw new Error('Not implemented');
+  }
+
+  /**
+   * @returns a new selection formed by the cells in all the rows between the
+   * active cell and the provided row, inclusive.
+   */
+  drawnToRow(rowId: string): Selection {
+    throw new Error('Not implemented');
+  }
+
+  drawnToColumn(columnId: string): Selection {
+    throw new Error('Not implemented');
+  }
+
+  /**
+   * @returns a new selection that mimics the behavior of arrow keys in
+   * spreadsheets. If the active cell can be moved in the provided direction,
+   * then a new selection is created with only that one cell selected.
+   */
+  collapsedAndMoved(direction: Direction): Selection {
+    throw new Error('Not implemented');
+  }
+
+  /**
+   * @returns a new selection with the active cell moved within the selection,
+   * left to right, top to bottom.
+   *
+   * This is to handle the `Tab` and `Shift+Tab` keys.
+   */
+  withActiveCellAdvanced(direction: 'forward' | 'back' = 'forward'): Selection {
+    throw new Error('Not implemented');
+  }
+
+  /**
+   * @returns a new selection that is grown or shrunk to mimic the behavior of
+   * Google Sheets when manipulating selections via keyboard shortcuts like
+   * `Shift+Down`. The selection is deformed in the direction of the provided
+   * argument. The selection is _shrunk_ if doing so will keep the active cell
+   * within the selection. Otherwise, the selection is _grown_.
+   *
+   * Note that other spreadsheet applications have slightly different behavior
+   * for Shift + arrow keys. For example, LibreOffice Calc maintains state for
+   * the origin of the selection separate from the active cell. The two cells
+   * may be different if the user presses `Tab` after making a selection. In
+   * this case, the selection will be resized with respect to the origin, not
+   * the active cell. We chose to mimic Google Sheets behavior here because it
+   * is simpler.
+   */
+  resized(direction: Direction): Selection {
+    throw new Error('Not implemented');
+  }
+}
diff --git a/mathesar_ui/src/components/sheet/tests/cellIds.test.ts b/mathesar_ui/src/components/sheet/tests/cellIds.test.ts
new file mode 100644
index 0000000000..a4c8702b66
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/tests/cellIds.test.ts
@@ -0,0 +1,27 @@
+import { parseCellId } from '../cellIds';
+
+test.each(
+  // prettier-ignore
+  [
+  // cellId    , rowId , columnId
+    ['a-b'     , 'a'   , 'b'    ],
+    ['a-b-c'   , 'a'   , 'b-c'  ],
+    ['a--b'    , 'a'   , '-b'   ],
+    [' a - b ' , ' a ' , ' b '  ],
+    ['-'       , ''    , ''     ],
+    [' - '     , ' '   , ' '    ],
+    ['--'      , ''    , '-'    ],
+    ['-a-b'    , ''    , 'a-b'  ],
+    ['a-'      , 'a'   , ''     ],
+  ],
+)('parseCellId success %#', (cellId, rowId, columnId) => {
+  const result = parseCellId(cellId);
+  expect(result.rowId).toBe(rowId);
+  expect(result.columnId).toBe(columnId);
+});
+
+test.each([[''], ['foobar']])('parseCellId failure %#', (cellId) => {
+  expect(() => {
+    parseCellId(cellId);
+  }).toThrow();
+});
diff --git a/mathesar_ui/src/utils/__tests__/iterUtils.test.ts b/mathesar_ui/src/utils/__tests__/iterUtils.test.ts
new file mode 100644
index 0000000000..a87d5dc5ef
--- /dev/null
+++ b/mathesar_ui/src/utils/__tests__/iterUtils.test.ts
@@ -0,0 +1,21 @@
+import { cartesianProduct } from '../iterUtils';
+
+test.each([
+  [[], [], []],
+  [[], ['a', 'b'], []],
+  [['a', 'b'], [], []],
+  [
+    ['a', 'b'],
+    ['x', 'y', 'z'],
+    [
+      ['a', 'x'],
+      ['a', 'y'],
+      ['a', 'z'],
+      ['b', 'x'],
+      ['b', 'y'],
+      ['b', 'z'],
+    ],
+  ],
+])('cartesianProduct', (a, b, result) => {
+  expect([...cartesianProduct(a, b)]).toStrictEqual(result);
+});
diff --git a/mathesar_ui/src/utils/iterUtils.ts b/mathesar_ui/src/utils/iterUtils.ts
new file mode 100644
index 0000000000..6a8b915719
--- /dev/null
+++ b/mathesar_ui/src/utils/iterUtils.ts
@@ -0,0 +1,14 @@
+export function cartesianProduct<T, U>(
+  a: Iterable<T>,
+  b: Iterable<U>,
+): Iterable<[T, U]> {
+  return {
+    *[Symbol.iterator]() {
+      for (const x of a) {
+        for (const y of b) {
+          yield [x, y];
+        }
+      }
+    },
+  };
+}

From be561de892212d04c87f3415d1c81375a49e1b61 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Tue, 18 Jul 2023 12:35:46 -0400
Subject: [PATCH 02/85] Upgrade iter-tools package

---
 mathesar_ui/package-lock.json | 6 +++---
 mathesar_ui/package.json      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/mathesar_ui/package-lock.json b/mathesar_ui/package-lock.json
index bd4d9d4ed3..6e78aa6ad4 100644
--- a/mathesar_ui/package-lock.json
+++ b/mathesar_ui/package-lock.json
@@ -18511,9 +18511,9 @@
       }
     },
     "iter-tools": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/iter-tools/-/iter-tools-7.4.0.tgz",
-      "integrity": "sha512-twcHD87GOpbnfFmOtEQMcZuJzBCViNaYx4//70KkkjFcQTkKcUfcuni5G5dfO4Uyb80KIsWnVGZ4vvkpmYCNQQ==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/iter-tools/-/iter-tools-7.5.3.tgz",
+      "integrity": "sha512-iEcHpgM9cn6tsI5MewqxyEega9KPbIDytQTEnu6c0MtlQQhQFofssYuRqxCarZgUdzliepRZPwwwflE4wAIjaA==",
       "requires": {
         "@babel/runtime": "^7.12.1"
       }
diff --git a/mathesar_ui/package.json b/mathesar_ui/package.json
index b092a7c033..9a25e205b9 100644
--- a/mathesar_ui/package.json
+++ b/mathesar_ui/package.json
@@ -63,7 +63,7 @@
     "dayjs": "^1.11.5",
     "fast-diff": "^1.2.0",
     "flatpickr": "^4.6.13",
-    "iter-tools": "^7.4.0",
+    "iter-tools": "^7.5.3",
     "js-cookie": "^3.0.1",
     "papaparse": "^5.4.1",
     "perfect-scrollbar": "^1.5.5"

From 29aedab6ae6e605adc8a4c4630442cb7b571a790 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Tue, 18 Jul 2023 15:15:31 -0400
Subject: [PATCH 03/85] Fill in more logic within Selection scaffolding

---
 .../components/sheet/selection/Direction.ts   |  50 +++++++
 .../components/sheet/selection/IdSequence.ts  |  82 +++++++++-
 .../src/components/sheet/selection/Plane.ts   | 141 +++++++++++++++++-
 .../components/sheet/selection/Selection.ts   | 122 ++++++++++-----
 .../selection/__tests__/IdSequence.test.ts    |  44 ++++++
 .../sheet/selection/__tests__/Plane.test.ts   |  58 +++++++
 6 files changed, 456 insertions(+), 41 deletions(-)
 create mode 100644 mathesar_ui/src/components/sheet/selection/Direction.ts
 create mode 100644 mathesar_ui/src/components/sheet/selection/__tests__/IdSequence.test.ts
 create mode 100644 mathesar_ui/src/components/sheet/selection/__tests__/Plane.test.ts

diff --git a/mathesar_ui/src/components/sheet/selection/Direction.ts b/mathesar_ui/src/components/sheet/selection/Direction.ts
new file mode 100644
index 0000000000..2693dd9000
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/Direction.ts
@@ -0,0 +1,50 @@
+export enum Direction {
+  Up = 'up',
+  Down = 'down',
+  Left = 'left',
+  Right = 'right',
+}
+
+export function getDirection(event: KeyboardEvent): Direction | undefined {
+  const { key } = event;
+  const shift = event.shiftKey;
+  switch (true) {
+    case shift && key === 'Tab':
+      return Direction.Left;
+    case shift:
+      return undefined;
+    case key === 'ArrowUp':
+      return Direction.Up;
+    case key === 'ArrowDown':
+      return Direction.Down;
+    case key === 'ArrowLeft':
+      return Direction.Left;
+    case key === 'ArrowRight':
+    case key === 'Tab':
+      return Direction.Right;
+    default:
+      return undefined;
+  }
+}
+
+export function getColumnOffset(direction: Direction): number {
+  switch (direction) {
+    case Direction.Left:
+      return -1;
+    case Direction.Right:
+      return 1;
+    default:
+      return 0;
+  }
+}
+
+export function getRowOffset(direction: Direction): number {
+  switch (direction) {
+    case Direction.Up:
+      return -1;
+    case Direction.Down:
+      return 1;
+    default:
+      return 0;
+  }
+}
diff --git a/mathesar_ui/src/components/sheet/selection/IdSequence.ts b/mathesar_ui/src/components/sheet/selection/IdSequence.ts
index 85eb73ebe6..ea0396f621 100644
--- a/mathesar_ui/src/components/sheet/selection/IdSequence.ts
+++ b/mathesar_ui/src/components/sheet/selection/IdSequence.ts
@@ -1,4 +1,5 @@
 import { ImmutableMap } from '@mathesar/component-library';
+import { filter, findBest, firstHighest, firstLowest } from 'iter-tools';
 
 export default class IdSequence<Id> {
   private readonly values: Id[];
@@ -19,6 +20,10 @@ export default class IdSequence<Id> {
     }
   }
 
+  private getIndex(value: Id): number | undefined {
+    return this.indexLookup.get(value);
+  }
+
   get length(): number {
     return this.values.length;
   }
@@ -31,8 +36,8 @@ export default class IdSequence<Id> {
    * @throws an Error if either value is not present in the sequence
    */
   range(a: Id, b: Id): Iterable<Id> {
-    const aIndex = this.indexLookup.get(a);
-    const bIndex = this.indexLookup.get(b);
+    const aIndex = this.getIndex(a);
+    const bIndex = this.getIndex(b);
 
     if (aIndex === undefined || bIndex === undefined) {
       throw new Error('Id value not found within sequence.');
@@ -44,6 +49,79 @@ export default class IdSequence<Id> {
     return this.values.slice(startIndex, endIndex + 1);
   }
 
+  get first(): Id | undefined {
+    return this.values[0];
+  }
+
+  get last(): Id | undefined {
+    return this.values[this.values.length - 1];
+  }
+
+  has(value: Id): boolean {
+    return this.getIndex(value) !== undefined;
+  }
+
+  /**
+   * This method is used for `min` and `max`, but could potentially be used for
+   * other things too.
+   *
+   * @param comparator Corresponds to the [iter-tools comparators][1]
+   *
+   * [1]:
+   * https://github.com/iter-tools/iter-tools/blob/d7.5/API.md#compare-values-and-return-true-or-false
+   */
+  best(
+    values: Iterable<Id>,
+    comparator: (best: number, v: number) => boolean,
+  ): Id | undefined {
+    const validValues = filter((v) => this.has(v), values);
+    return findBest(comparator, (v) => this.getIndex(v) ?? 0, validValues);
+  }
+
+  min(values: Iterable<Id>): Id | undefined {
+    return this.best(values, firstLowest);
+  }
+
+  max(values: Iterable<Id>): Id | undefined {
+    return this.best(values, firstHighest);
+  }
+
+  /**
+   * @returns the value positioned relative to the given value by the given
+   * offset. If the offset is 0, the given value will be returned. If the offset
+   * is positive, the returned value will be that many positions _after_ the
+   * given value. If no such value is present, then `undefined` will be
+   * returned.
+   */
+  offset(value: Id, offset: number): Id | undefined {
+    if (offset === 0) {
+      return this.has(value) ? value : undefined;
+    }
+    const index = this.getIndex(value);
+    if (index === undefined) {
+      return undefined;
+    }
+    return this.values[index + offset];
+  }
+
+  /**
+   * This is similar to `offset`, but accepts an iterable of values and treats
+   * them as a unified block to be collapsed into one value. When `offset` is
+   * positive, the returned value will be that many positions _after_ the last
+   * value in the block. If no such value is present, then `undefined` will be
+   * returned. If offset is zero, then `undefined` will be returned.
+   */
+  collapsedOffset(values: Iterable<Id>, offset: number): Id | undefined {
+    if (offset === 0) {
+      return undefined;
+    }
+    const outerValue = offset > 0 ? this.max(values) : this.min(values);
+    if (outerValue === undefined) {
+      return undefined;
+    }
+    return this.offset(outerValue, offset);
+  }
+
   [Symbol.iterator](): Iterator<Id> {
     return this.values[Symbol.iterator]();
   }
diff --git a/mathesar_ui/src/components/sheet/selection/Plane.ts b/mathesar_ui/src/components/sheet/selection/Plane.ts
index cec6abe732..7b70dd6cb4 100644
--- a/mathesar_ui/src/components/sheet/selection/Plane.ts
+++ b/mathesar_ui/src/components/sheet/selection/Plane.ts
@@ -1,8 +1,9 @@
 import { map } from 'iter-tools';
 
 import { cartesianProduct } from '@mathesar/utils/iterUtils';
+import { makeCellId, parseCellId } from '../cellIds';
+import { Direction, getColumnOffset, getRowOffset } from './Direction';
 import type IdSequence from './IdSequence';
-import { makeCellId } from '../cellIds';
 
 function makeCells(
   rowIds: Iterable<string>,
@@ -14,6 +15,35 @@ function makeCells(
   );
 }
 
+/**
+ * This describes the different kinds of cells that can be adjacent to a given
+ * cell in a particular direction.
+ */
+export type AdjacentCell =
+  | {
+      type: 'dataCell';
+      cellId: string;
+    }
+  | {
+      type: 'placeholderCell';
+      cellId: string;
+    }
+  | {
+      type: 'none';
+    };
+
+function noAdjacentCell(): AdjacentCell {
+  return { type: 'none' };
+}
+
+function adjacentDataCell(cellId: string): AdjacentCell {
+  return { type: 'dataCell', cellId };
+}
+
+function adjacentPlaceholderCell(cellId: string): AdjacentCell {
+  return { type: 'placeholderCell', cellId };
+}
+
 export default class Plane {
   readonly rowIds: IdSequence<string>;
 
@@ -31,6 +61,19 @@ export default class Plane {
     this.placeholderRowId = placeholderRowId;
   }
 
+  /**
+   * @returns the row id that should be used to represent the given row id in
+   * the plane. If the given row id is the placeholder row id, then the last
+   * row id in the plane will be returned. Otherwise, the given row id will be
+   * returned.
+   */
+  private normalizeFlexibleRowId(rowId: string): string | undefined {
+    if (rowId === this.placeholderRowId) {
+      return this.rowIds.last;
+    }
+    return rowId;
+  }
+
   /**
    * @returns an iterable of all the data cells in the plane. This does not
    * include header cells or placeholder cells.
@@ -43,11 +86,24 @@ export default class Plane {
    * @returns an iterable of all the data cells in the plane that are in or
    * between the two given rows. This does not include header cells.
    *
-   * @throws Error if the id of the placeholder row is specified because the
-   * placeholder row is not a data row.
+   * If either of the provided rows are placeholder rows, then the last data row
+   * will be used in their place. This ensures that the selection is made only
+   * of data rows, and will never include the placeholder row, even if a user
+   * drags to select it.
    */
-  dataCellsInRowRange(rowIdA: string, rowIdB: string): Iterable<string> {
-    return makeCells(this.rowIds.range(rowIdA, rowIdB), this.columnIds);
+  dataCellsInFlexibleRowRange(
+    rowIdA: string,
+    rowIdB: string,
+  ): Iterable<string> {
+    const a = this.normalizeFlexibleRowId(rowIdA);
+    if (a === undefined) {
+      return [];
+    }
+    const b = this.normalizeFlexibleRowId(rowIdB);
+    if (b === undefined) {
+      return [];
+    }
+    return makeCells(this.rowIds.range(a, b), this.columnIds);
   }
 
   /**
@@ -62,6 +118,81 @@ export default class Plane {
     return makeCells(this.rowIds, this.columnIds.range(columnIdA, columnIdB));
   }
 
+  /**
+   * @returns an iterable of all the data cells in the plane that are in or
+   * between the two given cell. This does not include header cells.
+   *
+   * If either of the provided cells are placeholder cells, then cells in the
+   * last row and last column will be used in their place. This ensures that the
+   * selection is made only of data cells, and will never include the
+   * placeholder cell, even if a user drags to select it.
+   */
+  dataCellsInFlexibleCellRange(
+    cellIdA: string,
+    cellIdB: string,
+  ): Iterable<string> {
+    const cellA = parseCellId(cellIdA);
+    const cellB = parseCellId(cellIdB);
+    const rowIdA = this.normalizeFlexibleRowId(cellA.rowId);
+    if (rowIdA === undefined) {
+      return [];
+    }
+    const rowIdB = this.normalizeFlexibleRowId(cellB.rowId);
+    if (rowIdB === undefined) {
+      return [];
+    }
+    const rowIds = this.rowIds.range(rowIdA, rowIdB);
+    const columnIds = this.columnIds.range(cellA.columnId, cellB.columnId);
+    return makeCells(rowIds, columnIds);
+  }
+
+  getAdjacentCell(cellId: string, direction: Direction): AdjacentCell {
+    const cell = parseCellId(cellId);
+
+    const columnOffset = getColumnOffset(direction);
+    const newColumnId = this.columnIds.offset(cell.columnId, columnOffset);
+    if (newColumnId === undefined) {
+      return noAdjacentCell();
+    }
+
+    if (cell.rowId === this.placeholderRowId) {
+      if (direction === Direction.Up) {
+        const lastRowId = this.rowIds.last;
+        if (lastRowId === undefined) {
+          // Can't go up from the placeholder row if there are no data rows
+          return noAdjacentCell();
+        }
+        // Move up from the placeholder row into the last data row
+        return adjacentDataCell(makeCellId(lastRowId, newColumnId));
+      }
+      if (direction === Direction.Down) {
+        // Can't go down from the placeholder row
+        return noAdjacentCell();
+      }
+      // Move laterally within the placeholder row
+      return adjacentPlaceholderCell(makeCellId(cell.rowId, newColumnId));
+    }
+
+    const rowOffset = getRowOffset(direction);
+    const newRowId = this.rowIds.offset(cell.rowId, rowOffset);
+    if (newRowId === undefined) {
+      if (direction === Direction.Down) {
+        if (this.placeholderRowId === undefined) {
+          // Can't go down from the last data row if there is no placeholder row
+          return noAdjacentCell();
+        }
+        const newCellId = makeCellId(this.placeholderRowId, newColumnId);
+        // Move down from the last data row into the placeholder row
+        return adjacentPlaceholderCell(newCellId);
+      }
+      // Can't move up from the first data row
+      return noAdjacentCell();
+    }
+
+    // Normal movement from one data cell to another data cell
+    return adjacentDataCell(makeCellId(newRowId, newColumnId));
+  }
+
   get hasResultRows(): boolean {
     return this.rowIds.length > 0;
   }
diff --git a/mathesar_ui/src/components/sheet/selection/Selection.ts b/mathesar_ui/src/components/sheet/selection/Selection.ts
index 44f70d27c4..c98e5570dc 100644
--- a/mathesar_ui/src/components/sheet/selection/Selection.ts
+++ b/mathesar_ui/src/components/sheet/selection/Selection.ts
@@ -1,31 +1,28 @@
 import { first } from 'iter-tools';
 
 import { ImmutableSet } from '@mathesar/component-library';
-import type Plane from './Plane';
+import { assertExhaustive } from '@mathesar/utils/typeUtils';
 import { parseCellId } from '../cellIds';
+import { Direction, getColumnOffset } from './Direction';
+import type Plane from './Plane';
 
-export enum Direction {
-  Up = 'up',
-  Down = 'down',
-  Left = 'left',
-  Right = 'right',
-}
+/**
+ * - `'dataCells'` means that the selection contains data cells. This is by
+ *   far the most common type of selection basis.
+ *
+ * - `'emptyColumns'` is used when the sheet has no rows. In this case we
+ *   still want to allow the user to select columns, so we use this basis.
+ *
+ * - `'placeholderCell'` is used when the user is selecting a cell in the
+ *   placeholder row. This is a special case because we don't want to allow
+ *   the user to select multiple cells in the placeholder row, and we also
+ *   don't want to allow selections that include cells in data rows _and_ the
+ *   placeholder row.
+ */
+type BasisType = 'dataCells' | 'emptyColumns' | 'placeholderCell';
 
 interface Basis {
-  /**
-   * - `'dataCells'` means that the selection contains data cells. This is by
-   *   far the most common type of selection basis.
-   *
-   * - `'emptyColumns'` is used when the sheet has no rows. In this case we
-   *   still want to allow the user to select columns, so we use this basis.
-   *
-   * - `'placeholderCell'` is used when the user is selecting a cell in the
-   *   placeholder row. This is a special case because we don't want to allow
-   *   the user to select multiple cells in the placeholder row, and we also
-   *   don't want to allow selections that include cells in data rows _and_ the
-   *   placeholder row.
-   */
-  readonly type: 'dataCells' | 'emptyColumns' | 'placeholderCell';
+  readonly type: BasisType;
   readonly activeCellId: string | undefined;
   readonly cellIds: ImmutableSet<string>;
   readonly rowIds: ImmutableSet<string>;
@@ -101,8 +98,8 @@ export default class Selection {
   }
 
   /**
-   * @returns a new selection with all cells selected. The active cell will be the
-   * cell in the first row and first column.
+   * @returns a new selection with all cells selected. The active cell will be
+   * the cell in the first row and first column.
    */
   ofAllDataCells(): Selection {
     if (!this.plane.hasResultRows) {
@@ -133,7 +130,11 @@ export default class Selection {
    * drags to select it.
    */
   ofRowRange(rowIdA: string, rowIdB: string): Selection {
-    throw new Error('Not implemented');
+    return this.withBasis(
+      basisFromDataCells(
+        this.plane.dataCellsInFlexibleRowRange(rowIdA, rowIdB),
+      ),
+    );
   }
 
   /**
@@ -141,10 +142,12 @@ export default class Selection {
    * provided columnIds, inclusive.
    */
   ofColumnRange(columnIdA: string, columnIdB: string): Selection {
-    if (!this.plane.hasResultRows) {
-      throw new Error('Not implemented');
-    }
-    throw new Error('Not implemented');
+    const newBasis = this.plane.hasResultRows
+      ? basisFromDataCells(
+          this.plane.dataCellsInColumnRange(columnIdA, columnIdB),
+        )
+      : basisFromEmptyColumns(this.plane.columnIds.range(columnIdA, columnIdB));
+    return this.withBasis(newBasis);
   }
 
   /**
@@ -157,7 +160,11 @@ export default class Selection {
    * placeholder row, even if a user drags to select a cell in it.
    */
   ofCellRange(cellIdA: string, cellIdB: string): Selection {
-    throw new Error('Not implemented');
+    return this.withBasis(
+      basisFromDataCells(
+        this.plane.dataCellsInFlexibleCellRange(cellIdA, cellIdB),
+      ),
+    );
   }
 
   /**
@@ -166,7 +173,14 @@ export default class Selection {
    * row.
    */
   atPlaceholderCell(cellId: string): Selection {
-    throw new Error('Not implemented');
+    return this.withBasis(basisFromPlaceholderCell(cellId));
+  }
+
+  /**
+   * @returns a new selection formed from one cell within the data rows.
+   */
+  atDataCell(cellId: string): Selection {
+    return this.withBasis(basisFromDataCells([cellId], cellId));
   }
 
   /**
@@ -188,7 +202,7 @@ export default class Selection {
    * provided cell.
    */
   drawnToCell(cellId: string): Selection {
-    throw new Error('Not implemented');
+    return this.ofCellRange(this.activeCellId ?? cellId, cellId);
   }
 
   /**
@@ -196,11 +210,19 @@ export default class Selection {
    * active cell and the provided row, inclusive.
    */
   drawnToRow(rowId: string): Selection {
-    throw new Error('Not implemented');
+    const activeRowId = this.activeCellId
+      ? parseCellId(this.activeCellId).rowId
+      : rowId;
+    return this.ofRowRange(activeRowId, rowId);
   }
 
   drawnToColumn(columnId: string): Selection {
-    throw new Error('Not implemented');
+    // TODO improve handling for empty columns
+
+    const activeColumnId = this.activeCellId
+      ? parseCellId(this.activeCellId).columnId
+      : columnId;
+    return this.ofColumnRange(activeColumnId, columnId);
   }
 
   /**
@@ -209,7 +231,39 @@ export default class Selection {
    * then a new selection is created with only that one cell selected.
    */
   collapsedAndMoved(direction: Direction): Selection {
-    throw new Error('Not implemented');
+    if (this.basis.type === 'emptyColumns') {
+      const offset = getColumnOffset(direction);
+      const newActiveColumnId = this.plane.columnIds.collapsedOffset(
+        this.basis.columnIds,
+        offset,
+      );
+      if (newActiveColumnId === undefined) {
+        // If we couldn't shift in the direction, then do nothing
+        return this;
+      }
+      return this.withBasis(basisFromEmptyColumns([newActiveColumnId]));
+    }
+
+    if (this.activeCellId === undefined) {
+      // If no cells are selected, then select the first data cell
+      return this.ofFirstDataCell();
+    }
+
+    const adjacent = this.plane.getAdjacentCell(this.activeCellId, direction);
+
+    if (adjacent.type === 'none') {
+      // If we can't move anywhere, then do nothing
+      return this;
+    }
+    if (adjacent.type === 'dataCell') {
+      // Move to an adjacent data cell
+      return this.atDataCell(adjacent.cellId);
+    }
+    if (adjacent.type === 'placeholderCell') {
+      // Move to an adjacent placeholder cell
+      return this.atPlaceholderCell(adjacent.cellId);
+    }
+    return assertExhaustive(adjacent);
   }
 
   /**
diff --git a/mathesar_ui/src/components/sheet/selection/__tests__/IdSequence.test.ts b/mathesar_ui/src/components/sheet/selection/__tests__/IdSequence.test.ts
new file mode 100644
index 0000000000..14da6d0a24
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/__tests__/IdSequence.test.ts
@@ -0,0 +1,44 @@
+import IdSequence from '../IdSequence';
+
+test('IdSequence', () => {
+  const s = new IdSequence(['h', 'i', 'j', 'k', 'l']);
+  expect(s.length).toBe(5);
+  expect(s.first).toBe('h');
+  expect(s.last).toBe('l');
+
+  expect([...s]).toEqual(['h', 'i', 'j', 'k', 'l']);
+
+  expect(s.min(['i', 'j', 'k'])).toBe('i');
+  expect(s.min(['k', 'j', 'i'])).toBe('i');
+  expect(s.min(['i', 'NOPE'])).toBe('i');
+  expect(s.min(['NOPE'])).toBe(undefined);
+  expect(s.min([])).toBe(undefined);
+
+  expect(s.max(['i', 'j', 'k'])).toBe('k');
+  expect(s.max(['k', 'j', 'i'])).toBe('k');
+  expect(s.max(['i', 'NOPE'])).toBe('i');
+  expect(s.max(['NOPE'])).toBe(undefined);
+  expect(s.max([])).toBe(undefined);
+
+  expect([...s.range('i', 'k')]).toEqual(['i', 'j', 'k']);
+  expect([...s.range('k', 'i')]).toEqual(['i', 'j', 'k']);
+  expect([...s.range('i', 'i')]).toEqual(['i']);
+  expect(() => s.range('i', 'NOPE')).toThrow();
+
+  expect(s.offset('i', 0)).toBe('i');
+  expect(s.offset('i', 1)).toBe('j');
+  expect(s.offset('i', 2)).toBe('k');
+  expect(s.offset('i', -1)).toBe('h');
+  expect(s.offset('i', -2)).toBe(undefined);
+  expect(s.offset('NOPE', 0)).toBe(undefined);
+  expect(s.offset('NOPE', 1)).toBe(undefined);
+
+  expect(s.collapsedOffset(['i', 'k'], 0)).toBe(undefined);
+  expect(s.collapsedOffset(['i', 'k'], 1)).toBe('l');
+  expect(s.collapsedOffset(['i', 'k'], 2)).toBe(undefined);
+  expect(s.collapsedOffset(['i', 'k'], -1)).toBe('h');
+  expect(s.collapsedOffset(['i', 'k'], -2)).toBe(undefined);
+  expect(s.collapsedOffset(['i', 'NOPE'], 0)).toBe(undefined);
+  expect(s.collapsedOffset(['i', 'NOPE'], 1)).toBe('j');
+  expect(s.collapsedOffset([], 0)).toBe(undefined);
+});
diff --git a/mathesar_ui/src/components/sheet/selection/__tests__/Plane.test.ts b/mathesar_ui/src/components/sheet/selection/__tests__/Plane.test.ts
new file mode 100644
index 0000000000..6e70548ed2
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/__tests__/Plane.test.ts
@@ -0,0 +1,58 @@
+import IdSequence from '../IdSequence';
+import Plane from '../Plane';
+import { Direction } from '../Direction';
+
+test('Plane with placeholder row', () => {
+  const p = new Plane(
+    new IdSequence(['r1', 'r2', 'r3', 'r4']),
+    new IdSequence(['c1', 'c2', 'c3', 'c4']),
+    'PL',
+  );
+
+  expect([...p.allDataCells()]).toEqual([
+    'r1-c1',
+    'r1-c2',
+    'r1-c3',
+    'r1-c4',
+    'r2-c1',
+    'r2-c2',
+    'r2-c3',
+    'r2-c4',
+    'r3-c1',
+    'r3-c2',
+    'r3-c3',
+    'r3-c4',
+    'r4-c1',
+    'r4-c2',
+    'r4-c3',
+    'r4-c4',
+  ]);
+
+  expect([...p.dataCellsInFlexibleRowRange('r1', 'r2')].length).toBe(8);
+  expect([...p.dataCellsInFlexibleRowRange('r1', 'r3')].length).toBe(12);
+  expect([...p.dataCellsInFlexibleRowRange('r3', 'r4')].length).toBe(8);
+  expect([...p.dataCellsInFlexibleRowRange('r3', 'PL')].length).toBe(8);
+  expect([...p.dataCellsInFlexibleRowRange('PL', 'PL')]).toEqual([
+    'r4-c1',
+    'r4-c2',
+    'r4-c3',
+    'r4-c4',
+  ]);
+
+  expect([...p.dataCellsInColumnRange('c1', 'c2')].length).toBe(8);
+  expect([...p.dataCellsInColumnRange('c1', 'c3')].length).toBe(12);
+
+  expect(p.getAdjacentCell('r4-c4', Direction.Up)).toEqual({
+    type: 'dataCell',
+    cellId: 'r3-c4',
+  });
+  expect(p.getAdjacentCell('r4-c4', Direction.Right)).toEqual({ type: 'none' });
+  expect(p.getAdjacentCell('r4-c4', Direction.Down)).toEqual({
+    type: 'placeholderCell',
+    cellId: 'PL-c4',
+  });
+  expect(p.getAdjacentCell('r4-c4', Direction.Left)).toEqual({
+    type: 'dataCell',
+    cellId: 'r4-c3',
+  });
+});

From 8b5ccdcb7a54b59b144c8b99602d987b42200886 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Tue, 18 Jul 2023 15:17:46 -0400
Subject: [PATCH 04/85] Improve some naming

---
 mathesar_ui/src/components/sheet/selection/Plane.ts    | 10 +++++-----
 .../sheet/selection/{IdSequence.ts => Series.ts}       |  4 ++--
 .../components/sheet/selection/__tests__/Plane.test.ts |  6 +++---
 .../__tests__/{IdSequence.test.ts => Series.test.ts}   |  6 +++---
 4 files changed, 13 insertions(+), 13 deletions(-)
 rename mathesar_ui/src/components/sheet/selection/{IdSequence.ts => Series.ts} (98%)
 rename mathesar_ui/src/components/sheet/selection/__tests__/{IdSequence.test.ts => Series.test.ts} (92%)

diff --git a/mathesar_ui/src/components/sheet/selection/Plane.ts b/mathesar_ui/src/components/sheet/selection/Plane.ts
index 7b70dd6cb4..20ed0fccc5 100644
--- a/mathesar_ui/src/components/sheet/selection/Plane.ts
+++ b/mathesar_ui/src/components/sheet/selection/Plane.ts
@@ -3,7 +3,7 @@ import { map } from 'iter-tools';
 import { cartesianProduct } from '@mathesar/utils/iterUtils';
 import { makeCellId, parseCellId } from '../cellIds';
 import { Direction, getColumnOffset, getRowOffset } from './Direction';
-import type IdSequence from './IdSequence';
+import type Series from './Series';
 
 function makeCells(
   rowIds: Iterable<string>,
@@ -45,15 +45,15 @@ function adjacentPlaceholderCell(cellId: string): AdjacentCell {
 }
 
 export default class Plane {
-  readonly rowIds: IdSequence<string>;
+  readonly rowIds: Series<string>;
 
-  readonly columnIds: IdSequence<string>;
+  readonly columnIds: Series<string>;
 
   readonly placeholderRowId: string | undefined;
 
   constructor(
-    rowIds: IdSequence<string>,
-    columnIds: IdSequence<string>,
+    rowIds: Series<string>,
+    columnIds: Series<string>,
     placeholderRowId: string | undefined,
   ) {
     this.rowIds = rowIds;
diff --git a/mathesar_ui/src/components/sheet/selection/IdSequence.ts b/mathesar_ui/src/components/sheet/selection/Series.ts
similarity index 98%
rename from mathesar_ui/src/components/sheet/selection/IdSequence.ts
rename to mathesar_ui/src/components/sheet/selection/Series.ts
index ea0396f621..7b8cd45dcc 100644
--- a/mathesar_ui/src/components/sheet/selection/IdSequence.ts
+++ b/mathesar_ui/src/components/sheet/selection/Series.ts
@@ -1,7 +1,7 @@
 import { ImmutableMap } from '@mathesar/component-library';
 import { filter, findBest, firstHighest, firstLowest } from 'iter-tools';
 
-export default class IdSequence<Id> {
+export default class Series<Id> {
   private readonly values: Id[];
 
   /** Maps the id value to its index */
@@ -16,7 +16,7 @@ export default class IdSequence<Id> {
       values.map((value, index) => [value, index]),
     );
     if (new Set(values).size !== values.length) {
-      throw new Error('Duplicate values are not allowed within an IdSequence.');
+      throw new Error('Duplicate values are not allowed within a Series.');
     }
   }
 
diff --git a/mathesar_ui/src/components/sheet/selection/__tests__/Plane.test.ts b/mathesar_ui/src/components/sheet/selection/__tests__/Plane.test.ts
index 6e70548ed2..dd6b89500c 100644
--- a/mathesar_ui/src/components/sheet/selection/__tests__/Plane.test.ts
+++ b/mathesar_ui/src/components/sheet/selection/__tests__/Plane.test.ts
@@ -1,11 +1,11 @@
-import IdSequence from '../IdSequence';
+import Series from '../Series';
 import Plane from '../Plane';
 import { Direction } from '../Direction';
 
 test('Plane with placeholder row', () => {
   const p = new Plane(
-    new IdSequence(['r1', 'r2', 'r3', 'r4']),
-    new IdSequence(['c1', 'c2', 'c3', 'c4']),
+    new Series(['r1', 'r2', 'r3', 'r4']),
+    new Series(['c1', 'c2', 'c3', 'c4']),
     'PL',
   );
 
diff --git a/mathesar_ui/src/components/sheet/selection/__tests__/IdSequence.test.ts b/mathesar_ui/src/components/sheet/selection/__tests__/Series.test.ts
similarity index 92%
rename from mathesar_ui/src/components/sheet/selection/__tests__/IdSequence.test.ts
rename to mathesar_ui/src/components/sheet/selection/__tests__/Series.test.ts
index 14da6d0a24..8109932d9f 100644
--- a/mathesar_ui/src/components/sheet/selection/__tests__/IdSequence.test.ts
+++ b/mathesar_ui/src/components/sheet/selection/__tests__/Series.test.ts
@@ -1,7 +1,7 @@
-import IdSequence from '../IdSequence';
+import Series from '../Series';
 
-test('IdSequence', () => {
-  const s = new IdSequence(['h', 'i', 'j', 'k', 'l']);
+test('Series', () => {
+  const s = new Series(['h', 'i', 'j', 'k', 'l']);
   expect(s.length).toBe(5);
   expect(s.first).toBe('h');
   expect(s.last).toBe('l');

From 66f4e637cc1759af7cf08475ea3389513acfab0e Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Tue, 18 Jul 2023 16:34:44 -0400
Subject: [PATCH 05/85] Rename classes to mark old code as deprecated

---
 ...etSelection.ts => LegacySheetSelection.ts} |  5 ++-
 .../components/sheet/SheetClipboardHandler.ts |  6 ++--
 mathesar_ui/src/components/sheet/index.ts     |  4 +--
 .../{Selection.ts => SheetSelection.ts}       | 36 ++++++++++---------
 .../src/stores/table-data/tabularData.ts      | 13 ++++---
 .../src/systems/data-explorer/QueryRunner.ts  |  6 ++--
 .../src/systems/table-view/Body.svelte        |  2 +-
 .../src/systems/table-view/StatusPane.svelte  |  2 +-
 .../src/systems/table-view/TableView.svelte   |  9 +++--
 .../systems/table-view/header/Header.svelte   |  2 +-
 .../src/systems/table-view/row/Row.svelte     |  9 +++--
 .../table-inspector/TableInspector.svelte     |  2 +-
 .../table-inspector/column/ColumnMode.svelte  |  2 +-
 .../ExtractColumnsModal.svelte                |  6 +++-
 .../table-inspector/record/RecordMode.svelte  |  2 +-
 15 files changed, 64 insertions(+), 42 deletions(-)
 rename mathesar_ui/src/components/sheet/{SheetSelection.ts => LegacySheetSelection.ts} (99%)
 rename mathesar_ui/src/components/sheet/selection/{Selection.ts => SheetSelection.ts} (90%)

diff --git a/mathesar_ui/src/components/sheet/SheetSelection.ts b/mathesar_ui/src/components/sheet/LegacySheetSelection.ts
similarity index 99%
rename from mathesar_ui/src/components/sheet/SheetSelection.ts
rename to mathesar_ui/src/components/sheet/LegacySheetSelection.ts
index 4c88ef8c50..0aeeeb31c6 100644
--- a/mathesar_ui/src/components/sheet/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/LegacySheetSelection.ts
@@ -196,7 +196,10 @@ export function getSelectedRowIndex(selectedCell: string): number {
   return Number(selectedCell.split(ROW_COLUMN_SEPARATOR)[0]);
 }
 
-export default class SheetSelection<
+/**
+ * @deprecated
+ */
+export default class LegacySheetSelection<
   Row extends SelectionRow,
   Column extends SelectionColumn,
 > {
diff --git a/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts b/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts
index c8e7a8b3d7..2af5549205 100644
--- a/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts
+++ b/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts
@@ -2,9 +2,9 @@ import * as Papa from 'papaparse';
 import { get } from 'svelte/store';
 
 import { ImmutableSet, type MakeToast } from '@mathesar-component-library';
-import SheetSelection, {
+import LegacySheetSelection, {
   isCellSelected,
-} from '@mathesar/components/sheet/SheetSelection';
+} from '@mathesar/components/sheet/LegacySheetSelection';
 import type { ClipboardHandler } from '@mathesar/stores/clipboard';
 import type {
   ProcessedColumn,
@@ -76,7 +76,7 @@ interface SheetClipboardHandlerDeps<
   Row extends QueryRow | RecordRow,
   Column extends ProcessedQueryOutputColumn | ProcessedColumn,
 > {
-  selection: SheetSelection<Row, Column>;
+  selection: LegacySheetSelection<Row, Column>;
   toast: MakeToast;
   getRows(): Row[];
   getColumnsMap(): ReadableMapLike<Column['id'], Column>;
diff --git a/mathesar_ui/src/components/sheet/index.ts b/mathesar_ui/src/components/sheet/index.ts
index cc67f1275b..0448df86aa 100644
--- a/mathesar_ui/src/components/sheet/index.ts
+++ b/mathesar_ui/src/components/sheet/index.ts
@@ -5,7 +5,7 @@ export { default as SheetPositionableCell } from './SheetPositionableCell.svelte
 export { default as SheetCellResizer } from './SheetCellResizer.svelte';
 export { default as SheetVirtualRows } from './SheetVirtualRows.svelte';
 export { default as SheetRow } from './SheetRow.svelte';
-export { default as SheetSelection } from './SheetSelection';
+export { default as LegacySheetSelection } from './LegacySheetSelection';
 export {
   isColumnSelected,
   isRowSelected,
@@ -14,4 +14,4 @@ export {
   isCellActive,
   scrollBasedOnActiveCell,
   scrollBasedOnSelection,
-} from './SheetSelection';
+} from './LegacySheetSelection';
diff --git a/mathesar_ui/src/components/sheet/selection/Selection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
similarity index 90%
rename from mathesar_ui/src/components/sheet/selection/Selection.ts
rename to mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index c98e5570dc..ba8c8b1b8b 100644
--- a/mathesar_ui/src/components/sheet/selection/Selection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -67,7 +67,7 @@ function basisFromPlaceholderCell(activeCellId: string): Basis {
   };
 }
 
-export default class Selection {
+export default class SheetSelection {
   private readonly plane: Plane;
 
   private readonly basis: Basis;
@@ -93,15 +93,15 @@ export default class Selection {
     return this.basis.columnIds;
   }
 
-  private withBasis(basis: Basis): Selection {
-    return new Selection(this.plane, basis);
+  private withBasis(basis: Basis): SheetSelection {
+    return new SheetSelection(this.plane, basis);
   }
 
   /**
    * @returns a new selection with all cells selected. The active cell will be
    * the cell in the first row and first column.
    */
-  ofAllDataCells(): Selection {
+  ofAllDataCells(): SheetSelection {
     if (!this.plane.hasResultRows) {
       return this.withBasis(basisFromZeroEmptyColumns());
     }
@@ -112,7 +112,7 @@ export default class Selection {
    * @returns a new selection with the cell in the first row and first column
    * selected.
    */
-  ofFirstDataCell(): Selection {
+  ofFirstDataCell(): SheetSelection {
     const firstCellId = first(this.plane.allDataCells());
     if (firstCellId === undefined) {
       return this.withBasis(basisFromZeroEmptyColumns());
@@ -129,7 +129,7 @@ export default class Selection {
    * of data rows, and will never include the placeholder row, even if a user
    * drags to select it.
    */
-  ofRowRange(rowIdA: string, rowIdB: string): Selection {
+  ofRowRange(rowIdA: string, rowIdB: string): SheetSelection {
     return this.withBasis(
       basisFromDataCells(
         this.plane.dataCellsInFlexibleRowRange(rowIdA, rowIdB),
@@ -141,7 +141,7 @@ export default class Selection {
    * @returns a new selection of all data cells in all columns between the
    * provided columnIds, inclusive.
    */
-  ofColumnRange(columnIdA: string, columnIdB: string): Selection {
+  ofColumnRange(columnIdA: string, columnIdB: string): SheetSelection {
     const newBasis = this.plane.hasResultRows
       ? basisFromDataCells(
           this.plane.dataCellsInColumnRange(columnIdA, columnIdB),
@@ -159,7 +159,7 @@ export default class Selection {
    * selection is made only of data cells, and will never include cells in the
    * placeholder row, even if a user drags to select a cell in it.
    */
-  ofCellRange(cellIdA: string, cellIdB: string): Selection {
+  ofCellRange(cellIdA: string, cellIdB: string): SheetSelection {
     return this.withBasis(
       basisFromDataCells(
         this.plane.dataCellsInFlexibleCellRange(cellIdA, cellIdB),
@@ -172,14 +172,14 @@ export default class Selection {
    * Note that we do not support selections of multiple cells in the placeholder
    * row.
    */
-  atPlaceholderCell(cellId: string): Selection {
+  atPlaceholderCell(cellId: string): SheetSelection {
     return this.withBasis(basisFromPlaceholderCell(cellId));
   }
 
   /**
    * @returns a new selection formed from one cell within the data rows.
    */
-  atDataCell(cellId: string): Selection {
+  atDataCell(cellId: string): SheetSelection {
     return this.withBasis(basisFromDataCells([cellId], cellId));
   }
 
@@ -187,7 +187,7 @@ export default class Selection {
    * @returns a new selection that fits within the provided plane. This is
    * useful when a column is deleted, reordered, or inserted.
    */
-  forNewPlane(plane: Plane): Selection {
+  forNewPlane(plane: Plane): SheetSelection {
     throw new Error('Not implemented');
   }
 
@@ -201,7 +201,7 @@ export default class Selection {
    * by the active cell (also the first cell selected when dragging) and the
    * provided cell.
    */
-  drawnToCell(cellId: string): Selection {
+  drawnToCell(cellId: string): SheetSelection {
     return this.ofCellRange(this.activeCellId ?? cellId, cellId);
   }
 
@@ -209,14 +209,14 @@ export default class Selection {
    * @returns a new selection formed by the cells in all the rows between the
    * active cell and the provided row, inclusive.
    */
-  drawnToRow(rowId: string): Selection {
+  drawnToRow(rowId: string): SheetSelection {
     const activeRowId = this.activeCellId
       ? parseCellId(this.activeCellId).rowId
       : rowId;
     return this.ofRowRange(activeRowId, rowId);
   }
 
-  drawnToColumn(columnId: string): Selection {
+  drawnToColumn(columnId: string): SheetSelection {
     // TODO improve handling for empty columns
 
     const activeColumnId = this.activeCellId
@@ -230,7 +230,7 @@ export default class Selection {
    * spreadsheets. If the active cell can be moved in the provided direction,
    * then a new selection is created with only that one cell selected.
    */
-  collapsedAndMoved(direction: Direction): Selection {
+  collapsedAndMoved(direction: Direction): SheetSelection {
     if (this.basis.type === 'emptyColumns') {
       const offset = getColumnOffset(direction);
       const newActiveColumnId = this.plane.columnIds.collapsedOffset(
@@ -272,7 +272,9 @@ export default class Selection {
    *
    * This is to handle the `Tab` and `Shift+Tab` keys.
    */
-  withActiveCellAdvanced(direction: 'forward' | 'back' = 'forward'): Selection {
+  withActiveCellAdvanced(
+    direction: 'forward' | 'back' = 'forward',
+  ): SheetSelection {
     throw new Error('Not implemented');
   }
 
@@ -291,7 +293,7 @@ export default class Selection {
    * the active cell. We chose to mimic Google Sheets behavior here because it
    * is simpler.
    */
-  resized(direction: Direction): Selection {
+  resized(direction: Direction): SheetSelection {
     throw new Error('Not implemented');
   }
 }
diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts
index a29e0c9836..543e977ea3 100644
--- a/mathesar_ui/src/stores/table-data/tabularData.ts
+++ b/mathesar_ui/src/stores/table-data/tabularData.ts
@@ -11,7 +11,7 @@ import type { TableEntry } from '@mathesar/api/types/tables';
 import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
 import { States } from '@mathesar/api/utils/requestUtils';
 import type { Column } from '@mathesar/api/types/tables/columns';
-import { SheetSelection } from '@mathesar/components/sheet';
+import { LegacySheetSelection } from '@mathesar/components/sheet';
 import { getColumnOrder } from '@mathesar/utils/tables';
 import { Meta } from './meta';
 import { ColumnsDataStore } from './columns';
@@ -44,7 +44,10 @@ export interface TabularDataProps {
   >[0]['hasEnhancedPrimaryKeyCell'];
 }
 
-export type TabularDataSelection = SheetSelection<RecordRow, ProcessedColumn>;
+export type TabularDataSelection = LegacySheetSelection<
+  RecordRow,
+  ProcessedColumn
+>;
 
 export class TabularData {
   id: DBObjectEntry['id'];
@@ -63,7 +66,7 @@ export class TabularData {
 
   isLoading: Readable<boolean>;
 
-  selection: TabularDataSelection;
+  legacySelection: TabularDataSelection;
 
   table: TableEntry;
 
@@ -109,7 +112,7 @@ export class TabularData {
 
     this.table = props.table;
 
-    this.selection = new SheetSelection({
+    this.legacySelection = new LegacySheetSelection({
       getColumns: () => [...get(this.processedColumns).values()],
       getColumnOrder: () =>
         getColumnOrder([...get(this.processedColumns).values()], this.table),
@@ -218,7 +221,7 @@ export class TabularData {
     this.recordsData.destroy();
     this.constraintsDataStore.destroy();
     this.columnsDataStore.destroy();
-    this.selection.destroy();
+    this.legacySelection.destroy();
   }
 }
 
diff --git a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
index bf3985c226..2b7ee402e2 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
@@ -14,7 +14,7 @@ import type {
   QueryColumnMetaData,
 } from '@mathesar/api/types/queries';
 import { runQuery } from '@mathesar/stores/queries';
-import { SheetSelection } from '@mathesar/components/sheet';
+import { LegacySheetSelection } from '@mathesar/components/sheet';
 import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
 import type QueryModel from './QueryModel';
 import QueryInspector from './QueryInspector';
@@ -42,7 +42,7 @@ export interface QueryRowsData {
   rows: QueryRow[];
 }
 
-export type QuerySheetSelection = SheetSelection<
+export type QuerySheetSelection = LegacySheetSelection<
   QueryRow,
   ProcessedQueryOutputColumn
 >;
@@ -81,7 +81,7 @@ export default class QueryRunner<
     this.query = writable(query);
     this.speculateProcessedColumns();
     void this.run();
-    this.selection = new SheetSelection({
+    this.selection = new LegacySheetSelection({
       getColumns: () => [...get(this.processedColumns).values()],
       getColumnOrder: () =>
         [...get(this.processedColumns).values()].map((column) => column.id),
diff --git a/mathesar_ui/src/systems/table-view/Body.svelte b/mathesar_ui/src/systems/table-view/Body.svelte
index bed4c366a6..f917c5dc71 100644
--- a/mathesar_ui/src/systems/table-view/Body.svelte
+++ b/mathesar_ui/src/systems/table-view/Body.svelte
@@ -31,7 +31,7 @@
 
   export let usesVirtualList = false;
 
-  $: ({ id, display, columnsDataStore, selection } = $tabularData);
+  $: ({ id, display, columnsDataStore } = $tabularData);
   $: ({ displayableRecords } = display);
   $: ({ pkColumn } = columnsDataStore);
 
diff --git a/mathesar_ui/src/systems/table-view/StatusPane.svelte b/mathesar_ui/src/systems/table-view/StatusPane.svelte
index 36a0672e1c..459e02c56c 100644
--- a/mathesar_ui/src/systems/table-view/StatusPane.svelte
+++ b/mathesar_ui/src/systems/table-view/StatusPane.svelte
@@ -32,7 +32,7 @@
     isLoading,
     columnsDataStore,
     constraintsDataStore,
-    selection,
+    legacySelection: selection,
   } = $tabularData);
   $: ({ pagination } = meta);
   $: ({ size: pageSize, leftBound, rightBound } = $pagination);
diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte
index 3cb518ae72..8e7e129cff 100644
--- a/mathesar_ui/src/systems/table-view/TableView.svelte
+++ b/mathesar_ui/src/systems/table-view/TableView.svelte
@@ -40,8 +40,13 @@
   $: usesVirtualList = context === 'page';
   $: allowsDdlOperations = context === 'page' && canExecuteDDL;
   $: sheetHasBorder = context === 'widget';
-  $: ({ processedColumns, display, isLoading, selection, recordsData } =
-    $tabularData);
+  $: ({
+    processedColumns,
+    display,
+    isLoading,
+    legacySelection: selection,
+    recordsData,
+  } = $tabularData);
   $: clipboardHandler = new SheetClipboardHandler({
     selection,
     toast,
diff --git a/mathesar_ui/src/systems/table-view/header/Header.svelte b/mathesar_ui/src/systems/table-view/header/Header.svelte
index e70a5574fd..3b71564078 100644
--- a/mathesar_ui/src/systems/table-view/header/Header.svelte
+++ b/mathesar_ui/src/systems/table-view/header/Header.svelte
@@ -28,7 +28,7 @@
   $: columnOrder = columnOrder ?? [];
   $: columnOrderString = columnOrder.map(String);
 
-  $: ({ selection, processedColumns } = $tabularData);
+  $: ({ legacySelection: selection, processedColumns } = $tabularData);
   $: ({
     selectedCells,
     columnsSelectedWhenTheTableIsEmpty,
diff --git a/mathesar_ui/src/systems/table-view/row/Row.svelte b/mathesar_ui/src/systems/table-view/row/Row.svelte
index eb717f1ba6..967c17b677 100644
--- a/mathesar_ui/src/systems/table-view/row/Row.svelte
+++ b/mathesar_ui/src/systems/table-view/row/Row.svelte
@@ -29,8 +29,13 @@
 
   const tabularData = getTabularDataStoreFromContext();
 
-  $: ({ recordsData, columnsDataStore, meta, processedColumns, selection } =
-    $tabularData);
+  $: ({
+    recordsData,
+    columnsDataStore,
+    meta,
+    processedColumns,
+    legacySelection: selection,
+  } = $tabularData);
   $: ({
     rowStatus,
     rowCreationStatus,
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte b/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
index 967d289a26..d628a0d124 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
@@ -29,7 +29,7 @@
   let activeTab: TabItem;
 
   const tabularData = getTabularDataStoreFromContext();
-  $: ({ selection } = $tabularData);
+  $: ({ legacySelection: selection } = $tabularData);
   $: ({ selectedCells } = selection);
 
   $: {
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
index cf92780c1b..fe1e01f610 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
@@ -21,7 +21,7 @@
 
   $: database = $currentDatabase;
   $: schema = $currentSchema;
-  $: ({ processedColumns, selection } = $tabularData);
+  $: ({ processedColumns, legacySelection: selection } = $tabularData);
   $: ({ selectedCells, columnsSelectedWhenTheTableIsEmpty } = selection);
   $: selectedColumns = (() => {
     const ids = selection.getSelectedUniqueColumnsId(
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte b/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte
index cb1d622145..ed5d468f15 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte
@@ -48,7 +48,11 @@
 
   export let controller: ExtractColumnsModalController;
 
-  $: ({ processedColumns, constraintsDataStore, selection } = $tabularData);
+  $: ({
+    processedColumns,
+    constraintsDataStore,
+    legacySelection: selection,
+  } = $tabularData);
   $: ({ constraints } = $constraintsDataStore);
   $: availableProcessedColumns = [...$processedColumns.values()];
   $: ({ targetType, columns, isOpen } = controller);
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte
index f85100b121..878701fec1 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte
@@ -14,7 +14,7 @@
 
   $: database = $currentDatabase;
   $: schema = $currentSchema;
-  $: ({ selection, recordsData } = $tabularData);
+  $: ({ legacySelection: selection, recordsData } = $tabularData);
   $: ({ selectedCells } = selection);
   $: selectedRowIndices = $selectedCells
     .valuesArray()

From 8157a8bc27cac20951ecca92edd795444a06911c Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 19 Jul 2023 13:53:22 -0400
Subject: [PATCH 06/85] Begin integrating SheetSelection into TabularData

---
 .../src/components/sheet/selection/Plane.ts   |  8 +--
 .../src/components/sheet/selection/Series.ts  |  5 +-
 .../sheet/selection/SheetSelection.ts         | 37 +++++++++-----
 mathesar_ui/src/stores/table-data/records.ts  | 12 +++++
 .../src/stores/table-data/tabularData.ts      | 49 ++++++++++++++++---
 5 files changed, 86 insertions(+), 25 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/selection/Plane.ts b/mathesar_ui/src/components/sheet/selection/Plane.ts
index 20ed0fccc5..7a3185852e 100644
--- a/mathesar_ui/src/components/sheet/selection/Plane.ts
+++ b/mathesar_ui/src/components/sheet/selection/Plane.ts
@@ -3,7 +3,7 @@ import { map } from 'iter-tools';
 import { cartesianProduct } from '@mathesar/utils/iterUtils';
 import { makeCellId, parseCellId } from '../cellIds';
 import { Direction, getColumnOffset, getRowOffset } from './Direction';
-import type Series from './Series';
+import Series from './Series';
 
 function makeCells(
   rowIds: Iterable<string>,
@@ -52,9 +52,9 @@ export default class Plane {
   readonly placeholderRowId: string | undefined;
 
   constructor(
-    rowIds: Series<string>,
-    columnIds: Series<string>,
-    placeholderRowId: string | undefined,
+    rowIds: Series<string> = new Series(),
+    columnIds: Series<string> = new Series(),
+    placeholderRowId?: string,
   ) {
     this.rowIds = rowIds;
     this.columnIds = columnIds;
diff --git a/mathesar_ui/src/components/sheet/selection/Series.ts b/mathesar_ui/src/components/sheet/selection/Series.ts
index 7b8cd45dcc..7034fd06b7 100644
--- a/mathesar_ui/src/components/sheet/selection/Series.ts
+++ b/mathesar_ui/src/components/sheet/selection/Series.ts
@@ -1,6 +1,7 @@
-import { ImmutableMap } from '@mathesar/component-library';
 import { filter, findBest, firstHighest, firstLowest } from 'iter-tools';
 
+import { ImmutableMap } from '@mathesar/component-library';
+
 export default class Series<Id> {
   private readonly values: Id[];
 
@@ -10,7 +11,7 @@ export default class Series<Id> {
   /**
    * @throws Error if duplicate values are provided
    */
-  constructor(values: Id[]) {
+  constructor(values: Id[] = []) {
     this.values = values;
     this.indexLookup = new ImmutableMap(
       values.map((value, index) => [value, index]),
diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index ba8c8b1b8b..a16948d9e0 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -4,22 +4,26 @@ import { ImmutableSet } from '@mathesar/component-library';
 import { assertExhaustive } from '@mathesar/utils/typeUtils';
 import { parseCellId } from '../cellIds';
 import { Direction, getColumnOffset } from './Direction';
-import type Plane from './Plane';
+import Plane from './Plane';
 
 /**
- * - `'dataCells'` means that the selection contains data cells. This is by
- *   far the most common type of selection basis.
+ * - `'dataCells'` means that the selection contains data cells. This is by far
+ *   the most common type of selection basis.
  *
- * - `'emptyColumns'` is used when the sheet has no rows. In this case we
- *   still want to allow the user to select columns, so we use this basis.
+ * - `'emptyColumns'` is used when the sheet has no rows. In this case we still
+ *   want to allow the user to select columns, so we use this basis.
  *
  * - `'placeholderCell'` is used when the user is selecting a cell in the
- *   placeholder row. This is a special case because we don't want to allow
- *   the user to select multiple cells in the placeholder row, and we also
- *   don't want to allow selections that include cells in data rows _and_ the
+ *   placeholder row. This is a special case because we don't want to allow the
+ *   user to select multiple cells in the placeholder row, and we also don't
+ *   want to allow selections that include cells in data rows _and_ the
  *   placeholder row.
+ *
+ * - `'empty'` is used when no cells are selected. We try to avoid this state,
+ *   but we also allow for it because it makes it easier to construct selection
+ *   instances if we don't already have the full plane data.
  */
-type BasisType = 'dataCells' | 'emptyColumns' | 'placeholderCell';
+type BasisType = 'dataCells' | 'emptyColumns' | 'placeholderCell' | 'empty';
 
 interface Basis {
   readonly type: BasisType;
@@ -67,12 +71,22 @@ function basisFromPlaceholderCell(activeCellId: string): Basis {
   };
 }
 
+function emptyBasis(): Basis {
+  return {
+    type: 'empty',
+    activeCellId: undefined,
+    cellIds: new ImmutableSet(),
+    columnIds: new ImmutableSet(),
+    rowIds: new ImmutableSet(),
+  };
+}
+
 export default class SheetSelection {
   private readonly plane: Plane;
 
   private readonly basis: Basis;
 
-  constructor(plane: Plane, basis: Basis) {
+  constructor(plane: Plane = new Plane(), basis: Basis = emptyBasis()) {
     this.plane = plane;
     this.basis = basis;
   }
@@ -187,7 +201,8 @@ export default class SheetSelection {
    * @returns a new selection that fits within the provided plane. This is
    * useful when a column is deleted, reordered, or inserted.
    */
-  forNewPlane(plane: Plane): SheetSelection {
+  forNewPlane(newPlane: Plane): SheetSelection {
+    // TODO_NEXT
     throw new Error('Not implemented');
   }
 
diff --git a/mathesar_ui/src/stores/table-data/records.ts b/mathesar_ui/src/stores/table-data/records.ts
index 4719c1ac81..870770ff9e 100644
--- a/mathesar_ui/src/stores/table-data/records.ts
+++ b/mathesar_ui/src/stores/table-data/records.ts
@@ -29,6 +29,7 @@ import {
   patchAPI,
   postAPI,
 } from '@mathesar/api/utils/requestUtils';
+import Series from '@mathesar/components/sheet/selection/Series';
 import type Pagination from '@mathesar/utils/Pagination';
 import { getErrorMessage } from '@mathesar/utils/errors';
 import { pluralize } from '@mathesar/utils/languageUtils';
@@ -293,6 +294,8 @@ export class RecordsData {
 
   error: Writable<string | undefined>;
 
+  selectableRowIds: Readable<Series<string>>;
+
   private promise: CancellablePromise<ApiRecordsResponse> | undefined;
 
   // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
@@ -339,6 +342,15 @@ export class RecordsData {
     this.url = `/api/db/v0/tables/${this.parentId}/records/`;
     void this.fetch();
 
+    this.selectableRowIds = derived(
+      [this.savedRecords, this.newRecords],
+      ([savedRecords, newRecords]) =>
+        new Series([
+          ...savedRecords.map((r) => r.identifier),
+          ...newRecords.map((r) => r.identifier),
+        ]),
+    );
+
     // TODO: Create base class to abstract subscriptions and unsubscriptions
     this.requestParamsUnsubscriber =
       this.meta.recordsRequestParamsData.subscribe(() => {
diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts
index 543e977ea3..086affd1e3 100644
--- a/mathesar_ui/src/stores/table-data/tabularData.ts
+++ b/mathesar_ui/src/stores/table-data/tabularData.ts
@@ -1,30 +1,34 @@
 import { getContext, setContext } from 'svelte';
 import {
   derived,
-  writable,
   get,
+  writable,
   type Readable,
   type Writable,
 } from 'svelte/store';
+
 import type { DBObjectEntry } from '@mathesar/AppTypes';
 import type { TableEntry } from '@mathesar/api/types/tables';
-import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
-import { States } from '@mathesar/api/utils/requestUtils';
 import type { Column } from '@mathesar/api/types/tables/columns';
+import { States } from '@mathesar/api/utils/requestUtils';
 import { LegacySheetSelection } from '@mathesar/components/sheet';
-import { getColumnOrder } from '@mathesar/utils/tables';
-import { Meta } from './meta';
+import Plane from '@mathesar/components/sheet/selection/Plane';
+import Series from '@mathesar/components/sheet/selection/Series';
+import SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
+import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
+import { getColumnOrder, orderProcessedColumns } from '@mathesar/utils/tables';
 import { ColumnsDataStore } from './columns';
-import type { RecordRow, TableRecordsData } from './records';
-import { RecordsData } from './records';
-import { Display } from './display';
 import type { ConstraintsData } from './constraints';
 import { ConstraintsDataStore } from './constraints';
+import { Display } from './display';
+import { Meta } from './meta';
 import type {
   ProcessedColumn,
   ProcessedColumnsStore,
 } from './processedColumns';
 import { processColumn } from './processedColumns';
+import type { RecordRow, TableRecordsData } from './records';
+import { RecordsData } from './records';
 
 export interface TabularDataProps {
   id: DBObjectEntry['id'];
@@ -56,8 +60,11 @@ export class TabularData {
 
   columnsDataStore: ColumnsDataStore;
 
+  /** TODO eliminate `processedColumns` in favor of `orderedProcessedColumns` */
   processedColumns: ProcessedColumnsStore;
 
+  orderedProcessedColumns: ProcessedColumnsStore;
+
   constraintsDataStore: ConstraintsDataStore;
 
   recordsData: RecordsData;
@@ -68,8 +75,12 @@ export class TabularData {
 
   legacySelection: TabularDataSelection;
 
+  selection: Writable<SheetSelection>;
+
   table: TableEntry;
 
+  cleanupFunctions: (() => void)[] = [];
+
   constructor(props: TabularDataProps) {
     const contextualFilters =
       props.contextualFilters ?? new Map<number, string | number>();
@@ -112,6 +123,27 @@ export class TabularData {
 
     this.table = props.table;
 
+    this.orderedProcessedColumns = derived(this.processedColumns, (p) =>
+      orderProcessedColumns(p, this.table),
+    );
+
+    const plane = derived(
+      [this.recordsData.selectableRowIds, this.orderedProcessedColumns],
+      ([selectableRowIds, orderedProcessedColumns]) => {
+        const columnIds = new Series(
+          [...orderedProcessedColumns.values()].map((c) => String(c.id)),
+        );
+        return new Plane(selectableRowIds, columnIds);
+      },
+    );
+
+    // TODO add id of placeholder row to selection
+    this.selection = writable(new SheetSelection());
+
+    this.cleanupFunctions.push(
+      plane.subscribe((p) => this.selection.update((s) => s.forNewPlane(p))),
+    );
+
     this.legacySelection = new LegacySheetSelection({
       getColumns: () => [...get(this.processedColumns).values()],
       getColumnOrder: () =>
@@ -222,6 +254,7 @@ export class TabularData {
     this.constraintsDataStore.destroy();
     this.columnsDataStore.destroy();
     this.legacySelection.destroy();
+    this.cleanupFunctions.forEach((f) => f());
   }
 }
 

From 640eb9b08ba1636005cad928652c13a41de4731e Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Fri, 25 Aug 2023 09:42:40 -0400
Subject: [PATCH 07/85] Some readability improvements

---
 .../src/components/sheet/selection/Plane.ts   | 12 +++++++
 .../src/components/sheet/selection/Series.ts  | 36 ++++++++++---------
 .../sheet/selection/SheetSelection.ts         | 17 +++++++++
 3 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/selection/Plane.ts b/mathesar_ui/src/components/sheet/selection/Plane.ts
index 7a3185852e..2fd4b9df48 100644
--- a/mathesar_ui/src/components/sheet/selection/Plane.ts
+++ b/mathesar_ui/src/components/sheet/selection/Plane.ts
@@ -44,6 +44,18 @@ function adjacentPlaceholderCell(cellId: string): AdjacentCell {
   return { type: 'placeholderCell', cellId };
 }
 
+/**
+ * A Plane is like a coordinate system for a sheet. We can query it to find the
+ * ids of cells within certain bounding rectangles.
+ *
+ * The Plane can also have a "placeholder row", which is a row at the bottom of
+ * the sheet that provides a visual cue to the user that they can add more rows.
+ * It never contains any data, but we allow the user to move the active cell
+ * into the placeholder row in order to easily add more rows.
+ *
+ * The term "Flexible" is used in methods to indicate that it will gracefully
+ * handle ids of cells within the placeholder row.
+ */
 export default class Plane {
   readonly rowIds: Series<string>;
 
diff --git a/mathesar_ui/src/components/sheet/selection/Series.ts b/mathesar_ui/src/components/sheet/selection/Series.ts
index 7034fd06b7..cbfd31d16d 100644
--- a/mathesar_ui/src/components/sheet/selection/Series.ts
+++ b/mathesar_ui/src/components/sheet/selection/Series.ts
@@ -2,16 +2,20 @@ import { filter, findBest, firstHighest, firstLowest } from 'iter-tools';
 
 import { ImmutableMap } from '@mathesar/component-library';
 
-export default class Series<Id> {
-  private readonly values: Id[];
+/**
+ * A Series is an immutable ordered collection of values with methods that
+ * provide efficient access to _ranges_ of those values.
+ */
+export default class Series<Value> {
+  private readonly values: Value[];
 
   /** Maps the id value to its index */
-  private readonly indexLookup: ImmutableMap<Id, number>;
+  private readonly indexLookup: ImmutableMap<Value, number>;
 
   /**
    * @throws Error if duplicate values are provided
    */
-  constructor(values: Id[] = []) {
+  constructor(values: Value[] = []) {
     this.values = values;
     this.indexLookup = new ImmutableMap(
       values.map((value, index) => [value, index]),
@@ -21,7 +25,7 @@ export default class Series<Id> {
     }
   }
 
-  private getIndex(value: Id): number | undefined {
+  private getIndex(value: Value): number | undefined {
     return this.indexLookup.get(value);
   }
 
@@ -36,7 +40,7 @@ export default class Series<Id> {
    *
    * @throws an Error if either value is not present in the sequence
    */
-  range(a: Id, b: Id): Iterable<Id> {
+  range(a: Value, b: Value): Iterable<Value> {
     const aIndex = this.getIndex(a);
     const bIndex = this.getIndex(b);
 
@@ -50,15 +54,15 @@ export default class Series<Id> {
     return this.values.slice(startIndex, endIndex + 1);
   }
 
-  get first(): Id | undefined {
+  get first(): Value | undefined {
     return this.values[0];
   }
 
-  get last(): Id | undefined {
+  get last(): Value | undefined {
     return this.values[this.values.length - 1];
   }
 
-  has(value: Id): boolean {
+  has(value: Value): boolean {
     return this.getIndex(value) !== undefined;
   }
 
@@ -72,18 +76,18 @@ export default class Series<Id> {
    * https://github.com/iter-tools/iter-tools/blob/d7.5/API.md#compare-values-and-return-true-or-false
    */
   best(
-    values: Iterable<Id>,
+    values: Iterable<Value>,
     comparator: (best: number, v: number) => boolean,
-  ): Id | undefined {
+  ): Value | undefined {
     const validValues = filter((v) => this.has(v), values);
     return findBest(comparator, (v) => this.getIndex(v) ?? 0, validValues);
   }
 
-  min(values: Iterable<Id>): Id | undefined {
+  min(values: Iterable<Value>): Value | undefined {
     return this.best(values, firstLowest);
   }
 
-  max(values: Iterable<Id>): Id | undefined {
+  max(values: Iterable<Value>): Value | undefined {
     return this.best(values, firstHighest);
   }
 
@@ -94,7 +98,7 @@ export default class Series<Id> {
    * given value. If no such value is present, then `undefined` will be
    * returned.
    */
-  offset(value: Id, offset: number): Id | undefined {
+  offset(value: Value, offset: number): Value | undefined {
     if (offset === 0) {
       return this.has(value) ? value : undefined;
     }
@@ -112,7 +116,7 @@ export default class Series<Id> {
    * value in the block. If no such value is present, then `undefined` will be
    * returned. If offset is zero, then `undefined` will be returned.
    */
-  collapsedOffset(values: Iterable<Id>, offset: number): Id | undefined {
+  collapsedOffset(values: Iterable<Value>, offset: number): Value | undefined {
     if (offset === 0) {
       return undefined;
     }
@@ -123,7 +127,7 @@ export default class Series<Id> {
     return this.offset(outerValue, offset);
   }
 
-  [Symbol.iterator](): Iterator<Id> {
+  [Symbol.iterator](): Iterator<Value> {
     return this.values[Symbol.iterator]();
   }
 }
diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index a16948d9e0..d9b7bcd84f 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -25,6 +25,14 @@ import Plane from './Plane';
  */
 type BasisType = 'dataCells' | 'emptyColumns' | 'placeholderCell' | 'empty';
 
+/**
+ * This type stores data about "which cells are selected", with some redundancy
+ * for efficient and consistent lookup across different kinds of selections.
+ *
+ * Due to the redundant nature of some properties on this type, you should be
+ * sure to only instantiate Basis using the utility functions below. This will
+ * ensure that the data is always valid.
+ */
 interface Basis {
   readonly type: BasisType;
   readonly activeCellId: string | undefined;
@@ -81,6 +89,15 @@ function emptyBasis(): Basis {
   };
 }
 
+/**
+ * This is an immutable data structure which fully represents the state of a
+ * selection selection of cells along with the Plane in which they were
+ * selected.
+ *
+ * We store the Plane here so to make it possible to provide methods on
+ * `SheetSelection` instances which return new mutations of the selection that
+ * are still valid within the Plane.
+ */
 export default class SheetSelection {
   private readonly plane: Plane;
 

From de875e41130da4d667e0615a04a4d18a852f20f4 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Fri, 25 Aug 2023 10:48:46 -0400
Subject: [PATCH 08/85] Add `intersect` method to ImmutableSet

---
 .../component-library/common/utils/ImmutableSet.ts   |  9 +++++++++
 .../common/utils/__tests__/ImmutableSet.test.ts      | 12 ++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/mathesar_ui/src/component-library/common/utils/ImmutableSet.ts b/mathesar_ui/src/component-library/common/utils/ImmutableSet.ts
index 609c156ecd..d442984ad0 100644
--- a/mathesar_ui/src/component-library/common/utils/ImmutableSet.ts
+++ b/mathesar_ui/src/component-library/common/utils/ImmutableSet.ts
@@ -32,6 +32,15 @@ export default class ImmutableSet<T> {
     return this.getNewInstance(set);
   }
 
+  /**
+   * @returns a new ImmutableSet that contains only the items that are present
+   * in both this set and the other set. The order of the items in the returned
+   * set is taken from this set (not the supplied set).
+   */
+  intersect(other: { has: (v: T) => boolean }): this {
+    return this.getNewInstance([...this].filter((v) => other.has(v)));
+  }
+
   without(itemOrItems: T | T[]): this {
     const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
     const set = new Set(this.set);
diff --git a/mathesar_ui/src/component-library/common/utils/__tests__/ImmutableSet.test.ts b/mathesar_ui/src/component-library/common/utils/__tests__/ImmutableSet.test.ts
index 24938eb957..3d20add0d6 100644
--- a/mathesar_ui/src/component-library/common/utils/__tests__/ImmutableSet.test.ts
+++ b/mathesar_ui/src/component-library/common/utils/__tests__/ImmutableSet.test.ts
@@ -20,3 +20,15 @@ test('union', () => {
   expect(a.union(empty).valuesArray()).toEqual([2, 7, 13, 19, 5]);
   expect(empty.union(a).valuesArray()).toEqual([2, 7, 13, 19, 5]);
 });
+
+test('intersect', () => {
+  const a = new ImmutableSet([2, 7, 13, 19, 5]);
+  const b = new ImmutableSet([23, 13, 3, 2]);
+  const empty = new ImmutableSet<number>();
+  expect(a.intersect(a).valuesArray()).toEqual([2, 7, 13, 19, 5]);
+  expect(a.intersect(b).valuesArray()).toEqual([2, 13]);
+  expect(b.intersect(a).valuesArray()).toEqual([13, 2]);
+  expect(a.intersect(empty).valuesArray()).toEqual([]);
+  expect(empty.intersect(a).valuesArray()).toEqual([]);
+  expect(empty.intersect(empty).valuesArray()).toEqual([]);
+});

From c64e12b87a9f6d81b19770e0c0290fc235309b0f Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Fri, 25 Aug 2023 21:57:14 -0400
Subject: [PATCH 09/85] Refactor Series tests to use cases

---
 .../sheet/selection/__tests__/Series.test.ts  | 116 +++++++++++-------
 1 file changed, 75 insertions(+), 41 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/selection/__tests__/Series.test.ts b/mathesar_ui/src/components/sheet/selection/__tests__/Series.test.ts
index 8109932d9f..0d485b64a7 100644
--- a/mathesar_ui/src/components/sheet/selection/__tests__/Series.test.ts
+++ b/mathesar_ui/src/components/sheet/selection/__tests__/Series.test.ts
@@ -1,44 +1,78 @@
 import Series from '../Series';
 
-test('Series', () => {
-  const s = new Series(['h', 'i', 'j', 'k', 'l']);
-  expect(s.length).toBe(5);
-  expect(s.first).toBe('h');
-  expect(s.last).toBe('l');
-
-  expect([...s]).toEqual(['h', 'i', 'j', 'k', 'l']);
-
-  expect(s.min(['i', 'j', 'k'])).toBe('i');
-  expect(s.min(['k', 'j', 'i'])).toBe('i');
-  expect(s.min(['i', 'NOPE'])).toBe('i');
-  expect(s.min(['NOPE'])).toBe(undefined);
-  expect(s.min([])).toBe(undefined);
-
-  expect(s.max(['i', 'j', 'k'])).toBe('k');
-  expect(s.max(['k', 'j', 'i'])).toBe('k');
-  expect(s.max(['i', 'NOPE'])).toBe('i');
-  expect(s.max(['NOPE'])).toBe(undefined);
-  expect(s.max([])).toBe(undefined);
-
-  expect([...s.range('i', 'k')]).toEqual(['i', 'j', 'k']);
-  expect([...s.range('k', 'i')]).toEqual(['i', 'j', 'k']);
-  expect([...s.range('i', 'i')]).toEqual(['i']);
-  expect(() => s.range('i', 'NOPE')).toThrow();
-
-  expect(s.offset('i', 0)).toBe('i');
-  expect(s.offset('i', 1)).toBe('j');
-  expect(s.offset('i', 2)).toBe('k');
-  expect(s.offset('i', -1)).toBe('h');
-  expect(s.offset('i', -2)).toBe(undefined);
-  expect(s.offset('NOPE', 0)).toBe(undefined);
-  expect(s.offset('NOPE', 1)).toBe(undefined);
-
-  expect(s.collapsedOffset(['i', 'k'], 0)).toBe(undefined);
-  expect(s.collapsedOffset(['i', 'k'], 1)).toBe('l');
-  expect(s.collapsedOffset(['i', 'k'], 2)).toBe(undefined);
-  expect(s.collapsedOffset(['i', 'k'], -1)).toBe('h');
-  expect(s.collapsedOffset(['i', 'k'], -2)).toBe(undefined);
-  expect(s.collapsedOffset(['i', 'NOPE'], 0)).toBe(undefined);
-  expect(s.collapsedOffset(['i', 'NOPE'], 1)).toBe('j');
-  expect(s.collapsedOffset([], 0)).toBe(undefined);
+describe('Series', () => {
+  const h = 'h';
+  const i = 'i';
+  const j = 'j';
+  const k = 'k';
+  const l = 'l';
+  const all = [h, i, j, k, l];
+  const s = new Series(all);
+
+  test('basics', () => {
+    expect(s.length).toBe(5);
+    expect(s.first).toBe(h);
+    expect(s.last).toBe(l);
+    expect([...s]).toEqual(all);
+  });
+
+  test.each([
+    [[i, j, k], i],
+    [[k, j, i], i],
+    [[i, 'NOPE'], i],
+    [['NOPE'], undefined],
+    [[], undefined],
+  ])('min %#', (input, expected) => {
+    expect(s.min(input)).toBe(expected);
+  });
+
+  test.each([
+    [[i, j, k], k],
+    [[k, j, i], k],
+    [[i, 'NOPE'], i],
+    [['NOPE'], undefined],
+    [[], undefined],
+  ])('max %#', (input, expected) => {
+    expect(s.max(input)).toBe(expected);
+  });
+
+  test.each([
+    [i, k, [i, j, k]],
+    [k, i, [i, j, k]],
+    [i, i, [i]],
+  ])('range %#', (a, b, expected) => {
+    expect([...s.range(a, b)]).toEqual(expected);
+  });
+
+  test.each([
+    [i, 'NOPE'],
+    ['NOPE', i],
+  ])('range failures %#', (a, b) => {
+    expect(() => s.range(a, b)).toThrow();
+  });
+
+  test.each([
+    [i, 0, i],
+    [i, 1, j],
+    [i, 2, k],
+    [i, -1, h],
+    [i, -2, undefined],
+    ['NOPE', 0, undefined],
+    ['NOPE', 1, undefined],
+  ])('offset %#', (value, offset, expected) => {
+    expect(s.offset(value, offset)).toBe(expected);
+  });
+
+  test.each([
+    [[i, k], 0, undefined],
+    [[i, k], 1, l],
+    [[i, k], 2, undefined],
+    [[i, k], -1, h],
+    [[i, k], -2, undefined],
+    [[i, 'NOPE'], 0, undefined],
+    [[i, 'NOPE'], 1, j],
+    [[], 0, undefined],
+  ])('collapsedOffset %#', (values, offset, expected) => {
+    expect(s.collapsedOffset(values, offset)).toBe(expected);
+  });
 });

From be749bad54be4996f0a4055d4db818b7f5fed7f1 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Fri, 25 Aug 2023 21:57:48 -0400
Subject: [PATCH 10/85] Tiny readability improvement

---
 mathesar_ui/src/components/sheet/selection/Series.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/selection/Series.ts b/mathesar_ui/src/components/sheet/selection/Series.ts
index cbfd31d16d..b0e897aab3 100644
--- a/mathesar_ui/src/components/sheet/selection/Series.ts
+++ b/mathesar_ui/src/components/sheet/selection/Series.ts
@@ -1,10 +1,9 @@
 import { filter, findBest, firstHighest, firstLowest } from 'iter-tools';
-
-import { ImmutableMap } from '@mathesar/component-library';
+import { ImmutableMap } from '@mathesar-component-library';
 
 /**
- * A Series is an immutable ordered collection of values with methods that
- * provide efficient access to _ranges_ of those values.
+ * A Series is an immutable ordered collection of unique values with methods
+ * that provide efficient access to _ranges_ of those values.
  */
 export default class Series<Value> {
   private readonly values: Value[];

From 0476730ddbfaca8bd3548b926ce8c17d0ce1fbba Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Fri, 25 Aug 2023 21:58:20 -0400
Subject: [PATCH 11/85] Implement SheetSelection.forNewPlane

---
 .../src/components/sheet/selection/Plane.ts   | 30 ++++++++-
 .../sheet/selection/SheetSelection.ts         | 62 ++++++++++++++++++-
 2 files changed, 87 insertions(+), 5 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/selection/Plane.ts b/mathesar_ui/src/components/sheet/selection/Plane.ts
index 2fd4b9df48..3f0d87780f 100644
--- a/mathesar_ui/src/components/sheet/selection/Plane.ts
+++ b/mathesar_ui/src/components/sheet/selection/Plane.ts
@@ -145,16 +145,40 @@ export default class Plane {
   ): Iterable<string> {
     const cellA = parseCellId(cellIdA);
     const cellB = parseCellId(cellIdB);
-    const rowIdA = this.normalizeFlexibleRowId(cellA.rowId);
+    return this.dataCellsInFlexibleRowColumnRange(
+      cellA.rowId,
+      cellB.rowId,
+      cellA.columnId,
+      cellB.columnId,
+    );
+  }
+
+  /**
+   * @returns an iterable of all the data cells in the plane that are within the
+   * rectangle bounded by the given rows and columns. This does not include
+   * header cells.
+   *
+   * If either of the provided rowIds are placeholder cells, then cells in the
+   * last row and last column will be used in their place. This ensures that the
+   * selection is made only of data cells, and will never include the
+   * placeholder cell, even if a user drags to select it.
+   */
+  dataCellsInFlexibleRowColumnRange(
+    flexibleRowIdA: string,
+    flexibleRowIdB: string,
+    columnIdA: string,
+    columnIdB: string,
+  ): Iterable<string> {
+    const rowIdA = this.normalizeFlexibleRowId(flexibleRowIdA);
     if (rowIdA === undefined) {
       return [];
     }
-    const rowIdB = this.normalizeFlexibleRowId(cellB.rowId);
+    const rowIdB = this.normalizeFlexibleRowId(flexibleRowIdB);
     if (rowIdB === undefined) {
       return [];
     }
     const rowIds = this.rowIds.range(rowIdA, rowIdB);
-    const columnIds = this.columnIds.range(cellA.columnId, cellB.columnId);
+    const columnIds = this.columnIds.range(columnIdA, columnIdB);
     return makeCells(rowIds, columnIds);
   }
 
diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index d9b7bcd84f..9be7602e84 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -219,8 +219,66 @@ export default class SheetSelection {
    * useful when a column is deleted, reordered, or inserted.
    */
   forNewPlane(newPlane: Plane): SheetSelection {
-    // TODO_NEXT
-    throw new Error('Not implemented');
+    if (this.basis.type === 'dataCells') {
+      if (!newPlane.hasResultRows) {
+        return new SheetSelection(newPlane, basisFromZeroEmptyColumns());
+      }
+      const minColumnId = newPlane.columnIds.min(this.basis.columnIds);
+      const maxColumnId = newPlane.columnIds.max(this.basis.columnIds);
+      const minRowId = newPlane.rowIds.min(this.basis.rowIds);
+      const maxRowId = newPlane.rowIds.max(this.basis.rowIds);
+      if (
+        minColumnId === undefined ||
+        maxColumnId === undefined ||
+        minRowId === undefined ||
+        maxRowId === undefined
+      ) {
+        return new SheetSelection(newPlane);
+      }
+      const cellIds = newPlane.dataCellsInFlexibleRowColumnRange(
+        minRowId,
+        maxRowId,
+        minColumnId,
+        maxColumnId,
+      );
+      return new SheetSelection(newPlane, basisFromDataCells(cellIds));
+    }
+
+    if (this.basis.type === 'emptyColumns') {
+      if (newPlane.hasResultRows) {
+        return new SheetSelection(newPlane);
+      }
+      const minColumnId = newPlane.columnIds.min(this.basis.columnIds);
+      const maxColumnId = newPlane.columnIds.max(this.basis.columnIds);
+      if (minColumnId === undefined || maxColumnId === undefined) {
+        return new SheetSelection(newPlane, basisFromZeroEmptyColumns());
+      }
+      const columnIds = newPlane.columnIds.range(minColumnId, maxColumnId);
+      return new SheetSelection(newPlane, basisFromEmptyColumns(columnIds));
+    }
+
+    if (this.basis.type === 'placeholderCell') {
+      const columnId = first(this.basis.columnIds);
+      if (columnId === undefined) {
+        return new SheetSelection(newPlane);
+      }
+      const newPlaneHasSelectedCell =
+        newPlane.columnIds.has(columnId) &&
+        newPlane.placeholderRowId === this.plane.placeholderRowId;
+      if (newPlaneHasSelectedCell) {
+        // If we can retain the selected placeholder cell, then do so.
+        return new SheetSelection(newPlane, basisFromPlaceholderCell(columnId));
+      }
+      // Otherwise, return an empty selection
+      return new SheetSelection(newPlane);
+    }
+
+    if (this.basis.type === 'empty') {
+      // If the selection is empty, we keep it empty.
+      return new SheetSelection(newPlane);
+    }
+
+    return assertExhaustive(this.basis.type);
   }
 
   /**

From 09cd2198ede775e1d79dad7f05057675e4df9f1e Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Sun, 27 Aug 2023 21:15:45 -0400
Subject: [PATCH 12/85] Begin incorporating new Selection into table sheet

---
 .../sheet/selection/SheetSelection.ts         | 42 ++++++-----
 .../src/systems/table-view/row/Row.svelte     | 41 +++++------
 .../src/systems/table-view/row/RowCell.svelte | 72 ++++++++-----------
 3 files changed, 68 insertions(+), 87 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index 9be7602e84..08f5b67a61 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -55,6 +55,10 @@ function basisFromDataCells(
   };
 }
 
+function basisFromOneDataCell(cellId: string): Basis {
+  return basisFromDataCells([cellId], cellId);
+}
+
 function basisFromEmptyColumns(columnIds: Iterable<string>): Basis {
   return {
     type: 'emptyColumns',
@@ -106,6 +110,8 @@ export default class SheetSelection {
   constructor(plane: Plane = new Plane(), basis: Basis = emptyBasis()) {
     this.plane = plane;
     this.basis = basis;
+    // TODO validate that basis is valid within plane. For example, remove
+    // selected cells from the basis that do not occur within the plane.
   }
 
   get activeCellId() {
@@ -199,19 +205,17 @@ export default class SheetSelection {
   }
 
   /**
-   * @returns a new selection formed from one cell within the placeholder row.
-   * Note that we do not support selections of multiple cells in the placeholder
-   * row.
+   * @returns a new selection formed from one cell within the data rows or the
+   * placeholder row.
    */
-  atPlaceholderCell(cellId: string): SheetSelection {
-    return this.withBasis(basisFromPlaceholderCell(cellId));
-  }
-
-  /**
-   * @returns a new selection formed from one cell within the data rows.
-   */
-  atDataCell(cellId: string): SheetSelection {
-    return this.withBasis(basisFromDataCells([cellId], cellId));
+  ofOneCell(cellId: string): SheetSelection {
+    const { rowId } = parseCellId(cellId);
+    const { placeholderRowId } = this.plane;
+    const makeBasis =
+      rowId === placeholderRowId
+        ? basisFromPlaceholderCell
+        : basisFromOneDataCell;
+    return this.withBasis(makeBasis(cellId));
   }
 
   /**
@@ -233,6 +237,10 @@ export default class SheetSelection {
         minRowId === undefined ||
         maxRowId === undefined
       ) {
+        // TODO: in some cases maybe we can be smarter here. Instead of
+        // returning an empty selection, we could try to return a selection of
+        // the same dimensions that is placed as close as possible to the
+        // original selection.
         return new SheetSelection(newPlane);
       }
       const cellIds = newPlane.dataCellsInFlexibleRowColumnRange(
@@ -345,13 +353,9 @@ export default class SheetSelection {
       // If we can't move anywhere, then do nothing
       return this;
     }
-    if (adjacent.type === 'dataCell') {
-      // Move to an adjacent data cell
-      return this.atDataCell(adjacent.cellId);
-    }
-    if (adjacent.type === 'placeholderCell') {
-      // Move to an adjacent placeholder cell
-      return this.atPlaceholderCell(adjacent.cellId);
+    if (adjacent.type === 'dataCell' || adjacent.type === 'placeholderCell') {
+      // Move to an adjacent data cell or adjacent placeholder cell
+      return this.ofOneCell(adjacent.cellId);
     }
     return assertExhaustive(adjacent);
   }
diff --git a/mathesar_ui/src/systems/table-view/row/Row.svelte b/mathesar_ui/src/systems/table-view/row/Row.svelte
index 967c17b677..07a1faab61 100644
--- a/mathesar_ui/src/systems/table-view/row/Row.svelte
+++ b/mathesar_ui/src/systems/table-view/row/Row.svelte
@@ -11,11 +11,7 @@
     ID_ROW_CONTROL_COLUMN,
     type Row,
   } from '@mathesar/stores/table-data';
-  import {
-    SheetRow,
-    SheetCell,
-    isRowSelected,
-  } from '@mathesar/components/sheet';
+  import { SheetRow, SheetCell } from '@mathesar/components/sheet';
   import { rowHeightPx } from '@mathesar/geometry';
   import { ContextMenu } from '@mathesar/component-library';
   import NewRecordMessage from './NewRecordMessage.svelte';
@@ -29,13 +25,8 @@
 
   const tabularData = getTabularDataStoreFromContext();
 
-  $: ({
-    recordsData,
-    columnsDataStore,
-    meta,
-    processedColumns,
-    legacySelection: selection,
-  } = $tabularData);
+  $: ({ recordsData, columnsDataStore, meta, processedColumns, selection } =
+    $tabularData);
   $: ({
     rowStatus,
     rowCreationStatus,
@@ -50,29 +41,31 @@
   $: creationStatus = $rowCreationStatus.get(rowKey)?.state;
   $: status = $rowStatus.get(rowKey);
   $: wholeRowState = status?.wholeRowState;
-  $: ({ selectedCells } = selection);
-  $: isSelected = rowHasRecord(row) && isRowSelected($selectedCells, row);
+  $: isSelected = $selection.rowIds.has(row.identifier);
   $: hasWholeRowErrors = wholeRowState === 'failure';
   /** Including whole row errors and individual cell errors */
   $: hasAnyErrors = !!status?.errorsFromWholeRowAndCells?.length;
 
   function checkAndCreateEmptyRow() {
-    if (isPlaceholderRow(row)) {
-      void recordsData.addEmptyRecord();
-      selection.selectAndActivateFirstDataEntryCellInLastRow();
-    }
+    // // TODO_3037
+    // if (isPlaceholderRow(row)) {
+    //   void recordsData.addEmptyRecord();
+    //   selection.selectAndActivateFirstDataEntryCellInLastRow();
+    // }
   }
 
   const handleRowMouseDown = () => {
-    if (rowHasRecord(row) && !isPlaceholderRow(row)) {
-      selection.onRowSelectionStart(row);
-    }
+    // // TODO_3037
+    // if (rowHasRecord(row) && !isPlaceholderRow(row)) {
+    //   selection.onRowSelectionStart(row);
+    // }
   };
 
   const handleRowMouseEnter = () => {
-    if (rowHasRecord(row) && !isPlaceholderRow(row)) {
-      selection.onMouseEnterRowHeaderWhileSelection(row);
-    }
+    // // TODO_3037
+    // if (rowHasRecord(row) && !isPlaceholderRow(row)) {
+    //   selection.onMouseEnterRowHeaderWhileSelection(row);
+    // }
   };
 </script>
 
diff --git a/mathesar_ui/src/systems/table-view/row/RowCell.svelte b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
index d91fb0657a..0b9aa43f15 100644
--- a/mathesar_ui/src/systems/table-view/row/RowCell.svelte
+++ b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
@@ -1,26 +1,27 @@
 <script lang="ts">
   import { tick } from 'svelte';
+  import type { Writable } from 'svelte/store';
 
   import {
     ButtonMenuItem,
     ContextMenu,
     LinkMenuItem,
-    WritableMap,
     MenuDivider,
     MenuHeading,
+    WritableMap,
   } from '@mathesar-component-library';
   import type { RequestStatus } from '@mathesar/api/utils/requestUtils';
   import { States } from '@mathesar/api/utils/requestUtils';
-  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
   import CellBackground from '@mathesar/components/CellBackground.svelte';
   import Null from '@mathesar/components/Null.svelte';
   import RowCellBackgrounds from '@mathesar/components/RowCellBackgrounds.svelte';
+  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
   import {
-    isCellActive,
-    isCellSelected,
-    scrollBasedOnActiveCell,
     SheetCell,
+    scrollBasedOnActiveCell,
   } from '@mathesar/components/sheet';
+  import { makeCellId } from '@mathesar/components/sheet/cellIds';
+  import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
   import { iconLinkToRecordPage, iconSetToNull } from '@mathesar/icons';
   import { currentDatabase } from '@mathesar/stores/databases';
   import { currentSchema } from '@mathesar/stores/schemas';
@@ -31,15 +32,14 @@
     type ProcessedColumn,
     type RecordRow,
     type RecordsData,
-    type TabularDataSelection,
   } from '@mathesar/stores/table-data';
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
-  import CellErrors from './CellErrors.svelte';
   import ColumnHeaderContextMenu from '../header/header-cell/ColumnHeaderContextMenu.svelte';
+  import CellErrors from './CellErrors.svelte';
   import RowContextOptions from './RowContextOptions.svelte';
 
   export let recordsData: RecordsData;
-  export let selection: TabularDataSelection;
+  export let selection: Writable<SheetSelection>;
   export let row: RecordRow;
   export let rowHasErrors = false;
   export let key: CellKey;
@@ -51,6 +51,7 @@
 
   const userProfile = getUserProfileStoreFromContext();
 
+  $: cellId = makeCellId(row.identifier, String(processedColumn.id));
   $: database = $currentDatabase;
   $: schema = $currentSchema;
   $: canEditTableRecords = !!$userProfile?.hasPermission(
@@ -65,28 +66,8 @@
   $: ({ recordSummaries } = recordsData);
   $: ({ column, linkFk } = processedColumn);
   $: columnId = column.id;
-  $: ({ activeCell, selectedCells } = selection);
-  $: isActive = $activeCell && isCellActive($activeCell, row, processedColumn);
-
-  /**
-   * The name indicates that this boolean is only true when more than one cell
-   * is selected. However, because of the bug that [the active cell and selected
-   * cells do not remain in sync when using keyboard][1] this boolean is
-   * sometimes true even when multiple cells are selected. This is to
-   * differentiate between different active and selected cell using blue
-   * background styling for selected cell and blue border styling for active
-   * cell.
-   *
-   * The above bug can be fixed when following two conditions are met
-   *
-   * - We are working on keyboard accessability of the application.
-   * - `selectedCells` and `activeCell` are merged in a single store.
-   *
-   * [1]: https://github.com/centerofci/mathesar/issues/1534
-   */
-  $: isSelectedInRange =
-    isCellSelected($selectedCells, row, processedColumn) &&
-    $selectedCells.size > 1;
+  $: isActive = $selection.activeCellId === cellId;
+  $: isSelectedInRange = $selection.cellIds.has(cellId);
   $: modificationStatus = $modificationStatusMap.get(key);
   $: serverErrors =
     modificationStatus?.state === 'failure' ? modificationStatus?.errors : [];
@@ -112,13 +93,14 @@
   async function moveThroughCells(
     event: CustomEvent<{ originalEvent: KeyboardEvent; key: string }>,
   ) {
-    const { originalEvent } = event.detail;
-    const type = selection.handleKeyEventsOnActiveCell(originalEvent);
-    if (type) {
-      originalEvent.stopPropagation();
-      originalEvent.preventDefault();
-      await checkTypeAndScroll(type);
-    }
+    // // TODO_3037
+    // const { originalEvent } = event.detail;
+    // const type = selection.handleKeyEventsOnActiveCell(originalEvent);
+    // if (type) {
+    //   originalEvent.stopPropagation();
+    //   originalEvent.preventDefault();
+    //   await checkTypeAndScroll(type);
+    // }
   }
 
   async function setValue(newValue: unknown) {
@@ -179,18 +161,20 @@
       showAsSkeleton={$recordsDataState === States.Loading}
       disabled={!isEditable}
       on:movementKeyDown={moveThroughCells}
-      on:activate={() => {
-        selection.activateCell(row, processedColumn);
-      }}
+      on:activate={() => selection.update((s) => s.ofOneCell(cellId))}
       on:update={valueUpdated}
       horizontalAlignment={column.primary_key ? 'left' : undefined}
       on:onSelectionStart={() => {
-        selection.onStartSelection(row, processedColumn);
+        // // TODO_3037
+        // selection.onStartSelection(row, processedColumn);
       }}
       on:onMouseEnterCellWhileSelection={() => {
-        // This enables the click + drag to
-        // select multiple cells
-        selection.onMouseEnterCellWhileSelection(row, processedColumn);
+        // // This enables the click + drag to
+        // // select multiple cells
+        // //
+        // // TODO_3037
+        // //
+        // selection.onMouseEnterCellWhileSelection(row, processedColumn);
       }}
     />
     <ContextMenu>

From 63ef9cb8ef9aee7905caac2eb0ec66068dec1e21 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Tue, 29 Aug 2023 11:41:51 -0400
Subject: [PATCH 13/85] Show selection status in column header

---
 .../sheet/selection/SheetSelection.ts         | 50 +++++++++++--
 .../src/stores/table-data/tabularData.ts      |  7 +-
 .../src/systems/table-view/Body.svelte        |  2 -
 .../systems/table-view/header/Header.svelte   | 70 ++++++++-----------
 .../header/drag-and-drop/Draggable.svelte     | 22 +++---
 5 files changed, 92 insertions(+), 59 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index 08f5b67a61..b2da58135f 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -93,6 +93,38 @@ function emptyBasis(): Basis {
   };
 }
 
+function getFullySelectedColumnIds(
+  plane: Plane,
+  basis: Basis,
+): ImmutableSet<string> {
+  if (basis.type === 'dataCells') {
+    // The logic here is: if all rows are selected, then every selected column
+    // FULLY selected. Otherwise, no columns are fully selected.
+    //
+    // THIS LOGIC ASSUMES THAT ALL SELECTIONS ARE RECTANGULAR. The application
+    // enforces this assumption at various levels, but NOT within the Basis data
+    // structure. That is, it's theoretically possible to have basis data which
+    // represents a non-rectangular selection, but such data should be
+    // considered a bug. The logic within this function leverages this
+    // assumption for the purpose of improving performance. If we know that the
+    // selection is rectangular, then we can avoid iterating over all cells in
+    // each selected column to see if the column is fully selected.
+    return basis.rowIds.size < plane.rowIds.length
+      ? new ImmutableSet()
+      : basis.columnIds;
+  }
+  if (basis.type === 'emptyColumns') {
+    return basis.columnIds;
+  }
+  if (basis.type === 'placeholderCell') {
+    return new ImmutableSet();
+  }
+  if (basis.type === 'empty') {
+    return new ImmutableSet();
+  }
+  return assertExhaustive(basis.type);
+}
+
 /**
  * This is an immutable data structure which fully represents the state of a
  * selection selection of cells along with the Plane in which they were
@@ -107,26 +139,36 @@ export default class SheetSelection {
 
   private readonly basis: Basis;
 
+  /** Ids of columns in which _all_ cells are selected */
+  fullySelectedColumnIds: ImmutableSet<string>;
+
   constructor(plane: Plane = new Plane(), basis: Basis = emptyBasis()) {
     this.plane = plane;
     this.basis = basis;
     // TODO validate that basis is valid within plane. For example, remove
     // selected cells from the basis that do not occur within the plane.
+
+    this.fullySelectedColumnIds = getFullySelectedColumnIds(
+      this.plane,
+      this.basis,
+    );
   }
 
-  get activeCellId() {
+  get activeCellId(): string | undefined {
     return this.basis.activeCellId;
   }
 
-  get cellIds() {
+  get cellIds(): ImmutableSet<string> {
     return this.basis.cellIds;
   }
 
-  get rowIds() {
+  /** Ids of rows which are at least _partially_ selected */
+  get rowIds(): ImmutableSet<string> {
     return this.basis.rowIds;
   }
 
-  get columnIds() {
+  /** Ids of columns which are at least _partially_ selected */
+  get columnIds(): ImmutableSet<string> {
     return this.basis.columnIds;
   }
 
diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts
index 8fd5a63cc1..5029d92376 100644
--- a/mathesar_ui/src/stores/table-data/tabularData.ts
+++ b/mathesar_ui/src/stores/table-data/tabularData.ts
@@ -75,6 +75,11 @@ export class TabularData {
 
   isLoading: Readable<boolean>;
 
+  /**
+   * TODO_3037
+   *
+   * @deprecated
+   */
   legacySelection: TabularDataSelection;
 
   selection: Writable<SheetSelection>;
@@ -147,7 +152,7 @@ export class TabularData {
       },
     );
 
-    // TODO add id of placeholder row to selection
+    // TODO_3037 add id of placeholder row to selection
     this.selection = writable(new SheetSelection());
 
     this.cleanupFunctions.push(
diff --git a/mathesar_ui/src/systems/table-view/Body.svelte b/mathesar_ui/src/systems/table-view/Body.svelte
index f917c5dc71..ebb168153f 100644
--- a/mathesar_ui/src/systems/table-view/Body.svelte
+++ b/mathesar_ui/src/systems/table-view/Body.svelte
@@ -59,8 +59,6 @@
   }
 </script>
 
-<svelte:window />
-
 {#key id}
   {#if usesVirtualList}
     <SheetVirtualRows
diff --git a/mathesar_ui/src/systems/table-view/header/Header.svelte b/mathesar_ui/src/systems/table-view/header/Header.svelte
index 3b71564078..01d7fa1d3b 100644
--- a/mathesar_ui/src/systems/table-view/header/Header.svelte
+++ b/mathesar_ui/src/systems/table-view/header/Header.svelte
@@ -1,23 +1,24 @@
 <script lang="ts">
+  import { first } from 'iter-tools';
+
+  import type { TableEntry } from '@mathesar/api/types/tables';
+  import { ContextMenu } from '@mathesar/component-library';
   import {
-    getTabularDataStoreFromContext,
-    ID_ADD_NEW_COLUMN,
-    ID_ROW_CONTROL_COLUMN,
-  } from '@mathesar/stores/table-data';
-  import {
-    SheetHeader,
     SheetCell,
     SheetCellResizer,
-    isColumnSelected,
+    SheetHeader,
   } from '@mathesar/components/sheet';
   import type { ProcessedColumn } from '@mathesar/stores/table-data';
+  import {
+    getTabularDataStoreFromContext,
+    ID_ADD_NEW_COLUMN,
+    ID_ROW_CONTROL_COLUMN,
+  } from '@mathesar/stores/table-data';
   import { saveColumnOrder } from '@mathesar/stores/tables';
-  import type { TableEntry } from '@mathesar/api/types/tables';
-  import { ContextMenu } from '@mathesar/component-library';
-  import HeaderCell from './header-cell/HeaderCell.svelte';
-  import NewColumnCell from './new-column-cell/NewColumnCell.svelte';
   import { Draggable, Droppable } from './drag-and-drop';
   import ColumnHeaderContextMenu from './header-cell/ColumnHeaderContextMenu.svelte';
+  import HeaderCell from './header-cell/HeaderCell.svelte';
+  import NewColumnCell from './new-column-cell/NewColumnCell.svelte';
 
   const tabularData = getTabularDataStoreFromContext();
 
@@ -27,17 +28,7 @@
 
   $: columnOrder = columnOrder ?? [];
   $: columnOrderString = columnOrder.map(String);
-
-  $: ({ legacySelection: selection, processedColumns } = $tabularData);
-  $: ({
-    selectedCells,
-    columnsSelectedWhenTheTableIsEmpty,
-    selectionInProgress,
-  } = selection);
-  $: selectedColumnIds = selection.getSelectedUniqueColumnsId(
-    $selectedCells,
-    $columnsSelectedWhenTheTableIsEmpty,
-  );
+  $: ({ selection, processedColumns } = $tabularData);
 
   let locationOfFirstDraggedColumn: number | undefined = undefined;
   let selectedColumnIdsOrdered: string[] = [];
@@ -55,7 +46,7 @@
     columnOrderString = columnOrderString;
     // Remove selected column IDs and keep their order
     for (const id of columnOrderString) {
-      if (selectedColumnIds.map(String).includes(id)) {
+      if ($selection.columnIds.has(id)) {
         selectedColumnIdsOrdered.push(id);
         if (!locationOfFirstDraggedColumn) {
           locationOfFirstDraggedColumn = columnOrderString.indexOf(id);
@@ -70,9 +61,8 @@
     // Early exit if a column is dropped in the same place.
     // Should only be done for single column if non-continuous selection is allowed.
     if (
-      selectedColumnIds.length > 0 &&
       columnDroppedOn &&
-      selectedColumnIds[0] === columnDroppedOn.id
+      first($selection.columnIds) === String(columnDroppedOn.id)
     ) {
       // Reset drag information
       locationOfFirstDraggedColumn = undefined;
@@ -122,6 +112,7 @@
   </SheetCell>
 
   {#each [...$processedColumns] as [columnId, processedColumn] (columnId)}
+    {@const isSelected = $selection.columnIds.has(String(columnId))}
     <SheetCell columnIdentifierKey={columnId} let:htmlAttributes let:style>
       <div>
         <div {...htmlAttributes} {style}>
@@ -129,32 +120,27 @@
             on:dragstart={() => dragColumn()}
             column={processedColumn}
             {selection}
-            selectionInProgress={$selectionInProgress}
           >
             <Droppable
               on:drop={() => dropColumn(processedColumn)}
               on:dragover={(e) => e.preventDefault()}
               {locationOfFirstDraggedColumn}
               columnLocation={columnOrderString.indexOf(columnId.toString())}
-              isSelected={isColumnSelected(
-                $selectedCells,
-                $columnsSelectedWhenTheTableIsEmpty,
-                processedColumn,
-              )}
+              {isSelected}
             >
               <HeaderCell
                 {processedColumn}
-                isSelected={isColumnSelected(
-                  $selectedCells,
-                  $columnsSelectedWhenTheTableIsEmpty,
-                  processedColumn,
-                )}
-                on:mousedown={() =>
-                  selection.onColumnSelectionStart(processedColumn)}
-                on:mouseenter={() =>
-                  selection.onMouseEnterColumnHeaderWhileSelection(
-                    processedColumn,
-                  )}
+                {isSelected}
+                on:mousedown={() => {
+                  // // TODO_3037
+                  // selection.onColumnSelectionStart(processedColumn)
+                }}
+                on:mouseenter={() => {
+                  // // TODO_3037
+                  // selection.onMouseEnterColumnHeaderWhileSelection(
+                  //   processedColumn,
+                  // )
+                }}
               />
             </Droppable>
           </Draggable>
diff --git a/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte b/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte
index 2dcfe0a5bd..1347bd2f5a 100644
--- a/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte
+++ b/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte
@@ -1,17 +1,19 @@
 <script lang="ts">
-  import type {
-    ProcessedColumn,
-    TabularDataSelection,
-  } from '@mathesar/stores/table-data';
+  import type { Writable } from 'svelte/store';
 
-  export let selection: TabularDataSelection;
-  export let selectionInProgress = true;
+  import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
+  import type { ProcessedColumn } from '@mathesar/stores/table-data';
+
+  export let selection: Writable<SheetSelection>;
   export let column: ProcessedColumn;
 
-  $: draggable =
-    !selectionInProgress &&
-    selection &&
-    selection.isCompleteColumnSelected(column);
+  // // TODO_3037: Verify that we're not losing functionality here by removing
+  // `selectionInProgress` logic
+  //
+  // $: draggable = !selectionInProgress && selection &&
+  //   selection.isCompleteColumnSelected(column);
+
+  $: draggable = $selection.fullySelectedColumnIds.has(String(column.id));
 </script>
 
 <div

From bc8b8fe6c428676a043edee0eaa40af146e88e88 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Fri, 1 Sep 2023 12:53:56 -0400
Subject: [PATCH 14/85] Fix clipboard code to work with new selection code

---
 .../components/sheet/SheetClipboardHandler.ts | 116 +++++++-----------
 mathesar_ui/src/stores/table-data/records.ts  |  22 ++--
 .../src/stores/table-data/tabularData.ts      |  12 +-
 .../src/systems/data-explorer/QueryRunner.ts  |  15 ++-
 .../exploration-inspector/CellTab.svelte      |   1 +
 .../data-explorer/result-pane/Results.svelte  |  20 +--
 .../src/systems/table-view/TableView.svelte   |  86 ++++++-------
 .../src/systems/table-view/row/Row.svelte     |  21 ++--
 .../src/systems/table-view/row/RowCell.svelte |   3 +-
 mathesar_ui/src/utils/collectionUtils.ts      |   3 +
 10 files changed, 148 insertions(+), 151 deletions(-)
 create mode 100644 mathesar_ui/src/utils/collectionUtils.ts

diff --git a/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts b/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts
index 39728674d7..4d55f5aad3 100644
--- a/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts
+++ b/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts
@@ -1,19 +1,9 @@
 import * as Papa from 'papaparse';
-import { get } from 'svelte/store';
 
-import { ImmutableSet, type MakeToast } from '@mathesar-component-library';
-import LegacySheetSelection, {
-  isCellSelected,
-} from '@mathesar/components/sheet/LegacySheetSelection';
+import type { ImmutableSet } from '@mathesar-component-library';
 import type { AbstractTypeCategoryIdentifier } from '@mathesar/stores/abstract-types/types';
 import type { ClipboardHandler } from '@mathesar/stores/clipboard';
-import type {
-  ProcessedColumn,
-  RecordRow,
-  RecordSummariesForSheet,
-} from '@mathesar/stores/table-data';
-import type { QueryRow } from '@mathesar/systems/data-explorer/QueryRunner';
-import type { ProcessedQueryOutputColumn } from '@mathesar/systems/data-explorer/utils';
+import type { RecordSummariesForSheet } from '@mathesar/stores/table-data';
 import type { ReadableMapLike } from '@mathesar/typeUtils';
 import { labeledCount } from '@mathesar/utils/languageUtils';
 
@@ -21,25 +11,34 @@ const MIME_PLAIN_TEXT = 'text/plain';
 const MIME_MATHESAR_SHEET_CLIPBOARD =
   'application/x-vnd.mathesar-sheet-clipboard';
 
-/** Keys are row ids, values are records */
-type IndexedRecords = Map<number, Record<string, unknown>>;
+/**
+ * A column which allows the cells in it to be copied.
+ */
+interface CopyableColumn {
+  abstractType: { identifier: AbstractTypeCategoryIdentifier };
+  formatCellValue: (
+    cellValue: unknown,
+    recordSummaries?: RecordSummariesForSheet,
+  ) => string | null | undefined;
+}
 
-function getRawCellValue<
-  Column extends ProcessedQueryOutputColumn | ProcessedColumn,
->(
-  indexedRecords: IndexedRecords,
-  rowId: number,
-  columnId: Column['id'],
-): unknown {
-  return indexedRecords.get(rowId)?.[String(columnId)];
+/**
+ * This is the stuff we need to know from the sheet in order to copy the content
+ * of cells to the clipboard.
+ */
+interface CopyingContext {
+  /** Keys are row ids, values are records */
+  rowsMap: Map<string, Record<string, unknown>>;
+  columnsMap: ReadableMapLike<string, CopyableColumn>;
+  recordSummaries: RecordSummariesForSheet;
+  selectedRowIds: ImmutableSet<string>;
+  selectedColumnIds: ImmutableSet<string>;
 }
 
-function getFormattedCellValue<
-  Column extends ProcessedQueryOutputColumn | ProcessedColumn,
->(
+function getFormattedCellValue(
   rawCellValue: unknown,
-  columnsMap: ReadableMapLike<Column['id'], Column>,
-  columnId: Column['id'],
+  columnsMap: CopyingContext['columnsMap'],
+  columnId: string,
   recordSummaries: RecordSummariesForSheet,
 ): string {
   if (rawCellValue === undefined || rawCellValue === null) {
@@ -76,70 +75,37 @@ export interface StructuredCell {
   formatted: string;
 }
 
-interface SheetClipboardHandlerDeps<
-  Row extends QueryRow | RecordRow,
-  Column extends ProcessedQueryOutputColumn | ProcessedColumn,
-> {
-  selection: LegacySheetSelection<Row, Column>;
-  toast: MakeToast;
-  getRows(): Row[];
-  getColumnsMap(): ReadableMapLike<Column['id'], Column>;
-  getRecordSummaries(): RecordSummariesForSheet;
+interface Dependencies {
+  getCopyingContext(): CopyingContext;
+  showToastInfo(msg: string): void;
 }
 
-export class SheetClipboardHandler<
-  Row extends QueryRow | RecordRow,
-  Column extends ProcessedQueryOutputColumn | ProcessedColumn,
-> implements ClipboardHandler
-{
-  private readonly deps: SheetClipboardHandlerDeps<Row, Column>;
+export class SheetClipboardHandler implements ClipboardHandler {
+  private readonly deps: Dependencies;
 
-  constructor(deps: SheetClipboardHandlerDeps<Row, Column>) {
+  constructor(deps: Dependencies) {
     this.deps = deps;
   }
 
-  private getColumnIds(cells: ImmutableSet<string>) {
-    return this.deps.selection.getSelectedUniqueColumnsId(
-      cells,
-      // We don't care about the columns selected when the table is empty,
-      // because we only care about cells selected that have content.
-      new ImmutableSet(),
-    );
-  }
-
-  private getRowIds(cells: ImmutableSet<string>) {
-    return this.deps.selection.getSelectedUniqueRowsId(cells);
-  }
-
   private getCopyContent(): { structured: string; tsv: string } {
-    const cells = get(this.deps.selection.selectedCells);
-    const indexedRecords = new Map(
-      this.deps.getRows().map((r) => [r.rowIndex, r.record]),
-    );
-    const columns = this.deps.getColumnsMap();
-    const recordSummaries = this.deps.getRecordSummaries();
-
+    const context = this.deps.getCopyingContext();
     const tsvRows: string[][] = [];
     const structuredRows: StructuredCell[][] = [];
-    for (const rowId of this.getRowIds(cells)) {
+    for (const rowId of context.selectedRowIds) {
       const tsvRow: string[] = [];
       const structuredRow: StructuredCell[] = [];
-      for (const columnId of this.getColumnIds(cells)) {
-        const column = columns.get(columnId);
-        if (!isCellSelected(cells, { rowIndex: rowId }, { id: columnId })) {
-          // Ignore cells that are not selected.
-          continue;
-        }
+      for (const columnId of context.selectedColumnIds) {
+        const column = context.columnsMap.get(columnId);
         if (!column) {
           // Ignore cells with no associated column. This should never happen.
           continue;
         }
-        const rawCellValue = getRawCellValue(indexedRecords, rowId, columnId);
+        const rawCellValue = context.rowsMap.get(rowId)?.[columnId];
         const formattedCellValue = getFormattedCellValue(
           rawCellValue,
-          columns,
+          context.columnsMap,
           columnId,
-          recordSummaries,
+          context.recordSummaries,
         );
         const type = column.abstractType.identifier;
         structuredRow.push({
@@ -152,7 +118,9 @@ export class SheetClipboardHandler<
       tsvRows.push(tsvRow);
       structuredRows.push(structuredRow);
     }
-    this.deps.toast.info(`Copied ${labeledCount(cells.size, 'cells')}.`);
+    const cellCount =
+      context.selectedRowIds.size * context.selectedColumnIds.size;
+    this.deps.showToastInfo(`Copied ${labeledCount(cellCount, 'cells')}.`);
     return {
       structured: JSON.stringify(structuredRows),
       tsv: serializeTsv(tsvRows),
diff --git a/mathesar_ui/src/stores/table-data/records.ts b/mathesar_ui/src/stores/table-data/records.ts
index d2fcd34183..da90576fd9 100644
--- a/mathesar_ui/src/stores/table-data/records.ts
+++ b/mathesar_ui/src/stores/table-data/records.ts
@@ -26,11 +26,10 @@ import {
   States,
   deleteAPI,
   getAPI,
+  getQueryStringFromParams,
   patchAPI,
   postAPI,
-  getQueryStringFromParams,
 } from '@mathesar/api/utils/requestUtils';
-import Series from '@mathesar/components/sheet/selection/Series';
 import type Pagination from '@mathesar/utils/Pagination';
 import { getErrorMessage } from '@mathesar/utils/errors';
 import { pluralize } from '@mathesar/utils/languageUtils';
@@ -175,7 +174,6 @@ export function filterRecordRows(rows: Row[]): RecordRow[] {
 export function rowHasSavedRecord(row: Row): row is RecordRow {
   return rowHasRecord(row) && Object.entries(row.record).length > 0;
 }
-
 export interface TableRecordsData {
   state: States;
   error?: string;
@@ -184,6 +182,10 @@ export interface TableRecordsData {
   grouping?: RecordGrouping;
 }
 
+export function getRowSelectionId(row: Row): string {
+  return row.identifier;
+}
+
 export function getRowKey(row: Row, primaryKeyColumnId?: Column['id']): string {
   if (rowHasRecord(row) && primaryKeyColumnId !== undefined) {
     const primaryKeyCellValue = row.record[primaryKeyColumnId];
@@ -300,7 +302,8 @@ export class RecordsData {
 
   error: Writable<string | undefined>;
 
-  selectableRowIds: Readable<Series<string>>;
+  /** Keys are row ids, values are records */
+  selectableRowsMap: Readable<Map<string, Record<string, unknown>>>;
 
   private promise: CancellablePromise<ApiRecordsResponse> | undefined;
 
@@ -357,13 +360,12 @@ export class RecordsData {
     this.url = `/api/db/v0/tables/${this.tableId}/records/`;
     void this.fetch();
 
-    this.selectableRowIds = derived(
+    this.selectableRowsMap = derived(
       [this.savedRecords, this.newRecords],
-      ([savedRecords, newRecords]) =>
-        new Series([
-          ...savedRecords.map((r) => r.identifier),
-          ...newRecords.map((r) => r.identifier),
-        ]),
+      ([savedRecords, newRecords]) => {
+        const records = [...savedRecords, ...newRecords];
+        return new Map(records.map((r) => [getRowSelectionId(r), r.record]));
+      },
     );
 
     // TODO: Create base class to abstract subscriptions and unsubscriptions
diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts
index 5029d92376..46d8453809 100644
--- a/mathesar_ui/src/stores/table-data/tabularData.ts
+++ b/mathesar_ui/src/stores/table-data/tabularData.ts
@@ -143,12 +143,12 @@ export class TabularData {
     );
 
     const plane = derived(
-      [this.recordsData.selectableRowIds, this.orderedProcessedColumns],
-      ([selectableRowIds, orderedProcessedColumns]) => {
-        const columnIds = new Series(
-          [...orderedProcessedColumns.values()].map((c) => String(c.id)),
-        );
-        return new Plane(selectableRowIds, columnIds);
+      [this.recordsData.selectableRowsMap, this.orderedProcessedColumns],
+      ([selectableRowsMap, orderedProcessedColumns]) => {
+        const rowIds = new Series([...selectableRowsMap.keys()]);
+        const columns = [...orderedProcessedColumns.values()];
+        const columnIds = new Series(columns.map((c) => String(c.id)));
+        return new Plane(rowIds, columnIds);
       },
     );
 
diff --git a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
index 1a678575b8..ae6c285652 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
@@ -1,5 +1,5 @@
-import { get, writable } from 'svelte/store';
-import type { Writable } from 'svelte/store';
+import { derived, get, writable } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
 import type { RequestStatus } from '@mathesar/api/utils/requestUtils';
 import { ApiMultiError } from '@mathesar/api/utils/errors';
 import { ImmutableMap, CancellablePromise } from '@mathesar-component-library';
@@ -31,6 +31,10 @@ export interface QueryRow {
   rowIndex: number;
 }
 
+function getRowSelectionId(row: QueryRow): string {
+  return String(row.rowIndex);
+}
+
 export interface QueryRowsData {
   totalCount: number;
   rows: QueryRow[];
@@ -63,6 +67,9 @@ export default class QueryRunner {
     new ImmutableMap(),
   );
 
+  /** Keys are row ids, values are records */
+  selectableRowsMap: Readable<Map<string, Record<string, unknown>>>;
+
   selection: QuerySheetSelection;
 
   inspector: QueryInspector;
@@ -100,6 +107,10 @@ export default class QueryRunner {
     this.shareConsumer = shareConsumer;
     this.speculateProcessedColumns();
     void this.run();
+    this.selectableRowsMap = derived(
+      this.rowsData,
+      ({ rows }) => new Map(rows.map((r) => [getRowSelectionId(r), r.record])),
+    );
     this.selection = new LegacySheetSelection({
       getColumns: () => [...get(this.processedColumns).values()],
       getColumnOrder: () =>
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte
index a9490a9ceb..e6fccb7554 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte
@@ -10,6 +10,7 @@
     const cell = $activeCell;
     if (cell) {
       const rows = queryHandler.getRows();
+      // TODO_3037 change rowIndex to use getRowSelectionId
       if (rows[cell.rowIndex]) {
         return rows[cell.rowIndex].record[cell.columnId];
       }
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index 9703ad41a9..da32a65f4d 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
   import { get } from 'svelte/store';
 
-  import { ImmutableMap } from '@mathesar-component-library';
+  import { ImmutableMap, ImmutableSet } from '@mathesar-component-library';
   import CellBackground from '@mathesar/components/CellBackground.svelte';
   import PaginationGroup from '@mathesar/components/PaginationGroup.svelte';
   import {
-    isColumnSelected,
     Sheet,
     SheetCell,
     SheetHeader,
     SheetRow,
     SheetVirtualRows,
+    isColumnSelected,
   } from '@mathesar/components/sheet';
   import { SheetClipboardHandler } from '@mathesar/components/sheet/SheetClipboardHandler';
   import { rowHeaderWidthPx, rowHeightPx } from '@mathesar/geometry';
@@ -34,6 +34,7 @@
     query,
     processedColumns,
     rowsData,
+    selectableRowsMap,
     pagination,
     runState,
     selection,
@@ -41,11 +42,16 @@
   } = queryHandler);
   $: ({ initial_columns } = $query);
   $: clipboardHandler = new SheetClipboardHandler({
-    selection,
-    toast,
-    getRows: () => get(rowsData).rows,
-    getColumnsMap: () => get(processedColumns),
-    getRecordSummaries: () => new ImmutableMap(),
+    getCopyingContext: () => ({
+      rowsMap: get(selectableRowsMap),
+      columnsMap: get(processedColumns),
+      recordSummaries: new ImmutableMap(),
+      // TODO_3037
+      selectedRowIds: new ImmutableSet(),
+      // TODO_3037
+      selectedColumnIds: new ImmutableSet(),
+    }),
+    showToastInfo: toast.info,
   });
   $: ({ selectedCells, columnsSelectedWhenTheTableIsEmpty } = selection);
   $: recordRunState = $runState?.state;
diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte
index 3fbfeaa29a..bebf88e214 100644
--- a/mathesar_ui/src/systems/table-view/TableView.svelte
+++ b/mathesar_ui/src/systems/table-view/TableView.svelte
@@ -2,6 +2,7 @@
   import { get } from 'svelte/store';
 
   import { ImmutableMap } from '@mathesar-component-library';
+  import type { TableEntry } from '@mathesar/api/types/tables';
   import { Sheet } from '@mathesar/components/sheet';
   import { SheetClipboardHandler } from '@mathesar/components/sheet/SheetClipboardHandler';
   import { rowHeaderWidthPx } from '@mathesar/geometry';
@@ -11,12 +12,16 @@
     getTabularDataStoreFromContext,
     ID_ADD_NEW_COLUMN,
     ID_ROW_CONTROL_COLUMN,
-    type TabularDataSelection,
+    type ProcessedColumn,
   } from '@mathesar/stores/table-data';
+  import {
+    getRowSelectionId,
+    type RecordRow,
+  } from '@mathesar/stores/table-data/records';
   import { toast } from '@mathesar/stores/toast';
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
+  import { stringifyMapKeys } from '@mathesar/utils/collectionUtils';
   import { orderProcessedColumns } from '@mathesar/utils/tables';
-  import type { TableEntry } from '@mathesar/api/types/tables';
   import Body from './Body.svelte';
   import Header from './header/Header.svelte';
   import StatusPane from './StatusPane.svelte';
@@ -40,24 +45,18 @@
   $: usesVirtualList = context !== 'widget';
   $: allowsDdlOperations = context !== 'widget' && canExecuteDDL;
   $: sheetHasBorder = context === 'widget';
-  $: ({
-    processedColumns,
-    display,
-    isLoading,
-    legacySelection: selection,
-    recordsData,
-  } = $tabularData);
+  $: ({ processedColumns, display, isLoading, selection, recordsData } =
+    $tabularData);
   $: clipboardHandler = new SheetClipboardHandler({
-    selection,
-    toast,
-    getRows: () => [
-      ...get(recordsData.savedRecords),
-      ...get(recordsData.newRecords),
-    ],
-    getColumnsMap: () => get(processedColumns),
-    getRecordSummaries: () => get(recordsData.recordSummaries),
+    getCopyingContext: () => ({
+      rowsMap: get(recordsData.selectableRowsMap),
+      columnsMap: stringifyMapKeys(get(processedColumns)),
+      recordSummaries: get(recordsData.recordSummaries),
+      selectedRowIds: get(selection).rowIds,
+      selectedColumnIds: get(selection).columnIds,
+    }),
+    showToastInfo: toast.info,
   });
-  $: ({ activeCell } = selection);
   $: ({ horizontalScrollOffset, scrollOffset, isTableInspectorVisible } =
     display);
   $: ({ settings } = table);
@@ -90,32 +89,37 @@
   ]);
   $: showTableInspector = $isTableInspectorVisible && supportsTableInspector;
 
-  function selectAndActivateFirstCellOnTableLoad(
-    _isLoading: boolean,
-    _selection: TabularDataSelection,
-    _context: Context,
-  ) {
-    // We only activate the first cell on the page, not in the widget. Doing so
-    // on the widget causes the cell to focus and the page to scroll down to
-    // bring that element into view.
-    if (_context !== 'widget' && !_isLoading) {
-      _selection.selectAndActivateFirstCellIfExists();
-    }
-  }
-
   function checkAndReinstateFocusOnActiveCell(e: Event) {
-    const target = e.target as HTMLElement;
-    if (!target.closest('[data-sheet-element="cell"')) {
-      if ($activeCell) {
-        selection.focusCell(
-          { rowIndex: $activeCell.rowIndex },
-          { id: Number($activeCell.columnId) },
-        );
-      }
-    }
+    // // TODO_3037 Figure out what is actually broken without this code.
+    // //Better document why we need id.
+    //
+    // const target = e.target as HTMLElement;
+    // if (!target.closest('[data-sheet-element="cell"')) {
+    //   if ($activeCell) {
+    //     selection.focusCell(
+    //       // TODO make sure to use getRowSelectionId instead of rowIndex
+    //       { rowIndex: $activeCell.rowIndex },
+    //       { id: Number($activeCell.columnId) },
+    //     );
+    //   }
+    // }
   }
 
-  $: void selectAndActivateFirstCellOnTableLoad($isLoading, selection, context);
+  // function selectAndActivateFirstCellOnTableLoad(
+  //   _isLoading: boolean,
+  //   _selection: TabularDataSelection,
+  //   _context: Context,
+  // ) {
+  //   // We only activate the first cell on the page, not in the widget. Doing so
+  //   // on the widget causes the cell to focus and the page to scroll down to
+  //   // bring that element into view.
+  //   if (_context !== 'widget' && !_isLoading) {
+  //     _selection.selectAndActivateFirstCellIfExists();
+  //   }
+  // }
+
+  // // TODO_3037 Figure out what is actually broken without this code.
+  // $: void selectAndActivateFirstCellOnTableLoad($isLoading, selection, context);
 </script>
 
 <div class="table-view">
diff --git a/mathesar_ui/src/systems/table-view/row/Row.svelte b/mathesar_ui/src/systems/table-view/row/Row.svelte
index 07a1faab61..a07cbddbc7 100644
--- a/mathesar_ui/src/systems/table-view/row/Row.svelte
+++ b/mathesar_ui/src/systems/table-view/row/Row.svelte
@@ -1,24 +1,25 @@
 <script lang="ts">
+  import { ContextMenu } from '@mathesar/component-library';
+  import { SheetCell, SheetRow } from '@mathesar/components/sheet';
+  import { rowHeightPx } from '@mathesar/geometry';
   import {
+    ID_ROW_CONTROL_COLUMN,
     getCellKey,
+    getRowKey,
     getTabularDataStoreFromContext,
+    isGroupHeaderRow,
+    isHelpTextRow,
     isNewRecordRow,
     isPlaceholderRow,
     rowHasRecord,
-    isGroupHeaderRow,
-    isHelpTextRow,
-    getRowKey,
-    ID_ROW_CONTROL_COLUMN,
     type Row,
   } from '@mathesar/stores/table-data';
-  import { SheetRow, SheetCell } from '@mathesar/components/sheet';
-  import { rowHeightPx } from '@mathesar/geometry';
-  import { ContextMenu } from '@mathesar/component-library';
-  import NewRecordMessage from './NewRecordMessage.svelte';
+  import { getRowSelectionId } from '@mathesar/stores/table-data/records';
   import GroupHeader from './GroupHeader.svelte';
+  import NewRecordMessage from './NewRecordMessage.svelte';
   import RowCell from './RowCell.svelte';
-  import RowControl from './RowControl.svelte';
   import RowContextOptions from './RowContextOptions.svelte';
+  import RowControl from './RowControl.svelte';
 
   export let row: Row;
   export let style: { [key: string]: string | number };
@@ -41,7 +42,7 @@
   $: creationStatus = $rowCreationStatus.get(rowKey)?.state;
   $: status = $rowStatus.get(rowKey);
   $: wholeRowState = status?.wholeRowState;
-  $: isSelected = $selection.rowIds.has(row.identifier);
+  $: isSelected = $selection.rowIds.has(getRowSelectionId(row));
   $: hasWholeRowErrors = wholeRowState === 'failure';
   /** Including whole row errors and individual cell errors */
   $: hasAnyErrors = !!status?.errorsFromWholeRowAndCells?.length;
diff --git a/mathesar_ui/src/systems/table-view/row/RowCell.svelte b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
index 0b9aa43f15..68f6e973b7 100644
--- a/mathesar_ui/src/systems/table-view/row/RowCell.svelte
+++ b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
@@ -33,6 +33,7 @@
     type RecordRow,
     type RecordsData,
   } from '@mathesar/stores/table-data';
+  import { getRowSelectionId } from '@mathesar/stores/table-data/records';
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
   import ColumnHeaderContextMenu from '../header/header-cell/ColumnHeaderContextMenu.svelte';
   import CellErrors from './CellErrors.svelte';
@@ -51,7 +52,7 @@
 
   const userProfile = getUserProfileStoreFromContext();
 
-  $: cellId = makeCellId(row.identifier, String(processedColumn.id));
+  $: cellId = makeCellId(getRowSelectionId(row), String(processedColumn.id));
   $: database = $currentDatabase;
   $: schema = $currentSchema;
   $: canEditTableRecords = !!$userProfile?.hasPermission(
diff --git a/mathesar_ui/src/utils/collectionUtils.ts b/mathesar_ui/src/utils/collectionUtils.ts
new file mode 100644
index 0000000000..ebed9303cd
--- /dev/null
+++ b/mathesar_ui/src/utils/collectionUtils.ts
@@ -0,0 +1,3 @@
+export function stringifyMapKeys<V>(m: Map<number, V>): Map<string, V> {
+  return new Map([...m.entries()].map(([k, v]) => [String(k), v]));
+}

From cc61dc31b84dd6acca327db63eb61135f8b0f531 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 11 Sep 2023 08:03:17 -0400
Subject: [PATCH 15/85] Remove legacySelection from table inspector

---
 .../src/stores/table-data/tabularData.ts      |  2 +-
 .../src/systems/table-view/StatusPane.svelte  | 13 +++-----
 .../table-inspector/TableInspector.svelte     | 30 +++++++++----------
 .../table-inspector/column/ColumnMode.svelte  | 17 +++++------
 .../table-inspector/record/RecordMode.svelte  | 30 +++++++++----------
 .../table-inspector/record/RowActions.svelte  |  5 ++--
 6 files changed, 43 insertions(+), 54 deletions(-)

diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts
index 46d8453809..820db37e0e 100644
--- a/mathesar_ui/src/stores/table-data/tabularData.ts
+++ b/mathesar_ui/src/stores/table-data/tabularData.ts
@@ -62,7 +62,7 @@ export class TabularData {
 
   columnsDataStore: ColumnsDataStore;
 
-  /** TODO eliminate `processedColumns` in favor of `orderedProcessedColumns` */
+  /** TODO_3037 eliminate `processedColumns` in favor of `orderedProcessedColumns` */
   processedColumns: ProcessedColumnsStore;
 
   orderedProcessedColumns: ProcessedColumnsStore;
diff --git a/mathesar_ui/src/systems/table-view/StatusPane.svelte b/mathesar_ui/src/systems/table-view/StatusPane.svelte
index 4784398330..3aad14a8d5 100644
--- a/mathesar_ui/src/systems/table-view/StatusPane.svelte
+++ b/mathesar_ui/src/systems/table-view/StatusPane.svelte
@@ -26,14 +26,8 @@
 
   export let context: 'page' | 'widget' | 'shared-consumer-page' = 'page';
 
-  $: ({
-    recordsData,
-    meta,
-    isLoading,
-    columnsDataStore,
-    constraintsDataStore,
-    legacySelection: selection,
-  } = $tabularData);
+  $: ({ recordsData, meta, isLoading, columnsDataStore, constraintsDataStore } =
+    $tabularData);
   $: ({ pagination } = meta);
   $: ({ size: pageSize, leftBound, rightBound } = $pagination);
   $: ({ totalCount, state, newRecords } = recordsData);
@@ -76,7 +70,8 @@
         appearance="primary"
         on:click={() => {
           recordsData.addEmptyRecord();
-          selection.selectAndActivateFirstDataEntryCellInLastRow();
+          // // TODO_3037
+          // selection.selectAndActivateFirstDataEntryCellInLastRow();
         }}
       >
         <Icon {...iconAddNew} />
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte b/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
index d628a0d124..14a561b473 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
@@ -28,22 +28,20 @@
 
   let activeTab: TabItem;
 
-  const tabularData = getTabularDataStoreFromContext();
-  $: ({ legacySelection: selection } = $tabularData);
-  $: ({ selectedCells } = selection);
-
-  $: {
-    // Explicit dependency
-    $selectedCells;
-
-    if (selection.isAnyColumnCompletelySelected()) {
-      [, activeTab] = tabs;
-    }
-
-    if (selection.isAnyRowCompletelySelected()) {
-      [, , activeTab] = tabs;
-    }
-  }
+  // // TODO_3037 restore logic to select tab based on cell selection
+  // const tabularData = getTabularDataStoreFromContext();
+  // $: ({ selection } = $tabularData);
+  // $: ({ selectedCells } = selection);
+  // $: {
+  //   // Explicit dependency
+  //   $selectedCells;
+  //   if (selection.isAnyColumnCompletelySelected()) {
+  //     [, activeTab] = tabs;
+  //   }
+  //   if (selection.isAnyRowCompletelySelected()) {
+  //     [, , activeTab] = tabs;
+  //   }
+  // }
 </script>
 
 <div class="table-inspector">
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
index fe1e01f610..7be1b9cd62 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
@@ -21,18 +21,17 @@
 
   $: database = $currentDatabase;
   $: schema = $currentSchema;
-  $: ({ processedColumns, legacySelection: selection } = $tabularData);
-  $: ({ selectedCells, columnsSelectedWhenTheTableIsEmpty } = selection);
+  $: ({ processedColumns, selection } = $tabularData);
+  // TODO_3037 verify that table inspector shows selected columns
   $: selectedColumns = (() => {
-    const ids = selection.getSelectedUniqueColumnsId(
-      $selectedCells,
-      $columnsSelectedWhenTheTableIsEmpty,
-    );
+    const ids = $selection.columnIds;
     const columns = [];
     for (const id of ids) {
-      const c = $processedColumns.get(id);
-      if (c !== undefined) {
-        columns.push(c);
+      // TODO_3037 add code comments explaining why this is necessary
+      const parsedId = parseInt(id, 10);
+      const column = $processedColumns.get(parsedId);
+      if (column !== undefined) {
+        columns.push(column);
       }
     }
     return columns;
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte
index 878701fec1..c342c3eefa 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { Collapsible } from '@mathesar-component-library';
-  import { getSelectedRowIndex } from '@mathesar/components/sheet';
   import { currentDatabase } from '@mathesar/stores/databases';
   import { currentSchema } from '@mathesar/stores/schemas';
   import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
@@ -14,42 +13,41 @@
 
   $: database = $currentDatabase;
   $: schema = $currentSchema;
-  $: ({ legacySelection: selection, recordsData } = $tabularData);
-  $: ({ selectedCells } = selection);
-  $: selectedRowIndices = $selectedCells
-    .valuesArray()
-    .map((cell) => getSelectedRowIndex(cell));
-  $: uniquelySelectedRowIndices = Array.from(new Set(selectedRowIndices));
-
+  $: ({ selection, recordsData } = $tabularData);
   $: canEditTableRecords = !!$userProfile?.hasPermission(
     { database, schema },
     'canEditTableRecords',
   );
+  $: selectedRowCount = $selection.rowIds.size;
+
+  // TODO_3037 Need to calculate selectedRowIndices. This might be a deeper
+  // problem. Seems like we might need access to the row index here instead of
+  // the row identifier.
+  $: selectedRowIndices = [];
 </script>
 
 <div class="column-mode-container">
-  {#if uniquelySelectedRowIndices.length}
-    {#if uniquelySelectedRowIndices.length > 1}
+  {#if selectedRowCount > 0}
+    {#if selectedRowCount > 1}
       <span class="records-selected-count">
-        {labeledCount(uniquelySelectedRowIndices, 'records')} selected
+        {labeledCount(selectedRowCount, 'records')} selected
       </span>
     {/if}
     <Collapsible isOpen triggerAppearance="plain">
       <CollapsibleHeader slot="header" title="Actions" />
       <div slot="content" class="content-container">
         <RowActions
-          selectedRowIndices={uniquelySelectedRowIndices}
+          {selectedRowIndices}
           {recordsData}
-          {selection}
           columnsDataStore={$tabularData.columnsDataStore}
           {canEditTableRecords}
         />
       </div>
     </Collapsible>
   {:else}
-    <span class="no-records-selected"
-      >Select one or more cells to view associated record properties.</span
-    >
+    <span class="no-records-selected">
+      Select one or more cells to view associated record properties.
+    </span>
   {/if}
 </div>
 
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte
index 66f343f999..53435f4981 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte
@@ -12,7 +12,6 @@
   import type {
     ColumnsDataStore,
     RecordsData,
-    TabularDataSelection,
   } from '@mathesar/stores/table-data';
   import { getPkValueInRecord } from '@mathesar/stores/table-data/records';
   import { toast } from '@mathesar/stores/toast';
@@ -20,7 +19,6 @@
 
   export let selectedRowIndices: number[];
   export let recordsData: RecordsData;
-  export let selection: TabularDataSelection;
   export let columnsDataStore: ColumnsDataStore;
   export let canEditTableRecords: boolean;
 
@@ -38,7 +36,8 @@
         toast.success({
           title: `${confirmationTitle} deleted successfully!`,
         });
-        selection.resetSelection();
+        // // TODO_3037 verify that selection behaves okay after deleting records
+        // selection.resetSelection();
       },
     });
   }

From dd7f24232bd9d5b3f10b30f7a85e859a6992d182 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 11 Sep 2023 13:28:10 -0400
Subject: [PATCH 16/85] Modify util fn to handle non-rectangular selection

---
 .../sheet/selection/SheetSelection.ts         | 63 ++++++++++++++-----
 1 file changed, 47 insertions(+), 16 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index b2da58135f..3cf039710e 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -1,4 +1,4 @@
-import { first } from 'iter-tools';
+import { execPipe, filter, first, map } from 'iter-tools';
 
 import { ImmutableSet } from '@mathesar/component-library';
 import { assertExhaustive } from '@mathesar/utils/typeUtils';
@@ -98,30 +98,61 @@ function getFullySelectedColumnIds(
   basis: Basis,
 ): ImmutableSet<string> {
   if (basis.type === 'dataCells') {
-    // The logic here is: if all rows are selected, then every selected column
-    // FULLY selected. Otherwise, no columns are fully selected.
-    //
-    // THIS LOGIC ASSUMES THAT ALL SELECTIONS ARE RECTANGULAR. The application
-    // enforces this assumption at various levels, but NOT within the Basis data
-    // structure. That is, it's theoretically possible to have basis data which
-    // represents a non-rectangular selection, but such data should be
-    // considered a bug. The logic within this function leverages this
-    // assumption for the purpose of improving performance. If we know that the
-    // selection is rectangular, then we can avoid iterating over all cells in
-    // each selected column to see if the column is fully selected.
-    return basis.rowIds.size < plane.rowIds.length
-      ? new ImmutableSet()
-      : basis.columnIds;
+    // The logic within this branch is somewhat complex because:
+    // - We want to suppor non-rectangular selections.
+    // - For performance, we want to avoid iterating over all the selected
+    //   cells.
+
+    const selctedRowCount = basis.rowIds.size;
+    const availableRowCount = plane.rowIds.length;
+    if (selctedRowCount < availableRowCount) {
+      // Performance heuristic. If the number of selected rows is less than the
+      // total number of rows, we can assume that no column exist in which all
+      // rows are selected.
+      return new ImmutableSet();
+    }
+
+    const selectedColumnCount = basis.columnIds.size;
+    const selectedCellCount = basis.cellIds.size;
+    const avgCellsSelectedPerColumn = selectedCellCount / selectedColumnCount;
+    if (avgCellsSelectedPerColumn === availableRowCount) {
+      // Performance heuristic. We know that no column can have more cells
+      // selected than the number of rows. Thus, if the average number of cells
+      // selected per column is equal to the number of rows, then we know that
+      // all selected columns are fully selected.
+      return basis.columnIds;
+    }
+
+    // This is the worst-case scenario, performance-wise, which is why we try to
+    // return early before hitting this branch. This case will only happen when
+    // we have a mix of fully selected columns and partially selected columns.
+    // This case should be rare because most selections are rectangular.
+    const countSelectedCellsPerColumn = new Map<string, number>();
+    for (const cellId of basis.cellIds) {
+      const { columnId } = parseCellId(cellId);
+      const count = countSelectedCellsPerColumn.get(columnId) ?? 0;
+      countSelectedCellsPerColumn.set(columnId, count + 1);
+    }
+    const fullySelectedColumnIds = execPipe(
+      countSelectedCellsPerColumn,
+      filter(([, count]) => count === availableRowCount),
+      map(([id]) => id),
+    );
+    return new ImmutableSet(fullySelectedColumnIds);
   }
+
   if (basis.type === 'emptyColumns') {
     return basis.columnIds;
   }
+
   if (basis.type === 'placeholderCell') {
     return new ImmutableSet();
   }
+
   if (basis.type === 'empty') {
     return new ImmutableSet();
   }
+
   return assertExhaustive(basis.type);
 }
 
@@ -139,7 +170,7 @@ export default class SheetSelection {
 
   private readonly basis: Basis;
 
-  /** Ids of columns in which _all_ cells are selected */
+  /** Ids of columns in which _all_ data cells are selected */
   fullySelectedColumnIds: ImmutableSet<string>;
 
   constructor(plane: Plane = new Plane(), basis: Basis = emptyBasis()) {

From 70927ff2380a8376755be85347667f8edc48335f Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 11 Sep 2023 13:49:18 -0400
Subject: [PATCH 17/85] Refactor ExtractColumnsModal to use new selection

---
 mathesar_ui/src/components/sheet/cellIds.ts   | 14 +++++
 .../src/components/sheet/selection/Plane.ts   | 15 +-----
 .../sheet/selection/SheetSelection.ts         | 21 +++++++-
 mathesar_ui/src/stores/table-data/index.ts    |  1 -
 .../src/stores/table-data/tabularData.ts      | 54 ++-----------------
 .../ExtractColumnsModal.svelte                | 12 ++---
 6 files changed, 44 insertions(+), 73 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/cellIds.ts b/mathesar_ui/src/components/sheet/cellIds.ts
index 40c8297dea..fd6a263637 100644
--- a/mathesar_ui/src/components/sheet/cellIds.ts
+++ b/mathesar_ui/src/components/sheet/cellIds.ts
@@ -1,3 +1,7 @@
+import { map } from 'iter-tools';
+
+import { cartesianProduct } from '@mathesar/utils/iterUtils';
+
 const CELL_ID_DELIMITER = '-';
 
 /**
@@ -22,3 +26,13 @@ export function parseCellId(cellId: string): {
   const columnId = cellId.slice(delimiterIndex + 1);
   return { rowId, columnId };
 }
+
+export function makeCells(
+  rowIds: Iterable<string>,
+  columnIds: Iterable<string>,
+): Iterable<string> {
+  return map(
+    ([rowId, columnId]) => makeCellId(rowId, columnId),
+    cartesianProduct(rowIds, columnIds),
+  );
+}
diff --git a/mathesar_ui/src/components/sheet/selection/Plane.ts b/mathesar_ui/src/components/sheet/selection/Plane.ts
index 3f0d87780f..0c57de5c5b 100644
--- a/mathesar_ui/src/components/sheet/selection/Plane.ts
+++ b/mathesar_ui/src/components/sheet/selection/Plane.ts
@@ -1,20 +1,7 @@
-import { map } from 'iter-tools';
-
-import { cartesianProduct } from '@mathesar/utils/iterUtils';
-import { makeCellId, parseCellId } from '../cellIds';
+import { makeCellId, makeCells, parseCellId } from '../cellIds';
 import { Direction, getColumnOffset, getRowOffset } from './Direction';
 import Series from './Series';
 
-function makeCells(
-  rowIds: Iterable<string>,
-  columnIds: Iterable<string>,
-): Iterable<string> {
-  return map(
-    ([rowId, columnId]) => makeCellId(rowId, columnId),
-    cartesianProduct(rowIds, columnIds),
-  );
-}
-
 /**
  * This describes the different kinds of cells that can be adjacent to a given
  * cell in a particular direction.
diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index 3cf039710e..53318a7af3 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -2,7 +2,7 @@ import { execPipe, filter, first, map } from 'iter-tools';
 
 import { ImmutableSet } from '@mathesar/component-library';
 import { assertExhaustive } from '@mathesar/utils/typeUtils';
-import { parseCellId } from '../cellIds';
+import { makeCells, parseCellId } from '../cellIds';
 import { Direction, getColumnOffset } from './Direction';
 import Plane from './Plane';
 
@@ -260,6 +260,17 @@ export default class SheetSelection {
     return this.withBasis(newBasis);
   }
 
+  /**
+   * @returns a new selection of all data cells in the intersection of the
+   * provided rows and columns.
+   */
+  ofRowColumnIntersection(
+    rowIds: Iterable<string>,
+    columnIds: Iterable<string>,
+  ): SheetSelection {
+    return this.withBasis(basisFromDataCells(makeCells(rowIds, columnIds)));
+  }
+
   /**
    * @returns a new selection formed by the rectangle between the provided
    * cells, inclusive.
@@ -291,6 +302,14 @@ export default class SheetSelection {
     return this.withBasis(makeBasis(cellId));
   }
 
+  ofOneRow(rowId: string): SheetSelection {
+    return this.ofRowRange(rowId, rowId);
+  }
+
+  ofOneColumn(columnId: string): SheetSelection {
+    return this.ofColumnRange(columnId, columnId);
+  }
+
   /**
    * @returns a new selection that fits within the provided plane. This is
    * useful when a column is deleted, reordered, or inserted.
diff --git a/mathesar_ui/src/stores/table-data/index.ts b/mathesar_ui/src/stores/table-data/index.ts
index 279ba7d931..2d68b467ac 100644
--- a/mathesar_ui/src/stores/table-data/index.ts
+++ b/mathesar_ui/src/stores/table-data/index.ts
@@ -42,7 +42,6 @@ export {
   getTabularDataStoreFromContext,
   TabularData,
   type TabularDataProps,
-  type TabularDataSelection,
 } from './tabularData';
 export {
   type ProcessedColumn,
diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts
index 820db37e0e..0e81eb4775 100644
--- a/mathesar_ui/src/stores/table-data/tabularData.ts
+++ b/mathesar_ui/src/stores/table-data/tabularData.ts
@@ -1,34 +1,24 @@
 import { getContext, setContext } from 'svelte';
-import {
-  derived,
-  get,
-  writable,
-  type Readable,
-  type Writable,
-} from 'svelte/store';
+import { derived, writable, type Readable, type Writable } from 'svelte/store';
 
 import type { DBObjectEntry } from '@mathesar/AppTypes';
 import type { TableEntry } from '@mathesar/api/types/tables';
 import type { Column } from '@mathesar/api/types/tables/columns';
 import { States } from '@mathesar/api/utils/requestUtils';
-import { LegacySheetSelection } from '@mathesar/components/sheet';
 import Plane from '@mathesar/components/sheet/selection/Plane';
 import Series from '@mathesar/components/sheet/selection/Series';
 import SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
 import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
-import { getColumnOrder, orderProcessedColumns } from '@mathesar/utils/tables';
 import type { ShareConsumer } from '@mathesar/utils/shares';
+import { orderProcessedColumns } from '@mathesar/utils/tables';
 import { ColumnsDataStore } from './columns';
 import type { ConstraintsData } from './constraints';
 import { ConstraintsDataStore } from './constraints';
 import { Display } from './display';
 import { Meta } from './meta';
-import type {
-  ProcessedColumn,
-  ProcessedColumnsStore,
-} from './processedColumns';
+import type { ProcessedColumnsStore } from './processedColumns';
 import { processColumn } from './processedColumns';
-import type { RecordRow, TableRecordsData } from './records';
+import type { TableRecordsData } from './records';
 import { RecordsData } from './records';
 
 export interface TabularDataProps {
@@ -50,11 +40,6 @@ export interface TabularDataProps {
   >[0]['hasEnhancedPrimaryKeyCell'];
 }
 
-export type TabularDataSelection = LegacySheetSelection<
-  RecordRow,
-  ProcessedColumn
->;
-
 export class TabularData {
   id: DBObjectEntry['id'];
 
@@ -75,13 +60,6 @@ export class TabularData {
 
   isLoading: Readable<boolean>;
 
-  /**
-   * TODO_3037
-   *
-   * @deprecated
-   */
-  legacySelection: TabularDataSelection;
-
   selection: Writable<SheetSelection>;
 
   table: TableEntry;
@@ -159,29 +137,6 @@ export class TabularData {
       plane.subscribe((p) => this.selection.update((s) => s.forNewPlane(p))),
     );
 
-    this.legacySelection = new LegacySheetSelection({
-      getColumns: () => [...get(this.processedColumns).values()],
-      getColumnOrder: () =>
-        getColumnOrder([...get(this.processedColumns).values()], this.table),
-      getRows: () => this.recordsData.getRecordRows(),
-      getMaxSelectionRowIndex: () => {
-        const totalCount = get(this.recordsData.totalCount) ?? 0;
-        const savedRecords = get(this.recordsData.savedRecords);
-        const newRecords = get(this.recordsData.newRecords);
-        const pagination = get(this.meta.pagination);
-        const { offset } = pagination;
-        const pageSize = pagination.size;
-        /**
-         * We are not subtracting 1 from the below maxRowIndex calculation
-         * inorder to account for the add-new-record placeholder row
-         */
-        return (
-          Math.min(pageSize, totalCount - offset, savedRecords.length) +
-          newRecords.length
-        );
-      },
-    });
-
     this.isLoading = derived(
       [
         this.columnsDataStore.fetchStatus,
@@ -268,7 +223,6 @@ export class TabularData {
     this.recordsData.destroy();
     this.constraintsDataStore.destroy();
     this.columnsDataStore.destroy();
-    this.legacySelection.destroy();
     this.cleanupFunctions.forEach((f) => f());
   }
 }
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte b/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte
index ed5d468f15..f1fb68cfa3 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte
@@ -48,11 +48,7 @@
 
   export let controller: ExtractColumnsModalController;
 
-  $: ({
-    processedColumns,
-    constraintsDataStore,
-    legacySelection: selection,
-  } = $tabularData);
+  $: ({ processedColumns, constraintsDataStore, selection } = $tabularData);
   $: ({ constraints } = $constraintsDataStore);
   $: availableProcessedColumns = [...$processedColumns.values()];
   $: ({ targetType, columns, isOpen } = controller);
@@ -110,7 +106,9 @@
       // unmounting this component.
       return;
     }
-    selection.intersectSelectedRowsWithGivenColumns(_columns);
+    // TODO_3037 test to verify that selected columns are updated
+    const columnIds = _columns.map((c) => String(c.id));
+    selection.update((s) => s.ofRowColumnIntersection(s.rowIds, columnIds));
   }
   $: handleColumnsChange($columns);
 
@@ -193,7 +191,7 @@
         // will need to modify this logic when we position the new column where
         // the old columns were.
         const newFkColumn = allColumns.slice(-1)[0];
-        selection.toggleColumnSelection(newFkColumn);
+        selection.update((s) => s.ofOneColumn(String(newFkColumn.id)));
         await tick();
         scrollBasedOnSelection();
       }

From 9bc1e5ed2a05b69dadc81567a2350cb7a978389e Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 11 Sep 2023 15:03:38 -0400
Subject: [PATCH 18/85] Deprecate selection within Data Explorer

---
 .../src/stores/table-data/tabularData.ts      |  2 +-
 .../src/systems/data-explorer/QueryRunner.ts  | 78 +++++++++++++------
 .../exploration-inspector/CellTab.svelte      |  2 +-
 .../column-tab/ColumnTab.svelte               |  6 +-
 .../data-explorer/result-pane/Results.svelte  |  2 +-
 5 files changed, 64 insertions(+), 26 deletions(-)

diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts
index 0e81eb4775..a16572f80f 100644
--- a/mathesar_ui/src/stores/table-data/tabularData.ts
+++ b/mathesar_ui/src/stores/table-data/tabularData.ts
@@ -64,7 +64,7 @@ export class TabularData {
 
   table: TableEntry;
 
-  cleanupFunctions: (() => void)[] = [];
+  private cleanupFunctions: (() => void)[] = [];
 
   shareConsumer?: ShareConsumer;
 
diff --git a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
index ae6c285652..e2089bee6d 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
@@ -1,29 +1,33 @@
-import { derived, get, writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
-import type { RequestStatus } from '@mathesar/api/utils/requestUtils';
-import { ApiMultiError } from '@mathesar/api/utils/errors';
-import { ImmutableMap, CancellablePromise } from '@mathesar-component-library';
-import Pagination from '@mathesar/utils/Pagination';
+import { derived, get, writable } from 'svelte/store';
+
+import { CancellablePromise, ImmutableMap } from '@mathesar-component-library';
 import type {
+  QueryColumnMetaData,
   QueryResultRecord,
-  QueryRunResponse,
   QueryResultsResponse,
-  QueryColumnMetaData,
+  QueryRunResponse,
 } from '@mathesar/api/types/queries';
-import { runQuery, fetchQueryResults } from '@mathesar/stores/queries';
+import { ApiMultiError } from '@mathesar/api/utils/errors';
+import type { RequestStatus } from '@mathesar/api/utils/requestUtils';
 import { LegacySheetSelection } from '@mathesar/components/sheet';
+import Plane from '@mathesar/components/sheet/selection/Plane';
+import Series from '@mathesar/components/sheet/selection/Series';
+import SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
 import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
+import { fetchQueryResults, runQuery } from '@mathesar/stores/queries';
+import Pagination from '@mathesar/utils/Pagination';
 import type { ShareConsumer } from '@mathesar/utils/shares';
-import type QueryModel from './QueryModel';
 import QueryInspector from './QueryInspector';
+import type QueryModel from './QueryModel';
 import {
-  processColumnMetaData,
   getProcessedOutputColumns,
+  processColumnMetaData,
   speculateColumnMetaData,
+  type InputColumnsStoreSubstance,
   type ProcessedQueryOutputColumn,
-  type ProcessedQueryResultColumnMap,
   type ProcessedQueryOutputColumnMap,
-  type InputColumnsStoreSubstance,
+  type ProcessedQueryResultColumnMap,
 } from './utils';
 
 export interface QueryRow {
@@ -40,6 +44,7 @@ export interface QueryRowsData {
   rows: QueryRow[];
 }
 
+/** @deprecated TODO_3037 remove */
 export type QuerySheetSelection = LegacySheetSelection<
   QueryRow,
   ProcessedQueryOutputColumn
@@ -70,7 +75,10 @@ export default class QueryRunner {
   /** Keys are row ids, values are records */
   selectableRowsMap: Readable<Map<string, Record<string, unknown>>>;
 
-  selection: QuerySheetSelection;
+  /** @deprecated TODO_3037 remove */
+  legacySelection: QuerySheetSelection;
+
+  selection: Writable<SheetSelection>;
 
   inspector: QueryInspector;
 
@@ -84,6 +92,8 @@ export default class QueryRunner {
 
   private shareConsumer?: ShareConsumer;
 
+  private cleanupFunctions: (() => void)[] = [];
+
   constructor({
     query,
     abstractTypeMap,
@@ -111,7 +121,8 @@ export default class QueryRunner {
       this.rowsData,
       ({ rows }) => new Map(rows.map((r) => [getRowSelectionId(r), r.record])),
     );
-    this.selection = new LegacySheetSelection({
+
+    this.legacySelection = new LegacySheetSelection({
       getColumns: () => [...get(this.processedColumns).values()],
       getColumnOrder: () =>
         [...get(this.processedColumns).values()].map((column) => column.id),
@@ -125,6 +136,27 @@ export default class QueryRunner {
         return Math.min(pageSize, totalCount - offset, rowLength) - 1;
       },
     });
+
+    const plane = derived(
+      [this.rowsData, this.processedColumns],
+      ([{ rows }, columnsMap]) => {
+        const rowIds = new Series(rows.map(getRowSelectionId));
+        const columns = [...columnsMap.values()];
+        const columnIds = new Series(columns.map((c) => String(c.id)));
+        return new Plane(rowIds, columnIds);
+      },
+    );
+
+    this.selection = writable(new SheetSelection());
+
+    this.cleanupFunctions.push(
+      plane.subscribe((p) => this.selection.update((s) => s.forNewPlane(p))),
+    );
+
+    this.cleanupFunctions.push(
+      plane.subscribe((p) => this.selection.update((s) => s.forNewPlane(p))),
+    );
+
     this.inspector = new QueryInspector(this.query);
   }
 
@@ -237,7 +269,7 @@ export default class QueryRunner {
   async setPagination(pagination: Pagination): Promise<void> {
     this.pagination.set(pagination);
     await this.run();
-    this.selection.activateFirstCellInSelectedColumn();
+    this.legacySelection.activateFirstCellInSelectedColumn();
   }
 
   protected resetPagination(): void {
@@ -262,30 +294,31 @@ export default class QueryRunner {
   protected async resetPaginationAndRun(): Promise<void> {
     this.resetPagination();
     await this.run();
-    this.selection.activateFirstCellInSelectedColumn();
+    this.legacySelection.activateFirstCellInSelectedColumn();
   }
 
   selectColumn(alias: QueryColumnMetaData['alias']): void {
     const processedColumn = get(this.processedColumns).get(alias);
     if (!processedColumn) {
-      this.selection.resetSelection();
-      this.selection.selectAndActivateFirstCellIfExists();
+      this.legacySelection.resetSelection();
+      this.legacySelection.selectAndActivateFirstCellIfExists();
       this.inspector.selectCellTab();
       return;
     }
 
-    const isSelected = this.selection.toggleColumnSelection(processedColumn);
+    const isSelected =
+      this.legacySelection.toggleColumnSelection(processedColumn);
     if (isSelected) {
       this.inspector.selectColumnTab();
       return;
     }
 
-    this.selection.activateFirstCellInSelectedColumn();
+    this.legacySelection.activateFirstCellInSelectedColumn();
     this.inspector.selectCellTab();
   }
 
   clearSelection(): void {
-    this.selection.resetSelection();
+    this.legacySelection.resetSelection();
   }
 
   getRows(): QueryRow[] {
@@ -297,7 +330,8 @@ export default class QueryRunner {
   }
 
   destroy(): void {
-    this.selection.destroy();
+    this.legacySelection.destroy();
     this.runPromise?.cancel();
+    this.cleanupFunctions.forEach((fn) => fn());
   }
 }
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte
index e6fccb7554..e90240883c 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte
@@ -3,7 +3,7 @@
   import type QueryRunner from '../QueryRunner';
 
   export let queryHandler: QueryRunner;
-  $: ({ selection, processedColumns } = queryHandler);
+  $: ({ legacySelection: selection, processedColumns } = queryHandler);
   $: ({ activeCell } = selection);
 
   $: selectedCellValue = (() => {
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte
index c7c3d42332..0f1847c6d1 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte
@@ -14,7 +14,11 @@
 
   $: queryManager =
     queryHandler instanceof QueryManager ? queryHandler : undefined;
-  $: ({ selection, columnsMetaData, processedColumns } = queryHandler);
+  $: ({
+    legacySelection: selection,
+    columnsMetaData,
+    processedColumns,
+  } = queryHandler);
   $: ({ selectedCells, columnsSelectedWhenTheTableIsEmpty } = selection);
   $: selectedColumns = (() => {
     const ids = selection.getSelectedUniqueColumnsId(
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index da32a65f4d..8004a6bd0b 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -37,7 +37,7 @@
     selectableRowsMap,
     pagination,
     runState,
-    selection,
+    legacySelection: selection,
     inspector,
   } = queryHandler);
   $: ({ initial_columns } = $query);

From aeae784729b10752f03df40923dbe9a93697c60b Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 11 Sep 2023 20:26:59 -0400
Subject: [PATCH 19/85] Use new Selection code in data explorer cell tab

---
 .../src/systems/data-explorer/QueryRunner.ts  |  6 +--
 .../exploration-inspector/CellTab.svelte      | 49 +++++++------------
 2 files changed, 18 insertions(+), 37 deletions(-)

diff --git a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
index e2089bee6d..7e69371554 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
@@ -35,7 +35,7 @@ export interface QueryRow {
   rowIndex: number;
 }
 
-function getRowSelectionId(row: QueryRow): string {
+export function getRowSelectionId(row: QueryRow): string {
   return String(row.rowIndex);
 }
 
@@ -321,10 +321,6 @@ export default class QueryRunner {
     this.legacySelection.resetSelection();
   }
 
-  getRows(): QueryRow[] {
-    return get(this.rowsData).rows;
-  }
-
   getQueryModel(): QueryModel {
     return get(this.query);
   }
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte
index e90240883c..dfc26ed3d4 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte
@@ -1,48 +1,33 @@
 <script lang="ts">
   import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
-  import type QueryRunner from '../QueryRunner';
+  import { parseCellId } from '@mathesar/components/sheet/cellIds';
+  import QueryRunner, { getRowSelectionId } from '../QueryRunner';
 
   export let queryHandler: QueryRunner;
-  $: ({ legacySelection: selection, processedColumns } = queryHandler);
-  $: ({ activeCell } = selection);
 
-  $: selectedCellValue = (() => {
-    const cell = $activeCell;
-    if (cell) {
-      const rows = queryHandler.getRows();
-      // TODO_3037 change rowIndex to use getRowSelectionId
-      if (rows[cell.rowIndex]) {
-        return rows[cell.rowIndex].record[cell.columnId];
-      }
-    }
-    return undefined;
-  })();
-  $: processedQueryColumn = (() => {
-    const cell = $activeCell;
-    if (cell) {
-      const processedColumn = $processedColumns.get(String(cell.columnId));
-      if (processedColumn) {
-        return processedColumn;
-      }
-    }
-    return undefined;
-  })();
+  $: ({ selection, processedColumns, rowsData } = queryHandler);
+  $: ({ rows } = $rowsData);
+  $: ({ activeCellId } = $selection);
+  $: cell = activeCellId ? parseCellId(activeCellId) : undefined;
+  $: columnId = cell?.columnId ?? '';
+  // TODO: Usage of `find` is not ideal for perf here. Would be nice to store
+  // rows in a map for faster lookup.
+  $: row = rows.find((r) => getRowSelectionId(r) === cell?.rowId);
+  $: cellValue = row?.record[columnId];
+  $: column = $processedColumns.get(columnId);
 </script>
 
-<div
-  class="section-content"
-  class:has-content={selectedCellValue !== undefined}
->
-  {#if selectedCellValue !== undefined}
+<div class="section-content" class:has-content={cellValue !== undefined}>
+  {#if cellValue !== undefined}
     <section class="cell-content">
       <header>Content</header>
       <div class="content">
-        {#if processedQueryColumn}
+        {#if column}
           <CellFabric
             isIndependentOfSheet={true}
             disabled={true}
-            columnFabric={processedQueryColumn}
-            value={selectedCellValue}
+            columnFabric={column}
+            value={cellValue}
           />
         {/if}
       </div>

From efa0dcb2fc2b71283bd831db94e5e623769bd6cc Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 11 Sep 2023 20:58:09 -0400
Subject: [PATCH 20/85] Use new Selection code in DE col tab and results

---
 .../column-tab/ColumnTab.svelte               | 34 +++----
 .../result-pane/ResultRowCell.svelte          | 96 ++++++++-----------
 .../data-explorer/result-pane/Results.svelte  | 13 +--
 3 files changed, 55 insertions(+), 88 deletions(-)

diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte
index 0f1847c6d1..e37d358fdc 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
+  import { execPipe, filter, map } from 'iter-tools';
   import { onDestroy } from 'svelte';
+
   import {
     Collapsible,
     LabeledInput,
     TextInput,
+    isDefinedNonNullable,
   } from '@mathesar-component-library';
-  import type QueryRunner from '../../QueryRunner';
   import QueryManager from '../../QueryManager';
+  import type QueryRunner from '../../QueryRunner';
   import ColumnSource from './ColumnSource.svelte';
   import DeleteColumnAction from './DeleteColumnAction.svelte';
 
@@ -14,26 +17,15 @@
 
   $: queryManager =
     queryHandler instanceof QueryManager ? queryHandler : undefined;
-  $: ({
-    legacySelection: selection,
-    columnsMetaData,
-    processedColumns,
-  } = queryHandler);
-  $: ({ selectedCells, columnsSelectedWhenTheTableIsEmpty } = selection);
-  $: selectedColumns = (() => {
-    const ids = selection.getSelectedUniqueColumnsId(
-      $selectedCells,
-      $columnsSelectedWhenTheTableIsEmpty,
-    );
-    const columns = [];
-    for (const id of ids) {
-      const c = $processedColumns.get(id);
-      if (c !== undefined) {
-        columns.push(c);
-      }
-    }
-    return columns;
-  })();
+  $: ({ selection, columnsMetaData, processedColumns } = queryHandler);
+  $: ({ columnIds } = $selection);
+  $: selectedColumns = Array.from(
+    execPipe(
+      columnIds,
+      map((id) => $processedColumns.get(id)),
+      filter(isDefinedNonNullable),
+    ),
+  );
   $: hasMultipleSelectedColumns = selectedColumns.length > 1;
   $: selectedColumn =
     selectedColumns.length > 0 ? selectedColumns[0] : undefined;
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
index 1fd0244cd5..f46e21b500 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
@@ -1,47 +1,27 @@
 <script lang="ts">
   import { tick } from 'svelte';
+  import type { Writable } from 'svelte/store';
+
+  import type { RequestStatus } from '@mathesar/api/utils/requestUtils';
+  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
   import {
     SheetCell,
-    isCellActive,
     scrollBasedOnActiveCell,
-    isCellSelected,
   } from '@mathesar/components/sheet';
-  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
-  import type { RequestStatus } from '@mathesar/api/utils/requestUtils';
-  import type { QueryRow, QuerySheetSelection } from '../QueryRunner';
-  import type { ProcessedQueryOutputColumn } from '../utils';
+  import { makeCellId } from '@mathesar/components/sheet/cellIds';
+  import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
   import type QueryInspector from '../QueryInspector';
+  import { getRowSelectionId, type QueryRow } from '../QueryRunner';
+  import type { ProcessedQueryOutputColumn } from '../utils';
 
-  export let processedQueryColumn: ProcessedQueryOutputColumn;
+  export let column: ProcessedQueryOutputColumn;
   export let row: QueryRow | undefined;
   export let recordRunState: RequestStatus['state'] | undefined;
-  export let selection: QuerySheetSelection;
+  export let selection: Writable<SheetSelection>;
   export let inspector: QueryInspector;
 
-  $: ({ activeCell, selectedCells } = selection);
-  $: isActive =
-    $activeCell && row && isCellActive($activeCell, row, processedQueryColumn);
-
-  /**
-   * The name indicates that this boolean is only true when more than one cell
-   * is selected. However, because of the bug that [the active cell and selected
-   * cells do not remain in sync when using keyboard][1] this boolean is
-   * sometimes true even when multiple cells are selected. This is to
-   * differentiate between different active and selected cell using blue
-   * background styling for selected cell and blue border styling for active
-   * cell.
-   *
-   * The above bug can be fixed when following two conditions are met
-   *
-   * - We are working on keyboard accessability of the application.
-   * - `selectedCells` and `activeCell` are merged in a single store.
-   *
-   * [1]: https://github.com/centerofci/mathesar/issues/1534
-   */
-  $: isSelectedInRange =
-    row &&
-    isCellSelected($selectedCells, row, processedQueryColumn) &&
-    $selectedCells.size > 1;
+  $: cellId = row && makeCellId(getRowSelectionId(row), column.id);
+  $: isActive = cellId === $selection.activeCellId;
 
   async function checkTypeAndScroll(type?: string) {
     if (type === 'moved') {
@@ -54,48 +34,48 @@
     event: CustomEvent<{ originalEvent: KeyboardEvent; key: string }>,
   ) {
     const { originalEvent } = event.detail;
-    const type = selection.handleKeyEventsOnActiveCell(originalEvent);
-    if (type) {
-      originalEvent.stopPropagation();
-      originalEvent.preventDefault();
+    // // TODO_3037
+    // const type = selection.handleKeyEventsOnActiveCell(originalEvent);
+    // if (type) {
+    //   originalEvent.stopPropagation();
+    //   originalEvent.preventDefault();
 
-      await checkTypeAndScroll(type);
-    }
+    //   await checkTypeAndScroll(type);
+    // }
   }
 </script>
 
-<SheetCell
-  columnIdentifierKey={processedQueryColumn.id}
-  let:htmlAttributes
-  let:style
->
+<SheetCell columnIdentifierKey={column.id} let:htmlAttributes let:style>
   <div {...htmlAttributes} {style} class="cell" class:is-active={isActive}>
     {#if row || recordRunState === 'processing'}
       <CellFabric
         {isActive}
-        {isSelectedInRange}
-        columnFabric={processedQueryColumn}
-        value={row?.record[processedQueryColumn.id]}
+        isSelectedInRange={$selection.cellIds.has(cellId ?? '')}
+        columnFabric={column}
+        value={row?.record[column.id]}
         showAsSkeleton={recordRunState === 'processing'}
         disabled={true}
         on:movementKeyDown={moveThroughCells}
         on:activate={() => {
-          if (row) {
-            selection.activateCell(row, processedQueryColumn);
-            inspector.selectCellTab();
-          }
+          // // TODO_3037
+          // if (row) {
+          //   selection.activateCell(row, processedQueryColumn);
+          //   inspector.selectCellTab();
+          // }
         }}
         on:onSelectionStart={() => {
-          if (row) {
-            selection.onStartSelection(row, processedQueryColumn);
-          }
+          // // TODO_3037
+          // if (row) {
+          //   selection.onStartSelection(row, processedQueryColumn);
+          // }
         }}
         on:onMouseEnterCellWhileSelection={() => {
-          if (row) {
-            // This enables the click + drag to
-            // select multiple cells
-            selection.onMouseEnterCellWhileSelection(row, processedQueryColumn);
-          }
+          // // TODO_3037
+          // if (row) {
+          //   // This enables the click + drag to
+          //   // select multiple cells
+          //   selection.onMouseEnterCellWhileSelection(row, processedQueryColumn);
+          // }
         }}
       />
     {/if}
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index 8004a6bd0b..63370db7c0 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -10,7 +10,6 @@
     SheetHeader,
     SheetRow,
     SheetVirtualRows,
-    isColumnSelected,
   } from '@mathesar/components/sheet';
   import { SheetClipboardHandler } from '@mathesar/components/sheet/SheetClipboardHandler';
   import { rowHeaderWidthPx, rowHeightPx } from '@mathesar/geometry';
@@ -37,7 +36,7 @@
     selectableRowsMap,
     pagination,
     runState,
-    legacySelection: selection,
+    selection,
     inspector,
   } = queryHandler);
   $: ({ initial_columns } = $query);
@@ -53,7 +52,7 @@
     }),
     showToastInfo: toast.info,
   });
-  $: ({ selectedCells, columnsSelectedWhenTheTableIsEmpty } = selection);
+  $: ({ columnIds } = $selection);
   $: recordRunState = $runState?.state;
   $: errors = $runState?.state === 'failure' ? $runState.errors : undefined;
   $: columnList = [...$processedColumns.values()];
@@ -102,11 +101,7 @@
           <ResultHeaderCell
             {processedQueryColumn}
             queryRunner={queryHandler}
-            isSelected={isColumnSelected(
-              $selectedCells,
-              $columnsSelectedWhenTheTableIsEmpty,
-              processedQueryColumn,
-            )}
+            isSelected={columnIds.has(processedQueryColumn.id)}
           />
         {/each}
       </SheetHeader>
@@ -139,8 +134,8 @@
 
                 {#each columnList as processedQueryColumn (processedQueryColumn.id)}
                   <ResultRowCell
-                    {processedQueryColumn}
                     row={rows[item.index]}
+                    column={processedQueryColumn}
                     {recordRunState}
                     {selection}
                     {inspector}

From faabf47c64a182469f493bf85c238bb6d368e456 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 11 Sep 2023 21:24:54 -0400
Subject: [PATCH 21/85] Remove lots of dead code

---
 .../components/sheet/LegacySheetSelection.ts  | 731 ------------------
 mathesar_ui/src/components/sheet/index.ts     |   8 +-
 .../components/sheet/sheetScollingUtils.ts    |  49 ++
 .../systems/data-explorer/ActionsPane.svelte  |   1 -
 .../src/systems/data-explorer/QueryRunner.ts  |  53 +-
 .../column-tab/DeleteColumnAction.svelte      |   1 -
 6 files changed, 52 insertions(+), 791 deletions(-)
 delete mode 100644 mathesar_ui/src/components/sheet/LegacySheetSelection.ts
 create mode 100644 mathesar_ui/src/components/sheet/sheetScollingUtils.ts

diff --git a/mathesar_ui/src/components/sheet/LegacySheetSelection.ts b/mathesar_ui/src/components/sheet/LegacySheetSelection.ts
deleted file mode 100644
index 0aeeeb31c6..0000000000
--- a/mathesar_ui/src/components/sheet/LegacySheetSelection.ts
+++ /dev/null
@@ -1,731 +0,0 @@
-import { ImmutableSet, WritableSet } from '@mathesar-component-library';
-import { get, writable, type Unsubscriber, type Writable } from 'svelte/store';
-
-export interface SelectionColumn {
-  id: number | string;
-}
-
-export interface SelectionRow {
-  rowIndex: number;
-}
-
-// TODO: Select active cell using primary key instead of index
-// Checkout scenarios with pk consisting multiple columns
-export interface ActiveCell {
-  rowIndex: number;
-  columnId: number | string;
-}
-
-enum Direction {
-  Up = 'up',
-  Down = 'down',
-  Left = 'left',
-  Right = 'right',
-}
-
-function getDirection(event: KeyboardEvent): Direction | undefined {
-  const { key } = event;
-  const shift = event.shiftKey;
-  switch (true) {
-    case shift && key === 'Tab':
-      return Direction.Left;
-    case shift:
-      return undefined;
-    case key === 'ArrowUp':
-      return Direction.Up;
-    case key === 'ArrowDown':
-      return Direction.Down;
-    case key === 'ArrowLeft':
-      return Direction.Left;
-    case key === 'ArrowRight':
-    case key === 'Tab':
-      return Direction.Right;
-    default:
-      return undefined;
-  }
-}
-
-function getHorizontalDelta(direction: Direction): number {
-  switch (direction) {
-    case Direction.Left:
-      return -1;
-    case Direction.Right:
-      return 1;
-    default:
-      return 0;
-  }
-}
-
-function getVerticalDelta(direction: Direction): number {
-  switch (direction) {
-    case Direction.Up:
-      return -1;
-    case Direction.Down:
-      return 1;
-    default:
-      return 0;
-  }
-}
-
-export function isCellActive(
-  activeCell: ActiveCell,
-  row: SelectionRow,
-  column: SelectionColumn,
-): boolean {
-  return (
-    activeCell &&
-    activeCell?.columnId === column.id &&
-    activeCell.rowIndex === row.rowIndex
-  );
-}
-
-// TODO: Create a common utility action to handle active element based scroll
-function scrollToElement(htmlElement: HTMLElement | null): void {
-  const activeRow = htmlElement?.parentElement;
-  const container = document.querySelector('[data-sheet-body-element="list"]');
-  if (!container || !activeRow) {
-    return;
-  }
-  // Vertical scroll
-  if (
-    activeRow.offsetTop + activeRow.clientHeight + 40 >
-    container.scrollTop + container.clientHeight
-  ) {
-    const offsetValue: number =
-      container.getBoundingClientRect().bottom -
-      activeRow.getBoundingClientRect().bottom -
-      40;
-    container.scrollTop -= offsetValue;
-  } else if (activeRow.offsetTop - 30 < container.scrollTop) {
-    container.scrollTop = activeRow.offsetTop - 30;
-  }
-
-  // Horizontal scroll
-  if (
-    htmlElement.offsetLeft + activeRow.clientWidth + 30 >
-    container.scrollLeft + container.clientWidth
-  ) {
-    const offsetValue: number =
-      container.getBoundingClientRect().right -
-      htmlElement.getBoundingClientRect().right -
-      30;
-    container.scrollLeft -= offsetValue;
-  } else if (htmlElement.offsetLeft - 30 < container.scrollLeft) {
-    container.scrollLeft = htmlElement.offsetLeft - 30;
-  }
-}
-
-export function scrollBasedOnActiveCell(): void {
-  const activeCell: HTMLElement | null = document.querySelector(
-    '[data-sheet-element="cell"].is-active',
-  );
-  scrollToElement(activeCell);
-}
-
-export function scrollBasedOnSelection(): void {
-  const selectedCell: HTMLElement | null = document.querySelector(
-    '[data-sheet-element="cell"].is-selected',
-  );
-  scrollToElement(selectedCell);
-}
-
-type SelectionBounds = {
-  startRowIndex: number;
-  endRowIndex: number;
-  startColumnId: number | string;
-  endColumnId: number | string;
-};
-
-type Cell<Row extends SelectionRow, Column extends SelectionColumn> = [
-  Row,
-  Column,
-];
-
-const ROW_COLUMN_SEPARATOR = '-';
-
-/**
- * Creates Unique identifier for a cell using rowIndex and columnId
- * Storing this identifier instead of an object {rowIndex: number, columnId: number}
- * enables easier usage of the Set data type & faster equality checks
- */
-const createSelectedCellIdentifier = (
-  { rowIndex }: Pick<SelectionRow, 'rowIndex'>,
-  { id }: Pick<SelectionColumn, 'id'>,
-): string => `${rowIndex}${ROW_COLUMN_SEPARATOR}${id}`;
-
-export const isRowSelected = (
-  selectedCells: ImmutableSet<string>,
-  row: SelectionRow,
-): boolean =>
-  selectedCells
-    .valuesArray()
-    .some((cell) => cell.startsWith(`${row.rowIndex}-`));
-
-export const isColumnSelected = (
-  selectedCells: ImmutableSet<string>,
-  columnsSelectedWhenTheTableIsEmpty: ImmutableSet<SelectionColumn['id']>,
-  column: Pick<SelectionColumn, 'id'>,
-): boolean =>
-  columnsSelectedWhenTheTableIsEmpty.has(column.id) ||
-  selectedCells.valuesArray().some((cell) => cell.endsWith(`-${column.id}`));
-
-export const isCellSelected = (
-  selectedCells: ImmutableSet<string>,
-  row: Pick<SelectionRow, 'rowIndex'>,
-  column: Pick<SelectionColumn, 'id'>,
-): boolean => selectedCells.has(createSelectedCellIdentifier(row, column));
-
-// The following function is similar to splitting the string with max_split = 1.
-// input "a-b-c" => output "b-c"
-// input "a-b" => output "b"
-function splitWithLimit(str: string): string {
-  const tokens = str.split(ROW_COLUMN_SEPARATOR);
-  return tokens.slice(1).join(ROW_COLUMN_SEPARATOR);
-}
-
-function getSelectedColumnId(selectedCell: string): SelectionColumn['id'] {
-  const columnId = splitWithLimit(selectedCell);
-  const numericalColumnId = Number(columnId);
-  if (Number.isNaN(numericalColumnId)) {
-    return columnId;
-  }
-  return numericalColumnId;
-}
-
-export function getSelectedRowIndex(selectedCell: string): number {
-  return Number(selectedCell.split(ROW_COLUMN_SEPARATOR)[0]);
-}
-
-/**
- * @deprecated
- */
-export default class LegacySheetSelection<
-  Row extends SelectionRow,
-  Column extends SelectionColumn,
-> {
-  private getColumns: () => Column[];
-
-  private getColumnOrder: () => string[] | number[];
-
-  private getRows: () => Row[];
-
-  // max index is inclusive
-  private getMaxSelectionRowIndex: () => number;
-
-  activeCell: Writable<ActiveCell | undefined>;
-
-  private selectionBounds: SelectionBounds | undefined;
-
-  private activeCellUnsubscriber: Unsubscriber;
-
-  selectedCells: WritableSet<string>;
-
-  /**
-   * When the table has a non-zero number of rows, we store the user's selection
-   * in the `selectedCells` store. But when the table has no rows (and thus no
-   * cells) we still need a way to select columns to configure the data types,
-   * so we use this store as a workaround. More elegant solutions are being
-   * discussed in [1732][1].
-   *
-   * [1]: https://github.com/centerofci/mathesar/issues/1732
-   */
-  columnsSelectedWhenTheTableIsEmpty: WritableSet<Column['id']>;
-
-  freezeSelection: boolean;
-
-  selectionInProgress: Writable<boolean>;
-
-  constructor(args: {
-    getColumns: () => Column[];
-    getColumnOrder: () => string[] | number[];
-    getRows: () => Row[];
-    getMaxSelectionRowIndex: () => number;
-  }) {
-    this.selectedCells = new WritableSet<string>();
-    this.columnsSelectedWhenTheTableIsEmpty = new WritableSet<Column['id']>();
-    this.getColumns = args.getColumns;
-    this.getColumnOrder = args.getColumnOrder;
-    this.getRows = args.getRows;
-    this.getMaxSelectionRowIndex = args.getMaxSelectionRowIndex;
-    this.freezeSelection = false;
-    this.selectionInProgress = writable<boolean>(false);
-    this.activeCell = writable<ActiveCell | undefined>(undefined);
-
-    /**
-     * TODO:
-     * - This adds a document level event listener for each selection
-     * store instance, and the listener doesn't seem to get removed.
-     * - Refactor this logic and avoid such listeners within the store instance.
-     */
-    // This event terminates the cell selection process
-    // specially useful when selecting multiple cells
-    // Adding this on document to enable boundry cells selection
-    // when the user drags the mouse out of the table view
-    document.addEventListener('mouseup', () => {
-      this.onEndSelection();
-    });
-
-    // Keep active cell and selected cell in sync
-    this.activeCellUnsubscriber = this.activeCell.subscribe((activeCell) => {
-      if (activeCell) {
-        const activeCellRow = this.getRows().find(
-          (row) => row.rowIndex === activeCell.rowIndex,
-        );
-        const activeCellColumn = this.getColumns().find(
-          (column) => column.id === activeCell.columnId,
-        );
-        if (activeCellRow && activeCellColumn) {
-          /**
-           * This handles the very rare edge case
-           * when the user starts the selection using mouse
-           * but before ending(mouseup event)
-           * she change the active cell using keyboard
-           */
-          this.selectionBounds = undefined;
-          this.selectMultipleCells([[activeCellRow, activeCellColumn]]);
-        } else {
-          // We need to unselect the Selected cells
-          // when navigating Placeholder cells
-          this.resetSelection();
-        }
-      } else {
-        this.resetSelection();
-      }
-    });
-  }
-
-  onStartSelection(row: SelectionRow, column: SelectionColumn): void {
-    if (this.freezeSelection) {
-      return;
-    }
-
-    this.selectionInProgress.set(true);
-    // Initialize the bounds of the selection
-    this.selectionBounds = {
-      startColumnId: column.id,
-      endColumnId: column.id,
-      startRowIndex: row.rowIndex,
-      endRowIndex: row.rowIndex,
-    };
-
-    const cells = this.getIncludedCells(this.selectionBounds);
-    this.selectMultipleCells(cells);
-  }
-
-  onMouseEnterCellWhileSelection(
-    row: SelectionRow,
-    column: SelectionColumn,
-  ): void {
-    const { rowIndex } = row;
-    const { id } = column;
-
-    // If there is no selection start cell,
-    // this means the selection was never initiated
-    if (!this.selectionBounds || this.freezeSelection) {
-      return;
-    }
-
-    this.selectionBounds.endRowIndex = rowIndex;
-    this.selectionBounds.endColumnId = id;
-    const cells = this.getIncludedCells(this.selectionBounds);
-    this.selectMultipleCells(cells);
-  }
-
-  onEndSelection(): void {
-    if (this.selectionBounds) {
-      const cells = this.getIncludedCells(this.selectionBounds);
-      this.selectMultipleCells(cells);
-      this.selectionBounds = undefined;
-    }
-    this.selectionInProgress.set(false);
-  }
-
-  selectAndActivateFirstCellIfExists(): void {
-    const firstRow = this.getRows()[0];
-    const firstColumn = this.getColumns()[0];
-    if (firstRow && firstColumn) {
-      this.selectMultipleCells([[firstRow, firstColumn]]);
-      this.activateCell(firstRow, firstColumn);
-    }
-  }
-
-  selectAndActivateFirstDataEntryCellInLastRow(): void {
-    const currentRows = this.getRows();
-    const currentColumns = this.getColumns();
-    if (currentRows.length > 0 && currentColumns.length > 1) {
-      this.activateCell(currentRows[currentRows.length - 1], currentColumns[1]);
-    }
-  }
-
-  getIncludedCells(selectionBounds: SelectionBounds): Cell<Row, Column>[] {
-    const { startRowIndex, endRowIndex, startColumnId, endColumnId } =
-      selectionBounds;
-    const minRowIndex = Math.min(startRowIndex, endRowIndex);
-    const maxRowIndex = Math.max(startRowIndex, endRowIndex);
-
-    const columnOrder = this.getColumnOrder();
-
-    const startOrderIndex = columnOrder.findIndex((id) => id === startColumnId);
-    const endOrderIndex = columnOrder.findIndex((id) => id === endColumnId);
-
-    const minColumnPosition = Math.min(startOrderIndex, endOrderIndex);
-    const maxColumnPosition = Math.max(startOrderIndex, endOrderIndex);
-    const columnOrderSelected = columnOrder.slice(
-      minColumnPosition,
-      maxColumnPosition + 1,
-    );
-
-    const columns = this.getColumns();
-
-    const cells: Cell<Row, Column>[] = [];
-    this.getRows().forEach((row) => {
-      const { rowIndex } = row;
-      if (rowIndex >= minRowIndex && rowIndex <= maxRowIndex) {
-        columnOrderSelected.forEach((columnId) => {
-          const column = columns.find((c) => c.id === columnId);
-          if (column) {
-            cells.push([row, column]);
-          }
-        });
-      }
-    });
-
-    return cells;
-  }
-
-  private selectMultipleCells(cells: Array<Cell<Row, Column>>) {
-    const identifiers = cells.map(([row, column]) =>
-      createSelectedCellIdentifier(row, column),
-    );
-    this.selectedCells.reconstruct(identifiers);
-  }
-
-  resetSelection(): void {
-    this.selectionBounds = undefined;
-    this.columnsSelectedWhenTheTableIsEmpty.clear();
-    this.selectedCells.clear();
-  }
-
-  isCompleteColumnSelected(column: Pick<Column, 'id'>): boolean {
-    if (this.getRows().length) {
-      return (
-        this.columnsSelectedWhenTheTableIsEmpty.getHas(column.id) ||
-        this.getRows().every((row) =>
-          isCellSelected(get(this.selectedCells), row, column),
-        )
-      );
-    }
-    return this.columnsSelectedWhenTheTableIsEmpty.getHas(column.id);
-  }
-
-  private isCompleteRowSelected(row: Pick<Row, 'rowIndex'>): boolean {
-    const columns = this.getColumns();
-    return (
-      columns.length > 0 &&
-      columns.every((column) =>
-        isCellSelected(get(this.selectedCells), row, column),
-      )
-    );
-  }
-
-  isAnyColumnCompletelySelected(): boolean {
-    const selectedCellsArray = get(this.selectedCells).valuesArray();
-    const checkedColumns: (number | string)[] = [];
-
-    for (const cell of selectedCellsArray) {
-      const columnId = getSelectedColumnId(cell);
-      if (!checkedColumns.includes(columnId)) {
-        if (this.isCompleteColumnSelected({ id: columnId })) {
-          return true;
-        }
-        checkedColumns.push(columnId);
-      }
-    }
-
-    return false;
-  }
-
-  isAnyRowCompletelySelected(): boolean {
-    const selectedCellsArray = get(this.selectedCells).valuesArray();
-    const checkedRows: number[] = [];
-
-    for (const cell of selectedCellsArray) {
-      const rowIndex = getSelectedRowIndex(cell);
-      if (!checkedRows.includes(rowIndex)) {
-        if (this.isCompleteRowSelected({ rowIndex })) {
-          return true;
-        }
-        checkedRows.push(rowIndex);
-      }
-    }
-
-    return false;
-  }
-
-  /**
-   * Modifies the selected cells, forming a new selection by maintaining the
-   * currently selected rows but altering the selected columns to match the
-   * supplied columns.
-   */
-  intersectSelectedRowsWithGivenColumns(columns: Column[]): void {
-    const selectedRows = this.getSelectedUniqueRowsId(
-      new ImmutableSet(this.selectedCells.getValues()),
-    );
-    const cells: Cell<Row, Column>[] = [];
-    columns.forEach((column) => {
-      selectedRows.forEach((rowIndex) => {
-        const row = this.getRows()[rowIndex];
-        cells.push([row, column]);
-      });
-    });
-
-    this.selectMultipleCells(cells);
-  }
-
-  /**
-   * Use this only for programmatic selection
-   *
-   * Prefer: onColumnSelectionStart when
-   * selection is done using
-   * user interactions
-   */
-  toggleColumnSelection(column: Column): boolean {
-    const isCompleteColumnSelected = this.isCompleteColumnSelected(column);
-    this.activateCell({ rowIndex: 0 }, column);
-
-    if (isCompleteColumnSelected) {
-      this.resetSelection();
-      return false;
-    }
-
-    const rows = this.getRows();
-
-    if (rows.length === 0) {
-      this.resetSelection();
-      this.columnsSelectedWhenTheTableIsEmpty.add(column.id);
-      return true;
-    }
-
-    const cells: Cell<Row, Column>[] = [];
-    rows.forEach((row) => {
-      cells.push([row, column]);
-    });
-
-    // Clearing the selection
-    // since we do not have cmd+click to select
-    // disjointed cells
-    this.resetSelection();
-    this.selectMultipleCells(cells);
-    return true;
-  }
-
-  /**
-   * Use this only for programmatic selection
-   *
-   * Prefer: onRowSelectionStart when
-   * selection is done using
-   * user interactions
-   */
-  toggleRowSelection(row: Row): void {
-    const isCompleteRowSelected = this.isCompleteRowSelected(row);
-
-    if (isCompleteRowSelected) {
-      // Clear the selection - deselect the row
-      this.resetSelection();
-    } else {
-      const cells: Cell<Row, Column>[] = [];
-      this.getColumns().forEach((column) => {
-        cells.push([row, column]);
-      });
-
-      // Clearing the selection
-      // since we do not have cmd+click to select
-      // disjointed cells
-      this.resetSelection();
-      this.selectMultipleCells(cells);
-    }
-  }
-
-  onColumnSelectionStart(column: Column): boolean {
-    if (!this.isCompleteColumnSelected(column)) {
-      this.activateCell({ rowIndex: 0 }, { id: column.id });
-      const rows = this.getRows();
-
-      if (rows.length === 0) {
-        this.resetSelection();
-        this.columnsSelectedWhenTheTableIsEmpty.add(column.id);
-        return true;
-      }
-
-      this.onStartSelection(rows[0], column);
-      this.onMouseEnterCellWhileSelection(rows[rows.length - 1], column);
-    }
-    return true;
-  }
-
-  onMouseEnterColumnHeaderWhileSelection(column: Column): boolean {
-    const rows = this.getRows();
-
-    if (rows.length === 0) {
-      this.resetSelection();
-      this.columnsSelectedWhenTheTableIsEmpty.add(column.id);
-      return true;
-    }
-
-    this.onMouseEnterCellWhileSelection(rows[rows.length - 1], column);
-    return true;
-  }
-
-  onRowSelectionStart(row: Row): boolean {
-    const columns = this.getColumns();
-    const columnOrder = this.getColumnOrder();
-
-    if (!columns.length) {
-      // Not possible to have tables without columns
-    }
-
-    const startColumnId = columnOrder[0];
-    const endColumnId = columnOrder[columnOrder.length - 1];
-    const startColumn = columns.find((c) => c.id === startColumnId);
-    const endColumn = columns.find((c) => c.id === endColumnId);
-
-    if (startColumn && endColumn) {
-      this.activateCell(row, startColumn);
-      this.onStartSelection(row, startColumn);
-      this.onMouseEnterCellWhileSelection(row, endColumn);
-    }
-
-    return true;
-  }
-
-  onMouseEnterRowHeaderWhileSelection(row: Row): boolean {
-    const columns = this.getColumns();
-
-    if (!columns.length) {
-      // Not possible to have tables without columns
-    }
-
-    const endColumn = columns[columns.length - 1];
-    this.onMouseEnterCellWhileSelection(row, endColumn);
-    return true;
-  }
-
-  resetActiveCell(): void {
-    this.activeCell.set(undefined);
-  }
-
-  activateCell(row: Pick<Row, 'rowIndex'>, column: Pick<Column, 'id'>): void {
-    this.activeCell.set({
-      rowIndex: row.rowIndex,
-      columnId: column.id,
-    });
-  }
-
-  focusCell(row: Pick<Row, 'rowIndex'>, column: Pick<Column, 'id'>): void {
-    const cellsInTheColumn = document.querySelectorAll(
-      `[data-column-identifier="${column.id}"]`,
-    );
-    const targetCell = cellsInTheColumn.item(row.rowIndex);
-    (targetCell?.querySelector('.cell-wrapper') as HTMLElement)?.focus();
-  }
-
-  private getAdjacentCell(
-    activeCell: ActiveCell,
-    direction: Direction,
-  ): ActiveCell | undefined {
-    const columnOrder = this.getColumnOrder();
-
-    const rowIndex = (() => {
-      const delta = getVerticalDelta(direction);
-      if (delta === 0) {
-        return activeCell.rowIndex;
-      }
-      const minRowIndex = 0;
-      const maxRowIndex = this.getMaxSelectionRowIndex();
-      const newRowIndex = activeCell.rowIndex + delta;
-      if (newRowIndex < minRowIndex || newRowIndex > maxRowIndex) {
-        return undefined;
-      }
-      return newRowIndex;
-    })();
-    if (rowIndex === undefined) {
-      return undefined;
-    }
-
-    const columnId = (() => {
-      const delta = getHorizontalDelta(direction);
-      if (delta === 0) {
-        return activeCell.columnId;
-      }
-      if (activeCell.columnId) {
-        const index = columnOrder.findIndex((id) => id === activeCell.columnId);
-        const targetId = columnOrder[index + delta];
-        return targetId;
-      }
-      return '';
-    })();
-    if (!columnId) {
-      return undefined;
-    }
-    return { rowIndex, columnId };
-  }
-
-  handleKeyEventsOnActiveCell(key: KeyboardEvent): 'moved' | undefined {
-    const direction = getDirection(key);
-    if (!direction) {
-      return undefined;
-    }
-    let moved = false;
-    this.activeCell.update((activeCell) => {
-      if (!activeCell) {
-        return undefined;
-      }
-      const adjacentCell = this.getAdjacentCell(activeCell, direction);
-      if (adjacentCell) {
-        moved = true;
-        return adjacentCell;
-      }
-      return activeCell;
-    });
-
-    return moved ? 'moved' : undefined;
-  }
-
-  activateFirstCellInSelectedColumn() {
-    const activeCell = get(this.activeCell);
-    if (activeCell) {
-      this.activateCell({ rowIndex: 0 }, { id: activeCell.columnId });
-    }
-  }
-
-  /**
-   * This method does not utilize class properties inorder
-   * to make it reactive during component usage.
-   *
-   * It is placed within the class inorder to make use of
-   * class types
-   */
-  getSelectedUniqueColumnsId(
-    selectedCells: ImmutableSet<string>,
-    columnsSelectedWhenTheTableIsEmpty: ImmutableSet<Column['id']>,
-  ): Column['id'][] {
-    const setOfUniqueColumnIds = new Set([
-      ...[...selectedCells].map(getSelectedColumnId),
-      ...columnsSelectedWhenTheTableIsEmpty,
-    ]);
-    return Array.from(setOfUniqueColumnIds);
-  }
-
-  getSelectedUniqueRowsId(
-    selectedCells: ImmutableSet<string>,
-  ): Row['rowIndex'][] {
-    const setOfUniqueRowIndex = new Set([
-      ...[...selectedCells].map(getSelectedRowIndex),
-    ]);
-    return Array.from(setOfUniqueRowIndex);
-  }
-
-  destroy(): void {
-    this.activeCellUnsubscriber();
-  }
-}
diff --git a/mathesar_ui/src/components/sheet/index.ts b/mathesar_ui/src/components/sheet/index.ts
index 0448df86aa..cae20e3d07 100644
--- a/mathesar_ui/src/components/sheet/index.ts
+++ b/mathesar_ui/src/components/sheet/index.ts
@@ -5,13 +5,7 @@ export { default as SheetPositionableCell } from './SheetPositionableCell.svelte
 export { default as SheetCellResizer } from './SheetCellResizer.svelte';
 export { default as SheetVirtualRows } from './SheetVirtualRows.svelte';
 export { default as SheetRow } from './SheetRow.svelte';
-export { default as LegacySheetSelection } from './LegacySheetSelection';
 export {
-  isColumnSelected,
-  isRowSelected,
-  isCellSelected,
-  getSelectedRowIndex,
-  isCellActive,
   scrollBasedOnActiveCell,
   scrollBasedOnSelection,
-} from './LegacySheetSelection';
+} from './sheetScollingUtils';
diff --git a/mathesar_ui/src/components/sheet/sheetScollingUtils.ts b/mathesar_ui/src/components/sheet/sheetScollingUtils.ts
new file mode 100644
index 0000000000..130f87cefd
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/sheetScollingUtils.ts
@@ -0,0 +1,49 @@
+// TODO: Create a common utility action to handle active element based scroll
+function scrollToElement(htmlElement: HTMLElement | null): void {
+  const activeRow = htmlElement?.parentElement;
+  const container = document.querySelector('[data-sheet-body-element="list"]');
+  if (!container || !activeRow) {
+    return;
+  }
+  // Vertical scroll
+  if (
+    activeRow.offsetTop + activeRow.clientHeight + 40 >
+    container.scrollTop + container.clientHeight
+  ) {
+    const offsetValue: number =
+      container.getBoundingClientRect().bottom -
+      activeRow.getBoundingClientRect().bottom -
+      40;
+    container.scrollTop -= offsetValue;
+  } else if (activeRow.offsetTop - 30 < container.scrollTop) {
+    container.scrollTop = activeRow.offsetTop - 30;
+  }
+
+  // Horizontal scroll
+  if (
+    htmlElement.offsetLeft + activeRow.clientWidth + 30 >
+    container.scrollLeft + container.clientWidth
+  ) {
+    const offsetValue: number =
+      container.getBoundingClientRect().right -
+      htmlElement.getBoundingClientRect().right -
+      30;
+    container.scrollLeft -= offsetValue;
+  } else if (htmlElement.offsetLeft - 30 < container.scrollLeft) {
+    container.scrollLeft = htmlElement.offsetLeft - 30;
+  }
+}
+
+export function scrollBasedOnActiveCell(): void {
+  const activeCell: HTMLElement | null = document.querySelector(
+    '[data-sheet-element="cell"].is-active',
+  );
+  scrollToElement(activeCell);
+}
+
+export function scrollBasedOnSelection(): void {
+  const selectedCell: HTMLElement | null = document.querySelector(
+    '[data-sheet-element="cell"].is-selected',
+  );
+  scrollToElement(selectedCell);
+}
diff --git a/mathesar_ui/src/systems/data-explorer/ActionsPane.svelte b/mathesar_ui/src/systems/data-explorer/ActionsPane.svelte
index 77d06c808a..b13fc93274 100644
--- a/mathesar_ui/src/systems/data-explorer/ActionsPane.svelte
+++ b/mathesar_ui/src/systems/data-explorer/ActionsPane.svelte
@@ -50,7 +50,6 @@
     void queryManager.update((q) =>
       q.withBaseTable(tableEntry ? tableEntry.id : undefined),
     );
-    queryManager.clearSelection();
     linkCollapsibleOpenState = {};
   }
 
diff --git a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
index 7e69371554..63a4cb6db0 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
@@ -10,7 +10,6 @@ import type {
 } from '@mathesar/api/types/queries';
 import { ApiMultiError } from '@mathesar/api/utils/errors';
 import type { RequestStatus } from '@mathesar/api/utils/requestUtils';
-import { LegacySheetSelection } from '@mathesar/components/sheet';
 import Plane from '@mathesar/components/sheet/selection/Plane';
 import Series from '@mathesar/components/sheet/selection/Series';
 import SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
@@ -25,7 +24,6 @@ import {
   processColumnMetaData,
   speculateColumnMetaData,
   type InputColumnsStoreSubstance,
-  type ProcessedQueryOutputColumn,
   type ProcessedQueryOutputColumnMap,
   type ProcessedQueryResultColumnMap,
 } from './utils';
@@ -44,12 +42,6 @@ export interface QueryRowsData {
   rows: QueryRow[];
 }
 
-/** @deprecated TODO_3037 remove */
-export type QuerySheetSelection = LegacySheetSelection<
-  QueryRow,
-  ProcessedQueryOutputColumn
->;
-
 type QueryRunMode = 'queryId' | 'queryObject';
 
 export default class QueryRunner {
@@ -75,9 +67,6 @@ export default class QueryRunner {
   /** Keys are row ids, values are records */
   selectableRowsMap: Readable<Map<string, Record<string, unknown>>>;
 
-  /** @deprecated TODO_3037 remove */
-  legacySelection: QuerySheetSelection;
-
   selection: Writable<SheetSelection>;
 
   inspector: QueryInspector;
@@ -122,21 +111,6 @@ export default class QueryRunner {
       ({ rows }) => new Map(rows.map((r) => [getRowSelectionId(r), r.record])),
     );
 
-    this.legacySelection = new LegacySheetSelection({
-      getColumns: () => [...get(this.processedColumns).values()],
-      getColumnOrder: () =>
-        [...get(this.processedColumns).values()].map((column) => column.id),
-      getRows: () => get(this.rowsData).rows,
-      getMaxSelectionRowIndex: () => {
-        const rowLength = get(this.rowsData).rows.length;
-        const totalCount = get(this.rowsData).totalCount ?? 0;
-        const pagination = get(this.pagination);
-        const { offset } = pagination;
-        const pageSize = pagination.size;
-        return Math.min(pageSize, totalCount - offset, rowLength) - 1;
-      },
-    });
-
     const plane = derived(
       [this.rowsData, this.processedColumns],
       ([{ rows }, columnsMap]) => {
@@ -153,10 +127,6 @@ export default class QueryRunner {
       plane.subscribe((p) => this.selection.update((s) => s.forNewPlane(p))),
     );
 
-    this.cleanupFunctions.push(
-      plane.subscribe((p) => this.selection.update((s) => s.forNewPlane(p))),
-    );
-
     this.inspector = new QueryInspector(this.query);
   }
 
@@ -269,7 +239,6 @@ export default class QueryRunner {
   async setPagination(pagination: Pagination): Promise<void> {
     this.pagination.set(pagination);
     await this.run();
-    this.legacySelection.activateFirstCellInSelectedColumn();
   }
 
   protected resetPagination(): void {
@@ -283,7 +252,6 @@ export default class QueryRunner {
   }
 
   protected resetResults(): void {
-    this.clearSelection();
     this.runPromise?.cancel();
     this.resetPagination();
     this.rowsData.set({ totalCount: 0, rows: [] });
@@ -294,31 +262,15 @@ export default class QueryRunner {
   protected async resetPaginationAndRun(): Promise<void> {
     this.resetPagination();
     await this.run();
-    this.legacySelection.activateFirstCellInSelectedColumn();
   }
 
   selectColumn(alias: QueryColumnMetaData['alias']): void {
     const processedColumn = get(this.processedColumns).get(alias);
     if (!processedColumn) {
-      this.legacySelection.resetSelection();
-      this.legacySelection.selectAndActivateFirstCellIfExists();
-      this.inspector.selectCellTab();
-      return;
-    }
-
-    const isSelected =
-      this.legacySelection.toggleColumnSelection(processedColumn);
-    if (isSelected) {
-      this.inspector.selectColumnTab();
       return;
     }
-
-    this.legacySelection.activateFirstCellInSelectedColumn();
-    this.inspector.selectCellTab();
-  }
-
-  clearSelection(): void {
-    this.legacySelection.resetSelection();
+    this.selection.update((s) => s.ofOneColumn(processedColumn.id));
+    this.inspector.selectColumnTab();
   }
 
   getQueryModel(): QueryModel {
@@ -326,7 +278,6 @@ export default class QueryRunner {
   }
 
   destroy(): void {
-    this.legacySelection.destroy();
     this.runPromise?.cancel();
     this.cleanupFunctions.forEach((fn) => fn());
   }
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/DeleteColumnAction.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/DeleteColumnAction.svelte
index 1b1c124bdb..2beb400e82 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/DeleteColumnAction.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/DeleteColumnAction.svelte
@@ -50,7 +50,6 @@
     void queryManager.update((q) =>
       q.withoutInitialColumns(selectedColumnAliases),
     );
-    queryManager.clearSelection();
   }
 </script>
 

From 9a9dbd8da4fc69c84ac2b355388b30efe137a6d4 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 11 Sep 2023 21:27:00 -0400
Subject: [PATCH 22/85] Rename `isSelectedInRange` to `isSelected`

---
 mathesar_ui/src/components/cell-fabric/CellFabric.svelte    | 4 ++--
 .../cell-fabric/data-types/components/CellWrapper.svelte    | 4 ++--
 .../data-types/components/SteppedInputCell.svelte           | 4 ++--
 .../components/__tests__/SteppedInputCell.test.ts           | 2 +-
 .../data-types/components/array/ArrayCell.svelte            | 4 ++--
 .../data-types/components/checkbox/CheckboxCell.svelte      | 4 ++--
 .../data-types/components/date-time/DateTimeCell.svelte     | 4 ++--
 .../components/formatted-input/FormattedInputCell.svelte    | 4 ++--
 .../components/linked-record/LinkedRecordCell.svelte        | 4 ++--
 .../components/linked-record/LinkedRecordInput.svelte       | 2 +-
 .../data-types/components/money/MoneyCell.svelte            | 4 ++--
 .../data-types/components/number/NumberCell.svelte          | 4 ++--
 .../data-types/components/primary-key/PrimaryKeyCell.svelte | 4 ++--
 .../data-types/components/select/SingleSelectCell.svelte    | 4 ++--
 .../data-types/components/textarea/TextAreaCell.svelte      | 4 ++--
 .../data-types/components/textbox/TextBoxCell.svelte        | 4 ++--
 .../cell-fabric/data-types/components/typeDefinitions.ts    | 2 +-
 .../cell-fabric/data-types/components/uri/UriCell.svelte    | 4 ++--
 .../systems/data-explorer/result-pane/ResultRowCell.svelte  | 2 +-
 mathesar_ui/src/systems/table-view/row/RowCell.svelte       | 6 +++---
 20 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/mathesar_ui/src/components/cell-fabric/CellFabric.svelte b/mathesar_ui/src/components/cell-fabric/CellFabric.svelte
index 8a405123da..9046a74872 100644
--- a/mathesar_ui/src/components/cell-fabric/CellFabric.svelte
+++ b/mathesar_ui/src/components/cell-fabric/CellFabric.svelte
@@ -21,7 +21,7 @@
     | ((recordId: string, recordSummary: string) => void)
     | undefined = undefined;
   export let isActive = false;
-  export let isSelectedInRange = false;
+  export let isSelected = false;
   export let disabled = false;
   export let showAsSkeleton = false;
   export let horizontalAlignment: HorizontalAlignment | undefined = undefined;
@@ -56,7 +56,7 @@
     this={component}
     {...props}
     {isActive}
-    {isSelectedInRange}
+    {isSelected}
     {disabled}
     {isIndependentOfSheet}
     {horizontalAlignment}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
index a731edd395..ab639cc1d8 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
@@ -6,7 +6,7 @@
 
   export let element: HTMLElement | undefined = undefined;
   export let isActive = false;
-  export let isSelectedInRange = false;
+  export let isSelected = false;
   export let disabled = false;
   export let mode: 'edit' | 'default' = 'default';
   export let multiLineTruncate = false;
@@ -116,7 +116,7 @@
   {...$$restProps}
 >
   {#if mode !== 'edit'}
-    <CellBackground color="rgba(14, 101, 235, 0.1)" when={isSelectedInRange} />
+    <CellBackground color="rgba(14, 101, 235, 0.1)" when={isSelected} />
     <CellBackground
       color="var(--cell-background-color)"
       when={valueComparisonOutcome !== 'noMatch'}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte
index 695fbb968e..4544741629 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte
@@ -21,7 +21,7 @@
   type Props = CellTypeProps<Value>;
 
   export let isActive: Props['isActive'];
-  export let isSelectedInRange: Props['isSelectedInRange'];
+  export let isSelected: Props['isSelected'];
   export let value: Props['value'];
   export let disabled: Props['disabled'];
   export let multiLineTruncate = false;
@@ -154,7 +154,7 @@
 
 <CellWrapper
   {isActive}
-  {isSelectedInRange}
+  {isSelected}
   {disabled}
   bind:element={cellRef}
   on:dblclick={setModeToEdit}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/__tests__/SteppedInputCell.test.ts b/mathesar_ui/src/components/cell-fabric/data-types/components/__tests__/SteppedInputCell.test.ts
index 6be1b9daeb..987056f69e 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/__tests__/SteppedInputCell.test.ts
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/__tests__/SteppedInputCell.test.ts
@@ -4,7 +4,7 @@ import SteppedInputCell from '../SteppedInputCell.svelte';
 
 const requiredProps = {
   isActive: false,
-  isSelectedInRange: false,
+  isSelected: false,
   disabled: false,
 };
 
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte
index 4dfff4c2aa..1f25b9fc64 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte
@@ -12,7 +12,7 @@
   const dispatch = createEventDispatcher();
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
+  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
@@ -44,7 +44,7 @@
 
 <CellWrapper
   {isActive}
-  {isSelectedInRange}
+  {isSelected}
   {disabled}
   {isIndependentOfSheet}
   on:mouseenter
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte
index d9932a13f8..dd31115e7c 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte
@@ -10,7 +10,7 @@
   const dispatch = createEventDispatcher();
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
+  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -69,7 +69,7 @@
 <CellWrapper
   bind:element={cellRef}
   {isActive}
-  {isSelectedInRange}
+  {isSelected}
   {disabled}
   {isIndependentOfSheet}
   {valueComparisonOutcome}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte
index 26a046e6fb..e3a8144221 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte
@@ -6,7 +6,7 @@
   type $$Props = DateTimeCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
+  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
@@ -22,7 +22,7 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelectedInRange}
+  {isSelected}
   {disabled}
   highlightSubstringMatches={false}
   {isIndependentOfSheet}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte
index e4dea6cf04..1738bc4170 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte
@@ -6,7 +6,7 @@
   type $$Props = FormattedInputCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
+  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
@@ -23,7 +23,7 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelectedInRange}
+  {isSelected}
   {disabled}
   {isIndependentOfSheet}
   {showTruncationPopover}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte
index 0fc9277cd6..654e7a4085 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte
@@ -20,7 +20,7 @@
   const recordSelector = getRecordSelectorFromContext();
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
+  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'] = undefined;
   export let searchValue: $$Props['searchValue'] = undefined;
   export let recordSummary: $$Props['recordSummary'] = undefined;
@@ -88,7 +88,7 @@
 
 <CellWrapper
   {isActive}
-  {isSelectedInRange}
+  {isSelected}
   {disabled}
   {isIndependentOfSheet}
   on:mouseenter
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordInput.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordInput.svelte
index 1cbbf10429..618ea9c5cb 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordInput.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordInput.svelte
@@ -22,7 +22,7 @@
   interface $$Props
     extends Omit<
       LinkedRecordCellProps,
-      'isActive' | 'isSelectedInRange' | 'isProcessing' | 'isIndependentOfSheet'
+      'isActive' | 'isSelected' | 'isProcessing' | 'isIndependentOfSheet'
     > {
     class?: string;
     id?: string;
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte
index 54e9f7a556..ee81c06f06 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte
@@ -6,7 +6,7 @@
   type $$Props = MoneyCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
+  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -19,7 +19,7 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelectedInRange}
+  {isSelected}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte
index af78d264ec..a7941ad677 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte
@@ -9,7 +9,7 @@
   type $$Props = NumberCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
+  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -23,7 +23,7 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelectedInRange}
+  {isSelected}
   {disabled}
   {isIndependentOfSheet}
   {showTruncationPopover}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte
index 3401064021..dbea8f0f5e 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte
@@ -13,7 +13,7 @@
   const dispatch = createEventDispatcher();
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
+  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let tableId: $$Props['tableId'];
@@ -52,7 +52,7 @@
 
 <CellWrapper
   {isActive}
-  {isSelectedInRange}
+  {isSelected}
   {disabled}
   {isIndependentOfSheet}
   on:mouseenter
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte
index a50750788f..9e2c64e214 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte
@@ -24,7 +24,7 @@
   const id = getGloballyUniqueId();
 
   export let isActive: DefinedProps['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
+  export let isSelected: $$Props['isSelected'];
   export let value: DefinedProps['value'] = undefined;
   export let disabled: DefinedProps['disabled'];
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
@@ -113,7 +113,7 @@
     aria-controls={id}
     aria-haspopup="listbox"
     {isActive}
-    {isSelectedInRange}
+    {isSelected}
     {disabled}
     {isIndependentOfSheet}
     on:mousedown={handleMouseDown}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte
index 4783748f39..5e948ad64e 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte
@@ -7,7 +7,7 @@
   type $$Props = TextAreaCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
+  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -33,7 +33,7 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelectedInRange}
+  {isSelected}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte
index b14bc78854..1cecffa707 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte
@@ -6,7 +6,7 @@
   type $$Props = TextBoxCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
+  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -20,7 +20,7 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelectedInRange}
+  {isSelected}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/typeDefinitions.ts b/mathesar_ui/src/components/cell-fabric/data-types/components/typeDefinitions.ts
index 93e6dafa29..a1ab9c1178 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/typeDefinitions.ts
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/typeDefinitions.ts
@@ -13,7 +13,7 @@ export type CellValueFormatter<T> = (
 export interface CellTypeProps<Value> {
   value: Value | null | undefined;
   isActive: boolean;
-  isSelectedInRange: boolean;
+  isSelected: boolean;
   disabled: boolean;
   searchValue?: unknown;
   isProcessing: boolean;
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte
index 08bfa74608..0ff4e5c8fd 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte
@@ -11,7 +11,7 @@
   type $$Props = CellTypeProps<string>;
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
+  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -22,7 +22,7 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelectedInRange}
+  {isSelected}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
index f46e21b500..50620a2fbd 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
@@ -50,7 +50,7 @@
     {#if row || recordRunState === 'processing'}
       <CellFabric
         {isActive}
-        isSelectedInRange={$selection.cellIds.has(cellId ?? '')}
+        isSelected={$selection.cellIds.has(cellId ?? '')}
         columnFabric={column}
         value={row?.record[column.id]}
         showAsSkeleton={recordRunState === 'processing'}
diff --git a/mathesar_ui/src/systems/table-view/row/RowCell.svelte b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
index 68f6e973b7..538c466937 100644
--- a/mathesar_ui/src/systems/table-view/row/RowCell.svelte
+++ b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
@@ -68,7 +68,7 @@
   $: ({ column, linkFk } = processedColumn);
   $: columnId = column.id;
   $: isActive = $selection.activeCellId === cellId;
-  $: isSelectedInRange = $selection.cellIds.has(cellId);
+  $: isSelected = $selection.cellIds.has(cellId);
   $: modificationStatus = $modificationStatusMap.get(key);
   $: serverErrors =
     modificationStatus?.state === 'failure' ? modificationStatus?.errors : [];
@@ -128,7 +128,7 @@
     class:is-active={isActive}
     class:is-processing={isProcessing}
     class:is-pk={column.primary_key}
-    class:is-selected={isSelectedInRange}
+    class:is-selected={isSelected}
     {...htmlAttributes}
     {style}
   >
@@ -146,7 +146,7 @@
     <CellFabric
       columnFabric={processedColumn}
       {isActive}
-      {isSelectedInRange}
+      {isSelected}
       {value}
       {isProcessing}
       {canViewLinkedEntities}

From ab60ce1ed9d40f4a21929956835c6f19a39439a3 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 5 Feb 2024 20:26:58 -0500
Subject: [PATCH 23/85] Handle movement keys

---
 mathesar_ui/src/components/sheet/index.ts     |  2 +-
 .../components/sheet/selection/Direction.ts   | 22 -------
 .../sheet/selection/SheetSelection.ts         |  4 +-
 .../components/sheet/sheetKeyboardUtils.ts    | 47 ++++++++++++++
 ...collingUtils.ts => sheetScrollingUtils.ts} |  7 +++
 mathesar_ui/src/components/sheet/utils.ts     |  3 +-
 .../result-pane/ResultRowCell.svelte          | 31 ++-------
 .../src/systems/table-view/row/RowCell.svelte | 26 ++------
 mathesar_ui/src/utils/KeyboardShortcut.ts     | 63 +++++++++++++++++++
 9 files changed, 131 insertions(+), 74 deletions(-)
 create mode 100644 mathesar_ui/src/components/sheet/sheetKeyboardUtils.ts
 rename mathesar_ui/src/components/sheet/{sheetScollingUtils.ts => sheetScrollingUtils.ts} (93%)
 create mode 100644 mathesar_ui/src/utils/KeyboardShortcut.ts

diff --git a/mathesar_ui/src/components/sheet/index.ts b/mathesar_ui/src/components/sheet/index.ts
index cae20e3d07..b0a1df34f4 100644
--- a/mathesar_ui/src/components/sheet/index.ts
+++ b/mathesar_ui/src/components/sheet/index.ts
@@ -8,4 +8,4 @@ export { default as SheetRow } from './SheetRow.svelte';
 export {
   scrollBasedOnActiveCell,
   scrollBasedOnSelection,
-} from './sheetScollingUtils';
+} from './sheetScrollingUtils';
diff --git a/mathesar_ui/src/components/sheet/selection/Direction.ts b/mathesar_ui/src/components/sheet/selection/Direction.ts
index 2693dd9000..b53704f378 100644
--- a/mathesar_ui/src/components/sheet/selection/Direction.ts
+++ b/mathesar_ui/src/components/sheet/selection/Direction.ts
@@ -5,28 +5,6 @@ export enum Direction {
   Right = 'right',
 }
 
-export function getDirection(event: KeyboardEvent): Direction | undefined {
-  const { key } = event;
-  const shift = event.shiftKey;
-  switch (true) {
-    case shift && key === 'Tab':
-      return Direction.Left;
-    case shift:
-      return undefined;
-    case key === 'ArrowUp':
-      return Direction.Up;
-    case key === 'ArrowDown':
-      return Direction.Down;
-    case key === 'ArrowLeft':
-      return Direction.Left;
-    case key === 'ArrowRight':
-    case key === 'Tab':
-      return Direction.Right;
-    default:
-      return undefined;
-  }
-}
-
 export function getColumnOffset(direction: Direction): number {
   switch (direction) {
     case Direction.Left:
diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index 53318a7af3..7c11c67476 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -480,6 +480,8 @@ export default class SheetSelection {
    * is simpler.
    */
   resized(direction: Direction): SheetSelection {
-    throw new Error('Not implemented');
+    // TODO
+    console.log('Sheet selection resizing is not yet implemented');
+    return this;
   }
 }
diff --git a/mathesar_ui/src/components/sheet/sheetKeyboardUtils.ts b/mathesar_ui/src/components/sheet/sheetKeyboardUtils.ts
new file mode 100644
index 0000000000..f2035c747b
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/sheetKeyboardUtils.ts
@@ -0,0 +1,47 @@
+import type { Writable } from 'svelte/store';
+
+import { KeyboardShortcut } from '@mathesar/utils/KeyboardShortcut';
+import { Direction } from './selection/Direction';
+import type SheetSelection from './selection/SheetSelection';
+import { autoScroll } from './sheetScrollingUtils';
+
+function move(selection: Writable<SheetSelection>, direction: Direction) {
+  selection.update((s) => s.collapsedAndMoved(direction));
+  void autoScroll();
+}
+
+function resize(selection: Writable<SheetSelection>, direction: Direction) {
+  selection.update((s) => s.resized(direction));
+  void autoScroll();
+}
+
+function key(...args: Parameters<typeof KeyboardShortcut.fromKey>) {
+  return KeyboardShortcut.fromKey(...args).toString();
+}
+
+const shortcutMapData: [string, (s: Writable<SheetSelection>) => void][] = [
+  [key('ArrowUp'), (s) => move(s, Direction.Up)],
+  [key('ArrowDown'), (s) => move(s, Direction.Down)],
+  [key('ArrowLeft'), (s) => move(s, Direction.Left)],
+  [key('ArrowRight'), (s) => move(s, Direction.Right)],
+  [key('Tab'), (s) => move(s, Direction.Right)],
+  [key('Tab', ['Shift']), (s) => move(s, Direction.Left)],
+  [key('ArrowUp', ['Shift']), (s) => resize(s, Direction.Up)],
+  [key('ArrowDown', ['Shift']), (s) => resize(s, Direction.Down)],
+  [key('ArrowLeft', ['Shift']), (s) => resize(s, Direction.Left)],
+  [key('ArrowRight', ['Shift']), (s) => resize(s, Direction.Right)],
+];
+
+const shortcutMap = new Map(shortcutMapData);
+
+export function handleKeyboardEventOnCell(
+  event: KeyboardEvent,
+  selection: Writable<SheetSelection>,
+): void {
+  const shortcut = KeyboardShortcut.fromKeyboardEvent(event);
+  const action = shortcutMap.get(shortcut.toString());
+  if (action) {
+    event.preventDefault();
+    action(selection);
+  }
+}
diff --git a/mathesar_ui/src/components/sheet/sheetScollingUtils.ts b/mathesar_ui/src/components/sheet/sheetScrollingUtils.ts
similarity index 93%
rename from mathesar_ui/src/components/sheet/sheetScollingUtils.ts
rename to mathesar_ui/src/components/sheet/sheetScrollingUtils.ts
index 130f87cefd..1155a4ec7b 100644
--- a/mathesar_ui/src/components/sheet/sheetScollingUtils.ts
+++ b/mathesar_ui/src/components/sheet/sheetScrollingUtils.ts
@@ -1,3 +1,5 @@
+import { tick } from 'svelte';
+
 // TODO: Create a common utility action to handle active element based scroll
 function scrollToElement(htmlElement: HTMLElement | null): void {
   const activeRow = htmlElement?.parentElement;
@@ -47,3 +49,8 @@ export function scrollBasedOnSelection(): void {
   );
   scrollToElement(selectedCell);
 }
+
+export async function autoScroll() {
+  await tick();
+  scrollBasedOnActiveCell();
+}
diff --git a/mathesar_ui/src/components/sheet/utils.ts b/mathesar_ui/src/components/sheet/utils.ts
index c05015864a..4f3915d8d0 100644
--- a/mathesar_ui/src/components/sheet/utils.ts
+++ b/mathesar_ui/src/components/sheet/utils.ts
@@ -1,5 +1,6 @@
-import { setContext, getContext } from 'svelte';
+import { getContext, setContext } from 'svelte';
 import type { Readable } from 'svelte/store';
+
 import type { ImmutableMap } from '@mathesar-component-library/types';
 
 export interface ColumnPosition {
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
index 50620a2fbd..6010b66a53 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-  import { tick } from 'svelte';
   import type { Writable } from 'svelte/store';
 
   import type { RequestStatus } from '@mathesar/api/utils/requestUtils';
   import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
-  import {
-    SheetCell,
-    scrollBasedOnActiveCell,
-  } from '@mathesar/components/sheet';
+  import { SheetCell } from '@mathesar/components/sheet';
   import { makeCellId } from '@mathesar/components/sheet/cellIds';
   import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
+  import { handleKeyboardEventOnCell } from '@mathesar/components/sheet/sheetKeyboardUtils';
   import type QueryInspector from '../QueryInspector';
   import { getRowSelectionId, type QueryRow } from '../QueryRunner';
   import type { ProcessedQueryOutputColumn } from '../utils';
@@ -22,27 +19,6 @@
 
   $: cellId = row && makeCellId(getRowSelectionId(row), column.id);
   $: isActive = cellId === $selection.activeCellId;
-
-  async function checkTypeAndScroll(type?: string) {
-    if (type === 'moved') {
-      await tick();
-      scrollBasedOnActiveCell();
-    }
-  }
-
-  async function moveThroughCells(
-    event: CustomEvent<{ originalEvent: KeyboardEvent; key: string }>,
-  ) {
-    const { originalEvent } = event.detail;
-    // // TODO_3037
-    // const type = selection.handleKeyEventsOnActiveCell(originalEvent);
-    // if (type) {
-    //   originalEvent.stopPropagation();
-    //   originalEvent.preventDefault();
-
-    //   await checkTypeAndScroll(type);
-    // }
-  }
 </script>
 
 <SheetCell columnIdentifierKey={column.id} let:htmlAttributes let:style>
@@ -55,7 +31,8 @@
         value={row?.record[column.id]}
         showAsSkeleton={recordRunState === 'processing'}
         disabled={true}
-        on:movementKeyDown={moveThroughCells}
+        on:movementKeyDown={({ detail }) =>
+          handleKeyboardEventOnCell(detail.originalEvent, selection)}
         on:activate={() => {
           // // TODO_3037
           // if (row) {
diff --git a/mathesar_ui/src/systems/table-view/row/RowCell.svelte b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
index 168a2bd019..61ce76d658 100644
--- a/mathesar_ui/src/systems/table-view/row/RowCell.svelte
+++ b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { tick } from 'svelte';
-  import type { Writable } from 'svelte/store';
   import { _ } from 'svelte-i18n';
+  import type { Writable } from 'svelte/store';
 
   import {
     ButtonMenuItem,
@@ -39,6 +39,7 @@
   import ColumnHeaderContextMenu from '../header/header-cell/ColumnHeaderContextMenu.svelte';
   import CellErrors from './CellErrors.svelte';
   import RowContextOptions from './RowContextOptions.svelte';
+  import { handleKeyboardEventOnCell } from '@mathesar/components/sheet/sheetKeyboardUtils';
 
   export let recordsData: RecordsData;
   export let selection: Writable<SheetSelection>;
@@ -85,26 +86,6 @@
     : undefined;
   $: showLinkedRecordHyperLink = linkedRecordHref && canViewLinkedEntities;
 
-  async function checkTypeAndScroll(type?: string) {
-    if (type === 'moved') {
-      await tick();
-      scrollBasedOnActiveCell();
-    }
-  }
-
-  async function moveThroughCells(
-    event: CustomEvent<{ originalEvent: KeyboardEvent; key: string }>,
-  ) {
-    // // TODO_3037
-    // const { originalEvent } = event.detail;
-    // const type = selection.handleKeyEventsOnActiveCell(originalEvent);
-    // if (type) {
-    //   originalEvent.stopPropagation();
-    //   originalEvent.preventDefault();
-    //   await checkTypeAndScroll(type);
-    // }
-  }
-
   async function setValue(newValue: unknown) {
     if (newValue === value) {
       return;
@@ -162,7 +143,8 @@
         })}
       showAsSkeleton={$recordsDataState === States.Loading}
       disabled={!isEditable}
-      on:movementKeyDown={moveThroughCells}
+      on:movementKeyDown={({ detail }) =>
+        handleKeyboardEventOnCell(detail.originalEvent, selection)}
       on:activate={() => selection.update((s) => s.ofOneCell(cellId))}
       on:update={valueUpdated}
       horizontalAlignment={column.primary_key ? 'left' : undefined}
diff --git a/mathesar_ui/src/utils/KeyboardShortcut.ts b/mathesar_ui/src/utils/KeyboardShortcut.ts
new file mode 100644
index 0000000000..17c45b75b1
--- /dev/null
+++ b/mathesar_ui/src/utils/KeyboardShortcut.ts
@@ -0,0 +1,63 @@
+/**
+ * A stricter definition KeyboardEvent['key']. We'll add more variants as we
+ * need them.
+ */
+type Key = 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Tab';
+
+type Mod = 'Ctrl' | 'Shift' | 'Alt' | 'Meta';
+
+export class KeyboardShortcut {
+  ctrl: boolean;
+
+  shift: boolean;
+
+  alt: boolean;
+
+  meta: boolean;
+
+  key: Key;
+
+  constructor(props: {
+    ctrl: boolean;
+    shift: boolean;
+    alt: boolean;
+    meta: boolean;
+    key: Key;
+  }) {
+    this.ctrl = props.ctrl;
+    this.shift = props.shift;
+    this.alt = props.alt;
+    this.meta = props.meta;
+    this.key = props.key;
+  }
+
+  static fromKey(key: Key, mods: Mod[] = []): KeyboardShortcut {
+    return new KeyboardShortcut({
+      ctrl: mods.includes('Ctrl'),
+      shift: mods.includes('Shift'),
+      alt: mods.includes('Alt'),
+      meta: mods.includes('Meta'),
+      key,
+    });
+  }
+
+  static fromKeyboardEvent(event: KeyboardEvent): KeyboardShortcut {
+    return new KeyboardShortcut({
+      ctrl: event.ctrlKey,
+      shift: event.shiftKey,
+      alt: event.altKey,
+      meta: event.metaKey,
+      key: event.key as Key,
+    });
+  }
+
+  toString(): string {
+    return [
+      ...(this.ctrl ? ['Ctrl'] : []),
+      ...(this.shift ? ['Shift'] : []),
+      ...(this.alt ? ['Alt'] : []),
+      ...(this.meta ? ['Meta'] : []),
+      this.key,
+    ].join('+');
+  }
+}

From 5e72917758d40db05991d46c50af34f33e3fd9eb Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 5 Feb 2024 21:43:58 -0500
Subject: [PATCH 24/85] Begin moving mouse handling logic

---
 .../components/cell-fabric/CellFabric.svelte  | 19 -----------------
 .../components/SteppedInputCell.svelte        |  7 -------
 .../components/array/ArrayCell.svelte         |  7 -------
 .../components/checkbox/CheckboxCell.svelte   | 16 +++++++-------
 .../components/date-time/DateTimeCell.svelte  |  1 -
 .../formatted-input/FormattedInputCell.svelte |  1 -
 .../linked-record/LinkedRecordCell.svelte     | 10 ++++-----
 .../components/money/MoneyCell.svelte         |  1 -
 .../components/number/NumberCell.svelte       |  1 -
 .../primary-key/PrimaryKeyCell.svelte         |  6 +-----
 .../components/select/SingleSelectCell.svelte | 14 ++++++-------
 .../components/textarea/TextAreaCell.svelte   |  1 -
 .../components/textbox/TextBoxCell.svelte     |  1 -
 .../data-types/components/uri/UriCell.svelte  |  1 -
 .../result-pane/ResultRowCell.svelte          | 21 -------------------
 .../src/systems/table-view/row/RowCell.svelte | 21 ++-----------------
 16 files changed, 24 insertions(+), 104 deletions(-)

diff --git a/mathesar_ui/src/components/cell-fabric/CellFabric.svelte b/mathesar_ui/src/components/cell-fabric/CellFabric.svelte
index 95e8762470..a5b8a90e60 100644
--- a/mathesar_ui/src/components/cell-fabric/CellFabric.svelte
+++ b/mathesar_ui/src/components/cell-fabric/CellFabric.svelte
@@ -4,16 +4,9 @@
   This component is meant to be common for tables, queries, and for import preview
 -->
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
   import type { HorizontalAlignment } from './data-types/components/typeDefinitions';
   import type { CellColumnFabric } from './types';
 
-  type CustomEvents = {
-    onSelectionStart: { e: MouseEvent };
-    onMouseEnterCellWhileSelection: { e: MouseEvent };
-  };
-  const dispatch = createEventDispatcher<CustomEvents>();
-
   export let columnFabric: CellColumnFabric;
   export let value: unknown;
   export let recordSummary: string | undefined = undefined;
@@ -34,14 +27,6 @@
   $: ({ cellComponentAndProps } = columnFabric);
   $: ({ component } = cellComponentAndProps);
   $: props = cellComponentAndProps.props as Record<string, unknown>;
-
-  function handleMouseDown(e: MouseEvent) {
-    dispatch('onSelectionStart', { e });
-  }
-
-  function handleMouseEnter(e: MouseEvent) {
-    dispatch('onMouseEnterCellWhileSelection', { e });
-  }
 </script>
 
 <div
@@ -49,8 +34,6 @@
   data-column-identifier={columnFabric.id}
   class:show-as-skeleton={showAsSkeleton}
   class:is-independent={isIndependentOfSheet}
-  on:mousedown={handleMouseDown}
-  on:mouseenter={handleMouseEnter}
 >
   <svelte:component
     this={component}
@@ -69,9 +52,7 @@
     {canViewLinkedEntities}
     bind:value
     on:movementKeyDown
-    on:activate
     on:update
-    on:mouseenter
   />
 
   <div class="loader">
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte
index 4544741629..98f1bdcd02 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte
@@ -143,12 +143,6 @@
     resetEditMode();
   }
 
-  function handleMouseDown() {
-    if (!isActive) {
-      dispatch('activate');
-    }
-  }
-
   onMount(initLastSavedValue);
 </script>
 
@@ -159,7 +153,6 @@
   bind:element={cellRef}
   on:dblclick={setModeToEdit}
   on:keydown={handleKeyDown}
-  on:mousedown={handleMouseDown}
   on:mouseenter
   mode={isEditMode ? 'edit' : 'default'}
   {multiLineTruncate}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte
index 1f25b9fc64..66121cef76 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte
@@ -34,12 +34,6 @@
         break;
     }
   }
-
-  function handleMouseDown() {
-    if (!isActive) {
-      dispatch('activate');
-    }
-  }
 </script>
 
 <CellWrapper
@@ -49,7 +43,6 @@
   {isIndependentOfSheet}
   on:mouseenter
   on:keydown={handleWrapperKeyDown}
-  on:mousedown={handleMouseDown}
 >
   <CellValue {value}>
     {#if isDefinedNonNullable(value)}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte
index dd31115e7c..a6a469c9d3 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte
@@ -58,12 +58,15 @@
     cellRef?.focus();
   }
 
-  function handleMouseDown() {
-    if (!isActive) {
-      isFirstActivated = true;
-      dispatch('activate');
-    }
-  }
+  // // TODO_3037: test checkbox cell thoroughly. The `isFirstActivated`
+  // // variable is no longer getting set. We need to figure out what to do to
+  // // handle this.
+  // function handleMouseDown() {
+  //   if (!isActive) {
+  //     isFirstActivated = true;
+  //     dispatch('activate');
+  //   }
+  // }
 </script>
 
 <CellWrapper
@@ -76,7 +79,6 @@
   on:mouseenter
   on:keydown={handleWrapperKeyDown}
   on:click={checkAndToggle}
-  on:mousedown={handleMouseDown}
 >
   {#if value === undefined}
     <Default />
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte
index e3a8144221..b50c154cab 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte
@@ -31,7 +31,6 @@
   let:handleInputKeydown
   formatValue={formatForDisplay}
   on:movementKeyDown
-  on:activate
   on:mouseenter
   on:update
 >
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte
index 1738bc4170..42df86179c 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte
@@ -32,7 +32,6 @@
   let:handleInputKeydown
   formatValue={formatForDisplay}
   on:movementKeyDown
-  on:activate
   on:mouseenter
   on:update
 >
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte
index 2759539ba1..63de26a0ca 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte
@@ -80,10 +80,11 @@
     }
   }
 
-  function handleMouseDown() {
-    wasActiveBeforeClick = isActive;
-    dispatch('activate');
-  }
+  // // TODO_3037: test and see if we need `wasActiveBeforeClick`
+  // function handleMouseDown() {
+  //   wasActiveBeforeClick = isActive;
+  //   dispatch('activate');
+  // }
 
   function handleClick() {
     if (wasActiveBeforeClick) {
@@ -99,7 +100,6 @@
   {isIndependentOfSheet}
   on:mouseenter
   on:keydown={handleWrapperKeyDown}
-  on:mousedown={handleMouseDown}
   on:click={handleClick}
   on:dblclick={launchRecordSelector}
   hasPadding={false}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte
index ee81c06f06..6d271559d6 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte
@@ -30,7 +30,6 @@
   let:handleInputKeydown
   on:movementKeyDown
   on:mouseenter
-  on:activate
   on:update
 >
   <MoneyCellInput
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte
index a7941ad677..173e801418 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte
@@ -33,7 +33,6 @@
   let:handleInputBlur
   let:handleInputKeydown
   on:movementKeyDown
-  on:activate
   on:mouseenter
   on:update
 >
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte
index bb51bc0540..dc01938b39 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte
@@ -28,10 +28,6 @@
     e.stopPropagation();
   }
 
-  function handleValueMouseDown() {
-    dispatch('activate');
-  }
-
   function handleKeyDown(e: KeyboardEvent) {
     switch (e.key) {
       case 'Tab':
@@ -63,7 +59,7 @@
     class="primary-key-cell"
     class:is-independent-of-sheet={isIndependentOfSheet}
   >
-    <span class="value" on:mousedown={handleValueMouseDown}>
+    <span class="value">
       {#if value === undefined}
         <Default />
       {:else}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte
index 9e2c64e214..886f86c83f 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte
@@ -43,12 +43,13 @@
     isInitiallyActivated = false;
   }
 
-  function handleMouseDown() {
-    if (!isActive) {
-      isInitiallyActivated = true;
-      dispatch('activate');
-    }
-  }
+  // // TODO_3037 test an see how to fix `isInitiallyActivated` logic
+  // function handleMouseDown() {
+  //   if (!isActive) {
+  //     isInitiallyActivated = true;
+  //     dispatch('activate');
+  //   }
+  // }
 
   function handleKeyDown(
     e: KeyboardEvent,
@@ -116,7 +117,6 @@
     {isSelected}
     {disabled}
     {isIndependentOfSheet}
-    on:mousedown={handleMouseDown}
     on:mouseenter
     on:click={() => checkAndToggle(api)}
     on:keydown={(e) => handleKeyDown(e, api, isOpen)}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte
index 5e948ad64e..9ebc8b88a1 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte
@@ -42,7 +42,6 @@
   let:handleInputBlur
   let:handleInputKeydown
   on:movementKeyDown
-  on:activate
   on:mouseenter
   on:update
 >
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte
index 1cecffa707..f560933a6f 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte
@@ -28,7 +28,6 @@
   let:handleInputBlur
   let:handleInputKeydown
   on:movementKeyDown
-  on:activate
   on:mouseenter
   on:update
 >
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte
index 0ff4e5c8fd..2e919190ec 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte
@@ -30,7 +30,6 @@
   let:handleInputBlur
   let:handleInputKeydown
   on:movementKeyDown
-  on:activate
   on:mouseenter
   on:update
 >
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
index 6010b66a53..75d97df662 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
@@ -33,27 +33,6 @@
         disabled={true}
         on:movementKeyDown={({ detail }) =>
           handleKeyboardEventOnCell(detail.originalEvent, selection)}
-        on:activate={() => {
-          // // TODO_3037
-          // if (row) {
-          //   selection.activateCell(row, processedQueryColumn);
-          //   inspector.selectCellTab();
-          // }
-        }}
-        on:onSelectionStart={() => {
-          // // TODO_3037
-          // if (row) {
-          //   selection.onStartSelection(row, processedQueryColumn);
-          // }
-        }}
-        on:onMouseEnterCellWhileSelection={() => {
-          // // TODO_3037
-          // if (row) {
-          //   // This enables the click + drag to
-          //   // select multiple cells
-          //   selection.onMouseEnterCellWhileSelection(row, processedQueryColumn);
-          // }
-        }}
       />
     {/if}
   </div>
diff --git a/mathesar_ui/src/systems/table-view/row/RowCell.svelte b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
index 61ce76d658..0316d7d465 100644
--- a/mathesar_ui/src/systems/table-view/row/RowCell.svelte
+++ b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { tick } from 'svelte';
   import { _ } from 'svelte-i18n';
   import type { Writable } from 'svelte/store';
 
@@ -17,12 +16,10 @@
   import Null from '@mathesar/components/Null.svelte';
   import RowCellBackgrounds from '@mathesar/components/RowCellBackgrounds.svelte';
   import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
-  import {
-    SheetCell,
-    scrollBasedOnActiveCell,
-  } from '@mathesar/components/sheet';
+  import { SheetCell } from '@mathesar/components/sheet';
   import { makeCellId } from '@mathesar/components/sheet/cellIds';
   import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
+  import { handleKeyboardEventOnCell } from '@mathesar/components/sheet/sheetKeyboardUtils';
   import { iconLinkToRecordPage, iconSetToNull } from '@mathesar/icons';
   import { currentDatabase } from '@mathesar/stores/databases';
   import { currentSchema } from '@mathesar/stores/schemas';
@@ -39,7 +36,6 @@
   import ColumnHeaderContextMenu from '../header/header-cell/ColumnHeaderContextMenu.svelte';
   import CellErrors from './CellErrors.svelte';
   import RowContextOptions from './RowContextOptions.svelte';
-  import { handleKeyboardEventOnCell } from '@mathesar/components/sheet/sheetKeyboardUtils';
 
   export let recordsData: RecordsData;
   export let selection: Writable<SheetSelection>;
@@ -145,21 +141,8 @@
       disabled={!isEditable}
       on:movementKeyDown={({ detail }) =>
         handleKeyboardEventOnCell(detail.originalEvent, selection)}
-      on:activate={() => selection.update((s) => s.ofOneCell(cellId))}
       on:update={valueUpdated}
       horizontalAlignment={column.primary_key ? 'left' : undefined}
-      on:onSelectionStart={() => {
-        // // TODO_3037
-        // selection.onStartSelection(row, processedColumn);
-      }}
-      on:onMouseEnterCellWhileSelection={() => {
-        // // This enables the click + drag to
-        // // select multiple cells
-        // //
-        // // TODO_3037
-        // //
-        // selection.onMouseEnterCellWhileSelection(row, processedColumn);
-      }}
     />
     <ContextMenu>
       {#if canEditTableRecords || showLinkedRecordHyperLink}

From c20541007e7bd27215e081b3c5c64b09c78fba69 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Tue, 6 Feb 2024 17:06:46 -0500
Subject: [PATCH 25/85] Refactor sheet element attributes

---
 mathesar_ui/src/components/sheet/Sheet.svelte |  37 +---
 .../src/components/sheet/SheetCell.svelte     |  99 ++++++++++-
 .../src/components/sheet/SheetHeader.svelte   |  14 +-
 .../sheet/SheetPositionableCell.svelte        |  11 +-
 .../src/components/sheet/SheetRow.svelte      |   3 +-
 .../components/sheet/sheetScrollingUtils.ts   |   4 +-
 mathesar_ui/src/components/sheet/types.ts     |  39 +++++
 .../preview/ImportPreviewContent.svelte       |   3 +-
 .../import/preview/ImportPreviewSheet.svelte  |  56 +++---
 mathesar_ui/src/pages/record/Widgets.svelte   |   4 -
 .../result-pane/ResultHeaderCell.svelte       |  45 +++--
 .../result-pane/ResultRowCell.svelte          |  45 ++---
 .../data-explorer/result-pane/Results.svelte  |  25 +--
 .../src/systems/table-view/TableView.svelte   |   2 +-
 .../systems/table-view/header/Header.svelte   |  82 +++------
 .../systems/table-view/row/GroupHeader.svelte |  10 +-
 .../table-view/row/NewRecordMessage.svelte    |  20 +--
 .../src/systems/table-view/row/Row.svelte     |  54 ++----
 .../src/systems/table-view/row/RowCell.svelte | 163 ++++++++----------
 19 files changed, 328 insertions(+), 388 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/Sheet.svelte b/mathesar_ui/src/components/sheet/Sheet.svelte
index f14d947adb..9e01daf36f 100644
--- a/mathesar_ui/src/components/sheet/Sheet.svelte
+++ b/mathesar_ui/src/components/sheet/Sheet.svelte
@@ -139,10 +139,11 @@
     --z-index__sheet__column-resizer: 2;
     --z-index__sheet__active-cell: 3;
     --z-index__sheet__row-header-cell: 4;
-    --z-index__sheet__group-header: 5;
-    --z-index__sheet__new-record-message: 6;
-    --z-index__sheet__horizontal-scrollbar: 7;
-    --z-index__sheet__vertical-scrollbar: 8;
+    --z-index__sheet__positionable-cell: 5;
+    --z-index__sheet__column-header-cell: 6;
+    --z-index__sheet__origin-cell: 7;
+    --z-index__sheet__horizontal-scrollbar: 8;
+    --z-index__sheet__vertical-scrollbar: 9;
 
     --virtual-list-horizontal-scrollbar-z-index: var(
       --z-index__sheet__horizontal-scrollbar
@@ -168,33 +169,7 @@
       min-width: 100%;
     }
 
-    :global([data-sheet-element='cell']) {
-      position: absolute;
-      display: flex;
-      align-items: center;
-      border-bottom: var(--cell-border-horizontal);
-      border-right: var(--cell-border-vertical);
-      left: 0;
-      top: 0;
-      height: 100%;
-    }
-
-    :global([data-sheet-element='cell'][data-cell-static='true']) {
-      position: sticky;
-      z-index: var(--z-index__sheet__row-header-cell);
-    }
-
-    :global([data-sheet-element='cell'][data-cell-control='true']) {
-      font-size: var(--text-size-x-small);
-      padding: 0 1.5rem;
-      justify-content: center;
-      color: var(--color-text-muted);
-      display: inline-flex;
-      align-items: center;
-      height: 100%;
-    }
-
-    :global([data-sheet-element='row']) {
+    :global([data-sheet-element='data-row']) {
       transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
     }
   }
diff --git a/mathesar_ui/src/components/sheet/SheetCell.svelte b/mathesar_ui/src/components/sheet/SheetCell.svelte
index fb70966943..9c9ad390b8 100644
--- a/mathesar_ui/src/components/sheet/SheetCell.svelte
+++ b/mathesar_ui/src/components/sheet/SheetCell.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { SheetCellType } from './types';
   import { getSheetContext } from './utils';
 
   type SheetColumnIdentifierKey = $$Generic;
@@ -6,18 +7,98 @@
   const { stores } = getSheetContext();
   const { columnStyleMap } = stores;
 
+  export let type: SheetCellType;
   export let columnIdentifierKey: SheetColumnIdentifierKey;
+  export let isActive = false;
+  export let isSelected = false;
+  export let lightText = false;
 
   $: styleMap = $columnStyleMap.get(columnIdentifierKey);
+</script>
 
-  export let isStatic = false;
-  export let isControlCell = false;
+<div
+  class="sheet-cell"
+  data-sheet-element={type}
+  style={styleMap?.styleString}
+  class:is-active={isActive}
+  class:is-selected={isSelected}
+  class:light-text={lightText}
+>
+  <slot />
+</div>
 
-  $: htmlAttributes = {
-    'data-sheet-element': 'cell',
-    'data-cell-static': isStatic ? true : undefined,
-    'data-cell-control': isControlCell ? true : undefined,
-  };
-</script>
+<style lang="scss">
+  .sheet-cell {
+    &[data-sheet-element='origin-cell'],
+    &[data-sheet-element='column-header-cell'],
+    &[data-sheet-element='new-column-cell'],
+    &[data-sheet-element='row-header-cell'],
+    &[data-sheet-element='data-cell'] {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      border-bottom: var(--cell-border-horizontal);
+      border-right: var(--cell-border-vertical);
+      left: 0;
+      top: 0;
+      height: 100%;
+    }
+
+    &[data-sheet-element='column-header-cell'],
+    &[data-sheet-element='origin-cell'],
+    &[data-sheet-element='new-column-cell'] {
+      border-bottom: none;
+      background: var(--slate-100);
+      font-size: var(--text-size-small);
+      font-weight: 500;
+      overflow: hidden;
+    }
+
+    &[data-sheet-element='origin-cell'] {
+      position: sticky;
+      z-index: var(--z-index__sheet__origin-cell);
+    }
+
+    &[data-sheet-element='column-header-cell'] {
+      z-index: var(--z-index__sheet__column-header-cell);
+    }
+
+    &[data-sheet-element='positionable-cell'] {
+      z-index: var(--z-index__sheet__positionable-cell);
+    }
+
+    &[data-sheet-element='row-header-cell'] {
+      position: sticky;
+      z-index: var(--z-index__sheet__row-header-cell);
+      font-size: var(--text-size-x-small);
+      padding: 0 1.5rem;
+      justify-content: center;
+      color: var(--color-text-muted);
+      display: inline-flex;
+      align-items: center;
+      height: 100%;
+    }
+
+    &.is-active {
+      z-index: var(--z-index__sheet__active-cell);
+      border-color: transparent;
+      min-height: 100%;
+      /* TODO: why do we need !important here? Please remove or document */
+      height: auto !important;
+    }
+
+    &.light-text {
+      color: var(--cell-text-color-processing);
+    }
+
+    &[data-sheet-element='data-cell'] {
+      user-select: none;
+      -webkit-user-select: none; /* Safari */
+      background: var(--cell-bg-color-base);
+    }
 
-<slot {htmlAttributes} style={styleMap?.styleString} />
+    &[data-sheet-element='new-column-cell'] {
+      padding: 0 0.2rem;
+    }
+  }
+</style>
diff --git a/mathesar_ui/src/components/sheet/SheetHeader.svelte b/mathesar_ui/src/components/sheet/SheetHeader.svelte
index 7b5e7ac7d8..37203e70f8 100644
--- a/mathesar_ui/src/components/sheet/SheetHeader.svelte
+++ b/mathesar_ui/src/components/sheet/SheetHeader.svelte
@@ -41,7 +41,7 @@
 
 <div
   bind:this={headerRef}
-  data-sheet-element="header"
+  data-sheet-element="header-row"
   class:inherit-font-style={inheritFontStyle}
 >
   <div style:width="{$rowWidth}px">
@@ -50,7 +50,7 @@
 </div>
 
 <style lang="scss">
-  [data-sheet-element='header'] {
+  [data-sheet-element='header-row'] {
     min-width: 100%;
     position: relative;
     flex-grow: 0;
@@ -65,16 +65,8 @@
       height: var(--sheet-header-height, 32px);
     }
 
-    :global([data-sheet-element='cell']) {
-      border-bottom: none;
-      background: var(--slate-100);
-      font-size: var(--text-size-small);
-      font-weight: 500;
-      overflow: hidden;
-    }
-
     &.inherit-font-style {
-      :global([data-sheet-element='cell']) {
+      :global([data-sheet-element='column-header-cell']) {
         font-size: inherit;
         font-weight: inherit;
       }
diff --git a/mathesar_ui/src/components/sheet/SheetPositionableCell.svelte b/mathesar_ui/src/components/sheet/SheetPositionableCell.svelte
index 1b7a10f22d..8c731acda8 100644
--- a/mathesar_ui/src/components/sheet/SheetPositionableCell.svelte
+++ b/mathesar_ui/src/components/sheet/SheetPositionableCell.svelte
@@ -25,13 +25,8 @@
   }
 
   $: style = calculateStyle($columnStyleMap, index, columnSpan);
-
-  export let isStatic = false;
-
-  $: htmlAttributes = {
-    'data-sheet-element': 'cell',
-    'data-cell-static': isStatic ? true : undefined,
-  };
 </script>
 
-<slot {htmlAttributes} {style} />
+<div data-sheet-element="positionable-cell" {style}>
+  <slot />
+</div>
diff --git a/mathesar_ui/src/components/sheet/SheetRow.svelte b/mathesar_ui/src/components/sheet/SheetRow.svelte
index 09d930b6fc..cc3cfb65e7 100644
--- a/mathesar_ui/src/components/sheet/SheetRow.svelte
+++ b/mathesar_ui/src/components/sheet/SheetRow.svelte
@@ -20,8 +20,7 @@
   $: styleString = calculateStyle(style, $rowWidth);
 
   const htmlAttributes = {
-    'data-sheet-element': 'row',
-    'data-sheet-section': 'body',
+    'data-sheet-element': 'data-row',
   };
 </script>
 
diff --git a/mathesar_ui/src/components/sheet/sheetScrollingUtils.ts b/mathesar_ui/src/components/sheet/sheetScrollingUtils.ts
index 1155a4ec7b..16bede15b2 100644
--- a/mathesar_ui/src/components/sheet/sheetScrollingUtils.ts
+++ b/mathesar_ui/src/components/sheet/sheetScrollingUtils.ts
@@ -38,14 +38,14 @@ function scrollToElement(htmlElement: HTMLElement | null): void {
 
 export function scrollBasedOnActiveCell(): void {
   const activeCell: HTMLElement | null = document.querySelector(
-    '[data-sheet-element="cell"].is-active',
+    '[data-sheet-element="data-cell"].is-active',
   );
   scrollToElement(activeCell);
 }
 
 export function scrollBasedOnSelection(): void {
   const selectedCell: HTMLElement | null = document.querySelector(
-    '[data-sheet-element="cell"].is-selected',
+    '[data-sheet-element="data-cell"].is-selected',
   );
   scrollToElement(selectedCell);
 }
diff --git a/mathesar_ui/src/components/sheet/types.ts b/mathesar_ui/src/components/sheet/types.ts
index b69d3b24d3..bbc97588a2 100644
--- a/mathesar_ui/src/components/sheet/types.ts
+++ b/mathesar_ui/src/components/sheet/types.ts
@@ -4,3 +4,42 @@ export interface SheetVirtualRowsApi {
   scrollToPosition: (vScrollOffset: number, hScrollOffset: number) => void;
   recalculateHeightsAfterIndex: (index: number) => void;
 }
+
+/**
+ * These are the different kinds of cells that we can have within a sheet.
+ *
+ * - `origin-cell`: The cell in the top-left corner of the sheet.
+ *
+ * - `column-header-cell`: Contains the column names.
+ *
+ * - `new-column-cell`: Contains the `+` button for adding a new column.
+ *
+ * - `row-header-cell`: Contains the row numbers.
+ *
+ * - `data-cell`: Regular data cells.
+ */
+export type SheetCellType =
+  | 'origin-cell'
+  | 'column-header-cell'
+  | 'new-column-cell'
+  | 'row-header-cell'
+  | 'data-cell';
+
+/**
+ * These are values used for the `data-sheet-element` attribute on the sheet
+ * elements.
+ *
+ * - `header-row`: The top most row of the sheet. It contains the column header
+ *   cells.
+ *
+ * - `data-row`: Used for the remaining rows, including (for now) weird ones
+ *   like grouping headers and such.
+ *
+ * - `positionable-cell`: Cells that span multiple columns or are taken out of
+ *   regular flow e.g. "New records" message, grouping headers, etc.
+ */
+export type SheetElement =
+  | 'header-row'
+  | 'data-row'
+  | 'positionable-cell'
+  | SheetCellType;
diff --git a/mathesar_ui/src/pages/import/preview/ImportPreviewContent.svelte b/mathesar_ui/src/pages/import/preview/ImportPreviewContent.svelte
index 2c01712646..5b380486f7 100644
--- a/mathesar_ui/src/pages/import/preview/ImportPreviewContent.svelte
+++ b/mathesar_ui/src/pages/import/preview/ImportPreviewContent.svelte
@@ -266,7 +266,8 @@
   }
   .sheet-holder {
     max-width: fit-content;
-    overflow: auto;
+    overflow-x: auto;
+    overflow-y: hidden;
     margin: 0 auto;
     border: 1px solid var(--slate-200);
   }
diff --git a/mathesar_ui/src/pages/import/preview/ImportPreviewSheet.svelte b/mathesar_ui/src/pages/import/preview/ImportPreviewSheet.svelte
index dec9363708..3ffd200dad 100644
--- a/mathesar_ui/src/pages/import/preview/ImportPreviewSheet.svelte
+++ b/mathesar_ui/src/pages/import/preview/ImportPreviewSheet.svelte
@@ -25,20 +25,18 @@
   <Sheet restrictWidthToRowWidth {columns} getColumnIdentifier={(c) => c.id}>
     <SheetHeader inheritFontStyle>
       {#each columns as column (column.id)}
-        <SheetCell columnIdentifierKey={column.id} let:htmlAttributes let:style>
-          <div {...htmlAttributes} {style}>
-            <PreviewColumn
-              {isLoading}
-              processedColumn={column}
-              {updateTypeRelatedOptions}
-              bind:selected={columnPropertiesMap[column.id].selected}
-              bind:displayName={columnPropertiesMap[column.id].displayName}
-            />
-            <SheetCellResizer
-              columnIdentifierKey={column.id}
-              minColumnWidth={120}
-            />
-          </div>
+        <SheetCell type="column-header-cell" columnIdentifierKey={column.id}>
+          <PreviewColumn
+            {isLoading}
+            processedColumn={column}
+            {updateTypeRelatedOptions}
+            bind:selected={columnPropertiesMap[column.id].selected}
+            bind:displayName={columnPropertiesMap[column.id].displayName}
+          />
+          <SheetCellResizer
+            columnIdentifierKey={column.id}
+            minColumnWidth={120}
+          />
         </SheetCell>
       {/each}
     </SheetHeader>
@@ -50,19 +48,13 @@
       >
         <div {...htmlAttributes} style={styleString}>
           {#each columns as column (column)}
-            <SheetCell
-              columnIdentifierKey={column.id}
-              let:htmlAttributes={sheetCellHtmlAttributes}
-              let:style
-            >
-              <div {...sheetCellHtmlAttributes} {style}>
-                <CellFabric
-                  columnFabric={column}
-                  value={record[column.column.name]}
-                  showAsSkeleton={isLoading}
-                  disabled={true}
-                />
-              </div>
+            <SheetCell type="data-cell" columnIdentifierKey={column.id}>
+              <CellFabric
+                columnFabric={column}
+                value={record[column.column.name]}
+                showAsSkeleton={isLoading}
+                disabled={true}
+              />
             </SheetCell>
           {/each}
         </div>
@@ -73,13 +65,17 @@
 
 <style lang="scss">
   .import-preview {
-    :global([data-sheet-element='row'] [data-sheet-element='cell']) {
+    :global([data-sheet-element='data-cell']) {
       background: var(--white);
     }
-    :global([data-sheet-element] [data-sheet-element='cell']:last-child) {
+    :global([data-sheet-element='data-cell']:last-child),
+    :global([data-sheet-element='column-header-cell']:last-child) {
       border-right: none;
     }
-    :global([data-sheet-element='row']:last-child [data-sheet-element='cell']) {
+    :global(
+        [data-sheet-element='data-row']:last-child
+          [data-sheet-element='data-cell']
+      ) {
       border-bottom: none;
     }
   }
diff --git a/mathesar_ui/src/pages/record/Widgets.svelte b/mathesar_ui/src/pages/record/Widgets.svelte
index 07492bbbcb..ce9a8d2b39 100644
--- a/mathesar_ui/src/pages/record/Widgets.svelte
+++ b/mathesar_ui/src/pages/record/Widgets.svelte
@@ -84,10 +84,6 @@
     :global(.sheet) {
       background: var(--white);
     }
-
-    :global(.sheet [data-sheet-element='header']) {
-      background: var(--slate-100);
-    }
   }
 
   .table-widget-positioner {
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte
index 5a1996a8a9..edc9ccbfc0 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte
@@ -15,31 +15,28 @@
 </script>
 
 <SheetCell
+  type="column-header-cell"
   columnIdentifierKey={processedQueryColumn.id}
-  let:htmlAttributes
-  let:style
 >
-  <div {...htmlAttributes} {style}>
-    <Button
-      appearance="plain"
-      class="column-name-wrapper {isSelected ? 'selected' : ''}"
-      on:click={() => {
-        queryRunner.selectColumn(processedQueryColumn.column.alias);
+  <Button
+    appearance="plain"
+    class="column-name-wrapper {isSelected ? 'selected' : ''}"
+    on:click={() => {
+      queryRunner.selectColumn(processedQueryColumn.column.alias);
+    }}
+  >
+    <!--TODO: Use a separate prop to identify column that isn't fetched yet
+                    instead of type:unknown-->
+    <ColumnName
+      isLoading={columnRunState === 'processing' &&
+        processedQueryColumn.column.type === 'unknown'}
+      column={{
+        ...processedQueryColumn.column,
+        name:
+          processedQueryColumn.column.display_name ??
+          processedQueryColumn.column.alias,
       }}
-    >
-      <!--TODO: Use a separate prop to identify column that isn't fetched yet
-                      instead of type:unknown-->
-      <ColumnName
-        isLoading={columnRunState === 'processing' &&
-          processedQueryColumn.column.type === 'unknown'}
-        column={{
-          ...processedQueryColumn.column,
-          name:
-            processedQueryColumn.column.display_name ??
-            processedQueryColumn.column.alias,
-        }}
-      />
-    </Button>
-    <SheetCellResizer columnIdentifierKey={processedQueryColumn.id} />
-  </div>
+    />
+  </Button>
+  <SheetCellResizer columnIdentifierKey={processedQueryColumn.id} />
 </SheetCell>
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
index 75d97df662..eda7fda532 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
@@ -7,7 +7,6 @@
   import { makeCellId } from '@mathesar/components/sheet/cellIds';
   import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
   import { handleKeyboardEventOnCell } from '@mathesar/components/sheet/sheetKeyboardUtils';
-  import type QueryInspector from '../QueryInspector';
   import { getRowSelectionId, type QueryRow } from '../QueryRunner';
   import type { ProcessedQueryOutputColumn } from '../utils';
 
@@ -15,40 +14,22 @@
   export let row: QueryRow | undefined;
   export let recordRunState: RequestStatus['state'] | undefined;
   export let selection: Writable<SheetSelection>;
-  export let inspector: QueryInspector;
 
   $: cellId = row && makeCellId(getRowSelectionId(row), column.id);
   $: isActive = cellId === $selection.activeCellId;
 </script>
 
-<SheetCell columnIdentifierKey={column.id} let:htmlAttributes let:style>
-  <div {...htmlAttributes} {style} class="cell" class:is-active={isActive}>
-    {#if row || recordRunState === 'processing'}
-      <CellFabric
-        {isActive}
-        isSelected={$selection.cellIds.has(cellId ?? '')}
-        columnFabric={column}
-        value={row?.record[column.id]}
-        showAsSkeleton={recordRunState === 'processing'}
-        disabled={true}
-        on:movementKeyDown={({ detail }) =>
-          handleKeyboardEventOnCell(detail.originalEvent, selection)}
-      />
-    {/if}
-  </div>
+<SheetCell type="data-cell" columnIdentifierKey={column.id} {isActive}>
+  {#if row || recordRunState === 'processing'}
+    <CellFabric
+      {isActive}
+      isSelected={$selection.cellIds.has(cellId ?? '')}
+      columnFabric={column}
+      value={row?.record[column.id]}
+      showAsSkeleton={recordRunState === 'processing'}
+      disabled={true}
+      on:movementKeyDown={({ detail }) =>
+        handleKeyboardEventOnCell(detail.originalEvent, selection)}
+    />
+  {/if}
 </SheetCell>
-
-<style lang="scss">
-  .cell {
-    user-select: none;
-    -webkit-user-select: none; /* Safari */
-    background: var(--cell-bg-color-base);
-
-    &.is-active {
-      z-index: var(--z-index__sheet__active-cell);
-      border-color: transparent;
-      min-height: 100%;
-      height: auto;
-    }
-  }
-</style>
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index 05841970a8..1a6c80302e 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -37,7 +37,6 @@
     pagination,
     runState,
     selection,
-    inspector,
   } = queryHandler);
   $: ({ initial_columns } = $query);
   $: clipboardHandler = new SheetClipboardHandler({
@@ -87,15 +86,9 @@
     >
       <SheetHeader>
         <SheetCell
+          type="origin-cell"
           columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
-          isStatic
-          isControlCell
-          let:htmlAttributes
-          let:style
-        >
-          <div {...htmlAttributes} {style} />
-        </SheetCell>
-
+        />
         {#each columnList as processedQueryColumn (processedQueryColumn.id)}
           <ResultHeaderCell
             {processedQueryColumn}
@@ -119,16 +112,11 @@
                 style="--cell-height:{rowHeightPx - 1}px;{styleString}"
               >
                 <SheetCell
+                  type="row-header-cell"
                   columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
-                  isStatic
-                  isControlCell
-                  let:htmlAttributes={sheetCellHtmlAttributes}
-                  let:style
                 >
-                  <div {...sheetCellHtmlAttributes} {style}>
-                    <CellBackground color="var(--cell-bg-color-header)" />
-                    {$pagination.offset + item.index + 1}
-                  </div>
+                  <CellBackground color="var(--cell-bg-color-header)" />
+                  {$pagination.offset + item.index + 1}
                 </SheetCell>
 
                 {#each columnList as processedQueryColumn (processedQueryColumn.id)}
@@ -137,7 +125,6 @@
                     column={processedQueryColumn}
                     {recordRunState}
                     {selection}
-                    {inspector}
                   />
                 {/each}
               </div>
@@ -234,7 +221,7 @@
     :global(.column-name-wrapper.selected) {
       background: var(--slate-200) !important;
     }
-    :global([data-sheet-element='cell'].selected) {
+    :global([data-sheet-element='data-cell'].selected) {
       background: var(--slate-100);
     }
   }
diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte
index d209587b2b..fb048a3460 100644
--- a/mathesar_ui/src/systems/table-view/TableView.svelte
+++ b/mathesar_ui/src/systems/table-view/TableView.svelte
@@ -94,7 +94,7 @@
     // //Better document why we need id.
     //
     // const target = e.target as HTMLElement;
-    // if (!target.closest('[data-sheet-element="cell"')) {
+    // if (!target.closest('[data-sheet-element="data-cell"')) {
     //   if ($activeCell) {
     //     selection.focusCell(
     //       // TODO make sure to use getRowSelectionId instead of rowIndex
diff --git a/mathesar_ui/src/systems/table-view/header/Header.svelte b/mathesar_ui/src/systems/table-view/header/Header.svelte
index 01d7fa1d3b..0dd73689d9 100644
--- a/mathesar_ui/src/systems/table-view/header/Header.svelte
+++ b/mathesar_ui/src/systems/table-view/header/Header.svelte
@@ -94,80 +94,46 @@
 </script>
 
 <SheetHeader>
-  <SheetCell
-    columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
-    isStatic
-    isControlCell
-    let:htmlAttributes
-    let:style
-  >
+  <SheetCell type="origin-cell" columnIdentifierKey={ID_ROW_CONTROL_COLUMN}>
     <Droppable
       on:drop={() => dropColumn()}
       on:dragover={(e) => e.preventDefault()}
       locationOfFirstDraggedColumn={0}
       columnLocation={-1}
-    >
-      <div {...htmlAttributes} {style} />
-    </Droppable>
+    />
   </SheetCell>
 
   {#each [...$processedColumns] as [columnId, processedColumn] (columnId)}
     {@const isSelected = $selection.columnIds.has(String(columnId))}
-    <SheetCell columnIdentifierKey={columnId} let:htmlAttributes let:style>
+    <SheetCell type="column-header-cell" columnIdentifierKey={columnId}>
+      <!-- TODO_3037: why is this div here? Can we get rid of it? -->
       <div>
-        <div {...htmlAttributes} {style}>
-          <Draggable
-            on:dragstart={() => dragColumn()}
-            column={processedColumn}
-            {selection}
+        <Draggable
+          on:dragstart={() => dragColumn()}
+          column={processedColumn}
+          {selection}
+        >
+          <Droppable
+            on:drop={() => dropColumn(processedColumn)}
+            on:dragover={(e) => e.preventDefault()}
+            {locationOfFirstDraggedColumn}
+            columnLocation={columnOrderString.indexOf(columnId.toString())}
+            {isSelected}
           >
-            <Droppable
-              on:drop={() => dropColumn(processedColumn)}
-              on:dragover={(e) => e.preventDefault()}
-              {locationOfFirstDraggedColumn}
-              columnLocation={columnOrderString.indexOf(columnId.toString())}
-              {isSelected}
-            >
-              <HeaderCell
-                {processedColumn}
-                {isSelected}
-                on:mousedown={() => {
-                  // // TODO_3037
-                  // selection.onColumnSelectionStart(processedColumn)
-                }}
-                on:mouseenter={() => {
-                  // // TODO_3037
-                  // selection.onMouseEnterColumnHeaderWhileSelection(
-                  //   processedColumn,
-                  // )
-                }}
-              />
-            </Droppable>
-          </Draggable>
-          <SheetCellResizer columnIdentifierKey={columnId} />
-          <ContextMenu>
-            <ColumnHeaderContextMenu {processedColumn} />
-          </ContextMenu>
-        </div>
+            <HeaderCell {processedColumn} {isSelected} />
+          </Droppable>
+        </Draggable>
+        <SheetCellResizer columnIdentifierKey={columnId} />
+        <ContextMenu>
+          <ColumnHeaderContextMenu {processedColumn} />
+        </ContextMenu>
       </div>
     </SheetCell>
   {/each}
 
   {#if hasNewColumnButton}
-    <SheetCell
-      columnIdentifierKey={ID_ADD_NEW_COLUMN}
-      let:htmlAttributes
-      let:style
-    >
-      <div {...htmlAttributes} class="new-column-cell" {style}>
-        <NewColumnCell />
-      </div>
+    <SheetCell type="new-column-cell" columnIdentifierKey={ID_ADD_NEW_COLUMN}>
+      <NewColumnCell />
     </SheetCell>
   {/if}
 </SheetHeader>
-
-<style lang="scss">
-  .new-column-cell {
-    padding: 0 0.2rem;
-  }
-</style>
diff --git a/mathesar_ui/src/systems/table-view/row/GroupHeader.svelte b/mathesar_ui/src/systems/table-view/row/GroupHeader.svelte
index 06a739656c..a71cdfd10f 100644
--- a/mathesar_ui/src/systems/table-view/row/GroupHeader.svelte
+++ b/mathesar_ui/src/systems/table-view/row/GroupHeader.svelte
@@ -30,13 +30,8 @@
   );
 </script>
 
-<SheetPositionableCell
-  index={0}
-  columnSpan={processedColumnsMap.size + 1}
-  let:htmlAttributes
-  let:style
->
-  <div {...htmlAttributes} {style} class="group-header">
+<SheetPositionableCell index={0} columnSpan={processedColumnsMap.size + 1}>
+  <div class="group-header">
     <CellBackground color="var(--sand-200)" />
     <div class="groups-data">
       {#each columnIds as columnId, index (columnId)}
@@ -60,7 +55,6 @@
 <style lang="scss">
   .group-header {
     padding: 0.5rem 1.5rem;
-    z-index: var(--z-index__sheet__group-header);
 
     .groups-data {
       align-items: start;
diff --git a/mathesar_ui/src/systems/table-view/row/NewRecordMessage.svelte b/mathesar_ui/src/systems/table-view/row/NewRecordMessage.svelte
index 88782f52dd..cb73fbe93f 100644
--- a/mathesar_ui/src/systems/table-view/row/NewRecordMessage.svelte
+++ b/mathesar_ui/src/systems/table-view/row/NewRecordMessage.svelte
@@ -3,27 +3,19 @@
   import { SheetPositionableCell } from '@mathesar/components/sheet';
 
   export let columnCount: number;
+
+  // Adding once since the index is starting from 0
+  $: columnSpan = columnCount + 1;
 </script>
 
-<SheetPositionableCell
-  index={0}
-  columnSpan={// Adding once since the index is starting from 0
-  columnCount + 1}
-  let:htmlAttributes
-  let:style
->
-  <div
-    class="new-record-message"
-    {...htmlAttributes}
-    style="{style};min-width:400px;"
-  >
+<SheetPositionableCell index={0} {columnSpan}>
+  <div class="new-record-message">
     {$_('new_records_reposition_refresh')}
   </div>
 </SheetPositionableCell>
 
-<style lang="scss">
+<style>
   .new-record-message {
-    z-index: var(--z-index__sheet__new-record-message, auto);
     background: var(--sky-200);
     display: flex;
     align-items: center;
diff --git a/mathesar_ui/src/systems/table-view/row/Row.svelte b/mathesar_ui/src/systems/table-view/row/Row.svelte
index 6ff3003f80..0e08c59f76 100644
--- a/mathesar_ui/src/systems/table-view/row/Row.svelte
+++ b/mathesar_ui/src/systems/table-view/row/Row.svelte
@@ -54,20 +54,6 @@
     //   selection.selectAndActivateFirstDataEntryCellInLastRow();
     // }
   }
-
-  const handleRowMouseDown = () => {
-    // // TODO_3037
-    // if (rowHasRecord(row) && !isPlaceholderRow(row)) {
-    //   selection.onRowSelectionStart(row);
-    // }
-  };
-
-  const handleRowMouseEnter = () => {
-    // // TODO_3037
-    // if (rowHasRecord(row) && !isPlaceholderRow(row)) {
-    //   selection.onMouseEnterRowHeaderWhileSelection(row);
-    // }
-  };
 </script>
 
 <SheetRow {style} let:htmlAttributes let:styleString>
@@ -85,32 +71,22 @@
     on:mousedown={checkAndCreateEmptyRow}
   >
     <SheetCell
+      type="row-header-cell"
       columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
-      isStatic
-      isControlCell
-      let:htmlAttributes={cellHtmlAttr}
-      let:style={sheetCellStyle}
     >
-      <div
-        {...cellHtmlAttr}
-        style={sheetCellStyle}
-        on:mousedown={handleRowMouseDown}
-        on:mouseenter={handleRowMouseEnter}
-      >
-        {#if rowHasRecord(row)}
-          <RowControl
-            {primaryKeyColumnId}
-            {row}
-            {meta}
-            {recordsData}
-            {isSelected}
-            hasErrors={hasAnyErrors}
-          />
-          <ContextMenu>
-            <RowContextOptions recordPk={rowKey} {recordsData} {row} />
-          </ContextMenu>
-        {/if}
-      </div>
+      {#if rowHasRecord(row)}
+        <RowControl
+          {primaryKeyColumnId}
+          {row}
+          {meta}
+          {recordsData}
+          {isSelected}
+          hasErrors={hasAnyErrors}
+        />
+        <ContextMenu>
+          <RowContextOptions recordPk={rowKey} {recordsData} {row} />
+        </ContextMenu>
+      {/if}
     </SheetCell>
 
     {#if isHelpTextRow(row)}
@@ -159,7 +135,7 @@
       cursor: pointer;
 
       :global(
-          [data-sheet-element='cell']:not(.is-active)
+          [data-sheet-element='data-cell']:not(.is-active)
             .cell-fabric
             .cell-wrapper
             > *
diff --git a/mathesar_ui/src/systems/table-view/row/RowCell.svelte b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
index 0316d7d465..7fbea0c0f7 100644
--- a/mathesar_ui/src/systems/table-view/row/RowCell.svelte
+++ b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
@@ -98,104 +98,77 @@
   }
 </script>
 
-<SheetCell columnIdentifierKey={column.id} let:htmlAttributes let:style>
-  <div
-    class="cell editable-cell"
-    class:error={hasError}
-    class:modified={modificationStatus?.state === 'success'}
-    class:is-active={isActive}
-    class:is-processing={isProcessing}
-    class:is-pk={column.primary_key}
-    class:is-selected={isSelected}
-    {...htmlAttributes}
-    {style}
-  >
-    <CellBackground when={hasError} color="var(--cell-bg-color-error)" />
-    <CellBackground when={!isEditable} color="var(--cell-bg-color-disabled)" />
-    {#if !(isEditable && isActive)}
-      <!--
-      We hide these backgrounds when the cell is editable and active because a
-      white background better communicates that the user can edit the active
-      cell.
-    -->
-      <RowCellBackgrounds hasErrors={rowHasErrors} />
-    {/if}
+<SheetCell
+  type="data-cell"
+  columnIdentifierKey={column.id}
+  {isActive}
+  lightText={hasError || isProcessing}
+>
+  <CellBackground when={hasError} color="var(--cell-bg-color-error)" />
+  <CellBackground when={!isEditable} color="var(--cell-bg-color-disabled)" />
+  {#if !(isEditable && isActive)}
+    <!--
+    We hide these backgrounds when the cell is editable and active because a
+    white background better communicates that the user can edit the active
+    cell.
+  -->
+    <RowCellBackgrounds hasErrors={rowHasErrors} />
+  {/if}
 
-    <CellFabric
-      columnFabric={processedColumn}
-      {isActive}
-      {isSelected}
-      {value}
-      {isProcessing}
-      {canViewLinkedEntities}
-      recordSummary={$recordSummaries
-        .get(String(column.id))
-        ?.get(String(value))}
-      setRecordSummary={(recordId, recordSummary) =>
-        recordSummaries.addBespokeRecordSummary({
-          columnId: String(columnId),
-          recordId,
-          recordSummary,
-        })}
-      showAsSkeleton={$recordsDataState === States.Loading}
-      disabled={!isEditable}
-      on:movementKeyDown={({ detail }) =>
-        handleKeyboardEventOnCell(detail.originalEvent, selection)}
-      on:update={valueUpdated}
-      horizontalAlignment={column.primary_key ? 'left' : undefined}
-    />
-    <ContextMenu>
-      {#if canEditTableRecords || showLinkedRecordHyperLink}
-        <MenuHeading>{$_('cell')}</MenuHeading>
-        {#if canEditTableRecords}
-          <ButtonMenuItem
-            icon={iconSetToNull}
-            disabled={!canSetNull}
-            on:click={() => setValue(null)}
-          >
-            {$_('set_to')}
-            <Null />
-          </ButtonMenuItem>
-        {/if}
-        {#if showLinkedRecordHyperLink && linkedRecordHref}
-          <LinkMenuItem icon={iconLinkToRecordPage} href={linkedRecordHref}>
-            {$_('go_to_linked_record')}
-          </LinkMenuItem>
-        {/if}
-        <MenuDivider />
+  <CellFabric
+    columnFabric={processedColumn}
+    {isActive}
+    {isSelected}
+    {value}
+    {isProcessing}
+    {canViewLinkedEntities}
+    recordSummary={$recordSummaries.get(String(column.id))?.get(String(value))}
+    setRecordSummary={(recordId, recordSummary) =>
+      recordSummaries.addBespokeRecordSummary({
+        columnId: String(columnId),
+        recordId,
+        recordSummary,
+      })}
+    showAsSkeleton={$recordsDataState === States.Loading}
+    disabled={!isEditable}
+    on:movementKeyDown={({ detail }) =>
+      handleKeyboardEventOnCell(detail.originalEvent, selection)}
+    on:update={valueUpdated}
+    horizontalAlignment={column.primary_key ? 'left' : undefined}
+  />
+  <ContextMenu>
+    {#if canEditTableRecords || showLinkedRecordHyperLink}
+      <MenuHeading>{$_('cell')}</MenuHeading>
+      {#if canEditTableRecords}
+        <ButtonMenuItem
+          icon={iconSetToNull}
+          disabled={!canSetNull}
+          on:click={() => setValue(null)}
+        >
+          {$_('set_to')}
+          <Null />
+        </ButtonMenuItem>
+      {/if}
+      {#if showLinkedRecordHyperLink && linkedRecordHref}
+        <LinkMenuItem icon={iconLinkToRecordPage} href={linkedRecordHref}>
+          {$_('go_to_linked_record')}
+        </LinkMenuItem>
       {/if}
+      <MenuDivider />
+    {/if}
 
-      <!-- Column Attributes -->
-      <MenuHeading>{$_('column')}</MenuHeading>
-      <ColumnHeaderContextMenu {processedColumn} />
+    <!-- Column Attributes -->
+    <MenuHeading>{$_('column')}</MenuHeading>
+    <ColumnHeaderContextMenu {processedColumn} />
 
-      <!-- Row -->
-      {#if canEditTableRecords || showLinkedRecordHyperLink}
-        <MenuDivider />
-        <MenuHeading>{$_('row')}</MenuHeading>
-        <RowContextOptions recordPk={rowKey} {recordsData} {row} />
-      {/if}
-    </ContextMenu>
-    {#if errors.length}
-      <CellErrors {errors} forceShowErrors={isActive} />
+    <!-- Row -->
+    {#if canEditTableRecords || showLinkedRecordHyperLink}
+      <MenuDivider />
+      <MenuHeading>{$_('row')}</MenuHeading>
+      <RowContextOptions recordPk={rowKey} {recordsData} {row} />
     {/if}
-  </div>
+  </ContextMenu>
+  {#if errors.length}
+    <CellErrors {errors} forceShowErrors={isActive} />
+  {/if}
 </SheetCell>
-
-<style lang="scss">
-  .editable-cell.cell {
-    user-select: none;
-    -webkit-user-select: none; /* Safari */
-    background: var(--cell-bg-color-base);
-    &.is-active {
-      z-index: var(--z-index__sheet__active-cell);
-      border-color: transparent;
-      min-height: 100%;
-      height: auto !important;
-    }
-    &.error,
-    &.is-processing {
-      color: var(--cell-text-color-processing);
-    }
-  }
-</style>

From 44dd519b5815e96ecfe774b86f9a8c4354cf2143 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 7 Feb 2024 09:05:21 -0500
Subject: [PATCH 26/85] Use dedicated components for sheet cell types

---
 .../components/cell-fabric/CellFabric.svelte  |   5 +
 mathesar_ui/src/components/sheet/README.md    |  25 +++--
 .../src/components/sheet/SheetCell.svelte     | 104 ------------------
 .../cells/SheetColumnCreationCell.svelte      |  29 +++++
 .../sheet/cells/SheetColumnHeaderCell.svelte  |  35 ++++++
 .../sheet/cells/SheetDataCell.svelte          |  45 ++++++++
 .../sheet/cells/SheetOriginCell.svelte        |  23 ++++
 .../{ => cells}/SheetPositionableCell.svelte  |   4 +-
 .../sheet/cells/SheetRowHeaderCell.svelte     |  34 ++++++
 .../src/components/sheet/cells/index.ts       |   6 +
 .../components/sheet/cells/sheetCellUtils.ts  |  13 +++
 mathesar_ui/src/components/sheet/index.ts     |   4 +-
 .../components/sheet/sheetScrollingUtils.ts   |  12 +-
 mathesar_ui/src/components/sheet/types.ts     |  39 -------
 .../import/preview/ImportPreviewSheet.svelte  |  11 +-
 .../result-pane/ResultHeaderCell.svelte       |  18 +--
 .../result-pane/ResultRowCell.svelte          |  10 +-
 .../data-explorer/result-pane/Results.svelte  |  18 ++-
 .../systems/table-view/header/Header.svelte   |  22 ++--
 .../src/systems/table-view/row/Row.svelte     |   9 +-
 .../src/systems/table-view/row/RowCell.svelte |  10 +-
 21 files changed, 262 insertions(+), 214 deletions(-)
 delete mode 100644 mathesar_ui/src/components/sheet/SheetCell.svelte
 create mode 100644 mathesar_ui/src/components/sheet/cells/SheetColumnCreationCell.svelte
 create mode 100644 mathesar_ui/src/components/sheet/cells/SheetColumnHeaderCell.svelte
 create mode 100644 mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte
 create mode 100644 mathesar_ui/src/components/sheet/cells/SheetOriginCell.svelte
 rename mathesar_ui/src/components/sheet/{ => cells}/SheetPositionableCell.svelte (90%)
 create mode 100644 mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte
 create mode 100644 mathesar_ui/src/components/sheet/cells/index.ts
 create mode 100644 mathesar_ui/src/components/sheet/cells/sheetCellUtils.ts

diff --git a/mathesar_ui/src/components/cell-fabric/CellFabric.svelte b/mathesar_ui/src/components/cell-fabric/CellFabric.svelte
index a5b8a90e60..70f52b80ab 100644
--- a/mathesar_ui/src/components/cell-fabric/CellFabric.svelte
+++ b/mathesar_ui/src/components/cell-fabric/CellFabric.svelte
@@ -23,6 +23,7 @@
   export let isIndependentOfSheet = false;
   export let showTruncationPopover = false;
   export let canViewLinkedEntities = true;
+  export let lightText = false;
 
   $: ({ cellComponentAndProps } = columnFabric);
   $: ({ component } = cellComponentAndProps);
@@ -34,6 +35,7 @@
   data-column-identifier={columnFabric.id}
   class:show-as-skeleton={showAsSkeleton}
   class:is-independent={isIndependentOfSheet}
+  class:light-text={lightText}
 >
   <svelte:component
     this={component}
@@ -98,4 +100,7 @@
   .cell-fabric:not(.show-as-skeleton) .loader {
     display: none;
   }
+  .light-text {
+    color: var(--cell-text-color-processing);
+  }
 </style>
diff --git a/mathesar_ui/src/components/sheet/README.md b/mathesar_ui/src/components/sheet/README.md
index 711552011a..ec8340cbe1 100644
--- a/mathesar_ui/src/components/sheet/README.md
+++ b/mathesar_ui/src/components/sheet/README.md
@@ -1,9 +1,16 @@
-This is a placeholder directory for the Sheet component which is meant to be implemented for use with Tables, Views and Data Explorer.
-
-- This would be a lower-order component.
-- It would encapsulate:
-  - Rows
-  - Cells
-- It will _not_ include column headers.
-- It would be a pure component and will _not_ hardcode requests from within the component.
-  - They would be made on the parent components utilizing the Sheet component using callbacks, events and/or by exposing a Sheet API through slot.
+# Sheet
+
+The Sheet components help us display things in a spreadsheet-like format for the table page and the data explorer.
+
+## `data-sheet-element` values
+
+We use the `data-sheet-element` HTML attribute for CSS styling and JS functionality. The values are:
+
+- `header-row`: The top most row of the sheet. It contains the column header cells.
+- `data-row`: Used for the remaining rows, including (for now) non-standard ones like grouping headers which don't contain data.
+- `positionable-cell`: Cells that span multiple columns or are taken out of regular flow e.g. "New records" message, grouping headers, etc.
+- `origin-cell`: The cell in the top-left corner of the sheet.
+- `column-header-cell`: Contains the column names.
+- `new-column-cell`: Contains the `+` button for adding a new column.
+- `row-header-cell`: Contains the row numbers.
+- `data-cell`: Regular data cells.
diff --git a/mathesar_ui/src/components/sheet/SheetCell.svelte b/mathesar_ui/src/components/sheet/SheetCell.svelte
deleted file mode 100644
index 9c9ad390b8..0000000000
--- a/mathesar_ui/src/components/sheet/SheetCell.svelte
+++ /dev/null
@@ -1,104 +0,0 @@
-<script lang="ts">
-  import type { SheetCellType } from './types';
-  import { getSheetContext } from './utils';
-
-  type SheetColumnIdentifierKey = $$Generic;
-
-  const { stores } = getSheetContext();
-  const { columnStyleMap } = stores;
-
-  export let type: SheetCellType;
-  export let columnIdentifierKey: SheetColumnIdentifierKey;
-  export let isActive = false;
-  export let isSelected = false;
-  export let lightText = false;
-
-  $: styleMap = $columnStyleMap.get(columnIdentifierKey);
-</script>
-
-<div
-  class="sheet-cell"
-  data-sheet-element={type}
-  style={styleMap?.styleString}
-  class:is-active={isActive}
-  class:is-selected={isSelected}
-  class:light-text={lightText}
->
-  <slot />
-</div>
-
-<style lang="scss">
-  .sheet-cell {
-    &[data-sheet-element='origin-cell'],
-    &[data-sheet-element='column-header-cell'],
-    &[data-sheet-element='new-column-cell'],
-    &[data-sheet-element='row-header-cell'],
-    &[data-sheet-element='data-cell'] {
-      position: absolute;
-      display: flex;
-      align-items: center;
-      border-bottom: var(--cell-border-horizontal);
-      border-right: var(--cell-border-vertical);
-      left: 0;
-      top: 0;
-      height: 100%;
-    }
-
-    &[data-sheet-element='column-header-cell'],
-    &[data-sheet-element='origin-cell'],
-    &[data-sheet-element='new-column-cell'] {
-      border-bottom: none;
-      background: var(--slate-100);
-      font-size: var(--text-size-small);
-      font-weight: 500;
-      overflow: hidden;
-    }
-
-    &[data-sheet-element='origin-cell'] {
-      position: sticky;
-      z-index: var(--z-index__sheet__origin-cell);
-    }
-
-    &[data-sheet-element='column-header-cell'] {
-      z-index: var(--z-index__sheet__column-header-cell);
-    }
-
-    &[data-sheet-element='positionable-cell'] {
-      z-index: var(--z-index__sheet__positionable-cell);
-    }
-
-    &[data-sheet-element='row-header-cell'] {
-      position: sticky;
-      z-index: var(--z-index__sheet__row-header-cell);
-      font-size: var(--text-size-x-small);
-      padding: 0 1.5rem;
-      justify-content: center;
-      color: var(--color-text-muted);
-      display: inline-flex;
-      align-items: center;
-      height: 100%;
-    }
-
-    &.is-active {
-      z-index: var(--z-index__sheet__active-cell);
-      border-color: transparent;
-      min-height: 100%;
-      /* TODO: why do we need !important here? Please remove or document */
-      height: auto !important;
-    }
-
-    &.light-text {
-      color: var(--cell-text-color-processing);
-    }
-
-    &[data-sheet-element='data-cell'] {
-      user-select: none;
-      -webkit-user-select: none; /* Safari */
-      background: var(--cell-bg-color-base);
-    }
-
-    &[data-sheet-element='new-column-cell'] {
-      padding: 0 0.2rem;
-    }
-  }
-</style>
diff --git a/mathesar_ui/src/components/sheet/cells/SheetColumnCreationCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetColumnCreationCell.svelte
new file mode 100644
index 0000000000..482f2bf5f0
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cells/SheetColumnCreationCell.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { ID_ADD_NEW_COLUMN } from '@mathesar/stores/table-data';
+  import { getSheetCellStyle } from './sheetCellUtils';
+
+  const style = getSheetCellStyle(ID_ADD_NEW_COLUMN);
+</script>
+
+<div data-sheet-element="new-column-cell" style={$style}>
+  <slot />
+</div>
+
+<style>
+  [data-sheet-element='new-column-cell'] {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    border-bottom: var(--cell-border-horizontal);
+    border-right: var(--cell-border-vertical);
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-bottom: none;
+    background: var(--slate-100);
+    font-size: var(--text-size-small);
+    font-weight: 500;
+    overflow: hidden;
+    padding: 0 0.2rem;
+  }
+</style>
diff --git a/mathesar_ui/src/components/sheet/cells/SheetColumnHeaderCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetColumnHeaderCell.svelte
new file mode 100644
index 0000000000..0feba78d76
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cells/SheetColumnHeaderCell.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { getSheetCellStyle } from './sheetCellUtils';
+
+  type SheetColumnIdentifierKey = $$Generic;
+
+  export let columnIdentifierKey: SheetColumnIdentifierKey;
+
+  const style = getSheetCellStyle(columnIdentifierKey);
+</script>
+
+<div
+  data-sheet-element="column-header-cell"
+  data-column-identifier={columnIdentifierKey}
+  style={$style}
+>
+  <slot />
+</div>
+
+<style>
+  [data-sheet-element='column-header-cell'] {
+    position: absolute;
+    z-index: var(--z-index__sheet__column-header-cell);
+    display: flex;
+    align-items: center;
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-right: var(--cell-border-vertical);
+    border-bottom: none;
+    background: var(--slate-100);
+    font-size: var(--text-size-small);
+    font-weight: 500;
+    overflow: hidden;
+  }
+</style>
diff --git a/mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte
new file mode 100644
index 0000000000..93feef613d
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { getSheetCellStyle } from './sheetCellUtils';
+
+  type SheetColumnIdentifierKey = $$Generic;
+
+  export let columnIdentifierKey: SheetColumnIdentifierKey;
+  export let cellSelectionId: string | undefined = undefined;
+  export let isActive = false;
+  export let isSelected = false;
+
+  $: style = getSheetCellStyle(columnIdentifierKey);
+</script>
+
+<div
+  data-sheet-element="data-cell"
+  data-cell-selection-id={cellSelectionId}
+  data-cell-active={isActive ? '' : undefined}
+  data-cell-selected={isSelected ? '' : undefined}
+  style={$style}
+>
+  <slot />
+</div>
+
+<style>
+  [data-sheet-element='data-cell'] {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    border-bottom: var(--cell-border-horizontal);
+    border-right: var(--cell-border-vertical);
+    left: 0;
+    top: 0;
+    height: 100%;
+    user-select: none;
+    -webkit-user-select: none; /* Safari */
+    background: var(--cell-bg-color-base);
+  }
+
+  [data-cell-active] {
+    z-index: var(--z-index__sheet__active-cell);
+    border-color: transparent;
+    min-height: 100%;
+    height: auto;
+  }
+</style>
diff --git a/mathesar_ui/src/components/sheet/cells/SheetOriginCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetOriginCell.svelte
new file mode 100644
index 0000000000..8f1096d02d
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cells/SheetOriginCell.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { ID_ROW_CONTROL_COLUMN } from '@mathesar/stores/table-data';
+  import { getSheetCellStyle } from './sheetCellUtils';
+
+  const style = getSheetCellStyle(ID_ROW_CONTROL_COLUMN);
+</script>
+
+<div data-sheet-element="origin-cell" style={$style}>
+  <slot />
+</div>
+
+<style>
+  [data-sheet-element='origin-cell'] {
+    position: sticky;
+    left: 0;
+    top: 0;
+    z-index: var(--z-index__sheet__origin-cell);
+    height: 100%;
+    border-right: var(--cell-border-vertical);
+    border-bottom: none;
+    background: var(--slate-100);
+  }
+</style>
diff --git a/mathesar_ui/src/components/sheet/SheetPositionableCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetPositionableCell.svelte
similarity index 90%
rename from mathesar_ui/src/components/sheet/SheetPositionableCell.svelte
rename to mathesar_ui/src/components/sheet/cells/SheetPositionableCell.svelte
index 8c731acda8..27b7806069 100644
--- a/mathesar_ui/src/components/sheet/SheetPositionableCell.svelte
+++ b/mathesar_ui/src/components/sheet/cells/SheetPositionableCell.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getSheetContext } from './utils';
-  import type { ColumnPosition } from './utils';
+  import { getSheetContext } from '../utils';
+  import type { ColumnPosition } from '../utils';
 
   const { stores } = getSheetContext();
   const { columnStyleMap } = stores;
diff --git a/mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte
new file mode 100644
index 0000000000..b0df3b2a0a
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { ID_ROW_CONTROL_COLUMN } from '@mathesar/stores/table-data';
+  import { getSheetCellStyle } from './sheetCellUtils';
+
+  const style = getSheetCellStyle(ID_ROW_CONTROL_COLUMN);
+
+  export let rowSelectionId: string;
+</script>
+
+<div
+  data-sheet-element="row-header-cell"
+  data-row-selection-id={rowSelectionId}
+  style={$style}
+>
+  <slot />
+</div>
+
+<style lang="scss">
+  [data-sheet-element='row-header-cell'] {
+    position: sticky;
+    left: 0;
+    top: 0;
+    z-index: var(--z-index__sheet__row-header-cell);
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: var(--cell-border-horizontal);
+    border-right: var(--cell-border-vertical);
+    font-size: var(--text-size-x-small);
+    padding: 0 1.5rem;
+    color: var(--color-text-muted);
+  }
+</style>
diff --git a/mathesar_ui/src/components/sheet/cells/index.ts b/mathesar_ui/src/components/sheet/cells/index.ts
new file mode 100644
index 0000000000..4dc087562c
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cells/index.ts
@@ -0,0 +1,6 @@
+export { default as SheetColumnHeaderCell } from './SheetColumnHeaderCell.svelte';
+export { default as SheetDataCell } from './SheetDataCell.svelte';
+export { default as SheetColumnCreationCell } from './SheetColumnCreationCell.svelte';
+export { default as SheetOriginCell } from './SheetOriginCell.svelte';
+export { default as SheetPositionableCell } from './SheetPositionableCell.svelte';
+export { default as SheetRowHeaderCell } from './SheetRowHeaderCell.svelte';
diff --git a/mathesar_ui/src/components/sheet/cells/sheetCellUtils.ts b/mathesar_ui/src/components/sheet/cells/sheetCellUtils.ts
new file mode 100644
index 0000000000..c1312a0adc
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cells/sheetCellUtils.ts
@@ -0,0 +1,13 @@
+import { derived, type Readable } from 'svelte/store';
+import { getSheetContext } from '../utils';
+
+export function getSheetCellStyle<ColumnIdentifierKey>(
+  columnIdentifierKey: ColumnIdentifierKey,
+): Readable<string | undefined> {
+  const { stores } = getSheetContext();
+  const { columnStyleMap } = stores;
+  return derived(columnStyleMap, (map) => {
+    const columnPosition = map.get(columnIdentifierKey);
+    return columnPosition?.styleString;
+  });
+}
diff --git a/mathesar_ui/src/components/sheet/index.ts b/mathesar_ui/src/components/sheet/index.ts
index b0a1df34f4..e541c3f139 100644
--- a/mathesar_ui/src/components/sheet/index.ts
+++ b/mathesar_ui/src/components/sheet/index.ts
@@ -1,7 +1,5 @@
 export { default as Sheet } from './Sheet.svelte';
 export { default as SheetHeader } from './SheetHeader.svelte';
-export { default as SheetCell } from './SheetCell.svelte';
-export { default as SheetPositionableCell } from './SheetPositionableCell.svelte';
 export { default as SheetCellResizer } from './SheetCellResizer.svelte';
 export { default as SheetVirtualRows } from './SheetVirtualRows.svelte';
 export { default as SheetRow } from './SheetRow.svelte';
@@ -9,3 +7,5 @@ export {
   scrollBasedOnActiveCell,
   scrollBasedOnSelection,
 } from './sheetScrollingUtils';
+
+export * from './cells';
diff --git a/mathesar_ui/src/components/sheet/sheetScrollingUtils.ts b/mathesar_ui/src/components/sheet/sheetScrollingUtils.ts
index 16bede15b2..b59cbc2bdf 100644
--- a/mathesar_ui/src/components/sheet/sheetScrollingUtils.ts
+++ b/mathesar_ui/src/components/sheet/sheetScrollingUtils.ts
@@ -37,17 +37,13 @@ function scrollToElement(htmlElement: HTMLElement | null): void {
 }
 
 export function scrollBasedOnActiveCell(): void {
-  const activeCell: HTMLElement | null = document.querySelector(
-    '[data-sheet-element="data-cell"].is-active',
-  );
-  scrollToElement(activeCell);
+  const cell = document.querySelector<HTMLElement>('[data-cell-active]');
+  scrollToElement(cell);
 }
 
 export function scrollBasedOnSelection(): void {
-  const selectedCell: HTMLElement | null = document.querySelector(
-    '[data-sheet-element="data-cell"].is-selected',
-  );
-  scrollToElement(selectedCell);
+  const cell = document.querySelector<HTMLElement>('[data-cell-selected]');
+  scrollToElement(cell);
 }
 
 export async function autoScroll() {
diff --git a/mathesar_ui/src/components/sheet/types.ts b/mathesar_ui/src/components/sheet/types.ts
index bbc97588a2..b69d3b24d3 100644
--- a/mathesar_ui/src/components/sheet/types.ts
+++ b/mathesar_ui/src/components/sheet/types.ts
@@ -4,42 +4,3 @@ export interface SheetVirtualRowsApi {
   scrollToPosition: (vScrollOffset: number, hScrollOffset: number) => void;
   recalculateHeightsAfterIndex: (index: number) => void;
 }
-
-/**
- * These are the different kinds of cells that we can have within a sheet.
- *
- * - `origin-cell`: The cell in the top-left corner of the sheet.
- *
- * - `column-header-cell`: Contains the column names.
- *
- * - `new-column-cell`: Contains the `+` button for adding a new column.
- *
- * - `row-header-cell`: Contains the row numbers.
- *
- * - `data-cell`: Regular data cells.
- */
-export type SheetCellType =
-  | 'origin-cell'
-  | 'column-header-cell'
-  | 'new-column-cell'
-  | 'row-header-cell'
-  | 'data-cell';
-
-/**
- * These are values used for the `data-sheet-element` attribute on the sheet
- * elements.
- *
- * - `header-row`: The top most row of the sheet. It contains the column header
- *   cells.
- *
- * - `data-row`: Used for the remaining rows, including (for now) weird ones
- *   like grouping headers and such.
- *
- * - `positionable-cell`: Cells that span multiple columns or are taken out of
- *   regular flow e.g. "New records" message, grouping headers, etc.
- */
-export type SheetElement =
-  | 'header-row'
-  | 'data-row'
-  | 'positionable-cell'
-  | SheetCellType;
diff --git a/mathesar_ui/src/pages/import/preview/ImportPreviewSheet.svelte b/mathesar_ui/src/pages/import/preview/ImportPreviewSheet.svelte
index 3ffd200dad..a775f29ab2 100644
--- a/mathesar_ui/src/pages/import/preview/ImportPreviewSheet.svelte
+++ b/mathesar_ui/src/pages/import/preview/ImportPreviewSheet.svelte
@@ -3,8 +3,9 @@
   import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
   import {
     Sheet,
-    SheetCell,
     SheetCellResizer,
+    SheetColumnHeaderCell,
+    SheetDataCell,
     SheetHeader,
     SheetRow,
   } from '@mathesar/components/sheet';
@@ -25,7 +26,7 @@
   <Sheet restrictWidthToRowWidth {columns} getColumnIdentifier={(c) => c.id}>
     <SheetHeader inheritFontStyle>
       {#each columns as column (column.id)}
-        <SheetCell type="column-header-cell" columnIdentifierKey={column.id}>
+        <SheetColumnHeaderCell columnIdentifierKey={column.id}>
           <PreviewColumn
             {isLoading}
             processedColumn={column}
@@ -37,7 +38,7 @@
             columnIdentifierKey={column.id}
             minColumnWidth={120}
           />
-        </SheetCell>
+        </SheetColumnHeaderCell>
       {/each}
     </SheetHeader>
     {#each records as record (record)}
@@ -48,14 +49,14 @@
       >
         <div {...htmlAttributes} style={styleString}>
           {#each columns as column (column)}
-            <SheetCell type="data-cell" columnIdentifierKey={column.id}>
+            <SheetDataCell columnIdentifierKey={column.id}>
               <CellFabric
                 columnFabric={column}
                 value={record[column.column.name]}
                 showAsSkeleton={isLoading}
                 disabled={true}
               />
-            </SheetCell>
+            </SheetDataCell>
           {/each}
         </div>
       </SheetRow>
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte
index edc9ccbfc0..ba9855e119 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
   import { Button } from '@mathesar-component-library';
-  import { SheetCell, SheetCellResizer } from '@mathesar/components/sheet';
+  import {
+    SheetColumnHeaderCell,
+    SheetCellResizer,
+  } from '@mathesar/components/sheet';
   import ColumnName from '@mathesar/components/column/ColumnName.svelte';
   import type { ProcessedQueryOutputColumn } from '../utils';
   import type QueryRunner from '../QueryRunner';
@@ -14,10 +17,7 @@
   $: columnRunState = $runState?.state;
 </script>
 
-<SheetCell
-  type="column-header-cell"
-  columnIdentifierKey={processedQueryColumn.id}
->
+<SheetColumnHeaderCell columnIdentifierKey={processedQueryColumn.id}>
   <Button
     appearance="plain"
     class="column-name-wrapper {isSelected ? 'selected' : ''}"
@@ -25,8 +25,10 @@
       queryRunner.selectColumn(processedQueryColumn.column.alias);
     }}
   >
-    <!--TODO: Use a separate prop to identify column that isn't fetched yet
-                    instead of type:unknown-->
+    <!--
+      TODO: Use a separate prop to identify column that isn't fetched yet
+      instead of type:unknown
+    -->
     <ColumnName
       isLoading={columnRunState === 'processing' &&
         processedQueryColumn.column.type === 'unknown'}
@@ -39,4 +41,4 @@
     />
   </Button>
   <SheetCellResizer columnIdentifierKey={processedQueryColumn.id} />
-</SheetCell>
+</SheetColumnHeaderCell>
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
index eda7fda532..502c388eee 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
@@ -3,7 +3,7 @@
 
   import type { RequestStatus } from '@mathesar/api/utils/requestUtils';
   import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
-  import { SheetCell } from '@mathesar/components/sheet';
+  import { SheetDataCell } from '@mathesar/components/sheet';
   import { makeCellId } from '@mathesar/components/sheet/cellIds';
   import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
   import { handleKeyboardEventOnCell } from '@mathesar/components/sheet/sheetKeyboardUtils';
@@ -19,7 +19,11 @@
   $: isActive = cellId === $selection.activeCellId;
 </script>
 
-<SheetCell type="data-cell" columnIdentifierKey={column.id} {isActive}>
+<SheetDataCell
+  columnIdentifierKey={column.id}
+  cellSelectionId={cellId}
+  {isActive}
+>
   {#if row || recordRunState === 'processing'}
     <CellFabric
       {isActive}
@@ -32,4 +36,4 @@
         handleKeyboardEventOnCell(detail.originalEvent, selection)}
     />
   {/if}
-</SheetCell>
+</SheetDataCell>
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index 1a6c80302e..bb5c7b3d9a 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
-  import { get } from 'svelte/store';
   import { _ } from 'svelte-i18n';
+  import { get } from 'svelte/store';
+
   import { ImmutableMap, ImmutableSet } from '@mathesar-component-library';
   import CellBackground from '@mathesar/components/CellBackground.svelte';
   import PaginationGroup from '@mathesar/components/PaginationGroup.svelte';
   import {
     Sheet,
-    SheetCell,
     SheetHeader,
+    SheetRowHeaderCell,
     SheetRow,
     SheetVirtualRows,
+    SheetOriginCell,
   } from '@mathesar/components/sheet';
   import { SheetClipboardHandler } from '@mathesar/components/sheet/SheetClipboardHandler';
   import { rowHeaderWidthPx, rowHeightPx } from '@mathesar/geometry';
@@ -85,10 +87,7 @@
       usesVirtualList
     >
       <SheetHeader>
-        <SheetCell
-          type="origin-cell"
-          columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
-        />
+        <SheetOriginCell />
         {#each columnList as processedQueryColumn (processedQueryColumn.id)}
           <ResultHeaderCell
             {processedQueryColumn}
@@ -111,13 +110,10 @@
                 {...htmlAttributes}
                 style="--cell-height:{rowHeightPx - 1}px;{styleString}"
               >
-                <SheetCell
-                  type="row-header-cell"
-                  columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
-                >
+                <SheetRowHeaderCell rowSelectionId={'TODO_3037'}>
                   <CellBackground color="var(--cell-bg-color-header)" />
                   {$pagination.offset + item.index + 1}
-                </SheetCell>
+                </SheetRowHeaderCell>
 
                 {#each columnList as processedQueryColumn (processedQueryColumn.id)}
                   <ResultRowCell
diff --git a/mathesar_ui/src/systems/table-view/header/Header.svelte b/mathesar_ui/src/systems/table-view/header/Header.svelte
index 0dd73689d9..df3c19d110 100644
--- a/mathesar_ui/src/systems/table-view/header/Header.svelte
+++ b/mathesar_ui/src/systems/table-view/header/Header.svelte
@@ -4,16 +4,14 @@
   import type { TableEntry } from '@mathesar/api/types/tables';
   import { ContextMenu } from '@mathesar/component-library';
   import {
-    SheetCell,
     SheetCellResizer,
+    SheetColumnHeaderCell,
     SheetHeader,
+    SheetColumnCreationCell,
   } from '@mathesar/components/sheet';
+  import SheetOriginCell from '@mathesar/components/sheet/cells/SheetOriginCell.svelte';
   import type { ProcessedColumn } from '@mathesar/stores/table-data';
-  import {
-    getTabularDataStoreFromContext,
-    ID_ADD_NEW_COLUMN,
-    ID_ROW_CONTROL_COLUMN,
-  } from '@mathesar/stores/table-data';
+  import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
   import { saveColumnOrder } from '@mathesar/stores/tables';
   import { Draggable, Droppable } from './drag-and-drop';
   import ColumnHeaderContextMenu from './header-cell/ColumnHeaderContextMenu.svelte';
@@ -94,18 +92,18 @@
 </script>
 
 <SheetHeader>
-  <SheetCell type="origin-cell" columnIdentifierKey={ID_ROW_CONTROL_COLUMN}>
+  <SheetOriginCell>
     <Droppable
       on:drop={() => dropColumn()}
       on:dragover={(e) => e.preventDefault()}
       locationOfFirstDraggedColumn={0}
       columnLocation={-1}
     />
-  </SheetCell>
+  </SheetOriginCell>
 
   {#each [...$processedColumns] as [columnId, processedColumn] (columnId)}
     {@const isSelected = $selection.columnIds.has(String(columnId))}
-    <SheetCell type="column-header-cell" columnIdentifierKey={columnId}>
+    <SheetColumnHeaderCell columnIdentifierKey={columnId}>
       <!-- TODO_3037: why is this div here? Can we get rid of it? -->
       <div>
         <Draggable
@@ -128,12 +126,12 @@
           <ColumnHeaderContextMenu {processedColumn} />
         </ContextMenu>
       </div>
-    </SheetCell>
+    </SheetColumnHeaderCell>
   {/each}
 
   {#if hasNewColumnButton}
-    <SheetCell type="new-column-cell" columnIdentifierKey={ID_ADD_NEW_COLUMN}>
+    <SheetColumnCreationCell>
       <NewColumnCell />
-    </SheetCell>
+    </SheetColumnCreationCell>
   {/if}
 </SheetHeader>
diff --git a/mathesar_ui/src/systems/table-view/row/Row.svelte b/mathesar_ui/src/systems/table-view/row/Row.svelte
index 0e08c59f76..cddf79d67c 100644
--- a/mathesar_ui/src/systems/table-view/row/Row.svelte
+++ b/mathesar_ui/src/systems/table-view/row/Row.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { ContextMenu } from '@mathesar/component-library';
-  import { SheetCell, SheetRow } from '@mathesar/components/sheet';
+  import { SheetRow, SheetRowHeaderCell } from '@mathesar/components/sheet';
   import { rowHeightPx } from '@mathesar/geometry';
   import {
     ID_ROW_CONTROL_COLUMN,
@@ -70,10 +70,7 @@
     style="--cell-height:{rowHeightPx - 1}px;{styleString}"
     on:mousedown={checkAndCreateEmptyRow}
   >
-    <SheetCell
-      type="row-header-cell"
-      columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
-    >
+    <SheetRowHeaderCell rowSelectionId={'TODO_3037'}>
       {#if rowHasRecord(row)}
         <RowControl
           {primaryKeyColumnId}
@@ -87,7 +84,7 @@
           <RowContextOptions recordPk={rowKey} {recordsData} {row} />
         </ContextMenu>
       {/if}
-    </SheetCell>
+    </SheetRowHeaderCell>
 
     {#if isHelpTextRow(row)}
       <NewRecordMessage columnCount={$processedColumns.size} />
diff --git a/mathesar_ui/src/systems/table-view/row/RowCell.svelte b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
index 7fbea0c0f7..90e5931aea 100644
--- a/mathesar_ui/src/systems/table-view/row/RowCell.svelte
+++ b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
@@ -16,7 +16,7 @@
   import Null from '@mathesar/components/Null.svelte';
   import RowCellBackgrounds from '@mathesar/components/RowCellBackgrounds.svelte';
   import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
-  import { SheetCell } from '@mathesar/components/sheet';
+  import { SheetDataCell } from '@mathesar/components/sheet';
   import { makeCellId } from '@mathesar/components/sheet/cellIds';
   import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
   import { handleKeyboardEventOnCell } from '@mathesar/components/sheet/sheetKeyboardUtils';
@@ -98,11 +98,10 @@
   }
 </script>
 
-<SheetCell
-  type="data-cell"
+<SheetDataCell
   columnIdentifierKey={column.id}
+  cellSelectionId={cellId}
   {isActive}
-  lightText={hasError || isProcessing}
 >
   <CellBackground when={hasError} color="var(--cell-bg-color-error)" />
   <CellBackground when={!isEditable} color="var(--cell-bg-color-disabled)" />
@@ -135,6 +134,7 @@
       handleKeyboardEventOnCell(detail.originalEvent, selection)}
     on:update={valueUpdated}
     horizontalAlignment={column.primary_key ? 'left' : undefined}
+    lightText={hasError || isProcessing}
   />
   <ContextMenu>
     {#if canEditTableRecords || showLinkedRecordHyperLink}
@@ -171,4 +171,4 @@
   {#if errors.length}
     <CellErrors {errors} forceShowErrors={isActive} />
   {/if}
-</SheetCell>
+</SheetDataCell>

From f5448669a3348120184ab63c39ab4cc4bb21f0d2 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 7 Feb 2024 20:35:43 -0500
Subject: [PATCH 27/85] Add match utility function for TS pattern matching

---
 .../utils/__tests__/patternMatching.test.ts   | 20 +++++++++++++++++++
 mathesar_ui/src/utils/patternMatching.ts      | 14 +++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 mathesar_ui/src/utils/__tests__/patternMatching.test.ts
 create mode 100644 mathesar_ui/src/utils/patternMatching.ts

diff --git a/mathesar_ui/src/utils/__tests__/patternMatching.test.ts b/mathesar_ui/src/utils/__tests__/patternMatching.test.ts
new file mode 100644
index 0000000000..b00d25a7fc
--- /dev/null
+++ b/mathesar_ui/src/utils/__tests__/patternMatching.test.ts
@@ -0,0 +1,20 @@
+import { match } from '../patternMatching';
+
+test('match', () => {
+  type Shape =
+    | { kind: 'circle'; radius: number }
+    | { kind: 'square'; x: number }
+    | { kind: 'triangle'; x: number; y: number };
+
+  function area(shape: Shape) {
+    return match(shape, 'kind', {
+      circle: ({ radius }) => Math.PI * radius ** 2,
+      square: ({ x }) => x ** 2,
+      triangle: ({ x, y }) => (x * y) / 2,
+    });
+  }
+
+  expect(area({ kind: 'circle', radius: 5 })).toBe(78.53981633974483);
+  expect(area({ kind: 'square', x: 5 })).toBe(25);
+  expect(area({ kind: 'triangle', x: 5, y: 6 })).toBe(15);
+});
diff --git a/mathesar_ui/src/utils/patternMatching.ts b/mathesar_ui/src/utils/patternMatching.ts
new file mode 100644
index 0000000000..9f349df973
--- /dev/null
+++ b/mathesar_ui/src/utils/patternMatching.ts
@@ -0,0 +1,14 @@
+export function match<
+  /** Discriminant Property name */
+  P extends string,
+  /** The other stuff in the type (besides the discriminant property) */
+  O,
+  /** The union valued type */
+  V extends Record<P, string> & O,
+  /** The match arms */
+  C extends { [K in V[P]]: (v: Extract<V, Record<P, K>>) => unknown },
+>(value: V, property: P, cases: C) {
+  return cases[value[property]](
+    value as Extract<V, Record<P, string>>,
+  ) as ReturnType<C[keyof C]>;
+}

From e8e5e347c1220caf8702224362176db0d8794d8b Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 7 Feb 2024 20:57:06 -0500
Subject: [PATCH 28/85] Begin scaffolding to handle drag selection

---
 mathesar_ui/src/components/sheet/Sheet.svelte | 23 +++++-
 .../src/components/sheet/cells/index.ts       |  1 +
 .../sheet/selection/SheetSelection.ts         | 48 ++++++++++++-
 .../src/components/sheet/selection/index.ts   |  1 +
 .../sheet/selection/selectionUtils.ts         | 71 +++++++++++++++++++
 .../src/systems/table-view/TableView.svelte   | 13 ++--
 6 files changed, 145 insertions(+), 12 deletions(-)
 create mode 100644 mathesar_ui/src/components/sheet/selection/index.ts
 create mode 100644 mathesar_ui/src/components/sheet/selection/selectionUtils.ts

diff --git a/mathesar_ui/src/components/sheet/Sheet.svelte b/mathesar_ui/src/components/sheet/Sheet.svelte
index 9e01daf36f..92b876876e 100644
--- a/mathesar_ui/src/components/sheet/Sheet.svelte
+++ b/mathesar_ui/src/components/sheet/Sheet.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-  import { writable } from 'svelte/store';
+  import { writable, type Writable } from 'svelte/store';
 
   import { ImmutableMap } from '@mathesar-component-library/types';
   import type { ClipboardHandler } from '@mathesar/stores/clipboard';
   import { getClipboardHandlerStoreFromContext } from '@mathesar/stores/clipboard';
+  import { beginSelection, findContainingSheetCell } from './selection';
+  import type SheetSelection from './selection/SheetSelection';
   import {
-    DEFAULT_COLUMN_WIDTH,
     calculateColumnStyleMapAndRowWidth,
+    DEFAULT_COLUMN_WIDTH,
     setSheetContext,
   } from './utils';
 
@@ -21,6 +23,7 @@
   export let hasBorder = false;
   export let hasPaddingRight = false;
   export let clipboardHandler: ClipboardHandler | undefined = undefined;
+  export let selection: Writable<SheetSelection> | undefined = undefined;
 
   export let getColumnIdentifier: (
     c: SheetColumnType,
@@ -34,6 +37,8 @@
   export let columnWidths: ImmutableMap<SheetColumnIdentifierKey, number> =
     new ImmutableMap();
 
+  let sheetElement: HTMLElement;
+
   $: ({ columnStyleMap, rowWidth } = calculateColumnStyleMapAndRowWidth(
     columns,
     getColumnIdentifier,
@@ -114,6 +119,17 @@
   function disableClipboard() {
     clipboardHandlerStore?.set(undefined);
   }
+
+  function handleMouseDown(e: MouseEvent) {
+    if (!selection) return;
+    // TODO_3037:
+    // - handle mouse events with other buttons
+    // - handle Shift/Alt/Ctrl key modifiers
+    const target = e.target as HTMLElement;
+    const startingCell = findContainingSheetCell(target);
+    if (!startingCell) return;
+    beginSelection({ selection, sheetElement, startingCell });
+  }
 </script>
 
 <div
@@ -122,9 +138,10 @@
   class:uses-virtual-list={usesVirtualList}
   class:set-to-row-width={restrictWidthToRowWidth}
   {style}
-  on:click
+  on:mousedown={handleMouseDown}
   on:focusin={enableClipboard}
   on:focusout={disableClipboard}
+  bind:this={sheetElement}
 >
   {#if columns.length}
     <slot />
diff --git a/mathesar_ui/src/components/sheet/cells/index.ts b/mathesar_ui/src/components/sheet/cells/index.ts
index 4dc087562c..2fd6716ac2 100644
--- a/mathesar_ui/src/components/sheet/cells/index.ts
+++ b/mathesar_ui/src/components/sheet/cells/index.ts
@@ -4,3 +4,4 @@ export { default as SheetColumnCreationCell } from './SheetColumnCreationCell.sv
 export { default as SheetOriginCell } from './SheetOriginCell.svelte';
 export { default as SheetPositionableCell } from './SheetPositionableCell.svelte';
 export { default as SheetRowHeaderCell } from './SheetRowHeaderCell.svelte';
+export * from './sheetCellUtils';
diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index 7c11c67476..38dde70bda 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -1,10 +1,12 @@
 import { execPipe, filter, first, map } from 'iter-tools';
 
 import { ImmutableSet } from '@mathesar/component-library';
+import { match } from '@mathesar/utils/patternMatching';
 import { assertExhaustive } from '@mathesar/utils/typeUtils';
 import { makeCells, parseCellId } from '../cellIds';
 import { Direction, getColumnOffset } from './Direction';
 import Plane from './Plane';
+import type { SheetCellDetails } from './selectionUtils';
 
 /**
  * - `'dataCells'` means that the selection contains data cells. This is by far
@@ -280,7 +282,7 @@ export default class SheetSelection {
    * selection is made only of data cells, and will never include cells in the
    * placeholder row, even if a user drags to select a cell in it.
    */
-  ofCellRange(cellIdA: string, cellIdB: string): SheetSelection {
+  ofDataCellRange(cellIdA: string, cellIdB: string): SheetSelection {
     return this.withBasis(
       basisFromDataCells(
         this.plane.dataCellsInFlexibleCellRange(cellIdA, cellIdB),
@@ -288,6 +290,46 @@ export default class SheetSelection {
     );
   }
 
+  ofSheetCellRange(
+    cellA: SheetCellDetails,
+    cellB: SheetCellDetails,
+  ): SheetSelection {
+    // TODO_3037 finish implementation
+    return match(cellA, 'type', {
+      'data-cell': (a) =>
+        match(cellB, 'type', {
+          'data-cell': (b) => this.ofDataCellRange(a.cellId, b.cellId),
+          'column-header-cell': (b) => {
+            throw new Error('Not implemented');
+          },
+          'row-header-cell': (b) => {
+            throw new Error('Not implemented');
+          },
+        }),
+      'column-header-cell': (a) =>
+        match(cellB, 'type', {
+          'data-cell': (b) => {
+            throw new Error('Not implemented');
+          },
+          'column-header-cell': (b) =>
+            this.ofColumnRange(a.columnId, b.columnId),
+          'row-header-cell': (b) => {
+            throw new Error('Not implemented');
+          },
+        }),
+      'row-header-cell': (a) =>
+        match(cellB, 'type', {
+          'data-cell': (b) => {
+            throw new Error('Not implemented');
+          },
+          'column-header-cell': (b) => {
+            throw new Error('Not implemented');
+          },
+          'row-header-cell': (b) => this.ofRowRange(a.rowId, b.rowId),
+        }),
+    });
+  }
+
   /**
    * @returns a new selection formed from one cell within the data rows or the
    * placeholder row.
@@ -391,8 +433,8 @@ export default class SheetSelection {
    * by the active cell (also the first cell selected when dragging) and the
    * provided cell.
    */
-  drawnToCell(cellId: string): SheetSelection {
-    return this.ofCellRange(this.activeCellId ?? cellId, cellId);
+  drawnToDataCell(cellId: string): SheetSelection {
+    return this.ofDataCellRange(this.activeCellId ?? cellId, cellId);
   }
 
   /**
diff --git a/mathesar_ui/src/components/sheet/selection/index.ts b/mathesar_ui/src/components/sheet/selection/index.ts
new file mode 100644
index 0000000000..ec81a55c52
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/index.ts
@@ -0,0 +1 @@
+export * from './selectionUtils';
diff --git a/mathesar_ui/src/components/sheet/selection/selectionUtils.ts b/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
new file mode 100644
index 0000000000..32558f0884
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
@@ -0,0 +1,71 @@
+import type { Writable } from 'svelte/store';
+
+import type SheetSelection from './SheetSelection';
+
+export type SheetCellDetails =
+  | { type: 'data-cell'; cellId: string }
+  | { type: 'column-header-cell'; columnId: string }
+  | { type: 'row-header-cell'; rowId: string };
+
+export function findContainingSheetCell(
+  element: HTMLElement,
+): SheetCellDetails | undefined {
+  const containingElement = element.closest('[data-sheet-element]');
+  if (!containingElement) return undefined;
+
+  const elementType = containingElement.getAttribute('data-sheet-element');
+  if (!elementType) return undefined;
+
+  if (elementType === 'data-cell') {
+    const cellId = containingElement.getAttribute('data-cell-selection-id');
+    if (!cellId) return undefined;
+    return { type: 'data-cell', cellId };
+  }
+
+  if (elementType === 'column-header-cell') {
+    const columnId = containingElement.getAttribute('data-column-identifier');
+    if (!columnId) return undefined;
+    return { type: 'column-header-cell', columnId };
+  }
+
+  if (elementType === 'row-header-cell') {
+    const rowId = containingElement.getAttribute('data-row-selection-id');
+    if (!rowId) return undefined;
+    return { type: 'row-header-cell', rowId };
+  }
+
+  return undefined;
+}
+
+export function beginSelection({
+  selection,
+  sheetElement,
+  startingCell,
+}: {
+  startingCell: SheetCellDetails;
+  selection: Writable<SheetSelection>;
+  sheetElement: HTMLElement;
+}) {
+  let previousTarget: HTMLElement | undefined;
+
+  function drawToCell(endingCell: SheetCellDetails) {
+    selection.update((s) => s.ofSheetCellRange(startingCell, endingCell));
+  }
+
+  function drawToPoint(e: MouseEvent) {
+    const target = e.target as HTMLElement;
+    if (target === previousTarget) return; // For performance
+    const cell = findContainingSheetCell(target);
+    if (!cell) return;
+    drawToCell(cell);
+  }
+
+  function finish() {
+    sheetElement.removeEventListener('mousemove', drawToPoint);
+    window.removeEventListener('mouseup', finish);
+  }
+
+  drawToCell(startingCell);
+  sheetElement.addEventListener('mousemove', drawToPoint);
+  window.addEventListener('mouseup', finish);
+}
diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte
index fb048a3460..3f3dad227e 100644
--- a/mathesar_ui/src/systems/table-view/TableView.svelte
+++ b/mathesar_ui/src/systems/table-view/TableView.svelte
@@ -127,16 +127,17 @@
     <div class="sheet-area" on:click={checkAndReinstateFocusOnActiveCell}>
       {#if $processedColumns.size}
         <Sheet
-          columns={sheetColumns}
-          getColumnIdentifier={(entry) => entry.column.id}
-          {usesVirtualList}
-          {columnWidths}
           {clipboardHandler}
-          hasBorder={sheetHasBorder}
-          restrictWidthToRowWidth={!usesVirtualList}
+          {columnWidths}
+          {selection}
+          {usesVirtualList}
           bind:horizontalScrollOffset={$horizontalScrollOffset}
           bind:scrollOffset={$scrollOffset}
+          columns={sheetColumns}
+          getColumnIdentifier={(entry) => entry.column.id}
+          hasBorder={sheetHasBorder}
           hasPaddingRight
+          restrictWidthToRowWidth={!usesVirtualList}
         >
           <Header {hasNewColumnButton} {columnOrder} {table} />
           <Body {usesVirtualList} />

From 4f2a253cc8c83a1bd231ae2158b31fbb4c1c4097 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Thu, 8 Feb 2024 20:10:42 -0500
Subject: [PATCH 29/85] Document match function

---
 mathesar_ui/src/utils/patternMatching.ts | 28 ++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/mathesar_ui/src/utils/patternMatching.ts b/mathesar_ui/src/utils/patternMatching.ts
index 9f349df973..8b69cbdaed 100644
--- a/mathesar_ui/src/utils/patternMatching.ts
+++ b/mathesar_ui/src/utils/patternMatching.ts
@@ -1,3 +1,31 @@
+/**
+ * Performs branching logic by exhaustively pattern-matching all variants of a
+ * TypeScript discriminated union.
+ *
+ * @param value The value to match
+ * @param property The name of the discriminant property
+ * @param cases An object representing the match arms. It should have one entry
+ * per variant of the union. The key should be the value of the discriminant
+ * property for that variant, and the value should be a function that takes the
+ * value of that variant and returns the result of the match arm.
+ *
+ * @example
+ *
+ * ```ts
+ * type Shape =
+ *   | { kind: 'circle'; radius: number }
+ *   | { kind: 'square'; x: number }
+ *   | { kind: 'triangle'; x: number; y: number };
+ *
+ * function area(shape: Shape) {
+ *   return match(shape, 'kind', {
+ *     circle: ({ radius }) => Math.PI * radius ** 2,
+ *     square: ({ x }) => x ** 2,
+ *     triangle: ({ x, y }) => (x * y) / 2,
+ *   });
+ * }
+ * ```
+ */
 export function match<
   /** Discriminant Property name */
   P extends string,

From ab4aca0c895d61b26462c91ff9e02de765beaf98 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Thu, 8 Feb 2024 20:12:35 -0500
Subject: [PATCH 30/85] Finish implementation of ofSheetCellRange method

---
 .../sheet/selection/SheetSelection.ts         | 71 +++++++++----------
 1 file changed, 35 insertions(+), 36 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index 38dde70bda..f177794704 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -3,7 +3,7 @@ import { execPipe, filter, first, map } from 'iter-tools';
 import { ImmutableSet } from '@mathesar/component-library';
 import { match } from '@mathesar/utils/patternMatching';
 import { assertExhaustive } from '@mathesar/utils/typeUtils';
-import { makeCells, parseCellId } from '../cellIds';
+import { makeCellId, makeCells, parseCellId } from '../cellIds';
 import { Direction, getColumnOffset } from './Direction';
 import Plane from './Plane';
 import type { SheetCellDetails } from './selectionUtils';
@@ -291,42 +291,41 @@ export default class SheetSelection {
   }
 
   ofSheetCellRange(
-    cellA: SheetCellDetails,
-    cellB: SheetCellDetails,
+    startingCell: SheetCellDetails,
+    endingCell: SheetCellDetails,
   ): SheetSelection {
-    // TODO_3037 finish implementation
-    return match(cellA, 'type', {
-      'data-cell': (a) =>
-        match(cellB, 'type', {
-          'data-cell': (b) => this.ofDataCellRange(a.cellId, b.cellId),
-          'column-header-cell': (b) => {
-            throw new Error('Not implemented');
-          },
-          'row-header-cell': (b) => {
-            throw new Error('Not implemented');
-          },
-        }),
-      'column-header-cell': (a) =>
-        match(cellB, 'type', {
-          'data-cell': (b) => {
-            throw new Error('Not implemented');
-          },
-          'column-header-cell': (b) =>
-            this.ofColumnRange(a.columnId, b.columnId),
-          'row-header-cell': (b) => {
-            throw new Error('Not implemented');
-          },
-        }),
-      'row-header-cell': (a) =>
-        match(cellB, 'type', {
-          'data-cell': (b) => {
-            throw new Error('Not implemented');
-          },
-          'column-header-cell': (b) => {
-            throw new Error('Not implemented');
-          },
-          'row-header-cell': (b) => this.ofRowRange(a.rowId, b.rowId),
-        }),
+    // Nullish coalescing is safe here since we know we'll have a first row and
+    // first column in the cases where we're selecting things.
+    const firstRow = () => this.plane.rowIds.first ?? '';
+    const firstColumn = () => this.plane.columnIds.first ?? '';
+
+    return match(startingCell, 'type', {
+      'data-cell': ({ cellId: startingCellId }) => {
+        const endingCellId = match(endingCell, 'type', {
+          'data-cell': (b) => b.cellId,
+          'column-header-cell': (b) => makeCellId(firstRow(), b.columnId),
+          'row-header-cell': (b) => makeCellId(b.rowId, firstColumn()),
+        });
+        return this.ofDataCellRange(startingCellId, endingCellId);
+      },
+
+      'column-header-cell': ({ columnId: startingColumnId }) => {
+        const endingColumnId = match(endingCell, 'type', {
+          'data-cell': (b) => parseCellId(b.cellId).columnId,
+          'column-header-cell': (b) => b.columnId,
+          'row-header-cell': () => firstColumn(),
+        });
+        return this.ofColumnRange(startingColumnId, endingColumnId);
+      },
+
+      'row-header-cell': ({ rowId: startingRowId }) => {
+        const endingRowId = match(endingCell, 'type', {
+          'data-cell': (b) => parseCellId(b.cellId).rowId,
+          'column-header-cell': () => firstRow(),
+          'row-header-cell': (b) => b.rowId,
+        });
+        return this.ofRowRange(startingRowId, endingRowId);
+      },
     });
   }
 

From 4e83d8d3a2814165985220d4e257a60df1129d1f Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Sun, 11 Feb 2024 21:07:34 -0500
Subject: [PATCH 31/85] Lift isSelected prop way up

Move from being used in CellWrapper to being used in SheetDataCell.
---
 .../components/cell-fabric/CellFabric.svelte  |  2 --
 .../data-types/components/CellWrapper.svelte  |  2 --
 .../components/SteppedInputCell.svelte        |  2 --
 .../components/array/ArrayCell.svelte         |  2 --
 .../components/checkbox/CheckboxCell.svelte   |  2 --
 .../components/date-time/DateTimeCell.svelte  |  2 --
 .../formatted-input/FormattedInputCell.svelte |  2 --
 .../linked-record/LinkedRecordCell.svelte     |  2 --
 .../components/money/MoneyCell.svelte         |  2 --
 .../components/number/NumberCell.svelte       |  2 --
 .../primary-key/PrimaryKeyCell.svelte         |  2 --
 .../components/select/SingleSelectCell.svelte |  2 --
 .../components/textarea/TextAreaCell.svelte   |  2 --
 .../components/textbox/TextBoxCell.svelte     |  2 --
 .../data-types/components/typeDefinitions.ts  |  1 -
 .../data-types/components/uri/UriCell.svelte  |  2 --
 .../sheet/cells/SheetDataCell.svelte          | 25 ++++++++++++++++---
 .../result-pane/ResultRowCell.svelte          |  5 ++--
 .../src/systems/table-view/row/RowCell.svelte |  6 ++---
 19 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/mathesar_ui/src/components/cell-fabric/CellFabric.svelte b/mathesar_ui/src/components/cell-fabric/CellFabric.svelte
index 70f52b80ab..41d9390317 100644
--- a/mathesar_ui/src/components/cell-fabric/CellFabric.svelte
+++ b/mathesar_ui/src/components/cell-fabric/CellFabric.svelte
@@ -14,7 +14,6 @@
     | ((recordId: string, recordSummary: string) => void)
     | undefined = undefined;
   export let isActive = false;
-  export let isSelected = false;
   export let disabled = false;
   export let showAsSkeleton = false;
   export let horizontalAlignment: HorizontalAlignment | undefined = undefined;
@@ -42,7 +41,6 @@
     {...props}
     {columnFabric}
     {isActive}
-    {isSelected}
     {disabled}
     {isIndependentOfSheet}
     {horizontalAlignment}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
index 8fe7f4bf02..3f4c9ca1d1 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
@@ -6,7 +6,6 @@
 
   export let element: HTMLElement | undefined = undefined;
   export let isActive = false;
-  export let isSelected = false;
   export let disabled = false;
   export let mode: 'edit' | 'default' = 'default';
   export let multiLineTruncate = false;
@@ -116,7 +115,6 @@
   {...$$restProps}
 >
   {#if mode !== 'edit'}
-    <CellBackground color="rgba(14, 101, 235, 0.1)" when={isSelected} />
     <CellBackground
       color="var(--cell-background-color)"
       when={valueComparisonOutcome !== 'noMatch'}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte
index 98f1bdcd02..beec3c7dc8 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte
@@ -21,7 +21,6 @@
   type Props = CellTypeProps<Value>;
 
   export let isActive: Props['isActive'];
-  export let isSelected: Props['isSelected'];
   export let value: Props['value'];
   export let disabled: Props['disabled'];
   export let multiLineTruncate = false;
@@ -148,7 +147,6 @@
 
 <CellWrapper
   {isActive}
-  {isSelected}
   {disabled}
   bind:element={cellRef}
   on:dblclick={setModeToEdit}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte
index 66121cef76..3ee54ac16c 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte
@@ -12,7 +12,6 @@
   const dispatch = createEventDispatcher();
 
   export let isActive: $$Props['isActive'];
-  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
@@ -38,7 +37,6 @@
 
 <CellWrapper
   {isActive}
-  {isSelected}
   {disabled}
   {isIndependentOfSheet}
   on:mouseenter
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte
index a6a469c9d3..d85f256b1f 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte
@@ -10,7 +10,6 @@
   const dispatch = createEventDispatcher();
 
   export let isActive: $$Props['isActive'];
-  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -72,7 +71,6 @@
 <CellWrapper
   bind:element={cellRef}
   {isActive}
-  {isSelected}
   {disabled}
   {isIndependentOfSheet}
   {valueComparisonOutcome}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte
index b50c154cab..530b6f464d 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte
@@ -6,7 +6,6 @@
   type $$Props = DateTimeCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
@@ -22,7 +21,6 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelected}
   {disabled}
   highlightSubstringMatches={false}
   {isIndependentOfSheet}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte
index 42df86179c..d8c16bc720 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte
@@ -6,7 +6,6 @@
   type $$Props = FormattedInputCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
@@ -23,7 +22,6 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelected}
   {disabled}
   {isIndependentOfSheet}
   {showTruncationPopover}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte
index 63de26a0ca..9f71177829 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte
@@ -21,7 +21,6 @@
 
   export let isActive: $$Props['isActive'];
   export let columnFabric: $$Props['columnFabric'];
-  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'] = undefined;
   export let searchValue: $$Props['searchValue'] = undefined;
   export let recordSummary: $$Props['recordSummary'] = undefined;
@@ -95,7 +94,6 @@
 
 <CellWrapper
   {isActive}
-  {isSelected}
   {disabled}
   {isIndependentOfSheet}
   on:mouseenter
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte
index 6d271559d6..395f4009aa 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte
@@ -6,7 +6,6 @@
   type $$Props = MoneyCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -19,7 +18,6 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelected}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte
index 173e801418..ec07dcde99 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte
@@ -9,7 +9,6 @@
   type $$Props = NumberCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -23,7 +22,6 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelected}
   {disabled}
   {isIndependentOfSheet}
   {showTruncationPopover}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte
index dc01938b39..d649693cf3 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte
@@ -13,7 +13,6 @@
   const dispatch = createEventDispatcher();
 
   export let isActive: $$Props['isActive'];
-  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let tableId: $$Props['tableId'];
@@ -48,7 +47,6 @@
 
 <CellWrapper
   {isActive}
-  {isSelected}
   {disabled}
   {isIndependentOfSheet}
   on:mouseenter
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte
index 886f86c83f..2469775798 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte
@@ -24,7 +24,6 @@
   const id = getGloballyUniqueId();
 
   export let isActive: DefinedProps['isActive'];
-  export let isSelected: $$Props['isSelected'];
   export let value: DefinedProps['value'] = undefined;
   export let disabled: DefinedProps['disabled'];
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
@@ -114,7 +113,6 @@
     aria-controls={id}
     aria-haspopup="listbox"
     {isActive}
-    {isSelected}
     {disabled}
     {isIndependentOfSheet}
     on:mouseenter
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte
index 9ebc8b88a1..41cc545644 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte
@@ -7,7 +7,6 @@
   type $$Props = TextAreaCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -33,7 +32,6 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelected}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte
index f560933a6f..ebabc12875 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte
@@ -6,7 +6,6 @@
   type $$Props = TextBoxCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -20,7 +19,6 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelected}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/typeDefinitions.ts b/mathesar_ui/src/components/cell-fabric/data-types/components/typeDefinitions.ts
index 2488bd93bf..906e2c8d09 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/typeDefinitions.ts
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/typeDefinitions.ts
@@ -33,7 +33,6 @@ export type CellValueFormatter<T> = (
 export interface CellTypeProps<Value> {
   value: Value | null | undefined;
   isActive: boolean;
-  isSelected: boolean;
   disabled: boolean;
   searchValue?: unknown;
   isProcessing: boolean;
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte
index 2e919190ec..23782f18cb 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte
@@ -11,7 +11,6 @@
   type $$Props = CellTypeProps<string>;
 
   export let isActive: $$Props['isActive'];
-  export let isSelected: $$Props['isSelected'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -22,7 +21,6 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelected}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
diff --git a/mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte
index 93feef613d..7a3c4a65c9 100644
--- a/mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte
+++ b/mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte
@@ -1,14 +1,30 @@
 <script lang="ts">
+  import type SheetSelection from '../selection/SheetSelection';
+
+  import CellBackground from '@mathesar/components/CellBackground.svelte';
   import { getSheetCellStyle } from './sheetCellUtils';
 
   type SheetColumnIdentifierKey = $$Generic;
 
   export let columnIdentifierKey: SheetColumnIdentifierKey;
   export let cellSelectionId: string | undefined = undefined;
-  export let isActive = false;
-  export let isSelected = false;
+  export let selection: SheetSelection | undefined = undefined;
 
   $: style = getSheetCellStyle(columnIdentifierKey);
+  $: ({ isActive, isSelected, hasSelectionBackground } = (() => {
+    if (!selection || !cellSelectionId)
+      return {
+        isActive: false,
+        isSelected: false,
+        hasSelectionBackground: false,
+      };
+    const isSelected = selection.cellIds.has(cellSelectionId);
+    return {
+      isActive: selection.activeCellId === cellSelectionId,
+      isSelected: selection.cellIds.has(cellSelectionId),
+      hasSelectionBackground: isSelected && selection.cellIds.size > 1,
+    };
+  })());
 </script>
 
 <div
@@ -18,7 +34,10 @@
   data-cell-selected={isSelected ? '' : undefined}
   style={$style}
 >
-  <slot />
+  {#if hasSelectionBackground}
+    <CellBackground color="rgba(14, 101, 235, 0.1)" when={isSelected} />
+  {/if}
+  <slot {isActive} {isSelected} />
 </div>
 
 <style>
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
index 502c388eee..30f947fcee 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
@@ -16,18 +16,17 @@
   export let selection: Writable<SheetSelection>;
 
   $: cellId = row && makeCellId(getRowSelectionId(row), column.id);
-  $: isActive = cellId === $selection.activeCellId;
 </script>
 
 <SheetDataCell
   columnIdentifierKey={column.id}
   cellSelectionId={cellId}
-  {isActive}
+  selection={$selection}
+  let:isActive
 >
   {#if row || recordRunState === 'processing'}
     <CellFabric
       {isActive}
-      isSelected={$selection.cellIds.has(cellId ?? '')}
       columnFabric={column}
       value={row?.record[column.id]}
       showAsSkeleton={recordRunState === 'processing'}
diff --git a/mathesar_ui/src/systems/table-view/row/RowCell.svelte b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
index 90e5931aea..5328dfd9e8 100644
--- a/mathesar_ui/src/systems/table-view/row/RowCell.svelte
+++ b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
@@ -65,8 +65,6 @@
   $: ({ recordSummaries } = recordsData);
   $: ({ column, linkFk } = processedColumn);
   $: columnId = column.id;
-  $: isActive = $selection.activeCellId === cellId;
-  $: isSelected = $selection.cellIds.has(cellId);
   $: modificationStatus = $modificationStatusMap.get(key);
   $: serverErrors =
     modificationStatus?.state === 'failure' ? modificationStatus?.errors : [];
@@ -101,7 +99,8 @@
 <SheetDataCell
   columnIdentifierKey={column.id}
   cellSelectionId={cellId}
-  {isActive}
+  selection={$selection}
+  let:isActive
 >
   <CellBackground when={hasError} color="var(--cell-bg-color-error)" />
   <CellBackground when={!isEditable} color="var(--cell-bg-color-disabled)" />
@@ -117,7 +116,6 @@
   <CellFabric
     columnFabric={processedColumn}
     {isActive}
-    {isSelected}
     {value}
     {isProcessing}
     {canViewLinkedEntities}

From 457513a6b424e29e74c257e6caf6630e0e301512 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 12 Feb 2024 09:53:08 -0500
Subject: [PATCH 32/85] Clean up CellMode component

---
 .../cell/ActiveCellValue.svelte               | 52 ++++++++++++++++
 .../table-inspector/cell/CellMode.svelte      | 61 +++----------------
 2 files changed, 59 insertions(+), 54 deletions(-)
 create mode 100644 mathesar_ui/src/systems/table-view/table-inspector/cell/ActiveCellValue.svelte

diff --git a/mathesar_ui/src/systems/table-view/table-inspector/cell/ActiveCellValue.svelte b/mathesar_ui/src/systems/table-view/table-inspector/cell/ActiveCellValue.svelte
new file mode 100644
index 0000000000..368514e70f
--- /dev/null
+++ b/mathesar_ui/src/systems/table-view/table-inspector/cell/ActiveCellValue.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { _ } from 'svelte-i18n';
+
+  import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
+  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
+  import { parseCellId } from '@mathesar/components/sheet/cellIds';
+
+  const tabularData = getTabularDataStoreFromContext();
+
+  export let activeCellId: string;
+
+  $: ({ recordsData, processedColumns } = $tabularData);
+  $: ({ recordSummaries, selectableRowsMap } = recordsData);
+  $: rows = $selectableRowsMap;
+  $: ({ rowId, columnId } = parseCellId(activeCellId));
+  $: record = rows.get(rowId) ?? {};
+  $: selectedCellValue = record[columnId];
+  $: column = $processedColumns.get(Number(columnId));
+  $: recordSummary =
+    column &&
+    $recordSummaries.get(String(column.id))?.get(String(selectedCellValue));
+</script>
+
+<section class="cell-content">
+  <header>{$_('content')}</header>
+  <div class="content">
+    {#if column}
+      <CellFabric
+        isIndependentOfSheet={true}
+        disabled={true}
+        columnFabric={column}
+        value={selectedCellValue}
+        {recordSummary}
+      />
+    {/if}
+  </div>
+</section>
+
+<style lang="scss">
+  .cell-content {
+    header {
+      font-weight: 500;
+    }
+    .content {
+      white-space: pre-wrap;
+      border: 1px solid var(--slate-300);
+      padding: var(--size-xx-small);
+      border-radius: var(--border-radius-m);
+      margin-top: var(--size-x-small);
+    }
+  }
+</style>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte
index cb7a00bfd4..883a431fc0 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte
@@ -8,73 +8,26 @@
    * changes to both files as necessary.
    */
   import { _ } from 'svelte-i18n';
+
   import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
-  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
+  import ActiveCellValue from './ActiveCellValue.svelte';
 
   const tabularData = getTabularDataStoreFromContext();
 
-  $: ({ selection, recordsData, processedColumns } = $tabularData);
-  $: ({ activeCell } = selection);
-  $: ({ recordSummaries } = recordsData);
-  $: cell = $activeCell;
-  $: selectedCellValue = (() => {
-    if (cell) {
-      const rows = recordsData.getRecordRows();
-      if (rows[cell.rowIndex]) {
-        return rows[cell.rowIndex].record[cell.columnId];
-      }
-    }
-    return undefined;
-  })();
-  $: column = (() => {
-    if (cell) {
-      const processedColumn = $processedColumns.get(Number(cell.columnId));
-      if (processedColumn) {
-        return processedColumn;
-      }
-    }
-    return undefined;
-  })();
-  $: recordSummary =
-    column &&
-    $recordSummaries.get(String(column.id))?.get(String(selectedCellValue));
+  $: ({ selection } = $tabularData);
+  $: ({ activeCellId } = $selection);
 </script>
 
 <div class="section-content">
-  {#if selectedCellValue !== undefined}
-    <section class="cell-content">
-      <header>{$_('content')}</header>
-      <div class="content">
-        {#if column}
-          <CellFabric
-            isIndependentOfSheet={true}
-            disabled={true}
-            columnFabric={column}
-            value={selectedCellValue}
-            {recordSummary}
-          />
-        {/if}
-      </div>
-    </section>
+  {#if activeCellId}
+    <ActiveCellValue {activeCellId} />
   {:else}
     {$_('select_cell_view_properties')}
   {/if}
 </div>
 
-<style lang="scss">
+<style>
   .section-content {
     padding: var(--size-x-small);
-    .cell-content {
-      header {
-        font-weight: 500;
-      }
-      .content {
-        white-space: pre-wrap;
-        border: 1px solid var(--slate-300);
-        padding: var(--size-xx-small);
-        border-radius: var(--border-radius-m);
-        margin-top: var(--size-x-small);
-      }
-    }
   }
 </style>

From 2608b222c954c361defb99b8bb6992e5cda4318d Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Sun, 18 Feb 2024 11:19:49 -0500
Subject: [PATCH 33/85] Remove table-view deps from CellInspector code

---
 .../inspector/cell/CellInspector.svelte       | 69 +++++++++++++++++++
 .../inspector/cell/cellInspectorUtils.ts      | 16 +++++
 .../cell/ActiveCellValue.svelte               | 52 --------------
 .../table-inspector/cell/CellMode.svelte      | 37 +++-------
 .../table-inspector/cell/cellModeUtils.ts     | 35 ++++++++++
 5 files changed, 131 insertions(+), 78 deletions(-)
 create mode 100644 mathesar_ui/src/components/inspector/cell/CellInspector.svelte
 create mode 100644 mathesar_ui/src/components/inspector/cell/cellInspectorUtils.ts
 delete mode 100644 mathesar_ui/src/systems/table-view/table-inspector/cell/ActiveCellValue.svelte
 create mode 100644 mathesar_ui/src/systems/table-view/table-inspector/cell/cellModeUtils.ts

diff --git a/mathesar_ui/src/components/inspector/cell/CellInspector.svelte b/mathesar_ui/src/components/inspector/cell/CellInspector.svelte
new file mode 100644
index 0000000000..f01da7a677
--- /dev/null
+++ b/mathesar_ui/src/components/inspector/cell/CellInspector.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+  /**
+   * @file
+   *
+   * NOTICE: There is some code duplication between this file and
+   * `CellTab.svelte` used for the data explorer. It might be good to resolve
+   * this duplication at some point. In the meantime, be mindful of propagating
+   * changes to both files as necessary.
+   */
+  import { _ } from 'svelte-i18n';
+
+  import type { SelectedCellData } from './cellInspectorUtils';
+  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
+
+  export let selectedCellData: SelectedCellData;
+
+  $: ({ activeCellData } = selectedCellData);
+
+  // TODO:
+  //
+  // - Add two collapsible sections: "Active Cell" and "Selected Cells". This
+  //   will require some refactoring of the collapsible sections code to do this
+  //   cleanly. Ideally we should extract that code out from the table inspector
+  //   and Data Explorer inspector and put it here.
+  //
+  // - Utilize `selectedCellData.selectionData` to display the count of
+  //   selected cells.
+  //
+  // - Add other computed aggregate values for the selected cells, such as
+  //   average, sum, etc.
+</script>
+
+<div class="cell-inspector">
+  {#if activeCellData}
+    {@const { column, value, recordSummary } = activeCellData}
+    <section class="active-cell">
+      <header class="header">{$_('content')}</header>
+      <div class="content">
+        {#if column}
+          <CellFabric
+            isIndependentOfSheet={true}
+            disabled={true}
+            columnFabric={column}
+            {value}
+            {recordSummary}
+          />
+        {/if}
+      </div>
+    </section>
+  {:else}
+    {$_('select_cell_view_properties')}
+  {/if}
+</div>
+
+<style>
+  .cell-inspector {
+    padding: var(--size-x-small);
+  }
+  .header {
+    font-weight: 500;
+  }
+  .content {
+    white-space: pre-wrap;
+    border: 1px solid var(--slate-300);
+    padding: var(--size-xx-small);
+    border-radius: var(--border-radius-m);
+    margin-top: var(--size-x-small);
+  }
+</style>
diff --git a/mathesar_ui/src/components/inspector/cell/cellInspectorUtils.ts b/mathesar_ui/src/components/inspector/cell/cellInspectorUtils.ts
new file mode 100644
index 0000000000..b493f92069
--- /dev/null
+++ b/mathesar_ui/src/components/inspector/cell/cellInspectorUtils.ts
@@ -0,0 +1,16 @@
+import type { CellColumnFabric } from '@mathesar/components/cell-fabric/types';
+
+interface ActiveCellData {
+  column: CellColumnFabric;
+  value: unknown;
+  recordSummary?: string;
+}
+
+interface SelectionData {
+  cellCount: number;
+}
+
+export interface SelectedCellData {
+  activeCellData?: ActiveCellData;
+  selectionData: SelectionData;
+}
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/cell/ActiveCellValue.svelte b/mathesar_ui/src/systems/table-view/table-inspector/cell/ActiveCellValue.svelte
deleted file mode 100644
index 368514e70f..0000000000
--- a/mathesar_ui/src/systems/table-view/table-inspector/cell/ActiveCellValue.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-  import { _ } from 'svelte-i18n';
-
-  import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
-  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
-  import { parseCellId } from '@mathesar/components/sheet/cellIds';
-
-  const tabularData = getTabularDataStoreFromContext();
-
-  export let activeCellId: string;
-
-  $: ({ recordsData, processedColumns } = $tabularData);
-  $: ({ recordSummaries, selectableRowsMap } = recordsData);
-  $: rows = $selectableRowsMap;
-  $: ({ rowId, columnId } = parseCellId(activeCellId));
-  $: record = rows.get(rowId) ?? {};
-  $: selectedCellValue = record[columnId];
-  $: column = $processedColumns.get(Number(columnId));
-  $: recordSummary =
-    column &&
-    $recordSummaries.get(String(column.id))?.get(String(selectedCellValue));
-</script>
-
-<section class="cell-content">
-  <header>{$_('content')}</header>
-  <div class="content">
-    {#if column}
-      <CellFabric
-        isIndependentOfSheet={true}
-        disabled={true}
-        columnFabric={column}
-        value={selectedCellValue}
-        {recordSummary}
-      />
-    {/if}
-  </div>
-</section>
-
-<style lang="scss">
-  .cell-content {
-    header {
-      font-weight: 500;
-    }
-    .content {
-      white-space: pre-wrap;
-      border: 1px solid var(--slate-300);
-      padding: var(--size-xx-small);
-      border-radius: var(--border-radius-m);
-      margin-top: var(--size-x-small);
-    }
-  }
-</style>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte
index 883a431fc0..dcdf6b3073 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte
@@ -1,33 +1,18 @@
 <script lang="ts">
-  /**
-   * @file
-   *
-   * NOTICE: There is some code duplication between this file and
-   * `CellTab.svelte` used for the data explorer. It might be good to resolve
-   * this duplication at some point. In the meantime, be mindful of propagating
-   * changes to both files as necessary.
-   */
-  import { _ } from 'svelte-i18n';
-
+  import CellInspector from '@mathesar/components/inspector/cell/CellInspector.svelte';
   import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
-  import ActiveCellValue from './ActiveCellValue.svelte';
+  import { getSelectedCellData } from './cellModeUtils';
 
   const tabularData = getTabularDataStoreFromContext();
 
-  $: ({ selection } = $tabularData);
-  $: ({ activeCellId } = $selection);
+  $: ({ selection, recordsData, processedColumns } = $tabularData);
+  $: ({ recordSummaries, selectableRowsMap } = recordsData);
+  $: selectedCellData = getSelectedCellData(
+    $selection,
+    $selectableRowsMap,
+    $processedColumns,
+    $recordSummaries,
+  );
 </script>
 
-<div class="section-content">
-  {#if activeCellId}
-    <ActiveCellValue {activeCellId} />
-  {:else}
-    {$_('select_cell_view_properties')}
-  {/if}
-</div>
-
-<style>
-  .section-content {
-    padding: var(--size-x-small);
-  }
-</style>
+<CellInspector {selectedCellData} />
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/cell/cellModeUtils.ts b/mathesar_ui/src/systems/table-view/table-inspector/cell/cellModeUtils.ts
new file mode 100644
index 0000000000..870348eb0e
--- /dev/null
+++ b/mathesar_ui/src/systems/table-view/table-inspector/cell/cellModeUtils.ts
@@ -0,0 +1,35 @@
+import type { SelectedCellData } from '@mathesar/components/inspector/cell/cellInspectorUtils';
+import { parseCellId } from '@mathesar/components/sheet/cellIds';
+import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
+import type {
+  ProcessedColumns,
+  RecordSummariesForSheet,
+} from '@mathesar/stores/table-data';
+
+export function getSelectedCellData(
+  selection: SheetSelection,
+  selectableRowsMap: Map<string, Record<string, unknown>>,
+  processedColumns: ProcessedColumns,
+  recordSummaries: RecordSummariesForSheet,
+): SelectedCellData {
+  const { activeCellId } = selection;
+  const selectionData = {
+    cellCount: selection.cellIds.size,
+  };
+  if (activeCellId === undefined) {
+    return { selectionData };
+  }
+  const { rowId, columnId } = parseCellId(activeCellId);
+  const record = selectableRowsMap.get(rowId) ?? {};
+  const value = record[columnId];
+  const column = processedColumns.get(Number(columnId));
+  const recordSummary = recordSummaries.get(columnId)?.get(String(value));
+  return {
+    activeCellData: column && {
+      column,
+      value,
+      recordSummary,
+    },
+    selectionData,
+  };
+}

From ad9dd5eb78fb0596d5dd9b84413c8f9534a94acb Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Sun, 18 Feb 2024 12:56:15 -0500
Subject: [PATCH 34/85] Pass columnIdentifierKey via prop not import

This is necessary because the table page and Data Explorer use
different values (and types) here.
---
 .../sheet/cells/SheetColumnCreationCell.svelte       |  7 +++++--
 .../components/sheet/cells/SheetOriginCell.svelte    |  7 +++++--
 .../components/sheet/cells/SheetRowHeaderCell.svelte |  6 ++++--
 .../systems/data-explorer/result-pane/Results.svelte |  7 +++++--
 .../src/systems/table-view/header/Header.svelte      | 12 ++++++++----
 mathesar_ui/src/systems/table-view/row/Row.svelte    |  5 ++++-
 6 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/cells/SheetColumnCreationCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetColumnCreationCell.svelte
index 482f2bf5f0..9ca66fbe19 100644
--- a/mathesar_ui/src/components/sheet/cells/SheetColumnCreationCell.svelte
+++ b/mathesar_ui/src/components/sheet/cells/SheetColumnCreationCell.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
-  import { ID_ADD_NEW_COLUMN } from '@mathesar/stores/table-data';
   import { getSheetCellStyle } from './sheetCellUtils';
 
-  const style = getSheetCellStyle(ID_ADD_NEW_COLUMN);
+  type ColumnIdentifierKey = $$Generic;
+
+  export let columnIdentifierKey: ColumnIdentifierKey;
+
+  $: style = getSheetCellStyle(columnIdentifierKey);
 </script>
 
 <div data-sheet-element="new-column-cell" style={$style}>
diff --git a/mathesar_ui/src/components/sheet/cells/SheetOriginCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetOriginCell.svelte
index 8f1096d02d..7af9d9748b 100644
--- a/mathesar_ui/src/components/sheet/cells/SheetOriginCell.svelte
+++ b/mathesar_ui/src/components/sheet/cells/SheetOriginCell.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
-  import { ID_ROW_CONTROL_COLUMN } from '@mathesar/stores/table-data';
   import { getSheetCellStyle } from './sheetCellUtils';
 
-  const style = getSheetCellStyle(ID_ROW_CONTROL_COLUMN);
+  type ColumnIdentifierKey = $$Generic;
+
+  export let columnIdentifierKey: ColumnIdentifierKey;
+
+  $: style = getSheetCellStyle(columnIdentifierKey);
 </script>
 
 <div data-sheet-element="origin-cell" style={$style}>
diff --git a/mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte
index b0df3b2a0a..bdf05fecf1 100644
--- a/mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte
+++ b/mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { ID_ROW_CONTROL_COLUMN } from '@mathesar/stores/table-data';
   import { getSheetCellStyle } from './sheetCellUtils';
 
-  const style = getSheetCellStyle(ID_ROW_CONTROL_COLUMN);
+  type ColumnIdentifierKey = $$Generic;
 
   export let rowSelectionId: string;
+  export let columnIdentifierKey: ColumnIdentifierKey;
+
+  $: style = getSheetCellStyle(columnIdentifierKey);
 </script>
 
 <div
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index bb5c7b3d9a..323a92279c 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -87,7 +87,7 @@
       usesVirtualList
     >
       <SheetHeader>
-        <SheetOriginCell />
+        <SheetOriginCell columnIdentifierKey={ID_ROW_CONTROL_COLUMN} />
         {#each columnList as processedQueryColumn (processedQueryColumn.id)}
           <ResultHeaderCell
             {processedQueryColumn}
@@ -110,7 +110,10 @@
                 {...htmlAttributes}
                 style="--cell-height:{rowHeightPx - 1}px;{styleString}"
               >
-                <SheetRowHeaderCell rowSelectionId={'TODO_3037'}>
+                <SheetRowHeaderCell
+                  rowSelectionId={'TODO_3037'}
+                  columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
+                >
                   <CellBackground color="var(--cell-bg-color-header)" />
                   {$pagination.offset + item.index + 1}
                 </SheetRowHeaderCell>
diff --git a/mathesar_ui/src/systems/table-view/header/Header.svelte b/mathesar_ui/src/systems/table-view/header/Header.svelte
index df3c19d110..ad28034c9f 100644
--- a/mathesar_ui/src/systems/table-view/header/Header.svelte
+++ b/mathesar_ui/src/systems/table-view/header/Header.svelte
@@ -5,13 +5,17 @@
   import { ContextMenu } from '@mathesar/component-library';
   import {
     SheetCellResizer,
+    SheetColumnCreationCell,
     SheetColumnHeaderCell,
     SheetHeader,
-    SheetColumnCreationCell,
   } from '@mathesar/components/sheet';
   import SheetOriginCell from '@mathesar/components/sheet/cells/SheetOriginCell.svelte';
   import type { ProcessedColumn } from '@mathesar/stores/table-data';
-  import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
+  import {
+    ID_ADD_NEW_COLUMN,
+    ID_ROW_CONTROL_COLUMN,
+    getTabularDataStoreFromContext,
+  } from '@mathesar/stores/table-data';
   import { saveColumnOrder } from '@mathesar/stores/tables';
   import { Draggable, Droppable } from './drag-and-drop';
   import ColumnHeaderContextMenu from './header-cell/ColumnHeaderContextMenu.svelte';
@@ -92,7 +96,7 @@
 </script>
 
 <SheetHeader>
-  <SheetOriginCell>
+  <SheetOriginCell columnIdentifierKey={ID_ROW_CONTROL_COLUMN}>
     <Droppable
       on:drop={() => dropColumn()}
       on:dragover={(e) => e.preventDefault()}
@@ -130,7 +134,7 @@
   {/each}
 
   {#if hasNewColumnButton}
-    <SheetColumnCreationCell>
+    <SheetColumnCreationCell columnIdentifierKey={ID_ADD_NEW_COLUMN}>
       <NewColumnCell />
     </SheetColumnCreationCell>
   {/if}
diff --git a/mathesar_ui/src/systems/table-view/row/Row.svelte b/mathesar_ui/src/systems/table-view/row/Row.svelte
index cddf79d67c..dc2f228071 100644
--- a/mathesar_ui/src/systems/table-view/row/Row.svelte
+++ b/mathesar_ui/src/systems/table-view/row/Row.svelte
@@ -70,7 +70,10 @@
     style="--cell-height:{rowHeightPx - 1}px;{styleString}"
     on:mousedown={checkAndCreateEmptyRow}
   >
-    <SheetRowHeaderCell rowSelectionId={'TODO_3037'}>
+    <SheetRowHeaderCell
+      rowSelectionId={'TODO_3037'}
+      columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
+    >
       {#if rowHasRecord(row)}
         <RowControl
           {primaryKeyColumnId}

From 602e972a3bd1aafc25cb98244e80603ee5dc920c Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Sun, 18 Feb 2024 13:16:38 -0500
Subject: [PATCH 35/85] Use common CellInspector component within DE

---
 .../inspector/cell/CellInspector.svelte       |  8 ---
 .../exploration-inspector/CellTab.svelte      | 67 -------------------
 .../ExplorationInspector.svelte               |  2 +-
 .../exploration-inspector/cell/CellTab.svelte | 16 +++++
 .../cell/cellTabUtils.ts                      | 25 +++++++
 5 files changed, 42 insertions(+), 76 deletions(-)
 delete mode 100644 mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte
 create mode 100644 mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/CellTab.svelte
 create mode 100644 mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/cellTabUtils.ts

diff --git a/mathesar_ui/src/components/inspector/cell/CellInspector.svelte b/mathesar_ui/src/components/inspector/cell/CellInspector.svelte
index f01da7a677..0e6c3e8ad0 100644
--- a/mathesar_ui/src/components/inspector/cell/CellInspector.svelte
+++ b/mathesar_ui/src/components/inspector/cell/CellInspector.svelte
@@ -1,12 +1,4 @@
 <script lang="ts">
-  /**
-   * @file
-   *
-   * NOTICE: There is some code duplication between this file and
-   * `CellTab.svelte` used for the data explorer. It might be good to resolve
-   * this duplication at some point. In the meantime, be mindful of propagating
-   * changes to both files as necessary.
-   */
   import { _ } from 'svelte-i18n';
 
   import type { SelectedCellData } from './cellInspectorUtils';
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte
deleted file mode 100644
index d7ae18237a..0000000000
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script lang="ts">
-  /**
-   * @file
-   *
-   * NOTICE: There is some code duplication between this file and
-   * `CellMode.svelte` used for the table view. It might be good to resolve this
-   * duplication at some point. In the meantime, be mindful of propagating
-   * changes to both files as necessary.
-   */
-  import { _ } from 'svelte-i18n';
-  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
-  import { parseCellId } from '@mathesar/components/sheet/cellIds';
-  import QueryRunner, { getRowSelectionId } from '../QueryRunner';
-
-  export let queryHandler: QueryRunner;
-
-  $: ({ selection, processedColumns, rowsData } = queryHandler);
-  $: ({ rows } = $rowsData);
-  $: ({ activeCellId } = $selection);
-  $: cell = activeCellId ? parseCellId(activeCellId) : undefined;
-  $: columnId = cell?.columnId ?? '';
-  // TODO: Usage of `find` is not ideal for perf here. Would be nice to store
-  // rows in a map for faster lookup.
-  $: row = rows.find((r) => getRowSelectionId(r) === cell?.rowId);
-  $: cellValue = row?.record[columnId];
-  $: column = $processedColumns.get(columnId);
-</script>
-
-<div class="section-content" class:has-content={cellValue !== undefined}>
-  {#if cellValue !== undefined}
-    <section class="cell-content">
-      <header>{$_('content')}</header>
-      <div class="content">
-        {#if column}
-          <CellFabric
-            isIndependentOfSheet={true}
-            disabled={true}
-            columnFabric={column}
-            value={cellValue}
-          />
-        {/if}
-      </div>
-    </section>
-  {:else}
-    {$_('select_cell_view_properties')}
-  {/if}
-</div>
-
-<style lang="scss">
-  .section-content {
-    &.has-content {
-      padding: var(--size-x-small);
-    }
-    .cell-content {
-      header {
-        font-weight: 500;
-      }
-      .content {
-        white-space: pre-wrap;
-        border: 1px solid var(--slate-300);
-        padding: var(--size-xx-small);
-        border-radius: var(--border-radius-m);
-        margin-top: var(--size-x-small);
-      }
-    }
-  }
-</style>
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte
index 6ef0dd00e8..9c33275db2 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte
@@ -4,7 +4,7 @@
   import type QueryManager from '../QueryManager';
   import ExplorationTab from './ExplorationTab.svelte';
   import ColumnTab from './column-tab/ColumnTab.svelte';
-  import CellTab from './CellTab.svelte';
+  import CellTab from './cell/CellTab.svelte';
 
   export let queryHandler: QueryRunner | QueryManager;
   export let canEditMetadata: boolean;
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/CellTab.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/CellTab.svelte
new file mode 100644
index 0000000000..8f57fa461b
--- /dev/null
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/CellTab.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import CellInspector from '@mathesar/components/inspector/cell/CellInspector.svelte';
+  import type QueryRunner from '../../QueryRunner';
+  import { getSelectedCellData } from './cellTabUtils';
+
+  export let queryHandler: QueryRunner;
+
+  $: ({ selection, processedColumns, rowsData } = queryHandler);
+  $: selectedCellData = getSelectedCellData(
+    $selection,
+    $rowsData.rows,
+    $processedColumns,
+  );
+</script>
+
+<CellInspector {selectedCellData} />
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/cellTabUtils.ts b/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/cellTabUtils.ts
new file mode 100644
index 0000000000..479a659136
--- /dev/null
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/cellTabUtils.ts
@@ -0,0 +1,25 @@
+import type { SelectedCellData } from '@mathesar/components/inspector/cell/cellInspectorUtils';
+import { parseCellId } from '@mathesar/components/sheet/cellIds';
+import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
+import { getRowSelectionId, type QueryRow } from '../../QueryRunner';
+import type { ProcessedQueryOutputColumnMap } from '../../utils';
+
+export function getSelectedCellData(
+  selection: SheetSelection,
+  rows: QueryRow[],
+  processedColumns: ProcessedQueryOutputColumnMap,
+): SelectedCellData {
+  const { activeCellId } = selection;
+  const selectionData = { cellCount: selection.cellIds.size };
+  const fallback = { selectionData };
+  if (!activeCellId) return fallback;
+  const { rowId, columnId } = parseCellId(activeCellId);
+  // TODO: Usage of `find` is not ideal for perf here. Would be nice to store
+  // rows in a map for faster lookup.
+  const row = rows.find((r) => getRowSelectionId(r) === rowId);
+  if (!row) return fallback;
+  const value = row.record[columnId];
+  const column = processedColumns.get(columnId);
+  const activeCellData = column && { column, value };
+  return { activeCellData, selectionData };
+}

From 63b6dd90a0c274e0f37a402a7252784bfb76db84 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Sun, 18 Feb 2024 13:44:11 -0500
Subject: [PATCH 36/85] Pass selection into data explorer sheet

---
 mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index 323a92279c..a1786e55df 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -85,6 +85,7 @@
       {columnWidths}
       {clipboardHandler}
       usesVirtualList
+      {selection}
     >
       <SheetHeader>
         <SheetOriginCell columnIdentifierKey={ID_ROW_CONTROL_COLUMN} />

From af35b896346e65b6690a332919535316fd1a2d42 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Sun, 18 Feb 2024 13:46:48 -0500
Subject: [PATCH 37/85] Re-enable copying data explorer cells

---
 .../src/systems/data-explorer/result-pane/Results.svelte    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index a1786e55df..450825a910 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -46,10 +46,8 @@
       rowsMap: get(selectableRowsMap),
       columnsMap: get(processedColumns),
       recordSummaries: new ImmutableMap(),
-      // TODO_3037
-      selectedRowIds: new ImmutableSet(),
-      // TODO_3037
-      selectedColumnIds: new ImmutableSet(),
+      selectedRowIds: get(selection).rowIds,
+      selectedColumnIds: get(selection).columnIds,
     }),
     showToastInfo: toast.info,
   });

From 748134dcb3932cf39b88950b51304ef6d77c1658 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Sun, 18 Feb 2024 14:27:45 -0500
Subject: [PATCH 38/85] Reinstate row header selection in table page

---
 mathesar_ui/src/systems/table-view/row/Row.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/mathesar_ui/src/systems/table-view/row/Row.svelte b/mathesar_ui/src/systems/table-view/row/Row.svelte
index dc2f228071..cacc964df4 100644
--- a/mathesar_ui/src/systems/table-view/row/Row.svelte
+++ b/mathesar_ui/src/systems/table-view/row/Row.svelte
@@ -39,6 +39,7 @@
   $: ({ pkColumn } = columnsDataStore);
   $: primaryKeyColumnId = $pkColumn?.id;
   $: rowKey = getRowKey(row, primaryKeyColumnId);
+  $: rowSelectionId = getRowSelectionId(row);
   $: creationStatus = $rowCreationStatus.get(rowKey)?.state;
   $: status = $rowStatus.get(rowKey);
   $: wholeRowState = status?.wholeRowState;
@@ -71,7 +72,7 @@
     on:mousedown={checkAndCreateEmptyRow}
   >
     <SheetRowHeaderCell
-      rowSelectionId={'TODO_3037'}
+      {rowSelectionId}
       columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
     >
       {#if rowHasRecord(row)}

From 7fded1c2107089df475c265d6edb77a4079f0c19 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Sun, 18 Feb 2024 14:40:13 -0500
Subject: [PATCH 39/85] Reinstate row header selection in data explorer

---
 .../result-pane/ResultRowCell.svelte          |  5 ++--
 .../data-explorer/result-pane/Results.svelte  | 23 ++++++++++++++-----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
index 30f947fcee..30f10f7d2d 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
@@ -7,15 +7,16 @@
   import { makeCellId } from '@mathesar/components/sheet/cellIds';
   import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
   import { handleKeyboardEventOnCell } from '@mathesar/components/sheet/sheetKeyboardUtils';
-  import { getRowSelectionId, type QueryRow } from '../QueryRunner';
+  import type { QueryRow } from '../QueryRunner';
   import type { ProcessedQueryOutputColumn } from '../utils';
 
   export let column: ProcessedQueryOutputColumn;
   export let row: QueryRow | undefined;
+  export let rowSelectionId: string;
   export let recordRunState: RequestStatus['state'] | undefined;
   export let selection: Writable<SheetSelection>;
 
-  $: cellId = row && makeCellId(getRowSelectionId(row), column.id);
+  $: cellId = row && makeCellId(rowSelectionId, column.id);
 </script>
 
 <SheetDataCell
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index 450825a910..ca067b624f 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -2,22 +2,23 @@
   import { _ } from 'svelte-i18n';
   import { get } from 'svelte/store';
 
-  import { ImmutableMap, ImmutableSet } from '@mathesar-component-library';
+  import { ImmutableMap } from '@mathesar-component-library';
   import CellBackground from '@mathesar/components/CellBackground.svelte';
   import PaginationGroup from '@mathesar/components/PaginationGroup.svelte';
   import {
     Sheet,
     SheetHeader,
-    SheetRowHeaderCell,
+    SheetOriginCell,
     SheetRow,
+    SheetRowHeaderCell,
     SheetVirtualRows,
-    SheetOriginCell,
   } from '@mathesar/components/sheet';
   import { SheetClipboardHandler } from '@mathesar/components/sheet/SheetClipboardHandler';
   import { rowHeaderWidthPx, rowHeightPx } from '@mathesar/geometry';
   import { toast } from '@mathesar/stores/toast';
   import type QueryManager from '../QueryManager';
   import type QueryRunner from '../QueryRunner';
+  import { getRowSelectionId } from '../QueryRunner';
   import QueryRefreshButton from './QueryRefreshButton.svelte';
   import QueryRunErrors from './QueryRunErrors.svelte';
   import ResultHeaderCell from './ResultHeaderCell.svelte';
@@ -65,6 +66,13 @@
     (recordRunState === 'success' || recordRunState === 'processing') &&
     !rows.length;
   $: sheetItemCount = showDummyGhostRow ? 1 : rows.length;
+
+  function getRow(index: number) {
+    // Type assertion is here to widen type because we don't have
+    // `noUncheckedIndexedAccess` enabled yet. See
+    // https://github.com/mathesar-foundation/mathesar/issues/1966
+    return rows[index] as (typeof rows)[0] | undefined;
+  }
 </script>
 
 <div data-identifier="query-run-result">
@@ -103,14 +111,16 @@
         let:items
       >
         {#each items as item (item.key)}
-          {#if rows[item.index] || showDummyGhostRow}
+          {@const row = getRow(item.index)}
+          {@const rowSelectionId = (row && getRowSelectionId(row)) ?? ''}
+          {#if row || showDummyGhostRow}
             <SheetRow style={item.style} let:htmlAttributes let:styleString>
               <div
                 {...htmlAttributes}
                 style="--cell-height:{rowHeightPx - 1}px;{styleString}"
               >
                 <SheetRowHeaderCell
-                  rowSelectionId={'TODO_3037'}
+                  {rowSelectionId}
                   columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
                 >
                   <CellBackground color="var(--cell-bg-color-header)" />
@@ -119,7 +129,8 @@
 
                 {#each columnList as processedQueryColumn (processedQueryColumn.id)}
                   <ResultRowCell
-                    row={rows[item.index]}
+                    {row}
+                    {rowSelectionId}
                     column={processedQueryColumn}
                     {recordRunState}
                     {selection}

From a2ee62de85c03b7e6ee5e1978ad5fec1ca504618 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 4 Mar 2024 13:07:07 -0500
Subject: [PATCH 40/85] Reinstate deleting records

---
 mathesar_ui/src/stores/table-data/records.ts  | 31 ++++-----
 .../src/systems/data-explorer/QueryRunner.ts  |  6 +-
 .../data-explorer/result-pane/Results.svelte  |  3 +-
 .../src/systems/table-view/TableView.svelte   |  5 +-
 .../table-view/row/RowContextOptions.svelte   |  4 +-
 .../table-inspector/cell/cellModeUtils.ts     | 13 ++--
 .../table-inspector/record/RecordMode.svelte  |  5 +-
 .../table-inspector/record/RowActions.svelte  | 64 ++++++++-----------
 mathesar_ui/src/utils/iterUtils.ts            | 12 ++++
 9 files changed, 79 insertions(+), 64 deletions(-)

diff --git a/mathesar_ui/src/stores/table-data/records.ts b/mathesar_ui/src/stores/table-data/records.ts
index da90576fd9..25dd965a4d 100644
--- a/mathesar_ui/src/stores/table-data/records.ts
+++ b/mathesar_ui/src/stores/table-data/records.ts
@@ -302,8 +302,8 @@ export class RecordsData {
 
   error: Writable<string | undefined>;
 
-  /** Keys are row ids, values are records */
-  selectableRowsMap: Readable<Map<string, Record<string, unknown>>>;
+  /** Keys are row selection ids */
+  selectableRowsMap: Readable<Map<string, RecordRow>>;
 
   private promise: CancellablePromise<ApiRecordsResponse> | undefined;
 
@@ -364,7 +364,7 @@ export class RecordsData {
       [this.savedRecords, this.newRecords],
       ([savedRecords, newRecords]) => {
         const records = [...savedRecords, ...newRecords];
-        return new Map(records.map((r) => [getRowSelectionId(r), r.record]));
+        return new Map(records.map((r) => [getRowSelectionId(r), r]));
       },
     );
 
@@ -457,22 +457,23 @@ export class RecordsData {
     return undefined;
   }
 
-  async deleteSelected(selectedRowIndices: number[]): Promise<void> {
-    const recordRows = this.getRecordRows();
+  async deleteSelected(rowSelectionIds: Iterable<string>): Promise<void> {
+    const ids =
+      typeof rowSelectionIds === 'string' ? [rowSelectionIds] : rowSelectionIds;
     const pkColumn = get(this.columnsDataStore.pkColumn);
     const primaryKeysOfSavedRows: string[] = [];
     const identifiersOfUnsavedRows: string[] = [];
-    selectedRowIndices.forEach((index) => {
-      const row = recordRows[index];
-      if (row) {
-        const rowKey = getRowKey(row, pkColumn?.id);
-        if (pkColumn?.id && isDefinedNonNullable(row.record[pkColumn?.id])) {
-          primaryKeysOfSavedRows.push(rowKey);
-        } else {
-          identifiersOfUnsavedRows.push(rowKey);
-        }
+    const selectableRows = get(this.selectableRowsMap);
+    for (const rowId of ids) {
+      const row = selectableRows.get(rowId);
+      if (!row) continue;
+      const rowKey = getRowKey(row, pkColumn?.id);
+      if (pkColumn?.id && isDefinedNonNullable(row.record[pkColumn?.id])) {
+        primaryKeysOfSavedRows.push(rowKey);
+      } else {
+        identifiersOfUnsavedRows.push(rowKey);
       }
-    });
+    }
     const rowKeys = [...primaryKeysOfSavedRows, ...identifiersOfUnsavedRows];
 
     if (rowKeys.length === 0) {
diff --git a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
index 63a4cb6db0..baee9cb275 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
@@ -64,8 +64,8 @@ export default class QueryRunner {
     new ImmutableMap(),
   );
 
-  /** Keys are row ids, values are records */
-  selectableRowsMap: Readable<Map<string, Record<string, unknown>>>;
+  /** Keys are row selection ids */
+  selectableRowsMap: Readable<Map<string, QueryRow>>;
 
   selection: Writable<SheetSelection>;
 
@@ -108,7 +108,7 @@ export default class QueryRunner {
     void this.run();
     this.selectableRowsMap = derived(
       this.rowsData,
-      ({ rows }) => new Map(rows.map((r) => [getRowSelectionId(r), r.record])),
+      ({ rows }) => new Map(rows.map((r) => [getRowSelectionId(r), r])),
     );
 
     const plane = derived(
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index ca067b624f..6c0ba4d5c2 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { map } from 'iter-tools';
   import { _ } from 'svelte-i18n';
   import { get } from 'svelte/store';
 
@@ -44,7 +45,7 @@
   $: ({ initial_columns } = $query);
   $: clipboardHandler = new SheetClipboardHandler({
     getCopyingContext: () => ({
-      rowsMap: get(selectableRowsMap),
+      rowsMap: new Map(map(([k, r]) => [k, r.record], get(selectableRowsMap))),
       columnsMap: get(processedColumns),
       recordSummaries: new ImmutableMap(),
       selectedRowIds: get(selection).rowIds,
diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte
index 3f3dad227e..55f7822027 100644
--- a/mathesar_ui/src/systems/table-view/TableView.svelte
+++ b/mathesar_ui/src/systems/table-view/TableView.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { map } from 'iter-tools';
   import { get } from 'svelte/store';
 
   import { ImmutableMap } from '@mathesar-component-library';
@@ -49,7 +50,9 @@
     $tabularData);
   $: clipboardHandler = new SheetClipboardHandler({
     getCopyingContext: () => ({
-      rowsMap: get(recordsData.selectableRowsMap),
+      rowsMap: new Map(
+        map(([k, r]) => [k, r.record], get(recordsData.selectableRowsMap)),
+      ),
       columnsMap: stringifyMapKeys(get(processedColumns)),
       recordSummaries: get(recordsData.recordSummaries),
       selectedRowIds: get(selection).rowIds,
diff --git a/mathesar_ui/src/systems/table-view/row/RowContextOptions.svelte b/mathesar_ui/src/systems/table-view/row/RowContextOptions.svelte
index 654dbc82c2..d7035da953 100644
--- a/mathesar_ui/src/systems/table-view/row/RowContextOptions.svelte
+++ b/mathesar_ui/src/systems/table-view/row/RowContextOptions.svelte
@@ -17,6 +17,7 @@
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
   import { currentDatabase } from '@mathesar/stores/databases';
   import { currentSchema } from '@mathesar/stores/schemas';
+  import { getRowSelectionId } from '@mathesar/stores/table-data/records';
 
   export let row: RecordRow;
   export let recordPk: string;
@@ -37,14 +38,13 @@
 
   async function handleDeleteRecords() {
     if (rowHasRecord(row)) {
-      const selectedRowIndices = [Number(row.rowIndex)];
       void confirmDelete({
         identifierType: $_('record'),
         body: [
           $_('deleted_records_cannot_be_recovered', { values: { count: 1 } }),
           $_('are_you_sure_to_proceed'),
         ],
-        onProceed: () => recordsData.deleteSelected(selectedRowIndices),
+        onProceed: () => recordsData.deleteSelected(getRowSelectionId(row)),
         onError: (e) => toast.fromError(e),
         onSuccess: () =>
           toast.success({
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/cell/cellModeUtils.ts b/mathesar_ui/src/systems/table-view/table-inspector/cell/cellModeUtils.ts
index 870348eb0e..95de1213d9 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/cell/cellModeUtils.ts
+++ b/mathesar_ui/src/systems/table-view/table-inspector/cell/cellModeUtils.ts
@@ -1,14 +1,16 @@
+import { defined } from '@mathesar-component-library';
 import type { SelectedCellData } from '@mathesar/components/inspector/cell/cellInspectorUtils';
 import { parseCellId } from '@mathesar/components/sheet/cellIds';
 import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
 import type {
   ProcessedColumns,
+  RecordRow,
   RecordSummariesForSheet,
 } from '@mathesar/stores/table-data';
 
 export function getSelectedCellData(
   selection: SheetSelection,
-  selectableRowsMap: Map<string, Record<string, unknown>>,
+  selectableRowsMap: Map<string, RecordRow>,
   processedColumns: ProcessedColumns,
   recordSummaries: RecordSummariesForSheet,
 ): SelectedCellData {
@@ -20,10 +22,13 @@ export function getSelectedCellData(
     return { selectionData };
   }
   const { rowId, columnId } = parseCellId(activeCellId);
-  const record = selectableRowsMap.get(rowId) ?? {};
-  const value = record[columnId];
+  const row = selectableRowsMap.get(rowId);
+  const value = row?.record[columnId];
   const column = processedColumns.get(Number(columnId));
-  const recordSummary = recordSummaries.get(columnId)?.get(String(value));
+  const recordSummary = defined(
+    value,
+    (v) => recordSummaries.get(columnId)?.get(String(v)),
+  );
   return {
     activeCellData: column && {
       column,
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte
index ad92a8261a..bdc8fa956a 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte
@@ -18,7 +18,8 @@
     { database, schema },
     'canEditTableRecords',
   );
-  $: selectedRowCount = $selection.rowIds.size;
+  $: selectedRowIds = $selection.rowIds;
+  $: selectedRowCount = selectedRowIds.size;
 
   // TODO_3037 Need to calculate selectedRowIndices. This might be a deeper
   // problem. Seems like we might need access to the row index here instead of
@@ -39,7 +40,7 @@
       <CollapsibleHeader slot="header" title={$_('actions')} />
       <div slot="content" class="content-container">
         <RowActions
-          {selectedRowIndices}
+          {selectedRowIds}
           {recordsData}
           columnsDataStore={$tabularData.columnsDataStore}
           {canEditTableRecords}
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte
index 4608a286e3..2a3acc3b46 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
+
   import {
     AnchorButton,
     Button,
     Icon,
+    ImmutableSet,
     iconExternalLink,
   } from '@mathesar-component-library';
   import { iconDeleteMajor, iconRecord } from '@mathesar/icons';
@@ -15,67 +17,57 @@
   } from '@mathesar/stores/table-data';
   import { getPkValueInRecord } from '@mathesar/stores/table-data/records';
   import { toast } from '@mathesar/stores/toast';
+  import { takeFirstAndOnly } from '@mathesar/utils/iterUtils';
 
-  export let selectedRowIndices: number[];
+  export let selectedRowIds: ImmutableSet<string>;
   export let recordsData: RecordsData;
   export let columnsDataStore: ColumnsDataStore;
   export let canEditTableRecords: boolean;
 
+  $: selectedRowCount = selectedRowIds.size;
+  $: ({ columns } = columnsDataStore);
+  $: ({ selectableRowsMap } = recordsData);
+  $: recordPageLink = (() => {
+    const id = takeFirstAndOnly(selectedRowIds);
+    if (!id) return undefined;
+    const row = $selectableRowsMap.get(id);
+    if (!row) return;
+    try {
+      const recordId = getPkValueInRecord(row.record, $columns);
+      return $storeToGetRecordPageUrl({ recordId });
+    } catch (e) {
+      return undefined;
+    }
+  })();
+  $: showDeleteRecordButton = canEditTableRecords;
+  $: showNullStateText = !showDeleteRecordButton && !recordPageLink;
+
   async function handleDeleteRecords() {
     void confirmDelete({
       identifierType: $_('multiple_records', {
-        values: { count: selectedRowIndices.length },
+        values: { count: selectedRowCount },
       }),
       body: [
         $_('deleted_records_cannot_be_recovered', {
-          values: { count: selectedRowIndices.length },
+          values: { count: selectedRowCount },
         }),
         $_('are_you_sure_to_proceed'),
       ],
-      onProceed: () => recordsData.deleteSelected(selectedRowIndices),
+      onProceed: () => recordsData.deleteSelected(selectedRowIds),
       onError: (e) => toast.fromError(e),
       onSuccess: () => {
         toast.success({
           title: $_('count_records_deleted_successfully', {
-            values: { count: selectedRowIndices.length },
+            values: { count: selectedRowCount },
           }),
         });
-        // // TODO_3037 verify that selection behaves okay after deleting records
-        // selection.resetSelection();
       },
     });
   }
-
-  $: ({ columns } = columnsDataStore);
-  $: recordPageLink = (() => {
-    const selectedRowIndex = selectedRowIndices[0];
-    const recordRow = recordsData.getRecordRows()[selectedRowIndex];
-
-    if (!recordRow) {
-      return '';
-    }
-
-    let recordId: string | number;
-    try {
-      recordId = getPkValueInRecord(recordRow.record, $columns);
-    } catch (e) {
-      return '';
-    }
-
-    return (
-      $storeToGetRecordPageUrl({
-        recordId,
-      }) || ''
-    );
-  })();
-
-  $: showOpenRecordLink = selectedRowIndices.length === 1 && recordPageLink;
-  $: showDeleteRecordButton = canEditTableRecords;
-  $: showNullStateText = !showDeleteRecordButton && !showOpenRecordLink;
 </script>
 
 <div class="actions-container">
-  {#if showOpenRecordLink}
+  {#if recordPageLink}
     <AnchorButton href={recordPageLink}>
       <div class="action-item">
         <div>
@@ -90,7 +82,7 @@
     <Button on:click={handleDeleteRecords}>
       <Icon {...iconDeleteMajor} />
       <span>
-        {$_('delete_records', { values: { count: selectedRowIndices.length } })}
+        {$_('delete_records', { values: { count: selectedRowCount } })}
       </span>
     </Button>
   {/if}
diff --git a/mathesar_ui/src/utils/iterUtils.ts b/mathesar_ui/src/utils/iterUtils.ts
index 36553b2d7d..805370b416 100644
--- a/mathesar_ui/src/utils/iterUtils.ts
+++ b/mathesar_ui/src/utils/iterUtils.ts
@@ -32,3 +32,15 @@ export function mapExactlyOne<T, Z, O, M>(
   }
   return p.whenMany;
 }
+
+/**
+ * If the iterable contains exactly one element, returns that element. Otherwise
+ * returns undefined.
+ */
+export function takeFirstAndOnly<T>(iterable: Iterable<T>): T | undefined {
+  return mapExactlyOne(iterable, {
+    whenZero: undefined,
+    whenOne: (v) => v,
+    whenMany: undefined,
+  });
+}

From 53b8317454870c960068257342b74fa5d2ddcdd7 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 4 Mar 2024 14:04:58 -0500
Subject: [PATCH 41/85] Fix checkbox toggle on click

---
 .../data-types/components/CellWrapper.svelte  |  2 ++
 .../components/checkbox/CheckboxCell.svelte   | 30 +++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
index 3f4c9ca1d1..e97c8f8646 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
@@ -106,7 +106,9 @@
   on:click
   on:dblclick
   on:mousedown
+  on:mouseup
   on:mouseenter
+  on:mouseleave
   on:keydown
   on:copy={handleCopy}
   on:focus={handleFocus}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte
index d85f256b1f..a5f14189f0 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte
@@ -17,7 +17,7 @@
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
 
   let cellRef: HTMLElement;
-  let isFirstActivated = false;
+  let shouldToggleOnMouseUp = false;
 
   $: valueComparisonOutcome = compareWholeValues(searchValue, value);
 
@@ -48,24 +48,20 @@
     }
   }
 
-  function checkAndToggle(e: Event) {
-    if (!disabled && isActive && e.target === cellRef && !isFirstActivated) {
+  function handleMouseDown() {
+    shouldToggleOnMouseUp = isActive;
+  }
+
+  function handleMouseLeave() {
+    shouldToggleOnMouseUp = false;
+  }
+
+  function handleMouseUp() {
+    if (!disabled && isActive && shouldToggleOnMouseUp) {
       value = !value;
       dispatchUpdate();
     }
-    isFirstActivated = false;
-    cellRef?.focus();
   }
-
-  // // TODO_3037: test checkbox cell thoroughly. The `isFirstActivated`
-  // // variable is no longer getting set. We need to figure out what to do to
-  // // handle this.
-  // function handleMouseDown() {
-  //   if (!isActive) {
-  //     isFirstActivated = true;
-  //     dispatch('activate');
-  //   }
-  // }
 </script>
 
 <CellWrapper
@@ -75,8 +71,10 @@
   {isIndependentOfSheet}
   {valueComparisonOutcome}
   on:mouseenter
+  on:mouseleave={handleMouseLeave}
   on:keydown={handleWrapperKeyDown}
-  on:click={checkAndToggle}
+  on:mousedown={handleMouseDown}
+  on:mouseup={handleMouseUp}
 >
   {#if value === undefined}
     <Default />

From c1fee48fdd18b6978ff8964e1e238b975c300bac Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 4 Mar 2024 14:20:03 -0500
Subject: [PATCH 42/85] Fix LinkedRecordCell launch on click

---
 .../components/linked-record/LinkedRecordCell.svelte   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte
index 9f71177829..df14de41f1 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte
@@ -79,11 +79,10 @@
     }
   }
 
-  // // TODO_3037: test and see if we need `wasActiveBeforeClick`
-  // function handleMouseDown() {
-  //   wasActiveBeforeClick = isActive;
-  //   dispatch('activate');
-  // }
+  function handleMouseDown() {
+    wasActiveBeforeClick = isActive;
+    dispatch('activate');
+  }
 
   function handleClick() {
     if (wasActiveBeforeClick) {
@@ -98,6 +97,7 @@
   {isIndependentOfSheet}
   on:mouseenter
   on:keydown={handleWrapperKeyDown}
+  on:mousedown={handleMouseDown}
   on:click={handleClick}
   on:dblclick={launchRecordSelector}
   hasPadding={false}

From 7bee2ed008c71941bf37bbf5b591294bf6c38f38 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 4 Mar 2024 14:27:09 -0500
Subject: [PATCH 43/85] Fix SingleSelectCell opening

---
 .../components/select/SingleSelectCell.svelte      | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte
index 2469775798..c9c70ea850 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte
@@ -42,13 +42,12 @@
     isInitiallyActivated = false;
   }
 
-  // // TODO_3037 test an see how to fix `isInitiallyActivated` logic
-  // function handleMouseDown() {
-  //   if (!isActive) {
-  //     isInitiallyActivated = true;
-  //     dispatch('activate');
-  //   }
-  // }
+  function handleMouseDown() {
+    if (!isActive) {
+      isInitiallyActivated = true;
+      dispatch('activate');
+    }
+  }
 
   function handleKeyDown(
     e: KeyboardEvent,
@@ -115,6 +114,7 @@
     {isActive}
     {disabled}
     {isIndependentOfSheet}
+    on:mousedown={handleMouseDown}
     on:mouseenter
     on:click={() => checkAndToggle(api)}
     on:keydown={(e) => handleKeyDown(e, api, isOpen)}

From 16fdd6372014a3e2797f992e176049384b9b97c1 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 4 Mar 2024 15:25:20 -0500
Subject: [PATCH 44/85] Implement shift+click to select range

---
 mathesar_ui/src/components/sheet/Sheet.svelte | 29 ++++++++++++++----
 .../sheet/selection/selectionUtils.ts         |  6 ++--
 mathesar_ui/src/utils/pointerUtils.ts         | 30 +++++++++++++++++++
 3 files changed, 57 insertions(+), 8 deletions(-)
 create mode 100644 mathesar_ui/src/utils/pointerUtils.ts

diff --git a/mathesar_ui/src/components/sheet/Sheet.svelte b/mathesar_ui/src/components/sheet/Sheet.svelte
index 92b876876e..0bf2344765 100644
--- a/mathesar_ui/src/components/sheet/Sheet.svelte
+++ b/mathesar_ui/src/components/sheet/Sheet.svelte
@@ -4,7 +4,12 @@
   import { ImmutableMap } from '@mathesar-component-library/types';
   import type { ClipboardHandler } from '@mathesar/stores/clipboard';
   import { getClipboardHandlerStoreFromContext } from '@mathesar/stores/clipboard';
-  import { beginSelection, findContainingSheetCell } from './selection';
+  import { getModifierKeyCombo } from '@mathesar/utils/pointerUtils';
+  import {
+    beginSelection,
+    findContainingSheetCell,
+    type SheetCellDetails,
+  } from './selection';
   import type SheetSelection from './selection/SheetSelection';
   import {
     calculateColumnStyleMapAndRowWidth,
@@ -122,13 +127,25 @@
 
   function handleMouseDown(e: MouseEvent) {
     if (!selection) return;
-    // TODO_3037:
-    // - handle mouse events with other buttons
-    // - handle Shift/Alt/Ctrl key modifiers
+
     const target = e.target as HTMLElement;
-    const startingCell = findContainingSheetCell(target);
+    const targetCell = findContainingSheetCell(target);
+    if (!targetCell) return;
+
+    const startingCell: SheetCellDetails | undefined = (() => {
+      const modifierKeyCombo = getModifierKeyCombo(e);
+      if (modifierKeyCombo === '') return targetCell;
+      if (modifierKeyCombo === 'Shift') {
+        if (!$selection) return undefined;
+        const { activeCellId } = $selection;
+        if (!activeCellId) return undefined;
+        return { type: 'data-cell', cellId: activeCellId };
+      }
+      return undefined;
+    })();
     if (!startingCell) return;
-    beginSelection({ selection, sheetElement, startingCell });
+
+    beginSelection({ selection, sheetElement, startingCell, targetCell });
   }
 </script>
 
diff --git a/mathesar_ui/src/components/sheet/selection/selectionUtils.ts b/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
index 32558f0884..f79f894597 100644
--- a/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
+++ b/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
@@ -41,10 +41,12 @@ export function beginSelection({
   selection,
   sheetElement,
   startingCell,
+  targetCell,
 }: {
-  startingCell: SheetCellDetails;
   selection: Writable<SheetSelection>;
   sheetElement: HTMLElement;
+  startingCell: SheetCellDetails;
+  targetCell: SheetCellDetails;
 }) {
   let previousTarget: HTMLElement | undefined;
 
@@ -65,7 +67,7 @@ export function beginSelection({
     window.removeEventListener('mouseup', finish);
   }
 
-  drawToCell(startingCell);
+  drawToCell(targetCell);
   sheetElement.addEventListener('mousemove', drawToPoint);
   window.addEventListener('mouseup', finish);
 }
diff --git a/mathesar_ui/src/utils/pointerUtils.ts b/mathesar_ui/src/utils/pointerUtils.ts
new file mode 100644
index 0000000000..82db98c0a7
--- /dev/null
+++ b/mathesar_ui/src/utils/pointerUtils.ts
@@ -0,0 +1,30 @@
+type ModifierKeyCombo =
+  | ''
+  // 1 modifier
+  | 'Alt'
+  | 'Ctrl'
+  | 'Meta'
+  | 'Shift'
+  // 2 modifiers
+  | 'Alt+Ctrl'
+  | 'Alt+Meta'
+  | 'Alt+Shift'
+  | 'Ctrl+Meta'
+  | 'Ctrl+Shift'
+  | 'Meta+Shift'
+  // 3 modifiers
+  | 'Alt+Ctrl+Meta'
+  | 'Alt+Ctrl+Shift'
+  | 'Alt+Meta+Shift'
+  | 'Ctrl+Meta+Shift'
+  // 4 modifiers
+  | 'Alt+Ctrl+Meta+Shift';
+
+export function getModifierKeyCombo(e: MouseEvent) {
+  return [
+    ...(e.altKey ? ['Alt'] : []),
+    ...(e.ctrlKey ? ['Ctrl'] : []),
+    ...(e.metaKey ? ['Meta'] : []),
+    ...(e.shiftKey ? ['Shift'] : []),
+  ].join('+') as ModifierKeyCombo;
+}

From 610c138a3fd7921456749f236e60baee0f087f7d Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 4 Mar 2024 15:37:30 -0500
Subject: [PATCH 45/85] Order a table's processed columns sooner

---
 .../src/stores/table-data/tabularData.ts      | 44 +++++++++----------
 .../src/systems/table-view/TableView.svelte   |  7 +--
 2 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts
index a16572f80f..80700931a6 100644
--- a/mathesar_ui/src/stores/table-data/tabularData.ts
+++ b/mathesar_ui/src/stores/table-data/tabularData.ts
@@ -47,11 +47,8 @@ export class TabularData {
 
   columnsDataStore: ColumnsDataStore;
 
-  /** TODO_3037 eliminate `processedColumns` in favor of `orderedProcessedColumns` */
   processedColumns: ProcessedColumnsStore;
 
-  orderedProcessedColumns: ProcessedColumnsStore;
-
   constraintsDataStore: ConstraintsDataStore;
 
   recordsData: RecordsData;
@@ -96,35 +93,34 @@ export class TabularData {
       this.recordsData,
     );
 
+    this.table = props.table;
+
     this.processedColumns = derived(
       [this.columnsDataStore.columns, this.constraintsDataStore],
       ([columns, constraintsData]) =>
-        new Map(
-          columns.map((column, columnIndex) => [
-            column.id,
-            processColumn({
-              tableId: this.id,
-              column,
-              columnIndex,
-              constraints: constraintsData.constraints,
-              abstractTypeMap: props.abstractTypesMap,
-              hasEnhancedPrimaryKeyCell: props.hasEnhancedPrimaryKeyCell,
-            }),
-          ]),
+        orderProcessedColumns(
+          new Map(
+            columns.map((column, columnIndex) => [
+              column.id,
+              processColumn({
+                tableId: this.id,
+                column,
+                columnIndex,
+                constraints: constraintsData.constraints,
+                abstractTypeMap: props.abstractTypesMap,
+                hasEnhancedPrimaryKeyCell: props.hasEnhancedPrimaryKeyCell,
+              }),
+            ]),
+          ),
+          this.table,
         ),
     );
 
-    this.table = props.table;
-
-    this.orderedProcessedColumns = derived(this.processedColumns, (p) =>
-      orderProcessedColumns(p, this.table),
-    );
-
     const plane = derived(
-      [this.recordsData.selectableRowsMap, this.orderedProcessedColumns],
-      ([selectableRowsMap, orderedProcessedColumns]) => {
+      [this.recordsData.selectableRowsMap, this.processedColumns],
+      ([selectableRowsMap, processedColumns]) => {
         const rowIds = new Series([...selectableRowsMap.keys()]);
-        const columns = [...orderedProcessedColumns.values()];
+        const columns = [...processedColumns.values()];
         const columnIds = new Series(columns.map((c) => String(c.id)));
         return new Plane(rowIds, columnIds);
       },
diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte
index 55f7822027..cb5052b530 100644
--- a/mathesar_ui/src/systems/table-view/TableView.svelte
+++ b/mathesar_ui/src/systems/table-view/TableView.svelte
@@ -22,7 +22,6 @@
   import { toast } from '@mathesar/stores/toast';
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
   import { stringifyMapKeys } from '@mathesar/utils/collectionUtils';
-  import { orderProcessedColumns } from '@mathesar/utils/tables';
   import Body from './Body.svelte';
   import Header from './header/Header.svelte';
   import StatusPane from './StatusPane.svelte';
@@ -72,13 +71,9 @@
    */
   $: supportsTableInspector = context === 'page';
   $: sheetColumns = (() => {
-    const orderedProcessedColumns = orderProcessedColumns(
-      $processedColumns,
-      table,
-    );
     const columns = [
       { column: { id: ID_ROW_CONTROL_COLUMN, name: 'ROW_CONTROL' } },
-      ...orderedProcessedColumns.values(),
+      ...$processedColumns.values(),
     ];
     if (hasNewColumnButton) {
       columns.push({ column: { id: ID_ADD_NEW_COLUMN, name: 'ADD_NEW' } });

From a8be26d442ed8e611ca25a46124b2275338754c0 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 20 Mar 2024 21:37:08 -0400
Subject: [PATCH 46/85] Clean up some dead code

---
 .../table-view/table-inspector/record/RecordMode.svelte      | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte
index bdc8fa956a..5f6f4967ed 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte
@@ -20,11 +20,6 @@
   );
   $: selectedRowIds = $selection.rowIds;
   $: selectedRowCount = selectedRowIds.size;
-
-  // TODO_3037 Need to calculate selectedRowIndices. This might be a deeper
-  // problem. Seems like we might need access to the row index here instead of
-  // the row identifier.
-  $: selectedRowIndices = [];
 </script>
 
 <div class="column-mode-container">

From 6c18123a8513493f8dc8eeecfdcf2d8a553ab5a9 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 20 Mar 2024 21:44:48 -0400
Subject: [PATCH 47/85] Remove TODO code comment

---
 .../column/column-extraction/ExtractColumnsModal.svelte          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte b/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte
index b8dff19c08..7b482c9342 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte
@@ -119,7 +119,6 @@
       // unmounting this component.
       return;
     }
-    // TODO_3037 test to verify that selected columns are updated
     const columnIds = _columns.map((c) => String(c.id));
     selection.update((s) => s.ofRowColumnIntersection(s.rowIds, columnIds));
   }

From 0f8cf9da299d2ab1a9fefa99d08a661c5dfd4222 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 20 Mar 2024 21:50:22 -0400
Subject: [PATCH 48/85] Improve code comments

---
 .../table-inspector/column/ColumnMode.svelte           | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
index 0685493d86..337206c2dd 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
@@ -22,12 +22,18 @@
   $: database = $currentDatabase;
   $: schema = $currentSchema;
   $: ({ processedColumns, selection } = $tabularData);
-  // TODO_3037 verify that table inspector shows selected columns
   $: selectedColumns = (() => {
     const ids = $selection.columnIds;
     const columns = [];
     for (const id of ids) {
-      // TODO_3037 add code comments explaining why this is necessary
+      // This is a  little annoying that we need to parse the id as a string to
+      // a number. The reason is tricky. The cell selection system uses strings
+      // as column ids because they're more general purpose and can work with
+      // the string-based ids that the data explorer uses. However the table
+      // page stores processed columns with numeric ids. We could avoid this
+      // parsing by either making the selection system generic over the id type
+      // (which would be a pain, ergonomically), or by using string-based ids
+      // for columns in the table page too (which would require refactoring).
       const parsedId = parseInt(id, 10);
       const column = $processedColumns.get(parsedId);
       if (column !== undefined) {

From 141d27ce3003138a0cf610a3da467f991f347f0e Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Thu, 4 Apr 2024 13:10:54 -0400
Subject: [PATCH 49/85] Fix positioning of new record message

---
 .../components/sheet/cells/SheetPositionableCell.svelte   | 8 ++++++++
 .../src/systems/table-view/row/NewRecordMessage.svelte    | 3 +++
 2 files changed, 11 insertions(+)

diff --git a/mathesar_ui/src/components/sheet/cells/SheetPositionableCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetPositionableCell.svelte
index 27b7806069..67c902a4e3 100644
--- a/mathesar_ui/src/components/sheet/cells/SheetPositionableCell.svelte
+++ b/mathesar_ui/src/components/sheet/cells/SheetPositionableCell.svelte
@@ -30,3 +30,11 @@
 <div data-sheet-element="positionable-cell" {style}>
   <slot />
 </div>
+
+<style>
+  [data-sheet-element='positionable-cell'] {
+    position: absolute;
+    top: 0;
+    height: 100%;
+  }
+</style>
diff --git a/mathesar_ui/src/systems/table-view/row/NewRecordMessage.svelte b/mathesar_ui/src/systems/table-view/row/NewRecordMessage.svelte
index cb73fbe93f..3d807219c0 100644
--- a/mathesar_ui/src/systems/table-view/row/NewRecordMessage.svelte
+++ b/mathesar_ui/src/systems/table-view/row/NewRecordMessage.svelte
@@ -17,9 +17,12 @@
 <style>
   .new-record-message {
     background: var(--sky-200);
+    position: absolute;
+    inset: 0;
     display: flex;
     align-items: center;
     font-size: var(--text-size-small);
     padding: 0 0.5rem;
+    min-width: max-content;
   }
 </style>

From e4f1ec50f63ee5c8799869069bd195609d919798 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Thu, 4 Apr 2024 13:11:29 -0400
Subject: [PATCH 50/85] Only render row control cell for rows with records

---
 mathesar_ui/src/systems/table-view/row/Row.svelte | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/mathesar_ui/src/systems/table-view/row/Row.svelte b/mathesar_ui/src/systems/table-view/row/Row.svelte
index cacc964df4..f22f7d333e 100644
--- a/mathesar_ui/src/systems/table-view/row/Row.svelte
+++ b/mathesar_ui/src/systems/table-view/row/Row.svelte
@@ -71,11 +71,11 @@
     style="--cell-height:{rowHeightPx - 1}px;{styleString}"
     on:mousedown={checkAndCreateEmptyRow}
   >
-    <SheetRowHeaderCell
-      {rowSelectionId}
-      columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
-    >
-      {#if rowHasRecord(row)}
+    {#if rowHasRecord(row)}
+      <SheetRowHeaderCell
+        {rowSelectionId}
+        columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
+      >
         <RowControl
           {primaryKeyColumnId}
           {row}
@@ -87,8 +87,8 @@
         <ContextMenu>
           <RowContextOptions recordPk={rowKey} {recordsData} {row} />
         </ContextMenu>
-      {/if}
-    </SheetRowHeaderCell>
+      </SheetRowHeaderCell>
+    {/if}
 
     {#if isHelpTextRow(row)}
       <NewRecordMessage columnCount={$processedColumns.size} />

From 218c59bd48a4939468765cee484db725dcec8447 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Thu, 4 Apr 2024 14:44:39 -0400
Subject: [PATCH 51/85] Add new record row when clicking placeholder

---
 .../src/components/sheet/selection/Series.ts    | 11 +++++++++--
 .../sheet/selection/SheetSelection.ts           | 17 +++++++++++++++++
 .../src/stores/table-data/tabularData.ts        |  5 +++++
 .../src/systems/table-view/StatusPane.svelte    |  6 +-----
 .../src/systems/table-view/row/Row.svelte       | 13 ++++++-------
 5 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/selection/Series.ts b/mathesar_ui/src/components/sheet/selection/Series.ts
index b0e897aab3..c7654a8f29 100644
--- a/mathesar_ui/src/components/sheet/selection/Series.ts
+++ b/mathesar_ui/src/components/sheet/selection/Series.ts
@@ -53,12 +53,19 @@ export default class Series<Value> {
     return this.values.slice(startIndex, endIndex + 1);
   }
 
+  /**
+   * Get the value at a specific index.
+   */
+  at(index: number): Value | undefined {
+    return this.values[index];
+  }
+
   get first(): Value | undefined {
-    return this.values[0];
+    return this.at(0);
   }
 
   get last(): Value | undefined {
-    return this.values[this.values.length - 1];
+    return this.at(this.values.length - 1);
   }
 
   has(value: Value): boolean {
diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index f177794704..c116f90b1c 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -232,6 +232,23 @@ export default class SheetSelection {
     return this.withBasis(basisFromDataCells([firstCellId]));
   }
 
+  /**
+   * @returns a new selection formed by selecting the one cell that we think
+   * users are most likely to want selected after choosing to add a new record.
+   *
+   * We use the last row because that's where we add new records. If there is
+   * only one column, then we select the first cell in that column. Otherwise,
+   * we select the cell in the second column (because we assume the first column
+   * is probably a PK column which can't accept data entry.)
+   */
+  ofNewRecordDataEntryCell(): SheetSelection {
+    const rowId = this.plane.rowIds.last;
+    if (!rowId) return this;
+    const columnId = this.plane.columnIds.at(1) ?? this.plane.columnIds.first;
+    if (!columnId) return this;
+    return this.ofOneCell(makeCellId(rowId, columnId));
+  }
+
   /**
    * @returns a new selection with all rows selected between (and including) the
    * provided rows.
diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts
index 80700931a6..b54378caaf 100644
--- a/mathesar_ui/src/stores/table-data/tabularData.ts
+++ b/mathesar_ui/src/stores/table-data/tabularData.ts
@@ -215,6 +215,11 @@ export class TabularData {
     return this.refresh();
   }
 
+  addEmptyRecord() {
+    void this.recordsData.addEmptyRecord();
+    this.selection.update((s) => s.ofNewRecordDataEntryCell());
+  }
+
   destroy(): void {
     this.recordsData.destroy();
     this.constraintsDataStore.destroy();
diff --git a/mathesar_ui/src/systems/table-view/StatusPane.svelte b/mathesar_ui/src/systems/table-view/StatusPane.svelte
index 4edf76dbaf..b4cf4a8b7e 100644
--- a/mathesar_ui/src/systems/table-view/StatusPane.svelte
+++ b/mathesar_ui/src/systems/table-view/StatusPane.svelte
@@ -68,11 +68,7 @@
         disabled={$isLoading}
         size="medium"
         appearance="primary"
-        on:click={() => {
-          void recordsData.addEmptyRecord();
-          // // TODO_3037
-          // selection.selectAndActivateFirstDataEntryCellInLastRow();
-        }}
+        on:click={() => $tabularData.addEmptyRecord()}
       >
         <Icon {...iconAddNew} />
         <span>{$_('new_record')}</span>
diff --git a/mathesar_ui/src/systems/table-view/row/Row.svelte b/mathesar_ui/src/systems/table-view/row/Row.svelte
index f22f7d333e..ed31fd4b8d 100644
--- a/mathesar_ui/src/systems/table-view/row/Row.svelte
+++ b/mathesar_ui/src/systems/table-view/row/Row.svelte
@@ -48,12 +48,11 @@
   /** Including whole row errors and individual cell errors */
   $: hasAnyErrors = !!status?.errorsFromWholeRowAndCells?.length;
 
-  function checkAndCreateEmptyRow() {
-    // // TODO_3037
-    // if (isPlaceholderRow(row)) {
-    //   void recordsData.addEmptyRecord();
-    //   selection.selectAndActivateFirstDataEntryCellInLastRow();
-    // }
+  function handleMouseDown(e: MouseEvent) {
+    if (isPlaceholderRow(row)) {
+      $tabularData.addEmptyRecord();
+      e.stopPropagation(); // Prevents cell selection from starting
+    }
   }
 </script>
 
@@ -69,7 +68,7 @@
     class:is-add-placeholder={isPlaceholderRow(row)}
     {...htmlAttributes}
     style="--cell-height:{rowHeightPx - 1}px;{styleString}"
-    on:mousedown={checkAndCreateEmptyRow}
+    on:mousedown={handleMouseDown}
   >
     {#if rowHasRecord(row)}
       <SheetRowHeaderCell

From 89adabb230383d0de6012521d5fd74eba375455e Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 10 Apr 2024 10:47:44 -0400
Subject: [PATCH 52/85] Implement SheetSelectionStore

---
 .../sheet/selection/SheetSelectionStore.ts    | 66 ++++++++++++++++
 .../src/stores/PreventableEffectsStore.ts     | 76 +++++++++++++++++++
 .../src/stores/table-data/tabularData.ts      | 17 ++---
 .../src/systems/data-explorer/QueryRunner.ts  | 15 +---
 4 files changed, 151 insertions(+), 23 deletions(-)
 create mode 100644 mathesar_ui/src/components/sheet/selection/SheetSelectionStore.ts
 create mode 100644 mathesar_ui/src/stores/PreventableEffectsStore.ts

diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelectionStore.ts b/mathesar_ui/src/components/sheet/selection/SheetSelectionStore.ts
new file mode 100644
index 0000000000..780e4ad684
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelectionStore.ts
@@ -0,0 +1,66 @@
+import type { Readable, Writable } from 'svelte/store';
+
+import { EventHandler } from '@mathesar/component-library';
+import PreventableEffectsStore from '@mathesar/stores/PreventableEffectsStore';
+import type Plane from './Plane';
+import SheetSelection from './SheetSelection';
+
+export default class SheetSelectionStore
+  extends EventHandler<{
+    focus: void;
+  }>
+  implements Writable<SheetSelection>
+{
+  private selection: PreventableEffectsStore<SheetSelection, 'focus'>;
+
+  private cleanupFunctions: (() => void)[] = [];
+
+  constructor(plane: Readable<Plane>) {
+    super();
+    this.selection = new PreventableEffectsStore(new SheetSelection(), {
+      focus: () => this.focus(),
+    });
+    this.cleanupFunctions.push(
+      plane.subscribe((p) => this.selection.update((s) => s.forNewPlane(p))),
+    );
+  }
+
+  private focus(): void {
+    void this.dispatch('focus');
+  }
+
+  subscribe(run: (value: SheetSelection) => void): () => void {
+    return this.selection.subscribe(run);
+  }
+
+  update(getNewValue: (oldValue: SheetSelection) => SheetSelection): void {
+    this.selection.update(getNewValue);
+  }
+
+  /**
+   * Updates the selection while skipping the side effect of focusing the active
+   * cell.
+   */
+  updateWithoutFocus(
+    getNewValue: (oldValue: SheetSelection) => SheetSelection,
+  ): void {
+    this.selection.update(getNewValue, { prevent: ['focus'] });
+  }
+
+  set(value: SheetSelection): void {
+    this.selection.set(value);
+  }
+
+  /**
+   * Sets the selection while skipping the side effect of focusing the active
+   * cell.
+   */
+  setWithoutFocus(value: SheetSelection): void {
+    this.selection.update(() => value, { prevent: ['focus'] });
+  }
+
+  destroy(): void {
+    super.destroy();
+    this.cleanupFunctions.forEach((f) => f());
+  }
+}
diff --git a/mathesar_ui/src/stores/PreventableEffectsStore.ts b/mathesar_ui/src/stores/PreventableEffectsStore.ts
new file mode 100644
index 0000000000..109b33de66
--- /dev/null
+++ b/mathesar_ui/src/stores/PreventableEffectsStore.ts
@@ -0,0 +1,76 @@
+import { writable, type Writable } from 'svelte/store';
+
+interface Effect<Value, EffectNames> {
+  name: EffectNames;
+  run: (v: Value) => void;
+}
+
+/**
+ * This is a writable store that holds effects which run when the value changes.
+ * Unlike other effect mechanisms in Svelte, this store allows you to prevent
+ * certain effects from running when the value changes — and control over that
+ * prevention is delegated to the call site of the update.
+ *
+ * The use case for this store is when you have an imperative effect that you
+ * want to run _almost_ all the time. By default you want the effect to run. But
+ * for some cases (when you do a little extra work), then you can prevent the
+ * effect from running while performing an update.
+ *
+ * ## Example
+ *
+ * ```ts
+ * const store = new PreventableEffectsStore(0, {
+ *  log: (v) => console.log(v),
+ * });
+ *
+ * store.update((v) => v + 1); // logs 1
+ * store.update((v) => v + 1, { prevent: ['log'] }); // does not log
+ * ```
+ */
+export default class PreventableEffectsStore<
+  Value,
+  EffectNames extends string,
+> {
+  private value: Writable<Value>;
+
+  private effects: Effect<Value, EffectNames>[] = [];
+
+  constructor(
+    initialValue: Value,
+    effectMap: Record<EffectNames, (v: Value) => void>,
+  ) {
+    this.value = writable(initialValue);
+    this.effects = Object.entries(effectMap).map(([name, run]) => ({
+      name: name as EffectNames,
+      run: run as (v: Value) => void,
+    }));
+  }
+
+  private runEffects(
+    value: Value,
+    options: { prevent?: EffectNames[] } = {},
+  ): void {
+    this.effects
+      .filter(({ name }) => !options.prevent?.includes(name))
+      .forEach(({ run }) => run(value));
+  }
+
+  subscribe(run: (value: Value) => void): () => void {
+    return this.value.subscribe(run);
+  }
+
+  update(
+    getNewValue: (oldValue: Value) => Value,
+    options: { prevent?: EffectNames[] } = {},
+  ): void {
+    this.value.update((oldValue) => {
+      const newValue = getNewValue(oldValue);
+      this.runEffects(newValue, options);
+      return newValue;
+    });
+  }
+
+  set(value: Value): void {
+    this.value.set(value);
+  }
+}
diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts
index b54378caaf..ebfa7c3156 100644
--- a/mathesar_ui/src/stores/table-data/tabularData.ts
+++ b/mathesar_ui/src/stores/table-data/tabularData.ts
@@ -7,7 +7,7 @@ import type { Column } from '@mathesar/api/types/tables/columns';
 import { States } from '@mathesar/api/utils/requestUtils';
 import Plane from '@mathesar/components/sheet/selection/Plane';
 import Series from '@mathesar/components/sheet/selection/Series';
-import SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
+import SheetSelectionStore from '@mathesar/components/sheet/selection/SheetSelectionStore';
 import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
 import type { ShareConsumer } from '@mathesar/utils/shares';
 import { orderProcessedColumns } from '@mathesar/utils/tables';
@@ -57,12 +57,10 @@ export class TabularData {
 
   isLoading: Readable<boolean>;
 
-  selection: Writable<SheetSelection>;
+  selection: SheetSelectionStore;
 
   table: TableEntry;
 
-  private cleanupFunctions: (() => void)[] = [];
-
   shareConsumer?: ShareConsumer;
 
   constructor(props: TabularDataProps) {
@@ -122,16 +120,11 @@ export class TabularData {
         const rowIds = new Series([...selectableRowsMap.keys()]);
         const columns = [...processedColumns.values()];
         const columnIds = new Series(columns.map((c) => String(c.id)));
+        // TODO_3037 incorporate placeholder row into plane
         return new Plane(rowIds, columnIds);
       },
     );
-
-    // TODO_3037 add id of placeholder row to selection
-    this.selection = writable(new SheetSelection());
-
-    this.cleanupFunctions.push(
-      plane.subscribe((p) => this.selection.update((s) => s.forNewPlane(p))),
-    );
+    this.selection = new SheetSelectionStore(plane);
 
     this.isLoading = derived(
       [
@@ -224,7 +217,7 @@ export class TabularData {
     this.recordsData.destroy();
     this.constraintsDataStore.destroy();
     this.columnsDataStore.destroy();
-    this.cleanupFunctions.forEach((f) => f());
+    this.selection.destroy();
   }
 }
 
diff --git a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
index baee9cb275..51c100a931 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
@@ -12,7 +12,7 @@ import { ApiMultiError } from '@mathesar/api/utils/errors';
 import type { RequestStatus } from '@mathesar/api/utils/requestUtils';
 import Plane from '@mathesar/components/sheet/selection/Plane';
 import Series from '@mathesar/components/sheet/selection/Series';
-import SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
+import SheetSelectionStore from '@mathesar/components/sheet/selection/SheetSelectionStore';
 import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
 import { fetchQueryResults, runQuery } from '@mathesar/stores/queries';
 import Pagination from '@mathesar/utils/Pagination';
@@ -67,7 +67,7 @@ export default class QueryRunner {
   /** Keys are row selection ids */
   selectableRowsMap: Readable<Map<string, QueryRow>>;
 
-  selection: Writable<SheetSelection>;
+  selection: SheetSelectionStore;
 
   inspector: QueryInspector;
 
@@ -81,8 +81,6 @@ export default class QueryRunner {
 
   private shareConsumer?: ShareConsumer;
 
-  private cleanupFunctions: (() => void)[] = [];
-
   constructor({
     query,
     abstractTypeMap,
@@ -120,12 +118,7 @@ export default class QueryRunner {
         return new Plane(rowIds, columnIds);
       },
     );
-
-    this.selection = writable(new SheetSelection());
-
-    this.cleanupFunctions.push(
-      plane.subscribe((p) => this.selection.update((s) => s.forNewPlane(p))),
-    );
+    this.selection = new SheetSelectionStore(plane);
 
     this.inspector = new QueryInspector(this.query);
   }
@@ -279,6 +272,6 @@ export default class QueryRunner {
 
   destroy(): void {
     this.runPromise?.cancel();
-    this.cleanupFunctions.forEach((fn) => fn());
+    this.selection.destroy();
   }
 }

From 26a8c51d32f2afc3ca774e0453d5ca53318f9831 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 10 Apr 2024 10:53:37 -0400
Subject: [PATCH 53/85] Fix some linting errors

---
 .../components/inspector/cell/CellInspector.svelte   |  2 +-
 .../src/components/sheet/cells/SheetDataCell.svelte  | 12 ++++++------
 .../table-inspector/record/RowActions.svelte         |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/mathesar_ui/src/components/inspector/cell/CellInspector.svelte b/mathesar_ui/src/components/inspector/cell/CellInspector.svelte
index 0e6c3e8ad0..7f205da4cd 100644
--- a/mathesar_ui/src/components/inspector/cell/CellInspector.svelte
+++ b/mathesar_ui/src/components/inspector/cell/CellInspector.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
 
-  import type { SelectedCellData } from './cellInspectorUtils';
   import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
+  import type { SelectedCellData } from './cellInspectorUtils';
 
   export let selectedCellData: SelectedCellData;
 
diff --git a/mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte
index 7a3c4a65c9..4b8b8a76ca 100644
--- a/mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte
+++ b/mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import type SheetSelection from '../selection/SheetSelection';
-
   import CellBackground from '@mathesar/components/CellBackground.svelte';
+  import type SheetSelection from '../selection/SheetSelection';
   import { getSheetCellStyle } from './sheetCellUtils';
 
   type SheetColumnIdentifierKey = $$Generic;
@@ -12,17 +11,18 @@
 
   $: style = getSheetCellStyle(columnIdentifierKey);
   $: ({ isActive, isSelected, hasSelectionBackground } = (() => {
-    if (!selection || !cellSelectionId)
+    if (!selection || !cellSelectionId) {
       return {
         isActive: false,
         isSelected: false,
         hasSelectionBackground: false,
       };
-    const isSelected = selection.cellIds.has(cellSelectionId);
+    }
+    const selected = selection.cellIds.has(cellSelectionId);
     return {
       isActive: selection.activeCellId === cellSelectionId,
-      isSelected: selection.cellIds.has(cellSelectionId),
-      hasSelectionBackground: isSelected && selection.cellIds.size > 1,
+      isSelected: selected,
+      hasSelectionBackground: selected && selection.cellIds.size > 1,
     };
   })());
 </script>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte
index 2a3acc3b46..4c66583175 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte
@@ -31,7 +31,7 @@
     const id = takeFirstAndOnly(selectedRowIds);
     if (!id) return undefined;
     const row = $selectableRowsMap.get(id);
-    if (!row) return;
+    if (!row) return undefined;
     try {
       const recordId = getPkValueInRecord(row.record, $columns);
       return $storeToGetRecordPageUrl({ recordId });

From 10f0aa283cadec7b18d1e6d955aee6f0b6740134 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 10 Apr 2024 10:39:23 -0400
Subject: [PATCH 54/85] Handle CellWrapper focus in pure CSS

---
 .../data-types/components/CellWrapper.svelte  | 24 +------------------
 1 file changed, 1 insertion(+), 23 deletions(-)

diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
index e97c8f8646..e51a0011d1 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
@@ -23,8 +23,6 @@
    */
   export let horizontalAlignment: HorizontalAlignment = 'left';
 
-  let isFocused = false;
-
   function shouldAutoFocus(
     _isActive: boolean,
     _mode: 'edit' | 'default',
@@ -60,23 +58,6 @@
   }
   $: void handleStateChange(isActive, mode);
 
-  function handleFocus() {
-    isFocused = true;
-    // Note: you might think we ought to automatically activate the cell at this
-    // point to ensure that we don't have any cells which are focused but not
-    // active. I tried this and it caused bugs with selecting columns and rows
-    // via header cells. I didn't want to spend time tracking them down because
-    // we are planning to refactor the cell selection logic soon anyway. It
-    // doesn't _seem_ like we have any code which focuses the cell without
-    // activating it, but it would be nice to eventually build a better
-    // guarantee into the codebase which prevents cells from being focused
-    // without being activated.
-  }
-
-  function handleBlur() {
-    isFocused = false;
-  }
-
   function handleCopy(e: ClipboardEvent) {
     if (e.target !== element) {
       // When the user copies text _within_ a cell (e.g. from within an input
@@ -93,7 +74,6 @@
 <div
   class="cell-wrapper"
   class:is-active={isActive}
-  class:is-focused={isFocused}
   class:disabled
   class:is-edit-mode={mode === 'edit'}
   class:truncate={multiLineTruncate && !isIndependentOfSheet}
@@ -111,8 +91,6 @@
   on:mouseleave
   on:keydown
   on:copy={handleCopy}
-  on:focus={handleFocus}
-  on:blur={handleBlur}
   tabindex={-1}
   {...$$restProps}
 >
@@ -146,7 +124,7 @@
       box-shadow: 0 0 0 2px var(--slate-300);
       border-radius: 2px;
 
-      &.is-focused {
+      &:focus {
         box-shadow: 0 0 0 2px var(--sky-700);
       }
     }

From bbd1e64362c0ff9d4082f6e770f720a6261c6c6e Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 10 Apr 2024 12:28:14 -0400
Subject: [PATCH 55/85] Improve cell focus behavior

---
 .../data-types/components/CellWrapper.svelte  | 48 +++++++------------
 mathesar_ui/src/components/sheet/Sheet.svelte | 22 +++++++--
 .../ExtractColumnsModal.svelte                |  4 +-
 3 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
index e51a0011d1..fe9f1e0ebe 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { ValueComparisonOutcome } from '@mathesar-component-library/types';
   import CellBackground from '@mathesar/components/CellBackground.svelte';
-  import { tick } from 'svelte';
   import type { HorizontalAlignment } from './typeDefinitions';
 
   export let element: HTMLElement | undefined = undefined;
@@ -23,40 +22,29 @@
    */
   export let horizontalAlignment: HorizontalAlignment = 'left';
 
-  function shouldAutoFocus(
-    _isActive: boolean,
-    _mode: 'edit' | 'default',
-  ): boolean {
-    if (!_isActive) {
-      // Don't auto-focus inactive cells
-      return false;
-    }
-    if (_mode === 'edit') {
-      // Don't auto-focus cells in edit mode
-      return false;
-    }
+  /**
+   * This function exists to ensure that the cell is focused after the user
+   * moves from edit mode to default mode via pressing Enter.
+   */
+  function autoFocus() {
     if (!element) {
       // Can't focus if we haven't mounted an element yet
-      return false;
+      return;
     }
-    if (element.contains(document.activeElement)) {
-      // Don't auto-focus if the cell contains another element that is already
-      // focused (e.g. an input).
-      return false;
+    if (!element.contains(document.activeElement)) {
+      // Only auto-focus when the cell contains another element that is already
+      // focused (e.g. an input). If the user moves from edit mode to default
+      // mode via clicking on some UI element outside sheet, then we _don't_
+      // want to focus the cell. We want to keep the focus on the other UI
+      // element that they clicked.
+      return;
     }
-    return true;
+    element.focus();
   }
 
-  async function handleStateChange(
-    _isActive: boolean,
-    _mode: 'edit' | 'default',
-  ) {
-    await tick();
-    if (shouldAutoFocus(_isActive, _mode)) {
-      element?.focus();
-    }
+  $: if (mode === 'default') {
+    autoFocus();
   }
-  $: void handleStateChange(isActive, mode);
 
   function handleCopy(e: ClipboardEvent) {
     if (e.target !== element) {
@@ -73,7 +61,6 @@
 
 <div
   class="cell-wrapper"
-  class:is-active={isActive}
   class:disabled
   class:is-edit-mode={mode === 'edit'}
   class:truncate={multiLineTruncate && !isIndependentOfSheet}
@@ -82,6 +69,7 @@
   class:exact-match={valueComparisonOutcome === 'exactMatch'}
   class:substring-match={valueComparisonOutcome === 'substringMatch'}
   class:no-match={valueComparisonOutcome === 'noMatch'}
+  data-active-cell={isActive ? '' : undefined}
   bind:this={element}
   on:click
   on:dblclick
@@ -120,7 +108,7 @@
       text-align: right;
     }
 
-    &.is-active {
+    &[data-active-cell] {
       box-shadow: 0 0 0 2px var(--slate-300);
       border-radius: 2px;
 
diff --git a/mathesar_ui/src/components/sheet/Sheet.svelte b/mathesar_ui/src/components/sheet/Sheet.svelte
index 0bf2344765..dde0f20681 100644
--- a/mathesar_ui/src/components/sheet/Sheet.svelte
+++ b/mathesar_ui/src/components/sheet/Sheet.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { writable, type Writable } from 'svelte/store';
+  import { onMount, tick } from 'svelte';
+  import { writable } from 'svelte/store';
 
   import { ImmutableMap } from '@mathesar-component-library/types';
   import type { ClipboardHandler } from '@mathesar/stores/clipboard';
@@ -10,7 +11,7 @@
     findContainingSheetCell,
     type SheetCellDetails,
   } from './selection';
-  import type SheetSelection from './selection/SheetSelection';
+  import type SheetSelectionStore from './selection/SheetSelectionStore';
   import {
     calculateColumnStyleMapAndRowWidth,
     DEFAULT_COLUMN_WIDTH,
@@ -28,7 +29,7 @@
   export let hasBorder = false;
   export let hasPaddingRight = false;
   export let clipboardHandler: ClipboardHandler | undefined = undefined;
-  export let selection: Writable<SheetSelection> | undefined = undefined;
+  export let selection: SheetSelectionStore | undefined = undefined;
 
   export let getColumnIdentifier: (
     c: SheetColumnType,
@@ -145,8 +146,23 @@
     })();
     if (!startingCell) return;
 
+    // If we're selecting cells, then we need to prevent this mouse event from
+    // inadvertently setting clicked elements to become focused. If they get
+    // focused then there can be race conditions which (sometimes) prevent the
+    // active cell within the selection from becoming focused. For example, this
+    // problem can happen when clicking on column header cells to select all
+    // cells in the column.
+    e.preventDefault();
+
     beginSelection({ selection, sheetElement, startingCell, targetCell });
   }
+
+  async function focusActiveCell() {
+    await tick();
+    sheetElement.querySelector<HTMLElement>('[data-active-cell]')?.focus();
+  }
+
+  onMount(() => selection?.on('focus', focusActiveCell));
 </script>
 
 <div
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte b/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte
index 7b482c9342..baa0145a3d 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte
@@ -120,7 +120,9 @@
       return;
     }
     const columnIds = _columns.map((c) => String(c.id));
-    selection.update((s) => s.ofRowColumnIntersection(s.rowIds, columnIds));
+    selection.updateWithoutFocus((s) =>
+      s.ofRowColumnIntersection(s.rowIds, columnIds),
+    );
   }
   $: handleColumnsChange($columns);
 

From 894065a2cf68e1494c92466f189cc817fc7b7c4a Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 10 Apr 2024 12:52:20 -0400
Subject: [PATCH 56/85] Fix mousedown event on cell input element

---
 .../data-types/components/CellWrapper.svelte    | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
index fe9f1e0ebe..29594fe1d4 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
   import type { ValueComparisonOutcome } from '@mathesar-component-library/types';
   import CellBackground from '@mathesar/components/CellBackground.svelte';
   import type { HorizontalAlignment } from './typeDefinitions';
 
+  const dispatch = createEventDispatcher();
+
   export let element: HTMLElement | undefined = undefined;
   export let isActive = false;
   export let disabled = false;
@@ -57,6 +61,17 @@
       e.stopPropagation();
     }
   }
+
+  function handleMouseDown(e: MouseEvent) {
+    if (mode === 'edit') {
+      // In edit mode we want to capture mousedown events and prevent them from
+      // propagating to the sheet where mousedown events are used to select
+      // cells. Without this call, clicking inside a cell input would cause the
+      // cell to exit edit mode.
+      e.stopPropagation();
+    }
+    dispatch('mousedown', e);
+  }
 </script>
 
 <div
@@ -73,7 +88,7 @@
   bind:this={element}
   on:click
   on:dblclick
-  on:mousedown
+  on:mousedown={handleMouseDown}
   on:mouseup
   on:mouseenter
   on:mouseleave

From 8ccb0a6c8cdb26abafd313dd8a8e86c461c8355c Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 10 Apr 2024 13:08:16 -0400
Subject: [PATCH 57/85] Prevent column resize from altering selection

---
 mathesar_ui/src/component-library/common/actions/slider.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/mathesar_ui/src/component-library/common/actions/slider.ts b/mathesar_ui/src/component-library/common/actions/slider.ts
index 695a591db0..8a929d3b01 100644
--- a/mathesar_ui/src/component-library/common/actions/slider.ts
+++ b/mathesar_ui/src/component-library/common/actions/slider.ts
@@ -128,6 +128,8 @@ export default function slider(
   }
 
   function start(e: MouseEvent | TouchEvent) {
+    e.stopPropagation();
+    e.preventDefault();
     opts.onStart();
     startingValue = opts.getStartingValue();
     startingPosition = getPosition(e, opts.axis);

From 2dff73f8ca7f47b7b6f5ce54b729b5d1e362a7b7 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 10 Apr 2024 15:07:59 -0400
Subject: [PATCH 58/85] Improve parsing/serialization of cellId values

---
 mathesar_ui/src/components/sheet/cellIds.ts | 24 ++++++++-------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/cellIds.ts b/mathesar_ui/src/components/sheet/cellIds.ts
index fd6a263637..c39c1077d9 100644
--- a/mathesar_ui/src/components/sheet/cellIds.ts
+++ b/mathesar_ui/src/components/sheet/cellIds.ts
@@ -2,29 +2,23 @@ import { map } from 'iter-tools';
 
 import { cartesianProduct } from '@mathesar/utils/iterUtils';
 
-const CELL_ID_DELIMITER = '-';
-
-/**
- * We can serialize a cell id this way only because we're confident that the
- * rowId will never contain the delimiter. Some columnIds _do_ contain
- * delimiters (e.g. in the Data Explorer), but that's okay because we can still
- * separate the values based on the first delimiter.
- */
 export function makeCellId(rowId: string, columnId: string): string {
-  return `${rowId}${CELL_ID_DELIMITER}${columnId}`;
+  return JSON.stringify([rowId, columnId]);
 }
 
 export function parseCellId(cellId: string): {
   rowId: string;
   columnId: string;
 } {
-  const delimiterIndex = cellId.indexOf(CELL_ID_DELIMITER);
-  if (delimiterIndex === -1) {
-    throw new Error(`Unable to parse cell id without a delimiter: ${cellId}.`);
+  try {
+    const [rowId, columnId] = JSON.parse(cellId) as unknown[];
+    if (typeof rowId !== 'string' || typeof columnId !== 'string') {
+      throw new Error();
+    }
+    return { rowId, columnId };
+  } catch {
+    throw new Error(`Unable to parse cell id: ${cellId}.`);
   }
-  const rowId = cellId.slice(0, delimiterIndex);
-  const columnId = cellId.slice(delimiterIndex + 1);
-  return { rowId, columnId };
 }
 
 export function makeCells(

From 0938b6582bf5a5650b91a5f99987d3bf40c46478 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 10 Apr 2024 16:16:14 -0400
Subject: [PATCH 59/85] Add placeholder row to Plane

---
 mathesar_ui/src/stores/table-data/display.ts  | 31 +++++++++++++++----
 .../src/stores/table-data/tabularData.ts      | 11 ++++---
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/mathesar_ui/src/stores/table-data/display.ts b/mathesar_ui/src/stores/table-data/display.ts
index 0a969e23db..d4f98202ce 100644
--- a/mathesar_ui/src/stores/table-data/display.ts
+++ b/mathesar_ui/src/stores/table-data/display.ts
@@ -1,9 +1,10 @@
-import { writable, derived } from 'svelte/store';
-import type { Writable, Readable } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
+
 import { WritableMap } from '@mathesar-component-library';
-import type { Meta } from './meta';
 import type { ColumnsDataStore } from './columns';
-import { type Row, type RecordsData, filterRecordRows } from './records';
+import type { Meta } from './meta';
+import { filterRecordRows, type RecordsData, type Row } from './records';
 
 // @deprecated
 export const DEFAULT_COLUMN_WIDTH = 160;
@@ -63,6 +64,8 @@ export class Display {
 
   displayableRecords: Readable<Row[]>;
 
+  placeholderRowId: Readable<string>;
+
   constructor(
     meta: Meta,
     columnsDataStore: ColumnsDataStore,
@@ -98,6 +101,9 @@ export class Display {
       ),
     );
 
+    const placeholderRowId = writable('');
+    this.placeholderRowId = placeholderRowId;
+
     const { savedRecordRowsWithGroupHeaders, newRecords } = this.recordsData;
     this.displayableRecords = derived(
       [savedRecordRowsWithGroupHeaders, newRecords],
@@ -120,11 +126,24 @@ export class Display {
             })
             .concat($newRecords);
         }
-        allRecords = allRecords.concat({
+        const placeholderRow = {
           ...this.recordsData.getNewEmptyRecord(),
           rowIndex: savedRecords.length + $newRecords.length,
           isAddPlaceholder: true,
-        });
+        };
+
+        // This is really hacky! We have a side effect (mutating state) within a
+        // derived store, which I don't like. I put this here during a large
+        // refactor of the cell selection code because the Plane needs to know
+        // the id of the placeholder row since cell selection behaves
+        // differently in the placeholder row. I think we have some major
+        // refactoring to do across all the code that handles "rows" and
+        // "records" and things like that. There is a ton of mess there and I
+        // didn't want to lump any of that refactoring into an already-large
+        // refactor.
+        placeholderRowId.set(placeholderRow.identifier);
+
+        allRecords = allRecords.concat(placeholderRow);
         return allRecords;
       },
     );
diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts
index ebfa7c3156..22fa91bd52 100644
--- a/mathesar_ui/src/stores/table-data/tabularData.ts
+++ b/mathesar_ui/src/stores/table-data/tabularData.ts
@@ -115,13 +115,16 @@ export class TabularData {
     );
 
     const plane = derived(
-      [this.recordsData.selectableRowsMap, this.processedColumns],
-      ([selectableRowsMap, processedColumns]) => {
+      [
+        this.recordsData.selectableRowsMap,
+        this.processedColumns,
+        this.display.placeholderRowId,
+      ],
+      ([selectableRowsMap, processedColumns, placeholderRowId]) => {
         const rowIds = new Series([...selectableRowsMap.keys()]);
         const columns = [...processedColumns.values()];
         const columnIds = new Series(columns.map((c) => String(c.id)));
-        // TODO_3037 incorporate placeholder row into plane
-        return new Plane(rowIds, columnIds);
+        return new Plane(rowIds, columnIds, placeholderRowId);
       },
     );
     this.selection = new SheetSelectionStore(plane);

From 2f9cc960854f48ffc2efe60fa2fb0664334b41a8 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 10 Apr 2024 16:31:37 -0400
Subject: [PATCH 60/85] Allow typing into placeholder cells

---
 mathesar_ui/src/systems/table-view/row/Row.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/mathesar_ui/src/systems/table-view/row/Row.svelte b/mathesar_ui/src/systems/table-view/row/Row.svelte
index ed31fd4b8d..4cbbd0820b 100644
--- a/mathesar_ui/src/systems/table-view/row/Row.svelte
+++ b/mathesar_ui/src/systems/table-view/row/Row.svelte
@@ -135,9 +135,9 @@
       cursor: pointer;
 
       :global(
-          [data-sheet-element='data-cell']:not(.is-active)
+          [data-sheet-element='data-cell']
             .cell-fabric
-            .cell-wrapper
+            .cell-wrapper:not(.is-edit-mode)
             > *
         ) {
         visibility: hidden;

From 659c9e210cfd601398d67b434be9024f50481d17 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 10 Apr 2024 21:38:58 -0400
Subject: [PATCH 61/85] Remove some dead code

---
 .../src/systems/table-view/TableView.svelte   | 30 ++++---------------
 1 file changed, 5 insertions(+), 25 deletions(-)

diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte
index cb5052b530..64bc2cdb59 100644
--- a/mathesar_ui/src/systems/table-view/TableView.svelte
+++ b/mathesar_ui/src/systems/table-view/TableView.svelte
@@ -87,42 +87,22 @@
   ]);
   $: showTableInspector = $isTableInspectorVisible && supportsTableInspector;
 
-  function checkAndReinstateFocusOnActiveCell(e: Event) {
-    // // TODO_3037 Figure out what is actually broken without this code.
-    // //Better document why we need id.
-    //
-    // const target = e.target as HTMLElement;
-    // if (!target.closest('[data-sheet-element="data-cell"')) {
-    //   if ($activeCell) {
-    //     selection.focusCell(
-    //       // TODO make sure to use getRowSelectionId instead of rowIndex
-    //       { rowIndex: $activeCell.rowIndex },
-    //       { id: Number($activeCell.columnId) },
-    //     );
-    //   }
-    // }
-  }
-
-  // function selectAndActivateFirstCellOnTableLoad(
-  //   _isLoading: boolean,
-  //   _selection: TabularDataSelection,
-  //   _context: Context,
-  // ) {
+  // // TODO_3037
+  // function selectFirstCellOnTableLoad(_isLoading: boolean, _context: Context) {
   //   // We only activate the first cell on the page, not in the widget. Doing so
   //   // on the widget causes the cell to focus and the page to scroll down to
   //   // bring that element into view.
   //   if (_context !== 'widget' && !_isLoading) {
-  //     _selection.selectAndActivateFirstCellIfExists();
+  //     selection.update((s) => s.ofFirstDataCell());
   //   }
   // }
 
-  // // TODO_3037 Figure out what is actually broken without this code.
-  // $: void selectAndActivateFirstCellOnTableLoad($isLoading, selection, context);
+  // $: void selectFirstCellOnTableLoad($isLoading, context);
 </script>
 
 <div class="table-view">
   <WithTableInspector {context} {showTableInspector}>
-    <div class="sheet-area" on:click={checkAndReinstateFocusOnActiveCell}>
+    <div class="sheet-area">
       {#if $processedColumns.size}
         <Sheet
           {clipboardHandler}

From 2f0843c7498d7ef1941f788d387c9522b891f560 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 10 Apr 2024 21:52:14 -0400
Subject: [PATCH 62/85] Hide column resize handles during cell selection

---
 mathesar_ui/src/components/sheet/Sheet.svelte            | 9 ++++++++-
 mathesar_ui/src/components/sheet/SheetCellResizer.svelte | 8 +++++++-
 .../src/components/sheet/selection/selectionUtils.ts     | 4 ++++
 mathesar_ui/src/components/sheet/utils.ts                | 1 +
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/Sheet.svelte b/mathesar_ui/src/components/sheet/Sheet.svelte
index dde0f20681..d55728ca30 100644
--- a/mathesar_ui/src/components/sheet/Sheet.svelte
+++ b/mathesar_ui/src/components/sheet/Sheet.svelte
@@ -90,6 +90,7 @@
     horizontalScrollOffset: writable(horizontalScrollOffset),
     scrollOffset: writable(scrollOffset),
     paddingRight: writable(paddingRight),
+    selectionInProgress: writable(false),
   };
 
   // Setting these values in stores for reactivity in context
@@ -154,7 +155,13 @@
     // cells in the column.
     e.preventDefault();
 
-    beginSelection({ selection, sheetElement, startingCell, targetCell });
+    beginSelection({
+      selection,
+      sheetElement,
+      startingCell,
+      targetCell,
+      selectionInProgress: stores.selectionInProgress,
+    });
   }
 
   async function focusActiveCell() {
diff --git a/mathesar_ui/src/components/sheet/SheetCellResizer.svelte b/mathesar_ui/src/components/sheet/SheetCellResizer.svelte
index db09ee920f..e4c94fa140 100644
--- a/mathesar_ui/src/components/sheet/SheetCellResizer.svelte
+++ b/mathesar_ui/src/components/sheet/SheetCellResizer.svelte
@@ -4,16 +4,19 @@
 
   type SheetColumnIdentifierKey = $$Generic;
 
-  const { api } = getSheetContext<SheetColumnIdentifierKey>();
+  const { api, stores } = getSheetContext<SheetColumnIdentifierKey>();
 
   export let minColumnWidth = 50;
   export let columnIdentifierKey: SheetColumnIdentifierKey;
 
   let isResizing = false;
+
+  $: ({ selectionInProgress } = stores);
 </script>
 
 <div
   class="column-resizer"
+  class:selection-in-progress={$selectionInProgress}
   class:is-resizing={isResizing}
   use:slider={{
     getStartingValue: () => api.getColumnWidth(columnIdentifierKey),
@@ -53,4 +56,7 @@
   .column-resizer:not(:hover):not(.is-resizing) .indicator {
     display: none;
   }
+  .column-resizer.selection-in-progress {
+    display: none;
+  }
 </style>
diff --git a/mathesar_ui/src/components/sheet/selection/selectionUtils.ts b/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
index f79f894597..b8a54af1ab 100644
--- a/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
+++ b/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
@@ -42,11 +42,13 @@ export function beginSelection({
   sheetElement,
   startingCell,
   targetCell,
+  selectionInProgress,
 }: {
   selection: Writable<SheetSelection>;
   sheetElement: HTMLElement;
   startingCell: SheetCellDetails;
   targetCell: SheetCellDetails;
+  selectionInProgress: Writable<boolean>;
 }) {
   let previousTarget: HTMLElement | undefined;
 
@@ -65,8 +67,10 @@ export function beginSelection({
   function finish() {
     sheetElement.removeEventListener('mousemove', drawToPoint);
     window.removeEventListener('mouseup', finish);
+    selectionInProgress.set(false);
   }
 
+  selectionInProgress.set(true);
   drawToCell(targetCell);
   sheetElement.addEventListener('mousemove', drawToPoint);
   window.addEventListener('mouseup', finish);
diff --git a/mathesar_ui/src/components/sheet/utils.ts b/mathesar_ui/src/components/sheet/utils.ts
index 4f3915d8d0..489f0cf1bc 100644
--- a/mathesar_ui/src/components/sheet/utils.ts
+++ b/mathesar_ui/src/components/sheet/utils.ts
@@ -15,6 +15,7 @@ export interface SheetContextStores<SheetColumnIdentifierKey> {
   horizontalScrollOffset: Readable<number>;
   scrollOffset: Readable<number>;
   paddingRight: Readable<number>;
+  selectionInProgress: Readable<boolean>;
 }
 
 export interface SheetContext<SheetColumnIdentifierKey> {

From d7f91d89a567df92a9d6a391af7a209ebdb9da38 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 10 Apr 2024 22:03:37 -0400
Subject: [PATCH 63/85] Use default cursor everywhere in sheet during selection

---
 mathesar_ui/src/components/sheet/Sheet.svelte | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/Sheet.svelte b/mathesar_ui/src/components/sheet/Sheet.svelte
index d55728ca30..1899d5aaaf 100644
--- a/mathesar_ui/src/components/sheet/Sheet.svelte
+++ b/mathesar_ui/src/components/sheet/Sheet.svelte
@@ -84,13 +84,14 @@
     },
   };
 
+  const selectionInProgress = writable(false);
   const stores = {
     columnStyleMap: writable(columnStyleMap),
     rowWidth: writable(rowWidth),
     horizontalScrollOffset: writable(horizontalScrollOffset),
     scrollOffset: writable(scrollOffset),
     paddingRight: writable(paddingRight),
-    selectionInProgress: writable(false),
+    selectionInProgress,
   };
 
   // Setting these values in stores for reactivity in context
@@ -160,7 +161,7 @@
       sheetElement,
       startingCell,
       targetCell,
-      selectionInProgress: stores.selectionInProgress,
+      selectionInProgress,
     });
   }
 
@@ -177,6 +178,7 @@
   class:has-border={hasBorder}
   class:uses-virtual-list={usesVirtualList}
   class:set-to-row-width={restrictWidthToRowWidth}
+  class:selection-in-progress={$selectionInProgress}
   {style}
   on:mousedown={handleMouseDown}
   on:focusin={enableClipboard}
@@ -229,5 +231,9 @@
     :global([data-sheet-element='data-row']) {
       transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
     }
+
+    &.selection-in-progress :global(*) {
+      cursor: default;
+    }
   }
 </style>

From 1557b559ab39924d1eac99a0c6daa5aa969ef30f Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 10 Apr 2024 22:16:13 -0400
Subject: [PATCH 64/85] Fix drag to re-order columns

---
 .../systems/table-view/header/Header.svelte   | 39 +++++++++----------
 .../header/drag-and-drop/Draggable.svelte     | 13 ++++---
 2 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/mathesar_ui/src/systems/table-view/header/Header.svelte b/mathesar_ui/src/systems/table-view/header/Header.svelte
index ad28034c9f..11a7f77b41 100644
--- a/mathesar_ui/src/systems/table-view/header/Header.svelte
+++ b/mathesar_ui/src/systems/table-view/header/Header.svelte
@@ -108,28 +108,25 @@
   {#each [...$processedColumns] as [columnId, processedColumn] (columnId)}
     {@const isSelected = $selection.columnIds.has(String(columnId))}
     <SheetColumnHeaderCell columnIdentifierKey={columnId}>
-      <!-- TODO_3037: why is this div here? Can we get rid of it? -->
-      <div>
-        <Draggable
-          on:dragstart={() => dragColumn()}
-          column={processedColumn}
-          {selection}
+      <Draggable
+        on:dragstart={() => dragColumn()}
+        column={processedColumn}
+        {selection}
+      >
+        <Droppable
+          on:drop={() => dropColumn(processedColumn)}
+          on:dragover={(e) => e.preventDefault()}
+          {locationOfFirstDraggedColumn}
+          columnLocation={columnOrderString.indexOf(columnId.toString())}
+          {isSelected}
         >
-          <Droppable
-            on:drop={() => dropColumn(processedColumn)}
-            on:dragover={(e) => e.preventDefault()}
-            {locationOfFirstDraggedColumn}
-            columnLocation={columnOrderString.indexOf(columnId.toString())}
-            {isSelected}
-          >
-            <HeaderCell {processedColumn} {isSelected} />
-          </Droppable>
-        </Draggable>
-        <SheetCellResizer columnIdentifierKey={columnId} />
-        <ContextMenu>
-          <ColumnHeaderContextMenu {processedColumn} />
-        </ContextMenu>
-      </div>
+          <HeaderCell {processedColumn} {isSelected} />
+        </Droppable>
+      </Draggable>
+      <SheetCellResizer columnIdentifierKey={columnId} />
+      <ContextMenu>
+        <ColumnHeaderContextMenu {processedColumn} />
+      </ContextMenu>
     </SheetColumnHeaderCell>
   {/each}
 
diff --git a/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte b/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte
index 1347bd2f5a..0c46402caa 100644
--- a/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte
+++ b/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte
@@ -7,17 +7,18 @@
   export let selection: Writable<SheetSelection>;
   export let column: ProcessedColumn;
 
-  // // TODO_3037: Verify that we're not losing functionality here by removing
-  // `selectionInProgress` logic
-  //
-  // $: draggable = !selectionInProgress && selection &&
-  //   selection.isCompleteColumnSelected(column);
-
   $: draggable = $selection.fullySelectedColumnIds.has(String(column.id));
+
+  function handleMouseDown(event: MouseEvent) {
+    if (draggable) {
+      event.stopPropagation();
+    }
+  }
 </script>
 
 <div
   on:dragstart
+  on:mousedown={handleMouseDown}
   class="draggable"
   class:draggable_active={draggable}
   {draggable}

From b6374d1f987e89be27f30f070196e47dc5732138 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 10 Apr 2024 23:28:04 -0400
Subject: [PATCH 65/85] Auto-activate inspector tabs based on selection

---
 mathesar_ui/src/components/sheet/Sheet.svelte |  7 +++
 .../pages/exploration/ExplorationPage.svelte  | 13 +++-
 .../systems/data-explorer/DataExplorer.svelte |  8 ++-
 .../systems/data-explorer/QueryInspector.ts   | 10 ---
 .../src/systems/data-explorer/QueryRunner.ts  | 10 ---
 .../ExplorationInspector.svelte               | 13 +++-
 .../WithExplorationInspector.svelte           |  5 ++
 .../result-pane/ResultHeaderCell.svelte       |  3 -
 .../result-pane/ResultPane.svelte             | 11 +++-
 .../data-explorer/result-pane/Results.svelte  |  5 ++
 .../src/systems/table-view/TableView.svelte   |  6 +-
 .../table-inspector/TableInspector.svelte     | 63 +++++++------------
 .../table-inspector/WithTableInspector.svelte |  6 +-
 mathesar_ui/src/utils/MessageBus.ts           | 39 ++++++++++++
 14 files changed, 124 insertions(+), 75 deletions(-)
 create mode 100644 mathesar_ui/src/utils/MessageBus.ts

diff --git a/mathesar_ui/src/components/sheet/Sheet.svelte b/mathesar_ui/src/components/sheet/Sheet.svelte
index 1899d5aaaf..4a221044d1 100644
--- a/mathesar_ui/src/components/sheet/Sheet.svelte
+++ b/mathesar_ui/src/components/sheet/Sheet.svelte
@@ -5,6 +5,7 @@
   import { ImmutableMap } from '@mathesar-component-library/types';
   import type { ClipboardHandler } from '@mathesar/stores/clipboard';
   import { getClipboardHandlerStoreFromContext } from '@mathesar/stores/clipboard';
+  import type MessageBus from '@mathesar/utils/MessageBus';
   import { getModifierKeyCombo } from '@mathesar/utils/pointerUtils';
   import {
     beginSelection,
@@ -30,6 +31,8 @@
   export let hasPaddingRight = false;
   export let clipboardHandler: ClipboardHandler | undefined = undefined;
   export let selection: SheetSelectionStore | undefined = undefined;
+  export let cellSelectionStarted: MessageBus<SheetCellDetails> | undefined =
+    undefined;
 
   export let getColumnIdentifier: (
     c: SheetColumnType,
@@ -163,6 +166,10 @@
       targetCell,
       selectionInProgress,
     });
+
+    if (startingCell === targetCell) {
+      cellSelectionStarted?.send(targetCell);
+    }
   }
 
   async function focusActiveCell() {
diff --git a/mathesar_ui/src/pages/exploration/ExplorationPage.svelte b/mathesar_ui/src/pages/exploration/ExplorationPage.svelte
index b71566c299..17c6a4ac3e 100644
--- a/mathesar_ui/src/pages/exploration/ExplorationPage.svelte
+++ b/mathesar_ui/src/pages/exploration/ExplorationPage.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
-  import { router } from 'tinro';
   import { _ } from 'svelte-i18n';
+  import { router } from 'tinro';
+
   import type { Database, SchemaEntry } from '@mathesar/AppTypes';
   import type { QueryInstance } from '@mathesar/api/types/queries';
+  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
   import LayoutWithHeader from '@mathesar/layouts/LayoutWithHeader.svelte';
   import { getSchemaPageUrl } from '@mathesar/routes/urls';
   import { currentDbAbstractTypes } from '@mathesar/stores/abstract-types';
@@ -14,10 +16,12 @@
     QueryRunner,
     WithExplorationInspector,
   } from '@mathesar/systems/data-explorer';
+  import MessageBus from '@mathesar/utils/MessageBus';
   import type { ShareConsumer } from '@mathesar/utils/shares';
   import Header from './Header.svelte';
 
   const userProfile = getUserProfileStoreFromContext();
+  const cellSelectionStarted = new MessageBus<SheetCellDetails>();
 
   export let database: Database;
   export let schema: SchemaEntry;
@@ -73,8 +77,13 @@
         queryHandler={queryRunner}
         {canEditMetadata}
         on:delete={gotoSchemaPage}
+        {cellSelectionStarted}
       >
-        <ExplorationResult queryHandler={queryRunner} isExplorationPage />
+        <ExplorationResult
+          queryHandler={queryRunner}
+          isExplorationPage
+          {cellSelectionStarted}
+        />
       </WithExplorationInspector>
     </div>
   {/if}
diff --git a/mathesar_ui/src/systems/data-explorer/DataExplorer.svelte b/mathesar_ui/src/systems/data-explorer/DataExplorer.svelte
index 787fbdf4d6..68ff18ac41 100644
--- a/mathesar_ui/src/systems/data-explorer/DataExplorer.svelte
+++ b/mathesar_ui/src/systems/data-explorer/DataExplorer.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
+
   import { Tutorial } from '@mathesar-component-library';
+  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
   import { queries } from '@mathesar/stores/queries';
+  import MessageBus from '@mathesar/utils/MessageBus';
   import ActionsPane from './ActionsPane.svelte';
   import type QueryManager from './QueryManager';
   import { WithExplorationInspector } from './exploration-inspector';
@@ -9,6 +12,8 @@
   import ResultPane from './result-pane/ResultPane.svelte';
   import type { ColumnWithLink } from './utils';
 
+  const cellSelectionStarted = new MessageBus<SheetCellDetails>();
+
   export let queryManager: QueryManager;
   export let linkCollapsibleOpenState: Record<ColumnWithLink['id'], boolean> =
     {};
@@ -58,9 +63,10 @@
             {isInspectorOpen}
             queryHandler={queryManager}
             {canEditMetadata}
+            {cellSelectionStarted}
             on:delete
           >
-            <ResultPane queryHandler={queryManager} />
+            <ResultPane queryHandler={queryManager} {cellSelectionStarted} />
           </WithExplorationInspector>
         {/if}
       </WithInputSidebar>
diff --git a/mathesar_ui/src/systems/data-explorer/QueryInspector.ts b/mathesar_ui/src/systems/data-explorer/QueryInspector.ts
index b99067a771..58117bc947 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryInspector.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryInspector.ts
@@ -32,14 +32,4 @@ export default class QueryInspector {
     });
     this.activeTab = writable(get(this.tabs)[0]);
   }
-
-  selectColumnTab() {
-    this.activeTab.set(
-      get(this.tabs).find((tab) => tab.id === 'inspect-column'),
-    );
-  }
-
-  selectCellTab() {
-    this.activeTab.set(get(this.tabs).find((tab) => tab.id === 'inspect-cell'));
-  }
 }
diff --git a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
index 51c100a931..27ce294143 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
@@ -3,7 +3,6 @@ import { derived, get, writable } from 'svelte/store';
 
 import { CancellablePromise, ImmutableMap } from '@mathesar-component-library';
 import type {
-  QueryColumnMetaData,
   QueryResultRecord,
   QueryResultsResponse,
   QueryRunResponse,
@@ -257,15 +256,6 @@ export default class QueryRunner {
     await this.run();
   }
 
-  selectColumn(alias: QueryColumnMetaData['alias']): void {
-    const processedColumn = get(this.processedColumns).get(alias);
-    if (!processedColumn) {
-      return;
-    }
-    this.selection.update((s) => s.ofOneColumn(processedColumn.id));
-    this.inspector.selectColumnTab();
-  }
-
   getQueryModel(): QueryModel {
     return get(this.query);
   }
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte
index 9c33275db2..fab09cb79e 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte
@@ -1,16 +1,25 @@
 <script lang="ts">
   import { TabContainer } from '@mathesar-component-library';
-  import type QueryRunner from '../QueryRunner';
+  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
+  import type MessageBus from '@mathesar/utils/MessageBus';
   import type QueryManager from '../QueryManager';
+  import type QueryRunner from '../QueryRunner';
   import ExplorationTab from './ExplorationTab.svelte';
-  import ColumnTab from './column-tab/ColumnTab.svelte';
   import CellTab from './cell/CellTab.svelte';
+  import ColumnTab from './column-tab/ColumnTab.svelte';
 
   export let queryHandler: QueryRunner | QueryManager;
   export let canEditMetadata: boolean;
+  export let cellSelectionStarted: MessageBus<SheetCellDetails> | undefined =
+    undefined;
 
   $: ({ inspector, query } = queryHandler);
   $: ({ tabs, activeTab } = inspector);
+  $: cellSelectionStarted?.listen((targetCell) => {
+    if (targetCell.type === 'column-header-cell') {
+      $activeTab = $tabs.find((tab) => tab.id === 'inspect-column');
+    }
+  });
 </script>
 
 <aside class="exploration-inspector">
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/WithExplorationInspector.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/WithExplorationInspector.svelte
index 3b8bbff579..09ea1c1513 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/WithExplorationInspector.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/WithExplorationInspector.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
   import { WithPanel } from '@mathesar-component-library';
+  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
   import { dataExplorerRightSidebarWidth } from '@mathesar/stores/localStorage';
   import type QueryManager from '@mathesar/systems/data-explorer/QueryManager';
   import type QueryRunner from '@mathesar/systems/data-explorer/QueryRunner';
+  import type MessageBus from '@mathesar/utils/MessageBus';
   import ExplorationInspector from './ExplorationInspector.svelte';
 
   export let isInspectorOpen: boolean;
   export let queryHandler: QueryRunner | QueryManager;
   export let canEditMetadata: boolean;
+  export let cellSelectionStarted: MessageBus<SheetCellDetails> | undefined =
+    undefined;
 </script>
 
 <WithPanel
@@ -21,6 +25,7 @@
     slot="panel"
     {queryHandler}
     {canEditMetadata}
+    {cellSelectionStarted}
     on:delete
   />
 </WithPanel>
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte
index ba9855e119..ba46993a7f 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte
@@ -21,9 +21,6 @@
   <Button
     appearance="plain"
     class="column-name-wrapper {isSelected ? 'selected' : ''}"
-    on:click={() => {
-      queryRunner.selectColumn(processedQueryColumn.column.alias);
-    }}
   >
     <!--
       TODO: Use a separate prop to identify column that isn't fetched yet
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultPane.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultPane.svelte
index e85a461662..8d5731b0c9 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultPane.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultPane.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
-  import type QueryRunner from '../QueryRunner';
+
+  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
+  import type MessageBus from '@mathesar/utils/MessageBus';
   import type QueryManager from '../QueryManager';
-  import Results from './Results.svelte';
+  import type QueryRunner from '../QueryRunner';
   import QueryRefreshButton from './QueryRefreshButton.svelte';
+  import Results from './Results.svelte';
 
   export let queryHandler: QueryRunner | QueryManager;
+  export let cellSelectionStarted: MessageBus<SheetCellDetails> | undefined =
+    undefined;
 </script>
 
 <section data-identifier="result">
@@ -15,7 +20,7 @@
       <QueryRefreshButton queryRunner={queryHandler} />
     </div>
   </header>
-  <Results {queryHandler} />
+  <Results {queryHandler} {cellSelectionStarted} />
 </section>
 
 <style lang="scss">
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index 6c0ba4d5c2..793c266cf1 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -15,8 +15,10 @@
     SheetVirtualRows,
   } from '@mathesar/components/sheet';
   import { SheetClipboardHandler } from '@mathesar/components/sheet/SheetClipboardHandler';
+  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
   import { rowHeaderWidthPx, rowHeightPx } from '@mathesar/geometry';
   import { toast } from '@mathesar/stores/toast';
+  import type MessageBus from '@mathesar/utils/MessageBus';
   import type QueryManager from '../QueryManager';
   import type QueryRunner from '../QueryRunner';
   import { getRowSelectionId } from '../QueryRunner';
@@ -27,6 +29,8 @@
 
   export let queryHandler: QueryRunner | QueryManager;
   export let isExplorationPage = false;
+  export let cellSelectionStarted: MessageBus<SheetCellDetails> | undefined =
+    undefined;
 
   const ID_ROW_CONTROL_COLUMN = 'row-control';
   const columnWidths = new ImmutableMap([
@@ -93,6 +97,7 @@
       {clipboardHandler}
       usesVirtualList
       {selection}
+      {cellSelectionStarted}
     >
       <SheetHeader>
         <SheetOriginCell columnIdentifierKey={ID_ROW_CONTROL_COLUMN} />
diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte
index 64bc2cdb59..2fcd2f8386 100644
--- a/mathesar_ui/src/systems/table-view/TableView.svelte
+++ b/mathesar_ui/src/systems/table-view/TableView.svelte
@@ -6,6 +6,7 @@
   import type { TableEntry } from '@mathesar/api/types/tables';
   import { Sheet } from '@mathesar/components/sheet';
   import { SheetClipboardHandler } from '@mathesar/components/sheet/SheetClipboardHandler';
+  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
   import { rowHeaderWidthPx } from '@mathesar/geometry';
   import { currentDatabase } from '@mathesar/stores/databases';
   import { currentSchema } from '@mathesar/stores/schemas';
@@ -22,6 +23,7 @@
   import { toast } from '@mathesar/stores/toast';
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
   import { stringifyMapKeys } from '@mathesar/utils/collectionUtils';
+  import MessageBus from '@mathesar/utils/MessageBus';
   import Body from './Body.svelte';
   import Header from './header/Header.svelte';
   import StatusPane from './StatusPane.svelte';
@@ -31,6 +33,7 @@
 
   const tabularData = getTabularDataStoreFromContext();
   const userProfile = getUserProfileStoreFromContext();
+  const cellSelectionStarted = new MessageBus<SheetCellDetails>();
 
   $: database = $currentDatabase;
   $: schema = $currentSchema;
@@ -101,7 +104,7 @@
 </script>
 
 <div class="table-view">
-  <WithTableInspector {context} {showTableInspector}>
+  <WithTableInspector {context} {showTableInspector} {cellSelectionStarted}>
     <div class="sheet-area">
       {#if $processedColumns.size}
         <Sheet
@@ -109,6 +112,7 @@
           {columnWidths}
           {selection}
           {usesVirtualList}
+          {cellSelectionStarted}
           bind:horizontalScrollOffset={$horizontalScrollOffset}
           bind:scrollOffset={$scrollOffset}
           columns={sheetColumns}
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte b/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
index 1b6607b220..6e1c9291bd 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
@@ -1,54 +1,33 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
+
   import { TabContainer } from '@mathesar-component-library';
-  import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
-  import type { ComponentType } from 'svelte';
+  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
+  import type MessageBus from '@mathesar/utils/MessageBus';
+  import CellMode from './cell/CellMode.svelte';
   import ColumnMode from './column/ColumnMode.svelte';
   import RecordMode from './record/RecordMode.svelte';
-  import CellMode from './cell/CellMode.svelte';
-
   import TableMode from './table/TableMode.svelte';
 
-  type TabItem = { label: string; id: number; component: ComponentType };
-  const tabs: TabItem[] = [
-    {
-      label: $_('table'),
-      component: TableMode,
-      id: 1,
-    },
-    {
-      label: $_('column'),
-      component: ColumnMode,
-      id: 2,
-    },
-    {
-      label: $_('record'),
-      component: RecordMode,
-      id: 3,
-    },
-    {
-      label: $_('cell'),
-      component: CellMode,
-      id: 4,
-    },
-  ];
+  const tableTab = { label: $_('table'), component: TableMode, id: 1 };
+  const columnTab = { label: $_('column'), component: ColumnMode, id: 2 };
+  const recordTab = { label: $_('record'), component: RecordMode, id: 3 };
+  const cellTab = { label: $_('cell'), component: CellMode, id: 4 };
+  const tabs = [tableTab, columnTab, recordTab, cellTab];
 
-  let activeTab: TabItem;
+  export let cellSelectionStarted: MessageBus<SheetCellDetails> | undefined =
+    undefined;
 
-  // // TODO_3037 restore logic to select tab based on cell selection
-  // const tabularData = getTabularDataStoreFromContext();
-  // $: ({ selection } = $tabularData);
-  // $: ({ selectedCells } = selection);
-  // $: {
-  //   // Explicit dependency
-  //   $selectedCells;
-  //   if (selection.isAnyColumnCompletelySelected()) {
-  //     [, activeTab] = tabs;
-  //   }
-  //   if (selection.isAnyRowCompletelySelected()) {
-  //     [, , activeTab] = tabs;
-  //   }
-  // }
+  let activeTab: (typeof tabs)[number];
+
+  $: cellSelectionStarted?.listen((targetCell) => {
+    if (targetCell.type === 'column-header-cell') {
+      activeTab = columnTab;
+    }
+    if (targetCell.type === 'row-header-cell') {
+      activeTab = recordTab;
+    }
+  });
 </script>
 
 <div class="table-inspector">
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte b/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte
index 3dc854f9ad..b3b3929236 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
   import { WithPanel } from '@mathesar-component-library';
+  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
   import { tableInspectorWidth } from '@mathesar/stores/localStorage';
+  import type MessageBus from '@mathesar/utils/MessageBus';
   import TableInspector from './TableInspector.svelte';
 
   export let context: 'page' | 'widget' | 'shared-consumer-page';
   export let showTableInspector: boolean;
+  export let cellSelectionStarted: MessageBus<SheetCellDetails> | undefined =
+    undefined;
 </script>
 
 {#if context === 'widget'}
@@ -21,6 +25,6 @@
     maxSizePx={600}
   >
     <slot />
-    <TableInspector slot="panel" />
+    <TableInspector slot="panel" {cellSelectionStarted} />
   </WithPanel>
 {/if}
diff --git a/mathesar_ui/src/utils/MessageBus.ts b/mathesar_ui/src/utils/MessageBus.ts
new file mode 100644
index 0000000000..af18bc9547
--- /dev/null
+++ b/mathesar_ui/src/utils/MessageBus.ts
@@ -0,0 +1,39 @@
+type Ignore = () => void;
+type Listen<Message> = (message: Message) => void;
+
+/**
+ * This is a simple message bus that allows sending messages with arbitrary
+ * payloads to listeners in a pub/sub fashion. It is useful for components that
+ * need to communicate with each other to perform actions imperatively.
+ *
+ * The `listen` method is similar to a Svelte store's `subscribe` method, and
+ * the `send` method is similar to a Svelte store's `set` method. We don't use
+ * Svelte stores for this implementation though because we want messages to be
+ * ephemeral. When a new listener is added, it should not receive messages that
+ * were sent before it was added. This is not possible with Svelte stores
+ * because the [store contract][1] stipulates:
+ *
+ * > This subscription function must be immediately and synchronously called
+ * > with the store's current value upon calling `.subscribe`.
+ *
+ * [1]:
+ * https://svelte.dev/docs#component-format-script-4-prefix-stores-with-$-to-access-their-values-store-contract
+ */
+export default class MessageBus<Message = void> {
+  private listeners: Set<Listen<Message>>;
+
+  constructor() {
+    this.listeners = new Set();
+  }
+
+  listen(listener: Listen<Message>): Ignore {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  send(message: Message) {
+    this.listeners.forEach((l) => l(message));
+  }
+}

From a188a5631245c8987b6e4c46732cd77bca6bbd9c Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 17 Apr 2024 20:17:15 -0400
Subject: [PATCH 66/85] Set active cell to first-clicked when drag-selecting

---
 mathesar_ui/src/components/sheet/selection/SheetSelection.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index c116f90b1c..0c9725d1c0 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -262,6 +262,7 @@ export default class SheetSelection {
     return this.withBasis(
       basisFromDataCells(
         this.plane.dataCellsInFlexibleRowRange(rowIdA, rowIdB),
+        makeCellId(rowIdA, this.plane.columnIds.first ?? ''),
       ),
     );
   }
@@ -271,9 +272,10 @@ export default class SheetSelection {
    * provided columnIds, inclusive.
    */
   ofColumnRange(columnIdA: string, columnIdB: string): SheetSelection {
-    const newBasis = this.plane.hasResultRows
+    const newBasis = this.plane.rowIds.first
       ? basisFromDataCells(
           this.plane.dataCellsInColumnRange(columnIdA, columnIdB),
+          makeCellId(this.plane.rowIds.first, columnIdA),
         )
       : basisFromEmptyColumns(this.plane.columnIds.range(columnIdA, columnIdB));
     return this.withBasis(newBasis);
@@ -303,6 +305,7 @@ export default class SheetSelection {
     return this.withBasis(
       basisFromDataCells(
         this.plane.dataCellsInFlexibleCellRange(cellIdA, cellIdB),
+        cellIdA,
       ),
     );
   }

From f003faea812ddc1410187f9d079ff1744de87c5b Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 17 Apr 2024 21:00:38 -0400
Subject: [PATCH 67/85] Don't show text selection cursor on row header cells

---
 mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte
index bdf05fecf1..2409c6a1e3 100644
--- a/mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte
+++ b/mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte
@@ -32,5 +32,6 @@
     font-size: var(--text-size-x-small);
     padding: 0 1.5rem;
     color: var(--color-text-muted);
+    cursor: default;
   }
 </style>

From 832e17550e2eca014ddbf46914afacf04aa0059c Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Wed, 17 Apr 2024 21:02:37 -0400
Subject: [PATCH 68/85] Show row header selection bg in Data Explorer

---
 .../src/systems/data-explorer/result-pane/Results.svelte     | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index 793c266cf1..05c08ec9fe 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -119,6 +119,7 @@
         {#each items as item (item.key)}
           {@const row = getRow(item.index)}
           {@const rowSelectionId = (row && getRowSelectionId(row)) ?? ''}
+          {@const isSelected = $selection.rowIds.has(rowSelectionId)}
           {#if row || showDummyGhostRow}
             <SheetRow style={item.style} let:htmlAttributes let:styleString>
               <div
@@ -130,6 +131,10 @@
                   columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
                 >
                   <CellBackground color="var(--cell-bg-color-header)" />
+                  <CellBackground
+                    when={isSelected}
+                    color="var(--cell-bg-color-row-selected)"
+                  />
                   {$pagination.offset + item.index + 1}
                 </SheetRowHeaderCell>
 

From 95a170286957c9edd17d6bff227f392fd2c06bd3 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Thu, 25 Apr 2024 11:03:57 -0400
Subject: [PATCH 69/85] Fix reactivity regression with data explorer rows

---
 .../systems/data-explorer/result-pane/Results.svelte   | 10 ++--------
 mathesar_ui/src/utils/typeUtils.ts                     |  8 ++++++++
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index 05c08ec9fe..e78d0dea73 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -19,6 +19,7 @@
   import { rowHeaderWidthPx, rowHeightPx } from '@mathesar/geometry';
   import { toast } from '@mathesar/stores/toast';
   import type MessageBus from '@mathesar/utils/MessageBus';
+  import { arrayIndex } from '@mathesar/utils/typeUtils';
   import type QueryManager from '../QueryManager';
   import type QueryRunner from '../QueryRunner';
   import { getRowSelectionId } from '../QueryRunner';
@@ -71,13 +72,6 @@
     (recordRunState === 'success' || recordRunState === 'processing') &&
     !rows.length;
   $: sheetItemCount = showDummyGhostRow ? 1 : rows.length;
-
-  function getRow(index: number) {
-    // Type assertion is here to widen type because we don't have
-    // `noUncheckedIndexedAccess` enabled yet. See
-    // https://github.com/mathesar-foundation/mathesar/issues/1966
-    return rows[index] as (typeof rows)[0] | undefined;
-  }
 </script>
 
 <div data-identifier="query-run-result">
@@ -117,7 +111,7 @@
         let:items
       >
         {#each items as item (item.key)}
-          {@const row = getRow(item.index)}
+          {@const row = arrayIndex(rows, item.index)}
           {@const rowSelectionId = (row && getRowSelectionId(row)) ?? ''}
           {@const isSelected = $selection.rowIds.has(rowSelectionId)}
           {#if row || showDummyGhostRow}
diff --git a/mathesar_ui/src/utils/typeUtils.ts b/mathesar_ui/src/utils/typeUtils.ts
index ecfa1c7053..23fb9fbe92 100644
--- a/mathesar_ui/src/utils/typeUtils.ts
+++ b/mathesar_ui/src/utils/typeUtils.ts
@@ -22,3 +22,11 @@ type ChangeWritableToReadable<T> = T extends Writable<infer U>
 export type MakeWritablePropertiesReadable<T> = {
   [P in keyof T]: ChangeWritableToReadable<T[P]>;
 };
+
+/**
+ * This function exists because we don't have `noUncheckedIndexedAccess` enabled
+ * yet. See https://github.com/mathesar-foundation/mathesar/issues/1966
+ */
+export function arrayIndex<T>(a: T[], i: number): T | undefined {
+  return a[i];
+}

From 97c51bc660031b393a7b78c2d678b31cac66fbb1 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Thu, 25 Apr 2024 12:25:22 -0400
Subject: [PATCH 70/85] Don't set dummy rows in records store during fetch

---
 mathesar_ui/src/stores/table-data/records.ts | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/mathesar_ui/src/stores/table-data/records.ts b/mathesar_ui/src/stores/table-data/records.ts
index 25dd965a4d..d842dc7811 100644
--- a/mathesar_ui/src/stores/table-data/records.ts
+++ b/mathesar_ui/src/stores/table-data/records.ts
@@ -381,26 +381,6 @@ export class RecordsData {
     this.promise?.cancel();
     const { offset } = get(this.meta.pagination);
 
-    this.savedRecordRowsWithGroupHeaders.update((existingData) => {
-      let data = [...existingData];
-      data.length = Math.min(data.length, get(this.meta.pagination).size);
-
-      let index = -1;
-      data = data.map((entry) => {
-        index += 1;
-        if (!retainExistingRows || !entry) {
-          return {
-            state: 'loading',
-            identifier: generateRowIdentifier('dummy', offset, index),
-            rowIndex: index,
-            record: {},
-          };
-        }
-        return entry;
-      });
-
-      return data;
-    });
     this.error.set(undefined);
     if (!retainExistingRows) {
       this.state.set(States.Loading);

From e0b543909260f09f839963b425df5760ac036695 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Thu, 25 Apr 2024 12:40:32 -0400
Subject: [PATCH 71/85] Improve code readability of fetch options

---
 mathesar_ui/src/stores/table-data/records.ts | 28 +++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/mathesar_ui/src/stores/table-data/records.ts b/mathesar_ui/src/stores/table-data/records.ts
index d842dc7811..e0a37291dc 100644
--- a/mathesar_ui/src/stores/table-data/records.ts
+++ b/mathesar_ui/src/stores/table-data/records.ts
@@ -376,15 +376,31 @@ export class RecordsData {
   }
 
   async fetch(
-    retainExistingRows = false,
+    opts: {
+      clearNewRecords?: boolean;
+      setLoadingState?: boolean;
+      clearMetaStatuses?: boolean;
+    } = {},
   ): Promise<TableRecordsData | undefined> {
+    const options = {
+      clearNewRecords: true,
+      setLoadingState: true,
+      clearMetaStatuses: true,
+      ...opts,
+    };
+
     this.promise?.cancel();
     const { offset } = get(this.meta.pagination);
 
     this.error.set(undefined);
-    if (!retainExistingRows) {
-      this.state.set(States.Loading);
+
+    if (options.clearNewRecords) {
       this.newRecords.set([]);
+    }
+    if (options.setLoadingState) {
+      this.state.set(States.Loading);
+    }
+    if (options.clearMetaStatuses) {
       this.meta.clearAllStatusesAndErrors();
     }
 
@@ -513,7 +529,11 @@ export class RecordsData {
     // flag instead of just re-fetching the records immediately after deleting
     // the saved records.
     if (shouldReFetchRecords) {
-      await this.fetch(true);
+      await this.fetch({
+        clearMetaStatuses: false,
+        clearNewRecords: false,
+        setLoadingState: false,
+      });
     }
 
     this.meta.rowCreationStatus.delete(Array.from(savedRecordKeys, String));

From 0fe1df98307f7659766ad1364ba38d68cee0075f Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Fri, 26 Apr 2024 12:46:55 -0400
Subject: [PATCH 72/85] Loosen coupling between cause/effect of selection and
 inspector-tab-switch

---
 mathesar_ui/src/components/sheet/Sheet.svelte |  6 +-
 .../pages/exploration/ExplorationPage.svelte  | 10 +--
 .../systems/data-explorer/DataExplorer.svelte |  7 +--
 .../systems/data-explorer/QueryInspector.ts   | 61 ++++++++++++++-----
 .../ExplorationInspector.svelte               | 25 ++++----
 .../WithExplorationInspector.svelte           |  5 --
 .../input-sidebar/InputSidebar.svelte         |  8 ++-
 .../result-pane/ResultPane.svelte             |  6 +-
 .../data-explorer/result-pane/Results.svelte  | 11 ++--
 .../src/systems/table-view/TableView.svelte   | 27 +++++---
 .../table-inspector/TableInspector.svelte     | 50 +++++++--------
 .../table-inspector/WithTableInspector.svelte | 10 +--
 mathesar_ui/src/utils/MessageBus.ts           | 39 ------------
 13 files changed, 120 insertions(+), 145 deletions(-)
 delete mode 100644 mathesar_ui/src/utils/MessageBus.ts

diff --git a/mathesar_ui/src/components/sheet/Sheet.svelte b/mathesar_ui/src/components/sheet/Sheet.svelte
index 4a221044d1..3248dbbb4a 100644
--- a/mathesar_ui/src/components/sheet/Sheet.svelte
+++ b/mathesar_ui/src/components/sheet/Sheet.svelte
@@ -5,7 +5,6 @@
   import { ImmutableMap } from '@mathesar-component-library/types';
   import type { ClipboardHandler } from '@mathesar/stores/clipboard';
   import { getClipboardHandlerStoreFromContext } from '@mathesar/stores/clipboard';
-  import type MessageBus from '@mathesar/utils/MessageBus';
   import { getModifierKeyCombo } from '@mathesar/utils/pointerUtils';
   import {
     beginSelection,
@@ -31,8 +30,7 @@
   export let hasPaddingRight = false;
   export let clipboardHandler: ClipboardHandler | undefined = undefined;
   export let selection: SheetSelectionStore | undefined = undefined;
-  export let cellSelectionStarted: MessageBus<SheetCellDetails> | undefined =
-    undefined;
+  export let onCellSelectionStart: (c: SheetCellDetails) => void = () => {};
 
   export let getColumnIdentifier: (
     c: SheetColumnType,
@@ -168,7 +166,7 @@
     });
 
     if (startingCell === targetCell) {
-      cellSelectionStarted?.send(targetCell);
+      onCellSelectionStart(targetCell);
     }
   }
 
diff --git a/mathesar_ui/src/pages/exploration/ExplorationPage.svelte b/mathesar_ui/src/pages/exploration/ExplorationPage.svelte
index 17c6a4ac3e..fd9e32a930 100644
--- a/mathesar_ui/src/pages/exploration/ExplorationPage.svelte
+++ b/mathesar_ui/src/pages/exploration/ExplorationPage.svelte
@@ -4,7 +4,6 @@
 
   import type { Database, SchemaEntry } from '@mathesar/AppTypes';
   import type { QueryInstance } from '@mathesar/api/types/queries';
-  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
   import LayoutWithHeader from '@mathesar/layouts/LayoutWithHeader.svelte';
   import { getSchemaPageUrl } from '@mathesar/routes/urls';
   import { currentDbAbstractTypes } from '@mathesar/stores/abstract-types';
@@ -16,12 +15,10 @@
     QueryRunner,
     WithExplorationInspector,
   } from '@mathesar/systems/data-explorer';
-  import MessageBus from '@mathesar/utils/MessageBus';
   import type { ShareConsumer } from '@mathesar/utils/shares';
   import Header from './Header.svelte';
 
   const userProfile = getUserProfileStoreFromContext();
-  const cellSelectionStarted = new MessageBus<SheetCellDetails>();
 
   export let database: Database;
   export let schema: SchemaEntry;
@@ -77,13 +74,8 @@
         queryHandler={queryRunner}
         {canEditMetadata}
         on:delete={gotoSchemaPage}
-        {cellSelectionStarted}
       >
-        <ExplorationResult
-          queryHandler={queryRunner}
-          isExplorationPage
-          {cellSelectionStarted}
-        />
+        <ExplorationResult queryHandler={queryRunner} isExplorationPage />
       </WithExplorationInspector>
     </div>
   {/if}
diff --git a/mathesar_ui/src/systems/data-explorer/DataExplorer.svelte b/mathesar_ui/src/systems/data-explorer/DataExplorer.svelte
index 68ff18ac41..96710d4d00 100644
--- a/mathesar_ui/src/systems/data-explorer/DataExplorer.svelte
+++ b/mathesar_ui/src/systems/data-explorer/DataExplorer.svelte
@@ -2,9 +2,7 @@
   import { _ } from 'svelte-i18n';
 
   import { Tutorial } from '@mathesar-component-library';
-  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
   import { queries } from '@mathesar/stores/queries';
-  import MessageBus from '@mathesar/utils/MessageBus';
   import ActionsPane from './ActionsPane.svelte';
   import type QueryManager from './QueryManager';
   import { WithExplorationInspector } from './exploration-inspector';
@@ -12,8 +10,6 @@
   import ResultPane from './result-pane/ResultPane.svelte';
   import type { ColumnWithLink } from './utils';
 
-  const cellSelectionStarted = new MessageBus<SheetCellDetails>();
-
   export let queryManager: QueryManager;
   export let linkCollapsibleOpenState: Record<ColumnWithLink['id'], boolean> =
     {};
@@ -63,10 +59,9 @@
             {isInspectorOpen}
             queryHandler={queryManager}
             {canEditMetadata}
-            {cellSelectionStarted}
             on:delete
           >
-            <ResultPane queryHandler={queryManager} {cellSelectionStarted} />
+            <ResultPane queryHandler={queryManager} />
           </WithExplorationInspector>
         {/if}
       </WithInputSidebar>
diff --git a/mathesar_ui/src/systems/data-explorer/QueryInspector.ts b/mathesar_ui/src/systems/data-explorer/QueryInspector.ts
index 58117bc947..ad2ad00372 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryInspector.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryInspector.ts
@@ -6,30 +6,59 @@ import {
   type Writable,
 } from 'svelte/store';
 import { _ } from 'svelte-i18n';
+
 import type { Tab } from '@mathesar-component-library/types';
 import type QueryModel from './QueryModel';
 
+/**
+ * This is a function instead of a const because we can't run `get(_)` at the
+ * top level since i18n isn't initialized at build time.
+ */
+function makeTabMap() {
+  return {
+    exploration: { label: get(_)('exploration') },
+    column: { label: get(_)('column') },
+    cell: { label: get(_)('cell') },
+  };
+}
+
+export interface ExplorationInspectorTab extends Tab {
+  id: keyof ReturnType<typeof makeTabMap>;
+  label: string;
+}
+
+function makeTab([id, { label }]: [string, { label: string }]) {
+  return { id, label } as ExplorationInspectorTab;
+}
+
+function makeTabList(tabMap: Record<string, { label: string }>) {
+  return Object.entries(tabMap).map(makeTab);
+}
+
 export default class QueryInspector {
-  tabs: Readable<Tab[]>;
+  tabs: Readable<ExplorationInspectorTab[]>;
 
-  activeTab: Writable<Tab | undefined>;
+  activeTabId: Writable<ExplorationInspectorTab['id']>;
+
+  activeTab: Readable<ExplorationInspectorTab>;
 
   constructor(query: Writable<QueryModel>) {
-    const generalTabs: Tab[] = [
-      { id: 'inspect-column', label: get(_)('column') },
-      { id: 'inspect-cell', label: get(_)('cell') },
-    ];
-    const tabsWhenQueryIsSaved: Tab[] = [
-      { id: 'inspect-exploration', label: get(_)('exploration') },
-      ...generalTabs,
-    ];
-
-    this.tabs = derived(query, ($query) => {
-      if ($query.isSaved()) {
-        return tabsWhenQueryIsSaved;
+    const tabMap = makeTabMap();
+    this.tabs = derived(query, (q) => {
+      if (q.isSaved()) {
+        return makeTabList(tabMap);
       }
-      return generalTabs;
+      const { exploration, ...unsavedExplorationTabMap } = tabMap;
+      return makeTabList(unsavedExplorationTabMap);
     });
-    this.activeTab = writable(get(this.tabs)[0]);
+    const firstTabId = get(this.tabs)[0].id;
+    this.activeTabId = writable(firstTabId);
+    this.activeTab = derived(this.activeTabId, (id) =>
+      makeTab([id, tabMap[id]]),
+    );
+  }
+
+  activate(tabId: ExplorationInspectorTab['id']) {
+    this.activeTabId.set(tabId);
   }
 }
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte
index fab09cb79e..c60ec2fef6 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { TabContainer } from '@mathesar-component-library';
-  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
-  import type MessageBus from '@mathesar/utils/MessageBus';
+  import type { Tab } from '@mathesar/component-library/types';
+  import type { ExplorationInspectorTab } from '../QueryInspector';
   import type QueryManager from '../QueryManager';
   import type QueryRunner from '../QueryRunner';
   import ExplorationTab from './ExplorationTab.svelte';
@@ -10,27 +10,26 @@
 
   export let queryHandler: QueryRunner | QueryManager;
   export let canEditMetadata: boolean;
-  export let cellSelectionStarted: MessageBus<SheetCellDetails> | undefined =
-    undefined;
 
   $: ({ inspector, query } = queryHandler);
   $: ({ tabs, activeTab } = inspector);
-  $: cellSelectionStarted?.listen((targetCell) => {
-    if (targetCell.type === 'column-header-cell') {
-      $activeTab = $tabs.find((tab) => tab.id === 'inspect-column');
-    }
-  });
+
+  function handleTabSelected(e: CustomEvent<{ tab: Tab }>) {
+    const tab = e.detail.tab as ExplorationInspectorTab;
+    inspector.activate(tab.id);
+  }
 </script>
 
 <aside class="exploration-inspector">
   <TabContainer
     tabStyle="compact"
     tabs={$tabs}
-    bind:activeTab={$activeTab}
+    activeTab={$activeTab}
     fillTabWidth
     fillContainerHeight
+    on:tabSelected={handleTabSelected}
   >
-    {#if $activeTab?.id === 'inspect-exploration'}
+    {#if $activeTab.id === 'exploration'}
       <ExplorationTab
         {queryHandler}
         name={$query.name}
@@ -38,9 +37,9 @@
         {canEditMetadata}
         on:delete
       />
-    {:else if $activeTab?.id === 'inspect-column'}
+    {:else if $activeTab.id === 'column'}
       <ColumnTab {queryHandler} />
-    {:else if $activeTab?.id === 'inspect-cell'}
+    {:else if $activeTab.id === 'cell'}
       <CellTab {queryHandler} />
     {/if}
   </TabContainer>
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/WithExplorationInspector.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/WithExplorationInspector.svelte
index 09ea1c1513..3b8bbff579 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/WithExplorationInspector.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/WithExplorationInspector.svelte
@@ -1,17 +1,13 @@
 <script lang="ts">
   import { WithPanel } from '@mathesar-component-library';
-  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
   import { dataExplorerRightSidebarWidth } from '@mathesar/stores/localStorage';
   import type QueryManager from '@mathesar/systems/data-explorer/QueryManager';
   import type QueryRunner from '@mathesar/systems/data-explorer/QueryRunner';
-  import type MessageBus from '@mathesar/utils/MessageBus';
   import ExplorationInspector from './ExplorationInspector.svelte';
 
   export let isInspectorOpen: boolean;
   export let queryHandler: QueryRunner | QueryManager;
   export let canEditMetadata: boolean;
-  export let cellSelectionStarted: MessageBus<SheetCellDetails> | undefined =
-    undefined;
 </script>
 
 <WithPanel
@@ -25,7 +21,6 @@
     slot="panel"
     {queryHandler}
     {canEditMetadata}
-    {cellSelectionStarted}
     on:delete
   />
 </WithPanel>
diff --git a/mathesar_ui/src/systems/data-explorer/input-sidebar/InputSidebar.svelte b/mathesar_ui/src/systems/data-explorer/input-sidebar/InputSidebar.svelte
index 87ba93f72a..6108d472ea 100644
--- a/mathesar_ui/src/systems/data-explorer/input-sidebar/InputSidebar.svelte
+++ b/mathesar_ui/src/systems/data-explorer/input-sidebar/InputSidebar.svelte
@@ -14,7 +14,13 @@
   export let linkCollapsibleOpenState: Record<ColumnWithLink['id'], boolean> =
     {};
 
-  $: ({ query, state, confirmationNeededForMultipleResults } = queryManager);
+  $: ({
+    query,
+    state,
+    confirmationNeededForMultipleResults,
+    inspector,
+    selection,
+  } = queryManager);
   $: ({ inputColumnsFetchState } = $state);
 
   const tabs = [
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultPane.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultPane.svelte
index 8d5731b0c9..938d209eb6 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultPane.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultPane.svelte
@@ -1,16 +1,12 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
 
-  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
-  import type MessageBus from '@mathesar/utils/MessageBus';
   import type QueryManager from '../QueryManager';
   import type QueryRunner from '../QueryRunner';
   import QueryRefreshButton from './QueryRefreshButton.svelte';
   import Results from './Results.svelte';
 
   export let queryHandler: QueryRunner | QueryManager;
-  export let cellSelectionStarted: MessageBus<SheetCellDetails> | undefined =
-    undefined;
 </script>
 
 <section data-identifier="result">
@@ -20,7 +16,7 @@
       <QueryRefreshButton queryRunner={queryHandler} />
     </div>
   </header>
-  <Results {queryHandler} {cellSelectionStarted} />
+  <Results {queryHandler} />
 </section>
 
 <style lang="scss">
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index e78d0dea73..a026092b3b 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -15,10 +15,8 @@
     SheetVirtualRows,
   } from '@mathesar/components/sheet';
   import { SheetClipboardHandler } from '@mathesar/components/sheet/SheetClipboardHandler';
-  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
   import { rowHeaderWidthPx, rowHeightPx } from '@mathesar/geometry';
   import { toast } from '@mathesar/stores/toast';
-  import type MessageBus from '@mathesar/utils/MessageBus';
   import { arrayIndex } from '@mathesar/utils/typeUtils';
   import type QueryManager from '../QueryManager';
   import type QueryRunner from '../QueryRunner';
@@ -30,8 +28,6 @@
 
   export let queryHandler: QueryRunner | QueryManager;
   export let isExplorationPage = false;
-  export let cellSelectionStarted: MessageBus<SheetCellDetails> | undefined =
-    undefined;
 
   const ID_ROW_CONTROL_COLUMN = 'row-control';
   const columnWidths = new ImmutableMap([
@@ -46,6 +42,7 @@
     pagination,
     runState,
     selection,
+    inspector,
   } = queryHandler);
   $: ({ initial_columns } = $query);
   $: clipboardHandler = new SheetClipboardHandler({
@@ -91,7 +88,11 @@
       {clipboardHandler}
       usesVirtualList
       {selection}
-      {cellSelectionStarted}
+      onCellSelectionStart={(cell) => {
+        if (cell.type === 'column-header-cell') {
+          inspector.activate('column');
+        }
+      }}
     >
       <SheetHeader>
         <SheetOriginCell columnIdentifierKey={ID_ROW_CONTROL_COLUMN} />
diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte
index 2fcd2f8386..827ab5b52c 100644
--- a/mathesar_ui/src/systems/table-view/TableView.svelte
+++ b/mathesar_ui/src/systems/table-view/TableView.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import { map } from 'iter-tools';
+  import type { ComponentProps } from 'svelte';
   import { get } from 'svelte/store';
 
   import { ImmutableMap } from '@mathesar-component-library';
   import type { TableEntry } from '@mathesar/api/types/tables';
   import { Sheet } from '@mathesar/components/sheet';
   import { SheetClipboardHandler } from '@mathesar/components/sheet/SheetClipboardHandler';
-  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
   import { rowHeaderWidthPx } from '@mathesar/geometry';
   import { currentDatabase } from '@mathesar/stores/databases';
   import { currentSchema } from '@mathesar/stores/schemas';
@@ -14,16 +14,10 @@
     getTabularDataStoreFromContext,
     ID_ADD_NEW_COLUMN,
     ID_ROW_CONTROL_COLUMN,
-    type ProcessedColumn,
   } from '@mathesar/stores/table-data';
-  import {
-    getRowSelectionId,
-    type RecordRow,
-  } from '@mathesar/stores/table-data/records';
   import { toast } from '@mathesar/stores/toast';
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
   import { stringifyMapKeys } from '@mathesar/utils/collectionUtils';
-  import MessageBus from '@mathesar/utils/MessageBus';
   import Body from './Body.svelte';
   import Header from './header/Header.svelte';
   import StatusPane from './StatusPane.svelte';
@@ -33,7 +27,6 @@
 
   const tabularData = getTabularDataStoreFromContext();
   const userProfile = getUserProfileStoreFromContext();
-  const cellSelectionStarted = new MessageBus<SheetCellDetails>();
 
   $: database = $currentDatabase;
   $: schema = $currentSchema;
@@ -45,6 +38,9 @@
   export let context: Context = 'page';
   export let table: Pick<TableEntry, 'id' | 'settings' | 'schema'>;
 
+  let tableInspectorTab: ComponentProps<WithTableInspector>['activeTabId'] =
+    'table';
+
   $: usesVirtualList = context !== 'widget';
   $: allowsDdlOperations = context !== 'widget' && canExecuteDDL;
   $: sheetHasBorder = context === 'widget';
@@ -104,7 +100,11 @@
 </script>
 
 <div class="table-view">
-  <WithTableInspector {context} {showTableInspector} {cellSelectionStarted}>
+  <WithTableInspector
+    {context}
+    {showTableInspector}
+    bind:activeTabId={tableInspectorTab}
+  >
     <div class="sheet-area">
       {#if $processedColumns.size}
         <Sheet
@@ -112,7 +112,14 @@
           {columnWidths}
           {selection}
           {usesVirtualList}
-          {cellSelectionStarted}
+          onCellSelectionStart={(cell) => {
+            if (cell.type === 'column-header-cell') {
+              tableInspectorTab = 'column';
+            }
+            if (cell.type === 'row-header-cell') {
+              tableInspectorTab = 'record';
+            }
+          }}
           bind:horizontalScrollOffset={$horizontalScrollOffset}
           bind:scrollOffset={$scrollOffset}
           columns={sheetColumns}
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte b/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
index 6e1c9291bd..c883f59ff7 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
@@ -1,50 +1,46 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
 
-  import { TabContainer } from '@mathesar-component-library';
-  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
-  import type MessageBus from '@mathesar/utils/MessageBus';
+  import { TabContainer, defined } from '@mathesar-component-library';
+  import type { Tab } from '@mathesar/component-library/types';
   import CellMode from './cell/CellMode.svelte';
   import ColumnMode from './column/ColumnMode.svelte';
   import RecordMode from './record/RecordMode.svelte';
   import TableMode from './table/TableMode.svelte';
 
-  const tableTab = { label: $_('table'), component: TableMode, id: 1 };
-  const columnTab = { label: $_('column'), component: ColumnMode, id: 2 };
-  const recordTab = { label: $_('record'), component: RecordMode, id: 3 };
-  const cellTab = { label: $_('cell'), component: CellMode, id: 4 };
-  const tabs = [tableTab, columnTab, recordTab, cellTab];
+  const tabMap = {
+    table: { label: $_('table'), component: TableMode },
+    column: { label: $_('column'), component: ColumnMode },
+    record: { label: $_('record'), component: RecordMode },
+    cell: { label: $_('cell'), component: CellMode },
+  };
 
-  export let cellSelectionStarted: MessageBus<SheetCellDetails> | undefined =
-    undefined;
+  type TableInspectorTabId = keyof typeof tabMap;
 
-  let activeTab: (typeof tabs)[number];
+  export let activeTabId: TableInspectorTabId | undefined;
 
-  $: cellSelectionStarted?.listen((targetCell) => {
-    if (targetCell.type === 'column-header-cell') {
-      activeTab = columnTab;
-    }
-    if (targetCell.type === 'row-header-cell') {
-      activeTab = recordTab;
-    }
-  });
+  $: tabs = Object.entries(tabMap).map(([id, tab]) => ({ id, ...tab }));
+  $: activeTab = defined(activeTabId, (id) => tabMap[id]);
+
+  function handleTabSelected(e: CustomEvent<{ tab: Tab }>) {
+    activeTabId = e.detail.tab.id as TableInspectorTabId;
+  }
 </script>
 
 <div class="table-inspector">
   <TabContainer
-    bind:activeTab
+    {activeTab}
     {tabs}
     tabStyle="compact"
     fillContainerHeight
     fillTabWidth
+    on:tabSelected={handleTabSelected}
   >
-    <slot>
-      {#if activeTab}
-        <div class="tabs-container">
-          <svelte:component this={activeTab.component} />
-        </div>
-      {/if}
-    </slot>
+    {#if activeTab}
+      <div class="tabs-container">
+        <svelte:component this={activeTab.component} />
+      </div>
+    {/if}
   </TabContainer>
 </div>
 
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte b/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte
index b3b3929236..80bf96f635 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
   import { WithPanel } from '@mathesar-component-library';
-  import type { SheetCellDetails } from '@mathesar/components/sheet/selection';
   import { tableInspectorWidth } from '@mathesar/stores/localStorage';
-  import type MessageBus from '@mathesar/utils/MessageBus';
   import TableInspector from './TableInspector.svelte';
+  import type { ComponentProps } from 'svelte';
 
   export let context: 'page' | 'widget' | 'shared-consumer-page';
   export let showTableInspector: boolean;
-  export let cellSelectionStarted: MessageBus<SheetCellDetails> | undefined =
-    undefined;
+  export let activeTabId:
+    | ComponentProps<TableInspector>['activeTabId']
+    | undefined = undefined;
 </script>
 
 {#if context === 'widget'}
@@ -25,6 +25,6 @@
     maxSizePx={600}
   >
     <slot />
-    <TableInspector slot="panel" {cellSelectionStarted} />
+    <TableInspector slot="panel" bind:activeTabId />
   </WithPanel>
 {/if}
diff --git a/mathesar_ui/src/utils/MessageBus.ts b/mathesar_ui/src/utils/MessageBus.ts
deleted file mode 100644
index af18bc9547..0000000000
--- a/mathesar_ui/src/utils/MessageBus.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-type Ignore = () => void;
-type Listen<Message> = (message: Message) => void;
-
-/**
- * This is a simple message bus that allows sending messages with arbitrary
- * payloads to listeners in a pub/sub fashion. It is useful for components that
- * need to communicate with each other to perform actions imperatively.
- *
- * The `listen` method is similar to a Svelte store's `subscribe` method, and
- * the `send` method is similar to a Svelte store's `set` method. We don't use
- * Svelte stores for this implementation though because we want messages to be
- * ephemeral. When a new listener is added, it should not receive messages that
- * were sent before it was added. This is not possible with Svelte stores
- * because the [store contract][1] stipulates:
- *
- * > This subscription function must be immediately and synchronously called
- * > with the store's current value upon calling `.subscribe`.
- *
- * [1]:
- * https://svelte.dev/docs#component-format-script-4-prefix-stores-with-$-to-access-their-values-store-contract
- */
-export default class MessageBus<Message = void> {
-  private listeners: Set<Listen<Message>>;
-
-  constructor() {
-    this.listeners = new Set();
-  }
-
-  listen(listener: Listen<Message>): Ignore {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-
-  send(message: Message) {
-    this.listeners.forEach((l) => l(message));
-  }
-}

From a2825a35146007b4f2cf9f2f44c9be821b6938f1 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Fri, 26 Apr 2024 12:52:21 -0400
Subject: [PATCH 73/85] Fix activation of column tab when adding columns to
 exploration

---
 mathesar_ui/src/systems/data-explorer/QueryRunner.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
index 27ce294143..1556e22886 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
@@ -3,6 +3,7 @@ import { derived, get, writable } from 'svelte/store';
 
 import { CancellablePromise, ImmutableMap } from '@mathesar-component-library';
 import type {
+  QueryColumnMetaData,
   QueryResultRecord,
   QueryResultsResponse,
   QueryRunResponse,
@@ -256,6 +257,15 @@ export default class QueryRunner {
     await this.run();
   }
 
+  selectColumn(alias: QueryColumnMetaData['alias']): void {
+    const processedColumn = get(this.processedColumns).get(alias);
+    if (!processedColumn) {
+      return;
+    }
+    this.selection.update((s) => s.ofOneColumn(processedColumn.id));
+    this.inspector.activate('column');
+  }
+
   getQueryModel(): QueryModel {
     return get(this.query);
   }

From 6797efa4c2c513b64b90ded1717111c3b4dbf114 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Fri, 26 Apr 2024 13:27:25 -0400
Subject: [PATCH 74/85] Activate and focus first data cell on table load

---
 mathesar_ui/src/components/sheet/Sheet.svelte | 17 ++++++-----
 mathesar_ui/src/components/sheet/utils.ts     |  4 +++
 mathesar_ui/src/pages/table/TablePage.svelte  | 30 +++++++++++++++----
 .../src/systems/table-view/TableView.svelte   |  5 ++--
 4 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/Sheet.svelte b/mathesar_ui/src/components/sheet/Sheet.svelte
index 3248dbbb4a..73a6764435 100644
--- a/mathesar_ui/src/components/sheet/Sheet.svelte
+++ b/mathesar_ui/src/components/sheet/Sheet.svelte
@@ -15,6 +15,7 @@
   import {
     calculateColumnStyleMapAndRowWidth,
     DEFAULT_COLUMN_WIDTH,
+    focusActiveCell,
     setSheetContext,
   } from './utils';
 
@@ -44,7 +45,7 @@
   export let columnWidths: ImmutableMap<SheetColumnIdentifierKey, number> =
     new ImmutableMap();
 
-  let sheetElement: HTMLElement;
+  export let sheetElement: HTMLElement | undefined = undefined;
 
   $: ({ columnStyleMap, rowWidth } = calculateColumnStyleMapAndRowWidth(
     columns,
@@ -131,6 +132,7 @@
 
   function handleMouseDown(e: MouseEvent) {
     if (!selection) return;
+    if (!sheetElement) return;
 
     const target = e.target as HTMLElement;
     const targetCell = findContainingSheetCell(target);
@@ -170,12 +172,13 @@
     }
   }
 
-  async function focusActiveCell() {
-    await tick();
-    sheetElement.querySelector<HTMLElement>('[data-active-cell]')?.focus();
-  }
-
-  onMount(() => selection?.on('focus', focusActiveCell));
+  onMount(() =>
+    selection?.on('focus', async () => {
+      if (!sheetElement) return;
+      await tick();
+      focusActiveCell(sheetElement);
+    }),
+  );
 </script>
 
 <div
diff --git a/mathesar_ui/src/components/sheet/utils.ts b/mathesar_ui/src/components/sheet/utils.ts
index 489f0cf1bc..93b5074599 100644
--- a/mathesar_ui/src/components/sheet/utils.ts
+++ b/mathesar_ui/src/components/sheet/utils.ts
@@ -74,3 +74,7 @@ export function getSheetContext<
 >(): SheetContext<SheetColumnIdentifierKey> {
   return getContext(SHEET_CONTEXT_KEY);
 }
+
+export function focusActiveCell(sheetElement: HTMLElement): void {
+  sheetElement?.querySelector<HTMLElement>('[data-active-cell]')?.focus();
+}
diff --git a/mathesar_ui/src/pages/table/TablePage.svelte b/mathesar_ui/src/pages/table/TablePage.svelte
index f554941a9f..4995d2565e 100644
--- a/mathesar_ui/src/pages/table/TablePage.svelte
+++ b/mathesar_ui/src/pages/table/TablePage.svelte
@@ -1,17 +1,19 @@
 <script lang="ts">
+  import { tick } from 'svelte';
   import { router } from 'tinro';
 
   import type { TableEntry } from '@mathesar/api/types/tables';
+  import { focusActiveCell } from '@mathesar/components/sheet/utils';
+  import LayoutWithHeader from '@mathesar/layouts/LayoutWithHeader.svelte';
+  import { makeSimplePageTitle } from '@mathesar/pages/pageTitleUtils';
   import { currentDbAbstractTypes } from '@mathesar/stores/abstract-types';
   import {
-    setTabularDataStoreInContext,
-    TabularData,
     Meta,
+    TabularData,
+    setTabularDataStoreInContext,
   } from '@mathesar/stores/table-data';
   import TableView from '@mathesar/systems/table-view/TableView.svelte';
   import ActionsPane from '@mathesar/systems/table-view/actions-pane/ActionsPane.svelte';
-  import { makeSimplePageTitle } from '@mathesar/pages/pageTitleUtils';
-  import LayoutWithHeader from '@mathesar/layouts/LayoutWithHeader.svelte';
   import type { ShareConsumer } from '@mathesar/utils/shares';
   import { setNewImperativeFilterControllerInContext } from './ImperativeFilterController';
 
@@ -27,6 +29,8 @@
   export let table: TableEntry;
   export let shareConsumer: ShareConsumer | undefined = undefined;
 
+  let sheetElement: HTMLElement;
+
   $: abstractTypesMap = $currentDbAbstractTypes.data;
   $: ({ query } = $router);
   $: meta = Meta.fromSerialization(query[metaSerializationQueryKey] ?? '');
@@ -37,10 +41,26 @@
     table,
     shareConsumer,
   });
+  $: ({ isLoading, selection } = tabularData);
   $: tabularDataStore.set(tabularData);
   let context: 'shared-consumer-page' | 'page' = 'page';
   $: context = shareConsumer ? 'shared-consumer-page' : 'page';
 
+  async function activateFirstDataCell() {
+    selection.updateWithoutFocus((s) => s.ofFirstDataCell());
+    // Don't steal focus if the user has already focused on another UI element
+    // while the table data is loading.
+    if (document.activeElement === document.body) {
+      await tick();
+      focusActiveCell(sheetElement);
+    }
+  }
+  let hasInitialized = false;
+  $: if (!hasInitialized && !$isLoading) {
+    hasInitialized = true;
+    void activateFirstDataCell();
+  }
+
   function handleMetaSerializationChange(s: string) {
     router.location.query.set(metaSerializationQueryKey, s);
   }
@@ -53,7 +73,7 @@
 <LayoutWithHeader fitViewport restrictWidth={false}>
   <div class="table-page">
     <ActionsPane {table} {context} />
-    <TableView {table} {context} />
+    <TableView {table} {context} bind:sheetElement />
   </div>
 </LayoutWithHeader>
 
diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte
index 827ab5b52c..f0868ff261 100644
--- a/mathesar_ui/src/systems/table-view/TableView.svelte
+++ b/mathesar_ui/src/systems/table-view/TableView.svelte
@@ -37,6 +37,7 @@
 
   export let context: Context = 'page';
   export let table: Pick<TableEntry, 'id' | 'settings' | 'schema'>;
+  export let sheetElement: HTMLElement | undefined = undefined;
 
   let tableInspectorTab: ComponentProps<WithTableInspector>['activeTabId'] =
     'table';
@@ -44,8 +45,7 @@
   $: usesVirtualList = context !== 'widget';
   $: allowsDdlOperations = context !== 'widget' && canExecuteDDL;
   $: sheetHasBorder = context === 'widget';
-  $: ({ processedColumns, display, isLoading, selection, recordsData } =
-    $tabularData);
+  $: ({ processedColumns, display, selection, recordsData } = $tabularData);
   $: clipboardHandler = new SheetClipboardHandler({
     getCopyingContext: () => ({
       rowsMap: new Map(
@@ -127,6 +127,7 @@
           hasBorder={sheetHasBorder}
           hasPaddingRight
           restrictWidthToRowWidth={!usesVirtualList}
+          bind:sheetElement
         >
           <Header {hasNewColumnButton} {columnOrder} {table} />
           <Body {usesVirtualList} />

From 0317a268880be32278b9abddcd411e42d1f91eef Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Fri, 26 Apr 2024 13:35:37 -0400
Subject: [PATCH 75/85] Fix linting problems

---
 .../src/systems/connections/DeleteConnectionModal.svelte  | 7 +++----
 .../data-explorer/input-sidebar/InputSidebar.svelte       | 8 +-------
 .../table-view/table-inspector/WithTableInspector.svelte  | 3 ++-
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/mathesar_ui/src/systems/connections/DeleteConnectionModal.svelte b/mathesar_ui/src/systems/connections/DeleteConnectionModal.svelte
index 1fbe0c6caa..85456342cc 100644
--- a/mathesar_ui/src/systems/connections/DeleteConnectionModal.svelte
+++ b/mathesar_ui/src/systems/connections/DeleteConnectionModal.svelte
@@ -1,18 +1,17 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import { _ } from 'svelte-i18n';
+
   import {
+    CancelOrProceedButtonPair,
     Checkbox,
     ControlledModal,
     LabeledInput,
     ModalController,
-    CancelOrProceedButtonPair,
   } from '@mathesar-component-library';
-  import DocsLink from '@mathesar/components/DocsLink.svelte';
+  import type { Connection } from '@mathesar/api/connections';
   import Identifier from '@mathesar/components/Identifier.svelte';
   import RichText from '@mathesar/components/rich-text/RichText.svelte';
-  import WarningBox from '@mathesar/components/message-boxes/WarningBox.svelte';
-  import type { Connection } from '@mathesar/api/connections';
   import {
     connectionHasUniqueDatabaseReference,
     connectionsStore,
diff --git a/mathesar_ui/src/systems/data-explorer/input-sidebar/InputSidebar.svelte b/mathesar_ui/src/systems/data-explorer/input-sidebar/InputSidebar.svelte
index 6108d472ea..87ba93f72a 100644
--- a/mathesar_ui/src/systems/data-explorer/input-sidebar/InputSidebar.svelte
+++ b/mathesar_ui/src/systems/data-explorer/input-sidebar/InputSidebar.svelte
@@ -14,13 +14,7 @@
   export let linkCollapsibleOpenState: Record<ColumnWithLink['id'], boolean> =
     {};
 
-  $: ({
-    query,
-    state,
-    confirmationNeededForMultipleResults,
-    inspector,
-    selection,
-  } = queryManager);
+  $: ({ query, state, confirmationNeededForMultipleResults } = queryManager);
   $: ({ inputColumnsFetchState } = $state);
 
   const tabs = [
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte b/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte
index 80bf96f635..63747bba3a 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
+
   import { WithPanel } from '@mathesar-component-library';
   import { tableInspectorWidth } from '@mathesar/stores/localStorage';
   import TableInspector from './TableInspector.svelte';
-  import type { ComponentProps } from 'svelte';
 
   export let context: 'page' | 'widget' | 'shared-consumer-page';
   export let showTableInspector: boolean;

From 6325be593092c5440bfc20148170614d78df2c54 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Fri, 26 Apr 2024 23:27:18 -0400
Subject: [PATCH 76/85] Improve logic within `forNewPlane`

---
 .../src/components/sheet/selection/Series.ts  | 12 +++++-
 .../sheet/selection/SheetSelection.ts         | 35 ++++++++++-------
 .../sheet/selection/selectionUtils.ts         | 38 +++++++++++++++++++
 3 files changed, 71 insertions(+), 14 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/selection/Series.ts b/mathesar_ui/src/components/sheet/selection/Series.ts
index c7654a8f29..3eaaebf54b 100644
--- a/mathesar_ui/src/components/sheet/selection/Series.ts
+++ b/mathesar_ui/src/components/sheet/selection/Series.ts
@@ -24,7 +24,7 @@ export default class Series<Value> {
     }
   }
 
-  private getIndex(value: Value): number | undefined {
+  getIndex(value: Value): number | undefined {
     return this.indexLookup.get(value);
   }
 
@@ -89,10 +89,20 @@ export default class Series<Value> {
     return findBest(comparator, (v) => this.getIndex(v) ?? 0, validValues);
   }
 
+  /**
+   * Of all the supplied values, return the value that is the lowest as ordered
+   * within the series. If no such value is present, then `undefined` will
+   * be returned.
+   */
   min(values: Iterable<Value>): Value | undefined {
     return this.best(values, firstLowest);
   }
 
+  /**
+   * Of all the supplied values, return the value that is the highest as ordered
+   * within the series. If no such value is present, then `undefined` will be
+   * returned.
+   */
   max(values: Iterable<Value>): Value | undefined {
     return this.best(values, firstHighest);
   }
diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index 0c9725d1c0..b20a27be64 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -6,7 +6,10 @@ import { assertExhaustive } from '@mathesar/utils/typeUtils';
 import { makeCellId, makeCells, parseCellId } from '../cellIds';
 import { Direction, getColumnOffset } from './Direction';
 import Plane from './Plane';
-import type { SheetCellDetails } from './selectionUtils';
+import {
+  fitSelectedValuesToSeriesTransformation,
+  type SheetCellDetails,
+} from './selectionUtils';
 
 /**
  * - `'dataCells'` means that the selection contains data cells. This is by far
@@ -373,35 +376,41 @@ export default class SheetSelection {
 
   /**
    * @returns a new selection that fits within the provided plane. This is
-   * useful when a column is deleted, reordered, or inserted.
+   * relevant when paginating or when rows/columns are deleted/reordered/inserted.
    */
   forNewPlane(newPlane: Plane): SheetSelection {
     if (this.basis.type === 'dataCells') {
       if (!newPlane.hasResultRows) {
         return new SheetSelection(newPlane, basisFromZeroEmptyColumns());
       }
-      const minColumnId = newPlane.columnIds.min(this.basis.columnIds);
-      const maxColumnId = newPlane.columnIds.max(this.basis.columnIds);
-      const minRowId = newPlane.rowIds.min(this.basis.rowIds);
-      const maxRowId = newPlane.rowIds.max(this.basis.rowIds);
+
+      const [minRowId, maxRowId] = fitSelectedValuesToSeriesTransformation(
+        this.basis.rowIds,
+        this.plane.rowIds,
+        newPlane.rowIds,
+      );
+      const [minColumnId, maxColumnId] =
+        fitSelectedValuesToSeriesTransformation(
+          this.basis.columnIds,
+          this.plane.columnIds,
+          newPlane.columnIds,
+        );
       if (
-        minColumnId === undefined ||
-        maxColumnId === undefined ||
         minRowId === undefined ||
-        maxRowId === undefined
+        maxRowId === undefined ||
+        minColumnId === undefined ||
+        maxColumnId === undefined
       ) {
-        // TODO: in some cases maybe we can be smarter here. Instead of
-        // returning an empty selection, we could try to return a selection of
-        // the same dimensions that is placed as close as possible to the
-        // original selection.
         return new SheetSelection(newPlane);
       }
+
       const cellIds = newPlane.dataCellsInFlexibleRowColumnRange(
         minRowId,
         maxRowId,
         minColumnId,
         maxColumnId,
       );
+      // TODO set active cell
       return new SheetSelection(newPlane, basisFromDataCells(cellIds));
     }
 
diff --git a/mathesar_ui/src/components/sheet/selection/selectionUtils.ts b/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
index b8a54af1ab..9be1ba7b4b 100644
--- a/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
+++ b/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
@@ -1,5 +1,7 @@
 import type { Writable } from 'svelte/store';
 
+import { defined, type ImmutableSet } from '@mathesar-component-library';
+import type Series from './Series';
 import type SheetSelection from './SheetSelection';
 
 export type SheetCellDetails =
@@ -75,3 +77,39 @@ export function beginSelection({
   sheetElement.addEventListener('mousemove', drawToPoint);
   window.addEventListener('mouseup', finish);
 }
+
+function positive(n: number): number {
+  return Math.max(0, n);
+}
+
+/**
+ * Given a set of (contiguous) selected values within a series, this function
+ * will formulate a new set of selected values to fit within a new series such
+ * that the starting index and width of the selection are preserved to the best
+ * extent possible.
+ *
+ * @return A tuple containing the starting and ending values of the new
+ * selection.
+ */
+export function fitSelectedValuesToSeriesTransformation<T>(
+  selectedValues: ImmutableSet<T>,
+  oldSeries: Series<T>,
+  newSeries: Series<T>,
+): [T, T] {
+  const matchingMin = newSeries.min(selectedValues);
+  const matchingMax = newSeries.max(selectedValues);
+  if (matchingMin !== undefined && matchingMax !== undefined) {
+    return [matchingMin, matchingMax];
+  }
+
+  const width = Math.min(selectedValues.size, newSeries.length);
+  const oldStartingIndex =
+    defined(oldSeries.min(selectedValues), (v) => oldSeries.getIndex(v)) ?? 0;
+  const indexReduction = positive(
+    oldStartingIndex + width - 1 - newSeries.length,
+  );
+  const newStartingIndex = positive(oldStartingIndex - indexReduction);
+  const newStartingValue = newSeries.at(newStartingIndex) as T;
+  const newEndingValue = newSeries.at(newStartingIndex + width - 1) as T;
+  return [newStartingValue, newEndingValue];
+}

From f4f4eeb8bb2a71945aadb316359f943489ed857f Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Sat, 27 Apr 2024 15:10:55 -0400
Subject: [PATCH 77/85] Small comment cleanup

---
 .../src/components/sheet/selection/SheetSelection.ts     | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index b20a27be64..942a97b688 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -104,13 +104,13 @@ function getFullySelectedColumnIds(
 ): ImmutableSet<string> {
   if (basis.type === 'dataCells') {
     // The logic within this branch is somewhat complex because:
-    // - We want to suppor non-rectangular selections.
+    // - We might want to support non-rectangular selections someday.
     // - For performance, we want to avoid iterating over all the selected
     //   cells.
 
-    const selctedRowCount = basis.rowIds.size;
+    const selectedRowCount = basis.rowIds.size;
     const availableRowCount = plane.rowIds.length;
-    if (selctedRowCount < availableRowCount) {
+    if (selectedRowCount < availableRowCount) {
       // Performance heuristic. If the number of selected rows is less than the
       // total number of rows, we can assume that no column exist in which all
       // rows are selected.
@@ -131,7 +131,8 @@ function getFullySelectedColumnIds(
     // This is the worst-case scenario, performance-wise, which is why we try to
     // return early before hitting this branch. This case will only happen when
     // we have a mix of fully selected columns and partially selected columns.
-    // This case should be rare because most selections are rectangular.
+    // This case should be rare because most (maybe all?) selections are
+    // rectangular.
     const countSelectedCellsPerColumn = new Map<string, number>();
     for (const cellId of basis.cellIds) {
       const { columnId } = parseCellId(cellId);

From adf17b1766ca352c4d65a568ea51e8d63c506345 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Sat, 27 Apr 2024 20:16:45 -0400
Subject: [PATCH 78/85] Reorganize some code

---
 .../sheet/selection/SheetSelection.ts         | 96 ++-----------------
 .../src/components/sheet/selection/basis.ts   | 95 ++++++++++++++++++
 2 files changed, 104 insertions(+), 87 deletions(-)
 create mode 100644 mathesar_ui/src/components/sheet/selection/basis.ts

diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index 942a97b688..378d295dbd 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -6,98 +6,20 @@ import { assertExhaustive } from '@mathesar/utils/typeUtils';
 import { makeCellId, makeCells, parseCellId } from '../cellIds';
 import { Direction, getColumnOffset } from './Direction';
 import Plane from './Plane';
+import {
+  basisFromDataCells,
+  basisFromEmptyColumns,
+  basisFromOneDataCell,
+  basisFromPlaceholderCell,
+  basisFromZeroEmptyColumns,
+  emptyBasis,
+  type Basis,
+} from './basis';
 import {
   fitSelectedValuesToSeriesTransformation,
   type SheetCellDetails,
 } from './selectionUtils';
 
-/**
- * - `'dataCells'` means that the selection contains data cells. This is by far
- *   the most common type of selection basis.
- *
- * - `'emptyColumns'` is used when the sheet has no rows. In this case we still
- *   want to allow the user to select columns, so we use this basis.
- *
- * - `'placeholderCell'` is used when the user is selecting a cell in the
- *   placeholder row. This is a special case because we don't want to allow the
- *   user to select multiple cells in the placeholder row, and we also don't
- *   want to allow selections that include cells in data rows _and_ the
- *   placeholder row.
- *
- * - `'empty'` is used when no cells are selected. We try to avoid this state,
- *   but we also allow for it because it makes it easier to construct selection
- *   instances if we don't already have the full plane data.
- */
-type BasisType = 'dataCells' | 'emptyColumns' | 'placeholderCell' | 'empty';
-
-/**
- * This type stores data about "which cells are selected", with some redundancy
- * for efficient and consistent lookup across different kinds of selections.
- *
- * Due to the redundant nature of some properties on this type, you should be
- * sure to only instantiate Basis using the utility functions below. This will
- * ensure that the data is always valid.
- */
-interface Basis {
-  readonly type: BasisType;
-  readonly activeCellId: string | undefined;
-  readonly cellIds: ImmutableSet<string>;
-  readonly rowIds: ImmutableSet<string>;
-  readonly columnIds: ImmutableSet<string>;
-}
-
-function basisFromDataCells(
-  cellIds: Iterable<string>,
-  activeCellId?: string,
-): Basis {
-  const parsedCells = [...cellIds].map(parseCellId);
-  return {
-    type: 'dataCells',
-    activeCellId: activeCellId ?? first(cellIds),
-    cellIds: new ImmutableSet(cellIds),
-    columnIds: new ImmutableSet(parsedCells.map((cellId) => cellId.columnId)),
-    rowIds: new ImmutableSet(parsedCells.map((cellId) => cellId.rowId)),
-  };
-}
-
-function basisFromOneDataCell(cellId: string): Basis {
-  return basisFromDataCells([cellId], cellId);
-}
-
-function basisFromEmptyColumns(columnIds: Iterable<string>): Basis {
-  return {
-    type: 'emptyColumns',
-    activeCellId: undefined,
-    cellIds: new ImmutableSet(),
-    columnIds: new ImmutableSet(columnIds),
-    rowIds: new ImmutableSet(),
-  };
-}
-
-function basisFromZeroEmptyColumns(): Basis {
-  return basisFromEmptyColumns([]);
-}
-
-function basisFromPlaceholderCell(activeCellId: string): Basis {
-  return {
-    type: 'placeholderCell',
-    activeCellId,
-    cellIds: new ImmutableSet([activeCellId]),
-    columnIds: new ImmutableSet([parseCellId(activeCellId).columnId]),
-    rowIds: new ImmutableSet(),
-  };
-}
-
-function emptyBasis(): Basis {
-  return {
-    type: 'empty',
-    activeCellId: undefined,
-    cellIds: new ImmutableSet(),
-    columnIds: new ImmutableSet(),
-    rowIds: new ImmutableSet(),
-  };
-}
-
 function getFullySelectedColumnIds(
   plane: Plane,
   basis: Basis,
diff --git a/mathesar_ui/src/components/sheet/selection/basis.ts b/mathesar_ui/src/components/sheet/selection/basis.ts
new file mode 100644
index 0000000000..deda98b794
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/basis.ts
@@ -0,0 +1,95 @@
+import { first } from 'iter-tools';
+
+import { ImmutableSet } from '@mathesar/component-library';
+import { parseCellId } from '../cellIds';
+
+/**
+ * - `'dataCells'` means that the selection contains data cells. This is by far
+ *   the most common type of selection basis.
+ *
+ * - `'emptyColumns'` is used when the sheet has no rows. In this case we still
+ *   want to allow the user to select columns, so we use this basis.
+ *
+ * - `'placeholderCell'` is used when the user is selecting a cell in the
+ *   placeholder row. This is a special case because we don't want to allow the
+ *   user to select multiple cells in the placeholder row, and we also don't
+ *   want to allow selections that include cells in data rows _and_ the
+ *   placeholder row.
+ *
+ * - `'empty'` is used when no cells are selected. We try to avoid this state,
+ *   but we also allow for it because it makes it easier to construct selection
+ *   instances if we don't already have the full plane data.
+ */
+export type BasisType =
+  | 'dataCells'
+  | 'emptyColumns'
+  | 'placeholderCell'
+  | 'empty';
+
+/**
+ * This type stores data about "which cells are selected", with some redundancy
+ * for efficient and consistent lookup across different kinds of selections.
+ *
+ * Due to the redundant nature of some properties on this type, you should be
+ * sure to only instantiate Basis using the utility functions below. This will
+ * ensure that the data is always valid.
+ */
+export interface Basis {
+  readonly type: BasisType;
+  readonly activeCellId: string | undefined;
+  readonly cellIds: ImmutableSet<string>;
+  readonly rowIds: ImmutableSet<string>;
+  readonly columnIds: ImmutableSet<string>;
+}
+
+export function basisFromDataCells(
+  cellIds: Iterable<string>,
+  activeCellId?: string,
+): Basis {
+  const parsedCells = [...cellIds].map(parseCellId);
+  return {
+    type: 'dataCells',
+    activeCellId: activeCellId ?? first(cellIds),
+    cellIds: new ImmutableSet(cellIds),
+    columnIds: new ImmutableSet(parsedCells.map((cellId) => cellId.columnId)),
+    rowIds: new ImmutableSet(parsedCells.map((cellId) => cellId.rowId)),
+  };
+}
+
+export function basisFromOneDataCell(cellId: string): Basis {
+  return basisFromDataCells([cellId], cellId);
+}
+
+export function basisFromEmptyColumns(columnIds: Iterable<string>): Basis {
+  return {
+    type: 'emptyColumns',
+    activeCellId: undefined,
+    cellIds: new ImmutableSet(),
+    columnIds: new ImmutableSet(columnIds),
+    rowIds: new ImmutableSet(),
+  };
+}
+
+export function basisFromZeroEmptyColumns(): Basis {
+  return basisFromEmptyColumns([]);
+}
+
+export function basisFromPlaceholderCell(activeCellId: string): Basis {
+  return {
+    type: 'placeholderCell',
+    activeCellId,
+    cellIds: new ImmutableSet([activeCellId]),
+    columnIds: new ImmutableSet([parseCellId(activeCellId).columnId]),
+    rowIds: new ImmutableSet(),
+  };
+}
+
+export function emptyBasis(): Basis {
+  return {
+    type: 'empty',
+    activeCellId: undefined,
+    cellIds: new ImmutableSet(),
+    columnIds: new ImmutableSet(),
+    rowIds: new ImmutableSet(),
+  };
+}

From aa211acf995cbd7273cc392c131265eb77cd79f2 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Sat, 27 Apr 2024 20:27:41 -0400
Subject: [PATCH 79/85] Show loading indicator cell skeletons in record
 selector

---
 .../src/systems/record-selector/RecordSelectorDataCell.svelte  | 3 ++-
 .../src/systems/record-selector/RecordSelectorTable.svelte     | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/mathesar_ui/src/systems/record-selector/RecordSelectorDataCell.svelte b/mathesar_ui/src/systems/record-selector/RecordSelectorDataCell.svelte
index b4357c0050..e30072d9c8 100644
--- a/mathesar_ui/src/systems/record-selector/RecordSelectorDataCell.svelte
+++ b/mathesar_ui/src/systems/record-selector/RecordSelectorDataCell.svelte
@@ -15,6 +15,7 @@
   export let processedColumn: ProcessedColumn;
   export let recordSummaries: RecordSummaryStore;
   export let searchFuzzy: Writable<SearchFuzzy>;
+  export let isLoading = false;
 
   $: ({ column } = processedColumn);
   $: searchValue = $searchFuzzy.get(column.id);
@@ -30,7 +31,7 @@
     {value}
     {recordSummary}
     disabled
-    showAsSkeleton={!rowHasSavedRecord(row)}
+    showAsSkeleton={!rowHasSavedRecord(row) || isLoading}
     {searchValue}
     showTruncationPopover
   />
diff --git a/mathesar_ui/src/systems/record-selector/RecordSelectorTable.svelte b/mathesar_ui/src/systems/record-selector/RecordSelectorTable.svelte
index 55398549a9..2ac0cefb30 100644
--- a/mathesar_ui/src/systems/record-selector/RecordSelectorTable.svelte
+++ b/mathesar_ui/src/systems/record-selector/RecordSelectorTable.svelte
@@ -289,6 +289,7 @@
                 {processedColumn}
                 {recordSummaries}
                 {searchFuzzy}
+                isLoading={recordsDataIsLoading}
               />
             {/each}
           </RecordSelectorDataRow>

From dfe5bfc657bfb42642565da42865c615f657cfc1 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Sat, 27 Apr 2024 20:46:50 -0400
Subject: [PATCH 80/85] Ensure active cell falls within selected cells

---
 .../src/components/sheet/selection/basis.ts   | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/selection/basis.ts b/mathesar_ui/src/components/sheet/selection/basis.ts
index deda98b794..2d53f663e2 100644
--- a/mathesar_ui/src/components/sheet/selection/basis.ts
+++ b/mathesar_ui/src/components/sheet/selection/basis.ts
@@ -43,14 +43,24 @@ export interface Basis {
 }
 
 export function basisFromDataCells(
-  cellIds: Iterable<string>,
-  activeCellId?: string,
+  _cellIds: Iterable<string>,
+  _activeCellId?: string,
 ): Basis {
-  const parsedCells = [...cellIds].map(parseCellId);
+  const parsedCells = [..._cellIds].map(parseCellId);
+  const cellIds = new ImmutableSet(_cellIds);
+  const activeCellId = (() => {
+    if (_activeCellId === undefined) {
+      return first(_cellIds);
+    }
+    if (cellIds.has(_activeCellId)) {
+      return _activeCellId;
+    }
+    return first(_cellIds);
+  })();
   return {
     type: 'dataCells',
-    activeCellId: activeCellId ?? first(cellIds),
-    cellIds: new ImmutableSet(cellIds),
+    activeCellId,
+    cellIds,
     columnIds: new ImmutableSet(parsedCells.map((cellId) => cellId.columnId)),
     rowIds: new ImmutableSet(parsedCells.map((cellId) => cellId.rowId)),
   };

From 8d3399575bd557f633a8e0b690302be7d0068602 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Sat, 27 Apr 2024 21:17:13 -0400
Subject: [PATCH 81/85] Improve retention of active cell

---
 .../src/components/sheet/selection/SheetSelection.ts       | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
index 378d295dbd..a61b2e6a82 100644
--- a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -333,8 +333,11 @@ export default class SheetSelection {
         minColumnId,
         maxColumnId,
       );
-      // TODO set active cell
-      return new SheetSelection(newPlane, basisFromDataCells(cellIds));
+
+      return new SheetSelection(
+        newPlane,
+        basisFromDataCells(cellIds, this.activeCellId),
+      );
     }
 
     if (this.basis.type === 'emptyColumns') {

From 6ee7724eb51509a9d5089084267f0c78f4b7fad6 Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Sun, 28 Apr 2024 10:35:08 -0400
Subject: [PATCH 82/85] Remove dead code comments

---
 mathesar_ui/src/systems/table-view/TableView.svelte | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte
index f0868ff261..ec6217feac 100644
--- a/mathesar_ui/src/systems/table-view/TableView.svelte
+++ b/mathesar_ui/src/systems/table-view/TableView.svelte
@@ -85,18 +85,6 @@
     [ID_ADD_NEW_COLUMN, 32],
   ]);
   $: showTableInspector = $isTableInspectorVisible && supportsTableInspector;
-
-  // // TODO_3037
-  // function selectFirstCellOnTableLoad(_isLoading: boolean, _context: Context) {
-  //   // We only activate the first cell on the page, not in the widget. Doing so
-  //   // on the widget causes the cell to focus and the page to scroll down to
-  //   // bring that element into view.
-  //   if (_context !== 'widget' && !_isLoading) {
-  //     selection.update((s) => s.ofFirstDataCell());
-  //   }
-  // }
-
-  // $: void selectFirstCellOnTableLoad($isLoading, context);
 </script>
 
 <div class="table-view">

From 274b5056add4f68f395f3d80d2c3249b0a6216ec Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 29 Apr 2024 11:18:29 -0400
Subject: [PATCH 83/85] Fix failing tests

---
 .../sheet/selection/__tests__/Plane.test.ts   | 62 ++++++++++---------
 .../components/sheet/tests/cellIds.test.ts    | 27 --------
 2 files changed, 32 insertions(+), 57 deletions(-)
 delete mode 100644 mathesar_ui/src/components/sheet/tests/cellIds.test.ts

diff --git a/mathesar_ui/src/components/sheet/selection/__tests__/Plane.test.ts b/mathesar_ui/src/components/sheet/selection/__tests__/Plane.test.ts
index dd6b89500c..e601653a4a 100644
--- a/mathesar_ui/src/components/sheet/selection/__tests__/Plane.test.ts
+++ b/mathesar_ui/src/components/sheet/selection/__tests__/Plane.test.ts
@@ -6,53 +6,55 @@ test('Plane with placeholder row', () => {
   const p = new Plane(
     new Series(['r1', 'r2', 'r3', 'r4']),
     new Series(['c1', 'c2', 'c3', 'c4']),
-    'PL',
+    'PH',
   );
 
   expect([...p.allDataCells()]).toEqual([
-    'r1-c1',
-    'r1-c2',
-    'r1-c3',
-    'r1-c4',
-    'r2-c1',
-    'r2-c2',
-    'r2-c3',
-    'r2-c4',
-    'r3-c1',
-    'r3-c2',
-    'r3-c3',
-    'r3-c4',
-    'r4-c1',
-    'r4-c2',
-    'r4-c3',
-    'r4-c4',
+    '["r1","c1"]',
+    '["r1","c2"]',
+    '["r1","c3"]',
+    '["r1","c4"]',
+    '["r2","c1"]',
+    '["r2","c2"]',
+    '["r2","c3"]',
+    '["r2","c4"]',
+    '["r3","c1"]',
+    '["r3","c2"]',
+    '["r3","c3"]',
+    '["r3","c4"]',
+    '["r4","c1"]',
+    '["r4","c2"]',
+    '["r4","c3"]',
+    '["r4","c4"]',
   ]);
 
   expect([...p.dataCellsInFlexibleRowRange('r1', 'r2')].length).toBe(8);
   expect([...p.dataCellsInFlexibleRowRange('r1', 'r3')].length).toBe(12);
   expect([...p.dataCellsInFlexibleRowRange('r3', 'r4')].length).toBe(8);
-  expect([...p.dataCellsInFlexibleRowRange('r3', 'PL')].length).toBe(8);
-  expect([...p.dataCellsInFlexibleRowRange('PL', 'PL')]).toEqual([
-    'r4-c1',
-    'r4-c2',
-    'r4-c3',
-    'r4-c4',
+  expect([...p.dataCellsInFlexibleRowRange('r3', 'PH')].length).toBe(8);
+  expect([...p.dataCellsInFlexibleRowRange('PH', 'PH')]).toEqual([
+    '["r4","c1"]',
+    '["r4","c2"]',
+    '["r4","c3"]',
+    '["r4","c4"]',
   ]);
 
   expect([...p.dataCellsInColumnRange('c1', 'c2')].length).toBe(8);
   expect([...p.dataCellsInColumnRange('c1', 'c3')].length).toBe(12);
 
-  expect(p.getAdjacentCell('r4-c4', Direction.Up)).toEqual({
+  expect(p.getAdjacentCell('["r4","c4"]', Direction.Up)).toEqual({
     type: 'dataCell',
-    cellId: 'r3-c4',
+    cellId: '["r3","c4"]',
   });
-  expect(p.getAdjacentCell('r4-c4', Direction.Right)).toEqual({ type: 'none' });
-  expect(p.getAdjacentCell('r4-c4', Direction.Down)).toEqual({
+  expect(p.getAdjacentCell('["r4","c4"]', Direction.Right)).toEqual({
+    type: 'none',
+  });
+  expect(p.getAdjacentCell('["r4","c4"]', Direction.Down)).toEqual({
     type: 'placeholderCell',
-    cellId: 'PL-c4',
+    cellId: '["PH","c4"]',
   });
-  expect(p.getAdjacentCell('r4-c4', Direction.Left)).toEqual({
+  expect(p.getAdjacentCell('["r4","c4"]', Direction.Left)).toEqual({
     type: 'dataCell',
-    cellId: 'r4-c3',
+    cellId: '["r4","c3"]',
   });
 });
diff --git a/mathesar_ui/src/components/sheet/tests/cellIds.test.ts b/mathesar_ui/src/components/sheet/tests/cellIds.test.ts
deleted file mode 100644
index a4c8702b66..0000000000
--- a/mathesar_ui/src/components/sheet/tests/cellIds.test.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { parseCellId } from '../cellIds';
-
-test.each(
-  // prettier-ignore
-  [
-  // cellId    , rowId , columnId
-    ['a-b'     , 'a'   , 'b'    ],
-    ['a-b-c'   , 'a'   , 'b-c'  ],
-    ['a--b'    , 'a'   , '-b'   ],
-    [' a - b ' , ' a ' , ' b '  ],
-    ['-'       , ''    , ''     ],
-    [' - '     , ' '   , ' '    ],
-    ['--'      , ''    , '-'    ],
-    ['-a-b'    , ''    , 'a-b'  ],
-    ['a-'      , 'a'   , ''     ],
-  ],
-)('parseCellId success %#', (cellId, rowId, columnId) => {
-  const result = parseCellId(cellId);
-  expect(result.rowId).toBe(rowId);
-  expect(result.columnId).toBe(columnId);
-});
-
-test.each([[''], ['foobar']])('parseCellId failure %#', (cellId) => {
-  expect(() => {
-    parseCellId(cellId);
-  }).toThrow();
-});

From c371a203d3edba76a5347280e88544a207aafcec Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Tue, 7 May 2024 16:32:07 -0400
Subject: [PATCH 84/85] Auto-sort imports in some files

In preparation for git merge with develop to avoid merge conflicts
---
 .../data-types/components/CellWrapper.svelte  |  3 ++-
 mathesar_ui/src/components/sheet/Sheet.svelte |  7 ++---
 .../components/sheet/SheetClipboardHandler.ts |  2 +-
 .../pages/exploration/ExplorationPage.svelte  |  3 ++-
 mathesar_ui/src/pages/table/TablePage.svelte  |  3 ++-
 mathesar_ui/src/stores/table-data/display.ts  |  3 ++-
 .../src/stores/table-data/tabularData.ts      |  5 ++--
 .../connections/DeleteConnectionModal.svelte  | 15 +++++------
 .../systems/data-explorer/DataExplorer.svelte |  5 ++--
 .../src/systems/data-explorer/QueryRunner.ts  |  9 ++++---
 .../ExplorationInspector.svelte               |  6 +++--
 .../column-tab/ColumnTab.svelte               |  2 ++
 .../result-pane/ResultHeaderCell.svelte       |  9 ++++---
 .../result-pane/ResultPane.svelte             |  1 +
 .../result-pane/ResultRowCell.svelte          |  1 +
 .../data-explorer/result-pane/Results.svelte  |  6 +++--
 .../src/systems/table-view/TableView.svelte   |  5 ++--
 .../systems/table-view/header/Header.svelte   |  1 +
 .../src/systems/table-view/row/Row.svelte     |  3 ++-
 .../src/systems/table-view/row/RowCell.svelte | 26 ++++++++++---------
 .../table-view/row/RowContextOptions.svelte   | 19 +++++++-------
 21 files changed, 78 insertions(+), 56 deletions(-)

diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
index 29594fe1d4..f8b4b71c4b 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
-  import type { ValueComparisonOutcome } from '@mathesar-component-library/types';
   import CellBackground from '@mathesar/components/CellBackground.svelte';
+  import type { ValueComparisonOutcome } from '@mathesar-component-library/types';
+
   import type { HorizontalAlignment } from './typeDefinitions';
 
   const dispatch = createEventDispatcher();
diff --git a/mathesar_ui/src/components/sheet/Sheet.svelte b/mathesar_ui/src/components/sheet/Sheet.svelte
index 73a6764435..29cb469587 100644
--- a/mathesar_ui/src/components/sheet/Sheet.svelte
+++ b/mathesar_ui/src/components/sheet/Sheet.svelte
@@ -2,19 +2,20 @@
   import { onMount, tick } from 'svelte';
   import { writable } from 'svelte/store';
 
-  import { ImmutableMap } from '@mathesar-component-library/types';
   import type { ClipboardHandler } from '@mathesar/stores/clipboard';
   import { getClipboardHandlerStoreFromContext } from '@mathesar/stores/clipboard';
   import { getModifierKeyCombo } from '@mathesar/utils/pointerUtils';
+  import { ImmutableMap } from '@mathesar-component-library/types';
+
   import {
+    type SheetCellDetails,
     beginSelection,
     findContainingSheetCell,
-    type SheetCellDetails,
   } from './selection';
   import type SheetSelectionStore from './selection/SheetSelectionStore';
   import {
-    calculateColumnStyleMapAndRowWidth,
     DEFAULT_COLUMN_WIDTH,
+    calculateColumnStyleMapAndRowWidth,
     focusActiveCell,
     setSheetContext,
   } from './utils';
diff --git a/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts b/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts
index 4d55f5aad3..dd691e9ef9 100644
--- a/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts
+++ b/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts
@@ -1,11 +1,11 @@
 import * as Papa from 'papaparse';
 
-import type { ImmutableSet } from '@mathesar-component-library';
 import type { AbstractTypeCategoryIdentifier } from '@mathesar/stores/abstract-types/types';
 import type { ClipboardHandler } from '@mathesar/stores/clipboard';
 import type { RecordSummariesForSheet } from '@mathesar/stores/table-data';
 import type { ReadableMapLike } from '@mathesar/typeUtils';
 import { labeledCount } from '@mathesar/utils/languageUtils';
+import type { ImmutableSet } from '@mathesar-component-library';
 
 const MIME_PLAIN_TEXT = 'text/plain';
 const MIME_MATHESAR_SHEET_CLIPBOARD =
diff --git a/mathesar_ui/src/pages/exploration/ExplorationPage.svelte b/mathesar_ui/src/pages/exploration/ExplorationPage.svelte
index 6c340948cb..c5372c4f36 100644
--- a/mathesar_ui/src/pages/exploration/ExplorationPage.svelte
+++ b/mathesar_ui/src/pages/exploration/ExplorationPage.svelte
@@ -2,8 +2,8 @@
   import { _ } from 'svelte-i18n';
   import { router } from 'tinro';
 
-  import type { Database, SchemaEntry } from '@mathesar/AppTypes';
   import type { QueryInstance } from '@mathesar/api/rest/types/queries';
+  import type { Database, SchemaEntry } from '@mathesar/AppTypes';
   import LayoutWithHeader from '@mathesar/layouts/LayoutWithHeader.svelte';
   import { getSchemaPageUrl } from '@mathesar/routes/urls';
   import { currentDbAbstractTypes } from '@mathesar/stores/abstract-types';
@@ -16,6 +16,7 @@
     WithExplorationInspector,
   } from '@mathesar/systems/data-explorer';
   import type { ShareConsumer } from '@mathesar/utils/shares';
+
   import Header from './Header.svelte';
 
   const userProfile = getUserProfileStoreFromContext();
diff --git a/mathesar_ui/src/pages/table/TablePage.svelte b/mathesar_ui/src/pages/table/TablePage.svelte
index 3bcf3b07c7..a72515d1f5 100644
--- a/mathesar_ui/src/pages/table/TablePage.svelte
+++ b/mathesar_ui/src/pages/table/TablePage.svelte
@@ -12,9 +12,10 @@
     TabularData,
     setTabularDataStoreInContext,
   } from '@mathesar/stores/table-data';
-  import TableView from '@mathesar/systems/table-view/TableView.svelte';
   import ActionsPane from '@mathesar/systems/table-view/actions-pane/ActionsPane.svelte';
+  import TableView from '@mathesar/systems/table-view/TableView.svelte';
   import type { ShareConsumer } from '@mathesar/utils/shares';
+
   import { setNewImperativeFilterControllerInContext } from './ImperativeFilterController';
 
   const metaSerializationQueryKey = 'q';
diff --git a/mathesar_ui/src/stores/table-data/display.ts b/mathesar_ui/src/stores/table-data/display.ts
index d4f98202ce..872c7d8cdf 100644
--- a/mathesar_ui/src/stores/table-data/display.ts
+++ b/mathesar_ui/src/stores/table-data/display.ts
@@ -2,9 +2,10 @@ import type { Readable, Writable } from 'svelte/store';
 import { derived, writable } from 'svelte/store';
 
 import { WritableMap } from '@mathesar-component-library';
+
 import type { ColumnsDataStore } from './columns';
 import type { Meta } from './meta';
-import { filterRecordRows, type RecordsData, type Row } from './records';
+import { type RecordsData, type Row, filterRecordRows } from './records';
 
 // @deprecated
 export const DEFAULT_COLUMN_WIDTH = 160;
diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts
index 9208b116bd..7a2edfec4a 100644
--- a/mathesar_ui/src/stores/table-data/tabularData.ts
+++ b/mathesar_ui/src/stores/table-data/tabularData.ts
@@ -1,16 +1,17 @@
 import { getContext, setContext } from 'svelte';
-import { derived, writable, type Readable, type Writable } from 'svelte/store';
+import { type Readable, type Writable, derived, writable } from 'svelte/store';
 
-import type { DBObjectEntry } from '@mathesar/AppTypes';
 import type { TableEntry } from '@mathesar/api/rest/types/tables';
 import type { Column } from '@mathesar/api/rest/types/tables/columns';
 import { States } from '@mathesar/api/rest/utils/requestUtils';
+import type { DBObjectEntry } from '@mathesar/AppTypes';
 import Plane from '@mathesar/components/sheet/selection/Plane';
 import Series from '@mathesar/components/sheet/selection/Series';
 import SheetSelectionStore from '@mathesar/components/sheet/selection/SheetSelectionStore';
 import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
 import type { ShareConsumer } from '@mathesar/utils/shares';
 import { orderProcessedColumns } from '@mathesar/utils/tables';
+
 import { ColumnsDataStore } from './columns';
 import type { ConstraintsData } from './constraints';
 import { ConstraintsDataStore } from './constraints';
diff --git a/mathesar_ui/src/systems/connections/DeleteConnectionModal.svelte b/mathesar_ui/src/systems/connections/DeleteConnectionModal.svelte
index 65af01dcdc..26a79b1b18 100644
--- a/mathesar_ui/src/systems/connections/DeleteConnectionModal.svelte
+++ b/mathesar_ui/src/systems/connections/DeleteConnectionModal.svelte
@@ -2,23 +2,22 @@
   import { createEventDispatcher } from 'svelte';
   import { _ } from 'svelte-i18n';
 
-  import {
-    CancelOrProceedButtonPair,
-    Checkbox,
-    ControlledModal,
-    LabeledInput,
-    ModalController,
-  } from '@mathesar-component-library';
   import type { Connection } from '@mathesar/api/rest/connections';
   import Identifier from '@mathesar/components/Identifier.svelte';
   import RichText from '@mathesar/components/rich-text/RichText.svelte';
-
   import {
     connectionHasUniqueDatabaseReference,
     connectionsStore,
   } from '@mathesar/stores/databases';
   import { toast } from '@mathesar/stores/toast';
   import { getErrorMessage } from '@mathesar/utils/errors';
+  import {
+    CancelOrProceedButtonPair,
+    Checkbox,
+    ControlledModal,
+    LabeledInput,
+    ModalController,
+  } from '@mathesar-component-library';
 
   const { connections } = connectionsStore;
   const dispatch = createEventDispatcher<{ delete: undefined }>();
diff --git a/mathesar_ui/src/systems/data-explorer/DataExplorer.svelte b/mathesar_ui/src/systems/data-explorer/DataExplorer.svelte
index 96710d4d00..a8118e14d0 100644
--- a/mathesar_ui/src/systems/data-explorer/DataExplorer.svelte
+++ b/mathesar_ui/src/systems/data-explorer/DataExplorer.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
 
-  import { Tutorial } from '@mathesar-component-library';
   import { queries } from '@mathesar/stores/queries';
+  import { Tutorial } from '@mathesar-component-library';
+
   import ActionsPane from './ActionsPane.svelte';
-  import type QueryManager from './QueryManager';
   import { WithExplorationInspector } from './exploration-inspector';
   import WithInputSidebar from './input-sidebar/WithInputSidebar.svelte';
+  import type QueryManager from './QueryManager';
   import ResultPane from './result-pane/ResultPane.svelte';
   import type { ColumnWithLink } from './utils';
 
diff --git a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
index db2cccea76..4829acf33f 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
@@ -1,7 +1,6 @@
 import type { Readable, Writable } from 'svelte/store';
 import { derived, get, writable } from 'svelte/store';
 
-import { CancellablePromise, ImmutableMap } from '@mathesar-component-library';
 import type {
   QueryColumnMetaData,
   QueryResultRecord,
@@ -17,15 +16,17 @@ import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
 import { fetchQueryResults, runQuery } from '@mathesar/stores/queries';
 import Pagination from '@mathesar/utils/Pagination';
 import type { ShareConsumer } from '@mathesar/utils/shares';
+import { CancellablePromise, ImmutableMap } from '@mathesar-component-library';
+
 import QueryInspector from './QueryInspector';
 import type QueryModel from './QueryModel';
 import {
-  getProcessedOutputColumns,
-  processColumnMetaData,
-  speculateColumnMetaData,
   type InputColumnsStoreSubstance,
   type ProcessedQueryOutputColumnMap,
   type ProcessedQueryResultColumnMap,
+  getProcessedOutputColumns,
+  processColumnMetaData,
+  speculateColumnMetaData,
 } from './utils';
 
 export interface QueryRow {
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte
index c60ec2fef6..cc8fb8dc09 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-  import { TabContainer } from '@mathesar-component-library';
   import type { Tab } from '@mathesar/component-library/types';
+  import { TabContainer } from '@mathesar-component-library';
+
   import type { ExplorationInspectorTab } from '../QueryInspector';
   import type QueryManager from '../QueryManager';
   import type QueryRunner from '../QueryRunner';
-  import ExplorationTab from './ExplorationTab.svelte';
+
   import CellTab from './cell/CellTab.svelte';
   import ColumnTab from './column-tab/ColumnTab.svelte';
+  import ExplorationTab from './ExplorationTab.svelte';
 
   export let queryHandler: QueryRunner | QueryManager;
   export let canEditMetadata: boolean;
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte
index 880a02d3d5..93f749fa2e 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte
@@ -9,8 +9,10 @@
     TextInput,
     isDefinedNonNullable,
   } from '@mathesar-component-library';
+
   import QueryManager from '../../QueryManager';
   import type QueryRunner from '../../QueryRunner';
+
   import ColumnSource from './ColumnSource.svelte';
   import DeleteColumnAction from './DeleteColumnAction.svelte';
 
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte
index ba46993a7f..10b427d321 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { Button } from '@mathesar-component-library';
+  import ColumnName from '@mathesar/components/column/ColumnName.svelte';
   import {
-    SheetColumnHeaderCell,
     SheetCellResizer,
+    SheetColumnHeaderCell,
   } from '@mathesar/components/sheet';
-  import ColumnName from '@mathesar/components/column/ColumnName.svelte';
-  import type { ProcessedQueryOutputColumn } from '../utils';
+  import { Button } from '@mathesar-component-library';
+
   import type QueryRunner from '../QueryRunner';
+  import type { ProcessedQueryOutputColumn } from '../utils';
 
   export let queryRunner: QueryRunner;
   export let processedQueryColumn: ProcessedQueryOutputColumn;
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultPane.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultPane.svelte
index 938d209eb6..32c44b91bf 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultPane.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultPane.svelte
@@ -3,6 +3,7 @@
 
   import type QueryManager from '../QueryManager';
   import type QueryRunner from '../QueryRunner';
+
   import QueryRefreshButton from './QueryRefreshButton.svelte';
   import Results from './Results.svelte';
 
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
index fd9a97c1b7..638872d09c 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
@@ -7,6 +7,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 type { QueryRow } from '../QueryRunner';
   import type { ProcessedQueryOutputColumn } from '../utils';
 
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index a026092b3b..c1790b844f 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { map } from 'iter-tools';
-  import { _ } from 'svelte-i18n';
   import { get } from 'svelte/store';
+  import { _ } from 'svelte-i18n';
 
-  import { ImmutableMap } from '@mathesar-component-library';
   import CellBackground from '@mathesar/components/CellBackground.svelte';
   import PaginationGroup from '@mathesar/components/PaginationGroup.svelte';
   import {
@@ -18,9 +17,12 @@
   import { rowHeaderWidthPx, rowHeightPx } from '@mathesar/geometry';
   import { toast } from '@mathesar/stores/toast';
   import { arrayIndex } from '@mathesar/utils/typeUtils';
+  import { ImmutableMap } from '@mathesar-component-library';
+
   import type QueryManager from '../QueryManager';
   import type QueryRunner from '../QueryRunner';
   import { getRowSelectionId } from '../QueryRunner';
+
   import QueryRefreshButton from './QueryRefreshButton.svelte';
   import QueryRunErrors from './QueryRunErrors.svelte';
   import ResultHeaderCell from './ResultHeaderCell.svelte';
diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte
index b63fdc649e..c9328db386 100644
--- a/mathesar_ui/src/systems/table-view/TableView.svelte
+++ b/mathesar_ui/src/systems/table-view/TableView.svelte
@@ -3,7 +3,6 @@
   import type { ComponentProps } from 'svelte';
   import { get } from 'svelte/store';
 
-  import { ImmutableMap } from '@mathesar-component-library';
   import type { TableEntry } from '@mathesar/api/rest/types/tables';
   import { Sheet } from '@mathesar/components/sheet';
   import { SheetClipboardHandler } from '@mathesar/components/sheet/SheetClipboardHandler';
@@ -11,13 +10,15 @@
   import { currentDatabase } from '@mathesar/stores/databases';
   import { currentSchema } from '@mathesar/stores/schemas';
   import {
-    getTabularDataStoreFromContext,
     ID_ADD_NEW_COLUMN,
     ID_ROW_CONTROL_COLUMN,
+    getTabularDataStoreFromContext,
   } from '@mathesar/stores/table-data';
   import { toast } from '@mathesar/stores/toast';
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
   import { stringifyMapKeys } from '@mathesar/utils/collectionUtils';
+  import { ImmutableMap } from '@mathesar-component-library';
+
   import Body from './Body.svelte';
   import Header from './header/Header.svelte';
   import StatusPane from './StatusPane.svelte';
diff --git a/mathesar_ui/src/systems/table-view/header/Header.svelte b/mathesar_ui/src/systems/table-view/header/Header.svelte
index 0736100bae..88e779d715 100644
--- a/mathesar_ui/src/systems/table-view/header/Header.svelte
+++ b/mathesar_ui/src/systems/table-view/header/Header.svelte
@@ -17,6 +17,7 @@
     getTabularDataStoreFromContext,
   } from '@mathesar/stores/table-data';
   import { saveColumnOrder } from '@mathesar/stores/tables';
+
   import { Draggable, Droppable } from './drag-and-drop';
   import ColumnHeaderContextMenu from './header-cell/ColumnHeaderContextMenu.svelte';
   import HeaderCell from './header-cell/HeaderCell.svelte';
diff --git a/mathesar_ui/src/systems/table-view/row/Row.svelte b/mathesar_ui/src/systems/table-view/row/Row.svelte
index 4cbbd0820b..3d1ef87d78 100644
--- a/mathesar_ui/src/systems/table-view/row/Row.svelte
+++ b/mathesar_ui/src/systems/table-view/row/Row.svelte
@@ -4,6 +4,7 @@
   import { rowHeightPx } from '@mathesar/geometry';
   import {
     ID_ROW_CONTROL_COLUMN,
+    type Row,
     getCellKey,
     getRowKey,
     getTabularDataStoreFromContext,
@@ -12,9 +13,9 @@
     isNewRecordRow,
     isPlaceholderRow,
     rowHasRecord,
-    type Row,
   } from '@mathesar/stores/table-data';
   import { getRowSelectionId } from '@mathesar/stores/table-data/records';
+
   import GroupHeader from './GroupHeader.svelte';
   import NewRecordMessage from './NewRecordMessage.svelte';
   import RowCell from './RowCell.svelte';
diff --git a/mathesar_ui/src/systems/table-view/row/RowCell.svelte b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
index 5fa294cab0..6240c92b8c 100644
--- a/mathesar_ui/src/systems/table-view/row/RowCell.svelte
+++ b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
@@ -1,23 +1,15 @@
 <script lang="ts">
-  import { _ } from 'svelte-i18n';
   import type { Writable } from 'svelte/store';
+  import { _ } from 'svelte-i18n';
 
-  import {
-    ButtonMenuItem,
-    ContextMenu,
-    LinkMenuItem,
-    MenuDivider,
-    MenuHeading,
-    WritableMap,
-  } from '@mathesar-component-library';
   import type { RequestStatus } from '@mathesar/api/rest/utils/requestUtils';
   import { States } from '@mathesar/api/rest/utils/requestUtils';
+  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
   import CellBackground from '@mathesar/components/CellBackground.svelte';
   import Identifier from '@mathesar/components/Identifier.svelte';
   import Null from '@mathesar/components/Null.svelte';
-  import RowCellBackgrounds from '@mathesar/components/RowCellBackgrounds.svelte';
-  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
   import { RichText } from '@mathesar/components/rich-text';
+  import RowCellBackgrounds from '@mathesar/components/RowCellBackgrounds.svelte';
   import { SheetDataCell } from '@mathesar/components/sheet';
   import { makeCellId } from '@mathesar/components/sheet/cellIds';
   import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
@@ -27,15 +19,25 @@
   import { currentSchema } from '@mathesar/stores/schemas';
   import { storeToGetRecordPageUrl } from '@mathesar/stores/storeBasedUrls';
   import {
-    rowHasNewRecord,
     type CellKey,
     type ProcessedColumn,
     type RecordRow,
     type RecordsData,
+    rowHasNewRecord,
   } from '@mathesar/stores/table-data';
   import { getRowSelectionId } from '@mathesar/stores/table-data/records';
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
+  import {
+    ButtonMenuItem,
+    ContextMenu,
+    LinkMenuItem,
+    MenuDivider,
+    MenuHeading,
+    WritableMap,
+  } from '@mathesar-component-library';
+
   import ColumnHeaderContextMenu from '../header/header-cell/ColumnHeaderContextMenu.svelte';
+
   import CellErrors from './CellErrors.svelte';
   import RowContextOptions from './RowContextOptions.svelte';
 
diff --git a/mathesar_ui/src/systems/table-view/row/RowContextOptions.svelte b/mathesar_ui/src/systems/table-view/row/RowContextOptions.svelte
index d7035da953..cd0cd83d7e 100644
--- a/mathesar_ui/src/systems/table-view/row/RowContextOptions.svelte
+++ b/mathesar_ui/src/systems/table-view/row/RowContextOptions.svelte
@@ -1,23 +1,24 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
-  import {
-    ButtonMenuItem,
-    iconExternalLink,
-    LinkMenuItem,
-  } from '@mathesar-component-library';
+
   import { iconDeleteMajor } from '@mathesar/icons';
   import { confirmDelete } from '@mathesar/stores/confirmation';
+  import { currentDatabase } from '@mathesar/stores/databases';
+  import { currentSchema } from '@mathesar/stores/schemas';
   import { storeToGetRecordPageUrl } from '@mathesar/stores/storeBasedUrls';
   import {
+    type RecordRow,
     RecordsData,
     rowHasRecord,
-    type RecordRow,
   } from '@mathesar/stores/table-data';
+  import { getRowSelectionId } from '@mathesar/stores/table-data/records';
   import { toast } from '@mathesar/stores/toast';
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
-  import { currentDatabase } from '@mathesar/stores/databases';
-  import { currentSchema } from '@mathesar/stores/schemas';
-  import { getRowSelectionId } from '@mathesar/stores/table-data/records';
+  import {
+    ButtonMenuItem,
+    LinkMenuItem,
+    iconExternalLink,
+  } from '@mathesar-component-library';
 
   export let row: RecordRow;
   export let recordPk: string;

From 5489684eb0fd75535de3c66137324a22b0baccad Mon Sep 17 00:00:00 2001
From: pavish <pavishkumar.r@gmail.com>
Date: Thu, 6 Jun 2024 14:17:09 +0530
Subject: [PATCH 85/85] Fix regression: Table inspector tabs do not get
 highlighted based on column/row selection

---
 .../systems/table-view/table-inspector/TableInspector.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte b/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
index d044260b97..870fab24d7 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
@@ -21,7 +21,7 @@
   export let activeTabId: TableInspectorTabId | undefined;
 
   $: tabs = Object.entries(tabMap).map(([id, tab]) => ({ id, ...tab }));
-  $: activeTab = defined(activeTabId, (id) => tabMap[id]);
+  $: activeTab = defined(activeTabId, (id) => ({ id, ...tabMap[id] }));
 
   function handleTabSelected(e: CustomEvent<{ tab: Tab }>) {
     activeTabId = e.detail.tab.id as TableInspectorTabId;