📝 vignette on display_scatter interactivity

.editorConfig

@@ -0,0 +1,11 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2

_pkgdown.yml

@@ -12,7 +12,9 @@ navbar:
   - text: Vignettes
     menu:
     - text: Adding a new display method to detourr
-      href: articles/adding_a_new_widget.html
+      href: articles/adding_a_new_widget/adding_a_new_widget.html
+    - text: Interacting with display_scatter
+      href: articles/display_scatter_interactivity/display_scatter_interactivity.html
   right:
   - icon: fa-github fa-lg
     href: https://github.com/casperhart/detourr

srcts/display_scatter/display_scatter.ts

@@ -181,8 +181,9 @@ export abstract class DisplayScatter {
       newHeight,
       this.currentFrame / this.projectionMatrices.length
     );
-
-    this.axisLabels.map((x) => x.setDpr(dpr));
+    if (this.hasAxisLabels) {
+      this.axisLabels.map((x) => x.setDpr(dpr));
+    }
   }
 
   public renderValue(inputData: ScatterInputData) {
@@ -345,8 +346,7 @@ export abstract class DisplayScatter {
     const toolTip = document.createElement("div");
     const toolTipText = document.createElement("span");
     toolTip.appendChild(toolTipText);
-    toolTipText.innerHTML = "hello";
-    toolTip.className = "tooltip";
+    toolTip.className = "detourrTooltip";
     this.container.appendChild(toolTip);
     this.toolTip = toolTip;
   }
@@ -589,6 +589,9 @@ export abstract class DisplayScatter {
     const width = 1;
     const height = 1;
 
+    //console.log(`event x: ${event.x} y: ${event.y}`)
+    //console.log(`canvas x: ${x} y: ${y}`)
+
     const pixelBuffer = new Uint8Array(12);
 
     renderer.readRenderTargetPixels(
@@ -606,18 +609,19 @@ export abstract class DisplayScatter {
       id != this.backgroundColour &&
       this.filteredPointIndices.includes(id - 1)
     ) {
+      console.log(id)
       const toolTipCoords = this.toolTip.getBoundingClientRect();
       this.toolTip.style.left = `${
         Math.floor(x / dpr) - toolTipCoords.width
       }px`;
       this.toolTip.style.top = `${
         Math.floor(y / dpr) - toolTipCoords.height
       }px`;
-      this.toolTip.className = "tooltip visible";
+      this.toolTip.className = "detourrTooltip visible";
       const span = this.toolTip.querySelector("span");
       span.innerHTML = `${this.mapping.label[id - 1]}`;
     } else {
-      this.toolTip.className = "tooltip";
+      this.toolTip.className = "detourrTooltip";
     }
   }
 

srcts/display_scatter/style.css

@@ -81,7 +81,7 @@ div.axisLabel {
   pointer-events: none;
 }
 
-div.tooltip {
+div.detourrTooltip {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -93,7 +93,7 @@ div.tooltip {
   font-family: sans-serif;
 }
 
-div.tooltip.visible {
+div.detourrTooltip.visible {
   visibility: visible;
 }
 

srcts/display_scatter/timeline.ts

@@ -18,16 +18,16 @@ export class Timeline {
   private scrubber: HTMLElement;
   private playPauseButton: HTMLElement;
   private timelineWidth: number;
-  private scrubberWidth: number = 16;
-  private timelineThickness: number = 4;
+  private scrubberWidth = 16;
+  private timelineThickness = 4;
   private numAnimationFrames: number;
   private basisIndices: number[];
   private hasBasisIndicators = true;
   private basisIndicators: HTMLDivElement[] = [];
   private basisIndicatorDiameter = 4;
   private tooltip: HTMLDivElement;
 
-  private mouseDown: boolean = false;
+  private mouseDown = false;
   private currentPosition: number;
   private candidatePosition: number;
   private lastMousePosition: number;
@@ -65,7 +65,7 @@ export class Timeline {
     icon: string,
     buttonCallback: Function
   ) {
-    let button = document.createElement("button");
+    const button = document.createElement("button");
     button.innerHTML = icon;
     button.title = hoverText;
     button.className = `${name}Button`;
@@ -99,13 +99,13 @@ export class Timeline {
   }
 
   private addContainer() {
-    let container = document.createElement("div");
+    const container = document.createElement("div");
     container.className = "timelineContainer";
     this.container = container;
   }
 
   private addTimeline() {
-    let timeline = document.createElement("div");
+    const timeline = document.createElement("div");
     timeline.className = "timeline";
     timeline.style.height = this.timelineThickness + "px";
     timeline.style.top = 15 - this.timelineThickness / 2 + "px";
@@ -123,7 +123,7 @@ export class Timeline {
     this.numAnimationFrames = this.widget.getNumAnimationFrames();
 
     for (let i = 0; i < this.basisIndices.length; i++) {
-      let basisIndicator = document.createElement("div");
+      const basisIndicator = document.createElement("div");
       basisIndicator.className = "basisIndicator";
       basisIndicator.style.width = this.basisIndicatorDiameter + "px";
       basisIndicator.style.height = this.basisIndicatorDiameter + "px";
@@ -139,34 +139,33 @@ export class Timeline {
   }
 
   private addTooltip() {
-    let tooltip = document.createElement("div");
-    let tooltipText = document.createElement("span");
+    const tooltip = document.createElement("div");
+    const tooltipText = document.createElement("span");
     tooltip.appendChild(tooltipText);
-    tooltipText.innerHTML = "hello";
-    tooltip.className = "tooltip";
+    tooltip.className = "detourrTooltip";
     tooltip.style.top = "-20px";
     this.container.appendChild(tooltip);
     this.tooltip = tooltip;
   }
 
   private basisIndicatorHoverCallback(event: MouseEvent, ind: number) {
-    let span = this.tooltip.querySelector("span");
+    const span = this.tooltip.querySelector("span");
     span.innerHTML = `Basis ${ind + 1}`;
-    let canvasCoords = this.container.getBoundingClientRect();
-    let tooltipCoords = this.tooltip.getBoundingClientRect();
+    const canvasCoords = this.container.getBoundingClientRect();
+    const tooltipCoords = this.tooltip.getBoundingClientRect();
 
-    let x = event.clientX - canvasCoords.left;
-    let y = event.clientY - canvasCoords.top;
-    this.tooltip.className = "tooltip visible";
+    const x = event.clientX - canvasCoords.left;
+    const y = event.clientY - canvasCoords.top;
+    this.tooltip.className = "detourrTooltip visible";
     this.tooltip.style.left = `${Math.floor(x) - tooltipCoords.width}px`;
-    setTimeout(() => (this.tooltip.className = "tooltip"), 3000);
+    setTimeout(() => (this.tooltip.className = "detourrTooltip"), 3000);
   }
   private basisIndicatorClickCallback(event: MouseEvent, ind: number) {
     this.widget.setTime(this.basisIndices[ind] / this.numAnimationFrames);
   }
 
   private addScrubber() {
-    let scrubber = document.createElement("div");
+    const scrubber = document.createElement("div");
     scrubber.style.left = "0px";
     scrubber.style.width = this.scrubberWidth + "px";
     scrubber.style.height = this.scrubberWidth + "px";