Skip to content

Integrate Queries in dataset details Page #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
May 12, 2024
Merged

Integrate Queries in dataset details Page #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
047c735
change id
sanjaypinna May 9, 2024
2072309
add datasets query and change data
sanjaypinna May 9, 2024
b5bdec6
update data
sanjaypinna May 9, 2024
895d9f5
add titleCase function
sanjaypinna May 9, 2024
7f44645
update data
sanjaypinna May 9, 2024
40ea4bc
add spinner and modify data
sanjaypinna May 10, 2024
af74c31
add resource query
sanjaypinna May 10, 2024
9e71d54
remove data prop from resource
sanjaypinna May 10, 2024
6a9f7ad
fix spinner alignment
sanjaypinna May 10, 2024
bab5f28
add query in accessmodel
sanjaypinna May 10, 2024
aa247ce
add generated graphql document
sanjaypinna May 10, 2024
31b18c7
remove log
sanjaypinna May 10, 2024
8cd4ac6
add accessModelResource query
sanjaypinna May 10, 2024
28391bd
chang access model type
sanjaypinna May 10, 2024
2773b96
modify query and resources in access model
sanjaypinna May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 114 additions & 78 deletions app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,116 +1,152 @@
import React from 'react';
import { useParams } from 'next/navigation';
import { graphql } from '@/gql';
import { useQuery } from '@tanstack/react-query';
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
Button,
Spinner,
Text,
} from 'opub-ui';

import { GraphQL } from '@/lib/api';
import CustomTags from '@/components/CustomTags';
import ResourceTable from '../../../components/ResourceTable';

interface AccessModelProps {
data: any;
}

const generateColumnData = () => {
return [
{
accessorKey: 'resourceName',
header: 'Resource Name',
},

{
accessorKey: 'fields',
header: 'Fields',
isModalTrigger: true,
label: 'Preview',
table: true,
modalHeader: 'Fields',
},
{
accessorKey: 'rows',
header: 'Rows',
},
{
accessorKey: 'count',
header: 'Count',
},
{
accessorKey: 'preview',
header: 'Preview',
isModalTrigger: true,
label: 'Preview',
table: true,
modalHeader: 'Preview',
accessorKey: 'description',
header: 'Resource description',
},
// {
// accessorKey: 'fields',
// header: 'Fields',
// isModalTrigger: true,
// label: 'Preview',
// table: true,
// modalHeader: 'Fields',
// },
// {
// accessorKey: 'rows',
// header: 'Rows',
// },
// {
// accessorKey: 'count',
// header: 'Count',
// },
// {
// accessorKey: 'preview',
// header: 'Preview',
// isModalTrigger: true,
// label: 'Preview',
// table: true,
// modalHeader: 'Preview',
// },
];
};

const generateTableData = (resource: any[]) => {
return resource.map((item: any) => ({
resourceName: item.resourceName,
fields: item.fields,
preview: item.preview,
rows: item.rows,
count: item.count,
const generateTableData = (resources: any[]) => {
return resources.map((item: any) => ({
resourceName: item.resource.name,
description: item.resource.description,
// fields: item.fields,
// preview: item.preview,
// rows: item.rows,
// count: item.count,
}));
};

const AccessModels: React.FC<AccessModelProps> = ({ data }) => {
const accessModelResourcesQuery = graphql(`
query accessModelResources($datasetId: UUID!) {
accessModelResources(datasetId: $datasetId) {
modelResources {
resource {
name
description
id
}
}
id
name
description
type
created
modified
}
}
`);

const AccessModels = () => {
const params = useParams();

const { data, error, isLoading } = useQuery(
[`accessmodel_${params.datasetIdentifier}`],
() =>
GraphQL(accessModelResourcesQuery, {
datasetId: params.datasetIdentifier,
})
);

return (
<>
{data.map((item: any, index: any) => (
<div
key={index}
className="my-4 flex flex-col gap-4 rounded-2 p-6 shadow-basicDeep"
>
<div className="mb-1 flex flex-wrap justify-between gap-1 lg:gap-0">
<div className="p2-4 lg:w-2/5">
<Text variant="headingMd">{item.title}</Text>
{isLoading ? (
<div className=" mt-8 flex justify-center">
<Spinner />
</div>
) : (
data?.accessModelResources.map((item: any, index: any) => (
<div
key={index}
className="my-4 flex flex-col gap-4 rounded-2 p-6 shadow-basicDeep"
>
<div className="mb-1 flex flex-wrap justify-between gap-1 lg:gap-0">
<div className="p2-4 lg:w-2/5">
<Text variant="headingMd">{item.name}</Text>
</div>
<div className="lg:w-3/5 lg:pl-4">
<Text>{item.description}</Text>
</div>
</div>
<div className="lg:w-3/5 lg:pl-4">
<Text>{item.description}</Text>
<div className="align-center flex flex-col items-center justify-between gap-4 sm:flex-row">
<CustomTags type={item.type.split('.').pop().toLowerCase()} />
<Button className="h-fit w-fit" kind="secondary">
Download All Resources
</Button>
</div>
</div>
<div className="align-center flex flex-col items-center justify-between gap-4 sm:flex-row">
<CustomTags type={item.type} />
<Button className="h-fit w-fit" kind="secondary">
Download All Resources
</Button>
</div>
<div className="flex">
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger className="flex w-full flex-wrap items-center gap-2 ">
{/* <div className="w-3/4 text-justify">
<Button kind="secondary">Download</Button>
</div> */}
<div className=" text-baseBlueSolid8 hover:no-underline ">
See Resources
</div>
</AccordionTrigger>
<AccordionContent
className="flex w-full flex-col p-5"
style={{
backgroundColor: 'var( --base-pure-white)',
outline: '1px solid var( --base-pure-white)',
}}
>
{item.resource && item.resource.length > 0 && (
<div className="flex">
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger className="flex w-full flex-wrap items-center gap-2 ">
<div className=" text-baseBlueSolid8 hover:no-underline ">
See Resources
</div>
</AccordionTrigger>
<AccordionContent
className="flex w-full flex-col p-5"
style={{
backgroundColor: 'var( --base-pure-white)',
outline: '1px solid var( --base-pure-white)',
}}
>
<ResourceTable
ColumnsData={generateColumnData()}
RowsData={generateTableData(item.resource)}
RowsData={generateTableData(item.modelResources)}
/>
)}
</AccordionContent>
</AccordionItem>
</Accordion>
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
</div>
</div>
))}
))
)}
</>
);
};
Expand Down
42 changes: 14 additions & 28 deletions app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
import React from 'react';
import { Button, Icon, Text } from 'opub-ui';

import { formatDate, toTitleCase } from '@/lib/utils';
import { Icons } from '@/components/icons';

interface Metadata {
metadata: any;
}

interface MetadataProps {
data: Metadata;
data: any;
setOpen?: (isOpen: boolean) => void;
}

const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
const { metadata } = data;

return (
<>
<div className="flex items-center justify-between">
Expand All @@ -34,30 +29,21 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
)}
</div>
<div className="flex flex-col flex-wrap gap-5 pt-6">
{/* <div className="sm:mt-1 sm:grid sm:grid-cols-1 sm:gap-2 md:mt-1 md:grid md:grid-cols-2 md:gap-2 lg:flex lg:flex-col lg:flex-wrap lg:gap-3 lg:pt-3"> */}
<div className="flex gap-2">
<Text className="min-w-24 basis-1/4">Source </Text>
<Text> {metadata.source}</Text>
</div>
<div className="flex gap-2">
<Text className="min-w-24 basis-1/4">Location </Text>
<Text> {metadata.location}</Text>
</div>
<div className="flex gap-2">
<Text className="min-w-24 basis-1/4">Update </Text>
<Text>{metadata.update}</Text>
</div>
{data?.metadata?.map((item: any, index: any) => (
<div className="flex gap-2" key={index}>
<Text className="min-w-24 basis-1/4">
{toTitleCase(item.metadataItem.label)}
</Text>
<Text> {item.value}</Text>
</div>
))}
<div className="flex gap-2">
<Text className="min-w-24 basis-1/4">Licence </Text>
<Text>{metadata.licence}</Text>
<Text className="min-w-24 basis-1/4">Created</Text>
<Text>{formatDate(data?.created)}</Text>
</div>
<div className="flex gap-2">
<Text className="min-w-24 basis-1/4">Policy </Text>
<Text>{metadata.policy}</Text>
</div>
<div className="flex gap-2 ">
<Text className="min-w-24 basis-1/4">Organization </Text>
<Text>{metadata.organization}</Text>
<Text className="min-w-24 basis-1/4">Modified</Text>
<Text>{formatDate(data?.modified)}</Text>
</div>
</div>
</>
Expand Down
21 changes: 4 additions & 17 deletions app/[locale]/(user)/datasets/[datasetIdentifier]/components/PrimaryData/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,32 +9,19 @@ const PrimaryData: React.FC<PrimaryDataProps> = ({ data }) => {
return (
<>
<div>
<Text variant="headingLg">{data.datasetTitle}</Text>
<Text variant="headingLg">{data?.title}</Text>
</div>
<div className="flex flex-wrap items-center">
{/* <Text fontWeight="bold">Tags&nbsp;:&nbsp;</Text> */}
<div className="flex gap-2">
{data.metadata.tags.map((item: any, index: any) => (
<Tag key={index}>{item.title}</Tag>
{data?.tags.map((item: any, index: any) => (
<Tag key={index}>{item}</Tag>
))}
</div>
</div>
<div>
<Text variant="bodyMd">{data.description}</Text>
<Text variant="bodyMd">{data?.description}</Text>
</div>
{/* <div className="flex flex-wrap items-center">
<Text fontWeight="bold">Categories&nbsp;:</Text>
<Text>&nbsp;{data.metadata.category}</Text>
</div> */}

{/* <div className="flex flex-wrap items-center">
<Text fontWeight="bold">Formats&nbsp;:&nbsp;</Text>
<div className="flex gap-2">
{data.metadata.formats.map((item: any, index: any) => (
<Tag key={index}>{item.type}</Tag>
))}
</div>
</div> */}
</>
);
};
Expand Down
Loading