remove yarn lock

.babelrc

@@ -1,5 +1,7 @@
 {
     "presets": [
-      "@babel/preset-env", "@babel/preset-react","@babel/preset-typescript"
+        "@babel/preset-env",
+        "@babel/preset-react",
+        "@babel/preset-typescript"
     ]
-}
+}

.github/workflows/main.yml

@@ -13,6 +13,8 @@ jobs:
           node-version: 18
        - name: Install deps and build (with cache)
          uses: bahmutov/npm-install@v1
+         with:
+          useLockFile: false
        - name: Lint
          run: yarn lint
        - name: Prettier
@@ -36,6 +38,8 @@ jobs:
 
       - name: Install deps and build (with cache)
         uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
 
       - name: Test
         run: yarn test --ci --coverage --maxWorkers=2

.gitignore

@@ -5,3 +5,4 @@ node_modules
 dist
 .vscode
 storybook-static
+yarn.lock

package.json

@@ -1,115 +1,112 @@
 {
-  "name": "@arizeai/point-cloud",
-  "version": "3.0.6",
-  "license": "MIT",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "engines": {
-    "node": ">=10"
-  },
-  "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "eslint ./src",
-    "lint:ts:fix": "eslint --fix ./src",
-    "prettier": "prettier --write './src/**/*'",
-    "prettier:check": "prettier --check './src/**/*'",
-    "prepare": "tsdx build",
-    "size": "size-limit",
-    "analyze": "size-limit --why",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=46df7a59e0a8"
-  },
-  "peerDependencies": {
-    "@react-three/drei": "^9.105.5",
-    "@react-three/fiber": "^8.0.12",
-    "react": ">=18",
-    "three": "^0.139.2",
-    "three-stdlib": "2.23.9"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
-  "prettier": {
-    "tabWidth": 4,
-    "semi": true,
-    "singleQuote": false,
-    "trailingComma": "all"
-  },
-  "author": "Mikyo King <[email protected]>",
-  "module": "dist/point-cloud.esm.js",
-  "size-limit": [
-    {
-      "path": "dist/point-cloud.cjs.production.min.js",
-      "limit": "800 KB"
+    "name": "@arizeai/point-cloud",
+    "version": "3.0.6",
+    "license": "MIT",
+    "main": "dist/index.js",
+    "typings": "dist/index.d.ts",
+    "files": [
+        "dist",
+        "src"
+    ],
+    "engines": {
+        "node": ">=10"
     },
-    {
-      "path": "dist/point-cloud.esm.js",
-      "limit": "10 KB"
-    }
-  ],
-  "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@babel/preset-react": "^7.24.1",
-    "@react-three/drei": "^9.105.5",
-    "@react-three/fiber": "8.13.3",
-    "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^8.0.9",
-    "@storybook/addon-essentials": "^8.0.9",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^8.0.9",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/react": "^8.0.9",
-    "@storybook/react-webpack5": "^8.0.9",
-    "@types/d3-scale-chromatic": "^3.0.3",
-    "@types/react": "^18.0.8",
-    "@types/react-dom": "^18.0.0",
-    "@types/three": "^0.139.0",
-    "@typescript-eslint/eslint-plugin": "^7.7.1",
-    "@typescript-eslint/parser": "^7.7.1",
-    "babel-loader": "^8.2.5",
-    "chromatic": "^6.5.4",
-    "d3-scale-chromatic": "^3.0.0",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-unused-imports": "^3.1.0",
-    "husky": "^7.0.4",
-    "react": "18",
-    "react-dom": "18",
-    "react-is": "^18.1.0",
-    "size-limit": "^7.0.8",
-    "storybook": "^8.0.9",
-    "three": "^0.153.0",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.4.0",
-    "typescript": "^5.4.5"
-  },
-  "description": "A point cloud library for visualizing point clouds using 2D and 3D canvases.",
-  "directories": {
-    "example": "example",
-    "test": "test"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Arize-ai/point-cloud.git"
-  },
-  "keywords": [
-    "point-cloud"
-  ],
-  "bugs": {
-    "url": "https://github.com/Arize-ai/point-cloud/issues"
-  },
-  "homepage": "https://github.com/Arize-ai/point-cloud#readme"
+    "scripts": {
+        "start": "tsdx watch",
+        "build": "tsdx build",
+        "test": "tsdx test --passWithNoTests",
+        "lint": "eslint ./src",
+        "lint:ts:fix": "eslint --fix ./src",
+        "prettier": "prettier --write './src/**/*'",
+        "prettier:check": "prettier --check './src/**/*'",
+        "prepare": "tsdx build",
+        "size": "size-limit",
+        "analyze": "size-limit --why",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
+        "chromatic": "npx chromatic --project-token=46df7a59e0a8"
+    },
+    "peerDependencies": {
+        "@react-three/drei": "^9.105.5",
+        "@react-three/fiber": "^8.0.12",
+        "react": ">=18",
+        "three": "^0.139.2",
+        "three-stdlib": "2.23.9"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "tsdx lint"
+        }
+    },
+    "prettier": {
+        "tabWidth": 4,
+        "semi": true,
+        "singleQuote": false,
+        "trailingComma": "all"
+    },
+    "author": "Mikyo King <[email protected]>",
+    "module": "dist/point-cloud.esm.js",
+    "size-limit": [
+        {
+            "path": "dist/point-cloud.cjs.production.min.js",
+            "limit": "800 KB"
+        },
+        {
+            "path": "dist/point-cloud.esm.js",
+            "limit": "10 KB"
+        }
+    ],
+    "devDependencies": {
+        "@babel/core": "^7.17.9",
+        "@babel/preset-react": "^7.24.1",
+        "@babel/preset-typescript": "^7.24.7",
+        "@react-three/drei": "^9.105.5",
+        "@react-three/fiber": "8.13.3",
+        "@size-limit/preset-small-lib": "^7.0.8",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+        "@storybook/addons": "^7.6.17",
+        "@storybook/react": "^8.0.9",
+        "@storybook/react-webpack5": "^8.0.9",
+        "@types/d3-scale-chromatic": "^3.0.3",
+        "@types/react": "^18.0.8",
+        "@types/react-dom": "^18.0.0",
+        "@types/three": "^0.139.0",
+        "@typescript-eslint/eslint-plugin": "^7.7.1",
+        "@typescript-eslint/parser": "^7.7.1",
+        "babel-loader": "^8.2.5",
+        "chromatic": "^6.5.4",
+        "d3-scale-chromatic": "^3.0.0",
+        "eslint": "^8.56.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-unused-imports": "^3.1.0",
+        "husky": "^7.0.4",
+        "react": "18",
+        "react-dom": "18",
+        "react-is": "^18.1.0",
+        "size-limit": "^7.0.8",
+        "storybook": "^8.0.9",
+        "three": "^0.153.0",
+        "tsdx": "^0.14.1",
+        "tslib": "^2.4.0",
+        "typescript": "^5.4.5"
+    },
+    "description": "A point cloud library for visualizing point clouds using 2D and 3D canvases.",
+    "directories": {
+        "example": "example",
+        "test": "test"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Arize-ai/point-cloud.git"
+    },
+    "keywords": [
+        "point-cloud"
+    ],
+    "bugs": {
+        "url": "https://github.com/Arize-ai/point-cloud/issues"
+    },
+    "homepage": "https://github.com/Arize-ai/point-cloud#readme"
 }

src/Cluster.tsx

@@ -43,7 +43,7 @@
         const geometries: THREE.SphereGeometry[] = [];
         // Keep track of the points added so that we can remove duplicates
         const pointSet = new Set();
-        data.forEach((point) => {
+        data.forEach(point => {
             const { position } = point;
             // Remove duplicates
             if (!pointSet.has(position.join(","))) {
@@ -56,7 +56,7 @@
 
         const geometry = mergeBufferGeometries(geometries);
         return geometry;
     }, [data]);
 
     return (
         <mesh geometry={singleGeometry ?? undefined} visible={opacity > 0}>

src/LassoSelect.tsx

@@ -70,7 +70,7 @@
 
         // Must add the camera to the scene itself
         scene.add(camera);
     }, []);
 
     // Adds event handlers based on props
     useEffect(() => {
@@ -191,8 +191,10 @@
 
     // Animation frames to draw the selections
     useFrame(({ camera }) => {
-        const { selectionShapeNeedsUpdate, selectionPoints } =
-            selectionState.current;
+        const {
+            selectionShapeNeedsUpdate,
+            selectionPoints,
+        } = selectionState.current;
         // Update the selection lasso lines
         if (selectionShapeNeedsUpdate) {
             const ogLength = selectionPoints.length;
@@ -268,7 +270,7 @@
 
     // A vector to re-use in calculating it's intersection with the polygon
     const pointVector = new THREE.Vector3();
-    points.forEach((point) => {
+    points.forEach(point => {
         const isThreeD = point.position.length === 3;
         // Initialize the point vector from the point position
         const pointPosition = isThreeD

src/Points.tsx

@@ -95,7 +95,7 @@
                     : pointProps.color;
             return colorString;
         },
         [pointProps.color],
     );
 
     const colorArray = useMemo(
@@ -107,7 +107,7 @@
                         tempColor.set(getColorPoint(data[idx])).toArray(),
                     ),
             ),
         [data],
     );
 
     const meshRef = useRef<THREE.InstancedMesh>(null);
@@ -180,7 +180,7 @@
                 throw new Error(`Unsupported point shape: ${pointShape}`);
             }
         }
     }, [pointShape, pointProps]);
 
     const materialEl = useMemo(() => {
         switch (material) {
@@ -202,32 +202,32 @@
                     />
                 );
         }
     }, [material]);
 
     return (
         <instancedMesh
             args={[undefined, undefined, data.length]}
             ref={meshRef}
-            onPointerUp={(e) => {
+            onPointerUp={e => {
                 if (e.intersections) {
                     const instanceIds = e.intersections
-                        .map((e) => e?.instanceId)
+                        .map(e => e?.instanceId)
                         .filter((i): i is NonNullable<typeof i> => i != null);
 
                     // Multi click
                     onPointsClicked &&
-                        onPointsClicked(instanceIds.map((i) => data[i]));
+                        onPointsClicked(instanceIds.map(i => data[i]));
 
                     // Single click
                     instanceIds.length > 0 &&
                         onPointClicked &&
                         onPointClicked(data[instanceIds[0]]);
                 }
             }}
-            onPointerOver={(e) => {
+            onPointerOver={e => {
                 if (e.intersections) {
                     const instanceIds = e.intersections
-                        .map((e) => e?.instanceId)
+                        .map(e => e?.instanceId)
                         .filter((i): i is NonNullable<typeof i> => i != null);
 
                     // Single instance callback

src/ThreeDimensionalBounds.tsx

@@ -74,8 +74,9 @@
             camera.zoom =
                 Math.min(width / boundsWidth, height / boundsHeight) *
                 boundsZoomPaddingFactor;
-            const furthestPointDim =
-                getMaxDimensionFromThreeDimensionalBounds(bounds);
+            const furthestPointDim = getMaxDimensionFromThreeDimensionalBounds(
+                bounds,
+            );
 
             // Set the camera position to be a bit further away than the furthest coordinate value, to allow for rotation of the cloud without clipping through the near plane
             // The default near value is .1, so if we move the camera back this far, we are guaranteed to be not clip the near plane
@@ -102,7 +103,7 @@
 
         camera.updateProjectionMatrix();
         camera.lookAt(...center);
     }, [bounds]);
 
     return (
         <BoundsContext.Provider value={{ bounds, center }}>

src/utils/threeDimensionalUtils.ts

@@ -34,7 +34,7 @@ export function getThreeDimensionalBounds(
         minZ = Infinity,
         maxZ = -Infinity;
 
-    points.forEach((p) => {
+    points.forEach(p => {
         minX = Math.min(minX, p[0]);
         minY = Math.min(minY, p[1]);
         minZ = Math.min(minZ, p[2]);

src/utils/twoDimensionalUtils.ts

@@ -30,7 +30,7 @@ export function getTwoDimensionalBounds(
         maxX = -Infinity,
         maxY = -Infinity;
 
-    points.forEach((p) => {
+    points.forEach(p => {
         minX = Math.min(minX, p[0]);
         minY = Math.min(minY, p[1]);
         maxX = Math.max(maxX, p[0]);