Suppress debug info when not enabled

Author: colinrotherham

manage_breast_screening/assets/js/breast-diagram.js

@@ -73,13 +73,16 @@ export class BreastDiagram extends ConfigurableComponent {
     }
 
     this.$imageMap = $imageMaps[0]
-    this.$imageMap.addEventListener('click', (event) => this.onClick(event))
-    this.$imageMap.addEventListener('hover', (event) => this.debug(event))
+
+    if (!this.$imageMap.config.readOnly) {
+      this.$imageMap.addEventListener('click', (event) => this.onClick(event))
+      this.$imageMap.addEventListener('hover', (event) => this.log(event))
+    }
 
     // Render diagram features
     this.read()
     this.render()
-    this.debug()
+    this.log()
   }
 
   /**
@@ -134,9 +137,14 @@ export class BreastDiagram extends ConfigurableComponent {
    *
    * @param {CustomEvent<ImageMapPayload>} [event] - Image map event
    */
-  debug(event) {
+  log(event) {
+    const { debug } = this.config
     const { point, $path } = event?.detail ?? {}
 
+    if (!debug) {
+      return
+    }
+
     /** @type {Element | null} */
     this.$debugX = this.$debugX ?? this.$root.querySelector('.app-js-image-x')
 
@@ -152,7 +160,14 @@ export class BreastDiagram extends ConfigurableComponent {
       this.$debugInput ?? this.$root.querySelector('.app-js-image-input')
 
     const { $debugX, $debugY, $debugRegion, $debugInput } = this
-    if (!$debugX || !$debugY || !$debugRegion || !$debugInput) {
+    if (!$debugInput) {
+      return
+    }
+
+    $debugInput.textContent =
+      this.values.map(({ id }) => id).join(', ') || 'N/A'
+
+    if (!$debugX || !$debugY || !$debugRegion) {
       return
     }
 
@@ -161,9 +176,6 @@ export class BreastDiagram extends ConfigurableComponent {
 
     $debugRegion.textContent =
       $path?.querySelector('title')?.textContent ?? 'N/A'
-
-    $debugInput.textContent =
-      this.values.map(({ id }) => id).join(', ') || 'N/A'
   }
 
   /**
@@ -184,7 +196,7 @@ export class BreastDiagram extends ConfigurableComponent {
       y: point.y
     })
 
-    this.debug(event)
+    this.log(event)
   }
 
   /**
@@ -222,7 +234,7 @@ export class BreastDiagram extends ConfigurableComponent {
 
     this.render()
     this.write()
-    this.debug()
+    this.log()
   }
 
   /**

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

@@ -7,6 +7,7 @@ jest.mock('./image-map', () => {
   return {
     ImageMap: class MockImageMap extends Component {
       addEventListener() {}
+      config = { readOnly: false }
       static moduleName = 'app-image-map'
     }
   }

manage_breast_screening/assets/sass/components/_breast-diagram.scss

@@ -25,40 +25,50 @@ $state-active: nhsuk-tint(nhsuk-colour("blue"), 50%);
 
 .app-breast-diagram__svg {
   display: block;
-  pointer-events: all;
-  cursor: crosshair;
 }
 
-input[readonly] ~ .app-breast-diagram__image-map .app-breast-diagram__svg {
-  pointer-events: auto;
-  cursor: default;
+.app-breast-diagram__regions [data-active] {
+  [data-debug] & {
+    fill: $state-active;
+  }
 }
 
-.app-breast-diagram__regions path,
-.app-breast-diagram__regions polygon {
-  // Slow fade out (default)
-  transition: fill 0.3s ease-in;
-}
+.app-breast-diagram__image-map:not([data-read-only]) {
+  .app-breast-diagram__svg {
+    pointer-events: all;
+    cursor: crosshair;
+  }
 
-.app-breast-diagram__regions path:hover,
-.app-breast-diagram__regions polygon:hover,
-.app-breast-diagram__regions [data-active] {
-  // Fast fade in (on hover)
-  transition-duration: 0.05s;
-  transition-timing-function: ease-out;
-}
+  .app-breast-diagram__regions path,
+  .app-breast-diagram__regions polygon {
+    [data-debug] & {
+      // Slow fade out (default)
+      transition: fill 0.3s ease-in;
+    }
+  }
 
-.app-breast-diagram__regions path:hover,
-.app-breast-diagram__regions polygon:hover {
-  fill: $state-highlight;
-}
+  .app-breast-diagram__regions path:hover,
+  .app-breast-diagram__regions polygon:hover,
+  .app-breast-diagram__regions [data-active] {
+    [data-debug] & {
+      // Fast fade in (on hover)
+      transition-duration: 0.05s;
+      transition-timing-function: ease-out;
+    }
+  }
 
-.app-breast-diagram__regions [data-active] {
-  fill: $state-active;
-}
+  .app-breast-diagram__regions path:hover,
+  .app-breast-diagram__regions polygon:hover {
+    [data-debug] & {
+      fill: $state-highlight;
+    }
+  }
 
-.app-breast-diagram__regions [data-active]:hover {
-  fill: color.adjust(color.mix($state-active, $state-highlight, 75%), $lightness: 10%, $saturation: 25%);
+  .app-breast-diagram__regions [data-active]:hover {
+    [data-debug] & {
+      fill: color.adjust(color.mix($state-active, $state-highlight, 75%), $lightness: 10%, $saturation: 25%);
+    }
+  }
 }
 
 .app-breast-diagram__diagram {