From 13453b943a15454ebc43447c900e760fc7536c66 Mon Sep 17 00:00:00 2001
From: sunchao <1299792067@qq.com>
Date: Fri, 15 Aug 2025 15:39:10 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0TensorBoard?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=E5=89=8D=E7=AB=AF=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tb_graph_ascend/monvis_plugin/fe/.babelrc |   3 +
 .../monvis_plugin/fe/.prettierrc              |  13 +
 .../monvis_plugin/fe/package.json             |  49 +++
 .../monvis_plugin/fe/public/index.html        |  10 +
 .../fe/src/common/SelectWithLabel/index.less  |  59 ++++
 .../fe/src/common/SelectWithLabel/index.tsx   |  37 +++
 .../fe/src/common/constant/index.ts           |  57 ++++
 .../fe/src/common/type/index.d.ts             |  40 +++
 .../fe/src/controller/index.less              |  34 ++
 .../monvis_plugin/fe/src/controller/index.tsx | 216 +++++++++++++
 .../fe/src/controller/type/index.d.ts         |  39 +++
 .../fe/src/controller/useController.ts        |  59 ++++
 .../fe/src/graph/components/HeatMap/index.tsx |  97 ++++++
 .../graph/components/HeatMap/useHeatMap.ts    | 297 ++++++++++++++++++
 .../src/graph/components/LineChart/index.tsx  | 140 +++++++++
 .../fe/src/graph/components/type/index.d.ts   |  32 ++
 .../monvis_plugin/fe/src/graph/index.less     |  41 +++
 .../monvis_plugin/fe/src/graph/index.tsx      |  50 +++
 .../monvis_plugin/fe/src/index.tsx            |  26 ++
 .../monvis_plugin/fe/src/main/index.less      |  26 ++
 .../monvis_plugin/fe/src/main/index.tsx       |  60 ++++
 .../monvis_plugin/fe/src/main/type/index.d.ts |  26 ++
 .../monvis_plugin/fe/src/store/index.ts       |  39 +++
 .../monvis_plugin/fe/src/utils/index.ts       |  27 ++
 .../monvis_plugin/fe/src/utils/request.ts     |  91 ++++++
 .../monvis_plugin/fe/tsconfig.json            |  40 +++
 .../monvis_plugin/fe/webpack.config.js        |  81 +++++
 .../monvis_plugin/fe/webpack.dev.js           | 160 ++++++++++
 28 files changed, 1849 insertions(+)
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.babelrc
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.prettierrc
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/package.json
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/public/index.html
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/SelectWithLabel/index.less
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/SelectWithLabel/index.tsx
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/constant/index.ts
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/type/index.d.ts
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.less
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.tsx
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/type/index.d.ts
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/useController.ts
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/HeatMap/index.tsx
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/HeatMap/useHeatMap.ts
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/LineChart/index.tsx
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/type/index.d.ts
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/index.less
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/index.tsx
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/index.tsx
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/main/index.less
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/main/index.tsx
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/main/type/index.d.ts
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/store/index.ts
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/index.ts
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/request.ts
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/tsconfig.json
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.config.js
 create mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.dev.js

diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.babelrc b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.babelrc
new file mode 100644
index 000000000..18151f1f8
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}
\ No newline at end of file
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.prettierrc b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.prettierrc
new file mode 100644
index 000000000..e3d2acb00
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.prettierrc
@@ -0,0 +1,13 @@
+{
+  "parser": "typescript",
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "all",
+  "proseWrap": "always",
+  "endOfLine": "lf",
+  "printWidth": 120
+}
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/package.json b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/package.json
new file mode 100644
index 000000000..bcd958160
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "fe",
+  "version": "1.0.0",
+  "main": "webpack.config.js",
+  "scripts": {
+    "dev": "webpack serve --config webpack.dev.js",
+    "buildWin": "cross-env NODE_ENV=production webpack && copy dist\\index.html ..\\server\\static\\",
+    "prettier": "prettier --config ./.prettierrc --write ./src/**/*.ts"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@babel/core": "^7.27.3",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "babel-loader": "^10.0.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^7.1.2",
+    "file-loader": "^6.2.0",
+    "html-loader": "^5.1.0",
+    "html-webpack-plugin": "^5.6.3",
+    "inline-chunk-html-plugin": "^1.1.1",
+    "less": "^4.3.0",
+    "less-loader": "^12.3.0",
+    "mini-css-extract-plugin": "^2.9.2",
+    "prettier": "^3.5.3",
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.3",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "4.15.1"
+  },
+  "dependencies": {
+    "ahooks": "^3.8.5",
+    "antd": "^5.25.3",
+    "axios": "^1.9.0",
+    "echarts": "^5.6.0",
+    "echarts-for-react": "^3.0.2",
+    "lodash": "^4.17.21",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "use-sync-external-store": "^1.5.0",
+    "zustand": "^5.0.5"
+  }
+}
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/public/index.html b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/public/index.html
new file mode 100644
index 000000000..a0c678cdf
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>Graph</title>
+</head>
+<body>
+    <div id="root"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/SelectWithLabel/index.less b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/SelectWithLabel/index.less
new file mode 100644
index 000000000..a016ed61b
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/SelectWithLabel/index.less
@@ -0,0 +1,59 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+.selector {
+    padding: 6px 2px;
+    background-color: white;
+    box-sizing: border-box;
+    color: rgb(0, 0, 0);
+    font-size: 14px;
+    line-height: 1.5;
+    margin-bottom: 8px;
+
+    .label {
+        width: 36%;
+        cursor: pointer;
+        margin-bottom: 8px;
+        color: rgb(68, 68, 68);
+        font-weight: 400;
+
+        .question-icon {
+            margin-left: 6px;
+            font-size: medium;
+            background-color: white;
+            cursor: pointer;
+        }
+
+        &:hover {
+            color: #0660e7;
+        }
+    }
+
+    .select {
+        width: 100%;
+
+        .ant-select-selector {
+            border-radius: 0px;
+            border: 1px solid #161616;
+
+        }
+
+        .ant-select-selection-item {
+            font-weight: 500;
+        }
+    }
+}
\ No newline at end of file
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/SelectWithLabel/index.tsx b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/SelectWithLabel/index.tsx
new file mode 100644
index 000000000..7b9a788af
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/SelectWithLabel/index.tsx
@@ -0,0 +1,37 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+import React from 'react';
+import { Select, Tooltip } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import './index.less';
+const SelectWithLabel = ({ label, className, text, ...args }: any) => {
+  return (
+    <div className="selector">
+      <Tooltip placement="top" title={text}>
+        <div className="label">
+          {label}
+
+          <QuestionCircleOutlined className="question-icon" />
+        </div>
+      </Tooltip>
+      <Select className="select" {...args} />
+    </div>
+  );
+};
+
+export default SelectWithLabel;
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/constant/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/constant/index.ts
new file mode 100644
index 000000000..52cc0d4cc
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/constant/index.ts
@@ -0,0 +1,57 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+import { createContext } from 'react';
+import { GlobalContextType } from '../type';
+
+export const STEP_DIMENSION = 'step';
+export const RANK_DIMENSION = 'rank';
+export const MODULE_NAME_DIMENSION = 'module_name';
+
+export const CONTINUOUS = 'continuous';
+export const PIECEWISE = 'piecewise';
+
+export const DIMENSIONS_OPTIONS = [
+  { value: STEP_DIMENSION, label: 'Step' },
+  { value: RANK_DIMENSION, label: 'Rank' },
+  { value: MODULE_NAME_DIMENSION, label: 'Module Name' },
+];
+
+export const HEATMAP_TYPE = [
+  { value: CONTINUOUS, label: '渐变模式' },
+  { value: PIECEWISE, label: '分段模式' },
+];
+
+export const DIMENSIONS_AXIS_MAP = {
+  [STEP_DIMENSION]: {
+    x: 'Rank',
+    y: 'Module Name',
+  },
+  [RANK_DIMENSION]: {
+    x: 'Step',
+    y: 'Module Name',
+  },
+  [MODULE_NAME_DIMENSION]: {
+    x: 'Step',
+    y: 'Rank',
+  },
+};
+
+export const GlobalContext = createContext<GlobalContextType>({
+  contextState: [],
+  setContextState: () => { },
+});
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/type/index.d.ts b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/type/index.d.ts
new file mode 100644
index 000000000..c50cce52d
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/common/type/index.d.ts
@@ -0,0 +1,40 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+import type { TrendResponseData } from '../../graph/components/type';
+export interface ContextStateType {
+  heatMaphData?: Array<any>;
+  trendData?: TrendResponseData['data'];
+  metric?: string;
+  stat?: string;
+  dimension?: string;
+  dimensionValue?: string;
+  heatMapType?: string;
+  dimX?: string;
+  dimY?: string;
+  loadingHeatMap?: boolean;
+  loadingLineChart?: boolean;
+  setContextState: (newState: Partial<ContextStateType>) => void;
+}
+export type GlobalContextType = {
+  contextState: ContextStateType;
+  setContextState: (contextState: ContextStateType) => void;
+};
+export type SelectOptionType = {
+  label: string;
+  value: string;
+};
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.less b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.less
new file mode 100644
index 000000000..2d10e24d0
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.less
@@ -0,0 +1,34 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+.warpper {
+    background-color: #eeeeee;
+    height: 100%;
+}
+
+.controller {
+    padding: 16px 12px;
+    background-color: white;
+}
+
+.title {
+    font-size: 16px;
+    font-weight: 500;
+    text-align: center;
+    padding-block: 6px;
+    background-color: #f1f1f1;
+}
\ No newline at end of file
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.tsx b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.tsx
new file mode 100644
index 000000000..ee2a7a787
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.tsx
@@ -0,0 +1,216 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+import React, { useEffect, useState, memo } from 'react';
+import { shallow, useShallow } from 'zustand/shallow';
+import { message } from 'antd';
+import { isEmpty } from 'lodash';
+import './index.less';
+import { useGlobalStore } from '../store';
+import { DIMENSIONS_OPTIONS, HEATMAP_TYPE } from '../common/constant';
+import SelectWithLabel from '../common/SelectWithLabel';
+import useController from './useController';
+import type { SelectOptionType } from '../common/type';
+import type { ControllerProps, ValuesResponseType, ValuesRequestParamsType } from './type';
+
+const Controller: React.FC = (props: ControllerProps) => {
+  const { metrics } = props;
+  const useControllerInstance = useController();
+  const { metric, stat, dimension, dimensionValue, heatMapType, setContextState } = useGlobalStore(
+    useShallow((state) => ({
+      metric: state.metric,
+      stat: state.stat,
+      dimension: state.dimension,
+      dimensionValue: state.dimensionValue,
+      heatMapType: state.heatMapType,
+      setContextState: state.setContextState,
+    })),
+    shallow,
+  );
+  const [metricsMapStats, setMetricsMapStats] = useState<Record<string, Array<SelectOptionType>>>({});
+  const [metricsNameList, setMetricsNameList] = useState<string[]>([]);
+  const [statNameList, setStatNameList] = useState<string[]>([]);
+  const [dimensionValueList, setDimensionValueList] = useState<string[]>();
+
+  useEffect(() => {
+    if (metrics) {
+      const metricsMapStats: Record<string, Array<SelectOptionType>> = {};
+      const metricsNameList: Array<SelectOptionType> = [];
+      metrics.forEach(({ name, stats }) => {
+        metricsMapStats[name] = stats.map((stat) => {
+          return {
+            label: stat,
+            value: stat,
+          };
+        });
+        metricsNameList.push({ label: name, value: name });
+      });
+
+      const selecrMetric = metricsNameList?.[0]?.value;
+      const statNameList: Array<SelectOptionType> = metricsMapStats[selecrMetric];
+      const selectedStat = statNameList?.[0]?.value;
+      setMetricsMapStats(metricsMapStats);
+      // 初始化指标
+      setMetricsNameList(metricsNameList);
+      // 初始化统计量
+      setStatNameList(statNameList);
+      setContextState({ metric: selecrMetric, stat: selectedStat });
+      // 初始化维度,默认选中step维度
+      const params: ValuesRequestParamsType = {
+        metric: selecrMetric,
+        stat: selectedStat,
+        dimension: DIMENSIONS_OPTIONS[0].value,
+        value: 0,
+      };
+      updateDimensionValueList(params);
+    }
+  }, [metrics]);
+
+  useEffect(() => {
+    if (!metric || !stat || !dimension || !dimensionValue) {
+      return;
+    }
+    const params = {
+      metric,
+      stat,
+      dimension,
+      value: dimensionValue,
+    };
+    const loadGraphData = async (params) => {
+      setContextState({ loadingHeatMap: true });
+      const result = await useControllerInstance.loadGraphData(params);
+      setContextState({ loadingHeatMap: false });
+      if (result.error) {
+        message.error(result?.error);
+        return;
+      }
+      setContextState({
+        heatMaphData: result?.data,
+        trendData: { dimensions: [], values: [] },
+        dimX: ' ',
+        dimY: ' ',
+      });
+    };
+    loadGraphData(params);
+  }, [metric, stat, dimension, dimensionValue]);
+
+  const updateDimensionValueList = async (params: ValuesRequestParamsType) => {
+    const result: ValuesResponseType = await useControllerInstance.loadDimensionValueList(params);
+    if (result.error) {
+      message.error(result.error);
+      return;
+    }
+    if (!isEmpty(result)) {
+      const dimensionValueList = Object.entries(result?.data || {}).map(([key, value]) => {
+        return {
+          value: key,
+          label: value,
+        };
+      });
+      setContextState({
+        dimension: params.dimension,
+        dimensionValue: dimensionValueList?.[0]?.value,
+      });
+      setDimensionValueList(dimensionValueList);
+    }
+  };
+
+  // 指标选择
+  const onSelectMetricChange = (value: string) => {
+    const statNameList = metricsMapStats[value];
+    const selectedStat = statNameList?.[0]?.value;
+    setContextState({ metric: value, stat: selectedStat });
+    setStatNameList(statNameList);
+  };
+
+  // 统计量选择
+  const onSelectStatChange = (value: string) => {
+    setContextState({ stat: value });
+  };
+
+  // 维度选择
+  const onSelectDimensionChange = (value: string) => {
+    const params: ValuesRequestParamsType = {
+      metric,
+      stat,
+      dimension: value,
+      value: 0,
+    } as ValuesRequestParamsType;
+    updateDimensionValueList(params);
+  };
+  // 维度值选择
+  const onSelectDimensionValueChange = (value: string) => {
+    setContextState({ dimensionValue: value });
+  };
+
+  return (
+    <div className="warpper">
+      <div className="title">设置</div>
+      <div className="controller">
+        <SelectWithLabel
+          className="select-with-label"
+          value={metric}
+          label="选择指标"
+          text="选择要分析的模型指标"
+          onChange={onSelectMetricChange}
+          options={metricsNameList}
+        />
+        <SelectWithLabel
+          className="select-with-label"
+          label="选择统计量"
+          text="选择要计算的统计量"
+          value={stat}
+          onChange={onSelectStatChange}
+          options={statNameList}
+        />
+        <SelectWithLabel
+          className="select-with-label"
+          placeholder="请选择维度"
+          label="选择维度"
+          text="选择分析的维度"
+          value={dimension}
+          onChange={onSelectDimensionChange}
+          options={DIMENSIONS_OPTIONS}
+        />
+        <SelectWithLabel
+          className="select-with-label"
+          label="选择值"
+          text="选择维度的具体值"
+          value={dimensionValue}
+          placeholder="请选择值"
+          onChange={onSelectDimensionValueChange}
+          options={dimensionValueList}
+        />
+        <SelectWithLabel
+          className="select-with-label"
+          label="热力图模式"
+          text="选择热力图的渲染模式"
+          value={heatMapType}
+          placeholder="请选择值"
+          onChange={(value) =>
+            setContextState({
+              heatMapType: value,
+            })
+          }
+          options={HEATMAP_TYPE}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default memo(Controller);
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/type/index.d.ts b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/type/index.d.ts
new file mode 100644
index 000000000..4d396a0bd
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/type/index.d.ts
@@ -0,0 +1,39 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+export interface ControllerProps {
+  metrics: Array<metricsDataType>;
+}
+
+export interface ValuesResponseType {
+  data?: {
+    [string]: string;
+  };
+  error?: string;
+}
+
+export interface HeatmapDataResponseType {
+  data?: Array<any>;
+  error?: string;
+}
+
+export interface ValuesRequestParamsType {
+  metric: string;
+  stat: string;
+  dimension: string;
+  value: number;
+}
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/useController.ts b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/useController.ts
new file mode 100644
index 000000000..c2ff9d1f3
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/useController.ts
@@ -0,0 +1,59 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+import request from '../utils/request';
+import { ValuesResponseType, ValuesRequestParamsType, HeatmapDataResponseType } from './type';
+
+const useController = () => {
+  const loadGraphData = async (params: ValuesRequestParamsType) => {
+    try {
+      const result = await request({
+        url: 'heatmap_data',
+        method: 'GET',
+        params,
+      }) as unknown as HeatmapDataResponseType;
+      return result;
+    } catch (error) {
+      return {
+        error: '网络异常：获取维度值列表失败',
+      };
+    }
+  };
+  const loadDimensionValueList = async (params: ValuesRequestParamsType) => {
+    if (!params.dimension || !params.metric || !params.stat) {
+      return {};
+    }
+    try {
+      const result: ValuesResponseType = (await request({
+        url: 'values',
+        method: 'GET',
+        params,
+      })) as unknown as ValuesResponseType;
+      return result;
+    } catch (error) {
+      return {
+        error: '网络异常：获取维度值列表失败',
+      };
+    }
+  };
+  return {
+    loadGraphData,
+    loadDimensionValueList,
+  };
+};
+
+export default useController;
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/HeatMap/index.tsx b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/HeatMap/index.tsx
new file mode 100644
index 000000000..9429beb08
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/HeatMap/index.tsx
@@ -0,0 +1,97 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+import React, { useRef, useEffect, useState, memo } from 'react';
+import { useShallow } from 'zustand/shallow';
+import ReactECharts from 'echarts-for-react';
+import { message } from 'antd';
+import { useGlobalStore } from '../../../store';
+import useHeatMap from './useHeatMap';
+import { isEmpty } from 'lodash';
+import { TrendRequestParams, TrendResponseData } from '../type';
+import { isEqual } from 'lodash';
+
+const HeatMap = () => {
+  const useHeatMapInstance = useHeatMap();
+  const { metric, stat, dimension, dimensionValue, heatMaphData, heatMapType, setContextState } = useGlobalStore(
+    useShallow((state) => ({
+      metric: state.metric,
+      stat: state.stat,
+      dimension: state.dimension,
+      dimensionValue: state.dimensionValue,
+      heatMaphData: state.heatMaphData,
+      heatMapType: state.heatMapType,
+      setContextState: state.setContextState,
+    })),
+    (oldTreats, newTreats) => {
+      return (
+        isEqual(oldTreats.heatMaphData, newTreats.heatMaphData) && isEqual(oldTreats.heatMapType, newTreats.heatMapType)
+      );
+    },
+  );
+
+  const [option, setOption] = useState({});
+  const yAxisMapRef = useRef(new Map());
+
+  useEffect(() => {
+    if (!isEmpty(heatMaphData)) {
+      const { yAxisData, option } = useHeatMapInstance.updateHeatMap(heatMaphData, dimension, heatMapType);
+      setOption(option);
+      yAxisMapRef.current = yAxisData;
+    }
+  }, [heatMaphData, heatMapType]);
+
+  const onChartClick = async (echartsParams) => {
+    const dimX = echartsParams.data[0];
+    const dimY = yAxisMapRef.current[echartsParams.data[1]];
+    const params: TrendRequestParams = {
+      metric: metric,
+      stat: stat,
+      dimension: dimension,
+      value: dimensionValue,
+      dimX,
+      dimYIdx: dimY,
+    } as TrendRequestParams;
+    setContextState({ loadingLineChart: true });
+    const result: TrendResponseData = await useHeatMapInstance.loadGraphData(params);
+    setContextState({ loadingLineChart: false });
+    if (result?.error) {
+      message.error(result.error);
+      return;
+    }
+    const trendData = result.data;
+    setContextState({ trendData, dimX, dimY });
+  };
+
+  const onDataZoom = (params) => {
+    console.log(params);
+  };
+  return (
+    <div className="heatmap" style={{ height: '64vh', borderBottom: '2px solid #ccc' }}>
+      <ReactECharts
+        option={option}
+        style={{ height: '100%' }}
+        onEvents={{
+          click: onChartClick,
+          dataZoom: onDataZoom,
+        }}
+      />
+    </div>
+  );
+};
+
+export default memo(HeatMap);
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/HeatMap/useHeatMap.ts b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/HeatMap/useHeatMap.ts
new file mode 100644
index 000000000..eccbc1daf
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/HeatMap/useHeatMap.ts
@@ -0,0 +1,297 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+import { DIMENSIONS_AXIS_MAP, CONTINUOUS } from '../../../common/constant';
+import { formatSegmentLabel } from '../../../utils';
+import request from '../../../utils/request';
+import type { TrendRequestParams, TrendResponseData } from '../type';
+
+const useHeatMap = () => {
+  const loadGraphData = async (params: TrendRequestParams): Promise<TrendResponseData> => {
+    try {
+      const result = await request({
+        url: 'trend',
+        method: 'GET',
+        params,
+      });
+      return result;
+    } catch (error) {
+      return {
+        error: '网络异常：获取维度值列表失败',
+      };
+    }
+  };
+  const calculate3SigmaPieces = (data) => {
+    const values = data.map((item) => item[2]).filter((v) => !isNaN(v) && isFinite(v));
+    if (values.length === 0) return [];
+
+    const mean = values.reduce((a, b) => a + b, 0) / values.length;
+    const stdDev = Math.sqrt(values.reduce((a, b) => a + Math.pow(b - mean, 2), 0) / values.length);
+
+    const segments = [
+      { threshold: mean - 3 * stdDev, color: '#313695' },
+      { threshold: mean - 2 * stdDev, color: '#4575b4' },
+      { threshold: mean - stdDev, color: '#74add1' },
+      // { threshold: mean, color: '#abd9e9' },
+      { threshold: mean + stdDev, color: '#ffffbf' },
+      { threshold: mean + 2 * stdDev, color: '#fdae61' },
+      { threshold: mean + 3 * stdDev, color: '#f46d43' },
+      { threshold: Infinity, color: '#d73027' },
+    ];
+
+    const pieces: Array<{
+      min: number;
+      max: number;
+      label: string;
+      color: string;
+    }> = [];
+    let prevThreshold = -Infinity;
+
+    segments.forEach((segment) => {
+      if (segment.threshold > prevThreshold) {
+        pieces.push({
+          min: prevThreshold,
+          max: segment.threshold,
+          label: formatSegmentLabel(prevThreshold, segment.threshold),
+          color: segment.color,
+        });
+        prevThreshold = segment.threshold;
+      }
+    });
+
+    return pieces;
+  };
+  const createVisualMapConfig = (data, mode, minValue, maxValue) => {
+    const values = data.map((item) => item[2]).filter((v) => !isNaN(v) && isFinite(v));
+    if (values.length === 0) return {};
+
+    if (mode === CONTINUOUS) {
+      return {
+        type: 'continuous',
+        min: minValue,
+        max: maxValue,
+        inRange: {
+          color: [
+            '#4575b4',
+            '#74add1',
+            '#abd9e9',
+            '#e0f3f8',
+            '#ffffbf',
+            '#fee090',
+            '#fdae61',
+            '#f46d43',
+            '#d73027',
+            '#a50026',
+          ],
+        },
+        orient: 'horizontal',
+        left: 'center',
+        textStyle: {
+          color: '#666',
+        },
+        calculable: true,
+        itemWidth: 20,
+        itemHeight: 800,
+        precision: 12,
+        top: 20,
+      };
+    } else {
+      // 分段模式
+      return {
+        type: 'piecewise',
+        pieces: calculate3SigmaPieces(data),
+        orient: 'horizontal',
+        left: 'center',
+        itemGap: 7,
+        itemSymbol: 'rect',
+        textStyle: {
+          fontSize: 10,
+          color: '#666',
+        },
+        inRange: {
+          color: [],
+        },
+        top: 20,
+      };
+    }
+  };
+
+  const updateHeatMap = (data, dimension, heatMapType) => {
+    const ModuleNameMap = new Map(); // ID -> ModuleName
+    const yAxisMap = new Map(); // ID -> Index
+    let heatMapChartData = data.map((entry) => {
+      ModuleNameMap.set(entry[1][0], entry[1][1]);
+      return [entry[0], entry[1][0], entry[2]];
+    });
+
+    // x轴和y轴的刻度
+    const xAxisSet = new Set<number>();
+    const yAxisData = Array.from(ModuleNameMap.keys()).sort((a: number, b: number) => a - b);
+    yAxisData.forEach((id, index) => {
+      yAxisMap.set(id, index);
+    });
+    heatMapChartData = heatMapChartData.map((entry) => {
+      return [entry[0], yAxisMap.get(entry[1]), entry[2]];
+    });
+    // x轴和y轴的标签
+    const xAxisName = DIMENSIONS_AXIS_MAP[dimension]?.x;
+    const yAxisName = DIMENSIONS_AXIS_MAP[dimension]?.y;
+
+    let minValue = Number.MAX_VALUE;
+    let maxValue = Number.MIN_VALUE;
+    heatMapChartData.forEach((entry) => {
+      xAxisSet.add(entry[0]);
+      minValue = Math.min(minValue, entry[2]);
+      maxValue = Math.max(maxValue, entry[2]);
+    });
+    const xAxisData = Array.from(xAxisSet).sort((a: number, b: number) => a - b);
+
+    // 配置项
+    const option = {
+      backgroundColor: '#fff',
+      tooltip: {
+        position: 'top',
+        formatter: (params) => {
+          const xLabel = params.data[0];
+          const yLabel = ModuleNameMap.get(yAxisData[params.data[1]]);
+          return `
+                    <div style="font-weight:bold;margin-bottom:5px">${yAxisName}: ${yLabel}</div>
+                    <div style="margin-bottom:5px">${xAxisName}: ${xLabel}</div>
+                    <div>Value: <b>${params.data[2].toFixed(12)}</b></div>
+                    `;
+        },
+        backgroundColor: 'rgba(50,50,50,0.7)',
+        borderColor: '#333',
+        textStyle: {
+          color: '#fff',
+          fontSize: 12,
+        },
+        extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.3);border-radius:4px;padding:8px;',
+      },
+
+      grid: {
+        height: '80%',
+        width: '90%',
+        left: '5%',
+        top: '12%'
+      },
+
+      xAxis: {
+        type: 'category',
+        name: xAxisName,
+        data: xAxisData,
+        splitArea: {
+          show: true,
+        },
+
+        axisLabel: {
+          formatter: (value) => (value.length > 20 ? value.slice(0, 8) + '...' : value),
+          rotate: 45,
+          fontSize: 11,
+          color: '#666',
+          fontWeight: 'bold',
+        },
+        show: true,
+        nameLocation: 'end',
+        nameGap: 30,
+        axisTick: {
+          alignWithLabel: true,
+        },
+        nameTextStyle: {
+          fontSize: 12,
+          fontWeight: 'bold',
+          color: '#444',
+        },
+      },
+      yAxis: {
+        type: 'category',
+        name: yAxisName,
+        data: yAxisData,
+        offset: 4,
+        show: true,
+        nameLocation: 'end',
+        nameGap: 20,
+        axisLabel: {
+          fontSize: 11,
+          fontWeight: 'bold',
+          color: '#666',
+          formatter: (value) => {
+            return value.length > 15 ? value.slice(0, 8) + '...' : value;
+          },
+        },
+        nameTextStyle: {
+          fontSize: 12,
+          fontWeight: 'bold',
+          color: '#444',
+        },
+      },
+      visualMap: createVisualMapConfig(heatMapChartData, heatMapType, minValue, maxValue),
+      dataZoom: [
+        {
+          type: 'slider',
+          show: true,
+          startValue: 0,
+          endValue: 500,
+          bottom: 30,
+          realtime: false,
+        },
+        {
+          type: 'inside',
+          startValue: 0,
+          endValue: 500,
+        },
+        {
+          type: 'slider',
+          show: true,
+          yAxisIndex: 0,
+          filterMode: 'empty',
+          handleSize: 8,
+          showDataShadow: false,
+          left: '20',
+          start: 0,
+          end: 100,
+        },
+      ],
+      series: [
+        {
+          name: 'Heatmap',
+          type: 'heatmap',
+          data: heatMapChartData,
+          label: {
+            show: false,
+          },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          },
+          progressive: 300,
+          animation: true,
+        },
+      ],
+      animation: true,
+      animationDuration: 300,
+      animationEasing: 'cubicInOut',
+    };
+
+    return { yAxisData, option };
+  };
+
+  return { updateHeatMap, loadGraphData };
+};
+export default useHeatMap;
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/LineChart/index.tsx b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/LineChart/index.tsx
new file mode 100644
index 000000000..8f38a695b
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/LineChart/index.tsx
@@ -0,0 +1,140 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+import React, { memo } from 'react';
+import ReactECharts from 'echarts-for-react';
+import { useGlobalStore } from '../../../store';
+import { useShallow, shallow } from 'zustand/shallow';
+import { DIMENSIONS_AXIS_MAP, MODULE_NAME_DIMENSION } from '../../../common/constant';
+
+const LineChart = () => {
+  const { metric, stat, dimension, trendData, dimX, dimY } = useGlobalStore(
+    useShallow((state) => ({
+      metric: state.metric,
+      stat: state.stat,
+      dimension: state.dimension,
+      trendData: state.trendData,
+      dimX: state.dimX,
+      dimY: state.dimY,
+    })),
+    shallow,
+  );
+  const heatMapXAxisName = DIMENSIONS_AXIS_MAP[dimension || '']?.x;
+  const heatMapYAxisName = DIMENSIONS_AXIS_MAP[dimension || '']?.y;
+  let yAxisMap = new Map<string, string>();
+  let xAxisData = trendData?.dimensions;
+  let xAxisName = dimension;
+  if (dimension === MODULE_NAME_DIMENSION) {
+    xAxisName = 'Target Id';
+    trendData?.dimensions.forEach((item, index) => {
+      yAxisMap.set(String(index), item);
+    });
+    xAxisData = Array.from(yAxisMap.keys());
+  }
+
+  const option = {
+    title: {
+      text: `${metric} 分布图 (${heatMapXAxisName}: ${dimX || ' '} / ${heatMapYAxisName}: ${dimY || ' '}) `,
+      left: 'center',
+      top: '2%',
+      textStyle: {
+        fontSize: 14,
+        color: '#666',
+        fontWeight: 'bold',
+      },
+    },
+    grid: {
+      width: '90%',
+      top: '20%',
+      left: '5%',
+    },
+    tooltip: {
+      trigger: 'axis',
+      formatter: (params) => {
+        const yAxisValue = params[0]?.data;
+        const dimensionValue = params[0]?.axisValue;
+        const xAxisLabel = dimension === MODULE_NAME_DIMENSION ? 'Module Name' : xAxisName;
+        const xAxisValue = dimension === MODULE_NAME_DIMENSION ? yAxisMap.get(dimensionValue) : dimensionValue;
+        return `
+                    <div style="font-weight:bold;margin-bottom:5px">${xAxisLabel}: ${xAxisValue}</div>
+                    <div style="font-weight:bold;margin-bottom:5px">${stat}: ${yAxisValue}</div>
+                    `;
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: xAxisData,
+      name: xAxisName,
+      axisLabel: {
+        rotate: 45,
+        fontSize: 12,
+        fontWeight: 'bold',
+      },
+      nameTextStyle: {
+        fontSize: 12,
+        fontWeight: 'bold',
+        color: '#444',
+      },
+    },
+    yAxis: {
+      type: 'value',
+      name: stat,
+      axisLabel: {
+        fontSize: 12,
+        fontWeight: 'bold',
+        formatter: (value) => {
+          if (value === 0) return '0';
+          const absValue = Math.abs(value);
+          if (absValue < 1e-4 || absValue >= 1e4) {
+            return value.toExponential(4);
+          } else {
+            let str = value.toFixed(4);
+            str = str.replace(/(\.\d*?[1-9])0+$/, '$1').replace(/\.$/, '');
+            return str;
+          }
+        },
+      },
+      nameTextStyle: {
+        fontSize: 12,
+        fontWeight: 'bold',
+        color: '#444',
+      },
+    },
+    series: [
+      {
+        name: '趋势',
+        type: 'line',
+        data: trendData?.values,
+        lineStyle: {
+          width: 2,
+        },
+        progressive: 1000,
+        animation: true,
+      },
+    ],
+    animation: true,
+    animationDuration: 1000,
+    animationEasing: 'cubicInOut',
+  };
+  return (
+    <div className="LineChart" style={{ height: '32vh' }}>
+      <ReactECharts option={option} style={{ height: '100%' }} />
+    </div>
+  );
+};
+
+export default memo(LineChart);
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/type/index.d.ts b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/type/index.d.ts
new file mode 100644
index 000000000..10b5cd939
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/components/type/index.d.ts
@@ -0,0 +1,32 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+export type TrendRequestParams = {
+  metric: string;
+  stat: string;
+  dimension: string;
+  value: string;
+  dimX: string;
+  dimYIdx: string;
+};
+
+export type TrendResponseData = {
+  data?: {
+    dimensions: string[];
+    values: string[];
+  };
+  error?: string;
+};
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/index.less b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/index.less
new file mode 100644
index 000000000..ac7dfd6df
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/index.less
@@ -0,0 +1,41 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+.graph-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .graph-title {
+        font-size: 16px;
+        font-weight: 500;
+        text-align: center;
+        padding-block: 6px;
+        background-color: #f1f1f1;
+    }
+}
+
+.main-graph {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/index.tsx b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/index.tsx
new file mode 100644
index 000000000..689e91746
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/graph/index.tsx
@@ -0,0 +1,50 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+import React, { memo } from 'react';
+import { Spin } from 'antd';
+import { useShallow, shallow } from 'zustand/shallow';
+import { useGlobalStore } from '../store';
+import HeatMap from './components/HeatMap';
+import LineChart from './components/LineChart';
+
+import './index.less';
+
+const Graph = () => {
+  const { loadingHeatMap, loadingLineChart } = useGlobalStore(
+    useShallow((state) => ({
+      loadingHeatMap: state.loadingHeatMap,
+      loadingLineChart: state.loadingLineChart,
+    })),
+    shallow,
+  );
+  return (
+    <div className="graph-container">
+      <div className="graph-title">模型监控数据看板</div>
+      <div className="main-graph">
+        <Spin size="middle" spinning={loadingHeatMap}>
+          <HeatMap />
+        </Spin>
+        <Spin size="middle" spinning={loadingLineChart}>
+          <LineChart />
+        </Spin>
+      </div>
+    </div>
+  );
+};
+
+export default memo(Graph);
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/index.tsx b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/index.tsx
new file mode 100644
index 000000000..e7b152719
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/index.tsx
@@ -0,0 +1,26 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import MonVis from './main';
+
+const rootElement = document.getElementById('root');
+if (rootElement) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(<MonVis />);
+}
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/main/index.less b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/main/index.less
new file mode 100644
index 000000000..408597b46
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/main/index.less
@@ -0,0 +1,26 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+.sider {
+    background-color: #e2e1e1;
+    padding-inline: 1px;
+    min-width: 260px !important;
+}
+
+.content {
+    background-color: white;
+}
\ No newline at end of file
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/main/index.tsx b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/main/index.tsx
new file mode 100644
index 000000000..c5eaffdd3
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/main/index.tsx
@@ -0,0 +1,60 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+import React, { useEffect, useState, memo } from 'react';
+import { Layout } from 'antd';
+import Controller from '../controller';
+import Graph from '../graph';
+import { message } from 'antd';
+import './index.less';
+import request from '../utils/request';
+import { isEmpty } from 'lodash';
+import type { MetricsResponseType } from './type';
+const { Sider, Content } = Layout;
+
+const MonVis = () => {
+  const [metrics, setMetrics] = useState<MetricsResponseType>([]);
+
+  // API获取指标信息
+  const loadIndicatorsInfo = async () => {
+    try {
+      const { data } = (await request({ url: 'metrics', method: 'GET' })) as unknown as MetricsResponseType;
+      if (!isEmpty(data)) {
+        setMetrics(data);
+      }
+    } catch (error) {
+      message.error('网络异常：获取指标信息失败');
+    }
+  };
+
+  useEffect(() => {
+    loadIndicatorsInfo();
+  }, []);
+
+  return (
+    <Layout style={{ height: '100vh' }}>
+      <Sider width="360" className="sider">
+        <Controller metrics={metrics} />
+      </Sider>
+      <Content className="content">
+        <Graph />
+      </Content>
+    </Layout>
+  );
+};
+
+export default memo(MonVis);
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/main/type/index.d.ts b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/main/type/index.d.ts
new file mode 100644
index 000000000..9ac2f7d08
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/main/type/index.d.ts
@@ -0,0 +1,26 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+export interface MetricsResponseType {
+  success: boolean;
+  data: Array<metricsData>;
+}
+
+export interface metricsDataType {
+  name: string;
+  stats: string[];
+}
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/store/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/store/index.ts
new file mode 100644
index 000000000..79b5345c0
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/store/index.ts
@@ -0,0 +1,39 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+import { createWithEqualityFn } from 'zustand/traditional';
+import { CONTINUOUS } from '../common/constant';
+import type { ContextStateType } from '../common/type';
+
+// 使用createWithEqualityFn而不是create
+export const useGlobalStore = createWithEqualityFn<ContextStateType>(
+  (set) => ({
+    heatMaphData: [],
+    trendData: { dimensions: [], values: [] },
+    metric: '',
+    stat: '',
+    dimension: '',
+    dimensionValue: '',
+    heatMapType: CONTINUOUS,
+    dimX: '',
+    dimY: '',
+    loadingHeatMap: false,
+    loadingLineChart: false,
+    setContextState: (newState) => set((state) => ({ ...state, ...newState })),
+  }),
+  Object.is, // 指定默认的相等性函数，可以是浅层比较
+);
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/index.ts
new file mode 100644
index 000000000..d899bc245
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/index.ts
@@ -0,0 +1,27 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+export const formatSegmentLabel = (min, max) => {
+  const format = (value) => {
+    if (value === Infinity) return '∞';
+    if (value === -Infinity) return '-∞';
+    return value.toExponential(2);
+  };
+
+  if (min === -Infinity) return `< ${format(max)}`;
+  if (max === Infinity) return `> ${format(min)}`;
+  return `${format(min)} ~ ${format(max)}`;
+};
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/request.ts b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/request.ts
new file mode 100644
index 000000000..84c23efb6
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/request.ts
@@ -0,0 +1,91 @@
+/* Copyright (c) 2025, Huawei Technologies.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0  (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import axios, { AxiosResponse, AxiosError } from 'axios';
+interface RequestOptions {
+  url: string; // 请求地址
+  method?: 'GET' | 'POST' | 'PUT' | 'DELETE'; // 请求方法，默认为 GET
+  data?: any; // 请求体数据（适用于 POST、PUT）
+  params?: any; // URL 参数（适用于 GET）
+  headers?: Record<string, string>; // 自定义请求头
+  timeout?: number; // 超时时间（毫秒），默认 10 秒
+}
+interface ApiResponse<T = any> {
+  success: boolean; // 是否成功
+  data?: T; // 响应数据
+  error?: string; // 错误信息
+}
+export default async function request<T = any>(options: RequestOptions): Promise<ApiResponse<T>> {
+  const { url, method = 'GET', data = null, params = null, headers = {}, timeout = 60000 * 3 } = options;
+
+  try {
+    const controller = new AbortController();
+    const signal = controller.signal;
+    const timeoutId = setTimeout(() => controller.abort(), timeout);
+    const response: AxiosResponse<T> = await axios({
+      url,
+      method,
+      data,
+      params,
+      headers: {
+        'Content-Type': 'application/json', // 默认 Content-Type
+        ...headers, // 自定义请求头覆盖默认值
+      },
+      maxBodyLength: Infinity, // 允许发送大文件
+      signal, // 绑定信号以支持超时
+    });
+
+    clearTimeout(timeoutId);
+    if (response.status >= 200 && response.status < 300) {
+      return response.data as ApiResponse<T>;
+    } else {
+      return {
+        success: false,
+        error: `HTTP Error: ${response.status} - ${response.statusText}`,
+      };
+    }
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      const axiosError = error as AxiosError;
+      if (axiosError.code === 'ECONNABORTED') {
+        return {
+          success: false,
+          error: '请求超时，请稍后重试。',
+        };
+      } else if (axiosError.response) {
+        const { status, statusText } = axiosError.response;
+        return {
+          success: false,
+          error: `HTTP Error: ${status} - ${statusText}`,
+        };
+      } else if (axiosError.request) {
+        return {
+          success: false,
+          error: '网络错误，未收到服务器响应。',
+        };
+      } else {
+        return {
+          success: false,
+          error: axiosError.message || '未知错误',
+        };
+      }
+    } else {
+      return {
+        success: false,
+        error: (error as Error).message || '未知错误',
+      };
+    }
+  }
+}
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/tsconfig.json b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/tsconfig.json
new file mode 100644
index 000000000..15fb526ae
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/tsconfig.json
@@ -0,0 +1,40 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "downlevelIteration": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "inlineSourceMap": true,
+    "lib": [
+      "dom",
+      "ES2022",
+      "dom.iterable"
+    ],
+    "moduleResolution": "node",
+    "module": "ES2022",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitOverride": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "target": "es2018"
+  }
+}
\ No newline at end of file
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.config.js b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.config.js
new file mode 100644
index 000000000..e52a714e3
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.config.js
@@ -0,0 +1,81 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const InlineChunkHtmlPlugin = require('inline-chunk-html-plugin');
+
+module.exports = {
+  entry: {
+    app: './src/index.tsx',
+  },
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(html)$/,
+        use: {
+          loader: 'html-loader',
+        },
+      },
+      {
+        test: /\.tsx?$/,
+        use: {
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true,
+          },
+        },
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.less$/i,
+        use: [
+          'style-loader', // 将 JS 字符串生成为 <style> 标签
+          'css-loader', // 解析 @import 和 url() 等引用
+          {
+            loader: 'less-loader', // 编译 Less 文件为 CSS
+            options: {
+              lessOptions: {
+                javascriptEnabled: true, // 如果你使用了 JavaScript 内嵌的 Less 函数，则需要此选项
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js', '.tsx'],
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new HtmlWebpackPlugin({
+      inject: 'body',
+      template: './public/index.html',
+    }),
+    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]),
+  ],
+};
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.dev.js b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.dev.js
new file mode 100644
index 000000000..253576e65
--- /dev/null
+++ b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.dev.js
@@ -0,0 +1,160 @@
+/* -------------------------------------------------------------------------
+ Copyright (c) 2025, Huawei Technologies.
+ All rights reserved.
+
+ Licensed under the Apache License, Version 2.0  (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+--------------------------------------------------------------------------------------------*/
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  mode: 'development', // 明确指定开发模式
+  devtool: 'eval-cheap-source-map', // 开发环境推荐使用的 source map 类型
+
+  entry: {
+    app: './src/index.tsx', // 保持与生产环境一致的入口
+  },
+
+  output: {
+    filename: '[name].bundle.js', // 使用带 hash 的文件名
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/', // 确保 dev server 的静态资源路径正确
+  },
+
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'dist'), // 服务资源目录
+    },
+    compress: false,
+    proxy: [
+      {
+        context: (pathname) => {
+          return !pathname.match(/(\.js|\.css|\.html|\.ico|\.svg)$/);
+        },
+        target: 'http://127.0.0.1:6006',
+        changeOrigin: true,
+        secure: false,
+        pathRewrite: {
+          '^/(.*)': '/data/plugin/mon_vis/$1', // 路径转换核心逻辑
+        },
+        on: {
+          error: (err, req, res) => {
+            // 安全处理响应对象
+            if (res && !res.headersSent) {
+              res.writeHead(500, { 'Content-Type': 'text/plain' });
+              res.end('Proxy Error');
+            }
+          },
+          proxyReqWs: (proxyReq, req, socket) => {
+            // WebSocket 错误专属处理
+            socket.on('error', (error) => {});
+          },
+        },
+      },
+    ],
+    webSocketServer: {
+      type: 'ws',
+      options: {
+        path: '/ws',
+        noInfo: true,
+      },
+    },
+    http2: false, // 推荐启用HTTP/2
+    https: false, // 根据实际需要配置
+    hot: true, // 启用热模块替换
+    liveReload: true, // 启用实时重新加载
+    port: 8080, // 自定义端口号
+    open: true, // 自动打开浏览器
+    client: {
+      overlay: {
+        errors: true,
+        warnings: false,
+      }, // 在浏览器中显示编译错误
+    },
+    headers: {
+      'X-Proxy-Source': 'webpack-dev-server',
+    },
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.html$/,
+        use: [
+          {
+            loader: 'html-loader',
+            options: {
+              sources: false, // 开发环境不需要优化资源路径
+            },
+          },
+        ],
+      },
+      {
+        test: /\.tsx?$/, // 支持 .ts 和 .tsx 文件
+        use: {
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true,
+            experimentalWatchApi: true,
+          },
+        },
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/i,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true, // 启用 CSS source maps
+            },
+          },
+        ],
+      },
+      {
+        test: /\.less$/i,
+        use: [
+          'style-loader', // 将 JS 字符串生成为 <style> 标签
+          'css-loader', // 解析 @import 和 url() 等引用
+          {
+            loader: 'less-loader', // 编译 Less 文件为 CSS
+            options: {
+              lessOptions: {
+                javascriptEnabled: true, // 如果你使用了 JavaScript 内嵌的 Less 函数，则需要此选项
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.json'], // 添加 .json 扩展名解析
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      inject: 'body',
+      template: './public/index.html',
+      minify: false, // 开发环境不压缩 HTML
+    }),
+  ],
+
+  optimization: {
+    removeAvailableModules: false,
+    removeEmptyChunks: false,
+    splitChunks: false, // 禁用代码拆分加速编译
+  },
+};
-- 
Gitee


From 3a4ace84802fc40f0357f9c00e7ead9b5e4ca1fe Mon Sep 17 00:00:00 2001
From: sunchao <1299792067@qq.com>
Date: Fri, 15 Aug 2025 15:57:31 +0800
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=E5=88=A0=E9=99=A4TensorBoard?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=E7=9A=84=E5=89=8D=E7=AB=AF=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tb_graph_ascend/monvis_plugin/fe/.babelrc |   3 -
 .../monvis_plugin/fe/.prettierrc              |  13 --
 .../monvis_plugin/fe/package.json             |  49 ----
 .../monvis_plugin/fe/public/index.html        |  10 -
 .../fe/src/controller/index.less              |  34 ---
 .../monvis_plugin/fe/src/controller/index.tsx | 216 ------------------
 .../fe/src/controller/type/index.d.ts         |  39 ----
 .../fe/src/controller/useController.ts        |  59 -----
 .../monvis_plugin/fe/src/index.tsx            |  26 ---
 .../monvis_plugin/fe/src/store/index.ts       |  39 ----
 .../monvis_plugin/fe/src/utils/index.ts       |  27 ---
 .../monvis_plugin/fe/src/utils/request.ts     |  91 --------
 .../monvis_plugin/fe/tsconfig.json            |  40 ----
 .../monvis_plugin/fe/webpack.config.js        |  81 -------
 .../monvis_plugin/fe/webpack.dev.js           | 160 -------------
 15 files changed, 887 deletions(-)
 delete mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.babelrc
 delete mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.prettierrc
 delete mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/package.json
 delete mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/public/index.html
 delete mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.less
 delete mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.tsx
 delete mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/type/index.d.ts
 delete mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/useController.ts
 delete mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/index.tsx
 delete mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/store/index.ts
 delete mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/index.ts
 delete mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/request.ts
 delete mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/tsconfig.json
 delete mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.config.js
 delete mode 100644 plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.dev.js

diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.babelrc b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.babelrc
deleted file mode 100644
index 18151f1f8..000000000
--- a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
-}
\ No newline at end of file
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.prettierrc b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.prettierrc
deleted file mode 100644
index e3d2acb00..000000000
--- a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/.prettierrc
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "parser": "typescript",
-  "semi": true,
-  "singleQuote": true,
-  "jsxSingleQuote": false,
-  "bracketSpacing": true,
-  "tabWidth": 2,
-  "useTabs": false,
-  "trailingComma": "all",
-  "proseWrap": "always",
-  "endOfLine": "lf",
-  "printWidth": 120
-}
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/package.json b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/package.json
deleted file mode 100644
index bcd958160..000000000
--- a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/package.json
+++ /dev/null
@@ -1,49 +0,0 @@
-{
-  "name": "fe",
-  "version": "1.0.0",
-  "main": "webpack.config.js",
-  "scripts": {
-    "dev": "webpack serve --config webpack.dev.js",
-    "buildWin": "cross-env NODE_ENV=production webpack && copy dist\\index.html ..\\server\\static\\",
-    "prettier": "prettier --config ./.prettierrc --write ./src/**/*.ts"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "devDependencies": {
-    "@babel/core": "^7.27.3",
-    "@babel/preset-env": "^7.27.2",
-    "@babel/preset-react": "^7.27.1",
-    "babel-loader": "^10.0.0",
-    "clean-webpack-plugin": "^4.0.0",
-    "cross-env": "^7.0.3",
-    "css-loader": "^7.1.2",
-    "file-loader": "^6.2.0",
-    "html-loader": "^5.1.0",
-    "html-webpack-plugin": "^5.6.3",
-    "inline-chunk-html-plugin": "^1.1.1",
-    "less": "^4.3.0",
-    "less-loader": "^12.3.0",
-    "mini-css-extract-plugin": "^2.9.2",
-    "prettier": "^3.5.3",
-    "style-loader": "^4.0.0",
-    "ts-loader": "^9.5.2",
-    "typescript": "^5.8.3",
-    "webpack": "^5.96.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "4.15.1"
-  },
-  "dependencies": {
-    "ahooks": "^3.8.5",
-    "antd": "^5.25.3",
-    "axios": "^1.9.0",
-    "echarts": "^5.6.0",
-    "echarts-for-react": "^3.0.2",
-    "lodash": "^4.17.21",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "use-sync-external-store": "^1.5.0",
-    "zustand": "^5.0.5"
-  }
-}
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/public/index.html b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/public/index.html
deleted file mode 100644
index a0c678cdf..000000000
--- a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/public/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <title>Graph</title>
-</head>
-<body>
-    <div id="root"></div>
-</body>
-</html>
\ No newline at end of file
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.less b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.less
deleted file mode 100644
index 2d10e24d0..000000000
--- a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.less
+++ /dev/null
@@ -1,34 +0,0 @@
-/* -------------------------------------------------------------------------
- Copyright (c) 2025, Huawei Technologies.
- All rights reserved.
-
- Licensed under the Apache License, Version 2.0  (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
---------------------------------------------------------------------------------------------*/
-
-.warpper {
-    background-color: #eeeeee;
-    height: 100%;
-}
-
-.controller {
-    padding: 16px 12px;
-    background-color: white;
-}
-
-.title {
-    font-size: 16px;
-    font-weight: 500;
-    text-align: center;
-    padding-block: 6px;
-    background-color: #f1f1f1;
-}
\ No newline at end of file
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.tsx b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.tsx
deleted file mode 100644
index ee2a7a787..000000000
--- a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/index.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-/* -------------------------------------------------------------------------
- Copyright (c) 2025, Huawei Technologies.
- All rights reserved.
-
- Licensed under the Apache License, Version 2.0  (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
---------------------------------------------------------------------------------------------*/
-
-import React, { useEffect, useState, memo } from 'react';
-import { shallow, useShallow } from 'zustand/shallow';
-import { message } from 'antd';
-import { isEmpty } from 'lodash';
-import './index.less';
-import { useGlobalStore } from '../store';
-import { DIMENSIONS_OPTIONS, HEATMAP_TYPE } from '../common/constant';
-import SelectWithLabel from '../common/SelectWithLabel';
-import useController from './useController';
-import type { SelectOptionType } from '../common/type';
-import type { ControllerProps, ValuesResponseType, ValuesRequestParamsType } from './type';
-
-const Controller: React.FC = (props: ControllerProps) => {
-  const { metrics } = props;
-  const useControllerInstance = useController();
-  const { metric, stat, dimension, dimensionValue, heatMapType, setContextState } = useGlobalStore(
-    useShallow((state) => ({
-      metric: state.metric,
-      stat: state.stat,
-      dimension: state.dimension,
-      dimensionValue: state.dimensionValue,
-      heatMapType: state.heatMapType,
-      setContextState: state.setContextState,
-    })),
-    shallow,
-  );
-  const [metricsMapStats, setMetricsMapStats] = useState<Record<string, Array<SelectOptionType>>>({});
-  const [metricsNameList, setMetricsNameList] = useState<string[]>([]);
-  const [statNameList, setStatNameList] = useState<string[]>([]);
-  const [dimensionValueList, setDimensionValueList] = useState<string[]>();
-
-  useEffect(() => {
-    if (metrics) {
-      const metricsMapStats: Record<string, Array<SelectOptionType>> = {};
-      const metricsNameList: Array<SelectOptionType> = [];
-      metrics.forEach(({ name, stats }) => {
-        metricsMapStats[name] = stats.map((stat) => {
-          return {
-            label: stat,
-            value: stat,
-          };
-        });
-        metricsNameList.push({ label: name, value: name });
-      });
-
-      const selecrMetric = metricsNameList?.[0]?.value;
-      const statNameList: Array<SelectOptionType> = metricsMapStats[selecrMetric];
-      const selectedStat = statNameList?.[0]?.value;
-      setMetricsMapStats(metricsMapStats);
-      // 初始化指标
-      setMetricsNameList(metricsNameList);
-      // 初始化统计量
-      setStatNameList(statNameList);
-      setContextState({ metric: selecrMetric, stat: selectedStat });
-      // 初始化维度,默认选中step维度
-      const params: ValuesRequestParamsType = {
-        metric: selecrMetric,
-        stat: selectedStat,
-        dimension: DIMENSIONS_OPTIONS[0].value,
-        value: 0,
-      };
-      updateDimensionValueList(params);
-    }
-  }, [metrics]);
-
-  useEffect(() => {
-    if (!metric || !stat || !dimension || !dimensionValue) {
-      return;
-    }
-    const params = {
-      metric,
-      stat,
-      dimension,
-      value: dimensionValue,
-    };
-    const loadGraphData = async (params) => {
-      setContextState({ loadingHeatMap: true });
-      const result = await useControllerInstance.loadGraphData(params);
-      setContextState({ loadingHeatMap: false });
-      if (result.error) {
-        message.error(result?.error);
-        return;
-      }
-      setContextState({
-        heatMaphData: result?.data,
-        trendData: { dimensions: [], values: [] },
-        dimX: ' ',
-        dimY: ' ',
-      });
-    };
-    loadGraphData(params);
-  }, [metric, stat, dimension, dimensionValue]);
-
-  const updateDimensionValueList = async (params: ValuesRequestParamsType) => {
-    const result: ValuesResponseType = await useControllerInstance.loadDimensionValueList(params);
-    if (result.error) {
-      message.error(result.error);
-      return;
-    }
-    if (!isEmpty(result)) {
-      const dimensionValueList = Object.entries(result?.data || {}).map(([key, value]) => {
-        return {
-          value: key,
-          label: value,
-        };
-      });
-      setContextState({
-        dimension: params.dimension,
-        dimensionValue: dimensionValueList?.[0]?.value,
-      });
-      setDimensionValueList(dimensionValueList);
-    }
-  };
-
-  // 指标选择
-  const onSelectMetricChange = (value: string) => {
-    const statNameList = metricsMapStats[value];
-    const selectedStat = statNameList?.[0]?.value;
-    setContextState({ metric: value, stat: selectedStat });
-    setStatNameList(statNameList);
-  };
-
-  // 统计量选择
-  const onSelectStatChange = (value: string) => {
-    setContextState({ stat: value });
-  };
-
-  // 维度选择
-  const onSelectDimensionChange = (value: string) => {
-    const params: ValuesRequestParamsType = {
-      metric,
-      stat,
-      dimension: value,
-      value: 0,
-    } as ValuesRequestParamsType;
-    updateDimensionValueList(params);
-  };
-  // 维度值选择
-  const onSelectDimensionValueChange = (value: string) => {
-    setContextState({ dimensionValue: value });
-  };
-
-  return (
-    <div className="warpper">
-      <div className="title">设置</div>
-      <div className="controller">
-        <SelectWithLabel
-          className="select-with-label"
-          value={metric}
-          label="选择指标"
-          text="选择要分析的模型指标"
-          onChange={onSelectMetricChange}
-          options={metricsNameList}
-        />
-        <SelectWithLabel
-          className="select-with-label"
-          label="选择统计量"
-          text="选择要计算的统计量"
-          value={stat}
-          onChange={onSelectStatChange}
-          options={statNameList}
-        />
-        <SelectWithLabel
-          className="select-with-label"
-          placeholder="请选择维度"
-          label="选择维度"
-          text="选择分析的维度"
-          value={dimension}
-          onChange={onSelectDimensionChange}
-          options={DIMENSIONS_OPTIONS}
-        />
-        <SelectWithLabel
-          className="select-with-label"
-          label="选择值"
-          text="选择维度的具体值"
-          value={dimensionValue}
-          placeholder="请选择值"
-          onChange={onSelectDimensionValueChange}
-          options={dimensionValueList}
-        />
-        <SelectWithLabel
-          className="select-with-label"
-          label="热力图模式"
-          text="选择热力图的渲染模式"
-          value={heatMapType}
-          placeholder="请选择值"
-          onChange={(value) =>
-            setContextState({
-              heatMapType: value,
-            })
-          }
-          options={HEATMAP_TYPE}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default memo(Controller);
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/type/index.d.ts b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/type/index.d.ts
deleted file mode 100644
index 4d396a0bd..000000000
--- a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/type/index.d.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/* -------------------------------------------------------------------------
- Copyright (c) 2025, Huawei Technologies.
- All rights reserved.
-
- Licensed under the Apache License, Version 2.0  (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
---------------------------------------------------------------------------------------------*/
-
-export interface ControllerProps {
-  metrics: Array<metricsDataType>;
-}
-
-export interface ValuesResponseType {
-  data?: {
-    [string]: string;
-  };
-  error?: string;
-}
-
-export interface HeatmapDataResponseType {
-  data?: Array<any>;
-  error?: string;
-}
-
-export interface ValuesRequestParamsType {
-  metric: string;
-  stat: string;
-  dimension: string;
-  value: number;
-}
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/useController.ts b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/useController.ts
deleted file mode 100644
index c2ff9d1f3..000000000
--- a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/controller/useController.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/* -------------------------------------------------------------------------
- Copyright (c) 2025, Huawei Technologies.
- All rights reserved.
-
- Licensed under the Apache License, Version 2.0  (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
---------------------------------------------------------------------------------------------*/
-
-import request from '../utils/request';
-import { ValuesResponseType, ValuesRequestParamsType, HeatmapDataResponseType } from './type';
-
-const useController = () => {
-  const loadGraphData = async (params: ValuesRequestParamsType) => {
-    try {
-      const result = await request({
-        url: 'heatmap_data',
-        method: 'GET',
-        params,
-      }) as unknown as HeatmapDataResponseType;
-      return result;
-    } catch (error) {
-      return {
-        error: '网络异常：获取维度值列表失败',
-      };
-    }
-  };
-  const loadDimensionValueList = async (params: ValuesRequestParamsType) => {
-    if (!params.dimension || !params.metric || !params.stat) {
-      return {};
-    }
-    try {
-      const result: ValuesResponseType = (await request({
-        url: 'values',
-        method: 'GET',
-        params,
-      })) as unknown as ValuesResponseType;
-      return result;
-    } catch (error) {
-      return {
-        error: '网络异常：获取维度值列表失败',
-      };
-    }
-  };
-  return {
-    loadGraphData,
-    loadDimensionValueList,
-  };
-};
-
-export default useController;
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/index.tsx b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/index.tsx
deleted file mode 100644
index e7b152719..000000000
--- a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-/* -------------------------------------------------------------------------
- Copyright (c) 2025, Huawei Technologies.
- All rights reserved.
-
- Licensed under the Apache License, Version 2.0  (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
---------------------------------------------------------------------------------------------*/
-
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import MonVis from './main';
-
-const rootElement = document.getElementById('root');
-if (rootElement) {
-  const root = ReactDOM.createRoot(rootElement);
-  root.render(<MonVis />);
-}
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/store/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/store/index.ts
deleted file mode 100644
index 79b5345c0..000000000
--- a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/store/index.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/* -------------------------------------------------------------------------
- Copyright (c) 2025, Huawei Technologies.
- All rights reserved.
-
- Licensed under the Apache License, Version 2.0  (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
---------------------------------------------------------------------------------------------*/
-
-import { createWithEqualityFn } from 'zustand/traditional';
-import { CONTINUOUS } from '../common/constant';
-import type { ContextStateType } from '../common/type';
-
-// 使用createWithEqualityFn而不是create
-export const useGlobalStore = createWithEqualityFn<ContextStateType>(
-  (set) => ({
-    heatMaphData: [],
-    trendData: { dimensions: [], values: [] },
-    metric: '',
-    stat: '',
-    dimension: '',
-    dimensionValue: '',
-    heatMapType: CONTINUOUS,
-    dimX: '',
-    dimY: '',
-    loadingHeatMap: false,
-    loadingLineChart: false,
-    setContextState: (newState) => set((state) => ({ ...state, ...newState })),
-  }),
-  Object.is, // 指定默认的相等性函数，可以是浅层比较
-);
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/index.ts
deleted file mode 100644
index d899bc245..000000000
--- a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/* -------------------------------------------------------------------------
- Copyright (c) 2025, Huawei Technologies.
- All rights reserved.
-
- Licensed under the Apache License, Version 2.0  (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
---------------------------------------------------------------------------------------------*/
-export const formatSegmentLabel = (min, max) => {
-  const format = (value) => {
-    if (value === Infinity) return '∞';
-    if (value === -Infinity) return '-∞';
-    return value.toExponential(2);
-  };
-
-  if (min === -Infinity) return `< ${format(max)}`;
-  if (max === Infinity) return `> ${format(min)}`;
-  return `${format(min)} ~ ${format(max)}`;
-};
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/request.ts b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/request.ts
deleted file mode 100644
index 84c23efb6..000000000
--- a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/src/utils/request.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/* Copyright (c) 2025, Huawei Technologies.
- * All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0  (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import axios, { AxiosResponse, AxiosError } from 'axios';
-interface RequestOptions {
-  url: string; // 请求地址
-  method?: 'GET' | 'POST' | 'PUT' | 'DELETE'; // 请求方法，默认为 GET
-  data?: any; // 请求体数据（适用于 POST、PUT）
-  params?: any; // URL 参数（适用于 GET）
-  headers?: Record<string, string>; // 自定义请求头
-  timeout?: number; // 超时时间（毫秒），默认 10 秒
-}
-interface ApiResponse<T = any> {
-  success: boolean; // 是否成功
-  data?: T; // 响应数据
-  error?: string; // 错误信息
-}
-export default async function request<T = any>(options: RequestOptions): Promise<ApiResponse<T>> {
-  const { url, method = 'GET', data = null, params = null, headers = {}, timeout = 60000 * 3 } = options;
-
-  try {
-    const controller = new AbortController();
-    const signal = controller.signal;
-    const timeoutId = setTimeout(() => controller.abort(), timeout);
-    const response: AxiosResponse<T> = await axios({
-      url,
-      method,
-      data,
-      params,
-      headers: {
-        'Content-Type': 'application/json', // 默认 Content-Type
-        ...headers, // 自定义请求头覆盖默认值
-      },
-      maxBodyLength: Infinity, // 允许发送大文件
-      signal, // 绑定信号以支持超时
-    });
-
-    clearTimeout(timeoutId);
-    if (response.status >= 200 && response.status < 300) {
-      return response.data as ApiResponse<T>;
-    } else {
-      return {
-        success: false,
-        error: `HTTP Error: ${response.status} - ${response.statusText}`,
-      };
-    }
-  } catch (error) {
-    if (axios.isAxiosError(error)) {
-      const axiosError = error as AxiosError;
-      if (axiosError.code === 'ECONNABORTED') {
-        return {
-          success: false,
-          error: '请求超时，请稍后重试。',
-        };
-      } else if (axiosError.response) {
-        const { status, statusText } = axiosError.response;
-        return {
-          success: false,
-          error: `HTTP Error: ${status} - ${statusText}`,
-        };
-      } else if (axiosError.request) {
-        return {
-          success: false,
-          error: '网络错误，未收到服务器响应。',
-        };
-      } else {
-        return {
-          success: false,
-          error: axiosError.message || '未知错误',
-        };
-      }
-    } else {
-      return {
-        success: false,
-        error: (error as Error).message || '未知错误',
-      };
-    }
-  }
-}
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/tsconfig.json b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/tsconfig.json
deleted file mode 100644
index 15fb526ae..000000000
--- a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/tsconfig.json
+++ /dev/null
@@ -1,40 +0,0 @@
-/* -------------------------------------------------------------------------
- Copyright (c) 2025, Huawei Technologies.
- All rights reserved.
-
- Licensed under the Apache License, Version 2.0  (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
---------------------------------------------------------------------------------------------*/
-{
-  "compilerOptions": {
-    "jsx": "react",
-    "downlevelIteration": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "inlineSourceMap": true,
-    "lib": [
-      "dom",
-      "ES2022",
-      "dom.iterable"
-    ],
-    "moduleResolution": "node",
-    "module": "ES2022",
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitReturns": true,
-    "noImplicitOverride": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noImplicitAny": false,
-    "target": "es2018"
-  }
-}
\ No newline at end of file
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.config.js b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.config.js
deleted file mode 100644
index e52a714e3..000000000
--- a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.config.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/* -------------------------------------------------------------------------
- Copyright (c) 2025, Huawei Technologies.
- All rights reserved.
-
- Licensed under the Apache License, Version 2.0  (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
---------------------------------------------------------------------------------------------*/
-
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const InlineChunkHtmlPlugin = require('inline-chunk-html-plugin');
-
-module.exports = {
-  entry: {
-    app: './src/index.tsx',
-  },
-  output: {
-    filename: 'index.js',
-    path: path.resolve(__dirname, 'dist'),
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(html)$/,
-        use: {
-          loader: 'html-loader',
-        },
-      },
-      {
-        test: /\.tsx?$/,
-        use: {
-          loader: 'ts-loader',
-          options: {
-            transpileOnly: true,
-          },
-        },
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.css$/i,
-        use: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /\.less$/i,
-        use: [
-          'style-loader', // 将 JS 字符串生成为 <style> 标签
-          'css-loader', // 解析 @import 和 url() 等引用
-          {
-            loader: 'less-loader', // 编译 Less 文件为 CSS
-            options: {
-              lessOptions: {
-                javascriptEnabled: true, // 如果你使用了 JavaScript 内嵌的 Less 函数，则需要此选项
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-  resolve: {
-    extensions: ['.ts', '.js', '.tsx'],
-  },
-  plugins: [
-    new CleanWebpackPlugin(),
-    new HtmlWebpackPlugin({
-      inject: 'body',
-      template: './public/index.html',
-    }),
-    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]),
-  ],
-};
diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.dev.js b/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.dev.js
deleted file mode 100644
index 253576e65..000000000
--- a/plugins/tensorboard-plugins/tb_graph_ascend/monvis_plugin/fe/webpack.dev.js
+++ /dev/null
@@ -1,160 +0,0 @@
-/* -------------------------------------------------------------------------
- Copyright (c) 2025, Huawei Technologies.
- All rights reserved.
-
- Licensed under the Apache License, Version 2.0  (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
---------------------------------------------------------------------------------------------*/
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-module.exports = {
-  mode: 'development', // 明确指定开发模式
-  devtool: 'eval-cheap-source-map', // 开发环境推荐使用的 source map 类型
-
-  entry: {
-    app: './src/index.tsx', // 保持与生产环境一致的入口
-  },
-
-  output: {
-    filename: '[name].bundle.js', // 使用带 hash 的文件名
-    path: path.resolve(__dirname, 'dist'),
-    publicPath: '/', // 确保 dev server 的静态资源路径正确
-  },
-
-  devServer: {
-    static: {
-      directory: path.join(__dirname, 'dist'), // 服务资源目录
-    },
-    compress: false,
-    proxy: [
-      {
-        context: (pathname) => {
-          return !pathname.match(/(\.js|\.css|\.html|\.ico|\.svg)$/);
-        },
-        target: 'http://127.0.0.1:6006',
-        changeOrigin: true,
-        secure: false,
-        pathRewrite: {
-          '^/(.*)': '/data/plugin/mon_vis/$1', // 路径转换核心逻辑
-        },
-        on: {
-          error: (err, req, res) => {
-            // 安全处理响应对象
-            if (res && !res.headersSent) {
-              res.writeHead(500, { 'Content-Type': 'text/plain' });
-              res.end('Proxy Error');
-            }
-          },
-          proxyReqWs: (proxyReq, req, socket) => {
-            // WebSocket 错误专属处理
-            socket.on('error', (error) => {});
-          },
-        },
-      },
-    ],
-    webSocketServer: {
-      type: 'ws',
-      options: {
-        path: '/ws',
-        noInfo: true,
-      },
-    },
-    http2: false, // 推荐启用HTTP/2
-    https: false, // 根据实际需要配置
-    hot: true, // 启用热模块替换
-    liveReload: true, // 启用实时重新加载
-    port: 8080, // 自定义端口号
-    open: true, // 自动打开浏览器
-    client: {
-      overlay: {
-        errors: true,
-        warnings: false,
-      }, // 在浏览器中显示编译错误
-    },
-    headers: {
-      'X-Proxy-Source': 'webpack-dev-server',
-    },
-  },
-
-  module: {
-    rules: [
-      {
-        test: /\.html$/,
-        use: [
-          {
-            loader: 'html-loader',
-            options: {
-              sources: false, // 开发环境不需要优化资源路径
-            },
-          },
-        ],
-      },
-      {
-        test: /\.tsx?$/, // 支持 .ts 和 .tsx 文件
-        use: {
-          loader: 'ts-loader',
-          options: {
-            transpileOnly: true,
-            experimentalWatchApi: true,
-          },
-        },
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.css$/i,
-        use: [
-          'style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: true, // 启用 CSS source maps
-            },
-          },
-        ],
-      },
-      {
-        test: /\.less$/i,
-        use: [
-          'style-loader', // 将 JS 字符串生成为 <style> 标签
-          'css-loader', // 解析 @import 和 url() 等引用
-          {
-            loader: 'less-loader', // 编译 Less 文件为 CSS
-            options: {
-              lessOptions: {
-                javascriptEnabled: true, // 如果你使用了 JavaScript 内嵌的 Less 函数，则需要此选项
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.json'], // 添加 .json 扩展名解析
-  },
-
-  plugins: [
-    new HtmlWebpackPlugin({
-      inject: 'body',
-      template: './public/index.html',
-      minify: false, // 开发环境不压缩 HTML
-    }),
-  ],
-
-  optimization: {
-    removeAvailableModules: false,
-    removeEmptyChunks: false,
-    splitChunks: false, // 禁用代码拆分加速编译
-  },
-};
-- 
Gitee