♻️ Normalize data

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