[APM] DT design polish

[formgeist]

Note: I'm starting in on this (Jason), please ping me before you start on any of this work, we can work out how to split it up. Will be working on branch `jasonrhodes:polish-6.5

---

✅ Span row design update

In order to make it clearer to the user that there's a difference between transactions and spans in the Timeline (and since they open different information flyouts), I would prefer to make some minor updates to the appearance of transaction and span rows in the visualization.

• Change transaction rows font styling
  • Propose to use the EuiText h4 styling. It will render close to font-family: font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 600; Not sure if there'll be issues with margins using the h4 styling inside the row.
• Show EuiIcon merge in front of transactions span rows.

We can keep the span rows as they are.

---

✅ Remove Transaction sample panel deep shadow

• hasShadow should be changed to false so we avoid the deeper shadow on the panel.

---

✅Align heading styles

• Change "Response time distribution" heading to the same style. We're using EuiTitle for the "Transaction sample" heading in the sample header, so perhaps adopt the same principles to these headings altogether. The style should be equal to the EuiTitle size xs for all three headings.

---

Transaction flyout

✅Change Flyout size to medium

• Change Flyout size to m instead of l. It hides more of the background content than desired.
• Add ownFocus={true} so that outside clicks close the flyout
• Wrap flyout in EuiPortal so that the ownFocus treatment works correctly
• Convert to EuiToolTip to fix bug with existing tooltip z-index

✅Remove the "View Transaction group detail" button from the header

• Remove the button, as we already have a link on the Name value to the Transaction detail page for the particular transaction.

---

Span flyout

✅Change Flyout size to medium

• Change Flyout size to m instead of l. It hides more of the background content than desired.
• Add ownFocus={true} so that outside clicks close the flyout

✅Re-arrange sticky properties

In an effort to align the Transaction and Span flyout StickyProperties, so placement is the same when moving between them, I'm suggesting to make the following re-arranging of the properties;

• Split the 4 properties related to the span into two rows, moving duration to the 2nd row along with % of transaction.

[elasticmachine]

Pinging @elastic/apm-ui

[formgeist]

@elastic/apm-ui First redline run-through of the UI. If I find more stuff, I'll add it to the description and add a comment here.

[formgeist]

Added problem with StickyProperties component for an Error occurence on the Error group detail page.

[formgeist]

Added another task around exchanging the icon in the search bar. It's a minor enhancement, but noticed it had changed in the other places (Discover, Visualize and Dashboards) so thought we should align.

[jasonrhodes]

Gotten a bit more feedback about the flyouts and click-to-close stuff. I think we should turn on that white overlay so that those outside clicks are intercepted and cause the flyouts to close. In my opinion, we still get the advantage of the flyout making the user feel like they haven't left the timeline completely, but they don't actually need to see anything on the timeline when they are looking at the flyout, so this seems to work ok. @formgeist if you feel strongly about not going this way, let me know.

[jasonrhodes]

Added: services legend needs to be fixed so that it only shows the services for the current tx instead of the entire trace

[jasonrhodes]

@formgeist for the "Span row design update", you said "Show EuiIcon merge in front of transactions span rows." I assumed you meant "in front of transaction rows" and so I put strikethrough around span, lmk if I misinterpreted!

[formgeist]

@jasonrhodes You presumed correctly! Didn't mean to write span in there... 👌

[formgeist]

@jasonrhodes @sqren Re: the flyout ownFocus let's turn it on, because I've found that even I added it to the designs and InVision prototypes 🤯

[formgeist]

Removed the task about changing the Searchbar icon to console because we can't change it easily in the Searchbar Eui component. The others are not using Eui, which is why it's easy for them to align and change the icon. We assume that they'll update the component soon enough, and we'll all switch over. Otherwise it's possibly something we'll change in the query bar component itself.

[jasonrhodes]

Re: active/selected bucket ... we can't easily show this. Each bucket has an attached "sample" and it may or may not be the exact transaction we're loading on that group page when we link to a specific transaction now.

We could do some clever lookups to find which bucket's time range matches the selected transaction's duration, but that is probably more than just "polish"...

[sorenlouv]

Re: active/selected bucket ... we can't easily show this. Each bucket has an attached "sample" and it may or may not be the exact transaction we're loading on that group page when we link to a specific transaction now.

We could do some clever lookups to find which bucket's time range matches the selected transaction's duration, but that is probably more than just "polish"...

Two solutions that come to mind:

1. Highlight the bucket that matches the duration of the transaction. This is a bit cheating, but at least the user gets some indication where on the histogram spectrum the current sample lands.

2. When fetching the histogram we can provide a transactionId, to ensure it ends up in a bucket as a sample. This would however require us to re-fetch the histogram whenever the transaction changes (which might not be an issue).

[jasonrhodes]

@sqren @formgeist did you two talk about the agent marks stuff in this ticket? I think Søren moved the dots down on purpose for spacing purposes, but it sounds like Casper wants them back above the line with the x-axis labels moved up so they don't collide. That would push the x-axis labels up everywhere, even when there are no agent mark dots. Just clarifying that's what we want to do!

[formgeist]

Adding another about adding a Services label in front of the services legend by the Timeline viz.

[formgeist]

@jasonrhodes Re: agent mark dots, we agreed to move the x-axis label up 5px to make room for the dots to slide along the bottom of the x-axis line, as proposed in my issue above ^

[formgeist]

Added a task to include the services legend in the locked x-axis when scrolling a large Timeline

[formgeist]

Added a task to re-arrange the sticky properties in the Span flyout to align with the Transaction flyout when moving between them.

[formgeist]

Added a task to remove the "View transaction group detail" button from the Transaction flyout header, as there's already a link in the properties to the transaction.

[formgeist]

Continuing more polish tasks in this issue #24578