Merge pull request #613 from SynBioHub/annotationsedit

added functionality for searching for twins, similar, and uses for parts
SynBioHub · Mar 1, 2024 · 6c187bb · 6c187bb
2 parents ddd8c90 + 863f3f9
commit 6c187bb
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 55 deletions.
diff --git a/frontend/components/Viewing/PageJSON/Types/ComponentDefinition.json b/frontend/components/Viewing/PageJSON/Types/ComponentDefinition.json
@@ -11,13 +11,7 @@
         "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>",
         "PREFIX purl: <http://purl.obolibrary.org/obo/>"
     ],
-    "search": [
-        {
-            "twins": true,
-            "similar": true,
-            "uses": true
-        }
-    ],
+
     "metadata": [
         {
             "title": "Type",

diff --git a/frontend/components/Viewing/Shell.js b/frontend/components/Viewing/Shell.js
@@ -42,6 +42,9 @@ export default function Shell(properties) {
   if (metadata && !metadata.name && metadata.displayId)
     metadata.name = metadata.displayId;
 
+  let getSearchData = getSearch(formatMultipleTitles(metadata.types)[0]);
+  metadata.search = getSearchData;
+
   if (!json) {
     return (
       <div className={styles.container}>
@@ -85,6 +88,7 @@ export default function Shell(properties) {
           description={metadata.description}
           type={metadata.types}
           uri={`${metadata.persistentIdentity}/${metadata.version}`}
+          search={metadata.search}
         />
         <div className={styles.sections}>
           <GenericContent json={json} uri={properties.uri} metadata={false} plugins={plugins} type={properties.type} />
@@ -171,3 +175,34 @@ export function formatMultipleTitles(titles) {
   return [formattedTitlesString, linksArray];
 }
 
+
+function getSearch(type) {
+  // list the top levels
+  console.log(type);
+  const toplevel = ["Activity", "Agent", "Association", "Attachment", "Collection", "CombinatorialDerivation", "Component", "Datasheet", "Experiment", "FunctionalComponent", "Implementation", "Model", "ModuleDefinition", "Plan", "Sequence", "Usage"]
+  //return tru"e,false based on type
+  if (type === "ComponentDefinition") {
+    return {
+      twins: true,
+      similar: true,
+      uses: true
+    };
+  }
+  //if top level
+  if (toplevel.includes(type)) {
+    return {
+      twins: false,
+      similar: false,
+      uses: true
+    };
+  }
+  else {
+    return {
+      twins: false,
+      similar: false,
+      uses: false
+    };
+  }
+}
+
+
diff --git a/frontend/components/Viewing/ViewHeader.js b/frontend/components/Viewing/ViewHeader.js
@@ -33,7 +33,6 @@ export default function ViewHeader(properties) {
 
   const descriptionRef = useRef(null);
 
-
   const handleEditClick = () => {
     setIsEditingTitle(true);
   };
@@ -49,6 +48,51 @@ export default function ViewHeader(properties) {
   const objectUri = `${publicRuntimeConfig.backend}/${objectUriParts}`;
   var isOwner = isUriOwner(objectUri, username);
 
+  console.log(objectUri);
+
+  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 twins = () => {
+    axios.get(`${objectUri}/twins`, {
+      headers: {
+        "Content-Type": "text/plain; charset=UTF-8",
+        "Accept": "application/json"
+      }
+    })
+      .then(response => {
+        console.log(response.data);
+      })
+      .catch(error => {
+        console.error('Error fetching twins: ', error);
+      });
+  };
+  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);
+      });
+  };
+
   const saveDescription = () => {
     axios.post(`${objectUri}/edit/description`, {
       previous: properties.description,
@@ -160,53 +204,48 @@ export default function ViewHeader(properties) {
 
   return (
     <div>
-      <div>
-        <div className={styles.contentheader}>
-          {isEditingTitle ? (
-            <div>
-              <input
-                type="text"
-                value={editedTitle}
-                onChange={(e) => setEditedTitle(e.target.value)}
-              />
-              <button onClick={handleSaveTitle}>Save</button>
-              <button onClick={handleCancelTitle}>Cancel</button>
-            </div>
-          ) : (
-            <div className={styles.titleContainer}>
-              <h1 className={styles.maintitle}>{displayedTitle}</h1>
-              {
-                isOwner && (
-                  <>
-                    <FontAwesomeIcon
-                      icon={faPencilAlt}
-                      onClick={handleEditClick}
-                      className={styles.editIcon}
-                    />
-                    {properties.name.length > 0 && (
-                      <FontAwesomeIcon
-                        icon={faTrash}
-                        size="1x"
-                        className={styles.deleteIcon}
-                        title="Remove title"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          confirmTitleDeletion();
-                        }}
-                      />
-                    )}
-                  </>
-                )
-              }
-
-            </div>
-          )}
-          <Link href={`/search/displayId='${properties.displayId}'&`}>
-            <a title="Find all records with the same identifier" target="_blank">
-              <h1 className={styles.maintitleid}>({properties.displayId})</h1>
-            </a>
-          </Link>
-        </div>
+      <div className={styles.contentheader}>
+        {isEditingTitle ? (
+          <div>
+            <input
+              type="text"
+              value={editedTitle}
+              onChange={(e) => setEditedTitle(e.target.value)}
+            />
+            <button onClick={handleSaveTitle}>Save</button>
+            <button onClick={handleCancelTitle}>Cancel</button>
+          </div>
+        ) : (
+          <div className={styles.titleContainer}>
+            <h1 className={styles.maintitle}>{displayedTitle}</h1>
+            {isOwner && (
+              <>
+                <FontAwesomeIcon
+                  icon={faPencilAlt}
+                  onClick={handleEditClick}
+                  className={styles.editIcon}
+                />
+                {properties.name.length > 0 && (
+                  <FontAwesomeIcon
+                    icon={faTrash}
+                    size="1x"
+                    className={styles.deleteIcon}
+                    title="Remove title"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      confirmTitleDeletion();
+                    }}
+                  />
+                )}
+              </>
+            )}
+          </div>
+        )}
+        <Link href={`/search/displayId='${properties.displayId}'&`}>
+          <a title="Find all records with the same identifier" target="_blank">
+            <h1 className={styles.maintitleid}>({properties.displayId})</h1>
+          </a>
+        </Link>
       </div>
       <div className={styles.contentinfo}>
         <Link href={displayLink}>
@@ -264,6 +303,17 @@ export default function ViewHeader(properties) {
           </div>
         )}
       </div>
+      <div>
+        {properties.search.similar && (
+          <button className={styles.searchButton} onClick={similar}> Similar </button>
+        )}
+        {properties.search.twins && (
+          <button className={styles.searchButton} onClick={twins}> Twins </button>
+        )}
+        {properties.search.uses && (
+          <button className={styles.searchButton} onClick={uses}> Uses </button>
+        )}
+      </div>
     </div>
   );
 }