UI Improvement - Table Layout

[Slind14]

Hi there,

I find it really difficult to read through the numbers combined with letters and not being able to sort by values. Is there a reason the data isn't displayed in a table format?

Atm it looks like this:

1. Current UI

Empire::Event: c.e.l.EmpireBlockListener (BlockPhysicsEvent)	count(140612379) total(17.32% 69.665s, 19.77% of tick)	avg(0.00ms per - 9.89ms/19,771.14 per tick)

2. Basic Table

Current layout converted into a table. (way more clear, easy to read, could be sort-able).

name		total	<	<	<		avg	<	<
/\		calls	totalPct	totalTime	pctOfTick		avgMsPerCall	totalMsPerTick	callsPerTick
Empire::Event: c.e.l.EmpireBlockListener (BlockPhysicsEvent)		140,612,379	17.32%	69.665s	19.77%		0.00ms	9.89ms	19,771.14

3. Simplified Table

Going a step further by grouping the same data (different time unit).

name	share	time	time/call	calls
Empire::Event: c.e.l.EmpireBlockListener (BlockPhysicsEvent)	17.32% (19.77%/Tick)	69,665ms (9.89ms/Tick)	0.00ms	140,612,379 (19,771.14/Tick)

4. Smart Table

A further improvement - in terms of clean ui - the total/tick data toggle-able. So it only displays the total or avgPerTick values based upon a toggle button to switch between those two.

Total Time

name	share	time	time/call	calls
Empire::Event: c.e.l.EmpireBlockListener (BlockPhysicsEvent)	17.32%	69,665ms	0.00ms	140,612,379

Avg. per Tick

name	share	time	time/call	calls
Empire::Event: c.e.l.EmpireBlockListener (BlockPhysicsEvent)	19.77%	9.89ms	0.00ms	19,771.14

[aikar]

This is def on the roadmap!

I am in the middle of rewriting the entire front end to use React. Once thats done we can explore design changes like this.

[aikar]

status update on this. I currently have the data sortable in the dev environment.

Goal is to still try to get the data represented in a column fashion and move the labels up to a header, which is now sticky.

https://timings.aikar.co/dev/

[Slind14]

Looking good so far. I would still like to see a table layout and a less "messy" look :)