[DataGridPremium] Prompt input control #15401

arminmeh · 2024-11-13T13:36:17Z

Todo:

Add mock prompt resolver to support couple of predefined prompts
- Add more mock prompts
Extend docs
- Add integration section covering the steps needed to get the key and set up proxy for the prompt processing API
Fix: Prompt not working properly with the grid having server-side data

Follow up issue

Preview: https://deploy-preview-15401--material-ui-x.netlify.app/x/react-data-grid/prompt/

mui-bot · 2024-11-13T13:40:46Z

Localization writing tips ✍️

Seems you are updating localization 🌍 files.

Thank you for contributing to the localization! 🎉 To make your PR perfect, here is a list of elements to check: ✔️

Verify if the PR title respects the release format. Here are two examples (depending if you update or add a locale file)

[l10n] Improve Swedish (sv-SE) locale
[l10n] Add Danish (da-DK) locale
Update the documentation of supported locales by running pnpm l10n
Clean files with pnpm prettier.

Deploy preview: https://deploy-preview-15401--material-ui-x.netlify.app/

Updated pages:

docs/data/data-grid/prompt/prompt.md

Generated by 🚫 dangerJS against 45b5ea9

oliviertassinari

A quick look

packages/x-data-grid/src/models/colDef/gridColDef.ts

packages/x-data-grid/src/constants/gridClasses.ts

packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx

docs/data/data-grid/prompt/prompt.md

packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx

packages/x-data-grid-premium/src/components/promptControl/RecordButton.tsx

packages/x-data-grid-premium/src/hooks/features/promptControl/api.ts

packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx

github-actions · 2024-11-14T08:30:41Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2024-11-15T17:50:25Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

docs/data/data-grid/prompt/PromptWithExamples.js

packages/x-data-grid-generator/src/services/prompt-resolver.ts

docs/data/data-grid/prompt/PromptWithExamples.tsx

packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx

cherniavskii · 2024-11-20T10:40:40Z

packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx

+    allowedOperators: column.filterOperators?.map((operator) => operator.value) ?? [],
+  }));
+
+  return `${apiRef.current.getLocaleText('toolbarPromptControlColumnsContextIntro')}\n${JSON.stringify(columnsContext)}`;


Why use a locale text here?

This is a static text providing some context for the columns. I was thinking that, in case someone uses a model in another language, they will need a different string here.
This is the english string used here
The columns are described by the following JSON:

Right, I wonder if the language matters in this context 🤔
@romgrk What do you think?

After checking this, I see that this part ends up as a system input in our backend which is in english.
I will do some testing to see if the languages can be mixed. For now, this string will not be translatable

packages/x-data-grid-premium/src/components/promptControl/RecordButton.tsx

docs/data/data-grid/prompt/PromptWithDataSource.js

cherniavskii · 2024-11-20T17:18:39Z

docs/data/data-grid/prompt/PromptWithDataSource.js

+    <Stack flex={1} gap={0.5} sx={{ px: 0.5 }}>
+      <GridToolbar />
+      <Box sx={{ px: 0.5 }}>
+        <GridToolbarPromptControl onPrompt={mockPromptResolver} allowDataSampling />


Looks like we need a special prompt resolver mock for this demo

I have updated mock server to return the same data set as in the other examples
But there is another issue that we have to resolve

once the prompt response is there it triggers couple of updates at once, which triggers a couple of events
data source reacts to all of them separately, so it makes a few requests at once and the last response may not be the last update

Isn't this the same issue as #13878 (comment) ?

yes, but apart from addressing the race condition I have added a point to support handling all of the prompt response changes with one additional request

packages/x-data-grid-premium/src/components/promptControl/RecordButton.tsx

docs/data/data-grid/prompt/prompt.md

MBilalShafi

Great work 👏
I added a few minor comments/suggestions, apart from that it LGTM.

docs/data/data-grid/prompt/PromptWithExamples.tsx

MBilalShafi · 2024-11-21T05:49:46Z

docs/data/data-grid/prompt/PromptWithExamples.tsx

+  GridToolbar,
+} from '@mui/x-data-grid-premium';
+import {
+  mockPromptResolver,


In context to the discoverability issue people face with the utilities hidden behind a package, would it be feasible to make mockPromptResolver part of each demo instead?

I am not sure how much of a difference it would make, since you don't have to change/extend anything from it

Since the users have to implement their own function similar to this, having the code readily available will give them an idea how it works. We could handle it as a follow-up too.

docs/data/data-grid/prompt/PromptWithExamples.tsx

packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx

MBilalShafi · 2024-11-21T06:11:17Z

packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx

+        const interestColumns = [] as string[];
+
+        apiRef.current.setFilterModel({
+          items: result.filters.map((filter, index) => {


How about expecting the same naming and structure in result.x as the respective state model.
For example result.filterModel instead of result.filters?

Or the aim is to be generic here?

packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx

MBilalShafi · 2024-11-21T06:42:25Z

packages/x-data-grid-premium/src/hooks/features/promptControl/types.ts

+
+export type PromptResponse = {
+  select: number;
+  filters: Filter[];


I'm wondering if we keep it aligned with GridFilterModel to keep the possibilities such as the following open:

// Search all the data for a text containing "John" or "Abraham" filterModel = { items: [], quickFilterLogicOperator: GridLogicOperator.Or, quickFilterValues: ["John", "Abraham"], }

Suggested change

filters: Filter[];

filterModel: GridFilterModel;

May apply to other models similarly too. Wdyt?

MBilalShafi · 2024-11-21T06:45:24Z

packages/x-data-grid-premium/src/hooks/features/promptControl/types.ts

+  aggregation: Aggregation;
+  sorting: Sort[];
+  grouping: Grouping[];
+  error: string | null;


It is meant to show a custom error below the prompt input field, right?

Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com> Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>

Co-authored-by: Bilal Shafi <bilalshafidev@gmail.com> Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>

…supported

arminmeh · 2024-11-22T08:19:23Z

Merging this for the next alpha release
All remaining points will be covered in a follow-up issue: #15548.

Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com> Co-authored-by: Rom Grk <romgrk.cc@gmail.com> Co-authored-by: Kenan Yusuf <kenan.m.yusuf@gmail.com> Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com> Co-authored-by: Bilal Shafi <bilalshafidev@gmail.com>

arminmeh added the component: data grid This is the name of the generic UI component, not the React module! label Nov 13, 2024

oliviertassinari reviewed Nov 13, 2024

View reviewed changes

packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx Outdated Show resolved Hide resolved

packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx Show resolved Hide resolved

oliviertassinari added the plan: Premium Impact at least one Premium user label Nov 13, 2024

arminmeh requested a review from a team November 13, 2024 15:57

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 14, 2024

arminmeh force-pushed the feat-remote-control branch from 2044401 to 7398b1d Compare November 14, 2024 08:54

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Nov 14, 2024

cherniavskii self-requested a review November 18, 2024 13:10

cherniavskii reviewed Nov 18, 2024

View reviewed changes

docs/data/data-grid/prompt/PromptWithExamples.js Outdated Show resolved Hide resolved

packages/x-data-grid-generator/src/services/prompt-resolver.ts Outdated Show resolved Hide resolved

KenanYusuf reviewed Nov 19, 2024

View reviewed changes

docs/data/data-grid/prompt/PromptWithExamples.tsx Outdated Show resolved Hide resolved

arminmeh force-pushed the feat-remote-control branch from 0151c49 to 892e9b3 Compare November 20, 2024 08:45

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 20, 2024

arminmeh requested review from cherniavskii and KenanYusuf November 20, 2024 10:14

cherniavskii reviewed Nov 20, 2024

View reviewed changes

arminmeh force-pushed the feat-remote-control branch from 83ee52d to 1fe6121 Compare November 20, 2024 14:56

cherniavskii reviewed Nov 20, 2024

View reviewed changes

packages/x-data-grid-premium/src/components/promptControl/RecordButton.tsx Show resolved Hide resolved

cherniavskii approved these changes Nov 20, 2024

View reviewed changes

MBilalShafi reviewed Nov 21, 2024

View reviewed changes

docs/data/data-grid/prompt/prompt.md Outdated Show resolved Hide resolved

docs/data/data-grid/prompt/prompt.md Outdated Show resolved Hide resolved

docs/data/data-grid/prompt/prompt.md Outdated Show resolved Hide resolved

docs/data/data-grid/prompt/prompt.md Outdated Show resolved Hide resolved

MBilalShafi approved these changes Nov 21, 2024

View reviewed changes

arminmeh force-pushed the feat-remote-control branch 2 times, most recently from 9f62076 to 2cc82fc Compare November 21, 2024 10:45

KenanYusuf approved these changes Nov 21, 2024

View reviewed changes

arminmeh mentioned this pull request Nov 21, 2024

[data grid] Prompt control improvements #15548

Open

10 tasks

arminmeh and others added 23 commits November 22, 2024 08:58

More label and var names updates

6b1072f

Add more mocked prompts

5798d46

MD lint

26e4fbc

prefix with unstable all new public api

554962d

Use internal icons and add slots

e7c2cf2

Update lang prop description and default to the speech api default

b65558a

lint

049a6af

Docs fix

5d4af91

Improve mock prompt processor query match

34364eb

Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com> Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>

Update key count

39a486c

Address PR comments

85d4730

Fix lint

c388827

Address PR comments

bbc8d6b

Update docs. Add server-side data example (currently not working)

6928ca5

Update locale keys

b4eda31

Update grid toolbar styles

2f24d7e

Improved error handling

8d3cba3

Update doc page

937fb91

Co-authored-by: Bilal Shafi <bilalshafidev@gmail.com> Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>

Fix data source example data

79a7e96

Use slot for the InputAdornment

a9f0068

Fix prompt mock

b6b795e

Use API for setting the loading state on the grid

df05425

Skip rendering the whole startAdornment if speech recognition is not …

45b5ea9

…supported

arminmeh force-pushed the feat-remote-control branch from 2cc82fc to 45b5ea9 Compare November 22, 2024 08:18

arminmeh enabled auto-merge (squash) November 22, 2024 08:19

arminmeh merged commit 914e87b into mui:master Nov 22, 2024
16 checks passed

oliviertassinari mentioned this pull request Nov 23, 2024

[core] Remove dead translation key #15566

Merged

arminmeh mentioned this pull request Dec 5, 2024

[docs] Use updateRows method for list view demos #15732

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGridPremium] Prompt input control #15401

[DataGridPremium] Prompt input control #15401

arminmeh commented Nov 13, 2024 •

edited

Loading

mui-bot commented Nov 13, 2024 •

edited

Loading

oliviertassinari left a comment

github-actions bot commented Nov 14, 2024

github-actions bot commented Nov 15, 2024

cherniavskii Nov 20, 2024

arminmeh Nov 20, 2024

cherniavskii Nov 20, 2024

arminmeh Nov 20, 2024

cherniavskii Nov 20, 2024

arminmeh Nov 21, 2024

cherniavskii Nov 21, 2024

arminmeh Nov 21, 2024

MBilalShafi left a comment

MBilalShafi Nov 21, 2024 •

edited

Loading

arminmeh Nov 21, 2024

MBilalShafi Nov 21, 2024

MBilalShafi Nov 21, 2024

MBilalShafi Nov 21, 2024 •

edited

Loading

MBilalShafi Nov 21, 2024

arminmeh commented Nov 22, 2024 •

edited by oliviertassinari

Loading

[DataGridPremium] Prompt input control #15401

[DataGridPremium] Prompt input control #15401

Conversation

arminmeh commented Nov 13, 2024 • edited Loading

mui-bot commented Nov 13, 2024 • edited Loading

Localization writing tips ✍️

oliviertassinari left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 14, 2024

github-actions bot commented Nov 15, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MBilalShafi left a comment

Choose a reason for hiding this comment

MBilalShafi Nov 21, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MBilalShafi Nov 21, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arminmeh commented Nov 22, 2024 • edited by oliviertassinari Loading

arminmeh commented Nov 13, 2024 •

edited

Loading

mui-bot commented Nov 13, 2024 •

edited

Loading

MBilalShafi Nov 21, 2024 •

edited

Loading

MBilalShafi Nov 21, 2024 •

edited

Loading

arminmeh commented Nov 22, 2024 •

edited by oliviertassinari

Loading