Merge pull request #23 from Arize-ai/bump-peers

chore: bump deps

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env'],
+};

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  transformIgnorePatterns: ['/node_modules/(?!@react-three).+\\.js$'],
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arizeai/point-cloud",
-  "version": "2.1.7",
+  "version": "2.1.8-0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -28,7 +28,7 @@
     "@react-three/fiber": "^8.0.12",
     "react": ">=18",
     "three": "^0.139.2",
-    "three-stdlib": ">=2.10.0"
+    "three-stdlib": "2.23.9"
   },
   "husky": {
     "hooks": {
@@ -55,8 +55,8 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.17.9",
-    "@react-three/drei": "^9.5.4",
-    "@react-three/fiber": "^8.0.12",
+    "@react-three/drei": "9.74.5",
+    "@react-three/fiber": "8.13.3",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.10",
     "@storybook/addon-essentials": "^6.4.22",
@@ -75,7 +75,7 @@
     "react-dom": "18",
     "react-is": "^18.1.0",
     "size-limit": "^7.0.8",
-    "three": "^0.139.2",
+    "three": "^0.153.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
     "typescript": "^4.6.3"

src/Points.tsx

@@ -170,8 +170,7 @@ export function Points({
       case 'meshMatcap':
         return (
           <meshMatcapMaterial
-            // @ts-ignore
-            vertexColors={THREE.VertexColors}
+            vertexColors={true}
             opacity={opacity}
             transparent={opacity < 1}
           />
@@ -180,8 +179,7 @@ export function Points({
       default:
         return (
           <meshStandardMaterial
-            // @ts-ignore
-            vertexColors={THREE.VertexColors}
+            vertexColors={true}
             opacity={opacity}
             transparent={opacity < 1}
           />

src/types.ts

@@ -1,4 +1,4 @@
-import { OrbitControls } from '@react-three/drei';
+import { OrbitControlsProps } from '@react-three/drei';
 
 export type TwoDimensionalPoint = [number, number];
 export type TwoDimensionalBoundsType = {
@@ -37,9 +37,14 @@ export type CameraInitProps = {
  * Pass through some  props directly to the controls
  */
 type ControlPassthroughProps = Pick<
-  React.ComponentProps<typeof OrbitControls>,
-  'onStart' | 'onChange' | 'onEnd' | 'domElement'
->;
+  OrbitControlsProps,
+  'onStart' | 'onEnd' | 'domElement'
+> & {
+  /**
+   * A normalized event handler across all controls
+   */
+  onChange?: (e?: THREE.Event) => void;
+};
 
 /**
  * Control props

stories/ColorByData.stories.tsx

@@ -61,6 +61,7 @@ const colorByFn = (data) => {
   const { actualLabel } = data.metaData;
   return interpolateSinebow(actualLabelsColorMap[actualLabel]);
 };
+
 const Template: Story<ThreeDimensionalCanvasProps> = (args) => (
   <Container>
     <ThreeDimensionalCanvas {...args} camera={{ position: [0, 0, 10] }}>
@@ -71,17 +72,15 @@ const Template: Story<ThreeDimensionalCanvasProps> = (args) => (
       <pointLight position={[0, 0, 0]} />
       <ThreeDimensionalControls />
       <Points
-        // @ts-ignore
-        data={data}
+        data={data as any}
         opacity={1}
         pointProps={{
           scale: 2,
           color: colorByFn,
         }}
       />
       <Points
-        // @ts-ignore
-        data={data2}
+        data={data2 as any}
         opacity={1}
         pointShape="cube"
         pointProps={{

stories/LassoSelect.stories.tsx

@@ -13,20 +13,16 @@ import {
   TwoDimensionalCanvas,
   TwoDimensionalBounds,
   Cluster,
+  PointBaseProps,
+  ThreeDimensionalPoint,
+  TwoDimensionalPoint,
 } from '../src';
 import { Container, ControlPanel, ToolName } from './components';
-import data from './data/point-cloud-3d.json';
-import twoDData from './data/point-cloud-2d.json';
+import _data from './data/point-cloud-3d.json';
+import _twoDData from './data/point-cloud-2d.json';
 
-// const data = [
-//   { metaData: { uuid: 1 }, position: [1, 1, 0] },
-//   { metaData: { uuid: 2 }, position: [-1, 1, 0] },
-// ];
-
-// const twoDData = [
-//   { metaData: { uuid: 1 }, position: [1, 1] },
-//   { metaData: { uuid: 1 }, position: [-1, 1] },
-// ];
+const data = _data as unknown as Array<PointBaseProps>;
+const twoDData = _twoDData as unknown as Array<PointBaseProps>;
 
 const meta: Meta = {
   title: 'LassoSelect',
@@ -42,10 +38,8 @@ export default meta;
 function ThreeDPointCloudWithSelect(props) {
   const selectedTool = props.selectedTool;
   const bounds = React.useMemo(() => {
-    // @ts-ignore
     return getThreeDimensionalBounds([
-      ...data.map((d) => d.position),
-      // ...data2.map((d) => d.position),
+      ...data.map((d) => d.position as ThreeDimensionalPoint),
     ]);
   }, []);
 
@@ -54,8 +48,7 @@ function ThreeDPointCloudWithSelect(props) {
       <ambientLight intensity={0.5} />
       <pointLight position={[0, 0, 10]} />
       <LassoSelect
-        /* @ts-ignore */
-        points={[...data]}
+        points={data}
         onChange={(selection) => {
           props.onChange(selection);
         }}
@@ -78,10 +71,7 @@ function ThreeDPointCloudWithSelect(props) {
               },
             }}
           />
-          <Cluster
-            /* @ts-ignore */
-            data={data}
-          />
+          <Cluster data={data} />
         </ThreeDimensionalBounds>
       </LassoSelect>
     </ThreeDimensionalCanvas>
@@ -91,45 +81,38 @@ function ThreeDPointCloudWithSelect(props) {
 function TwoDPointCloudWithSelect(props) {
   const { selectedTool, selectedPoints } = props;
   const bounds = React.useMemo(() => {
-    // @ts-ignore
-    return getTwoDimensionalBounds([...twoDData.map((d) => d.position)]);
+    return getTwoDimensionalBounds([
+      ...twoDData.map((d) => d.position as TwoDimensionalPoint),
+    ]);
   }, []);
 
   return (
-    <div style={{ position: 'relative' }}>
-      <TwoDimensionalCanvas camera={{ zoom: 1, up: [0, 0, 1] }}>
-        <ambientLight intensity={0.5} />
-        <pointLight position={[0, 0, 10]} />
-        <TwoDimensionalControls />
+    <TwoDimensionalCanvas camera={{ zoom: 30, up: [0, 0, 1] }}>
+      <TwoDimensionalBounds bounds={bounds}>
+        <TwoDimensionalControls enabled={selectedTool === 'move'} />
         <LassoSelect
-          /* @ts-ignore */
           points={twoDData}
           onChange={(selection) => {
             props.onChange(selection);
           }}
           enabled={selectedTool === 'select'}
-        >
-          <axesHelper />
-          <TwoDimensionalBounds bounds={bounds}>
-            <TwoDimensionalControls />
-            <Points
-              /* @ts-ignore */
-              data={twoDData}
-              pointProps={{
-                color: (p) => {
-                  if (props.selectedPoints.includes(p.metaData.uuid)) {
-                    return '#40E0D0';
-                  } else if (props.selectedPoints.length) {
-                    return '#216c64';
-                  }
-                  return '#40E0D0';
-                },
-              }}
-            />
-          </TwoDimensionalBounds>
-        </LassoSelect>
-      </TwoDimensionalCanvas>
-    </div>
+        />
+        <axesHelper />
+        <Points
+          data={twoDData}
+          pointProps={{
+            color: (p) => {
+              if (selectedPoints.includes(p.metaData.uuid)) {
+                return '#40E0D0';
+              } else if (props.selectedPoints.length) {
+                return '#216c64';
+              }
+              return '#40E0D0';
+            },
+          }}
+        />
+      </TwoDimensionalBounds>
+    </TwoDimensionalCanvas>
   );
 }
 

stories/TwoDimensionalControls.stories.tsx

@@ -7,6 +7,7 @@ import {
   Points,
   getTwoDimensionalBounds,
   TwoDimensionalBounds,
+  TwoDimensionalPoint,
 } from '../src';
 import { Container } from './components';
 import data from './data/point-cloud-2d.json';
@@ -31,10 +32,9 @@ export default meta;
 
 const Template: Story<TwoDimensionalControlsProps> = (props) => {
   const bounds = React.useMemo(() => {
-    // @ts-ignore
     return getTwoDimensionalBounds([
-      ...data.map((d) => d.position),
-      ...data2.map((d) => d.position),
+      ...data.map((d) => d.position as TwoDimensionalPoint),
+      ...data2.map((d) => d.position as TwoDimensionalPoint),
     ]);
   }, []);
   return (

test/getCenterFromThreeDimensionalBounds.test.ts

@@ -1,7 +1,7 @@
 import {
   getThreeDimensionalBounds,
   getCenterFromThreeDimensionalBounds,
-} from '../src';
+} from '../src/utils';
 
 describe('getCenterFromThreeDimensionalBounds', () => {
   it('Should help compute the center of bounds', () => {

test/getCenterFromTwoDimensionalBounds.test.tsx

@@ -1,7 +1,7 @@
 import {
   getTwoDimensionalBounds,
   getCenterFromTwoDimensionalBounds,
-} from '../src';
+} from '../src/utils';
 
 describe('getCenterFromTwoDimensionalBounds', () => {
   it('Should help compute the center of bounds', () => {

test/getThreeDimensionalBounds.test.tsx

@@ -1,4 +1,4 @@
-import { getThreeDimensionalBounds } from '../src';
+import { getThreeDimensionalBounds } from '../src/utils/threeDimensionalUtils';
 
 describe('getThreeDimensionalBounds', () => {
   it('Should get the extent of points', () => {

test/getTwoDimensionalBounds.test.tsx

@@ -1,4 +1,4 @@
-import { getTwoDimensionalBounds } from '../src';
+import { getTwoDimensionalBounds } from '../src/utils/twoDimensionalUtils';
 
 describe('getTwoDimensionalBounds', () => {
   it('Should get the extent of points', () => {

test/isPointInsidePolygon.test.ts

@@ -1,4 +1,4 @@
-import { isPointInsidePolygon } from '../src';
+import { isPointInsidePolygon } from '../src/utils/twoDimensionalUtils';
 
 describe('isPointInsidePolygon', () => {
   it('Should detect points within a polygon', () => {