Merge pull request #881 from finos/allow-missing-columns

Allow missing columns

Author: texodus

package.json

@@ -25,6 +25,7 @@
         "@babel/cli": "^7.2.3",
         "@babel/core": "^7.1.0",
         "@babel/plugin-proposal-decorators": "^7.1.2",
+        "@babel/plugin-proposal-optional-chaining": "^7.7.5",
         "@babel/plugin-transform-for-of": "^7.0.0",
         "@babel/plugin-transform-runtime": "^7.1.0",
         "@babel/polyfill": "^7.0.0",

packages/perspective-test/babel.config.js

@@ -17,5 +17,11 @@ module.exports = {
         ]
     ],
     sourceType: "unambiguous",
-    plugins: ["lodash", ["@babel/plugin-proposal-decorators", {legacy: true}], "transform-custom-element-classes", "@babel/plugin-proposal-class-properties"]
+    plugins: [
+        "lodash",
+        ["@babel/plugin-proposal-decorators", {legacy: true}],
+        "transform-custom-element-classes",
+        "@babel/plugin-proposal-optional-chaining",
+        "@babel/plugin-proposal-class-properties"
+    ]
 };

packages/perspective-test/src/js/index.js

@@ -12,6 +12,7 @@ const crypto = require("crypto");
 const puppeteer = require("puppeteer");
 const path = require("path");
 const execSync = require("child_process").execSync;
+const {track_mouse} = require("./mouse_helper.js");
 
 const readline = require("readline");
 
@@ -60,6 +61,7 @@ let browser,
 async function get_new_page() {
     page = await browser.newPage();
 
+    page.track_mouse = track_mouse.bind(page);
     page.shadow_click = async function(...path) {
         await this.evaluate(path => {
             let elem = document;
@@ -238,7 +240,7 @@ expect.extend({
     }
 });
 
-test.capture = function capture(name, body, {timeout = 60000, viewport = null, wait_for_update = true, fail_on_errors = true} = {}) {
+test.capture = function capture(name, body, {timeout = 60000, viewport = null, wait_for_update = true, fail_on_errors = true, preserve_hover = false} = {}) {
     const _url = page_url;
     const _reload_page = page_reload;
     const spec = test(
@@ -302,9 +304,12 @@ test.capture = function capture(name, body, {timeout = 60000, viewport = null, w
                     });
                 }
 
+                // Move the mouse offscreen so prev tests dont get hover effects
+                await page.mouse.move(10000, 10000);
                 await body(page);
-
-                await page.mouse.move(1000, 1000);
+                if (!preserve_hover) {
+                    await page.mouse.move(10000, 10000);
+                }
 
                 if (wait_for_update) {
                     await page.waitForSelector("perspective-viewer:not([updating])");

packages/perspective-test/src/js/mouse_helper.js

@@ -0,0 +1,88 @@
+/******************************************************************************
+ *
+ * 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.
+ *
+ */
+
+/**
+ * This injects a box into the page that moves with the mouse; Useful for
+ * debugging.
+ *
+ * Lifted from https://github.com/puppeteer/puppeteer/issues/4336
+ */
+module.exports.track_mouse = function track_mouse() {
+    this.evaluate(() => {
+        const CSS = `
+        .mouse-helper {
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 20px;
+        height: 20px;
+        background: rgba(0,0,0,.4);
+        border: 1px solid red;
+        border-radius: 0px;
+        margin-left: -10px;
+        margin-top: -10px;
+        }
+        .mouse-helper.button-1 {
+        transition: none;
+        background: rgba(0,0,0,0.9);
+        }
+        .mouse-helper.butto
+        n-2 {
+        transition: none;
+        border-color: rgba(0,0,255,0.9);
+        }
+        .mouse-helper.button-3 {
+        transition: none;
+        border-radius: 4px;
+        }
+        .mouse-helper.button-4 {
+        transition: none;
+        border-color: rgba(255,0,0,0.9);
+        }
+        .mouse-helper.button-5 {
+        transition: none;
+        border-color: rgba(0,255,0,0.9);
+        }`;
+        const box = document.createElement("div");
+        box.classList.add("mouse-helper");
+        const styleElement = document.createElement("style");
+        styleElement.innerHTML = CSS;
+        document.head.appendChild(styleElement);
+        document.body.appendChild(box);
+        document.addEventListener(
+            "mousemove",
+            event => {
+                box.style.left = event.pageX + "px";
+                box.style.top = event.pageY + "px";
+                updateButtons(event.buttons);
+            },
+            true
+        );
+        document.addEventListener(
+            "mousedown",
+            event => {
+                updateButtons(event.buttons);
+                box.classList.add("button-" + event.which);
+            },
+            true
+        );
+        document.addEventListener(
+            "mouseup",
+            event => {
+                updateButtons(event.buttons);
+                box.classList.remove("button-" + event.which);
+            },
+            true
+        );
+        function updateButtons(buttons) {
+            for (let i = 0; i < 5; i++) box.classList.toggle("button-" + i, buttons & (1 << i));
+        }
+    });
+};

packages/perspective-viewer-d3fc/babel.config.js

@@ -17,5 +17,5 @@ module.exports = {
         ]
     ],
     sourceType: "unambiguous",
-    plugins: ["lodash", ["@babel/plugin-proposal-decorators", {legacy: true}], "transform-custom-element-classes"]
+    plugins: ["lodash", ["@babel/plugin-proposal-decorators", {legacy: true}], "transform-custom-element-classes", "@babel/plugin-proposal-optional-chaining"]
 };

packages/perspective-viewer-d3fc/package.json

@@ -33,7 +33,7 @@
         "build": "npm-run-all --silent build:babel build:webpack:cjs build:webpack:umd",
         "test:build": "cpx \"test/html/*\" dist/umd",
         "watch": "webpack --color --watch --config src/config/d3fc.watch.config.js",
-        "test:run": "jest --rootDir=. --config=../perspective-test/jest.config.js --silent --color 2>&1",
+        "test:run": "jest --rootDir=. --config=../perspective-test/jest.config.js --silent --color --noStackTrace 2>&1",
         "test": "npm-run-all test:build test:run",
         "clean": "rimraf dist",
         "clean:screenshots": "rimraf \"screenshots/**/*.@(failed|diff).png\""

packages/perspective-viewer-d3fc/src/js/charts/sunburst.js

@@ -78,8 +78,8 @@ sunburst.plugin = {
     max_columns: 50,
     initial: {
         type: "number",
-        count: 2,
-        names: ["Size", "Color"]
+        count: 1,
+        names: ["Size", "Color", "Tooltip"]
     }
 };
 

packages/perspective-viewer-d3fc/src/js/charts/treemap.js

@@ -69,7 +69,8 @@ treemap.plugin = {
     max_columns: 50,
     initial: {
         type: "number",
-        count: 2
+        count: 1,
+        names: ["Size", "Color", "Tooltip"]
     }
 };
 export default treemap;

packages/perspective-viewer-d3fc/src/js/charts/xy-scatter.js

@@ -24,7 +24,7 @@ import nearbyTip from "../tooltip/nearbyTip";
 function xyScatter(container, settings) {
     const data = pointData(settings, filterDataByGroup(settings));
     const symbols = symbolTypeFromGroups(settings);
-    const useGroupColors = settings.mainValues.length <= 2;
+    const useGroupColors = settings.realValues.length <= 2 || settings.realValues[2] === null;
     let color = null;
     let legend = null;
 
@@ -40,7 +40,7 @@ function xyScatter(container, settings) {
         legend = colorRangeLegend().scale(color);
     }
 
-    const size = settings.mainValues.length > 3 ? seriesLinearRange(settings, data, "size").range([10, 10000]) : null;
+    const size = settings.realValues[3] ? seriesLinearRange(settings, data, "size").range([10, 10000]) : null;
 
     const series = fc
         .seriesCanvasMulti()
@@ -100,7 +100,7 @@ xyScatter.plugin = {
     initial: {
         type: "number",
         count: 2,
-        names: ["X Axis", "Y Axis", "Color", "Size"]
+        names: ["X Axis", "Y Axis", "Color", "Size", "Tooltip"]
     },
     selectMode: "toggle"
 };

packages/perspective-viewer-d3fc/src/js/data/pointData.js

@@ -21,8 +21,8 @@ function seriesToPoints(settings, data) {
         mainValues: settings.mainValues.map(v => col[v.name]),
         x: col[settings.mainValues[0].name],
         y: col[settings.mainValues[1].name],
-        colorValue: settings.mainValues.length > 2 ? col[settings.mainValues[2].name] : undefined,
-        size: settings.mainValues.length > 3 ? col[settings.mainValues[3].name] : undefined,
+        colorValue: settings.realValues[2] ? col[settings.realValues[2]] : undefined,
+        size: settings.realValues[3] ? col[settings.realValues[3]] : undefined,
         key: data.key,
         row: col
     }));