[TimeLine] Enhancement for Improved Precision

[Swymnn]

Hello everyone,

I'd like to discuss a potential improvement to the timeline component in your project. I've recently noticed that the current level of precision is not satisfactory for my use case, which can lead to readability issues.

Problem:

The primary issue I'm encountering is the lack of precision in displaying temporal data. The elements on the timeline don't seem to be correctly aligned, making it difficult to grasp the chronological order of events. Additionally, the current time markers are not sufficiently visible, adding to the confusion.

Also, when you have a timeline containing several days, it's difficult to differentiate between them all (when timeline decoupling is done by the hour).

Proposed Improvement:

I suggest enhancing the timeline's precision by allowing users to zoom in on the timeline to a minute or even a second level. This would significantly improve the granularity of time tracking and provide users with a more precise understanding of when events occur.

In addition, it might be interesting to have more information displayed on the timeline to differentiate between the different days displayed, in order to give the user more information.

How This Can Benefit Other Users:

I'm confident that this enhancement will not only benefit me but also other users who utilize this timeline component in similar contexts. A more precise and user-friendly timeline is an asset for any application that relies on temporal data.

Thank you for considering this enhancement request and contributing to making your timeline component more effective.

Best regards,
Ugo.

[markacianfrani]

Thanks for the feedback! Regarding timelines that span multiple days, we just added a new show-start-of-day attribute in 7.19 that you can add on your rux-ruler to have a more visual indicator when days start. https://astro-components.netlify.app/?path=/docs/beta-timeline-beta--show-start-of-day would love to get your feedback if that helps your use case at all.

The elements on the timeline don't seem to be correctly aligned, making it difficult to grasp the chronological order of events.

Are you able to provide a minimum reproducible example? nothing fancy, just whatever your timeline config is and an example time region that is appearing to be misaligned.

[Swymnn]

Thanks for your feedback, I'll look into it right away! To answer your question, I've attached some code to illustrate the problem I'm encountering in one of my use cases:

import React from "react";
import {} from "@astrouxds/react";

const TimeLine = () => {
  return (
    <RuxTimeline
      start={"2023-11-15T04:40:00.000Z"}
      end={"2023-11-16T02:40:00.000Z"}
      playhead={undefined}
      timezone="UTC"
    >
      <RuxTrack key="Sat1">
        <div slot="label">"Sat1"</div>
        <RuxTimeRegion
          status="critical"
          start="2023-11-15T09:07:51.000Z"
          end="2023-11-15T11:07:51.000Z"
          key="Sat1-1"
        />
      </RuxTrack>

      <RuxTrack key="Sat2">
        <div slot="label">"Sat2"</div>
        <RuxTimeRegion
          status="serious"
          start="2023-11-15T10:07:51.000Z"
          end="2023-11-15T12:07:51.000Z"
          key="Sat2-1"
        />
      </RuxTrack>

      <RuxTrack key="Sat3">
        <div slot="label">"Sat3"</div>
        <RuxTimeRegion
          status="normal"
          start="2023-11-15T11:07:51.000Z"
          end="2023-11-15T13:07:51.000Z"
          key="Sat3-1"
        />
      </RuxTrack>
      
      <RuxTrack slot="ruler">
        <RuxRuler />
      </RuxTrack>
    </RuxTimeline>
  )
}

Here's the code I use and a screenshot of the rendering I get. In the rendering, in the regions, you can see that the dates don't ideally match the timeline's time scale. In my case, I need the regions to be accurate to the second. And as I explored the documentation, I found that the timeline is divided by the day or the hour. Are you planning to make the timeline more precise than by the hour?

PS: I'm using AstroUXDS version 7.17.0

[markacianfrani]

Thanks for the example, I see what you mean now. If you increase the zoom attribute on the timeline a little bit, you can see they become aligned. I've added borders in this example to better show where each time increment starts (I have a feeling this is the actual issue--you probably expected the borders to be way closer to the text on the ruler).

With the default zoom though, it looks way off

This is definitely something we need to fix, but I can't give any timeframe at the moment.

Are you planning to make the timeline more precise than by the hour?

Yep! I've got a PR already in to support minutes. We also want to support seconds, but its a lot more complicated, I'm looking into that now.

[Swymnn]

Thanks for your feedback, I was actually convinced that the alignment was done in the center of the text! I'm going to follow your advice and your example and put these borders that are more meaningful to me and increase the zoom!

Do you know when the minutes will be taken over by the timeline?

In any case, thanks for everything, and good luck in developing AstroUXDS! 😄