Plots with Multiple Y Axes
This design project involved enhancing our already-exiting feature called Overlay Plots, such that they support multiple y-axes. Overlay Plots allow users to visualize one or more telemetry points overlaid together with a common Y Axis.
BACKGROUND.
The primary use case for this feature enhancement involved the operators on the VIPER Mission. During mission simulations, concerns were raised by the Systems, Operations, and Science teams regarding the inadequacy of plots with a single common Y-axis for effectively displaying all necessary data in their mission control displays.
For example, sometimes users need to view multiple telemetry points on the same plot, yet with different Y-Axes, as it allows for more flexibility and viewing the data more accurately. Additionally, mission displays can often become very populated with telemetry– multiple axes can help the graph look more organized, making it more effective in viewing data during the mission.
USE CASE.
While Overlay Plots were already previously implemented, there was a challenge in terms of improving the UI effectively in delivering the goal of this feature, while keeping the changes minimal. It is important to note that, that as we continued to improve the software, mission personnel were being trained on the Open MCT software such that they would be proficient in using it live during the mission. Because of that, we aimed to avoid a complete overhaul of the UI, as it would have posed a significant learning curve for users to adapt to the new feature.
Related to the previous statement, there was the challenge of making sure that changes to the UI were able to translate well to other features within Open MCT. For example, Open MCT has another plot feature called Stacked Plots– which visually allow users to see multiple graphs with their own independent Y Axis, while maintaining the synchronization of the X axis.
THE CHALLENGE.
If these plots in a Stacked Plot can have anywhere between one and multiple Y Axes each, how can we maintain the synchronization of the X Axis?
Example of a Stacked Plot in Open MCT
GOAL.
Implement multiple Y-Axes within a plot, such that users can view and compare multiple telemetry points under different Y-Axes as they desire.
Minimalism: Implement a design solution that involves the least amount of change while meeting the user needs.
Ensure that these UI changes carry well into other Open MCT features with no issue.
After observing, analyzing, and speaking to multiple mission operators I was able to gauge a better understanding of what features were desired. These are a couple of the main requirements that I needed to meet with the design:
NEEDS FINDING.
Easy User Interactions
When users are building complex displays that are very data-heavy, the user interactions must be simple and intuitive enough such that they can progress forward effectively.
Visualize Telemetry Points by Y-Axis
While building displays, users need to be able to easily see which telemetry point is in which Y Axis.
Y-Axis Visibility
Multiple Y-Axes may be helpful in some plots, but not others. We need to have an ability to add/remove Y-Axes, as needed.
Y-Axis Configurations
Overlay Plots currently offer different Y-Axis configurations to meet all users' needs.. We need to make sure that these configuration options are available for each individual Y-Axis.
DESIGN.
Overlay Plot in Edit Mode
When a user is editing an Overlay Plot, they can use the Inspection Pane on the right side to rearrange telemetry points into the available Y-Axes by dragging and dropping. This also makes it much easier to visualize where each telemetry point is located in respect to the Y-Axes.
Overlay Plot in Viewing Mode
When a user is viewing the Overlay Plot, there exists an "eye" icon next to each Y-Axes that allows the user to toggle the visibility of the axis. Hiding an axis means that any telemetry points associated with that axis get hidden as well. This is incredibly useful during real-time mission operations, in the case that further analysis of only certain axes is temporarily needed.
Additionally, the Inspection Pane on the right side provides a summary of the configuration settings that were chosen by the user while editing the plot. These can always be changed by going into Edit Mode.
END PRODUCT.
This video highlights the capabilities that were implemented from this design task. Observe the following features:
(1) The ability to hide/show Y-Axes with the click of a button.
(2) The ability to drag telemetry points between different axes in the Inspection Pane, and see the changes be applied in real-time.
(3) Configuration settings for each Y-Axis in the Inspection Pane that are visible by clicking on the desired plot first.
(4) In a Stacked Plot, in order to assure that the X-Axis for all the plots are synchronized, the width of the plots are determined by taking the width of the graph with the greatest amount of axes (which means, has the smallest width for the plot area), and applying it to the rest of the plots. That way, the X-Axes for the plots always line up.