Page MenuHomeElementl

Flip asset materialization UI so newest time/partition is on the left

Authored by bengotow on Jan 15 2021, 4:01 PM.



This diff flips the asset materialization UI so it reads newest-to-oldest and the user can see the latest data without scrolling the grid to the far right.

Because we have sparklines beside each row, I flipped them to align with the data being presented in the grid. Since it seemed like the sparklines and the expanded graphs beneath should also match, I flipped those graphs as well so that the newest data is on the left.

I think this is pretty nice overall and we could consider flipping other graphs in Dagit to match. We could alternatively make the grid autoscroll to the far right when it's loaded, but that may not be quite as smooth.

image.png (2×3 px, 1 MB)

Test Plan

Run tests

Diff Detail

R1 dagster
Lint Not Applicable
Tests Not Applicable

Event Timeline

  • Instead of flipping, scroll the asset materialization grid to the right by default
  • Fix React warnings in the useViewport component, some useCallback's missing

adding @sandyryza here. I think this makes a lot of sense and I don't think having the events be left-to-right and the graphs right-to-left is a big problem but open to other's perspective

@bengotow - in the partitions UI, we effectively start autoscrolled to the far right. Are there particular reservations you have about that approach? Could we use a similar pattern here?

I believe other orchestration systems have largely standardized on "right = later in time". For users transitioning from them, I suspect the shift could be confusing.

For charts especially, I think right-to-left could cause a lot of head scratching - especially for the data science crowd, which makes a lot of charts on their own and is pretty standardized on left-to-right.

@bengotow sorry, I didn't catch that you had changed to right-autoscroll instead of flipping.

I just tried this out, and I think it looks great.

This revision is now accepted and ready to land.Jan 30 2021, 5:46 PM