Consolidate UI of Layer and STAC widgets

[heidimok]

• stac ipyleaflet version: for release 0.3.0
• Python version: python >= 3.9 (some of the widgets are incompatible at v 3.8)
• Reference item 11 in the MAAP-ipyleaflet-DevRoadmap

Context

In the June 2023 release, version 0.2.0 of stac_ipyleaflet, a Layers widget and STAC widget were created:

• STAC widget - Allows users to discover and see COGs of datasets from the MAAP stac catalog as a layer
• Layers widget - Allows users to have good control over how the data is displayed on the map

Problem

As we tested out the new library, we learned that there's a user experience gap between these widgets. When users add STAC data, they expect that it becomes a new layer and they'd want to use the controls available in the layers widget to customize the look and feel. By separating these widgets it can lead to some redundant requests for visualization features in both widgets.

Acceptance Criteria

• Refine aspects of the UI for the layers and STAC widgets so that data discovery can be separated from display, organization, and customization. (Design led)
• Create further development issues.

Task List (Based on Designs Below)

• Rename to Data to suggest it's the place to discover and add data (easy)
• Optional: Reposition button as first option to suggest a flow that starts by adding data (easy)
• Using ipywidget's accordion to house related actions so that users don't have to scroll so much. We want to keep the Create Layer (new) and Display buttons visible by default.
  • A Create Layer button that allows users to create a layer based on the data they are displaying. <- but for now just a single file so it's no different than the Display button.
  • The Query and Item accordion are much higher priority than Upload Custom Palette
• The last item (Overall changes to layers widget) is more challenging and has a lot of Nice to Haves, or Future scope but the basic layout is medium priority.
• Add the "Item" as a layer so it's opacity and visibility can be controlled.

[heidimok]

UI Update July 11, 2023:

• Have some initial designs to discuss! I created a Figma file to move away from the Miro for this release. I think it's a better tool moving forward for more flexibility. All the release 2 mockups will be in the same file but this is a direct link to the area of interest for this issue.
  
• Key changes proposed:
  • Layers widget - no major change. This is the home for all out-of-the-box layers and created layers. Users can select multiple layers across categories, including stac data layers.
  • STAC widget - I propose changing this to be more like an "Add Data" widget. It is the place to discover available and upload custom stac data. It is like the data “shopping cart” where users can display the data but they need to “Create Layer” in order to actually add stac item(s) to the layers widget.

[heidimok]

UI Update July 27, 2023:

• After meeting with @emmalu @sandrahoang686 @wildintellect, I'm showcasing the latest design mockups as reference. The mockup includes tweaks/changes that help portray direction. We agreed it doesn't need to be the perfect solution so treat this as our agreed general direction but the developer should be able to tweak things and get feedback from me or the team as we go.

Overall changes to the STAC widget

• Rename to Data to suggest it's the place to discover and add data
• Optional: Reposition button as first option to suggest a flow that starts by adding data
• Using ipywidget's accordion to house related actions so that users don't have to scroll so much. We want to keep the Create Layer (new) and Display buttons visible by default.
  • Note that we'll likely need to set a max height for the accordions with scrolling because there might be a lot of information.
• A Create Layer button that allows users to create a layer based on the data they are displaying. This should probably be addressed in another issue like Ability to visualize multiple STAC layers on a map as a mosaic #65
  Direct Figma Link to Frame

Collections Accordion

• Within the STAC widget, the only change is Ability to filter STAC data by COGs #66 that is played below the collection dropdown.
  Direct link to Figma

Query Accordion

• Below the Collections accordion, a query accordion that houses the date range information. We keep it generic so that in the future more queariable things can also be housed here, like cloud coverage, etc...
  Direct link to Figma

Items Accordion

• Below the Query accordion is the Items one. This shows all of the items that can be displayed on a map. It is multi-select to let users see how the items stitch together to form a whole map.
• Nice-to-have - text that shows how many items have been selected, and a clear selections button
• Out of scope - we will not address the issue of items that are already stitched together here, or may already be in the layers widget.
• Out of scope - the text search is a nice-to-have feature because there would be 4,000+ items. This issue will NOT deal with that functionality or trying to optimize the accordion for situations where there are too many items.
  Direct link to Figma

Color Palette Accordion

• The final accordion. No changes here.
• Nice-to-have The Upload Custom Palette will be complete in Ability to add custom color palettes  #68
  Direct link to Figma

Overall changes to layers widget

• Nice-to-have - text that shows how many items have been selected, and a clear selections button
• Reorganizing the Pre-Defined Layers (MAAP Biomass STAC) in the MAAP config file so that it presents as if it's a starter set. VEDA will have a different starter set.
  • Nice-to-have - providing a show more option because there might be a lot of layers
• Text section at bottom for Custom added layers that directs users to the data widget if they want to add more layers Want more data more layers? **Go to data**
• If a user creates a layer from the data widget, it gets added to this section using the same UI as the pre-defined layers (with the opacity functionality)
  Direct link to Figma