Custom css and javascript

,
1

Hi, I’m working on customizing the Prodigy web app interface using the “global_css_dir” and “javascript” options. While the customizations do apply, there’s a noticeable split-second delay before they take effect.

For instance, if I set the sidebar color to red via CSS, the sidebar initially appears in its default purple color before switching to red. The same issue happens to JavaScript. Is there any way to eliminate this delay? Thanks.

Recipe:

with open(r'C:\Users\Sales-Demo\Desktop\Repo\Prodigy\custom_logo.js') as txt:
    js = txt.read()

@prodigy.recipe(
    "myimage.manual",
    dataset=("The dataset to use", "positional", None, str),
    source=("Path to a directory of images", "positional", None, str),
    label=("One or more comma-separated labels", "option", None, split_string),
)
def image_manual(
    dataset: str,
    source: str,
    label: List[str] = None,
):
    stream = get_stream(source, rehash=True)

    return {
        "view_id": "image_manual",
        "dataset": dataset,
        "stream": stream,
        "config": {
            "label": ", ".join(label) if label is not None else "all",
            "labels": label,
            "global_css_dir": r"C:\Users\Sales-Demo\Desktop\Repo\Prodigy",
            "javascript": js,
        },
    }

CSS:

.prodigy-sidebar {
    background-color: red;
}

JavaScript:

const sidebar_title = document.querySelector('.prodigy-sidebar-title')
sidebar_title.style.backgroundColor = "green";
2

Hi @paradm,

Thanks for sharing the details of your implementation. The brief delay you're noticing isn't caused by your code. Instead, it's due to the time required to apply customizations and load them from the back-end API. Unfortunately, there's no easy way around this. It's a trade-off we've made to ensure that the rest of the app loads without delay.