[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
#5643
#5644
#5646
#6512

Signed-off-by: Anan Zhuang <ananzh@amazon.com>

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;
@@ -246,6 +248,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.savedVis?.searchSourceFields?.query;
+    const filters = this.savedVis?.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 +285,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 +322,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/vis_builder/public/saved_visualizations/transforms.ts

@@ -35,12 +35,13 @@ export const saveStateToSavedObject = (
 export interface VisBuilderSavedVis
   extends Pick<VisBuilderSavedObjectAttributes, 'id' | 'title' | 'description'> {
   state: RenderState;
+  searchSourceFields: any;
 }
 
 export const getStateFromSavedObject = (
   obj: VisBuilderSavedObjectAttributes
 ): VisBuilderSavedVis => {
-  const { id, title, description } = obj;
+  const { id, title, description, searchSourceFields } = obj;
   const styleState = JSON.parse(obj.styleState || '{}');
   const uiState = JSON.parse(obj.uiState || '{}');
   const vizStateWithoutIndex = JSON.parse(obj.visualizationState || '');
@@ -74,6 +75,7 @@ export const getStateFromSavedObject = (
     id,
     title,
     description,
+    searchSourceFields,
     state: {
       visualization: visualizationState,
       style: styleState,

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';