🔢 UI param: preserve array selection order

[maxcorbeau]

🔢 UI param: preserve array selection order

• 🗺️ context: this refers to Params, in particular the array type which provides a combobox on the UI
• 💡 what: change UI behaviour of the array param so selection order is preserved
• 🎯 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 ...)
• 🏗️ how: add a bit of custom JS on the airflow side (example)

🧪 Contribution

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

🔎 Current behaviour

• 🔴 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 for that part of the UI
  
• and overwriting selection order is select2 's default behaviour

📜 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
  

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

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()

[potiuk]

UI for airflow 3 is being completely rewritten. I suggest you check how it works there (you can follow contributing guidelines and check out main version) - and if you want to contribute there - feel free. But the old UI in Airflow 2 is not likely to get any fixes.

[maxcorbeau]

Thanks @potiuk for the quick reply: understood & makes sense. Where is "there" in "if you want to contribute there" ? My understanding is that it will still be on https://github.com/apache/airflow but under v3 branches correct?

[potiuk]

No. In main. See https://github.com/apache/airflow/blob/main/dev/README_AIRFLOW3_DEV.md for details