Skip to content

Commit 4c5a364

Browse files
mateizmateiz
committed
Reduce stage and rank separation slightly
1 parent 43dcbe3 commit 4c5a364

File tree

3 files changed

+45
-42
lines changed

3 files changed

+45
-42
lines changed

‎core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@
3939
}
4040

4141
#dag-viz-graph svg g.node.cached rect {
42-
fill: #b3f5c5;
43-
stroke: #56f578;
42+
fill: #B3F5C5;
43+
stroke: #56F578;
4444
stroke-width: 1px;
4545
}
4646

@@ -59,7 +59,7 @@
5959

6060
#dag-viz-graph svg.job g.cluster[id*="stage"] rect {
6161
fill: #FFFFFF;
62-
stroke: #ff99ac;
62+
stroke: #FF99AC;
6363
stroke-width: 1px;
6464
}
6565

@@ -81,7 +81,7 @@
8181

8282
#dag-viz-graph svg.stage g.cluster[id*="stage"] rect {
8383
fill: #FFFFFF;
84-
stroke: #ffa6b6;
84+
stroke: #FFA6B6;
8585
stroke-width: 1px;
8686
}
8787

‎core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
var VizConstants = {
5555
svgMarginX: 16,
5656
svgMarginY: 16,
57-
stageSep: 50,
57+
stageSep: 40,
5858
graphPrefix: "graph_",
5959
nodePrefix: "node_",
6060
stagePrefix: "stage_",
@@ -64,12 +64,14 @@ var VizConstants = {
6464

6565
var JobPageVizConstants = {
6666
clusterLabelSize: 12,
67-
stageClusterLabelSize: 14
67+
stageClusterLabelSize: 14,
68+
rankSep: 40
6869
};
6970

7071
var StagePageVizConstants = {
7172
clusterLabelSize: 14,
72-
stageClusterLabelSize: 14
73+
stageClusterLabelSize: 14,
74+
rankSep: 40
7375
};
7476

7577
/*
@@ -149,7 +151,7 @@ function renderDagVizForStage(svgContainer) {
149151
var dot = metadata.select(".dot-file").text();
150152
var containerId = VizConstants.graphPrefix + metadata.attr("stage-id");
151153
var container = svgContainer.append("g").attr("id", containerId);
152-
renderDot(dot, container);
154+
renderDot(dot, container, StagePageVizConstants.rankSep);
153155

154156
// Round corners on rectangles
155157
svgContainer
@@ -207,7 +209,7 @@ function renderDagVizForJob(svgContainer) {
207209
}
208210

209211
// Actually render the stage
210-
renderDot(dot, container);
212+
renderDot(dot, container, JobPageVizConstants.rankSep);
211213

212214
// Round corners on rectangles
213215
container
@@ -229,12 +231,13 @@ function renderDagVizForJob(svgContainer) {
229231
}
230232

231233
/* Render the dot file as an SVG in the given container. */
232-
function renderDot(dot, container) {
234+
function renderDot(dot, container, rankSep) {
233235
var escaped_dot = dot
234236
.replace(/&lt;/g, "<")
235237
.replace(/&gt;/g, ">")
236238
.replace(/&quot;/g, "\"");
237239
var g = graphlibDot.read(escaped_dot);
240+
g.graph().rankSep = rankSep;
238241
var renderer = new dagreD3.render();
239242
renderer(container, g);
240243
}

‎core/src/main/resources/org/apache/spark/ui/static/timeline-view.css‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -52,35 +52,35 @@ div#application-timeline, div#job-timeline {
5252
}
5353

5454
.vis.timeline .item.stage.failed {
55-
background-color: #ffa1b0;
56-
border-color: #ff4d6d;
55+
background-color: #FFA1B0;
56+
border-color: #FF4D6D;
5757
}
5858

5959
.vis.timeline .item.stage.failed.selected {
60-
background-color: #ffa1b0;
61-
border-color: #ff4d6d;
60+
background-color: #FFA1B0;
61+
border-color: #FF4D6D;
6262
z-index: auto;
6363
}
6464

6565
.legend-area rect.failed-stage-legend {
66-
fill: #ffa1b0;
67-
stroke: #ff4d6d;
66+
fill: #FFA1B0;
67+
stroke: #FF4D6D;
6868
}
6969

7070
.vis.timeline .item.stage.running {
71-
background-color: #a2fcc0;
72-
border-color: #36f572;
71+
background-color: #A2FCC0;
72+
border-color: #36F572;
7373
}
7474

7575
.vis.timeline .item.stage.running.selected {
76-
background-color: #a2fcc0;
77-
border-color: #36f572;
76+
background-color: #A2FCC0;
77+
border-color: #36F572;
7878
z-index: auto;
7979
}
8080

8181
.legend-area rect.active-stage-legend {
82-
fill: #a2fcc0;
83-
stroke: #36f572;
82+
fill: #A2FCC0;
83+
stroke: #36F572;
8484
}
8585

8686
.vis.timeline .item.job {
@@ -104,35 +104,35 @@ div#application-timeline, div#job-timeline {
104104
}
105105

106106
.vis.timeline .item.job.failed {
107-
background-color: #ffa1b0;
108-
border-color: #ff4d6d;
107+
background-color: #FFA1B0;
108+
border-color: #FF4D6D;
109109
}
110110

111111
.vis.timeline .item.job.failed.selected {
112-
background-color: #ffa1b0;
113-
border-color: #ff4d6d;
112+
background-color: #FFA1B0;
113+
border-color: #FF4D6D;
114114
z-index: auto;
115115
}
116116

117117
.legend-area rect.failed-job-legend {
118-
fill: #ffa1b0;
119-
stroke: #ff4d6d;
118+
fill: #FFA1B0;
119+
stroke: #FF4D6D;
120120
}
121121

122122
.vis.timeline .item.job.running {
123-
background-color: #a2fcc0;
124-
border-color: #36f572;
123+
background-color: #A2FCC0;
124+
border-color: #36F572;
125125
}
126126

127127
.vis.timeline .item.job.running.selected {
128-
background-color: #a2fcc0;
129-
border-color: #36f572;
128+
background-color: #A2FCC0;
129+
border-color: #36F572;
130130
z-index: auto;
131131
}
132132

133133
.legend-area rect.running-job-legend {
134-
fill: #a2fcc0;
135-
stroke: #36f572;
134+
fill: #A2FCC0;
135+
stroke: #36F572;
136136
}
137137

138138
.vis.timeline .item.executor.added {
@@ -146,23 +146,23 @@ div#application-timeline, div#job-timeline {
146146
}
147147

148148
.vis.timeline .item.executor.removed {
149-
background-color: #ffa1b0;
150-
border-color: #ff4d6d;
149+
background-color: #FFA1B0;
150+
border-color: #FF4D6D;
151151
}
152152

153153
.legend-area rect.executor-removed-legend {
154-
fill: #ffa1b0;
155-
stroke: #ff4d6d;
154+
fill: #FFA1B0;
155+
stroke: #FF4D6D;
156156
}
157157

158158
.vis.timeline .item.executor.selected {
159-
background-color: #a2fcc0;
160-
border-color: #36f572;
159+
background-color: #A2FCC0;
160+
border-color: #36F572;
161161
z-index: 2;
162162
}
163163

164164
tr.corresponding-item-hover > td, tr.corresponding-item-hover > th {
165-
background-color: #d6ffe4 !important;
165+
background-color: #D6FFE4 !important;
166166
}
167167

168168
#application-timeline.collapsed {
@@ -203,7 +203,7 @@ span.expand-application-timeline, span.expand-job-timeline {
203203
}
204204

205205
.legend-area text {
206-
fill: #4d4d4d;
206+
fill: #4D4D4D;
207207
}
208208

209209
.additional-metrics ul {

0 commit comments

Comments
 (0)