From 1f1d8ae5f01b9ea31e06a0ca41f8c7365ead3515 Mon Sep 17 00:00:00 2001
From: Daniela Buzatu <daniela.buzatu@crispico.com>
Date: Fri, 26 Jun 2026 07:00:43 +0300
Subject: [PATCH 1/4] #42121 blank page when gantt was resize to minimum

---
 CHANGELOG.md                      |  2 ++
 src/components/BackgroundLayer.js |  2 +-
 src/components/Scrollbar.tsx      |  2 +-
 src/components/timebar.js         | 30 ++++++++++++++++++++----------
 src/timeline.js                   |  4 +++-
 src/utils/timeUtils.js            |  4 ++--
 6 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 21af9f1e..08bb1513 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## Unreleased
 
+* [Fix blank page when resizing gantt to minimum width]()
+
 ## v2.15.0
 
 * [Smaller menu button when smaller timebar + new "Zoom reset" action + fix zoom out to maximum bug](https://github.com/flower-platform/react-timeline-10000/pull/113)
diff --git a/src/components/BackgroundLayer.js b/src/components/BackgroundLayer.js
index 472a3e31..1d167609 100644
--- a/src/components/BackgroundLayer.js
+++ b/src/components/BackgroundLayer.js
@@ -222,7 +222,7 @@ export class BackgroundLayer extends React.Component {
    */
   calculateHorizontalPosition(start, end) {
     const intervalMillis = this.props.endDateTimeline.diff(this.props.startDateTimeline, 'milliseconds');
-    const pixelsPerMillis = (this.props.width - this.props.leftOffset) / intervalMillis;
+    const pixelsPerMillis = intervalMillis === 0 ? 0 : (this.props.width - this.props.leftOffset) / intervalMillis;
     const startAsMoment = convertDateToMoment(start);
     const endAsMoment = convertDateToMoment(end);
     if (endAsMoment.isBefore(this.props.startDateTimeline) || startAsMoment.isAfter(this.props.endDateTimeline)) {
diff --git a/src/components/Scrollbar.tsx b/src/components/Scrollbar.tsx
index 8948fe6d..a9453e44 100644
--- a/src/components/Scrollbar.tsx
+++ b/src/components/Scrollbar.tsx
@@ -168,7 +168,7 @@ export class Scrollbar extends React.Component<ScrollbarProperties, { scrollbarS
     }
 
     onScroll() {
-        const unit_per_px = this.props.pageSize / this.state.scrollbarSize;
+        const unit_per_px = this.state.scrollbarSize === 0 ? 0 : this.props.pageSize / this.state.scrollbarSize;
         const scrollPositionInPixels = this.props.direction == Direction.HORIZONTAL ? this._outterDiv.scrollLeft : this._outterDiv.scrollTop;
         this.props.onScroll(this.props.minScrollPosition + unit_per_px * scrollPositionInPixels);
     }
diff --git a/src/components/timebar.js b/src/components/timebar.js
index 364f48c9..df1db9b0 100644
--- a/src/components/timebar.js
+++ b/src/components/timebar.js
@@ -35,13 +35,19 @@ export default class Timebar extends React.Component {
     this.setState({topBarComponent, bottomBarComponent});
   }
 
+  setResolutionIfNeeded(resolution) {
+    if (this.state.resolution.top !== resolution.top || this.state.resolution.bottom !== resolution.bottom) {
+      this.setState({resolution});
+    }
+  }
+
   /**
    * On new props we check if a resolution is given, and if not we guess one
    * @param {Object} nextProps Props coming in
    */
   componentWillReceiveProps(nextProps) {
     if (nextProps.top_resolution && nextProps.bottom_resolution) {
-      this.setState({resolution: {top: nextProps.top_resolution, bottom: nextProps.bottom_resolution}});
+      this.setResolutionIfNeeded({top: nextProps.top_resolution, bottom: nextProps.bottom_resolution});
     } else {
       this.guessResolution(nextProps.start, nextProps.end);
     }
@@ -59,7 +65,12 @@ export default class Timebar extends React.Component {
     ) {
       const bottomBarComponent = this.getBottomBar();
       const topBarComponent = this.getTopBar();
-      this.setState({topBarComponent, bottomBarComponent});
+      if (
+        !_.isEqual(this.state.bottomBarComponent, bottomBarComponent) ||
+        !_.isEqual(this.state.topBarComponent, topBarComponent)
+      ) {
+        this.setState({topBarComponent, bottomBarComponent});
+      }
     }
   }
 
@@ -76,20 +87,19 @@ export default class Timebar extends React.Component {
     }
     const durationMilliSecs = end.diff(start);
     /// 1ms -> 1s
-    if (durationMilliSecs <= 1000) this.setState({resolution: {top: 'second', bottom: 'millisecond'}});
+    if (durationMilliSecs <= 1000) this.setResolutionIfNeeded({top: 'second', bottom: 'millisecond'});
     // 1s  -> 2m
-    else if (durationMilliSecs <= 60 * 2 * 1000) this.setState({resolution: {top: 'minute', bottom: 'second'}});
+    else if (durationMilliSecs <= 60 * 2 * 1000) this.setResolutionIfNeeded({top: 'minute', bottom: 'second'});
     // 2m -> 2h
-    else if (durationMilliSecs <= 60 * 60 * 2 * 1000) this.setState({resolution: {top: 'hour', bottom: 'minute'}});
+    else if (durationMilliSecs <= 60 * 60 * 2 * 1000) this.setResolutionIfNeeded({top: 'hour', bottom: 'minute'});
     // 2h -> 3d
-    else if (durationMilliSecs <= 24 * 60 * 60 * 3 * 1000) this.setState({resolution: {top: 'day', bottom: 'hour'}});
+    else if (durationMilliSecs <= 24 * 60 * 60 * 3 * 1000) this.setResolutionIfNeeded({top: 'day', bottom: 'hour'});
     // 1d -> 30d
-    else if (durationMilliSecs <= 30 * 24 * 60 * 60 * 1000) this.setState({resolution: {top: 'month', bottom: 'day'}});
+    else if (durationMilliSecs <= 30 * 24 * 60 * 60 * 1000) this.setResolutionIfNeeded({top: 'month', bottom: 'day'});
     //30d -> 1y
-    else if (durationMilliSecs <= 365 * 24 * 60 * 60 * 1000)
-      this.setState({resolution: {top: 'year', bottom: 'month'}});
+    else if (durationMilliSecs <= 365 * 24 * 60 * 60 * 1000) this.setResolutionIfNeeded({top: 'year', bottom: 'month'});
     // 1y ->
-    else this.setState({resolution: {top: 'year', bottom: 'year'}});
+    else this.setResolutionIfNeeded({top: 'year', bottom: 'year'});
   }
 
   /**
diff --git a/src/timeline.js b/src/timeline.js
index 6d6fa85c..1bca37ff 100644
--- a/src/timeline.js
+++ b/src/timeline.js
@@ -2274,7 +2274,9 @@ export default class Timeline extends React.Component {
    * @param { object } verticalGridLines
    */
   setVerticalGridLines(verticalGridLines) {
-    this.setState({verticalGridLines});
+    if (!_.isEqual(this.state.verticalGridLines, verticalGridLines)) {
+      this.setState({verticalGridLines});
+    }
   }
 
   handleScrollTable = scrollPos => {
diff --git a/src/utils/timeUtils.js b/src/utils/timeUtils.js
index 83dff6b8..bbab5bfe 100644
--- a/src/utils/timeUtils.js
+++ b/src/utils/timeUtils.js
@@ -27,7 +27,7 @@ export function timeSnap(time, snapMilliseconds) {
  */
 export function pixelsPerMillisecond(vis_start, vis_end, total_width) {
   const start_end_ms = vis_end.diff(vis_start, 'milliseconds');
-  return total_width / start_end_ms;
+  return start_end_ms === 0 ? 0 : total_width / start_end_ms;
 }
 
 /**
@@ -84,7 +84,7 @@ export function getDurationFromPixels(pixels, vis_start, vis_end, total_width) {
   const start_end_ms = vis_end.diff(vis_start, 'milliseconds');
   if (start_end_ms === 0) return moment.duration(0, 'milliseconds');
   const pixels_per_ms = total_width / start_end_ms;
-  let millis = pixels / pixels_per_ms;
+  let millis = pixels_per_ms === 0 ? 0 : pixels / pixels_per_ms;
   return moment.duration(millis, 'milliseconds');
 }
 

From 2c5b38fed75fca3ec21d84222376db71638a328b Mon Sep 17 00:00:00 2001
From: Daniela Mateescu <daniela.mateescu@crispico.com>
Date: Fri, 26 Jun 2026 07:01:57 +0300
Subject: [PATCH 2/4] Update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 08bb1513..7e496c3c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## Unreleased
 
-* [Fix blank page when resizing gantt to minimum width]()
+* [Fix blank page when resizing gantt to minimum width](https://github.com/flower-platform/react-timeline-10000/pull/116)
 
 ## v2.15.0
 

From 8a8b72c0b836b07f7ff705f30953c73ce061d0ab Mon Sep 17 00:00:00 2001
From: Valeriu Iliescu <valeriu.iliescu@resonate-mp4.com>
Date: Wed, 29 Jul 2026 15:30:15 +0300
Subject: [PATCH 3/4] #42121 - solve AI remark

---
 src/components/Scrollbar.tsx | 2 +-
 src/utils/timeUtils.js       | 3 ++-
 yarn.lock                    | 8 ++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Scrollbar.tsx b/src/components/Scrollbar.tsx
index a9453e44..74a4d604 100644
--- a/src/components/Scrollbar.tsx
+++ b/src/components/Scrollbar.tsx
@@ -170,7 +170,7 @@ export class Scrollbar extends React.Component<ScrollbarProperties, { scrollbarS
     onScroll() {
         const unit_per_px = this.state.scrollbarSize === 0 ? 0 : this.props.pageSize / this.state.scrollbarSize;
         const scrollPositionInPixels = this.props.direction == Direction.HORIZONTAL ? this._outterDiv.scrollLeft : this._outterDiv.scrollTop;
-        this.props.onScroll(this.props.minScrollPosition + unit_per_px * scrollPositionInPixels);
+        this.props.onScroll?.(this.props.minScrollPosition + unit_per_px * scrollPositionInPixels);
     }
 
     getInnerDivSize(): number {
diff --git a/src/utils/timeUtils.js b/src/utils/timeUtils.js
index bbab5bfe..aa4b94c1 100644
--- a/src/utils/timeUtils.js
+++ b/src/utils/timeUtils.js
@@ -53,7 +53,8 @@ export function getSnapPixelFromDelta(delta, vis_start, vis_end, total_width, sn
  * @returns {moment} Moment object
  */
 export function getTimeAtPixel(pixel_location, vis_start, vis_end, total_width, snapMilliseconds = 0) {
-  let min_offset = pixel_location / pixelsPerMillisecond(vis_start, vis_end, total_width);
+  let pixels_per_ms = pixelsPerMillisecond(vis_start, vis_end, total_width);
+  let min_offset = pixels_per_ms == 0 ? 0 : pixel_location / pixels_per_ms;
   let timeAtPix = vis_start.clone().add(min_offset, 'milliseconds');
   if (snapMilliseconds !== 0) timeAtPix = timeSnap(timeAtPix, snapMilliseconds);
   return timeAtPix;
diff --git a/yarn.lock b/yarn.lock
index 31c1bcf8..2d6a8bbd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1136,10 +1136,10 @@
     react-measure "^2.5.2"
     react-syntax-highlighter "^15.5.0"
 
-"@famiprog-foundation/tests-are-demo@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@famiprog-foundation/tests-are-demo/-/tests-are-demo-1.4.1.tgz#4d578bfa54ab6da2b571a134ffc0f6b5ead426ec"
-  integrity sha512-SkLHXSvMjk3hfWd8aMoAKf/SBmoV+afr2oBqMH0RqoIwyWjDvu6p6vOXQrqNNKnD2UlyOlhOCc5EAsqbfA3j7w==
+"@famiprog-foundation/tests-are-demo@^1.4.2":
+  version "1.4.2"
+  resolved "https://nexus.xops-online.com/repository/npm-public/@famiprog-foundation/tests-are-demo/-/tests-are-demo-1.4.2.tgz#90896eab40aef6e0e422335010b6a12aaac83529"
+  integrity sha512-EsJIvZXWEEn/Jk86h/MU/0Jzq/XITfw6Ra2tbFZJbDTJL+ONSGBI0yoPLRQKnPbFZfDW2CKx6ktXDm42MP4TRw==
   dependencies:
     "@famiprog-foundation/scriptable-ui" "^2.0.1"
     "@famiprog-foundation/utils" "^1.0.0"

From f4252aaaed2d6de1d19597291b7f5b92a54fca76 Mon Sep 17 00:00:00 2001
From: Valeriu Iliescu <valeriu.iliescu@resonate-mp4.com>
Date: Wed, 29 Jul 2026 15:42:21 +0300
Subject: [PATCH 4/4] #42121 - revert yarn.lock

---
 yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 2d6a8bbd..31c1bcf8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1136,10 +1136,10 @@
     react-measure "^2.5.2"
     react-syntax-highlighter "^15.5.0"
 
-"@famiprog-foundation/tests-are-demo@^1.4.2":
-  version "1.4.2"
-  resolved "https://nexus.xops-online.com/repository/npm-public/@famiprog-foundation/tests-are-demo/-/tests-are-demo-1.4.2.tgz#90896eab40aef6e0e422335010b6a12aaac83529"
-  integrity sha512-EsJIvZXWEEn/Jk86h/MU/0Jzq/XITfw6Ra2tbFZJbDTJL+ONSGBI0yoPLRQKnPbFZfDW2CKx6ktXDm42MP4TRw==
+"@famiprog-foundation/tests-are-demo@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@famiprog-foundation/tests-are-demo/-/tests-are-demo-1.4.1.tgz#4d578bfa54ab6da2b571a134ffc0f6b5ead426ec"
+  integrity sha512-SkLHXSvMjk3hfWd8aMoAKf/SBmoV+afr2oBqMH0RqoIwyWjDvu6p6vOXQrqNNKnD2UlyOlhOCc5EAsqbfA3j7w==
   dependencies:
     "@famiprog-foundation/scriptable-ui" "^2.0.1"
     "@famiprog-foundation/utils" "^1.0.0"