Merge pull request #27 from Arize-ai/scale

feat: scale points

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arizeai/point-cloud",
-  "version": "3.0.2",
+  "version": "3.0.3-0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/Points.tsx

@@ -115,6 +115,13 @@ export function Points({
   useFrame(() => {
     data.forEach(({ position }, id) => {
       tempObject.position.set(position[0], position[1], position[2] || 0);
+      if (pointProps.scale) {
+        tempObject.scale.set(
+          pointProps.scale,
+          pointProps.scale,
+          pointProps.scale
+        );
+      }
       if (meshRef.current) {
         meshRef.current.setMatrixAt(id, tempObject.matrix);
         meshRef.current.instanceMatrix.needsUpdate = true;

stories/Scale.stories.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { Meta, Story } from '@storybook/react';
+import {
+  ThreeDimensionalCanvas,
+  ThreeDimensionalCanvasProps,
+  ThreeDimensionalControls,
+  Points,
+} from '../src';
+import { Container } from './components';
+import _data from './data/point-cloud-3d.json';
+import { interpolateSinebow } from 'd3-scale-chromatic';
+
+const meta: Meta = {
+  title: 'Scale',
+  component: ThreeDimensionalCanvas,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const data = _data.map((d, idx) => ({
+  ...d,
+  metaData: { actualLabel: `${idx}` },
+}));
+
+const data2 = _data.map((d, idx) => ({
+  ...d,
+  position: [d.position[0], d.position[1] + 1, d.position[2] + 1],
+  metaData: { actualLabel: `${idx}` },
+}));
+
+const actualLabelsArray = Array.from(
+  data.reduce((acc, d) => acc.add(d.metaData.actualLabel), new Set())
+);
+
+const labelCount = actualLabelsArray.length - 1;
+
+const actualLabelsColorMap: Map<string, number> = actualLabelsArray.reduce(
+  (acc: Map<string, number>, d, index) => {
+    acc[d as string] = index / labelCount;
+    return acc;
+  },
+  new Map() as Map<string, number>
+);
+
+const colorByFn = (data) => {
+  const { actualLabel } = data.metaData;
+  return interpolateSinebow(actualLabelsColorMap[actualLabel]);
+};
+
+const Template: Story<ThreeDimensionalCanvasProps> = (args) => {
+  const [scale, setScale] = useState(1);
+  return (
+    <div>
+      <Container>
+        <ThreeDimensionalCanvas {...args} camera={{ position: [0, 0, 10] }}>
+          <ambientLight />
+          <pointLight position={[10, 10, 10]} />
+          <pointLight position={[10, 10, -10]} />
+          <pointLight position={[10, -10, -10]} />
+          <pointLight position={[0, 0, 0]} />
+          <ThreeDimensionalControls />
+          <Points
+            data={data as any}
+            opacity={1}
+            pointProps={{
+              scale: scale,
+              color: colorByFn,
+            }}
+          />
+          <Points
+            data={data2 as any}
+            opacity={1}
+            pointShape="cube"
+            pointProps={{
+              scale: scale,
+              color: colorByFn,
+            }}
+          />
+          <axesHelper />
+        </ThreeDimensionalCanvas>
+      </Container>
+      <input
+        type="range"
+        min={0.1}
+        max={10}
+        step={0.1}
+        value={scale}
+        onChange={(e) => setScale(parseFloat(e.target.value))}
+      />
+    </div>
+  );
+};
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+
+Default.args = {};