fix: g6 topology fit center (#690)

## What type of PR is this?

<!--
Add one of the following kinds:
/kind bug
/kind cleanup
/kind refactor
/kind documentation
/kind feature
/kind chore
/kind perf
/kind style
/kind test
-->

## What this PR does / why we need it:

TODO

## Which issue(s) this PR fixes:

<!--
*Automatically closes linked issue when PR is merged.
Usage: `Fixes #<issue number>`, or `Fixes (paste link of issue)`.
_If PR is about `failing-tests or flakes`, please post the related
issues/tests in a comment and do not use `Fixes`_*
-->

Fixes #

ui/src/pages/insightDetail/components/topologyMap/index.tsx

@@ -399,26 +399,26 @@ const TopologyMap = forwardRef((props: IProps, drawRef) => {
 
   function initGraph() {
     const container = containerRef.current
-    const width = container?.scrollWidth || 800
-    const height = container?.scrollHeight || 400
+    const width = container?.scrollWidth
+    const height = container?.scrollHeight
     const toolbar = new G6.ToolBar()
     return new G6.Graph({
       container,
       width,
       height,
-      fitView: true,
-      fitViewPadding: 20,
+      fitCenter: true,
       plugins: [toolbar],
       enabledStack: true,
       modes: {
         default: ['drag-canvas', 'drag-node', 'click-select'],
       },
+      animate: true,
       layout: {
         type: 'dagre',
         rankdir: 'LR',
-        nodesep: 25,
-        ranksep: 60,
-        align: 'UR',
+        align: 'UL',
+        nodesep: 15,
+        ranksep: 40,
         controlPoints: true,
         sortByCombo: false,
         preventOverlap: true,
@@ -567,7 +567,7 @@ const TopologyMap = forwardRef((props: IProps, drawRef) => {
         graphRef.current.clear()
         graphRef.current.changeData(topologyData)
         setTimeout(() => {
-          graphRef.current.fitView()
+          graphRef.current.fitCenter()
         }, 100)
         setHightLight()
       }
@@ -583,29 +583,29 @@ const TopologyMap = forwardRef((props: IProps, drawRef) => {
       className={styles.g6_topology}
       style={{ height: isResource ? 450 : 400 }}
     >
+      <div className={styles.cluster_select}>
+        <Select
+          style={{ minWidth: 100 }}
+          placeholder=""
+          value={selectedCluster}
+          onChange={handleChangeCluster}
+        >
+          {clusterOptions?.map(item => {
+            return (
+              <Select.Option key={item}>
+                {item === 'ALL' ? t('AllClusters') : item}
+              </Select.Option>
+            )
+          })}
+        </Select>
+      </div>
       <div ref={containerRef} className={styles.g6_overview}>
         <div
           className={styles.g6_loading}
           style={{ display: topologyLoading ? 'block' : 'none' }}
         >
           <Loading />
         </div>
-        <div className={styles.cluster_select}>
-          <Select
-            style={{ minWidth: 100 }}
-            placeholder=""
-            value={selectedCluster}
-            onChange={handleChangeCluster}
-          >
-            {clusterOptions?.map(item => {
-              return (
-                <Select.Option key={item}>
-                  {item === 'ALL' ? t('AllClusters') : item}
-                </Select.Option>
-              )
-            })}
-          </Select>
-        </div>
         {tooltipopen ? (
           <OverviewTooltip
             type={type as string}

ui/src/pages/insightDetail/components/topologyMap/style.module.less

@@ -5,15 +5,26 @@
   border-radius: 8px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
   min-height: 480px;
+  position: relative;
 
-  .tool_bar {
-    height: 22px;
-    padding: 20px 16px;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    color: rgb(0 10 26 / 68%);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  .cluster_select {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+
+    :global {
+      .ant-select {
+        min-width: 160px;
+        background-color: #fff;
+        border-radius: 4px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+        &:hover {
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+        }
+      }
+    }
   }
 
   .g6_overview {
@@ -29,25 +40,6 @@
       background: #f7faff;
     }
 
-    .cluster_select {
-      position: absolute;
-      top: 0;
-      right: 16px;
-      z-index: 10;
-
-      :global {
-        .ant-select {
-          min-width: 160px;
-          background-color: #fff;
-          border-radius: 4px;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-
-          &:hover {
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-          }
-        }
-      }
-    }
   }
 
   // Loading state styles