Merge pull request #173 from NIH-NCPI/deployment_v2.0.0

Deployment v2.0.0 UAT and PROD

.github/workflows/deploy_dev.yml

@@ -76,4 +76,4 @@ jobs:
           service: '${{ env.SERVICE }}'
           region: '${{ env.REGION }}'
           image: "${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.SERVICE }}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
-          env_vars: VERSION=${VERSION}
+          env_vars: VERSION=${VERSION}

.github/workflows/deploy_prod.yml

@@ -76,4 +76,4 @@ jobs:
           service: '${{ env.SERVICE }}'
           region: '${{ env.REGION }}'
           image: "${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.SERVICE }}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
-          env_vars: VERSION=${VERSION}
+          env_vars: VERSION=${VERSION}

.github/workflows/deploy_qa.yml

@@ -77,4 +77,4 @@ jobs:
           service: '${{ env.SERVICE }}'
           region: '${{ env.REGION }}'
           image: "${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.SERVICE }}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
-          env_vars: VERSION=${VERSION}
+          env_vars: VERSION=${VERSION}

.github/workflows/dispatch_deploy.yml

@@ -86,4 +86,4 @@ jobs:
           service: ${{ env.SERVICE }}
           region: '${{ env.REGION }}'
           image: ${{ env.DOCKER_TAG }}
-          env_vars: ${{ github.event.inputs.version }}
+          env_vars: ${{ github.event.inputs.version }}

docs/README.md

@@ -1,45 +1,13 @@
 # Map Dragon
-This application will support several user groups in submitting and validating their data, managing and tracking data definitions, and aligning data to standardized terms. 
 
-## Getting Started
-### Vite React App
+Map Dragon is a tool for data mappers that enables users to import and store data dictionaries, search and map across multiple ontologies simultaneously, and export mapped data. This will standardize terminology for improved use in the AnVIL Data Explorer, and improve cross-platform querying.
 
-This is a React application bootstrapped with Vite. 
+MapDragon operates on GCP and has been tested for use in Chrome and Microsoft Edge. We do not recommend using MapDragon on other browsers.
 
-### Prerequisites
+## Resources
 
-Make sure you have Node.js and npm installed on your machine.
-
-### Installation
-
-1. Clone the repository:
-
-   ```sh
-   git clone [email protected]:NIH-NCPI/map-dragon.git
-
-2. Navigate into the project directory:
-
-   ```sh
-   cd map-dragon
-3. Install dependencies
-
-   ```sh
-   npm i
-
-### Development
-1. To start the development server, run:
-   ```sh
-   npm run dev
-
-### Dependencies
-This project utilizes the following dependencies:
-
-+ React: A JavaScript library for building user interfaces  
-+ Vite: A front-end tooling for web development  
-+ Ant Design: A design component library
-+ Sass: A CSS preprocessor
-+ React OAuth2 | Google: A React library for Google OAuth
-+ jwt-decode: A JWT decoder
-+ Papa Parse: A CSV parser
+- [User Guide](https://docs.google.com/document/d/1nzJacOXqxbY-7EuynXdsvPCGp0tmkc_rm2x56T97PXY/edit?usp=sharing)
 
+- [Onboarding Slides](https://docs.google.com/presentation/d/1Hm1ZXmNlhaHlJ0LIb9WlZ4sH2CTpOJQw94K0_Ul-W40/edit?usp=sharing)
 
+  These slides have been used to provide an overview to groups utilizing Map Dragon for their mapping needs.

src/App.jsx

@@ -6,8 +6,6 @@ import { GoogleOAuthProvider } from '@react-oauth/google';
 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;
   const mapDragonVersion = import.meta.env.VITE_MAPDRAGON_VERSION;
@@ -37,18 +35,18 @@ function App() {
   const [selectedKey, setSelectedKey] = useState(null);
   const [user, setUser] = useState(null);
   const [ontologyForPagination, setOntologyForPagination] = useState([]);
+  const [ucumCodes, setUcumCodes] = useState([]);
 
   message.config({
     top: '25vh',
   });
+
   return (
     <GoogleOAuthProvider clientId={clientId}>
       <myContext.Provider
         value={{
           results,
           setResults,
-          searchUrl,
-          monarchUrl,
           vocabUrl,
           mapDragonVersion,
           tablesDD,
@@ -79,6 +77,8 @@ function App() {
           setImportState,
           ontologyForPagination,
           setOntologyForPagination,
+          ucumCodes,
+          setUcumCodes,
         }}
       >
         <AppRouter />

src/App.scss

@@ -1,11 +1,9 @@
-body{
-
-    background: url('./assets/Background.png');
-    background-size: 100vw;
-    background-repeat: no-repeat;
-    background-position: calc(50% - 50px) 50%;
-    background-attachment: fixed;
-
+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;
@@ -16,13 +14,11 @@ body{
 
 .outlet_div {
   position: relative;
-  background-color: rgba(255,255,255,.3);
+  background-color: rgba(255, 255, 255, 0.3);
 }
 
 .header {
   z-index: 100;
   position: sticky;
-  top:0;
+  top: 0;
 }
-
-

src/AppRouter.jsx

@@ -60,24 +60,24 @@ export const AppRouter = () => {
         >
           <Route index element={<OntologySearch />} />
           <Route element={<PageLayout />}>
-            <Route path="/search/:query" element={<SearchResults />} />
-            <Route path="/404" element={<Error404 />} />
+            <Route element={<SearchContextRoot />}>
+              <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={
-                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="/ontologies" element={<OntologyInfo />} />
+              <Route path="/about" element={<About />} />
+              <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
                   path="/studies"
                   element={

src/Contexts/SearchContext.jsx

@@ -19,8 +19,15 @@ export function SearchContextRoot() {
   const [ontologyApis, setOntologyApis] = useState([]);
   const [apiPreferencesTerm, setApiPreferencesTerm] = useState(undefined);
   const [searchText, setSearchText] = useState('');
+  const [checkedOntologies, setCheckedOntologies] = useState([]);
+  const [moreAvailable, setMoreAvailable] = useState(false);
+  const [resultsCount, setResultsCount] = useState();
+  const [selectedApi, setSelectedApi] = useState('');
 
-  const defaultOntologies = 'mondo,hp,maxo,ncit';
+  const entriesPerPage = 100;
+
+  const defaultOntologies =
+    selectedApi === 'ols' ? 'MONDO,HP,MAXO,NCIT' : 'SNOMEDCT_US';
   const preferenceTypeSet = data =>
     apiPreferencesTerm ? setApiPreferencesTerm(data) : setApiPreferences(data);
 
@@ -66,6 +73,16 @@ export function SearchContextRoot() {
     prefTypeKey,
     searchText,
     setSearchText,
+    checkedOntologies,
+    setCheckedOntologies,
+    entriesPerPage,
+    moreAvailable,
+    setMoreAvailable,
+    resultsCount,
+    setResultsCount,
+
+    selectedApi,
+    setSelectedApi,
   };
 
   return (

src/components/About/About.jsx

@@ -54,7 +54,7 @@ export const About = () => {
       {loading ? (
         <Spinner />
       ) : (
-        <div className="studies_container">
+        <div className="about_container">
           <h2>About</h2>
           <div className="about_description">
             <Descriptions title="Version" bordered column={1} items={items} />

src/components/About/About.scss

@@ -1,3 +1,8 @@
+.about_container {
+  margin: -26.5vh 10vw 10vh 10vw;
+  line-height: 1.5rem;
+}
+
 .about_description {
   width: 500px;
 }