PointCloudPointHoverHalo.tsx•1.33 kB
import { Sphere } from "@react-three/drei";
import { usePointCloudContext } from "@phoenix/contexts";
const POINT_RADIUS_MULTIPLIER = 2;
export function PointCloudPointHoverHalo({
pointRadius,
}: {
/**
* The radius of the point. This is scaled up to be encompassed via the halo
*/
pointRadius: number;
}) {
const hoveredEventId = usePointCloudContext((state) => state.hoveredEventId);
const pointSizeScale = usePointCloudContext((state) => state.pointSizeScale);
const eventIdToDataMap = usePointCloudContext(
(state) => state.eventIdToDataMap
);
const pointGroupColors = usePointCloudContext(
(state) => state.pointGroupColors
);
const eventIdToGroup = usePointCloudContext((state) => state.eventIdToGroup);
if (hoveredEventId == null || eventIdToDataMap == null) return null;
const event = eventIdToDataMap.get(hoveredEventId);
const group = eventIdToGroup[hoveredEventId];
const color = pointGroupColors[group];
if (event == null) return null;
return (
<Sphere
position={event.position}
args={[pointRadius * POINT_RADIUS_MULTIPLIER]}
scale={[pointSizeScale, pointSizeScale, pointSizeScale]}
>
{/* eslint-disable-next-line react/no-unknown-property */}
<meshMatcapMaterial color={color} opacity={0.7} transparent />
</Sphere>
);
}