Jupyterlab shows tables in black on black

[horsto]

In Jupyterlab table previews are suddenly unreadable in dark and dark-high-contrast themes. I am not sure what happened here, but I seem not to be able to revert it to showing the font in white. This might be a jupyter lab issue and not a datajoint issue.

OS: Mac OS Jupyter lab: Version 4.2.4 Datajoint python: Version 0.14.1

[CBroz1]

The html table style is defined here, hardcoded for light themes. Not ideal, but running an editable install would allow you to adjust these values

[dimitri-yatsenko]

@CBroz1 what would you suggest for a better solution?

[CBroz1]

I can see a few possible paths...

1. Determine theme and adjust html accordingly. Discussion

• Pros: maintains status quo for light-mode users
• Cons: maintenance burden of front-end variance

2. Defer rendering to pandas html, which already adjusts for theme.

• Pros: offloads maintenance to another package, no additional dependencies
• Cons:
  • mismatch across versions
  • may require deprecation timeline for html in case someone uses this for other tools
  • minor edits to show primary keys and table header

3. Add a config option that determines the html displayed

• Pros: maintains status quo, no interface changes, minimal work
• Cons: Additional config line item

Example Pandas adjustment for primary keys

import pandas as pd
from IPython.display import display

data = {
    'id': [1, 2, 3],
    'name': ['Alice', 'Bob', 'Charlie'],
    'age': [24, 27, 22],
    'email': ['[email protected]', '[email protected]', '[email protected]']
}
df = pd.DataFrame(data)
primary_key_cols = ['id', 'name']

def style_primary_keys(df, primary_key_cols):
    styled_cols = {col: f"*{col}" if col in primary_key_cols else col for col in df.columns}
    df = df.rename(columns=styled_cols)
    return df

styled_df = style_primary_keys(df, primary_key_cols)
display(styled_df.style)

I don't think 1 is worth the additional maintenance burden. 2 may be the most long-term solution, but 3 is an easier short-term solution. I lean toward 2.

[horsto]

Has anybody worked on that?

Screenshot (dj vers 0.14.3)

[CBroz1]

Has anybody worked on that?

Not that I'm aware of. I still edit the HTML of my installs for each env

[horsto]

Thanks @CBroz1 - could you provide a mini-tutorial here on how to do that?

[CBroz1]

Thanks @CBroz1 - could you provide a mini-tutorial here on how to do that?

Sure -

1. Clone this repo, do an editable install within your conda environment

cd /your/path/for/local/files
git clone https://github.com/datajoint/datajoint-python/
cd ./datajoint-python
conda activate your_env
pip install -e .

2. Edit the preview file to change the hex codes (e.g., #A0A0A0) of the css variable within repr_html here, save the result in /you/path/for/local/files/datajoint-python/datajoint/preview.py

My `css` variable

See variables at the top. Picking colors may be easier with a color picker VSCode extension

    <style type="text/css">
        :root { /* Variables: */
            --my-background-dark: #282a36;
            --my-background-light: #44475a;
            --my-foreground: #f8f8f2;
            --my-lines: #6272a4;
            --my-highlight: #bd93f9;
        }
        .Table{
            border-collapse:collapse;
            background-color: var(--my-background-dark);
            color: var(--my-background-light);
        }
        .Table th{ /* Table Header */
            background: var(--my-background-dark);
            color: var(--my-background-dark);
            padding: 4px;
            border: var(--my-lines) 1px solid;
            text-align: center;
        }
        .Table td{ /* Table Data */
            padding:4px;
            border:var(--my-lines) 1px solid; font-size:100%;
        }
        .Table tr:nth-child(odd){ /* Table Row, Odd */
            background: var(--my-background-light);
            color: var(--my-foreground);
        }
        .Table tr:nth-child(even){ /* Table Row, Even */
            color: var(--my-foreground);
            background: var(--my-background-dark);
        }
        /* Tooltip container */
        .djtooltip {
        }
        /* Tooltip text */
        .djtooltip .djtooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: var(--my-background-light);
            color: var(--my-foreground);
            text-align: center;
            padding: 5px 0;
            border: 1px solid var(--my-lines);
            border-radius: 6px;
            /* Position the tooltip text - see examples below! */
            position: absolute;
            z-index: 1;
        }
        #primary {
            font-weight: bold;
            color: var(--my-highlight);
        }
        #nonprimary {
            font-weight: normal;
            color: var(--my-foreground);
        }

        /* Show the tooltip text when you mouse over the tooltip container */
        .djtooltip:hover .djtooltiptext {
            visibility: visible;
        }
    </style>

Based on dracula theme, using this color scheme

3. Restart the kernel of your jupyter instance to see the effects

[horsto]

Thanks so much @CBroz1 !

... I wish this was configurable somehow as part of dj.config (light dark switch) @dimitri-yatsenko