Minor UI Adjustments

bhklab · Jun 20, 2023 · 7684583 · 7684583
1 parent 866a7b9
commit 7684583
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 96 deletions.
diff --git a/client/src/components/DataSubmission/MolecularDataForm.js b/client/src/components/DataSubmission/MolecularDataForm.js
@@ -7,7 +7,7 @@ import CustomSelect from '../Shared/CustomSelect';
 const StyledMolecularDataForm = styled.div`
     display: flex;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
 `;
 
 const StyledFormContainer = styled.div`
@@ -23,13 +23,20 @@ const StyledFormContainer = styled.div`
         width: 250px;
         margin-right: 20px;
     }
-    .repo-url {
+    .tool-version {
+        width: 250px;
+        margin-left: 10px;
+    }
+    .first-repo-url {
         width: 350px;
     }
+    .second-repo-url {
+        width: 350px;
+        margin-left: 40px;
+    }
 `;
 
 const StyledButtonField = styled.div`
-    margin-left: 20px;
     .btn {
         margin-left: 10px;
     }
@@ -55,95 +62,99 @@ const MolecularDataForm = (props) => {
     } = props;
 
     return(
-        <StyledMolecularDataForm>
-            <div>
-                <StyledFormContainer>
-                    <CustomSelect 
-                        className='datatype'
-                        label='Data Type:'
-                        name='name'
-                        optionLabel='label'
-                        selected={molecularData.name} 
-                        options={molecularDataOptions}
-                        onChange={(e) => {handleInputChange(e, index, 'name')}}
-                        selectOne={true}
-                    />
-                    <CustomInputText 
-                        className='filename'
-                        label='Filename:'
-                        name='filename'
-                        value={molecularData.filename} 
-                        onChange={(e) => {handleInputChange(e, index, 'filename')}}
-                    />
-                    <CustomInputText 
-                        className='repo-url'
-                        label='Repository URL:'
-                        name='repoURL'
-                        value={molecularData.repoURL} 
-                        onChange={(e) => {handleInputChange(e, index, 'repoURL')}}
-                    />
-                </StyledFormContainer>
-                <StyledFormContainer>
-                    <CustomInputText 
-                        className='filename'
-                        label='Processing Tool:'
-                        name='filename'
-                        value={molecularData.toolname}
-                        onChange={(e) => {handleInputChange(e, index, 'toolname')}}
-                    />
-                    <CustomInputText 
-                        className='filename'
-                        label='Tool Version:'
-                        name='filename'
-                        value={molecularData.toolversion}
-                        onChange={(e) => {handleInputChange(e, index, 'toolversion')}}
-                    />
-                </StyledFormContainer>
-                <StyledFormContainer>
-                    <CustomInputText 
-                        className='filename'
-                        label='Reference Filename:'
-                        name='filename'
-                        value={molecularData.refname}
-                        onChange={(e) => {handleInputChange(e, index, 'refname')}}
-                    />
-                    <CustomInputText 
-                        className='repo-url'
-                        label='Repository URL:'
-                        name='filename'
-                        value={molecularData.refURL}
-                        onChange={(e) => {handleInputChange(e, index, 'refURL')}}
-                    />
-                </StyledFormContainer>
-            </div>
-            <StyledButtonField>
-                { 
-                    index > 0 && 
-                    <Button 
-                        icon='pi pi-times' 
-                        tooltip='Remove' 
-                        className='btn p-button-danger'
-                        onClick={(e) => {handleRemoveClick(e, index)}}
-                    /> 
-                }
-                { 
-                    index === length - 1 && 
-                    <Button 
-                        icon='pi pi-plus' 
-                        tooltip='Add another molecular profile' 
-                        className='btn'
-                        onClick={handleAddClick}
-                        disabled={molecularData.name.length === 0 || molecularData.filename.length === 0 || molecularData.repoURL.length === 0}
-                    /> 
-                }
-                <Button 
-                    icon='pi pi-replay' 
-                    tooltip='Reset' 
-                    className='btn p-button-secondary' 
-                    onClick={(e) => {handleReset(e, index)}}
-                />
-            </StyledButtonField>
-        </StyledMolecularDataForm>
+        <div>
+            <StyledMolecularDataForm>
+                <div>
+                    <StyledFormContainer>
+                        <CustomSelect 
+                            className='datatype'
+                            label='Data Type:'
+                            name='name'
+                            optionLabel='label'
+                            selected={molecularData.name} 
+                            options={molecularDataOptions}
+                            onChange={(e) => {handleInputChange(e, index, 'name')}}
+                            selectOne={true}
+                        />
+                        <CustomInputText 
+                            className='filename'
+                            label='Filename:'
+                            name='filename'
+                            value={molecularData.filename} 
+                            onChange={(e) => {handleInputChange(e, index, 'filename')}}
+                        />
+                        <CustomInputText 
+                            className='first-repo-url'
+                            label='Repository URL:'
+                            name='repoURL'
+                            value={molecularData.repoURL} 
+                            onChange={(e) => {handleInputChange(e, index, 'repoURL')}}
+                        />
+                    </StyledFormContainer>
+                    <StyledFormContainer>
+                        <CustomInputText 
+                            className='filename'
+                            label='Processing Tool:'
+                            name='filename'
+                            value={molecularData.toolname}
+                            onChange={(e) => {handleInputChange(e, index, 'toolname')}}
+                        />
+                        <CustomInputText 
+                            className='tool-version'
+                            label='Tool Version:'
+                            name='filename'
+                            value={molecularData.toolversion}
+                            onChange={(e) => {handleInputChange(e, index, 'toolversion')}}
+                        />
+                    </StyledFormContainer>
+                    <StyledFormContainer className='processed-molecular'>
+                        <CustomInputText 
+                            className='filename'
+                            label='Reference Filename:'
+                            name='filename'
+                            value={molecularData.refname}
+                            onChange={(e) => {handleInputChange(e, index, 'refname')}}
+                        />
+                        <CustomInputText 
+                            className='second-repo-url'
+                            label='Repository URL:'
+                            name='filename'
+                            value={molecularData.refURL}
+                            onChange={(e) => {handleInputChange(e, index, 'refURL')}}
+                        />
+                    </StyledFormContainer>
+                </div>
+                    </StyledMolecularDataForm>
+
+
+                    <StyledButtonField>
+                    { 
+                        index > 0 && 
+                        <Button 
+                            icon='pi pi-times' 
+                            tooltip='Remove' 
+                            className='btn p-button-danger'
+                            onClick={(e) => {handleRemoveClick(e, index)}}
+                        /> 
+                    }
+                    { 
+                        index === length - 1 && 
+                        <Button 
+                            icon='pi pi-plus' 
+                            tooltip='Add another molecular profile' 
+                            className='btn'
+                            onClick={handleAddClick}
+                            disabled={molecularData.name.length === 0 || molecularData.filename.length === 0 || molecularData.repoURL.length === 0}
+                        /> 
+                    }
+                        <Button 
+                            icon='pi pi-replay' 
+                            tooltip='Reset' 
+                            className='btn p-button-secondary' 
+                            onClick={(e) => {handleReset(e, index)}}
+                        />
+                </StyledButtonField>   
+            </div>     
     );
 }
 

diff --git a/client/src/components/Footer/Footer.js b/client/src/components/Footer/Footer.js
@@ -10,7 +10,7 @@ const StyledFooter = styled.div`
     bottom: 0%;
     width: 100%;
     background-color: rgb(255,255,255, 0.7);
-    height: 150px;
+    height: 200px;
     font-size: calc(0.7em + 0.2vw);
     padding: 10px 0;
     display: flex;
@@ -75,7 +75,8 @@ const Footer = () => {
                             <NavLink exact to={`/${dataTypes.pharmacogenomics}`} onClick={() => {path.setDatatype(dataTypes.pharmacogenomics)}}>Pharmacogenomics Data</NavLink>
                             <NavLink exact to={`/${dataTypes.toxicogenomics}`} onClick={() => {path.setDatatype(dataTypes.toxicogenomics)}}>Toxicogenomics Data</NavLink>
                             <NavLink exact to={`/${dataTypes.xenographic}`} onClick={() => {path.setDatatype(dataTypes.xenographic)}}>Xenographic Pharmacogenomics Data</NavLink>
-                            <div>Clinical Genomics Data (Coming soon)</div>
+                            <NavLink exact to={`/${dataTypes.clinicalgenomics}`} onClick={() => {path.setDatatype(dataTypes.clinicalgenomics)}}>Clinical Genomics Data</NavLink>
+                            <NavLink exact to={`/${dataTypes.icb}`} onClick={() => {path.setDatatype(dataTypes.icb)}}>Immune Checkpoint Blockade Data</NavLink>
                             <div>Radiogenomics Data (Coming soon)</div>
                         </React.Fragment>
                         :
@@ -98,7 +99,7 @@ const Footer = () => {
                     }
                     <a href="https://github.com/bhklab">GitHub</a>
                     <a href="https://bhklab.ca/">BHKLab</a>
-                    <div>[email protected]</div>
+                    <a href='mailto: [email protected]'>[email protected]</a>
                 </div>
                 <div className="footerContact">
                     <h3>BHKLab</h3>

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "myLocalProj",
+  "name": "localproj",
   "version": "1.0.0",
   "description": "",
   "scripts": {