FD-1845: Update Help Page

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.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/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;
 }

src/components/Manager/Spinner.scss

@@ -1,7 +1,6 @@
 @import '../Styling/Variables';
 
 .loading_screen {
-  margin-top: $navHeight;
   display: flex;
   flex-direction: row;
   align-items: center;

src/components/Nav/NavBar.jsx

@@ -1,7 +1,7 @@
 import { NavLink, useNavigate } from 'react-router-dom';
 import './NavBar.scss';
 import { Login } from '../Auth/Login';
-import { useContext, useState } from 'react'
+import { useContext, useState } from 'react';
 import { myContext } from '../../App';
 import { RequiredLogin } from '../Auth/RequiredLogin';
 
@@ -13,11 +13,11 @@ export const NavBar = () => {
     navigate(routeTo);
   };
   const login = RequiredLogin({ handleSuccess: handleSuccess });
-  const handleLogin = (route) => {
+  const handleLogin = route => {
     setRouteTo(route);
     login();
-  }
-  
+  };
+
   return (
     <>
       <nav className="navbar">
@@ -33,28 +33,34 @@ export const NavBar = () => {
             <NavLink to="/">
               <li className="nav_link">Search</li>
             </NavLink>
-            <div onClick={() => {
-              if (user) {
-                navigate('/studies')
-              } else {
-                handleLogin('/studies')
-              }
-            }}>
+            <div
+              onClick={() => {
+                if (user) {
+                  navigate('/studies');
+                } else {
+                  handleLogin('/studies');
+                }
+              }}
+            >
               <li className="nav_link">Studies</li>
             </div>
-            <div onClick={() => {
-              if (user) {
-                navigate('/terminologies')
-              } else {
-                handleLogin('/terminologies')
-              }
-            }}>
+            <div
+              onClick={() => {
+                if (user) {
+                  navigate('/terminologies');
+                } else {
+                  handleLogin('/terminologies');
+                }
+              }}
+            >
               <li className="nav_link">Terminologies</li>
             </div>
-            {/* Placeholder elements below. No functionality at this time.*/}
             <NavLink to="/about">
               <li className="nav_link">About</li>
             </NavLink>
+            <NavLink to="https://nih-ncpi.github.io/map-dragon" target="_blank">
+              <li className="nav_link">Help</li>
+            </NavLink>
 
             <NavLink to="/ontologies">
               <li className="nav_link">Ontologies</li>
@@ -64,7 +70,7 @@ export const NavBar = () => {
             <Login />
           </div>
         </ul>
-      </nav >
+      </nav>
     </>
   );
 };

src/components/Projects/Tables/DataTypeNumerical.jsx

@@ -102,7 +102,7 @@ export const DataTypeNumerical = ({ form, type }) => {
               const valueMatch = (option?.value ?? '')
                 .toLowerCase()
                 .includes(input.toLowerCase());
-              return labelMatch || valueMatch;
+              return valueMatch || labelMatch;
             }}
             options={options}
           />