New entity page

Question

Closed this issue a year ago · 0 comments

Here is a basic layout of the updated entity page

Please refer to Figma for the final design. But I am embedding this here in order to more easily explain different components of the page.

Header

This header is sticky
Clicking the logo returns to the homepage of the network, i.e. /nautilus-mainnet
In the future, there will be an animation when the user hovers over the logo, but not at this time
The search box is actually a button that opens the #159
A hover style for this button can be found in Figma
The icons on the right hand side are the same as the current View Switcher implementation

These tabs are sticky
We will soon have an icon pack. Once we do, we will update our API to include an icon name for each tab. In the meantime, we can just use placeholder icons.
If a tab has a list (which would be every tab except the Overview), then it will have a badge saying the number of items in that list. However, we have not made the necessary changes to the backend to enable this feature. Therefore, we don't need to include the number inside of the tab at this time.
We will soon finish the UX for when the tabs overflows the x-axis. This should be done by Sep 23.
If possible, it would be cool if the white overlay could be animated when switching tabs. For example, it could slide from "Overview" to "Transactions".
Pressing Ctrl + 1 goes to Overview, pressing Ctrl + 2 goes to Transactions, and so on.
In the future, it will also be possible to change tabs with left and right arrow keys (after you go up from the top table element), but we don't need to do that now. See the Superhuman example video I previously sent in Slack.

The table is scrollable
Similarly to the original, this should allow infinite scrolling and continuously poll for new updates.
This should use virtualization for efficiency
The View Switcher should be able to transform these rows into cards (ideally while translating the scroll position so that the selected row is still in frame)
When you select (by hovering or with arrow keys) over a row, the Card attributes should be put into the right panel.
Hovering selects a row (see Figma for selection styling), but the selection can also be controlled with up and down arrow keys.
When a row is selected, Enter navigates to the link for the entity on that row. If it exists. If there is no link, then enter does nothing. Like the original, clicking also navigates to that entity's page.

The cards section is scrollable
Cards have fixed dimensions. This will make virtualization and styling the layout easier. In other words, they will have a width and height that do not change no matter what the content inside of them is.
When you select a card (by hovering over it or using arrow keys), it will not update anything in the right panel.
We have not completed the styling for selected cards. But we will provide it soon.

The overview is scrollable
This page is pretty straightforward but needs a bit more polish. So I won't write a long description here.

The right panel is sticky
In the overview section, the right panel will display information about the network (i.e. Nautilus Mainnet). The design for this is coming soon.
In the other sections, like Transactions and Blobs, it will right panel will highly about the the entity itself (in this case, it will have information about the block) by default.
However, when an entity in the table is selected, the right panel will highlight that entity instead of the default. So to be clear, if the user is a block's page and then scrolls over a a transaction in the table, this will change the content of the right panel so that it highlights that transaction.
The network (i.e. Nautilus Mainnet), type (i.e. Transaction), and query (i.e. BEE2...) can be retrieved from the EntityRef/FetchLoadArgs of any entity being highlighted in the right panel.
The Overview can be retrieved from the attributes of the Card or Sidebar components.
For now, the quick actions are static. However, this will probably be dynamic in the future depending on which actions are available to the user at the time.

We have started these designs and they are almost done. They will probably be done by Sep 23, but possible later.