Skip to content

Commit 6458c55

Browse files
92hackers92hackers
committed
bugfix
1 parent 0ce6a57 commit 6458c55

File tree

7 files changed

+44
-39
lines changed

7 files changed

+44
-39
lines changed

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>TiDB Visual Plan</title>
27+
<title>Execution Plan Visualizer for Relational Database</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/components/Plan/PlanTabSettingsPane.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,8 @@ export function PlanTabSettingsPane({
9595
className={groupBtnClass(viewOptions.orientation === orientation)}
9696
onClick={() => handleViewOptionsChange({ orientation })}
9797
>
98-
<i className="fa fa-sitemap"></i>
99-
{orientation}
98+
<i className="fa fa-sitemap mr-2" />
99+
{ orientation === Orientation.TWOD ? '2D' : orientation }
100100
</button>
101101
))
102102
}

‎src/components/PlanNode/Body/GeneralTab.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,8 @@ export function GeneralTab({
5757
{
5858
plan.isAnalyze && (
5959
<div>
60-
<i className="fa fa-fw fa-clock text-muted"></i>
61-
<b>Timing:</b>&nbsp;
60+
<i className="fa fa-fw fa-clock text-muted mr-1"></i>
61+
<b>Timing:</b>
6262
<span
6363
className={`p-0 px-1 rounded alert ${durationClass}`}
6464
dangerouslySetInnerHTML={{ __html: formattedProp('EXCLUSIVE_DURATION') }}
@@ -67,7 +67,7 @@ export function GeneralTab({
6767
)
6868
}
6969
<div>
70-
<i className="fa fa-fw fa-align-justify text-muted"></i>
70+
<i className="fa fa-fw fa-align-justify text-muted mr-1"></i>
7171
<b>Rows:</b>
7272
<span className="px-1">{tilde + formattedProp('ACTUAL_ROWS_REVISED')}</span>
7373
{
@@ -80,7 +80,7 @@ export function GeneralTab({
8080
{
8181
plannerRowEstimateDirection !== EstimateDirection.none && shouldShowPlannerEstimate && (
8282
<span>
83-
|
83+
<span className="mx-1">|</span>
8484
{
8585
plannerRowEstimateDirection === EstimateDirection.over && (
8686
<span><i className="fa fa-arrow-up"></i> over</span>
@@ -91,7 +91,7 @@ export function GeneralTab({
9191
<span><i className="fa fa-arrow-down"></i> under</span>
9292
)
9393
}
94-
estimated
94+
<span className="mx-1">estimated</span>
9595
{
9696
plannerRowEstimateValue !== Infinity && (
9797
<span>
@@ -109,7 +109,7 @@ export function GeneralTab({
109109
{
110110
rowsRemoved > 0 && (
111111
<div>
112-
<i className="fa fa-fw fa-filter text-muted"></i>
112+
<i className="fa fa-fw fa-filter text-muted mr-1"></i>
113113
<b>
114114
{NodeProp[rowsRemovedProp]}:
115115
</b>
@@ -121,9 +121,9 @@ export function GeneralTab({
121121
)
122122
}
123123
{
124-
node[NodeProp.HEAP_FETCHES] && (
124+
node[NodeProp.HEAP_FETCHES] > 0 && (
125125
<div>
126-
<i className="fa fa-fw fa-exchange-alt text-muted"></i>
126+
<i className="fa fa-fw fa-exchange-alt text-muted mr-1"></i>
127127
<b>Heap Fetches:</b>&nbsp;
128128
<span
129129
className={`p-0 px-1 rounded alert ${heapFetchesClass}`}
@@ -143,19 +143,19 @@ export function GeneralTab({
143143
)
144144
}
145145
{
146-
node[NodeProp.EXCLUSIVE_COST] && (
146+
node[NodeProp.EXCLUSIVE_COST] > 0 && (
147147
<div>
148-
<i className="fa fa-fw fa-dollar-sign text-muted"></i>
148+
<i className="fa fa-fw fa-dollar-sign text-muted mr-1"></i>
149149
<b>Cost:</b>
150-
<span className={`p-0 px-1 mr-1 alert ${costClass}`}>{formattedProp('EXCLUSIVE_COST')}</span>
150+
<span className={`p-0 mx-1 px-1 mr-1 alert ${costClass}`}>{formattedProp('EXCLUSIVE_COST')}</span>
151151
<span className="text-muted">(Total: {formattedProp('TOTAL_COST')})</span>
152152
</div>
153153
)
154154
}
155155
{
156-
node[NodeProp.ACTUAL_LOOPS] && (
156+
node[NodeProp.ACTUAL_LOOPS] > 0 && (
157157
<div>
158-
<i className="fa fa-fw fa-undo text-muted"></i>
158+
<i className="fa fa-fw fa-undo text-muted mr-1"></i>
159159
<b>Loops:</b>
160160
<span className="px-1">{formattedProp('ACTUAL_LOOPS')}</span>
161161
</div>

‎src/components/PlanNode/Body/IOBufferTab.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,26 @@ export function IOBufferTab({
2121
formattedProp,
2222
}: IOBufferTabProps) {
2323
const nodeProps = NodeProp
24+
const ioReadTime = node[nodeProps.EXCLUSIVE_IO_READ_TIME]
25+
const ioWriteTime = node[nodeProps.EXCLUSIVE_IO_WRITE_TIME]
2426
return (
2527
<div className={classNames('tab-pane', {'show active': activeTab === PlanNodeCardTab.IOBuffer})}>
2628
{
27-
node[nodeProps.EXCLUSIVE_IO_READ_TIME] || node[nodeProps.EXCLUSIVE_IO_WRITE_TIME] && (
29+
ioReadTime > 0 || ioWriteTime > 0 && (
2830
<div className="mb-2">
2931
<b>I/O Timings:</b>
3032
{
31-
node[nodeProps.EXCLUSIVE_IO_READ_TIME] && (
33+
ioReadTime > 0 && (
3234
<span className="ml-2">
33-
<b>Read:&nbsp;</b>
35+
<b className="mr-1">Read:</b>
3436
{formattedProp('EXCLUSIVE_IO_READ_TIME')}
3537
</span>
3638
)
3739
}
3840
{
39-
node[nodeProps.EXCLUSIVE_IO_WRITE_TIME] && (
41+
ioWriteTime > 0 && (
4042
<span className="ml-2">
41-
<b>Write:&nbsp;</b>
43+
<b className="mr-1">Write:</b>
4244
{formattedProp('EXCLUSIVE_IO_WRITE_TIME')}
4345
</span>
4446
)
@@ -80,7 +82,7 @@ export function IOBufferTab({
8082
</tbody>
8183
</table>
8284
{
83-
node[nodeProps.WAL_RECORDS] || node[nodeProps.WAL_BYTES] && (
85+
node[nodeProps.WAL_RECORDS] > 0 || node[nodeProps.WAL_BYTES] > 0 && (
8486
<div className="mb-2">
8587
<b>
8688
<Tooltip title="Write-Ahead Logging">

‎src/components/PlanNode/Header/Detail.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function HeaderDetail({
3636
{
3737
node[NodeProp.ALIAS] && (
3838
<span>
39-
<span className='text-muted'>as</span>
39+
<span className='text-muted ml-1 mr-1'>as</span>
4040
{node[NodeProp.ALIAS]}
4141
</span>
4242
)
@@ -64,7 +64,7 @@ export function HeaderDetail({
6464
node[NodeProp.JOIN_TYPE] && (
6565
<div>
6666
{node[NodeProp.JOIN_TYPE]}
67-
<span className="text-muted">join</span>
67+
<span className="text-muted ml-1">join</span>
6868
</div>
6969
)
7070
}
@@ -86,14 +86,14 @@ export function HeaderDetail({
8686
}
8787
{
8888
node[NodeProp.CTE_NAME] && (
89-
<a
90-
className="text-reset"
91-
onClick={() => onClickCTE(`CTE ${node[NodeProp.CTE_NAME]}`)}
92-
href="#"
93-
>
94-
<i className="fa fa-search text-muted"></i>&nbsp;
95-
<span className="text-muted">CTE&nbsp;</span>{ node[NodeProp.CTE_NAME] }
96-
</a>
89+
<a
90+
className="text-reset"
91+
onClick={() => onClickCTE(`CTE ${node[NodeProp.CTE_NAME]}`)}
92+
href="#"
93+
>
94+
<i className="fa fa-search text-muted"></i>&nbsp;
95+
<span className="text-muted">CTE&nbsp;</span>{node[NodeProp.CTE_NAME]}
96+
</a>
9797
)
9898
}
9999
</div>

‎src/components/PlanNode/Header/Title.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,12 @@ export function HeaderTitle({
4747
return (
4848
<header className="mb-0">
4949
<h4 className="text-body">
50-
<a className="font-weight-normal small" href={`#plan/node/${node.nodeId}`}>#{node.nodeId}</a>
50+
<a
51+
className="font-weight-normal small mr-1"
52+
href={`#plan/node/${node.nodeId}`}
53+
>
54+
#{node.nodeId}
55+
</a>
5156
{nodeName}
5257
</h4>
5358
<div className="float-right">
@@ -102,7 +107,7 @@ export function HeaderTitle({
102107
)
103108
}
104109
{
105-
rowsRemoved && !rowsRemovedClass && (
110+
rowsRemoved > 0 && !rowsRemovedClass && (
106111
<Tooltip
107112
className='p-0 d-inline-block mb-0 ml-1 text-nowrap'
108113
title={filterTooltip}

‎src/components/PlanNode/index.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import * as _ from 'lodash';
99
import Node from '@/inode';
1010
import {
1111
NodeProp, Orientation, PlanNodeCardTab, ViewMode,
12-
NotMiscProperties, HighlightType, EstimateDirection,
12+
HighlightType, EstimateDirection,
1313
} from '@/enums';
1414
import { IViewOptions, IPlan } from '@/iplan';
1515
import * as filters from '@/filters'
@@ -123,10 +123,8 @@ export function PlanNode({
123123
return Object.keys(NodeProp).find((prop) => NodeProp[prop as NodePropStrings] === nodeKey) || '';
124124
}, [node])
125125

126-
console.log(rowsRemovedProp)
127-
128-
let rowsRemoved: number = NaN
129-
let rowsRemovedPercent: number = NaN
126+
let rowsRemoved: number = 0
127+
let rowsRemovedPercent: number = 0
130128
let rowsRemovedPercentString: string = ''
131129
if (rowsRemovedProp) {
132130
type NodePropStrings = keyof typeof NodeProp;

0 commit comments

Comments
 (0)