Children/Parent Rendering Responsibilities

Hi everyone! I am using React to make a timeline applet that renders some values happening over time
I have a Timeline parent, then one Row component for each entry, and each row has some Interval components representing time intervals. The parent stores the timeline information in seconds, then I calculate the px equivalents and place everything on screen. What I would like some feedback on is - Who should be responsible for determining the position/width of these rectangles? - What are the "best practices" for unit conversion? Should I convert everything into px as soon as possible or do it at the last moment? FYI: The Timeline supports drag/drop functionality so all design choices should be aimed towards that as well. Solution A: Handle the seconds_to_pixels conversion in Timeline, and pass startPx and lengthPx to each Interval Solution B: Pass startSeconds, lengthSeconds to each Interval, have them perform the conversion and then set the {left, width} independently from one another Solution C: Avoid using position: absolute altogether and have the Rows be flex rows containing Intervals padded by the parent Or something else that I haven't even thought about? Thanks in advance!
1 Reply
vinter.
vinter.OP4mo ago
(I also understand that some of the decisions are very project specific and based on other things as well, but I would like to hear your thoughts and brainstorm a bit regardless!)

Did you find this page helpful?