Merge pull request #1504 from hubmapconsortium/bulkUp

capture of network failures

Author: yuanzhou

src/src/App.css

@@ -921,4 +921,7 @@ svg.invalid {
   font-weight: 300;
   gap: 4px;
   line-height: 1.5;
+}
+.fullDialog .MuiPaper-root{
+  max-width:1200px!important;
 }

src/src/App.js

@@ -230,30 +230,6 @@ export function App (props){
     }
  }, [ ]);
 
-
-  // useEffect(() => {
-  //   console.debug("useEffect ubkg")
-  //   ubkg_api_get_dataset_type_set()
-  //     .then((response) => {
-  //       console.debug('%c⊙', 'color:#00ff7b', "DATSETTYPES", response );
-  //       let dtypes = response;
-  //       setDataTypeList(dtypes);
-  //       setDataTypeListAll(dtypes);
-  //       ubkg_api_get_organ_type_set()
-  //         .then((res) => {
-  //           setOrganList(res);
-  //           setDTLoading(false)
-  //         })
-  //         .catch((err) => {
-  //           reportError(err)
-  //       })
-  //     })
-  //     .catch(error => {
-  //         console.debug('%c⭗', 'color:#ff005d', "APP ubkg_api_get_assay_type_set ERROR", error);
-  //         reportError(error)
-  //     });
-  // }, [ ]);
-
   useEffect(() => {
     if(localStorage.getItem("info")){
       try {

src/src/Nav.js

@@ -18,11 +18,13 @@ import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import LoadingButton from '@mui/lab/LoadingButton';
-
+import MUIDialog from "./components/ui/dialog";
 import UploadsForm from "./components/uploads/createUploads";
 
 export const Navigation = (props) => {
   const [userInfo, setUserInfo] = React.useState();
+  const [metaModalOpen, setMetaModalOpen] = React.useState(false);
+  const [exampleLink, setExampleLink] = React.useState("block");
   // const [userGroups, setUserGroups] = React.useState();
   const [userDataGroups, setUserDataGroups] = React.useState([]);
   const [uploadsDialog, setUploadsDialog] = React.useState(false);
@@ -32,6 +34,9 @@ export const Navigation = (props) => {
   const open_I = Boolean(anchorEl_I);
   const open_B = Boolean(anchorEl_B);
   const open_S = Boolean(anchorEl_S);
+  var dialogMetadataTitle = 'Metadata Bulk Uploading Temporarily Unavailable';
+  var dialogMetadataMessage = "<strong>Please prepare any new data submissions using the new next-generation metadata and directory schemas</strong>, which are linked from <a href=\""+exampleLink+"\"  target=\"_blank\">this page</a>. The schemas you should use are marked <strong>\"use this one\"</strong> on the schema pages. You can validate <strong>next-gen metadata schemas</strong> using the <a href=\"https://docs.google.com/document/d/1lfgiDGbyO4K4Hz1FMsJjmJd9RdwjShtJqFYNwKpbcZY/edit#heading=h.d6xf2xeysl78\" target=\"_blank\">process outlined here</a>. <strong>Please also <a href=\"https://docs.google.com/spreadsheets/d/19ZJx_EVyBGKNeW0xxQlOsMdt1DVNZYWmuG014rXsQP4/edit#gid=0\" target=\"_blank\">update this data pulse check spreadsheet</a></strong> so we know what data is coming from your team. We\'re looking forward to your submissions!<br/> \
+  Please contact <a href=\"mailto:[email protected]\">[email protected]</a> if you have questions.";
   const location = useLocation();
   let navigate = useNavigate();
   useEffect(() => {
@@ -45,6 +50,16 @@ export const Navigation = (props) => {
     }
   }, [props, props.app_info, location]);
 
+  const handleCancel = () => {
+    setMetaModalOpen(false);
+  }  
+  const handleOpenModal = (type) => {
+    let sampleType = type.toString();
+    console.debug('%c◉ type ', 'color:#00ff7b', type, sampleType, typeof sampleType);
+    setExampleLink("https://hubmapconsortium.github.io/ingest-validation-tools/sample-"+sampleType.toLowerCase()+"/current/")
+    console.debug('%c◉ link ', 'color:#00ff7b', exampleLink);
+    setMetaModalOpen(true);
+  }
 
   // @TODO: Dry this up
   const handleClick_S = (event) => {
@@ -79,6 +94,13 @@ export const Navigation = (props) => {
 
   return (
       <AppBar position="static" id="header">
+         <MUIDialog 
+          open={metaModalOpen} 
+          handleClose={handleCancel} 
+          title={dialogMetadataTitle}
+          message={dialogMetadataMessage}
+          // dialogHelpLink={dialogHelpLinkURL}
+          bgcol = "Red" />
         <Dialog open={uploadsDialog}>
           <DialogContent> 
           <UploadsForm
@@ -227,23 +249,23 @@ export const Navigation = (props) => {
                   <MenuItem 
                     className="nav-link" 
                     sx={{ width: "200px" }}
-                    component={Link}
-                    onClick={handleClose}
-                    to="/metadata/block" >
+                    // component={Link}
+                    to="/metadata/block" 
+                    onClick={() => handleOpenModal("Block")}>
                     Block
                   </MenuItem>
                   <MenuItem 
                     className="nav-link" 
                     component={Link}
-                    onClick={handleClose}
-                    to="/metadata/section" >
+                    to="/metadata/section" 
+                    onClick={() => handleOpenModal("Section")}>
                     Section
                   </MenuItem>
                   <MenuItem 
                     className="nav-link" 
                     component={Link}
-                    onClick={handleClose}
-                    to="/metadata/suspension" >
+                    to="/metadata/suspension" 
+                    onClick={() => handleOpenModal("Suspension")}>
                     Suspension
                   </MenuItem>
                 </Menu>
@@ -396,22 +418,22 @@ export const Navigation = (props) => {
                     className="nav-link" 
                     sx={{ width: "200px" }}
                     component={Link}
-                    onClick={handleClose}
-                    to="/metadata/block" >
+                    // to="/metadata/block" 
+                    onClick={() => handleOpenModal("Block")}>
                     Block
                   </MenuItem>
                   <MenuItem 
                     className="nav-link" 
                     component={Link}
-                    onClick={handleClose}
-                    to="/metadata/section" >
+                    // to="/metadata/section" 
+                    onClick={() => handleOpenModal("Section")}>
                     Section
                   </MenuItem>
                   <MenuItem 
                     className="nav-link" 
                     component={Link}
-                    onClick={handleClose}
-                    to="/metadata/suspension" >
+                    // to="/metadata/suspension"
+                    onClick={() => handleOpenModal("Suspension")} >
                     Suspension
                   </MenuItem>
                 </Menu>

src/src/assets/App.css

@@ -855,4 +855,8 @@ svg.invalid{
   font-weight: 300;
   gap: 4px;
   line-height: 1.5;
+}
+
+.fullDialog .MuiPaper-root{
+  max-width:1200px!important;
 }

src/src/components/metadata.jsx

@@ -57,7 +57,7 @@ export const RenderMetadata = (props) => {
     whiteSpace: 'nowrap',
     width: 1,
   });
-
+  
 
   var [errorHandler, setErrorHandler] = useState({
     status: '',
@@ -124,36 +124,28 @@ export const RenderMetadata = (props) => {
                 message: resp.results.message||resp
               })
             } else {
-              console.debug('%c◉ Attach fail ', 'color:#ffe921',resp.error.response.data,resp.error.response.data.error );
+              // console.debug('%c◉ Attach fail ', 'color:#ffe921',resp.error );
+              let err = resp.error?.response?.data?.error ?? resp.error?.response ?? resp.error ?? resp;
               setAttachmentFails(attachmentFails => [...attachmentFails, {
                 status:"failed",
                 row:  thisRow.metadata['file_row'],
-                error: resp.error.response.data.error||resp
+                error: err
               }])
               fails.push({
                 status:"failed",
                 row:  thisRow.metadata['file_row'],
-                error: resp.error.response.data.error||resp
+                error: err
               })
             }
           })
           .catch((error)=>{
-            console.debug('%c◉ entity_api_attach_bulk_metadata Call ERrr ', 'color:#ff005d', error);
-            // console.debug('%c⭗', 'color:#', 'Error', error);
+              setAttachmentFails(attachmentFails => [...attachmentFails, {
+                status:"failed",
+                row:  thisRow.metadata['file_row'],
+                error: error.toString()
+              }])
           })
 
-          // var errorTable = getErrorList(resp.error.response.data)
-          // attachErrorTable.push(errorTable)
-          
-          
-          // console.debug('%c◉ errorTable ', 'color:#ffe921', fails);
-          // setTable(fails)
-          // // setTable(table => [...table, errorTable])
-          // setIssues(resp.error.response.data);
-          // setFailed(1);
-          // setFailedStep(3);
-          // setAttaching(false);
-
         row++ 
         if(row === validatedMeta[0].length){
           setTimeout(() => {
@@ -219,7 +211,11 @@ function getColNames() {
           }
 
           var errorTable = getErrorList(cleanErr)
-          setIssues(resp.error.response.data);
+          if(resp.error && resp.error.response){
+            setIssues(resp.error.response.data);
+          }else{
+            setIssues(resp);
+          }
           setFailed(1);
           setFailedStep(2);
           setActiveStep(4);
@@ -229,7 +225,9 @@ function getColNames() {
         }
       })
       .catch((error) => {
-        console.debug('%c⭗', 'color:#ff005d', 'Error', error,error.description);
+        console.debug('%c⭗ Error Handle Upload File', 'color:#ff005d', error,error.description);
+        let errorTable = getErrorList(error)
+        setIssues(error);
         setProcessed(true);
       });
   };
@@ -503,7 +501,7 @@ const introText = () =>{
                   if(row.status && row.status === "failed"){
                   // if(typeof row.error === 'string' && row.error.indexOf("error: ") === 0){
                     // we're likely a API error not a CEDAR error
-                    return <span>{row.error}</span>
+                    return <span>{row.error.toString()}</span>
                   }
                     // let err = handleErrorRow(row)
 
@@ -560,6 +558,8 @@ const exampleFile ="https://hubmapconsortium.github.io/ingest-validation-tools/s
 
   return (
         <div className="row">
+
+         
           <h4>{toTitleCase(props.type)} Metadata Upload</h4>
           <div className=' col-sm-2' id='stepContainer'>
             <Stepper activeStep={activeStep} orientation="vertical">

src/src/components/ui/dialog.jsx

@@ -0,0 +1,53 @@
+
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faExclamationTriangle} from "@fortawesome/free-solid-svg-icons";
+
+export default function MUIDialog(props) {  
+
+  return (
+    <React.Fragment>
+     
+      <Dialog
+        // onClose={props.handleClose}
+        aria-labelledby="customized-dialog-title"
+        open={props.open}
+        className="fullDialog"
+      >
+        <DialogTitle sx={{ m: 0, p: 2 }} style={{background:"red", color:"white"}} id="customized-dialog-title">
+            <FontAwesomeIcon icon={faExclamationTriangle} style={{ fontSize:"2.5rem", marginRight:"20px"}} sx={{padding:1}}/> {props.title}      </DialogTitle>
+        <IconButton
+          aria-label="close"
+          onClick={props.handleClose}
+          style={{
+            position: 'absolute',
+            right: 10,
+            top: 10,
+            color: "white",
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+        <DialogContent dividers>
+          <Typography dangerouslySetInnerHTML={{ __html:props.message }}>
+            
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button style={{position:"relative",margin:"0 auto 0 auto"}} autoFocus onClick={props.handleClose}>
+            OK
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </React.Fragment>
+  );
+}