Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: highlight local network peers #1266

Merged
merged 16 commits into from
Oct 29, 2019
Merged

feat: highlight local network peers #1266

merged 16 commits into from
Oct 29, 2019

Conversation

hacdias
Copy link
Member

@hacdias hacdias commented Oct 21, 2019

Based on #1262 so that must be merged beforehand. This PR introduced a special location for local network peers, where show their flag as a handshake with the 'Local Network'. This idea comes from #223 which suggests to highlight local network and close peers geographically.

I wonder if this is the best way to show local network peers. How'd highlight geographically close peers?

image

/cc @lidel @autonome

License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
@hacdias
Copy link
Member Author

hacdias commented Oct 21, 2019

I thought maybe coloring the row with a different background for local and geographically close peers, but that wouldn't say much by itself. Maybe some badge near the location?

License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
@lidel
Copy link
Member

lidel commented Oct 21, 2019

@hacdias are you able to create screenshots with 2-3 options? (eg. yellowish background / text color / badge). Will be easier to evaluate that way.
(including design shop for feedback)

@lidel lidel added topic/design-front-end Front-end implementation of UX/UI work topic/design-ux UX strategy, research, not solely visual design labels Oct 21, 2019
@hacdias
Copy link
Member Author

hacdias commented Oct 22, 2019

Keeping the emoji for the Local Network ones, we could use this colors (gold for local network, silver for nearby geographically):

image

Same, but with light yellow for local network and light blue for nearby geographically:

image

Keeping the emoji for the Local Network ones, using the color scheme gold for local network and blue for nearby geographically:

image

Last but not the least, with badges! In this case, I don't believe keeping the Local Network emoji is worth it because we have badges!

image

What do you like most? I really love the 'Local Network' with a handshake. I'd personally go to either one of the last two.

@ericronne
Copy link

Love the handshake, too!

Given that this indicator is all about proximity, i think it makes sense to use a small label, as opposed to stretching it across the entire row. It also seems useful to explicitly mark them as "local" or "nearby," so we don't have to rely on a key, eg.

In the case of local connections, what if we swapped out the globe for the handshake, and swapped out "Unknown" for "Local"? In theory, the user would know the location of a locally connected peer, right? 😸

x

For nearby nodes, i've simply added "(nearby)" to the end of the nearby node (in gray) below. Not a brilliant solution, admittedly. We could add a small emoji, perhaps …

a

@lidel
Copy link
Member

lidel commented Oct 22, 2019

Thanks! I feel changing text/background color makes things too noisy (we may want to keep that option for other things like "manually added peers")
I am also worried about confusion between "local" (same IP network class) and "nearby" (geographically).
In theory, addresses from "local network" could not be geographically "local" (VPN-bridged LAN networks etc).

For those reasons I'd keep regular colors, handshake icon and full "Local Network" to be explicit what we mean by local:

Screenshot_2019-10-22 67235707-8c91e780-f43f-11e9-883d-9211410eca80 png (PNG Image, 1386 × 770 pixels)

@lidel lidel closed this Oct 22, 2019
@lidel lidel reopened this Oct 22, 2019
License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
@hacdias
Copy link
Member Author

hacdias commented Oct 24, 2019

image

Just updated to match the suggestions above. 'Local Network' + Handshake for local network nodes and nearby between parenthesis on geographically close peers.

@hacdias hacdias marked this pull request as ready for review October 24, 2019 13:52
License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
@hacdias
Copy link
Member Author

hacdias commented Oct 28, 2019

Ping @lidel @autonome @ericronne

Copy link

@ericronne ericronne left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unqualified to vouch for code, but re the visual and copy changes: ❤️

Copy link

@autonome autonome left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A couple of minor questions about exception handling, code locality, etc.

src/bundles/peer-locations.js Show resolved Hide resolved
src/bundles/peer-locations.js Outdated Show resolved Hide resolved
src/bundles/peer-locations.js Show resolved Hide resolved
License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
@hacdias
Copy link
Member Author

hacdias commented Oct 29, 2019

@autonome just updated the function with memoization (from a package though) and added comments!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
topic/design-front-end Front-end implementation of UX/UI work topic/design-ux UX strategy, research, not solely visual design
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants