From bf63e72ed9bafb7de43ac2815982da373f8fdc8c Mon Sep 17 00:00:00 2001 From: Jun Tan Date: Fri, 22 Jan 2021 20:55:28 -0500 Subject: [PATCH] Add to dev docs, fix animations.js --- docs/md/development.md | 28 ++++++++++++++++++++++++++++ docs/md/python.md | 6 ++++-- docs/static/css/custom.css | 1 - docs/static/css/material.dark.css | 1 + docs/static/js/animation.js | 17 ++++++++++------- 5 files changed, 43 insertions(+), 10 deletions(-) diff --git a/docs/md/development.md b/docs/md/development.md index 1e1fac7c57..f39d461baa 100644 --- a/docs/md/development.md +++ b/docs/md/development.md @@ -91,6 +91,34 @@ To install this specific version of Emscripten: ./emsdk install 2.0.6 ``` +### `perspective-jupyterlab` + +To install the Jupyterlab plugin from your local working directory, give +`jupyter labextension install` the path to the `perspective-jupyterlab` +package: + +```bash +jupyter labextension install ./packages/perspective-jupyterlab +``` + +Afterwards, you should see it listed as a "local extension" when you run +`jupyter labextension list`. + +Because we do not inline Perspective into the Jupyterlab plugin, your local +changes will not show up in Jupyterlab **unless** you use `yarn link` +according to the directions below: + +1. Ensure that your Jupyterlab is built by running `jupyter lab build`. +2. Inside each directory in `packages`, run [`yarn link`](https://classic.yarnpkg.com/en/docs/cli/link). +This will create a symlink to your local build that we will use inside Jupyterlab. +3. From the Perspective root, run `yarn jlab_link`. This is a script that will +find your Jupyterlab installation and tell Jupyterlab to use these symlinks +when it looks for Perspective packages, instead of fetching them from NPM. +4. When you make a local change, make sure you run `yarn build` **and** +`jupyter lab build` so that it fetches the newest changes. +5. Whenever you run `jupyter lab clean`, you will need to run `yarn jlab_link` +again to re-register the symlinks. + ## `perspective-python` To build the Python library, first configure your project to Python via diff --git a/docs/md/python.md b/docs/md/python.md index ef8df17a91..fdf6880203 100644 --- a/docs/md/python.md +++ b/docs/md/python.md @@ -68,8 +68,10 @@ pip install perspective-python `PerspectiveWidget` is a JupyterLab widget that implements the same API as ``, allowing for fast, intuitive transformations/visualizations of various data formats within JupyterLab. -To use it, make sure you have installed `perspective-python` -and then install the extension from the Jupyter lab extension directory + +`PerspectiveWidget` is compatible with Jupyterlab 3. To use it, make sure you +have installed `perspective-python` and then install the extension from the +Jupyter lab extension directory: ```bash jupyter labextension install @finos/perspective-jupyterlab diff --git a/docs/static/css/custom.css b/docs/static/css/custom.css index 860ba9d7b8..cfc444b289 100644 --- a/docs/static/css/custom.css +++ b/docs/static/css/custom.css @@ -203,7 +203,6 @@ ol li { ol li::before { content: counter(list-counter) "."; font-weight: bold; - font-size: 2rem; margin-right: 0.5rem; font-family: "Public Sans", Arial, Helvetica, sans-serif; line-height: 1; diff --git a/docs/static/css/material.dark.css b/docs/static/css/material.dark.css index b4fc6b9441..b4adddca1f 100644 --- a/docs/static/css/material.dark.css +++ b/docs/static/css/material.dark.css @@ -167,6 +167,7 @@ perspective-viewer, --color: #cfd8dc; --plugin--background: #2f3136; --select--background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIwLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0LjkgMTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQuOSAxMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM0NDQ0NDQ7fQo8L3N0eWxlPgo8dGl0bGU+YXJyb3dzPC90aXRsZT4KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIxLjQsNC43IDIuNSwzLjIgMy41LDQuNyAiLz4KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIzLjUsNS4zIDIuNSw2LjggMS40LDUuMyAiLz4KPC9zdmc+Cg==) no-repeat 95% 50%; + --select--background-color: #242526; --inactive--color: #666; --active--background: #135d78; --active--color: #22a0ce; diff --git a/docs/static/js/animation.js b/docs/static/js/animation.js index 5f576b8f8e..63a7b5c01e 100644 --- a/docs/static/js/animation.js +++ b/docs/static/js/animation.js @@ -42,16 +42,16 @@ var freq = 1, freqdir = 1, elem; -function update() { +function update(table) { var viewport_height = document.documentElement.clientHeight; if (viewport_height - window.scrollY > 0) { - elem.update([newRow(), newRow(), newRow()]); + table.update([newRow(), newRow(), newRow()]); } if (freq === 0) { - setTimeout(update, 3000); + setTimeout(() => update(table), 3000); freqdir = 1; } else { - setTimeout(update, Math.max(20, 200 / freq)); + setTimeout(() => update(table), Math.max(20, 200 / freq)); } if (freq > 60) { freqdir = -1; @@ -138,13 +138,13 @@ window.addEventListener("WebComponentsReady", function() { data.push(newRow()); } elem = Array.prototype.slice.call(document.querySelectorAll("perspective-viewer"))[0]; - var worker = elem.worker; + var worker = perspective.worker(); var tbl = worker.table(data, {index: "id"}); elem.load(tbl); elem._toggle_config(); setTimeout(function() { - update(0); + update(tbl, 0); }); document.querySelector("#grid").addEventListener("mouseenter", () => select("#grid")); @@ -175,7 +175,10 @@ window.addEventListener("WebComponentsReady", function() { plugin: "d3_heatmap", "column-pivots": ["Sub-Category"], "row-pivots": ["State"], - sort: [["Sales","desc"],["Profit","col desc"]], + sort: [ + ["Sales", "desc"], + ["Profit", "col desc"] + ], columns: ["Profit"], aggregates: {Profit: "low"} });