Merge pull request #3098 from perspective-dev/fix-viewport-sorting

Fix viewport scroll regression in datagrid

Author: texodus

packages/viewer-datagrid/src/js/data_listener/index.js

@@ -63,14 +63,19 @@ export function createDataListener(viewer) {
                 (x) => x !== "__ROW_PATH__" && x !== "__ID__",
             );
 
-            const old_length = this._column_paths.length;
-            this._column_paths.splice(
-                new_window.start_col,
-                new_col_paths.length,
-                ...new_col_paths,
-            );
+            let changed_cols = false;
+            for (let i = 0; i < new_col_paths.length; i++) {
+                if (
+                    this._column_paths[new_window.start_col + i] !==
+                    new_col_paths[i]
+                ) {
+                    changed_cols = true;
+                    this._column_paths[new_window.start_col + i] =
+                        new_col_paths[i];
+                }
+            }
 
-            if (this._column_paths.length !== old_length || old_length === 0) {
+            if (changed_cols) {
                 const [a, b] = await Promise.all([
                     this._view.schema(),
                     this._view.expression_schema(),

packages/viewer-datagrid/test/js/superstore.spec.js

@@ -207,6 +207,46 @@ test.describe("Datagrid with superstore data set", () => {
     });
 });
 
+test.describe("Datagrid regressions", () => {
+    // https://github.com/perspective-dev/perspective/issues/3097
+    test("Sorting a column does not break viewport metadata", async ({
+        page,
+    }) => {
+        await page.goto("/tools/test/src/html/basic-test.html");
+        await page.evaluate(async () => {
+            while (!window["__TEST_PERSPECTIVE_READY__"]) {
+                await new Promise((x) => setTimeout(x, 10));
+            }
+        });
+
+        const td = await page.evaluateHandle(async () => {
+            const elem = await document
+                .querySelector("perspective-viewer-datagrid")
+                .shadowRoot.querySelector("regular-table");
+            elem.scrollLeft = 5000;
+            await elem.draw();
+            return document
+                .querySelector("perspective-viewer-datagrid")
+                .shadowRoot.querySelector("table thead tr th:nth-child(3)");
+        });
+
+        await td.click();
+        await page.evaluate(async () => {
+            await document.querySelector("perspective-viewer").flush();
+            const elem = await document
+                .querySelector("perspective-viewer-datagrid")
+                .shadowRoot.querySelector("regular-table");
+            elem.scrollLeft = 0;
+            await elem.draw();
+        });
+
+        compareContentsToSnapshot(
+            await getDatagridContents(page),
+            "sorting-a-column-does-not-break-viewport-emtadata.txt",
+        );
+    });
+});
+
 test.describe("Datagrid with superstore arrow data set", () => {
     test.beforeEach(async ({ page }) => {
         await page.goto(