chore: example with tooltip

Arize-ai · Jun 21, 2023 · 5c1d0db · 5c1d0db
1 parent ff10265
commit 5c1d0db
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 1 deletion.
diff --git a/stories/Connections.stories.tsx b/stories/Connections.stories.tsx
@@ -1,5 +1,5 @@
 import React, { startTransition, useRef, useState } from 'react';
-import { Meta, Story } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import {
   Axes,
   PointBaseProps,

diff --git a/stories/Tooltip.stories.tsx b/stories/Tooltip.stories.tsx
@@ -0,0 +1,73 @@
+import { Meta, Story } from '@storybook/react';
+import { startTransition, useState } from 'react';
+import { Container, ToolName } from './components';
+import {
+  Axes,
+  PointBaseProps,
+  Points,
+  ThreeDimensionalBounds,
+  ThreeDimensionalCanvas,
+  ThreeDimensionalControls,
+  ThreeDimensionalPoint,
+  getThreeDimensionalBounds,
+} from '../src';
+import React from 'react';
+import { Html } from '@react-three/drei';
+import _data from './data/point-cloud-3d.json';
+import { Vector3 } from 'three';
+const data = _data as unknown as Array<PointBaseProps>;
+
+const meta: Meta = {
+  title: 'Tooltip',
+};
+
+export default meta;
+
+export function Default() {
+  const [tool, setTool] = useState<ToolName>('move');
+  const bounds = React.useMemo(() => {
+    return getThreeDimensionalBounds([
+      ...data.map((d) => d.position as ThreeDimensionalPoint),
+    ]);
+  }, []);
+  const [selectedPoint, setSelectedPoint] =
+    useState<PointBaseProps | null>(null);
+
+  return (
+    <Container showToolbar selectedTool={tool} onToolChange={setTool}>
+      <ThreeDimensionalCanvas camera={{ zoom: 1, up: [0, 0, 1] }}>
+        <ambientLight intensity={0.5} />
+        <pointLight position={[0, 0, 10]} />
+        <ThreeDimensionalControls />
+        <ThreeDimensionalBounds bounds={bounds}>
+          <Axes size={bounds.maxX - bounds.minX} />
+          <Points
+            data={data}
+            pointProps={{
+              color: 'limegreen',
+            }}
+            onPointHovered={(point) => {
+              startTransition(() => {
+                setSelectedPoint(point);
+              });
+            }}
+            onPointerLeave={() => {
+              startTransition(() => {
+                setSelectedPoint(null);
+              });
+            }}
+          />
+        </ThreeDimensionalBounds>
+        {selectedPoint ? (
+          <Html position={selectedPoint.position as unknown as Vector3}>
+            <div style={{ color: 'white', padding: '10px 10px' }}>
+              <section style={{ background: 'gray', borderRadius: '4px' }}>
+                {selectedPoint.metaData.uuid}
+              </section>
+            </div>
+          </Html>
+        ) : null}
+      </ThreeDimensionalCanvas>
+    </Container>
+  );
+}