diff --git a/common/index.ts b/common/index.ts
index a670499d..5260db3b 100644
--- a/common/index.ts
+++ b/common/index.ts
@@ -14,3 +14,7 @@ export enum ServiceEndpoints {
 }
 
 export const SEARCH_API = '/_search';
+
+//Query1 for the left search and Query2 for the right search page
+export const QUERY_NUMBER_ONE = '1';
+export const QUERY_NUMBER_TWO = '2';
diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
index ec878b3a..8dcc712c 100644
--- a/opensearch_dashboards.json
+++ b/opensearch_dashboards.json
@@ -6,5 +6,6 @@
   "ui": true,
   "requiredPlugins": [
     "navigation"
-  ]
+  ],
+  "optionalPlugins": ["dataSource","dataSourceManagement"]
 }
\ No newline at end of file
diff --git a/public/application.tsx b/public/application.tsx
index deec7abf..51be4f7e 100644
--- a/public/application.tsx
+++ b/public/application.tsx
@@ -6,13 +6,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { AppMountParameters, CoreStart } from '../../../src/core/public';
-import { AppPluginStartDependencies } from './types';
+import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public';
 import { SearchRelevanceApp } from './components/app';
+import { AppPluginStartDependencies } from './types';
 
 export const renderApp = (
-  { notifications, http, chrome }: CoreStart,
-  { navigation }: AppPluginStartDependencies,
-  { element }: AppMountParameters
+  { notifications, http, chrome, savedObjects }: CoreStart,
+  { navigation, dataSource }: AppPluginStartDependencies,
+  { element, setHeaderActionMenu }: AppMountParameters,
+  dataSourceManagement: DataSourceManagementPluginSetup
 ) => {
   ReactDOM.render(
     <SearchRelevanceApp
@@ -20,6 +22,10 @@ export const renderApp = (
       http={http}
       navigation={navigation}
       chrome={chrome}
+      savedObjects={savedObjects}
+      dataSourceEnabled={!!dataSource}
+      setActionMenu={setHeaderActionMenu}
+      dataSourceManagement={dataSourceManagement}
     />,
     element
   );
diff --git a/public/components/app.tsx b/public/components/app.tsx
index 3d91dda9..469d9b19 100644
--- a/public/components/app.tsx
+++ b/public/components/app.tsx
@@ -3,22 +3,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import { EuiGlobalToastList } from '@elastic/eui';
 import { I18nProvider } from '@osd/i18n/react';
+import React, { useState } from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
-import { useState } from 'react';
-import { EuiGlobalToastList } from '@elastic/eui';
-import { CoreStart, Toast } from '../../../../src/core/public';
+import { CoreStart, MountPoint, Toast } from '../../../../src/core/public';
+import { DataSourceManagementPluginSetup } from '../../../../src/plugins/data_source_management/public';
 import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
-import { Home as QueryCompareHome } from './query_compare/home';
 import { PLUGIN_NAME } from '../../common';
 import { SearchRelevanceContextProvider } from '../contexts';
+import { Home as QueryCompareHome } from './query_compare/home';
 
 interface SearchRelevanceAppDeps {
   notifications: CoreStart['notifications'];
   http: CoreStart['http'];
   navigation: NavigationPublicPluginStart;
   chrome: CoreStart['chrome'];
+  savedObjects: CoreStart['savedObjects'];
+  dataSourceEnabled: boolean;
+  dataSourceManagement: DataSourceManagementPluginSetup;
+  setActionMenu: (menuMount: MountPoint | undefined) => void;
 }
 
 export const SearchRelevanceApp = ({
@@ -26,6 +30,10 @@ export const SearchRelevanceApp = ({
   http,
   navigation,
   chrome,
+  savedObjects,
+  dataSourceEnabled,
+  setActionMenu,
+  dataSourceManagement,
 }: SearchRelevanceAppDeps) => {
   const [toasts, setToasts] = useState<Toast[]>([]);
   const [toastRightSide, setToastRightSide] = useState<boolean>(true);
@@ -64,6 +72,10 @@ export const SearchRelevanceApp = ({
                       setBreadcrumbs={chrome.setBreadcrumbs}
                       setToast={setToast}
                       chrome={chrome}
+                      savedObjects={savedObjects}
+                      dataSourceEnabled={dataSourceEnabled}
+                      dataSourceManagement={dataSourceManagement}
+                      setActionMenu={setActionMenu}
                     />
                   );
                 }}
diff --git a/public/components/query_compare/home.tsx b/public/components/query_compare/home.tsx
index 0ef866c0..55c65135 100644
--- a/public/components/query_compare/home.tsx
+++ b/public/components/query_compare/home.tsx
@@ -3,27 +3,33 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { ChromeBreadcrumb, CoreStart, MountPoint, NotificationsStart } from '../../../../../src/core/public';
+import { DataSourceAggregatedViewConfig, DataSourceManagementPluginSetup } from '../../../../../src/plugins/data_source_management/public';
 import { NavigationPublicPluginStart } from '../../../../../src/plugins/navigation/public';
-import { CoreStart, ChromeBreadcrumb } from '../../../../../src/core/public';
+import { QUERY_NUMBER_ONE, QUERY_NUMBER_TWO, ServiceEndpoints } from '../../../common';
 import '../../ace-themes/sql_console';
-import { CreateIndex } from './create_index';
-import { SearchResult } from './search_result';
 import { useSearchRelevanceContext } from '../../contexts';
 import { DocumentsIndex } from '../../types/index';
-import { ServiceEndpoints } from '../../../common';
 import { Flyout } from '../common/flyout';
+import { CreateIndex } from './create_index';
+import { SearchResult } from './search_result';
 
+import { DataSourceOption } from '../../../../../src/plugins/data_source_management/public/components/data_source_selector/data_source_selector';
 import './home.scss';
 
 interface QueryExplorerProps {
   parentBreadCrumbs: ChromeBreadcrumb[];
-  notifications: CoreStart['notifications'];
+  notifications: NotificationsStart;
   http: CoreStart['http'];
   navigation: NavigationPublicPluginStart;
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
   setToast: (title: string, color?: string, text?: any, side?: string) => void;
   chrome: CoreStart['chrome'];
+  savedObjects: CoreStart['savedObjects'];
+  dataSourceEnabled: boolean
+  dataSourceManagement: DataSourceManagementPluginSetup;
+  setActionMenu: (menuMount: MountPoint | undefined) => void;
 }
 export const Home = ({
   parentBreadCrumbs,
@@ -33,33 +39,136 @@ export const Home = ({
   setBreadcrumbs,
   setToast,
   chrome,
+  savedObjects,
+  dataSourceEnabled,
+  dataSourceManagement,
+  setActionMenu,
 }: QueryExplorerProps) => {
   const {
-    documentsIndexes,
-    setDocumentsIndexes,
-    pipelines,
-    setPipelines,
     showFlyout,
+    documentsIndexes1,
+    documentsIndexes2,
+    setDocumentsIndexes1,
+    setDocumentsIndexes2,
+    datasource1,
+    datasource2,
+    setFetchedPipelines1,
+    setFetchedPipelines2,
   } = useSearchRelevanceContext();
 
   useEffect(() => {
     setBreadcrumbs([...parentBreadCrumbs]);
   }, [setBreadcrumbs, parentBreadCrumbs]);
+  const [dataSourceOptions, setDataSourceOptions] = useState<DataSourceOption[]>([]);
+  const fetchIndexes = (dataConnectionId: string, queryNumber: string) => {
+    if(dataConnectionId){
+      http.get(`${ServiceEndpoints.GetIndexes}/${dataConnectionId}`).then((res: DocumentsIndex[]) => {
+            if(queryNumber == QUERY_NUMBER_ONE){
+              setDocumentsIndexes1(res)
+            }
+            else{
+              setDocumentsIndexes2(res)
+            }
+          }).catch((err) => {
+            if(queryNumber === QUERY_NUMBER_ONE){
+              setDocumentsIndexes1([])
+            }
+            else{
+              setDocumentsIndexes2([])
+            }
+            console.log(err)
+          });
+    }
+    else{
+      http.get(ServiceEndpoints.GetIndexes).then((res: DocumentsIndex[]) => {
+        if(queryNumber == QUERY_NUMBER_ONE){
+          setDocumentsIndexes1(res)
+        }
+        else{
+          setDocumentsIndexes2(res)
+        }
+      }).catch((err) => {
+        if(queryNumber === QUERY_NUMBER_ONE){
+          setDocumentsIndexes1([])
+        }
+        else{
+          setDocumentsIndexes2([])
+        }
+        console.log(err)
+      });
+    }
+  }
+  const fetchPipelines = (dataConnectionId: string, queryNumber: string) => {
+      if(dataConnectionId){
+        http.get(`${ServiceEndpoints.GetPipelines}/${dataConnectionId}`).then((res: {}) => {
+          if(queryNumber === QUERY_NUMBER_ONE){
+            console.log(res)
+            setFetchedPipelines1(res)
+          }
+          else{
+            setFetchedPipelines2(res)
+          }
+        }).catch((err) => {
+          if(queryNumber === QUERY_NUMBER_ONE){
+            setFetchedPipelines1('')
+          }
+          else{
+            setFetchedPipelines2('')
+          }
+          console.log(err)
+        });
+      }
+      else{
+        http.get(ServiceEndpoints.GetPipelines).then((res: {}) => {
+          if(queryNumber === QUERY_NUMBER_ONE){
+            console.log(res)
+            setFetchedPipelines1(res)
+          }
+          else{
+            setFetchedPipelines2(res)
+          }
+        }).catch((err) => {
+          if(queryNumber === QUERY_NUMBER_ONE){
+            setFetchedPipelines1('')
+          }
+          else{
+            setFetchedPipelines2('')
+          }
+          console.log(err)
+        });
+      }
+  }
 
+  const DataSourceMenu = dataSourceManagement.ui.getDataSourceMenu<DataSourceAggregatedViewConfig>();
   // Get Indexes and Pipelines
   useEffect(() => {
-    http.get(ServiceEndpoints.GetIndexes).then((res: DocumentsIndex[]) => {
-      setDocumentsIndexes(res);
-    });
 
-    http.get(ServiceEndpoints.GetPipelines).then((res: {}) => {
-      setPipelines(res);
-    });
-  }, [http, setDocumentsIndexes, setPipelines]);
+    fetchIndexes(datasource1,QUERY_NUMBER_ONE)
+    fetchIndexes(datasource2,QUERY_NUMBER_TWO)
+    fetchPipelines(datasource1,QUERY_NUMBER_ONE)
+    fetchPipelines(datasource2,QUERY_NUMBER_TWO)
+    
+  }, [http, setDocumentsIndexes1, setDocumentsIndexes2, setFetchedPipelines1, setFetchedPipelines2, datasource1, datasource2]);
+
+  const dataSourceMenuComponent = useMemo(() => {
+    return (
+      <DataSourceMenu
+        setMenuMountPoint={setActionMenu}
+        componentType={'DataSourceAggregatedView'}
+        componentConfig={{
+          savedObjects: savedObjects.client,
+          notifications: notifications,
+          fullWidth: true,
+          displayAllCompatibleDataSources: true,
+        }} 
+      />
+    );
+  }, [setActionMenu, savedObjects.client, notifications, datasource1, datasource2]);
   return (
     <>
+      {dataSourceEnabled && dataSourceMenuComponent}
       <div className="osdOverviewWrapper">
-        {documentsIndexes.length ? <SearchResult http={http} /> : <CreateIndex />}
+        {documentsIndexes1.length || documentsIndexes2.length ? <SearchResult http={http} savedObjects={savedObjects} dataSourceEnabled={dataSourceEnabled} dataSourceManagement={dataSourceManagement} navigation={navigation} setActionMenu={setActionMenu} dataSourceOptions={dataSourceOptions} notifications={notifications}/> : <CreateIndex />}
       </div>
       {showFlyout && <Flyout />}
     </>
diff --git a/public/components/query_compare/search_result/index.tsx b/public/components/query_compare/search_result/index.tsx
index 7e6de1ad..b71fa546 100644
--- a/public/components/query_compare/search_result/index.tsx
+++ b/public/components/query_compare/search_result/index.tsx
@@ -3,31 +3,41 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState } from 'react';
 import { EuiPageContentBody } from '@elastic/eui';
+import React, { useState } from 'react';
 
-import { CoreStart } from '../../../../../../src/core/public';
-import { SearchConfigsPanel } from './search_components/search_configs/search_configs';
-import { SearchInputBar } from './search_components/search_bar';
+import { CoreStart, MountPoint } from '../../../../../../src/core/public';
+import { DataSourceManagementPluginSetup } from '../../../../../../src/plugins/data_source_management/public';
+import { DataSourceOption } from '../../../../../../src/plugins/data_source_management/public/components/data_source_selector/data_source_selector';
+import { NavigationPublicPluginStart } from '../../../../../../src/plugins/navigation/public';
 import { ServiceEndpoints } from '../../../../common';
-import { Header } from '../../common/header';
+import { useSearchRelevanceContext } from '../../../contexts';
 import {
-  SearchResults,
   QueryError,
   QueryStringError,
+  SearchResults,
   SelectIndexError,
   initialQueryErrorState,
 } from '../../../types/index';
+import { Header } from '../../common/header';
 import { ResultComponents } from './result_components/result_components';
-import { useSearchRelevanceContext } from '../../../contexts';
+import { SearchInputBar } from './search_components/search_bar';
+import { SearchConfigsPanel } from './search_components/search_configs/search_configs';
 
 const DEFAULT_QUERY = '{}';
 
 interface SearchResultProps {
   http: CoreStart['http'];
+  savedObjects: CoreStart['savedObjects'];
+  dataSourceEnabled: boolean
+  navigation: NavigationPublicPluginStart;
+  setActionMenu: (menuMount: MountPoint | undefined) => void;
+  dataSourceManagement: DataSourceManagementPluginSetup;
+  dataSourceOptions: DataSourceOption[]
+  notifications: NotificationsStart
 }
 
-export const SearchResult = ({ http }: SearchResultProps) => {
+export const SearchResult = ({ http, savedObjects, dataSourceEnabled, dataSourceManagement, setActionMenu, navigation, dataSourceOptions, notifications}: SearchResultProps) => {
   const [queryString1, setQueryString1] = useState(DEFAULT_QUERY);
   const [queryString2, setQueryString2] = useState(DEFAULT_QUERY);
   const [queryResult1, setQueryResult1] = useState<SearchResults>({} as any);
@@ -35,7 +45,6 @@ export const SearchResult = ({ http }: SearchResultProps) => {
   const [queryError1, setQueryError1] = useState<QueryError>(initialQueryErrorState);
   const [queryError2, setQueryError2] = useState<QueryError>(initialQueryErrorState);
   const [searchBarValue, setSearchBarValue] = useState('');
-
   const {
     updateComparedResult1,
     updateComparedResult2,
@@ -43,6 +52,8 @@ export const SearchResult = ({ http }: SearchResultProps) => {
     selectedIndex2,
     pipeline1,
     pipeline2,
+    datasource1,
+    datasource2
   } = useSearchRelevanceContext();
 
   const onClickSearch = () => {
@@ -92,7 +103,7 @@ export const SearchResult = ({ http }: SearchResultProps) => {
     jsonQuery: any,
     updateComparedResult: (result: SearchResults) => void,
     setQueryResult: React.Dispatch<React.SetStateAction<SearchResults>>,
-    setQueryError: React.Dispatch<React.SetStateAction<QueryError>>
+    setQueryError: React.Dispatch<React.SetStateAction<QueryError>>,
   ) => {
     if (queryError.queryString.length || queryError.selectIndex.length) {
       setQueryError(queryError);
@@ -105,64 +116,75 @@ export const SearchResult = ({ http }: SearchResultProps) => {
   };
 
   const handleSearch = (jsonQueries: any, queryErrors: QueryError[]) => {
-    const requestBody = {
-      query1: handleQuery(
+    const requestBody1 = handleQuery(
         queryErrors[0],
         selectedIndex1,
         pipeline1,
         jsonQueries[0],
         updateComparedResult1,
         setQueryResult1,
-        setQueryError1
-      ),
-      query2: handleQuery(
+        setQueryError1,
+    );
+
+    const requestBody2 = handleQuery(
         queryErrors[1],
         selectedIndex2,
         pipeline2,
         jsonQueries[1],
         updateComparedResult2,
         setQueryResult2,
-        setQueryError2
-      ),
-    };
-    if (Object.keys(requestBody).length !== 0) {
-      http
-        .post(ServiceEndpoints.GetSearchResults, {
-          body: JSON.stringify(requestBody),
-        })
-        .then((res) => {
-          if (res.result1) {
-            setQueryResult1(res.result1);
-            updateComparedResult1(res.result1);
-          }
-
-          if (res.result2) {
-            setQueryResult2(res.result2);
-            updateComparedResult2(res.result2);
-          }
-
-          if (res.errorMessage1) {
-            setQueryError1((error: QueryError) => ({
-              ...error,
-              queryString: res.errorMessage1,
-              errorResponse: res.errorMessage1,
-            }));
-          }
-
-          if (res.errorMessage2) {
-            setQueryError2((error: QueryError) => ({
-              ...error,
-              queryString: res.errorMessage2,
-              errorResponse: res.errorMessage2,
-            }));
-          }
-        })
-        .catch((error: Error) => {
-          // eslint-disable-next-line no-console
-          console.error(error);
-        });
+        setQueryError2,
+    );
+    if (Object.keys(requestBody1).length !== 0 || Object.keys(requestBody2).length !== 0) {
+        // First Query
+        if (Object.keys(requestBody1).length !== 0) {
+            http.post(ServiceEndpoints.GetSearchResults, {
+                body: JSON.stringify({ query1: requestBody1, dataSourceId1: datasource1? datasource1: '' }),
+            })
+            .then((res) => {
+                if (res.result1) {
+                    setQueryResult1(res.result1);
+                    updateComparedResult1(res.result1);
+                }
+
+                if (res.errorMessage1) {
+                    setQueryError1((error: QueryError) => ({
+                        ...error,
+                        queryString: res.errorMessage1,
+                        errorResponse: res.errorMessage1,
+                    }));
+                }
+            })
+            .catch((error: Error) => {
+                console.error(error);
+            });
+        }
+
+        // Second Query
+        if (Object.keys(requestBody2).length !== 0) {
+            http.post(ServiceEndpoints.GetSearchResults, {
+                body: JSON.stringify({ query2: requestBody2, dataSourceId2: datasource2? datasource2: '' }),
+            })
+            .then((res) => {
+                if (res.result2) {
+                    setQueryResult2(res.result2);
+                    updateComparedResult2(res.result2);
+                }
+
+                if (res.errorMessage2) {
+                    setQueryError2((error: QueryError) => ({
+                        ...error,
+                        queryString: res.errorMessage2,
+                        errorResponse: res.errorMessage2,
+                    }));
+                }
+            })
+            .catch((error: Error) => {
+                console.error(error);
+            });
+        }
     }
-  };
+};
 
   return (
     <>
@@ -181,8 +203,15 @@ export const SearchResult = ({ http }: SearchResultProps) => {
           setQueryString2={setQueryString2}
           queryError1={queryError1}
           queryError2={queryError2}
+          dataSourceManagement={dataSourceManagement}
           setQueryError1={setQueryError1}
           setQueryError2={setQueryError2}
+          dataSourceEnabled={dataSourceEnabled}
+          savedObjects={savedObjects}
+          navigation={navigation}
+          setActionMenu={setActionMenu}
+          dataSourceOptions={dataSourceOptions}
+          notifications={notifications}
         />
         <ResultComponents
           queryResult1={queryResult1}
diff --git a/public/components/query_compare/search_result/result_components/result_components.tsx b/public/components/query_compare/search_result/result_components/result_components.tsx
index c64886e9..cf014641 100644
--- a/public/components/query_compare/search_result/result_components/result_components.tsx
+++ b/public/components/query_compare/search_result/result_components/result_components.tsx
@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { EuiEmptyPrompt, EuiPanel, EuiSplitPanel } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
-import { EuiSplitPanel, EuiEmptyPrompt, EuiPanel } from '@elastic/eui';
 
 import { QueryError, SearchResults } from '../../../../types/index';
 import { ResultPanel } from './result_panel';
diff --git a/public/components/query_compare/search_result/result_components/result_grid.tsx b/public/components/query_compare/search_result/result_components/result_grid.tsx
index ea7f818c..588e139b 100644
--- a/public/components/query_compare/search_result/result_components/result_grid.tsx
+++ b/public/components/query_compare/search_result/result_components/result_grid.tsx
@@ -3,26 +3,27 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState } from 'react';
+
 import {
   EuiButtonIcon,
-  EuiText,
+  EuiDescriptionList,
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiTitle,
   EuiIcon,
   EuiIconTip,
-  EuiDescriptionList,
-  EuiDescriptionListTitle,
-  EuiDescriptionListDescription,
   EuiMark,
   EuiPopover,
+  EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import _, { uniqueId } from 'lodash';
+import React, { useState } from 'react';
 
-import { IDocType, SearchResults, Document } from '../../../../types/index';
-import { DocumentRank } from '../../../../contexts/utils';
 import { useSearchRelevanceContext } from '../../../../contexts';
+import { DocumentRank } from '../../../../contexts/utils';
+import { Document, SearchResults } from '../../../../types/index';
 
 import './result_grid.scss';
 
diff --git a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
index 6905c8f8..75498187 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
+++ b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Flyout component Renders flyout component 1`] = `
 <SearchRelevanceContextProvider>
   <SearchConfig
+    dataSourceEnabled={false}
     pipeline=""
     queryError={
       Object {
@@ -17,10 +18,831 @@ exports[`Flyout component Renders flyout component 1`] = `
     queryNumber={1}
     queryString="{}"
     selectedIndex=""
-    setPipeline={[MockFunction]}
+    setPipeline={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            "",
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQueryError={[MockFunction]}
+    setQueryString={[MockFunction]}
+    setSelectedIndex={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            "",
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+  >
+    <EuiTitle
+      size="xs"
+    >
+      <h2
+        className="euiTitle euiTitle--xsmall"
+        style={
+          Object {
+            "fontSize": "21px",
+            "fontWeight": "300",
+          }
+        }
+      >
+        Query 
+        1
+      </h2>
+    </EuiTitle>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <EuiFlexGroup>
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
+          >
+            <EuiFormRow
+              describedByIds={Array []}
+              display="row"
+              error={false}
+              fullWidth={true}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              isInvalid={false}
+              label="Index"
+              labelType="label"
+            >
+              <div
+                className="euiFormRow euiFormRow--fullWidth"
+                id="random_html_id-row"
+              >
+                <div
+                  className="euiFormRow__labelWrapper"
+                >
+                  <EuiFormLabel
+                    aria-invalid={false}
+                    className="euiFormRow__label"
+                    htmlFor="random_html_id"
+                    isFocused={false}
+                    isInvalid={false}
+                    type="label"
+                  >
+                    <label
+                      aria-invalid={false}
+                      className="euiFormLabel euiFormRow__label"
+                      htmlFor="random_html_id"
+                    >
+                      Index
+                    </label>
+                  </EuiFormLabel>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
+                  <EuiSelect
+                    aria-label="Search Index"
+                    hasNoInitialSelection={true}
+                    id="random_html_id"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    options={Array []}
+                    value=""
+                  >
+                    <EuiFormControlLayout
+                      compressed={false}
+                      fullWidth={false}
+                      icon={
+                        Object {
+                          "side": "right",
+                          "type": "arrowDown",
+                        }
+                      }
+                      inputId="random_html_id"
+                      isLoading={false}
+                    >
+                      <div
+                        className="euiFormControlLayout"
+                      >
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <EuiValidatableControl>
+                            <select
+                              aria-label="Search Index"
+                              className="euiSelect"
+                              id="random_html_id"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onMouseUp={[Function]}
+                              value=""
+                            >
+                              <option
+                                disabled={true}
+                                hidden={true}
+                                style={
+                                  Object {
+                                    "display": "none",
+                                  }
+                                }
+                                value=""
+                              >
+                                 
+                              </option>
+                            </select>
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons
+                            compressed={false}
+                            icon={
+                              Object {
+                                "side": "right",
+                                "type": "arrowDown",
+                              }
+                            }
+                            isLoading={false}
+                          >
+                            <div
+                              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                            >
+                              <EuiFormControlLayoutCustomIcon
+                                size="m"
+                                type="arrowDown"
+                              >
+                                <span
+                                  className="euiFormControlLayoutCustomIcon"
+                                >
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
+                                    type="arrowDown"
+                                  >
+                                    <EuiIconArrowDown
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                          fillRule="non-zero"
+                                        />
+                                      </svg>
+                                    </EuiIconArrowDown>
+                                  </EuiIcon>
+                                </span>
+                              </EuiFormControlLayoutCustomIcon>
+                            </div>
+                          </EuiFormControlLayoutIcons>
+                        </div>
+                      </div>
+                    </EuiFormControlLayout>
+                  </EuiSelect>
+                </div>
+              </div>
+            </EuiFormRow>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
+          >
+            <EuiFormRow
+              describedByIds={Array []}
+              display="row"
+              fullWidth={true}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              helpText="Optional"
+              label="Pipeline"
+              labelType="label"
+            >
+              <div
+                className="euiFormRow euiFormRow--fullWidth"
+                id="random_html_id-row"
+              >
+                <div
+                  className="euiFormRow__labelWrapper"
+                >
+                  <EuiFormLabel
+                    className="euiFormRow__label"
+                    htmlFor="random_html_id"
+                    isFocused={false}
+                    type="label"
+                  >
+                    <label
+                      className="euiFormLabel euiFormRow__label"
+                      htmlFor="random_html_id"
+                    >
+                      Pipeline
+                    </label>
+                  </EuiFormLabel>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
+                  <EuiComboBox
+                    aria-describedby="random_html_id-help-0"
+                    async={false}
+                    compressed={false}
+                    fullWidth={false}
+                    id="random_html_id"
+                    isClearable={true}
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    options={
+                      Array [
+                        Object {
+                          "label": "_none",
+                        },
+                      ]
+                    }
+                    placeholder=""
+                    selectedOptions={Array []}
+                    singleSelection={
+                      Object {
+                        "asPlainText": true,
+                      }
+                    }
+                    sortMatchesBy="none"
+                  >
+                    <div
+                      aria-describedby="random_html_id-help-0"
+                      aria-expanded={false}
+                      aria-haspopup="listbox"
+                      className="euiComboBox"
+                      onKeyDown={[Function]}
+                      role="combobox"
+                    >
+                      <EuiComboBoxInput
+                        autoSizeInputRef={[Function]}
+                        compressed={false}
+                        fullWidth={false}
+                        hasSelectedOptions={false}
+                        id="random_html_id"
+                        inputRef={[Function]}
+                        isListOpen={false}
+                        noIcon={false}
+                        onChange={[Function]}
+                        onClear={[Function]}
+                        onClick={[Function]}
+                        onCloseListClick={[Function]}
+                        onFocus={[Function]}
+                        onOpenListClick={[Function]}
+                        onRemoveOption={[Function]}
+                        placeholder=""
+                        rootId={[Function]}
+                        searchValue=""
+                        selectedOptions={Array []}
+                        singleSelection={
+                          Object {
+                            "asPlainText": true,
+                          }
+                        }
+                        toggleButtonRef={[Function]}
+                        updatePosition={[Function]}
+                        value=""
+                      >
+                        <EuiFormControlLayout
+                          compressed={false}
+                          fullWidth={false}
+                          icon={
+                            Object {
+                              "aria-label": "Open list of options",
+                              "data-test-subj": "comboBoxToggleListButton",
+                              "disabled": undefined,
+                              "onClick": [Function],
+                              "ref": [Function],
+                              "side": "right",
+                              "type": "arrowDown",
+                            }
+                          }
+                        >
+                          <div
+                            className="euiFormControlLayout"
+                          >
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <div
+                                className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                                data-test-subj="comboBoxInput"
+                                onClick={[Function]}
+                                tabIndex={-1}
+                              >
+                                <AutosizeInput
+                                  aria-controls=""
+                                  className="euiComboBox__input"
+                                  data-test-subj="comboBoxSearchInput"
+                                  id="random_html_id"
+                                  injectStyles={true}
+                                  inputRef={[Function]}
+                                  minWidth={1}
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onFocus={[Function]}
+                                  role="textbox"
+                                  style={
+                                    Object {
+                                      "fontSize": 14,
+                                    }
+                                  }
+                                  value=""
+                                >
+                                  <div
+                                    className="euiComboBox__input"
+                                    style={
+                                      Object {
+                                        "display": "inline-block",
+                                        "fontSize": 14,
+                                      }
+                                    }
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onFocus={[Function]}
+                                      role="textbox"
+                                      style={
+                                        Object {
+                                          "boxSizing": "content-box",
+                                          "width": "2px",
+                                        }
+                                      }
+                                      value=""
+                                    />
+                                    <div
+                                      style={
+                                        Object {
+                                          "height": 0,
+                                          "left": 0,
+                                          "overflow": "scroll",
+                                          "position": "absolute",
+                                          "top": 0,
+                                          "visibility": "hidden",
+                                          "whiteSpace": "pre",
+                                        }
+                                      }
+                                    />
+                                  </div>
+                                </AutosizeInput>
+                              </div>
+                              <EuiFormControlLayoutIcons
+                                compressed={false}
+                                icon={
+                                  Object {
+                                    "aria-label": "Open list of options",
+                                    "data-test-subj": "comboBoxToggleListButton",
+                                    "disabled": undefined,
+                                    "onClick": [Function],
+                                    "ref": [Function],
+                                    "side": "right",
+                                    "type": "arrowDown",
+                                  }
+                                }
+                              >
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <EuiFormControlLayoutCustomIcon
+                                    aria-label="Open list of options"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    iconRef={[Function]}
+                                    onClick={[Function]}
+                                    size="m"
+                                    type="arrowDown"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiFormControlLayoutCustomIcon__icon"
+                                        size="m"
+                                        type="arrowDown"
+                                      >
+                                        <EuiIconArrowDown
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          >
+                                            <path
+                                              d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                              fillRule="non-zero"
+                                            />
+                                          </svg>
+                                        </EuiIconArrowDown>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiFormControlLayoutCustomIcon>
+                                </div>
+                              </EuiFormControlLayoutIcons>
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </EuiComboBoxInput>
+                    </div>
+                  </EuiComboBox>
+                  <EuiFormHelpText
+                    className="euiFormRow__text"
+                    id="random_html_id-help-0"
+                    key="Optional"
+                  >
+                    <div
+                      className="euiFormHelpText euiFormRow__text"
+                      id="random_html_id-help-0"
+                    >
+                      Optional
+                    </div>
+                  </EuiFormHelpText>
+                </div>
+              </div>
+            </EuiFormRow>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+    <EuiFormRow
+      describedByIds={Array []}
+      display="row"
+      error={false}
+      fullWidth={true}
+      hasChildLabel={true}
+      hasEmptyLabelSpace={false}
+      helpText={
+        <p>
+          Enter a query in
+           
+          <a
+            href="https://opensearch.org/docs/latest/query-dsl/index/"
+          >
+            OpenSearch Query DSL
+          </a>
+          . Use %SearchText% to refer to the text in the search bar
+        </p>
+      }
+      isInvalid={false}
+      label="Query"
+      labelAppend={
+        <EuiText
+          size="xs"
+        >
+          <EuiButtonEmpty
+            color="primary"
+            onClick={[Function]}
+            size="xs"
+          >
+            Help
+          </EuiButtonEmpty>
+        </EuiText>
+      }
+      labelType="label"
+    >
+      <div
+        className="euiFormRow euiFormRow--fullWidth"
+        id="random_html_id-row"
+      >
+        <div
+          className="euiFormRow__labelWrapper"
+        >
+          <EuiFormLabel
+            aria-invalid={false}
+            className="euiFormRow__label"
+            htmlFor="random_html_id"
+            isFocused={false}
+            isInvalid={false}
+            type="label"
+          >
+            <label
+              aria-invalid={false}
+              className="euiFormLabel euiFormRow__label"
+              htmlFor="random_html_id"
+            >
+              Query
+            </label>
+          </EuiFormLabel>
+           
+          <EuiText
+            size="xs"
+          >
+            <div
+              className="euiText euiText--extraSmall"
+            >
+              <EuiButtonEmpty
+                color="primary"
+                onClick={[Function]}
+                size="xs"
+              >
+                <button
+                  className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <EuiButtonContent
+                    className="euiButtonEmpty__content"
+                    iconSide="left"
+                    iconSize="s"
+                    textProps={
+                      Object {
+                        "className": "euiButtonEmpty__text",
+                      }
+                    }
+                  >
+                    <span
+                      className="euiButtonContent euiButtonEmpty__content"
+                    >
+                      <span
+                        className="euiButtonEmpty__text"
+                      >
+                        Help
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonEmpty>
+            </div>
+          </EuiText>
+        </div>
+        <div
+          className="euiFormRow__fieldWrapper"
+        >
+          <EuiCodeEditor
+            aria-describedby="random_html_id-help-0"
+            aria-label="Code Editor"
+            height="10rem"
+            id="random_html_id"
+            mode="json"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            setOptions={
+              Object {
+                "enableBasicAutocompletion": true,
+                "enableLiveAutocompletion": true,
+                "fontSize": "14px",
+              }
+            }
+            showPrintMargin={false}
+            tabSize={2}
+            theme="textmate"
+            value="{}"
+            width="100%"
+          >
+            <div
+              className="euiCodeEditorWrapper"
+              data-test-subj="codeEditorContainer"
+              style={
+                Object {
+                  "height": "10rem",
+                  "width": "100%",
+                }
+              }
+            >
+              <button
+                className="euiCodeEditorKeyboardHint"
+                data-test-subj="codeEditorHint"
+                id="random_html_id"
+                onClick={[Function]}
+              >
+                <p
+                  className="euiText"
+                >
+                  <EuiI18n
+                    default="Press Enter to start editing."
+                    token="euiCodeEditor.startEditing"
+                  >
+                    Press Enter to start editing.
+                  </EuiI18n>
+                </p>
+                <p
+                  className="euiText"
+                >
+                  <EuiI18n
+                    default="When you're done, press Escape to stop editing."
+                    token="euiCodeEditor.stopEditing"
+                  >
+                    When you're done, press Escape to stop editing.
+                  </EuiI18n>
+                </p>
+              </button>
+              <ReactAce
+                aria-describedby="random_html_id-help-0"
+                aria-label="Code Editor"
+                commands={
+                  Array [
+                    Object {
+                      "bindKey": Object {
+                        "mac": "Esc",
+                        "win": "Esc",
+                      },
+                      "exec": [Function],
+                      "name": "stopEditingOnEsc",
+                    },
+                  ]
+                }
+                cursorStart={1}
+                editorProps={
+                  Object {
+                    "$blockScrolling": Infinity,
+                  }
+                }
+                enableBasicAutocompletion={false}
+                enableLiveAutocompletion={false}
+                enableSnippets={false}
+                focus={false}
+                fontSize={12}
+                height="10rem"
+                highlightActiveLine={true}
+                id="random_html_id"
+                maxLines={null}
+                minLines={null}
+                mode="json"
+                name="random_html_id"
+                navigateToFileEnd={true}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                onLoad={null}
+                onPaste={null}
+                onScroll={null}
+                placeholder={null}
+                readOnly={false}
+                scrollMargin={
+                  Array [
+                    0,
+                    0,
+                    0,
+                    0,
+                  ]
+                }
+                setOptions={
+                  Object {
+                    "enableBasicAutocompletion": true,
+                    "enableLiveAutocompletion": true,
+                    "fontSize": "14px",
+                  }
+                }
+                showGutter={true}
+                showPrintMargin={false}
+                style={Object {}}
+                tabSize={2}
+                theme="textmate"
+                value="{}"
+                width="100%"
+                wrapEnabled={false}
+              >
+                <div
+                  id="random_html_id"
+                  style={
+                    Object {
+                      "height": "10rem",
+                      "width": "100%",
+                    }
+                  }
+                />
+              </ReactAce>
+            </div>
+          </EuiCodeEditor>
+          <EuiFormHelpText
+            className="euiFormRow__text"
+            id="random_html_id-help-0"
+            key="0"
+          >
+            <div
+              className="euiFormHelpText euiFormRow__text"
+              id="random_html_id-help-0"
+            >
+              <p>
+                Enter a query in
+                 
+                <a
+                  href="https://opensearch.org/docs/latest/query-dsl/index/"
+                >
+                  OpenSearch Query DSL
+                </a>
+                . Use %SearchText% to refer to the text in the search bar
+              </p>
+            </div>
+          </EuiFormHelpText>
+        </div>
+      </div>
+    </EuiFormRow>
+  </SearchConfig>
+</SearchRelevanceContextProvider>
+`;
+
+exports[`Flyout component Renders flyout component when multi-datasource is enabled 1`] = `
+<SearchRelevanceContextProvider>
+  <SearchConfig
+    dataSourceManagement={
+      Object {
+        "ui": Object {
+          "DataSourceSelector": <React.Fragment />,
+        },
+      }
+    }
+    pipeline=""
+    queryError={
+      Object {
+        "errorResponse": Object {
+          "body": "",
+          "statusCode": 200,
+        },
+        "queryString": "",
+        "selectIndex": "",
+      }
+    }
+    queryNumber={1}
+    queryString="{}"
+    selectedIndex=""
+    setPipeline={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            "",
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
     setQueryError={[MockFunction]}
     setQueryString={[MockFunction]}
-    setSelectedIndex={[MockFunction]}
+    setSelectedIndex={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            "",
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
   >
     <EuiTitle
       size="xs"
diff --git a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
index 6492d9f6..f3b0d024 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
+++ b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
@@ -3,6 +3,13 @@
 exports[`Flyout component Renders flyout component 1`] = `
 <SearchRelevanceContextProvider>
   <SearchConfigsPanel
+    dataSourceManagement={
+      Object {
+        "ui": Object {
+          "DataSourceSelector": <React.Fragment />,
+        },
+      }
+    }
     queryError1={
       Object {
         "errorResponse": Object {
@@ -51,6 +58,13 @@ exports[`Flyout component Renders flyout component 1`] = `
                 className="euiFlexItem search-relevance-config"
               >
                 <SearchConfig
+                  dataSourceManagement={
+                    Object {
+                      "ui": Object {
+                        "DataSourceSelector": <React.Fragment />,
+                      },
+                    }
+                  }
                   pipeline=""
                   queryError={
                     Object {
@@ -65,6 +79,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                   queryNumber={1}
                   queryString="{}"
                   selectedIndex=""
+                  setDataSource={[Function]}
                   setPipeline={[Function]}
                   setQueryError={[Function]}
                   setQueryString={[Function]}
@@ -810,6 +825,13 @@ exports[`Flyout component Renders flyout component 1`] = `
                 className="euiFlexItem search-relevance-config"
               >
                 <SearchConfig
+                  dataSourceManagement={
+                    Object {
+                      "ui": Object {
+                        "DataSourceSelector": <React.Fragment />,
+                      },
+                    }
+                  }
                   pipeline=""
                   queryError={
                     Object {
@@ -824,6 +846,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                   queryNumber={2}
                   queryString="{}"
                   selectedIndex=""
+                  setDataSource={[Function]}
                   setPipeline={[Function]}
                   setQueryError={[Function]}
                   setQueryString={[Function]}
@@ -1569,3 +1592,1582 @@ exports[`Flyout component Renders flyout component 1`] = `
   </SearchConfigsPanel>
 </SearchRelevanceContextProvider>
 `;
+
+exports[`Flyout component Renders flyout component when multi dataSource enabled 1`] = `
+<SearchRelevanceContextProvider>
+  <SearchConfigsPanel
+    dataSourceEnabled={false}
+    queryError1={
+      Object {
+        "errorResponse": Object {
+          "body": "",
+          "statusCode": 200,
+        },
+        "queryString": "",
+        "selectIndex": "",
+      }
+    }
+    queryError2={
+      Object {
+        "errorResponse": Object {
+          "body": "",
+          "statusCode": 200,
+        },
+        "queryString": "",
+        "selectIndex": "",
+      }
+    }
+    queryString1="{}"
+    queryString2="{}"
+    setQueryError1={[Function]}
+    setQueryError2={[Function]}
+    setQueryString1={[Function]}
+    setQueryString2={[Function]}
+  >
+    <EuiPanel
+      borderRadius="none"
+      className="left-right-borders"
+      color="transparent"
+      grow={false}
+      hasShadow={false}
+    >
+      <div
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--flexGrowZero left-right-borders"
+      >
+        <EuiFlexGroup>
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <EuiFlexItem
+              className="search-relevance-config"
+            >
+              <div
+                className="euiFlexItem search-relevance-config"
+              >
+                <SearchConfig
+                  dataSourceEnabled={false}
+                  pipeline=""
+                  queryError={
+                    Object {
+                      "errorResponse": Object {
+                        "body": "",
+                        "statusCode": 200,
+                      },
+                      "queryString": "",
+                      "selectIndex": "",
+                    }
+                  }
+                  queryNumber={1}
+                  queryString="{}"
+                  selectedIndex=""
+                  setDataSource={[Function]}
+                  setPipeline={[Function]}
+                  setQueryError={[Function]}
+                  setQueryString={[Function]}
+                  setSelectedIndex={[Function]}
+                >
+                  <EuiTitle
+                    size="xs"
+                  >
+                    <h2
+                      className="euiTitle euiTitle--xsmall"
+                      style={
+                        Object {
+                          "fontSize": "21px",
+                          "fontWeight": "300",
+                        }
+                      }
+                    >
+                      Query 
+                      1
+                    </h2>
+                  </EuiTitle>
+                  <EuiSpacer
+                    size="m"
+                  >
+                    <div
+                      className="euiSpacer euiSpacer--m"
+                    />
+                  </EuiSpacer>
+                  <EuiFlexGroup>
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    >
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
+                        >
+                          <EuiFormRow
+                            describedByIds={Array []}
+                            display="row"
+                            error={false}
+                            fullWidth={true}
+                            hasChildLabel={true}
+                            hasEmptyLabelSpace={false}
+                            isInvalid={false}
+                            label="Index"
+                            labelType="label"
+                          >
+                            <div
+                              className="euiFormRow euiFormRow--fullWidth"
+                              id="random_html_id-row"
+                            >
+                              <div
+                                className="euiFormRow__labelWrapper"
+                              >
+                                <EuiFormLabel
+                                  aria-invalid={false}
+                                  className="euiFormRow__label"
+                                  htmlFor="random_html_id"
+                                  isFocused={false}
+                                  isInvalid={false}
+                                  type="label"
+                                >
+                                  <label
+                                    aria-invalid={false}
+                                    className="euiFormLabel euiFormRow__label"
+                                    htmlFor="random_html_id"
+                                  >
+                                    Index
+                                  </label>
+                                </EuiFormLabel>
+                              </div>
+                              <div
+                                className="euiFormRow__fieldWrapper"
+                              >
+                                <EuiSelect
+                                  aria-label="Search Index"
+                                  hasNoInitialSelection={true}
+                                  id="random_html_id"
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onFocus={[Function]}
+                                  options={Array []}
+                                  value=""
+                                >
+                                  <EuiFormControlLayout
+                                    compressed={false}
+                                    fullWidth={false}
+                                    icon={
+                                      Object {
+                                        "side": "right",
+                                        "type": "arrowDown",
+                                      }
+                                    }
+                                    inputId="random_html_id"
+                                    isLoading={false}
+                                  >
+                                    <div
+                                      className="euiFormControlLayout"
+                                    >
+                                      <div
+                                        className="euiFormControlLayout__childrenWrapper"
+                                      >
+                                        <EuiValidatableControl>
+                                          <select
+                                            aria-label="Search Index"
+                                            className="euiSelect"
+                                            id="random_html_id"
+                                            onBlur={[Function]}
+                                            onChange={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseUp={[Function]}
+                                            value=""
+                                          >
+                                            <option
+                                              disabled={true}
+                                              hidden={true}
+                                              style={
+                                                Object {
+                                                  "display": "none",
+                                                }
+                                              }
+                                              value=""
+                                            >
+                                               
+                                            </option>
+                                          </select>
+                                        </EuiValidatableControl>
+                                        <EuiFormControlLayoutIcons
+                                          compressed={false}
+                                          icon={
+                                            Object {
+                                              "side": "right",
+                                              "type": "arrowDown",
+                                            }
+                                          }
+                                          isLoading={false}
+                                        >
+                                          <div
+                                            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                          >
+                                            <EuiFormControlLayoutCustomIcon
+                                              size="m"
+                                              type="arrowDown"
+                                            >
+                                              <span
+                                                className="euiFormControlLayoutCustomIcon"
+                                              >
+                                                <EuiIcon
+                                                  aria-hidden="true"
+                                                  className="euiFormControlLayoutCustomIcon__icon"
+                                                  size="m"
+                                                  type="arrowDown"
+                                                >
+                                                  <EuiIconArrowDown
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                    focusable="false"
+                                                    role="img"
+                                                    style={null}
+                                                  >
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    >
+                                                      <path
+                                                        d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                                        fillRule="non-zero"
+                                                      />
+                                                    </svg>
+                                                  </EuiIconArrowDown>
+                                                </EuiIcon>
+                                              </span>
+                                            </EuiFormControlLayoutCustomIcon>
+                                          </div>
+                                        </EuiFormControlLayoutIcons>
+                                      </div>
+                                    </div>
+                                  </EuiFormControlLayout>
+                                </EuiSelect>
+                              </div>
+                            </div>
+                          </EuiFormRow>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
+                        >
+                          <EuiFormRow
+                            describedByIds={Array []}
+                            display="row"
+                            fullWidth={true}
+                            hasChildLabel={true}
+                            hasEmptyLabelSpace={false}
+                            helpText="Optional"
+                            label="Pipeline"
+                            labelType="label"
+                          >
+                            <div
+                              className="euiFormRow euiFormRow--fullWidth"
+                              id="random_html_id-row"
+                            >
+                              <div
+                                className="euiFormRow__labelWrapper"
+                              >
+                                <EuiFormLabel
+                                  className="euiFormRow__label"
+                                  htmlFor="random_html_id"
+                                  isFocused={false}
+                                  type="label"
+                                >
+                                  <label
+                                    className="euiFormLabel euiFormRow__label"
+                                    htmlFor="random_html_id"
+                                  >
+                                    Pipeline
+                                  </label>
+                                </EuiFormLabel>
+                              </div>
+                              <div
+                                className="euiFormRow__fieldWrapper"
+                              >
+                                <EuiComboBox
+                                  aria-describedby="random_html_id-help-0"
+                                  async={false}
+                                  compressed={false}
+                                  fullWidth={false}
+                                  id="random_html_id"
+                                  isClearable={true}
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onFocus={[Function]}
+                                  options={
+                                    Array [
+                                      Object {
+                                        "label": "_none",
+                                      },
+                                    ]
+                                  }
+                                  placeholder=""
+                                  selectedOptions={Array []}
+                                  singleSelection={
+                                    Object {
+                                      "asPlainText": true,
+                                    }
+                                  }
+                                  sortMatchesBy="none"
+                                >
+                                  <div
+                                    aria-describedby="random_html_id-help-0"
+                                    aria-expanded={false}
+                                    aria-haspopup="listbox"
+                                    className="euiComboBox"
+                                    onKeyDown={[Function]}
+                                    role="combobox"
+                                  >
+                                    <EuiComboBoxInput
+                                      autoSizeInputRef={[Function]}
+                                      compressed={false}
+                                      fullWidth={false}
+                                      hasSelectedOptions={false}
+                                      id="random_html_id"
+                                      inputRef={[Function]}
+                                      isListOpen={false}
+                                      noIcon={false}
+                                      onChange={[Function]}
+                                      onClear={[Function]}
+                                      onClick={[Function]}
+                                      onCloseListClick={[Function]}
+                                      onFocus={[Function]}
+                                      onOpenListClick={[Function]}
+                                      onRemoveOption={[Function]}
+                                      placeholder=""
+                                      rootId={[Function]}
+                                      searchValue=""
+                                      selectedOptions={Array []}
+                                      singleSelection={
+                                        Object {
+                                          "asPlainText": true,
+                                        }
+                                      }
+                                      toggleButtonRef={[Function]}
+                                      updatePosition={[Function]}
+                                      value=""
+                                    >
+                                      <EuiFormControlLayout
+                                        compressed={false}
+                                        fullWidth={false}
+                                        icon={
+                                          Object {
+                                            "aria-label": "Open list of options",
+                                            "data-test-subj": "comboBoxToggleListButton",
+                                            "disabled": undefined,
+                                            "onClick": [Function],
+                                            "ref": [Function],
+                                            "side": "right",
+                                            "type": "arrowDown",
+                                          }
+                                        }
+                                      >
+                                        <div
+                                          className="euiFormControlLayout"
+                                        >
+                                          <div
+                                            className="euiFormControlLayout__childrenWrapper"
+                                          >
+                                            <div
+                                              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                                              data-test-subj="comboBoxInput"
+                                              onClick={[Function]}
+                                              tabIndex={-1}
+                                            >
+                                              <AutosizeInput
+                                                aria-controls=""
+                                                className="euiComboBox__input"
+                                                data-test-subj="comboBoxSearchInput"
+                                                id="random_html_id"
+                                                injectStyles={true}
+                                                inputRef={[Function]}
+                                                minWidth={1}
+                                                onBlur={[Function]}
+                                                onChange={[Function]}
+                                                onFocus={[Function]}
+                                                role="textbox"
+                                                style={
+                                                  Object {
+                                                    "fontSize": 14,
+                                                  }
+                                                }
+                                                value=""
+                                              >
+                                                <div
+                                                  className="euiComboBox__input"
+                                                  style={
+                                                    Object {
+                                                      "display": "inline-block",
+                                                      "fontSize": 14,
+                                                    }
+                                                  }
+                                                >
+                                                  <input
+                                                    aria-controls=""
+                                                    data-test-subj="comboBoxSearchInput"
+                                                    id="random_html_id"
+                                                    onBlur={[Function]}
+                                                    onChange={[Function]}
+                                                    onFocus={[Function]}
+                                                    role="textbox"
+                                                    style={
+                                                      Object {
+                                                        "boxSizing": "content-box",
+                                                        "width": "2px",
+                                                      }
+                                                    }
+                                                    value=""
+                                                  />
+                                                  <div
+                                                    style={
+                                                      Object {
+                                                        "height": 0,
+                                                        "left": 0,
+                                                        "overflow": "scroll",
+                                                        "position": "absolute",
+                                                        "top": 0,
+                                                        "visibility": "hidden",
+                                                        "whiteSpace": "pre",
+                                                      }
+                                                    }
+                                                  />
+                                                </div>
+                                              </AutosizeInput>
+                                            </div>
+                                            <EuiFormControlLayoutIcons
+                                              compressed={false}
+                                              icon={
+                                                Object {
+                                                  "aria-label": "Open list of options",
+                                                  "data-test-subj": "comboBoxToggleListButton",
+                                                  "disabled": undefined,
+                                                  "onClick": [Function],
+                                                  "ref": [Function],
+                                                  "side": "right",
+                                                  "type": "arrowDown",
+                                                }
+                                              }
+                                            >
+                                              <div
+                                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                              >
+                                                <EuiFormControlLayoutCustomIcon
+                                                  aria-label="Open list of options"
+                                                  data-test-subj="comboBoxToggleListButton"
+                                                  iconRef={[Function]}
+                                                  onClick={[Function]}
+                                                  size="m"
+                                                  type="arrowDown"
+                                                >
+                                                  <button
+                                                    aria-label="Open list of options"
+                                                    className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                                    data-test-subj="comboBoxToggleListButton"
+                                                    onClick={[Function]}
+                                                    type="button"
+                                                  >
+                                                    <EuiIcon
+                                                      aria-hidden="true"
+                                                      className="euiFormControlLayoutCustomIcon__icon"
+                                                      size="m"
+                                                      type="arrowDown"
+                                                    >
+                                                      <EuiIconArrowDown
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                        focusable="false"
+                                                        role="img"
+                                                        style={null}
+                                                      >
+                                                        <svg
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                          focusable="false"
+                                                          height={16}
+                                                          role="img"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width={16}
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        >
+                                                          <path
+                                                            d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                                            fillRule="non-zero"
+                                                          />
+                                                        </svg>
+                                                      </EuiIconArrowDown>
+                                                    </EuiIcon>
+                                                  </button>
+                                                </EuiFormControlLayoutCustomIcon>
+                                              </div>
+                                            </EuiFormControlLayoutIcons>
+                                          </div>
+                                        </div>
+                                      </EuiFormControlLayout>
+                                    </EuiComboBoxInput>
+                                  </div>
+                                </EuiComboBox>
+                                <EuiFormHelpText
+                                  className="euiFormRow__text"
+                                  id="random_html_id-help-0"
+                                  key="Optional"
+                                >
+                                  <div
+                                    className="euiFormHelpText euiFormRow__text"
+                                    id="random_html_id-help-0"
+                                  >
+                                    Optional
+                                  </div>
+                                </EuiFormHelpText>
+                              </div>
+                            </div>
+                          </EuiFormRow>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                  <EuiFormRow
+                    describedByIds={Array []}
+                    display="row"
+                    error={false}
+                    fullWidth={true}
+                    hasChildLabel={true}
+                    hasEmptyLabelSpace={false}
+                    helpText={
+                      <p>
+                        Enter a query in
+                         
+                        <a
+                          href="https://opensearch.org/docs/latest/query-dsl/index/"
+                        >
+                          OpenSearch Query DSL
+                        </a>
+                        . Use %SearchText% to refer to the text in the search bar
+                      </p>
+                    }
+                    isInvalid={false}
+                    label="Query"
+                    labelAppend={
+                      <EuiText
+                        size="xs"
+                      >
+                        <EuiButtonEmpty
+                          color="primary"
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          Help
+                        </EuiButtonEmpty>
+                      </EuiText>
+                    }
+                    labelType="label"
+                  >
+                    <div
+                      className="euiFormRow euiFormRow--fullWidth"
+                      id="random_html_id-row"
+                    >
+                      <div
+                        className="euiFormRow__labelWrapper"
+                      >
+                        <EuiFormLabel
+                          aria-invalid={false}
+                          className="euiFormRow__label"
+                          htmlFor="random_html_id"
+                          isFocused={false}
+                          isInvalid={false}
+                          type="label"
+                        >
+                          <label
+                            aria-invalid={false}
+                            className="euiFormLabel euiFormRow__label"
+                            htmlFor="random_html_id"
+                          >
+                            Query
+                          </label>
+                        </EuiFormLabel>
+                         
+                        <EuiText
+                          size="xs"
+                        >
+                          <div
+                            className="euiText euiText--extraSmall"
+                          >
+                            <EuiButtonEmpty
+                              color="primary"
+                              onClick={[Function]}
+                              size="xs"
+                            >
+                              <button
+                                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                                disabled={false}
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <EuiButtonContent
+                                  className="euiButtonEmpty__content"
+                                  iconSide="left"
+                                  iconSize="s"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButtonEmpty__text",
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiButtonContent euiButtonEmpty__content"
+                                  >
+                                    <span
+                                      className="euiButtonEmpty__text"
+                                    >
+                                      Help
+                                    </span>
+                                  </span>
+                                </EuiButtonContent>
+                              </button>
+                            </EuiButtonEmpty>
+                          </div>
+                        </EuiText>
+                      </div>
+                      <div
+                        className="euiFormRow__fieldWrapper"
+                      >
+                        <EuiCodeEditor
+                          aria-describedby="random_html_id-help-0"
+                          aria-label="Code Editor"
+                          height="10rem"
+                          id="random_html_id"
+                          mode="json"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          setOptions={
+                            Object {
+                              "enableBasicAutocompletion": true,
+                              "enableLiveAutocompletion": true,
+                              "fontSize": "14px",
+                            }
+                          }
+                          showPrintMargin={false}
+                          tabSize={2}
+                          theme="textmate"
+                          value="{}"
+                          width="100%"
+                        >
+                          <div
+                            className="euiCodeEditorWrapper"
+                            data-test-subj="codeEditorContainer"
+                            style={
+                              Object {
+                                "height": "10rem",
+                                "width": "100%",
+                              }
+                            }
+                          >
+                            <button
+                              className="euiCodeEditorKeyboardHint"
+                              data-test-subj="codeEditorHint"
+                              id="random_html_id"
+                              onClick={[Function]}
+                            >
+                              <p
+                                className="euiText"
+                              >
+                                <EuiI18n
+                                  default="Press Enter to start editing."
+                                  token="euiCodeEditor.startEditing"
+                                >
+                                  Press Enter to start editing.
+                                </EuiI18n>
+                              </p>
+                              <p
+                                className="euiText"
+                              >
+                                <EuiI18n
+                                  default="When you're done, press Escape to stop editing."
+                                  token="euiCodeEditor.stopEditing"
+                                >
+                                  When you're done, press Escape to stop editing.
+                                </EuiI18n>
+                              </p>
+                            </button>
+                            <ReactAce
+                              aria-describedby="random_html_id-help-0"
+                              aria-label="Code Editor"
+                              commands={
+                                Array [
+                                  Object {
+                                    "bindKey": Object {
+                                      "mac": "Esc",
+                                      "win": "Esc",
+                                    },
+                                    "exec": [Function],
+                                    "name": "stopEditingOnEsc",
+                                  },
+                                ]
+                              }
+                              cursorStart={1}
+                              editorProps={
+                                Object {
+                                  "$blockScrolling": Infinity,
+                                }
+                              }
+                              enableBasicAutocompletion={false}
+                              enableLiveAutocompletion={false}
+                              enableSnippets={false}
+                              focus={false}
+                              fontSize={12}
+                              height="10rem"
+                              highlightActiveLine={true}
+                              id="random_html_id"
+                              maxLines={null}
+                              minLines={null}
+                              mode="json"
+                              name="random_html_id"
+                              navigateToFileEnd={true}
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onLoad={null}
+                              onPaste={null}
+                              onScroll={null}
+                              placeholder={null}
+                              readOnly={false}
+                              scrollMargin={
+                                Array [
+                                  0,
+                                  0,
+                                  0,
+                                  0,
+                                ]
+                              }
+                              setOptions={
+                                Object {
+                                  "enableBasicAutocompletion": true,
+                                  "enableLiveAutocompletion": true,
+                                  "fontSize": "14px",
+                                }
+                              }
+                              showGutter={true}
+                              showPrintMargin={false}
+                              style={Object {}}
+                              tabSize={2}
+                              theme="textmate"
+                              value="{}"
+                              width="100%"
+                              wrapEnabled={false}
+                            >
+                              <div
+                                id="random_html_id"
+                                style={
+                                  Object {
+                                    "height": "10rem",
+                                    "width": "100%",
+                                  }
+                                }
+                              />
+                            </ReactAce>
+                          </div>
+                        </EuiCodeEditor>
+                        <EuiFormHelpText
+                          className="euiFormRow__text"
+                          id="random_html_id-help-0"
+                          key="0"
+                        >
+                          <div
+                            className="euiFormHelpText euiFormRow__text"
+                            id="random_html_id-help-0"
+                          >
+                            <p>
+                              Enter a query in
+                               
+                              <a
+                                href="https://opensearch.org/docs/latest/query-dsl/index/"
+                              >
+                                OpenSearch Query DSL
+                              </a>
+                              . Use %SearchText% to refer to the text in the search bar
+                            </p>
+                          </div>
+                        </EuiFormHelpText>
+                      </div>
+                    </div>
+                  </EuiFormRow>
+                </SearchConfig>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              className="search-relevance-config"
+            >
+              <div
+                className="euiFlexItem search-relevance-config"
+              >
+                <SearchConfig
+                  dataSourceEnabled={false}
+                  pipeline=""
+                  queryError={
+                    Object {
+                      "errorResponse": Object {
+                        "body": "",
+                        "statusCode": 200,
+                      },
+                      "queryString": "",
+                      "selectIndex": "",
+                    }
+                  }
+                  queryNumber={2}
+                  queryString="{}"
+                  selectedIndex=""
+                  setDataSource={[Function]}
+                  setPipeline={[Function]}
+                  setQueryError={[Function]}
+                  setQueryString={[Function]}
+                  setSelectedIndex={[Function]}
+                >
+                  <EuiTitle
+                    size="xs"
+                  >
+                    <h2
+                      className="euiTitle euiTitle--xsmall"
+                      style={
+                        Object {
+                          "fontSize": "21px",
+                          "fontWeight": "300",
+                        }
+                      }
+                    >
+                      Query 
+                      2
+                    </h2>
+                  </EuiTitle>
+                  <EuiSpacer
+                    size="m"
+                  >
+                    <div
+                      className="euiSpacer euiSpacer--m"
+                    />
+                  </EuiSpacer>
+                  <EuiFlexGroup>
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    >
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
+                        >
+                          <EuiFormRow
+                            describedByIds={Array []}
+                            display="row"
+                            error={false}
+                            fullWidth={true}
+                            hasChildLabel={true}
+                            hasEmptyLabelSpace={false}
+                            isInvalid={false}
+                            label="Index"
+                            labelType="label"
+                          >
+                            <div
+                              className="euiFormRow euiFormRow--fullWidth"
+                              id="random_html_id-row"
+                            >
+                              <div
+                                className="euiFormRow__labelWrapper"
+                              >
+                                <EuiFormLabel
+                                  aria-invalid={false}
+                                  className="euiFormRow__label"
+                                  htmlFor="random_html_id"
+                                  isFocused={false}
+                                  isInvalid={false}
+                                  type="label"
+                                >
+                                  <label
+                                    aria-invalid={false}
+                                    className="euiFormLabel euiFormRow__label"
+                                    htmlFor="random_html_id"
+                                  >
+                                    Index
+                                  </label>
+                                </EuiFormLabel>
+                              </div>
+                              <div
+                                className="euiFormRow__fieldWrapper"
+                              >
+                                <EuiSelect
+                                  aria-label="Search Index"
+                                  hasNoInitialSelection={true}
+                                  id="random_html_id"
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onFocus={[Function]}
+                                  options={Array []}
+                                  value=""
+                                >
+                                  <EuiFormControlLayout
+                                    compressed={false}
+                                    fullWidth={false}
+                                    icon={
+                                      Object {
+                                        "side": "right",
+                                        "type": "arrowDown",
+                                      }
+                                    }
+                                    inputId="random_html_id"
+                                    isLoading={false}
+                                  >
+                                    <div
+                                      className="euiFormControlLayout"
+                                    >
+                                      <div
+                                        className="euiFormControlLayout__childrenWrapper"
+                                      >
+                                        <EuiValidatableControl>
+                                          <select
+                                            aria-label="Search Index"
+                                            className="euiSelect"
+                                            id="random_html_id"
+                                            onBlur={[Function]}
+                                            onChange={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseUp={[Function]}
+                                            value=""
+                                          >
+                                            <option
+                                              disabled={true}
+                                              hidden={true}
+                                              style={
+                                                Object {
+                                                  "display": "none",
+                                                }
+                                              }
+                                              value=""
+                                            >
+                                               
+                                            </option>
+                                          </select>
+                                        </EuiValidatableControl>
+                                        <EuiFormControlLayoutIcons
+                                          compressed={false}
+                                          icon={
+                                            Object {
+                                              "side": "right",
+                                              "type": "arrowDown",
+                                            }
+                                          }
+                                          isLoading={false}
+                                        >
+                                          <div
+                                            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                          >
+                                            <EuiFormControlLayoutCustomIcon
+                                              size="m"
+                                              type="arrowDown"
+                                            >
+                                              <span
+                                                className="euiFormControlLayoutCustomIcon"
+                                              >
+                                                <EuiIcon
+                                                  aria-hidden="true"
+                                                  className="euiFormControlLayoutCustomIcon__icon"
+                                                  size="m"
+                                                  type="arrowDown"
+                                                >
+                                                  <EuiIconArrowDown
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                    focusable="false"
+                                                    role="img"
+                                                    style={null}
+                                                  >
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    >
+                                                      <path
+                                                        d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                                        fillRule="non-zero"
+                                                      />
+                                                    </svg>
+                                                  </EuiIconArrowDown>
+                                                </EuiIcon>
+                                              </span>
+                                            </EuiFormControlLayoutCustomIcon>
+                                          </div>
+                                        </EuiFormControlLayoutIcons>
+                                      </div>
+                                    </div>
+                                  </EuiFormControlLayout>
+                                </EuiSelect>
+                              </div>
+                            </div>
+                          </EuiFormRow>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
+                        >
+                          <EuiFormRow
+                            describedByIds={Array []}
+                            display="row"
+                            fullWidth={true}
+                            hasChildLabel={true}
+                            hasEmptyLabelSpace={false}
+                            helpText="Optional"
+                            label="Pipeline"
+                            labelType="label"
+                          >
+                            <div
+                              className="euiFormRow euiFormRow--fullWidth"
+                              id="random_html_id-row"
+                            >
+                              <div
+                                className="euiFormRow__labelWrapper"
+                              >
+                                <EuiFormLabel
+                                  className="euiFormRow__label"
+                                  htmlFor="random_html_id"
+                                  isFocused={false}
+                                  type="label"
+                                >
+                                  <label
+                                    className="euiFormLabel euiFormRow__label"
+                                    htmlFor="random_html_id"
+                                  >
+                                    Pipeline
+                                  </label>
+                                </EuiFormLabel>
+                              </div>
+                              <div
+                                className="euiFormRow__fieldWrapper"
+                              >
+                                <EuiComboBox
+                                  aria-describedby="random_html_id-help-0"
+                                  async={false}
+                                  compressed={false}
+                                  fullWidth={false}
+                                  id="random_html_id"
+                                  isClearable={true}
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onFocus={[Function]}
+                                  options={
+                                    Array [
+                                      Object {
+                                        "label": "_none",
+                                      },
+                                    ]
+                                  }
+                                  placeholder=""
+                                  selectedOptions={Array []}
+                                  singleSelection={
+                                    Object {
+                                      "asPlainText": true,
+                                    }
+                                  }
+                                  sortMatchesBy="none"
+                                >
+                                  <div
+                                    aria-describedby="random_html_id-help-0"
+                                    aria-expanded={false}
+                                    aria-haspopup="listbox"
+                                    className="euiComboBox"
+                                    onKeyDown={[Function]}
+                                    role="combobox"
+                                  >
+                                    <EuiComboBoxInput
+                                      autoSizeInputRef={[Function]}
+                                      compressed={false}
+                                      fullWidth={false}
+                                      hasSelectedOptions={false}
+                                      id="random_html_id"
+                                      inputRef={[Function]}
+                                      isListOpen={false}
+                                      noIcon={false}
+                                      onChange={[Function]}
+                                      onClear={[Function]}
+                                      onClick={[Function]}
+                                      onCloseListClick={[Function]}
+                                      onFocus={[Function]}
+                                      onOpenListClick={[Function]}
+                                      onRemoveOption={[Function]}
+                                      placeholder=""
+                                      rootId={[Function]}
+                                      searchValue=""
+                                      selectedOptions={Array []}
+                                      singleSelection={
+                                        Object {
+                                          "asPlainText": true,
+                                        }
+                                      }
+                                      toggleButtonRef={[Function]}
+                                      updatePosition={[Function]}
+                                      value=""
+                                    >
+                                      <EuiFormControlLayout
+                                        compressed={false}
+                                        fullWidth={false}
+                                        icon={
+                                          Object {
+                                            "aria-label": "Open list of options",
+                                            "data-test-subj": "comboBoxToggleListButton",
+                                            "disabled": undefined,
+                                            "onClick": [Function],
+                                            "ref": [Function],
+                                            "side": "right",
+                                            "type": "arrowDown",
+                                          }
+                                        }
+                                      >
+                                        <div
+                                          className="euiFormControlLayout"
+                                        >
+                                          <div
+                                            className="euiFormControlLayout__childrenWrapper"
+                                          >
+                                            <div
+                                              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                                              data-test-subj="comboBoxInput"
+                                              onClick={[Function]}
+                                              tabIndex={-1}
+                                            >
+                                              <AutosizeInput
+                                                aria-controls=""
+                                                className="euiComboBox__input"
+                                                data-test-subj="comboBoxSearchInput"
+                                                id="random_html_id"
+                                                injectStyles={true}
+                                                inputRef={[Function]}
+                                                minWidth={1}
+                                                onBlur={[Function]}
+                                                onChange={[Function]}
+                                                onFocus={[Function]}
+                                                role="textbox"
+                                                style={
+                                                  Object {
+                                                    "fontSize": 14,
+                                                  }
+                                                }
+                                                value=""
+                                              >
+                                                <div
+                                                  className="euiComboBox__input"
+                                                  style={
+                                                    Object {
+                                                      "display": "inline-block",
+                                                      "fontSize": 14,
+                                                    }
+                                                  }
+                                                >
+                                                  <input
+                                                    aria-controls=""
+                                                    data-test-subj="comboBoxSearchInput"
+                                                    id="random_html_id"
+                                                    onBlur={[Function]}
+                                                    onChange={[Function]}
+                                                    onFocus={[Function]}
+                                                    role="textbox"
+                                                    style={
+                                                      Object {
+                                                        "boxSizing": "content-box",
+                                                        "width": "2px",
+                                                      }
+                                                    }
+                                                    value=""
+                                                  />
+                                                  <div
+                                                    style={
+                                                      Object {
+                                                        "height": 0,
+                                                        "left": 0,
+                                                        "overflow": "scroll",
+                                                        "position": "absolute",
+                                                        "top": 0,
+                                                        "visibility": "hidden",
+                                                        "whiteSpace": "pre",
+                                                      }
+                                                    }
+                                                  />
+                                                </div>
+                                              </AutosizeInput>
+                                            </div>
+                                            <EuiFormControlLayoutIcons
+                                              compressed={false}
+                                              icon={
+                                                Object {
+                                                  "aria-label": "Open list of options",
+                                                  "data-test-subj": "comboBoxToggleListButton",
+                                                  "disabled": undefined,
+                                                  "onClick": [Function],
+                                                  "ref": [Function],
+                                                  "side": "right",
+                                                  "type": "arrowDown",
+                                                }
+                                              }
+                                            >
+                                              <div
+                                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                              >
+                                                <EuiFormControlLayoutCustomIcon
+                                                  aria-label="Open list of options"
+                                                  data-test-subj="comboBoxToggleListButton"
+                                                  iconRef={[Function]}
+                                                  onClick={[Function]}
+                                                  size="m"
+                                                  type="arrowDown"
+                                                >
+                                                  <button
+                                                    aria-label="Open list of options"
+                                                    className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                                    data-test-subj="comboBoxToggleListButton"
+                                                    onClick={[Function]}
+                                                    type="button"
+                                                  >
+                                                    <EuiIcon
+                                                      aria-hidden="true"
+                                                      className="euiFormControlLayoutCustomIcon__icon"
+                                                      size="m"
+                                                      type="arrowDown"
+                                                    >
+                                                      <EuiIconArrowDown
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                        focusable="false"
+                                                        role="img"
+                                                        style={null}
+                                                      >
+                                                        <svg
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                          focusable="false"
+                                                          height={16}
+                                                          role="img"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width={16}
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        >
+                                                          <path
+                                                            d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                                            fillRule="non-zero"
+                                                          />
+                                                        </svg>
+                                                      </EuiIconArrowDown>
+                                                    </EuiIcon>
+                                                  </button>
+                                                </EuiFormControlLayoutCustomIcon>
+                                              </div>
+                                            </EuiFormControlLayoutIcons>
+                                          </div>
+                                        </div>
+                                      </EuiFormControlLayout>
+                                    </EuiComboBoxInput>
+                                  </div>
+                                </EuiComboBox>
+                                <EuiFormHelpText
+                                  className="euiFormRow__text"
+                                  id="random_html_id-help-0"
+                                  key="Optional"
+                                >
+                                  <div
+                                    className="euiFormHelpText euiFormRow__text"
+                                    id="random_html_id-help-0"
+                                  >
+                                    Optional
+                                  </div>
+                                </EuiFormHelpText>
+                              </div>
+                            </div>
+                          </EuiFormRow>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                  <EuiFormRow
+                    describedByIds={Array []}
+                    display="row"
+                    error={false}
+                    fullWidth={true}
+                    hasChildLabel={true}
+                    hasEmptyLabelSpace={false}
+                    helpText={
+                      <p>
+                        Enter a query in
+                         
+                        <a
+                          href="https://opensearch.org/docs/latest/query-dsl/index/"
+                        >
+                          OpenSearch Query DSL
+                        </a>
+                        . Use %SearchText% to refer to the text in the search bar
+                      </p>
+                    }
+                    isInvalid={false}
+                    label="Query"
+                    labelAppend={
+                      <EuiText
+                        size="xs"
+                      >
+                        <EuiButtonEmpty
+                          color="primary"
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          Help
+                        </EuiButtonEmpty>
+                      </EuiText>
+                    }
+                    labelType="label"
+                  >
+                    <div
+                      className="euiFormRow euiFormRow--fullWidth"
+                      id="random_html_id-row"
+                    >
+                      <div
+                        className="euiFormRow__labelWrapper"
+                      >
+                        <EuiFormLabel
+                          aria-invalid={false}
+                          className="euiFormRow__label"
+                          htmlFor="random_html_id"
+                          isFocused={false}
+                          isInvalid={false}
+                          type="label"
+                        >
+                          <label
+                            aria-invalid={false}
+                            className="euiFormLabel euiFormRow__label"
+                            htmlFor="random_html_id"
+                          >
+                            Query
+                          </label>
+                        </EuiFormLabel>
+                         
+                        <EuiText
+                          size="xs"
+                        >
+                          <div
+                            className="euiText euiText--extraSmall"
+                          >
+                            <EuiButtonEmpty
+                              color="primary"
+                              onClick={[Function]}
+                              size="xs"
+                            >
+                              <button
+                                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                                disabled={false}
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <EuiButtonContent
+                                  className="euiButtonEmpty__content"
+                                  iconSide="left"
+                                  iconSize="s"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButtonEmpty__text",
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiButtonContent euiButtonEmpty__content"
+                                  >
+                                    <span
+                                      className="euiButtonEmpty__text"
+                                    >
+                                      Help
+                                    </span>
+                                  </span>
+                                </EuiButtonContent>
+                              </button>
+                            </EuiButtonEmpty>
+                          </div>
+                        </EuiText>
+                      </div>
+                      <div
+                        className="euiFormRow__fieldWrapper"
+                      >
+                        <EuiCodeEditor
+                          aria-describedby="random_html_id-help-0"
+                          aria-label="Code Editor"
+                          height="10rem"
+                          id="random_html_id"
+                          mode="json"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          setOptions={
+                            Object {
+                              "enableBasicAutocompletion": true,
+                              "enableLiveAutocompletion": true,
+                              "fontSize": "14px",
+                            }
+                          }
+                          showPrintMargin={false}
+                          tabSize={2}
+                          theme="textmate"
+                          value="{}"
+                          width="100%"
+                        >
+                          <div
+                            className="euiCodeEditorWrapper"
+                            data-test-subj="codeEditorContainer"
+                            style={
+                              Object {
+                                "height": "10rem",
+                                "width": "100%",
+                              }
+                            }
+                          >
+                            <button
+                              className="euiCodeEditorKeyboardHint"
+                              data-test-subj="codeEditorHint"
+                              id="random_html_id"
+                              onClick={[Function]}
+                            >
+                              <p
+                                className="euiText"
+                              >
+                                <EuiI18n
+                                  default="Press Enter to start editing."
+                                  token="euiCodeEditor.startEditing"
+                                >
+                                  Press Enter to start editing.
+                                </EuiI18n>
+                              </p>
+                              <p
+                                className="euiText"
+                              >
+                                <EuiI18n
+                                  default="When you're done, press Escape to stop editing."
+                                  token="euiCodeEditor.stopEditing"
+                                >
+                                  When you're done, press Escape to stop editing.
+                                </EuiI18n>
+                              </p>
+                            </button>
+                            <ReactAce
+                              aria-describedby="random_html_id-help-0"
+                              aria-label="Code Editor"
+                              commands={
+                                Array [
+                                  Object {
+                                    "bindKey": Object {
+                                      "mac": "Esc",
+                                      "win": "Esc",
+                                    },
+                                    "exec": [Function],
+                                    "name": "stopEditingOnEsc",
+                                  },
+                                ]
+                              }
+                              cursorStart={1}
+                              editorProps={
+                                Object {
+                                  "$blockScrolling": Infinity,
+                                }
+                              }
+                              enableBasicAutocompletion={false}
+                              enableLiveAutocompletion={false}
+                              enableSnippets={false}
+                              focus={false}
+                              fontSize={12}
+                              height="10rem"
+                              highlightActiveLine={true}
+                              id="random_html_id"
+                              maxLines={null}
+                              minLines={null}
+                              mode="json"
+                              name="random_html_id"
+                              navigateToFileEnd={true}
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onLoad={null}
+                              onPaste={null}
+                              onScroll={null}
+                              placeholder={null}
+                              readOnly={false}
+                              scrollMargin={
+                                Array [
+                                  0,
+                                  0,
+                                  0,
+                                  0,
+                                ]
+                              }
+                              setOptions={
+                                Object {
+                                  "enableBasicAutocompletion": true,
+                                  "enableLiveAutocompletion": true,
+                                  "fontSize": "14px",
+                                }
+                              }
+                              showGutter={true}
+                              showPrintMargin={false}
+                              style={Object {}}
+                              tabSize={2}
+                              theme="textmate"
+                              value="{}"
+                              width="100%"
+                              wrapEnabled={false}
+                            >
+                              <div
+                                id="random_html_id"
+                                style={
+                                  Object {
+                                    "height": "10rem",
+                                    "width": "100%",
+                                  }
+                                }
+                              />
+                            </ReactAce>
+                          </div>
+                        </EuiCodeEditor>
+                        <EuiFormHelpText
+                          className="euiFormRow__text"
+                          id="random_html_id-help-0"
+                          key="0"
+                        >
+                          <div
+                            className="euiFormHelpText euiFormRow__text"
+                            id="random_html_id-help-0"
+                          >
+                            <p>
+                              Enter a query in
+                               
+                              <a
+                                href="https://opensearch.org/docs/latest/query-dsl/index/"
+                              >
+                                OpenSearch Query DSL
+                              </a>
+                              . Use %SearchText% to refer to the text in the search bar
+                            </p>
+                          </div>
+                        </EuiFormHelpText>
+                      </div>
+                    </div>
+                  </EuiFormRow>
+                </SearchConfig>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </div>
+    </EuiPanel>
+  </SearchConfigsPanel>
+</SearchRelevanceContextProvider>
+`;
diff --git a/public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx b/public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx
index 4cc69a7a..76d47451 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx
+++ b/public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx
@@ -3,23 +3,64 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { waitFor } from '@testing-library/react';
 import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
-import { waitFor } from '@testing-library/react';
-import { SearchConfig } from '../search_configs/search_config';
-import { SearchRelevanceContextProvider } from '../../../../../contexts';
-import { TEST_QUERY_STRING } from '../../../../../../test/constants';
 import { initialQueryErrorState } from '../../../../../../public/types/index';
+import { TEST_QUERY_STRING } from '../../../../../../test/constants';
+import { SearchRelevanceContextProvider } from '../../../../../contexts';
+import { SearchConfig } from '../search_configs/search_config';
 
 describe('Flyout component', () => {
   configure({ adapter: new Adapter() });
 
+  it('Renders flyout component when multi-datasource is enabled', async () => {
+    const setQueryString = jest.fn();
+    const setSelectedIndex = jest.fn();
+    const setPipeline = jest.fn();
+    const setQueryError = jest.fn();
+    const setDataSourceManagement = jest.fn();
+    const wrapper = mount(
+      <SearchRelevanceContextProvider>
+        <SearchConfig
+          queryNumber={1}
+          queryString={TEST_QUERY_STRING}
+          setQueryString={setQueryString}
+          selectedIndex={''}
+          setSelectedIndex={setSelectedIndex}
+          pipeline={''}
+          setPipeline={setPipeline}
+          queryError={initialQueryErrorState}
+          setQueryError={setQueryError}
+          dataSourceManagement={{ ui: { DataSourceSelector: <></> } }}
+        />
+      </SearchRelevanceContextProvider>
+    );
+
+    wrapper.update();
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+      wrapper.find('EuiCodeEditor').prop('onChange')?.({ target: { value: '' } });
+      wrapper.find('EuiSelect').prop('onChange')?.({ target: {} });
+      wrapper.find('EuiSelect').prop('onBlur')?.({ target: {} });
+      wrapper.find('EuiComboBox').prop('onChange')?.({ target: { selectedPipelineOptions: [] } });
+      wrapper.find('EuiComboBox').prop('onChange')?.({
+        target: { selectedPipelineOptions: [{ label: '_none' }] },
+      });
+    });
+    expect(setQueryString).toHaveBeenCalledTimes(1);
+    expect(setSelectedIndex).toHaveBeenCalledTimes(2);
+    expect(setPipeline).toHaveBeenCalledTimes(3);
+    expect(setQueryError).toHaveBeenCalledTimes(3);
+  });
+
   it('Renders flyout component', async () => {
     const setQueryString = jest.fn();
     const setSelectedIndex = jest.fn();
     const setPipeline = jest.fn();
     const setQueryError = jest.fn();
+    const setDataSourceManagement = jest.fn();
     const wrapper = mount(
       <SearchRelevanceContextProvider>
         <SearchConfig
@@ -32,6 +73,7 @@ describe('Flyout component', () => {
           setPipeline={setPipeline}
           queryError={initialQueryErrorState}
           setQueryError={setQueryError}
+          dataSourceEnabled={false}
         />
       </SearchRelevanceContextProvider>
     );
@@ -48,8 +90,8 @@ describe('Flyout component', () => {
       });
     });
     expect(setQueryString).toHaveBeenCalledTimes(1);
-    expect(setSelectedIndex).toHaveBeenCalledTimes(1);
-    expect(setPipeline).toHaveBeenCalledTimes(2);
+    expect(setSelectedIndex).toHaveBeenCalledTimes(2);
+    expect(setPipeline).toHaveBeenCalledTimes(3);
     expect(setQueryError).toHaveBeenCalledTimes(3);
   });
 });
diff --git a/public/components/query_compare/search_result/search_components/__tests__/search_configs.test.tsx b/public/components/query_compare/search_result/search_components/__tests__/search_configs.test.tsx
index 1efb59d3..d18ffad0 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/search_configs.test.tsx
+++ b/public/components/query_compare/search_result/search_components/__tests__/search_configs.test.tsx
@@ -3,14 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { waitFor } from '@testing-library/react';
 import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
-import { waitFor } from '@testing-library/react';
-import { SearchConfigsPanel } from '../search_configs/search_configs';
-import { SearchRelevanceContextProvider } from '../../../../../contexts';
-import { TEST_QUERY_STRING } from '../../../../../../test/constants';
 import { initialQueryErrorState } from '../../../../../../public/types/index';
+import { TEST_QUERY_STRING } from '../../../../../../test/constants';
+import { SearchRelevanceContextProvider } from '../../../../../contexts';
+import { SearchConfigsPanel } from '../search_configs/search_configs';
 
 describe('Flyout component', () => {
   configure({ adapter: new Adapter() });
@@ -27,6 +27,30 @@ describe('Flyout component', () => {
           queryError2={initialQueryErrorState}
           setQueryError1={() => {}}
           setQueryError2={() => {}}
+          dataSourceManagement={{ ui: { DataSourceSelector: <></> } }}
+        />
+      </SearchRelevanceContextProvider>
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+  it('Renders flyout component when multi dataSource enabled', async () => {
+    const wrapper = mount(
+      <SearchRelevanceContextProvider>
+        <SearchConfigsPanel
+          queryString1={TEST_QUERY_STRING}
+          queryString2={TEST_QUERY_STRING}
+          setQueryString1={() => {}}
+          setQueryString2={() => {}}
+          queryError1={initialQueryErrorState}
+          queryError2={initialQueryErrorState}
+          setQueryError1={() => {}}
+          setQueryError2={() => {}}
+          dataSourceEnabled={false}
         />
       </SearchRelevanceContextProvider>
     );
diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx b/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx
index 654ad012..252db819 100644
--- a/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx
+++ b/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx
@@ -3,23 +3,39 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { FunctionComponent } from 'react';
 import {
-  EuiTitle,
-  EuiSpacer,
-  EuiFormRow,
-  EuiSelect,
-  EuiCodeEditor,
-  EuiText,
   EuiButtonEmpty,
+  EuiCodeEditor,
+  EuiComboBox,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiComboBox,
+  EuiFormRow,
+  EuiSelect,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
 } from '@elastic/eui';
+import React, { FunctionComponent, useEffect } from 'react';
 
+import { AppMountParameters, CoreStart, MountPoint, NotificationsStart, SavedObjectsStart, ToastsStart } from '../../../../../../../../src/core/public';
+import { DataSourceManagementPluginSetup } from '../../../../../../../../src/plugins/data_source_management/public';
+import { DataSourceOption } from '../../../../../../../../src/plugins/data_source_management/public/components/data_source_selector/data_source_selector';
+import { NavigationPublicPluginStart } from '../../../../../../../../src/plugins/navigation/public';
 import { useSearchRelevanceContext } from '../../../../../contexts';
 import { QueryError, QueryStringError, SelectIndexError } from '../../../../../types/index';
 
+export interface SearchRelevanceServices extends CoreStart {
+  setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+  appBasePath: AppMountParameters['history'];
+  element: AppMountParameters['element'];
+  navigation: NavigationPublicPluginStart;
+  toastNotifications: ToastsStart;
+  history: AppMountParameters['history'];
+  overlays: CoreStart['overlays'];
+  chrome: CoreStart['chrome'];
+  uiSettings: CoreStart['uiSettings'];
+}
+
 interface SearchConfigProps {
   queryNumber: 1 | 2;
   queryString: string;
@@ -30,6 +46,14 @@ interface SearchConfigProps {
   setQueryError: React.Dispatch<React.SetStateAction<QueryError>>;
   pipeline: string;
   setPipeline: React.Dispatch<React.SetStateAction<string>>;
+  dataSourceEnabled: boolean;
+  notifications: NotificationsStart;
+  savedObjects: SavedObjectsStart;
+  setDataSource: React.Dispatch<React.SetStateAction<string>>;
+  dataSourceManagement: DataSourceManagementPluginSetup;
+  navigation: NavigationPublicPluginStart;
+  setActionMenu: (menuMount: MountPoint | undefined) => void;
+  dataSourceOptions: DataSourceOption[] 
 }
 
 export const SearchConfig: FunctionComponent<SearchConfigProps> = ({
@@ -42,8 +66,15 @@ export const SearchConfig: FunctionComponent<SearchConfigProps> = ({
   setQueryError,
   pipeline,
   setPipeline,
+  dataSourceEnabled,
+  savedObjects,
+  notifications,
+  dataSourceManagement,
+  navigation,
+  setActionMenu,
+  dataSourceOptions,
 }) => {
-  const { documentsIndexes, pipelines, setShowFlyout } = useSearchRelevanceContext();
+  const { documentsIndexes1, setDataSource1, setDataSource2, documentsIndexes2, fetchedPipelines1, fetchedPipelines2, setShowFlyout, datasource1, datasource2} = useSearchRelevanceContext();
   // On select index
   const onChangeSelectedIndex: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
     setSelectedIndex(e.target.value);
@@ -53,7 +84,10 @@ export const SearchConfig: FunctionComponent<SearchConfigProps> = ({
       selectIndex: '',
     }));
   };
-
+  
+  const documentIndex = queryNumber === 1? documentsIndexes1: documentsIndexes2
+  console.log(fetchedPipelines1)
+  const pipelines = queryNumber === 1? fetchedPipelines1: fetchedPipelines2
   // Sort search pipelines based off of each individual pipeline name.
   const sortedPipelines = [...Object.keys(pipelines)]
     .sort((a, b) => a.localeCompare(b))
@@ -102,7 +136,26 @@ export const SearchConfig: FunctionComponent<SearchConfigProps> = ({
       }));
     }
   };
+  const onSelectedDataSource = (e) => {
+    const dataConnectionId = e[0] ? e[0].id : undefined;
+    if(queryNumber == 1){
+      setDataSource1(dataConnectionId)
+    }
+    else{
+      setDataSource2(dataConnectionId)
+    }   
+    setPipeline('')
+  }
+  useEffect(() => {
+    setSelectedIndex('')
+    setPipeline('')
+  }, [datasource1, datasource2]);
+
+  let DataSourceSelector;
 
+  if (dataSourceEnabled) {
+    DataSourceSelector = dataSourceManagement.ui.DataSourceSelector;
+  } 
   return (
     <>
       <EuiTitle size="xs">
@@ -110,6 +163,23 @@ export const SearchConfig: FunctionComponent<SearchConfigProps> = ({
       </EuiTitle>
       <EuiSpacer size="m" />
       <EuiFlexGroup>
+        {dataSourceEnabled && (
+          <EuiFlexItem>
+            <EuiFormRow 
+              fullWidth
+              label="Data Source"
+            >
+              <DataSourceSelector
+                savedObjectsClient={savedObjects.client}
+                notifications={notifications} 
+                onSelectedDataSource={onSelectedDataSource}
+                disabled={false} 
+                fullWidth={false}
+                removePrepend={true}
+                defaultOption= {[]}
+              />
+            </EuiFormRow>
+          </EuiFlexItem> )}
         <EuiFlexItem>
           <EuiFormRow
             fullWidth
@@ -119,7 +189,7 @@ export const SearchConfig: FunctionComponent<SearchConfigProps> = ({
           >
             <EuiSelect
               hasNoInitialSelection={true}
-              options={documentsIndexes.map(({ index }) => ({
+              options={documentIndex.map(({ index }) => ({
                 value: index,
                 text: index,
               }))}
diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx b/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx
index f214ddb6..3b244189 100644
--- a/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx
+++ b/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx
@@ -3,15 +3,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
 import React from 'react';
-import { EuiPanel, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import '../../../../../ace-themes/sql_console';
-import { SearchConfig } from './search_config';
 import { useSearchRelevanceContext } from '../../../../../contexts';
+import { SearchConfig } from './search_config';
 
-import './search_configs.scss';
+import { CoreStart, MountPoint } from '../../../../../../../../src/core/public';
+import { DataSourceManagementPluginSetup } from '../../../../../../../../src/plugins/data_source_management/public';
+import { DataSourceOption } from '../../../../../../../../src/plugins/data_source_management/public/components/data_source_selector/data_source_selector';
+import { NavigationPublicPluginStart } from '../../../../../../../../src/plugins/navigation/public';
 import { QueryError } from '../../../../../../public/types/index';
+import './search_configs.scss';
 
 interface SearchConfigsPanelProps {
   queryString1: string;
@@ -22,6 +26,13 @@ interface SearchConfigsPanelProps {
   queryError2: QueryError;
   setQueryError1: React.Dispatch<React.SetStateAction<QueryError>>;
   setQueryError2: React.Dispatch<React.SetStateAction<QueryError>>;
+  dataSourceEnabled: boolean;
+  savedObjects: CoreStart['savedObjects'];
+  notifications: CoreStart['notifications'];
+  dataSourceManagement: DataSourceManagementPluginSetup;
+  navigation: NavigationPublicPluginStart;
+  setActionMenu: (menuMount: MountPoint | undefined) => void;
+  dataSourceOptions: DataSourceOption[];
 }
 
 export const SearchConfigsPanel = ({
@@ -33,6 +44,13 @@ export const SearchConfigsPanel = ({
   queryError2,
   setQueryError1,
   setQueryError2,
+  dataSourceEnabled,
+  savedObjects,
+  dataSourceManagement,
+  setActionMenu,
+  navigation,
+  dataSourceOptions,
+  notifications
 }: SearchConfigsPanelProps) => {
   const {
     selectedIndex1,
@@ -43,6 +61,10 @@ export const SearchConfigsPanel = ({
     setPipeline1,
     pipeline2,
     setPipeline2,
+    datasource1,
+    setDataSource1,
+    datasource2,
+    setDataSource2,
   } = useSearchRelevanceContext();
 
   return (
@@ -65,6 +87,14 @@ export const SearchConfigsPanel = ({
             setQueryError={setQueryError1}
             pipeline={pipeline1}
             setPipeline={setPipeline1}
+            setDataSource={setDataSource1}
+            dataSourceEnabled={dataSourceEnabled}
+            savedObjects={savedObjects}
+            dataSourceManagement={dataSourceManagement}
+            navigation={navigation}
+            setActionMenu={setActionMenu}
+            dataSourceOptions={dataSourceOptions}
+            notifications={notifications}
           />
         </EuiFlexItem>
         <EuiFlexItem className="search-relevance-config">
@@ -78,6 +108,14 @@ export const SearchConfigsPanel = ({
             setQueryError={setQueryError2}
             pipeline={pipeline2}
             setPipeline={setPipeline2}
+            setDataSource={setDataSource2}
+            dataSourceEnabled={dataSourceEnabled}
+            savedObjects={savedObjects}
+            dataSourceManagement={dataSourceManagement}
+            navigation={navigation}
+            setActionMenu={setActionMenu}
+            dataSourceOptions={dataSourceOptions}
+            notifications={notifications}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
diff --git a/public/contexts/index.tsx b/public/contexts/index.tsx
index d0fd077f..22eb54d7 100644
--- a/public/contexts/index.tsx
+++ b/public/contexts/index.tsx
@@ -5,12 +5,17 @@
 
 import React, { createContext, useContext, useState } from 'react';
 
+import { DataSourceOption } from '../../../../src/plugins/data_source_management/public/components/data_source_selector/data_source_selector';
 import { DocumentsIndex, SearchResults } from '../types/index';
-import { getDocumentRank, DocumentRank } from './utils';
+import { DocumentRank, getDocumentRank } from './utils';
 
 export interface SearchRelevanceContextProps {
   documentsIndexes: DocumentsIndex[];
   setDocumentsIndexes: React.Dispatch<React.SetStateAction<DocumentsIndex[]>>;
+  documentsIndexes1: DocumentsIndex[];
+  setDocumentsIndexes1: React.Dispatch<React.SetStateAction<DocumentsIndex[]>>;
+  documentsIndexes2: DocumentsIndex[];
+  setDocumentsIndexes2: React.Dispatch<React.SetStateAction<DocumentsIndex[]>>;
   showFlyout: boolean;
   setShowFlyout: React.Dispatch<React.SetStateAction<boolean>>;
   comparedResult1: DocumentRank;
@@ -27,6 +32,18 @@ export interface SearchRelevanceContextProps {
   setPipeline1: React.Dispatch<React.SetStateAction<string>>;
   pipeline2: string;
   setPipeline2: React.Dispatch<React.SetStateAction<string>>;
+  datasource1: string;
+  setDataSource1: React.Dispatch<React.SetStateAction<string>>;
+  datasource2: string;
+  setDataSource2: React.Dispatch<React.SetStateAction<string>>;
+  datasourceItems: {}
+  setDatasourceItems: React.Dispatch<React.SetStateAction<{}>>;
+  fetchedPipelines1: {};
+  setFetchedPipelines1: React.Dispatch<React.SetStateAction<{}>>;
+  fetchedPipelines2: {};
+  setFetchedPipelines2: React.Dispatch<React.SetStateAction<{}>>;
+  dataSourceOptions: DataSourceOption[]
+  setDataSourceOptions: React.Dispatch<React.SetStateAction<DataSourceOption[]>>;
 }
 
 export const SearchRelevanceContext = createContext<SearchRelevanceContextProps | null>(null);
@@ -42,7 +59,10 @@ export const useSearchRelevanceContext = () => {
 };
 
 export const SearchRelevanceContextProvider = ({ children }: { children: React.ReactNode }) => {
+
   const [documentsIndexes, setDocumentsIndexes] = useState<DocumentsIndex[]>([]);
+  const [documentsIndexes1, setDocumentsIndexes1] = useState<DocumentsIndex[]>([]);
+  const [documentsIndexes2, setDocumentsIndexes2] = useState<DocumentsIndex[]>([]);
   const [showFlyout, setShowFlyout] = useState(false);
   const [comparedResult1, setComparedResult1] = useState<DocumentRank>({});
   const [comparedResult2, setComparedResult2] = useState<DocumentRank>({});
@@ -51,6 +71,11 @@ export const SearchRelevanceContextProvider = ({ children }: { children: React.R
   const [pipelines, setPipelines] = useState<{}>({});
   const [pipeline1, setPipeline1] = useState('');
   const [pipeline2, setPipeline2] = useState('');
+  const [datasource1, setDataSource1] = useState('');
+  const [datasource2, setDataSource2] = useState('');
+  const [fetchedPipelines1, setFetchedPipelines1] = useState<{}>({});
+  const [fetchedPipelines2, setFetchedPipelines2] = useState<{}>({});
+  const [dataSourceOptions, setDataSourceOptions] = useState<DataSourceOption[]>([])
 
   const updateComparedResult1 = (result: SearchResults) => {
     setComparedResult1(getDocumentRank(result?.hits?.hits));
@@ -65,6 +90,10 @@ export const SearchRelevanceContextProvider = ({ children }: { children: React.R
       value={{
         documentsIndexes,
         setDocumentsIndexes,
+        documentsIndexes1,
+        setDocumentsIndexes1,
+        documentsIndexes2,
+        setDocumentsIndexes2,
         showFlyout,
         setShowFlyout,
         comparedResult1,
@@ -81,6 +110,16 @@ export const SearchRelevanceContextProvider = ({ children }: { children: React.R
         setPipeline1,
         pipeline2,
         setPipeline2,
+        datasource1,
+        setDataSource1,
+        datasource2,
+        setDataSource2,
+        fetchedPipelines1,
+        setFetchedPipelines1,
+        fetchedPipelines2,
+        setFetchedPipelines2,
+        dataSourceOptions,
+        setDataSourceOptions
       }}
     >
       {children}
diff --git a/public/plugin.ts b/public/plugin.ts
index 6998757f..2c5bc55f 100644
--- a/public/plugin.ts
+++ b/public/plugin.ts
@@ -5,16 +5,27 @@
 
 import { i18n } from '@osd/i18n';
 import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
+import { DataSourcePluginSetup, DataSourcePluginStart } from '../../../src/plugins/data_source/public';
+import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public';
+import { PLUGIN_ID, PLUGIN_NAME } from '../common';
 import {
+  AppPluginStartDependencies,
   SearchRelevancePluginSetup,
   SearchRelevancePluginStart,
-  AppPluginStartDependencies,
 } from './types';
-import { PLUGIN_NAME, PLUGIN_ID } from '../common';
+
+export interface SearchRelevancePluginSetupDependencies {
+  dataSource: DataSourcePluginSetup;
+  dataSourceManagement: DataSourceManagementPluginSetup
+}
+
+export interface SearchRelevanceStartDependencies {
+  dataSource: DataSourcePluginStart;
+}
 
 export class SearchRelevancePlugin
   implements Plugin<SearchRelevancePluginSetup, SearchRelevancePluginStart> {
-  public setup(core: CoreSetup): SearchRelevancePluginSetup {
+  public setup(core: CoreSetup,  {dataSource, dataSourceManagement} : SearchRelevancePluginSetupDependencies): SearchRelevancePluginSetup {
     // Register an application into the side navigation menu
     core.application.register({
       id: PLUGIN_ID,
@@ -30,7 +41,7 @@ export class SearchRelevancePlugin
         // Get start services as specified in opensearch_dashboards.json
         const [coreStart, depsStart] = await core.getStartServices();
         // Render the application
-        return renderApp(coreStart, depsStart as AppPluginStartDependencies, params);
+        return renderApp(coreStart, depsStart as AppPluginStartDependencies, params, dataSourceManagement);
       },
     });
 
@@ -47,7 +58,7 @@ export class SearchRelevancePlugin
     };
   }
 
-  public start(core: CoreStart): SearchRelevancePluginStart {
+  public start(core: CoreStart, {dataSource}: SearchRelevanceStartDependencies): SearchRelevancePluginStart {
     return {};
   }
 
diff --git a/public/types.ts b/public/types.ts
index 8db98969..4e94ca24 100644
--- a/public/types.ts
+++ b/public/types.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { DataSourcePluginStart } from '../../../src/plugins/data_source/public/types';
 import { NavigationPublicPluginStart } from '../../../src/plugins/navigation/public';
 
 export interface SearchRelevancePluginSetup {
@@ -13,4 +14,5 @@ export interface SearchRelevancePluginStart {}
 
 export interface AppPluginStartDependencies {
   navigation: NavigationPublicPluginStart;
+  dataSource: DataSourcePluginStart;
 }
diff --git a/public/types/index.ts b/public/types/index.ts
index d6100158..16dcd1ac 100644
--- a/public/types/index.ts
+++ b/public/types/index.ts
@@ -74,3 +74,9 @@ export const initialQueryErrorState: QueryError = {
     statusCode: 200,
   },
 };
+
+export interface datasourceElements {
+  index : DocumentsIndex [],
+  dataConnectionId: string,
+  pipeline: {}
+}
\ No newline at end of file
diff --git a/server/plugin.ts b/server/plugin.ts
index 2e58b481..41240359 100644
--- a/server/plugin.ts
+++ b/server/plugin.ts
@@ -7,21 +7,26 @@ import { Observable } from 'rxjs';
 import { first } from 'rxjs/operators';
 
 import {
-  PluginInitializerContext,
   CoreSetup,
   CoreStart,
-  IContextProvider,
+  ILegacyClusterClient,
   Logger,
   Plugin,
-  ILegacyClusterClient,
-  RequestHandler,
+  PluginInitializerContext
 } from '../../../src/core/server';
 import { defineRoutes } from './routes';
 
-import { MetricsService, MetricsServiceSetup } from './metrics/metrics_service';
+import { DataSourcePluginSetup } from '../../../src/plugins/data_source/server/types';
+import { DataSourceManagementPlugin } from '../../../src/plugins/data_source_management/public/plugin';
 import { SearchRelevancePluginConfigType } from '../config';
+import { MetricsService, MetricsServiceSetup } from './metrics/metrics_service';
 import { SearchRelevancePluginSetup, SearchRelevancePluginStart } from './types';
 
+export interface SearchRelevancePluginSetupDependencies {
+  dataSourceManagement: ReturnType<DataSourceManagementPlugin['setup']>;
+  dataSource: DataSourcePluginSetup;
+}
+
 export class SearchRelevancePlugin
   implements Plugin<SearchRelevancePluginSetup, SearchRelevancePluginStart>
 {
@@ -35,7 +40,9 @@ export class SearchRelevancePlugin
     this.metricsService = new MetricsService(this.logger.get('metrics-service'));
   }
 
-  public async setup(core: CoreSetup) {
+  public async setup(core: CoreSetup, {dataSource}: SearchRelevancePluginSetupDependencies) {
+
+    const dataSourceEnabled = !!dataSource;
     this.logger.debug('SearchRelevance: Setup');
 
     const config: SearchRelevancePluginConfigType = await this.config$.pipe(first()).toPromise();
@@ -47,8 +54,10 @@ export class SearchRelevancePlugin
 
     const router = core.http.createRouter();
 
-    const opensearchSearchRelevanceClient: ILegacyClusterClient =
-      core.opensearch.legacy.createClient('opensearch_search_relevance');
+    let opensearchSearchRelevanceClient: ILegacyClusterClient | undefined = undefined;
+      opensearchSearchRelevanceClient = core.opensearch.legacy.createClient(
+        'opensearch_search_relevance',
+      )
 
     // @ts-ignore
     core.http.registerRouteHandlerContext('searchRelevance', (context, request) => {
@@ -60,7 +69,7 @@ export class SearchRelevancePlugin
     });
 
     // Register server side APIs
-    defineRoutes(router);
+    defineRoutes(router,core.opensearch,dataSourceEnabled);
 
     return {};
   }
diff --git a/server/routes/dsl_route.ts b/server/routes/dsl_route.ts
index 94671f8c..ee65f456 100644
--- a/server/routes/dsl_route.ts
+++ b/server/routes/dsl_route.ts
@@ -3,12 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { schema } from '@osd/config-schema';
 import { RequestParams } from '@opensearch-project/opensearch';
+import { schema } from '@osd/config-schema';
 
-import { IRouter } from '../../../../src/core/server';
-import { METRIC_NAME, METRIC_ACTION } from '../metrics';
-import { ServiceEndpoints, SEARCH_API } from '../../common';
+import { ILegacyScopedClusterClient, IRouter, OpenSearchServiceSetup } from '../../../../src/core/server';
+import { SEARCH_API, ServiceEndpoints } from '../../common';
+import { METRIC_ACTION, METRIC_NAME } from '../metrics';
 
 interface SearchResultsResponse {
   result1?: Object;
@@ -19,14 +19,14 @@ interface SearchResultsResponse {
 
 const performance = require('perf_hooks').performance;
 
-export function registerDslRoute(router: IRouter) {
+export function registerDslRoute(router: IRouter,  openSearchServiceSetup: OpenSearchServiceSetup, dataSourceEnabled: boolean) {
   router.post(
     {
       path: ServiceEndpoints.GetSearchResults,
       validate: { body: schema.any() },
     },
     async (context, request, response) => {
-      const { query1, query2 } = request.body;
+      const { query1, dataSourceId1, query2, dataSourceId2 } = request.body;
       const actionName =
         query1 && query2 ? METRIC_ACTION.COMPARISON_SEARCH : METRIC_ACTION.SINGLE_SEARCH;
       const resBody: SearchResultsResponse = {};
@@ -46,13 +46,19 @@ export function registerDslRoute(router: IRouter) {
                 size,
                 body: rest,
               };
-
         const start = performance.now();
         try {
-          const resp = await context.core.opensearch.legacy.client.callAsCurrentUser(
-            'search',
-            params
-          );
+          let resp;
+          if(dataSourceEnabled && dataSourceId1){
+            const client = context.dataSource.opensearch.legacy.getClient(dataSourceId1);
+            resp = await client.callAPI('search', params);
+          }
+          else{
+              resp = await context.core.opensearch.legacy.client.callAsCurrentUser(
+                'search',
+                params
+              );
+          }
           const end = performance.now();
           context.searchRelevance.metricsService.addMetric(
             METRIC_NAME.SEARCH_RELEVANCE,
@@ -100,10 +106,17 @@ export function registerDslRoute(router: IRouter) {
 
         const start = performance.now();
         try {
-          const resp = await context.core.opensearch.legacy.client.callAsCurrentUser(
-            'search',
-            params
-          );
+          let resp;
+          if(dataSourceEnabled && dataSourceId2){
+            const client = context.dataSource.opensearch.legacy.getClient(dataSourceId2);
+            resp = await client.callAPI('search', params);
+          }
+          else{
+              resp = await context.core.opensearch.legacy.client.callAsCurrentUser(
+                'search',
+                params
+              );
+          }
           const end = performance.now();
           context.searchRelevance.metricsService.addMetric(
             METRIC_NAME.SEARCH_RELEVANCE,
@@ -141,8 +154,12 @@ export function registerDslRoute(router: IRouter) {
   // Get Indices
   router.get(
     {
-      path: ServiceEndpoints.GetIndexes,
-      validate: {},
+      path: `${ServiceEndpoints.GetIndexes}/{dataSourceId?}`,
+      validate: {
+        params: schema.object({
+          dataSourceId: schema.maybe(schema.string({ defaultValue: '' }))
+        }),
+      },
     },
     async (context, request, response) => {
       const params = {
@@ -150,10 +167,14 @@ export function registerDslRoute(router: IRouter) {
       };
       const start = performance.now();
       try {
-        const resp = await context.core.opensearch.legacy.client.callAsCurrentUser(
-          'cat.indices',
-          params
-        );
+        const dataSourceId  = request.params.dataSourceId;
+        let callApi: ILegacyScopedClusterClient['callAsCurrentUser'];
+        if(dataSourceEnabled && dataSourceId){
+          callApi = context.dataSource.opensearch.legacy.getClient(dataSourceId).callAPI;
+        } else {
+          callApi = context.core.opensearch.legacy.client.callAsCurrentUser;
+        }
+        const resp = await callApi('cat.indices', params);
         const end = performance.now();
         context.searchRelevance.metricsService.addMetric(
           METRIC_NAME.SEARCH_RELEVANCE,
@@ -184,18 +205,37 @@ export function registerDslRoute(router: IRouter) {
   // Get Pipelines
   router.get(
     {
-      path: ServiceEndpoints.GetPipelines,
-      validate: {},
+      path: `${ServiceEndpoints.GetPipelines}/{dataSourceId?}`,
+      validate: {
+        params: schema.object({
+          dataSourceId: schema.maybe(schema.string({ defaultValue: '' }))
+        }),
+      },
     },
     async (context, request, response) => {
+      const params = {
+        format: 'json',
+      };
       const start = performance.now();
       let resBody: any = {};
+      let resp;
       try {
-        const resp = await context.core.opensearch.client.asCurrentUser.transport.request({
-          method: 'GET',
-          path: `${SEARCH_API}/pipeline`,
-        });
+        const dataSourceId  = request.params.dataSourceId;
+        if(dataSourceEnabled && dataSourceId){
+          resp = (await context.dataSource.opensearch.getClient(dataSourceId)).transport
+          resp = await resp.request({
+            method: 'GET',
+            path: `${SEARCH_API}/pipeline`,
+          })
+        }
+        else{
+          resp = await context.core.opensearch.client.asCurrentUser.transport.request({
+            method: 'GET',
+            path: `${SEARCH_API}/pipeline`,
+          });
+        }
         resBody = resp.body;
+        console.log('inside pipleine',resBody)
         const end = performance.now();
         context.searchRelevance.metricsService.addMetric(
           METRIC_NAME.SEARCH_RELEVANCE,
@@ -215,9 +255,10 @@ export function registerDslRoute(router: IRouter) {
           end - start
         );
         if (error.statusCode !== 404) console.error(error);
-        return response.custom({
-          statusCode: error.statusCode || 500,
-          body: error.message,
+        console.log(error,'inside error')
+        return response.customError({
+          statusCode: 404,
+          body: error,
         });
       }
     }
diff --git a/server/routes/index.ts b/server/routes/index.ts
index aae28f4b..b83ff531 100644
--- a/server/routes/index.ts
+++ b/server/routes/index.ts
@@ -3,11 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ILegacyClusterClient, IRouter } from '../../../../src/core/server';
+import { IRouter, OpenSearchServiceSetup } from '../../../../src/core/server';
 import { registerDslRoute } from './dsl_route';
 import { registerMetricsRoute } from './metrics_route';
 
-export function defineRoutes(router: IRouter) {
-  registerDslRoute(router);
+export function defineRoutes(router: IRouter, openSearchServiceSetup: OpenSearchServiceSetup, dataSourceEnabled: boolean) {
+  registerDslRoute(router, openSearchServiceSetup, dataSourceEnabled);
   registerMetricsRoute(router);
 }