Merge pull request #1556 from finos/fix-examples

Fix examples

.gitattributes

@@ -1,6 +1,16 @@
 *.ipynb linguist-documentation
-docs/* linguist-documentation
+docs/**/* linguist-documentation
 python/perspective/notebooks/* linguist-documentation
 python/perspective/docs/* linguist-documentation
 results/*.json linguist-documentation
-*.js text eol=lf
+*.js text eol=lf
+**/test/**/* linguist-documentation
+**/tests/**/* linguist-documentation
+examples/**/* linguist-documentation
+scripts/* linguist-documentation
+packages/perspective-bench/**/* linguist-documentation
+packages/perspective-test/**/* linguist-documentation
+cmake/** linguist-documentation
+CMakeLists.txt linguist-documentation
+docker/** linguist-documentation
+**/*.sh linguist-documentation

docs/static/css/custom.css

@@ -348,11 +348,4 @@ pre code.hljs {
 .blockContent code.hljs.css.language-bash {
     background: #000000;
     color: #fff;
-}
-
-perspective-column-style {
-    background-color: #2a2c2f !important;
-    color: #c5c9d0 !important;
-    border: 1px solid #3b3f46 !important;
-    --input--border-color :#3b3f46 !important;
 }

docs/static/css/material.dark.less

@@ -2,7 +2,7 @@
 @import "../../../rust/perspective-viewer/src/themes/material-dense.less";
 @import "../../../rust/perspective-viewer/src/less/variables.less";
 
-perspective-column-style, perspective-expression-editor {
+perspective-column-style.dark, perspective-expression-editor.dark {
   background-color: @grey700;
   color: #FFFFFF;
   border: 1px solid @grey500;

examples/blocks/src/citibike/citibike.js

@@ -63,7 +63,7 @@ async function main() {
     // Start a recurring asyn call to `get_feed` and update the `table` with the response.
     get_feed("station_status", table.update);
 
-    window.workspace.tables.set("citibike", table);
+    window.workspace.tables.set("citibike", Promise.resolve(table));
     const layout = await get_layout();
     window.workspace.restore(layout);
 }

examples/blocks/src/custom/index.html

@@ -27,7 +27,7 @@
             const viewer = document.getElementsByTagName('perspective-viewer')[0];
             const data = await fetch("/node_modules/superstore-arrow/superstore.arrow");
             const arr = await data.arrayBuffer();
-            const table = await perspective.worker().table(arr.slice());
+            const table = perspective.worker().table(arr.slice());
             await viewer.load(table);
             viewer.toggleConfig();
         });

examples/blocks/src/dataset/index.html

@@ -16,13 +16,13 @@
         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-datagrid.js"></script>
-        <script src="perspective-viewer-d3fc.js"></script>
+        <script src="/node_modules/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
+        <script src="/node_modules/@finos/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script>
+        <script src="/node_modules/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script>
 
-        <script src="perspective.js"></script>
+        <script src="/node_modules/@finos/perspective/dist/umd/perspective.js"></script>
 
-        <link rel='stylesheet' href="material.css" is="custom-style">
+        <link rel='stylesheet' href="/node_modules/@finos/perspective-viewer/dist/umd/material-dense.css" is="custom-style">
 
     <style>
 
@@ -43,7 +43,7 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background-color: #eee
+            background-color: #f2f4f6;
         }
 
         #controls {
@@ -145,9 +145,14 @@
                 <span>Datetime columns</span>
                 <input id="num_datetime" min="0" max="50" type="number" placeholder="#" value="5"></input>
             </div>
+            <div class="range">
+                <span>Bool columns</span>
+                <input id="num_boolean" min="0" max="50" type="number" placeholder="#" value="1"></input>
+            </div>
         </div>
 
         <perspective-viewer 
+            editable
             id="viewer">
 
         </perspective-viewer>
@@ -164,7 +169,7 @@
         const colname = (name, x) => `${name.charAt(0).toUpperCase() + name.slice(1)} ${x}`;
 
         function* col_iter() {
-            for (const name of ["float", "integer", "string", "datetime"]) {
+            for (const name of ["float", "integer", "string", "datetime", "boolean"]) {
                 const ncols = window[`num_${name}`].value;
                 for (let x = 0; x < ncols; x ++) {
                     yield [name, x];;
@@ -198,7 +203,8 @@
             "float": () => range(-10, 10),
             "integer": () => Math.floor(range(-10, 10)),
             "string" : xs => choose(get_dict(xs)),
-            "datetime": () => new Date()
+            "datetime": () => new Date(),
+            "boolean": () => choose([true, false, null])
         };
 
         const new_row = () => assign((name, x) => CELL_ARGS[name](x));
@@ -226,13 +232,17 @@
 
         // GUI
 
-        const make_run_click_callback = (state) => async () => {
-            const old_table = state.table;
-            state.table = await gen_data();
-            window.viewer.load(state.table);
+        const make_run_click_callback = (state) => async () => {            
+            const old_table = state.table
+            state.table = gen_data();
+            await window.viewer.load(state.table);
             if (old_table) {
-                old_table.delete();
-            }
+                old_table.then(old_table => {
+                    if (old_table) {
+                        old_table.delete();
+                    }
+                });
+            }            
         }
 
         // Main

examples/webpack/package.json

@@ -18,7 +18,6 @@
         "@finos/perspective-webpack-plugin": "^0.10.3",
         "css-loader": "^0.28.7",
         "file-loader": "^4.2.0",
-        "html-webpack-plugin": "^3.2.0",
         "style-loader": "^0.18.2",
         "webpack": "^5.14.0",
         "webpack-cli": "^4.3.1",

examples/webpack/src/index.js

@@ -13,23 +13,23 @@ import "@finos/perspective-viewer";
 import "@finos/perspective-viewer-datagrid";
 import "@finos/perspective-viewer-d3fc";
 
-import "@finos/perspective-viewer/dist/umd/material.css";
+import "@finos/perspective-viewer/dist/umd/material-dense.dark.css";
 
 import "./index.css";
 
 const worker = perspective.shared_worker();
 
 // superstore.arrow located in node_modules/superstore-arrow/ and it's
 // configured by 'devServer' in 'webpack.config.js'
-const req = fetch("./superstore.arrow");
+// const req = fetch("./superstore.arrow");
 
-window.addEventListener("load", async () => {
+window.addEventListener("DOMContentLoaded", async () => {
     const viewer = document.createElement("perspective-viewer");
     document.body.append(viewer);
 
-    const resp = await req;
-    const buffer = await resp.arrayBuffer();
-    const table = await worker.table(buffer);
+    // const resp = await req;
+    // const buffer = await resp.arrayBuffer();
+    const table = worker.table({x: [1, 2, 3, 4, 5]});
 
     viewer.load(table);
 

examples/webpack/webpack.config.js

@@ -12,7 +12,7 @@ const HtmlWebPackPlugin = require("html-webpack-plugin");
 const path = require("path");
 
 module.exports = {
-    mode: process.env.NODE_ENV || "development",
+    mode: process.env.NODE_ENV || "production",
     entry: "./src/index.js",
     output: {
         filename: "index.js",
@@ -27,6 +27,7 @@ module.exports = {
         rules: [
             {
                 test: /\.css$/,
+                exclude: /node_modules/,
                 use: [{loader: "style-loader"}, {loader: "css-loader"}],
             },
         ],

examples/workspace/src/index.html

@@ -9,9 +9,6 @@
   </head>
   <body>
     <perspective-workspace id="workspace">
-        <perspective-viewer slot="One" name="Test Widget One" table="superstore"></perspective-viewer>
-        <perspective-viewer slot="Two" name="Test Widget Two" table="superstore"></perspective-viewer>
-        <perspective-viewer slot="Three" name="Test Widget Three" table="superstore"></perspective-viewer>
     </perspective-workspace>
 </body>
 </html>

examples/workspace/src/index.js

@@ -8,9 +8,9 @@
  */
 
 import perspective from "@finos/perspective";
+import "@finos/perspective-workspace";
 import "@finos/perspective-viewer-datagrid";
 import "@finos/perspective-viewer-d3fc";
-import "@finos/perspective-workspace";
 
 import "./index.less";
 

examples/workspace/src/index.less

@@ -7,7 +7,7 @@
  *
  */
 
-@import "~@finos/perspective-workspace/dist/theme/material.less";
+@import "~@finos/perspective-workspace/dist/theme/material.dark.less";
 
 body {
   display: flex;

packages/perspective-jupyterlab/test/results/results.json

@@ -1,6 +1,6 @@
 {
-    "__GIT_COMMIT__": "dce4742a444f90b9847769dc15bfc6cc4ace211a",
+    "__GIT_COMMIT__": "21eb6e6303888b41ec49891317c4302f93515335",
     "resize_Config_should_show_by_default": "b8bc3ea0c100cbd12f2b6364d13ad2cc",
     "resize_Resize_the_container_causes_the_widget_to_resize": "b8bc3ea0c100cbd12f2b6364d13ad2cc",
-    "resize_row_pivots_traitlet_works": "f3f5294cbe02d84ab7c18fffa28e017f"
+    "resize_row_pivots_traitlet_works": "52d03e6b2e62254a8135c0450d6ef1f2"
 }