Preferred terminology or ols search with ontology filters for edit an…

…d reset
NIH-NCPI · Nov 19, 2024 · 149bea9 · 149bea9
2 parents 4ea054c + 5a3d42c
commit 149bea9
Show file tree

Hide file tree

Showing 16 changed files with 115 additions and 46 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -1,11 +1,28 @@
+body{
+
+    background: url('./assets/Background.png');
+    background-size: 100vw;
+    background-repeat: no-repeat;
+    background-position: calc(50% - 50px) 50%;
+    background-attachment: fixed;
+
+}
 .approuter_div {
   display: flex;
+  min-height: 100vh;
   flex-direction: column;
   justify-content: space-between;
 }
 
 .outlet_div {
-  min-height: 100vh;
-  height: 100%;
   position: relative;
+  background-color: rgba(255,255,255,.3);
 }
+
+.header {
+  z-index: 100;
+  position: sticky;
+  top:0;
+}
+
+
diff --git a/src/AppRouter.jsx b/src/AppRouter.jsx
@@ -6,7 +6,11 @@ import {
   Routes,
   Navigate,
 } from 'react-router-dom';
+import { useContext } from 'react';
+import { myContext } from './App.jsx';
 import { NavBar } from './components/Nav/NavBar';
+import { Login } from './components/Auth/Login.jsx';
+import { LoginPage } from './components/Auth/LoginPage.jsx';
 import { Breadcrumbs } from './components/Nav/Breadcrumbs.jsx';
 import { Footer } from './components/Nav/Footer';
 import { SearchResults } from './components/Search/SearchResults';
@@ -15,7 +19,6 @@ import { TableDetails } from './components/Projects/Tables/TableDetails';
 import { DDDetails } from './components/Projects/DataDictionaries/DDDetails';
 import { StudyDetails } from './components/Projects/Studies/StudyDetails';
 import { StudyList } from './components/Projects/Studies/StudyList';
-
 import './App.scss';
 import { PageLayout } from './components/Styling/PageLayout.jsx';
 import { MappingContextRoot } from './Contexts/MappingContext.jsx';
@@ -26,6 +29,17 @@ import { SearchContextRoot } from './Contexts/SearchContext.jsx';
 import { About } from './components/About/About.jsx';
 
 export const AppRouter = () => {
+ const {user} = useContext(myContext);
+
+  const isLoggedIn = () => {
+    const storedUser = localStorage.getItem('user');
+
+    if (storedUser) {
+      return true;
+    } else {
+      return false;
+    }
+  }
   return (
     <BrowserRouter>
       <Routes>
@@ -34,8 +48,10 @@ export const AppRouter = () => {
           element={
             <>
               <div className="approuter_div">
-                <NavBar />
-                <Breadcrumbs />
+                <div className="header">
+                  <NavBar />
+                  <Breadcrumbs />
+                </div>
                 <div className="outlet_div">
                   <Outlet />
                 </div>
@@ -48,45 +64,47 @@ export const AppRouter = () => {
           <Route element={<PageLayout />}>
             <Route path="/search/:query" element={<SearchResults />} />
             <Route path="/404" element={<Error404 />} />
+
             <Route path="/ontologies" element={<OntologyInfo />} />
             <Route path="/about" element={<About />} />
-            <Route path="/terminologies" element={<TerminologyList />} />
+            <Route path="/terminologies" element={ isLoggedIn() ? <TerminologyList />:<Navigate to="/login" /> } />
+            <Route path="/login" element={<LoginPage/>}/>
             <Route
               path="/terminology"
               element={<Navigate to="/terminologies" />}
             />
             <Route element={<MappingContextRoot />}>
               <Route element={<SearchContextRoot />}>
-                <Route path="/studies" element={<StudyList />} />
+                <Route path="/studies" element={isLoggedIn() ? <StudyList />: <Navigate to="/login" />} />
                 <Route path="/study" element={<Navigate to="/studies" />} />
                 <Route path="/Study/:studyId">
-                  <Route index element={<StudyDetails />} />
+                  <Route index element={isLoggedIn() ? <StudyDetails />: <Navigate to="/login" />} />
                   <Route path="DataDictionary">
-                    <Route index element={<StudyDetails />} />
+                    <Route index element={isLoggedIn() ? <StudyDetails />: <Navigate to="/login" />} />
                     <Route
                       path="/Study/:studyId/DataDictionary/:DDId/Table/"
-                      element={<DDDetails />}
+                      element={isLoggedIn() ? <DDDetails />: <Navigate to="/login" />}
                     />
                     <Route path="/Study/:studyId/DataDictionary/:DDId">
-                      <Route index element={<DDDetails />} />
+                      <Route index element={isLoggedIn() ? <DDDetails />: <Navigate to="/login" />} />
                       <Route
                         path="/Study/:studyId/DataDictionary/:DDId/Table/:tableId"
-                        element={<TableDetails />}
+                        element={isLoggedIn() ? <TableDetails />: <Navigate to="/login" />}
                       />
                       <Route
                         path="/Study/:studyId/DataDictionary/:DDId/Table/:tableId/Terminology/:terminologyId"
-                        element={<Terminology />}
+                        element={isLoggedIn() ? <Terminology />: <Navigate to="/login" />}
                       />
                       <Route
                         path="/Study/:studyId/DataDictionary/:DDId/Table/:tableId/Terminology/"
-                        element={<Terminology />}
+                        element={isLoggedIn() ? <Terminology />: <Navigate to="/login" />}
                       />
                     </Route>
                   </Route>
                 </Route>
                 <Route
                   path="/Terminology/:terminologyId"
-                  element={<Terminology />}
+                  element={isLoggedIn() ? <Terminology />: <Navigate to="/login" />}
                 />
               </Route>
             </Route>

diff --git a/src/components/Auth/Login.jsx b/src/components/Auth/Login.jsx
@@ -37,4 +37,4 @@ export const Login = () => {
       />
     </div>
   );
-};
+};
diff --git a/src/components/Auth/LoginPage.jsx b/src/components/Auth/LoginPage.jsx
@@ -0,0 +1,14 @@
+import { Login } from "./Login"
+import { useContext } from 'react';
+import { myContext } from '../../App';
+export const LoginPage = () => {
+    const {user} = useContext(myContext);
+    return <div style={{background:"rgba(0,0,0,.2"}}>
+        {user &&
+        <h2 style={{textAlign:"center",paddingTop:'5rem'}}>You are logged in and can navigate to the rest of the site</h2>}
+        <div style={{ height:"5rem",display:"flex",flexDirection:"column",justifyContent:"space-around",alignItems:"center"}}>
+            <Login />
+        </div>
+
+    </div>
+}
diff --git a/src/components/Auth/Logout.jsx b/src/components/Auth/Logout.jsx
@@ -26,4 +26,4 @@ export const Logout = ({ user, setUser }) => {
       </div>
     </>
   );
-};
+};
diff --git a/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx b/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx
@@ -42,6 +42,7 @@ export const GetMappingsModal = ({
     setUnformattedPref,
     prefTypeKey,
     ontologyApis,
+    setPrefTerminologies,
   } = useContext(SearchContext);
   const [page, setPage] = useState(0);
   const entriesPerPage = 1000;
@@ -142,6 +143,7 @@ export const GetMappingsModal = ({
     setApiPreferencesCode(undefined);
     setSelectedBoxes([]);
     setSelectedKey(null);
+    setPrefTerminologies([]);
   };
 
   // Sets currentSearchProp to the value of the search bar and sets page to 0.

diff --git a/src/components/Manager/Utilitiy.jsx b/src/components/Manager/Utilitiy.jsx
@@ -39,6 +39,7 @@ export const systemsMatch = (ontologyCode, ontologyApis) => {
   }
   return null; // If not found, return null or handle accordingly
 };
+
 // Iterates over the facet counts in the result to make an object of search results per ontology
 export const ontologyCounts = arr => {
   let result = [];

diff --git a/src/components/Nav/NavBar.jsx b/src/components/Nav/NavBar.jsx
@@ -1,9 +1,23 @@
-import { NavLink } from 'react-router-dom';
+import { NavLink, useNavigate } from 'react-router-dom';
 import './NavBar.scss';
 import { Login } from '../Auth/Login';
-import { GoogleOAuthProvider } from '@react-oauth/google';
+import { useContext, useState } from 'react'
+import { myContext } from '../../App';
+import { RequiredLogin } from '../Auth/RequiredLogin';
 
 export const NavBar = () => {
+  const [routeTo, setRouteTo] = useState(null);
+  const { user } = useContext(myContext);
+  const navigate = useNavigate();
+  const handleSuccess = () => {
+    navigate(routeTo);
+  };
+  const login = RequiredLogin({ handleSuccess: handleSuccess });
+  const handleLogin = (route) => {
+    setRouteTo(route);
+    login();
+  }
+
   return (
     <>
       <nav className="navbar">
@@ -19,12 +33,24 @@ export const NavBar = () => {
             <NavLink to="/">
               <li className="nav_link">Search</li>
             </NavLink>
-            <NavLink to="/studies">
+            <div onClick={() => {
+              if (user) {
+                navigate('/studies')
+              } else {
+                handleLogin('/studies')
+              }
+            }}>
               <li className="nav_link">Studies</li>
-            </NavLink>
-            <NavLink to="/terminologies">
+            </div>
+            <div onClick={() => {
+              if (user) {
+                navigate('/terminologies')
+              } else {
+                handleLogin('/terminologies')
+              }
+            }}>
               <li className="nav_link">Terminologies</li>
-            </NavLink>
+            </div>
             {/* Placeholder elements below. No functionality at this time.*/}
             <NavLink to="/about">
               <li className="nav_link">About</li>
@@ -38,7 +64,7 @@ export const NavBar = () => {
             <Login />
           </div>
         </ul>
-      </nav>
+      </nav >
     </>
   );
 };
diff --git a/src/components/Nav/NavBar.scss b/src/components/Nav/NavBar.scss
@@ -11,8 +11,6 @@ nav.navbar {
   display: flex;
   flex-direction: row;
   justify-content: center;
-  position: sticky;
-  top: 0;
 
   li {
     list-style-type: none;
@@ -70,6 +68,8 @@ nav.navbar {
     padding: 0 4px;
     width: $navHeight;
     border-radius: 10px;
+    font-weight: bold;
+    cursor: pointer;
   }
 
   .nav_link:hover {

diff --git a/src/components/Projects/Studies/StudyStyling.scss b/src/components/Projects/Studies/StudyStyling.scss
@@ -1,7 +1,6 @@
 .studies_container {
   margin: 5vh 10vw 10vh 10vw;
   line-height: 1.5rem;
-  height: 100vh;
 }
 
 .cards_container {

diff --git a/src/components/Projects/Tables/EditMappingsTableModal.jsx b/src/components/Projects/Tables/EditMappingsTableModal.jsx
@@ -206,10 +206,11 @@ export const EditMappingsTableModal = ({
   const editUpdatedMappings = values => {
     setLoading(true);
     const selectedMappings = values?.selected_mappings?.map(item => ({
-      code: item.obo_id,
-      display: item.label,
-      description: item.description[0],
-      system: systemsMatch(item.obo_id.split(':')[0], ontologyApis),
+      code: item.code,
+      display: item.display,
+      description: item.description,
+      system:
+        item.system || systemsMatch(item.obo_id.split(':')[0], ontologyApis),
     }));
     const mappingsDTO = {
       mappings: [

diff --git a/src/components/Projects/Terminologies/APIResults.jsx b/src/components/Projects/Terminologies/APIResults.jsx
@@ -17,6 +17,7 @@ export const APIResults = ({
     apiTotalCount,
     ontologyApis,
   } = useContext(SearchContext);
+
   const [filteredResultsCount, setFilteredResultsCount] = useState(0);
   const [lastCount, setLastCount] = useState(0); //save last count as count of the results before you fetch data again
 

diff --git a/src/components/Projects/Terminologies/AssignMappingsViaButton.jsx b/src/components/Projects/Terminologies/AssignMappingsViaButton.jsx
@@ -23,6 +23,7 @@ export const AssignMappingsViaButton = ({
 
   const onClose = () => {
     setApiResults([]);
+    setSelectedBoxes([]);
   };
   const fetchTerminologies = () => {
     setLoading(true);

diff --git a/src/components/Projects/Terminologies/EditMappingModal.jsx b/src/components/Projects/Terminologies/EditMappingModal.jsx
@@ -207,7 +207,6 @@ export const EditMappingsModal = ({
   // The existing and new mappings are JSON.parsed combined into one mappings array to be passed into the body of the PUT call.
   const editUpdatedMappings = values => {
     setLoading(true);
-    console.log(values);
     const selectedMappings = values?.selected_mappings?.map(item => ({
       code: item.code,
       display: item.display,

diff --git a/src/components/Search/OntologySearch.scss b/src/components/Search/OntologySearch.scss
@@ -1,19 +1,12 @@
 @import '../Styling/Variables';
 
 .search_page {
-  height: 100%;
-  min-height: 100vh;
+
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: {
-    image: url('../../assets/Background.png');
-    size: 100vw;
-    repeat: no-repeat;
-    position: calc(50% - 50px) 50%;
-  }
-  z-index: -1;
+padding:10rem 0rem;
 }
 
 .search_field {

diff --git a/src/components/Styling/PageLayout.jsx b/src/components/Styling/PageLayout.jsx
@@ -3,11 +3,8 @@ import Background from '../../assets/Background.png';
 
 export const PageLayout = () => {
   return (
-    <div>
-      <div className="image_container">
-        <img className="background_image_results" src={Background} />
-      </div>
+    <>
       <Outlet />
-    </div>
+    </>
   );
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,4 +37,4 @@ export const Login = () => { @@
           />
         </div>
       );
-    };
+    };