feat: Modal + ViewportDownloadForm

extensions/cornerstone/src/CornerstoneViewportDownloadForm.js

@@ -145,8 +145,4 @@ CornerstoneViewportDownloadForm.propTypes = {
   activeViewportIndex: PropTypes.number.isRequired,
 };
 
-// export default CornerstoneViewportDownloadForm;
-
-export default function HelloWorld() {
-  return <div>Hello World</div>;
-}
+export default CornerstoneViewportDownloadForm;

platform/ui/index.js

@@ -39,6 +39,7 @@ export {
   InputGroup,
   InputLabelWrapper,
   InputMultiSelect,
+  InputNumber,
   InputText,
   Label,
   LayoutSelector,
@@ -73,6 +74,7 @@ export {
   Typography,
   Viewport,
   ViewportActionBar,
+  ViewportDownloadForm,
   ViewportGrid,
   ViewportPane,
 } from './src/components';

platform/ui/src/assets/icons/link.svg

@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  aria-labelledby="title"
+  width="1em"
+  height="1em"
+  fill="currentColor"
+>
+  <path d="m5.364 28.917c1.047 1.046 2.422 1.57 3.797 1.57 1.376 0 2.751-0.523 3.798-1.572l7.552-7.554c1.016-1.014 1.574-2.361 1.574-3.797 -0.001-1.432-0.558-2.781-1.574-3.796l-2.297-2.298 -2.009 2.009 2.297 2.298c0.478 0.478 0.741 1.113 0.741 1.788 0 0.674-0.264 1.309-0.741 1.786l-7.553 7.555c-0.987 0.985-2.59 0.985-3.576 0l-2.297-2.298c-0.987-0.985-0.987-2.589 0-3.576l3.775-3.776 -2.009-2.009 -3.776 3.776c-2.094 2.096-2.092 5.502 0 7.595l2.299 2.3zM26.695 2.992" />
+  <path d="m26.695 2.992c-1.014-1.016-2.362-1.575-3.797-1.575 -0.001 0-0.001 0-0.002 0 -1.435 0-2.784 0.56-3.798 1.573l-7.551 7.553c-1.017 1.016-1.576 2.363-1.576 3.799 0 1.434 0.558 2.784 1.574 3.797l2.297 2.297 2.01-2.009 -2.298-2.297c-0.477-0.477-0.741-1.113-0.741-1.788 0-0.676 0.265-1.311 0.742-1.788l7.553-7.555c0.477-0.477 1.111-0.74 1.789-0.74 0 0 0 0 0.001 0 0.674 0 1.309 0.264 1.786 0.74l2.297 2.299c0.477 0.477 0.74 1.111 0.74 1.788 0 0.674-0.264 1.311-0.74 1.788l-3.776 3.777 2.009 2.009 3.776-3.777c1.014-1.013 1.573-2.363 1.574-3.797 0-1.435-0.56-2.784-1.574-3.797l-2.295-2.296z" />
+</svg>

platform/ui/src/assets/icons/unlink.svg

@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="unlink"
+  viewBox="0 0 512 512"
+  width="1em"
+  height="1em"
+  fill="currentColor"
+>
+  <title id="title">Unlink</title>
+  <path d="M304.083 388.936c4.686 4.686 4.686 12.284 0 16.971l-65.057 65.056c-54.709 54.711-143.27 54.721-197.989 0-54.713-54.713-54.719-143.27 0-197.989l65.056-65.057c4.686-4.686 12.284-4.686 16.971 0l22.627 22.627c4.686 4.686 4.686 12.284 0 16.971L81.386 311.82c-34.341 34.341-33.451 88.269.597 120.866 32.577 31.187 84.788 31.337 117.445-1.32l65.057-65.056c4.686-4.686 12.284-4.686 16.971 0l22.627 22.626zm-56.568-243.245l64.304-64.304c34.346-34.346 88.286-33.453 120.882.612 31.18 32.586 31.309 84.785-1.335 117.43l-65.056 65.057c-4.686 4.686-4.686 12.284 0 16.971l22.627 22.627c4.686 4.686 12.284 4.686 16.971 0l65.056-65.057c54.711-54.709 54.721-143.271 0-197.99-54.71-54.711-143.27-54.72-197.989 0l-65.057 65.057c-4.686 4.686-4.686 12.284 0 16.971l22.627 22.627c4.685 4.685 12.283 4.685 16.97-.001zm238.343 362.794l22.627-22.627c4.686-4.686 4.686-12.284 0-16.971L43.112 3.515c-4.686-4.686-12.284-4.686-16.971 0L3.515 26.142c-4.686 4.686-4.686 12.284 0 16.971l465.373 465.373c4.686 4.686 12.284 4.686 16.97-.001z"></path>
+</svg>

platform/ui/src/components/Icon/getIcon.jsx

@@ -16,6 +16,7 @@ import info from './../../assets/icons/info.svg';
 import infoLink from './../../assets/icons/info-link.svg';
 import launchArrow from './../../assets/icons/launch-arrow.svg';
 import launchInfo from './../../assets/icons/launch-info.svg';
+import link from './../../assets/icons/link.svg';
 import listBullets from './../../assets/icons/list-bullets.svg';
 import lock from './../../assets/icons/lock.svg';
 import logoOhifSmall from './../../assets/icons/logo-ohif-small.svg';
@@ -30,6 +31,7 @@ import sorting from './../../assets/icons/sorting.svg';
 import sortingActiveDown from './../../assets/icons/sorting-active-down.svg';
 import sortingActiveUp from './../../assets/icons/sorting-active-up.svg';
 import tracked from './../../assets/icons/tracked.svg';
+import unlink from './../../assets/icons/unlink.svg';
 
 /** Tools */
 import toolZoom from './../../assets/icons/tool-zoom.svg';
@@ -59,6 +61,7 @@ const ICONS = {
   'info-link': infoLink,
   'launch-arrow': launchArrow,
   'launch-info': launchInfo,
+  link: link,
   'list-bullets': listBullets,
   lock: lock,
   'logo-ohif-small': logoOhifSmall,
@@ -73,6 +76,7 @@ const ICONS = {
   'sorting-active-up': sortingActiveUp,
   sorting: sorting,
   tracked: tracked,
+  unlink: unlink,
 
   /** Tools */
   'tool-zoom': toolZoom,

platform/ui/src/components/InputNumber/InputNumber.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Input, InputLabelWrapper } from '@ohif/ui';
+
+const InputNumber = ({
+  label,
+  isSortable,
+  sortDirection,
+  onLabelClick,
+  value,
+  onChange,
+}) => {
+  return (
+    <InputLabelWrapper
+      label={label}
+      isSortable={isSortable}
+      sortDirection={sortDirection}
+      onLabelClick={onLabelClick}
+    >
+      <Input
+        className="border-primary-main mt-2 bg-black"
+        type="number"
+        containerClassName="mr-2"
+        value={value}
+        onChange={event => {
+          onChange(event.target.value);
+        }}
+      />
+    </InputLabelWrapper>
+  );
+};
+
+InputNumber.defaultProps = {
+  value: '',
+  isSortable: false,
+  onLabelClick: () => {},
+  sortDirection: 'none',
+};
+
+InputNumber.propTypes = {
+  label: PropTypes.string.isRequired,
+  isSortable: PropTypes.bool,
+  sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none']),
+  onLabelClick: PropTypes.func,
+  value: PropTypes.number,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default InputNumber;

platform/ui/src/components/InputNumber/InputNumber.mdx

@@ -0,0 +1,44 @@
+---
+name: InputNumber
+menu: Form
+route: components/InputNumber
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import { InputNumber } from '@ohif/ui';
+
+# Input Text
+
+## Import
+
+```javascript
+import { InputNumber } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const [number, setNumber] = useState(10);
+    return (
+      <div className="flex flex-col flex-1 p-4 items-center">
+        <div className="w-56">
+          <InputNumber
+            min={1}
+            max={100}
+            label="Number"
+            value={number}
+            onChange={value => {
+              setText(value);
+            }}
+          />
+        </div>
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={InputNumber} />

platform/ui/src/components/InputNumber/index.js

@@ -0,0 +1,2 @@
+import InputNumber from './InputNumber';
+export default InputNumber;

platform/ui/src/components/InputText/InputText.jsx

@@ -23,7 +23,7 @@ const InputText = ({
         type="text"
         containerClassName="mr-2"
         value={value}
-        onChange={(event) => {
+        onChange={event => {
           onChange(event.target.value);
         }}
       />
@@ -33,14 +33,16 @@ const InputText = ({
 
 InputText.defaultProps = {
   value: '',
+  isSortable: false,
+  onLabelClick: () => {},
+  sortDirection: 'none',
 };
 
 InputText.propTypes = {
   label: PropTypes.string.isRequired,
-  isSortable: PropTypes.bool.isRequired,
-  sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none'])
-    .isRequired,
-  onLabelClick: PropTypes.func.isRequired,
+  isSortable: PropTypes.bool,
+  sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none']),
+  onLabelClick: PropTypes.func,
   value: PropTypes.string,
   onChange: PropTypes.func.isRequired,
 };

platform/ui/src/components/Modal/Modal.jsx

@@ -3,13 +3,16 @@ import PropTypes from 'prop-types';
 import ReactModal from 'react-modal';
 import classNames from 'classnames';
 
+import { Typography } from '@ohif/ui';
+
 const customStyle = {
   overlay: {
     zIndex: 1071,
-    backgroundColor: 'rgb(0, 0, 0, 0.5)',
+    backgroundColor: 'rgb(0, 0, 0, 0.8)',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    padding: '40px 0',
   },
 };
 
@@ -27,10 +30,14 @@ const Modal = ({
   const renderHeader = () => {
     return (
       title && (
-        <header>
-          <h4>{title}</h4>
+        <header className="mb-6 pb-4 border-b border-secondary-main">
+          <Typography variant="h4">{title}</Typography>
           {closeButton && (
-            <button data-cy="close-button" onClick={onClose}>
+            <button
+              className="absolute top-0 right-0 bg-primary-main focus:outline-none text-white rounded-full text-2xl w-8 h-8 flex justify-center items-center -mr-3 -mt-3"
+              data-cy="close-button"
+              onClick={onClose}
+            >
               ×
             </button>
           )}
@@ -41,20 +48,31 @@ const Modal = ({
 
   return (
     <ReactModal
-      className={classNames(className)}
+      className={classNames(
+        `relative py-6 w-11/12 lg:w-10/12 xl:w-1/2 max-h-full outline-none bg-primary-dark border border-secondary-main text-white rounded ${className}`
+      )}
       shouldCloseOnEsc={shouldCloseOnEsc}
       isOpen={isOpen}
       title={title}
       style={customStyle}
     >
       <>
-        {renderHeader()}
-        <section>{children}</section>
+        <div className="px-6">{renderHeader()}</div>
+        <section
+          className="ohif-scrollbar overflow-y-auto px-6"
+          style={{ maxHeight: 'calc(100vh - 200px)' }}
+        >
+          {children}
+        </section>
       </>
     </ReactModal>
   );
 };
 
+Modal.defaultProps = {
+  shouldCloseOnEsc: true,
+};
+
 Modal.propTypes = {
   className: PropTypes.string,
   closeButton: PropTypes.bool,

platform/ui/src/components/Select/Select.jsx

@@ -76,6 +76,11 @@ const Select = ({
       options={options}
       value={selectedOptions}
       onChange={(selectedOptions, { action }) => {
+        if (!isMulti) {
+          onChange(selectedOptions, action);
+          return;
+        }
+
         const newSelection = selectedOptions.reduce(
           (acc, curr) => acc.concat([curr.value]),
           []

platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.jsx

@@ -0,0 +1,425 @@
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  createRef,
+  useRef,
+} from 'react';
+
+import {
+  Typography,
+  InputText,
+  InputNumber,
+  Tooltip,
+  IconButton,
+  Icon,
+  Select,
+  InputLabelWrapper,
+  Button,
+} from '@ohif/ui';
+
+const FILE_TYPE_OPTIONS = [
+  {
+    value: 'jpg',
+    label: 'jpg',
+  },
+  {
+    value: 'png',
+    label: 'png',
+  },
+];
+
+const DEFAULT_FILENAME = 'image';
+const REFRESH_VIEWPORT_TIMEOUT = 1000;
+
+const ViewportDownloadForm = ({
+  activeViewport,
+  onClose,
+  updateViewportPreview,
+  enableViewport,
+  disableViewport,
+  toggleAnnotations,
+  loadImage,
+  downloadBlob,
+  defaultSize,
+  minimumSize,
+  maximumSize,
+  canvasClass,
+}) => {
+  const [filename, setFilename] = useState(DEFAULT_FILENAME);
+  const [fileType, setFileType] = useState(['jpg']);
+
+  const [dimensions, setDimensions] = useState({
+    width: defaultSize,
+    height: defaultSize,
+  });
+
+  const [showAnnotations, setShowAnnotations] = useState(true);
+
+  const [keepAspect, setKeepAspect] = useState(true);
+  const [aspectMultiplier, setAspectMultiplier] = useState({
+    width: 1,
+    height: 1,
+  });
+
+  const [viewportElement, setViewportElement] = useState();
+  const [viewportElementDimensions, setViewportElementDimensions] = useState({
+    width: defaultSize,
+    height: defaultSize,
+  });
+
+  const [downloadCanvas, setDownloadCanvas] = useState({
+    ref: createRef(),
+    width: defaultSize,
+    height: defaultSize,
+  });
+
+  const [viewportPreview, setViewportPreview] = useState({
+    src: null,
+    width: defaultSize,
+    height: defaultSize,
+  });
+
+  const [error, setError] = useState({
+    width: false,
+    height: false,
+    filename: false,
+  });
+
+  const hasError = Object.values(error).includes(true);
+
+  const refreshViewport = useRef(null);
+
+  const onKeepAspectToggle = () => {
+    const { width, height } = dimensions;
+    const aspectMultiplier = { ...aspectMultiplier };
+    if (!keepAspect) {
+      const base = Math.min(width, height);
+      aspectMultiplier.width = width / base;
+      aspectMultiplier.height = height / base;
+      setAspectMultiplier(aspectMultiplier);
+    }
+
+    setKeepAspect(!keepAspect);
+  };
+
+  const downloadImage = () => {
+    downloadBlob(
+      filename || DEFAULT_FILENAME,
+      fileType,
+      viewportElement,
+      downloadCanvas.ref.current
+    );
+  };
+
+  /**
+   * @param {object} value - Input value
+   * @param {string} dimension - "height" | "width"
+   */
+  const onDimensionsChange = (value, dimension) => {
+    const oppositeDimension = dimension === 'height' ? 'width' : 'height';
+    const sanitizedTargetValue = value.replace(/\D/, '');
+    const isEmpty = sanitizedTargetValue === '';
+    const newDimensions = { ...dimensions };
+    const updatedDimension = isEmpty
+      ? ''
+      : Math.min(sanitizedTargetValue, maximumSize);
+
+    if (updatedDimension === dimensions[dimension]) {
+      return;
+    }
+
+    newDimensions[dimension] = updatedDimension;
+
+    if (keepAspect && newDimensions[oppositeDimension] !== '') {
+      newDimensions[oppositeDimension] = Math.round(
+        newDimensions[dimension] * aspectMultiplier[oppositeDimension]
+      );
+    }
+
+    // In current code, keepAspect is always `true`
+    // And we always start w/ a square width/height
+    setDimensions(newDimensions);
+
+    // Only update if value is non-empty
+    if (!isEmpty) {
+      setViewportElementDimensions(newDimensions);
+      setDownloadCanvas(state => ({
+        ...state,
+        ...newDimensions,
+      }));
+    }
+  };
+
+  const error_messages = {
+    width: 'The minimum valid width is 100px.',
+    height: 'The minimum valid height is 100px.',
+    filename: 'The file name cannot be empty.',
+  };
+
+  const renderErrorHandler = errorType => {
+    if (!error[errorType]) {
+      return null;
+    }
+
+    return (
+      <Typography className="mt-2 pl-1" color="error">
+        {error_messages[errorType]}
+      </Typography>
+    );
+  };
+
+  const validSize = value => (value >= minimumSize ? value : minimumSize);
+
+  const loadAndUpdateViewports = useCallback(async () => {
+    const { width: scaledWidth, height: scaledHeight } = await loadImage(
+      activeViewport,
+      viewportElement,
+      dimensions.width,
+      dimensions.height
+    );
+
+    toggleAnnotations(showAnnotations, viewportElement);
+
+    const scaledDimensions = {
+      height: validSize(scaledHeight),
+      width: validSize(scaledWidth),
+    };
+
+    setViewportElementDimensions(scaledDimensions);
+    setDownloadCanvas(state => ({
+      ...state,
+      ...scaledDimensions,
+    }));
+
+    const {
+      dataUrl,
+      width: viewportElementWidth,
+      height: viewportElementHeight,
+    } = await updateViewportPreview(
+      viewportElement,
+      downloadCanvas.ref.current,
+      fileType
+    );
+
+    setViewportPreview(state => ({
+      ...state,
+      src: dataUrl,
+      width: validSize(viewportElementWidth),
+      height: validSize(viewportElementHeight),
+    }));
+  }, [
+    loadImage,
+    activeViewport,
+    viewportElement,
+    dimensions.width,
+    dimensions.height,
+    toggleAnnotations,
+    showAnnotations,
+    validSize,
+    updateViewportPreview,
+    downloadCanvas.ref,
+    fileType,
+  ]);
+
+  useEffect(() => {
+    enableViewport(viewportElement);
+
+    return () => {
+      disableViewport(viewportElement);
+    };
+  }, [disableViewport, enableViewport, viewportElement]);
+
+  useEffect(() => {
+    if (refreshViewport.current !== null) {
+      clearTimeout(refreshViewport.current);
+    }
+
+    refreshViewport.current = setTimeout(() => {
+      refreshViewport.current = null;
+      loadAndUpdateViewports();
+    }, REFRESH_VIEWPORT_TIMEOUT);
+  }, [
+    activeViewport,
+    viewportElement,
+    showAnnotations,
+    dimensions,
+    loadImage,
+    toggleAnnotations,
+    updateViewportPreview,
+    fileType,
+    downloadCanvas.ref,
+    minimumSize,
+    maximumSize,
+    loadAndUpdateViewports,
+  ]);
+
+  useEffect(() => {
+    const { width, height } = dimensions;
+    const hasError = {
+      width: width < minimumSize,
+      height: height < minimumSize,
+      filename: !filename,
+    };
+
+    setError({ ...hasError });
+  }, [dimensions, filename, minimumSize]);
+
+  return (
+    <div>
+      <Typography variant="h6">
+        Please specify the dimensions, filename, and desired type for the output
+        image.
+      </Typography>
+
+      <div className="mt-6 flex flex-col">
+        <div className="w-full mb-4">
+          <InputText
+            data-cy="file-name"
+            value={filename}
+            onChange={value => setFilename(value)}
+            label="File Name"
+          />
+          {renderErrorHandler('filename')}
+        </div>
+        <div className="flex">
+          <div className="flex w-1/3">
+            <div className="flex flex-col flex-grow">
+              <div className="w-full">
+                <InputNumber
+                  min={minimumSize}
+                  max={maximumSize}
+                  label="Image width (px)"
+                  value={dimensions.width}
+                  onChange={value => onDimensionsChange(value, 'width')}
+                  data-cy="image-width"
+                />
+                {renderErrorHandler('width')}
+              </div>
+              <div className="w-full mt-4">
+                <InputNumber
+                  min={minimumSize}
+                  max={maximumSize}
+                  label="Image height (px)"
+                  value={dimensions.height}
+                  onChange={value => onDimensionsChange(value, 'height')}
+                  data-cy="image-height"
+                />
+                {renderErrorHandler('height')}
+              </div>
+            </div>
+
+            <div className="flex items-center mt-8">
+              <Tooltip
+                position="right"
+                content={keepAspect ? 'Dismiss Aspect' : 'Keep Aspect'}
+              >
+                <IconButton
+                  onClick={onKeepAspectToggle}
+                  size="small"
+                  rounded="full"
+                >
+                  <Icon name={keepAspect ? 'link' : 'unlink'} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+
+          <div className="ml-6 w-1/4 pl-6 border-l border-secondary-dark">
+            <div>
+              <InputLabelWrapper
+                sortDirection="none"
+                label="File Type"
+                isSortable={false}
+                onLabelClick={() => {}}
+              >
+                <Select
+                  className="mt-2"
+                  isClearable={false}
+                  value={fileType}
+                  data-cy="file-type"
+                  onChange={value => {
+                    setFileType([value.value]);
+                  }}
+                  hideSelectedOptions={false}
+                  options={FILE_TYPE_OPTIONS}
+                  placeholder="File Type"
+                />
+              </InputLabelWrapper>
+            </div>
+            <div className="mt-4 ml-2">
+              <label htmlFor="show-annotations" className="flex items-center">
+                <input
+                  id="show-annotations"
+                  data-cy="show-annotations"
+                  type="checkbox"
+                  className="mr-2"
+                  checked={showAnnotations}
+                  onChange={event => setShowAnnotations(event.target.checked)}
+                />
+                <Typography>Show Annotations</Typography>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <div
+          style={{
+            height: viewportElementDimensions.height,
+            width: viewportElementDimensions.width,
+            position: 'absolute',
+            left: '9999px',
+          }}
+          ref={ref => setViewportElement(ref)}
+        >
+          <canvas
+            className={canvasClass}
+            style={{
+              height: downloadCanvas.height,
+              width: downloadCanvas.width,
+              display: 'block',
+            }}
+            width={downloadCanvas.width}
+            height={downloadCanvas.height}
+            ref={downloadCanvas.ref}
+          ></canvas>
+        </div>
+
+        {viewportPreview.src ? (
+          <div className="preview" data-cy="image-preview">
+            <div className="preview-header">Image preview</div>
+            <img
+              className="viewport-preview"
+              src={viewportPreview.src}
+              alt="Preview"
+              data-cy="image-preview"
+            />
+          </div>
+        ) : (
+          <div className="text-center p-8">
+            <Typography>Loading Image Preview...</Typography>
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-end mt-4">
+        <Button data-cy="cancel-btn" variant="outlined" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button
+          className="ml-2"
+          disabled={hasError}
+          onClick={downloadImage}
+          color="primary"
+          data-cy="download-btn"
+        >
+          Download
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ViewportDownloadForm;

platform/ui/src/components/ViewportDownloadForm/index.js

@@ -0,0 +1 @@
+export { default } from './ViewportDownloadForm';

platform/ui/src/components/index.js

@@ -10,6 +10,7 @@ import InputDateRange from './InputDateRange';
 import InputGroup from './InputGroup';
 import InputLabelWrapper from './InputLabelWrapper';
 import InputMultiSelect from './InputMultiSelect';
+import InputNumber from './InputNumber';
 import InputText from './InputText';
 import Label from './Label';
 import LayoutSelector from './LayoutSelector';
@@ -43,6 +44,7 @@ import Tooltip from './Tooltip';
 import Typography from './Typography';
 import Viewport from './Viewport';
 import ViewportActionBar from './ViewportActionBar';
+import ViewportDownloadForm from './ViewportDownloadForm';
 import ViewportGrid from './ViewportGrid';
 import ViewportPane from './ViewportPane';
 
@@ -59,6 +61,7 @@ export {
   InputGroup,
   InputLabelWrapper,
   InputMultiSelect,
+  InputNumber,
   InputText,
   Label,
   LayoutSelector,
@@ -93,6 +96,7 @@ export {
   Typography,
   Viewport,
   ViewportActionBar,
+  ViewportDownloadForm,
   ViewportGrid,
   ViewportPane,
 };

yarn.lock

@@ -17889,16 +17889,6 @@ react-cornerstone-viewport@2.3.8:
     prop-types "^15.7.2"
     react-resize-detector "^4.2.1"
 
-react-cornerstone-viewport@2.3.9:
-  version "2.3.9"
-  resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-2.3.9.tgz#f9761da8e536f0a217137c6ca1a983f5882249f9"
-  integrity sha512-qrhq8CbX/jq6b93cQjV2qC/mhHOvFBpxzxcHlvHzEQZt/rmRMcaYxCqjpNaNbUmmBu61wNkxesUVsggkPTTcqg==
-  dependencies:
-    classnames "^2.2.6"
-    date-fns "^2.2.1"
-    prop-types "^15.7.2"
-    react-resize-detector "^4.2.1"
-
 react-dates@21.2.1:
   version "21.2.1"
   resolved "https://registry.yarnpkg.com/react-dates/-/react-dates-21.2.1.tgz#a979ed6876326ccfbf754a019bc95458cc061ad8"