From 3464840ef24130f1a7e7a4165616ac1974f16d35 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Fri, 15 Jul 2022 10:50:36 +0800
Subject: [PATCH 1/4] style: refine ui

---
 .../TreeDiagram/Node/DefaultNode.module.less  |  7 ++++++-
 .../TreeDiagram/Node/DefaultNode.tsx          | 21 +++++++++++++++++--
 .../NodeDetail/DefaultNodeDetail.tsx          | 10 +++++----
 .../TreeDiagram/Thumbnail/index.module.less   | 10 +++++++--
 ui/lib/components/TreeDiagram/TreeDiagram.tsx |  4 ++--
 .../TreeDiagramView/TreeDiagramView.tsx       |  2 +-
 6 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/ui/lib/components/TreeDiagram/Node/DefaultNode.module.less b/ui/lib/components/TreeDiagram/Node/DefaultNode.module.less
index 7125a6c24e..87303fa3c1 100644
--- a/ui/lib/components/TreeDiagram/Node/DefaultNode.module.less
+++ b/ui/lib/components/TreeDiagram/Node/DefaultNode.module.less
@@ -1,5 +1,5 @@
 .NodeForeginObject {
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 }
@@ -7,6 +7,11 @@
   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
index 64ec19cf34..f9282ff54a 100644
--- 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
index 374a170072..4ba5bc8c1b 100644
--- a/ui/lib/components/TreeDiagram/NodeDetail/DefaultNodeDetail.tsx
+++ b/ui/lib/components/TreeDiagram/NodeDetail/DefaultNodeDetail.tsx
@@ -21,7 +21,7 @@ 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>
@@ -29,9 +29,11 @@ export const DefaultNodeDetail = (nodeDetailProps) => {
           <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
index 82b08f81a2..08259904ac 100644
--- 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;
   }
-}
+}
\ No newline at end of file
diff --git a/ui/lib/components/TreeDiagram/TreeDiagram.tsx b/ui/lib/components/TreeDiagram/TreeDiagram.tsx
index 8556e21388..06dcdcc176 100644
--- a/ui/lib/components/TreeDiagram/TreeDiagram.tsx
+++ b/ui/lib/components/TreeDiagram/TreeDiagram.tsx
@@ -273,11 +273,11 @@ const TreeDiagram = ({
       width:
         widthRatio > 1
           ? (multiTreesViewport.width - multiTreesBound.width) / 2
-          : 0,
+          : (multiTreesViewport.width - multiTreesBound.width * k) / 2,
       height:
         heightRation > 1
           ? (multiTreesViewport.height - multiTreesBound.height) / 2
-          : 0,
+          : (multiTreesViewport.height - multiTreesBound.height * k) / 2
     })
   }
 
diff --git a/ui/lib/components/TreeDiagramView/TreeDiagramView.tsx b/ui/lib/components/TreeDiagramView/TreeDiagramView.tsx
index 3aeb04ae30..ca51fdf10f 100644
--- 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 (
     <>

From cee8c910b20678c07a8081947847718fb6186600 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Fri, 15 Jul 2022 11:16:42 +0800
Subject: [PATCH 2/4] update adjust position

---
 ui/lib/components/TreeDiagram/TreeDiagram.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/lib/components/TreeDiagram/TreeDiagram.tsx b/ui/lib/components/TreeDiagram/TreeDiagram.tsx
index 06dcdcc176..c568f6dfab 100644
--- a/ui/lib/components/TreeDiagram/TreeDiagram.tsx
+++ b/ui/lib/components/TreeDiagram/TreeDiagram.tsx
@@ -271,11 +271,11 @@ const TreeDiagram = ({
 
     setAdjustPosition({
       width:
-        widthRatio > 1
+        k > 1
           ? (multiTreesViewport.width - multiTreesBound.width) / 2
           : (multiTreesViewport.width - multiTreesBound.width * k) / 2,
       height:
-        heightRation > 1
+        k > 1
           ? (multiTreesViewport.height - multiTreesBound.height) / 2
           : (multiTreesViewport.height - multiTreesBound.height * k) / 2
     })

From 71368adbd85b71202dbda18f92043818958fb468 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Fri, 15 Jul 2022 13:54:58 +0800
Subject: [PATCH 3/4] update modal height

---
 ui/lib/apps/SlowQuery/pages/Detail/index.tsx          | 2 +-
 ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx     | 2 +-
 ui/lib/components/TreeDiagram/TreeDiagram.tsx         | 4 ++--
 ui/lib/components/TreeDiagram/index.module.less       | 1 +
 ui/lib/components/TreeDiagramView/TreeDiagramView.tsx | 1 -
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
index a968edd79b..9e765b5a8b 100644
--- a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
+++ b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
@@ -174,7 +174,7 @@ 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
index 23e4a8e05a..03c6baf715 100644
--- a/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx
+++ b/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx
@@ -181,7 +181,7 @@ 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/TreeDiagram.tsx b/ui/lib/components/TreeDiagram/TreeDiagram.tsx
index c568f6dfab..09c9b1c5e3 100644
--- a/ui/lib/components/TreeDiagram/TreeDiagram.tsx
+++ b/ui/lib/components/TreeDiagram/TreeDiagram.tsx
@@ -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
index 2835db39d3..63dc3767a8 100644
--- 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
index ca51fdf10f..b5904004bd 100644
--- a/ui/lib/components/TreeDiagramView/TreeDiagramView.tsx
+++ b/ui/lib/components/TreeDiagramView/TreeDiagramView.tsx
@@ -45,7 +45,6 @@ const TreeDiagramView = ({
 TreeDiagramView.defaultProps = {
   viewport: {
     width: window.innerWidth,
-    height: window.innerHeight * 0.75,
   },
   showMinimap: false,
   isThumbnail: false,

From 69b7fae9a6a395a96c0ca2cbd56e306412f8266e Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Fri, 15 Jul 2022 14:15:57 +0800
Subject: [PATCH 4/4] ci: fix lint

---
 ui/lib/apps/SlowQuery/pages/Detail/index.tsx              | 5 ++++-
 ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx         | 5 ++++-
 ui/lib/components/TreeDiagram/Node/DefaultNode.tsx        | 4 ++--
 ui/lib/components/TreeDiagram/Thumbnail/index.module.less | 2 +-
 ui/lib/components/TreeDiagram/TreeDiagram.tsx             | 2 +-
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
index 9e765b5a8b..0fa6d67bc6 100644
--- 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', height: window.innerHeight - 100 }}
+                        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
index 03c6baf715..5d227b49a2 100644
--- 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', height: window.innerHeight - 100 }}
+                      bodyStyle={{
+                        background: '#f5f5f5',
+                        height: window.innerHeight - 100,
+                      }}
                     >
                       <TreeDiagramView
                         data={
diff --git a/ui/lib/components/TreeDiagram/Node/DefaultNode.tsx b/ui/lib/components/TreeDiagram/Node/DefaultNode.tsx
index f9282ff54a..7b74fc56b7 100644
--- a/ui/lib/components/TreeDiagram/Node/DefaultNode.tsx
+++ b/ui/lib/components/TreeDiagram/Node/DefaultNode.tsx
@@ -39,7 +39,7 @@ export const DefaultNode = (nodeProps) => {
     onNodeDetailClick(node)
   }
 
-  const headColor = (runAt: string): string =>  {
+  const headColor = (runAt: string): string => {
     switch (runAt) {
       case 'tidb':
         return '#FFF5EB'
@@ -97,7 +97,7 @@ export const DefaultNode = (nodeProps) => {
                 position: 'initial',
               }}
               onClick={(e) => handleOnNodeDetailClick(e, nodeDatum)}
-              headStyle={{ backgroundColor: headColor(nodeDatum.storeType)}}
+              headStyle={{ backgroundColor: headColor(nodeDatum.storeType) }}
             >
               <div className={styles.cardContentP}>
                 Actual Rows: <span>{nodeDatum.actRows}</span>
diff --git a/ui/lib/components/TreeDiagram/Thumbnail/index.module.less b/ui/lib/components/TreeDiagram/Thumbnail/index.module.less
index 08259904ac..6e74c366de 100644
--- a/ui/lib/components/TreeDiagram/Thumbnail/index.module.less
+++ b/ui/lib/components/TreeDiagram/Thumbnail/index.module.less
@@ -8,4 +8,4 @@
     cursor: pointer;
     box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px 0px;
   }
-}
\ No newline at end of file
+}
diff --git a/ui/lib/components/TreeDiagram/TreeDiagram.tsx b/ui/lib/components/TreeDiagram/TreeDiagram.tsx
index 09c9b1c5e3..e4f2486b89 100644
--- a/ui/lib/components/TreeDiagram/TreeDiagram.tsx
+++ b/ui/lib/components/TreeDiagram/TreeDiagram.tsx
@@ -277,7 +277,7 @@ const TreeDiagram = ({
       height:
         k > 1
           ? (multiTreesViewport.height - multiTreesBound.height) / 2
-          : (multiTreesViewport.height - multiTreesBound.height * k) / 2
+          : (multiTreesViewport.height - multiTreesBound.height * k) / 2,
     })
   }