Consistently managing layout

[abstractalgo]

I'd prefer if there was a more intuitive way to manage layout of the workspace.

---

Some points of the confusion and having way too many (inconsistent) choices.

Affects large-scale layout.

Layout-affecting buttons in the most wrong place.

Command palette that can't be closed.

Social features at the same level of importance and UI hierarchy as debug information, and search (!?).

---

The layout poorly communicates dependencies between all these "modules" of the UI.

Here's my reasoning:

• The recording itself is the highest level object (i.e. everything is part of the recording).
• The Timeline is the recording itself.
  Comments are laid out on the timeline.
  Events are laid out on the timeline as well.
  (Everything else... is a preview of an info of just one specific point in time.)
• Source Explorer is showing assets until that point in time
• Viewer is a screen of that point in time
• Elements and React DevTools are showing things at that point in time
• Network and Console are showing things up to that point in time

Here's where things get mismatched with what exists so far:

• Recording is fine
• Timeline is fine
• (mismatch) Source Explorer shows all of the assets at once (thus letting them be searchable)
• Viewer is fine
• Elements and React DevTools are fine
• (mismatch) Network and Console show everything at once (up to a specific point in time and into the future from where we currently are)

So the problem is that hierarchical dependencies and lifetimes of objects that they're presenting are not matched.

In the next comment, I'll make a proposal to what can be done to overcome these issues and make layout better communicate natural process of thinking and dependencies that exist between these modules.

[abstractalgo]

Another way of thinking about all of this is through "dimensions", and what is is a dimension of its own and what is just a value in a certain dimension. And this way of thinking explains a lot of the things that I've mentioned previously. Here's what I mean.

• any Replay user has multiple recordings...
• ...and every recording has many points in time...
• ...and every point in time has events, comments, source, network events, elements,...
• ...and lines of code are a place within a single file, within a specific point in time...
• ...and breakpoints and logpoints are "instances" of a specific line of code

So basically it's about creating a UI that lets navigate through this "multidimensional" concept of a recording, and UI modules should reflect that.

Part of the problem why (mentioned in the previous comment) is that we have parts of the UI that have multiple roles, and/or things that are having multiple roles are combined together. And that is very difficult to learn, remember and recall. And that creates a bit of a confusion.

"I can step in two different places. But those options are also sometimes disabled". And "I can go through time on timeline, but there's also smaller timeline that appears on logpoints". And "My comments are there; but right next to it there's global search".

Unrelated things are coupled together through UI/UX, and related things are spread out.

(this entire comment was just to frame the layout proposal; stand by for it 😄)

[jasonLaster]

Thanks! Reminds me of some of our early conversations around Replay as a data visualization problem with a much larger emphasis on a multi-track timeline. Looking forward to seeing what you're thinking

[jonbell-lot23]

Hello @abstractalgo ! I'm going through our discussions and categorising everything.

Here's a friendly reminder to share your proposal if/when you get a chance.