Merge pull request #111 from nomic-ai/imagelabels

improve labels

dev/Main.svelte

@@ -1,28 +1,34 @@
 <script>
   import { onMount } from 'svelte';
+
+  // Each test file is a svelte component -- routing
+  // here is just grabbing the URL and instantiating that
+  // component.
+
   import FourClasses from './FourClasses.svelte';
   import SinglePoint from './SinglePoint.svelte';
+  import LabelMaker from './submodules/LabelMaker.svelte';
+
   const modes = {
-    FourClasses: FourClasses,
-    SinglePoint: SinglePoint,
+    FourClasses,
+    SinglePoint,
+    LabelMaker,
   };
 
   $: mode = '';
   onMount(() => {
-    mode = window.location.hash.slice(1);
-    // window.onhashchange(() => {
-    //   mode = window.location.hash.slice(1);
-    // });
+    mode = window.location.pathname.slice(1);
   });
 </script>
 
 {#if mode in modes}
   <svelte:component this={modes[mode]} />
 {:else}
+  Current mode, {mode} is not in the list of modes.
   <h1>Put a load mode from the list in the hash.</h1>
   <div>
     {#each Object.keys(modes) as modename}
-      <a href="#{modename}">{modename}</a><br />
+      <a href="/{modename}">{modename}</a><br />
     {/each}
   </div>
 {/if}

dev/submodules/LabelMaker.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { onMount } from 'svelte';
+  import { LabelMaker, Scatterplot } from '../../src/deepscatter';
+
+  onMount(() => {
+    const scatterplot = new Scatterplot('#labels');
+    const d = document.getElementById('labels');
+    d.ATTRIBUTE_NODE;
+    if (d === null) {
+      throw new Error('ComponentDidNotMount');
+    }
+    const maker = new LabelMaker(scatterplot, 'maker');
+  });
+</script>
+
+<div class="full" id="labels">
+  <canvas class="full fixed"> </canvas>
+  <svg class="full fixed"> </svg>
+</div>
+
+<style>
+  .full {
+    width: 100vw;
+    height: 100vh;
+  }
+  .fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+</style>

src/label_rendering.ts

@@ -30,7 +30,6 @@ export class LabelMaker extends Renderer {
   public tree: DepthTree;
   public timer?: Timer;
   public label_key?: string;
-  //  public svg: SVGElement;
   public labelgroup: SVGGElement;
   private hovered: undefined | string;
   public options: DS.LabelOptions = {};
@@ -45,11 +44,7 @@ export class LabelMaker extends Renderer {
     id_raw: string,
     options: DS.LabelOptions = {},
   ) {
-    super(
-      scatterplot.div!.node() as HTMLDivElement,
-      scatterplot.deeptable,
-      scatterplot,
-    );
+    super(scatterplot.div!.node() as HTMLDivElement, scatterplot);
     this.options = options;
     this.canvas = scatterplot
       .elements![2].selectAll('canvas')
@@ -99,8 +94,6 @@ export class LabelMaker extends Renderer {
       this.timer.stop();
     }
 
-    select(this.labelgroup).attr('display', 'inline');
-
     this.timer = timer(() => {
       this.render();
       ticks -= 1;
@@ -120,7 +113,7 @@ export class LabelMaker extends Renderer {
   stop() {
     if (this.timer) {
       this.timer.stop();
-      select(this.labelgroup).attr('display', 'none');
+      select(this.labelgroup).selectAll('rect.labelbbox').remove();
       this.ctx.clearRect(0, 0, 4096, 4096);
       this.timer = undefined;
     }
@@ -198,11 +191,16 @@ export class LabelMaker extends Renderer {
     const bboxes = select(this.labelgroup)
       .selectAll('rect.labelbbox')
       // Keyed by the coordinates.
-      .data(overlaps, (d: BBox) => String(d.minZ) + String(d.minX))
+      .data(
+        overlaps,
+        (d: BBox) =>
+          String(d.minZ) + String(d.minX) + (d.data as RawPoint).text,
+      )
       .join((enter) =>
         enter
           .append('rect')
           .attr('class', 'labellbox')
+          .attr('data-labelmaker-label', (d) => `${(d.data as RawPoint).text}`)
           .style('opacity', RECT_DEFAULT_OPACITY),
       );
 
@@ -308,7 +306,7 @@ export class LabelMaker extends Renderer {
       .attr('display', (d: P3d) => {
         return (d.data.properties.__display as string) || 'inline';
       })
-      .on('mouseover', (event, d) => {
+      .on('mouseover', (event, d: P3d) => {
         select(event.target).style('opacity', RECT_DEFAULT_OPACITY);
         this.hovered = '' + d.minZ + d.minX;
         event.stopPropagation();

src/regl_rendering.ts

@@ -75,7 +75,7 @@ export class ReglRenderer extends Renderer {
     tileSet: Deeptable,
     scatterplot: Scatterplot,
   ) {
-    super(selector, tileSet, scatterplot);
+    super(selector, scatterplot);
     const c = this.canvas;
     if (this.canvas === undefined) {
       throw new Error('No canvas found');

src/rendering.ts

@@ -135,17 +135,12 @@ export class Renderer {
   public aes?: AestheticSet;
   public _zoom?: Zoom;
   public render_props: RenderProps = new RenderProps();
-  constructor(
-    selector: string | Node,
-    tileSet: Deeptable,
-    scatterplot: Scatterplot,
-  ) {
+  constructor(selector: string | Node, scatterplot: Scatterplot) {
     this.scatterplot = scatterplot;
     this.holder = select(selector as string);
     this.canvas = select(
       this.holder!.node()!.firstElementChild,
     ).node() as HTMLCanvasElement;
-    this.deeptable = tileSet;
     this.width = +select(this.canvas).attr('width');
     this.height = +select(this.canvas).attr('height');
     this.deferred_functions = [];
@@ -181,7 +176,7 @@ export class Renderer {
     const { aes } = this;
     const needed = new Set<string>();
     if (aes) {
-      for (const [_k, v] of Object.entries(aes.store)) {
+      for (const v of Object.values(aes.store)) {
         if (v instanceof StatefulAesthetic) {
           for (const f of v.neededFields) {
             needed.add(f);
@@ -242,7 +237,7 @@ export class Renderer {
     // yield the currently visible tiles based on the zoom state
     // and a maximum index passed manually.
     const { max_ix } = this;
-    const { deeptable: tileSet } = this;
+
     // Materialize using a tileset method.
 
     if (!this.aes) throw new Error('Aesthetic missing');
@@ -255,7 +250,7 @@ export class Renderer {
       y.last.field == 'y';
 
     const all_tiles = natural_display
-      ? tileSet
+      ? this.scatterplot.deeptable
           .map((d: Tile) => d)
           .filter((tile) => {
             const visible = tile.is_visible(
@@ -264,7 +259,9 @@ export class Renderer {
             );
             return visible;
           })
-      : tileSet.map((d) => d).filter((tile) => tile.min_ix < this.max_ix);
+      : this.scatterplot.deeptable
+          .map((d) => d)
+          .filter((tile) => tile.min_ix < this.max_ix);
     all_tiles.sort((a, b) => a.min_ix - b.min_ix);
     return all_tiles;
   }

src/scatterplot.ts

@@ -391,9 +391,7 @@ export class Scatterplot {
     const { prefs } = this;
 
     await this.deeptable.ready;
-    console.log('HERE');
     await this.deeptable.root_tile.get_column('x');
-    console.log('HERE 2');
 
     this._renderer = new ReglRenderer(
       '#container-for-webgl-canvas',