diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index b4ba6d54..3b4af093 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -145,7 +145,7 @@ const msg = {
   associateOptions: "Association Options",
   widget: "Widget",
   nameTip:
-    "The name only supports Chinese and English, horizontal lines and underscores",
+    "The name only supports Chinese and English, horizontal lines and underscores. The length of the name is limited to 300 characters",
   duplicateName: "Duplicate name",
   enableAssociate: "Enable association",
   seconds: "Seconds",
@@ -157,8 +157,6 @@ const msg = {
   monthsHead: "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec",
   months: "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec",
   weeks: "Mon_Tue_Wed_Thu_Fri_Sat_Sun",
-  hello: "Hello",
-  helloMessage: "Welcome Back, Apache SkyWalking APM System !",
   username: "Username",
   password: "Password",
   title: "Title",
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index 36abbccd..d65c1e41 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -146,7 +146,7 @@ const msg = {
   widget: "Dispositivo pequeño",
   duplicateName: "Nombre duplicado",
   nameTip:
-    "Este nombre sólo admite chino e inglés, líneas cruzadas y subrayado",
+    "El nombre sólo admite chino e inglés, líneas horizontales y subrayado, y la longitud del nombre no excederá de 300 caracteres",
   enableAssociate: "Activar asociación",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
@@ -157,8 +157,6 @@ const msg = {
   monthsHead: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Set_Oct_Nov_Dic",
   months: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Set_Oct_Nov_Dic",
   weeks: "Lun_Mar_Mier_Jue_Vie_Sáb_Dom",
-  hello: "Hola",
-  helloMessage: "Bienvenido de vuelta, Apache SkyWalking APM System !",
   username: "Usuario",
   password: "Contraseña",
   title: "Título",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 4c6fb607..6c05e548 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -142,8 +142,8 @@ const msg = {
   begin: "开始",
   associateOptions: "关联选项",
   widget: "部件",
-  nameTip: "该名称仅支持中文和英文、横线和下划线",
   enableAssociate: "启用关联",
+  nameTip: "该名称仅支持中文和英文、横线和下划线, 并且限制长度为300个字符",
   duplicateName: "重复的名称",
   seconds: "秒",
   hourTip: "选择小时",
@@ -154,8 +154,6 @@ const msg = {
   monthsHead: "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月",
   months: "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月",
   weeks: "一_二_三_四_五_六_日",
-  hello: "你好",
-  helloMessage: "欢迎来到, Apache SkyWalking APM 系统 !",
   username: "用户名",
   password: "密码",
   title: "标题",
diff --git a/src/views/dashboard/configuration/widget/WidgetOptions.vue b/src/views/dashboard/configuration/widget/WidgetOptions.vue
index 5f848214..6e78f331 100644
--- a/src/views/dashboard/configuration/widget/WidgetOptions.vue
+++ b/src/views/dashboard/configuration/widget/WidgetOptions.vue
@@ -74,7 +74,7 @@ function updateWidgetConfig(param: { [key: string]: string }) {
 function updateWidgetName(param: { [key: string]: string }) {
   const key = Object.keys(param)[0];
   const n = decodeURIComponent(param[key]);
-  const pattern = /^[A-Za-z0-9-_\u4e00-\u9fa5]{1,30}$/;
+  const pattern = /^[A-Za-z0-9-_\u4e00-\u9fa5]{1,300}$/;
   if (!pattern.test(n)) {
     ElMessage.error(t("nameTip"));
     return;
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 6ad5c1e6..a750173e 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -34,7 +34,7 @@ limitations under the License. -->
         </span>
       </div>
     </div>
-    <div class="setting" v-if="showSetting">
+    <div class="setting" v-if="showSetting && dashboardStore.editMode">
       <Settings @update="updateSettings" @updateNodes="freshNodes" />
     </div>
     <div class="tool">
@@ -113,6 +113,7 @@ import getDashboard from "@/hooks/useDashboardsSession";
 import { MetricConfigOpt } from "@/types/dashboard";
 import { aggregation } from "@/hooks/useProcessor";
 import icons from "@/assets/img/icons";
+import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
 
 /*global Nullable, defineProps */
 const props = defineProps({
@@ -170,6 +171,7 @@ onMounted(async () => {
   width.value = dom.width;
   window.addEventListener("resize", resize);
   svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg");
+  await initLegendMetrics();
   await init();
   update();
   setNodeTools(settings.value.nodeDashboard);
@@ -200,6 +202,18 @@ async function init() {
     dashboardStore.selectWidget(props.config);
   });
 }
+
+async function initLegendMetrics() {
+  const ids = topologyStore.nodes.map((d: Node) => d.id);
+  const names = props.config.legend.map((d: any) => d.name);
+  if (names.length && ids.length) {
+    const param = await useQueryTopologyMetrics(names, ids);
+    const res = await topologyStore.getLegendMetrics(param);
+    if (res.errors) {
+      ElMessage.error(res.errors);
+    }
+  }
+}
 function ticked() {
   link.value.attr(
     "d",
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index 5a97909a..33617f97 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -48,7 +48,7 @@ limitations under the License. -->
       <span class="g-sm-8 wba">
         {{ i.value }}
         <span
-          v-if="i.key === 'db.statement'"
+          v-if="i.key === 'db.statement' && i.value"
           class="grey link-hover cp ml-5"
           @click="copy(i.value)"
         >