Improve appearance of result related graphs

[appukuttan-shailesh]

I have implemented graphs for the validation results (both for single model/test and for multiple model-test comparison).
These graphs are interactive and functional, but their appearance can significantly be improved upon.

We are using the same Plotly library as in some of our other projects.
As I need to move on to other tasks, I would request somebody else to take up this work (ReactJS experience isn't important to take this up).

We could collate a list of suggestions/ideas related to the appearance of the graphs here to make this task easier.

[appukuttan-shailesh]

Suggestions for improvements:

• Rotate model/test names (x-axis) in grouped bar chart for results. Avoid overlapping as seen in figure below.
  For more details, see:

  • Rotating group names in grouped bar chart plotly/plotly.js#5054
  • https://community.plotly.com/t/how-to-rotate-group-name-in-grouped-bar-chart/43513
    

• Related to above, I have now add ellipsis to shorten the model names. (Note that this still doesn't completely resolve the above problem, as these truncated names can still be too long when there are several entries). This is not foolproof because if two or model have the same representation with ellipsis (as example: modelA_000010000_2019, modelA_000020000_2019 will both be represented as modelA_0...0_2019), then they will be clubbed together in the graph as belonging to the same entity. So we need to have the display representation separate from the actual entries.
  For more details, see:

  • https://community.plotly.com/t/ellipsis-for-truncated-axis-labels/4752/9

[apdavison]

This issue moved to HumanBrainProject/model-catalog#8, so closing here.