Merge pull request #5075 from mathesar-foundation/4921_resize_columns

Allow multiple columns to be resized together

Author: pavish

mathesar_ui/src/components/sheet/Sheet.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
   import { onMount, tick } from 'svelte';
-  import { writable } from 'svelte/store';
+  import { derived, readable, writable } from 'svelte/store';
 
   import {
     type ClipboardHandler,
     getClipboardHandlerStoreFromContext,
   } from '@mathesar/stores/clipboard';
   import { getModifierKeyCombo } from '@mathesar/utils/pointerUtils';
   import type { ClientPosition } from '@mathesar-component-library';
-  import { ImmutableMap } from '@mathesar-component-library/types';
+  import {
+    ImmutableMap,
+    ImmutableSet,
+    defined,
+  } from '@mathesar-component-library/types';
 
   import {
     type SheetCellDetails,
@@ -51,6 +55,11 @@
 
   export let sheetElement: HTMLElement | undefined = undefined;
 
+  /** [columnId, width] pairs to persist to the database. */
+  export let persistColumnWidths: (
+    widthsMap: [string, number | null][],
+  ) => void = () => {};
+
   interface SheetContextMenuCallbackArgs {
     targetCell: SheetCellDetails;
     position: ClientPosition;
@@ -61,6 +70,25 @@
     | ((p: SheetContextMenuCallbackArgs) => 'opened' | 'empty')
     | undefined = undefined;
 
+  $: fullySelectedColumnIds =
+    defined(selection, (s) => derived(s, (v) => v.fullySelectedColumnIds)) ??
+    readable(new ImmutableSet<string>());
+
+  /**
+   * Returns a mapping of column ids to widths so that the user can resize
+   * multiple columns via a single column resizer. If the given column id is
+   * part of the selection, this returns a mapping for all selected columns.
+   * Otherwise, it just uses the given column id.
+   */
+  function getSmartColumnWidthsMap(
+    columnId: string,
+    width: number | null,
+  ): [string, number | null][] {
+    return $fullySelectedColumnIds.has(columnId)
+      ? [...$fullySelectedColumnIds].map((id) => [id, width])
+      : [[columnId, width]];
+  }
+
   $: ({ columnStyleMap, rowWidth } = calculateColumnStyleMapAndRowWidth(
     columns,
     getColumnIdentifier,
@@ -89,11 +117,18 @@
     stores,
     api: {
       getColumnWidth: (id) => normalizeColumnWidth(columnWidths.get(id)),
-      setColumnWidth: (key, width) => {
-        columnWidths = columnWidths.with(key, width);
+      handleDraggingColumnWidth: (id, width) => {
+        const widthsMap = getSmartColumnWidthsMap(id, width);
+        columnWidths = widthsMap.reduce(
+          (newColumnWidths, [columnId, newWidth]) =>
+            newWidth === null
+              ? newColumnWidths.without(columnId)
+              : newColumnWidths.with(columnId, newWidth),
+          columnWidths,
+        );
       },
-      resetColumnWidth: (key) => {
-        columnWidths = columnWidths.without(key);
+      handleReleaseColumnWidth: (id, width) => {
+        persistColumnWidths(getSmartColumnWidthsMap(id, width));
       },
       setHorizontalScrollOffset: (offset) => {
         horizontalScrollOffset = offset;

mathesar_ui/src/components/sheet/SheetCellResizer.svelte

@@ -8,18 +8,7 @@
 
   export let minColumnWidth = MIN_COLUMN_WIDTH_PX;
   export let maxColumnWidth = MAX_COLUMN_WIDTH_PX;
-  export let columnIdentifierKey: string;
-
-  /**
-   * Runs once — when the resize is finished. Does NOT run in realtime on each
-   * pixel movement.
-   */
-  export let afterResize: (width: number) => void = () => {};
-
-  /**
-   * Runs after the user double-clicks the resizer (to reset the column width).
-   */
-  export let onReset: () => void = () => {};
+  export let columnId: string;
 
   let startingWidth: number | undefined = undefined;
 
@@ -31,23 +20,22 @@
   class:selection-in-progress={$selectionInProgress}
   class:is-resizing={!!startingWidth}
   use:slider={{
-    getStartingValue: () => api.getColumnWidth(columnIdentifierKey) ?? 0,
-    onMove: (width) => api.setColumnWidth(columnIdentifierKey, width),
+    getStartingValue: () => api.getColumnWidth(columnId) ?? 0,
+    onMove: (width) => api.handleDraggingColumnWidth(columnId, width),
     onStart: (startingValue) => {
       startingWidth = startingValue;
     },
     onStop: (width) => {
       if (width !== startingWidth) {
-        afterResize(width);
+        api.handleReleaseColumnWidth(columnId, width);
       }
       startingWidth = undefined;
     },
     min: minColumnWidth,
     max: maxColumnWidth,
   }}
   on:dblclick={() => {
-    api.resetColumnWidth(columnIdentifierKey);
-    onReset();
+    api.handleReleaseColumnWidth(columnId, null);
   }}
 >
   <div class="indicator" />

mathesar_ui/src/components/sheet/utils.ts

@@ -26,9 +26,11 @@ export interface SheetContextStores {
 export interface SheetContext {
   stores: SheetContextStores;
   api: {
-    setColumnWidth: (columnIdentifierKey: string, width: number) => void;
-    getColumnWidth: (columnIdentifierKey: string) => number;
-    resetColumnWidth: (columnIdentifierKey: string) => void;
+    getColumnWidth: (columnId: string) => number;
+    /** Called continuously — while the user is resizing a column. */
+    handleDraggingColumnWidth: (columnId: string, width: number | null) => void;
+    /** Called once — when the user is finished resizing a column */
+    handleReleaseColumnWidth: (columnId: string, width: number | null) => void;
     setHorizontalScrollOffset: (offset: number) => void;
     setScrollOffset: (offset: number) => void;
   };

mathesar_ui/src/pages/import/preview/ImportPreviewSheet.svelte

@@ -51,7 +51,7 @@
             {renamedIdColumn}
           />
           <SheetCellResizer
-            columnIdentifierKey={String(column.id)}
+            columnId={String(column.id)}
             minColumnWidth={MIN_IMPORT_COLUMN_WIDTH_PX}
           />
         </SheetColumnHeaderCell>

mathesar_ui/src/stores/table-data/columns.ts

@@ -11,6 +11,7 @@ import type {
 } from '@mathesar/api/rpc/columns';
 import type { Database } from '@mathesar/models/Database';
 import type { Table } from '@mathesar/models/Table';
+import { batchRun } from '@mathesar/packages/json-rpc-client-builder';
 import { getErrorMessage } from '@mathesar/utils/errors';
 import {
   type CancellablePromise,
@@ -162,25 +163,29 @@ export class ColumnsDataStore extends EventHandler<{
   }
 
   async setDisplayOptions(
-    column: Pick<RawColumnWithMetadata, 'id'>,
-    displayOptions: ColumnMetadata | null,
+    /** Key is column id, value is display options */
+    changes: Map<number, ColumnMetadata | null>,
   ): Promise<void> {
-    await api.columns.metadata
-      .set({
-        ...this.apiContext,
-        column_meta_data_list: [{ attnum: column.id, ...displayOptions }],
-      })
-      .run();
+    if (!changes.size) {
+      return;
+    }
+
+    const { apiContext } = this;
+    function* getApiRequests() {
+      for (const [columnId, displayOptions] of changes.entries()) {
+        yield api.columns.metadata.set({
+          ...apiContext,
+          column_meta_data_list: [{ attnum: columnId, ...displayOptions }],
+        });
+      }
+    }
+    await batchRun([...getApiRequests()]);
 
     this.fetchedColumns.update((columns) =>
-      columns.map((c) =>
-        c.id === column.id
-          ? {
-              ...c,
-              metadata: { ...c.metadata, ...displayOptions },
-            }
-          : c,
-      ),
+      columns.map((column) => {
+        const metadata = changes.get(column.id);
+        return metadata === undefined ? column : { ...column, metadata };
+      }),
     );
   }
 

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

@@ -70,11 +70,25 @@
     !rows.length;
   $: sheetItemCount = showDummyGhostRow ? 1 : rows.length;
 
-  function setColumnWidth(index: number, width: number | null) {
-    if (queryHandler instanceof QueryManager) {
-      void queryHandler.setColumnDisplayOptions(index, {
-        display_width: width,
-      });
+  async function persistColumnWidths(widthsMap: [string, number | null][]) {
+    for (const [columnId, width] of widthsMap) {
+      if (queryHandler instanceof QueryManager) {
+        const index = columnList.findIndex((c) => c.id === columnId);
+        if (index === -1) return;
+        // This might seem fishy having await inside a loop, but I think it's
+        // okay in this case. It seems to me that the only reason this
+        // `setColumnDisplayOptions` method is async is because of all the
+        // conditional logic happening inside `QueryManager.update` which
+        // _sometimes_ run network requests. Setting column display options
+        // seems to happen synchronously. There don't appear to be any perf
+        // issues with awaiting in a loop here. I didn't want to run these in
+        // parallel because I didn't want to risk race conditions.
+        //
+        // eslint-disable-next-line no-await-in-loop
+        await queryHandler.setColumnDisplayOptions(index, {
+          display_width: width,
+        });
+      }
     }
   }
 </script>
@@ -101,15 +115,15 @@
           inspector.activate('column');
         }
       }}
+      {persistColumnWidths}
     >
       <SheetHeader>
         <SheetOriginCell columnIdentifierKey={ID_ROW_CONTROL_COLUMN} />
-        {#each columnList as processedQueryColumn, i (processedQueryColumn.id)}
+        {#each columnList as processedQueryColumn (processedQueryColumn.id)}
           <ResultHeaderCell
             {processedQueryColumn}
             queryRunner={queryHandler}
             isSelected={columnIds.has(processedQueryColumn.id)}
-            setColumnWidth={(width) => setColumnWidth(i, width)}
           />
         {/each}
       </SheetHeader>

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

@@ -12,7 +12,6 @@
   export let queryRunner: QueryRunner;
   export let processedQueryColumn: ProcessedQueryOutputColumn;
   export let isSelected: boolean;
-  export let setColumnWidth: (width: number | null) => void;
 
   $: ({ runState } = queryRunner);
   $: columnRunState = $runState?.state;
@@ -38,9 +37,5 @@
       }}
     />
   </Button>
-  <SheetCellResizer
-    columnIdentifierKey={processedQueryColumn.id}
-    afterResize={(width) => setColumnWidth(width)}
-    onReset={() => setColumnWidth(null)}
-  />
+  <SheetCellResizer columnId={processedQueryColumn.id} />
 </SheetColumnHeaderCell>

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

@@ -4,6 +4,7 @@
   import { get } from 'svelte/store';
   import { _ } from 'svelte-i18n';
 
+  import type { ColumnMetadata } from '@mathesar/api/rpc/_common/columnDisplayOptions';
   import { ImmutableMap, Spinner } from '@mathesar/component-library';
   import { Sheet } from '@mathesar/components/sheet';
   import { SheetClipboardHandler } from '@mathesar/components/sheet/clipboard';
@@ -19,6 +20,7 @@
     ID_ADD_NEW_COLUMN,
     ID_ROW_CONTROL_COLUMN,
     getTabularDataStoreFromContext,
+    isJoinedColumn,
   } from '@mathesar/stores/table-data';
   import { toast } from '@mathesar/stores/toast';
   import { modalRecordViewContext } from '@mathesar/systems/record-view-modal/modalRecordViewContext';
@@ -58,6 +60,8 @@
     isLoading,
     selection,
     recordsData,
+    allColumns,
+    columnsDataStore,
   } = $tabularData);
   $: $tabularData, (tableInspectorTab = 'table');
   $: clipboardHandler = new SheetClipboardHandler({
@@ -121,6 +125,19 @@
     ...[...$joinedColumns.keys()].map((id): [string, number] => [id, 300]),
   ]);
   $: showTableInspector = $tableInspectorVisible && supportsTableInspector;
+
+  function persistColumnWidths(widthsMap: [string, number | null][]): void {
+    function* getChanges(): Generator<[number, ColumnMetadata | null]> {
+      for (const [columnId, width] of widthsMap) {
+        const column = $allColumns.get(columnId);
+        if (!column) continue;
+        // Joined columns do not persist width to the database
+        if (isJoinedColumn(column)) continue;
+        yield [parseInt(column.id, 10), { display_width: width }];
+      }
+    }
+    void columnsDataStore.setDisplayOptions(new Map(getChanges()));
+  }
 </script>
 
 <div class="table-view">
@@ -137,6 +154,7 @@
           {columnWidths}
           {selection}
           {usesVirtualList}
+          {persistColumnWidths}
           onCellSelectionStart={(cell) => {
             if (cell.type === 'column-header-cell') {
               tableInspectorTab = 'column';

mathesar_ui/src/systems/table-view/header/Header.svelte

@@ -12,7 +12,6 @@
   import {
     ID_ADD_NEW_COLUMN,
     ID_ROW_CONTROL_COLUMN,
-    type JoinedColumn,
     type ProcessedColumn,
     getTabularDataStoreFromContext,
     isJoinedColumn,
@@ -30,8 +29,7 @@
   export let table: Table;
 
   $: columnOrder = columnOrder ?? [];
-  $: ({ selection, processedColumns, allColumns, columnsDataStore } =
-    $tabularData);
+  $: ({ selection, processedColumns, allColumns } = $tabularData);
 
   let locationOfFirstDraggedColumn: number | undefined = undefined;
   let selectedColumnIdsOrdered: string[] = [];
@@ -99,19 +97,6 @@
     selectedColumnIdsOrdered = [];
     newColumnOrder = [];
   }
-
-  function saveColumnWidth(
-    column: ProcessedColumn | JoinedColumn,
-    width: number | null,
-  ) {
-    // Joined columns do not persist width to the database
-    if (isJoinedColumn(column)) {
-      return;
-    }
-    void columnsDataStore.setDisplayOptions(column.column, {
-      display_width: width,
-    });
-  }
 </script>
 
 <SheetHeader>
@@ -150,11 +135,7 @@
           </Droppable>
         </Draggable>
       {/if}
-      <SheetCellResizer
-        columnIdentifierKey={columnId}
-        afterResize={(width) => saveColumnWidth(columnFabric, width)}
-        onReset={() => saveColumnWidth(columnFabric, null)}
-      />
+      <SheetCellResizer {columnId} />
     </SheetColumnHeaderCell>
   {/each}
 

mathesar_ui/src/systems/table-view/table-inspector/column/ColumnFormatting.svelte

@@ -35,7 +35,9 @@
   async function save() {
     typeChangeState = { state: 'processing' };
     try {
-      await columnsDataStore.setDisplayOptions(column.column, displayOptions);
+      await columnsDataStore.setDisplayOptions(
+        new Map([[column.column.id, displayOptions]]),
+      );
       actionButtonsVisible = false;
       typeChangeState = { state: 'success' };
     } catch (err) {