From f1c86b4bf4da4d47d7617b8ab6520c5b7815cc84 Mon Sep 17 00:00:00 2001 From: Ian Roberts Date: Sun, 3 Nov 2024 00:05:43 +0000 Subject: [PATCH 01/12] feat: allow htmlLabel as an alternative to label for checkboxes and radios 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 `Negative` - adding emphasis to particular parts of the label `Reasonably confident` - adding margin to the bottom of an option to separate groups of related choices `
Last option in this group
` --- frontend/src/components/JsonEditor.vue | 6 +++++- .../components/annotation/CheckboxInput.vue | 3 ++- .../src/components/annotation/RadioInput.vue | 3 ++- frontend/src/utils/annotations.js | 1 + .../tests/component/AnnotationRenderer.cy.js | 21 +++++++++++++++++++ 5 files changed, 31 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/JsonEditor.vue b/frontend/src/components/JsonEditor.vue index 809ed73a..e3b066c2 100644 --- a/frontend/src/components/JsonEditor.vue +++ b/frontend/src/components/JsonEditor.vue @@ -100,6 +100,7 @@ export default { "type:": "object", "properties": { "label": {"type": "string"}, + "htmlLabel": {"type": "string"}, "value": { "anyOf": [ {"type": "string"}, @@ -108,7 +109,10 @@ export default { ] } }, - "required": ["label", "value"] + "oneOf":[ + {"required": ["label", "value"]}, + {"required": ["htmlLabel", "value"]} + ] }, { "type": "object", diff --git a/frontend/src/components/annotation/CheckboxInput.vue b/frontend/src/components/annotation/CheckboxInput.vue index 75cf2c41..b520af67 100644 --- a/frontend/src/components/annotation/CheckboxInput.vue +++ b/frontend/src/components/annotation/CheckboxInput.vue @@ -13,7 +13,8 @@ :state="state" v-for="(option, idx) in options" > - {{ option.text }} + + {{ option.text }} diff --git a/frontend/src/components/annotation/RadioInput.vue b/frontend/src/components/annotation/RadioInput.vue index bed7dc23..bbcb6b81 100644 --- a/frontend/src/components/annotation/RadioInput.vue +++ b/frontend/src/components/annotation/RadioInput.vue @@ -11,7 +11,8 @@ :inline="config.orientation!=='vertical'" :name="config.name" > - {{ option.text }} + + {{ option.text }} diff --git a/frontend/src/utils/annotations.js b/frontend/src/utils/annotations.js index 10176d26..e42fde51 100644 --- a/frontend/src/utils/annotations.js +++ b/frontend/src/utils/annotations.js @@ -67,6 +67,7 @@ export function generateBVOptions(options, document) { } else if ("value" in option) { optionsList.push({ value: option.value, + html: ("htmlLabel" in option ? option.htmlLabel : null), text: ("label" in option ? option.label : option.value), helptext: ("helptext" in option ? option.helptext : null), }) diff --git a/frontend/tests/component/AnnotationRenderer.cy.js b/frontend/tests/component/AnnotationRenderer.cy.js index 4294d357..6e5b54a3 100644 --- a/frontend/tests/component/AnnotationRenderer.cy.js +++ b/frontend/tests/component/AnnotationRenderer.cy.js @@ -244,6 +244,27 @@ describe("AnnotationRenderer", () => { }) + it("htmlLabel wins over label if both are provided", () => { + const annotationComps = [ + { + name: "sentiment", + type: "checkbox", + options: [ + {value: "positive", label: "+ve", htmlLabel: "Positive"}, + {value: "neutral", label: "meh..."}, + {value: "negative", label: "-ve", htmlLabel: "Negative"}, + ], + }] + + cy.mount(AnnotationRenderer, {propsData: {config: annotationComps}}) + + // the HTML label for (i.e. next sibling of) the positive option should be visible. + cy.get("[name='sentiment'][value='positive'] + label").contains("Positive").should("exist") + // but the text label should not + cy.get("[name='sentiment'][value='positive'] + label").contains("+ve").should("not.exist") + + }) + }) it('Test dynamic options fromDocument', () => { From a84af7efd88a178c535bef5e2bd010fab7ab00ba Mon Sep 17 00:00:00 2001 From: Ian Roberts Date: Sun, 3 Nov 2024 00:31:40 +0000 Subject: [PATCH 02/12] docs: documentation for htmlLabel option --- .../docs/manageradminguide/config_examples.js | 12 +++++++ docs/docs/manageradminguide/project_config.md | 32 +++++++++++++++++++ 2 files changed, 44 insertions(+) diff --git a/docs/docs/manageradminguide/config_examples.js b/docs/docs/manageradminguide/config_examples.js index d6e40454..1b88630f 100644 --- a/docs/docs/manageradminguide/config_examples.js +++ b/docs/docs/manageradminguide/config_examples.js @@ -145,6 +145,18 @@ export default { "valError": "Error message when field fails is validation" //Optional } ], + configHtmlLabels: [ + { + "name": "sentiment", + "type": "checkbox", + "title": "Sentiment", + "options": [ + {"value": "positive", "htmlLabel": "Positive"}, + {"value": "neutral", "htmlLabel": "Neutral or uncertain"}, + {"value": "positive", "htmlLabel": "Negative"} + ] + }, + ], configSelector: [ { "name": "mylabel", diff --git a/docs/docs/manageradminguide/project_config.md b/docs/docs/manageradminguide/project_config.md index d3d4ea3d..e89df6dc 100644 --- a/docs/docs/manageradminguide/project_config.md +++ b/docs/docs/manageradminguide/project_config.md @@ -348,6 +348,38 @@ If your documents are plain text and include line breaks that need to be preserv +### Richer labels for radios & checkboxes + +The `label` of radio and checkbox inputs is normally plain text, however both input types support an `htmlLabel` property as an alternative to `label`, which allows for HTML tags within the option label. The `htmlLabel` is rendered within a `` inside the `