Timings Redesign

[pebblehosts]

This pull request implements the theme from PebbleHost's https://timin.gs into the main timings.aikar.co repository. The changes include:

• Frontend Theme
  • Revamped design
  • New graphing library
  • Better mobile responsivity
  • More space on the page dedicated to the report
• Moved public files into the /public directory so other files can't be accessed via http
• Tips system
• Strip out lodash & moment.js and replace with Vanilla JS to improve load times

As discussed with the Paper team, this theme is licensed under MIT with the extra condition that attribution in the footer will be preserved, more information about the license can be found in src/css/themes/LICENSE.

And, finally, here are some screenshots of the new UI for those who haven't seen it before :eyes:

[DenWav]

General pass over it looks good. Couple things I noticed. The theme is called 'redesign'? Kind of weird to me, I guess. But it's also clear enough so that's fine.

Several files have no newline at end of file (at least one has a blank line with 1 space instead). General stuff like that should be cleaned up.

I'm not a web developer, so I can't do a super full in-depth review. I have some experience with React and that all looked okay.

[pebblehosts]

Good spot, have fixed the file endings @DenWav

As for the name, do you have any suggestions? I agree redesign is not the best name but it made the most sense over any of our other ideas. I didn't want to call it the same as the old theme both to avoid confusion and to avoid any possible caching issues of the theme files.

Thanks for giving it a once over :)

[pebblehosts]

The reason those were removed was mostly due to UI clutter for very little benefit, not sure what the benefit of having these in the main area of the UI is?

Maybe to avoid cluttering the sidebar we could put them at the top of the config tab instead? Max memory is already there but shown in bytes so that can be 'humanized' into MB/GB, and then could add online mode & max players to the "System Config" section - or add a new section like "Server Info" although maybe not worth a whole new section for 2 values.

[DenWav]

I don't know where this is in the code but when you enable a layer on the graph (after disabling it) the line jumps up higher than it should be and then settles back down. I find this animation rather annoying (and ugly) - the TPS loss graph doesn't do that though. Could they all be changed to that behavior?

Also the TPS graph cannot be toggled, unlike the others. Would be nice to be able to toggle that as well.

[pebblehosts]

I don't know where this is in the code but when you enable a layer on the graph (after disabling it) the line jumps up higher than it should be and then settles back down. I find this animation rather annoying (and ugly) - the TPS loss graph doesn't do that though. Could they all be changed to that behavior?

Also the TPS graph cannot be toggled, unlike the others. Would be nice to be able to toggle that as well.

Fixed the bouncing by disabling animations - spent a while taking a look at this but the only way to stop this and preserve animations is to set an explicit max value of the axis, however this would involve going through the data and pulling the max value and calculating itself rather than relying on amcharts' quite nice auto ranging so it makes more sense here to just disable animations.

Will work on Aikar's changes shortly, thank you for the feedback

[pebblehosts]

All of @aikar's requested changes are now resolved, tips have been moved to be processed in frontend

[aikar]

sorry i forgot to comment on this before, but I use yarn in this project. Can you rebuild the yarn.lock with your latest package changes (I think npm install, delete yarn.lock, yarn install, to build a new one) then delete package lock file.

my tooling is setup for yarn atm and not best practice to use 2 different package managers.

[pebblehosts]

Hey @aikar , was just checking if you had a chance to look at the changes?

Hopefully that's all sorted out so we can begin the process of moving from Timin.gs back to timings.aikar.co, and everybody can see the benefit of the changes :)

[pebblehosts]

Hey @aikar - as discussed via Discord the key is already sent over & I don't think there's much else left to do, would be good to know the progress on getting this pushed!

[aikar]

You're good on your part, just got to get time to test it in my dev environment and deploy it.

[pebblehosts]

Hey! If there's any issues discovered in testing please let us know - I think we mentioned via Discord that for us, we were looking to get it hopefully merged before the 15th September due to internal reasons meaning we won't be able to provide much more support with the project.

We've been able to extend this further however, we won't be able to continue development on it after the end of September as there's an internal restructuring meaning we will no longer be able to contribute development time to the project, if there are any issues or further changes needed to complete the merge & push this to production.