Merge pull request finos#903 from finos/hypergrid-selection-state

Make `perspective-viewer-hypergrid` selection state save/restore compatible

packages/perspective-viewer-hypergrid/src/js/PerspectiveDataModel.js

@@ -175,6 +175,22 @@ export default require("datasaur-local").extend("PerspectiveDataModel", {
         }
     },
 
+    getSelectedRowID() {
+        if (this._grid.selectionModel.hasRowSelections()) {
+            const row_data = this.data[this._grid.getSelectedRows()[0]];
+            if (row_data) {
+                return row_data.__ID__;
+            }
+        }
+    },
+
+    setSelectedRowID(index) {
+        if (this._grid.properties.rowSelection) {
+            this._selected_row_index = index;
+            this._update_selection();
+        }
+    },
+
     pspFetch: async function(rect) {
         const selection_enabled = this._grid.properties.rowSelection || this._viewer.hasAttribute("editable");
         const range = pad_data_window(rect, this._config.row_pivots, selection_enabled);

packages/perspective-viewer-hypergrid/src/js/hypergrid.js

@@ -218,6 +218,11 @@ async function grid_create(div, view, task, max_rows, max_cols, force) {
         await hypergrid.behavior.dataModel._outstanding.req;
     }
 
+    if (this._plugin_config) {
+        suppress_paint(hypergrid, () => dataModel.setSelectedRowID(this._plugin_config.selected));
+        delete this._plugin_config;
+    }
+
     await hypergrid.canvas.resize(true);
     hypergrid.allowEvents(true);
 }
@@ -229,6 +234,15 @@ const plugin = {
     update: grid_update,
     deselectMode: "pivots",
     styleElement: style_element,
+    save: function() {
+        const hypergrid = get_hypergrid.call(this);
+        if (hypergrid && hypergrid.selectionModel.hasRowSelections()) {
+            return {selected: hypergrid.behavior.dataModel.getSelectedRowID()};
+        }
+    },
+    restore: function(config) {
+        this._plugin_config = config;
+    },
     resize: async function() {
         const hypergrid = get_hypergrid.call(this);
         if (hypergrid) {

packages/perspective-viewer-hypergrid/src/js/perspective-plugin.js

@@ -278,6 +278,41 @@ const right_click_handler = e => {
     e.target.parentElement.parentElement.parentElement.dispatchEvent(new_event);
 };
 
+async function getCellConfig(row_idx, col_idx) {
+    const config = this.dataModel.getConfig();
+    const row_pivots = config.row_pivots;
+    const column_pivots = config.column_pivots;
+    const start_row = row_idx >= 0 ? row_idx : 0;
+    const end_row = start_row + 1;
+    const r = await this.dataModel._view.to_json({start_row, end_row});
+    const row_paths = r.map(x => x.__ROW_PATH__);
+    const row_pivots_values = row_paths[0] || [];
+    const row_filters = row_pivots
+        .map((pivot, index) => {
+            const pivot_value = row_pivots_values[index];
+            return pivot_value ? [pivot, "==", pivot_value] : undefined;
+        })
+        .filter(x => x);
+    const column_index = row_pivots.length > 0 ? col_idx + 1 : col_idx;
+    const column_paths = Object.keys(r[0])[column_index];
+    const result = {row: r[0]};
+    let column_filters = [];
+    if (column_paths) {
+        const column_pivot_values = column_paths.split("|");
+        result.column_names = [column_pivot_values[column_pivot_values.length - 1]];
+        column_filters = column_pivots
+            .map((pivot, index) => {
+                const pivot_value = column_pivot_values[index];
+                return pivot_value ? [pivot, "==", pivot_value] : undefined;
+            })
+            .filter(x => x)
+            .filter(([, , value]) => value !== "__ROW_PATH__");
+    }
+
+    const filters = config.filter.concat(row_filters).concat(column_filters);
+    result.config = {filters};
+    return result;
+}
 // `install` makes this a Hypergrid plug-in
 export const install = function(grid) {
     addSortChars(grid.behavior.charMap);
@@ -289,6 +324,21 @@ export const install = function(grid) {
     grid.addEventListener("fin-column-sort", sortColumn.bind(grid));
 
     grid.addEventListener("fin-canvas-context-menu", right_click_handler);
+    grid.addEventListener("fin-row-selection-changed", async function(event) {
+        const rows = event.detail.rows;
+
+        const selected = rows.length > 0;
+        const detail = selected ? await getCellConfig.call(event.detail.grid.behavior, rows[0]) : {config: {filters: []}};
+
+        event.detail.grid.canvas.dispatchEvent(
+            new CustomEvent("perspective-select", {
+                bubbles: true,
+                composed: true,
+                detail: {selected, ...detail}
+            })
+        );
+    });
+
     Object.getPrototypeOf(grid.behavior).cellClicked = async function(event) {
         event.primitiveEvent.preventDefault();
         event.handled = true;
@@ -347,11 +397,7 @@ export const install = function(grid) {
             new CustomEvent("perspective-click", {
                 bubbles: true,
                 composed: true,
-                detail: {
-                    config: {filters},
-                    column_names,
-                    row: r[0]
-                }
+                detail: await getCellConfig.call(this, y, x)
             })
         );
 

packages/perspective-viewer-hypergrid/test/js/selection.spec.js

@@ -42,6 +42,26 @@ utils.with_server({}, () => {
                         }, viewer);
                         await page.waitForSelector("perspective-viewer:not([updating])");
                     });
+                    test.capture("selection state can be set from restore api", async page => {
+                        await page.waitForSelector("perspective-viewer:not([updating])");
+                        await page.$("perspective-viewer");
+                        await page.focus("perspective-viewer");
+                        await page.mouse.click(80, 60);
+
+                        await page.evaluate(async () => await document.querySelector("perspective-viewer").notifyResize());
+
+                        let config = await page.evaluate(() => document.querySelector("perspective-viewer").save());
+                        expect(config.plugin_config.selected).toBe("Marge");
+
+                        await page.evaluate(async () => {
+                            const viewer = document.querySelector("perspective-viewer");
+                            await viewer.restore({plugin_config: {selected: "Homer"}});
+                            await viewer.notifyResize();
+                        });
+
+                        config = await page.evaluate(() => document.querySelector("perspective-viewer").save());
+                        expect(config.plugin_config.selected).toBe("Homer");
+                    });
                 });
             });
             describe("row pivots", () => {
@@ -56,6 +76,10 @@ utils.with_server({}, () => {
                         await page.focus("perspective-viewer");
                         await page.mouse.click(80, 60);
                         await page.mouse.move(80, 40);
+
+                        let config = await page.evaluate(() => document.querySelector("perspective-viewer").save());
+                        expect(config.plugin_config.selected).toBe("Homer");
+
                         await page.evaluate(async () => await document.querySelector("perspective-viewer").notifyResize());
                     });
 
@@ -74,6 +98,26 @@ utils.with_server({}, () => {
                         }, viewer);
                         await page.waitForSelector("perspective-viewer:not([updating])");
                     });
+
+                    test.capture("selection state can be set from restore api", async page => {
+                        await page.waitForSelector("perspective-viewer:not([updating])");
+                        await page.$("perspective-viewer");
+                        await page.focus("perspective-viewer");
+                        await page.mouse.click(80, 60);
+                        await page.evaluate(async () => await document.querySelector("perspective-viewer").notifyResize());
+
+                        let config = await page.evaluate(() => document.querySelector("perspective-viewer").save());
+                        expect(config.plugin_config.selected).toBe("Marge");
+
+                        await page.evaluate(async () => {
+                            const viewer = document.querySelector("perspective-viewer");
+                            await viewer.restore({plugin_config: {selected: "Homer"}});
+                            await viewer.notifyResize();
+                        });
+
+                        config = await page.evaluate(() => document.querySelector("perspective-viewer").save());
+                        expect(config.plugin_config.selected).toBe("Homer");
+                    });
                 });
             });
         },

packages/perspective-viewer-hypergrid/test/results/linux.docker.json

@@ -26,7 +26,7 @@
     "superstore_memoized_column_meta_should_reinterpret_metadata_when_only_row_pivots_are_changed": "ec6807a695b5693a2ed592d5aed583db",
     "superstore_resets_viewable_area_when_the_logical_size_expands_": "82f08a672fd31199031673b79bf8625d",
     "superstore_resets_viewable_area_when_the_physical_size_expands_": "13d3164f406bf6a7d053c21dd506a0d5",
-    "__GIT_COMMIT__": "b8015e9c9c7a640bf056656b7f577debe7e4a5e5",
+    "__GIT_COMMIT__": "ca2998551b927061466faea6c73459807a5349ae",
     "empty_perspective-click_is_fired_when_an_empty_dataset_is_loaded_first": "7e5b653226145e1ab9f82e2417d89d7b",
     "hypergrid_clicking_on_a_cell_in_the_grid_when_no_filters_are_present_perspective_dispatches_perspective-click_event_with_correct_properties_": "13d3164f406bf6a7d053c21dd506a0d5",
     "hypergrid_clicking_on_a_cell_in_the_grid_when_a_filter_is_present_perspective_dispatches_perspective-click_event_with_one_filter_": "b66684328af5084134b0d3ed8d095eaf",
@@ -46,5 +46,7 @@
     "regressions_Updates_should_not_render_an_extra_row_for_column_only_views": "f2c61f5fa18572dc7d36a8f918ad61ed",
     "regressions_Updates_regular_updates": "c519987a2a2179eb5b50fbcd99c87a95",
     "regressions_Updates_saving_a_computed_column_does_not_interrupt_update_rendering": "5b94b47e26123842e366c31c0dd2ae43",
-    "superstore_replaces_all_rows_": "9cd0751b14f8ba6c857bf9b92f1d366b"
+    "superstore_replaces_all_rows_": "9cd0751b14f8ba6c857bf9b92f1d366b",
+    "selectable_no_pivots_selecting_a_row_selection_state_can_be_set_from_restore_api": "99cf0f58de9825f07b4004cb94351ab0",
+    "selectable_row_pivots_selecting_a_row_selection_state_can_be_set_from_restore_api": "99cf0f58de9825f07b4004cb94351ab0"
 }