feat: allow htmlLabel as an alternative to label for checkboxes and r…

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

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', () => {