Skip to content

Commit b4891a8

Browse files
sanjaypinnasanjaypinna
committed
update dataset details page
1 parent 41b4de9 commit b4891a8

File tree

5 files changed

+246
-230
lines changed

5 files changed

+246
-230
lines changed

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useRef } from 'react';
1+
import { useEffect, useRef } from 'react';
22
import Image from 'next/image';
33
import Link from 'next/link';
44
import { useParams } from 'next/navigation';
@@ -49,7 +49,11 @@ const DetailsQuery: any = graphql(`
4949
}
5050
`);
5151

52-
const Details = () => {
52+
interface DetailsProps {
53+
setShowcharts: (vars:boolean) => void;
54+
}
55+
56+
const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
5357
const params = useParams();
5458
const chartRef = useRef<ReactECharts>(null);
5559

@@ -58,6 +62,10 @@ const Details = () => {
5862
() => GraphQL(DetailsQuery, {}, { datasetId: params.datasetIdentifier })
5963
);
6064

65+
useEffect(() => {
66+
setShowcharts(false)
67+
}, [data]);
68+
6169
const renderChart = (item: any) => {
6270
if (item.chartType === 'ASSAM_DISTRICT' || item.chartType === 'ASSAM_RC') {
6371
// Register the map
@@ -71,16 +79,13 @@ const Details = () => {
7179
};
7280

7381
return (
74-
<div className="mb-8 flex w-full flex-col gap-4 p-2">
82+
<div className="mt-10 flex w-full flex-col gap-4 p-2">
7583
{isLoading ? (
7684
<div className=" mt-8 flex justify-center">
7785
<Spinner />
7886
</div>
7987
) : data?.getChartData?.length > 0 ? (
8088
<>
81-
<Text variant="bodyLg" className="mx-6 lg:mx-0">
82-
Visualizations
83-
</Text>
8489
<div className="relative w-full ">
8590
<Carousel className="w-full">
8691
<div className=" px-12">
@@ -137,10 +142,10 @@ const Details = () => {
137142
</CarouselContent>
138143
</div>
139144
<div className="absolute inset-y-0 left-0 flex items-center">
140-
<CarouselPrevious />
145+
<CarouselPrevious className=" bg-secondaryOrange" />
141146
</div>
142147
<div className="absolute inset-y-0 right-0 flex items-center">
143-
<CarouselNext />
148+
<CarouselNext className=" bg-secondaryOrange" />
144149
</div>
145150
</Carousel>
146151
</div>

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

Lines changed: 110 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from 'react';
2-
import Link from 'next/link';
3-
import { Button, Icon, Text } from 'opub-ui';
4-
import { toTitleCase } from '@/lib/utils';
1+
import Image from 'next/image';
2+
import { Button, Divider, Icon, Text } from 'opub-ui';
3+
import React, { useState } from 'react';
4+
55
import { Icons } from '@/components/icons';
66

77
interface MetadataProps {
@@ -10,90 +10,121 @@ interface MetadataProps {
1010
}
1111

1212
const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
13-
const filteredMetadataArray = data?.metadata.filter(
14-
(item: any) =>
15-
item.metadataItem.label !== 'Source Website' &&
16-
item.metadataItem.label !== 'Github Repo Link' &&
17-
item.metadataItem.label !== 'Source' &&
18-
item.value.trim() !== '' // Ensure the value is not empty
19-
);
2013

14+
const Metadata = (
15+
data.metadata as Array<{ metadataItem: { label: string }; value: string }>
16+
)
17+
.filter((item) =>
18+
['Geography', 'Update Frequency', 'License'].includes(
19+
item.metadataItem.label
20+
)
21+
)
22+
.map((item) => ({
23+
label:
24+
item.metadataItem.label === 'Geography'
25+
? 'Location'
26+
: item.metadataItem.label,
27+
value: item.value,
28+
}));
29+
const [isexpanded, setIsexpanded] = useState(false);
30+
const toggleDescription = () => setIsexpanded(!isexpanded);
2131
return (
22-
<div className="rounded-md shadow-md flex flex-col gap-6 bg-surfaceDefault px-6 py-4 lg:px-8 lg:py-6">
23-
<div className="flex items-center justify-between">
24-
<Text variant="headingMd" fontWeight="semibold">
25-
Metadata
26-
</Text>
27-
{setOpen && (
28-
<Button onClick={() => setOpen(false)} kind="tertiary">
29-
<Icon source={Icons.cross} size={24} color="default" />
30-
</Button>
31-
)}
32+
<div className="flex flex-col gap-10">
33+
<div className=" flex items-center justify-between">
34+
<div className="flex flex-col gap-2">
35+
<Text
36+
variant="headingLg"
37+
fontWeight="semibold"
38+
className=" text-primaryBlue"
39+
>
40+
ABOUT THE DATASET{' '}
41+
</Text>
42+
<Text variant="bodyLg">METADATA</Text>
43+
</div>
44+
<div className="flex items-center justify-between">
45+
{setOpen && (
46+
<Button onClick={() => setOpen(false)} kind="tertiary">
47+
<Icon source={Icons.cross} size={24} color="default" />
48+
</Button>
49+
)}
50+
</div>
3251
</div>
33-
<div className="flex flex-col gap-5 align-baseline">
34-
{filteredMetadataArray?.map((item: any, index: any) => (
35-
<div
36-
className="flex items-center gap-2 border-b-2 border-solid border-baseGraySlateSolid6 pb-2"
37-
key={index}
52+
<Divider />
53+
<div className=" flex flex-col gap-8">
54+
<div className=" rounded-2 border-1 border-solid border-greyExtralight p-2 hidden lg:block">
55+
{data?.organization?.logo?.url ? (
56+
<Image
57+
height={140}
58+
width={100}
59+
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${data.organization?.logo?.url}`}
60+
alt={`${data.organization?.name} logo`}
61+
className="w-full object-contain"
62+
/>
63+
) : (
64+
<Image
65+
height={140}
66+
width={100}
67+
src={'/fallback.svg'}
68+
alt={'fallback logo'}
69+
className="fill-current w-full object-contain"
70+
/>
71+
)}
72+
</div>
73+
<div className="flex items-center gap-2 ">
74+
<Text className="min-w-[120px] basis-1/4 uppercase" variant="bodyMd">
75+
Organization
76+
</Text>
77+
<Text
78+
className="max-w-xs truncate "
79+
variant="bodyLg"
80+
fontWeight="medium"
3881
>
39-
<Text className="text-base min-w-[120px] basis-1/4 font-medium">
40-
{toTitleCase(item.metadataItem.label)}:
82+
{data.organization.name}
83+
</Text>
84+
</div>
85+
<div className="flex items-center gap-2 ">
86+
<Text className="min-w-[120px] basis-1/4 uppercase" variant="bodyMd">
87+
Sector
88+
</Text>
89+
<Text
90+
className="max-w-xs truncate "
91+
variant="bodyLg"
92+
fontWeight="medium"
93+
>
94+
{data.categories[0].name}
95+
</Text>
96+
</div>
97+
{Metadata.map((item, index) => (
98+
<div className="flex items-center gap-2 " key={index}>
99+
<Text
100+
className="min-w-[120px] basis-1/4 uppercase"
101+
variant="bodyMd"
102+
>
103+
{item.label}
41104
</Text>
42-
<Text className="text-base truncate max-w-xs " title={item.value}>
105+
<Text className="max-w-xs " variant="bodyLg" fontWeight="medium">
43106
{item.value}
44107
</Text>
45108
</div>
46109
))}
47-
{data?.formats.length > 0 && (
48-
<div className="flex items-baseline gap-2 border-b-2 border-solid border-baseGraySlateSolid6 pb-2">
49-
<Text className="text-base min-w-[120px] basis-1/4 font-medium">
50-
Formats:
51-
</Text>
52-
<div className="flex flex-wrap gap-2">
53-
{data?.formats.map((item: any, index: any) => (
54-
<Text key={index}>{item}</Text>
55-
))}
56-
</div>
57-
</div>
58-
)}
59-
{data?.categories.length > 0 && (
60-
<div className="flex items-baseline gap-2 border-b-2 border-solid border-baseGraySlateSolid6 pb-2">
61-
<Text className="text-base min-w-[120px] basis-1/4 font-medium">
62-
Category:
63-
</Text>
64-
<div className="flex flex-wrap gap-2">
65-
{data?.categories.map((item: any, index: any) => (
66-
<Link
67-
href={`/datasets?categories=${item.name}`}
68-
target="_blank"
69-
className="flex justify-center"
70-
key={index}
71-
>
72-
<Text className="underline">{item.name}</Text>
73-
</Link>
74-
))}
75-
</div>
76-
</div>
77-
)}
78-
{data?.tags.length > 0 && (
79-
<div className="flex items-baseline gap-2 pb-2">
80-
<Text className="text-base min-w-[120px] basis-1/4 font-medium">
81-
Tags:
82-
</Text>
83-
<div className="flex flex-wrap gap-2">
84-
{data?.tags.map((item: any, index: any) => (
85-
<Link
86-
href={`/datasets?tags=${item.value}`}
87-
target="_blank"
88-
className="flex justify-center"
89-
key={index}
90-
>
91-
<Text className="underline">{item.value}</Text>
92-
</Link>
93-
))}
94-
</div>
95-
</div>
96-
)}
110+
<div className="flex flex-col gap-4">
111+
<Text variant="bodyMd">Description</Text>
112+
<Text variant="bodyMd">
113+
{data.description.length > 260 && !isexpanded
114+
? `${data.description.slice(0, 260)}...`
115+
: data.description}
116+
{data.description.length > 260 && (
117+
<Button
118+
kind="tertiary"
119+
size="slim"
120+
onClick={toggleDescription}
121+
className="text-blue-600 w-fit"
122+
>
123+
{isexpanded ? 'See Less' : 'See More'}
124+
</Button>
125+
)}
126+
</Text>
127+
</div>
97128
</div>
98129
</div>
99130
);

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

Lines changed: 9 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import React, { useState } from 'react';
44
import Link from 'next/link';
5-
import { Button, Icon, Spinner, Text, Tray } from 'opub-ui';
5+
import { Button, Icon, Spinner, Tag, Text, Tray } from 'opub-ui';
66

77
import { handleRedirect } from '@/lib/utils';
88
import { Icons } from '@/components/icons';
@@ -14,30 +14,19 @@ interface PrimaryDataProps {
1414
}
1515

1616
const PrimaryData: React.FC<PrimaryDataProps> = ({ data, isLoading }) => {
17-
const sourceMetadata = data?.metadata.find(
18-
(item: any) => item.metadataItem.label === 'Source'
19-
);
20-
const sourceLink = data?.metadata.find(
21-
(item: any) => item.metadataItem.label === 'Source Website'
22-
);
23-
const githubLink = data?.metadata.find(
24-
(item: any) => item.metadataItem.label === 'Github Repo Link'
25-
);
17+
console.log(data);
2618

2719
const [open, setOpen] = useState(false);
2820

2921
return (
30-
<div className=" flex flex-col gap-4 bg-surfaceDefault px-6 py-8 ">
31-
<div className="flex flex-col gap-1">
22+
<div>
23+
<div className="flex flex-col gap-4">
3224
<Text variant="headingLg">{data?.title}</Text>
33-
{sourceMetadata?.value && (
34-
<div className="flex flex-wrap items-center">
35-
<div className="flex gap-2">
36-
<Text>Source:</Text>
37-
<Text>{sourceMetadata.value}</Text>
38-
</div>
39-
</div>
40-
)}
25+
<div className="flex gap-2">
26+
{data?.tags.map((item: any, index: any) => (
27+
<Tag key={index}>{item.value}</Tag>
28+
))}
29+
</div>
4130
<div
4231
className="flex sm:block md:block lg:hidden"
4332
title="About the Dataset"
@@ -71,48 +60,6 @@ const PrimaryData: React.FC<PrimaryDataProps> = ({ data, isLoading }) => {
7160
</Tray>
7261
</div>
7362
</div>
74-
75-
<div>
76-
<Text variant="bodyMd">{data?.description}</Text>
77-
</div>
78-
<div className="flex flex-wrap gap-6 pt-2">
79-
{sourceLink?.value && (
80-
<div>
81-
<Link
82-
href={sourceLink.value}
83-
onClick={(event) => handleRedirect(event, sourceLink.value)}
84-
className="flex gap-1 text-textInteractive underline"
85-
>
86-
<Text color="interactive">Visit Source Website</Text>
87-
<Icon source={Icons.link} color="interactive" />
88-
</Link>
89-
</div>
90-
)}
91-
{githubLink?.value && (
92-
<div>
93-
<Link
94-
href={githubLink.value}
95-
onClick={(event) => handleRedirect(event, githubLink.value)}
96-
className="flex gap-1 text-textInteractive underline"
97-
>
98-
<Text color="interactive">Go to Github Repo</Text>
99-
<Icon source={Icons.link} color="interactive" />
100-
</Link>
101-
</div>
102-
)}
103-
{githubLink?.value && (
104-
<div>
105-
<Link
106-
href={githubLink.value}
107-
onClick={(event) => handleRedirect(event, githubLink.value)}
108-
className="flex gap-1 text-textInteractive underline"
109-
>
110-
<Text color="interactive">Share Dataset</Text>
111-
<Icon source={Icons.link} color="interactive" />
112-
</Link>
113-
</div>
114-
)}
115-
</div>
11663
</div>
11764
);
11865
};

0 commit comments

Comments
 (0)