add attribute listing demo

refgenie · Aug 9, 2024 · 3b26030 · 3b26030
1 parent d0790b0
commit 3b26030
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 12 deletions.
diff --git a/frontend/src/components/ObjectLists.jsx b/frontend/src/components/ObjectLists.jsx
@@ -1,9 +1,11 @@
 import { Link } from "react-router-dom"
+import { useLoaderData } from "react-router-dom"
+
 
 // Basic list of Sequence Collections
 const CollectionList = ({collections}) => {
     const seqColList = collections || useLoaderData()[0]
-    console.log("CollectionList", CollectionList)
+    console.log("seqColList", seqColList)
 
     return (<>
       <div>
@@ -18,6 +20,23 @@ const CollectionList = ({collections}) => {
     )
   }
 
+const AttributeList = ({attributes}) => {
+  const attrList = attributes || useLoaderData()[0]
+  console.log("attrList", attrList)
+
+  return (<>
+    <div>
+      <ul>
+        {attrList.results.map((attr) => (
+          <li key={attr}>
+            Attribute: <Link to={`/attribute/sorted_name_length_pairs/${attr}`}>{attr}</Link>
+          </li>
+        ))}
+      </ul>
+    </div></>
+  )
+}
+
 
 // Basic list of Pangenomes
 const PangenomeList = ({pangenomes}) => {
@@ -39,5 +58,5 @@ const PangenomeList = ({pangenomes}) => {
 
 
 
-  export { CollectionList, PangenomeList }
+  export { AttributeList, CollectionList, PangenomeList }
 
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
@@ -48,11 +48,13 @@ const fetchPangenomeLevels = async(digest, level="2", collated=true) => {
 }
 
 const fetchSeqColList = async() => {
-  const url = `${API_BASE}/list/collections?limit=10&offset=10`
-  const url2 = `${API_BASE}/list/pangenomes?limit=5`
+  const url = `${API_BASE}/list/collections?page_size=10&page=1`
+  const url2 = `${API_BASE}/list/pangenomes?page_size=5`
+  const url3 = `${API_BASE}/list/attributes/sorted_name_length_pairs?page_size=5`
   let resps = [
     fetch(url).then((response) => response.json()),
-    fetch(url2).then((response) => response.json())
+    fetch(url2).then((response) => response.json()),
+    fetch(url3).then((response) => response.json())
   ]
   return Promise.all(resps)
 }
@@ -79,8 +81,8 @@ const fecthComparison = async(digest1, digest2) => {
 }
 
 const fetchAttribute = async(attribute, digest) => {
-  const url = `${API_BASE}/attribute/${attribute}/${digest}/list`
-  const url2 = `${API_BASE}/attribute/${attribute}/${digest}`
+  const url = `${API_BASE}/list/collections/${attribute}/${digest}`
+  const url2 = `${API_BASE}/attribute/collection/${attribute}/${digest}`
   let resps = [
     fetch(url).then((response) => response.json()),
     fetch(url2).then((response) => response.json())
@@ -93,9 +95,9 @@ const fetchAttribute = async(attribute, digest) => {
 const Level1Collection = ({collection}) => {
   return (
     <div>
-      Names: <Link to={`/attribute/names/${collection.names}`}>{collection.names}</Link><br/>
-      Lengths: <Link to={`/attribute/lengths/${collection.lengths}`}>{collection.lengths}</Link><br/>
-      Sequences: <Link to={`/attribute/sequences/${collection.sequences}`}>{collection.sequences}</Link><br/>
+      Names: <Link to={`/attribute/collection/names/${collection.names}`}>{collection.names}</Link><br/>
+      Lengths: <Link to={`/attribute/collection/lengths/${collection.lengths}`}>{collection.lengths}</Link><br/>
+      Sequences: <Link to={`/attribute/collection/sequences/${collection.sequences}`}>{collection.sequences}</Link><br/>
     </div>
   )
 }
@@ -185,7 +187,7 @@ const CollectionTable = ({collections}) => {
       </tr>
     </thead>
     <tbody>
-    {seqColList["items"].map((collection) => (
+    {seqColList["results"].map((collection) => (
       <tr key={collection}>
         <td><LinkedCollectionDigest digest={collection.digest} clipboard={false}/></td>
         <td className="tiny mx-2"><LinkedAttributeDigest attribute="names" digest={collection.names_digest} clipboard={false}/></td>

diff --git a/frontend/src/pages/AttributeView.jsx b/frontend/src/pages/AttributeView.jsx
@@ -6,7 +6,7 @@ import { CollectionList } from '../components/ObjectLists.jsx'
 const AttributeView = () => { 
     const content = useLoaderData()
     const { attribute, digest } = useParams()
-    const api_url = `${API_BASE}/attribute/${attribute}/${digest}`
+    const api_url = `${API_BASE}/attribute/collection/${attribute}/${digest}`
     const api_url_list = `${API_BASE}/list/collections/${attribute}/${digest}`
     let results = content[0]
     let attribute_value = content[1]

diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
@@ -2,12 +2,15 @@ import { PangenomeList } from '../components/ObjectLists.jsx'
 import { CollectionList } from '../components/ObjectLists.jsx'
 import { Link } from "react-router-dom";
 import { useLoaderData } from "react-router-dom";
+import { AttributeList } from '../components/ObjectLists';
+
 
 const HomePage = () => {
     const loaderData = useLoaderData()
     console.log("HomePage loadData ", loaderData)
     const collections = loaderData[0]
     const pangenomes = loaderData[1]
+    const sorted_name_length_pairs = loaderData[2]
 
     const PangenomeExamplesList = () => {
       if (pangenomes.results[0]) {
@@ -54,6 +57,14 @@ const HomePage = () => {
         </ul>
         <PangenomeExamplesList/>
 
+        <h5 className="mt-4">4. List of sorted_name_length_pairs on this server:</h5>
+        <p className="text-muted fs-6">
+        The <span className="font-monospace text-success">/list/attributes</span> endpoint lets you retrieve
+        a list of all the values of a particular attribute hosted by this server.
+        </p>
+        <AttributeList attributes={sorted_name_length_pairs}/>
+
+
       </div>
     )
   }