Merge pull request #1227 from NHSDigital/DTOSS-12519-render-breast-features-on-check-info

Render breast features on check information page

Author: MatMoore

manage_breast_screening/assets/js/breast-diagram.js

@@ -106,9 +106,9 @@ export class BreastDiagram extends ConfigurableComponent {
   render() {
     const { $imageMap, markers, values } = this
 
-    values.forEach(({ id, x, y }, index) => {
-      const $path = $imageMap.getPathById(id)
-      const point = $imageMap.createPoint(x, y, id)
+    values.forEach(({ region_id, x, y }, index) => {
+      const $path = $imageMap.getPathById(region_id)
+      const point = $imageMap.createPoint(x, y, region_id)
 
       // Render active region
       $imageMap.setState('active', $path)
@@ -180,7 +180,7 @@ export class BreastDiagram extends ConfigurableComponent {
     }
 
     $debugInput.textContent =
-      this.values.map(({ id }) => id).join(', ') || 'N/A'
+      this.values.map(({ region_id }) => region_id).join(', ') || 'N/A'
 
     if (!$debugX || !$debugY || !$debugRegion) {
       return
@@ -205,8 +205,8 @@ export class BreastDiagram extends ConfigurableComponent {
     }
 
     this.add({
-      id: $path.classList.value,
-      name: 'Pending',
+      id: 'pending',
+      region_id: $path.classList.value,
       x: point.x,
       y: point.y
     })
@@ -242,7 +242,7 @@ export class BreastDiagram extends ConfigurableComponent {
     }
 
     const index = values.indexOf(entry)
-    const $path = $imageMap.getPathById(entry.id)
+    const $path = $imageMap.getPathById(entry.region_id)
 
     $imageMap.setState('active', $path, false)
     values.splice(index, 1)
@@ -343,10 +343,12 @@ function isValidObject(value) {
     return false
   }
 
+  const keys = new Set(['id', 'region_id', 'x', 'y'])
+
   return (
-    Object.keys(value).every((key) => ['id', 'name', 'x', 'y'].includes(key)) &&
+    Object.keys(value).every((key) => keys.has(key)) &&
     typeof value.id === 'string' &&
-    typeof value.name === 'string' &&
+    typeof value.region_id === 'string' &&
     typeof value.x === 'number' &&
     typeof value.y === 'number'
   )
@@ -378,8 +380,8 @@ function isValid(value) {
  * Breast feature input value
  *
  * @typedef {object} BreastFeature
- * @property {string} id - Image map region ID
- * @property {string} name - Breast feature name
+ * @property {string} id - Breast feature ID
+ * @property {string} region_id - Image map region ID
  * @property {number} x - X coordinate of breast feature
  * @property {number} y - Y coordinate of breast feature
  */

manage_breast_screening/assets/js/breast-diagram.test.js

@@ -21,8 +21,8 @@ jest.mock('./image-map', () => {
  * @type {DOMPoint}
  */
 const dummyPoint = {
-  x: 0,
-  y: 0,
+  x: 133,
+  y: 82,
   w: null,
   z: null,
   matrixTransform: jest.fn(),
@@ -35,8 +35,8 @@ const dummyPoint = {
  * @type {BreastFeature}
  */
 const dummyFeature = {
-  id: 'abc',
-  name: 'Pending',
+  id: 'pending',
+  region_id: 'right_upper_outer',
   x: dummyPoint.x,
   y: dummyPoint.y
 }
@@ -58,7 +58,7 @@ describe('Breast diagram', () => {
 
   const diagramWithAFeatureMarked = `
     <form>
-      <input name="features" type="hidden" value='[{"x": 0, "y": 0, "name": "Pending", "id": "abc"}]'>
+      <input name="features" type="hidden" value='[{"id": "pending", "region_id": "right_upper_outer", "x": 133, "y": 82}]'>
       <div data-module="app-breast-diagram">
         <div data-module="app-image-map"></div>
       </div>
@@ -105,7 +105,7 @@ describe('Breast diagram', () => {
     component.write()
 
     expect(component.$input.value).toBe(
-      '[{"x":0,"y":0,"name":"Pending","id":"abc"}]'
+      '[{"id":"pending","region_id":"right_upper_outer","x":133,"y":82}]'
     )
   })
 })

manage_breast_screening/core/jinja2/components/breast-diagram/template.jinja

@@ -1,4 +1,5 @@
 {% from "nhsuk/macros/attributes.jinja" import nhsukAttributes -%}
+{% from "nhsuk/components/summary-list/macro.jinja" import summaryList %}
 
 <div {{- nhsukAttributes({
   "class": "app-breast-diagram",

manage_breast_screening/data/east_tester_one_week_ago_clinic_data.yml

@@ -595,6 +595,16 @@ clinic:
             exact_date: '2025-01-17'
             date_type: EXACT
             created_at: '2019-12-10'
+        breast_features:
+          annotations_json:
+            [
+              {
+                'id': 'scar',
+                'region_id': 'left_axilla',
+                'x': 711.7478637695312,
+                'y': 53.868194580078125
+              }
+            ]
     - id: bce8bbbe-0a1c-41d0-b1dc-2512b401a7e8
       duration_in_minutes: 8
       starts_at_time: '11:32'

manage_breast_screening/data/west_tester_three_years_ago_clinic_data.yml

@@ -574,6 +574,16 @@ clinic:
             location_details: In the radiology department
             exact_date: '2025-07-25'
             date_type: EXACT
+        breast_features:
+          annotations_json:
+            [
+              {
+                'id': 'scar',
+                'region_id': 'left_axilla',
+                'x': 711.7478637695312,
+                'y': 53.868194580078125
+              }
+            ]
     - id: 6de03637-f52c-48dc-a793-18169b5882bd
       duration_in_minutes: 8
       starts_at_time: '12:56'

manage_breast_screening/data/west_tester_today_clinic_data.yml

@@ -580,6 +580,17 @@ clinic:
             exact_date: '2025-01-17'
             date_type: EXACT
             created_at: '2020-04-03'
+        breast_features:
+          annotations_json:
+            [
+              {
+                'id': 'mole',
+                'region_id': 'right_central',
+                'x': 237.82235717773438,
+                'y': 193.69627380371094
+              }
+            ]
+
     - id: 989966b5-a4d8-4a31-8a38-7407d8df2e71
       duration_in_minutes: 8
       starts_at_time: '11:32'
@@ -636,6 +647,16 @@ clinic:
             location_details: In the radiology department
             exact_date: '2025-07-25'
             date_type: EXACT
+        breast_features:
+          annotations_json:
+            [
+              {
+                'id': 'scar',
+                'region_id': 'left_axilla',
+                'x': 711.7478637695312,
+                'y': 53.868194580078125
+              }
+            ]
     - id: c09d8676-953d-4643-8cf7-ebb7328e4bae
       duration_in_minutes: 8
       starts_at_time: '11:48'

manage_breast_screening/mammograms/forms/breast_feature_form.py

@@ -20,11 +20,11 @@ class BreastFeatureForm(Form):
             "type": "object",
             "properties": {
                 "id": {"type": "string"},
-                "name": {"type": "string"},
+                "region_id": {"type": "string"},
                 "x": {"type": "number"},
                 "y": {"type": "number"},
             },
-            "required": ["id", "name", "x", "y"],
+            "required": ["id", "region_id", "x", "y"],
             "additionalProperties": False,
         },
     }
@@ -55,6 +55,18 @@ def clean_features(self):
                 code="invalid",
             )
 
+        for feature in data:
+            if feature["id"] not in BreastFeatureAnnotation.FeatureType:
+                if feature["id"] == "pending":
+                    # Temporarily allow.
+                    # Remove this once the breast diagram component is fully complete.
+                    pass
+                else:
+                    raise ValidationError(
+                        message="Select a feature type",
+                        code="invalid",
+                    )
+
         return data
 
 

manage_breast_screening/mammograms/jinja2/mammograms/check_information/medical_information_card.jinja

@@ -35,6 +35,11 @@
           "value" : { "html": medical_history(presented_medical_information.symptoms, 'No symptoms recorded') },
           "actions": presented_medical_information.symptoms_action
         },
+        {
+          "key": { "text": "Breast features" },
+          "value" : { "html": medical_history(presented_medical_information.breast_features, 'No breast features recorded') },
+          "actions": presented_medical_information.breast_features_action
+        },
         {
           "key": { "text": "Other relevant information" },
           "value" : { "html": medical_history(presented_medical_information.other_relevant_information, 'No other information added') },

manage_breast_screening/mammograms/jinja2/mammograms/medical_information/breast_features/form.jinja

@@ -1,9 +1,6 @@
 {% extends "layout-app.jinja" %}
 
 {% from "nhsuk/components/button/macro.jinja" import button %}
-{% from "nhsuk/components/card/macro.jinja" import card %}
-{% from "nhsuk/components/input/macro.jinja" import input %}
-{% from "nhsuk/components/summary-list/macro.jinja" import summaryList %}
 {% from "nhsuk/macros/attributes.jinja" import nhsukAttributes %}
 {% from "django_form_helpers.jinja" import form_error_summary %}
 

manage_breast_screening/mammograms/jinja2/mammograms/medical_information/section_cards.jinja

@@ -112,7 +112,7 @@
   {% endif %}
 {% endmacro %}
 
-{% macro breast_features_content(presented_medical_info, read_only=false) %}
+{% macro breast_features_content(presented_medical_info, read_only=false, debug=false) %}
   <p>Non-surgical scars, moles and other features that may appear on mammogram images</p>
   {% if presented_medical_info.breast_features %}
     {% set count = presented_medical_info.breast_features.feature_count %}
@@ -123,6 +123,7 @@
         <div class="nhsuk-grid-column-two-thirds">
           {{ app_breast_diagram({
             "read_only": true,
+            "debug": debug,
             "text": count ~ " breast " ~ "feature" | plural(count) ~ " recorded",
             "version": presented_medical_info.breast_features.diagram_version
           }) }}