Refactor number translator

Signed-off-by: Anh Hoang Nguyen <[email protected]>

Author: aaanh

packages/react-components/src/components/trace-context-component.tsx

@@ -191,16 +191,7 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
         const viewRangeStart = viewRange.getStart() - (offset ? offset : BigInt(0));
         const viewRangeEnd = viewRange.getEnd() - (offset ? offset : BigInt(0));
         this.unitController = new TimeGraphUnitController(absoluteRange, { start: viewRangeStart, end: viewRangeEnd });
-        this.unitController.numberTranslator = this.unitController.numberTranslator = (theNumber: bigint) => {
-            const originalStart = this.state.currentRange.getStart();
-            theNumber += originalStart;
-            const zeroPad = (num: bigint) => String(num).padStart(3, '0');
-            const seconds = theNumber / BigInt(1000000000);
-            const millis = zeroPad((theNumber / BigInt(1000000)) % BigInt(1000));
-            const micros = zeroPad((theNumber / BigInt(1000)) % BigInt(1000));
-            const nanos = zeroPad(theNumber % BigInt(1000));
-            return seconds + '.' + millis + ' ' + micros + ' ' + nanos;
-        };
+        this.unitController.numberTranslator = createNumberTranslator(true, this.state.currentRange.getStart());
         this.unitController.worldRenderFactor = 0.25;
         this.historyHandler = new UnitControllerHistoryHandler(this.unitController);
         if (this.props.persistedState?.currentTimeSelection) {
@@ -793,14 +784,19 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
                                 ganttChartRange.getDuration(),
                                 { start: ganttChartRange.getStart(), end: ganttChartRange.getEnd() }
                             );
-                            ganttChartUnitController.numberTranslator = (theNumber: bigint) => {
-                                const zeroPad = (num: bigint) => String(num).padStart(3, '0');
-                                const seconds = theNumber / BigInt(1000000000);
-                                const millis = zeroPad((theNumber / BigInt(1000000)) % BigInt(1000));
-                                const micros = zeroPad((theNumber / BigInt(1000)) % BigInt(1000));
-                                const nanos = zeroPad(theNumber % BigInt(1000));
-                                return seconds + '.' + millis + ' ' + micros + ' ' + nanos;
-                            };
+                            ganttChartUnitController.numberTranslator = createNumberTranslator(false);
+                            // Restore view range if available, otherwise set to global view range
+                            const fgViewRange = this.state.ganttChartRanges?.[output.id];
+                            if (fgViewRange) {
+                                ganttChartUnitController.viewRange = fgViewRange;
+                            } else {
+                                // Use the global view range from the parent unit controller
+                                const globalViewRange = this.unitController.viewRange;
+                                ganttChartUnitController.viewRange = {
+                                    start: globalViewRange.start,
+                                    end: globalViewRange.end
+                                };
+                            }
                             // Listen for view range changes
                             ganttChartUnitController.onViewRangeChanged((_old, newRange) => {
                                 this.handleGanttChartViewRangeChange(output.id, newRange);

packages/react-components/src/components/utils/number-translator.ts

@@ -0,0 +1,16 @@
+export default function createNumberTranslator(
+    isTimeBased: boolean,
+    originalStart?: bigint
+): (theNumber: bigint) => string {
+    return function (theNumber: bigint): string {
+        if (isTimeBased && originalStart) {
+            theNumber += originalStart;
+        }
+        const zeroPad = (num: bigint) => String(num).padStart(3, '0');
+        const seconds = theNumber / BigInt(1000000000);
+        const millis = zeroPad((theNumber / BigInt(1000000)) % BigInt(1000));
+        const micros = zeroPad((theNumber / BigInt(1000)) % BigInt(1000));
+        const nanos = zeroPad(theNumber % BigInt(1000));
+        return seconds + '.' + millis + ' ' + micros + ' ' + nanos;
+    };
+}