Skip to content

Commit 0c05620

Browse files
sanjaypinnasanjaypinna
authored
Merge pull request #262 from CivicDataLab/261-add-similar-datasets-section-in-usecases-and-dataset-details-pages
261 add similar datasets section in dataset details page
2 parents 622a7e4 + 5e2e969 commit 0c05620

File tree

9 files changed

+270
-41
lines changed

9 files changed

+270
-41
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -279,9 +279,9 @@ const ListingComponent: React.FC<ListingProps> = ({
279279
<div className="container">
280280
{/* Optional Category Header */}
281281
{(categoryName || categoryDescription || categoryImage) && (
282-
<div className="flex flex-wrap items-center justify-center gap-6 p-6 lg:flex-nowrap lg:items-start lg:gap-10 lg:pb-10 lg:pt-14">
282+
<div className="flex flex-wrap items-center justify-center gap-6 py-6 lg:flex-nowrap lg:items-start lg:gap-10 lg:pb-10 lg:pt-14">
283283
{categoryImage && (
284-
<div className="flex flex-col items-center justify-center rounded-2 bg-baseGraySlateSolid2 p-2">
284+
<div className="flex flex-col items-center justify-center rounded-6 border-4 border-solid border-greyExtralight p-2">
285285
<Image
286286
src={`/Sectors/${categoryName}.svg`}
287287
width={164}
@@ -290,18 +290,18 @@ const ListingComponent: React.FC<ListingProps> = ({
290290
/>
291291
</div>
292292
)}
293-
<div className="flex-start flex flex-col gap-4 p-2">
293+
<div className="flex-start flex flex-col gap-6 p-2">
294294
{categoryName && (
295295
<Text
296-
variant="heading3xl"
296+
variant="heading2xl"
297297
className="text-primaryBlue"
298298
fontWeight="bold"
299299
>
300300
{categoryName}
301301
</Text>
302302
)}
303303

304-
<Text variant="headingLg" fontWeight="regular">
304+
<Text variant="headingLg" fontWeight="regular" className=' leading-3 '>
305305
{categoryDescription
306306
? categoryDescription
307307
: 'No Description Provided'}

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

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,14 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
6969
fetchTitle();
7070
}, [data.metadata]);
7171

72+
const image = data.isIndividualDataset
73+
? data?.user?.profilePicture
74+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${data.user.profilePicture.url}`
75+
: '/profile.png'
76+
: data?.organization?.logo
77+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${data.organization.logo.url}`
78+
: '/org.png';
79+
7280
return (
7381
<div className="flex flex-col gap-10">
7482
<div className=" flex items-center justify-between">
@@ -93,34 +101,28 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
93101
<Divider />
94102
<div className=" flex flex-col gap-8">
95103
<div className=" hidden rounded-2 border-1 border-solid border-greyExtralight p-2 lg:block">
96-
{data?.organization?.logo?.url ? (
97-
<Image
98-
height={140}
99-
width={100}
100-
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${data.organization?.logo?.url}`}
101-
alt={`${data.organization?.name} logo`}
102-
className="w-full object-contain"
103-
/>
104-
) : (
105-
<Image
106-
height={140}
107-
width={100}
108-
src={'/fallback.svg'}
109-
alt={'fallback logo'}
110-
className="fill-current w-full object-contain"
111-
/>
112-
)}
104+
<Image
105+
height={140}
106+
width={100}
107+
src={image}
108+
alt={
109+
data.isIndividualDataset ? 'Publisher logo' : 'Organization logo'
110+
}
111+
className="w-full object-contain"
112+
/>
113113
</div>
114114
<div className="flex items-center gap-2 ">
115115
<Text className="min-w-[120px] basis-1/4 uppercase" variant="bodyMd">
116-
Organization
116+
{data.isIndividualDataset ? 'Publisher' : 'Organization'}
117117
</Text>
118118
<Text
119119
className="max-w-xs truncate "
120120
variant="bodyLg"
121121
fontWeight="medium"
122122
>
123-
{data.organization.name}
123+
{data.isIndividualDataset
124+
? data.user.fullName
125+
: data.organization.name}
124126
</Text>
125127
</div>
126128
<div className="flex items-center gap-2 ">

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,17 @@ const PrimaryData: React.FC<PrimaryDataProps> = ({ data, isLoading }) => {
1717
return (
1818
<div>
1919
<div className="flex flex-col gap-4">
20-
<Text variant="headingLg">{data?.title}</Text>
20+
<Text variant="heading2xl">{data?.title}</Text>
2121
<div className="flex gap-2">
2222
{data?.tags.map((item: any, index: any) => (
23-
<Tag key={index}>{item.value}</Tag>
23+
<Tag
24+
key={index}
25+
variation="outlined"
26+
textColor="var(--surface-default)"
27+
borderColor="var(--orange-secondary-color)"
28+
>
29+
<Text className=" text-primaryText" fontWeight='medium'>{item.value}</Text>{' '}
30+
</Tag>
2431
))}
2532
</div>
2633
<div

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -195,8 +195,8 @@ const Resources = () => {
195195
getResourceDetails.data?.datasetResources?.length > 0 ? (
196196
<div className=" flex flex-col gap-8">
197197
<div className="flex flex-col gap-1">
198-
<Text variant="heading2xl">Files in this Dataset </Text>
199-
<Text variant="headingLg" fontWeight="regular">
198+
<Text variant="headingLg">Files in this Dataset </Text>
199+
<Text variant='bodyLg'>
200200
All files associated with this Dataset which can be downloaded{' '}
201201
</Text>
202202
</div>

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

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
import { useParams } from 'next/navigation';
2+
import { graphql } from '@/gql';
3+
import { useQuery } from '@tanstack/react-query';
4+
import {
5+
Card,
6+
Carousel,
7+
CarouselContent,
8+
CarouselItem,
9+
CarouselNext,
10+
CarouselPrevious,
11+
Spinner,
12+
Text,
13+
} from 'opub-ui';
14+
15+
import { GraphQL } from '@/lib/api';
16+
import { cn } from '@/lib/utils';
17+
import { Icons } from '@/components/icons';
18+
import Styles from './similarDatasets.module.scss';
19+
20+
const similarDatasetQuery: any = graphql(`
21+
query getSimilarDataset($datasetId: UUID!) {
22+
getDataset(datasetId: $datasetId) {
23+
id
24+
title
25+
similarDatasets {
26+
downloadCount
27+
id
28+
title
29+
tags {
30+
id
31+
value
32+
}
33+
description
34+
created
35+
modified
36+
isIndividualDataset
37+
user {
38+
fullName
39+
id
40+
profilePicture {
41+
url
42+
}
43+
}
44+
metadata {
45+
metadataItem {
46+
id
47+
label
48+
dataType
49+
}
50+
value
51+
}
52+
license
53+
resources {
54+
id
55+
created
56+
modified
57+
type
58+
name
59+
description
60+
}
61+
organization {
62+
name
63+
logo {
64+
url
65+
}
66+
slug
67+
id
68+
}
69+
sectors {
70+
name
71+
}
72+
formats
73+
}
74+
}
75+
}
76+
`);
77+
78+
interface Props {
79+
showCharts: boolean;
80+
}
81+
82+
const SimilarDatasets: React.FC<Props> = ({ showCharts }) => {
83+
const params = useParams();
84+
85+
const SimilatDatasetdetails: { data: any; isLoading: any } = useQuery(
86+
[`similar_datasets_${params.datasetIdentifier}`],
87+
() =>
88+
GraphQL(
89+
similarDatasetQuery,
90+
{
91+
// Entity Headers if present
92+
},
93+
{ datasetId: params.datasetIdentifier }
94+
)
95+
);
96+
97+
console.log(SimilatDatasetdetails?.data?.getDataset);
98+
99+
return (
100+
<div className="py-4 md:py-10 lg:py-20">
101+
{SimilatDatasetdetails.isLoading ? (
102+
<div className=" mt-8 flex justify-center">
103+
<Spinner />
104+
</div>
105+
) : (
106+
<>
107+
<div
108+
className={`flex flex-col gap-1 ${showCharts ? 'lg:px-10' : 'lg:px-0'}`}
109+
>
110+
<Text variant="headingXl">Similar Datasets</Text>
111+
<Text variant="bodyLg">Similar Datasets that you may like </Text>
112+
</div>
113+
<div className=" mt-3 px-2">
114+
<Carousel className="flex w-full justify-between">
115+
<CarouselPrevious />
116+
117+
<CarouselContent className="p-4">
118+
{SimilatDatasetdetails?.data?.getDataset &&
119+
SimilatDatasetdetails?.data?.getDataset.similarDatasets.map(
120+
(item: any) => (
121+
<CarouselItem
122+
key={item.id}
123+
className={cn(
124+
'h-2/4 basis-full pl-4 sm:basis-1/2 lg:basis-1/3',
125+
Styles.List
126+
)}
127+
>
128+
{' '}
129+
<Card
130+
title={item.title}
131+
description={item.description}
132+
metadataContent={[
133+
{
134+
icon: Icons.calendar,
135+
label: 'Date',
136+
value: '19 July 2024',
137+
},
138+
{
139+
icon: Icons.download,
140+
label: 'Download',
141+
value: item.downloadCount.toString(),
142+
},
143+
{
144+
icon: Icons.globe,
145+
label: 'Geography',
146+
value: 'India',
147+
},
148+
]}
149+
tag={item.tags}
150+
formats={item.formats}
151+
footerContent={[
152+
{
153+
icon: `/Sectors/${item.sectors[0].name}.svg`,
154+
label: 'Sectors',
155+
},
156+
{
157+
icon: item.isIndividualDataset
158+
? item?.user?.profilePicture
159+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.user.profilePicture.url}`
160+
: '/profile.png'
161+
: item?.organization?.logo
162+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.organization.logo.url}`
163+
: '/org.png',
164+
label: 'Published by',
165+
},
166+
]}
167+
variation={'collapsed'}
168+
iconColor="warning"
169+
href={`/datasets/${item.id}`}
170+
/>
171+
</CarouselItem>
172+
)
173+
)}
174+
</CarouselContent>
175+
<CarouselNext />
176+
</Carousel>
177+
</div>
178+
;
179+
</>
180+
)}
181+
</div>
182+
);
183+
};
184+
185+
export default SimilarDatasets;

‎app/[locale]/(user)/datasets/[datasetIdentifier]/components/SimilarDatasets/similarDatasets.module.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.List {
2+
a {
3+
min-height: 330px;
4+
max-height: 330px;
5+
@media screen and (max-width: 1120px) {
6+
min-height: 390px;
7+
max-height: 390px;
8+
}
9+
}
10+
}

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

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import Details from './components/Details';
1212
import Metadata from './components/Metadata';
1313
import PrimaryData from './components/PrimaryData';
1414
import Resources from './components/Resources';
15+
import SimilarDatasets from './components/SimilarDatasets';
1516

1617
const datasetQuery: any = graphql(`
1718
query getDataset($datasetId: UUID!) {
@@ -26,6 +27,14 @@ const datasetQuery: any = graphql(`
2627
description
2728
created
2829
modified
30+
isIndividualDataset
31+
user {
32+
fullName
33+
id
34+
profilePicture {
35+
url
36+
}
37+
}
2938
metadata {
3039
metadataItem {
3140
id
@@ -86,7 +95,7 @@ const DatasetDetailsPage = () => {
8695
]}
8796
/>
8897
<div className="flex">
89-
<div className="w-full gap-10 border-r-2 border-solid border-greyExtralight p-6 lg:w-3/4 lg:p-10">
98+
<div className="w-full gap-10 border-r-2 border-solid border-greyExtralight p-6 lg:w-3/4 lg:p-10">
9099
{Datasetdetails.isLoading ? (
91100
<div className=" mt-8 flex justify-center">
92101
<Spinner />
@@ -101,7 +110,10 @@ const DatasetDetailsPage = () => {
101110
{showCharts ? (
102111
<Details setShowcharts={setShowcharts} />
103112
) : (
104-
<Resources />
113+
<>
114+
<Resources />
115+
<SimilarDatasets showCharts={showCharts} />
116+
</>
105117
)}
106118
</div>
107119
</div>
@@ -120,10 +132,16 @@ const DatasetDetailsPage = () => {
120132
</div>
121133
</div>
122134
{showCharts && (
123-
<div className="w-full p-6 lg:px-28 lg:py-10">
124-
<Resources />
125-
</div>
135+
<>
136+
<div className="w-full p-6 lg:px-10 lg:py-10">
137+
<Resources />
138+
</div>
139+
<SimilarDatasets showCharts={showCharts} />
140+
</>
126141
)}
142+
{/* <div className="w-full p-6 lg:p-10 lg:py-10">
143+
<SimilarDatasets />
144+
</div> */}
127145
</main>
128146
);
129147
};

0 commit comments

Comments
 (0)