Skip to content

Commit

Permalink
Merge pull request #1504 from hubmapconsortium/bulkUp
Browse files Browse the repository at this point in the history
capture of network failures
  • Loading branch information
yuanzhou authored Dec 4, 2024
2 parents 909cf8f + 38708d7 commit 43d97c3
Show file tree
Hide file tree
Showing 6 changed files with 117 additions and 59 deletions.
3 changes: 3 additions & 0 deletions src/src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -921,4 +921,7 @@ svg.invalid {
font-weight: 300;
gap: 4px;
line-height: 1.5;
}
.fullDialog .MuiPaper-root{
max-width:1200px!important;
}
24 changes: 0 additions & 24 deletions src/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
50 changes: 36 additions & 14 deletions src/src/Nav.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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:help@hubmapconsortium.org\">help@hubmapconsortium.org</a> if you have questions.";
const location = useLocation();
let navigate = useNavigate();
useEffect(() => {
Expand All @@ -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) => {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions src/src/assets/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -855,4 +855,8 @@ svg.invalid{
font-weight: 300;
gap: 4px;
line-height: 1.5;
}

.fullDialog .MuiPaper-root{
max-width:1200px!important;
}
42 changes: 21 additions & 21 deletions src/src/components/metadata.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export const RenderMetadata = (props) => {
whiteSpace: 'nowrap',
width: 1,
});


var [errorHandler, setErrorHandler] = useState({
status: '',
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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);
Expand All @@ -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);
});
};
Expand Down Expand Up @@ -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)

Expand Down Expand Up @@ -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">
Expand Down
53 changes: 53 additions & 0 deletions src/src/components/ui/dialog.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}

0 comments on commit 43d97c3

Please sign in to comment.