HTML labels for radio/checkbox options #412

ianroberts · 2024-11-03T00:47:35Z

Summary

Add the ability to specify an htmlLabel instead of a plain text label for radio and checkbox options. The motivating use case was a feature request from a user within the GATE team who wanted to be able to add colours to their checkbox labels, e.g. green for positive sentiment, red for negative, but HTML labels would open up other possibilities, e.g. adding margin-bottom to certain options to separate a long list of radio choices into logical groups (#404).

Implementation

I've added handling for htmlLabel to the generateBVOptions function, whereby if htmlLabel is set in an option in the project config (or a fromDocument field) then it adds an html property to the generated option object. CheckboxInput and RadioInput look for this html property, and if found they render it into a span with v-html and ignore the usual text. If there is no HTML label then the text label is rendered in the normal way.

I've also added some special CSS classes tw-space-(above|below)-[1-5] that you can apply to an element inside the htmlLabel that do the equivalent of adding the Bootstrap margin classes mt-[1-5] or mb-[1-5] to the containing div that holds that label and its associated checkbox. These can be used to visually separate groups of logically-related options.

Examples

Coloured option labels

{
    "name": "sentiment",
    "type": "checkbox",
    "title": "Sentiment",
    "options": [
        {"value": "positive", "htmlLabel": "<span style='color: green'>Positive</span>"},
        {"value": "neutral", "htmlLabel": "<span style='font-style: italic'>Neutral</span> or uncertain"},
        {"value": "positive", "htmlLabel": "<span style='color: red'>Negative</span>"}
    ]
}

Separating options into groups

{
  "name": "longlist",
  "type": "radio",
  "options": [
    {"value": "group1optA", "label": "Option 1a"},
    {"value": "group1optB", "label": "Option 1b"},
    {"value": "group1optC", "htmlLabel": "<span class='tw-space-below-4'>Option 1c</span>"},
    {"value": "group2optA", "label": "Option 2a"},
    {"value": "group2optB", "label": "Option 2b"},
    {"value": "group2optC", "label": "Option 2c"}
  ]
}

github-actions · 2024-11-03T10:56:28Z

Jest Coverage

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	83.83	83.17	64	83.83

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	83.83	83.17	64	83.83
_jrpc	94.11	91.66	83.33	94.11
_ index.js	94.11	91.66	83.33	94.11	29-30,38-40
_utils	82	82.1	57.89	82
_ annotations.js	97.75	70.83	100	97.75	35-36
_ dict.js	88.88	83.33	100	88.88	3-4
_ expressions.js	80.08	82.35	80	80.08	...,188-190,201-218
_ index.js	73.6	100	14.28	73.6	...4-65,76-82,93-94

ianroberts · 2024-11-03T11:32:49Z

This PR also includes various changes to the workflows and test harness to make them compatible with the current ubuntu-latest actions runner, which has been upgraded since we last used it and now uses compose v2 (i.e. docker compose with a space) instead of v1 (docker-compose as a separate command from docker). The deploy.sh script has borrowed the logic I was already using in get-teamware.sh so should be compatible with either - it uses docker compose if available, falling back to docker-compose if v2 is not found.

…adios If a checkbox or radio option specifies "htmlLabel" then this will be rendered _as HTML_ instead of the regular "label" being rendered as text. Use cases for this could be - showing the labels in differnt colours `<span style='color:red'>Negative</span>` - adding emphasis to particular parts of the label `<b>Reasonably</b> confident` - adding margin to the bottom of an option to separate groups of related choices `<div style='margin-bottom: 1.5em'>Last option in this group</div>`

In newer docker versions, compose is a plugin to the docker command rather than a command in its own right.

…ns in e2e tests

Use inline-flex for the checkbox/radio `<label>` so that even if the label includes something like a div with bottom margin, the helptext popup still appears beside the label rather than underneath it

Added special classes to the CSS that users can add to a span or something inside an option's htmlLabel to affect the margin above or below the option as a whole (as opposed to just above or below the label).

ianroberts · 2024-11-04T13:15:23Z

frontend/src/components/annotation/RadioInput.vue

-          {{ option.text }}
+          <span v-if="option.html" v-html="option.html"></span>
+          <span v-else>{{ option.text }}</span>


This is the core of the changes - if there's an HTML label then bind that with v-html, otherwise use the text label as before.

ianroberts · 2024-11-04T13:16:22Z

frontend/src/main.js

-
-// Import Bootstrap an BootstrapVue CSS files (order is important)
-import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-
-
 //Importing scss assets needs an @/ in front of it

 import "@/assets/sass/app.scss"

+// Import Bootstrap an BootstrapVue CSS files (after app.scss, which includes bootstrap)
+import 'bootstrap-vue/dist/bootstrap-vue.css'


I've changed app.scss to import the bootstrap sass directly, so we don't need to import the pre-compiled CSS as well.

ianroberts · 2024-11-04T13:17:41Z

frontend/src/assets/sass/app.scss

+  // is equivalent to putting 'mb-4' on the option div itself.
+  @each $size, $length in $spacers {
+    @each $dir, $edge in (above:top, below:bottom) {
+      :is(.custom-checkbox, .custom-radio):has(.tw-space-#{$dir}-#{$size}) {


This makes use of the :has selector (supported since late 2022 in Chrome and relatives but only since the end of 2023 in Firefox) - I've introduced classes that you can put on an element inside the htmlLabel to influence the margins of the containing div for that option.

twinkarma

The changes looks good to me!

ianroberts requested a review from twinkarma November 3, 2024 00:47

ianroberts changed the base branch from master to dev November 3, 2024 00:49

ianroberts force-pushed the feat/html-radio-labels branch from 2240ec3 to 445cc8e Compare November 3, 2024 10:47

ianroberts marked this pull request as draft November 4, 2024 12:04

ianroberts added 8 commits November 4, 2024 13:08

docs: documentation for htmlLabel option

a84af7e

deploy: use "docker compose" instead of "docker-compose"

7f9365f

In newer docker versions, compose is a plugin to the docker command rather than a command in its own right.

build: update version specifiers to be compatible with the latest pip

6b73b93

test: use the right "docker compose" vs "docker-compose" for migratio…

489b849

…ns in e2e tests

fix: improve layout of htmlLabels with helptext

c48fb65

Use inline-flex for the checkbox/radio `<label>` so that even if the label includes something like a div with bottom margin, the helptext popup still appears beside the label rather than underneath it

feat: helper classes for option spacing

9e6cd87

Added special classes to the CSS that users can add to a span or something inside an option's htmlLabel to affect the margin above or below the option as a whole (as opposed to just above or below the label).

doc: document the spacing classes

6d7ce11

ianroberts force-pushed the feat/html-radio-labels branch from 29ef3ca to 6d7ce11 Compare November 4, 2024 13:08

ianroberts marked this pull request as ready for review November 4, 2024 13:09

ianroberts commented Nov 4, 2024

View reviewed changes

twinkarma approved these changes Nov 4, 2024

View reviewed changes

ianroberts merged commit fa7b3b0 into dev Nov 4, 2024
7 checks passed

ianroberts deleted the feat/html-radio-labels branch November 4, 2024 15:54

This was referenced Nov 4, 2024

Release 2.3.0 #415

Merged

Checkbox/Radio Grouping #404

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTML labels for radio/checkbox options #412

HTML labels for radio/checkbox options #412

ianroberts commented Nov 3, 2024 •

edited

Loading

github-actions bot commented Nov 3, 2024

ianroberts commented Nov 3, 2024

ianroberts Nov 4, 2024

ianroberts Nov 4, 2024

ianroberts Nov 4, 2024 •

edited

Loading

twinkarma left a comment

HTML labels for radio/checkbox options #412

HTML labels for radio/checkbox options #412

Conversation

ianroberts commented Nov 3, 2024 • edited Loading

Summary

Implementation

Examples

github-actions bot commented Nov 3, 2024

Jest Coverage

ianroberts commented Nov 3, 2024

ianroberts Nov 4, 2024

Choose a reason for hiding this comment

ianroberts Nov 4, 2024

Choose a reason for hiding this comment

ianroberts Nov 4, 2024 • edited Loading

Choose a reason for hiding this comment

twinkarma left a comment

Choose a reason for hiding this comment

ianroberts commented Nov 3, 2024 •

edited

Loading

ianroberts Nov 4, 2024 •

edited

Loading