pingcap · YiniXu9506 · Jul 15, 2022 · Jul 15, 2022 · Jul 15, 2022 · Jul 15, 2022
diff --git a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
@@ -174,7 +174,10 @@ function DetailPage() {
                         onCancel={toggleVisualPlan}
                         footer={null}
                         destroyOnClose={true}
-                        bodyStyle={{ background: '#f5f5f5' }}
+                        bodyStyle={{
+                          background: '#f5f5f5',
+                          height: window.innerHeight - 100,
+                        }}
                       >
                         <TreeDiagramView
                           data={

diff --git a/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx b/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx
@@ -181,7 +181,10 @@ function PlanDetail({ query }: IPlanDetailProps) {
                       onCancel={toggleVisualPlan}
                       footer={null}
                       destroyOnClose={true}
-                      bodyStyle={{ background: '#f5f5f5' }}
+                      bodyStyle={{
+                        background: '#f5f5f5',
+                        height: window.innerHeight - 100,
+                      }}
                     >
                       <TreeDiagramView
                         data={

diff --git a/ui/lib/components/TreeDiagram/Node/DefaultNode.module.less b/ui/lib/components/TreeDiagram/Node/DefaultNode.module.less
@@ -1,12 +1,17 @@
 .NodeForeginObject {
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 }
 .nodeCard {
   box-shadow: 0 8px 20px 0 rgb(0 0 0 / 4%);
   background: white;
   border: 1px solid #ededed;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    box-shadow: 0 15px 18px -3px rgb(0 0 0 / 10%);
+  }
 }
 
 .cardContentP {

diff --git a/ui/lib/components/TreeDiagram/Node/DefaultNode.tsx b/ui/lib/components/TreeDiagram/Node/DefaultNode.tsx
@@ -39,6 +39,19 @@ export const DefaultNode = (nodeProps) => {
     onNodeDetailClick(node)
   }
 
+  const headColor = (runAt: string): string => {
+    switch (runAt) {
+      case 'tidb':
+        return '#FFF5EB'
+      case 'tikv':
+        return '#DEEDF0'
+      case 'tiflash':
+        return '#F4C7AB'
+      default:
+        return ''
+    }
+  }
+
   return (
     <React.Fragment>
       <g
@@ -71,7 +84,7 @@ export const DefaultNode = (nodeProps) => {
                 nodeDatum.diagnosis.length > 0 && (
                   <>
                     <ExclamationCircleFilled
-                      style={{ color: 'red', paddingRight: 5 }}
+                      style={{ color: '#fa7070', paddingRight: 5 }}
                     />
                     {nodeDatum.diagnosis.length}
                   </>
@@ -84,16 +97,20 @@ export const DefaultNode = (nodeProps) => {
                 position: 'initial',
               }}
               onClick={(e) => handleOnNodeDetailClick(e, nodeDatum)}
+              headStyle={{ backgroundColor: headColor(nodeDatum.storeType) }}
             >
               <div className={styles.cardContentP}>
                 Actual Rows: <span>{nodeDatum.actRows}</span>
               </div>
               <div className={styles.cardContentP}>
-                Estimate Rows: <span>{toFixed(nodeDatum.estRows, 2)}</span>
+                Estimate Rows: <span>{toFixed(nodeDatum.estRows)}</span>
               </div>
               <div className={styles.cardContentP}>
                 Run at: <span>{nodeDatum.storeType}</span>
               </div>
+              <div className={styles.cardContentP}>
+                Duration: <span>{nodeDatum.duration}</span>
+              </div>
             </Card>
             {nodeDatum.__node_attrs.collapsiable && (
               <Button

diff --git a/ui/lib/components/TreeDiagram/NodeDetail/DefaultNodeDetail.tsx b/ui/lib/components/TreeDiagram/NodeDetail/DefaultNodeDetail.tsx
@@ -21,17 +21,19 @@ export const DefaultNodeDetail = (nodeDetailProps) => {
             Actual Rows: <span>{nodeDatum.actRows}</span>
           </p>
           <p>
-            Estimate Rows: <span>{toFixed(nodeDatum.estRows, 2)}</span>
+            Estimate Rows: <span>{toFixed(nodeDatum.estRows, 0)}</span>
           </p>
           <p>
             Run at: <span>{nodeDatum.storeType}</span>
           </p>
           <p>
             Duration: <span>{nodeDatum.duration}</span>
           </p>
-          <p>
-            Cost: <span>{toFixed(nodeDatum.cost, 5)}</span>
-          </p>
+          {nodeDatum.cost && (
+            <p>
+              Cost: <span>{toFixed(nodeDatum.cost, 0)}</span>
+            </p>
+          )}
           <p>
             Disk Bytes: <span>{nodeDatum.diskBytes}</span>
           </p>

diff --git a/ui/lib/components/TreeDiagram/Thumbnail/index.module.less b/ui/lib/components/TreeDiagram/Thumbnail/index.module.less
@@ -1,5 +1,11 @@
 .ThumbnailContainer {
-  :hover {
+  padding: 2rem 10rem;
+  margin: 2rem;
+  transition: all 0.2s ease-in-out;
+  box-shadow: rgb(0 0 0 / 10%) 0px 5px 10px 0px;
+
+  &:hover {
     cursor: pointer;
+    box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px 0px;
   }
 }
diff --git a/ui/lib/components/TreeDiagram/TreeDiagram.tsx b/ui/lib/components/TreeDiagram/TreeDiagram.tsx
@@ -271,13 +271,13 @@ const TreeDiagram = ({
 
     setAdjustPosition({
       width:
-        widthRatio > 1
+        k > 1
           ? (multiTreesViewport.width - multiTreesBound.width) / 2
-          : 0,
+          : (multiTreesViewport.width - multiTreesBound.width * k) / 2,
       height:
-        heightRation > 1
+        k > 1
           ? (multiTreesViewport.height - multiTreesBound.height) / 2
-          : 0,
+          : (multiTreesViewport.height - multiTreesBound.height * k) / 2,
     })
   }
 
@@ -318,7 +318,7 @@ const TreeDiagram = ({
         adjustPosition={adjustPosition}
         zoomToFitViewportScale={zoomToFitViewportScale}
       />
-      {showMinimap && (
+      {showMinimap && multiTreesViewport.height && (
         <Minimap
           treeNodeDatum={treeNodeDatum}
           classNamePrefix="minimapMultiTrees"
@@ -343,7 +343,7 @@ const TreeDiagram = ({
         <Drawer
           title={selectedNodeDetail!.name}
           placement="right"
-          width={600}
+          width={window.innerWidth * 0.3}
           closable={false}
           onClose={() => {
             setShowNodeDetail(false)

diff --git a/ui/lib/components/TreeDiagram/index.module.less b/ui/lib/components/TreeDiagram/index.module.less
@@ -3,4 +3,5 @@
 .treeDiagramContainer {
   position: relative;
   overflow: hidden;
+  height: 100%;
 }
diff --git a/ui/lib/components/TreeDiagramView/TreeDiagramView.tsx b/ui/lib/components/TreeDiagramView/TreeDiagramView.tsx
@@ -17,7 +17,7 @@ const TreeDiagramView = ({
   showMinimap,
   isThumbnail,
 }: TreeDiagramViewProps) => {
-  const nodeSize = { width: 250, height: 180 }
+  const nodeSize = { width: 250, height: 210 }
 
   return (
     <>
@@ -45,7 +45,6 @@ const TreeDiagramView = ({
 TreeDiagramView.defaultProps = {
   viewport: {
     width: window.innerWidth,
-    height: window.innerHeight * 0.75,
   },
   showMinimap: false,
   isThumbnail: false,