[UX] Active chain visual cues

[ixje]

Currently it is unclear if any chain is running and if so, which one unless you look at the TERMINAL tab.

Example of a running chain

The status bar at the bottom says "Neo: Not connected". I have actually no idea what it means or if it is supposed to say something about the chain status. If I open the TERMINAL tab we can see there's actually a chain running

Ideas Based on the following view I have the following ideas

1. Change the play button to a stop button for the chain that is running
2. Highlight the background color to green or some colour to indicate it's actively running (this is also helpful if for whatever reason the chain dies)
3. From the context menu hide Start blockchain ... options and only show Stop blockchain when it's running and vice versa. a. Perhaps even hide all options that cannot be used until the chain is running to keep the context menu clean. b. Alternatively, disable/grey out options that cannot be used in the current state
4. I'm a fan of reducing visual clutter so I'd even suggest having a button in the title bar (view/title group:navigation) that allows you to show only the active server.

[robliou]

I added code to the settings.json file which changes the colors on the status bar at the bottom of the VS Code border to green when NEO is connected to the blockchain, white when connecting, and orange to when it is disconnected. We can change the color to whatever we want.

See commit below:

https://github.com/ngdenterprise/neo3-visual-tracker/commit/abffd21a8f7477f1f1b0c98c971f1ac20544ef09

[ixje]

The colouring of this bar can be an extra (if we understand what the real purpose of this bar is), but I think the original idea of changing the icons for the entries in the blockchain tree is more powerful and self-explanatory

[robliou]

Erik, as you can see from my screenshot, no inline icon is even showing up in my sidebar view for a 'start' or 'stop' for the chain. I can't figure seem to figure out why. Can you point to me where in the codebase the 'start'/'stop' inline icon resides or even attaches to the chain?

Anyways, I do think the color change is quite eye-catching, especially given the green wording below as it presents a stark contrast to the dark background...have you been able to try it out yet?

[ixje]

The reason you’re not seeing a “play” button is because you’re selecting Neo Mainnet. You can’t start or stop that, neither can you start/stop Neo Testnet. It will therefore only show on local networks.

You wrote “…alerting the user as to whether or not they are connected”. I don’t even know what “connected” means on this status bar. 2 months ago when i first opened this issue i didn’t know, now i still don’t know. The fact that we have to look at the source code to learn what it actually means already says it is failing from a UX perspective.

Even without defining what “connected” exactly means, the fact that we can run multiple chains simultaneously but this bar can only show the status of 1 chain means it is the wrong place to try and say something about chain status. Having said that i think we should actually completely remove this item from the bottom status bar.

On 30 May 2022, at 15:55, Rob L. @.***> wrote:

 Erik, as you can see from my screenshot, no inline icon is showing up in my sidebar view for a 'start' or 'stop' for the chain. I can't figure seem to figure out why. Can you point to me where in the codebase the inline icon resides for this 'start'/'stop' icon for the chain?

Anyways, I do think the colored bar below does a pretty good job already of alerting the user as to whether or not they are connected. The green color is quite eye-catching as opposed to the orange color. Have you been able to try it yet?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[robliou]

Erik, I think we're having a misunderstanding here of what 'Active chain' means. The start and stop function doesn't imply starting or stopping the chain itself. What it implies is starting or stopping an active connection from the user to the chain itself.

If you are gathering from the UX that pressing the 'play' button from the UX is going to actually start or stop the mainnet or testnet or private chain, then yes, that is indeed a fail from the UX perspective!

I'm not so sure that one would want to connect to multiple chains simultaneously, as that could lead to a lot of confusion, no?

[ixje]

Erik, I think we're having a misunderstanding here of what 'Active chain' means.

Good point. I'm talking more about "chain status visual cues".

The start and stop function doesn't imply starting or stopping the chain itself. What it implies is starting or stopping an active connection from the user to the chain itself.

Let's be very specific which start/stop we're talking about. I'm talking about the play button (being a start) in this specific section of the UI My mouse pointer was hovering over the play button on the single-node.neo-express line but isn't captured in the screenshot. As we can see, the tooltip literally says start blockchain when hovering over the play button. The button is linked to this command https://github.com/ngdenterprise/neo3-visual-tracker/blob/b50ab36f58d98497b4d2e2989937ba7dcbf677a1/src/extension/index.ts#L261-L263 which leads us to https://github.com/ngdenterprise/neo3-visual-tracker/blob/b50ab36f58d98497b4d2e2989937ba7dcbf677a1/src/extension/neoExpress/neoExpressInstanceManager.ts#L85-L88

which according to the documentation does the following

a Neo-Express blockchain network is started with the run command.

The status bar at the bottom however does say something about an RPC connection https://github.com/ngdenterprise/neo3-visual-tracker/blob/b50ab36f58d98497b4d2e2989937ba7dcbf677a1/src/extension/activeConnection.ts#L99-L100 but only under very specific conditions. E.g. only for local started chains

I'm not so sure that one would want to connect to multiple chains simultaneously, as that could lead to a lot of confusion, no?

One scenario I can imagine is a personal network to develop on and a private network for your teams project. Whether it should be possible is a design decision. Right now it is possible but the UX has some shortcomings with it. I have no preference other than that the UX options align with the restrictions that should be present (e.g. number of active chains). Right now it's all over the place.

I'm opening a new issue https://github.com/ngdenterprise/neo3-visual-tracker/issues/137 to discuss the bottom status bar. Let's keep this one focused on the Blockchain tree as show in the picture in this comment