Bbox

package.json

@@ -44,7 +44,7 @@
     "itk-image-io": "^1.0.0-b.84",
     "itk-mesh-io": "^1.0.0-b.84",
     "itk-viewer-color-maps": "^1.2.0",
-    "itk-viewer-icons": "11.13.1",
+    "itk-viewer-icons": "11.14.0",
     "itk-viewer-transfer-function-editor": "^1.2.5",
     "itk-wasm": "^1.0.0-b.83",
     "mobx": "^5.15.7",

src/Context/LayerActorContext.js

@@ -7,6 +7,9 @@ class LayerActorContext {
 
   // img element icon for the layer or null
   icon = null
+
+  // Boolean indicating whether the dataset bounding box is visible
+  bbox = false
 }
 
 export default LayerActorContext

src/Rendering/Images/createImageRenderingActor.js

@@ -532,6 +532,9 @@ const eventResponses = {
   ANIMATE_IMAGE_MIX: {
     actions: applyAnimateImageMix,
   },
+  TOGGLE_LAYER_BBOX: {
+    actions: 'toggleLayerBBox',
+  },
 }
 
 const CHANGE_BOUNDS_EVENTS = [

src/Rendering/Images/createImagesRenderingMachine.js

@@ -164,6 +164,7 @@ function createImagesRenderingMachine(options, context) {
                 'WINDOW_LEVEL_TOGGLED',
                 'IMAGE_COLOR_RANGE_RESET',
                 'ANIMATE_IMAGE_MIX',
+                'TOGGLE_LAYER_BBOX',
               ],
               { actions: forwardToNamedActor }
             ),

src/Rendering/VTKJS/Images/applyRenderedImage.js

@@ -393,6 +393,18 @@ function applyRenderedImage(context, { data: { name } }) {
 
   // call after representations are created
   updateCroppingParametersFromImage(context, actorContext.fusedImage)
+  if (actorContext.image) {
+    context.itkVtkView.updateLabelBoundingBox(
+      name,
+      actorContext.image.getWorldBounds(actorContext.loadedScale)
+    )
+  }
+  if (actorContext.labelImage) {
+    context.itkVtkView.updateLabelBoundingBox(
+      actorContext.labelImageName,
+      actorContext.labelImage.getWorldBounds(actorContext.loadedScale)
+    )
+  }
 
   const loadedImage = actorContext.image ?? actorContext.labelImage
   const hasOneScale = loadedImage.scaleInfo.length === 1

src/Rendering/VTKJS/Images/imagesRenderingMachineOptions.js

@@ -1,5 +1,6 @@
 import createImageRenderer from './createImageRenderer'
 import toggleLayerVisibility from './toggleLayerVisibility'
+import toggleLayerBBox from './toggleLayerBBox'
 import applyComponentVisibility from './applyComponentVisibility'
 import updateRenderedImage from './updateRenderedImage'
 import updateHistogram from './updateHistogram'
@@ -98,6 +99,8 @@ const imagesRenderingMachineOptions = {
       applyLabelImageWeights,
       applySelectedLabel,
       applyCinematicChanged,
+
+      toggleLayerBBox,
     },
 
     guards: {

src/Rendering/VTKJS/Images/toggleLayerBBox.js

@@ -0,0 +1,9 @@
+function toggleLayerBBox(context, event) {
+  const name = event.data.layerName
+  const actorContext = context.layers.actorContext.get(name)
+  actorContext.bbox = !actorContext.bbox
+  context.itkVtkView.setEnableBBox(name, actorContext.bbox)
+  context.service.send('RENDER')
+}
+
+export default toggleLayerBBox

src/Rendering/VTKJS/vtk/ItkVtkViewProxy.js

@@ -9,9 +9,11 @@ import vtkCoordinate from 'vtk.js/Sources/Rendering/Core/Coordinate'
 import vtkPolyData from 'vtk.js/Sources/Common/DataModel/PolyData'
 import vtkBoundingBox from 'vtk.js/Sources/Common/DataModel/BoundingBox'
 import vtkAxesLabelsWidget from './AxesLabelsWidget'
-import WidgetManagerPickWhileAnimating from './WidgetManagerPickWhileAnimating'
 
+import WidgetManagerPickWhileAnimating from './WidgetManagerPickWhileAnimating'
 import vtkSliceOutlineFilter from './SliceOutlineFilter'
+import vtkPoints from 'vtk.js/Sources/Common/Core/Points'
+import vtkCellArray from 'vtk.js/Sources/Common/Core/CellArray'
 
 export const VOLUME_DIFFUSE_DEFAULT = 1.0
 export const VOLUME_AMBIENT_DEFAULT = 0.4
@@ -702,6 +704,8 @@ function ItkVtkViewProxy(publicAPI, model) {
   model.axesCircleRadius = 4
   model.axesTextOffset = 14
 
+  model.layerBBoxes = new Map()
+
   // API ----------------------------------------------------------------------
   publicAPI.updateDataProbeSize = updateDataProbeSize
   publicAPI.updateScaleBar = updateScaleBar
@@ -946,6 +950,13 @@ function ItkVtkViewProxy(publicAPI, model) {
     }
   }
 
+  publicAPI.setEnableBBox = (name, enable) => {
+    const data = model.layerBBoxes.get(name)
+    if (data.actor.getVisibility() !== enable) {
+      data.actor.setVisibility(enable)
+    }
+  }
+
   const superAddRepresentation = publicAPI.addRepresentation
   publicAPI.addRepresentation = representation => {
     superAddRepresentation(representation)
@@ -1058,6 +1069,46 @@ function ItkVtkViewProxy(publicAPI, model) {
     model.interactorStyle3D.setCenterOfRotation(model.camera.getFocalPoint())
     publicAPI.renderLater()
   }
+
+  publicAPI.createLayerBoundingBox = name => {
+    const labelBBoxPolyData = vtkPolyData.newInstance()
+    const labelBBoxMapper = vtkMapper.newInstance()
+    labelBBoxMapper.setInputData(labelBBoxPolyData)
+    const labelBBoxGridActor = vtkActor.newInstance()
+    labelBBoxGridActor.setMapper(labelBBoxMapper)
+    labelBBoxGridActor.getProperty().setColor([1.0, 0.0, 0.0])
+    labelBBoxGridActor.setVisibility(false)
+    const data = {
+      polyData: labelBBoxPolyData,
+      actor: labelBBoxGridActor,
+    }
+    model.layerBBoxes.set(name, data)
+    model.renderer.addActor(data.actor)
+  }
+
+  publicAPI.updateLabelBoundingBox = (name, bounds) => {
+    if (!model.layerBBoxes.has(name)) {
+      publicAPI.createLayerBoundingBox(name)
+    }
+
+    const data = model.layerBBoxes.get(name)
+    let points = vtkPoints.newInstance()
+    for (let i = 0; i < 2; i++) {
+      for (let j = 2; j < 4; j++) {
+        for (let k = 4; k < 6; k++) {
+          points.insertNextPoint(bounds[i], bounds[j], bounds[k])
+        }
+      }
+    }
+    data.polyData.setPoints(points)
+
+    let lines = vtkCellArray.newInstance()
+    lines.insertNextCell([0, 1, 3, 2, 0])
+    lines.insertNextCell([4, 5, 7, 6, 4])
+    lines.insertNextCell([0, 4, 6, 2])
+    lines.insertNextCell([1, 5, 7, 3])
+    data.polyData.setLines(lines)
+  }
 }
 
 // ----------------------------------------------------------------------------

src/Rendering/createRenderingMachine.js

@@ -263,6 +263,9 @@ const createRenderingMachine = (options, context) => {
             IMAGE_COLOR_RANGE_RESET: {
               actions: forwardTo('images'),
             },
+            TOGGLE_LAYER_BBOX: {
+              actions: forwardTo('images'),
+            },
           },
         },
       },

src/UI/Layers/createLayersUIMachine.js

@@ -30,6 +30,7 @@ function spawnLayerRenderingActor(options) {
           const actorContext =
             layers.actorContext.get(name) ?? new LayerActorContext()
           actorContext.type = 'image'
+          actorContext.bbox = false
           layers.actorContext.set(name, actorContext)
           layers.lastAddedData = { name, data: event.data }
           layers.layerUIActors.set(
@@ -53,6 +54,7 @@ function spawnLayerRenderingActor(options) {
           const actorContext =
             layers.actorContext.get(name) ?? new LayerActorContext()
           actorContext.type = 'labelImage'
+          actorContext.bbox = false
           layers.actorContext.set(name, actorContext)
           layers.lastAddedData = { name, data: event.data }
           layers.layerUIActors.set(

src/UI/reference-ui/package.json

@@ -44,7 +44,7 @@
     "@lit-labs/context": "^0.2.0",
     "@material/web": "^1.0.0-pre.4",
     "itk-viewer-color-maps": "^1.2.0",
-    "itk-viewer-icons": "^11.13.1",
+    "itk-viewer-icons": "^11.14.0",
     "itk-viewer-transfer-function-editor": "^1.2.5",
     "lit": "^2.4.0",
     "xstate-lit": "^1.3.1"

src/UI/reference-ui/src/Layers/createLayerInterface.js

@@ -1,7 +1,11 @@
 import style from '../ItkVtkViewer.module.css'
 
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
-import { visibleIconDataUri, invisibleIconDataUri } from 'itk-viewer-icons'
+import {
+  visibleIconDataUri,
+  invisibleIconDataUri,
+  boundingBoxIconDataUri,
+} from 'itk-viewer-icons'
 import { makeHtml } from '../utils'
 import './layerIcon.js'
 
@@ -58,6 +62,7 @@ function createLayerEntry(context, name, layer) {
   layerEntry.appendChild(layerLabel)
 
   const imageIcons = document.createElement('div')
+  imageIcons.style.display = 'flex'
   imageIcons.setAttribute('class', `${style.iconGroup}`)
   layerEntry.appendChild(imageIcons)
 
@@ -68,6 +73,31 @@ function createLayerEntry(context, name, layer) {
 
   layer.spinner = spinner
 
+  const layerBBoxButton = document.createElement('div')
+  layerBBoxButton.innerHTML = `<input id="${context.id}-layerBBoxButton" type="checkbox" class="${style.toggleInput}"><label itk-vtk-tooltip itk-vtk-tooltip-left itk-vtk-tooltip-content="Label BBox" class="${style.toggleButton}" for="${context.id}-layerBBoxButton"><img src="${boundingBoxIconDataUri}" alt="bbox"/></label>`
+  const layerBBoxButtonInput = layerBBoxButton.children[0]
+  const layerBBoxLabel = layerBBoxButton.children[1]
+  layerBBoxButton.style.height = '23px'
+  applyContrastSensitiveStyleToElement(
+    context,
+    'invertibleButton',
+    layerBBoxLabel
+  )
+  imageIcons.appendChild(layerBBoxButton)
+  layerBBoxButton.addEventListener('click', event => {
+    event.preventDefault()
+    event.stopPropagation()
+    context.service.send({
+      type: 'TOGGLE_LAYER_BBOX',
+      data: {
+        name: context.images.selectedName,
+        layerName: name,
+      },
+    })
+    const actorContext = context.layers.actorContext.get(name)
+    layerBBoxButtonInput.checked = actorContext.bbox
+  })
+
   const icon = makeHtml(`<layer-icon class="${style.layerIcon}"></layer-icon>`)
   icon.layer = layer
   icon.name = name

src/createViewer.js

@@ -883,10 +883,16 @@ const createViewer = async (
 
     const imageName =
       layerImageName ?? context.images.selectedName ?? multiscaleLabelImage.name
-    service.send({
-      type: 'ADD_LABEL_IMAGE',
-      data: { imageName, labelImage: multiscaleLabelImage },
-    })
+    const actorContext = context.images.actorContext.get(imageName)
+    if (actorContext?.labelImageName === multiscaleLabelImage.name) {
+      actorContext.labelImage = multiscaleLabelImage
+      service.send({ type: 'LABEL_IMAGE_ASSIGNED', data: imageName })
+    } else {
+      service.send({
+        type: 'ADD_LABEL_IMAGE',
+        data: { imageName, labelImage: multiscaleLabelImage },
+      })
+    }
     publicAPI.setImageInterpolationEnabled(false, imageName)
   })
 

src/createViewerMachine.js

@@ -359,6 +359,9 @@ const createViewerMachine = (options, context, eventEmitterCallback) => {
             IMAGE_COLOR_RANGE_RESET: {
               actions: [forwardTo('ui'), forwardTo('rendering')],
             },
+            TOGGLE_LAYER_BBOX: {
+              actions: [forwardTo('ui'), forwardTo('rendering')],
+            },
           },
         },
       },