Add loader and refactor JavaScript for improved UX and performance#38
Merged
brichards64 merged 7 commits intoToolDAQ:masterfrom Dec 9, 2024
Merged
Conversation
* Add divs to better structure monitoring plots
This refactor improves the maintainability of the js code by using modern JavaScript features like async/await and Promise. It also enhances the efficiency of the data processing and plot rendering logic, making the chart updates smoother and more reliable. Changes introduced: * Refactored asynchronous data fetching: Converted gettable function to use Promise and async/await for cleaner and more manageable asynchronous code. * Improved error handling by using try/catch blocks to handle potential errors during data fetching. * Improved the plotting logic: ** Streamlined the makeplot and updateplot functions to ensure more efficient data handling. ** Modified the logic that updates plot data (data) by correctly pushing new values into the x and y arrays. ** Refined the handling of Plotly chart updates to properly append new data and refresh the graph. * General code optimizations: ** Removed redundant code to enhance readability and maintainability. ** Ensured that Plotly traces are only removed when necessary to avoid unnecessary deletions. ** Simplified the logic for clearing previous plot traces before rendering new data. * Enhanced dropdown handling: ** Refined logic in the updatedropdown function to improve the dropdown population process. ** Improved the handling of the select dropdown events and the plotting of data based on user selection.
For larger charts and visualisations, users get a blank page for a few seconds with no clue anything is happening on the page. This commit adds a loader indicator during data fetching and plot rendering. Summary of changes: * Introduced a loading spinner: ** Added a loader div to the HTML structure, which displays a spinning animation during data fetching or plot rendering. ** Applied CSS for a simple, animated spinner using @Keyframes for smooth rotation. * Displayed loader during data operations: ** Updated the makeplot and updateplot functions to display the loader when data is being fetched or when the plot is being updated. ** Ensured that the loader is shown while waiting for responses from the server (e.g., during data fetch operations) and hidden once the data is processed and the plot is rendered.
brichards64
reviewed
Dec 9, 2024
|
|
||
| const output = document.getElementById("output"); | ||
| const tableselect = document.getElementById("tableselect"); | ||
| const select = document.querySelector('select'); |
Contributor
There was a problem hiding this comment.
this doesn't seem to exist
Contributor
|
please resolve that we seem to have both select and tableselect. select seems not to exist in the html but there are still event listeners and other things in the js. Please resolve |
…treamline event listener setup
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR improves the user experience and performance of chart rendering by adding a loader indicator and refactoring the JavaScript for better asynchronous handling.
Key changes:
Loader indicator:
Refactor JS for better async handling:
Makes the chart responsive to adjusting display sizes.