Add debug component

onesimus-wiafe · Mar 25, 2024 · 070ba01 · 070ba01
1 parent 2d3ac88
commit 070ba01
Show file tree

Hide file tree

Showing 29 changed files with 942 additions and 123 deletions.
diff --git a/examples/blocks/src/covid/index.html b/examples/blocks/src/covid/index.html
@@ -43,9 +43,9 @@
                 sort: [["deathIncrease", "col desc"]],
                 expressions: {
                     [`Parsed "date" bucket by week`]: `var year := integer(floor("date" / 10000));
-            var month := integer(floor("date" / 100)) - year * 100;
-            var day := integer("date" % 100);
-            bucket(date(year, month, day), \'W\')`,
+var month := integer(floor("date" / 100)) - year * 100;
+var day := integer("date" % 100);
+bucket(date(year, month, day), \'W\')`,
                 },
                 aggregates: {},
             };

diff --git a/examples/blocks/src/dataset/index.html b/examples/blocks/src/dataset/index.html
@@ -0,0 +1,249 @@
+<!--
+   
+   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 type="module" src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
+
+        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/themes.css" />
+
+        <style>
+
+            perspective-viewer {
+                flex: 1;
+                margin: 24px;
+                overflow: visible;
+            }
+
+            #app {
+                display: flex;
+                flex-direction: column;
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: #f2f4f6;
+            }
+
+            #controls {
+                display: flex;
+                margin: 24px 24px 0px 40px;
+            }
+
+            .range {
+                position: relative;
+                display: inline-flex;
+                flex-direction: column;
+                margin-right: 24px;
+            }
+
+            span, input, button {
+                font-family: "Open Sans";
+                font-size: 12px;
+                background: none;
+                margin: 0px;
+                border-color: #ccc;
+                color: #666;
+                padding: 6px 12px 6px 0px;
+            }
+
+            input {
+                height: 14px;
+                border-width: 0px;
+                border-style: solid;
+                border-bottom-width: 1px;
+                color: inherit;
+                outline: none;
+            }
+
+            input[type=range] {
+                margin-top: 2px;
+            }
+
+            input[type=number] {
+                font-family: "Roboto Mono";
+            }
+
+            input:focus {
+                border-color: #1a7da1;
+            }
+
+            input::placeholder {
+                color: #ccc;
+            }
+
+            button {
+                border: 1px solid #ccc;
+                text-transform: uppercase;
+                text-align: center;
+                text-decoration: none;
+                display: inline-block;
+                padding-left: 12px;
+                height: 28px;
+                outline: none;
+            }
+
+            button:hover {
+                cursor: pointer;
+            }
+
+            #run {
+                justify-self: center;
+                margin-right: 24px;
+                height: 83px;
+                width: 80px;
+            }
+
+        </style>
+    </head>
+
+    <body>
+
+        <div id="app">
+            <div id="controls">
+                <button id="run">Run</button>
+                <div class="range">
+                    <span>Rows</span>
+                    <input id="num_rows" min="25" max="1000000" type="number" placeholder="#" value="10000"></input>
+                    <input id="num_batches" min="1" max="100" type="number" placeholder="#" value="1"></input>
+                </div>
+                <div class="range">
+                    <span>Float columns</span>
+                    <input id="num_float" min="0" max="50" type="number" placeholder="#" value="5"></input>
+                </div>
+                <div class="range">
+                    <span>Integer columns</span>
+                    <input id="num_integer" min="0" max="50" type="number" placeholder="#" value="5"></input>
+                </div>
+                <div class="range">
+                    <span>String columns</span>
+                    <input id="num_string" min="0" max="50" type="number" placeholder="#" value="5"></input>
+                    <input id="num_strings" min="1" max="500" type="number" placeholder="Unique Strings" value="50"></input>
+                </div>
+                <div class="range">
+                    <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>
+        </div>
+
+        <script type="module">
+
+            import perspective from "/node_modules/@finos/perspective/dist/cdn/perspective.js";
+            const WORKER = perspective.worker();
+
+            const choose = x => x[Math.floor(Math.random() * x.length)];
+            const range = (x, y) => Math.random() * (y - x) + x;
+            const rand_string = () => Math.random().toString(36).substring(7);
+            const strings = choices => new Array(choices).fill(null).map(rand_string);
+            const colname = (name, x) => `${name.charAt(0).toUpperCase() + name.slice(1)} ${x}`;
+
+            function* col_iter() {
+                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];;
+                    }
+                }
+            }
+
+            const assign = fn => {
+                const obj = {};
+                for (const [name, x] of col_iter()) {
+                    obj[colname(name, x)] = fn(name, x);
+                }
+                return obj;
+            }
+
+            const new_schema = () => assign(x => x);
+
+            let STRINGS;
+            function reset_strings_cache() {
+                STRINGS = {};
+            }
+
+            reset_strings_cache();
+
+            const get_dict = xs => {
+                STRINGS[xs] = STRINGS[xs] || strings(parseInt(num_strings.value));
+                return STRINGS[xs];
+            }
+
+            const CELL_ARGS = {
+                "float": () => range(-10, 10),
+                "integer": () => Math.floor(range(-10, 10)),
+                "string" : xs => choose(get_dict(xs)),
+                "datetime": () => new Date(),
+                "boolean": () => choose([true, false, null])
+            };
+
+            const new_row = () => assign((name, x) => CELL_ARGS[name](x));
+
+            const gen_data = async () => {
+                reset_strings_cache();
+                let nrows = num_rows.value;
+                let rows = [];
+                const batch_size = Math.floor(nrows / num_batches.value);
+                const tbl = await WORKER.table(new_schema());
+                (function batch() {
+                    while (nrows > 0) {
+                        rows.push(new_row());
+                        nrows--;
+                        if (nrows % batch_size === 0) {
+                            tbl.update(rows);
+                            rows = [];
+                            setTimeout(batch, 100);
+                            break;
+                        }
+                    }
+                })();
+                return tbl;
+            }
+
+            // GUI
+
+            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.then(old_table => {
+                        if (old_table) {
+                            old_table.delete();
+                        }
+                    });
+                }            
+            }
+
+            // Main
+
+            window.addEventListener("DOMContentLoaded", async function () {
+                run.addEventListener("click", make_run_click_callback({}));
+                run.dispatchEvent(new Event("click"));
+            });
+
+        </script>
+    </body>
+</html>
diff --git a/packages/perspective-viewer-datagrid/src/js/style_handlers/column_header.js b/packages/perspective-viewer-datagrid/src/js/style_handlers/column_header.js
@@ -59,7 +59,7 @@ export function style_selected_column(regularTable, viewer, selectedColumn) {
                 const title = titles[i];
                 const editBtn = editBtns[i];
 
-                let open = title.innerText === selectedColumn;
+                let open = title.textContent === selectedColumn;
                 title.classList.toggle("psp-menu-open", open);
                 editBtn.classList.toggle("psp-menu-open", open);
                 if (this._config.columns.length > 1) {

diff --git a/rust/perspective-viewer/src/less/containers/tabs.less b/rust/perspective-viewer/src/less/containers/tabs.less
@@ -62,6 +62,11 @@
             }
         }
     }
+
+    #format-tab {
+        overflow: scroll;
+    }
+
     .tab-content {
         @include scrollbar;
         flex: 1 1 auto;

diff --git a/rust/perspective-viewer/src/less/dom/scrollbar.less b/rust/perspective-viewer/src/less/dom/scrollbar.less
@@ -11,18 +11,25 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 @mixin scrollbar {
-        &::-webkit-scrollbar-thumb {
-            border: 0 solid var(--icon--color);
-            border-left-width: 1px;
-        }
+    &:hover {
+        --fix: ;
+    }
 
-        &::-webkit-scrollbar-thumb:hover {
-            background-color: rgba(0, 0, 0, 0.1);
-        }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 2px;
+        border: 2px solid transparent;
+        box-shadow: inset 0px 0px 0 4px var(--inactive--color);
+    }
 
-        &::-webkit-scrollbar,
-        &::-webkit-scrollbar-corner {
-            background-color: transparent;
-            width: 6px;
-        }
-}
+    &:hover::-webkit-scrollbar-thumb {
+        border: 1px solid transparent;
+        box-shadow: inset 0px 0px 0 4px var(--inactive--color);
+    }
+
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-corner {
+        background-color: transparent;
+        width: 6px;
+        height: 6px;
+    }
+}
diff --git a/rust/perspective-viewer/src/less/form/code-editor.less b/rust/perspective-viewer/src/less/form/code-editor.less
@@ -10,6 +10,8 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+@import "dom/scrollbar.less";
+
 :host {
     #editor {
         display: flex;
@@ -22,21 +24,24 @@
         }
 
         #editor-inner {
+            overflow: hidden;
             position: relative;
             display: flex;
             flex: 1 1 auto;
         }
 
         #line_numbers {
-            pointer-events: none;
-            padding: 6px 0 6px 6px;
+            color: var(--inactive--color);
+            background-color: var(--plugin--background, white);
             box-sizing: border-box;
-            font-weight: 400;
-            font-family: var(--interface-monospace--font-family, monospace);
             display: flex;
             flex-direction: column;
+            flex: 0 0 auto;
+            font-family: var(--interface-monospace--font-family, monospace);
+            font-weight: 400;
             overflow: hidden;
-            background-color: var(--plugin--background, white);
+            padding: 6px 0 6px 6px;
+            pointer-events: none;
             span:after {
                 color: var(--code-editor-error--color, red);
                 white-space: pre;
@@ -50,7 +55,7 @@
         }
 
         pre#content {
-            margin: 0;
+            margin: 0 6px 6px 0;
             padding: 6px 0;
             // margin-left: 36px;
             box-sizing: border-box;
@@ -100,8 +105,10 @@
         }
 
         #textarea_editable {
+            @include scrollbar;
+
             position: absolute;
-            width: calc(100% - 36px);
+            width: 100%;
             height: 100%;
             font-family: var(--interface-monospace--font-family, monospace);
             font-size: 1em;