♻️ Normalize data

apps/builder/components/analytics/graph/AnalyticsGraph.tsx

@@ -3,7 +3,6 @@ import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
 import React, { useMemo, useRef } from 'react'
 import { AnswersCount } from 'services/analytics'
 import { BlockNode } from './blocks/BlockNode'
-import { StartBlockNode } from './blocks/StartBlockNode'
 import { Edges } from './Edges'
 
 const AnalyticsGraph = ({
@@ -49,9 +48,8 @@ const AnalyticsGraph = ({
         }}
       >
         <Edges answersCounts={answersCounts} />
-        {typebot.startBlock && <StartBlockNode block={typebot.startBlock} />}
-        {(typebot.blocks ?? []).map((block) => (
-          <BlockNode block={block} key={block.id} />
+        {typebot.blocks.allIds.map((blockId) => (
+          <BlockNode block={typebot.blocks.byId[blockId]} key={blockId} />
         ))}
       </Flex>
     </Flex>

apps/builder/components/analytics/graph/Edges/DropOffEdge.tsx

@@ -7,11 +7,12 @@ type Props = {
 }
 export const DropOffEdge = ({ blockId }: Props) => {
   const { typebot } = useAnalyticsGraph()
+
   const path = useMemo(() => {
     if (!typebot) return
-    const block = (typebot?.blocks ?? []).find((b) => b.id === blockId)
+    const block = typebot.blocks.byId[blockId]
     if (!block) return ''
-    return computeDropOffPath(block.graphCoordinates, block.steps.length - 1)
+    return computeDropOffPath(block.graphCoordinates, block.stepIds.length - 1)
   }, [blockId, typebot])
 
   return <path d={path} stroke={'#E53E3E'} strokeWidth="2px" fill="none" />

apps/builder/components/analytics/graph/Edges/Edge.tsx

@@ -1,5 +1,3 @@
-import { Block } from 'bot-engine'
-import { StepWithTarget } from 'components/board/graph/Edges/Edge'
 import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
 import React, { useMemo } from 'react'
 import {
@@ -7,42 +5,37 @@ import {
   computeFlowChartConnectorPath,
 } from 'services/graph'
 
-export const Edge = ({ step }: { step: StepWithTarget }) => {
+type Props = { stepId: string }
+
+export const Edge = ({ stepId }: Props) => {
   const { typebot } = useAnalyticsGraph()
-  const { blocks, startBlock } = typebot ?? {}
 
   const { sourceBlock, targetBlock, targetStepIndex } = useMemo(() => {
-    const targetBlock = blocks?.find(
-      (b) => b?.id === step.target.blockId
-    ) as Block
+    if (!typebot) return {}
+    const step = typebot.steps.byId[stepId]
+    if (!step.target) return {}
+    const targetBlock = typebot.blocks.byId[step.target.blockId]
     const targetStepIndex = step.target.stepId
-      ? targetBlock.steps.findIndex((s) => s.id === step.target.stepId)
+      ? targetBlock.stepIds.indexOf(step.target.stepId)
       : undefined
+    const sourceBlock = typebot.blocks.byId[step.blockId]
     return {
-      sourceBlock: [startBlock, ...(blocks ?? [])].find(
-        (b) => b?.id === step.blockId
-      ),
+      sourceBlock,
       targetBlock,
       targetStepIndex,
     }
-  }, [
-    blocks,
-    startBlock,
-    step.blockId,
-    step.target.blockId,
-    step.target.stepId,
-  ])
+  }, [stepId, typebot])
 
   const path = useMemo(() => {
     if (!sourceBlock || !targetBlock) return ``
     const anchorsPosition = getAnchorsPosition(
       sourceBlock,
       targetBlock,
-      sourceBlock.steps.findIndex((s) => s.id === step.id),
+      sourceBlock.stepIds.indexOf(stepId),
       targetStepIndex
     )
     return computeFlowChartConnectorPath(anchorsPosition)
-  }, [sourceBlock, step.id, targetBlock, targetStepIndex])
+  }, [sourceBlock, stepId, targetBlock, targetStepIndex])
 
   return (
     <path

apps/builder/components/analytics/graph/Edges/Edges.tsx

@@ -1,8 +1,8 @@
 import { chakra } from '@chakra-ui/system'
-import { StepWithTarget } from 'components/board/graph/Edges/Edge'
 import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
 import React, { useMemo } from 'react'
 import { AnswersCount } from 'services/analytics'
+import { isDefined } from 'utils'
 import { DropOffBlock } from '../blocks/DropOffBlock'
 import { DropOffEdge } from './DropOffEdge'
 import { Edge } from './Edge'
@@ -11,16 +11,13 @@ type Props = { answersCounts?: AnswersCount[] }
 
 export const Edges = ({ answersCounts }: Props) => {
   const { typebot } = useAnalyticsGraph()
-  const { blocks, startBlock } = typebot ?? {}
-  const stepsWithTarget: StepWithTarget[] = useMemo(() => {
-    if (!startBlock) return []
-    return [
-      ...(startBlock.steps.filter((s) => s.target) as StepWithTarget[]),
-      ...((blocks ?? [])
-        .flatMap((b) => b.steps)
-        .filter((s) => s.target) as StepWithTarget[]),
-    ]
-  }, [blocks, startBlock])
+
+  const stepIdsWithTarget: string[] = useMemo(() => {
+    if (!typebot) return []
+    return typebot.steps.allIds.filter((stepId) =>
+      isDefined(typebot.steps.byId[stepId].target)
+    )
+  }, [typebot])
 
   return (
     <>
@@ -32,8 +29,8 @@ export const Edges = ({ answersCounts }: Props) => {
         left="0"
         top="0"
       >
-        {stepsWithTarget.map((step) => (
-          <Edge key={step.id} step={step} />
+        {stepIdsWithTarget.map((stepId) => (
+          <Edge key={stepId} stepId={stepId} />
         ))}
         <marker
           id={'arrow'}

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>
   )
 }