[SPARK-31565][WEBUI] Unify the font color of label among all DAG-viz #28352

sarutak · 2020-04-26T22:38:37Z

What changes were proposed in this pull request?

This PR unifies the font color of label as #333333 among all DAG-viz.

Why are the changes needed?

For the consistent appearance among all DAG-viz.
There are three types of DAG-viz in the WebUI.
One is for stages, another one is for RDDs and the last one is for query plans.
But the font color of labels are slightly different among them.

For stages, the color is #333333 (simply 333) which is specified by spark-dag-viz.css.

For RDDs, the color is #212529 which is specified by bootstrap.min.js.

For query plans, the color is black which is specified by spark-sql-viz.css.

After the change, the appearance is like as follows (no change for stages).

For RDDs.

For query plans.

Does this PR introduce any user-facing change?

Yes. The unified color is slightly lighter than ever.

How was this patch tested?

Confirmed that the color code among all DAG-viz are #333333 using browser's debug console.

sarutak · 2020-04-26T22:43:19Z

By the way, while I worked on #28317 , I wondered why the font color of RDDs in branch-3.0 is white although it's #212529 in master.
It's because the version of bootstrap is different between them.

dongjoon-hyun · 2020-04-26T23:25:30Z

Thank you for the investigation. I also thought it's weird.

It's because the version of bootstrap is different between them.

dongjoon-hyun · 2020-04-26T23:27:38Z

After this, can we backport #28317 ?

dongjoon-hyun · 2020-04-26T23:39:39Z

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

@@ -22,6 +22,7 @@
 #dag-viz-graph .label {
  font-weight: normal;
  text-shadow: none;
+  color: #333;


What does this change?

According to the PR description, For RDDs, the color is #212529 which is specified by bootstrap.min.js.

Never mind. I validate this overrides correctly via Web Inspector and UI.

Actually, the library DAG-viz uses (dagre-d3) has some mode.
One is text which is the default mode and another is html mode.
With html mode, label is represented as HTML, while with text mode, label is represented as SVG.
For each node in DAG-viz for RDDs, outer label is SVG and inner one is HTML.
The color of font for SVG is specified by fill while color for HTML so we need this setting.

While I wrote the explanation above, I noticed the font color of outer node for query plans is not specified. So, the default font color of SVG seems to be applied (Can you recognize the color of WholeStageCodegen (1) is a little bit darker than SerializeFromObject ?).

I'll create a followup PR.

dongjoon-hyun

+1, LGTM. Thank you, @sarutak . I verified this with spark-shell and spark-history-server.
Merged to master/3.0.

### What changes were proposed in this pull request? This PR unifies the font color of label as `#333333` among all DAG-viz. ### Why are the changes needed? For the consistent appearance among all DAG-viz. There are three types of DAG-viz in the WebUI. One is for stages, another one is for RDDs and the last one is for query plans. But the font color of labels are slightly different among them. For stages, the color is `#333333` (simply 333) which is specified by `spark-dag-viz.css`. <img width="355" alt="job-graph" src="https://user-images.githubusercontent.com/4736016/80321397-b517f580-8857-11ea-8c8e-cf68f648ab05.png"> <img width="310" alt="job-graph-color" src="https://user-images.githubusercontent.com/4736016/80321399-ba754000-8857-11ea-8708-83bdef4bc1d1.png"> For RDDs, the color is `#212529` which is specified by `bootstrap.min.js`. <img width="386" alt="stage-graph" src="https://user-images.githubusercontent.com/4736016/80321438-f0b2bf80-8857-11ea-9c2a-13fa0fd1431c.png"> <img width="313" alt="stage-graph-color" src="https://user-images.githubusercontent.com/4736016/80321444-fa3c2780-8857-11ea-81b2-4f1203d47896.png"> For query plans, the color is `black` which is specified by `spark-sql-viz.css`. <img width="449" alt="plan-graph" src="https://user-images.githubusercontent.com/4736016/80321490-61f27280-8858-11ea-9c3a-2c98d3d4d03b.png"> <img width="316" alt="plan-graph-color" src="https://user-images.githubusercontent.com/4736016/80321496-6ae34400-8858-11ea-8fe8-0d6e4a821608.png"> After the change, the appearance is like as follows (no change for stages). For RDDs. <img width="389" alt="stage-graph-fixed" src="https://user-images.githubusercontent.com/4736016/80321613-6b300f00-8859-11ea-912f-d92474aa9f47.png"> For query plans. <img width="456" alt="plan-graph-fixed" src="https://user-images.githubusercontent.com/4736016/80321638-9a468080-8859-11ea-974c-33c56a8ffe1a.png"> ### Does this PR introduce any user-facing change? Yes. The unified color is slightly lighter than ever. ### How was this patch tested? Confirmed that the color code among all DAG-viz are `#333333` using browser's debug console. Closes #28352 from sarutak/unify-label-color. Authored-by: Kousuke Saruta <sarutak@oss.nttdata.com> Signed-off-by: Dongjoon Hyun <dongjoon@apache.org> (cherry picked from commit 91ec2ea) Signed-off-by: Dongjoon Hyun <dongjoon@apache.org>

sarutak · 2020-04-26T23:59:45Z

After this, can we backport #28317 ?

Yeah, I'll do it.

dongjoon-hyun · 2020-04-27T00:01:36Z

Thanks!

SparkQA · 2020-04-27T01:42:55Z

Test build #121853 has finished for PR 28352 at commit 00a8fbc.

This patch passes all tests.
This patch merges cleanly.
This patch adds no public classes.

…query plan ### What changes were proposed in this pull request? This PR adds a font color setting of DAG-viz for query plan. ### Why are the changes needed? #28352 aimed to unify the font color of all DAG-viz in WebUI but there is one part left over. Before this change applied, the appearance of a query plan is like as follows. <img width="456" alt="plan-graph-fixed" src="https://user-images.githubusercontent.com/4736016/80325600-ca4d4e00-8870-11ea-945c-64971dbb752c.png"> The color of `WholeStageCodegen (1)` and its following text (`duration: total...`) is slightly darker than `SerializeFromObject`. After this change, those color is unified as `#333333`. <img width="450" alt="plan-graph-fixed2" src="https://user-images.githubusercontent.com/4736016/80325651-fb2d8300-8870-11ea-8ed8-178c124d224c.png"> ### Does this PR introduce any user-facing change? Slightly yes. ### How was this patch tested? I confirmed the style of `fill` and `color` is `#333333` by debug console of Chrome. <img width="321" alt="fill" src="https://user-images.githubusercontent.com/4736016/80325760-6c6d3600-8871-11ea-82e7-e789bf741f2a.png"> <img width="316" alt="color" src="https://user-images.githubusercontent.com/4736016/80325765-70995380-8871-11ea-8976-7020205d585c.png"> Closes #28355 from sarutak/followup-SPARK-31565. Authored-by: Kousuke Saruta <sarutak@oss.nttdata.com> Signed-off-by: Dongjoon Hyun <dongjoon@apache.org>

…query plan ### What changes were proposed in this pull request? This PR adds a font color setting of DAG-viz for query plan. ### Why are the changes needed? #28352 aimed to unify the font color of all DAG-viz in WebUI but there is one part left over. Before this change applied, the appearance of a query plan is like as follows. <img width="456" alt="plan-graph-fixed" src="https://user-images.githubusercontent.com/4736016/80325600-ca4d4e00-8870-11ea-945c-64971dbb752c.png"> The color of `WholeStageCodegen (1)` and its following text (`duration: total...`) is slightly darker than `SerializeFromObject`. After this change, those color is unified as `#333333`. <img width="450" alt="plan-graph-fixed2" src="https://user-images.githubusercontent.com/4736016/80325651-fb2d8300-8870-11ea-8ed8-178c124d224c.png"> ### Does this PR introduce any user-facing change? Slightly yes. ### How was this patch tested? I confirmed the style of `fill` and `color` is `#333333` by debug console of Chrome. <img width="321" alt="fill" src="https://user-images.githubusercontent.com/4736016/80325760-6c6d3600-8871-11ea-82e7-e789bf741f2a.png"> <img width="316" alt="color" src="https://user-images.githubusercontent.com/4736016/80325765-70995380-8871-11ea-8976-7020205d585c.png"> Closes #28355 from sarutak/followup-SPARK-31565. Authored-by: Kousuke Saruta <sarutak@oss.nttdata.com> Signed-off-by: Dongjoon Hyun <dongjoon@apache.org> (cherry picked from commit 7d4d05c) Signed-off-by: Dongjoon Hyun <dongjoon@apache.org>

Unified the font color of label of DAG.

00a8fbc

probot-autolabeler bot added CORE SQL WEB UI labels Apr 26, 2020

sarutak removed CORE SQL labels Apr 26, 2020

dongjoon-hyun reviewed Apr 26, 2020

View reviewed changes

dongjoon-hyun approved these changes Apr 26, 2020

View reviewed changes

dongjoon-hyun closed this in 91ec2ea Apr 26, 2020

dongjoon-hyun mentioned this pull request Apr 27, 2020

[SPARK-31534][WEBUI] Text for tooltip should be escaped. #28317

Closed

sarutak mentioned this pull request Apr 27, 2020

[SPARK-31565][WEBUI][FOLLOWUP] Add font color setting of DAG-viz for query plan. #28355

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[SPARK-31565][WEBUI] Unify the font color of label among all DAG-viz #28352

[SPARK-31565][WEBUI] Unify the font color of label among all DAG-viz #28352

Uh oh!

sarutak commented Apr 26, 2020 •

edited

Loading

Uh oh!

sarutak commented Apr 26, 2020 •

edited

Loading

Uh oh!

dongjoon-hyun commented Apr 26, 2020

Uh oh!

dongjoon-hyun commented Apr 26, 2020

Uh oh!

dongjoon-hyun Apr 26, 2020

Uh oh!

dongjoon-hyun Apr 26, 2020

Uh oh!

sarutak Apr 27, 2020 •

edited

Loading

Uh oh!

dongjoon-hyun left a comment

Uh oh!

sarutak commented Apr 26, 2020 •

edited

Loading

Uh oh!

dongjoon-hyun commented Apr 27, 2020

Uh oh!

SparkQA commented Apr 27, 2020

Uh oh!

Uh oh!

[SPARK-31565][WEBUI] Unify the font color of label among all DAG-viz #28352

[SPARK-31565][WEBUI] Unify the font color of label among all DAG-viz #28352

Uh oh!

Conversation

sarutak commented Apr 26, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changes were proposed in this pull request?

Why are the changes needed?

Does this PR introduce any user-facing change?

How was this patch tested?

Uh oh!

sarutak commented Apr 26, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dongjoon-hyun commented Apr 26, 2020

Uh oh!

dongjoon-hyun commented Apr 26, 2020

Uh oh!

dongjoon-hyun Apr 26, 2020

Choose a reason for hiding this comment

Uh oh!

dongjoon-hyun Apr 26, 2020

Choose a reason for hiding this comment

Uh oh!

sarutak Apr 27, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dongjoon-hyun left a comment

Choose a reason for hiding this comment

Uh oh!

sarutak commented Apr 26, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dongjoon-hyun commented Apr 27, 2020

Uh oh!

SparkQA commented Apr 27, 2020

Uh oh!

Uh oh!

sarutak commented Apr 26, 2020 •

edited

Loading

sarutak commented Apr 26, 2020 •

edited

Loading

sarutak Apr 27, 2020 •

edited

Loading

sarutak commented Apr 26, 2020 •

edited

Loading