add max heigh. use memoization

Signed-off-by: Kawika Avilla <[email protected]> almost working pretty nicely Signed-off-by: Kawika Avilla <[email protected]> a little bit better Signed-off-by: Kawika Avilla <[email protected]> its ok Signed-off-by: Kawika Avilla <[email protected]>
opensearch-project · Jul 29, 2024 · a122934 · a122934
1 parent 3880036
commit a122934
Show file tree

Hide file tree

Showing 23 changed files with 575 additions and 609 deletions.
diff --git a/src/plugins/data/public/antlr/opensearch_sql/code_completion.ts b/src/plugins/data/public/antlr/opensearch_sql/code_completion.ts
@@ -46,7 +46,7 @@ export const getSuggestions = async ({
   services,
 }: QuerySuggestionGetFnArgs): Promise<QuerySuggestion[]> => {
   const { api } = services.uiSettings;
-  const dataSetManager = services.data.query.dataSet;
+  const dataSetManager = services.data.query.dataSetManager;
   const suggestions = getOpenSearchSqlAutoCompleteSuggestions(query, {
     line: position?.lineNumber || selectionStart,
     column: position?.column || selectionEnd,

diff --git a/src/plugins/data/public/query/dataset_manager/dataset_manager.ts b/src/plugins/data/public/query/dataset_manager/dataset_manager.ts
@@ -7,6 +7,7 @@ import { BehaviorSubject } from 'rxjs';
 import { CoreStart } from 'opensearch-dashboards/public';
 import { skip } from 'rxjs/operators';
 import {
+  IndexPattern,
   SIMPLE_DATA_SET_TYPES,
   SimpleDataSet,
   SimpleDataSource,
@@ -24,9 +25,33 @@ export class DataSetManager {
   }
 
   public init = async (indexPatterns: IndexPatternsContract) => {
+    if (!this.uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED)) return;
     this.indexPatterns = indexPatterns;
     this.defaultDataSet = await this.fetchDefaultDataSet();
-    return this.defaultDataSet;
+  };
+
+  public initWithIndexPattern = (indexPattern: IndexPattern | null) => {
+    if (!this.uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED)) return;
+    if (!indexPattern || !indexPattern.id) {
+      return undefined;
+    }
+
+    this.defaultDataSet = {
+      id: indexPattern.id,
+      title: indexPattern.title,
+      type: SIMPLE_DATA_SET_TYPES.INDEX_PATTERN,
+      timeFieldName: indexPattern.timeFieldName,
+      fields: indexPattern.fields,
+      ...(indexPattern.dataSourceRef
+        ? {
+            dataSourceRef: {
+              id: indexPattern.dataSourceRef?.id,
+              name: indexPattern.dataSourceRef?.name,
+              type: indexPattern.dataSourceRef?.type,
+            } as SimpleDataSource,
+          }
+        : {}),
+    };
   };
 
   public getUpdates$ = () => {
@@ -43,6 +68,13 @@ export class DataSetManager {
    */
   public setDataSet = (dataSet: SimpleDataSet | undefined) => {
     if (!this.uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED)) return;
+
+    // if (dataSet) {
+    //   const { fields, ...dataSetWithoutFields } = dataSet;
+    //   this.dataSet$.next(dataSetWithoutFields);
+    // } else {
+    //   this.dataSet$.next(undefined);
+    // }
     this.dataSet$.next(dataSet);
   };
 
@@ -57,11 +89,7 @@ export class DataSetManager {
     }
 
     const indexPattern = await this.indexPatterns?.get(defaultIndexPatternId);
-    if (!indexPattern) {
-      return undefined;
-    }
-
-    if (!indexPattern.id) {
+    if (!indexPattern || !indexPattern.id) {
       return undefined;
     }
 

diff --git a/src/plugins/data/public/query/query_service.ts b/src/plugins/data/public/query/query_service.ts
@@ -83,14 +83,14 @@ export class QueryService {
       filterManager: this.filterManager,
       timefilter: this.timefilter,
       queryString: this.queryStringManager,
-      dataSet: this.dataSetManager,
+      dataSetManager: this.dataSetManager,
     }).pipe(share());
 
     return {
       filterManager: this.filterManager,
       timefilter: this.timefilter,
       queryString: this.queryStringManager,
-      dataSet: this.dataSetManager,
+      dataSetManager: this.dataSetManager,
       state$: this.state$,
     };
   }
@@ -109,7 +109,7 @@ export class QueryService {
       }),
       filterManager: this.filterManager,
       queryString: this.queryStringManager,
-      dataSet: this.dataSetManager,
+      dataSetManager: this.dataSetManager,
       savedQueries: createSavedQueryService(savedObjectsClient),
       state$: this.state$,
       timefilter: this.timefilter,

diff --git a/src/plugins/data/public/query/state_sync/connect_to_query_state.ts b/src/plugins/data/public/query/state_sync/connect_to_query_state.ts
@@ -56,13 +56,13 @@ import { validateTimeRange } from '../timefilter';
  */
 export const connectStorageToQueryState = async (
   {
-    dataSet,
+    dataSetManager,
     filterManager,
     queryString,
     state$,
   }: Pick<
     QueryStart | QuerySetup,
-    'timefilter' | 'filterManager' | 'queryString' | 'dataSet' | 'state$'
+    'timefilter' | 'filterManager' | 'queryString' | 'dataSetManager' | 'state$'
   >,
   OsdUrlStateStorage: IOsdUrlStateStorage,
   syncConfig: {
@@ -89,7 +89,7 @@ export const connectStorageToQueryState = async (
       filters: filterManager.getAppFilters(),
       ...(uiSettings &&
         uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED) && {
-          dataSet: dataSet.getDataSet(),
+          dataSet: dataSetManager.getDataSet(),
         }),
     };
 
@@ -106,13 +106,16 @@ export const connectStorageToQueryState = async (
       }
     }
 
-    if (syncConfig.dataSet && !_.isEqual(initialStateFromURL.dataSet, dataSet.getDataSet())) {
+    if (
+      syncConfig.dataSet &&
+      !_.isEqual(initialStateFromURL.dataSet, dataSetManager.getDataSet())
+    ) {
       if (initialStateFromURL.dataSet) {
-        dataSet.setDataSet(_.cloneDeep(initialStateFromURL.dataSet));
+        dataSetManager.setDataSet(_.cloneDeep(initialStateFromURL.dataSet));
       } else {
-        const defaultDataSet = await dataSet.getDefaultDataSet();
+        const defaultDataSet = await dataSetManager.getDefaultDataSet();
         if (defaultDataSet) {
-          dataSet.setDataSet(defaultDataSet);
+          dataSetManager.setDataSet(defaultDataSet);
         }
       }
     }
@@ -150,7 +153,7 @@ export const connectStorageToQueryState = async (
               }
 
               if (syncConfig.dataSet && changes.dataSet) {
-                newState.dataSet = dataSet.getDataSet();
+                newState.dataSet = dataSetManager.getDataSet();
               }
 
               return newState;
@@ -182,11 +185,11 @@ export const connectToQueryState = <S extends QueryState>(
     timefilter: { timefilter },
     filterManager,
     queryString,
-    dataSet,
+    dataSetManager,
     state$,
   }: Pick<
     QueryStart | QuerySetup,
-    'timefilter' | 'filterManager' | 'dataSet' | 'queryString' | 'state$'
+    'timefilter' | 'filterManager' | 'dataSetManager' | 'queryString' | 'state$'
   >,
   stateContainer: BaseStateContainer<S>,
   syncConfig: {
@@ -278,7 +281,7 @@ export const connectToQueryState = <S extends QueryState>(
   }
 
   if (syncConfig.dataSet && !initialState.dataSet) {
-    initialState.dataSet = dataSet.getDefaultDataSet();
+    initialState.dataSet = dataSetManager.getDefaultDataSet();
     initialDirty = true;
   }
 
@@ -320,7 +323,7 @@ export const connectToQueryState = <S extends QueryState>(
             }
           }
           if (syncConfig.dataSet && changes.dataSet) {
-            newState.dataSet = dataSet.getDataSet();
+            newState.dataSet = dataSetManager.getDataSet();
           }
           return newState;
         })
@@ -382,14 +385,14 @@ export const connectToQueryState = <S extends QueryState>(
       }
 
       if (syncConfig.dataSet) {
-        const currentDataSet = dataSet.getDataSet();
+        const currentDataSet = dataSetManager.getDataSet();
         if (!_.isEqual(state.dataSet, currentDataSet)) {
           if (state.dataSet) {
-            dataSet.setDataSet(state.dataSet);
+            dataSetManager.setDataSet(state.dataSet);
           } else {
-            const defaultDataSet = await dataSet.getDefaultDataSet();
+            const defaultDataSet = dataSetManager.getDefaultDataSet();
             if (defaultDataSet) {
-              dataSet.setDataSet(defaultDataSet);
+              dataSetManager.setDataSet(defaultDataSet);
               stateContainer.set({ ...stateContainer.get(), dataSet: defaultDataSet });
             }
           }

diff --git a/src/plugins/data/public/query/state_sync/create_global_query_observable.ts b/src/plugins/data/public/query/state_sync/create_global_query_observable.ts
@@ -42,20 +42,20 @@ export function createQueryStateObservable({
   timefilter: { timefilter },
   filterManager,
   queryString,
-  dataSet,
+  dataSetManager,
 }: {
   timefilter: TimefilterSetup;
   filterManager: FilterManager;
   queryString: QueryStringContract;
-  dataSet: DataSetContract;
+  dataSetManager: DataSetContract;
 }): Observable<{ changes: QueryStateChange; state: QueryState }> {
   return new Observable((subscriber) => {
     const state = createStateContainer<QueryState>({
       time: timefilter.getTime(),
       refreshInterval: timefilter.getRefreshInterval(),
       filters: filterManager.getFilters(),
       query: queryString.getQuery(),
-      dataSet: dataSet.getDataSet(),
+      dataSet: dataSetManager.getDataSet(),
     });
 
     let currentChange: QueryStateChange = {};
@@ -64,9 +64,9 @@ export function createQueryStateObservable({
         currentChange.query = true;
         state.set({ ...state.get(), query: queryString.getQuery() });
       }),
-      dataSet.getUpdates$().subscribe(() => {
+      dataSetManager.getUpdates$().subscribe(() => {
         currentChange.dataSet = true;
-        state.set({ ...state.get(), dataSet: dataSet.getDataSet() });
+        state.set({ ...state.get(), dataSet: dataSetManager.getDataSet() });
       }),
       timefilter.getTimeUpdate$().subscribe(() => {
         currentChange.time = true;

diff --git a/src/plugins/data/public/query/state_sync/sync_state_with_url.ts b/src/plugins/data/public/query/state_sync/sync_state_with_url.ts
@@ -50,23 +50,23 @@ const GLOBAL_STATE_STORAGE_KEY = '_g';
 export const syncQueryStateWithUrl = (
   query: Pick<
     QueryStart | QuerySetup,
-    'filterManager' | 'timefilter' | 'queryString' | 'dataSet' | 'state$'
+    'filterManager' | 'timefilter' | 'queryString' | 'dataSetManager' | 'state$'
   >,
   osdUrlStateStorage: IOsdUrlStateStorage,
   uiSettings?: CoreStart['uiSettings']
 ) => {
   const {
     timefilter: { timefilter },
     filterManager,
-    dataSet,
+    dataSetManager,
   } = query;
   const defaultState: QueryState = {
     time: timefilter.getTime(),
     refreshInterval: timefilter.getRefreshInterval(),
     filters: filterManager.getGlobalFilters(),
     ...(uiSettings &&
       uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED) && {
-        dataSet: dataSet.getDataSet(),
+        dataSet: dataSetManager.getDataSet(),
       }),
   };
 

diff --git a/src/plugins/data/public/ui/dataset_navigator/_dataset_navigator.scss b/src/plugins/data/public/ui/dataset_navigator/_dataset_navigator.scss
@@ -2,9 +2,13 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-.datasetNavigator {
-  min-width: 350px;
+.dataSetNavigator {
+  min-width: 365px;
+  max-height: 60vh;
+  overflow-y: auto;
   border-bottom: $euiBorderThin !important;
+  scrollbar-width: thin;
+  scrollbar-color: $euiColorMediumShade $euiColorLightestShade;
 }
 
 .dataSetNavigatorFormWrapper {
@@ -14,3 +18,21 @@
 .dataSetNavigator__loading {
   padding: $euiSizeS;
 }
+
+.dataSetNavigator:not(:hover)::-webkit-scrollbar {
+  width: 0;
+  background: transparent;
+}
+
+.dataSetNavigator::-webkit-scrollbar {
+  width: 4px;
+}
+
+.dataSetNavigator::-webkit-scrollbar-track {
+  background: $euiColorLightestShade;
+}
+
+.dataSetNavigator::-webkit-scrollbar-thumb {
+  background-color: $euiColorMediumShade;
+  border-radius: 4px;
+}
diff --git a/src/plugins/data/public/ui/dataset_navigator/create_dataset_navigator.tsx b/src/plugins/data/public/ui/dataset_navigator/create_dataset_navigator.tsx
@@ -12,15 +12,15 @@ import { DataSetContract } from '../../query';
 export function createDataSetNavigator(
   savedObjectsClient: SavedObjectsClientContract,
   http: HttpStart,
-  dataSet: DataSetContract
+  dataSetManager: DataSetContract
 ) {
   // Return a function that takes props, omitting the dependencies from the props type
   return (props: Omit<DataSetNavigatorProps, 'savedObjectsClient' | 'http' | 'dataSet'>) => (
     <DataSetNavigator
       {...props}
       savedObjectsClient={savedObjectsClient}
       http={http}
-      dataSet={dataSet}
+      dataSetManager={dataSetManager}
     />
   );
 }