[Design] NLP to SQL Notebook Cell

[ehynd]

Problem (Why)

We want to add a cell type to the notebook where the user can select a frame and model. Then, they will type their command in natural language into the cell. When the cell is run, the NLP will be turned to SQL which will then return a table of the data.

Requirements (What)

What are more specific requirements that needs to take to consider this issue resolved.

• Add new cell type: NLP to SQL
• Selection for Model
• Selection for Database
• Ability to rename frame
• There should not be any sort of execute/run button. When the cell is run as all cells normally are, the command will execute.

[bfekadu21]

@MohammadmansoorUX
Here are some additional insights to get you started. This ticket isn't a huge design lift but heres how you can think about it:

Step 1: Add an option for NLP to SQL in the on hover menu
Step 2: The user should be able to add natural language in the input field for example, "Show me people over the age of 50"
Step 3: After running, the result below similar to this screenshot should display a table with people over the age of 50
Step 4: Include the drop down for the database (where it currently says diabetes) and keep the ability to rename the frame

You can work on this in this section: https://www.figma.com/design/Qj4tWPsniFOJ6qSLfxOaBT/Drag-And-Drop---Design?node-id=16959-225935&t=L8pm0tBig1Cdm1bR-4

[MohammadmansoorUX]

As per the above requirements I have designed few screens.

1. Added NLP to SQL while hover.
2. Given options to select Frame and Model.
3. Added natural language in the input field for example, "Show me people over the age of 50".
4. Added Table screenshot once user Run the query.

Figma screens can be found in section "NLP to SQL (Add to Notebook Cell)"
https://www.figma.com/design/Qj4tWPsniFOJ6qSLfxOaBT/Drag-And-Drop---Design?node-id=16959-225935&t=EZVB6B1OIksnHp75-1

Screenshots:

[MohammadmansoorUX]

@bfekadu21 @ehynd

As we discussed in yesterday's UX call (June 10, 2025). To differentiate the NLP input field from the regular Query field, I used color and stroke, and also increased the height of the input box.

Figma screens can be found in section "NLP to SQL (Add to Notebook Cell)"

https://www.figma.com/design/Qj4tWPsniFOJ6qSLfxOaBT/Drag-And-Drop---Design?node-id=16959-225935&t=EKgj1gDVub4daBV7-1

[bfekadu21]

@MohammadmansoorUX Added feedback in Figma, please review.

[MohammadmansoorUX]

@ehynd and @bfekadu21 Based on the comments I changed "NLP to SQL" to "Text to SQL" and I also changed the icon for "Text To SQL" and to differentiate between SQL Query field and Text to SQL filed I given BG color and Stoke .

Figma screens can be found in section "NLP to SQL (Add to Notebook Cell)" https://www.figma.com/design/Qj4tWPsniFOJ6qSLfxOaBT/Drag-And-Drop---Design?node-id=16959-225935&t=HIDac6uKzn2aULyn-1

[MohammadmansoorUX]

@bfekadu21 Based on yesterday UX review I have created one more variation for "Text to SQL" field and I also added field to show SQL Query.

Figma screens can be found in section "NLP to SQL (Add to Notebook Cell)"

https://www.figma.com/design/Qj4tWPsniFOJ6qSLfxOaBT/Drag-And-Drop---Design?node-id=16959-225935&t=HIDac6uKzn2aULyn-1