		@@ -23,2 +23,58 @@ import React, { Fragment, useEffect, useRef } from 'react'

		const downloadExtensions = [
		'hdf5',
		'nrrd',
		'nii',
		'nii.gz',
		'tif',
		'mha',
		'vtk',
		'iwi.cbor'
		]

		function DownloadMenu({ name, service }) {
		const selectedName = useSelector(
		service,
		(state) => state.context.images.selectedName
		)
		if (selectedName !== name) {
		return null
		}
		const download = (format) =>
		service.send({
		type: 'DOWNLOAD_IMAGE',
		data: {
		name,
		layerName: name,
		format
		}
		})

		return (
		<OverlayTrigger
		transition={false}
		overlay={<Tooltip>{'Save Image'}</Tooltip>}
		>
		<Dropdown>
		<Dropdown.Toggle className={'icon-button'} variant="light">
		<Image src={downloadIconDataUri}></Image>
		</Dropdown.Toggle>

		<Dropdown.Menu>
		{downloadExtensions.map((ext) => (
		<Dropdown.Item
		key={ext}
		onClick={() => {
		download(ext)
		}}
		>
		{`Download as ${ext}`}
		</Dropdown.Item>
		))}
		</Dropdown.Menu>
		</Dropdown>
		</OverlayTrigger>
		)
		}

		function Spinner({ name, service }) {
		@@ -34,3 +90,3 @@ const isDataUpdating = useSelector(
		})}
		style={{ paddingTop: '2px' }}
		style={{ paddingTop: '8px' }}
		>
		@@ -154,3 +210,3 @@ <div></div>

		function LayerEntry({ service, name, actor, fillRow }) {
		function LayerEntry({ service, name, actor }) {
		const send = service.send
		@@ -168,6 +224,2 @@ const uiLayers = useSelector(
		)
		const showSaveRoiButton = useSelector(
		service,
		(state) => state.context.layers.showSaveRoiButton
		)

		@@ -194,3 +246,2 @@ const layerEntry = useRef(null)

		const unitWidth = fillRow ? 12 : 6
		return (
		@@ -200,3 +251,3 @@ <Col
		className={`layerEntryCommon ${layerVisible(name)}`}
		xs={unitWidth}
		xs={12}
		onClick={() => {
		@@ -208,3 +259,3 @@ layerSelected(name)
		transition={false}
		overlay={<Tooltip>{BOUNDING_BOX_TEXT}</Tooltip>}
		overlay={<Tooltip>{'Toggle Visibility'}</Tooltip>}
		>
		@@ -227,32 +278,8 @@ <Button
		</OverlayTrigger>
		<div className="layerLabelCommon"> {name} </div>

		<OverlayTrigger transition={false} overlay={<Tooltip>{name}</Tooltip>}>
		<div className="layerLabelCommon"> {name} </div>
		</OverlayTrigger>
		<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>
		)}

		<Spinner name={name} service={service} style={{ paddingTop: '4px' }} />
		<DownloadMenu name={name} service={service} />
		<OverlayTrigger
		@@ -259,0 +286,0 @@ transition={false}

src/Layers/LayersInterface.jsx

		@@ -30,3 +30,3 @@ import { useSelector } from '@xstate/react'
		<Row ref={layersUIGroup}>
		{layers.map(([name, actor], idx) => (
		{layers.map(([name, actor]) => (
		<LayerEntry
		@@ -37,4 +37,2 @@ name={name}
		key={name}
		// fill row if last layer and odd number of layers
		fillRow={idx === layers.length - 1 && layers.length % 2 === 1}
		></LayerEntry>
		@@ -41,0 +39,0 @@ ))}

dist/bootstrapUIMachineOptions.js.es.js

Sorry, the diff of this file is too big to display

dist/compareTest.html