refactor: docs and make dataselections rely on dataset, not scatterplot

dev/Main.svelte

@@ -1,49 +1,49 @@
 <script>
-    import { Scatterplot } from '../src/deepscatter';
-    import { onMount } from 'svelte'
-    import SwitchPositions from './svelte/SwitchPositions.svelte';
+  import { Scatterplot } from '../src/deepscatter';
+  import { onMount } from 'svelte';
+  import SwitchPositions from './svelte/SwitchPositions.svelte';
   import ColorChange from './svelte/ColorChange.svelte';
-    
-    const prefs = {
-      source_url: '/tiles',
-      max_points: 1000000,
-      alpha: 35, // Target saturation for the full page.
-      zoom_balance: 0.22, // Rate at which points increase size. https://observablehq.com/@bmschmidt/zoom-strategies-for-huge-scatterplots-with-three-js
-      point_size: 2, // Default point size before application of size scaling
-      background_color: '#EEEDDE',
-      encoding: {
-        color: {
-          field: 'class',
-          range: 'category10',
-        },
-        x: {
-          field: 'x',
-          transform: 'literal',
-        },
-        y: {
-          field: 'y',
-          transform: 'literal',
-        },
+  import SizeSlider from './svelte/SizeSlider.svelte';
+
+  const startSize = 2;
+  const prefs = {
+    source_url: '/tiles',
+    max_points: 1000000,
+    alpha: 35, // Target saturation for the full page.
+    zoom_balance: 0.22, // Rate at which points increase size. https://observablehq.com/@bmschmidt/zoom-strategies-for-huge-scatterplots-with-three-js
+    point_size: startSize, // Default point size before application of size scaling
+    background_color: '#EEEDDE',
+    encoding: {
+      color: {
+        field: 'class',
+        range: 'category10',
+      },
+      x: {
+        field: 'x',
+        transform: 'literal',
       },
-    };
+      y: {
+        field: 'y',
+        transform: 'literal',
+      },
+    },
+  };
 
   let scatterplot = null;
-  onMount( () => {
+  onMount(() => {
     scatterplot = new Scatterplot('#deepscatter');
     window.scatterplot = scatterplot;
-    scatterplot.plotAPI(prefs)
-  })
+    scatterplot.plotAPI(prefs);
+  });
 </script>
 
 <div id="overlay">
-  <SwitchPositions {scatterplot}>
-  </SwitchPositions>
+  <SwitchPositions {scatterplot}></SwitchPositions>
   <ColorChange {scatterplot}></ColorChange>
+  <SizeSlider size={startSize} {scatterplot}></SizeSlider>
 </div>
 
-<div id="deepscatter">
-
-</div>
+<div id="deepscatter"></div>
 
 <style>
   #overlay {
@@ -57,4 +57,4 @@
     width: 100vw;
     height: 100vh;
   }
-</style>
+</style>

dev/svelte/SizeSlider.svelte

@@ -0,0 +1,21 @@
+<script>
+  export let scatterplot;
+  export let value;
+  let min = Math.sqrt(0.5);
+  let max = Math.sqrt(20);
+
+  function changeSize() {
+    scatterplot
+      .plotAPI({
+        duration: 0,
+        point_size: value,
+      })
+      .then(() => {
+        scatterplot.plotAPI({
+          duration: 1000,
+        });
+      });
+  }
+</script>
+
+<input type="range" bind:value {min} {max} step="0.01" on:change={changeSize} />

package.json

@@ -90,6 +90,7 @@
     "terser": "^5.28.1",
     "typedoc": "^0.25.8",
     "typescript": "^5.3.3",
+    "uvu": "^0.5.6",
     "vite": "^5.1.4"
   }
 }

src/Dataset.ts

@@ -32,6 +32,7 @@ import { wrapArrowTable } from './wrap_arrow';
 type Key = string;
 
 type ArrowBuildable = DS.ArrowBuildable;
+
 type Transformation = DS.Transformation;
 
 // Some variables are universally available.

src/scatterplot.ts

@@ -251,7 +251,7 @@ export class Scatterplot {
         return old_version.selection;
       }
     }
-    const selection = new DataSelection(this, params);
+    const selection = new DataSelection(this.dataset, params);
     this.selection_history.push({
       selection,
       name: selection.name,

src/selection.ts

@@ -66,6 +66,12 @@ type BinaryOperation = 'AND' | 'OR' | 'XOR';
 type UnaryOperation = 'NOT';
 
 type CompArgs = DataSelection | Composition;
+
+/**
+ * A composition represents an operation on selections. The syntax is basically
+ * a lisp-like list of operations and selections. The first element is the operation,
+ * and the rest of the elements are the arguments.
+ */
 type Composition =
   | [UnaryOperation, CompArgs]
   | [BinaryOperation, CompArgs, CompArgs]
@@ -329,15 +335,14 @@ export class DataSelection {
   private events: { [key: string]: Array<(args) => void> } = {};
 
   constructor(
-    plot: Scatterplot,
+    dataset: Dataset,
     params:
       | IdSelectParams
       | BooleanColumnParams
       | FunctionSelectParams
       | CompositeSelectParams,
   ) {
-    this.plot = plot;
-    this.dataset = plot.dataset;
+    this.dataset = dataset;
     this.name = params.name;
     let markReady = function () {};
     this.ready = new Promise((resolve) => {
@@ -424,7 +429,7 @@ export class DataSelection {
    * selection that is the union of the two.
    */
   union(other: DataSelection, name: string | undefined): DataSelection {
-    return new DataSelection(this.plot, {
+    return new DataSelection(this.dataset, {
       name: name || this.name + ' union ' + other.name,
       composition: ['OR', this, other],
     });
@@ -438,7 +443,7 @@ export class DataSelection {
    * disjunctive normal form constructor.
    */
   intersection(other: DataSelection, name: string | undefined): DataSelection {
-    return new DataSelection(this.plot, {
+    return new DataSelection(this.dataset, {
       name: name || this.name + ' intersection ' + other.name,
       composition: ['AND', this, other],
     });
@@ -606,7 +611,7 @@ export class DataSelection {
       }
       return mask.to_arrow();
     };
-    const selection = new DataSelection(this.plot, {
+    const selection = new DataSelection(this.dataset, {
       name: newName,
       tileFunction,
     });
@@ -648,7 +653,7 @@ export class DataSelection {
     if (this.dataset.has_column(name)) {
       throw new Error(`Column ${name} already exists, can't create`);
     }
-    this.plot.dataset.transformations[name] =
+    this.dataset.transformations[name] =
       this.wrapWithSelectionMetadata(tileFunction);
     // Await the application to the root tile, which may be necessary
     await this.dataset.root_tile.apply_transformation(name);
@@ -766,43 +771,22 @@ export class DataSelection {
     }
     if (typeof codes[0] === 'string') {
       const matcher = stringmatcher(key_field, codes as string[]);
-      this.plot.dataset.transformations[name] =
+      this.dataset.transformations[name] =
         this.wrapWithSelectionMetadata(matcher);
       await this.dataset.root_tile.apply_transformation(name);
     } else if (typeof codes[0] === 'bigint') {
       const matcher = bigintmatcher(key_field, codes as bigint[]);
-      this.plot.dataset.transformations[name] =
+      this.dataset.transformations[name] =
         this.wrapWithSelectionMetadata(matcher);
       await this.dataset.root_tile.apply_transformation(name);
     } else {
       console.error('Unable to match type', typeof codes[0]);
     }
-    if (options.plot_after) {
-      return this.apply_to_foreground({});
-    }
   }
 
   async add_boolean_column(name: string, field: string): Promise<void> {
     throw new Error('Method not implemented.');
   }
-
-  apply_to_foreground(params: DS.BackgroundOptions): Promise<void> {
-    const field = this.name;
-    const background_options: DS.BackgroundOptions = {
-      size: [0.5, 10],
-      ...params,
-    };
-    return this.plot.plotAPI({
-      background_options,
-      encoding: {
-        foreground: {
-          field,
-          op: 'gt',
-          a: 0,
-        },
-      },
-    });
-  }
 }
 
 function bigintmatcher(field: string, matches: bigint[]) {