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

Add breadcrumbs to the selection panel #4491

Closed
2 tasks
abey79 opened this issue Dec 12, 2023 · 4 comments
Closed
2 tasks

Add breadcrumbs to the selection panel #4491

abey79 opened this issue Dec 12, 2023 · 4 comments
Assignees
Labels
🧑‍🎨 Design Requires UX/UI designer input ui concerns graphical user interface

Comments

@abey79
Copy link
Member

abey79 commented Dec 12, 2023

The enclosing context of the selected item should be displayed as breadcrumbs to facilitate the navigation. This issue is about the design and implementation of this feature.

####New context from Dec '24
We are implementing undo, and want to get rid of the selection panel errors navigations ←→.
Despite the arrows being ambiguous UX element, it is being used to navigate via selected panels (especially when users click somewhere where they did not want to go, so they go 'back' to the previous view).
Assumption is that breadcrumbs will be a better navigation support for this as well as a more familiar ux pattern.

Design issues

Proposal based on Marten's sketches:
Image

This will also allow to remove some of the elements in the selection panel as they will become redundant,
merge parent and in view in blueprint, remove in view

Implementation issues

  • implement the capability to walk the hierarchy up
  • implement the breadcrumb in selection panel

cc @jleibs @emilk

@abey79 abey79 added the ui concerns graphical user interface label Dec 12, 2023
@gavrelina gavrelina added the 🧑‍🎨 Design Requires UX/UI designer input label Dec 2, 2024
@emilk emilk self-assigned this Dec 3, 2024
emilk added a commit that referenced this issue Dec 3, 2024
We're removing it because we're worried users will confuse it with
the new Undo feature.

After this PR, you can no longer go back in the selection history.

But, we're planning on adding hierarchy breadcrumbs to the selections
instead, which should hopefully be an even better way of understanding
and navigating selections:
* #4491
@gavrelina
Copy link
Member

gavrelina commented Dec 3, 2024

Upd:

  • we decided to use first entity letters instead of entity icons, as they give a better hint on what is the the actual name of the entity
  • and use a little store icon for the root in the streams
  • for entities in BP : we merge Parent + Entity and remove In view

emilk added a commit that referenced this issue Dec 3, 2024
### Related
* Part of #4491

### What
Just moving some code around
emilk added a commit that referenced this issue Dec 5, 2024
### What
We're removing it because we're worried users will confuse it with the
new Undo feature.

After this PR, you can no longer go back in the selection history.

But, we're planning on adding hierarchy breadcrumbs to the selections
instead, which should hopefully be an even better way of understanding
and navigating selections:
* #4491


![image](https://github.com/user-attachments/assets/afb38bff-7e83-4dac-bb7f-cd27a8acca4d)
@emilk
Copy link
Member

emilk commented Dec 5, 2024

Still need to properly sync "projection" entities with the blueprint tree panel.

The problem with projections include:
A) I don't know what the logic is for how they are displayed in the blueprint tree view
B) I don't know if how they are displayed in the blueprint tree view is a good model to follow
C) If it is a good model to follow, I don't know how to follow it

I don't feel confident moving forward with this without a few more motivating examples of projections.

@jleibs
Copy link
Member

jleibs commented Dec 5, 2024

A) I don't know what the logic is for how they are displayed in the blueprint tree view

This happens here:

// Show 'projections' if there's any items that weren't part of the tree under origin but are directly included.
// The latter is important since `+ image/camera/**` necessarily has `image` and `image/camera` in the data result tree.
let mut projections = Vec::new();
result_tree.visit(&mut |node| {
if node
.data_result
.entity_path
.starts_with(&space_view.space_origin)
{
false // If it's under the origin, we're not interested, stop recursing.
} else if node.data_result.tree_prefix_only {
true // Keep recursing until we find a projection.
} else {
projections.push(node);
false // We found a projection, stop recursing as everything below is now included in the projections.
}
});

B) I don't know if how they are displayed in the blueprint tree view is a good model to follow

I'm probably biased as it was my idea, but I'm not deeply attached to it. If somebody has a more intuitive model for thinking about paths that are rooted above the origin, I'm totally open to it.

C) If it is a good model to follow, I don't know how to follow it

You can combine the snippet from above, with the logic to resolve an Item::DataResult

Following the pattern here:

let entity_path = &instance_path.entity_path;
let query_result = ctx.lookup_query_result(*view_id);
let data_result = query_result
.tree
.lookup_result_by_path(entity_path)
.cloned();

emilk added a commit that referenced this issue Dec 6, 2024
### Related

* Part of #4491

### What
This adds "breadcrumbs" to each selection header in the selection panel,
showing the ancestry of the selected thing.
That should make it obvious if the selection belong to the blueprint
tree panel, or the streams panel.


![image](https://github.com/user-attachments/assets/29c0b3de-3578-469f-8866-6d0b1dfa92b2)

![image](https://github.com/user-attachments/assets/17aa9dc0-6d89-413f-ba40-1b4c2c7dd63e)

![image](https://github.com/user-attachments/assets/8af19762-8ec3-48c8-9cd1-ef6d9459a6df)

![image](https://github.com/user-attachments/assets/dc1eaf3c-6aa8-4e4e-822e-c1e755a6f380)


### Future PR
* Make projections appear the same in breadcrumbs as in the blueprint
tree panel
@emilk
Copy link
Member

emilk commented Dec 6, 2024

@emilk emilk closed this as completed Dec 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🧑‍🎨 Design Requires UX/UI designer input ui concerns graphical user interface
Projects
None yet
Development

No branches or pull requests

4 participants