Serialize table column widths (#1411)

* Moves column width into model so it persists on reload and will sync with all views of the tile.

* Allow column width to be specified in curriculum.

* Patch react-data-grid so it alerts clients when width changes are complete and can optionally forget user specified widths.

Co-authored-by: Kirk Swenson <[email protected]>

Author: tealefristoe

package-lock.json

@@ -66,6 +66,7 @@
     "lint:unused": "tsc --noUnusedLocals --project .",
     "migrate": "node ./migrations/migrate",
     "migrate:debug": "node --inspect-brk ./migrations/migrate",
+    "postinstall": "patch-package",
     "start": "webpack-dev-server --hot",
     "start:secure": "webpack-dev-server --https --hot --cert ~/.localhost-ssl/localhost.pem --key ~/.localhost-ssl/localhost.key",
     "stats": "webpack --profile --json --mode production > stats.json",
@@ -142,7 +143,6 @@
     "@typescript-eslint/parser": "^5.35.1",
     "autoprefixer": "^10.4.8",
     "babel-loader": "^8.2.5",
-    "canvas": "^2.10.1",
     "common-tags": "^1.8.2",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
@@ -215,6 +215,7 @@
     "mobx-react": "^7.5.2",
     "nanoid": "^4.0.0",
     "object-hash": "^3.0.0",
+    "patch-package": "^6.4.7",
     "query-string": "7.1.1",
     "rc-slider": "^10.0.1",
     "react": "^17.0.2",

package.json

@@ -0,0 +1,68 @@
+diff --git a/node_modules/react-data-grid/lib/bundle.js b/node_modules/react-data-grid/lib/bundle.js
+index d6d69ff..633ddaf 100644
+--- a/node_modules/react-data-grid/lib/bundle.js
++++ b/node_modules/react-data-grid/lib/bundle.js
+@@ -1115,12 +1115,19 @@ function HeaderCell({
+       const width = event.clientX + offset - currentTarget.getBoundingClientRect().left;
+ 
+       if (width > 0) {
+-        onResize(column, width);
++        // [CC] Call onResize with complete: false
++        onResize(column, width, false);
+       }
+     }
+ 
+     function onPointerUp(event) {
+       if (event.pointerId !== pointerId) return;
++
++      // [CC] Determine the width then call onResize with complete: true
++      const width = event.clientX + offset - currentTarget.getBoundingClientRect().left;
++      onResize(column, width, true);
++      // [/CC]
++
+       window.removeEventListener('pointermove', onPointerMove);
+       window.removeEventListener('pointerup', onPointerUp);
+     }
+@@ -1887,13 +1894,20 @@ function DataGrid({
+ 
+     selectCell
+   }));
+-  const handleColumnResize = useCallback((column, width) => {
++  // [CC] Add optional complete parameter, move onColumnResize() before setColumnWidths(),
++  // and delete saved column width depending on value of onColumnResize()
++  const handleColumnResize = useCallback((column, width, complete) => {
++    const result = onColumnResize?.(column.idx, width, complete);
+     setColumnWidths(columnWidths => {
+       const newColumnWidths = new Map(columnWidths);
+-      newColumnWidths.set(column.key, width);
++      if (result) {
++        newColumnWidths.delete(column.key);
++      } else {
++        newColumnWidths.set(column.key, width);
++      }
++      // [/CC]
+       return newColumnWidths;
+     });
+-    onColumnResize == null ? void 0 : onColumnResize(column.idx, width);
+   }, [onColumnResize]);
+   const setDraggedOverRowIdx = useCallback(rowIdx => {
+     setOverRowIdx(rowIdx);
+diff --git a/node_modules/react-data-grid/lib/index.d.ts b/node_modules/react-data-grid/lib/index.d.ts
+index e3d1398..b792226 100644
+--- a/node_modules/react-data-grid/lib/index.d.ts
++++ b/node_modules/react-data-grid/lib/index.d.ts
+@@ -159,7 +159,8 @@ export declare interface DataGridProps<R, SR = unknown> extends SharedDivProps {
+     /** Called when the grid is scrolled */
+     onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+     /** Called when a column is resized */
+-    onColumnResize?: (idx: number, width: number) => void;
++    // [CC] Add optional complete parameter
++    onColumnResize?: (idx: number, width: number, complete?: boolean) => void;
+     /** Function called whenever selected cell is changed */
+     onSelectedCellChange?: (position: Position) => void;
+     /**
+@@ -380,3 +381,4 @@ export declare function ToggleGroupFormatter<R, SR>({ groupKey, isExpanded, isCe
+ export declare function ValueFormatter<R, SR>(props: FormatterProps<R, SR>): JSX.Element | null;
+ 
+ export { }
++

patches/react-data-grid+7.0.0-canary.46.patch

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import { onSnapshot } from "mobx-state-tree";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactDataGrid from "react-data-grid";
 import { TableContentModelType } from "../../../models/tools/table/table-content";
 import { exportTableContentAsJson } from "../../../models/tools/table/table-export";
@@ -39,6 +39,7 @@ const TableToolComponent: React.FC<IToolTileProps> = observer(({
   // Gather data from the model
   const modelRef = useCurrent(model);
   const getContent = useCallback(() => modelRef.current.content as TableContentModelType, [modelRef]);
+  const content = useMemo(() => getContent(), [getContent]);
   const metadata = getContent().metadata;
 
   // Basic operations based on the model
@@ -47,8 +48,7 @@ const TableToolComponent: React.FC<IToolTileProps> = observer(({
   } = useModelDataSet(model);
 
   // Set up user specified columns and function to measure a column
-  // TODO The user specified columns should be moved out of react and into MST
-  const { userColumnWidths, measureColumnWidth } = useMeasureColumnWidth();
+  const { measureColumnWidth, resizeColumn, resizeColumnWidth } = useMeasureColumnWidth({ content });
 
   // Functions for determining the height of rows, including the header
   // These require knowledge of the column widths
@@ -85,7 +85,7 @@ const TableToolComponent: React.FC<IToolTileProps> = observer(({
 
   // The size of the title bar
   const { titleCellWidth, getTitleHeight } =
-    useTitleSize({ readOnly, columns, measureColumnWidth, dataSet: dataSet.current });
+    useTitleSize({ readOnly, columns, measureColumnWidth, dataSet: dataSet.current, rowChanges });
 
   // A function to update the height of the tile based on the content size
   const heightRef = useCurrent(height);
@@ -108,7 +108,7 @@ const TableToolComponent: React.FC<IToolTileProps> = observer(({
 
   // A function to call when a column needs to change width
   const { onColumnResize } = useColumnResize({
-    columns, userColumnWidths, requestRowHeight, triggerRowChange
+    columns, content, requestRowHeight, resizeColumn, resizeColumnWidth, triggerRowChange
   });
   // Finishes setting up the controlsColumn with changeHandlers (which weren't defined when controlColumn was created)
   useControlsColumn({ controlsColumn, readOnly: !!readOnly, onAddColumn, onRemoveRows });
@@ -169,8 +169,8 @@ const TableToolComponent: React.FC<IToolTileProps> = observer(({
     });
   }, [rows, rowHeight, headerHeight, getTitleHeight, getContent, modelRef, readOnly]);
   const exportContentAsTileJson = useCallback(() => {
-    return exportTableContentAsJson(getContent().metadata, dataSet.current);
-  }, [dataSet, getContent]);
+    return exportTableContentAsJson(content.metadata, dataSet.current, content.columnWidth);
+  }, [dataSet, content]);
   useToolApi({ content: getContent(), getTitle, getContentHeight, exportContentAsTileJson,
                 onRegisterToolApi, onUnregisterToolApi });
 
@@ -191,6 +191,13 @@ const TableToolComponent: React.FC<IToolTileProps> = observer(({
     return () => disposer();
   });
 
+  useEffect(() => {
+    const disposer = onSnapshot(content.columnWidths, () => {
+      triggerRowChange();
+    });
+    return () => disposer();
+  });
+
   const toolbarProps = useToolbarToolApi({ id: model.id, enabled: !readOnly, onRegisterToolApi, onUnregisterToolApi });
   return (
     <div className="table-tool">

src/components/tools/table-tool/table-tool.tsx

@@ -1,23 +1,39 @@
 import React, { useCallback } from "react";
-import { TColumn } from "./table-types";
+import { kMinColumnWidth, TColumn } from "./table-types";
+import { TableContentModelType } from "../../../models/tools/table/table-content";
 
 interface IUseColumnResize {
   columns: TColumn[];
-  userColumnWidths: React.MutableRefObject<Record<string, number>>;
+  content: TableContentModelType;
   requestRowHeight: () => void;
+  resizeColumn: React.MutableRefObject<string | undefined>;
+  resizeColumnWidth: React.MutableRefObject<number | undefined>;
   triggerRowChange: () => void;
 }
 export const useColumnResize = ({
-  columns, userColumnWidths, requestRowHeight, triggerRowChange
+  columns, content, requestRowHeight, resizeColumn, resizeColumnWidth, triggerRowChange
 }: IUseColumnResize) => {
-
-  // This is called constantly as the user resizes the column. When we start saving the width to the model,
-  // we'll only want to do so when the user ends adjusting the width.
-  const onColumnResize = useCallback((idx: number, width: number) => {
-    userColumnWidths.current[columns[idx].key] = width;
+  // We had to modify react-data-grid to make this work.
+  // We added the complete boolean, which is true when the user has finished modifying the column width (mouseup).
+  // Additionally, we're returning true to indicate that rdg shouldn't remember the user's specified width, and instead
+  // should always respect the width we send it (since we're remembering the user's width ourselves).
+  const onColumnResize = useCallback((idx: number, width: number, complete: boolean) => {
+    const attrId = columns[idx].key;
+    const legalWidth = Math.max(kMinColumnWidth, width);
+    if (complete) {
+      // We're finished updating the width, so save it to the model
+      content.setColumnWidth(attrId, legalWidth);
+      resizeColumn.current = undefined;
+      resizeColumnWidth.current = undefined;
+    } else {
+      // We're not finished updating the width, so just save it in react for now
+      resizeColumn.current = attrId;
+      resizeColumnWidth.current = legalWidth;
+    }
     requestRowHeight();
     triggerRowChange(); // triggerRowChange is used because triggerColumnChange doesn't force a rerender
-  }, [columns, userColumnWidths, requestRowHeight, triggerRowChange]);
+    return true;
+  }, [columns, content, requestRowHeight, resizeColumn, resizeColumnWidth, triggerRowChange]);
 
   return { onColumnResize };
 };

src/components/tools/table-tool/use-column-resize.ts

@@ -68,7 +68,7 @@ export const useColumnsFromDataSet = ({
         name: attr.name,
         key: attr.id,
         width,
-        resizable: true,
+        resizable: !readOnly,
         headerRenderer: ColumnHeaderCell,
         formatter: getCellFormatter(width, rowHeight),
         editor: !readOnly && !metadata.hasExpression(attr.id) ? CellTextEditor : undefined,
@@ -95,8 +95,8 @@ export const useColumnsFromDataSet = ({
     }
     columnChanges;  // eslint-disable-line no-unused-expressions
     return cols;
-  }, [attributes, headerHeight, rowHeight, RowLabelHeader, RowLabelFormatter, readOnly, columnChanges,
-      controlsColumn, cellClasses, measureColumnWidth, metadata]);
+  }, [attributes, rowHeight, RowLabelHeader, RowLabelFormatter, readOnly, columnChanges,
+      ColumnHeaderCell, controlsColumn, cellClasses, measureColumnWidth, metadata]);
 
   return { columns, controlsColumn, columnEditingName, handleSetColumnEditingName };
 };

src/components/tools/table-tool/use-columns-from-data-set.ts

@@ -28,7 +28,7 @@ interface IUseDataSet {
   rows: TRow[];
   changeHandlers: IContentChangeHandlers;
   columns: TColumn[];
-  onColumnResize: (idx: number, width: number) => void;
+  onColumnResize: (idx: number, width: number, complete: boolean) => void;
 }
 export const useDataSet = ({
   gridRef, model, dataSet, triggerColumnChange, triggerRowChange, readOnly, inputRowId, selectedCell, rows,
@@ -112,9 +112,10 @@ export const useDataSet = ({
       }
     }
   };
-  const handleColumnResize = useCallback((idx: number, width: number) => {
-    onColumnResize(idx, width);
+  const handleColumnResize = useCallback((idx: number, width: number, complete?: boolean) => {
+    const returnVal = onColumnResize(idx, width, complete || false);
     triggerColumnChange();
+    return returnVal;
   }, [onColumnResize, triggerColumnChange]);
   return { hasLinkableRows, onColumnResize: handleColumnResize, onRowsChange, onSelectedCellChange};
 };

src/components/tools/table-tool/use-data-set.ts

@@ -1,14 +1,24 @@
 import { useCallback, useRef } from "react";
 import { kMinColumnWidth } from "./table-types";
 import { IAttribute } from "../../../models/data/attribute";
+import { TableContentModelType } from "../../../models/tools/table/table-content";
 
-export const useMeasureColumnWidth = () => {
-  // In the future, these should come from the model rather than being saved in react land
-  const userColumnWidths = useRef<Record<string, number>>({});
+interface IUseMeasureColumnWidth {
+  content: TableContentModelType;
+}
+export const useMeasureColumnWidth = ({ content }: IUseMeasureColumnWidth) => {
+  // The id of the column that is currently being modified
+  const resizeColumn = useRef<string>();
+  // The current width of the column being modified
+  const resizeColumnWidth = useRef<number>();
 
   const measureColumnWidth = useCallback((attr: IAttribute) => {
-    return Math.max(kMinColumnWidth, userColumnWidths.current[attr.id] || 0);
-  }, []);
+    if (resizeColumn.current === attr.id && resizeColumnWidth.current !== undefined) {
+      return resizeColumnWidth.current;
+    } else {
+      return content.columnWidth(attr.id) || kMinColumnWidth;
+    }
+  }, [content]);
 
-  return { userColumnWidths, measureColumnWidth };
+  return { measureColumnWidth, resizeColumn, resizeColumnWidth };
 };

src/components/tools/table-tool/use-measure-column-width.ts

@@ -11,8 +11,9 @@ interface IProps {
   columns: TColumn[];
   dataSet: IDataSet;
   measureColumnWidth: (attr: IAttribute) => number;
+  rowChanges: number;
 }
-export const useTitleSize = ({ readOnly, columns, dataSet, measureColumnWidth }: IProps) => {
+export const useTitleSize = ({ readOnly, columns, dataSet, measureColumnWidth, rowChanges }: IProps) => {
   const titleCellWidth = useMemo(() => {
     const columnWidth = (column: TColumn) => {
       if (!isDataColumn(column)) {
@@ -27,8 +28,9 @@ export const useTitleSize = ({ readOnly, columns, dataSet, measureColumnWidth }:
                       (sum, col, i) => sum + (i ? columnWidth(col) : 0),
                       1 - (readOnly ? 0 : kControlsColumnWidth));
     };
+    rowChanges; // eslint-disable-line no-unused-expressions
     return getTitleCellWidthFromColumns();
-  }, [readOnly, columns, dataSet, measureColumnWidth]);
+  }, [readOnly, columns, dataSet, measureColumnWidth, rowChanges]);
 
   const getTitleHeight = useCallback(() => {
     const font = `700 ${defaultFont}`;

src/components/tools/table-tool/use-title-size.ts

@@ -7,6 +7,7 @@ import { IDropRowInfo } from "../../models/document/document-content";
 import { cloneTileSnapshotWithoutId, IDragTileItem } from "../../models/tools/tool-tile";
 import { TextContentModel } from "../tools/text/text-content";
 import { IDocumentExportOptions } from "../tools/tool-content-info";
+import { kDefaultColumnWidth } from "../../components/tools/table-tool/table-types";
 import { safeJsonParse } from "../../utilities/js-utils";
 import placeholderImage from "../../assets/image_placeholder.png";
 
@@ -112,7 +113,8 @@ describe("DocumentContentModel", () => {
           { title: "Graph 1", content: { type: "Geometry", objects: [] } },
           { content: { type: "Text", format: "html", text: ["<p></p>"] } }
         ],
-        { title: "Table 1", content: { type: "Table", columns: [{ name: "x" }, { name: "y" }] } },
+        { title: "Table 1", content: { type: "Table",
+          columns: [{ name: "x", width: kDefaultColumnWidth }, { name: "y", width: kDefaultColumnWidth }] } },
         { title: "Drawing 1", content: { type: "Drawing", objects: [] } }
       ]
     });
@@ -1030,8 +1032,8 @@ describe("DocumentContentModel -- move/copy tiles --", () => {
             content: {
               type: "Table",
               columns: [
-                { name: "x", values: [1, 2, 3] },
-                { name: "y", values: [2, 4, 6] }
+                { name: "x", width: kDefaultColumnWidth, values: [1, 2, 3] },
+                { name: "y", width: kDefaultColumnWidth, values: [2, 4, 6] }
               ]
             }
           },

src/models/document/document-content.test.ts

@@ -2,6 +2,7 @@ import { defaultTableContent, kTableToolID, TableContentModel, TableMetadataMode
 import { TableContentTableImport } from "./table-import";
 import { IDataSet } from "../../data/data-set";
 import { kSerializedXKey } from "../../data/expression-utils";
+import { kDefaultColumnWidth } from "../../../components/tools/table-tool/table-types";
 
 // mock Logger calls
 jest.mock("../../../lib/logger", () => {
@@ -35,7 +36,7 @@ describe("TableContent", () => {
     expect(emptyTable.dataSet.cases.length).toBe(0);
     expect(emptyTable.isUserResizable).toBe(true);
 
-    const defaultTable = TableContentModel.create(defaultTableContent());
+    const defaultTable = defaultTableContent();
     expect(defaultTable.type).toBe(kTableToolID);
     expect(defaultTable.isImported).toBe(true);
     expect(defaultTable.dataSet.attributes.length).toBe(2);
@@ -85,6 +86,33 @@ describe("TableContent", () => {
     expect(getCaseNoId(table.dataSet, 2)).toEqual({ xCol: "", yCol: "y3" });
   });
 
+  it("can import an authored table with column widths", () => {
+    const colWidth = 200;
+    const biggerColWidth = 500;
+    const importData: TableContentTableImport = {
+      type: "Table",
+      name: "Table Title",
+      columns: [
+        { name: "xCol", values: ["x1", "x2"] },
+        { name: "yCol", width: colWidth, values: ["y1", "y2", "y3"] }
+      ]
+    };
+    const table = TableContentModel.create(importData);
+    expect(table.type).toBe(kTableToolID);
+    const xCol = table.dataSet.attrFromName("xCol");
+    expect(xCol).not.toBeUndefined();
+    if (xCol) {
+      expect(table.columnWidth(xCol.id)).toEqual(kDefaultColumnWidth);
+    }
+    const yCol = table.dataSet.attrFromName("yCol");
+    expect(yCol).not.toBeUndefined();
+    if (yCol) {
+      expect(table.columnWidth(yCol.id)).toEqual(colWidth);
+      table.setColumnWidth(yCol.id, biggerColWidth);
+      expect(table.columnWidth(yCol.id)).toEqual(biggerColWidth);
+    }
+  });
+
   // Table Remodel 8/9/2022
   // Loading expressions stopped working, and we ran out of time to fix it.
   // We hope to reimplement these tests sometime in the future.