Relay List at-a-glance issues #466

Closed
opened 2023-08-19 08:58:04 +12:00 by mikedilger · 13 comments
mikedilger commented 2023-08-19 08:58:04 +12:00 (Migrated from github.com)

With the new relay lists:

  • I can't see at a glance the success rate vs total connections information. Without this, I have no idea if I should "pick up and configure" the relay. Because I am not interested in a relay unless it has both a high success rate and many total connections. So currently I have to click to open each one in turn to see.
  • On the active relays, I have to open to see how many people it is following. This is low-priority but I'd like to see that number in the closed summary if possible.
  • Some active/connected relays don't say why they are connected. This is probably an oversight on the overlord/minion side, but thought I'd add it here too.

@bu5hm4nn

With the new relay lists: - [x] I can't see at a glance the success rate vs total connections information. Without this, I have no idea if I should "pick up and configure" the relay. Because I am not interested in a relay unless it has both a high success rate and many total connections. So currently I have to click to open each one in turn to see. - [x] On the active relays, I have to open to see how many people it is following. This is low-priority but I'd like to see that number in the closed summary if possible. - [x] Some active/connected relays don't say why they are connected. This is probably an oversight on the overlord/minion side, but thought I'd add it here too. @bu5hm4nn
bu5hm4nn commented 2023-08-20 17:50:21 +12:00 (Migrated from github.com)

@mikedilger What do you think of these short stats for the list view. Backgrounds of those numbers could be color coded (e.g. over 85% green, over 50% yellow, red below).
Screenshot 2023-08-19 at 19 48 08
or with key symbols
Screenshot 2023-08-19 at 19 52 10

@mikedilger What do you think of these short stats for the list view. Backgrounds of those numbers could be color coded (e.g. over 85% green, over 50% yellow, red below). <img width="1364" alt="Screenshot 2023-08-19 at 19 48 08" src="https://github.com/mikedilger/gossip/assets/3328670/8a27237c-69dc-40aa-99d1-8aac25cc453e"> or with key symbols <img width="1364" alt="Screenshot 2023-08-19 at 19 52 10" src="https://github.com/mikedilger/gossip/assets/3328670/e852bb3f-bdbd-44ab-8725-73c81d428c88">
mikedilger commented 2023-08-20 19:47:52 +12:00 (Migrated from github.com)

Color coding would make it easier to see. A fixed column would too, but that probably doesn't suit this layout. Person or key works for me, either way.

Color coding would make it easier to see. A fixed column would too, but that probably doesn't suit this layout. Person or key works for me, either way.
bu5hm4nn commented 2023-08-24 13:22:07 +12:00 (Migrated from github.com)

I've experimented putting the stats in front so it kind of works like a column. Thoughts? @dtonon ?
Screenshot 2023-08-23 at 15 17 33

I've experimented putting the stats in front so it kind of works like a column. Thoughts? @dtonon ? <img width="1364" alt="Screenshot 2023-08-23 at 15 17 33" src="https://github.com/mikedilger/gossip/assets/3328670/ef3f03b9-836f-43f0-95e7-1b4c508652ce">
dtonon commented 2023-08-24 21:20:38 +12:00 (Migrated from github.com)

Sorry I didn't see this issue!
(@mikedilger feel free to mention me)

This situation is a regression "bug" caused by hiding the stats under a flag.
Also it is not optimal to have a sorting mechanism that acts on a value that is not immediately visible.

I think that a solution could be, in the compact mode view on the right of the relay name, to dynamically show only the value used in the sort select (rank + connections, following, success rate, failure rate). I like the proposal by @bu5hm4nn to use the darker-rounded box already applied in the gossip model synthetic view.
What do you think?

I would improve the expanded view too; currently, with the addition of the "actions" there is a lot of text and on two lines it is not so readable (I know, Mike, a table would solve this! But it would add other problems).

If you are ok with this path I can update the figma design and share it.

Sorry I didn't see this issue! (@mikedilger feel free to mention me) This situation is a regression "bug" caused by hiding the stats under a flag. Also it is not optimal to have a sorting mechanism that acts on a value that is not immediately visible. I think that a solution could be, in the compact mode view on the right of the relay name, to dynamically show only the value used in the sort select (rank + connections, following, success rate, failure rate). I like the proposal by @bu5hm4nn to use the darker-rounded box already applied in the gossip model synthetic view. What do you think? I would improve the expanded view too; currently, with the addition of the "actions" there is a lot of text and on two lines it is not so readable (I know, Mike, a table would solve this! But it would add other problems). If you are ok with this path I can update the figma design and share it.
dtonon commented 2023-08-25 03:34:20 +12:00 (Migrated from github.com)

I sketched a new version. Let me know what do you think.


The compact view includes the data used in the sorting; the reasons are omitted.
We have plenty of space to include more important info in the future, if needed.
This way it should work fine even when the window is set with a limited width (I usually try it with a minimum of ~800px).

relays-A-compact

The datails view include the full data, reasons included.

relays-B-details

As you can see the gears-button on the top left vanished. I would let the user enter in edit mode just click the row.
Now the pointer cursor signals this possibility, but we can add a more prominent hover effect, if needed.
The edit view includes all the data in the details view and expands further on the bottom.

relays-C-edit
I sketched a new version. Let me know what do you think. --- The compact view includes the data used in the sorting; the reasons are omitted. We have plenty of space to include more important info in the future, if needed. This way it should work fine even when the window is set with a limited width (I usually try it with a minimum of ~800px). <img width="1089" alt="relays-A-compact" src="https://github.com/mikedilger/gossip/assets/89577423/2d2b7792-408e-4217-9d68-5c4c4a0a9930"> The datails view include the full data, reasons included. <img width="1089" alt="relays-B-details" src="https://github.com/mikedilger/gossip/assets/89577423/8d4d780d-fa8e-4483-814d-30c359e54263"> As you can see the gears-button on the top left vanished. I would let the user enter in edit mode just click the row. Now the pointer cursor signals this possibility, but we can add a more prominent hover effect, if needed. The edit view includes all the data in the details view and expands further on the bottom. <img width="1089" alt="relays-C-edit" src="https://github.com/mikedilger/gossip/assets/89577423/c39da1dd-a296-4900-812e-32844a741e41">
mikedilger commented 2023-08-25 09:45:37 +12:00 (Migrated from github.com)

@mikedilger do you want the reasons to always be visible? I'm trying to find a tradeoff between a compact view and the richness of information. Icons, as you proposed time ago, are a solution. Otherwise we can move them in the "details" mode.

I see the reasons more like a advanced/debug information, am I completely wrong? :)

I see myself as the quintessential gossip user, so I ask myself "what do I want to see?" I think gossip users are the kind of people that want to know how many relays they are talking to, why so many, what are they doing exactly, ... to have the ability to force disconnect, to force one to never connect again, to really understand (but not at a code level!) what the fuck is going on when their CPU is hot or their network is congested, etc.

So that's why the reasons are there. They only matter on the "Active Relays" tab, only those relays have reasons. We can rework the reasons code to not be strings, but be enum variants, and then it is more obvious all the possibilities and you can display them as icons (which I still like).

> @mikedilger do you want the reasons to always be visible? I'm trying to find a tradeoff between a compact view and the richness of information. Icons, as you proposed time ago, are a solution. Otherwise we can move them in the "details" mode. > > I see the reasons more like a advanced/debug information, am I completely wrong? :) I see myself as the quintessential gossip user, so I ask myself "what do I want to see?" I think gossip users are the kind of people that want to know how many relays they are talking to, why so many, what are they doing exactly, ... to have the ability to force disconnect, to force one to never connect again, to really understand (but not at a code level!) what the fuck is going on when their CPU is hot or their network is congested, etc. So that's why the reasons are there. They only matter on the "Active Relays" tab, only those relays have reasons. We can rework the reasons code to not be strings, but be enum variants, and then it is more obvious all the possibilities and you can display them as icons (which I still like).
dtonon commented 2023-08-25 14:19:02 +12:00 (Migrated from github.com)

@mikedilger

So that's why the reasons are there.

Ok let's move them back to the compact view.
Icons could be a good solution.

What do you think about dynamically displayed data based on the sorting filter?

@mikedilger > So that's why the reasons are there. Ok let's move them back to the compact view. Icons could be a good solution. What do you think about dynamically displayed data based on the sorting filter?
mikedilger commented 2023-08-25 17:50:12 +12:00 (Migrated from github.com)

So I pushed some commits that turned those reason strings into RelayConnectionReason enum variants. Feel free to make an icon() function or whatever.

Also, it doesn't show the same old string, they are reworded a bit for consistency and currently they are CamelCase because I'm just using the Debug impl.

Also I swapped the [brackets] to mean a temporary connection rather than a longterm one (so it would be rare, rather than everything being in brackets all the time). This probably doesn't matter if we move to icons.

So I pushed some commits that turned those reason strings into RelayConnectionReason enum variants. Feel free to make an icon() function or whatever. Also, it doesn't show the same old string, they are reworded a bit for consistency and currently they are CamelCase because I'm just using the Debug impl. Also I swapped the [brackets] to mean a temporary connection rather than a longterm one (so it would be rare, rather than everything being in brackets all the time). This probably doesn't matter if we move to icons.
dtonon commented 2023-08-27 00:00:08 +12:00 (Migrated from github.com)

Ok let's move them back to the compact view.

@mikedilger after you saw that the top-right popover enable the statistic, that includes the reasons, you still want the reasons in the compact view?

> Ok let's move them back to the compact view. @mikedilger after you saw that the top-right popover enable the statistic, that includes the reasons, you still want the reasons in the compact view?
mikedilger commented 2023-08-28 07:09:31 +12:00 (Migrated from github.com)

Yes, on the Active relays page.

We've made this widget that shows a relay line the same way on all the relay pages. But the pages have different purposes. My Relays and Known Network is for configuration [might want to show rate(total) and last event] and Active Relays is for monitoring [should show reasons, how many followed].

Yes, on the Active relays page. We've made this widget that shows a relay line the same way on all the relay pages. But the pages have different purposes. My Relays and Known Network is for configuration [might want to show rate(total) and last event] and Active Relays is for monitoring [should show reasons, how many followed].
dtonon commented 2023-08-28 21:15:06 +12:00 (Migrated from github.com)

@mikedilger ok, I will update the design!
I agree that offer the right information in the context is important; I was proposing a unique row as temp solution to simplify @bu5hm4nn's works and avoid splitting too many components.

@mikedilger ok, I will update the design! I agree that offer the right information in the context is important; I was proposing a unique row as temp solution to simplify @bu5hm4nn's works and avoid splitting too many components.
dtonon commented 2023-08-28 22:15:07 +12:00 (Migrated from github.com)

@mikedilger @bu5hm4nn update.
I would keep the text-descriptive version and eventually switch to icons when we will finish all the sections with related priorities (ex. buttons / popovers).

image
@mikedilger @bu5hm4nn update. I would keep the text-descriptive version and eventually switch to icons when we will finish all the sections with related priorities (ex. buttons / popovers). <img width="1089" alt="image" src="https://github.com/mikedilger/gossip/assets/89577423/c647e133-5a7e-4066-998c-eced5f135550">
dtonon commented 2023-09-24 11:26:30 +13:00 (Migrated from github.com)

This part is done.

This part is done.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
nostr/gossip#466
No description provided.