perspective-dev · texodus · Dec 21, 2020 · Nov 9, 2020
diff --git a/packages/perspective-viewer-datagrid/src/js/click.js b/packages/perspective-viewer-datagrid/src/js/click.js
@@ -0,0 +1,34 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+import getCellConfig from "./getCellConfig";
+
+async function clickListener(table, viewer, event) {
+    const meta = table.getMeta(event.target);
+    if (!meta) return;
+    const {x, y} = meta;
+
+    const {row, column_names, config} = await getCellConfig(this, y, x);
+
+    viewer.dispatchEvent(
+        new CustomEvent("perspective-click", {
+            bubbles: true,
+            composed: true,
+            detail: {
+                row,
+                column_names,
+                config
+            }
+        })
+    );
+}
+
+export function configureClick(table, viewer) {
+    table.addEventListener("click", clickListener.bind(this, table, viewer));
+}
diff --git a/packages/perspective-viewer-datagrid/src/js/getCellConfig.js b/packages/perspective-viewer-datagrid/src/js/getCellConfig.js
@@ -0,0 +1,44 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+export default async function getCellConfig({_view, _config}, row_idx, col_idx) {
+    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 _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;
+}
diff --git a/packages/perspective-viewer-datagrid/src/js/plugin.js b/packages/perspective-viewer-datagrid/src/js/plugin.js
@@ -14,6 +14,7 @@ import {createModel, configureRegularTable, formatters} from "regular-table/dist
 import MATERIAL_STYLE from "../less/regular_table.less";
 
 import {configureRowSelectable, deselect} from "./row_selection.js";
+import {configureClick} from "./click.js";
 import {configureEditable} from "./editing.js";
 import {configureSortable} from "./sorting.js";
 
@@ -48,6 +49,7 @@ const datagridPlugin = lock(async function(regular, viewer, view) {
         model = await createModel(regular, table, view);
         configureRegularTable(regular, model);
         await configureRowSelectable.call(model, regular, viewer);
+        await configureClick.call(model, regular, viewer);
         await configureEditable.call(model, regular, viewer);
         await configureSortable.call(model, regular, viewer);
         INSTALLED.set(regular, model);
@@ -157,7 +159,7 @@ class DatagridPlugin {
 }
 
 /**
- * Appends the default tbale CSS to `<head>`, should be run once on module
+ * Appends the default table CSS to `<head>`, should be run once on module
  * import.
  *
  */

diff --git a/packages/perspective-viewer-datagrid/src/js/row_selection.js b/packages/perspective-viewer-datagrid/src/js/row_selection.js
@@ -7,44 +7,9 @@
  *
  */
 
+import getCellConfig from "./getCellConfig";
 const selected_rows_map = new WeakMap();
 
-async function getCellConfig({_view, _config}, row_idx, col_idx) {
-    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 _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;
-}
-
 async function selectionListener(regularTable, viewer, event) {
     const meta = regularTable.getMeta(event.target);
     if (!viewer.hasAttribute("selectable")) return;

diff --git a/packages/perspective-viewer-datagrid/test/js/superstore.spec.js b/packages/perspective-viewer-datagrid/test/js/superstore.spec.js
@@ -34,7 +34,90 @@ utils.with_server({}, () => {
                 await page.evaluate(element => element.setAttribute("row-pivots", "[]"), viewer);
                 await page.shadow_click("perspective-viewer", "#config_button");
             });
+
+            test.capture("perspective dispatches perspective-click event with correct details", async page => {
+                const detail = await click_details(page);
+                expect(detail).toEqual({
+                    row: {
+                        "Row ID": 15,
+                        "Order ID": "US-2012-118983",
+                        "Order Date": 1353542400000,
+                        "Ship Date": 1353888000000,
+                        "Ship Mode": "Standard Class",
+                        "Customer ID": "HP-14815",
+                        Segment: "Home Office",
+                        Country: "United States",
+                        City: "Fort Worth",
+                        State: "Texas",
+                        "Postal Code": 76106,
+                        Region: "Central",
+                        "Product ID": "OFF-AP-10002311",
+                        Category: "Office Supplies",
+                        "Sub-Category": "Appliances",
+                        Sales: 68.81,
+                        Quantity: 5,
+                        Discount: 0.8,
+                        Profit: -123.858
+                    },
+                    column_names: ["Order Date"],
+                    config: {filters: []}
+                });
+            });
+
+            test.capture("perspective dispatches perspective-click event with correct details when filter is set", async page => {
+                const viewer = await page.$("perspective-viewer");
+                await page.shadow_click("perspective-viewer", "#config_button");
+                await page.evaluate(element => element.setAttribute("row-pivots", '["State", "Category"]'), viewer);
+                await page.waitForSelector("perspective-viewer:not([updating])");
+                const detail = await click_details(page, 310, 320);
+                expect(detail).toEqual({
+                    row: {
+                        __ROW_PATH__: ["Delaware", "Technology"],
+                        "Row ID": 97,
+                        "Order ID": 2,
+                        "Order Date": 2,
+                        "Ship Date": 2,
+                        "Ship Mode": 2,
+                        "Customer ID": 2,
+                        Segment: 2,
+                        Country: 2,
+                        City: 2,
+                        State: 2,
+                        "Postal Code": 39802,
+                        Region: 2,
+                        "Product ID": 2,
+                        Category: 2,
+                        "Sub-Category": 2,
+                        Sales: 66.8,
+                        Quantity: 5,
+                        Discount: 0,
+                        Profit: 11.054
+                    },
+                    config: {
+                        filters: [
+                            ["State", "==", "Delaware"],
+                            ["Category", "==", "Technology"]
+                        ]
+                    }
+                });
+            });
         },
         {reload_page: false, root: path.join(__dirname, "..", "..")}
     );
 });
+
+const click_details = async (page, x = 310, y = 300) => {
+    const viewer = await page.$("perspective-viewer");
+
+    const click_event = page.evaluate(
+        element =>
+            new Promise(resolve => {
+                element.addEventListener("perspective-click", e => {
+                    resolve(e.detail);
+                });
+            }),
+        viewer
+    );
+    await page.mouse.click(x, y);
+    return await click_event;
+};
diff --git a/packages/perspective-viewer-datagrid/test/results/linux.docker.json b/packages/perspective-viewer-datagrid/test/results/linux.docker.json
@@ -14,5 +14,7 @@
     "superstore_displays_visible_columns_": "e2f92ee6e81b832b526e4d262577eb4e",
     "superstore_resets_viewable_area_when_the_logical_size_expands_": "e0dcc4db517a7ff5471f27301aaceb29",
     "superstore_resets_viewable_area_when_the_physical_size_expands_": "7e269a544b300a204b82806f32bef31b",
-    "__GIT_COMMIT__": "ffcc3be9fb137f23a21e3737e07e809e55e71e49"
+    "superstore_perspective_dispatches_perspective-click_event_with_correct_details": "7e269a544b300a204b82806f32bef31b",
+    "superstore_perspective_dispatches_perspective-click_event_with_correct_details_when_filter_is_set": "797a084f6e159cc9dc2f62dcd8b50609",
+    "__GIT_COMMIT__": "6ebb74ab5cc1d3d5bdcf127ec0db8452f1987a45"
 }