SynBioHub · danielfang97 · Mar 25, 2024 · Mar 25, 2024 · Mar 25, 2024
diff --git a/frontend/components/Basket/Basket.js b/frontend/components/Basket/Basket.js
@@ -17,6 +17,7 @@ import Table from '../Reusable/Table/Table';
 import TableButton from '../Reusable/TableButton';
 import BasketItem from './BasketItem';
 import CreateCollection from './CreateCollection';
+import { useTheme } from '../Admin/Theme';
 
 const searchable = ['name', 'displayId', 'type', 'description'];
 
@@ -37,6 +38,7 @@ export default function Basket() {
   const [buttonEnabled, setButtonEnabled] = useState(false);
   const [itemsToAddToCollection, setItemsToAddToCollection] = useState([]);
   const [createCollectionMode, setCreateCollectionMode] = useState(false);
+  const { theme } = useTheme();
 
   useEffect(() => {
     dispatch(restoreBasket());
@@ -71,7 +73,7 @@ export default function Basket() {
       <FontAwesomeIcon
         icon={faShoppingBasket}
         size="2x"
-        color="#D25627"
+        color={theme?.themeParameters?.[0]?.value || '#D25627'} // Use theme color or default to #D25627
         className={styles.basketicon}
         onClick={() => setShowBasket(true)}
       />
@@ -160,6 +162,7 @@ export default function Basket() {
                 item={item}
                 selected={selected}
                 setSelected={setSelected}
+                theme={theme}
               />
             )}
           />
@@ -272,4 +275,4 @@ const sortMethods = {
     compareStrings(submission1.type, submission2.type),
   version: (submission1, submission2) =>
     compareStrings(submission1.version, submission2.version)
-};
+};
diff --git a/frontend/components/Search/StandardSearch/ResultTable/TableButtons.js b/frontend/components/Search/StandardSearch/ResultTable/TableButtons.js
@@ -36,7 +36,8 @@ export default function TableButtons(properties) {
             dispatch(addToBasket(itemsChecked));
           }}
         >
-          <span className={styles.buttonicon}>
+          <span className={styles.buttonicon} 
+          >
             <FontAwesomeIcon icon={faPlus} color="#00000" size="1x" />
           </span>
           Add to Basket

diff --git a/frontend/components/Search/StandardSearch/StandardSearch.js b/frontend/components/Search/StandardSearch/StandardSearch.js
@@ -11,6 +11,7 @@ import Options from '../AdvancedSearch/Options';
 const { publicRuntimeConfig } = getConfig();
 import SearchHeader from '../SearchHeader/SearchHeader';
 import { processUrl } from '../../Admin/Registries';
+import { useTheme } from '../../Admin/Theme';
 
 import {
   countloader,
@@ -28,7 +29,10 @@ import ResultTable from './ResultTable/ResultTable';
  * This component handles a basic 'string search' from users on sbh,
  * otherwise known as a standard search
  */
+
+
 export default function StandardSearch() {
+  const { theme} = useTheme();
   const query = useSelector(state => state.search.query);
   const offset = useSelector(state => state.search.offset);
   const limit = useSelector(state => state.search.limit);
@@ -226,6 +230,10 @@ if (isError) {
               className={advStyles.searchbutton}
               role="button"
               onClick={constructSearch}
+              style={{
+                backgroundColor: theme?.themeParameters?.[0]?.value || '#333', // Use theme color or default to #333
+                color: theme?.themeParameters?.[1]?.value || '#fff', // Use text color from theme or default to #fff
+              }}
             >
             <FontAwesomeIcon
               icon={faHatWizard}

diff --git a/frontend/components/Viewing/MetadataInfo.js b/frontend/components/Viewing/MetadataInfo.js
@@ -345,27 +345,28 @@ export default function MetadataInfo({ title, link, label, icon, specific, uri,
             return (
               <tr key={index}>
                 <td>
-                  {isEditingThisItem ? (
-                    // Edit mode
-                    <div>
-                      <input
-                        type="text"
-                        value={currentValue}
-                        onChange={(e) => handleEditMetadata(index, e.target.value, label)}
-                      />
-                      <button onClick={() => handleSaveEditMetadata(index, data, label)}>Save</button>
-                      <button onClick={() => handleCancelEdit(label)}>Cancel</button>
-                    </div>
-                  ) : (
-                    // Display mode
-                    <a
-                      href={correspondingLink ? correspondingLink : `http://localhost:3333/${processedSource}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {processedSource}
-                    </a>
-                  )}
+                {isEditingThisItem ? (
+              // Edit mode
+              <div>
+                <input
+                  type="text"
+                  value={currentValue}
+                  onChange={(e) => handleEditMetadata(index, e.target.value, label)}
+                />
+                <button className={styles.saveANDcancel} onClick={() => handleSaveEditMetadata(index, data, label)}>Save</button>
+                <button className={styles.saveANDcancel} onClick={() => handleCancelEdit(label)}>Cancel</button>
+              </div>
+            ) : (
+              // Display mode
+              <a
+                href={correspondingLink ? correspondingLink : `http://localhost:3333/${processedSource}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {processedSource}
+              </a>
+            )}
+
                 </td>
                 {(label === "Source" || label === "Type" || label === "Role") && data && (
                   <td>
@@ -426,8 +427,8 @@ export default function MetadataInfo({ title, link, label, icon, specific, uri,
             value={newMetadata}
             onChange={(e) => setNewMetadata(e.target.value)}
           />
-          <button type="button" onClick={() => handleAddMetadata(label)}>Save</button>
-          <button type="button" onClick={() => {
+          <button className={styles.saveANDcancel} type="button" onClick={() => handleAddMetadata(label)}>Save</button>
+          <button className={styles.saveANDcancel} type="button" onClick={() => {
             setIsEditing(false);
             setNewMetadata(''); // Optional: Clear the input if needed
           }}>Cancel</button>

diff --git a/frontend/components/Viewing/PageJSON/Types/Model3.json b/frontend/components/Viewing/PageJSON/Types/Model3.json
@@ -0,0 +1,63 @@
+
+{
+
+    "type": "http://sbols.org/v3#Model",
+    "prefixes": [
+       "PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>",
+       "PREFIX dcterms: <http://purl.org/dc/terms/>",
+       "PREFIX dc: <http://purl.org/dc/elements/1.1/>",
+       "PREFIX sbh: <http://wiki.synbiohub.org/wiki/Terms/synbiohub#>",
+       "PREFIX prov: <http://www.w3.org/ns/prov#>",
+       "PREFIX sbol: <http://sbols.org/v2#>",
+       "PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>",
+       "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>",
+       "PREFIX purl: <http://purl.obolibrary.org/obo/>"
+    ],
+    "metadata": [
+       {
+         "title": "Language",
+         "icon": "faVials",
+         "rootPredicate": "sbol:language",
+         "sections": [
+           {
+             "title": "lang",
+             "predicates": [
+             ],
+             "link": "$<This>"
+           }
+         ]
+       },
+       {
+         "title": "Framework",
+         "rootPredicate": "sbol:framework",
+         "icon": "faVials",
+         "sections": [
+           {
+             "title": "framework",
+             "predicates": [],
+             "link": "$<This>",
+             "stripAfter": "/"
+           }
+         ]
+       },
+       {
+          "title": "Model File",
+          "rootPredicate": "sbol:source",
+          "icon": "faVials",
+          "sections": [
+            {
+              "title": "mfile",
+              "predicates": [],
+              "link": "$<This>"
+            }
+          ]
+        }
+    ],
+    "tables": [],
+    "pages": [
+      "Details",
+      "Other Properties",
+      "Member of these Collections",
+      "Attachments"
+    ]
+  }
diff --git a/frontend/components/Viewing/ViewHeader.js b/frontend/components/Viewing/ViewHeader.js
@@ -27,6 +27,10 @@ export default function ViewHeader(properties) {
   const [displayedDescription, setDisplayedDescription] = useState(properties.description);
   const [isEditingDescription, setIsEditingDescription] = useState(false);
   const [editedDescription, setEditedDescription] = useState(properties.description);
+  // State variables for handling similar, twins, and uses results
+  const [similarData, setSimilarData] = useState(null);
+  const [twinsData, setTwinsData] = useState(null);
+  const [usesData, setUsesData] = useState(null);
 
   var displayTitle = properties.type;
   if (properties.type.includes('#')) {
@@ -51,6 +55,7 @@ export default function ViewHeader(properties) {
   const objectUri = `${publicRuntimeConfig.backend}/${objectUriParts}`;
   var isOwner = isUriOwner(objectUri, username);
 
+
   const router = useRouter();
 
   const twins = () => {
@@ -182,8 +187,8 @@ export default function ViewHeader(properties) {
               value={editedTitle}
               onChange={(e) => setEditedTitle(e.target.value)}
             />
-            <button onClick={handleSaveTitle}>Save</button>
-            <button onClick={handleCancelTitle}>Cancel</button>
+            <button className={styles.saveANDcancel} onClick={handleSaveTitle}>Save</button>
+            <button className={styles.saveANDcancel} onClick={handleCancelTitle}>Cancel</button>
           </div>
         ) : (
           <div className={styles.titleContainer}>
@@ -230,17 +235,17 @@ export default function ViewHeader(properties) {
           </a>
         </Link>
       </div>
-      <div className={styles.description}
+      <div 
         title={displayedDescription.length > 0 ? "Find all records with terms in common with this description" : ""}>
         {isEditingDescription ? (
           <div>
-            <input
+            <input className={styles.description}
               type="text"
               value={editedDescription}
               onChange={(e) => setEditedDescription(e.target.value)}
             />
-            <button onClick={saveDescription}>Save</button>
-            <button onClick={() => setIsEditingDescription(false)}>Cancel</button>
+            <button className={styles.saveANDcancel} onClick={saveDescription} >Save</button>
+            <button className={styles.saveANDcancel} onClick={() => setIsEditingDescription(false)} >Cancel</button>
           </div>
         ) : (
           <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -279,10 +284,10 @@ export default function ViewHeader(properties) {
           <button className={styles.searchButton} onClick={similar}> Similar </button>
         )}
         {properties.search.twins && (
-          <button className={styles.searchButton} onClick={twins}> Twins </button>
+          <button className={styles.simANDTwinbutton} onClick={twins}> Twins </button>
         )}
         {properties.search.uses && (
-          <button className={styles.searchButton} onClick={uses}> Uses </button>
+          <button className={styles.simANDTwinbutton} onClick={uses}> Uses </button>
         )}
       </div>
     </div>

diff --git a/frontend/pages/advanced-search.js b/frontend/pages/advanced-search.js
@@ -0,0 +1,122 @@
+import { faHatWizard } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+
+import Options from '../components/Search/AdvancedSearch/Options';
+import SearchHeader from '../components/Search/SearchHeader/SearchHeader';
+import TopLevel from '../components/TopLevel';
+import styles from '../styles/advancedsearch.module.css';
+
+export default function AdvancedSearch() {
+  const [creator, setCreator] = useState('');
+  const [created, setCreated] = useState([
+    {
+      startDate: null,
+      endDate: null,
+      key: 'selection'
+    }
+  ]);
+  const [modifed, setModified] = useState([
+    {
+      startDate: null,
+      endDate: null,
+      key: 'selection'
+    }
+  ]);
+  const [keyword, setKeyword] = useState('');
+  const [objectType, setObjectType] = useState('');
+  const [role, setRole] = useState('');
+  const [sbolType, setSbolType] = useState('');
+  const [collections, setCollections] = useState([]);
+  const [extraFilters, setExtraFilters] = useState([]);
+
+  const router = useRouter();
+
+  const constructSearch = () => {
+    let collectionUrls = '';
+    for (const collection of collections) {
+      collectionUrls += getUrl(collection.value, 'collection');
+    }
+    const url = `/search/${getUrl(objectType, 'objectType')}${getUrl(
+      creator,
+      'dc:creator'
+    )}${getUrl(role, 'sbol2:role')}${getUrl(
+      sbolType,
+      'sbol2:type'
+    )}${collectionUrls}${getUrl(
+      created[0].startDate,
+      'createdAfter',
+      true
+    )}${getUrl(created[0].endDate, 'createdBefore', true)}${getUrl(
+      modifed[0].startDate,
+      'modifedAfter',
+      true
+    )}${getUrl(
+      modifed[0].endDate,
+      'modifedBefore',
+      true
+    )}${constructExtraFilters()}`;
+    router.push(url);
+  };
+
+  const constructExtraFilters = () => {
+    let url = '';
+    for (const filter of extraFilters) {
+      if (filter.filter && filter.value)
+        url += getUrl(filter.value, filter.filter);
+    }
+    return url;
+  };
+
+  const getUrl = (value, term, isDate = false) => {
+    if (value) {
+      if (!isDate) return `${term}=<${encodeURIComponent(value)}>&`;
+      return `${term}=${encodeURIComponent(value.toISOString().slice(0, 10))}&`;
+    }
+    return '';
+  };
+
+  return (
+    <TopLevel doNotTrack={true} hideFooter={true} publicPage={true}>
+      <div className={styles.container}>
+        <SearchHeader selected="Advanced Search" />
+        <div className={styles.standardcontainer}>
+          <div className={styles.body}>
+            <Options
+              setCreator={setCreator}
+              setObjectType={setObjectType}
+              setSbolType={setSbolType}
+              setRole={setRole}
+              setCollections={setCollections}
+              keyword={keyword}
+              setKeyword={setKeyword}
+              created={created}
+              setCreated={setCreated}
+              modified={modifed}
+              setModified={setModified}
+              extraFilters={extraFilters}
+              setExtraFilters={setExtraFilters}
+            />
+
+            <div
+              className={styles.searchbutton}
+              role="button"
+              onClick={() => {
+                constructSearch();
+              }}
+            >
+              <FontAwesomeIcon
+                icon={faHatWizard}
+                size="1x"
+                className={styles.dnaicon}
+                color="#F2E86D"
+              />
+              <div>Search</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </TopLevel>
+  );
+}