[chore](SqlOptimization): Optimize result code

Author: zzyangh

packages/sqle/src/page/SqlOptimization/Result/Modal/TableStructureModal.tsx

@@ -64,10 +64,7 @@ const TableStructureModal: React.FC = () => {
               <BasicInput.TextArea
                 value={currentTableData?.tableStructure}
                 readOnly
-                autoSize={{
-                  maxRows: 10,
-                  minRows: 6
-                }}
+                rows={8}
                 bordered={false}
               />
             </EmptyBox>

packages/sqle/src/page/SqlOptimization/Result/Modal/style.ts

@@ -27,9 +27,6 @@ export const TableStructureModalWrapper = styled('div')`
       border: 1px solid
         ${({ theme }) => theme.sharedTheme.uiToken.colorBorderSecondary};
       border-radius: 8px;
-      overflow: hidden;
-      max-height: 300px;
-      overflow-y: auto;
     }
   }
 `;

packages/sqle/src/page/SqlOptimization/Result/components/AnalysisChart.tsx

@@ -3,7 +3,10 @@ import ChartWrapper from '../../../../components/ChartCom/ChartWrapper';
 import { useTranslation } from 'react-i18next';
 import { useMemo } from 'react';
 import { AnalysisChartWrapper } from './style';
-import { ITotalAnalysis } from '@actiontech/shared/lib/api/sqle/service/common';
+import {
+  ITotalAnalysis,
+  IAnalysisDetail
+} from '@actiontech/shared/lib/api/sqle/service/common';
 import { OptimizationSQLDetailStatusEnum } from '@actiontech/shared/lib/api/sqle/service/common.enum';
 interface AnalysisChartProps {
   data?: ITotalAnalysis;
@@ -27,16 +30,16 @@ const AnalysisChart: React.FC<AnalysisChartProps> = ({
       type: string;
     }> = [];
 
-    data?.detail?.forEach((item: any) => {
+    data?.detail?.forEach((item: IAnalysisDetail) => {
       transformedData.push(
         {
-          name: item.category,
-          score: item.original_score,
+          name: item.category ?? '',
+          score: item.original_score ?? 0,
           type: t('sqlOptimization.result.original')
         },
         {
-          name: item.category,
-          score: item.optimized_score,
+          name: item.category ?? '',
+          score: item.optimized_score ?? 0,
           type: t('sqlOptimization.result.finalOptimized')
         }
       );
@@ -84,12 +87,11 @@ const AnalysisChart: React.FC<AnalysisChartProps> = ({
         fillOpacity: 0.15
       }
     },
-
     tooltip: {
-      formatter: (datum: any) => {
+      formatter: (datum) => {
         return {
-          name: datum.type,
-          value: `${datum.score}分`
+          name: datum?.type ?? '',
+          value: `${datum?.score ?? 0}分`
         };
       }
     },

packages/sqle/src/page/SqlOptimization/Result/components/LeftContent.tsx

@@ -104,6 +104,7 @@ const LeftContent: React.FC<LeftContentProps> = ({
                 icon={<FullScreenOutlined />}
                 size="small"
                 onClick={onExpandQueryPlan}
+                className="view-query-plan-diff-button"
               >
                 {t('sqlOptimization.result.expand')}
               </BasicButton>

packages/sqle/src/page/SqlOptimization/Result/components/QueryPlanFlow/QueryPlanNode.tsx

@@ -4,23 +4,7 @@ import type { Node, NodeProps } from '@xyflow/react';
 import { Space, Typography } from 'antd';
 import { DownOutlined, RightOutlined } from '@ant-design/icons';
 import { QueryPlanNodeWrapper } from '../style';
-import { ExecutionPlanType } from '../../index.type';
-
-interface QueryPlanItem {
-  summary: string[];
-  children: QueryPlanItem[];
-  operator: string;
-  [x: string]: any;
-}
-
-interface QueryPlanNodeData extends Record<string, unknown> {
-  detail: QueryPlanItem;
-  level: number;
-  hasChildren?: boolean;
-  isRootNode?: boolean;
-  nodeIndex?: number;
-  planType?: ExecutionPlanType;
-}
+import { QueryPlanNodeData } from './index.type';
 
 const QueryPlanNode: React.FC<NodeProps<Node<QueryPlanNodeData>>> = ({
   data,
@@ -37,25 +21,7 @@ const QueryPlanNode: React.FC<NodeProps<Node<QueryPlanNodeData>>> = ({
   const [isExpanded, setIsExpanded] = useState(true);
 
   const content = useMemo(() => {
-    let conditionString = '';
-    if (detail?.conditions) {
-      detail?.conditions?.forEach((item: any) => {
-        if (typeof item === 'string') {
-          conditionString += JSON.stringify(item);
-        }
-      });
-    }
-
-    const summaryString = detail?.summary?.join('\n');
-
-    const contentStr =
-      detail?.columns?.join('') ||
-      detail?.table ||
-      detail?.join_condition ||
-      conditionString ||
-      summaryString ||
-      '';
-    return contentStr;
+    return detail?.summary?.join('\n');
   }, [detail]);
 
   const handleToggleExpand = (event: React.MouseEvent) => {

packages/sqle/src/page/SqlOptimization/Result/components/QueryPlanFlow/index.tsx

@@ -4,14 +4,7 @@ import '@xyflow/react/dist/style.css';
 import { QueryPlanFlowWrapper } from '../style';
 import QueryPlanNode from './QueryPlanNode';
 import { IQueryPlanNode } from '@actiontech/shared/lib/api/sqle/service/common';
-import { ExecutionPlanType } from '../../index.type';
-
-interface QueryPlanFlowProps {
-  queryPlanDesc: IQueryPlanNode[];
-  height?: number;
-  fitViewTrigger?: number; // 用于触发重新适应视图
-  planType?: ExecutionPlanType; // 执行计划类型
-}
+import { QueryPlanFlowProps } from './index.type';
 
 const QueryPlanFlow: React.FC<QueryPlanFlowProps> = ({
   queryPlanDesc,

packages/sqle/src/page/SqlOptimization/Result/components/QueryPlanFlow/index.type.ts

@@ -0,0 +1,24 @@
+import { ExecutionPlanType } from '../../index.type';
+import { IQueryPlanNode } from '@actiontech/shared/lib/api/sqle/service/common';
+
+export interface QueryPlanItem {
+  summary: string[];
+  children: QueryPlanItem[];
+  operator: string;
+}
+
+export type QueryPlanNodeData = {
+  detail: QueryPlanItem;
+  level: number;
+  hasChildren?: boolean;
+  isRootNode?: boolean;
+  nodeIndex?: number;
+  planType?: ExecutionPlanType;
+};
+
+export interface QueryPlanFlowProps {
+  queryPlanDesc: IQueryPlanNode[];
+  height?: number;
+  fitViewTrigger?: number; // 用于触发重新适应视图
+  planType?: ExecutionPlanType; // 执行计划类型
+}