set up view pages for similar, uses, and twins

frontend/components/Search/StandardSearch/LinkedSearch.js

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import SearchHeader from '../SearchHeader/SearchHeader';
+import ResultTable from './ResultTable/ResultTable';
+import styles from '../../../styles/view.module.css';
+import TopLevel from '../../TopLevel';
+import NavbarSearch from '../NavbarSearch/NavbarSearch';
+
+export default function search(properties) {
+    const [Data, setData] = useState(null);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        axios.get(`${properties.url}`, {
+            headers: {
+                "Content-Type": "application/json; charset=UTF-8",
+                "Accept": "application/json"
+            }
+        })
+            .then(response => {
+                setData(response.data);
+            })
+            .catch(error => {
+                console.error('Error fetching twins: ', error);
+                setError(error);
+            });
+    }, []);
+
+    if (error) {
+        return <div>Error loading searched data.</div>;
+    }
+
+    if (!Data) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <TopLevel
+            doNotTrack={true}
+            navbar={
+                <NavbarSearch
+                    value={properties.uri}
+                    placeholder="Search SynBioHub"
+                    onChange={event => {
+                        dispatch(setSearchQuery(event.target.value));
+                        dispatch(setOffset(0));
+                    }}
+                />
+            }
+            hideFooter={true}
+            publicPage={true}
+        >
+            <div className={styles.searchContent}>
+                <SearchHeader selected="Standard Search" />
+                <ResultTable count={Data.length} data={Data} />
+            </div>
+        </TopLevel>
+
+    );
+}

frontend/components/Viewing/ViewHeader.js

@@ -6,9 +6,9 @@ import styles from '../../styles/view.module.css';
 import React, { useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { useState } from 'react';
+import { useRouter } from 'next/router';
 
-import SearchHeader from '../Search/SearchHeader/SearchHeader';
-import ResultTable from '../Search/StandardSearch/ResultTable/ResultTable';
+import TwinsSearch from '../Search/StandardSearch/LinkedSearch';
 
 import axios from 'axios';
 
@@ -51,53 +51,16 @@ export default function ViewHeader(properties) {
   const objectUri = `${publicRuntimeConfig.backend}/${objectUriParts}`;
   var isOwner = isUriOwner(objectUri, username);
 
-  const similar = () => {
-    axios.get(`${objectUri}/similar`, {
-      headers: {
-        "Content-Type": "text/plain; charset=UTF-8",
-        "Accept": "application/json"
-      }
-    })
-      .then(response => {
-        console.log(response.data);
-      })
-      .catch(error => {
-        console.error('Error fetching similar: ', error);
-      });
-  };
+  const router = useRouter();
+
   const twins = () => {
-    axios.get(`${objectUri}/twins`, {
-      headers: {
-        "Content-Type": "text/plain; charset=UTF-8",
-        "Accept": "application/json"
-      }
-    })
-      .then(response => {
-        console.log(response.data);
-        return (
-          <div className={styles.searchContent}>
-            <SearchHeader selected="Standard Search" />
-            <ResultTable count={response.data.count} data={response.data} />
-          </div>
-        )
-      })
-      .catch(error => {
-        console.error('Error fetching twins: ', error);
-      });
+    router.push(`${window.location.href}/twins`);
   };
   const uses = () => {
-    axios.get(`${objectUri}/uses`, {
-      headers: {
-        "Content-Type": "text/plain; charset=UTF-8",
-        "Accept": "application/json"
-      }
-    })
-      .then(response => {
-        console.log(response.data);
-      })
-      .catch(error => {
-        console.error('Error fetching uses: ', error);
-      });
+    router.push(`${window.location.href}/uses`);
+  };
+  const similar = () => {
+    router.push(`${window.location.href}/similar`);
   };
 
   const saveDescription = () => {
@@ -312,7 +275,7 @@ export default function ViewHeader(properties) {
         )}
       </div>
       <div>
-        {properties.search.similar && (
+        {properties.search.similar && ( //TODO: Add check for SBOLExplorer
           <button className={styles.searchButton} onClick={similar}> Similar </button>
         )}
         {properties.search.twins && (

frontend/pages/[...view].js

@@ -12,6 +12,7 @@ import getMetadata from '../sparql/getMetadata';
 import getQueryResponse from '../sparql/tools/getQueryResponse';
 import { addError } from '../redux/actions';
 import styles from '../styles/view.module.css';
+import LinkedSearch from '../components/Search/StandardSearch/LinkedSearch';
 
 export default function View({ data, error }) {
   const dispatch = useDispatch();
@@ -27,6 +28,34 @@ export default function View({ data, error }) {
   const [urlExists, setUrlExists] = useState(true); // New state for URL existence
   const backenduri = `${publicRuntimeConfig.backend}/${url}`;
 
+  if (url.endsWith('/twins')) {
+    const searchUrl = `${publicRuntimeConfig.backend}/${url}`;
+    return (
+      <LinkedSearch
+        url={searchUrl}
+        uri={url}
+      />
+    )
+  }
+  if (url.endsWith('/uses')) {
+    const searchUrl = `${publicRuntimeConfig.backend}/${url}`;
+    return (
+      <LinkedSearch
+        url={searchUrl}
+        uri={url}
+      />
+    )
+  }
+  if (url.endsWith('/similar')) {
+    const searchUrl = `${publicRuntimeConfig.backend}/${url}`;
+    return (
+      <LinkedSearch
+        url={searchUrl}
+        uri={url}
+      />
+    )
+  }
+
   const centerStyle = {
     display: 'flex',
     flexDirection: 'column',
@@ -135,3 +164,41 @@ const getType = type => {
   }
   return type;
 };
+
+function twins() {
+  const [twinsData, setTwinsData] = useState(null);
+  const [error, setError] = useState(null);
+
+  console.log('reached twinssearch');
+
+  useEffect(() => {
+    axios.get(`${objectUri}/twins`, {
+      headers: {
+        "Content-Type": "text/plain; charset=UTF-8",
+        "Accept": "application/json"
+      }
+    })
+      .then(response => {
+        setTwinsData(response.data);
+      })
+      .catch(error => {
+        console.error('Error fetching twins: ', error);
+        setError(error);
+      });
+  }, []);
+
+  if (error) {
+    return <div>Error loading twins data.</div>;
+  }
+
+  if (!twinsData) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className={styles.searchContent}>
+      <SearchHeader selected="Standard Search" />
+      <ResultTable count={twinsData.count} data={twinsData} />
+    </div>
+  );
+}

frontend/public/commitHash.txt

@@ -1 +1 @@
-e29b11b511fdde65acd45d974167b43607b1a9a8
+46d1da7df47db1236a696eb39e3a6607b1f78e6d