Data loading UX

[amaloney]

Is your feature request related to a problem? Please describe.

Loading data is challenging using the current pipeline. Right now the user is required to choose one of two different paths for loading data.

1. Select data from the MultiChoice element, or
2. select data to upload from the Drag & Drop element, using drag and drop or Browse.

Without knowing any better, I was inclined to first click the Load table(s) button to load data. This was the wrong move, and there is no indication in the UI that a user needs to first upload data and then click this button. Once I figured this out, I stopped trying to have the app load any data (as seen in the code snippet below).

Even after knowing that I should not load data in the app.py file, I still go to the MultiChoice element first, mostly because it is above the Drag & Drop element (as seen in the video).

data-upload.webm

After uploading the data, I am still drawn to the Load table(s) button, which is still not the correct button to push. The correct button is the green Use tables button. This is not intuitive because (being naive) I am not loading a table, I am loading data from a CSV file. The ? hover is not helpful here as it is mimicking the Table name label element. Thankfully I can push the Use tables button before clicking the Load table(s) button without a crash, and recover by first clicking Use tables then Load table(s).

After pushing the Use tables button, I can finally load data into the app using the Load table(s) button. This gives me the result of having data loaded.

Describe the solution you'd like

As a user, I want to be taken through a pipeline where my focus is only on uploading data and each step is in succession. This could be a modal that pops up based on me selecting an upload data button, or a different modal that takes me through auth for connecting to a database (remote or locally).

Describe alternatives you've considered

Alternatives include

1. file menu with options for a) upload b) connect to db 3) load from catalog (as specified in the app.py file.
2. no Load table(s) button, and automatic loading if it data exist in the MultiChoice element
3. moving the upload section to the same height as the MultiChoice input
4. single button that states Connect sources or Upload and a modal pops up

Additional context

The environment used for this example is given below, as well as the app.py file and how to download the data shown in the video.

# environment.yaml
name: lumen-ai
channels:
    - conda-forge
dependencies:
    - python >3.9,<3.13
    - pip
    - pip:
        - panel ==1.5.4
        - panel-graphic-walker[kernel]

Clone, install the environment, activate it, install other dependencies, download data, etc.

git clone https://github.com/holoviz/lumen
cd lumen
conda env create --file environment.yaml && conda activate lumen-ai
pip install --editable .[ai-llama,sql]
wget --output-file=earthquakes.csv "https://earthquake.usgs.gov/fdsnws/event/1/query?format=csv"

Use panel to serve the below app code.

panel serve app.py --show

# app.py
import lumen.ai as lmai
llm = lmai.llm.Llama()
# NOTE: not-a-file.csv does not exist.
lmai.ExplorerUI(["not-a-file.csv"], llm=llm, agents=[lmai.agents.VegaLiteAgent]).servable()

[philippjfr]

As an initial improvement I will disable the button unless you have selected table(s).

[ahuang11]

I tried restructuring the flow at #782 so it's more intuitive.