Re: [D] 🔢 UI param: preserve array selection order [airflow]

["maxcorbeau (via GitHub)" <gi...@apache.org>]

GitHub user maxcorbeau edited a discussion: 🔢 UI param: preserve array selection order

# :1234: UI param: preserve array selection order

 - **:world_map: context**: this refers to [Params](https://airflow.apache.org/docs/apache-airflow/stable/core-concepts/params.html#params), in particular the `array` type which provides a combobox on the UI
 - **:bulb: what**: change UI behaviour of the `array` param so selection order is preserved
 - **:dart: why**: so the `array` param can be used to define orders of priorities/preferences in data pipelines (ex: pick this data/model if available, else this one, else ...)
 - **:building_construction: how**: add a bit of custom JS on the airflow side ([example](https://stackoverflow.com/questions/48687406/how-can-i-prevent-automatic-selection-order-of-select2))

## :test_tube: Contribution

Happy to submit PR, I first want to assess if there is interest from community to see this through

## :mag_right: Current behaviour

 - **:red_circle: selection order is overwritten to follow that of the `examples` list**, thus making it impossible to use the `array` param to define priorities/preferences
 - That is because Airflow uses [select2](https://select2.org/) for that part of the UI
   <details>
           <img src="https://github.com/user-attachments/assets/b317c17c-b78c-4288-b705-1b944dcf796f"/>
   </details>
 - and **overwriting selection order is select2 's default behaviour**
 
### :scroll: Steps to reproduce

#### With select2

 - Go to https://select2.org/getting-started/basic-usage#multi-select-boxes-pillbox
 - Select `California` => placed 1st, because only selected option
 - Select `Alaska` => placed 1st replacing California, because Alaska is defined before California in options
 - Select `Hawai` => placed 2nd replacing California, because Hawai defined before California in options
 - Your final order is `Alaska, Hawai, California` as per options and not `California, Alaska, Hawai` as per selection
   <details>
           <img src="https://github.com/user-attachments/assets/b444fb50-9904-4042-b414-201696e1a4f1"/>
   </details>

#### With Airflow

You can play around with the below dag's config UI, if you select multiple options, no matter in which order, they will always be reordered to match order of `COMBOBOX_FIELDS`

```python
from airflow.decorators import dag, task
from airflow.utils.dates import days_ago
from airflow.models.param import Param

COMBOBOX_FIELDS = [
    "foo (defined 1st)",
    "bar (defined 2nd)",
    "other (defined 3rd)",
]


@dag(
    dag_id="test_ui_combobox_issue",
    schedule=None,
    start_date=days_ago(1),
    catchup=False,
    params={
        "test_combobox": Param(
            [],
            type=["array"],
            examples=COMBOBOX_FIELDS,
        ),
    },
)
def my_dag():
    @task
    def print_params(**kwargs):
        print(kwargs["params"])

    print_params()


my_dag()
```


GitHub link: https://github.com/apache/airflow/discussions/46475

----
This is an automatically sent email for commits@airflow.apache.org.
To unsubscribe, please send an email to: commits-unsubscribe@airflow.apache.org