Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: server side dashboard css for less repaint #10850

Merged
merged 1 commit into from
Sep 14, 2020

Conversation

ktmud
Copy link
Member

@ktmud ktmud commented Sep 12, 2020

SUMMARY

Add custom dashboard css to server side rendering so the page doesn't have to repaint when refresh.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before

Since custom CSS is added after dashboard is loaded, when loading a dashboard, you may see an annoying repaint:

load-repaint

After

No repaint when refreshing the page:

no-repaint

TEST PLAN

Manual testing.

  1. Go add some custom CSS to a dashboard. Following is used in the screenshots:
    body {
      font-family: monospace;
    }
    #app-menu {
      display: none;
    }
  2. Save and refresh the page.
  3. Editing the CSS again, live edits should be able to delete previous CSS.

ADDITIONAL INFORMATION

  • Has associated issue:
  • Changes UI
  • Requires DB Migration.
  • Confirm DB Migration upgrade and downgrade tested.
  • Introduces new feature or API
  • Removes existing feature or API

superset/templates/superset/dashboard.html Outdated Show resolved Hide resolved
@codecov-commenter
Copy link

codecov-commenter commented Sep 12, 2020

Codecov Report

Merging #10850 into master will decrease coverage by 4.48%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #10850      +/-   ##
==========================================
- Coverage   65.46%   60.98%   -4.49%     
==========================================
  Files         809      809              
  Lines       38154    38152       -2     
  Branches     3605     3605              
==========================================
- Hits        24979    23266    -1713     
- Misses      13066    14700    +1634     
- Partials      109      186      +77     
Flag Coverage Δ
#cypress ?
#javascript 61.59% <ø> (ø)
#python 60.62% <ø> (-0.72%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
superset/views/core.py 74.22% <ø> (-0.25%) ⬇️
superset-frontend/src/SqlLab/App.jsx 0.00% <0.00%> (-100.00%) ⬇️
superset-frontend/src/explore/App.jsx 0.00% <0.00%> (-100.00%) ⬇️
superset-frontend/src/dashboard/App.jsx 0.00% <0.00%> (-100.00%) ⬇️
superset-frontend/src/explore/index.jsx 0.00% <0.00%> (-100.00%) ⬇️
superset-frontend/src/dashboard/index.jsx 0.00% <0.00%> (-100.00%) ⬇️
superset-frontend/src/setup/setupColors.js 0.00% <0.00%> (-100.00%) ⬇️
superset-frontend/src/chart/ChartContainer.jsx 0.00% <0.00%> (-100.00%) ⬇️
superset-frontend/src/setup/setupFormatters.js 0.00% <0.00%> (-100.00%) ⬇️
superset-frontend/src/explore/reducers/index.js 0.00% <0.00%> (-100.00%) ⬇️
... and 165 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7cd96ed...a2b55f5. Read the comment docs.

{{ super() }}
{% if custom_css %}
<style class="CssEditor-css" type="text/css">
{{ custom_css }}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

malicious strings should be escaped by Jinja.

{% block head_css %}
{{ super() }}
{% if custom_css %}
<style class="CssEditor-css" type="text/css">
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Must add this class so that live-edits can updating previous CSS.

@ktmud ktmud merged commit 1f31e0e into apache:master Sep 14, 2020
@ktmud ktmud deleted the earlier-dashboard-css branch September 14, 2020 04:32
auxten pushed a commit to auxten/incubator-superset that referenced this pull request Nov 20, 2020
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 0.38.0 labels Mar 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/S 🚢 0.38.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants