Gantt Zoom Rendering Issue with Short Duration Tasks

ArshidinMalikov

@svar-ui/react-gantt v2.5.2 - Short tasks render incorrectly after zoom operations (hour → day → hour)

Question
Can anyone help with a zoom rendering issue where short duration tasks display correctly initially but become distorted after zooming out to days and back to hours?
I'm using @svar-ui/react-gantt v2.5.2 with short duration tasks (30 seconds to 45 minutes). The tasks render correctly with proper relative widths when the component first loads, but after zooming out to day view and then back to hour view, all short tasks appear with equal width (as if they're all 1-hour tasks).

Steps to Reproduce

Initial Load: Tasks show correct relative widths (45min > 15min > 1min > 30sec)
Zoom Out: Use Ctrl+scroll or zoom controls to view by days
Zoom Back: Return to hour view
Issue: All short tasks now appear with equal width, losing their proper duration proportions

Expected Behavior

Tasks should maintain their correct relative width proportions regardless of zoom operations. A 45-minute task should always appear wider than a 15-minute task, which should appear wider than a 1-minute task.

Actual Behavior

After zoom operations, all short duration tasks appear with equal width, making it impossible to distinguish between a 30-second task and a 45-minute task.

Minimal Working Example


import React, { useState } from 'react';
import { Gantt, Willow, Tooltip } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/all.css';

const TaskTooltip = ({ data }) => {
  if (!data) return null;
  
  const duration = (new Date(data.end).getTime() - new Date(data.start).getTime()) / 1000 / 60;
  
  return (
    <div style={{ padding: '8px', fontSize: '12px', background: 'white', border: '1px solid #ccc', borderRadius: '4px' }}>
      <div style={{ fontWeight: 'bold' }}>{data.text}</div>
      <div>Duration: {duration.toFixed(1)} minutes</div>
      <div>Start: {data.start.toLocaleTimeString()}</div>
      <div>End: {data.end.toLocaleTimeString()}</div>
    </div>
  );
};

export default function GanttZoomIssue() {
  const [refreshKey, setRefreshKey] = useState(0);

  const tasks = [
    {
      id: 1,
      text: "Task A - 45 minutes (normal)",
      start: new Date('2024-06-12T08:00:00Z'),
      end: new Date('2024-06-12T08:45:00Z'), // 45 minutes
      progress: 100,
      type: "task"
    },
    {
      id: 2, 
      text: "Task B - 15 minutes (short)",
      start: new Date('2024-06-12T09:00:00Z'),
      end: new Date('2024-06-12T09:15:00Z'), // 15 minutes
      progress: 50,
      type: "task"
    },
    {
      id: 3,
      text: "Task C - 1 minute (very short)",
      start: new Date('2024-06-12T10:00:00Z'),
      end: new Date('2024-06-12T10:01:00Z'), // 1 minute
      progress: 0,
      type: "task"
    },
    {
      id: 4,
      text: "Task D - 30 seconds (tiny)",
      start: new Date('2024-06-12T11:00:00Z'),
      end: new Date('2024-06-12T11:00:30Z'), // 30 seconds
      progress: 0,
      type: "task"
    }
  ];

  const links = [
    { id: 1, source: 1, target: 2, type: "e2s" },
    { id: 2, source: 2, target: 3, type: "e2s" },
    { id: 3, source: 3, target: 4, type: "e2s" }
  ];

  const scales = [
    { unit: "day", step: 1, format: "%d %b %Y" },
    { unit: "hour", step: 1, format: "%H:%i" }
  ];

  const columns = [
    { id: "text", header: "Task Name", flexgrow: 1 }
  ];

  return (
    <div style={{ padding: '20px', height: '100vh' }}>
      <div style={{ marginBottom: '20px' }}>
        <h2>Gantt Zoom Rendering Issue</h2>
        <p><strong>Issue:</strong> Short tasks render correctly at hour level, but become distorted when zooming out to days and back.</p>
        
        <button onClick={() => setRefreshKey(prev => prev + 1)}>
          🔄 Reset View
        </button>
      </div>

      <div style={{ height: '400px', border: '2px solid #ccc', borderRadius: '8px' }}>
        <Willow>
          <Tooltip content={TaskTooltip}>
            <Gantt
              key={refreshKey}
              tasks={tasks}
              links={links}
              scales={scales}
              columns={columns}
              durationUnit="hour"
              lengthUnit="minute"
              cellWidth={40}
              readonly={true}
              zoom={true}
            />
          </Tooltip>
        </Willow>
      </div>
    </div>
  );
}

Configuration Details

Library: @svar-ui/react-gantt v2.5.2
Browser: Chrome/Firefox (issue occurs in both)
Duration Units: durationUnit="hour", lengthUnit="minute"
Scales: Day + Hour levels
Cell Width: 40px