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 `<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>`

Author: ianroberts

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",

frontend/src/components/annotation/CheckboxInput.vue

@@ -13,7 +13,8 @@
         :state="state"
         v-for="(option, idx) in options"
         >
-        {{ option.text }}
+        <span v-if="option.html" v-html="option.html"></span>
+        <span v-else>{{ option.text }}</span>
         <b-icon-question-circle v-if="option.helptext != null" :id="config.name + '__opt' + idx" class="annotation-help-prompt"></b-icon-question-circle>
         <b-tooltip v-if="option.helptext != null" :target="config.name + '__opt' + idx" :title="option.helptext"></b-tooltip>
       </b-form-checkbox>

frontend/src/components/annotation/RadioInput.vue

@@ -11,7 +11,8 @@
         :inline="config.orientation!=='vertical'"
         :name="config.name"
         >
-          {{ option.text }}
+          <span v-if="option.html" v-html="option.html"></span>
+          <span v-else>{{ option.text }}</span>
           <b-icon-question-circle v-if="option.helptext != null" :id="config.name + '__opt' + idx" class="annotation-help-prompt"></b-icon-question-circle>
           <b-tooltip v-if="option.helptext != null" :target="config.name + '__opt' + idx" :title="option.helptext"></b-tooltip>
         </b-form-radio>

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),
                     })

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: "<span style='color:green'>Positive</span>"},
+                        {value: "neutral", label: "meh..."},
+                        {value: "negative", label: "-ve", htmlLabel: "<span style='color:red'>Negative</span>"},
+                    ],
+                }]
+
+            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', () => {