Add Assistant helper for creating JQ and JSONata parser (#1302)

Co-authored-by: Sriram <153843+yesoreyeram@users.noreply.github.com>

Author: ivanahuckova

.changeset/chilled-walls-know.md

@@ -0,0 +1,5 @@
+---
+'grafana-infinity-datasource': minor
+---
+
+Add Assistant helper for creating JQ and JSONata parser

.gitignore

@@ -15,6 +15,7 @@ e2e-results/
 logs
 mage_output_file.go
 node_modules/
+.yarn/install-state.gz
 npm-debug.log*
 pids
 provisioning/

.yarn/install-state.gz

@@ -52,6 +52,7 @@
   },
   "dependencies": {
     "@emotion/css": "11.10.6",
+    "@grafana/assistant": "^0.0.17",
     "@grafana/data": "^12.1.0",
     "@grafana/runtime": "^12.1.0",
     "@grafana/schema": "^12.1.0",

package.json

@@ -13,5 +13,5 @@ export const QueryEditor = (props: QueryEditorProps<Datasource, InfinityQuery>)
     ...DefaultInfinityQuery,
     global_query_id: getDefaultGlobalQueryID(datasource.instanceSettings),
   });
-  return <InfinityQueryEditor onChange={onChange} onRunQuery={onRunQuery} query={query} mode={'standard'} instanceSettings={datasource.instanceSettings} datasource={datasource} />;
+  return <InfinityQueryEditor onChange={onChange} onRunQuery={onRunQuery} query={query} mode={'standard'} instanceSettings={datasource.instanceSettings} datasource={datasource} data={props.data} />;
 };

src/editors/query.editor.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { OpenAssistantButton, createAssistantContextItem } from '@grafana/assistant';
+import type { PanelData } from '@grafana/data';
+import type { InfinityParserType } from '@/types';
+
+type RootSelectorAssistantProps = { parser?: InfinityParserType; datasourceUid?: string; panelData?: PanelData };
+
+export const RootSelectorAssistant = (props: RootSelectorAssistantProps) => {
+  const { panelData, datasourceUid, parser } = props;
+  if (!datasourceUid) {
+    return <></>;
+  }
+  if (parser !== 'backend' && parser !== 'jq-backend') {
+    return <></>;
+  }
+  const parserLang = parser === 'jq-backend' ? 'JQ' : 'JSONata';
+  return (
+    <OpenAssistantButton
+      title="Use Assistant to parse data"
+      origin="grafana-datasources/yesoreyeram-infinity-datasource/query-builder-parser"
+      size="sm"
+      prompt={`Create a ${parserLang} parser expression that extracts rows from provided data. The expression should work with the sample data provided in the context.`}
+      context={getChatContext(datasourceUid, parserLang, panelData)}
+    />
+  );
+};
+
+const getChatContext = (datasourceUid: string, parserLang: 'JQ' | 'JSONata', panelData?: PanelData) => {
+  const data = panelData?.series?.[0]?.meta?.custom?.data || [];
+  const stringifiedData = Array.isArray(data) ? JSON.stringify(data.slice(0, 5)) : JSON.stringify(data ?? '').slice(0, 1500); // We take first 5 items if it is array, or the first 1500 character
+  const basicRootSelector = parserLang === 'JQ' ? '.' : '$';
+  const instructions = `
+    - The data is provided in string format as a stringifiedData
+    - Analyze the data structure first: identify if it's an array of objects, nested objects, or mixed structure
+    - Use proper ${parserLang} syntax
+    - Use ${basicRootSelector} as a root selector
+    - If data has null/undefined values, handle them gracefully with null coalescing or default values
+    - Provide 3 different examples:
+      1. Basic extraction
+      2. Nested extraction
+      3. Filtered extraction
+    - Explain what each expression does`;
+  return [
+    createAssistantContextItem('datasource', { datasourceUid }),
+    createAssistantContextItem('structured', { title: 'Data', data: { stringifiedData } }),
+    createAssistantContextItem('structured', { hidden: true, title: 'Page-specific instructions', data: { instructions } }),
+  ];
+};

src/editors/query/components/RootSelectorAssistant.tsx

@@ -18,6 +18,7 @@ import { Datasource } from '@/datasource';
 import { PaginationEditor } from '@/editors/query/query.pagination';
 import { TransformationsEditor } from '@/editors/query/query.transformations';
 import { QueryWarning } from '@/editors/query/query.warning';
+import type { PanelData } from '@grafana/data';
 import type { EditorMode, InfinityQuery } from '@/types';
 
 export type InfinityEditorProps = {
@@ -27,10 +28,11 @@ export type InfinityEditorProps = {
   instanceSettings: any;
   mode: EditorMode;
   datasource: Datasource;
+  data?: PanelData;
 };
 
 export const InfinityQueryEditor = (props: InfinityEditorProps) => {
-  const { onChange, mode, instanceSettings, onRunQuery, datasource } = props;
+  const { onChange, mode, instanceSettings, onRunQuery, datasource, data } = props;
   const [showUrlOptions, setShowUrlOptions] = useState(false);
   const [showHelp, setShowHelp] = useState(false);
   let query: InfinityQuery = defaultsDeep(cloneDeep(props.query), DefaultInfinityQuery) as InfinityQuery;
@@ -76,7 +78,7 @@ export const InfinityQueryEditor = (props: InfinityEditorProps) => {
         {query.type === 'series' && <SeriesEditor {...{ query, onChange }} />}
         {isDataQuery(query) && query.source !== 'inline' && showUrlOptions && <URLEditor {...{ mode, query, onChange, onRunQuery }} />}
         {isDataQuery(query) && query.source === 'azure-blob' && <AzureBlobEditor query={query} onChange={onChange} />}
-        {canShowColumnsEditor && <QueryColumnsEditor {...{ mode, query, onChange, onRunQuery }} />}
+        {canShowColumnsEditor && <QueryColumnsEditor {...{ mode, query, onChange, onRunQuery, datasourceUid: datasource?.uid, data }} />}
         {canShowFilterEditor && <TableFilter {...{ query, onChange, onRunQuery }} />}
         {query.type === 'uql' && (
           <>

src/editors/query/infinityQuery.tsx

@@ -1,16 +1,18 @@
 import React, { useState } from 'react';
 import { Button, TextArea, Stack } from '@grafana/ui';
+import { PanelData } from '@grafana/data';
 import { EditorRow } from '@/components/extended/EditorRow';
 import { EditorField } from '@/components/extended/EditorField';
 import { isBackendQuery, isDataQuery } from '@/app/utils';
 import { QueryColumnItem } from '@/components/QueryColumnItem';
 import { JSONOptionsEditor } from '@/components/JSONOptionsEditor';
 import { CSVOptionsEditor } from '@/components/CSVOptionsEditor';
+import { RootSelectorAssistant } from '@/editors/query/components/RootSelectorAssistant';
 import { UQLEditor } from '@/editors/query/query.uql';
 import { GROQEditor } from '@/editors/query/query.groq';
 import type { InfinityColumn, InfinityQuery } from '@/types';
 
-export const QueryColumnsEditor = (props: { query: InfinityQuery; onChange: (value: any) => void; onRunQuery: () => void }) => {
+export const QueryColumnsEditor = (props: { query: InfinityQuery; onChange: (value: any) => void; onRunQuery: () => void; datasourceUid?: string; data?: PanelData }) => {
   const { query, onChange, onRunQuery } = props;
   if (!isDataQuery(query) && query.type !== 'google-sheets') {
     return <></>;
@@ -113,8 +115,8 @@ export const QueryColumnsEditor = (props: { query: InfinityQuery; onChange: (val
   );
 };
 
-const RootSelector = (props: { query: InfinityQuery; onChange: (value: any) => void; onRunQuery: () => void }) => {
-  const { query, onChange, onRunQuery } = props;
+const RootSelector = (props: { query: InfinityQuery; onChange: (value: any) => void; onRunQuery: () => void; datasourceUid?: string; data?: PanelData }) => {
+  const { query, onChange, onRunQuery, datasourceUid, data: panelData } = props;
   const [root_selector, setRootSelector] = useState(isDataQuery(query) ? query.root_selector || '' : '');
   if (!isDataQuery(query)) {
     return <></>;
@@ -125,15 +127,18 @@ const RootSelector = (props: { query: InfinityQuery; onChange: (value: any) => v
   };
   return ['html', 'json', 'xml', 'graphql'].indexOf(props.query.type) > -1 ? (
     <EditorField label="Rows/Root" optional={true}>
-      <TextArea
-        width={'300px'}
-        cols={50}
-        rows={isBackendQuery(query) ? 7 : 2}
-        value={root_selector}
-        placeholder={isBackendQuery(query) ? (query.parser === 'jq-backend' ? 'JQ / rows selector' : 'JSONata / rows selector') : 'rows / root selector (optional)'}
-        onChange={(e) => setRootSelector(e.currentTarget.value)}
-        onBlur={onRootSelectorChange}
-      />
+      <Stack direction="column" gap={2} alignItems="flex-start">
+        <TextArea
+          width={'300px'}
+          cols={50}
+          rows={isBackendQuery(query) ? 7 : 2}
+          value={root_selector}
+          placeholder={isBackendQuery(query) ? (query.parser === 'jq-backend' ? 'JQ / rows selector' : 'JSONata / rows selector') : 'rows / root selector (optional)'}
+          onChange={(e) => setRootSelector(e.currentTarget.value)}
+          onBlur={onRootSelectorChange}
+        />
+        <RootSelectorAssistant datasourceUid={datasourceUid} parser={query.parser} panelData={panelData} />
+      </Stack>
     </EditorField>
   ) : (
     <></>

src/editors/query/query.columns.editor.tsx

@@ -1344,6 +1344,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@grafana/assistant@npm:^0.0.17":
+  version: 0.0.17
+  resolution: "@grafana/assistant@npm:0.0.17"
+  peerDependencies:
+    "@grafana/data": ">=12.1.0"
+    "@grafana/runtime": ">=12.1.0"
+    "@grafana/scenes": ">=5.41.0"
+    "@grafana/ui": ">=12.1.0"
+    react: ">=18.0.0"
+    rxjs: ">=7.0.0"
+  checksum: 10c0/60cdf83b8a5ce9d1acb4e9df0917d2d87cc32a6faa9186e77c27e9fb7527c0f44b0d3917ee650263dcf7a417af493a2d2c9b96f97ef660dde1fc0d9095402c33
+  languageName: node
+  linkType: hard
+
 "@grafana/data@npm:12.1.0, @grafana/data@npm:^12.1.0":
   version: 12.1.0
   resolution: "@grafana/data@npm:12.1.0"
@@ -7280,6 +7294,7 @@ __metadata:
     "@changesets/cli": "npm:^2.26.1"
     "@changesets/types": "npm:^5.2.1"
     "@emotion/css": "npm:11.10.6"
+    "@grafana/assistant": "npm:^0.0.17"
     "@grafana/data": "npm:^12.1.0"
     "@grafana/eslint-config": "npm:^8.0.0"
     "@grafana/plugin-e2e": "npm:^2.1.7"