Merge pull request #332 from CivicDataLab/dev

Add geography filtering and collaborative fixed

Author: Deepthi-Chand

app/[locale]/(user)/collaboratives/CollaborativesListingClient.tsx

@@ -218,7 +218,7 @@ const CollaborativesListingClient = () => {
             </div>
             <div className="flex w-full items-center justify-center lg:w-1/2">
               <Image
-                src={'/collaborative.png'}
+                src={'/collaborative.svg'}
                 alt={'collaborative'}
                 width={1700}
                 height={800}

app/[locale]/(user)/collaboratives/[collaborativeSlug]/CollaborativeDetailsClient.tsx

@@ -121,6 +121,12 @@ const CollaborativeDetails = graphql(`
         sectors {
           name
         }
+        geographies {
+          id
+          name
+          code
+          type
+        }
         modified
       }
       useCases {
@@ -154,6 +160,12 @@ const CollaborativeDetails = graphql(`
         sectors {
           name
         }
+        geographies {
+          id
+          name
+          code
+          type
+        }
         tags {
           id
           value
@@ -248,9 +260,7 @@ const CollaborativeDetailClient = () => {
   const hasPartnerOrganizations =
     CollaborativeDetailsData?.collaborativeBySlug?.partnerOrganizations &&
     CollaborativeDetailsData?.collaborativeBySlug?.partnerOrganizations?.length > 0;
-  const hasContributors =
-    CollaborativeDetailsData?.collaborativeBySlug?.contributors &&
-    CollaborativeDetailsData?.collaborativeBySlug?.contributors?.length > 0;
+  
 
   const jsonLd = generateJsonLd({
     '@context': 'https://schema.org',
@@ -321,7 +331,7 @@ const CollaborativeDetailClient = () => {
                   {hasSupportingOrganizations && (
                     <div className="w-full lg:w-2/4">
                       <Text variant="headingXl" color="onBgDefault">
-                        Supported by
+                        Supporters
                       </Text>
                       <div className="mt-8 flex h-fit w-fit flex-wrap items-center justify-start gap-6 ">
                         {CollaborativeDetailsData?.collaborativeBySlug?.supportingOrganizations?.map(
@@ -348,7 +358,7 @@ const CollaborativeDetailClient = () => {
                   {hasPartnerOrganizations && (
                     <div className="w-full lg:w-2/4">
                       <Text variant="headingXl" color="onBgDefault">
-                        Partnered by
+                        Partners
                       </Text>
                       <div className="mt-8 flex h-fit w-fit flex-wrap items-center justify-start gap-6 ">
                         {CollaborativeDetailsData?.collaborativeBySlug?.partnerOrganizations?.map(
@@ -396,9 +406,9 @@ const CollaborativeDetailClient = () => {
                         ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${useCase.organization.logo.url}`
                         : '/org.png';
 
-                    const Geography = useCase.metadata?.find(
-                      (meta: any) => meta.metadataItem?.label === 'Geography'
-                    )?.value;
+                    const Geography = useCase.geographies && useCase.geographies.length > 0
+                      ? useCase.geographies.map((geo: any) => geo.name).join(', ')
+                      : null;
 
                     const MetadataContent = [
                       {
@@ -492,10 +502,9 @@ const CollaborativeDetailClient = () => {
                             icon: Icons.globe,
                             label: 'Geography',
                             value:
-                              dataset.metadata?.find(
-                                (meta: any) =>
-                                  meta.metadataItem?.label === 'Geography'
-                              )?.value || '',
+                              dataset.geographies && dataset.geographies.length > 0
+                                ? dataset.geographies.map((geo: any) => geo.name).join(', ')
+                                : '',
                           },
                         ]}
                         href={`/datasets/${dataset.id}`}

app/[locale]/(user)/collaboratives/components/Details.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import React, { useState } from 'react';
 import Image from 'next/image';
 import { Button, Icon, Spinner, Tag, Text, Tray } from 'opub-ui';
+import { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
@@ -142,9 +142,6 @@ const PrimaryDetails = ({ data, isLoading }: { data: any; isLoading: any }) => {
             </div>
           )}
         <div className="mt-6 lg:mt-10">
-          <Text variant="headingXl" color="onBgDefault">
-            Summary
-          </Text>
           <div className="prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl prose-p:leading-relaxed prose-a:text-blue-400 hover:prose-a:text-blue-300 prose-code:bg-gray-800 prose-code:rounded prose-pre:bg-gray-900 prose-pre:border prose-pre:border-gray-700 prose-blockquote:border-l-blue-500 prose-th:bg-gray-800 prose-img:rounded-lg prose prose-lg prose-invert mt-4 max-w-none prose-headings:text-white prose-p:text-white prose-a:underline prose-blockquote:text-white prose-strong:text-white prose-em:text-white prose-code:px-1 prose-code:py-0.5 prose-code:text-white prose-code:before:content-none prose-code:after:content-none prose-pre:text-white prose-ol:text-white prose-ul:text-white prose-li:text-white prose-li:marker:text-white prose-table:text-white prose-thead:border-white prose-tr:border-white prose-th:border-white prose-th:text-white prose-td:border-white prose-td:text-white prose-hr:border-white">
             <ReactMarkdown
               remarkPlugins={[remarkGfm]}

app/[locale]/(user)/components/Datasets.tsx

@@ -102,7 +102,11 @@ const Datasets = () => {
                       {
                         icon: Icons.calendar,
                         label: 'Date',
-                        value: '19 July 2024',
+                        value: new Date(item.modified).toLocaleDateString('en-US', {
+                          day: 'numeric',
+                          month: 'long',
+                          year: 'numeric',
+                        }),
                       },
                       {
                         icon: Icons.download,
@@ -112,7 +116,9 @@ const Datasets = () => {
                       {
                         icon: Icons.globe,
                         label: 'Geography',
-                        value: 'India',
+                        value: item.geographies?.length > 0 
+                          ? item.geographies.join(', ') 
+                          : 'Not specified',
                       },
                     ]}
                     tag={item.tags}

app/[locale]/(user)/components/ListingComponent.tsx

@@ -528,9 +528,14 @@ const ListingComponent: React.FC<ListingProps> = ({
                       : item?.organization?.logo
                         ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.organization.logo}`
                         : '/org.png';
-                    const Geography = item.metadata.filter(
-                      (item: any) => item.metadata_item.label === 'Geography'
-                    )[0]?.value;
+                    
+                    const geographies = item.geographies && item.geographies.length > 0
+                      ? item.geographies
+                      : null;
+
+                    const sdgs = item.sdgs && item.sdgs.length > 0
+                      ? item.sdgs
+                      : null;
 
                     const MetadataContent = [
                       {
@@ -550,12 +555,27 @@ const ListingComponent: React.FC<ListingProps> = ({
                       });
                     }
 
-                    if (Geography) {
+                    if (geographies && geographies.length > 0) {
+                      // Format geographies hierarchically for display
+                      const geoDisplay = geographies.join(', ');
+
                       MetadataContent.push({
                         icon: Icons.globe,
                         label: 'Geography',
-                        value: Geography,
-                        tooltip: 'Geography',
+                        value: geoDisplay,
+                        tooltip: geoDisplay,
+                      });
+                    }
+
+                    if (sdgs && sdgs.length > 0) {
+                      // Format SDGs for display
+                      const sdgDisplay = sdgs.map((sdg: any) => `${sdg.code} - ${sdg.name}`).join(', ');
+
+                      MetadataContent.push({
+                        icon: Icons.target,
+                        label: 'SDG Goals',
+                        value: sdgDisplay,
+                        tooltip: sdgDisplay,
                       });
                     }
 

app/[locale]/(user)/components/UseCases.tsx

@@ -47,6 +47,11 @@ const useCasesListDoc: any = graphql(`
       logo {
         path
       }
+      geographies {
+        id
+        name
+        code
+      }
       metadata {
         metadataItem {
           id
@@ -150,10 +155,9 @@ const UseCasesListingPage = () => {
                           {
                             icon: Icons.globe,
                             label: 'Geography',
-                            value: item.metadata?.find(
-                              (meta: any) =>
-                                meta.metadataItem?.label === 'Geography'
-                            )?.value,
+                            value: item.geographies?.length > 0
+                              ? item.geographies.map((geo: any) => geo.name).join(', ')
+                              : 'Not specified',
                           },
                         ]}
                         footerContent={[

app/[locale]/(user)/datasets/[datasetIdentifier]/DatasetDetailsPage.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { graphql } from '@/gql';
 import { useQuery } from '@tanstack/react-query';
 import { Spinner } from 'opub-ui';
 
-import { GraphQL } from '@/lib/api';
-import { generateJsonLd } from '@/lib/utils';
 import BreadCrumbs from '@/components/BreadCrumbs';
 import JsonLd from '@/components/JsonLd';
+import { GraphQL } from '@/lib/api';
+import { generateJsonLd } from '@/lib/utils';
 import Details from './components/Details';
 import Metadata from './components/Metadata';
 import PrimaryData from './components/PrimaryData';
@@ -64,6 +63,17 @@ const datasetQuery: any = graphql(`
       sectors {
         name
       }
+      geographies {
+        id
+        name
+        code
+        type
+        parentId {
+          id
+          name
+          type
+        }
+      }
       formats
     }
   }

app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Button, Divider, Icon, Tag, Text, Tooltip } from 'opub-ui';
+import React, { useEffect, useState } from 'react';
 
-import { cn, formatDate, getWebsiteTitle } from '@/lib/utils';
 import { Icons } from '@/components/icons';
+import { cn, formatDate, getWebsiteTitle } from '@/lib/utils';
 import Styles from '../../../dataset.module.scss';
 
 interface MetadataProps {
@@ -13,14 +13,14 @@ interface MetadataProps {
 }
 
 const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
-  const Metadata = data.metadata.map((item: any) => ({
+  const Metadata = (data.metadata || []).map((item: any) => ({
     label: item.metadataItem.label,
     value: item.value,
     type: item.metadataItem.dataType,
   }));
 
-  const [isexpanded, setIsexpanded] = useState(false);
-  const toggleDescription = () => setIsexpanded(!isexpanded);
+  // const [isexpanded, setIsexpanded] = useState(false);
+  // const toggleDescription = () => setIsexpanded(!isexpanded);
 
   const licenseOptions = [
     {
@@ -55,7 +55,7 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
   useEffect(() => {
     const fetchTitle = async () => {
       try {
-        const urlItem = data.metadata.find(
+        const urlItem = (data.metadata || []).find(
           (item: any) => item.metadataItem?.dataType === 'URL'
         );
 
@@ -177,6 +177,25 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
             )}
           </div>
         </div>
+        {data.geographies && data.geographies.length > 0 && (
+          <div className="flex items-center gap-2 ">
+            <Text className="min-w-[120px]  basis-1/4 uppercase" variant="bodyMd">
+              Geography
+            </Text>
+            <div className="flex flex-wrap gap-2">
+              {data.geographies.map((geo: any, index: number) => (
+                <Tag
+                  key={index}
+                  fillColor="var(--orange-secondary-color)"
+                  borderColor="var(--orange-secondary-text)"
+                  textColor="black"
+                >
+                  {geo.name}
+                </Tag>
+              ))}
+            </div>
+          </div>
+        )}
         {Metadata.map((item: any, index: any) => (
           <div className="flex  gap-2 " key={index}>
             <Text

app/[locale]/(user)/datasets/[datasetIdentifier]/components/SimilarDatasets/index.tsx

@@ -49,6 +49,9 @@ const similarDatasetQuery: any = graphql(`
           }
           value
         }
+        geographies {
+          name
+        }
         license
         resources {
           id
@@ -135,7 +138,7 @@ const SimilarDatasets: React.FC = () => {
                             {
                               icon: Icons.globe,
                               label: 'Geography',
-                              value: 'India',
+                              value: item.geographies.join(', '),
                             },
                           ]}
                           tag={item.tags}