Uat release

.env

@@ -0,0 +1,6 @@
+VITE_SEARCH_ENDPOINT = https://www.ebi.ac.uk/ols4/api/search?
+VITE_MONARCH_SEARCH = https://api-v3.monarchinitiative.org/v3/api/search?
+# VITE_VOCAB_ENDPOINT = http://127.0.0.1:5000/api # local
+VITE_VOCAB_ENDPOINT = https://locutus-110109177269.us-central1.run.app/api # dev
+# VITE_VOCAB_ENDPOINT = https://locutus-1066621297011.us-central1.run.app/api # uat
+VITE_CLIENT_ID = 907694787484-36jr4oaf04mmniik6482batc87ejemm8.apps.googleusercontent.com

.gitignore

@@ -27,3 +27,4 @@ dist-ssr
 .env.local
 .env.qa
 .env.dev
+.env

package.json

@@ -12,6 +12,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.5.1",
     "@react-oauth/google": "^0.12.1",
     "antd": "^5.15.2",
     "jwt-decode": "^4.0.0",

src/App.jsx

@@ -7,6 +7,7 @@ export const myContext = createContext();
 
 function App() {
   const searchUrl = import.meta.env.VITE_SEARCH_ENDPOINT;
+  const monarchUrl = import.meta.env.VITE_MONARCH_SEARCH;
   const vocabUrl = import.meta.env.VITE_VOCAB_ENDPOINT;
   const clientId = import.meta.env.VITE_CLIENT_ID;
 
@@ -40,13 +41,13 @@ function App() {
     top: '25vh',
   });
   return (
-
     <GoogleOAuthProvider clientId={clientId}>
       <myContext.Provider
         value={{
           results,
           setResults,
           searchUrl,
+          monarchUrl,
           vocabUrl,
           tablesDD,
           setTablesDD,

src/App.scss

@@ -1,9 +1,12 @@
 .approuter_div {
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
 }
 
 .outlet_div {
   height: 100%;
   min-height: 100vh;
+  position: relative;
+  // top:-2.5rem;
 }

src/AppRouter.jsx

@@ -1,6 +1,7 @@
 import { OntologySearch } from './components/Search/OntologySearch';
-import { BrowserRouter, Outlet, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Outlet, Route, Routes, Navigate } from 'react-router-dom';
 import { NavBar } from './components/Nav/NavBar';
+import { Breadcrumbs } from './components/Nav/Breadcrumbs.jsx';
 import { Footer } from './components/Nav/Footer';
 import { SearchResults } from './components/Search/SearchResults';
 import { Terminology } from './components/Projects/Terminologies/Terminology';
@@ -27,6 +28,7 @@ export const AppRouter = () => {
             <>
               <div className="approuter_div">
                 <NavBar />
+                <Breadcrumbs />
                 <div className="outlet_div">
                   <Outlet />
                 </div>
@@ -41,17 +43,31 @@ export const AppRouter = () => {
             <Route path="/404" element={<Error404 />} />
             <Route path="/about" element={<OntologyInfo />} />
             <Route path="/terminologies" element={<TerminologyList />} />
+            <Route path="/terminology" element={<Navigate to="/terminologies" />} />
             <Route element={<MappingContextRoot />}>
               <Route element={<SearchContextRoot />}>
                 <Route path="/studies" element={<StudyList />} />
+                <Route path="/study" element={<Navigate to="/studies" />} />
                 <Route path="/Study/:studyId">
                   <Route index element={<StudyDetails />} />
-                  <Route path="/Study/:studyId/DataDictionary/:DDId">
-                    <Route index element={<DDDetails />} />
+                  <Route path="DataDictionary">
+                    <Route index element={<StudyDetails />} />
                     <Route
-                      path="/Study/:studyId/DataDictionary/:DDId/Table/:tableId"
-                      element={<TableDetails />}
+                      path="/Study/:studyId/DataDictionary/:DDId/Table/"
+                      element={<DDDetails />}
                     />
+                    <Route path="/Study/:studyId/DataDictionary/:DDId">
+                      <Route index element={<DDDetails />} />
+                      <Route
+                        path="/Study/:studyId/DataDictionary/:DDId/Table/:tableId"
+                        element={<TableDetails />}
+                      />
+                      <Route
+                        path="/Study/:studyId/DataDictionary/:DDId/Table/:tableId/Terminology/:terminologyId"
+                        element={<Terminology />}
+                      />
+                      <Route path="/Study/:studyId/DataDictionary/:DDId/Table/:tableId/Terminology/" element={<Terminology />} />
+                    </Route>
                   </Route>
                 </Route>
                 <Route

src/Contexts/SearchContext.jsx

@@ -12,6 +12,13 @@ export function SearchContextRoot() {
   const [apiResultsCount, setApiResultsCount] = useState();
   const [apiPage, setApiPage] = useState(0);
   const [apiTotalCount, setApiTotalCount] = useState();
+  const [apiPreferences, setApiPreferences] = useState({});
+  const [apiPreferencesCode, setApiPreferencesCode] = useState(undefined);
+  const [unformattedPref, setUnformattedPref] = useState([]);
+  const [facetCounts, setFacetCounts] = useState([]);
+  const [ontologyApis, setOntologyApis] = useState([]);
+
+  const defaultOntologies = 'mondo,hp,maxo,ncit';
 
   const context = {
     prefTerminologies,
@@ -30,6 +37,17 @@ export function SearchContextRoot() {
     setApiPage,
     apiTotalCount,
     setApiTotalCount,
+    apiPreferences,
+    setApiPreferences,
+    apiPreferencesCode,
+    setApiPreferencesCode,
+    defaultOntologies,
+    facetCounts,
+    setFacetCounts,
+    unformattedPref,
+    setUnformattedPref,
+    ontologyApis,
+    setOntologyApis,
   };
 
   return (

src/components/About/OntologyInfo.scss

@@ -1,7 +1,7 @@
 @import '../Styling/Variables';
 
 .about_container {
-  margin: 17vh 10vw 10vh 10vw;
+  margin: 0 10vw;
   line-height: 1.5rem;
 }
 
@@ -13,7 +13,6 @@
 .api_list {
   width: 12vw;
   height: fit-content;
-  position: fixed;
   display: flex;
   flex-flow: column wrap;
   gap: 2px;
@@ -40,7 +39,6 @@
 }
 .ontology_list {
   margin: 0 0 0 15vw;
-  position: fixed;
   top: 20vh;
   height: 20%;
   width: 70vw;

src/components/About/OntologyTable.jsx

@@ -1,10 +1,19 @@
 import { Button, Input, Space, Table } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 export const OntologyTable = ({ ontology }) => {
   const [filter, setFilter] = useState(null);
 
+  const [pageSize, setPageSize] = useState(
+    parseInt(localStorage.getItem('pageSize'), 10) || 10);
+  const handleTableChange = (current, size) => {
+    setPageSize(size);
+  };
+  useEffect(() => {
+    localStorage.setItem('pageSize', pageSize);
+  }, [pageSize]);
+
   const ontologyTitle = () => {
     return (
       <div className="ontology_filter">
@@ -85,13 +94,21 @@ export const OntologyTable = ({ ontology }) => {
     }))
   );
 
+
+
   return (
     <Table
       columns={columns}
       dataSource={dataSource}
       scroll={{
         y: 470,
       }}
+      pagination={{
+        showSizeChanger: true,
+        pageSizeOptions: ['10', '20', '30'],
+        pageSize: pageSize, // Use the stored pageSize
+        onChange: handleTableChange, // Capture pagination changes
+      }}
     />
   );
 };

src/components/Manager/FetchManager.jsx

@@ -1,3 +1,5 @@
+import { ontologyReducer } from './Utilitiy';
+
 // Fetches all elements at an endpoint
 export const getAll = (vocabUrl, name, navigate) => {
   return fetch(`${vocabUrl}/${name}`, {
@@ -165,3 +167,116 @@ export const getOntologies = vocabUrl => {
     }
   });
 };
+
+export const olsFilterOntologiesSearch = (
+  searchUrl,
+  query,
+  ontologiesToSearch,
+  page,
+  entriesPerPage,
+  pageStart,
+  selectedBoxes,
+  setTotalCount,
+  setResults,
+  setFilteredResultsCount,
+  setResultsCount,
+  setLoading,
+  results,
+  setFacetCounts
+) => {
+  setLoading(true);
+  return fetch(
+    `${searchUrl}q=${query}&ontology=${ontologiesToSearch}&rows=${entriesPerPage}&start=${pageStart}`,
+    {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }
+  )
+    .then(res => res.json())
+    .then(data => {
+      // filters results through the ontologyReducer function (defined in Manager/Utility.jsx)
+
+      let res = ontologyReducer(data?.response?.docs);
+      // if the page > 0 (i.e. if this is not the first batch of results), the new results
+      // are concatenated to the old
+      if (selectedBoxes) {
+        res.results = res.results.filter(
+          d => !selectedBoxes.some(box => box.obo_id === d.obo_id)
+        );
+      }
+
+      if (page > 0 && results.length > 0) {
+        res.results = results.concat(res.results);
+
+        // Apply filtering to remove results with obo_id in selectedBoxes
+      } else {
+        // Set the total number of search results for pagination
+        setTotalCount(data.response.numFound);
+      }
+
+      //the results are set to res (the filtered, concatenated results)
+
+      setResults(res.results);
+      setFilteredResultsCount(res?.filteredResults?.length);
+      // resultsCount is set to the length of the filtered, concatenated results for pagination
+      setResultsCount(res.results.length);
+      setFacetCounts(data?.facet_counts?.facet_fields?.ontologyPreferredPrefix);
+    })
+    .finally(() => setLoading(false));
+};
+
+export const getFiltersByCode = (
+  vocabUrl,
+  component,
+  mappingProp,
+  setApiPreferencesCode,
+  notification,
+  apiPreferencesCode,
+  setUnformattedPref,
+  table
+) => {
+  return fetch(
+    `${vocabUrl}/${
+      component === table
+        ? component?.terminology?.reference
+        : `Terminology/${component?.id}`
+    }/filter/${mappingProp}`,
+    {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }
+  )
+    .then(res => {
+      if (res.ok) {
+        return res.json();
+      } else {
+        throw new Error('An unknown error occurred.');
+      }
+    })
+    .then(data => {
+      setUnformattedPref(data);
+
+      // Dynamically derive the mappingProp based on a condition or the structure of the data
+      const codeToSearch = Object.keys(data)[0]; // Example: get the first key in the object
+      if (data?.[codeToSearch]?.api_preference?.ols) {
+        const joinedOntologies =
+          data[codeToSearch].api_preference.ols.join(',');
+        setApiPreferencesCode(joinedOntologies); // Set state to the comma-separated string
+      } else {
+        setApiPreferencesCode(''); // Fallback if no ols found
+      }
+    })
+    .catch(error => {
+      if (error) {
+        notification.error({
+          message: 'Error',
+          description: 'An error occurred loading the ontology preferences.',
+        });
+      }
+      return error;
+    });
+};