Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Overhaul #157

Merged
merged 14 commits into from May 14, 2019
Merged

UI Overhaul #157

merged 14 commits into from May 14, 2019

Conversation

dougthor42
Copy link
Owner

@dougthor42 dougthor42 commented May 9, 2019

This MR overhauls the UI and fixes #58.

  • Use Bootstrap for looking nice
  • Show the metrics and plots on the same page
  • Add api_plot blueprint
  • Add GET /api/v1/plot/<metric_id> route which returns data ready to be consumed by Plotly
    • basically the same as GET /api/v1/data/<metric_name>, but accepts metric_id instead.

TODO:

  • Update the /plot/<metric_name> route so that it provides a direct link to the plot
  • During this MR, I merged index.html and plot.html into layout.html. This was a mistake - layout should still be separate from index.
  • reconcile the two very similar routes plot/<metric_id> and data/<metric_name>
  • better sizing
    • metric list needs to longer and adjust to window size
    • autosize the plot
  • See if there are any additional unit tests needed
  • rebase/squash to logical commits.

Preview:

image

+ Put the title and version in a boostrap container on the index page
  rather than on the layout
+ Rename some html elements to be more clear
+ Remove items from the 'data' div. No longer needed because we don't
  have a dedicated 'plot' page.
+ Update the index's JS to also send in a `metricId` to `populateTree`
  (if a `metricId` is given)
+ Remove plot.html
External Impact:
1. Do not take the user to a new page
2. Pull data from the API url /api/v1/data via AJAX rather than sending in
   via a template
3. Update the current URL when the user changes plots

Internal Changes:
+ Move core of populateTree to a separate function
+ Use jQuery's getJSON and success/failure callbacks
  + Success updates the plot
  + failure logs an error message
+ Have `populateTree` accept a `metricId` value
+ add selectNodeById
+ Add `ready.jstree` event bind which will plot the selected `metricId`
  node, if it's provided.
+ Plot responsive to window size.
+ list of metrics almost the same size as the plot window
+ Allow the graph to take up full width.
+ separate out test_plot_with_data to '_by_name' and '_by_id'
+ Remove skipped test - replaced by new ones. (which are also skipped...
  but now I have a better reason for it!)
@dougthor42 dougthor42 merged commit 8abfc6e into master May 14, 2019
@dougthor42 dougthor42 deleted the bootstrap-split-page-gh58 branch May 14, 2019 20:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make it easier to jump between plots.
1 participant