finos · texodus · Sep 23, 2019 · Sep 23, 2019 · Sep 23, 2019 · Sep 23, 2019
diff --git a/docs/md/styles.md b/docs/md/styles.md
@@ -47,13 +47,17 @@ perspective-viewer {
 |`background`<br/>`--hypergrid--background`|For the element, e.g. the control panel `background`|
 |`font-family`<br/>`--hypergrid--font-family`<br/>`--`_TYPE_`--hypergrid--font-family`|The default `font-family`.|
 |`font-size`<br/>`--hypergrid--font-size`<br/>`--`_TYPE_`--hypergrid--font-size`|The default `font-size`.|
+
+|`--column-type--content`<br/>`--`TYPE`--column-type--content`|`content` property of the Column type badge ("abc", "123", etc in default)|
+
 |`--hypergrid--width`<br/>`--`_TYPE_`--hypergrid--width`|Initial column width|
 |`--hypergrid--max-width`<br/>`--`_TYPE_`--hypergrid--max-width`|Max column width|
 |`--hypergrid--min-width`<br/>`--`_TYPE_`--hypergrid--min-width`|Min column width|
 |`--hypergrid-row-hover--background`|Row background on hover (additive)|
 |`--hypergrid-cell-hover--background`|Column background on hover (additive)|
 |`--hypergrid-positive--color`<br/>`--`_TYPE_`--hypergrid-positive--color`|Foreground color for (+)|
 |`--hypergrid-negative--color`<br/>`--`_TYPE_`--hypergrid-negative--color`|Foreground color for (-)|
+
 |`--d3fc-full--gradient`<br/>`--highcharts-full--gradient`|The color gradient for [-, +] ranges on numeric columns.|
 |`--d3fc-positive--gradient`<br/>`--highcharts-positive--gradient`|The color gradient for [+, +] ranges on numeric columns.|
 |`--d3fc-negative--gradient`<br/>`--highcharts-negative--gradient`|The color gradient for [-, -] ranges on numeric columns.|

diff --git a/examples/simple/index.html b/examples/simple/index.html
@@ -28,6 +28,8 @@
 
     <div id="list">
         <a href="superstore-arrow.html">Superstore example as an Apache Arrow</a>
+        <a href="superstore-hypergrid.html">Editable example</a>
+        <a href="superstore-vaporwave.html">Themed example</a>
         <a href="streaming.html">High-frequency streaming random data example</a>
         <a href="citibike.html">NYC Citibike inventory example</a>
         <a href="csv.html">User-provided CSV example</a>

diff --git a/examples/simple/superstore-vaporwave.html b/examples/simple/superstore-vaporwave.html
@@ -0,0 +1,51 @@
+<!--
+
+   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.
+
+-->
+
+<!DOCTYPE html>
+<html>
+
+<head>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+
+    <script src="perspective-viewer.js"></script>
+    <script src="perspective-viewer-hypergrid.js"></script>
+    <script src="perspective-viewer-d3fc.js"></script>
+
+    <script src="perspective.js"></script>
+
+    <link rel='stylesheet' href="index.css">
+    <link rel='stylesheet' href="vaporwave.css" is="custom-style">
+
+
+</head>
+
+<body>
+
+    <perspective-viewer plugin="treemap" row-pivots='["State","Ship Mode"]' sort='[["Profit","desc"]]' columns='["Sales", "Profit"]'>
+
+    </perspective-viewer>
+
+    <script>
+        window.addEventListener('WebComponentsReady', function() {
+            var xhr = new XMLHttpRequest();
+            xhr.open('GET', 'superstore.arrow', true);
+            xhr.responseType = "arraybuffer"
+            xhr.onload = function() {
+                var el = document.getElementsByTagName('perspective-viewer')[0];
+                el.load(xhr.response);
+                el.toggleConfig();
+            }
+            xhr.send(null);
+        });
+    </script>
+
+</body>
+
+</html>
diff --git a/packages/perspective-test/jest.all.config.js b/packages/perspective-test/jest.all.config.js
@@ -12,6 +12,7 @@ module.exports = {
         ".js$": "@finos/perspective-test/src/js/transform.js",
         ".html$": "html-loader-jest"
     },
+    transformIgnorePatterns: ["/node_modules/(?!lit-html).+$"],
     automock: false,
     setupFiles: ["@finos/perspective-test/src/js/beforeEachSpec.js"],
     reporters: ["default", "@finos/perspective-test/src/js/reporter.js"]

diff --git a/packages/perspective-test/jest.config.js b/packages/perspective-test/jest.config.js
@@ -7,6 +7,7 @@ module.exports = {
         ".js$": "@finos/perspective-test/src/js/transform.js",
         ".html$": "html-loader-jest"
     },
+    transformIgnorePatterns: ["/node_modules/(?!lit-html).+\\.js"],
     automock: false,
     setupFiles: ["@finos/perspective-test/src/js/beforeEachSpec.js"],
     reporters: ["default", "@finos/perspective-test/src/js/reporter.js"]

diff --git a/packages/perspective-test/src/js/reporter.js b/packages/perspective-test/src/js/reporter.js
@@ -9,7 +9,6 @@
 
 const cp = require("child_process");
 const fs = require("fs");
-const path = require("path");
 const termimg = require("term-img");
 
 module.exports = class ImageViewerReporter {
@@ -44,12 +43,15 @@ module.exports = class ImageViewerReporter {
     onTestResult(testRunConfig, testResults) {
         for (const test of testResults.testResults) {
             if (test.status === "failed") {
-                const ancestors = test.ancestorTitles.map(x => x.replace(".html", ""));
+                const ancestors = test.ancestorTitles.filter(x => x.indexOf(".html") > -1).map(x => x.replace(".html", "").replace(/ /g, "_"));
                 const desc = ancestors.join("/");
                 const name = test.title.replace(/ /g, "_").replace(/[\.']/g, "");
                 const filename = `${testRunConfig.path.split("/test")[0]}/screenshots/${desc}/${name}.diff.png`;
-                if (fs.existsSync(path.join(process.cwd(), filename))) {
+                const alt_filename = `screenshots/${desc}/${name}.diff.png`;
+                if (filename) {
                     this.write_img(test.title, ancestors, filename);
+                } else if (fs.existsSync(alt_filename)) {
+                    this.write_img(test.title, ancestors, alt_filename);
                 }
             }
         }

diff --git a/packages/perspective-viewer-d3fc/test/html/themed-template.html b/packages/perspective-viewer-d3fc/test/html/themed-template.html
@@ -19,20 +19,12 @@
 
         <style>
           perspective-viewer {
-            --active-column--background: none;
-            --select--background-color: none;
-            --column-drop-container--background: none;
+            --active--background: none;
             background-color: #2a2c2f;
             color: #cfd8dc;
             --plugin--background: #2f3136;
-            --column-drop-label--color: #666;
-            --column--border-color: #3b3f46;
-            --column-drop-target--background: #135d78;
-            --active-column-selector--color: #22a0ce;
-            --column_type-float--color: #22a0ce;
-            --column_type-string--color: #ff8888;
-            --psp-text-field--border-color: #22a0ce;
-            --button-hover--color: #22a0ce;
+            --float--column-type--color: #22a0ce;
+            --string--column-type--color: #ff8888;
             --d3fc-legend--text: #bbbbbb;
             --d3fc-axis--ticks: #bbbbbb;
             --d3fc-axis--lines: #555555;

diff --git a/packages/perspective-viewer-d3fc/test/results/results.json b/packages/perspective-viewer-d3fc/test/results/results.json
@@ -52,18 +52,18 @@
     "bar-x.html/sorts by an alpha column.": "2d4b21e46970db1025115dedfa72a916",
     "bar-x.html/displays visible columns.": "03cd0e6049cd07f34addf32f6effc14c",
     "bar-themed.html/shows a grid without any settings applied.": "47a633099c7cd24242a96db3afdc1925",
-    "bar-themed.html/pivots by a row.": "01a4d75ba62d2142de2a441d23a59c44",
-    "bar-themed.html/pivots by two rows.": "a8a4631ea67207a0b6d2f83ef3ddd6b4",
-    "bar-themed.html/pivots by a column.": "c8ccbef9ac4041967fd4914e93342e64",
-    "bar-themed.html/pivots by a row and a column.": "243c1c410f21a7d36b168cc5cc13d95e",
-    "bar-themed.html/pivots by two rows and two columns.": "36a06a0ac0ee333f723c00a4d3098865",
-    "bar-themed.html/sorts by a hidden column.": "1569e9e5e1cef16057930e5279c745e6",
-    "bar-themed.html/sorts by a numeric column.": "9cc80afd6a7f65b164e7f0df609cf5d8",
-    "bar-themed.html/filters by a numeric column.": "1d59a33b85d6ccfc583ed2140a13ecd6",
-    "bar-themed.html/filters by a datetime column.": "c522c61e3eb9731032028fa51e738925",
-    "bar-themed.html/highlights invalid filter.": "1a8f9d4292e8b003f7b9792b57df5853",
-    "bar-themed.html/sorts by an alpha column.": "49a19ce45f1dcb5f776bfa9b3c346d0d",
-    "bar-themed.html/displays visible columns.": "aab64d299ed8f4aacebecc95d40d8e97",
+    "bar-themed.html/pivots by a row.": "92c732573c880d4ce1ae4de47c102baa",
+    "bar-themed.html/pivots by two rows.": "73f6b4b949b3b45beee1c781836e2282",
+    "bar-themed.html/pivots by a column.": "53c8f4a757350a9482ec0f55ac4081c7",
+    "bar-themed.html/pivots by a row and a column.": "0f742962544e596c1138b0929db78fb1",
+    "bar-themed.html/pivots by two rows and two columns.": "fa4993e3ed6dcc051404ec332495193c",
+    "bar-themed.html/sorts by a hidden column.": "b061da75960f82333b9348d3e330b353",
+    "bar-themed.html/sorts by a numeric column.": "59ff85bf24aef9420bffc04748deadb6",
+    "bar-themed.html/filters by a numeric column.": "d6f401e816c934a1e3c244cf54815d34",
+    "bar-themed.html/filters by a datetime column.": "3f53abaffc7fc623e3d253451967cf4b",
+    "bar-themed.html/highlights invalid filter.": "bd81701a1e0b8c7a49fd79d642c8069e",
+    "bar-themed.html/sorts by an alpha column.": "9e3246d9a3c811ef7aec94dab1c8ace1",
+    "bar-themed.html/displays visible columns.": "24d68129f2a5dfda72326455ac588278",
     "yscatter.html/shows a grid without any settings applied.": "a7d598f0b351ec2aa44c30773ab2646a",
     "yscatter.html/pivots by a row.": "90e46fedadbcf83649a06f80205755e4",
     "yscatter.html/pivots by two rows.": "005318aac38e572b55b8f4753b5236aa",
@@ -120,5 +120,5 @@
     "sunburst.html/highlights invalid filter.": "e48566c24b1655a202d1d227424f71c5",
     "sunburst.html/sorts by an alpha column.": "dca6a09d9b0c4b4a3fd6cdb91fa1eb1a",
     "sunburst.html/displays visible columns.": "92769650f8ccaf823d070f3bd12aa73b",
-    "__GIT_COMMIT__": "7b829d2c5a9bea3a6bbdd679ef9b4c86ad356ccd"
+    "__GIT_COMMIT__": "85e51dae0d9fb6a4e799037d5816951f34425ab5"
 }
diff --git a/packages/perspective-viewer-highcharts/test/results/results.json b/packages/perspective-viewer-highcharts/test/results/results.json
@@ -99,5 +99,5 @@
     "bar.html/perspective dispatches perspective-click event with one filter.": "32d64db28af46dfe77fad5cc1ca8af9c",
     "bar.html/perspective dispatches perspective-click event with filters.": "c18f49270244dfe4a6b32270ec30d99d",
     "bar.html/dates on the x-axis display correctly.": "591a1c8e9493451b6885b9651917ffff",
-    "__GIT_COMMIT__": "7b829d2c5a9bea3a6bbdd679ef9b4c86ad356ccd"
+    "__GIT_COMMIT__": "85e51dae0d9fb6a4e799037d5816951f34425ab5"
 }
diff --git a/packages/perspective-viewer-hypergrid/src/js/PerspectiveDataModel.js b/packages/perspective-viewer-hypergrid/src/js/PerspectiveDataModel.js
@@ -248,9 +248,13 @@ function cellStyle(gridCellConfig) {
                 if (gridCellConfig.value > 0) {
                     gridCellConfig.color = gridCellConfig.columnColorNumberPositive || "rgb(160,207,255)";
                     gridCellConfig.backgroundColor = gridCellConfig.columnBackgroundColorNumberPositive ? gridCellConfig.columnBackgroundColorNumberPositive : gridCellConfig.backgroundColor;
+                    gridCellConfig.borderBottom = gridCellConfig.borderBottomPositive ? gridCellConfig.borderBottomPositive : gridCellConfig.borderBottom;
+                    gridCellConfig.borderRight = gridCellConfig.borderRightPositive ? gridCellConfig.borderRightPositive : gridCellConfig.borderRight;
                 } else {
                     gridCellConfig.color = gridCellConfig.columnColorNumberNegative || "rgb(255,136,136)";
                     gridCellConfig.backgroundColor = gridCellConfig.columnBackgroundColorNumberNegative ? gridCellConfig.columnBackgroundColorNumberNegative : gridCellConfig.backgroundColor;
+                    gridCellConfig.borderBottom = gridCellConfig.borderBottomNegative ? gridCellConfig.borderBottomNegative : gridCellConfig.borderBottom;
+                    gridCellConfig.borderRight = gridCellConfig.borderRightNegative ? gridCellConfig.borderRightNegative : gridCellConfig.borderRight;
                 }
             }
         } else if (type === "boolean") {

diff --git a/packages/perspective-viewer-hypergrid/src/js/hypergrid-tree-cell-renderer.js b/packages/perspective-viewer-hypergrid/src/js/hypergrid-tree-cell-renderer.js
@@ -39,15 +39,15 @@ export function treeLineRendererPaint(gc, config) {
     gc.rect(x, y, width, height);
     gc.fillRect(x, y, width, height);
 
-    var fgColor = config.isSelected ? config.foregroundSelectionColor : config.color;
+    var fgColor = config.gridLinesHColor; //config.isSelected ? config.foregroundSelectionColor : config.lineColor;
     gc.cache.strokeStyle = fgColor;
     gc.cache.fillStyle = fgColor;
     var xOffset = x;
     var lineNodeSpace = 16;
     var nodeRadius = 3;
 
     // Draw vertical line
-    gc.globalAlpha = 0.3;
+    gc.globalAlpha = 0.7;
     gc.strokeStyle = fgColor;
 
     gc.beginPath();
@@ -71,20 +71,20 @@ export function treeLineRendererPaint(gc, config) {
         gc.moveTo(xOffset + lineNodeSpace + nodeRadius, y + height / 2);
         gc.arc(xOffset + lineNodeSpace, y + height / 2, nodeRadius, 0, 2 * Math.PI);
         if (config.isCellHovered) {
-            gc.globalAlpha = 0.45;
+            gc.globalAlpha = 1.0;
             gc.fill();
-            gc.globalAlpha = 0.3;
+            gc.globalAlpha = 0.7;
         }
     } else {
         gc.lineTo(xOffset + lineNodeSpace + nodeRadius, y + height / 2);
     }
 
     if (parent && !leaf) {
-        gc.globalAlpha = 0.8;
+        gc.globalAlpha = 0.5;
         gc.fill();
         gc.moveTo(xOffset + lineNodeSpace, y + height / 2 + nodeRadius);
         gc.lineTo(xOffset + lineNodeSpace, y + height);
-        gc.globalAlpha = 0.3;
+        gc.globalAlpha = 0.7;
     }
 
     gc.stroke();

diff --git a/packages/perspective-viewer-hypergrid/src/js/hypergrid.js b/packages/perspective-viewer-hypergrid/src/js/hypergrid.js
@@ -47,6 +47,7 @@ bindTemplate(TEMPLATE, style)(
                 this.grid.get_styles = () => get_styles(this);
 
                 const grid_properties = default_grid_properties();
+                grid_properties.renderer = ["SimpleCell", "Borders"];
                 this.grid.installPlugins([perspectivePlugin, [groupedHeaderPlugin, grid_properties.groupedHeader]]);
 
                 // Broken in fin-hypergrid-grouped-header 0.1.2

diff --git a/packages/perspective-viewer-hypergrid/src/js/perspective-plugin.js b/packages/perspective-viewer-hypergrid/src/js/perspective-plugin.js
@@ -11,6 +11,63 @@ import rectangular from "rectangular";
 import superscript from "superscript-number";
 import lodash from "lodash";
 
+import cellRenderersRegistry from "fin-hypergrid/src/cellRenderers";
+
+var Borders = cellRenderersRegistry.BaseClass.extend("Borders", {
+    paint: function(gc, config) {
+        var bounds = config.bounds,
+            x = bounds.x,
+            y = bounds.y,
+            w = bounds.width,
+            h = bounds.height - 1;
+        var color;
+
+        gc.save();
+        gc.translate(-0.5, 0.5); // paint "sharp" lines on pixels instead of "blury" lines between pixels
+        gc.cache.lineWidth = 1;
+
+        color = config.borderTop;
+        if (color) {
+            gc.beginPath();
+            gc.moveTo(x, y);
+            gc.lineTo(x + w, y);
+            gc.cache.strokeStyle = color;
+            gc.stroke();
+        }
+
+        color = config.borderRight;
+        if (color) {
+            gc.beginPath();
+            gc.moveTo(x + w, y);
+            gc.lineTo(x + w, y + h);
+            gc.cache.strokeStyle = color;
+            gc.stroke();
+        }
+
+        color = config.borderBottom;
+        if (color) {
+            gc.beginPath();
+            gc.moveTo(x, y + h);
+            gc.lineTo(x + w, y + h);
+            gc.cache.strokeStyle = color;
+            gc.stroke();
+        }
+
+        color = config.borderLeft;
+        if (color) {
+            gc.beginPath();
+            gc.moveTo(x, y);
+            gc.lineTo(x, y + h);
+            gc.cache.strokeStyle = color;
+            gc.stroke();
+        }
+
+        gc.restore();
+    }
+});
+
+cellRenderersRegistry.add(Borders);
+
 /**
  * @this {Behavior}
  * @param payload

diff --git a/packages/perspective-viewer-hypergrid/src/js/styles.js b/packages/perspective-viewer-hypergrid/src/js/styles.js
@@ -29,6 +29,12 @@ properties.add_styles({
     treeHeaderForegroundSelectionColor: `${title}-tree-header--color`,
     treeHeaderBackgroundSelectionColor: `${title}-tree-header--background`,
     foregroundSelectionColor: [`${title}--color`, `color`],
+    borderBottom: `${title}--border-bottom-color`,
+    borderRight: `${title}--border-right-color`,
+    borderBottomPositive: `${title}-positive--border-bottom-color`,
+    borderBottomNegative: `${title}-negative--border-bottom-color`,
+    borderRightPositive: `${title}-positive--border-right-color`,
+    borderRightNegative: `${title}-negative--border-right-color`,
     color: [`${title}--color`, `color`],
     columnHeaderBackgroundColor: `${title}-header--background`,
     columnHeaderSeparatorColor: `${title}-separator--color`,
@@ -40,6 +46,11 @@ properties.add_styles({
     columnBackgroundColorNumberNegative: `${title}-negative--background`,
     selectionRegionOverlayColor: `${title}-editor--background`,
     selectionRegionOutlineColor: `${title}-editor--border-color`,
+    gridLinesVColor: `${title}-gridline--color`,
+    gridLinesHColor: `${title}-gridline--color`,
+    lineColor: `${title}-gridline--color`,
+    fixedLinesVColor: `${title}-gridline--color`,
+    fixedLinesHColor: `${title}-gridline--color`,
     halign: `${title}--text-align`,
     columnHeaderHalign: `${title}--text-align`,
     hoverCellHighlight: {
@@ -152,7 +163,6 @@ const base_grid_properties = {
 const light_theme_overrides = {
     backgroundColor: "#ffffff",
     color: "#666",
-    lineColor: "#AAA",
     font: '12px "Open Sans", Helvetica, sans-serif',
     columnHeaderColor: "#666",
     columnHeaderHalign: "left", // except: group header labels always 'center'; numbers always 'right' per `setPSP`

diff --git a/packages/perspective-viewer-hypergrid/test/results/results.darwin.json b/packages/perspective-viewer-hypergrid/test/results/results.darwin.json