Angular frontend (new)

Frontend

Concept

• one pager
• all info at one place
• display only relevant settings (for current state)

API-Server communication

• calls via services
• services can be accessed by multiple components (selected Chain)
• Result visualization (Snackbars)

User state

logged out

• only data display and chain selection

logged in

• many more options

Data visualization

Parameters

• line chart (Plotly.js)
• timeline-chart (set time span top right)
• Parameter selection
• direct comparison of multiple chains
• live

Metrics

• bar chart (Chart.js)
• calculated by MetricCalculatorHelper
• using parameters
• calculated for the selected timespan
• live

Mining Time

• avg(Blocktime)

Stability

• deviation(Blocktime)

Throughput

• avg(numberOfTransactions) / avg(Blocktime)

Data transfer

• avg(Blocksize) * avg(numberOfNodes) / avg(Blocktime)

Energy consumption

• avg(CpuUsage) * Faktor

Chain configuration

• individual configuration options for different chains
• parses chain info from API-Server
• adapts state to chain state
• different configurations for same chain on different target systems

Scenario configuration

Create a scenario

• select create to create manually
• name, description, numberOfNodes, transactionInterval, Payload
• transactionInterval & Payload slider are bordered

Upload a scenario

• dropzone
• upload .xes-file
• name, description necessary

Recordings

• start recording / stop recording
• recordings are global | state will be updated to 'recording' + timer
• display recording -- new selectable chain menu -- blur menus that are not relevant -- display whole recording