Add to dev docs, fix animations.js

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

docs/md/python.md

@@ -68,8 +68,10 @@ pip install perspective-python
 `PerspectiveWidget` is a JupyterLab widget that implements the same API as
 `<perspective-viewer>`, 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

docs/static/css/custom.css

@@ -203,10 +203,10 @@ 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;
+    text-align: right;
 }
 
 h1, h2, h3, h4, h5, h6 {

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;

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"}
         });