feat(msp): topology is scaled to 0.6 by default (#2339)

Author: Zero-Rock

shell/app/modules/msp/env-overview/topology/pages/topology/component/topology-comp.tsx

@@ -38,6 +38,7 @@ const nodeExtent = [
 ];
 
 interface IProps {
+  defaultZoom?: number;
   allowScroll?: boolean;
   filterKey: INodeKey;
   data: { nodes: TOPOLOGY.INode[] };
@@ -140,7 +141,7 @@ const calculateLayout = (
   ];
 };
 
-const TopologyComp = ({ data, filterKey = 'node', clockNode, allowScroll = true }: IProps) => {
+const TopologyComp = ({ data, filterKey = 'node', clockNode, allowScroll = true, defaultZoom = 0.8 }: IProps) => {
   const topologyData = React.useRef(genEle(data.nodes, filterKey));
   const layoutData = React.useRef<Elements>([]);
   const wrapperRaf = React.useRef<HTMLDivElement>();
@@ -216,7 +217,7 @@ const TopologyComp = ({ data, filterKey = 'node', clockNode, allowScroll = true
             zoomOnScroll={false}
             connectionLineComponent={FloatingConnectionLine}
             nodeExtent={nodeExtent}
-            defaultZoom={0.8}
+            defaultZoom={defaultZoom}
             minZoom={0.2}
             maxZoom={2}
             onLoad={layout}

shell/app/modules/msp/env-overview/topology/pages/topology/index.tsx

@@ -143,7 +143,13 @@ const Topology = () => {
             <TopologyOverview data={topologyData} onClick={handleSelectNodeType} />
             <div className="flex-1 topology-container relative min-w-0">
               {topologyData.nodes?.length ? (
-                <TopologyComp key={nodeType} data={topologyData} filterKey={nodeType} clockNode={handleClickNode} />
+                <TopologyComp
+                  key={nodeType}
+                  data={topologyData}
+                  filterKey={nodeType}
+                  clockNode={handleClickNode}
+                  defaultZoom={0.6}
+                />
               ) : null}
             </div>
           </div>