client pages: multiple improvements

[skylenet]

• Identicons are rendered on client side instead of server side. This reduces the amount of requests done against the server whenever a huge graph is loaded.
• Additional sensitive node information can be shown by enabling frontend.showSensitivePeerInfos via config file.
• Peer table has been reworked to be able to display all the additional infos.
• Internal/External peers are easier to differentiate now when looking at the graph. They have different colors/opacities.
• New layout "concentric" has been added. Allows to create 2 circles. The inner circle are known nodes. The outer circle are external peers.
• Layout selection buttons are now working on mobile.

[pk910]

Screencast.from.2024-09-09.13-57-31.mp4

The zoom stepping feels way too high, these are single "scroll steps" on my side :D
Also the sizing of some layout feels a bit weird

[skylenet]

The zoom stepping feels way too high, these are single "scroll steps" on my side :D Also the sizing of some layout feels a bit weird

Yeah, this is weird indeed. It should have an acceptable scrolling sensitivity by leaving it at the default value (wheelSensitivity=1). I've played around with this in the past and made it work fine for my mouse, but then it wouldn't feel right anymore on a touchpad. But it wasn't as extreme as your example.

It's also not recommended to set it as per CytoScapeJS docs:

wheelSensitivity: Changes the scroll wheel sensitivity when zooming. This is a multiplicative modifier. So, a value between 0 and 1 reduces the sensitivity (zooms slower), and a value greater than 1 increases the sensitivity (zooms faster). This option is set to a sane value that works well for mainstream mice (Apple, Logitech, Microsoft) on Linux, Mac, and Windows. If the default value seems too fast or too slow on your particular system, you may have non-default mouse settings in your OS or a niche mouse. You should not change this value unless your app is meant to work only on specific hardware. Otherwise, you risk making zooming too slow or too fast for most users.

Not sure how to fix this right now, as I'm not able to reproduce it. It works fine on all browsers on MacOS (Firefox, Chrome, Safari) and also on my iPhone (Safari).

This page is a good test: https://cpstest.org/scroll-test.php . In my case, I'm doing 4px scrolling with a single mousewheel step. It then increases gradually as I keep scrolling.

[pk910]

The zoom stepping feels way too high, these are single "scroll steps" on my side :D Also the sizing of some layout feels a bit weird

Yeah, this is weird indeed. It should have an acceptable scrolling sensitivity by leaving it at the default value (wheelSensitivity=1). I've played around with this in the past and made it work fine for my mouse, but then it wouldn't feel right anymore on a touchpad. But it wasn't as extreme as your example.

It's also not recommended to set it as per CytoScapeJS docs:

wheelSensitivity: Changes the scroll wheel sensitivity when zooming. This is a multiplicative modifier. So, a value between 0 and 1 reduces the sensitivity (zooms slower), and a value greater than 1 increases the sensitivity (zooms faster). This option is set to a sane value that works well for mainstream mice (Apple, Logitech, Microsoft) on Linux, Mac, and Windows. If the default value seems too fast or too slow on your particular system, you may have non-default mouse settings in your OS or a niche mouse. You should not change this value unless your app is meant to work only on specific hardware. Otherwise, you risk making zooming too slow or too fast for most users.

Not sure how to fix this right now, as I'm not able to reproduce it. It works fine on all browsers on MacOS (Firefox, Chrome, Safari) and also on my iPhone (Safari).

This page is a good test: https://cpstest.org/scroll-test.php . In my case, I'm doing 4px scrolling with a single mousewheel step. It then increases gradually as I keep scrolling.

yea, let's use it like this for now and revisit later if there are more complains about it :)