feat: Modal + ViewportDownloadForm (#1799)

* feat: Modal + ViewportDownloadForm

* styles for image preview box

* modal update & close handler

* open modal for Learn More (search info)

* change modal default alignment

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

* nuke inputNumber and use inputText with refactor

* make input more reusable

* revert inputText "number" stuff

* replace inputText to Input

* fix input spacing + label

* fix modal overlay classes

* fix inline styles

* fix onclick learn more

* fix close icon

* revert transition

* remove inline styles

* remove unecessary stuff

extensions/cornerstone/src/CornerstoneViewportDownloadForm.js

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

platform/core/src/services/UIModalService/index.js

@@ -33,7 +33,7 @@ const serviceImplementation = {
 function _show({
   content = null,
   contentProps = null,
-  shouldCloseOnEsc = false,
+  shouldCloseOnEsc = true,
   isOpen = true,
   closeButton = true,
   title = null,

platform/ui/index.js

@@ -75,6 +75,7 @@ export {
   Typography,
   Viewport,
   ViewportActionBar,
+  ViewportDownloadForm,
   ViewportGrid,
   ViewportPane,
 } from './src/components';

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

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
+    <g fill="currentColor" fill-rule="evenodd">
+        <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+            <path d="M.188.187L8.813 8.812M8.813.187L.188 8.812" transform="translate(5 5)"/>
+        </g>
+    </g>
+</svg>

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

@@ -4,6 +4,7 @@ import React from 'react';
 import arrowDown from './../../assets/icons/arrow-down.svg';
 import calendar from './../../assets/icons/calendar.svg';
 import cancel from './../../assets/icons/cancel.svg';
+import close from './../../assets/icons/close.svg';
 import dottedCircle from './../../assets/icons/dotted-circle.svg';
 import circledCheckmark from './../../assets/icons/circled-checkmark.svg';
 import chevronDown from './../../assets/icons/chevron-down.svg';
@@ -16,6 +17,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 +32,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';
@@ -47,6 +50,7 @@ const ICONS = {
   'arrow-down': arrowDown,
   calendar: calendar,
   cancel: cancel,
+  close: close,
   'dotted-circle': dottedCircle,
   'circled-checkmark': circledCheckmark,
   'chevron-down': chevronDown,
@@ -59,6 +63,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 +78,7 @@ const ICONS = {
   'sorting-active-up': sortingActiveUp,
   sorting: sorting,
   tracked: tracked,
+  unlink: unlink,
 
   /** Tools */
   'tool-zoom': toolZoom,

platform/ui/src/components/IconButton/IconButton.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 const baseClasses =
-  'text-center items-center justify-center outline-none font-bold focus:outline-none';
+  'text-center items-center justify-center transition duration-300 ease-in-out outline-none font-bold focus:outline-none';
 
 const roundedClasses = {
   none: '',
@@ -84,7 +84,7 @@ const IconButton = ({
 }) => {
   const buttonElement = useRef(null);
 
-  const handleOnClick = (e) => {
+  const handleOnClick = e => {
     buttonElement.current.blur();
     onClick(e);
   };
@@ -113,7 +113,7 @@ const IconButton = ({
 };
 
 IconButton.defaultProps = {
-  onClick: () => { },
+  onClick: () => {},
   color: 'default',
   disabled: false,
   fullWidth: false,

platform/ui/src/components/Input/Input.jsx

@@ -4,11 +4,11 @@ import Label from '../Label';
 import classnames from 'classnames';
 
 const baseInputClasses =
-  'shadow transition duration-300 appearance-none border rounded w-full py-2 px-3 text-sm text-white hover:border-gray-500 leading-tight focus:border-gray-500 focus:outline-none';
+  'shadow transition duration-300 appearance-none border border-primary-main hover:border-gray-500 focus:border-gray-500 focus:outline-none rounded w-full py-2 px-3 mt-2 text-sm text-white leading-tight focus:outline-none';
 
 const transparentClasses = {
   true: 'bg-transparent',
-  false: '',
+  false: 'bg-black',
 };
 
 const Input = ({
@@ -16,7 +16,7 @@ const Input = ({
   containerClassName = '',
   labelClassName = '',
   className = '',
-  transparent = true,
+  transparent = false,
   type = 'text',
   value,
   onChange,

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,15 +33,17 @@ const InputText = ({
 
 InputText.defaultProps = {
   value: '',
+  isSortable: false,
+  onLabelClick: () => {},
+  sortDirection: 'none',
 };
 
 InputText.propTypes = {
   label: PropTypes.string.isRequired,
-  isSortable: PropTypes.bool.isRequired,
+  isSortable: PropTypes.bool,
-  sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none'])
+  sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none']),
-    .isRequired,
+  onLabelClick: PropTypes.func,
-  onLabelClick: PropTypes.func.isRequired,
+  value: PropTypes.any,
-  value: PropTypes.string,
   onChange: PropTypes.func.isRequired,
 };
 

platform/ui/src/components/Modal/Modal.css

@@ -0,0 +1,3 @@
+.modal-content {
+  max-height: calc(100vh - theme('spacing.250px'));
+}

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

@@ -1,22 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactModal from 'react-modal';
-import classNames from 'classnames';
 
-const customStyle = {
+import './Modal.css';
-  overlay: {
+
-    zIndex: 1071,
+import { Typography, useModal, IconButton, Icon } from '@ohif/ui';
-    backgroundColor: 'rgb(0, 0, 0, 0.5)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-};
 
 ReactModal.setAppElement(document.getElementById('root'));
 
 const Modal = ({
-  className,
   closeButton,
   shouldCloseOnEsc,
   isOpen,
@@ -24,15 +16,27 @@ const Modal = ({
   onClose,
   children,
 }) => {
+  const { hide } = useModal();
+
+  const handleClose = () => {
+    hide();
+  };
+
   const renderHeader = () => {
     return (
       title && (
-        <header>
+        <header className="mb-6 pb-4 border-b border-secondary-main">
-          <h4>{title}</h4>
+          <Typography variant="h4">{title}</Typography>
           {closeButton && (
-            <button data-cy="close-button" onClick={onClose}>
+            <IconButton
-              ×
+              className="absolute top-0 right-0 focus:outline-none flex -mr-3 -mt-3"
-            </button>
+              data-cy="close-button"
+              color="primary"
+              onClick={onClose}
+              rounded="full"
+            >
+              <Icon name="close" className="text-white w-8 h-8" />
+            </IconButton>
           )}
         </header>
       )
@@ -41,22 +45,26 @@ const Modal = ({
 
   return (
     <ReactModal
-      className={classNames(className)}
+      className="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"
+      overlayClassName="fixed top-0 left-0 right-0 bottom-0 z-50 bg-overlay flex items-start justify-center py-16"
       shouldCloseOnEsc={shouldCloseOnEsc}
+      onRequestClose={handleClose}
       isOpen={isOpen}
       title={title}
-      style={customStyle}
     >
-      <>
+      <div className="px-6">{renderHeader()}</div>
-        {renderHeader()}
+      <section className="ohif-scrollbar modal-content overflow-y-auto px-6">
-        <section>{children}</section>
+        {children}
-      </>
+      </section>
     </ReactModal>
   );
 };
 
+Modal.defaultProps = {
+  shouldCloseOnEsc: true,
+};
+
 Modal.propTypes = {
-  className: PropTypes.string,
   closeButton: PropTypes.bool,
   shouldCloseOnEsc: PropTypes.bool,
   isOpen: PropTypes.bool,

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

@@ -76,10 +76,9 @@ const Select = ({
       options={options}
       value={selectedOptions}
       onChange={(selectedOptions, { action }) => {
-        const newSelection = !selectedOptions.length ? selectedOptions : selectedOptions.reduce(
+        const newSelection = !selectedOptions.length
-          (acc, curr) => acc.concat([curr.value]),
+          ? selectedOptions
-          []
+          : selectedOptions.reduce((acc, curr) => acc.concat([curr.value]), []);
-        );
         onChange(newSelection, action);
       }}
     ></ReactSelect>

platform/ui/src/components/StudyListFilter/StudyListFilter.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button, Icon, Typography, InputGroup } from '@ohif/ui';
+import { Button, Icon, Typography, InputGroup, useModal } from '@ohif/ui';
 
 const StudyListFilter = ({
   filtersMeta,
@@ -20,6 +20,16 @@ const StudyListFilter = ({
     });
   };
   const isSortingEnable = numOfStudies > 0 && numOfStudies <= 100;
+  const { show } = useModal();
+
+  const showLearnMoreContent = () => {
+    const modalContent = () => <div>Search Instructions</div>;
+
+    show({
+      content: modalContent,
+      title: 'Learn More',
+    });
+  };
 
   return (
     <React.Fragment>
@@ -38,6 +48,7 @@ const StudyListFilter = ({
                     color="inherit"
                     className="text-primary-active"
                     startIcon={<Icon name="info-link" className="w-2" />}
+                    onClick={showLearnMoreContent}
                   >
                     <span className="flex flex-col flex-1">
                       <span>Learn more</span>

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

@@ -0,0 +1,432 @@
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  createRef,
+  useRef,
+} from 'react';
+
+import classnames from 'classnames';
+
+import {
+  Typography,
+  Input,
+  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 = useCallback(
+    value => (value >= minimumSize ? value : minimumSize),
+    [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">
+          <Input
+            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">
+                <Input
+                  type="number"
+                  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">
+                <Input
+                  type="number"
+                  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
+          className="hidden"
+          style={{
+            height: viewportElementDimensions.height,
+            width: viewportElementDimensions.width,
+          }}
+          ref={ref => setViewportElement(ref)}
+        >
+          <canvas
+            className={classnames('block', canvasClass)}
+            style={{
+              height: downloadCanvas.height,
+              width: downloadCanvas.width,
+            }}
+            width={downloadCanvas.width}
+            height={downloadCanvas.height}
+            ref={downloadCanvas.ref}
+          ></canvas>
+        </div>
+
+        {viewportPreview.src ? (
+          <div
+            className="p-4 rounded bg-secondary-dark border-secondary-primary"
+            data-cy="image-preview"
+          >
+            <Typography variant="h5">Image preview</Typography>
+            <img
+              className="mt-4"
+              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

@@ -45,6 +45,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';
 
@@ -97,6 +98,7 @@ export {
   Typography,
   Viewport,
   ViewportActionBar,
+  ViewportDownloadForm,
   ViewportGrid,
   ViewportPane,
 };

platform/ui/src/contextProviders/ModalComponent.jsx

@@ -16,7 +16,7 @@ const ModalComponent = ({
 ModalComponent.defaultProps = {
   content: null,
   contentProps: null,
-  shouldCloseOnEsc: false,
+  shouldCloseOnEsc: true,
   isOpen: true,
   closeButton: true,
   title: null,

platform/ui/src/contextProviders/ModalProvider.jsx

@@ -19,7 +19,7 @@ export const useModal = () => useContext(ModalContext);
  * @typedef {Object} ModalProps
  * @property {ReactElement|HTMLElement} [content=null] Modal content.
  * @property {Object} [contentProps=null] Modal content props.
- * @property {boolean} [shouldCloseOnEsc=false] Modal is dismissible via the esc key.
+ * @property {boolean} [shouldCloseOnEsc=true] Modal is dismissible via the esc key.
  * @property {boolean} [isOpen=true] Make the Modal visible or hidden.
  * @property {boolean} [closeButton=true] Should the modal body render the close button.
  * @property {string} [title=null] Should the modal render the title independently of the body content.
@@ -30,7 +30,7 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
   const DEFAULT_OPTIONS = {
     content: null,
     contentProps: null,
-    shouldCloseOnEsc: false,
+    shouldCloseOnEsc: true,
     isOpen: true,
     closeButton: true,
     title: null,

platform/ui/tailwind.config.js

@@ -10,6 +10,7 @@ module.exports = {
       xl: '1280px',
     },
     colors: {
+      overlay: 'rgba(0, 0, 0, 0.8)',
       transparent: 'transparent',
       black: '#000',
       white: '#fff',
@@ -17,10 +18,10 @@ module.exports = {
       inherit: 'inherit',
 
       indigo: {
-        dark: '#0b1a42'
+        dark: '#0b1a42',
       },
       aqua: {
-        pale: '#7bb2ce'
+        pale: '#7bb2ce',
       },
 
       primary: {