File api

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 .DS_Store
 site/
-.vite
+.vite
+.env

client/src/components/CheckboxComponent.jsx

@@ -12,7 +12,7 @@ export default function CheckboxComponent({ handleCheckboxChange, query }) {
                     onChange={handleCheckboxChange}
                     required={!query.regulatory}
                 />
-                 Physical
+                <span className="search-checkbox-text">Physical</span>
             </label>
             <label className="search-box-pair">
                 <input
@@ -23,7 +23,7 @@ export default function CheckboxComponent({ handleCheckboxChange, query }) {
                     onChange={handleCheckboxChange}
                     required={!query.ppi}
                 />
-                &nbsp;Regulatory
+                <span className="search-checkbox-text">Regulatory</span>
             </label>
         </div>
     );

client/src/components/MotifTable.jsx

@@ -29,7 +29,10 @@ export default function MotifTable({
     );
 
     const getFormatted = (value) => {
-        if (value === undefined || value === null || isNaN(value)) {
+        if (value === undefined) {
+            return 'Loading...'
+        }
+        else if (value === null || isNaN(value)) {
             return 'N/A';
         } else
             return value.toFixed(4);

client/src/components/NavBar.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { FaInfo, FaHome, FaSearch } from "react-icons/fa";
+import { FaInfo, FaHome, FaSearch, FaCloudDownloadAlt} from "react-icons/fa";
 import { IconContext } from "react-icons";
 
 export default function NavBar() {
@@ -50,6 +50,20 @@ export default function NavBar() {
             </button>
           </Link>
         </li>
+        <li>
+          <Link to={`/download`}>
+            <button className="navbar-menu-button">
+              <IconContext.Provider
+                value={{
+                  size: "1.5em",
+                }}
+              >
+                <FaCloudDownloadAlt />
+              </IconContext.Provider>
+              <div>Data</div>
+            </button>
+          </Link>
+        </li>
       </ul>
     </div>
   );

client/src/components/Query.jsx

@@ -34,8 +34,8 @@ export default function Query() {
         protein: "",
         goTerm: "",
         k: [],
-        ppi: false,
-        regulatory: false,
+        ppi: true,
+        regulatory: true,
     });
     const [networkResult, setNetworkResult] = useState({});
     const cyRef = useRef(cytoscape.Core | undefined);
@@ -69,8 +69,8 @@ export default function Query() {
         protein: "",
         goTerm: "",
         k: "",
-        ppi: "",
-        regulatory: "",
+        ppi: "true",
+        regulatory: "true",
     });
     const [guide, setGuide] = useState(guideConfig);
     const [activeModeButton, setActiveModeButton] = useState("");

client/src/components/SearchBar.jsx

@@ -82,9 +82,9 @@ export default function SearchBar({
                         </div>
                         <div className="search-input-header">
                             <label className="species-header"
-                                htmlFor="species-input-container">Organism (TXID)</label>
+                                htmlFor="search select">Organism (TXID)</label>
                             <select
-                                className="species-input-container" // User input for species
+                                className="search-select" // User input for species
                                 name="species" // User input for species
                                 value={query.species}
                                 onChange={handleSpeciesChange}
@@ -152,7 +152,7 @@ export default function SearchBar({
             </div>
 
             <div className="interaction-container">
-                <h4 className="interaction-title">Network: </h4>
+                <h4 className="interaction-title">Network:</h4>
                 <CheckboxComponent
                     handleCheckboxChange={handleCheckboxChange}
                     query={query}