Merge pull request #124 from casperhart/dependency-update

update dependencies

Author: casperhart

.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs

@@ -1,2 +1,7 @@
-yarnPath: .yarn/releases/yarn-3.1.1.cjs
 nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-1.22.22.cjs

.yarn/releases/yarn-1.22.22.cjs

@@ -2,30 +2,30 @@
   "name": "detourr",
   "license": "MIT",
   "dependencies": {
-    "@stdlib/math-base-special-betainc": "^0.0.6",
-    "@tensorflow/tfjs-backend-wasm": "^3.15.0",
-    "@tensorflow/tfjs-core": "^3.15.0",
+    "@stdlib/math-base-special-betainc": "^0.2.2",
+    "@tensorflow/tfjs-backend-wasm": "^4.0.0",
+    "@tensorflow/tfjs-core": "^4.0.0",
     "shiny": "https://github.com/rstudio/shiny#v1.8.0",
-    "three": "^0.128.0",
+    "three": "^0.176.0",
     "url-loader": "^4.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.14.3",
     "@babel/register": "^7.13.16",
-    "@types/three": "^0.129.1",
+    "@types/three": "^0.176.0",
     "@typescript-eslint/eslint-plugin": "latest",
-    "@typescript-eslint/parser": "^5.10.1",
-    "copy-webpack-plugin": "^9.0.0",
-    "css-loader": "^6.0.0",
-    "eslint": "^8.8.0",
-    "eslint-config-prettier": "^8.3.0",
-    "prettier": "^2.5.1",
-    "style-loader": "^3.1.0",
+    "@typescript-eslint/parser": "^8.32.0",
+    "copy-webpack-plugin": "^13.0.0",
+    "css-loader": "^7.1.2",
+    "eslint": "^9.26.0",
+    "eslint-config-prettier": "^10.1.5",
+    "prettier": "^3.5.3",
+    "style-loader": "^4.0.0",
     "ts-loader": "^9.1.2",
-    "typescript": "^4.2.4",
+    "typescript": "^5.8.3",
     "webpack": "^5.35.1",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^4.13.3"
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.1"
   },
   "scripts": {
     "build": "rm -rf inst/htmlwidgets/lib/scatter_widget && webpack --config ./webpack/package.config.ts && R -q -e 'devtools::document(); devtools::build_readme()' && R CMD INSTALL $(git rev-parse --show-toplevel)",
@@ -41,5 +41,5 @@
     "async": "^2.6.4",
     "follow-redirects": "1.14.8"
   },
-  "packageManager": "yarn@3.1.1"
+  "packageManager": "yarn@1.22.22"
 }

.yarn/releases/yarn-3.1.1.cjs

@@ -70,7 +70,6 @@ export abstract class DisplayScatter {
   protected auxEdgeBuffer: THREE.BufferGeometry;
   protected highlightedPoints: Array<number> = null;
 
-
   public container: HTMLDivElement;
   public canvas: HTMLCanvasElement = document.createElement("canvas");
   public shinyMode: boolean;
@@ -112,7 +111,12 @@ export abstract class DisplayScatter {
   private crosstalkSelectionHandle?: any;
   private crosstalkFilterHandle?: any;
 
-  constructor(containerElement: HTMLDivElement, width: number, height: number, shinyMode: boolean) {
+  constructor(
+    containerElement: HTMLDivElement,
+    width: number,
+    height: number,
+    shinyMode: boolean
+  ) {
     this.width = width;
     this.height = height;
     this.shinyMode = shinyMode;
@@ -155,20 +159,20 @@ export abstract class DisplayScatter {
 
           this.auxEdgeData = undefined;
           if (this.auxEdge !== undefined) {
-            this.scene.remove(this.auxEdge)
-            this.auxEdge.geometry.dispose()
+            this.scene.remove(this.auxEdge);
+            this.auxEdge.geometry.dispose();
             this.auxEdge = undefined;
           }
 
           for (let i = 0; i < this.n; i++) {
-            this.pointAlphas.set([this.config.alpha], i)
+            this.pointAlphas.set([this.config.alpha], i);
           }
           this.pointAlphas.needsUpdate = true;
           this.points.geometry.getAttribute("alpha").needsUpdate = true;
           this.renderer.render(this.scene, this.camera);
           this.animate();
         }
-      })
+      });
     }
 
     this.pointAlphas = this.getPointAlphas();
@@ -213,27 +217,26 @@ export abstract class DisplayScatter {
 
   // Creates a buffer attribute of 1 dimension containing value repeated for times
   public createFilledAttribute(value: number, times: number) {
-    return new THREE.BufferAttribute(new Float32Array(times).fill(value), 1)
+    return new THREE.BufferAttribute(new Float32Array(times).fill(value), 1);
   }
 
   // Create points to be added to the scene
   public createPoints(
     size: number,
     currentFrameBuffer: THREE.BufferAttribute,
     pointColours: THREE.BufferAttribute,
-    pointAlphas: THREE.BufferAttribute,
+    pointAlphas: THREE.BufferAttribute
   ): THREE.Points<THREE.BufferGeometry, THREE.Material | THREE.Material[]> {
-
     const pointsGeometry = new THREE.BufferGeometry();
     const pointSize = size / 10;
 
     const shaderOpts = this.getShaderOpts();
     const pointsMaterial = new THREE.ShaderMaterial(shaderOpts);
 
     pointsGeometry.setAttribute("position", currentFrameBuffer);
-    var sizes = new Float32Array(this.n)
-    sizes.fill(pointSize)
-    pointsGeometry.setAttribute("size", new THREE.BufferAttribute(sizes, 1))
+    var sizes = new Float32Array(this.n);
+    sizes.fill(pointSize);
+    pointsGeometry.setAttribute("size", new THREE.BufferAttribute(sizes, 1));
     var points = new THREE.Points(pointsGeometry, pointsMaterial);
     points.geometry.setAttribute("color", pointColours);
     points.geometry.setAttribute("alpha", pointAlphas);
@@ -260,8 +263,10 @@ export abstract class DisplayScatter {
     // set color
     const point_color = new THREE.Color();
     const bufferArray = new Float32Array(data_tensor.shape[0] * 3); // just one point hence just rgb
-    for (var i = 0; i < data_tensor.shape[0] * 3; i += 3) {
-      point_color.set(typeof colour === "string" ? colour : colour[Math.floor(i / 3)]);
+    for (let i = 0; i < data_tensor.shape[0] * 3; i += 3) {
+      point_color.set(
+        typeof colour === "string" ? colour : colour[Math.floor(i / 3)]
+      );
       bufferArray[i] = point_color.r;
       bufferArray[i + 1] = point_color.g;
       bufferArray[i + 2] = point_color.b;
@@ -270,14 +275,16 @@ export abstract class DisplayScatter {
     const bufferPosAttrForCurrentFrame = this.getPointsBuffer(
       currentFrame % this.projectionMatrices.length,
       data_tensor
-    )
+    );
 
     const point = this.createPoints(
       size == null ? this.config.size : size,
       bufferPosAttrForCurrentFrame,
       new THREE.BufferAttribute(bufferArray, 3),
-      alpha == null ? this.pointAlphas : this.createFilledAttribute(alpha, data_tensor.shape[0])
-    )
+      alpha == null
+        ? this.pointAlphas
+        : this.createFilledAttribute(alpha, data_tensor.shape[0])
+    );
 
     this.scene.add(point);
     this.renderer.render(this.scene, this.camera);
@@ -288,8 +295,8 @@ export abstract class DisplayScatter {
   public addEdges(data: Array<Array<number>>) {
     if (this.auxEdgeData) {
       this.auxEdgeData = undefined;
-      this.scene.remove(this.auxEdge)
-      this.auxEdge.geometry.dispose()
+      this.scene.remove(this.auxEdge);
+      this.auxEdge.geometry.dispose();
       this.auxEdge = undefined;
     }
     this.auxEdgeData = data.flat();
@@ -312,12 +319,15 @@ export abstract class DisplayScatter {
   public highlightPoints(point_list: Array<number>, alpha: number = null) {
     if (this.highlightedPoints != null) {
       for (let i = 0; i < this.n; i++) {
-        this.pointAlphas.set([this.config.alpha], i)
+        this.pointAlphas.set([this.config.alpha], i);
       }
     }
     for (let i = 0; i < this.n; i++) {
       if (!point_list.includes(i)) {
-        this.pointAlphas.set([alpha == null ? this.config.alpha / 8 : alpha], i)
+        this.pointAlphas.set(
+          [alpha == null ? this.config.alpha / 8 : alpha],
+          i
+        );
       }
     }
     this.highlightedPoints = point_list;
@@ -328,13 +338,16 @@ export abstract class DisplayScatter {
   }
 
   public enlargePoints(point_list: Array<number>, size: number = null) {
-    var sizes = new Float32Array(this.n)
-    sizes.fill(this.config.size / 10)
-    point_list.forEach(index => {
+    var sizes = new Float32Array(this.n);
+    sizes.fill(this.config.size / 10);
+    point_list.forEach((index) => {
       sizes[index] = size / 10;
     });
 
-    this.points.geometry.setAttribute("size", new THREE.BufferAttribute(sizes, 1));
+    this.points.geometry.setAttribute(
+      "size",
+      new THREE.BufferAttribute(sizes, 1)
+    );
     (this.points.material as THREE.ShaderMaterial).needsUpdate = true;
     this.renderer.render(this.scene, this.camera);
     this.animate();
@@ -352,24 +365,27 @@ export abstract class DisplayScatter {
   public clearEdges() {
     if (this.auxEdge != undefined) {
       this.auxEdgeData = undefined;
-      this.scene.remove(this.auxEdge)
-      this.auxEdge.geometry.dispose()
+      this.scene.remove(this.auxEdge);
+      this.auxEdge.geometry.dispose();
       this.auxEdge = undefined;
     }
   }
 
   public clearHighlight() {
     for (let i = 0; i < this.n; i++) {
-      this.pointAlphas.set([this.config.alpha], i)
+      this.pointAlphas.set([this.config.alpha], i);
     }
     this.pointAlphas.needsUpdate = true;
     this.points.geometry.getAttribute("alpha").needsUpdate = true;
   }
 
   public clearEnlarge() {
-    var sizes = new Float32Array(this.n)
-    sizes.fill(this.config.size / 10)
-    this.points.geometry.setAttribute("size", new THREE.BufferAttribute(sizes, 1));
+    var sizes = new Float32Array(this.n);
+    sizes.fill(this.config.size / 10);
+    this.points.geometry.setAttribute(
+      "size",
+      new THREE.BufferAttribute(sizes, 1)
+    );
     (this.points.material as THREE.ShaderMaterial).needsUpdate = true;
   }
 
@@ -592,7 +608,10 @@ export abstract class DisplayScatter {
     this.scene.add(this.axisSegments);
   }
 
-  private addEdgeSegments(pointsBuffer: THREE.BufferAttribute, edges: number[]): THREE.LineSegments {
+  private addEdgeSegments(
+    pointsBuffer: THREE.BufferAttribute,
+    edges: number[]
+  ): THREE.LineSegments {
     const edgesGeometry = new THREE.BufferGeometry();
     const edgesMaterial = new THREE.LineBasicMaterial({
       color: 0x000000,
@@ -604,7 +623,7 @@ export abstract class DisplayScatter {
 
     this.edgeSegments = new THREE.LineSegments(edgesGeometry, edgesMaterial);
     this.scene.add(this.edgeSegments);
-    return (this.edgeSegments);
+    return this.edgeSegments;
   }
 
   private addContainerElement(containerElement: HTMLDivElement) {
@@ -659,7 +678,10 @@ export abstract class DisplayScatter {
     );
   }
 
-  private getPointsBuffer(i: number, dataset: tf.Tensor2D): THREE.BufferAttribute {
+  private getPointsBuffer(
+    i: number,
+    dataset: tf.Tensor2D
+  ): THREE.BufferAttribute {
     // flattened projection matrix
     const position = tf.tidy(() => {
       return this.project(dataset, this.projectionMatrices[i]);
@@ -746,7 +768,7 @@ export abstract class DisplayScatter {
 
   private addAxisLabels() {
     const dpr = this.renderer.getPixelRatio();
-    if (this.config.axisLabels == []) {
+    if (this.config.axisLabels.length === 0) {
       this.hasAxisLabels = false;
     } else {
       this.hasAxisLabels = true;
@@ -792,7 +814,7 @@ export abstract class DisplayScatter {
 
     const pixelBuffer = new Uint8Array(4 * width * height);
 
-    // re-render the picking scene with smaller points to prevent overplotting 
+    // re-render the picking scene with smaller points to prevent overplotting
     // when picking
     this.points.geometry.setAttribute("color", this.pickingColours);
     (this.points.material as THREE.ShaderMaterial).uniforms.picking.value = 1;
@@ -937,18 +959,24 @@ export abstract class DisplayScatter {
       this.filteredPointIndices.includes(id - 1)
     ) {
       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.style.left = `${
+        Math.floor(x / dpr) - toolTipCoords.width
+      }px`;
+      this.toolTip.style.top = `${
+        Math.floor(y / dpr) - toolTipCoords.height
+      }px`;
       this.toolTip.className = "detourrTooltip visible";
       const span = this.toolTip.querySelector("span");
       span.innerHTML = `${this.mapping.label[id - 1]}`;
     } else {
       this.toolTip.className = "detourrTooltip";
     }
   }
-  private getCoordsfromClick(event: PointerEvent, canvas: HTMLCanvasElement, dpr: number) {
+  private getCoordsfromClick(
+    event: PointerEvent,
+    canvas: HTMLCanvasElement,
+    dpr: number
+  ) {
     const canvas_coords = canvas.getBoundingClientRect();
     const x = (event.x - canvas_coords.left) * dpr * this.scaleX();
     const y = (event.y - canvas_coords.top) * dpr * this.scaleY();
@@ -978,11 +1006,10 @@ export abstract class DisplayScatter {
       id != this.backgroundColour &&
       this.filteredPointIndices.includes(id - 1)
     ) {
-      return (id);
+      return id;
     } else {
-      return (null);
+      return null;
     }
-
   }
 
   // TODO: break away chunks in to separate functions
@@ -1010,17 +1037,19 @@ export abstract class DisplayScatter {
         const currentAuxFrameBuffer = this.getPointsBuffer(
           currentFrame % this.projectionMatrices.length,
           this.auxData
-        )
+        );
         this.auxPoint.geometry.setAttribute("position", currentAuxFrameBuffer);
         this.auxPoint.geometry.getAttribute("position").needsUpdate = true;
         this.renderer.render(this.scene, this.camera);
       }
 
       if (this.auxEdgeData) {
         const edgesBuffer = this.getEdgesBuffer(
-          this.auxPoint.geometry.getAttribute("position") as THREE.BufferAttribute,
+          this.auxPoint.geometry.getAttribute(
+            "position"
+          ) as THREE.BufferAttribute,
           this.auxEdgeData
-        )
+        );
         this.auxEdge.geometry.setAttribute("position", edgesBuffer);
         this.auxEdge.geometry.getAttribute("position").needsUpdate = true;
         this.renderer.render(this.scene, this.camera);
@@ -1033,7 +1062,10 @@ export abstract class DisplayScatter {
         );
       }
       if (this.hasEdges) {
-        const edgesBuffer = this.getEdgesBuffer(this.currentFrameBuffer, this.edges);
+        const edgesBuffer = this.getEdgesBuffer(
+          this.currentFrameBuffer,
+          this.edges
+        );
         this.edgeSegments.geometry.setAttribute("position", edgesBuffer);
       }
 

.yarnrc.yml

@@ -1,3 +1,4 @@
+import * as THREE from "three";
 export interface Mapping {
   colour: string[];
   label: string[];