Dataset upgrades

src/.gitignore

@@ -31,7 +31,7 @@ src/ingest-ui/.pnp.js
 # testing
 src/react-app/coverage
 thunder-tests/
-cypress/screenshots
+cypress/*
 
 # env files
 src/.env.*

src/src/App.js

@@ -28,7 +28,7 @@ import Forms from "./components/uuid/forms";
 import {BuildError} from "./utils/error_helper";
 import {Navigation} from "./Nav";
 import Result from "./components/ui/result";
-import SpeedDialTooltipOpen from './components/ui/formParts';
+import {SpeedDialTooltipOpen} from './components/ui/formParts';
 import {sortGroupsByDisplay,adminStatusValidation} from "./service/user_service";
 import {api_validate_token} from './service/search_api';
 import {ubkg_api_get_dataset_type_set,ubkg_api_get_organ_type_set} from "./service/ubkg_api";
@@ -50,6 +50,9 @@ import {DonorForm} from "./components/newDonor";
 import {UploadForm} from "./components/newUpload";
 import {SampleForm} from "./components/newSample";
 import {PublicationForm} from "./components/newPublication";
+import {DatasetForm} from "./components/newDataset";
+
+import NotFound from "./components/404";
 
 export function App(props){
   let navigate = useNavigate();
@@ -67,8 +70,8 @@ export function App(props){
   var[timerStatus, setTimerStatus] = useState(true);
 
   // Data to fill in UI Elements
-  var[dataTypeList, setDataTypeList] = useState({}); //@TODO: Remove & use Local in forms
-  var[dataTypeListAll, setDataTypeListAll] = useState({}); //@TODO: Remove & use Local in forms
+  // var[dataTypeList, setDataTypeList] = useState({}); //@TODO: Remove & use Local in forms
+  // var[dataTypeListAll, setDataTypeListAll] = useState({}); //@TODO: Remove & use Local in forms
   var[organList, setOrganList] = useState(); //@TODO: Remove & use Local in Search
   // var [userDataGroups, setUserDataGroups] = useState({}); //@TODO: Remove & use Local in forms
 
@@ -131,8 +134,8 @@ export function App(props){
           if(res !== undefined){
             localStorage.setItem("datasetTypes",JSON.stringify(res));
             // TODO: Eventually remove these & use localstorage
-            setDataTypeList(res);
-            setDataTypeListAll(res);
+            // setDataTypeList(res);
+            // setDataTypeListAll(res);
           }else{
             setAPIErr(["UBKG API : Dataset Types",'No local DATASET TYPE definitions were found and none could be fetched  Please try again later, or contact [email protected]',res])
             reportError(res)
@@ -527,10 +530,10 @@ export function App(props){
                       <Route path='donor' element={ <DonorForm onCreated={(response) => creationSuccess(response)}/>}/>
                       <Route path='sample' element={<SampleForm onCreated={(response) => creationSuccess(response)} /> }/> 
                       <Route path='publication' element={<PublicationForm onCreated={(response) => creationSuccess(response)}/>} /> 
-                      <Route path='collection' element={<RenderCollection dataGroups={JSON.parse(localStorage.getItem("userGroups"))} dtl_all={dataTypeList} newForm={true} reportError={reportError} groupsToken={groupsToken} onCreated={(response) => creationSuccess(response)} onReturn={() => onClose()} handleCancel={() => handleCancel()} /> }/>
-                      <Route path='epicollection' element={<RenderEPICollection dataGroups={JSON.parse(localStorage.getItem("userGroups"))} dtl_all={dataTypeList} newForm={true} reportError={reportError} groupsToken={groupsToken} onCreated={(response) => creationSuccess(response)} onReturn={() => onClose()} handleCancel={() => handleCancel()} /> }/>
+                      <Route path='collection' element={<RenderCollection dataGroups={JSON.parse(localStorage.getItem("userGroups"))}  newForm={true} reportError={reportError} groupsToken={groupsToken} onCreated={(response) => creationSuccess(response)} onReturn={() => onClose()} handleCancel={() => handleCancel()} /> }/>
+                      <Route path='epicollection' element={<RenderEPICollection dataGroups={JSON.parse(localStorage.getItem("userGroups"))}  newForm={true} reportError={reportError} groupsToken={groupsToken} onCreated={(response) => creationSuccess(response)} onReturn={() => onClose()} handleCancel={() => handleCancel()} /> }/>
                       <Route path="dataset" element={<SearchComponent reportError={reportError} filter_type="Dataset" urlChange={(event, params, details) => urlChange(event, params, details)} routingMessage={routingMessage.Datasets} />} ></Route>
-                      <Route path='datasetAdmin' element={<Forms reportError={reportError} formType='dataset' dataTypeList={dataTypeList} dtl_all={dataTypeList} dtl_primary={dataTypeList}new='true' onReturn={onClose} handleCancel={handleCancel} /> }/> 
+                      <Route path='datasetAdmin' element={<DatasetForm onCreated={(response) => creationSuccess(response)}/>}/>
                       <Route path='upload' element={ <UploadForm onCreated={(response) => creationSuccess(response)}/>}/>
                       {/* In Develpment here */}
                     </Route>
@@ -543,23 +546,25 @@ export function App(props){
 
                     <Route path="/donor/:uuid" element={<DonorForm onUpdated={(response) => updateSuccess(response)}/>} />
                     <Route path="/sample/:uuid" element={<SampleForm onUpdated={(response) => updateSuccess(response)}/>} />
-                    <Route path="/dataset/:uuid" element={<RenderDataset reportError={reportError} dataTypeList={dataTypeList} handleCancel={handleCancel} allGroups={allGroups} status="view"/>} />
-                    {/* <Route path="/upload/:uuid" element={<RenderUpload reportError={reportError} handleCancel={handleCancel} status="view" allGroups={allGroups}/>} /> */}
+                    <Route path="/dataset/:uuid" element={<DatasetForm onUpdated={(response) => updateSuccess(response)}/>} />
+                    <Route path="/upload/:uuid" element={ <UploadForm onUpdated={(response) => updateSuccess(response)}/>} />
+
                     <Route path="/publication/:uuid" element={<PublicationForm onUpdated={(response) => updateSuccess(response)} />} />
-                    <Route path="/collection/:uuid" element={<RenderCollection groupsToken={groupsToken} dataGroups={JSON.parse(localStorage.getItem("userGroups"))} dtl_all={dataTypeListAll} onUpdated={(response) => updateSuccess(response)} reportError={reportError} handleCancel={handleCancel} status="view" />} />
-                    <Route path="/epicollection/:uuid" element={<RenderEPICollection groupsToken={groupsToken} dataGroups={JSON.parse(localStorage.getItem("userGroups"))} dtl_all={dataTypeListAll} onUpdated={(response) => updateSuccess(response)} reportError={reportError} handleCancel={handleCancel} status="view" />} />
+                    <Route path="/collection/:uuid" element={<RenderCollection groupsToken={groupsToken} dataGroups={JSON.parse(localStorage.getItem("userGroups"))} onUpdated={(response) => updateSuccess(response)} reportError={reportError} handleCancel={handleCancel} status="view" />} />
+                    <Route path="/epicollection/:uuid" element={<RenderEPICollection groupsToken={groupsToken} dataGroups={JSON.parse(localStorage.getItem("userGroups"))} onUpdated={(response) => updateSuccess(response)} reportError={reportError} handleCancel={handleCancel} status="view" />} />
 
                     <Route path="/bulk/donors" exact element={<RenderBulk reportError={reportError} bulkType="donors" />} />
                     <Route path="/bulk/samples" exact element={<RenderBulk reportError={reportError} bulkType="samples" />} />
+
                     <Route path="/metadata">
                       <Route index element={<RenderMetadata reportError={reportError} type="block" />} />
                       <Route path='block' element={ <RenderMetadata reportError={reportError} type='block'/>}/>
                       <Route path='section' element={ <RenderMetadata reportError={reportError} type='section'/>}/>
                       <Route path='suspension' element={ <RenderMetadata reportError={reportError} type='suspension'/>}/>
                     </Route>
 
-                    {/* In Develpment here */}
-                    <Route path="/upload/:uuid" element={ <UploadForm onUpdated={(response) => updateSuccess(response)}/>} />
+                    {/* 404 */}
+                    <Route path="/notFound" element={ <NotFound /> } />
 
                   </Routes>
 

src/src/components/404.jsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { Box, Typography, Button } from "@mui/material";
+import WarningIcon from '@mui/icons-material/Warning';
+import { useNavigate } from "react-router-dom";
+import HealingIcon from '@mui/icons-material/Healing';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import HomeIcon from '@mui/icons-material/Home';
+
+export default function NotFound() {
+  const navigate = useNavigate();
+  const params = new URLSearchParams(window.location.search);
+  const entityID = params.get('entityID');
+  return (
+    <Box
+      sx={{
+        minHeight: "60vh",
+        display: "flex",
+        flexDirection: { xs: "column", sm: "row" },
+        alignItems: "stretch",
+        justifyContent: "center",
+        // border: "1px solid linear-gradient(180deg, #444a65 0%, #585e7a 100%)",
+        color: "#444a65",
+        borderRadius: "12px",
+        // boxShadow:0,
+        margin: "40px auto",
+        // maxWidth: 
+        width:"100%",
+        padding: 4}}>
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          justifyContent: "center",
+          pr: { sm: 4, xs: 0 },
+          color:"#ff005d",
+          borderRight: { sm: "2px solid #ff005d", xs: "none" },
+          mb: { xs: 3, sm: 0 }}}>
+        <Typography variant="h3" sx={{ fontWeight: "bold", mb: 1}}>
+          <HealingIcon sx={{ fontSize: 64, mb: 2 }} /> 404
+        </Typography>
+        <Typography variant="h5" sx={{ mb: 2 }}>
+          Entity Not Found
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          flex: 2,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          justifyContent: "center",
+          pl: { sm: 4, xs: 0 },
+        }}>
+        <Typography variant="body1" sx={{ mb: 3 }}>
+          Sorry, the Entity you are looking for  {entityID ? (<Typography variant="caption" component="span" sx={{background:"#ff005d", color:"#fff", padding:"5px", borderRadius:"1em",fontWeight:"bold"}}>({entityID})</Typography>) : ""}  was not found in neo4j. Please check the ID value again, return to the homepage, or try searching for it.
+        </Typography>
+        <Box sx={{ display: "flex", gap: 2 }}>
+          <Button
+            variant="contained"
+            startIcon={<HomeIcon />}
+            sx={{ background: "#444a65", color: "#fff", fontWeight: "bold" }}
+            onClick={() => navigate("/")}>
+            Go Home
+          </Button>
+          {/* {entityID && (
+            <Button
+              variant="outlined"
+              endIcon={<KeyboardArrowRightIcon />}
+              sx={{ color: "#444a65",  borderColor:"#444a65",  }}
+              onClick={() => navigate(`/?keywords=${entityID}`)}>
+              Search for {entityID}
+            </Button>
+          )} */}
+        </Box>
+
+      </Box>
+    </Box>
+  );
+}

src/src/components/collections.jsx

@@ -107,7 +107,7 @@ export const RenderCollection = (props) => {
             editingCollection={entity_data} 
             // writeable={true}
             dataGroups={dataGroups}
-            dtl_all={props.dtl_all}
+            dtl_all={localStorage.getItem("datasetTypes") ? JSON.parse(localStorage.getItem("datasetTypes")) : []}
             newForm={ isNew ? true : null}
             />
         </div>

src/src/components/collections/collections.jsx

@@ -104,7 +104,7 @@ export function CollectionForm (props){
   // Props
   var [isNew] = useState(props.newForm);
   var [dataGroups] = useState(props.dataGroups);
-  var [datatypeList] = useState(props.dtl_all);
+  // var [datatypeList] = useState(props.dtl_all);
   var [editingCollection] = useState(props.editingCollection);
 
 

src/src/components/epicollections.jsx

@@ -107,7 +107,7 @@ export const RenderEPICollection = (props) => {
             editingCollection={entity_data} 
             // writeable={true}
             dataGroups={dataGroups}
-            dtl_all={props.dtl_all}
+            dtl_all={localStorage.getItem("datasetTypes") ? JSON.parse(localStorage.getItem("datasetTypes")) : []}
             newForm={ isNew ? true : null}
             />
         </div>