From dd62666fe5b540668d867bf39ab3acfde65d4054 Mon Sep 17 00:00:00 2001
From: Anderson Banihirwe <axbanihirwe@ualr.edu>
Date: Mon, 10 Oct 2022 21:43:01 -0600
Subject: [PATCH 1/4] Refactor catalog page

---
 src/pages/catalog.js | 219 ++++++++++++++++++++++++++-----------------
 1 file changed, 133 insertions(+), 86 deletions(-)

diff --git a/src/pages/catalog.js b/src/pages/catalog.js
index 9b12ae7f..7f84f93a 100644
--- a/src/pages/catalog.js
+++ b/src/pages/catalog.js
@@ -1,12 +1,11 @@
 import { Error, Link } from '@/components/'
-import { CopyButton } from '@/components/copy-button'
+import { License } from '@/components/dashboard'
 import { Layout } from '@/components/layout'
-import { getDatasetName } from '@/lib/dataset-utils'
 import {
-  useFeedstock,
   useFeedstockDatasets,
   useFeedstocks,
   useMeta,
+  useRepo,
 } from '@/lib/endpoints'
 import { AddIcon, MinusIcon } from '@chakra-ui/icons'
 import {
@@ -19,55 +18,44 @@ import {
   Container,
   Flex,
   Heading,
-  List,
-  ListIcon,
-  ListItem,
+  SimpleGrid,
   Skeleton,
+  Table,
+  TableCaption,
+  TableContainer,
+  Tbody,
+  Td,
   Text,
+  Th,
+  Thead,
+  Tr,
 } from '@chakra-ui/react'
-import { GoDatabase } from 'react-icons/go'
 
-const DatasetListItem = ({ dataset }) => {
-  return (
-    <ListItem key={dataset}>
-      <Flex align='center'>
-        <ListIcon as={GoDatabase} color='teal.500' />
-
-        {dataset ? getDatasetName(dataset) : ''}
-        <CopyButton
-          text={dataset}
-          position='relative'
-          ml={8}
-          colorScheme='teal'
-        />
-      </Flex>
-    </ListItem>
-  )
-}
-
-const FeedstockRowAccordionItem = ({ feedstockId, feedstockSpec }) => {
+const Feedstock = ({ id, spec }) => {
   const {
     datasets,
     datasetsError,
     isLoading: datasetsAreLoading,
-  } = useFeedstockDatasets(feedstockId)
-  const { meta, metaError, isLoading: metaIsLoading } = useMeta(feedstockSpec)
+  } = useFeedstockDatasets(id)
+
   const {
-    fs: { spec = '', recipe_runs = [] } = {},
-    fsError,
-    isLoading: fsIsLoading,
-  } = useFeedstock(feedstockId)
+    repo,
+    repoError,
+    isLoading: repoIsLoading,
+  } = useRepo(`https://api.github.com/repos/${spec}/commits/HEAD`)
+
+  const { meta, metaError, isLoading: metaIsLoading } = useMeta(spec)
 
-  if (metaError || fsError || datasetsError) {
+  if (metaError || repoError || datasetsError) {
     return (
       <Layout>
         <Error
           status={
-            metaError?.status || fs.Error?.status || datasetsError?.status
+            metaError?.status || repoError?.status || datasetsError?.status
           }
-          info={metaError?.info || fs.Error?.info || datasetsError?.info}
+          info={metaError?.info || repoError?.info || datasetsError?.info}
           message={
-            metaError?.message || fs.Error?.message || datasetsError?.message
+            metaError?.message || repoError?.message || datasetsError?.message
           }
         />
       </Layout>
@@ -78,50 +66,104 @@ const FeedstockRowAccordionItem = ({ feedstockId, feedstockSpec }) => {
     <>
       {' '}
       {datasets?.length > 0 ? (
-        <AccordionItem>
-          {({ isExpanded }) => (
-            <>
-              <Skeleton isLoaded={!metaIsLoading && !fsIsLoading}>
-                <AccordionButton>
-                  <Box flex='1' textAlign='left'>
-                    {meta?.title}
-                  </Box>
-
-                  {isExpanded ? (
-                    <MinusIcon fontSize='xl' />
-                  ) : (
-                    <AddIcon fontSize='xl' />
-                  )}
-                </AccordionButton>
-
-                <AccordionPanel>
-                  <Text opacity={0.8}>{meta?.description}</Text>
-
-                  <Skeleton isLoaded={!datasetsAreLoading}>
-                    <List spacing={3} my={4}>
-                      {datasets?.map((dataset, index) => (
-                        <DatasetListItem
-                          key={index}
-                          dataset={dataset?.dataset_public_url}
-                        ></DatasetListItem>
-                      ))}
-                    </List>
-                  </Skeleton>
-
-                  <Button
-                    as={Link}
-                    my={4}
-                    href={`/dashboard/feedstock/${feedstockId}`}
-                    colorScheme='teal'
-                    variant='outline'
-                  >
-                    More Details
-                  </Button>
-                </AccordionPanel>
-              </Skeleton>
-            </>
-          )}
-        </AccordionItem>
+        <Box>
+          <Flex alignItems={'center'} justifyContent={'space-between'}></Flex>
+          <Box
+            pos='relative'
+            h='200px'
+            bgImage="linear-gradient(rgba(255, 0, 0, 0.127),rgba(255, 0, 0, 0.1)) , url('')"
+          ></Box>
+          <Box>
+            <Accordion allowMultiple>
+              <AccordionItem>
+                {({ isExpanded }) => (
+                  <>
+                    <AccordionButton>
+                      <Box flex='1' textAlign='left'>
+                        <Skeleton isLoaded={!metaIsLoading}>
+                          <Text>{meta?.title}</Text>
+                        </Skeleton>
+                      </Box>
+
+                      {isExpanded ? (
+                        <MinusIcon fontSize='xl' />
+                      ) : (
+                        <AddIcon fontSize='xl' />
+                      )}
+                    </AccordionButton>
+
+                    <AccordionPanel pb={4}>
+                      <Skeleton isLoaded={!metaIsLoading}>
+                        <Text opacity={0.8}>{meta?.description}</Text>
+                      </Skeleton>
+
+                      <TableContainer my={4}>
+                        <Table variant='striped' size='sm'>
+                          <TableCaption></TableCaption>
+                          <Thead>
+                            <Tr>
+                              <Th></Th>
+                              <Th></Th>
+                              <Th></Th>
+                            </Tr>
+                          </Thead>
+                          <Tbody>
+                            <Tr>
+                              <Td>License</Td>
+                              <Td>:</Td>
+
+                              <Td>
+                                <Skeleton isLoaded={!metaIsLoading}>
+                                  <License
+                                    name={meta?.provenance?.license}
+                                    link={meta?.provenance?.license_link}
+                                  />
+                                </Skeleton>
+                              </Td>
+                            </Tr>
+
+                            <Tr>
+                              <Td>Last Updated</Td>
+                              <Td>:</Td>
+
+                              <Td>
+                                <Skeleton isLoaded={!repoIsLoading}>
+                                  {repo?.commit.committer.date}{' '}
+                                </Skeleton>
+                              </Td>
+                            </Tr>
+
+                            <Tr>
+                              <Td>Dataset Count</Td>
+                              <Td>:</Td>
+
+                              <Td>
+                                <Skeleton isLoaded={!datasetsAreLoading}>
+                                  {datasets?.length}{' '}
+                                </Skeleton>
+                              </Td>
+                            </Tr>
+                          </Tbody>
+                        </Table>
+                      </TableContainer>
+                    </AccordionPanel>
+                  </>
+                )}
+              </AccordionItem>
+            </Accordion>
+
+            <Button
+              as={Link}
+              my={2}
+              href={`/dashboard/feedstock/${id}`}
+              colorScheme='teal'
+              variant='outline'
+              size='sm'
+            >
+              Browse Datasets
+            </Button>
+          </Box>
+        </Box>
       ) : (
         <></>
       )}
@@ -153,7 +195,12 @@ const Catalog = () => {
           </Heading>
 
           <Skeleton isLoaded={!isLoading}>
-            <Accordion my={8} allowMultiple>
+            <SimpleGrid
+              my={8}
+              columns={{ base: 1, md: 2, lg: 3 }}
+              spacing={4}
+              justifyContent={'space-between'}
+            >
               {feedstocks
                 ?.filter(
                   (feedstock) => !feedstock.spec.includes('staged-recipes'),
@@ -166,13 +213,13 @@ const Catalog = () => {
                     .localeCompare(b.spec),
                 )
                 .map((feedstock) => (
-                  <FeedstockRowAccordionItem
+                  <Feedstock
                     key={feedstock.id}
-                    feedstockId={feedstock.id}
-                    feedstockSpec={feedstock.spec}
-                  ></FeedstockRowAccordionItem>
+                    id={feedstock.id}
+                    spec={feedstock.spec}
+                  ></Feedstock>
                 ))}
-            </Accordion>
+            </SimpleGrid>
           </Skeleton>
         </Container>
       </Box>

From fa31611660b2b5fff77024e16f0b4b0a422c8c30 Mon Sep 17 00:00:00 2001
From: Anderson Banihirwe <axbanihirwe@ualr.edu>
Date: Tue, 11 Oct 2022 15:58:30 -0600
Subject: [PATCH 2/4] Fix styles per @katamartin's feedback

---
 src/pages/catalog.js | 63 ++++++++++++++++++++++++++++----------------
 1 file changed, 41 insertions(+), 22 deletions(-)

diff --git a/src/pages/catalog.js b/src/pages/catalog.js
index 7f84f93a..614023af 100644
--- a/src/pages/catalog.js
+++ b/src/pages/catalog.js
@@ -21,7 +21,6 @@ import {
   SimpleGrid,
   Skeleton,
   Table,
-  TableCaption,
   TableContainer,
   Tbody,
   Td,
@@ -62,6 +61,24 @@ const Feedstock = ({ id, spec }) => {
     )
   }
 
+  const image =
+    meta?.image ||
+    'https://images.unsplash.com/photo-1454789476662-53eb23ba5907?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=752&q=80'
+
+  const colors = [
+    'gray',
+    'red',
+    'orange',
+    'yellow',
+    'green',
+    'teal',
+    'blue',
+    'cyan',
+    'purple',
+    'pink',
+  ]
+  const color = colors[id % colors.length]
+
   return (
     <>
       {' '}
@@ -69,19 +86,29 @@ const Feedstock = ({ id, spec }) => {
         <Box>
           <Flex alignItems={'center'} justifyContent={'space-between'}></Flex>
           <Box
-            pos='relative'
-            h='200px'
-            bgImage="linear-gradient(rgba(255, 0, 0, 0.127),rgba(255, 0, 0, 0.1)) , url('')"
+            bgImage={`url(${image})`}
+            position={'relative'}
+            h={'200px'}
+            filter={'grayscale(100%)'}
+            backgroundSize={'cover'}
+            backgroundPosition={'center'}
           ></Box>
           <Box>
-            <Accordion allowMultiple>
+            <Accordion
+              allowMultiple
+              bg={`${color}.400`}
+              opacity={0.8}
+              mixBlendMode={'dodge'}
+            >
               <AccordionItem>
                 {({ isExpanded }) => (
                   <>
                     <AccordionButton>
                       <Box flex='1' textAlign='left'>
                         <Skeleton isLoaded={!metaIsLoading}>
-                          <Text>{meta?.title}</Text>
+                          <Text fontWeight={600} opacity={1}>
+                            {meta?.title}
+                          </Text>
                         </Skeleton>
                       </Box>
 
@@ -94,24 +121,20 @@ const Feedstock = ({ id, spec }) => {
 
                     <AccordionPanel pb={4}>
                       <Skeleton isLoaded={!metaIsLoading}>
-                        <Text opacity={0.8}>{meta?.description}</Text>
+                        <Text>{meta?.description}</Text>
                       </Skeleton>
 
-                      <TableContainer my={4}>
-                        <Table variant='striped' size='sm'>
-                          <TableCaption></TableCaption>
+                      <TableContainer mt={4}>
+                        <Table variant='simple' size='sm'>
                           <Thead>
                             <Tr>
-                              <Th></Th>
-                              <Th></Th>
-                              <Th></Th>
+                              <Th />
+                              <Th />
                             </Tr>
                           </Thead>
                           <Tbody>
                             <Tr>
-                              <Td>License</Td>
-                              <Td>:</Td>
-
+                              <Td>License: </Td>
                               <Td>
                                 <Skeleton isLoaded={!metaIsLoading}>
                                   <License
@@ -123,9 +146,7 @@ const Feedstock = ({ id, spec }) => {
                             </Tr>
 
                             <Tr>
-                              <Td>Last Updated</Td>
-                              <Td>:</Td>
-
+                              <Td>Last Updated: </Td>
                               <Td>
                                 <Skeleton isLoaded={!repoIsLoading}>
                                   {repo?.commit.committer.date}{' '}
@@ -134,9 +155,7 @@ const Feedstock = ({ id, spec }) => {
                             </Tr>
 
                             <Tr>
-                              <Td>Dataset Count</Td>
-                              <Td>:</Td>
-
+                              <Td>Dataset Count:</Td>
                               <Td>
                                 <Skeleton isLoaded={!datasetsAreLoading}>
                                   {datasets?.length}{' '}

From ddfe1a261cf9f7e1fae9bddfe346d1a5ab4b6cf0 Mon Sep 17 00:00:00 2001
From: Anderson Banihirwe <axbanihirwe@ualr.edu>
Date: Tue, 11 Oct 2022 16:10:21 -0600
Subject: [PATCH 3/4] ensure button color scheme matches box's bgcolor

---
 src/pages/catalog.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/catalog.js b/src/pages/catalog.js
index 614023af..d8de2e6b 100644
--- a/src/pages/catalog.js
+++ b/src/pages/catalog.js
@@ -89,7 +89,6 @@ const Feedstock = ({ id, spec }) => {
             bgImage={`url(${image})`}
             position={'relative'}
             h={'200px'}
-            filter={'grayscale(100%)'}
             backgroundSize={'cover'}
             backgroundPosition={'center'}
           ></Box>
@@ -175,7 +174,7 @@ const Feedstock = ({ id, spec }) => {
               as={Link}
               my={2}
               href={`/dashboard/feedstock/${id}`}
-              colorScheme='teal'
+              colorScheme={color}
               variant='outline'
               size='sm'
             >

From 1a7b0830c225833a13c067251997a359b6dffa12 Mon Sep 17 00:00:00 2001
From: Anderson Banihirwe <axbanihirwe@ualr.edu>
Date: Tue, 11 Oct 2022 18:32:16 -0600
Subject: [PATCH 4/4] more styling

---
 src/pages/catalog.js | 58 ++++++++++++++++++++++++++++----------------
 1 file changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/pages/catalog.js b/src/pages/catalog.js
index d8de2e6b..dbe44ab6 100644
--- a/src/pages/catalog.js
+++ b/src/pages/catalog.js
@@ -16,7 +16,6 @@ import {
   Box,
   Button,
   Container,
-  Flex,
   Heading,
   SimpleGrid,
   Skeleton,
@@ -28,9 +27,11 @@ import {
   Th,
   Thead,
   Tr,
+  useColorModeValue,
 } from '@chakra-ui/react'
 
-const Feedstock = ({ id, spec }) => {
+const Feedstock = ({ id, spec, arrayIndex }) => {
+  const bgWeight = useColorModeValue(100, 500)
   const {
     datasets,
     datasetsError,
@@ -61,12 +62,19 @@ const Feedstock = ({ id, spec }) => {
     )
   }
 
+  const placeholderImages = [
+    'https://images.unsplash.com/photo-1563974318767-a4de855d7b43?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2074&q=80',
+    'https://images.unsplash.com/photo-1454789476662-53eb23ba5907?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=752&q=80',
+    'https://images.unsplash.com/photo-1584267759777-8a74a4f72a91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mjh8fG1ldGVvcm9sb2d5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60',
+    'https://images.unsplash.com/photo-1513553404607-988bf2703777?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80',
+    'https://images.unsplash.com/photo-1583325958573-3c89e40551ad?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80',
+    'https://images.unsplash.com/photo-1580193813605-a5c78b4ee01a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=765&q=80',
+  ]
+
   const image =
-    meta?.image ||
-    'https://images.unsplash.com/photo-1454789476662-53eb23ba5907?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=752&q=80'
+    meta?.image || placeholderImages[arrayIndex % placeholderImages.length]
 
   const colors = [
-    'gray',
     'red',
     'orange',
     'yellow',
@@ -77,29 +85,36 @@ const Feedstock = ({ id, spec }) => {
     'purple',
     'pink',
   ]
-  const color = colors[id % colors.length]
+  const color = colors[arrayIndex % colors.length]
 
   return (
     <>
       {' '}
       {datasets?.length > 0 ? (
         <Box>
-          <Flex alignItems={'center'} justifyContent={'space-between'}></Flex>
-          <Box
-            bgImage={`url(${image})`}
-            position={'relative'}
-            h={'200px'}
-            backgroundSize={'cover'}
-            backgroundPosition={'center'}
-          ></Box>
-          <Box>
-            <Accordion
-              allowMultiple
+          <Box position={'relative'} h={'200px'} w={'100%'}>
+            <Box
+              bgImage={`url(${image})`}
+              position={'absolute'}
+              h={'200px'}
+              w={'100%'}
+              filter={'grayscale(100%)'}
+              backgroundSize={'cover'}
+            />
+
+            <Box
               bg={`${color}.400`}
+              h={'200px'}
+              w={'100%'}
+              position={'absolute'}
               opacity={0.8}
               mixBlendMode={'dodge'}
-            >
-              <AccordionItem>
+            />
+          </Box>
+
+          <Box>
+            <Accordion allowMultiple bg={`${color}.${bgWeight}`}>
+              <AccordionItem borderWidth={0}>
                 {({ isExpanded }) => (
                   <>
                     <AccordionButton>
@@ -124,7 +139,7 @@ const Feedstock = ({ id, spec }) => {
                       </Skeleton>
 
                       <TableContainer mt={4}>
-                        <Table variant='simple' size='sm'>
+                        <Table variant='simple' size='sm' colorScheme={color}>
                           <Thead>
                             <Tr>
                               <Th />
@@ -230,11 +245,12 @@ const Catalog = () => {
                     .replace('-feedstock', '')
                     .localeCompare(b.spec),
                 )
-                .map((feedstock) => (
+                .map((feedstock, index) => (
                   <Feedstock
                     key={feedstock.id}
                     id={feedstock.id}
                     spec={feedstock.spec}
+                    arrayIndex={index}
                   ></Feedstock>
                 ))}
             </SimpleGrid>