changed the instances of replacing synbiohub.org with blanks to using…

… the registries processUrl function. Fixed a couple issues that would lead to render warnings with formatting of tables
SynBioHub · Oct 24, 2023 · dd34810 · dd34810
1 parent 5fe9966
commit dd34810
Show file tree

Hide file tree

Showing 15 changed files with 211 additions and 108 deletions.
diff --git a/frontend/components/Admin/Registries.js b/frontend/components/Admin/Registries.js
@@ -281,17 +281,14 @@ const fetcher = (url, token, dispatch) =>
     });
 
 export async function processUrl(inputUrl, token, dispatch) {
-  console.log(inputUrl)
 
   const data = await fetcher(`${publicRuntimeConfig.backend}/admin/registries`, token, dispatch);
   const registries = data.registries;
-  console.log(registries)
 
   for (const registry of registries) {
     if (inputUrl.startsWith(registry.uri)) {
       const urlRemovedForLink = inputUrl.replace(registry.uri, "");
       const urlReplacedForBackend = inputUrl.replace(registry.uri, registry.url);
-      console.log(urlRemovedForLink)
       return { urlRemovedForLink, urlReplacedForBackend };
     }
   }

diff --git a/frontend/components/Basket/BasketItem.js b/frontend/components/Basket/BasketItem.js
@@ -3,22 +3,28 @@ import { useRouter } from 'next/router';
 
 import styles from '../../styles/submissions.module.css';
 const { publicRuntimeConfig } = getConfig();
+import { processUrl } from '../Admin/Registries';
 
 export default function BasketItem(properties) {
   const router = useRouter();
+  const token = useSelector(state => state.user.token); // assuming you use Redux for state management
+  const dispatch = useDispatch();
+
+  // Process the URI using processUrl function
+  const handleClick = async () => {
+    const processedUrlData = await processUrl(properties.item.uri, token, dispatch);
+    if (processedUrlData.urlReplacedForBackend) {
+      router.push(processedUrlData.urlReplacedForBackend);
+    } else if (processedUrlData.original) {
+      router.push(processedUrlData.original);
+    }
+  };
 
   return (
     <tr
       key={properties.item.displayId}
       className={styles.submission}
-      onClick={() => {
-        router.push(
-          properties.item.uri.replace(
-            'https://synbiohub.org',
-            publicRuntimeConfig.backend
-          )
-        );
-      }}
+      onClick={handleClick}
     >
       <td>
         <input

diff --git a/frontend/components/Search/StandardSearch/ResultTable/ResultRow.js b/frontend/components/Search/StandardSearch/ResultTable/ResultRow.js
@@ -1,6 +1,9 @@
 import { faGlobeAmericas, faUserLock } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import router from 'next/router';
+import React, { useState, useEffect } from 'react';
+import { processUrl } from '../../../Admin/Registries';
+import { useSelector, useDispatch } from 'react-redux';
 
 import styles from '../../../../styles/resulttable.module.css';
 
@@ -10,6 +13,18 @@ import styles from '../../../../styles/resulttable.module.css';
 export default function ResultRow(properties) {
   let type = '';
   const potentialType = properties.type.toLowerCase();
+  const token = useSelector(state => state.user.token);
+  const dispatch = useDispatch();
+  const [processedUri, setProcessedUri] = useState(properties.uri);
+
+  useEffect(() => {
+    async function processAndSetUri() {
+      const result = await processUrl(properties.uri, token, dispatch);
+      setProcessedUri(result.urlRemovedForLink || result.original);
+    }
+
+    processAndSetUri();
+  }, [properties.uri]);
 
   // Identify what type of object the search result is from type url
   if (potentialType.includes('component')) {
@@ -32,7 +47,7 @@ export default function ResultRow(properties) {
   return (
     <tr
       onClick={() => {
-        router.push(properties.uri.replace('https://synbiohub.org', ''));
+        router.push(processedUri);
       }}
     >
       <td>

diff --git a/frontend/components/Search/StandardSearch/StandardSearch.js b/frontend/components/Search/StandardSearch/StandardSearch.js
@@ -5,6 +5,7 @@ import Loader from 'react-loader-spinner';
 import { useDispatch, useSelector } from 'react-redux';
 import useSWR from 'swr';
 const { publicRuntimeConfig } = getConfig();
+import { processUrl } from '../../Admin/Registries';
 
 import {
   countloader,
@@ -124,7 +125,7 @@ const useSearchCount = (query, token, dispatch) => {
   };
 };
 
-const getTypeAndUrl = result => {
+const getTypeAndUrl = async (result, token, dispatch) => {
   let type = '';
   const potentialType = result.type.toLowerCase();
 
@@ -144,11 +145,15 @@ const getTypeAndUrl = result => {
 
   result.type = type;
 
-  let newUrl = result.uri.replace('https://synbiohub.org', '');
-  newUrl = newUrl.replace('https://dev.synbiohub.org', '');
-  result.url = newUrl;
+  const processed = await processUrl(result.uri, token, dispatch);
+  result.url = processed.urlRemovedForLink || processed.original;
+
+  // let newUrl = result.uri.replace('https://synbiohub.org', '');
+  // newUrl = newUrl.replace('https://dev.synbiohub.org', '');
+  // result.url = newUrl;
 };
 
+
 const fetcher = (url, token, dispatch) =>
   axios
     .get(url, {

diff --git a/frontend/components/Submission/SubmissionDisplay.js b/frontend/components/Submission/SubmissionDisplay.js
@@ -6,13 +6,18 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
+import { processUrl } from '../Admin/Registries';
+import { useDispatch, useSelector } from 'react-redux';
 
 import styles from '../../styles/submissions.module.css';
 
 export default function SubmissionDisplay(properties) {
   const router = useRouter();
 
   const [privacyDisplay, setPrivacyDisplay] = useState();
+  const [processedUri, setProcessedUri] = useState(properties.submission.uri);
+  const token = useSelector(state => state.user.token);
+  const dispatch = useDispatch();
 
   useEffect(() => {
     if (properties.submission.privacy === 'public')
@@ -27,13 +32,22 @@ export default function SubmissionDisplay(properties) {
       );
   }, [properties.submission.privacy]);
 
+  useEffect(() => {
+    async function processAndSetUri() {
+      const result = await processUrl(properties.submission.uri, token, dispatch);
+      setProcessedUri(result.urlRemovedForLink || result.original);
+    }
+
+    processAndSetUri();
+  }, [properties.submission.uri]);
+
   return (
     <tr
       key={properties.submission.displayId}
       className={styles.submission}
       onClick={() => {
         router.push(
-          properties.submission.uri.replace('https://synbiohub.org', '')
+          processedUri
         );
       }}
     >

diff --git a/frontend/components/Submit/SubmissionStatusPanel.js b/frontend/components/Submit/SubmissionStatusPanel.js
@@ -9,6 +9,7 @@ import { useEffect, useState } from 'react';
 import Loader from 'react-loader-spinner';
 import { useDispatch, useSelector } from 'react-redux';
 import { useRouter } from 'next/router';
+import { processUrl } from '../Admin/Registries';
 
 import { resetSubmit } from '../../redux/actions';
 import styles from '../../styles/submit.module.css';
@@ -19,9 +20,10 @@ export default function SubmissionStatusPanel() {
   const fileFailed = useSelector(state => state.submit.fileFailed);
   const submitting = useSelector(state => state.submit.submitting);
   const submissionUri = useSelector(state => state.submit.selectedCollection.uri);
-  console.log(submissionUri);
 
   const [header, setHeader] = useState(null);
+  const [processedUri, setProcessedUri] = useState(submissionUri);
+  const token = useSelector(state => state.user.token);
   const dispatch = useDispatch();
   const router = useRouter();
 
@@ -65,7 +67,14 @@ export default function SubmissionStatusPanel() {
     }
   }, [submitting, fileFailed]);
 
-  var submissionLink = replaceBeginning(submissionUri, "https://synbiohub.org", "");
+  useEffect(() => {
+    async function processAndSetUri() {
+      const result = await processUrl(submissionUri, token, dispatch);
+      setProcessedUri(result.urlRemovedForLink || result.original);
+    }
+
+    processAndSetUri();
+  }, [submissionUri]);
 
   return (
     <div className={styles.container}>
@@ -89,7 +98,7 @@ export default function SubmissionStatusPanel() {
               className={styles.aftersubmitbutton}
               role="button"
               onClick={() => {
-                router.push(submissionLink).then(() => {
+                router.push(processedUri).then(() => {
                   dispatch(resetSubmit());
                 });
               }}
@@ -108,10 +117,3 @@ export default function SubmissionStatusPanel() {
     </div>
   );
 }
-
-function replaceBeginning(original, oldBeginning, newBeginning) {
-  if (original.startsWith(oldBeginning)) {
-    return newBeginning + original.slice(oldBeginning.length);
-  }
-  return original;
-}
diff --git a/frontend/components/Viewing/Collection/Members.js b/frontend/components/Viewing/Collection/Members.js
@@ -20,6 +20,7 @@ import { shortName } from '../../../namespace/namespace';
 import lookupRole from '../../../namespace/lookupRole';
 import Link from 'next/link';
 import { addError } from '../../../redux/actions';
+import { processUrl } from '../../Admin/Registries';
 
 /* eslint sonarjs/cognitive-complexity: "off" */
 
@@ -68,7 +69,7 @@ export default function Members(properties) {
 
   const parameters = {
     graphs: '',
-    graphPrefix: 'https://synbiohub.org/',
+    graphPrefix: 'https://synbiohub.org/', // TODO: Maybe get this from somewhere? 
     collection: properties.uri,
     sort: sort,
     search: preparedSearch,
@@ -217,6 +218,27 @@ function FilterHeader(properties) {
 }
 
 function MemberTable(properties) {
+  const [processedMembers, setProcessedMembers] = useState([]);
+
+  const token = useSelector(state => state.user.token);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    async function processMembers() {
+      if (properties.members) {
+        const updatedMembers = await Promise.all(properties.members.map(async member => {
+          const processed = await processUrl(member.uri, token, dispatch);
+          return {
+            ...member,
+            uri: processed.urlRemovedForLink
+          };
+        }));
+        setProcessedMembers(updatedMembers);
+      }
+    }
+
+    processMembers();
+  }, [properties.members]);
+
   let count = (
     <div className={styles.loadinginline}>
       <MiniLoading height={10} />
@@ -230,10 +252,9 @@ function MemberTable(properties) {
       Number(properties.totalMembers).toLocaleString() +
       ')';
   }
-  console.log(properties)
   return (
     <Table
-      data={properties.members}
+      data={processedMembers}
       loading={!properties.members}
       title="Members"
       count={count}
@@ -258,19 +279,18 @@ function MemberTable(properties) {
         } else {
           textArea.innerHTML = member.displayId;
         }
-
 
         return (
           <tr key={member.displayId + member.description}>
             <td>
-              <Link href={member.uri.replace('https://synbiohub.org', '')}>
+              <Link href={member.uri}>
                 <a className={styles.membername}>
                   <code>{textArea.value}</code>
                 </a>
               </Link>
             </td>
             <td>
-              <Link href={member.uri.replace('https://synbiohub.org', '')}>
+              <Link href={member.uri}>
                 <a className={styles.memberid}>{member.displayId}</a>
               </Link>
             </td>
@@ -299,13 +319,6 @@ function getType(member) {
   return memberType;
 }
 
-function replaceBeginning(original, oldBeginning, newBeginning) {
-  if (original.startsWith(oldBeginning)) {
-    return newBeginning + original.slice(oldBeginning.length);
-  }
-  return original;
-}
-
 const createUrl = (query, options) => {
   query = loadTemplate(query, options);
   return `${publicRuntimeConfig.backend}/sparql?query=${encodeURIComponent(

diff --git a/frontend/components/Viewing/MetadataInfo.js b/frontend/components/Viewing/MetadataInfo.js
@@ -30,7 +30,11 @@ export default function MetadataInfo({ title, link, label, icon, specific }) {
         <div className={styles.infolabel}>{label}</div>
       </div>
       <div className={specific ? styles.infotitlegeneric : styles.infotitle}>
-        {title}
+        <table>
+          <tbody>
+            {title}
+          </tbody>
+        </table>
       </div>
     </div>
   );

diff --git a/frontend/components/Viewing/PageJSON/Rendering/RowWrapper.js b/frontend/components/Viewing/PageJSON/Rendering/RowWrapper.js
@@ -243,7 +243,13 @@ export default function RowWrapper({ sections, metadata, setSectionIcon }) {
   }, [titleToValueMap, sectionsToRender]);
 
   if (loading) {
-    return <MiniLoading height={10} width={50} />;
-  }
+    return (
+      <tr>
+        <td colSpan="100%">  {/* colSpan="100%" makes sure it spans the entire width of the table */}
+          <MiniLoading height={10} width={50} />
+        </td>
+      </tr>
+    );
+  }  
   return <tr>{content}</tr>;
 }