feat(#1): catalogue and recommender integration

.example.env

@@ -1,5 +1,7 @@
 # App env
-export BATCH_SIZE=40
+export BATCH_SIZE=10
+export CATALOGUE_URL="http://localhost:3030"
+export RECOMMENDER_URL="http://localhost:8000"
 # Docker
 export MARKETPLACE_IMAGETAG="dev"
 # Kubernetes

.github/workflows/build_push_docker_image.yaml

@@ -31,6 +31,11 @@ jobs:
         run: |
           standard
 
+      - name: Create environment file
+        run: |
+          echo "CATALOGUE_URL=${{ secrets.CATALOGUE_URL }}" > .env.production
+          echo "RECOMMENDER_URL=${{ secrets.RECOMMENDER_URL }}" >> .env.production
+
       - name: Kaniko build & push
         uses: aevea/action-kaniko@master
         with:

Dockerfile

@@ -1,5 +1,7 @@
 FROM node:20-alpine AS deps
 
+ARG BUILD_CMD="build"
+
 WORKDIR /app
 COPY package.json package-lock.json ./
 RUN apk add --no-cache bind-tools libc6-compat && \
@@ -10,7 +12,7 @@ FROM node:20-alpine as builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-RUN npm run build
+RUN npm run ${BUILD_CMD}
 
 FROM node:18-alpine as runner
 WORKDIR /app

next.config.js

@@ -24,9 +24,7 @@ const nextConfig = {
     remotePatterns: [
       {
         protocol: 'https',
-        hostname: 'picsum.photos',
-        port: '',
-        pathname: '/200'
+        hostname: '**'
       }
     ]
   }

package.json

@@ -6,6 +6,8 @@
     "dev": "next dev",
     "fast": "next dev --turbo",
     "build": "next build",
+    "compile": "next build --experimental-build-mode compile",
+    "generate": "next build --experimental-build-mode generate",
     "start": "next start",
     "lint": "next lint"
   },

src/app/catalogue/asset/components/Asset.jsx → src/app/catalogue/[offeringId]/components/Asset.jsx

@@ -2,18 +2,17 @@ import { Badge } from 'flowbite-react'
 import Image from 'next/image'
 import { HiLocationMarker, HiCalendar, HiOutlineRefresh } from 'react-icons/hi'
 import Credentials from './Credentials'
-import ProviderCard from './ProviderCard'
-import mockProvider from '@/utils/data/mockProvider.json'
+import settings from '@/utils/settings'
 
-function Asset ({ asset }) {
-  const title = asset.title
-  const imageUrl = asset.picture
-  const shortDescription = asset.short_description
-  const keywords = asset.keywords
-  const createdAt = new Date(asset.created_at)
-  const updatedAt = new Date(asset.updated_at)
-  const location = asset.location
-  const description = asset.description
+function Asset ({ offering }) {
+  const title = offering.title.value
+  const imageUrl = offering?.picture?.value ?? 'https://picsum.photos/200'
+  const shortDescription = offering.description.value
+  const keywords = offering?.keywords?.value ? offering.keywords.value.split(settings.keywordsSeparator) : []
+  const createdAt = new Date(offering.created.value)
+  const updatedAt = new Date(offering?.updated?.value ?? offering.created.value)
+  const location = offering?.location?.value ?? 'London'
+  const description = offering.description.value
   return (
     <div className='flex flex-col bg-sedimark-light-blue'>
       <h5 className='text-3xl font-bold tracking-tight text-black dark:text-white'>
@@ -60,8 +59,7 @@ function Asset ({ asset }) {
           })}
         </div>
       </div>
-      <Credentials asset={asset} />
-      <ProviderCard provider={mockProvider} />
+      <Credentials offering={offering} />
     </div>
   )
 }

src/app/catalogue/[offeringId]/components/BackToSearchButton.jsx

@@ -0,0 +1,24 @@
+'use client'
+import { Button } from 'flowbite-react'
+import { HiArrowLeft } from 'react-icons/hi'
+
+export default function BackToSearchButton () {
+  const goBack = () => {
+    if (document.referrer.includes('/catalogue?')) {
+      window.history.back()
+    } else {
+      window.location.href = '/catalogue'
+    }
+  }
+  return (
+    <Button
+      className='max-w-fit m-2 ml-10 bg-sedimark-light-gray enabled:hover:bg-sedimark-medium-gray text-sedimark-dark-gray'
+      onClick={goBack}
+    >
+      <span className='flex items-center'>
+        <HiArrowLeft className='mr-2' />
+        Back to search
+      </span>
+    </Button>
+  )
+}

src/app/catalogue/asset/components/DatasetInfoComponent.jsx → src/app/catalogue/[offeringId]/components/DatasetInfoComponent.jsx

@@ -1,17 +1,17 @@
 import Asset from './Asset'
+import ProviderCard from './ProviderCard'
 import PriceCard from './PriceCard'
-import mockAsset from '@/utils/data/mockAsset.json'
 
-function DatasetInfoComponent () {
-  const asset = mockAsset
+function DatasetInfoComponent ({ offering, provider }) {
   return (
     <>
       <div className='flex justify-between m-10 bg-sedimark-light-blue'>
         <div className='w-2/3 pt-1'>
-          <Asset asset={asset} />
+          <Asset offering={offering} />
+          <ProviderCard provider={provider} />
         </div>
         <div className='pt-2'>
-          <PriceCard price={asset.price} />
+          <PriceCard price={offering?.price ?? 0} />
         </div>
       </div>
     </>

src/app/catalogue/[offeringId]/components/ProviderCard.jsx

@@ -0,0 +1,37 @@
+import Image from 'next/image'
+import { HiMail, HiGlobeAlt, HiUser } from 'react-icons/hi'
+
+function ProviderCard ({ provider }) {
+  return (
+    <>
+      <h5 className='text-xl font-bold'>Provided by</h5>
+      <div className='flex flex-wrap m-5 ml-0'>
+        <div className='float-left mr-5'>
+          {provider?.image &&
+            <Image width={96} height={96} src={provider.image.value} alt={provider.participant.value} className='object-cover object-center rounded-lg shadow-lg' />}
+        </div>
+        <div className='flex flex-col justify-around'>
+          <p className='text-md text-black font-bold'>
+            {provider.accountId.value + ' ( ' + provider.participant.value + ' )'}
+          </p>
+          {provider?.givenName && provider?.familyName &&
+            <div className='flex items-center gap-2'>
+              <HiUser size={20} />
+              <p>{provider.givenName.value + ' ' + provider.familyName.value}</p>
+            </div>}
+          {provider?.email &&
+            <div className='flex items-center gap-2'>
+              <HiMail size={20} />
+              <a href={provider.email.value}>{provider.email.value.split(':')[1]}</a>
+            </div>}
+          {provider?.homepage &&
+            <div className='flex items-center gap-2'>
+              <HiGlobeAlt size={20} />
+              <a href={provider.homepage.value} target='_blank' rel='noreferrer'>{provider.homepage.value}</a>
+            </div>}
+        </div>
+      </div>
+    </>
+  )
+}
+export default ProviderCard

src/app/catalogue/asset/components/Recommender.jsx → src/app/catalogue/[offeringId]/components/Recommender.jsx

@@ -8,11 +8,11 @@ function Recommender ({ recommendations }) {
       <div className='flex gap-4 overflow-x-auto p-4 w-full'>
         {recommendations.map((recommendation, index) => {
           return (
-            <Link key={`${recommendation.title}-${recommendation.created_at}-${index + 1}`} href='#'>
+            <Link key={`${recommendation.title.value}-${recommendation.created.value}-${index + 1}`} href={`/catalogue/${btoa(recommendation.offering.value)}`}>
               <RecommenderItem
                 vc={recommendation}
-                providerName={recommendation.provider}
-                price={recommendation.price}
+                providerName={recommendation.publisher.value}
+                price={recommendation?.price ?? 0}
                 color='bg-sedimark-light-blue bg-red'
               />
             </Link>

src/app/catalogue/asset/components/RecommenderItem.jsx → src/app/catalogue/[offeringId]/components/RecommenderItem.jsx

@@ -3,9 +3,9 @@ import { HiOutlineCurrencyEuro, HiCalendar, HiUser } from 'react-icons/hi'
 function RecommenderItem ({ vc, providerName, price, color }) {
   const maxLengthTitle = 42
   const maxLengthDescription = 60
-  const name = vc.title.length > maxLengthTitle ? vc.title.substring(0, maxLengthTitle) + '...' : vc.title
-  const description = vc.short_description.length > maxLengthDescription ? vc.short_description.substring(0, maxLengthDescription) + '...' : vc.short_description
-  const issuanceDate = vc.created_at ? new Date(vc.created_at) : new Date()
+  const name = vc.title.value.length > maxLengthTitle ? vc.title.value.substring(0, maxLengthTitle) + '...' : vc.title.value
+  const description = vc.description.value.length > maxLengthDescription ? vc.description.value.substring(0, maxLengthDescription) + '...' : vc.description.value
+  const issuanceDate = vc.created.value ? new Date(vc.created.value) : new Date()
   const date = isNaN(issuanceDate.getTime()) ? new Date() : issuanceDate
   const providedBy = providerName ?? 'OTHER'
   const validatedPrice = price ?? '0'

src/app/catalogue/[offeringId]/page.js

@@ -0,0 +1,22 @@
+import BackToSearchButton from './components/BackToSearchButton'
+import DatasetInfoComponent from './components/DatasetInfoComponent'
+import Recommender from './components/Recommender'
+import { fetchOfferingDetails, fetchProvider } from '@/utils/catalogue'
+import { fetchSimilarRecommendations } from '@/utils/recommender'
+
+export default async function Page ({ params }) {
+  const { offeringId } = params
+  const offeringIdDecoded = atob(decodeURIComponent(offeringId))
+  const offering = await fetchOfferingDetails(offeringIdDecoded)
+  const provider = await fetchProvider(offering.publisher.value)
+  const recommendations = await fetchSimilarRecommendations(offeringIdDecoded, 5)
+  return (
+    <>
+      <div className='bg-sedimark-light-blue pt-2 pb-2'>
+        <BackToSearchButton />
+        <DatasetInfoComponent offering={offering} provider={provider} />
+        <Recommender recommendations={recommendations} />
+      </div>
+    </>
+  )
+}

src/app/catalogue/components/Catalogue.js

@@ -1,7 +1,8 @@
 import { Suspense } from 'react'
 import ResultsPane from './ResultsPane'
-import mockProviders from '@/utils/data/mockProviders.json'
-import mockFilters from '@/utils/data/mockFilters.json'
+import { fetchOfferings, fetchProviders, fetchKeywords } from '@/utils/catalogue'
+import { fetchQueryRecommendations } from '@/utils/recommender'
+import Recommender from '../[offeringId]/components/Recommender'
 
 /**
  * Renders the Catalogue component.
@@ -12,16 +13,20 @@ import mockFilters from '@/utils/data/mockFilters.json'
  *
  * @returns {JSX.Element} The Catalogue component.
  */
-export default function Catalogue () {
-  const providers = mockProviders
-  const keywords = mockFilters
+export default async function Catalogue ({ query, currentPage }) {
+  const providers = await fetchProviders(query)
+  const keywords = await fetchKeywords(query)
+  const data = await fetchOfferings(query, currentPage)
+  const recommendations = await fetchQueryRecommendations(query, 5)
 
   return (
     <Suspense>
       <ResultsPane
         providers={providers}
         keywords={keywords}
+        data={data}
       />
+      <Recommender recommendations={recommendations} />
     </Suspense>
   )
 }

src/app/catalogue/components/OfferingItem.jsx

@@ -1,27 +1,26 @@
 import { HiOutlineCurrencyEuro, HiCalendar, HiUser } from 'react-icons/hi'
 
-function OfferingItem ({ vc, providerName, price, color }) {
-  const name = vc.title
-  const description = vc.short_description
-  const issuanceDate = vc.created_at ? new Date(vc.created_at) : new Date()
+function OfferingItem ({ offering, color }) {
+  const name = offering.title.value
+  const description = offering.description.value
+  const issuanceDate = offering.created.value ? new Date(offering.created.value) : new Date()
   const date = isNaN(issuanceDate.getTime()) ? new Date() : issuanceDate
-  const providedBy = providerName ?? 'OTHER'
-  const validatedPrice = price ?? '0'
+  const price = offering?.price?.value ?? 0
   return (
     <div className={`flex flex-col p-4 rounded-lg shadow-lg ${color} hover:bg-gray-100`}>
       <div className='text-lg font-semibold'>{name}</div>
       <div className='flex items-center justify-between w-full'>
-        <div>{description}</div>
+        <div>{description.length > 120 ? description.substring(0, 120) + '...' : description}</div>
         <div className='flex flex-row items-center gap-2 w-36'>
           <HiOutlineCurrencyEuro size={20} />
-          <p>{validatedPrice} euros</p>
+          <p>{price} euros</p>
         </div>
       </div>
       <div className='flex justify-between'>
         <div className='flex flex-row gap-4'>
           <div className='flex flex-row items-center gap-2'>
             <HiUser size={20} />
-            <p className='pr-2'>{providedBy}</p>
+            <p className='pr-2'>{offering.publisher.value}</p>
           </div>
         </div>
         <div className='flex flex-row items-center gap-2 w-36'>

src/app/catalogue/components/ResultsList.js

@@ -12,13 +12,11 @@ import OfferingItem from './OfferingItem'
 export default function ResultsList ({ results }) {
   return (
     <div className='flex flex-col w-full gap-4 p-4 bg-gray-50'>
-      {results.map((vc, index) => {
+      {results.map((offering, index) => {
         return (
-          <Link key={`${vc.title}-${vc.created_at}-${index + 1}`} href='catalogue/asset'>
+          <Link key={`${offering.offering.value}-${offering.created.value}-${index + 1}`} href={`catalogue/${btoa(offering.offering.value)}`}>
             <OfferingItem
-              vc={vc}
-              providerName={vc.provider}
-              price={vc.price}
+              offering={offering}
               color='bg-gray-50'
             />
           </Link>