raiden-network/explorer

explorer's Issues

Make the carousel navigation buttons a little bit more obvious

It seems that for some people the carousel navigation arrows might be not really obvious.
Find a way to some how make them more obvious.

Network graph overlapping footer

The network graph is currently overlapping the footer.

It also sometimes overlaps the header:

Frontend

Stage 1

• Get the code to run (create local API server with the fake data)
• Add error handling
  • No errors in console
  • Display a message when backend is not reachable
• Deployment
  • Create a pipeline to compile optimized assets
  • Create a docker setup with a web server and reverse proxy to serve the static files
• Collect feedback

Stage 2

• Incorporate feedback
• Add token network visualizations
• ...

Fix data structure for d3 chart

Problem

The data created by restructureAndPersistData in nmservice leads to errors as it is somehow "wrong".
Related to #6

Solution

• Search for the error
• Fix it

rewrite `restructureAndPersistData` and `retrievePersistedDataForGraph` on nmservice

Problem

The method <nmservice>.restructureAndPersistData currently uses PUT to store restructuredData on the server and <nmservice>.retrievePersistedDataForGraph uses GET to retrieve it again.
Related to #15

Solution

• Stop sending to server and instead just store it in browser memory.
• Stop getting data from server and just return the memory data instead.

The above will render the <host>:3000/data endpoint redundant and it can be removed.

Weird hover issue on main buttons

In Safari hovering over the main buttons causes some weird flickering:

Maybe related to the tooltip.

Infos about PFS and MS

We might want to display infos about the different MS and PFS in the future.

Stop redrawing d3 chart when new data is identical to old data

Problem

The d3 chart redraws every 3 seconds; every time new data is fetched from the api. When the new data is identical to the old, it is misleading that the chart is redrawn.

Solution

• Find out what triggers the redrawing.
• Find a way to check if the new data has changed compared to the old.
  Preferably a way that doesn't add hundreds of KB of js to the browser ...
• Implement it.
• Add smooth graph updating when the network data has modifications.

Simplify/improve home component

Problem

Methods getIndexedNetworkAddress, getIndexedMetric etc redundant.
d3 chart is placed in html <footer> which seems wrong.

Solution

• access data directly in template and use *ng-for to repeat N times.
• put d3 chart in suitable html.

Simplify d3 chart

Problem

The code for d3 graphics seem over-complicated. The small d3 chart is spread out on a total of 19 files -- see review here https://github.com/ellvtr/status-page/blob/jonas/misc/angular-app.misc.md#d3-graphics-over-complicated

Solution

• Make the d3 chart work on its own without angular, e.g. in dir /d3viz -- which is based on the "brainbot design internship" that Paul sent me.
• Make animation and layout work better than on the current angular page -- like in said design above.
• Port it in the simplest possible way to angular - or keep it entirely out of angular if deemed useful.

Minor frontend-issues

There are some minor frontend issues to be fixed:

• Add some more spacing between the main metrics
• The unique users metric seems to be wrong, at least for the RTT network there are 60 unique addresses, so the number should be at least 60.
• Rename Get started button to something more descriptive, like Learn more about Raiden
• The Visualize link doesnt work and should be called Show Network visualization
• The borders of the info buttons and metrics boxes should be aligned:
  
• The padding between the boxes should be the same vertically and horizontally
  
• The toke network address should link to etherscan.

Add indicator for page sections

Since is it not always clear that the page consists of two sections, we have to make it clear by adding some kind of indicator that the page continues.

#59 (comment)

Use HTTPS

We should get a certificate from LetsEncrypt and only use HTTPS

[Frontend] More info in visualization

Ideas:

• Channel capacities

What information to display

The current website shows all information which is provided by the backend, some of which might not be interesting or to detailed for the website: http://explorer.raiden.network

In this issue I'd like to collect feedback about what people think is important and what not.

Rename status page to Raiden Explorer

Problem

Within our communication, we are calling the status-page now Raiden Explorer.

Solution

Rename the status-page to Raiden Explorer throughout:

• the code
• the screen
• GitHub.

[Frontend] Show total deposit of active channels

Add the metric of the total deposit of all active channels.

make responsive UI (ie mobile friendly)

Problem

It turns out that the current layout is not responsive. We need to re-design layout from scratch using e.g. bootstrap or foundation or similar.

Solution

• Rewrite markup and CSS with mobile-first approach
• Use bootstrap, foundation or similar for the above - and adapt it too look as specified / current layout

Decide and create domain

@christianbrb @LefterisJP We need to decide which URL we want the status page to run on. I ropose status.raiden.network. Other options are metrics.raiden.network or overview.raiden.network.

Then Ulo needs to create the subdomain.

Show node status

It would be nice to display information about online Raiden nodes as well.

However this creates some problems:

• How to know which nodes are online (maybe from matrix presence)
• What additional info should be displayed about them?

Expose token network information on the backend

We need to expose some more information in regards to each token network.

• (required) Token network decimals information. Otherwise the deposit aggregation doesn't make much sense.
• (nice to have) Token network name
• (nice to have) Token network symbol

rewrite `updateMetrics` method on home.component

Problem

<homecomponent>.updateMetrics method has much repeated and redundant code; error prone and messy. It calls .updateCurrentMetrics, then runs redundant methods on the service (already run within .updateCurrentMetrics), then typed out the same sequence again within a setInterval updating every 3 sec.

Solution

• Rewrite said method to not repeat itself and not make redundant method calls to service.

review `updateTotalsAndComparativeMetrics` in nmservice

Problem

Some code in net.metrics.service.ts updateTotalsAndComparativeMetrics or in the related updateLargestNetworks and updateBusiestNetworks may be redundant or too complex.

Related to #9 - possibly part of same problem.

Solution

• Determine if some code is redundant or too complex.
• If so, remove or simplify.

Make deploy procedure for angular app

Problem

Currently no production version or docker container for the angular UI app.

Solution

• Find out how to build angular for production.
• Create docker image / container with production version ready to deploy on server.
• Make it run with docker-compose.
• Edit README.

Filter out token network without open channels

Filter out channels with no active channels

We have to think how to make this clear to users, otherwise they might think that their token network wasn't picked up correctly.

Make frontend polling configurable

Currently the frontend polls the backend every 5 seconds and the value is hardcoded to the frontend code.

• Make polling configurable from the configuration json, so each backend can set the value.
• Set default value to 10 seconds

adapt webui to suggested new api data schema

Problem

The current api data is an object { } and parsing it has resulted in some rather complex code that could be greatly simplified by changing the format to an array [ ].
See suggested format here:
https://github.com/ellvtr/status-page/blob/issue12/mock/data/network-info-suggested-format.json
or attached here:
network-info-suggested-format.json.txt

Solution

• Make changes to api.
• Rewrite net.metrics.service.ts methods updateTotalsAndComparativeMetrics, restructureAndPersistData and setCurrentMetrics to parse the new format.
  I've already made changes so the rest of the code uses the currentNetworks array which is already the new format.

The schema validation shouldn't require changes because the network entries are validated one entry by the time - and they would remain the same in the new format.

Last activity

Show the latest activity in the network, like newest channels, deposits, ...

The backend would need some work to support this.

Replace network overview table

Replace the table with a more in detail view in given token networks.

It's better to replace it with a more detailed view of the network. This could include:

• Number of open/closed/settled channels
• Number of participants
• Average number of channels per participant
• Channels with biggest deposits
• Participants with most channels
• Avg. deposit per channel
• Avg. deposit per participant

[Backend] Configuration

In order to be able to use the explorer on main and testnet we need the possibility to configure:

• Ethereum node address
• Token Network registry address
• start block

ToDo:

• Update CLI to accept the above arguments
• Update docker setup to provide the arguments to the CLI

Improve d3 chart

Problem

See comment: #17 (comment) by @palango

So positions are random at the moment: do you think we can implement something like https://bl.ocks.org/mbostock/4062045

Solution

• Identify desired improvements to chart
• Make said improvements

Network graph improvements

I am opening this to keep some notes on ideas for future improvement of the network graph functionality.

• Grouping of nodes belonging to the same token network: Grouping nodes in a Force-Directed Graph
• Highlight neighbor connections when user presses a node: Interactive & Dynamic Force-Directed Graphs with D3

Fix view for 'largestNetworks' nor 'busiestNetworks'

problem

Neither 'largestNetworks' nor 'busiestNetworks' are highlighted at first on page load.
When clicking either tab, nothing changes (data could be identical)

solution

• Fix component / template to reflect active tab
• Check if data is identical for both views
• If not, fix view
• if yes, change mock data to make it more visible

Do not display closed and settled channels on graph

Add a filter to display only open channels by default. Allow the user to remove filter to view the complete graph with closed and settled channels included.

Improve frontend deployment

Currently the front-end isn't compiled in the docker container. This should be done.

Visualization improvements

Some ideas for further improving the visualization:

• Don't let the nodes run out of the visualization area
• Add better tooltips (show them faster, show more infos)
• Make nodes selectable and when selected highlight channels

Deployment

So, a few things to do here.

When the smart contracts are updated the backend needs some updates:

• Update the contracts version in the requirements
• Update the TokenNetworkRegistry contract address here
• Otherwise it should just work, the Dockerfile shows how to run it.

Deployment

• Ask @ulope to give you access to the DigitalOcean server
• Setup a deployment docker-compose file
  • Add a reverse-proxy, for examples see
    • https://github.com/raiden-network/raiden_token_kyc/blob/master/web/docker-compose.yml
    • https://github.com/ulope/raiden.network-server/blob/master/frontend/etc/containers/raiden.network/docker-compose.yml
    • https://github.com/ulope/raiden.network-server/tree/38d5c2b426171549fb488969ebe843661aab8e31

Update dependencies

Update package dependencies

License

@christianbrb We need to decide for a license for the explorer code. I guess GPL is fine with the same arguments as done for the PFS (can't find the issue right now)

Hide legend in visualization when only open channels are shown

We Should hide the legend in the graph when only active graphs are shown

Move token networks without channels at the end of the carousel

Currently the order of networks in the carousel is random and so it can happen that networks with no channels are shown early. I think we should move them towards the end.

Ensure that mobile UI appears good on actual devices

After some initial testing on actual mobile devices it seems that in some cases the UI was off by a bit.
Try test on actual devices and or Android emulator images of different sizes to ensure that the Explorer adjusts properly on different screens.

Frontend config

We need a way to provide configuration options to the frontend. Things like:

• Which chain are we running on to give proper etherscan links
• Make the API endpoint configurable

Handle frontend REST errors gracefully

Problem

The frontend doesn't handle various errors in a graceful manner.

Quote @palango from #1:
"The frontend should handle all failure conditions that we can imagine. I think this is mostly that the REST endpoint is unavailable or returns incorrect json (either malformatted or not matching our schema). These should be nicely handled and not show errors in the console."

Solution

• Create an info / warning box, possibly as a "modal dialog" in bootstrap terms.
• Research how to do that with the current tools (I know the bootstrap modal dialog).
• Send warning message for REST errors to warning box.
• Research how to validate data structure.
  I have previous experience with ajv schema validation.

Suggested improvement:

• Create ng service with info messages. An error caught anywhere in the code, can be sent to the message and displayed on the UI.

review js logic for determining "largest networks" and "busiest networks"

Problem

The logic is unclear to me in methods updateLargestNetworks and updateBusiestNetworks in net.metrics.service.ts.

Related to #10

Solution

• Review if the logic is correct
• If not, fix it

Add a measure for connectivity in the network

@Dominik1999 could you please elaborate on this?

[Frontend] Add a dropdown to select token networks

We need a way to select a certain token network. There should be a drop-down and/or a search field.

It should be hidden when only one network exists.

adapt frontend to new api data schema

Problem

The schema for network info has changed. Paul sent me new json file.

Solution

• Find issues related to new schema.
• Fix them.

Expose token information on the UI

Currently the UI will only show information about the token address.
Since we now have information about the symbol and name available, we should display this information along with the address in case they are non-empty.

Review angular-app

Updated review in my forked repo:
https://github.com/ellvtr/status-page/blob/jonas/misc/angular-app.misc.md

Created new issues based on the review:

• #5
• #6
• #7
• #8
• #9
• #10
• #11