More compact Gantt drawing strategy in Time Strip and Plan views

[charlesh88]

Problem
The current Plan Gantt view uses a lot of vertical space because we show the full name of each activity, which prevents Activities from "wrapping up" and laying out more horizontally efficiently:

Solution

• Implement a drawing mode that clips the Activity name to the span of its duration. This will of course mean that Activities with short widths will clip and often completely hide their names, depending on zoom level.
• This should be a settable property in composed Plan objects and Time Strip views. The setting should be defaulted to enabled.
  
• Do not make this the default drawing mode for non-composable Plan objects so as to avoid introducing an undesirable change. We may want to later change it to be the default pending user feedback, or allow the user to change the view via a view switcher, action or other gesture.

Additional context
Add any other context or screenshots about the feature request here.

[charlesh88]

@shefalijoshi says:
Plan views are difficult to navigate and take up too much vertical space resulting in scrolling. We need to improve the layout to reduce this.

To achieve this, we can, move activity name display so that it always only renders inside the activity 'rectangles'.
Things to consider are:
2. How to display an activity name that cannot fit at all when the activity duration is too short.
3. How to display an activity name that fits partially? We could clip the name.

While we're working on this issue, we should also ensure that we are showing the activity name in the inspector properties when an activity is selected. We might want to look at how to address the case where multiple activities are selected as well (talk to UX).

[charlesh88]

@charlesh88: notes from discussion 3/1/23 Shefali, Jesse, Andrew, Rukmini:

• General plan view, need a design approach for:
  • Better approach to Gantt bars, particularly for new clipped name drawing method where very small width Activities can be packed right next to each other horizontally. Activities that are at least 2px wide can use a border on their right edge that separates them from other Activities. We may find that 2px is a minimum width for these bars; anything smaller than that would then wrap down vertically to the next row. Does Mark Shirley have any thoughts here?
  • Do we need to distinguish zero duration events from Activities with duration? If so, how might we do that? A solid diamond shape is an established convention, but potentially has the same issue as noted immediately above. Again, Mark Shirley?
• Composable Plan object
  • Rename to distinguish from non-composable plan objects from the tree; think Overlay Plot vs. plot view.
  • Inspector in Edit mode includes:
    • Checkboxes for swimlane visibility; browse view reads those back
    • Toggle for "Clip activity names"; will read plan JSON metadata to determine initial setting.
  • Keep upload JSON button in Properties, but make it not required.
  • This new Plan object can only have one plan in it, fix logic of uploaded plan JSON vs. plan from tree:
    • Like Gauge, prompts a warning dialog if user tries to drag in another plan.
    • Dragging from tree onto a Plan obj with either an uploaded JSON OR a pre-existing plan from the tree prompts a warning dialog.
    • Clicking "Upload JSON" on a Plan obj with a plan from the tree prompts a warning dialog.
    • "Upload" button must be set to not required.
• Non-composable Plan view
  • New icon design; think telemetry object vs. Overlay Plot.
  • Remove "Upload" button.

[charlesh88]

Testing Notes

Example Plan JSON file, dates from 2023-03-15 21:00:00.000Z to 2023-03-22 10:00:00.000Z:
CH synth plan 03-15-23 v5.1.json.zip

1. Create a new Plan object using the attached JSON file or use an existing Plan that you know is well-formed.
2. Set the Time Conductor in Fixed mode to a start and end that encompasses the plan's timeframe.
3. Create a new Gantt Chart object, then drag in the plan object from step 1.
4. Verify that the plan is displayed as expected.
5. In the Config tab > "Display Settings", toggle "Clip Activity Names" and verify the plan is displayed similarly to the reference images here.
6. In the Config tab > "Swimlane Visibility", toggle a swimlane and verify that it is hidden and then shown as expected.
7. Enable "Clip Activity Names" and then save and exit editing.
8. Nav to another object and back to your Gantt Chart object and verify that all saved configuration is restored as expected.
9. Manipulate the Time Conductor start and end (manually, or via zoom and pan in the ticks area) to pan and zoom the timeframe. Verify the view changes accordingly and that the time ticks at the top of the view align consistently with activities.
10. Change the width of the Gantt area by dragging the tree or Inspector pane edges to expand or shrink the main view's width. Verify that the time scale and activities proportionally scale correctly and sportily.
11. Click a single activity and verify that the Inspector displays info in the Activity tab similar to what's shown in the reference here.
12. Hold the Cmd key and click another activity to select two: do this with activities that overlap each other, and again with those that have a gap between the earliest end and latest start. Verify that the Inspector displays info in the Activity tab similar to what's shown in the reference here.
13. Change the Time Conductor to real-time mode and (if possible) set the bounds to bring activities into view. Verify the plan is displayed similarly to the reference images here and that activities are registered correctly against the view's timescale.
14. Edit the view and disable "Clip Activity Names". Save and exit editing, then perform steps 8 and above again.

Testing References

Edit mode, Clip Activity Names enabled, TC in fixed mode.

Edit mode, Clip Activity Names disabled

Edit mode, swimlane hidden

Browse mode

TC timeframe zoomed and panned

Single activity selected

Two activities selected

TC in real-time mode

[ozyx]

VIPER-OPENMCT Testing Notes

1. Create a Gantt Chart based on an existing VIPER Plan
2. Change the VIPER Plan upstream (server-side)
3. Verify that the change is reflected in the Plan object client-side within 1 minute of the update
4. Verify that the change is reflected in the Gantt Chart object

[michaelrogers]

Fix verified during testathon 03/17/2023. Tested in various combinations of hidden and visible swimlanes and the selection always persisted.