add to metric page

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

Author: Qxisylolo

src/plugins/explore/public/application/in_context_vis_editor/component/save_vis_button.tsx

@@ -50,7 +50,7 @@ export const SaveVisButton = () => {
   const { queryEditorState, datasetView } = useQueryBuilderState();
   const { visualizationBuilderForEditor: visualizationBuilder } = useVisualizationBuilder();
   const visConfig = visualizationBuilder.visConfig$.value;
-  const transformationService = useTransformationService();
+  const transformationService = visualizationBuilder.getTransformationService();
 
   const { services } = useOpenSearchDashboards<ExploreServices>();
 

src/plugins/explore/public/application/in_context_vis_editor/component/transform_panel.tsx

@@ -28,11 +28,13 @@ import { useQueryBuilderState } from '../hooks/use_query_builder_state';
 import { ErrorCodeBlock } from '../../../components/tabs/error_guard/error_code_block';
 import { EditorPanel } from './editor_panel';
 import { useVisualizationBuilder } from '../hooks/use_visualization_builder';
-import { TransformPanel } from './transform_panel';
-import { useTransformationService } from '../hooks/use_transformation_service';
 
 import '../visualization_editor.scss';
-import { TransformationService } from '../data_transformations';
+import {
+  TransformationService,
+  useTransformationService,
+  TransformPanel,
+} from '../../../components/data_transformations';
 
 type ActiveTab = 'QUERY_TAB' | 'TRANSFORM_TAB';
 
@@ -53,25 +55,19 @@ const transformTabLabel = i18n.translate('explore.bottomPanel.transformTab', {
   defaultMessage: 'Transform',
 });
 
-interface ResizableQueryPanelAndVisualizationProps {
-  savedTransformationPipeline?: Array<{
-    definitionId: string;
-    instanceId: string;
-    config: any;
-    hide: boolean;
-  }>;
-}
-
-export const ResizableQueryPanelAndVisualization = ({
-  savedTransformationPipeline,
-}: ResizableQueryPanelAndVisualizationProps) => {
+export const ResizableQueryPanelAndVisualization = () => {
   const { queryBuilder, queryEditorState } = useQueryBuilderState();
   const queryStatus = queryEditorState.queryStatus;
   const [activeTab, setActiveTab] = useState<ActiveTab>(
     queryEditorState.activeBottomPanelTab ?? 'QUERY_TAB'
   );
+  const { visualizationBuilderForEditor } = useVisualizationBuilder();
 
-  const transformServices = useTransformationService(savedTransformationPipeline);
+  const transformServices = useTransformationService(visualizationBuilderForEditor, {
+    onPipelineChange: useCallback(() => {
+      queryBuilder.updateQueryEditorState({ isQueryEditorDirty: true });
+    }, [queryBuilder]),
+  });
 
   useEffect(() => {
     queryBuilder.updateQueryEditorState({ activeBottomPanelTab: activeTab });
@@ -168,7 +164,10 @@ export const ResizableQueryPanelAndVisualization = ({
                 {activeTab === 'QUERY_TAB' ? (
                   <QueryPanel queryEditorState$={queryBuilder.queryEditorState$} />
                 ) : (
-                  <TransformPanel transformationService={transformServices} />
+                  <TransformPanel
+                    transformationService={transformServices}
+                    visualizationBuilder={visualizationBuilderForEditor}
+                  />
                 )}
               </EuiPanel>
             </EuiResizablePanel>

src/plugins/explore/public/application/in_context_vis_editor/component/visualization_editor_bottom_left_container.tsx

@@ -24,17 +24,14 @@ export const useInitialSaveExplore = () => {
   }, [savedExplore]);
 
   // parse saved vis state and transformation from saved explore
-  const { savedVisConfig, savedTransformationPipeline } = useMemo(() => {
+  const { savedVisConfig } = useMemo(() => {
     if (!savedExplore?.visualization)
       return { savedVisConfig: undefined, savedTransformationPipeline: undefined };
     try {
       const parsedVisualization = JSON.parse(savedExplore.visualization);
-      const pipeline = parsedVisualization?.dataTransformationJSON
-        ? JSON.parse(parsedVisualization.dataTransformationJSON)
-        : undefined;
+
       return {
         savedVisConfig: parsedVisualization,
-        savedTransformationPipeline: pipeline,
       };
     } catch {
       return { savedVisConfig: undefined, savedTransformationPipeline: undefined };
@@ -45,7 +42,6 @@ export const useInitialSaveExplore = () => {
     savedExplore,
     savedQueryState,
     savedVisConfig,
-    savedTransformationPipeline,
     error,
     isLoading,
   };

src/plugins/explore/public/application/in_context_vis_editor/hooks/use_initial_save_explore.ts

@@ -135,7 +135,6 @@ export class QueryBuilder {
   private subscriptions = Array<Subscription>();
   private getServices: () => ExploreServices;
   private interpolationService?: IVariableInterpolationService;
-  private onDatasetChangedCallback?: () => void;
   public lastExecutedInterpolatedQuery?: string;
 
   constructor(getServices: () => ExploreServices) {
@@ -297,10 +296,6 @@ export class QueryBuilder {
           // sync dataset change
           // check isLanguageChanged and isInitialized for the initial sync
           if (isDatasetChanged || isLanguageChanged || !this.isInitialized) {
-            // Only clear the transformation pipeline when the user actively switches datasets after initialization
-            if (isDatasetChanged && this.isInitialized) {
-              this.onDatasetChangedCallback?.();
-            }
             this.datasetView$.next({ ...this.datasetView$.getValue(), isLoading: true });
             return from(this.handleDatasetChange(newQuery.dataset));
           }
@@ -607,12 +602,6 @@ export class QueryBuilder {
     return this.variableNames$.value;
   }
 
-  // register a callback that fires when the dataset changes,
-  // for example, used to clear the transformation pipeline on dataset switch.
-  setOnDatasetChanged(callback: () => void) {
-    this.onDatasetChangedCallback = callback;
-  }
-
   setEditorRef(editor: monaco.editor.IStandaloneCodeEditor | null) {
     this.editorRef = editor;
   }

src/plugins/explore/public/application/in_context_vis_editor/query_builder/query_builder.ts

@@ -51,10 +51,6 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
         height: 100%;
       }
 
-      .visualizationEditorTabPanel {
-        border: 0;
-      }
-
       .multiTabsPanel {
         border-top-right-radius: $euiSizeXS;
       }

src/plugins/explore/public/application/in_context_vis_editor/visualization_editor.scss

@@ -70,7 +70,6 @@ export const VisualizationEditorPage = ({
     savedQueryState,
     savedVisConfig,
     error,
-    savedTransformationPipeline,
     isLoading,
   } = useInitialSaveExplore();
 
@@ -109,6 +108,7 @@ export const VisualizationEditorPage = ({
           splitField: savedVisConfig.splitField,
           splitLayout: savedVisConfig.splitLayout,
           showSplitLabel: savedVisConfig.showSplitLabel,
+          dataTransformationJSON: savedVisConfig.dataTransformationJSON,
         });
       }
 
@@ -137,7 +137,6 @@ export const VisualizationEditorPage = ({
     queryBuilder,
     savedVisConfig,
     savedQueryState,
-    savedTransformationPipeline,
     osdUrlStateStorage,
     visualizationBuilderForEditor,
     needsDashboardSelection,
@@ -217,9 +216,7 @@ export const VisualizationEditorPage = ({
                       {variableService && VariablesBar && (
                         <VariablesBar variableService={variableService} />
                       )}
-                      <ResizableQueryPanelAndVisualization
-                        savedTransformationPipeline={savedTransformationPipeline}
-                      />
+                      <ResizableQueryPanelAndVisualization />
                     </EuiResizablePanel>
                     <EuiResizableButton />
                     <EuiResizablePanel

src/plugins/explore/public/application/in_context_vis_editor/visualization_editor_page.tsx

@@ -77,6 +77,7 @@ export const useInitPage = () => {
             splitField,
             splitLayout,
             showSplitLabel,
+            dataTransformationJSON,
           } = JSON.parse(visualization);
           visualizationBuilder.setVisConfig({
             type: chartType,
@@ -85,6 +86,7 @@ export const useInitPage = () => {
             splitField,
             splitLayout,
             showSplitLabel,
+            dataTransformationJSON,
           });
         }
         // Only use saved object's activeTab if there's no activeTab in URL state

src/plugins/explore/public/application/utils/hooks/use_page_initialization.ts

@@ -58,24 +58,5 @@ export {
 export { TransformPanel } from './transform_panel';
 export type { TransformPanelProps } from './transform_panel';
 export { TransformSelectorButton } from './transform_selector_overlay';
-
-import { TransformationService } from './transformation_service';
-import { limitTransformationDefinition } from './transformations/limit_transformation';
-import { sortByTransformationDefinition } from './transformations/sortby_transformation';
-import { filterTransformationDefinition } from './transformations/filter_transformation';
-import { addFieldTransformationDefinition } from './transformations/add_field_transformation';
-import { filterFieldsTransformationDefinition } from './transformations/filter_fields_transformation';
-import { convertFieldTypeTransformationDefinition } from './transformations/convert_field_type_transformation';
-import { groupByTransformationDefinition } from './transformations/group_by_transformation';
-import { extractFieldsTransformationDefinition } from './transformations/extract_fields_transformation';
-
-export function registerAllTransformations(service: TransformationService): void {
-  service.registerDefinition(limitTransformationDefinition);
-  service.registerDefinition(sortByTransformationDefinition);
-  service.registerDefinition(filterTransformationDefinition);
-  service.registerDefinition(addFieldTransformationDefinition);
-  service.registerDefinition(filterFieldsTransformationDefinition);
-  service.registerDefinition(convertFieldTypeTransformationDefinition);
-  service.registerDefinition(groupByTransformationDefinition);
-  service.registerDefinition(extractFieldsTransformationDefinition);
-}
+export { useTransformationService } from './use_transformation_service';
+export { registerAllTransformations } from './register_all_transformations';

src/plugins/explore/public/components/data_transformations/index.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { TransformationService } from './transformation_service';
+import { limitTransformationDefinition } from './transformations/limit_transformation';
+import { sortByTransformationDefinition } from './transformations/sortby_transformation';
+import { filterTransformationDefinition } from './transformations/filter_transformation';
+import { addFieldTransformationDefinition } from './transformations/add_field_transformation';
+import { filterFieldsTransformationDefinition } from './transformations/filter_fields_transformation';
+import { convertFieldTypeTransformationDefinition } from './transformations/convert_field_type_transformation';
+import { groupByTransformationDefinition } from './transformations/group_by_transformation';
+import { extractFieldsTransformationDefinition } from './transformations/extract_fields_transformation';
+
+export function registerAllTransformations(service: TransformationService): void {
+  service.registerDefinition(limitTransformationDefinition);
+  service.registerDefinition(sortByTransformationDefinition);
+  service.registerDefinition(filterTransformationDefinition);
+  service.registerDefinition(addFieldTransformationDefinition);
+  service.registerDefinition(filterFieldsTransformationDefinition);
+  service.registerDefinition(convertFieldTypeTransformationDefinition);
+  service.registerDefinition(groupByTransformationDefinition);
+  service.registerDefinition(extractFieldsTransformationDefinition);
+}