conda-incubator / conda-store-ui

conda-store-ui is a frontend for conda-store powered by react
https://conda-incubator.github.io/conda-store-ui/
BSD 3-Clause "New" or "Revised" License
13 stars 18 forks source link

[ENH] - GUI Environment Editor version constraints widget doesn't allow reasonable MatchSpec choices and can't display many common constraints #376

Open dharhas opened 4 months ago

dharhas commented 4 months ago

Feature description

Currently the GUI cannot create or display many common version constraints that are commonly used to build actual environments. This means that in practice using conda-store in all but the simplest cases requires abandoning the GUI and only using the yaml editor.

The GUI widget on allows the an operator from the set of [=, >, <, >=, <=] combined with an exact version number. This is insufficient for many use cases.

image

A related issue is that version constraints that are entered in the yaml editor that are not possible in the GUI widget are not displayed (See https://github.com/conda-incubator/conda-store-ui/issues/249)

i.e. setting pandas=2.2 is a short form for the latest version of the pandas 2.2.x series

image

this is not displayed in the GUI

image

Common constraints

The full set of matchspec options is likely too complex to be captured in a GUI widget.

Originally, I had proposed that we would have a version constraint builder widget that would populate a textbox that could also be edited manually. i.e. common use cases could be handled by the widget but you would have the ability to manually type more complex constraints.

Value and/or benefit

Anything else?

No response

smeragoel commented 3 months ago

@pavithraes had some thoughts on having some constraints so that the user selects the exact version. She's on PTO right now, so she can add her thoughts once she gets back. Meanwhile, I'm gonna design a "version constraint builder". I am planning to use a combination of dropdown and free form input to provide the user with the version suggestions while still giving them the flexibility of inputting via keyboard.

smeragoel commented 3 months ago

Here are some draft designs:

  1. Firstly, the default environment page: image

  2. Then we have the edit page, which is where we have the changes: image

Here's a closer look at the component:

image I am using the MUI autocomplete component, which allows the user to add free form input, while also providing suggested/matching values.

We can also add more values to provide more flexibility with matching conditions:

image

And here's a quick video of the interaction (this is the create environment screen): https://www.loom.com/share/3d3291fc418b4f44b2c84d3d304ccfab?sid=ba91af01-0405-464e-a23b-0bdebe61fcb6