♻️ Normalize data

apps/builder/components/analytics/graph/blocks/BlockNode.tsx

@@ -6,9 +6,9 @@ import {
   useEventListener,
 } from '@chakra-ui/react'
 import React, { useState } from 'react'
-import { Block } from 'bot-engine'
 import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
 import { StepsList } from './StepsList'
+import { Block } from 'models'
 
 type Props = {
   block: Block
@@ -56,7 +56,7 @@ export const BlockNode = ({ block }: Props) => {
         <EditablePreview px="1" userSelect={'none'} />
         <EditableInput minW="0" px="1" />
       </Editable>
-      <StepsList blockId={block.id} steps={block.steps} />
+      <StepsList stepIds={block.stepIds} />
     </Stack>
   )
 }

apps/builder/components/analytics/graph/blocks/DropOffBlock.tsx

@@ -1,5 +1,4 @@
 import { Tag, Text, VStack } from '@chakra-ui/react'
-import { Block } from 'bot-engine'
 import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
 import React, { useMemo } from 'react'
 import { AnswersCount } from 'services/analytics'
@@ -21,13 +20,13 @@ export const DropOffBlock = ({ answersCounts, blockId }: Props) => {
   const { totalDroppedUser, dropOffRate } = useMemo(() => {
     if (!typebot || totalAnswers === undefined)
       return { previousTotal: undefined, dropOffRate: undefined }
-    const previousTotal = answersCounts
-      .filter(
-        (a) =>
-          [typebot.startBlock, ...typebot.blocks].find((b) =>
-            (b as Block).steps.find((s) => s.target?.blockId === blockId)
-          )?.id === a.blockId
+    const previousBlockIds = typebot.blocks.allIds.filter(() =>
+      typebot.steps.allIds.find(
+        (sId) => typebot.steps.byId[sId].target?.blockId === 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 }
@@ -41,11 +40,11 @@ export const DropOffBlock = ({ answersCounts, blockId }: Props) => {
 
   const labelCoordinates = useMemo(() => {
     if (!typebot) return { x: 0, y: 0 }
-    const sourceBlock = typebot?.blocks.find((b) => b.id === blockId)
+    const sourceBlock = typebot?.blocks.byId[blockId]
     if (!sourceBlock) return
     return computeSourceCoordinates(
       sourceBlock?.graphCoordinates,
-      sourceBlock?.steps.length - 1
+      sourceBlock?.stepIds.length - 1
     )
   }, [blockId, typebot])
 

apps/builder/components/analytics/graph/blocks/StartBlockNode.tsx

@@ -1,62 +0,0 @@
-import {
-  Editable,
-  EditableInput,
-  EditablePreview,
-  Stack,
-  useEventListener,
-} from '@chakra-ui/react'
-import React, { useState } from 'react'
-import { StartBlock } from 'bot-engine'
-import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
-import { StepsList } from './StepsList'
-
-type Props = {
-  block: StartBlock
-}
-
-export const StartBlockNode = ({ block }: Props) => {
-  const { updateBlockPosition } = useAnalyticsGraph()
-  const [isMouseDown, setIsMouseDown] = useState(false)
-
-  const handleMouseDown = () => {
-    setIsMouseDown(true)
-  }
-  const handleMouseUp = () => {
-    setIsMouseDown(false)
-  }
-
-  const handleMouseMove = (event: MouseEvent) => {
-    if (!isMouseDown) return
-    const { movementX, movementY } = event
-
-    updateBlockPosition(block.id, {
-      x: block.graphCoordinates.x + movementX,
-      y: block.graphCoordinates.y + movementY,
-    })
-  }
-
-  useEventListener('mousemove', handleMouseMove)
-
-  return (
-    <Stack
-      p="4"
-      rounded="lg"
-      bgColor="blue.50"
-      borderWidth="2px"
-      minW="300px"
-      transition="border 300ms"
-      pos="absolute"
-      style={{
-        transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
-      }}
-      onMouseDown={handleMouseDown}
-      onMouseUp={handleMouseUp}
-    >
-      <Editable value={block.title} isDisabled>
-        <EditablePreview px="1" userSelect={'none'} />
-        <EditableInput minW="0" px="1" />
-      </Editable>
-      <StepsList blockId={block.id} steps={block.steps} />
-    </Stack>
-  )
-}

apps/builder/components/analytics/graph/blocks/StepsList.tsx

@@ -1,27 +1,24 @@
 import { Flex, Stack } from '@chakra-ui/react'
-import { StartStep, Step } from 'bot-engine'
 import { StepNodeOverlay } from 'components/board/graph/BlockNode/StepNode'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 
-export const StepsList = ({
-  steps,
-}: {
-  blockId: string
-  steps: Step[] | [StartStep]
-}) => {
+export const StepsList = ({ stepIds }: { stepIds: string[] }) => {
+  const { typebot } = useTypebot()
   return (
     <Stack spacing={1} transition="none">
       <Flex h={'2px'} bgColor={'gray.400'} visibility={'hidden'} rounded="lg" />
-      {steps.map((step) => (
-        <Stack key={step.id} spacing={1}>
-          <StepNodeOverlay key={step.id} step={step} />
-          <Flex
-            h={'2px'}
-            bgColor={'gray.400'}
-            visibility={'hidden'}
-            rounded="lg"
-          />
-        </Stack>
-      ))}
+      {typebot &&
+        stepIds.map((stepId) => (
+          <Stack key={stepId} spacing={1}>
+            <StepNodeOverlay step={typebot?.steps.byId[stepId]} />
+            <Flex
+              h={'2px'}
+              bgColor={'gray.400'}
+              visibility={'hidden'}
+              rounded="lg"
+            />
+          </Stack>
+        ))}
     </Stack>
   )
 }