v2.0.1 (#10)

* Place dropdown menu above the subheader componen

* Allow gif upload and set max image file size to 5 MB

* Update ticket number description

* Update introduction text

* Collapse menu button if page width is too small

* Minor css update

* Update ProgressBar.js

Fix hover/tooltip text

* Update version.js

Author: ehennestad

server/routes/upload.js

@@ -11,10 +11,10 @@ const router = express.Router();
 // Todo: Change file upload limit to 5? MB when understanding why openshift server is not able to handle files larger than 1MB. nginx client_max_body_size?  
 
 // Configure the file upload middleware
-const maxFileSizeMB = 1;
+const maxFileSizeMB = 5;
 const sizeLimitMessage = `File size limit exceeded. Maximum file size is ${maxFileSizeMB} MB.`
 
-const maxFileSize = maxFileSizeMB * 1024 * 1024; // 1 MB
+const maxFileSize = maxFileSizeMB * 1024 * 1024; // File size in MB
 const uploadOptions = { limits: { fileSize: maxFileSize }, debug:true, useTempFiles:true, abortOnLimit:true, responseOnLimit:sizeLimitMessage}
 router.use( fileUpload(uploadOptions) );
 

src/App.css

@@ -73,7 +73,7 @@
   height: 30px;
 }
 
-.gradient {
+.container-gradient {
   background-image: linear-gradient(to left,  var(--ebrains-color-light), var(--ebrains-color-medium), var(--ebrains-color-dark));
   min-height: 1vh;
   display: flex;
@@ -82,27 +82,32 @@
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
+  z-index: 9996;
 }
 
-.subheader {
+.container-subheader {
   background-color: var(--form-background-color);
   margin-bottom: 40px;
   position: -webkit-sticky; /* Safari */
   position: sticky;
-  z-index: 9999;
+  z-index: 9998;
   top: 0;
   box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, rgba(0, 0, 0, 0.05) 0px 1px 4px 0px, rgba(0, 0, 0, 0.05) 0px 2px 8px 0px;
 }
+.ant-dropdown {
+  z-index: 9999;
+}
 
 .privacy-notice {
-  width: 80%;
+  width: 70%;
   display: inline-block;
   text-align: left;
   margin: 0 auto;
 }
 
 .subheader-menu {
-  width: 20%;
+  width: 30%;
+  padding-right: 0px;
   padding-top: 5px;
   padding-bottom: 5px;
   display: inline-block;
@@ -142,7 +147,7 @@
   margin-left: auto;
   margin-right: auto;
   padding: 5px 60px 5px 60px;
-  max-width: var(--max-content-width);;
+  max-width: var(--max-content-width);
 }
 
 .container-header {
@@ -153,6 +158,7 @@
   padding: 0px 60px 0px 60px;
   max-width: var(--max-content-width);
   border-radius: 20px;
+  z-index: 9997;
 }
 
 .container-form {

src/App.js

@@ -31,7 +31,7 @@ const App = () => {
           <a href="/"><img src="EBRAINS-Curation-Services.png" alt="EBRAINS Curation Services Logo" width="100%" style={{"margin":"10px","display":"block","marginLeft":"auto","marginRight":"auto"}} /></a>
         </div>
       </header>
-      <div className="gradient"></div>
+      <div className="container-gradient"></div>
 
       <BrowserRouter>
         <Routes>
@@ -43,7 +43,7 @@ const App = () => {
 
           <Route path="/" element={ 
             <div>
-              <div className="subheader">
+              <div className="container-subheader">
                 <div className="content-container">
                   <div className="privacy-notice">
                     <PrivacyBanner />

src/components/DropdownMenu.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DownloadOutlined, UploadOutlined, DeleteOutlined, MenuOutlined } from '@ant-design/icons';
 import { Dropdown, Space } from 'antd';
 import ConfigProvider from './ConfigProvider';
@@ -22,6 +23,19 @@ const items = [
 
 const DropdownMenu = ({handleMenuSelection}) => {
 
+  const [isCollapsed, setIsCollapsed] = React.useState(false);
+
+  React.useEffect(() => {
+    function handleResize() {
+      if (window.innerWidth < 700) {
+        setIsCollapsed(true)
+      } else {
+        setIsCollapsed(false)
+      }
+    }
+    window.addEventListener('resize', handleResize)
+  })
+
   const handleMenuClick = (item) => { 
     handleMenuSelection(items[item.key - 1].label) }
 
@@ -37,8 +51,8 @@ const DropdownMenu = ({handleMenuSelection}) => {
   return (
   <Space wrap>
       <ConfigProvider componentSize={"large"}>
-        <Dropdown.Button menu={menuProps} onClick={handleButtonClick} icon={<MenuOutlined />}>
-        Download form data
+        <Dropdown.Button menu={menuProps} onClick={handleButtonClick} icon={<MenuOutlined />} title={'Download form data'}>
+        { isCollapsed ? <DownloadOutlined /> : "Download form data" }
         </Dropdown.Button>
       </ConfigProvider>
   </Space>

src/components/ImageUpload.js

@@ -55,16 +55,17 @@ const ImageUpload = ({oldFileList, onImageUploadedFcn}) => {
   // };
 
   const beforeUpload = (file) => {
-    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-    if (!isJpgOrPng) {
-      message.error('You can only upload JPG/PNG file!');
+    const isValidImageFormat = file.type === 'image/jpeg' || file.type === 'image/png'; // Todo: add gif
+    if (!isValidImageFormat) {
+      message.error('You can only upload a JPG/PNG/GIF file!');
     }
 
-    const isLt2M = file.size / 1024 / 1024 < 5;
-    if (!isLt2M) {
+    const isLt5M = file.size / 1024 / 1024 < 5;
+    if (!isLt5M) {
       message.error('Image must smaller than 5MB!');
     }
-    return isJpgOrPng && isLt2M;
+
+    return isValidImageFormat && isLt5M;
   };
 
   const uploadButton = (
@@ -83,7 +84,7 @@ const ImageUpload = ({oldFileList, onImageUploadedFcn}) => {
         <ImgCrop quality={1} grid>
           <Upload
             action='/api/upload/previewImage'
-            accept=".png,.jpg"
+            accept=".png,.jpg,.gif"
             listType="picture"
             fileList={fileList}
             beforeUpload={beforeUpload}

src/components/ProgressBar.js

@@ -7,17 +7,35 @@ import ConfigProvider from './ConfigProvider';
 const WIZARD_STEP_NAMES = [ "Introduction", "Dataset part 1", "Dataset part 2", "Funding", "Contributors", "Experiments" ];
 const NUM_STEPS = WIZARD_STEP_NAMES.length;
 
-const customDot = (dot, { status, index }) => (
-  <Popover
-    content={
-      <span>
-        Step {index+1} of {NUM_STEPS} - Status: {status}
-      </span>
-    }
-  >
-    {dot}
-  </Popover>
-);
+const customDot = (dot, { status, index }) => {
+
+  // Update status message
+  switch (status) {
+    case 'process':
+      status = 'In progress';
+      break;
+    case 'finish':
+      status = 'Completed';
+      break;
+    case 'wait':
+      status = 'Incomplete';
+      break;
+    default:
+      status = 'Incomplete';
+  }
+
+  return (
+    <Popover
+      content={
+        <span>
+          Step {index+1} of {NUM_STEPS} - Status: {status}
+        </span>
+      }
+    >
+      {dot}
+    </Popover>
+  );
+};
 //const description = 'Incomplete';
 
 const ProgressBar = ({step, status, onChanged}) => {

src/version.js

@@ -1,2 +1,2 @@
-const wizardVersion = '2.0.0';
+const wizardVersion = '2.0.1';
 export default wizardVersion 

templates/source_schemas/general.json

@@ -10,7 +10,7 @@
     "ticketNumber": {
       "title": "Ticket number",
       "type": "string",
-      "description": "If you have a ticket number, please enter it here. The ticket number can be found in the subject line in email correspondence with the curation team, e.g Ticket#4815613."
+      "description": "This field might be pre-filled. If not, you can find the ticket number in the subject line of email correspondence with the curation team, e.g Ticket#4815613. If you have not yet received a ticket number, you can leave this field blank."
     },
     "contactperson": {
       "title": "Contact person",

templates/text_modules/Introduction.html

@@ -1,16 +1,10 @@
 <p>
-    Thank you for choosing EBRAINS to share your research data. This form helps you describe key aspects of your dataset so that other researchers will be able to find, reuse and cite your work. We collect information in the following categories:
+    Thank you for choosing EBRAINS to share your research data. In this form, you can describe key aspects of your dataset so that other researchers will be able to find, reuse and cite your work. You can use the navigation bar above to explore the different sections and categories of metadata collected through this form.
 </p>
 
 <p>
-    <ul>
-        <li>Data owner and contributors
-        <li>Experimental methods and subjects
-        <li>Licensing, embargo and funding
-        <li>Related publications
-    </ul>
+    While filling out the form, please <b>remember to consider all data</b> related to the dataset that you wish to publish on EBRAINS. Once you complete the form, metadata describing your dataset will be curated according to the <a href='https://github.com/HumanBrainProject/openMINDS' target='_blank' rel='noreferrer'>openMINDS</a> standard.
 </p>
-
 <p>
-    While filling out the form, please <b>remember to consider all data</b> related to the dataset that you wish to publish on EBRAINS. Once you complete the form, metadata describing your dataset will be curated according to the openMINDS standard (<a href='https://github.com/HumanBrainProject/openMINDS' target='_blank' rel='noreferrer'>open Metadata Initiative for Neuroscience Data Structures</a>).
-</p>
+    <b>Note:</b> If you are interrupted or unable to complete the form in one session, you can download the form as a JSON using the "Download form data" button on the top of the page, and then re-upload it later to continue where you left off.
+</p>