feat(getSelectedImageContext): Introduce utility function

Co-authored-by: Paul Elliott <paul.elliott@kitware.com>

Author: labdala

src/Images/ColorMapIconSelector.jsx

@@ -10,6 +10,7 @@ import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
 import Tooltip from 'react-bootstrap/Tooltip'
+import getSelectedImageContext from './getSelectedImageContext'
 
 const colorMapIcons = Array.from(ColorMapPresetIcons).map(([name, icon]) => ({
   name,
@@ -24,9 +25,11 @@ function ColorMapIconSelector(props) {
     service,
     (state) => state.context.images.selectedName
   )
-  const selectedActorContext = useSelector(service, (state) =>
-    state.context.images.actorContext.get(selectedName)
+
+  const actorContext = useSelector(service, (state) =>
+    getSelectedImageContext(state)
   )
+
   const imagesLookupTableProxies = useSelector(
     service,
     (state) => state.context.images.lookupTableProxies
@@ -50,8 +53,8 @@ function ColorMapIconSelector(props) {
   }
 
   const currentColorMap = () => {
-    if (selectedActorContext) {
-      const component = selectedActorContext.selectedComponent
+    if (actorContext) {
+      const component = actorContext.selectedComponent
       const lookupTableProxies = imagesLookupTableProxies
       if (lookupTableProxies) {
         return lookupTableProxies.get(component).getPresetName()
@@ -67,7 +70,7 @@ function ColorMapIconSelector(props) {
 
   const handleChange = (colorMap) => {
     const name = selectedName
-    const componentIndex = selectedActorContext.selectedComponent
+    const componentIndex = actorContext.selectedComponent
     send({
       type: 'IMAGE_COLOR_MAP_CHANGED',
       data: { name, component: componentIndex, colorMap }

src/Images/ColorRangeInput.jsx

@@ -9,6 +9,7 @@ import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
 import Tooltip from 'react-bootstrap/Tooltip'
 import cn from 'classnames'
+import getSelectedImageContext from './getSelectedImageContext'
 
 function ColorRangeInput(props) {
   const { service } = props
@@ -52,7 +53,7 @@ function ColorRangeInput(props) {
   )
 
   const actorContext = useSelector(service, (state) =>
-    state.context.images.actorContext.get(name)
+    getSelectedImageContext(state)
   )
 
   const imageType = actorContext.image?.imageType.componentType

src/Images/LabelMapWeightWidget.jsx

@@ -3,6 +3,7 @@ import { useSelector } from '@xstate/react'
 import Form from 'react-bootstrap/Form'
 import MapWeightSelector from './MapWeightSelector'
 import '../style.css'
+import getSelectedImageContext from './getSelectedImageContext'
 
 function LabelMapWeightWidget({ service }) {
   const labelImageWeightUIGroup = useRef(null)
@@ -13,9 +14,11 @@ function LabelMapWeightWidget({ service }) {
     service,
     (state) => state.context.images.selectedName
   )
+
   const actorContext = useSelector(service, (state) =>
-    state.context.images.actorContext.get(state.context.images.selectedName)
+    getSelectedImageContext(state)
   )
+
   const labelImageWeights = useSelector(
     service,
     (state) =>

src/Images/VolumeRenderingInputs.jsx

@@ -5,22 +5,18 @@ import GradientOpacitySlider from './GradientOpacitySlider'
 import SampleDistanceSlider from './SampleDistanceSlider'
 import ShadowToggle from './ShadowToggle'
 import '../style.css'
+import getSelectedImageContext from './getSelectedImageContext'
 
 function VolumeRenderingInputs(props) {
   const { service } = props
   const volumeRow1 = useRef(null)
   const volumeRow2 = useRef(null)
-  const name = useSelector(
-    service,
-    (state) => state.context.images.selectedName
-  )
   const actorContext = useSelector(service, (state) =>
-    state.context.images.actorContext.get(name)
+    getSelectedImageContext(state)
   )
+
   const volumeMenu = useSelector(service, (state) =>
-    state.context.images.actorContext
-      .get(name)
-      .colorRanges.get(actorContext.selectedComponent)
+    actorContext.colorRanges.get(actorContext.selectedComponent)
   )
 
   const use2D = useSelector(service, (state) => state.context.use2D)

src/Images/getSelectedImageContext.js

@@ -0,0 +1,7 @@
+function getSelectedImageContext(state) {
+  return state.context.images.actorContext.get(
+    state.context.images.selectedName
+  )
+}
+
+export default getSelectedImageContext