Update raycasting example

README.md

@@ -35,7 +35,7 @@ and/or [Jupyterlab](https://jupyterlab.readthedocs.io/en/stable/).
 ### Examples
 
 <!-- Examples -->
-<table><tbody><tr><td>editable</td><td>file</td><td>fractal</td></tr><tr><td><a href="https://perspective.finos.org/block?example=editable"><img height="125" src="https://perspective.finos.org/blocks/editable/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=file"><img height="125" src="https://perspective.finos.org/blocks/file/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=fractal"><img height="125" src="https://perspective.finos.org/blocks/fractal/preview.png"></img></a></td></tr><tr><td>market</td><td>raycasting</td><td>evictions</td></tr><tr><td><a href="https://perspective.finos.org/block?example=market"><img height="125" src="https://perspective.finos.org/blocks/market/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=raycasting"><img height="125" src="https://perspective.finos.org/blocks/raycasting/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=evictions"><img height="125" src="https://perspective.finos.org/blocks/evictions/preview.png"></img></a></td></tr><tr><td>nypd</td><td>magic</td><td>streaming</td></tr><tr><td><a href="https://perspective.finos.org/block?example=nypd"><img height="125" src="https://perspective.finos.org/blocks/nypd/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=magic"><img height="125" src="https://perspective.finos.org/blocks/magic/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=streaming"><img height="125" src="https://perspective.finos.org/blocks/streaming/preview.png"></img></a></td></tr><tr><td>covid</td><td>movies</td><td>superstore</td></tr><tr><td><a href="https://perspective.finos.org/block?example=covid"><img height="125" src="https://perspective.finos.org/blocks/covid/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=movies"><img height="125" src="https://perspective.finos.org/blocks/movies/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=superstore"><img height="125" src="https://perspective.finos.org/blocks/superstore/preview.png"></img></a></td></tr><tr><td>citibike</td><td>olympics</td><td>jupyterlab</td></tr><tr><td><a href="https://perspective.finos.org/block?example=citibike"><img height="125" src="https://perspective.finos.org/blocks/citibike/preview.png"></img></a></td><td><a href="https://perspective.finos.org/block?example=olympics"><img height="125" src="https://perspective.finos.org/blocks/olympics/preview.png"></img></a></td><td><a href="http://beta.mybinder.org/v2/gh/finos/perspective/master?urlpath=lab/tree/examples/jupyter-notebooks"><img height="125" src="https://perspective.finos.org/img/jupyterlab.png"></img></a></td></tr></tbody></table>
+<table><tbody><tr><td>editable</td><td>file</td><td>fractal</td></tr><tr><td><a href="https://perspective.finos.org/block?example=editable"><img height="125" src="https://perspective.finos.org/blocks/editable/preview.png?"></img></a></td><td><a href="https://perspective.finos.org/block?example=file"><img height="125" src="https://perspective.finos.org/blocks/file/preview.png?"></img></a></td><td><a href="https://perspective.finos.org/block?example=fractal"><img height="125" src="https://perspective.finos.org/blocks/fractal/preview.png?"></img></a></td></tr><tr><td>market</td><td>raycasting</td><td>evictions</td></tr><tr><td><a href="https://perspective.finos.org/block?example=market"><img height="125" src="https://perspective.finos.org/blocks/market/preview.png?"></img></a></td><td><a href="https://perspective.finos.org/block?example=raycasting"><img height="125" src="https://perspective.finos.org/blocks/raycasting/preview.png?"></img></a></td><td><a href="https://perspective.finos.org/block?example=evictions"><img height="125" src="https://perspective.finos.org/blocks/evictions/preview.png?"></img></a></td></tr><tr><td>nypd</td><td>magic</td><td>streaming</td></tr><tr><td><a href="https://perspective.finos.org/block?example=nypd"><img height="125" src="https://perspective.finos.org/blocks/nypd/preview.png?"></img></a></td><td><a href="https://perspective.finos.org/block?example=magic"><img height="125" src="https://perspective.finos.org/blocks/magic/preview.png?"></img></a></td><td><a href="https://perspective.finos.org/block?example=streaming"><img height="125" src="https://perspective.finos.org/blocks/streaming/preview.png?"></img></a></td></tr><tr><td>covid</td><td>movies</td><td>superstore</td></tr><tr><td><a href="https://perspective.finos.org/block?example=covid"><img height="125" src="https://perspective.finos.org/blocks/covid/preview.png?"></img></a></td><td><a href="https://perspective.finos.org/block?example=movies"><img height="125" src="https://perspective.finos.org/blocks/movies/preview.png?"></img></a></td><td><a href="https://perspective.finos.org/block?example=superstore"><img height="125" src="https://perspective.finos.org/blocks/superstore/preview.png?"></img></a></td></tr><tr><td>citibike</td><td>olympics</td><td>jupyterlab</td></tr><tr><td><a href="https://perspective.finos.org/block?example=citibike"><img height="125" src="https://perspective.finos.org/blocks/citibike/preview.png?"></img></a></td><td><a href="https://perspective.finos.org/block?example=olympics"><img height="125" src="https://perspective.finos.org/blocks/olympics/preview.png?"></img></a></td><td><a href="http://beta.mybinder.org/v2/gh/finos/perspective/master?urlpath=lab/tree/examples/jupyter-notebooks"><img height="125" src="https://perspective.finos.org/img/jupyterlab.png?"></img></a></td></tr></tbody></table>
 <!-- Examples -->
 
 ### Documentation

examples/blocks/examples.js

@@ -34,15 +34,16 @@ exports.get_examples = function get_examples(
 ) {
     const standalone = [
         {
-            img: "https://perspective.finos.org/img/jupyterlab.png",
+            img: "https://perspective.finos.org/img/jupyterlab.png?",
             url: "http://beta.mybinder.org/v2/gh/finos/perspective/master?urlpath=lab/tree/examples/jupyter-notebooks",
             name: "jupyterlab",
         },
     ];
 
     const hashes = LOCAL_EXAMPLES.map((x) => ({
-        img: `${root}blocks/${x}/preview.png`,
+        img: `${root}blocks/${x}/preview.png?`,
         url: `${root}block?example=${x}`,
+
         name: x,
     }));
 

examples/blocks/src/fractal/index.css

@@ -13,8 +13,8 @@
 
 perspective-viewer {
     flex: 1;
-    margin: 24px;
     overflow: visible;
+    margin-left: 60px;
 }
 
 perspective-viewer[theme="Pro Light"],
@@ -50,7 +50,16 @@ perspective-viewer[theme="Pro Dark"] {
 
 #controls {
     display: flex;
-    margin: 24px 24px 0px 40px;
+    /* padding: 12px; */
+    border-bottom: 1px solid #ababab;
+}
+
+#controls2 {
+    position: absolute;
+    left: 0;
+    width: 60px;
+    bottom: 0;
+    top: 40px;
 }
 
 .range {
@@ -60,6 +69,14 @@ perspective-viewer[theme="Pro Dark"] {
     margin-right: 24px;
 }
 
+.range.xl {
+    width: 200px;
+}
+
+.range.right {
+    float: right;
+}
+
 span,
 input,
 button {
@@ -72,17 +89,17 @@ button {
     padding: 6px 12px 6px 0px;
 }
 
+span {
+    font-size: 10px;
+}
+
 input {
-    height: 14px;
     border-width: 0px;
     border-style: solid;
     border-bottom-width: 1px;
     color: inherit;
     outline: none;
-}
-
-input[type="range"] {
-    margin-top: 2px;
+    padding: 0px;
 }
 
 input[type="number"] {
@@ -98,7 +115,8 @@ input::placeholder {
 }
 
 button {
-    border: 1px solid #ccc;
+    border: 0px solid #ccc;
+    border-right-width: 1px;
     text-transform: uppercase;
     text-align: center;
     text-decoration: none;
@@ -115,10 +133,82 @@ button:hover {
 #run {
     justify-self: center;
     margin-right: 24px;
-    height: 83px;
-    width: 80px;
+    height: 50px;
+    width: 60px;
 }
 
 #run:disabled {
-    opacity: 0.2;
+    /* opacity: 0.2; */
+    color: #ccc;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    pointer-events: all;
+    width: 6px;
+    height: 24px;
+    background-color: #fff;
+    border-radius: 0px;
+    box-shadow: 0 0 0 1px #c6c6c6;
+    cursor: pointer;
+}
+
+input[type="range"]::-moz-range-thumb {
+    -webkit-appearance: none;
+    pointer-events: all;
+    width: 6px;
+    height: 24px;
+    background-color: #fff;
+    border-radius: 0px;
+    box-shadow: 0 0 0 1px #c6c6c6;
+    cursor: pointer;
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+    background: #f7f7f7;
+}
+
+input[type="range"]::-webkit-slider-thumb:active {
+    box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
+    -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
+}
+/* 
+input[type="number"] {
+    color: #8a8383;
+    width: 50px;
+    height: 30px;
+    font-size: 20px;
+    border: none;
+} */
+/* 
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    opacity: 1;
+} */
+
+input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 2px;
+    width: 100%;
+    position: absolute;
+    background-color: #c6c6c6;
+    pointer-events: none;
+    padding: 0;
+    top: 25px;
+    width: 200px;
+}
+
+#ymin,
+#xmin {
+    z-index: 1;
+}
+
+#ymin,
+#ymax {
+    /* -webkit-appearance: slider-vertical; */
+    transform: rotate(-90deg);
+    transform-origin: top left;
+    top: 220px;
+    left: 30px;
 }

examples/blocks/src/fractal/index.html

@@ -14,26 +14,25 @@
     <div id="app">
         <div id="controls">
             <button id="run" disabled>Run</button>
-            <div class="range">
-                <span>Size</span>
-                <input id="width" min="25" max="700" type="number" placeholder="Width" value="200"></input>
-                <input id="height" min="25" max="500" type="number" placeholder="Height" value="200"></input>
-            </div>
-            <div class="range">
-                <span id="xrange">X [-0.4 , -0.3]</span>
+            <div class="range xl">
                 <input id="xmin" min="-2" max="1.0" step="0.1" value="-0.4" type="range"></input>
                 <input id="xmax" min="-2" max="1.0" step="0.1" value="-0.3" type="range"></input>
             </div>
-            <div class="range">
-                <span id="yrange">Y [-0.7 , -0.6]</span>
-                <input id="ymin" min="-1" max="1.0" step="0.1" value="-0.7" type="range"></input>
-                <input id="ymax" min="-1" max="1.0" step="0.1" value="-0.6" type="range"></input>
+            <div class="range right">
+                <span>Resolution</span>
+                <input id="resolution" min="25" max="700" type="number" placeholder="Resolution" value="200"></input>
             </div>
-            <div class="range">
+            <div class="range right">
                 <span>Iterations</span>
                 <input id="iterations" min="1" max="1000" type="number" placeholder="Iterations" value="100"></input>
             </div>
         </div>
+        <div id="controls2">
+            <div class="range xl">
+                <input id="ymin" min="-1" max="1.0" step="0.1" value="0.6" type="range" orient="vertical"></input>
+                <input id="ymax" min="-1" max="1.0" step="0.1" value="0.7" type="range" orient="vertical"></input>
+            </div>
+        </div>
         <perspective-viewer id="viewer"></perspective-viewer>
     </div>
     <script type="module" src="index.js"></script>

examples/blocks/src/fractal/index.js

@@ -15,20 +15,19 @@ import perspective from "/node_modules/@finos/perspective/dist/cdn/perspective.j
 function generate_mandelbrot(params) {
     return `
 // color
-var height := ${params.height};
-var width := ${params.width};
+var resolution := ${params.resolution};
 var xmin := ${params.xmin};
 var xmax := ${params.xmax};
 var ymin := ${params.ymin};
 var ymax := ${params.ymax};
 var iterations := ${params.iterations};
 
-var x := floor("index" / height);
-var y := "index" % height;
+var x := floor("index" / resolution);
+var y := "index" % resolution;
 var c := iterations;
 
-var cx := xmin + ((xmax - xmin) * x) / (width - 1);
-var cy := ymin + ((ymax - ymin) * y) / (height - 1);
+var cx := xmin + ((xmax - xmin) * x) / (resolution - 1);
+var cy := ymin + ((ymax - ymin) * y) / (resolution - 1);
 
 var vx := 0;
 var vy := 0;
@@ -54,23 +53,23 @@ function generate_layout(params) {
     return {
         plugin: "Heatmap",
         settings: true,
-        group_by: [`floor("index" / ${params.height})`],
-        split_by: [`"index" % ${params.height}`],
+        group_by: [`floor("index" / ${params.resolution})`],
+        split_by: [`"index" % ${params.resolution}`],
         columns: ["color"],
         expressions: [
             generate_mandelbrot(params).trim(),
-            `floor("index" / ${params.height})`,
-            `"index" % ${params.height}`,
+            `floor("index" / ${params.resolution})`,
+            `"index" % ${params.resolution}`,
         ],
     };
 }
 
 async function generate_data(table) {
     const run = document.getElementById("run");
-    let json = new Array(width * height);
-    for (let x = 0; x < width; ++x) {
-        for (let y = 0; y < height; ++y) {
-            const index = x * height + y;
+    let json = new Array(Math.pow(resolution, 2));
+    for (let x = 0; x < resolution; ++x) {
+        for (let y = 0; y < resolution; ++y) {
+            const index = x * resolution + y;
             json[index] = {
                 index,
             };
@@ -84,39 +83,24 @@ async function generate_data(table) {
 // GUI
 
 function get_gui_params() {
-    return [
-        "xmin",
-        "xmax",
-        "ymin",
-        "ymax",
-        "width",
-        "height",
-        "iterations",
-    ].reduce((acc, x) => {
-        acc[x] = window[x].valueAsNumber;
-        return acc;
-    }, {});
+    return ["xmin", "xmax", "ymin", "ymax", "resolution", "iterations"].reduce(
+        (acc, x) => {
+            acc[x] = window[x].valueAsNumber;
+            return acc;
+        },
+        {}
+    );
 }
 
-function make_range(x, y, range, name) {
-    const title = () =>
-        name +
-        " [" +
-        x.valueAsNumber.toFixed(1) +
-        ", " +
-        y.valueAsNumber.toFixed(1) +
-        "]";
-
+function make_range(x, y, name) {
     x.addEventListener("input", () => {
         window.run.disabled = false;
         x.value = Math.min(x.valueAsNumber, y.valueAsNumber - 0.1);
-        range.innerHTML = title();
     });
 
     y.addEventListener("input", () => {
         window.run.disabled = false;
         y.value = Math.max(x.valueAsNumber + 0.1, y.valueAsNumber);
-        range.innerHTML = title();
     });
 }
 
@@ -136,7 +120,7 @@ const make_run_click_callback = (worker, state) => async () => {
 
     const run = document.getElementById("run");
     const params = get_gui_params();
-    const new_size = params.width * params.height;
+    const new_size = Math.pow(params.resolution, 2);
     if (!state.size || state.size !== new_size) {
         let json = { index: new Array(new_size) };
         for (let x = 0; x < new_size; ++x) {
@@ -158,10 +142,9 @@ function set_runnable() {
 window.addEventListener("DOMContentLoaded", async function () {
     const heatmap_plugin = await window.viewer.getPlugin("Heatmap");
     heatmap_plugin.max_cells = 100000;
-    make_range(xmin, xmax, xrange, "X");
-    make_range(ymin, ymax, yrange, "Y");
-    window.width.addEventListener("input", set_runnable);
-    window.height.addEventListener("input", set_runnable);
+    make_range(xmin, xmax, "X");
+    make_range(ymin, ymax, "Y");
+    window.resolution.addEventListener("input", set_runnable);
     window.iterations.addEventListener("input", set_runnable);
 
     run.addEventListener(

examples/blocks/src/olympics/index.html

@@ -63,6 +63,7 @@
                             columns: ["Height", "Weight", null, "City", "Sport", null],
                             filter: [["Height", "==", null]],
                             sort: [["Name", "desc"]],
+                            expressions: {},
                             aggregates: {
                                 Name: "distinct count",
                                 Weight: "avg",
@@ -82,6 +83,7 @@
                                 ["Age", "is not null", null],
                             ],
                             sort: [["Name", "col asc"]],
+                            expressions: {},
                             aggregates: {
                                 Age: "avg",
                             },

examples/blocks/src/raycasting/README.md

@@ -1,6 +1,6 @@
-A ray-tracing engine written as an [ExprTK](https://github.com/ArashPartow/exprtk)
+A ray-casting engine written as an [ExprTK](https://github.com/ArashPartow/exprtk)
 Expression within [Perspective](https://github.com/finos/perspective). As presented
 at [Open Source in Finance 2022 NY](https://www.youtube.com/watch?v=0ut-ynvBpGI).
 
-This example has no server component, and all ray-tracing is done entirely within the
-Perspective WebAssembly engine.
+This example has no server component, and all ray-casting is done entirely
+within the Perspective WebAssembly engine.