Merge pull request #1326 from finos/vieux-deux

Add `SplitPanel` and port to Yew

packages/perspective-jupyterlab/test/js/resize.spec.js

@@ -17,7 +17,7 @@ utils.with_server({}, () => {
             test.capture(
                 "Basic widget functions",
                 async page => {
-                    await page.shadow_click("perspective-viewer", "#config_button");
+                    await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                     await page.waitForSelector("perspective-viewer[settings]");
                     await page.waitForSelector("perspective-viewer:not([updating])");
                 },
@@ -27,7 +27,7 @@ utils.with_server({}, () => {
             test.capture(
                 "Resize the container causes the widget to resize",
                 async page => {
-                    await page.shadow_click("perspective-viewer", "#config_button");
+                    await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                     await page.waitForSelector("perspective-viewer:not([updating])");
                     await page.evaluate(async () => {
                         document.querySelector(".PSPContainer").style = "position:absolute;top:0;left:0;width:300px;height:300px";
@@ -45,7 +45,7 @@ utils.with_server({}, () => {
             test.capture(
                 "row_pivots traitlet works",
                 async page => {
-                    await page.shadow_click("perspective-viewer", "#config_button");
+                    await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                     await page.evaluate(() => {
                         window.__WIDGET__.row_pivots = ["State"];
                     });

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

@@ -338,10 +338,9 @@ test.capture = function capture(name, body, {timeout = 60000, viewport = null, w
                     } else {
                         await page.evaluate(async x => {
                             const viewer = document.querySelector("perspective-viewer");
-                            viewer._show_config = true;
                             viewer.restore(x);
                             await viewer.notifyResize();
-                            await viewer.toggleConfig();
+                            await viewer.toggleConfig(false);
                         }, OLD_SETTINGS[test_root + _url]);
                     }
                 }

packages/perspective-viewer-d3fc/src/less/chart.less

@@ -190,6 +190,7 @@
 
         & .x-label {
             height: 1.2em !important;
+            line-height: 1em !important;
         }
 
         & d3fc-canvas.plot-area {

packages/perspective-viewer-d3fc/test/js/integration/candlestick.spec.js

@@ -26,7 +26,7 @@ utils.with_server({}, () => {
 
             test.capture("filter to date range.", async page => {
                 const viewer = await page.$("perspective-viewer");
-                await page.shadow_click("perspective-viewer", "#config_button");
+                await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                 await page.evaluate(element => element.setAttribute("column-pivots", '["Name"]'), viewer);
                 await page.evaluate(element => element.setAttribute("filters", '[["Date", ">", "2019-01-01"]]'), viewer);
                 await page.evaluate(() => document.activeElement.blur());

packages/perspective-viewer-d3fc/test/js/integration/line.spec.js

@@ -23,7 +23,7 @@ utils.with_server({}, () => {
 
             test.capture("Sets a category axis when pivoted by a computed datetime", async page => {
                 const viewer = await page.$("perspective-viewer");
-                await page.shadow_click("perspective-viewer", "#config_button");
+                await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                 await page.evaluate(element => element.setAttribute("computed-columns", JSON.stringify(["hour_bucket('Ship Date')"])), viewer);
                 await page.waitForSelector("perspective-viewer:not([updating])");
                 await page.evaluate(element => element.setAttribute("row-pivots", '["hour_bucket(Ship Date)"]'), viewer);

packages/perspective-viewer-d3fc/test/js/integration/ohlc.spec.js

@@ -27,7 +27,7 @@ utils.with_server({}, () => {
 
             test.capture("filter to date range.", async page => {
                 const viewer = await page.$("perspective-viewer");
-                await page.shadow_click("perspective-viewer", "#config_button");
+                await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                 await page.evaluate(element => element.setAttribute("column-pivots", '["Name"]'), viewer);
                 await page.evaluate(element => element.setAttribute("filters", '[["Date", ">", "2019-01-01"]]'), viewer);
                 await page.waitForSelector("perspective-viewer:not([updating])");

packages/perspective-viewer-d3fc/test/js/integration/scatter.spec.js

@@ -25,7 +25,7 @@ utils.with_server({}, () => {
                 "tooltips with no color and size.",
                 async page => {
                     const viewer = await page.$("perspective-viewer");
-                    await page.shadow_click("perspective-viewer", "#config_button");
+                    await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                     await page.evaluate(element => element.setAttribute("columns", '["Sales", "Profit", null, null, "Quantity"]'), viewer);
                     await page.waitForSelector("perspective-viewer:not([updating])");
                     const columns = JSON.parse(await page.evaluate(element => element.getAttribute("columns"), viewer));
@@ -51,7 +51,7 @@ utils.with_server({}, () => {
                 "tooltip columns works",
                 async page => {
                     const viewer = await page.$("perspective-viewer");
-                    await page.shadow_click("perspective-viewer", "#config_button");
+                    await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                     await page.evaluate(element => element.setAttribute("columns", '["Sales", "Profit", "Discount", "Quantity", "State"]'), viewer);
                     const columns = JSON.parse(await page.evaluate(element => element.getAttribute("columns"), viewer));
                     expect(columns).toEqual(["Sales", "Profit", "Discount", "Quantity", "State"]);
@@ -77,7 +77,7 @@ utils.with_server({}, () => {
                 "tooltip columns works when color column is null",
                 async page => {
                     const viewer = await page.$("perspective-viewer");
-                    await page.shadow_click("perspective-viewer", "#config_button");
+                    await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                     await page.evaluate(element => element.setAttribute("columns", '["Sales", "Profit", null, "Quantity", "State"]'), viewer);
                     const columns = JSON.parse(await page.evaluate(element => element.getAttribute("columns"), viewer));
                     expect(columns).toEqual(["Sales", "Profit", null, "Quantity", "State"]);

packages/perspective-viewer-d3fc/test/js/integration/sunburst.spec.js

@@ -23,7 +23,7 @@ utils.with_server({}, () => {
 
             test.skip("sunburst label shows formatted date", async page => {
                 const viewer = await page.$("perspective-viewer");
-                await page.shadow_click("perspective-viewer", "#config_button");
+                await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                 await page.evaluate(element => element.setAttribute("row-pivots", '["Ship Date"]'), viewer);
                 await page.evaluate(element => element.setAttribute("columns", '["Sales", "Profit"]'), viewer);
                 await page.evaluate(element => element.setAttribute("filters", '[["Product ID", "==", "FUR-BO-10001798"]]'), viewer);
@@ -45,7 +45,7 @@ utils.with_server({}, () => {
 
             test.skip("sunburst parent button shows formatted date", async page => {
                 const viewer = await page.$("perspective-viewer");
-                await page.shadow_click("perspective-viewer", "#config_button");
+                await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                 await page.evaluate(element => element.setAttribute("row-pivots", '["Ship Date", "City"]'), viewer);
                 await page.evaluate(element => element.setAttribute("columns", '["Sales", "Profit"]'), viewer);
                 await page.evaluate(element => element.setAttribute("filters", '[["Product ID", "==", "FUR-BO-10001798"]]'), viewer);

packages/perspective-viewer-d3fc/test/js/integration/treemap.spec.js

@@ -25,7 +25,7 @@ utils.with_server({}, () => {
                 "with column position 1 set to null.",
                 async page => {
                     const viewer = await page.$("perspective-viewer");
-                    await page.shadow_click("perspective-viewer", "#config_button");
+                    await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                     await page.evaluate(element => element.setAttribute("row-pivots", '["State"]'), viewer);
                     await page.evaluate(element => element.setAttribute("columns", '["Sales", null, "Quantity"]'), viewer);
                     const columns = JSON.parse(await page.evaluate(element => element.getAttribute("columns"), viewer));
@@ -38,7 +38,7 @@ utils.with_server({}, () => {
                 "tooltip columns works",
                 async page => {
                     const viewer = await page.$("perspective-viewer");
-                    await page.shadow_click("perspective-viewer", "#config_button");
+                    await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                     await page.evaluate(element => element.setAttribute("row-pivots", '["State"]'), viewer);
                     await page.evaluate(element => element.setAttribute("columns", '["Sales", "Profit", "State"]'), viewer);
                     const columns = JSON.parse(await page.evaluate(element => element.getAttribute("columns"), viewer));
@@ -65,7 +65,7 @@ utils.with_server({}, () => {
                 "treemap label shows formatted date",
                 async page => {
                     const viewer = await page.$("perspective-viewer");
-                    await page.shadow_click("perspective-viewer", "#config_button");
+                    await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                     await page.evaluate(element => element.setAttribute("row-pivots", '["Ship Date"]'), viewer);
                     await page.evaluate(element => element.setAttribute("columns", '["Sales", "Profit"]'), viewer);
                     await page.waitForSelector("perspective-viewer:not([updating])");
@@ -75,7 +75,7 @@ utils.with_server({}, () => {
 
             test.skip("treemap parent button shows formatted date", async page => {
                 const viewer = await page.$("perspective-viewer");
-                await page.shadow_click("perspective-viewer", "#config_button");
+                await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                 await page.evaluate(element => element.setAttribute("row-pivots", '["Ship Date", "Ship Mode"]'), viewer);
                 await page.evaluate(element => element.setAttribute("columns", '["Sales", "Profit"]'), viewer);
                 await page.waitForSelector("perspective-viewer:not([updating])");

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

@@ -1,7 +1,7 @@
 {
     "candlestick_filter_by_a_single_instrument_": "d3ef6be674cc045b4c8551f111281f78",
     "candlestick_filter_to_date_range_": "92955652e0bf120d4af9bed3bb845afb",
-    "__GIT_COMMIT__": "69bd7b9b6f3b396615df6b3bf67d315cc014de1d",
+    "__GIT_COMMIT__": "7dc62a7b9c561f8645319dc06cbee749a80f76ba",
     "ohlc_filter_by_a_single_instrument_": "ed4232a783fbd733ce9267ddda98b7f0",
     "ohlc_filter_to_date_range_": "c5cfd254b5b901879e392455d2f90af6",
     "scatter_shows_a_grid_without_any_settings_applied_": "8677946ab48f16a376c421500d59e6c0",

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

@@ -20,19 +20,19 @@ utils.with_server({}, () => {
 
             test.capture("resets viewable area when the logical size expands.", async page => {
                 const viewer = await page.$("perspective-viewer");
-                await page.shadow_click("perspective-viewer", "#config_button");
+                await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                 await page.evaluate(element => element.setAttribute("column-pivots", '["Category"]'), viewer);
                 await page.waitForSelector("perspective-viewer:not([updating])");
                 await page.evaluate(element => element.setAttribute("row-pivots", '["City"]'), viewer);
             });
 
             test.capture("resets viewable area when the physical size expands.", async page => {
                 const viewer = await page.$("perspective-viewer");
-                await page.shadow_click("perspective-viewer", "#config_button");
+                await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
                 await page.evaluate(element => element.setAttribute("row-pivots", '["Category"]'), viewer);
                 await page.waitForSelector("perspective-viewer:not([updating])");
                 await page.evaluate(element => element.setAttribute("row-pivots", "[]"), viewer);
-                await page.shadow_click("perspective-viewer", "#config_button");
+                await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());
             });
 
             test.capture("perspective dispatches perspective-click event with correct details", async page => {
@@ -66,7 +66,7 @@ utils.with_server({}, () => {
 
             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(async () => await document.querySelector("perspective-viewer").toggleConfig());
                 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);

packages/perspective-viewer/src/config/rollup.config.js

@@ -34,7 +34,8 @@ export default () => {
         {
             input: "src/js/viewer.js",
             external: id => {
-                // `@finos/perspective-vieux` is inlined for now.  So we need to bundle:
+                // `@finos/perspective-vieux` is inlined for now.  So we need to
+                // bundle:
                 // * Files in this package (starting with '.')
                 // * Anything else in the package root ..
                 //     * .. including the inlined `@finos/perspective-vieux` ..

packages/perspective-viewer/src/html/viewer.html

@@ -9,8 +9,9 @@
 
 <template id="perspective-viewer">
 
-    <div id="app">
-        <div id='side_panel' class="column fixed noselect">
+    <perspective-vieux id="app">
+
+        <div slot="side_panel" id='side_panel' class="column fixed noselect">
             <div id="vis_selector_container">
                 <select id="vis_selector">
                 </select>
@@ -27,65 +28,53 @@
                 </div>
                 <perspective-computed-expression-widget></perspective-computed-expression-widget>
             </div>
-            <div id="resize_bar"></div>
         </div>
-        <div class="column noselect">
-            <div id='top_panel'>
-                <div class="rrow">
-                    <div id="row_pivots">
-                        <div class="psp-text-field">
-                            <ul class="psp-text-field__input" for="row-pivots"></ul>
-                            <label for="row_pivots"></label>
-                        </div>
-                    </div>
-                </div>
-                <span id="transpose_button" class="rrow centered" title="Transpose Pivots">&#x21C4;</span>
-                <div class="rrow">
-                    <div id="column_pivots">
-                        <div class="psp-text-field">
-                            <ul class="psp-text-field__input" for="column-pivots"></ul>
-                            <label for="column_pivots"></label>
-                        </div>
+
+        <div slot="top_panel" id='top_panel'>
+            <div class="rrow">
+                <div id="row_pivots">
+                    <div class="psp-text-field">
+                        <ul class="psp-text-field__input" for="row-pivots"></ul>
+                        <label for="row_pivots"></label>
                     </div>
                 </div>
-                <div class="rrow">
-                    <div id="sort">
-                        <div class="psp-text-field">
-                            <ul class="psp-text-field__input" for="sort"></ul>
-                            <label for="sort"></label>
-                        </div>
+            </div>
+            <span id="transpose_button" class="rrow centered" title="Transpose Pivots">&#x21C4;</span>
+            <div class="rrow">
+                <div id="column_pivots">
+                    <div class="psp-text-field">
+                        <ul class="psp-text-field__input" for="column-pivots"></ul>
+                        <label for="column_pivots"></label>
                     </div>
                 </div>
-                <div class="rrow" style='flex-grow:3;height:auto;flex:1 1 400px;max-width:none'>
-                    <div id="filters">
-                        <div class="psp-text-field">
-                            <ul class="psp-text-field__input" for='filters'></ul>
-                            <label for="filters"></label>
-                        </div>
+            </div>
+            <div class="rrow">
+                <div id="sort">
+                    <div class="psp-text-field">
+                        <ul class="psp-text-field__input" for="sort"></ul>
+                        <label for="sort"></label>
                     </div>
                 </div>
             </div>
-            <div id="pivot_chart_container">
-                <div class="plugin_information plugin_information--warning hidden" id="plugin_information--size">
-                    <span class="plugin_information__text" id="plugin_information_count">Estimated rendering</span>
-                    <span class="plugin_information__actions">
-                        <span class="plugin_information__action">Render all points</span>
-                    </span>
+            <div class="rrow" style='flex-grow:3;height:auto;flex:1 1 400px;max-width:none'>
+                <div id="filters">
+                    <div class="psp-text-field">
+                        <ul class="psp-text-field__input" for='filters'></ul>
+                        <label for="filters"></label>
+                    </div>
                 </div>
-                <div id="pivot_chart"></div>
             </div>
         </div>
 
-        <div id="config_button" class="noselect button" title="Right click for additional options"></div>
-
-        <div style="display:none" id='drop_target'>
-            <div id='drop_target_inner'>
-
+        <div slot="main_panel" id="pivot_chart_container">
+            <div class="plugin_information plugin_information--warning hidden" id="plugin_information--size">
+                <span class="plugin_information__text" id="plugin_information_count">Estimated rendering</span>
+                <span class="plugin_information__actions">
+                    <span class="plugin_information__action">Render all points</span>
+                </span>
             </div>
+            <div id="pivot_chart"></div>
         </div>
 
-        <perspective-statusbar></perspective-statusbar>
-    </div>
-
-
+    </perspective-vieux>
 </template>