Layers View UI Review

[aldebaran30701]

Prerequisites

• [x] Put an X between the brackets on this line if you have done all of the following:

  • Running the latest version of Constellation

  • Attached the Support Package via Help > Support Package

  • Checked the FAQs: https://github.com/constellation-app/constellation/wiki/FAQ

  • Checked that your issue isn’t already filed: https://github.com/constellation-app/constellation/issues

  • Checked that there is not already a module that provides the described functionality: https://github.com/constellation-app/constellation/wiki/Catalogue-of-Repositories

Description

Layers view current interface is mainly data-driven and does not exactly give the best user experience. See images below

From the images above you can see that the current state of the layers view enables up to 20 odd layers visible within a normal view frame. This is great for when the user wants to use many layers but not good for real estate when entering in queries or adding a description to the layer.

Ideally, the user would want:

• 10 first layers easily accessible.
• View query strings and descriptions with minimal/no extra clicks
• Visibly differentiate an active layer from inactive

The issue currently is the width of the window for text input - It gets chopped or added into a scrollbar which makes it hard to view and edit. The interface at the bottom of the current view to add or disable all layers could also be docked. This would allow it to always be visible even with many layers added.

This ticket should be used as a sounding forum for new ideas and thoughts.

[aldebaran30701]

Highlighted in #1115 comments: https://app.mockplus.com/app/share-b3f2b17418d4af22c5daf78e28663d18share-EyQFB_dpBbD/rp

Screenshot:

[aldebaran30701]

Another option from #1115 :

[aldebaran30701]

Another mock: https://app.mockplus.com/s/hVe3ybr-yyQl (Only first two layers are complete) Screenshot:

[aldebaran30701]

I've shopped up a few examples, as below.

1. Numbers inside the top row visuals

2. No numbers within top row visuals

3. Without top row visuals

I'm interested in thoughts about the X button on the right hand side of each layer - this is not a currently used element in Constellation's Data Access View. The X is used in the closing of tabs in the Data Access View though.

[arcturus2]

I'm interested in thoughts about the X button on the right hand side of each layer - this is not a currently used element in Constellation's Data Access View. The X is used in the closing of tabs in the Data Access View though.

@aldebaran30701 my preference would be to make the "delete layer" action a button down the bottom which could be enabled when a layer was selected.

I would prefer to use a trash can icon instead of the X but then I don't like seeing so many trash can icons either - hence the fixed position button idea down the bottom.

[arcturus2]

Also great work on the mockups @aldebaran30701! My 2 cents on them are:

1. I think the numbers are overkill and make the GUI look busier than it needs to be.
2. I am wondering if we the box highlighted at the position is useful or should it be simplified like what the Data Access View does it and fills from the left. I think the point of this features should be to let the user know something is enabled rather than which one. I think that if the last layer was enabled could easily miss it being enabled because my eyes are scanning down the pane from the left hand side because that's where the checkbox is and the start of the label.
3. Actually don't mind it either.

[antares1470]

Also great work on the mockups @aldebaran30701! My 2 cents on them are:

1. I think the numbers are overkill and make the GUI look busier than it needs to be.

2. I am wondering if we the box highlighted at the position is useful or should it be simplified like what the Data Access View does it and fills from the left. I think the point of this features should be to let the user know something is enabled rather than which one. I think that if the last layer was enabled could easily miss it being enabled because my eyes are scanning down the pane from the left hand side because that's where the checkbox is and the start of the label.

3. Actually don't mind it either.

I agree with @arcturus2 regarding 1

I don't mind 3 either, but regarding 2 if the purpose of the boxes if simply to indicate that some layer is enabled then really we only need one box (which is green if any layer is enabled)

I'm interested in thoughts about the X button on the right hand side of each layer - this is not a currently used element in Constellation's Data Access View. The X is used in the closing of tabs in the Data Access View though.

I personally don't hate having the X on the layers as I think it gives a clean way to delete a layer (personally not as a big a fan of a trash can icon on each layer). I think this would need to be a separate pane to the data access view plugin panes as I wouldn't want users deleting plugins from the DAV.

If we go with a Delete Layer button, the risk is if it is too close to the Deselect All Layers button, you may get a slip resulting in deleting layers instead of deselecting them which will make for a poor user experience. That being said, if you want to provide a user the option to delete multiple layers at a time (which a user may want to do), a button will probably be a necessary inclusion (maybe align it to the right of the view rather than the left like the Add and Deselect buttons are)

EDIT: Realised you'd get the same thing with the X on each layer so maybe you need to add a follow-up prompt to confirm whether the user wants to delete a layer(s) with the option to abort

[github-actions[bot]]

This issue is stale because it has been open for 6 months with no activity. Consider reviewing and taking an action on this issue.

[aldebaran30701]

I've done a little bit of thinking for the structure of this UI code-wise.

There would be the UI class which extends Pane.

Pane would hold a Vbox which has 2 spaces.

 ___________________________________________
|                                           |
|                                           |
|                 Layers                    |
|                                           |
|                                           |
 ___________________________________________
|                                           |
|               Buttons                     |
 ___________________________________________

Layers would be something like another vbox which held many collapsible panes.

The collapsible panes will allow a title to be displayed, and hopefully a checkbox. The collapsible pane item will have a decorator which will be to add a delete button.

This allows for a default layer to exist in code without logic within the ui to not build a button when the index of the layer is 0.

[aldebaran30701]

I've done some UI mockups with very basic functionality, and would like peoples' thoughts.

Notes:

• I'd like to have the orange bar at the top saying Layers but not allowing it to be collapsible (just redundant i think)
• I'd like to have the bottom menu bar pinned to the bottom so you won't have to scroll when expanded
• I'd like to disable the layer 0 and not allow it to be deleted. Also updating the text to better reflect that it is the whole graph.
• I feel like the layers without a descriptions kind of seem bare.
• The below structure is very quickly scratched up so relations are not correct, and is a WIP

Current progress:

Current Structure:

[antares1470]

Looking good @aldebaran30701. Agreeing with most of your notes. Regarding layers with no descriptions seeming bare, I think that is just going to be a natural consequence of structuring the UI the way you have and maybe just one that needs to be accepted. The only thing I could really think of to "fix" it would be to add a default description, but I reckon there's a chance that might look even messier than no description at all

[arcturus2]

@aldebaran30701 congrats on putting this together. It's coming alone nicely. Also good on you for doing the class diagram. We don't have any of these and this info is great and really helps understand how things actually hand together. It helps identify funny/bad relationships for when we do accidentally build things less optimised.

The only thing I could really think of to "fix" it would be to add a default description, but I reckon there's a chance that might look even messier than no description at all

@antares1470 i think your onto something though. I think a placeholder text would be useful to confirm there is nothing in there. Have a look at what the Attribute editor does;

[GammaVel]

Wow! It is awesome to see a class diagram included here @aldebaran30701 ! Thanks for that. It is great to see the layers view progress out of the Experimental menu and into the main view options. This promises to be a very useful way of analysing complex graphs. Thanks @Delphinus8821 for fixing the tricky bugs with this.