refactor(graph): ♻️ Add Edges table in Typebot

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

@@ -5,26 +5,31 @@ import {
   getAnchorsPosition,
   computeEdgePath,
   getEndpointTopOffset,
+  getSourceEndpointId,
 } from 'services/graph'
 
-type Props = { stepId: string }
+type Props = { edgeId: string }
 
-export const Edge = ({ stepId }: Props) => {
+export const Edge = ({ edgeId }: Props) => {
   const { typebot } = useAnalyticsGraph()
-  const step = typebot?.steps.byId[stepId]
+  const edge = typebot?.edges.byId[edgeId]
   const { sourceEndpoints, targetEndpoints, graphPosition } = useGraph()
   const [sourceTop, setSourceTop] = useState(
-    getEndpointTopOffset(graphPosition, sourceEndpoints, stepId)
+    getEndpointTopOffset(
+      graphPosition,
+      sourceEndpoints,
+      getSourceEndpointId(edge)
+    )
   )
   const [targetTop, setTargetTop] = useState(
-    getEndpointTopOffset(graphPosition, sourceEndpoints, step?.target?.stepId)
+    getEndpointTopOffset(graphPosition, sourceEndpoints, edge?.to.stepId)
   )
 
   useEffect(() => {
     const newSourceTop = getEndpointTopOffset(
       graphPosition,
       sourceEndpoints,
-      stepId
+      getSourceEndpointId(edge)
     )
     const sensibilityThreshold = 10
     const newSourceTopIsTooClose =
@@ -39,7 +44,7 @@ export const Edge = ({ stepId }: Props) => {
     const newTargetTop = getEndpointTopOffset(
       graphPosition,
       targetEndpoints,
-      step?.target?.stepId
+      edge?.to.stepId
     )
     const sensibilityThreshold = 10
     const newSourceTopIsTooClose =
@@ -51,15 +56,14 @@ export const Edge = ({ stepId }: Props) => {
   }, [graphPosition])
 
   const { sourceBlock, targetBlock } = useMemo(() => {
-    if (!typebot) return {}
-    if (!step?.target) return {}
-    const targetBlock = typebot.blocks.byId[step.target.blockId]
-    const sourceBlock = typebot.blocks.byId[step.blockId]
+    if (!typebot || !edge) return {}
+    const targetBlock = typebot.blocks.byId[edge.to.blockId]
+    const sourceBlock = typebot.blocks.byId[edge.from.blockId]
     return {
       sourceBlock,
       targetBlock,
     }
-  }, [step?.blockId, step?.target, typebot])
+  }, [edge, typebot])
 
   const path = useMemo(() => {
     if (!sourceBlock || !targetBlock) return ``

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

@@ -1,8 +1,7 @@
 import { chakra } from '@chakra-ui/system'
 import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { AnswersCount } from 'services/analytics'
-import { isDefined } from 'utils'
 import { DropOffBlock } from '../blocks/DropOffBlock'
 import { DropOffEdge } from './DropOffEdge'
 import { Edge } from './Edge'
@@ -12,13 +11,6 @@ type Props = { answersCounts?: AnswersCount[] }
 export const Edges = ({ answersCounts }: Props) => {
   const { typebot } = useAnalyticsGraph()
 
-  const stepIdsWithTarget: string[] = useMemo(() => {
-    if (!typebot) return []
-    return typebot.steps.allIds.filter((stepId) =>
-      isDefined(typebot.steps.byId[stepId].target)
-    )
-  }, [typebot])
-
   return (
     <>
       <chakra.svg
@@ -29,8 +21,8 @@ export const Edges = ({ answersCounts }: Props) => {
         left="0"
         top="0"
       >
-        {stepIdsWithTarget.map((stepId) => (
-          <Edge key={stepId} stepId={stepId} />
+        {typebot?.edges.allIds.map((edgeId) => (
+          <Edge key={edgeId} edgeId={edgeId} />
         ))}
         <marker
           id={'arrow'}

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

@@ -3,6 +3,7 @@ import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
 import React, { useMemo } from 'react'
 import { AnswersCount } from 'services/analytics'
 import { computeSourceCoordinates } from 'services/graph'
+import { isDefined } from 'utils'
 
 type Props = {
   answersCounts: AnswersCount[]
@@ -20,11 +21,12 @@ export const DropOffBlock = ({ answersCounts, blockId }: Props) => {
   const { totalDroppedUser, dropOffRate } = useMemo(() => {
     if (!typebot || totalAnswers === undefined)
       return { previousTotal: undefined, dropOffRate: undefined }
-    const previousBlockIds = typebot.blocks.allIds.filter(() =>
-      typebot.steps.allIds.find(
-        (sId) => typebot.steps.byId[sId].target?.blockId === blockId
-      )
-    )
+    const previousBlockIds = typebot.edges.allIds
+      .map((edgeId) => {
+        const edge = typebot.edges.byId[edgeId]
+        return 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)