Fix: QA develop issues

packages/explorable-explanations/public/styles.css

@@ -157,4 +157,5 @@ text {
     right: 10px;
     top: 10px;
     display: flex;
+    width: fit-content;
 }

packages/explorable-explanations/src/protectedAudience/components/branches.ts

@@ -29,7 +29,6 @@ import FlowExpander from './flowExpander';
 import type { Coordinates, CoordinateValue } from '../types';
 import { getCoordinateValues } from '../utils/getCoordinateValues';
 
-const LEFT_MARGIN = 70; // Margin from the left side of the canvas
 const EXPAND_ICON_SIZE = config.timeline.expandIconSize;
 
 let spacing: number, renderedBranchIds: number[], endpoints: Coordinates[];
@@ -79,6 +78,8 @@ const Branches = async ({
 
   const y2 = y1 + 50;
   spacing = 300; // Calculate spacing based on canvas width
+  const branchXEndpoint = x1 > spacing ? x1 + spacing : x1 + spacing * 2;
+  const branchXStartpoint = x1 > spacing ? x1 - spacing : x1;
 
   await ProgressLine({
     x1: x1,
@@ -90,11 +91,8 @@ const Branches = async ({
   });
 
   const drawInstantly = () => {
-    const branchXEndpoint =
-      x1 + ((branches.length + 1) / 2) * spacing - LEFT_MARGIN * 4 - 20;
-
     branches.forEach(({ id, type }, index) => {
-      const x = x1 + (index - (branches.length - 1) / 2) * spacing;
+      const x = branchXStartpoint + index * spacing;
       const y = y2 - 9;
       let endpoint;
       p.push();
@@ -181,19 +179,13 @@ const Branches = async ({
   // Clear canvas or update logic (if necessary)
   wipeAndRecreateInterestCanvas();
 
-  const branchXStartpoint =
-    x1 - (branches.length / 2) * spacing + LEFT_MARGIN * 2 + 10;
-  const branchXEndpoint =
-    x1 + ((branches.length + 1) / 2) * spacing - LEFT_MARGIN * 4 - 20;
-
   await ProgressLine({
     x1: branchXStartpoint,
     y1: y2 - 9,
     customWidth: branchXEndpoint - branchXStartpoint,
     direction: 'right',
     noArrow: true,
     noAnimation: app.speedMultiplier === 4,
-    isBranch: true,
     isForBranches: true,
   });
 
@@ -213,7 +205,7 @@ const Branches = async ({
 
   await Promise.all(
     branches.map(async ({ id, type }, index) => {
-      const x = x1 + (index - (branches.length - 1) / 2) * spacing;
+      const x = branchXStartpoint + index * spacing;
       const y = y2 - 9;
       let endpoint;
 

packages/explorable-explanations/src/protectedAudience/components/progressLine.ts

@@ -33,7 +33,6 @@ type ProgressLineProps = {
   text?: string;
   noArrow?: boolean;
   noAnimation?: boolean;
-  isBranch?: boolean;
   isForBranches?: boolean;
 };
 
@@ -46,7 +45,6 @@ const ProgressLine = ({
   text = '',
   noArrow = false,
   noAnimation = app.speedMultiplier === 4,
-  isBranch = false,
   isForBranches = false,
 }: ProgressLineProps): Promise<Coordinates | null> => {
   const p = app.p;
@@ -55,7 +53,6 @@ const ProgressLine = ({
   }
   const width = customWidth ?? config.flow.lineWidth - ARROW_SIZE;
   const height = customHeight ?? config.flow.lineHeight - ARROW_SIZE;
-  const incrementBy = isBranch ? 15 : app.speedMultiplier; // Adjust to control speed
   const scrollAdjuster =
     (direction === 'right' ? config.flow.box.height : config.flow.box.width) /
     2;
@@ -94,6 +91,7 @@ const ProgressLine = ({
 
       //Redundant condition to handle case when animation has started and someone has switched to fastest speed.
       let drawInstantlyFlag = false;
+      let isEnding = false;
 
       if (
         noAnimation ||
@@ -110,12 +108,14 @@ const ProgressLine = ({
 
       switch (direction) {
         case 'right':
-          currentX += Math.min(incrementBy, x2 - currentX);
+          currentX = p.lerp(currentX, Math.round(x2), app.speedMultiplier / 15);
+          isEnding = Math.round(currentX) === Math.round(x2);
+
           if (!isForBranches) {
             utils.scrollToCoordinates(currentX + width, y2 - scrollAdjuster);
           }
 
-          if (drawInstantlyFlag) {
+          if (drawInstantlyFlag || isEnding) {
             currentX = x2;
           }
 
@@ -128,21 +128,22 @@ const ProgressLine = ({
           p.line(x1, y1, currentX, y2);
           drawArrow(currentX, y1, direction);
 
-          if (currentX === x2) {
+          if (isEnding) {
             resolve({ x: x2, y: y2 });
             return;
           }
 
           break;
 
         case 'left':
-          currentX -= Math.min(incrementBy, currentX - x2);
+          currentX = p.lerp(currentX, Math.round(x2), app.speedMultiplier / 15);
+          isEnding = Math.round(currentX) === Math.round(x2);
 
           if (!isForBranches) {
             utils.scrollToCoordinates(currentX, y1 - scrollAdjuster);
           }
 
-          if (drawInstantlyFlag) {
+          if (drawInstantlyFlag || isEnding) {
             currentX = x2;
           }
 
@@ -154,7 +155,7 @@ const ProgressLine = ({
           p.line(x1, y1, currentX, y2);
           drawArrow(currentX, y1 - 5, direction);
 
-          if (currentX === x2) {
+          if (isEnding) {
             utils.drawText(text, currentX + width / 2, y1 + height / 2 - 10);
             resolve({ x: x2, y: y2 });
             return;
@@ -163,9 +164,10 @@ const ProgressLine = ({
           break;
 
         case 'down':
-          currentY += Math.min(incrementBy, y2 - currentY);
+          currentY = p.lerp(currentY, Math.round(y2), app.speedMultiplier / 15);
+          isEnding = Math.round(currentY) === Math.round(y2);
 
-          if (drawInstantlyFlag) {
+          if (drawInstantlyFlag || isEnding) {
             currentY = y2;
           }
 
@@ -177,7 +179,7 @@ const ProgressLine = ({
           p.line(x1, y1, x2, currentY);
           drawArrow(x1, currentY - 2, direction);
 
-          if (currentY === y2) {
+          if (isEnding) {
             utils.drawText(
               text,
               x1 - (text.startsWith('$') ? 10 : width / 2),
@@ -190,12 +192,14 @@ const ProgressLine = ({
           break;
 
         case 'up':
-          currentY -= Math.min(incrementBy, currentY - y2);
+          currentY = p.lerp(currentY, Math.round(y2), app.speedMultiplier / 15);
+          isEnding = Math.round(currentY) === Math.round(y2);
+
           if (!isForBranches) {
             utils.scrollToCoordinates(x1 - scrollAdjuster, y1 - height);
           }
 
-          if (drawInstantlyFlag) {
+          if (drawInstantlyFlag || isEnding) {
             currentY = y2;
           }
 
@@ -207,7 +211,7 @@ const ProgressLine = ({
           p.line(x1, y1, x2, currentY);
           drawArrow(x1, currentY, direction);
 
-          if (currentY === y2) {
+          if (isEnding) {
             utils.drawText(
               text,
               x1 + (text.startsWith('$') ? 10 : width / 2),

packages/explorable-explanations/src/protectedAudience/config.ts

@@ -85,7 +85,7 @@ const config: Config = {
     width: 700,
     height: 500,
     extraHeight: 1600, // @todo: It needs to be calculated based on the content.
-    extraWidth: 500, // @todo: It needs to be calculated based on the content.
+    extraWidth: 1100, // @todo: It needs to be calculated based on the content.
     background: '#fff',
     fontSize: 12,
   },

packages/explorable-explanations/src/protectedAudience/modules/auctions/index.ts

@@ -99,7 +99,7 @@ const auction: Auction = {
 
     app.p.textAlign(app.p.CENTER, app.p.CENTER);
 
-    if (!app.auction.auctions[index]) {
+    if (!app.auction.auctions[index].length) {
       return;
     }
 

packages/explorable-explanations/src/protectedAudience/modules/auctions/multi-seller/setUpComponentAuctions.ts

@@ -61,6 +61,15 @@ const setUpComponentAuctions = (steps: AuctionStep[], index: number) => {
       width: BOX_WIDTH,
       height: BOX_HEIGHT,
       x: () => {
+        if (
+          getCoordinateValues(app.auction.nextTipCoordinates).x -
+            BOX_WIDTH / 2 <
+          0
+        ) {
+          boxCordinates.x = 100;
+          return boxCordinates.x;
+        }
+
         boxCordinates.x =
           getCoordinateValues(app.auction.nextTipCoordinates).x - BOX_WIDTH / 2;
         return boxCordinates.x;
@@ -70,6 +79,7 @@ const setUpComponentAuctions = (steps: AuctionStep[], index: number) => {
         return boxCordinates.y;
       },
       borderStroke: [0, 0, 0, 0],
+      isBranchComponent: true,
     },
     delay: 1000,
     callBack: (returnValue) => {
@@ -232,7 +242,6 @@ const setUpComponentAuctionStarter = (
       y1: () => getCoordinateValues(app.auction.nextTipCoordinates).y - 275,
       customWidth: 1000,
       noArrow: true,
-      isBranch: true,
     },
   });
 

packages/explorable-explanations/src/protectedAudience/modules/joinInterestGroup.ts

@@ -192,7 +192,7 @@ const joinInterestGroup: JoinInterestGroup = {
 
     const steps = app.joinInterestGroup.joinings[index];
 
-    if (!steps) {
+    if (!steps.length) {
       return;
     }
 
@@ -251,6 +251,11 @@ const joinInterestGroup: JoinInterestGroup = {
 
     app.promiseQueue?.push(async (cb) => {
       if (!app.isRevisitingNodeInInteractiveMode) {
+        const { x, y } =
+          app.timeline.circlePositions[app.timeline.currentIndex];
+
+        utils.scrollToCoordinates(x as number, y as number);
+
         await bubbles.reverseBarrageAnimation(index);
         app.setCurrentSite(config.timeline.circles[index]);
       }

packages/explorable-explanations/src/protectedAudience/types.ts

@@ -141,6 +141,7 @@ export type AuctionStepProps = {
   showBarrageAnimation?: boolean;
   showWinningAd?: boolean;
   showRippleEffect?: boolean;
+  isBranchComponent?: boolean;
 };
 
 export type AuctionStep = {

packages/explorable-explanations/src/protectedAudience/utils/isPointInViewport.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Internal dependencies
+ */
+import app from '../app';
+/**
+ * This element checks if the object is in viewport.
+ * @param x Coordinate X of the object to scroll to.
+ * @param y Coordinate Y of the object to scroll to.
+ * @returns {boolean} Whether the object is in viewport or not.
+ */
+export function isPointInViewport(x, y) {
+  if (!app.canvasParentElement) {
+    return false;
+  }
+  const rect = app.canvasParentElement.getBoundingClientRect();
+
+  const scrollX = app.canvasParentElement.scrollLeft;
+  const scrollY = app.canvasParentElement.scrollTop;
+
+  const viewportWidth = rect.width;
+  const viewportHeight = rect.height;
+
+  const minX = scrollX;
+  const maxX = scrollX + viewportWidth;
+  const minY = scrollY;
+  const maxY = scrollY + viewportHeight;
+
+  return x >= minX && x <= maxX && y >= minY && y <= maxY;
+}

packages/explorable-explanations/src/protectedAudience/utils/scrollToCoordinates.ts

@@ -17,32 +17,32 @@
  * Internal dependencies
  */
 import app from '../app';
+import { isPointInViewport } from './isPointInViewport';
 export const scrollToCoordinates = (x: number, y: number, override = false) => {
-  if (!app.autoScroll || app.isRevisitingNodeInInteractiveMode) {
+  if (
+    !app.autoScroll ||
+    app.isRevisitingNodeInInteractiveMode ||
+    !app.canvasParentElement
+  ) {
     return;
   }
 
   if (override) {
-    app.canvasParentElement?.scrollTo({
+    app.canvasParentElement.scrollTo({
       left: 0,
       top: 0,
       behavior: 'smooth',
     });
     return;
   }
 
-  const rect = app.canvasParentElement?.getBoundingClientRect();
-
-  if (!rect) {
+  if (isPointInViewport(x - 50, y + 50)) {
     return;
   }
 
-  const finalX = x - rect.left,
-    finalY = y - rect.top;
-
-  app.canvasParentElement?.scrollTo({
-    left: finalX,
-    top: finalY,
+  app.canvasParentElement.scrollTo({
+    left: x - 50,
+    top: y - 50,
     behavior: 'smooth',
   });
 };