fix(analytics): 🐛 Analytics board

apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx

@@ -87,6 +87,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
   useEventListener('mousemove', handleMouseMove)
 
   const handleMouseEnter = () => {
+    if (isReadOnly) return
     if (mouseOverBlock?.id !== block.id && !isStartBlock)
       setMouseOverBlock({ id: block.id, ref: blockRef })
     if (connectingIds)
@@ -94,6 +95,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
   }
 
   const handleMouseLeave = () => {
+    if (isReadOnly) return
     setMouseOverBlock(undefined)
     if (connectingIds) setConnectingIds({ ...connectingIds, target: undefined })
   }
@@ -134,7 +136,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
             defaultValue={block.title}
             onSubmit={handleTitleSubmit}
             fontWeight="semibold"
-            isDisabled={isReadOnly}
+            pointerEvents={isReadOnly ? 'none' : 'auto'}
           >
             <EditablePreview
               _hover={{ bgColor: 'gray.300' }}

apps/builder/components/shared/Graph/Nodes/DropOffNode.tsx

@@ -1,70 +0,0 @@
-import { Tag, Text, VStack } from '@chakra-ui/react'
-import { useTypebot } from 'contexts/TypebotContext'
-import React, { useMemo } from 'react'
-import { AnswersCount } from 'services/analytics'
-import { computeSourceCoordinates } from 'services/graph'
-import { byId, isDefined } from 'utils'
-
-type Props = {
-  answersCounts: AnswersCount[]
-  blockId: string
-}
-
-export const DropOffNode = ({ answersCounts, blockId }: Props) => {
-  const { typebot } = useTypebot()
-
-  const totalAnswers = useMemo(
-    () => answersCounts.find((a) => a.blockId === blockId)?.totalAnswers,
-    [answersCounts, blockId]
-  )
-
-  const { totalDroppedUser, dropOffRate } = useMemo(() => {
-    if (!typebot || totalAnswers === undefined)
-      return { previousTotal: undefined, dropOffRate: undefined }
-    const previousBlockIds = typebot.edges
-      .map((edge) =>
-        edge.to.blockId === blockId ? edge.from.blockId : undefined
-      )
-      .filter((blockId) => isDefined(blockId))
-    const previousTotal = answersCounts
-      .filter((a) => previousBlockIds.includes(a.blockId))
-      .reduce((prev, acc) => acc.totalAnswers + prev, 0)
-    if (previousTotal === 0)
-      return { previousTotal: undefined, dropOffRate: undefined }
-    const totalDroppedUser = previousTotal - totalAnswers
-
-    return {
-      totalDroppedUser,
-      dropOffRate: Math.round((totalDroppedUser / previousTotal) * 100),
-    }
-  }, [answersCounts, blockId, totalAnswers, typebot])
-
-  const labelCoordinates = useMemo(() => {
-    const sourceBlock = typebot?.blocks.find(byId(blockId))
-    if (!sourceBlock) return
-    return computeSourceCoordinates(
-      sourceBlock?.graphCoordinates,
-      sourceBlock?.steps.length - 1
-    )
-  }, [blockId, typebot])
-
-  if (!labelCoordinates) return <></>
-  return (
-    <VStack
-      bgColor={'red.500'}
-      color="white"
-      rounded="md"
-      p="2"
-      justifyContent="center"
-      style={{
-        transform: `translate(${labelCoordinates.x - 20}px, ${
-          labelCoordinates.y + 80
-        }px)`,
-      }}
-      pos="absolute"
-    >
-      <Text>{dropOffRate}%</Text>
-      <Tag colorScheme="red">{totalDroppedUser} users</Tag>
-    </VStack>
-  )
-}

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodesList.tsx

@@ -115,7 +115,11 @@ export const StepNodesList = ({
     }
 
   return (
-    <Stack spacing={1} transition="none">
+    <Stack
+      spacing={1}
+      transition="none"
+      pointerEvents={isReadOnly ? 'none' : 'auto'}
+    >
       <Flex
         ref={handlePushElementRef(0)}
         h={
@@ -135,7 +139,7 @@ export const StepNodesList = ({
               key={step.id}
               step={step}
               indices={{ blockIndex, stepIndex: idx }}
-              isConnectable={!isReadOnly && steps.length - 1 === idx}
+              isConnectable={steps.length - 1 === idx}
               onMouseDown={handleStepMouseDown(idx)}
             />
             <Flex