Removing meta div from display and custom css

While I do need the metadata to exist in the dataset, I don’t want to display it to the annotator. I can probably remove it with custom css, but I don’t know how to add a custom css file to prodigy - same goes for changing the icons on the accept/reject buttons

There’s actually a "hide_meta" setting in the prodigy.json that should do exactly that – see here for details. So you shouldn’t need to use any custom markup for this at all :slightly_smiling_face:

While you can change the colors of the buttons via the custom theme, there’s currently no easy way to change the icons, sorry. Those are currently hard-coded since they’re are inlined SVG graphics.

Thanks! just found out myself about the meta flag, but there are more css issues I’d like to address card_css is quite under documented in my opinion. Can I use css selectors in it -for example to target can I do:

    card_css: {
      .input[id="2"]+div.c0173:{
         color:red;
     }
    }

Also are the non human readable css classes generated for every prodigy version or consistent?

At the moment no, sorry. The "card_css" is really just an object that is passed in as the container's "style" attribute. So you can think of it as:

<div style={card_css} />
<div style={{ color: 'red'}} />

So if you want fully custom and nested style overrides, the best solution for now would probably be to add a <style> tag to the index.html.

They're auto-generated, so we couldn't guarantee this. However, I'm open to adding more human-readable static class names to elements if you have a suggestion for what you (and potentially others) might want to customise. I also want to be adding more identifiers for recipes, views and a "global_css" setting for consistency. I wrote up some of the ideas in my comment here the other day:

Thanks @ines for the clarification
Can you please explain or point in the docs how do I add a style tag to the index.html? Do I need a complete “replace” ? If so how do I preserve the functionality of the current page. (No problems with working with react if needed)

You can find the file in static/index.html in your Prodigy installation. To find the path, you can run the following command:

python -c "import prodigy; print(prodigy.__file__)"

If you check out the index.html markup, you’ll see that it’s pretty straightforward and compact. <div id="root"></div> is where the app will be rendered – everything else stays intact. So if you add a <style></style> in the <head>, it will be available when you run the app.

The main downside here (and what a "global_css" setting would solve) is that you have to edit the static source and can’t easily add recipe-specific markup. So if one recipe needs some custom formatting and the other one doesn’t, that’s currently a bit tricky.

Thanks!

Hey @ines I seem to have a missing piece here. How do I override index.html? can I pass it as a param or should I do it in the crude way of replacing that file in site-packages?

Yeah, that’s pretty much what you’d have to do at the moment, sorry. It works, but it’s not very elegant.