Fix scrollbars & scroll lock

onesimus-wiafe · Apr 4, 2023 · 8411a87 · 8411a87
1 parent c5eb9f5
commit 8411a87
Show file tree

Hide file tree

Showing 14 changed files with 43 additions and 85 deletions.
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -117,6 +117,11 @@ const config = {
                         position: "right",
                         label: "Examples",
                     },
+                    {
+                        href: "https://www.prospective.co/blog",
+                        label: "Blog",
+                        position: "right",
+                    },
                     {
                         href: "https://github.com/finos/perspective",
                         label: "GitHub",
@@ -150,6 +155,11 @@ const config = {
                                 label: "FINOS",
                                 to: "https://finos.org",
                             },
+                            {
+                                href: "https://www.prospective.co/blog",
+                                label: "Blog",
+                                position: "right",
+                            },
                         ],
                     },
                 ],

diff --git a/docs/src/components/Demo/index.js b/docs/src/components/Demo/index.js
@@ -111,7 +111,7 @@ export function PerspectiveViewerDemo() {
                 <span>
                     {freq >= 189
                         ? "paused"
-                        : `${((1000 / freq) * 3).toFixed(0)} msg/s`}
+                        : `${((1000 / freq) * 10).toFixed(0)} msg/s`}
                 </span>
                 <input
                     id="velocity"
@@ -130,7 +130,12 @@ function update(table) {
     if (!REALTIME_PAUSED && FREQ <= 189.9) {
         var viewport_height = document.documentElement.clientHeight;
         if (viewport_height - window.scrollY > 0) {
-            table.update([random_row(), random_row(), random_row()]);
+            let arr = new Array(10);
+            for (let i = 0; i < 10; i++) {
+                arr[i] = random_row();
+            }
+
+            table.update(arr);
         }
     }
 

diff --git a/docs/src/components/Demo/styles.module.css b/docs/src/components/Demo/styles.module.css
@@ -1,6 +1,6 @@
 .heroBannerViewer {
-    width: 900px;
-    height: 550px;
+    width: 1000px;
+    height: 600px;
     margin-top: 24px;
     margin-bottom: 48px;
 }
@@ -41,7 +41,7 @@
 
 .timecontrols span {
     text-align: end;
-    width: 70px;
+    width: 80px;
     font-family: "Roboto Mono";
     opacity: 0.5;
     font-size: 12px;

diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
@@ -55,7 +55,7 @@ export default function Home() {
     }
 
     return (
-        <div class="header-center header-shift">
+        <div className="header-center header-shift">
             <Layout
                 title={`${siteConfig.title}`}
                 description={siteConfig.description}

diff --git a/packages/perspective-viewer-datagrid/src/js/model/toolbar.js b/packages/perspective-viewer-datagrid/src/js/model/toolbar.js
@@ -30,7 +30,7 @@ export function toggle_scroll_lock(force = undefined) {
     }
 
     this._is_scroll_lock = force;
-    this.classList.toggle("sub-cell-scroll-disabled", !force);
+    this.classList.toggle("sub-cell-scroll-disabled", force);
     if (this._scroll_lock !== undefined) {
         this._scroll_lock.classList.toggle("lock-scroll", force);
         if (!force) {

diff --git a/packages/perspective-viewer-datagrid/src/less/pro.less b/packages/perspective-viewer-datagrid/src/less/pro.less
@@ -264,24 +264,11 @@ regular-table {
 
     &::-webkit-scrollbar-thumb {
         background-clip: content-box;
-        background-color: rgba(0, 0, 0, 0);
-        border-radius: 5px;
-    }
-
-    &::-webkit-scrollbar-thumb:horizontal {
-        border-bottom: 2px solid transparent;
-        border-top: 2px solid transparent;
-    }
-
-    &::-webkit-scrollbar-thumb:vertical {
-        border-left: 2px solid transparent;
-        border-right: 2px solid transparent;
-    }
-
-    &:hover::-webkit-scrollbar-thumb {
-        background-color: rgba(0, 0, 0, 0.15);
-    }
-    &::-webkit-scrollbar-thumb:hover {
-        background-color: rgba(0, 0, 0, 0.3);
+        background: var(--icon--color);
+        border: 5.5px solid var(--plugin--background);
+        max-height: 50%;
+        max-width: 50%;
+        min-width: 10%;
+        min-height: 10%;
     }
 }
diff --git a/python/perspective/package.json b/python/perspective/package.json
@@ -5,5 +5,12 @@
     "scripts": {
         "bench": "python3 bench/perspective_benchmark.py",
         "docs": "python3 docs/generate.py"
+    },
+    "devDependencies": {
+        "@finos/perspective": "^1.9.4",
+        "@finos/perspective-viewer": "^1.9.4",
+        "@finos/perspective-viewer-d3fc": "^1.9.4",
+        "@finos/perspective-viewer-datagrid": "^1.9.4",
+        "@finos/perspective-webpack-plugin": "^1.9.4"
     }
 }
diff --git a/rust/perspective-viewer/src/less/column-selector.less b/rust/perspective-viewer/src/less/column-selector.less
@@ -340,10 +340,8 @@
             min-height: 20%;
 
             &::-webkit-scrollbar-thumb {
-                // background-color: rgba(0, 0, 0, 0.1);
-                // border-radius: 4px;
-                border: 0 solid #6e6e6e;
-                border-left-width: 2px;
+                border: 0 solid var(--icon--color);
+                border-left-width: 1px;
             }
 
             &::-webkit-scrollbar-thumb:hover {

diff --git a/rust/perspective-viewer/src/rust/components/column_selector/config_selector.rs b/rust/perspective-viewer/src/rust/components/column_selector/config_selector.rs
@@ -84,7 +84,7 @@ impl DragContext<ConfigSelectorMsg> for GroupByContext {
         ConfigSelectorMsg::DragLeave(DragTarget::GroupBy)
     }
 
-    fn new(col: InPlaceColumn) -> ConfigSelectorMsg {
+    fn create(col: InPlaceColumn) -> ConfigSelectorMsg {
         ConfigSelectorMsg::New(DragTarget::GroupBy, col)
     }
 }
@@ -102,7 +102,7 @@ impl DragContext<ConfigSelectorMsg> for SplitByContext {
         ConfigSelectorMsg::DragLeave(DragTarget::SplitBy)
     }
 
-    fn new(col: InPlaceColumn) -> ConfigSelectorMsg {
+    fn create(col: InPlaceColumn) -> ConfigSelectorMsg {
         ConfigSelectorMsg::New(DragTarget::SplitBy, col)
     }
 }
@@ -120,7 +120,7 @@ impl DragContext<ConfigSelectorMsg> for SortDragContext {
         ConfigSelectorMsg::DragLeave(DragTarget::Sort)
     }
 
-    fn new(col: InPlaceColumn) -> ConfigSelectorMsg {
+    fn create(col: InPlaceColumn) -> ConfigSelectorMsg {
         ConfigSelectorMsg::New(DragTarget::Sort, col)
     }
 }
@@ -138,7 +138,7 @@ impl DragContext<ConfigSelectorMsg> for FilterDragContext {
         ConfigSelectorMsg::DragLeave(DragTarget::Filter)
     }
 
-    fn new(col: InPlaceColumn) -> ConfigSelectorMsg {
+    fn create(col: InPlaceColumn) -> ConfigSelectorMsg {
         ConfigSelectorMsg::New(DragTarget::Filter, col)
     }
 }

diff --git a/rust/perspective-viewer/src/rust/components/column_selector/empty_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/empty_column.rs
@@ -8,7 +8,6 @@
 
 use std::collections::HashSet;
 
-use gloo::utils::document;
 use web_sys::*;
 use yew::prelude::*;
 

diff --git a/rust/perspective-viewer/src/rust/components/containers/dragdrop_list.rs b/rust/perspective-viewer/src/rust/components/containers/dragdrop_list.rs
@@ -29,7 +29,7 @@ pub trait DragContext<T> {
     fn close(index: usize) -> T;
     fn dragleave() -> T;
     fn dragenter(index: usize) -> T;
-    fn new(col: InPlaceColumn) -> T;
+    fn create(col: InPlaceColumn) -> T;
 }
 
 #[derive(Properties, Derivative)]
@@ -273,7 +273,7 @@ where
 
         let column_dropdown = ctx.props().column_dropdown.clone();
         let exclude = ctx.props().exclude.clone();
-        let on_select = ctx.props().parent.callback(V::new);
+        let on_select = ctx.props().parent.callback(V::create);
         html! {
             <div ref={ &self.elem } class="rrow">
                 <div

diff --git a/rust/perspective-viewer/src/themes/pro-dark.less b/rust/perspective-viewer/src/themes/pro-dark.less
@@ -119,10 +119,6 @@ perspective-expression-editor[theme="Pro Dark"] {
         }
     }
 
-    regular-table:hover::-webkit-scrollbar-thumb {
-        background-color: #3b3f46;
-    }
-
     tbody th:empty {
         background: linear-gradient(to right,
                 transparent 9px,

diff --git a/rust/perspective-viewer/src/themes/pro.less b/rust/perspective-viewer/src/themes/pro.less
@@ -241,14 +241,5 @@ perspective-expression-editor {
     --toolbar-scroll-lock-active--content:  url("../svg/align-scroll-icon.svg");
     --toolbar-edit-mode--content: url("../svg/read-only-icon.svg");
     --toolbar-edit-mode-active--content:  url("../svg/editable-icon.svg");
-
-    // TODO add me back
-    regular-table::-webkit-scrollbar-thumb {
-        background-color: transparent;
-    }
-
-    regular-table:hover::-webkit-scrollbar-thumb {
-        background-color: #e0e4e9;
-    }
 }
 
diff --git a/yarn.lock b/yarn.lock
@@ -4625,24 +4625,6 @@
     "@types/qs" "*"
     "@types/range-parser" "*"
 
-"@types/express-serve-static-core@^4.17.33":
-  version "4.17.33"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.33.tgz#de35d30a9d637dc1450ad18dd583d75d5733d543"
-  integrity sha512-TPBqmR/HRYI3eC2E5hmiivIzv+bidAfXofM+sbonAGvyDhySGw9/PQZFt2BLOrjUUR++4eJVpx6KnLQK1Fk9tA==
-  dependencies:
-    "@types/node" "*"
-    "@types/qs" "*"
-    "@types/range-parser" "*"
-
-"@types/express-ws@^3.0.0":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/express-ws/-/express-ws-3.0.1.tgz#6fbf5dfdbeedd16479ccbeecbca63c14be26612e"
-  integrity sha512-VguRXzcpPBF0IggIGpUoM65cZJDfMQxoc6dKoCz1yLzcwcXW7ft60yhq3ygKhyEhEIQFtLrWjyz4AJ1qjmzCFw==
-  dependencies:
-    "@types/express" "*"
-    "@types/express-serve-static-core" "*"
-    "@types/ws" "*"
-
 "@types/express@*":
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.11.tgz#debe3caa6f8e5fcda96b47bd54e2f40c4ee59545"
@@ -4663,16 +4645,6 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
-"@types/express@^4.17.3":
-  version "4.17.17"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.17.tgz#01d5437f6ef9cfa8668e616e13c2f2ac9a491ae4"
-  integrity sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q==
-  dependencies:
-    "@types/body-parser" "*"
-    "@types/express-serve-static-core" "^4.17.33"
-    "@types/qs" "*"
-    "@types/serve-static" "*"
-
 "@types/glob@^7.1.1":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"
@@ -5009,13 +4981,6 @@
     "@types/source-list-map" "*"
     source-map "^0.6.1"
 
-"@types/ws@*":
-  version "8.5.4"
-  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.4.tgz#bb10e36116d6e570dd943735f86c933c1587b8a5"
-  integrity sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==
-  dependencies:
-    "@types/node" "*"
-
 "@types/ws@^7.2.2":
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-7.4.0.tgz#499690ea08736e05a8186113dac37769ab251a0e"