[Qhub] - Customization for navigation bar does not take effect

[ychen-ot]

OS system and architecture in which you are running QHub

Digital Ocean Kubenetes deployment with QHub 0.4.1

Expected behavior

Adding a theme for jupyter hub does takes effect.

Actual behavior

When deployed, I see:

If I highlight the text - I can see that all menu items are available.

How to Reproduce the problem?

Adding a theme in yaml.

theme:
  jupyterhub:
    hub_title: QHUB Studio
    hub_subtitle: subtitle 
    primary_color: '#FFFFFF'
    secondary_color: '#FFFFFF'
    accent_color: '#0C88FF'
    text_color: '#000000'
    h1_color: '#000000'
    h2_color: '#000000'
    navbar_text_color: '#000000'
    navbar_hover_color: '#0C88FF'

Command output

No response

Versions and dependencies used.

Qhub - 0.4.1

Compute environment

Digital Ocean

Integrations

dashboards

Anything else?

Qhub version starts at v0.4 , then upgrade to v0.4.1 For the 0.4 version, we did customize the theme. Maybe this is an upgrade issue.

[viniciusdc]

Hi, @ychen-ot thanks for opening this issue, and letting us know about this usage. Just to be sure the problem is the visibility of the navbar text correct, is there any other theme weird behavior as well? Are there any other extra settings to style/layout/theme that you did besides the ones present in your qhub-config above?

[ychen-ot]

The other piece that looks weird is the radio button. The selected button disappeared.

We had customized it in the 0.3.x then 0.4 release., The customization was below, and that worked properly. No other customization that I am aware of / or remember

theme:
  jupyterhub:
    hub_title: Title
    hub_subtitle: subtitle
    logo: path_to_logo
    primary_color: '#FFFFFF'
    secondary_color: '#FFFFFF'
    accent_color: '#0C88FF'
    text_color: '#000000'
    h1_color: '#000000'
    h2_color: '#000000'

[viniciusdc]

Very strange indeed, I will have a look. Thanks for the details, btw, just to be sure, what are the current docker image versions in your qhub-config right now? does it match the currently installed version?

[viniciusdc]

Hi @ychen-ot, I've made deployment of qhub with the mentioned style changes, but I wasn't able to replicate the mentioned behavior. Which Browser are you using, maybe there might be a version incompatibility with the CSS styles?

[ychen-ot]

@viniciusdc I tested in both Chrome and FF / and both are showing the problem. Is there something to check in the deployed code? Maybe there were some leftover thing from previous installation?

[viniciusdc]

@viniciusdc I tested in both Chrome and FF / and both are showing the problem. Is there something to check in the deployed code? Maybe there were some leftover thing from previous installation?

uhm, I see. Are you using remote as the terraform state type? or is it local?

terraform_state:
  type: remote

[ychen-ot]

It is remote.

[viniciusdc]

It is remote.

So in this case, we should be able to delete (make a copy just in case, and move to another location) your local files inside /stages and do a qhub deploy again to re-render those files (this should remove any remaining config from the previous deploy). If the error still persists, I would also recommend switching the theme config to the default one

    hub_title: QHub Studio
    logo: /hub/custom/images/jupyter_qhub_logo.svg
    primary_color: '#4f4173'
    secondary_color: '#957da6'
    accent_color: '#32C574'
    text_color: '#111111'
    h1_color: '#652e8e'
    h2_color: '#652e8e'

and replace each style one by one, to inspect if these changes are being correctly propagated during deployment.

Let me know if the errors still persists even after the re-deploy.

[viniciusdc]

Also, if you have access to your cluster deployment (k9s) you can inspect if the theme settings are correctly assigned to Jupyterhub by inspecting the hub configmap.

[ychen-ot]

Thanks. I'll try the suggestion relating to redeploy. Tho, does it impact the applications that I currently have deployed ?

[viniciusdc]

Thanks. I'll try the suggestion relating to redeploy. Tho, does it impact the applications that I currently have deployed ?

No, if you are not changing the state of the files (this is, not changing any config) it will just refresh the files with the same state.

[viniciusdc]

Thanks. I'll try the suggestion relating to redeploy. Tho, does it impact the applications that I currently have deployed ?

I would first switch back to the default theme, then redeploy to check if that works (doing this first would show us if there is any issue with Qhub itself). If there is no issue with the theme then we will not need to delete anything

[MaxTechniche]

@viniciusdc @ychen-ot I've done the steps above. In terms of the color, I believe we just had bad colors set up. We had the title bar being white with white text... yeah. So I was able to fix that.

I'm unsure about the subtitle, logo, and welcome message. I'm not sure where they are supposed to show up or what they change.

[ychen-ot]

@MaxTechniche Thank you for testing. What you are saying is that - b/c the text color is white , and b/c nav bar itself is white, that it was a bad color setup.

navbar_text_color: '#000000'

@viniciusdc - qq for you - is there documentation on themes / adjustment ? We also still not able to see logo and welcome messages. If you need that in a separate defect , I can create one

Thanks

[viniciusdc]

@MaxTechniche Thank you for testing. What you are saying is that - b/c the text color is white , and b/c nav bar itself is white, that it was a bad color setup.

navbar_text_color: '#000000'

@viniciusdc - qq for you - is there documentation on themes / adjustment ? We also still not able to see logo and welcome messages. If you need that in a separate defect , I can create one

Thanks

@ychen-ot @MaxTechniche sorry for the late reply, my current understanding of the issue is that the ent-qhub-jupyterhub-theme installed within your Qhub version might be conflicting with the default configuration of Qhub. We are working on obtaining more information on this end c.c @iameskild.

@viniciusdc - qq for you - is there documentation on themes / adjustment ? We also still not able to see logo and welcome messages. If you need that in a separate defect , I can create one

@ychen-ot About this, we only have a short mention about customization here in the docs, there is also an advance section for direct customization with the configurations citted here (but I think this might generate a conflicting behavior)

About the logo and welcome message you commented, are you passing the variables in the qhub-config.yaml with the appropriate values? e.g.

theme:
  jupyterhub:
    hub_title: <content>
    hub_subtitle: <content>
    welcome: |
      <your welcome message>
    logo: <https://your-domain/url-to-your-logo>

[ychen-ot]

@viniciusdc Thanks. Didn't realized that it was impacted by ent-qhub-jupyterhub-theme conflict. We'll open the defect in appropriate location next time.

For the themes - we did provide the values - but without quotes (not sure if "" are needed) The only thing that is different is that we do welcome in this syntax without the | (see below).

Currently:

welcome: This is the welcome
message 

I can fix that and see if that is the issue.

[viniciusdc]

@viniciusdc Thanks. Didn't realized that it was impacted by ent-qhub-jupyterhub-theme conflict. We'll open the defect in appropriate location next time.

For the themes - we did provide the values - but without quotes (not sure if "" are needed) The only thing that is different is that we do welcome in this syntax without the | (see below).

Currently:

welcome: This is the welcome
message 

I can fix that and see if that is the issue.

I don't think the usage of quotes nor the | are interfering here (but it's worth trying), thanks for the reply :slightly_smiling_face:. This might be a conflicting config from the ent. theme. I will check this and come back here once I have a config that works or a way to set theme priority.

[viniciusdc]

As this was an issue related to ent-qhub-jupyterhub-theme package conflicts with Qhub, this will be closed and marked as resolved.