refactor: [breaking] change umap, knn, and findClusters API to camelCase (#34)

Author: donghaoren

packages/component/src/lib/embedding_view/EmbeddingViewImpl.svelte

@@ -36,7 +36,7 @@
   interface Cluster {
     x: number;
     y: number;
-    sum_density: number;
+    sumDensity: number;
     rects: Rectangle[];
     bandwidth: number;
     label?: string | null;
@@ -548,12 +548,12 @@
     viewport: ViewportState,
   ): Promise<Cluster[]> {
     let map = await renderer.densityMap(1000, 1000, bandwidth, viewport);
-    let cs = await findClusters(map.data, map.width, map.height, { union_threshold: bandwidth });
-    let collectedClusters = [];
+    let cs = await findClusters(map.data, map.width, map.height);
+    let collectedClusters: Cluster[] = [];
     for (let idx = 0; idx < cs.length; idx++) {
       let c = cs[idx];
-      let coord = map.coordinateAtPixel(c.mean_x, c.mean_y);
-      let rects: Rectangle[] = c.boundary_rect_approximation!.map(([x1, y1, x2, y2]) => {
+      let coord = map.coordinateAtPixel(c.meanX, c.meanY);
+      let rects: Rectangle[] = c.boundaryRectApproximation!.map(([x1, y1, x2, y2]) => {
         let p1 = map.coordinateAtPixel(x1, y1);
         let p2 = map.coordinateAtPixel(x2, y2);
         return {
@@ -566,14 +566,14 @@
       collectedClusters.push({
         x: coord.x,
         y: coord.y,
-        sum_density: c.sum_density,
+        sumDensity: c.sumDensity,
         rects: rects,
         bandwidth: bandwidth,
       });
     }
-    let maxDensity = collectedClusters.reduce((a, b) => Math.max(a, b.sum_density), 0);
+    let maxDensity = collectedClusters.reduce((a, b) => Math.max(a, b.sumDensity), 0);
     let threshold = maxDensity * 0.005;
-    return collectedClusters.filter((x) => x.sum_density > threshold);
+    return collectedClusters.filter((x) => x.sumDensity > threshold);
   }
 
   async function generateLabels(viewport: ViewportState): Promise<InitialLabel[]> {
@@ -610,7 +610,7 @@
         text: x.label!,
         x: x.x,
         y: x.y,
-        priority: x.sum_density,
+        priority: x.sumDensity,
         level: x.bandwidth == 10 ? 0 : 1,
       }));
 

packages/density-clustering/density_clustering_wasm/js/index.d.ts

@@ -3,27 +3,27 @@ export interface Cluster {
   /** Cluster identifier */
   identifier: number;
   /** The total density */
-  sum_density: number;
+  sumDensity: number;
   /** The mean x location (weighted by density) */
-  mean_x: number;
+  meanX: number;
   /** The mean y location (weighted by density) */
-  mean_y: number;
+  meanY: number;
   /** The maximum density */
-  max_density: number;
+  maxDensity: number;
   /** The location with the maximum density */
-  max_density_location: [number, number];
+  maxDensityLocation: [number, number];
   /** The number of pixels in the cluster */
-  pixel_count: number;
+  pixelCount: number;
   /** The cluster's boundary represented as a list of polygons */
   boundary?: [number, number][][];
-  /** The cluster's boundary approximated with a list of rectangles */
-  boundary_rect_approximation?: [number, number, number, number][];
+  /** The cluster's boundary approximated with a list of rectangles, each rectangle is given as an array [x1, y1, x2, y2] */
+  boundaryRectApproximation?: [number, number, number, number][];
 }
 
 /** Options of the find clusters function */
 export interface FindClustersOptions {
   /** The threshold for unioning two clusters */
-  union_threshold: number;
+  unionThreshold: number;
 }
 
 /**
@@ -34,9 +34,9 @@ export interface FindClustersOptions {
  * @param options algorithm options
  * @returns
  */
-export async function findClusters(
-  density_map: Float32Array,
+export function findClusters(
+  densityMap: Float32Array,
   width: number,
   height: number,
-  options: Partial<FindClustersOptions> = {},
+  options?: Partial<FindClustersOptions>,
 ): Promise<Cluster[]>;

packages/density-clustering/density_clustering_wasm/js/index.js

@@ -4,23 +4,23 @@ import * as cluster from "../pkg/density_clustering_wasm.js";
 
 /**
  * Find clusters from a density map
- * @param density_map the density map, a `Float32Array` with `width * height` elements
+ * @param densityMap the density map, a `Float32Array` with `width * height` elements
  * @param width the width of the density map
  * @param height the height of the density map
  * @param options algorithm options
  * @returns
  */
-export async function findClusters(density_map, width, height, options = {}) {
+export async function findClusters(densityMap, width, height, options = {}) {
   await cluster.default();
   // console.debug(`find clusters start, size: ${width}x${height}`);
   let t0 = new Date().getTime();
-  let input = new cluster.DensityMap(width, height, density_map);
+  let input = new cluster.DensityMap(width, height, densityMap);
   let result = cluster.find_clusters(input, {
     clustering_options: {
       use_disjoint_set: true,
       truncate_to_max_density: true,
       perform_neighbor_map_grouping: false,
-      union_threshold: 10.0,
+      union_threshold: options.unionThreshold ?? 10,
       density_upperbound_scaler: 0.2,
       density_lowerbound_scaler: 0.2,
       ...options,
@@ -33,14 +33,14 @@ export async function findClusters(density_map, width, height, options = {}) {
   for (let [id, summary] of result.summaries) {
     clusters.push({
       identifier: id,
-      sum_density: summary.sum_density,
-      mean_x: summary.sum_x_density / summary.sum_density,
-      mean_y: summary.sum_y_density / summary.sum_density,
-      max_density: summary.max_density,
-      max_density_location: summary.max_density_location,
-      pixel_count: summary.num_pixels,
+      sumDensity: summary.sum_density,
+      meanX: summary.sum_x_density / summary.sum_density,
+      meanY: summary.sum_y_density / summary.sum_density,
+      maxDensity: summary.max_density,
+      maxDensityLocation: summary.max_density_location,
+      pixelCount: summary.num_pixels,
       boundary: result.boundaries.get(id),
-      boundary_rect_approximation: result.boundary_rects.get(id),
+      boundaryRectApproximation: result.boundary_rects.get(id),
     });
   }
   clusters = clusters.filter((x) => x.boundary != null);

packages/docs/algorithms.md

@@ -16,19 +16,19 @@ To initialize the UMAP algorithm, use `createUMAP`:
 import { createUMAP } from "embedding-atlas";
 
 let count = 2000;
-let input_dim = 100;
-let output_dim = 2;
+let inputDim = 100;
+let outputDim = 2;
 
-// The data must be a Float32Array with count * input_dim elements.
-let data = new Float32Array(count * input_dim);
+// The data must be a Float32Array with count * inputDim elements.
+let data = new Float32Array(count * inputDim);
 // ... fill in the data
 
 let options = {
   metric: "cosine",
 };
 
 // Use `createUMAP` to initialize the algorithm.
-let umap = await createUMAP(count, input_dim, output_dim, data, options);
+let umap = await createUMAP(count, inputDim, outputDim, data, options);
 ```
 
 After initialization, use the `run` method to update the embedding coordinates:
@@ -48,7 +48,7 @@ for (let i = 0; i < 100; i++) {
 At any time, you can get the current embedding by calling the `embedding` method.
 
 ```js
-// The result is a Float32Array with count * output_dim elements.
+// The result is a Float32Array with count * outputDim elements.
 let embedding = umap.embedding();
 ```
 
@@ -66,22 +66,22 @@ In addition, you can also use the `createKNN` function to perform approximate ne
 import { createKNN } from "embedding-atlas";
 
 let count = 2000;
-let input_dim = 100;
+let inputDim = 100;
 
-// The data must be a Float32Array with count * input_dim elements.
-let data = new Float32Array(count * input_dim);
+// The data must be a Float32Array with count * inputDim elements.
+let data = new Float32Array(count * inputDim);
 // ... fill in the data
 
 let options = {
   metric: "cosine",
 };
 
 // Create the KNN instance
-let knn = await createKNN(count, input_dim, data, options);
+let knn = await createKNN(count, inputDim, data, options);
 
 // Perform queries
-let query = new Float32Array(input_dim);
-knn.query_by_vector(query, k);
+let query = new Float32Array(inputDim);
+knn.queryByVector(query, k);
 
 // Destroy the instance
 knn.destroy();
@@ -96,7 +96,7 @@ To run the algorithm, use `findClusters`.
 import { findClusters } from "embedding-atlas";
 
 // A density map of width * height floating point numbers.
-let density_map: Float32Array;
+let densityMap: Float32Array;
 
-clusters = await findClusters(density_map, width, height);
+clusters = await findClusters(densityMap, width, height);
 ```

packages/examples/src/svelte/FindClustersExample.svelte

@@ -24,7 +24,7 @@
         amplitude: randomUniform(0.1, 1, rng),
       });
     }
-    let density_map = new Float32Array(width * height);
+    let densityMap = new Float32Array(width * height);
     for (let y = 0; y < width; y++) {
       for (let x = 0; x < width; x++) {
         let d = 0;
@@ -37,20 +37,20 @@
           ry /= g.s2;
           d += Math.exp(-(rx ** 2 + ry ** 2)) * g.amplitude;
         }
-        density_map[y * width + x] = d * 80;
+        densityMap[y * width + x] = d * 80;
       }
     }
-    return density_map;
+    return densityMap;
   }
 
   async function run() {
-    const density_map = generateDensity(width, height);
-    clusters = await findClusters(density_map, width, height);
+    const densityMap = generateDensity(width, height);
+    clusters = await findClusters(densityMap, width, height);
 
     let ctx = canvas.getContext("2d")!;
     let data = ctx.getImageData(0, 0, width, height);
     for (let i = 0; i < width * height; i++) {
-      let value = density_map[i];
+      let value = densityMap[i];
       data.data[i * 4 + 0] = value;
       data.data[i * 4 + 1] = value;
       data.data[i * 4 + 2] = value;
@@ -67,7 +67,7 @@
   <svg style:position="absolute" width={width} height={height}>
     {#each clusters as c}
       <g>
-        {#each c.boundary_rect_approximation ?? [] as [x1, y1, x2, y2]}
+        {#each c.boundaryRectApproximation ?? [] as [x1, y1, x2, y2]}
           <rect x={x1} y={y1} width={x2 - x1} height={y2 - y1} style:stroke="rgba(255,0,0,0.1)" style:fill="none" />
         {/each}
         {#each c.boundary ?? [] as boundary}
@@ -77,7 +77,7 @@
             style:fill="rgba(255,127,14,0.1)"
           />
         {/each}
-        <circle cx={c.mean_x} cy={c.mean_y} r={2} style:fill="rgba(255,127,14,1)" />
+        <circle cx={c.meanX} cy={c.meanY} r={2} style:fill="rgba(255,127,14,1)" />
       </g>
     {/each}
   </svg>

packages/umap-wasm/README.md

@@ -16,19 +16,19 @@ To initialize the algorithm, use `createUMAP`:
 import { createUMAP } from "umap-wasm";
 
 let count = 2000;
-let input_dim = 100;
-let output_dim = 2;
+let inputDim = 100;
+let outputDim = 2;
 
-// The data must be a Float32Array with count * input_dim elements.
-let data = new Float32Array(count * input_dim);
+// The data must be a Float32Array with count * inputDim elements.
+let data = new Float32Array(count * inputDim);
 // ... fill in the data
 
 let options = {
   metric: "cosine",
 };
 
 // Use `createUMAP` to initialize the algorithm.
-let umap = await createUMAP(count, input_dim, output_dim, data, options);
+let umap = await createUMAP(count, inputDim, outputDim, data, options);
 ```
 
 After initialization, use the `run` method to update the embedding coordinates:
@@ -48,7 +48,7 @@ for (let i = 0; i < 100; i++) {
 At any time, you can get the current embedding by calling the `embedding` method.
 
 ```js
-// The result is a Float32Array with count * output_dim elements.
+// The result is a Float32Array with count * outputDim elements.
 let embedding = umap.embedding();
 ```