feat(LayerEntry): add save roi button

package.json

@@ -25,7 +25,7 @@
     "classnames": "^2.3.1",
     "husky": "^7.0.4",
     "itk-viewer-color-maps": "^1.2.0",
-    "itk-viewer-icons": "^11.14.0",
+    "@itk-viewer/icons": "^11.14.1",
     "itk-viewer-transfer-function-editor": "^1.2.2",
     "prettier": "^2.5.0",
     "pydata_sphinx_theme": "github:pydata/pydata-sphinx-theme#2d9c495",

src/AppToolbar.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { toggleIconDataUri } from 'itk-viewer-icons'
+import { toggleIconDataUri } from '@itk-viewer/icons'
 import toggleUICollapsed from './toggleUICollapsed'
 import Button from 'react-bootstrap/Button'
 import Image from 'react-bootstrap/Image'

src/Images/BlendModeSelector.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 import { useSelector } from '@xstate/react'
-import { blendModeIconDataUri } from 'itk-viewer-icons'
+import { blendModeIconDataUri } from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 import Image from 'react-bootstrap/Image'
 import Form from 'react-bootstrap/Form'

src/Images/CinematicParameters.jsx

@@ -3,7 +3,7 @@ import { useSelector } from '@xstate/react'
 import getSelectedImageContext from './getSelectedImageContext'
 import Form from 'react-bootstrap/Form'
 import { Image, OverlayTrigger, Tooltip } from 'react-bootstrap'
-import { volumeScatteringIconDataUri } from 'itk-viewer-icons'
+import { volumeScatteringIconDataUri } from '@itk-viewer/icons'
 
 function CinematicParameters({ service }) {
   const scatteringBlend = useSelector(service, (state) => {

src/Images/ColorRangeInput.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useSelector } from '@xstate/react'
-import { interpolationIconDataUri } from 'itk-viewer-icons'
+import { interpolationIconDataUri } from '@itk-viewer/icons'
 import ColorMapIconSelector from './ColorMapIconSelector'
 import WindowLevelReset from './WindowLevelReset'
 import '../style.css'

src/Images/GradientOpacitySlider.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useSelector } from '@xstate/react'
-import { gradientIconDataUri } from 'itk-viewer-icons'
+import { gradientIconDataUri } from '@itk-viewer/icons'
 import Button from 'react-bootstrap/Button'
 import Form from 'react-bootstrap/Form'
 import Image from 'react-bootstrap/Image'

src/Images/LabelImageColorWidget.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import { useSelector } from '@xstate/react'
 import CategoricalIconSelector from './CategoricalIconSelector'
-import { opacityIconDataUri } from 'itk-viewer-icons'
+import { opacityIconDataUri } from '@itk-viewer/icons'
 import Form from 'react-bootstrap/Form'
 import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'

src/Images/SampleDistanceSlider.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 import { useSelector } from '@xstate/react'
-import { sampleDistanceIconDataUri } from 'itk-viewer-icons'
+import { sampleDistanceIconDataUri } from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 import '../style.css'
 import Form from 'react-bootstrap/Form'

src/Images/ScaleSelector.jsx

@@ -3,7 +3,7 @@ import { useSelector } from '@xstate/react'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
 import Tooltip from 'react-bootstrap/Tooltip'
 import Image from 'react-bootstrap/Image'
-import { scaleSelectIconDataUri } from 'itk-viewer-icons'
+import { scaleSelectIconDataUri } from '@itk-viewer/icons'
 import { Form } from 'react-bootstrap'
 import getSelectedImageContext from './getSelectedImageContext'
 

src/Images/ShadowToggle.jsx

@@ -5,7 +5,7 @@ import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
 import Tooltip from 'react-bootstrap/Tooltip'
 import cn from 'classnames'
-import { shadowIconDataUri } from 'itk-viewer-icons'
+import { shadowIconDataUri } from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 import '../style.css'
 

src/Images/WindowLevelReset.jsx

@@ -4,7 +4,7 @@ import Button from 'react-bootstrap/Button'
 import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
 import Tooltip from 'react-bootstrap/Tooltip'
-import { resetImageIconDataUri } from 'itk-viewer-icons'
+import { resetImageIconDataUri } from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 import '../style.css'
 
@@ -27,8 +27,8 @@ function WindowLevelReset(props) {
     send({
       type: 'IMAGE_COLOR_RANGE_RESET',
       data: {
-        name: stateContext.images.selectedName,
-      },
+        name: stateContext.images.selectedName
+      }
     })
   }
 

src/Images/WindowLevelToggle.jsx

@@ -5,7 +5,7 @@ import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
 import Tooltip from 'react-bootstrap/Tooltip'
 import cn from 'classnames'
-import { windowingIconDataUri } from 'itk-viewer-icons'
+import { windowingIconDataUri } from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 import '../style.css'
 import getSelectedImageContext from './getSelectedImageContext'
@@ -34,16 +34,17 @@ function WindowLevelToggle(props) {
       'invertibleButton',
       toggleWindowingButton.current
     )
-    stateContext.images.toggleWindowingButtonInput = toggleWindowingButton.current
+    stateContext.images.toggleWindowingButtonInput =
+      toggleWindowingButton.current
   }, [])
 
   const toggleWindowing = () => {
     send({
       type: 'WINDOW_LEVEL_TOGGLED',
       data: {
         name,
-        component: actorContext.selectedComponent,
-      },
+        component: actorContext.selectedComponent
+      }
     })
   }
 

src/Layers/CompareControls.jsx

@@ -7,7 +7,7 @@ import {
   rotateIconDataUri,
   playIconDataUri,
   pauseIconDataUri
-} from 'itk-viewer-icons'
+} from '@itk-viewer/icons'
 
 const xyz = ['X', 'Y', 'Z']
 

src/Layers/LayerEntry.jsx

@@ -10,8 +10,9 @@ import {
   imageIconDataUri,
   labelsIconDataUri,
   toggleIconDataUri,
-  boundingBoxIconDataUri
-} from 'itk-viewer-icons'
+  boundingBoxIconDataUri,
+  downloadIconDataUri
+} from '@itk-viewer/icons'
 import '../style.css'
 import { Button, Dropdown } from 'react-bootstrap'
 import cn from 'classnames'
@@ -161,6 +162,11 @@ function LayerEntry({ service, name, actor, fillRow }) {
     service,
     (state) => state.context.images.selectedName
   )
+  const showSaveRoiButton = useSelector(
+    service,
+    (state) => state.context.layers.showSaveRoiButton
+  )
+
   const layerEntry = useRef(null)
 
   useEffect(() => {
@@ -212,8 +218,35 @@ function LayerEntry({ service, name, actor, fillRow }) {
         </Button>
       </OverlayTrigger>
       <div className="layerLabelCommon"> {name} </div>
+
       <div className="layerIconGroup">
         <Spinner name={name} service={service} />
+
+        {showSaveRoiButton && (
+          <OverlayTrigger
+            transition={false}
+            overlay={<Tooltip>{'Save Image'}</Tooltip>}
+          >
+            <Button
+              onClick={() => {
+                send({
+                  type: 'DOWNLOAD_IMAGE',
+                  data: {
+                    name: selectedName,
+                    layerName: name
+                  }
+                })
+              }}
+              variant="secondary"
+              className={cn(`icon-button`, {
+                checked: actorContext.bbox
+              })}
+            >
+              <Image src={downloadIconDataUri}></Image>
+            </Button>
+          </OverlayTrigger>
+        )}
+
         <OverlayTrigger
           transition={false}
           overlay={<Tooltip>{BOUNDING_BOX_TEXT}</Tooltip>}

src/Main/AnnotationsButton.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useSelector } from '@xstate/react'
-import { annotationsIconDataUri } from 'itk-viewer-icons'
+import { annotationsIconDataUri } from '@itk-viewer/icons'
 import Button from 'react-bootstrap/Button'
 import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'

src/Main/AxesButton.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useSelector } from '@xstate/react'
-import { axesIconDataUri } from 'itk-viewer-icons'
+import { axesIconDataUri } from '@itk-viewer/icons'
 import Button from 'react-bootstrap/Button'
 import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'

src/Main/BackgroundColorButton.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useSelector } from '@xstate/react'
-import { selectColorIconDataUri } from 'itk-viewer-icons'
+import { selectColorIconDataUri } from '@itk-viewer/icons'
 import Button from 'react-bootstrap/Button'
 import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'

src/Main/CroppingPlanesReset.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { resetCropIconDataUri } from 'itk-viewer-icons'
+import { resetCropIconDataUri } from '@itk-viewer/icons'
 import Button from 'react-bootstrap/Button'
 import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'

src/Main/CroppingPlanesToggle.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useSelector } from '@xstate/react'
-import { cropIconDataUri } from 'itk-viewer-icons'
+import { cropIconDataUri } from '@itk-viewer/icons'
 import Button from 'react-bootstrap/Button'
 import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'

src/Main/FullscreenButton.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useSelector } from '@xstate/react'
-import { fullscreenIconDataUri } from 'itk-viewer-icons'
+import { fullscreenIconDataUri } from '@itk-viewer/icons'
 import Button from 'react-bootstrap/Button'
 import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'

src/Main/PlaneSliders.jsx

@@ -5,7 +5,7 @@ import {
   invisibleIconDataUri,
   pauseIconDataUri,
   playIconDataUri
-} from 'itk-viewer-icons'
+} from '@itk-viewer/icons'
 import Button from 'react-bootstrap/Button'
 import Form from 'react-bootstrap/Form'
 import Image from 'react-bootstrap/Image'

src/Main/ResetCameraButton.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { resetCameraIconDataUri } from 'itk-viewer-icons'
+import { resetCameraIconDataUri } from '@itk-viewer/icons'
 import Button from 'react-bootstrap/Button'
 import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'

src/Main/RotateButton.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useSelector } from '@xstate/react'
-import { rotateIconDataUri } from 'itk-viewer-icons'
+import { rotateIconDataUri } from '@itk-viewer/icons'
 import Button from 'react-bootstrap/Button'
 import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'

src/Main/ScreenshotButton.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { screenshotIconDataUri } from 'itk-viewer-icons'
+import { screenshotIconDataUri } from '@itk-viewer/icons'
 import Button from 'react-bootstrap/Button'
 import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'

src/Main/ViewModeButtons.jsx

@@ -5,7 +5,7 @@ import {
   redPlaneIconDataUri,
   yellowPlaneIconDataUri,
   greenPlaneIconDataUri
-} from 'itk-viewer-icons'
+} from '@itk-viewer/icons'
 import Button from 'react-bootstrap/Button'
 import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'

src/Main/ViewPlanesToggle.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useSelector } from '@xstate/react'
-import { viewPlanesIconDataUri } from 'itk-viewer-icons'
+import { viewPlanesIconDataUri } from '@itk-viewer/icons'
 import Button from 'react-bootstrap/Button'
 import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'

src/Widgets/DistanceWidget.jsx

@@ -5,7 +5,7 @@ import Image from 'react-bootstrap/Image'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
 import Tooltip from 'react-bootstrap/Tooltip'
 import Form from 'react-bootstrap/Form'
-import { lengthToolIconDataUri } from 'itk-viewer-icons'
+import { lengthToolIconDataUri } from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 import '../style.css'
 import cn from 'classnames'