Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Obs ai assistant][ESQL] Visualizes a query #173076

Closed
wants to merge 13 commits into from

Conversation

stratoula
Copy link
Contributor

@stratoula stratoula commented Dec 11, 2023

Summary

This is a PoC, do not expect to be awesome :)

This PR

  1. Adds a new CTA (Visualize query) on the generated ES|QL queries
image
  1. Clicking the CTA, requests from Lens to suggest a chart based on the given query
image
  1. The embeddable has 2 actions:
  • Edit the embeddable
  • Save the embeddable on a dashboard
  1. Editing the embeddable opens a push flyout where the user can
  • Change the query
  • Change the chart configuration (colors, dimensions etc)
  • Click one of the chart suggestions

ai_assistant

  1. With clicking the apply button, the new chart configuration is saved to the conversation

  2. User can save the ES|QL chart on a dashboard. From there they can continue editing the chart (we also display the same inline editing flyout giving a seamless experience)

Discussion points:

  • When the ai assistant is being rendered as a flyout, the editing flyout doesn't render. This happens because it is a push flyout. If you open it as a regular flyout it will open but I dont like it, looks awful. Need to discuss with the designers team. For testing open it on the conversations view.

@stratoula stratoula changed the title [Obs ai assistant]['ESQL] Visualize a query [Obs ai assistant][ESQL] Visualize a query Dec 11, 2023
@@ -32,7 +32,6 @@ const containerClassName = css`
`;

const conversationListContainerName = css`
min-width: 250px;
Copy link
Contributor Author

@stratoula stratoula Dec 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trying to make it more responsive, otherwise the poor push flyout looks awful

export const visualizeESQLFunction = {
name: 'visualize_query',
description:
'Use this function to visualize charts for ES|QL queries. DO NOT run the lens function after.',
Copy link
Contributor Author

@stratoula stratoula Dec 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ I had to instruct it to not run the lens function after, not sure if this is the best way to do it but it worked

@stratoula stratoula changed the title [Obs ai assistant][ESQL] Visualize a query [Obs ai assistant][ESQL] Visualizes a query Dec 13, 2023
keptLayerIds: string[];
}

export const getLensAttributes = ({
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@stratoula reuse this is Lens

@stratoula
Copy link
Contributor Author

Half of this code has been merged (at the Visualizations side) and I decided to take a slightly different route so I am closing it in favor of this which is cleaner #174677 and in sync with the latest main.

@stratoula stratoula closed this Jan 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant