Skip to content

fix: FIT-137: Multiple labeling templates not yet adapted to dark mode #7584

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.

Sign up for GitHub

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

Merged
merged 13 commits into from
May 23, 2025
Merged

fix: FIT-137: Multiple labeling templates not yet adapted to dark mode #7584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3e481c2
fix: FIT-137: Text area in Content Moderation template is not optimiz…
ricardoantoniocm May 20, 2025
af7c357
Adapts Content Moderation template to Dark Mode.
ricardoantoniocm May 21, 2025
0b3532b
Adapts LLM Ranker template to Dark Mode.
ricardoantoniocm May 21, 2025
61786bc
Fixes author filter names not being adapted to Dark mode (Fixes Conve…
ricardoantoniocm May 21, 2025
54fb660
Remove unneeded line.
ricardoantoniocm May 21, 2025
ab0cd48
Merge branch 'develop' of https://github.com/heartexlabs/label-studio…
ricardoantoniocm May 21, 2025
8ba5da5
Fixes Pairwise to use tailwind classes instead of hardcoded hex value…
ricardoantoniocm May 21, 2025
8c39f6d
Improves Text to Image Generation template.
ricardoantoniocm May 21, 2025
01635d7
Linter fixes.
ricardoantoniocm May 21, 2025
a853a79
Fixes.
ricardoantoniocm May 21, 2025
e68faf7
Adds guards to the left and right getters to safely return undefined …
ricardoantoniocm May 21, 2025
69510fc
Update label_studio/annotation_templates/generative-ai/llm-ranker/con…
ricardoantoniocm May 22, 2025
646fb9b
Merge branch 'develop' into 'fb-fit-137/text-area-in-content-moderati…
ricardoantoniocm May 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/source/templates/content_moderation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ This template displays text from your source data, and then allows an annotator
<Choice value="Insult" background="orange"/>
<Choice value="Hate" background="grey"/>
</Choices>
<View style="margin-top: 2em; box-shadow: 2px 12px 15px #999; padding: 30px; border-radius: 5px; background-color: #F0FFF0;">
<View style="margin: var(--spacing-tight); box-shadow: 0 4px 8px rgba(var(--color-neutral-shadow-raw) / 10%); padding: var(--spacing-tight) var(--spacing-base); border-radius: var(--corner-radius-small); background-color: var(--color-neutral-background); border: 1px solid var(--color-neutral-border);">
<Header value="Please provide additional comments"/>
<TextArea name="comments" toName="text" required="false"/>
</View>
Expand Down
4 changes: 1 addition & 3 deletions docs/source/templates/text_to_image.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ Based on the natural language prompt, you can generate the set of images from wh
<Style>
.ch-title {
font-size: 2em;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
text-align: center;
}
.ch-title .lsf-richtext__line:before {
Expand All @@ -42,15 +41,14 @@ Based on the natural language prompt, you can generate the set of images from wh
padding: 8px;
}
.ant-checkbox-checked+span {
border-color: red;
border-color: var(--color-primary-border-subtle);
}
.ant-checkbox+span sup {
position: absolute;
right: 8px;
top: 8px;
z-index: 2;
display: block;
background: white;
width: 24px;
line-height: 16px;
text-align: center;
Expand Down
32 changes: 20 additions & 12 deletions label_studio/annotation_templates/generative-ai/llm-ranker/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ details: Here is a demo that showcases how to construct an interface enabling us
config: |
<View>
<View style="display: flex; align-items: center; font-size: 1em;">
<View style="margin: 0.5em 0.5em 0 0;">
<View style="margin: var(--spacing-tight) var(--spacing-tight) 0 0;">
<Header value="Task: " style="font-size: 1em;"/>
</View>
<Text name="task" value="$task"/>
</View>
<View style="display: flex; align-items: center; box-shadow: 2px 2px 5px #999; padding: 10px; border-radius: 5px; background-color: #E0E0E0; font-size: 1.25em;">
<View style="display: flex; align-items: center; box-shadow: 0px 2px 5px 0px rgba(var(--color-neutral-shadow-raw) / 10%); padding: var(--spacing-tight); border-radius: 5px; background-color: var(--color-neutral-background); font-size: 1.25em; border: 1px solid var(--color-neutral-border); margin-bottom: var(--spacing-tight);">
<View style="margin: 0 1em 0 0">
<Header value="Prompt: " />
</View>
Expand All @@ -22,23 +22,31 @@ config: |
<List name="answers" value="$items" title="All Results" />
<Style>
.htx-ranker-column {
background: #f8f8f8;
background: var(--color-neutral-background);
width: 50%;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
padding: var(--spacing-tight);
border-radius: var(--corner-radius-smaller);
box-shadow: 0px 2px 5px 0px rgba(var(--color-neutral-shadow-raw) / 10%);
border: 1px solid var(--color-neutral-border);
}

.htx-ranker-item {
background: #e0e0e0;
color: #333;
background: var(--color-neutral-surface);
color: var(--color-neutral-content);
font-size: 16px;
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 3px;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
padding: var(--spacing-tight);
margin-bottom: var(--spacing-tight);
border-radius: var(--corner-radius-smaller);
box-shadow: 0px 2px 5px 0px rgba(var(--color-neutral-shadow-raw) / 10%);
border: 1px solid var(--color-neutral-border);
}


.htx-ranker-item:hover {
background: var(--color-neutral-surface-hover);
}

.htx-ranker-item p:last-child { display: none }
</Style>
<Ranker name="rank" toName="answers">
Expand Down
2 changes: 1 addition & 1 deletion label_studio/annotation_templates/natural-language-processing/content-moderation/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ config: |
<Choice value="Hate" background="grey"/>
</Choices>

<View style="margin-top: 2em; box-shadow: 2px 12px 15px #999; padding: 30px; border-radius: 5px; background-color: #F0FFF0;">
<View style="margin: var(--spacing-tight); box-shadow: 0 4px 8px rgba(var(--color-neutral-shadow-raw) / 10%); padding: var(--spacing-tight) var(--spacing-base); border-radius: var(--corner-radius-small); background-color: var(--color-neutral-background); border: 1px solid var(--color-neutral-border);">
<Header value="Please provide additional comments"/>
<TextArea name="comments" toName="text" required="false"/>
</View>
Expand Down
4 changes: 1 addition & 3 deletions label_studio/annotation_templates/ranking-and-scoring/text-to-image/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ config: |
<Style>
.ch-title {
font-size: 2em;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
text-align: center;
}
.ch-title .lsf-richtext__line:before {
Expand All @@ -30,15 +29,14 @@ config: |
padding: 8px;
}
.ant-checkbox-checked+span {
border-color: red;
border-color: var(--color-primary-border-subtle);
}
.ant-checkbox+span sup {
position: absolute;
right: 8px;
top: 8px;
z-index: 2;
display: block;
background: white;
width: 24px;
line-height: 16px;
text-align: center;
Expand Down
2 changes: 1 addition & 1 deletion web/libs/editor/src/examples/pairwise/annotations/1.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{
"from_name": "pw",
"id": "Dx_aB91ISN",
"to_name": "pw",
"to_name": "txt-2",
"type": "pairwise",
"value": {
"selected": "right"
Expand Down
55 changes: 45 additions & 10 deletions web/libs/editor/src/tags/control/Pairwise.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,12 @@ const Model = types
},

get left() {
if (!self.annotation || !self.annotation.names) return undefined;
return self.annotation.names.get(self.names[0]);
},

get right() {
if (!self.annotation || !self.annotation.names) return undefined;
return self.annotation.names.get(self.names[1]);
},

Expand All @@ -81,8 +83,39 @@ const Model = types

setResult(dir = "none") {
self.selected = dir;
self.left.addProp("style", dir === "left" ? self._selection : {});
self.right.addProp("style", dir === "right" ? self._selection : {});
if (!self.left || !self.right) {
// eslint-disable-next-line no-console
console.warn("Pairwise: left or right object reference is missing. Check toName and config.", {
left: self.left,
right: self.right,
});
return;
}
// Common interactive classes
const interactive = "cursor-pointer hover:bg-primary-emphasis-subtle transition-colors rounded-sm";
if (self._selectionType === "className") {
self.left.addProp(
"className",
dir === "left" ? `${interactive} ${self._selection}` : `${interactive} border border-transparent`,
);
self.right.addProp(
"className",
dir === "right" ? `${interactive} ${self._selection}` : `${interactive} border border-transparent`,
);
self.left.addProp("style", {});
self.right.addProp("style", {});
} else {
self.left.addProp(
"style",
dir === "left" ? self._selection : { border: "1px solid transparent", borderRadius: "0.125rem" },
);
self.right.addProp(
"style",
dir === "right" ? self._selection : { border: "1px solid transparent", borderRadius: "0.125rem" },
);
self.left.addProp("className", interactive);
self.right.addProp("className", interactive);
}
},

selectLeft() {
Expand All @@ -100,21 +133,22 @@ const Model = types
InfoModal.error("Incorrect toName parameter on Pairwise, must be two names separated by a comma: name1,name2");
}

let selection = {};

// If selectionstyle is provided, use inline style for backward compatibility.
// Otherwise, use Tailwind semantic classes for selection via className.
Copy link
Collaborator

Choose a reason for hiding this comment

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

That's an interesting approach with tailwind and classnames override! I would simplify it a little: we don't need selection var at this level, just assign it directly in both branches to self._selection. But it's good anyway

let selection;
if (self.selectionstyle) {
const s = Tree.cssConverter(self.selectionstyle);

selection = {};
for (const key in s) {
selection[key] = s[key];
}
self._selectionType = "style";
} else {
selection = {
backgroundColor: "#f6ffed",
border: "1px solid #b7eb8f",
};
// Use semantic Tailwind classes for primary/selected state
// See: label-studio/web/libs/ui/src/tokens/tokens.js
selection = "bg-primary-background border border-primary-border-subtle rounded-sm";
self._selectionType = "className";
}

self._selection = selection;
},

Expand All @@ -126,6 +160,7 @@ const Model = types
annotationAttached() {
// @todo annotation attached in a weird way, so do that next tick, with fixed tree
setTimeout(() => {
if (!self.left || !self.right) return;
self.left.addProp("onClick", self.selectLeft);
self.right.addProp("onClick", self.selectRight);
self.setResult(self.result?.value.selected);
Expand Down
4 changes: 2 additions & 2 deletions web/libs/editor/src/tags/object/Paragraphs/Paragraphs.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ $border-thin: 1px solid rgb(137 128 152 / 16%);
height: 40px;
padding: 0 12px;
border: none;
border-bottom: 1px solid rgb(0 0 0 / 15%);
border-bottom: 1px solid var(--color-neutral-border);
font-size: 14px;
line-height: 22px;
background: var(--color-neutral-surface);
Expand All @@ -142,7 +142,7 @@ $border-thin: 1px solid rgb(137 128 152 / 16%);
gap: 4px;

&__item {
color: initial;
color: var(--color-neutral-content);
background-color: var(--color-neutral-background);
display: inline-flex;
font-weight: 400;
Expand Down
Loading