[VisBuilder] Fix filter and query bugs

In this PR:
add filter and query in vb
clean filterManager when start vb
add opensearch_dashboards_context to embeddable. This can add filter and query in the expression.

Issue Resolve
opensearch-project#5643
opensearch-project#5644
opensearch-project#5646
opensearch-project#6512

Signed-off-by: Anan Zhuang <[email protected]>

CHANGELOG.md

@@ -131,6 +131,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [BUG][Multiple Datasource] Modify the button of selectable component to fix the title overflow issue ([#6465](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6465))
 - [BUG][Multiple Datasource] Validation succeed as long as status code in response is 200 ([#6399](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6399))
 - [BUG][Multiple Datasource] Add validation for title length to be no longer than 32 characters [#6452](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6452))
+- [BUG][VisBuilder] Fix filter and query bugs ([#6460](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6460))
 
 ### 🚞 Infrastructure
 

src/plugins/vis_builder/public/application/utils/get_top_nav_config.test.tsx

@@ -95,7 +95,10 @@ describe('getOnSave', () => {
             },
           ],
         },
-        "searchSourceFields": Object {},
+        "searchSourceFields": Object {
+          "filter": null,
+          "query": null,
+        },
         "styleState": "",
         "title": "new title",
         "version": 0,

src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx

@@ -172,7 +172,7 @@ export const getOnSave = (
     returnToOrigin: boolean;
     newDescription?: string;
   }) => {
-    const { embeddable, toastNotifications, application, history } = services;
+    const { data, embeddable, toastNotifications, application, history } = services;
     const stateTransfer = embeddable.getStateTransfer();
 
     if (!savedVisBuilderVis) {
@@ -183,6 +183,10 @@ export const getOnSave = (
     savedVisBuilderVis.title = newTitle;
     savedVisBuilderVis.description = newDescription;
     savedVisBuilderVis.copyOnSave = newCopyOnSave;
+    const searchSourceInstance = savedVisBuilderVis.searchSourceFields;
+    searchSourceInstance.query = data.query.queryString.getQuery() || null;
+    searchSourceInstance.filter = data.query.filterManager.getFilters() || null;
+    savedVisBuilderVis.searchSourceFields = searchSourceInstance;
     const newlyCreated = !savedVisBuilderVis.id || savedVisBuilderVis.copyOnSave;
 
     try {

src/plugins/vis_builder/public/application/utils/use/use_saved_vis_builder_vis.ts

@@ -35,6 +35,7 @@ export const useSavedVisBuilderVis = (visualizationIdFromUrl: string | undefined
     const {
       application: { navigateToApp },
       chrome,
+      data,
       history,
       http: { basePath },
       toastNotifications,
@@ -61,6 +62,19 @@ export const useSavedVisBuilderVis = (visualizationIdFromUrl: string | undefined
           const { title, state } = getStateFromSavedObject(savedVisBuilderVis);
           chrome.setBreadcrumbs(getEditBreadcrumbs(title, navigateToApp));
           chrome.docTitle.change(title);
+          // sync initial app filters from savedObject to filterManager
+          const filters = savedVisBuilderVis.searchSourceFields.filter;
+          const query =
+            savedVisBuilderVis.searchSourceFields.query || data.query.queryString.getDefaultQuery();
+          const actualFilters = [];
+          if (filters !== undefined) {
+            const result = typeof filters === 'function' ? filters() : filters;
+            if (result !== undefined) {
+              actualFilters.push(...(Array.isArray(result) ? result : [result]));
+            }
+          }
+          data.query.filterManager.setAppFilters(actualFilters);
+          data.query.queryString.setQuery(query);
 
           dispatch(setUIStateState(state.ui));
           dispatch(setStyleState(state.style));

src/plugins/vis_builder/public/embeddable/vis_builder_embeddable.tsx

@@ -35,16 +35,18 @@ import {
   getTypeService,
   getUIActions,
 } from '../plugin_services';
-import { PersistedState } from '../../../visualizations/public';
+import { PersistedState, prepareJson } from '../../../visualizations/public';
 import { VisBuilderSavedVis } from '../saved_visualizations/transforms';
 import { handleVisEvent } from '../application/utils/handle_vis_event';
 import { VisBuilderEmbeddableFactoryDeps } from './vis_builder_embeddable_factory';
+import { VisBuilderSavedObject } from '../types';
 
 // Apparently this needs to match the saved object type for the clone and replace panel actions to work
 export const VISBUILDER_EMBEDDABLE = VISBUILDER_SAVED_OBJECT;
 
 export interface VisBuilderEmbeddableConfiguration {
   savedVis: VisBuilderSavedVis;
+  savedObject: VisBuilderSavedObject;
   indexPatterns?: IIndexPattern[];
   editPath: string;
   editUrl: string;
@@ -79,6 +81,7 @@ export class VisBuilderEmbeddable extends Embeddable<VisBuilderInput, VisBuilder
   private subscriptions: Subscription[] = [];
   private node?: HTMLElement;
   private savedVis?: VisBuilderSavedVis;
+  private savedObject?: VisBuilderSavedObject;
   private serializedState?: string;
   private uiState: PersistedState;
   private readonly deps: VisBuilderEmbeddableFactoryDeps;
@@ -87,6 +90,7 @@ export class VisBuilderEmbeddable extends Embeddable<VisBuilderInput, VisBuilder
     timefilter: TimefilterContract,
     {
       savedVis,
+      savedObject,
       editPath,
       editUrl,
       editable,
@@ -116,6 +120,7 @@ export class VisBuilderEmbeddable extends Embeddable<VisBuilderInput, VisBuilder
 
     this.deps = deps;
     this.savedVis = savedVis;
+    this.savedObject = savedObject;
     this.uiState = new PersistedState(savedVis.state.ui);
     this.uiState.on('change', this.uiStateChangeHandler);
     this.uiState.on('reload', this.reload);
@@ -246,6 +251,28 @@ export class VisBuilderEmbeddable extends Embeddable<VisBuilderInput, VisBuilder
     this.autoRefreshFetchSubscription.unsubscribe();
   }
 
+  private async updateExpression() {
+    // Construct the initial part of the pipeline with context management.
+    let pipeline = `opensearchDashboards | opensearch_dashboards_context `;
+
+    // Access the query and filters from savedObject if available.
+    const query = this.savedObject?.searchSourceFields?.query;
+    const filters = this.savedObject?.searchSourceFields?.filter;
+
+    // Append query and filters to the pipeline string if they exist.
+    if (query) {
+      pipeline += prepareJson('query', query);
+    }
+    if (filters) {
+      pipeline += prepareJson('filters', filters);
+    }
+
+    const currentExpression = (await this.getExpression()) ?? '';
+
+    // Replace 'opensearchDashboards' with the constructed pipeline in the existing expression.
+    return currentExpression.replace('opensearchDashboards', pipeline);
+  }
+
   private async updateHandler() {
     const expressionParams: IExpressionLoaderParams = {
       searchContext: {
@@ -261,6 +288,8 @@ export class VisBuilderEmbeddable extends Embeddable<VisBuilderInput, VisBuilder
     this.abortController = new AbortController();
     const abortController = this.abortController;
 
+    this.expression = await this.updateExpression();
+
     if (this.handler && !abortController.signal.aborted) {
       this.handler.update(this.expression, expressionParams);
     }
@@ -296,12 +325,8 @@ export class VisBuilderEmbeddable extends Embeddable<VisBuilderInput, VisBuilder
       dirty = true;
     }
 
-    if (dirty) {
-      this.expression = (await this.getExpression()) ?? '';
-
-      if (this.handler) {
-        this.updateHandler();
-      }
+    if (this.handler && dirty) {
+      this.updateHandler();
     }
   }
 

src/plugins/vis_builder/public/embeddable/vis_builder_embeddable_factory.tsx

@@ -97,6 +97,7 @@ export class VisBuilderEmbeddableFactory
         getTimeFilter(),
         {
           savedVis,
+          savedObject,
           editUrl,
           editPath,
           editable: true,

src/plugins/vis_builder/public/plugin.ts

@@ -125,6 +125,10 @@ export class VisBuilderPlugin
 
         // make sure the index pattern list is up to date
         pluginsStart.data.indexPatterns.clearCache();
+        // make sure the filterManager is refreshed
+        const filters = pluginsStart.data.query.filterManager.getFilters();
+        const pinFilters = filters.filter(opensearchFilters.isFilterPinned);
+        pluginsStart.data.query.filterManager.setFilters(pinFilters ? pinFilters : []);
         // make sure a default index pattern exists
         // if not, the page will be redirected to management and visualize won't be rendered
         // TODO: Add the redirect

src/plugins/visualizations/public/index.ts

@@ -77,3 +77,4 @@ export { ExprVisAPIEvents } from './expressions/vis';
 export { VisualizationListItem } from './vis_types/vis_type_alias_registry';
 export { VISUALIZE_ENABLE_LABS_SETTING } from '../common/constants';
 export { createSavedVisLoader } from './saved_visualizations';
+export { prepareJson } from './legacy/build_pipeline';