NASA-AMMOS / aerie-ui

The client application for Aerie.
https://nasa-ammos.github.io/aerie-docs/
MIT License
29 stars 6 forks source link

Grouping MVP UI Design Part 1: Compound Activities #1375

Closed jmdelfa closed 3 months ago

jmdelfa commented 4 months ago

Description & Background

We need to design basic UI capabilities in order to represent the new planning elements that will be added to model hierarchical task networks as described in this Grouping discussion.

Short recap of UI-relevant parts of discussion:

Requirements

These may need to be improved/expanded upon, but the basic UI design requirements for this are:

Out of Scope

We decided to split up the UI design for this into two parts - this is Part 1. Part 2 will cover how to visualize the decomposition of a compound activity into a list of sub-activities and relations between them. We expect this visualization to be fairly self-contained and only visible when the user clicks/interacts with a compound activity.

jmdelfa commented 4 months ago

Action Juan: Arrange demo of TaskNet visualization Configure temporal relations parameters via UI: could be similar to the way it is done for activity arguments. Starting Next Sprint Planning: Start discussion on the approach to visualize compound tasks. Visualization of tasknet internals for later

dandelany commented 4 months ago

I've updated the ticket description above to flesh out some design requirements based on discussions earlier this week, & I'd like to get @lklyne working on this in our next sprint (starting 7/22). We decided to split this into two parts and not include the more difficult task of visualizing HTNs in part 1 - opened a draft ticket for Part 2 here: #1386 . @jmdelfa please let me know (or edit in place above) if I've gotten any details wrong.

lklyne commented 3 months ago

Initial discovery: https://www.figma.com/board/ZebAe57i6RM7iZq4rOMBoH/Aerie-%231375---Timeline-Grouping?node-id=0-1&t=eGOzPKLbUXU5cjrA-1

Image

lklyne commented 3 months ago

Prototype incorporating first round of design feedback: https://www.figma.com/proto/nQ2TqzIr0Kl1SIzqT246Ro/Aerie-%231375-Compound-activities?page-id=29%3A17078&node-id=34-79048&viewport=895%2C84%2C0.09&t=75xkiQJR6Ydz1TDO-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=34%3A75996&show-proto-sidebar=1

Image

lklyne commented 3 months ago

Hoping to address #1169 with this too

lklyne commented 3 months ago

This is ready for dev with a few outstanding questions remaining. https://www.figma.com/design/nQ2TqzIr0Kl1SIzqT246Ro/Aerie-%231375-Compound-activities?node-id=65-35353&m=dev&focus-id=69-58754

Interaction states for the structure and timeline combo are in this prototype. This includes a new hover and active state for timeline activities. This section in figma has the hover and active states.

Remaining questions:

Image