enable drag and drop on load file modal (#651)

* allow file drop while load file modal is open

* raise z index of drag and drop overlay

* streamline file load modal drag and drop handles

* update load file modal styling for drag and drop

* Update src/components/FileUploadModal/index.tsx

Co-authored-by: Cameron Fraser <[email protected]>

* Update src/components/FileUploadModal/style.css

Co-authored-by: Cameron Fraser <[email protected]>

* push lockfile

* Merge branch 'main' of https://github.com/simularium/simularium-website into feature/drop-on-modal

* update ci/cd to use jest experimental config

* use node 16 in CI

* reduce statement coverage threshold

* remove global coverage thresholds

* revert lockfile

---------

Co-authored-by: Cameron Fraser <[email protected]>

Author: interim17

.github/workflows/test-coverage.yml

@@ -9,7 +9,15 @@ jobs:
         if: ${{ github.actor != 'dependabot[bot]' }}
         steps:
             - uses: actions/checkout@v3
+            - uses: actions/setup-node@v4
+              with:
+                node-version: 16
+                cache: 'npm'
+            - run: npm ci
             - uses: ArtiomTr/[email protected]
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
                   annotations: failed-tests
+                  skip-step: install
+              env:
+                NODE_OPTIONS: --experimental-vm-modules

jest.config.js

@@ -17,10 +17,6 @@ module.exports = {
         "^lodash/(.*)$": "lodash-es/$1",
     },
     coverageThreshold: {
-        global: {
-            lines: 25,
-            statements: 50,
-        },
         "./src/state/*/selectors/index.ts": {
             branches: 100,
             functions: 100,

src/components/CustomModal/index.tsx

@@ -19,6 +19,8 @@ interface CustomModalProps extends Omit<ModalProps, OmittedProps> {
     titleText?: string;
     footerButtons?: React.ReactNode;
     divider?: boolean;
+    wrapProps?: { onDragOver: (e: DragEvent) => void };
+    wrapClassName?: string;
 }
 
 /** Wrapper to keep styling of modals consistent:
@@ -31,6 +33,8 @@ const CustomModal: React.FC<CustomModalProps> = ({
     titleText,
     footerButtons,
     divider,
+    wrapProps,
+    wrapClassName,
     ...props
 }) => {
     const title = (
@@ -66,6 +70,8 @@ const CustomModal: React.FC<CustomModalProps> = ({
             footer={footer}
             open
             centered
+            wrapClassName={wrapClassName}
+            wrapProps={wrapProps}
         />
     );
 };

src/components/FileUploadModal/index.tsx

@@ -1,7 +1,8 @@
 import { Form, Tabs } from "antd";
 import { RcFile } from "antd/lib/upload";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { ActionCreator } from "redux";
+import classNames from "classnames";
 
 import {
     ClearSimFileDataAction,
@@ -33,6 +34,8 @@ interface FileUploadModalProps {
     setViewerStatus: ActionCreator<SetViewerStatusAction>;
     clearSimulariumFile: ActionCreator<ClearSimFileDataAction>;
     setError: ActionCreator<SetErrorAction>;
+    fileIsDraggedOverViewer: boolean;
+    handleDragOver: (e: DragEvent) => void;
 }
 
 const FileUploadModal: React.FC<FileUploadModalProps> = ({
@@ -41,6 +44,8 @@ const FileUploadModal: React.FC<FileUploadModalProps> = ({
     loadLocalFile,
     setViewerStatus,
     setError,
+    fileIsDraggedOverViewer,
+    handleDragOver,
 }) => {
     const [openTab, setOpenTab] = useState<string>(UploadTab.Device);
     const [noUrlInput, setNoUrlInput] = useState(true);
@@ -51,6 +56,17 @@ const FileUploadModal: React.FC<FileUploadModalProps> = ({
         setIsModalVisible(false);
     };
 
+    useEffect(() => {
+        if (!fileIsDraggedOverViewer) return;
+
+        window.addEventListener("drop", closeModal);
+        return () => window.removeEventListener("drop", closeModal);
+    }, [fileIsDraggedOverViewer]);
+
+    const fileDragClass = fileIsDraggedOverViewer
+        ? styles.fileDragged
+        : undefined;
+
     const onUrlInput = (event: React.ChangeEvent<HTMLInputElement>) => {
         // Form subcomponent takes care of its own submit behavior
         // all we care about is if input is present or not
@@ -118,10 +134,15 @@ const FileUploadModal: React.FC<FileUploadModalProps> = ({
     return (
         <CustomModal
             closeHandler={closeModal}
-            className={styles.uploadModal}
+            className={classNames(styles.uploadModal, fileDragClass)}
             titleText="Choose a Simularium file to load"
             footerButtons={footerButtons}
-            width={525}
+            width={603}
+            wrapClassName={fileDragClass}
+            wrapProps={{
+                onDragOver: (e: DragEvent) => handleDragOver(e),
+            }}
+            divider
         >
             <Tabs
                 items={tabItems}

src/components/FileUploadModal/style.css

@@ -33,3 +33,7 @@
 .upload-modal :global(.ant-tabs .ant-tabs-tab-active) {
     font-weight: 400;
 }
+
+.file-dragged:global(.ant-modal-wrap), .file-dragged :global(.ant-modal-content) {
+    pointer-events: none;
+}

src/components/Icons/index.tsx

@@ -19,6 +19,7 @@ import {
     FullscreenExitOutlined,
     FullscreenOutlined,
     RightOutlined,
+    DragOutlined,
 } from "@ant-design/icons";
 
 import PurpleArrowPointingRight from "../../assets/open-arrow.svg";
@@ -44,6 +45,7 @@ export const Link = <LinkOutlined />;
 export const Download = <DownloadOutlined size={32} />;
 export const LoopOutlined = <RetweetOutlined />;
 export const Exclamation = <ExclamationCircleFilled />;
+export const Drag = <DragOutlined />;
 
 export const PurpleArrow = <img src={PurpleArrowPointingRight} />;
 export const AicsLogo = <img src={AicsLogoWhite} style={{ width: "140px" }} />;

src/components/LoadFileMenu/index.tsx

@@ -35,6 +35,8 @@ interface LoadFileMenuProps {
     setError: ActionCreator<SetErrorAction>;
     conversionStatus: ConversionStatus;
     setConversionStatus: ActionCreator<SetConversionStatusAction>;
+    fileIsDraggedOverViewer: boolean;
+    handleDragOver: (e: DragEvent) => void;
 }
 
 const LoadFileMenu = ({
@@ -46,6 +48,8 @@ const LoadFileMenu = ({
     setError,
     conversionStatus,
     setConversionStatus,
+    fileIsDraggedOverViewer,
+    handleDragOver,
 }: LoadFileMenuProps): JSX.Element => {
     const [isModalVisible, setIsModalVisible] = useState(false);
     const location = useLocation();
@@ -142,6 +146,8 @@ const LoadFileMenu = ({
                     loadLocalFile={loadLocalFile}
                     setViewerStatus={setViewerStatus}
                     setError={setError}
+                    handleDragOver={handleDragOver}
+                    fileIsDraggedOverViewer={fileIsDraggedOverViewer}
                 />
             )}
         </>

src/components/LocalFileUpload/index.tsx

@@ -3,10 +3,12 @@ import { Link } from "react-router-dom";
 import { message, Upload, UploadProps } from "antd";
 import { CloseOutlined } from "@ant-design/icons";
 import { RcFile } from "antd/lib/upload";
+import classNames from "classnames";
 
 import { ButtonClass } from "../../constants/interfaces";
 import { VIEWER_PATHNAME } from "../../routes";
 import { CustomButton } from "../CustomButton";
+import { Drag } from "../Icons";
 
 import styles from "./style.css";
 
@@ -35,7 +37,9 @@ const LocalFileUpload: React.FC<FileUploadProps> = ({
     ...uploadConfigProps
 }) => {
     const uploadPresetProps: UploadProps = {
-        className: styles.fileUpload,
+        className: classNames(styles.fileUpload, {
+            [styles.listEmpty]: fileList.length === 0,
+        }),
         showUploadList: {
             removeIcon: <CloseOutlined />,
         },
@@ -64,6 +68,11 @@ const LocalFileUpload: React.FC<FileUploadProps> = ({
 
     return (
         <Upload {...uploadPresetProps} {...uploadConfigProps}>
+            <div className={styles.drag}>
+                {" "}
+                {Drag} Drag and drop a .simularium file anywhere in this window
+                or browse to a location.{" "}
+            </div>
             <Link
                 // Redirect to /viewer if necessary and/or clear out viewer
                 to={{
@@ -73,7 +82,7 @@ const LocalFileUpload: React.FC<FileUploadProps> = ({
             >
                 {children || (
                     <CustomButton variant={ButtonClass.LightPrimary}>
-                        Select file
+                        Browse
                     </CustomButton>
                 )}
             </Link>

src/components/LocalFileUpload/style.css

@@ -1,6 +1,17 @@
+.file-upload :global(.ant-upload){
+    display: flex;
+    flex-direction: column;
+    gap: 26px;
+}
+
 .file-upload :global(.ant-upload-list) {
     min-height: 30px;
 }
+
+.file-upload.list-empty :global(.ant-upload-list) {
+    display: none;
+}
+
 .file-upload :global(.ant-upload-list-item):hover,
 .file-upload :global(.ant-upload-list-item-list-type-text):focus,
 .file-upload :global(.ant-upload-list-item-list-type-text) :global(.ant-upload-list-item-info):hover {
@@ -28,3 +39,8 @@
     width: max-content;
 }
 
+.file-upload .drag {
+    border: 1px dashed var(--heather);
+    font-size: 14px;
+    padding: 20px 16px;
+}

src/components/ViewerOverlayTarget/style.css

@@ -2,7 +2,7 @@
     position: absolute;
     height: 100%;
     width: 100%;
-    z-index: 300;
+    z-index: 1001;
     background-color: rgba(181, 159, 246, 0.7);
 }