-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add dataset card + show datasets in project overview
- Loading branch information
1 parent
6c47d5a
commit 9e27258
Showing
12 changed files
with
172 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import { useLocation, useNavigate } from 'react-router-dom'; | ||
| import { Avatar, Button, Card, List } from 'antd'; | ||
| import { FaDatabase } from 'react-icons/fa'; | ||
|
|
||
| import type { DiscoveryScope } from '@/features/metadata/metadata.store'; | ||
| import type { Dataset } from '@/types/metadata'; | ||
| import { getCurrentPage, scopeToUrl } from '@/utils/router'; | ||
| import { useTranslationCustom } from '@/hooks'; | ||
| import { BOX_SHADOW } from '@/constants/overviewConstants'; | ||
| import { RightOutlined } from '@ant-design/icons'; | ||
| import { useCallback } from 'react'; | ||
| import SmallChartCardTitle from '@/components/Util/SmallChartCardTitle'; | ||
|
|
||
| const Dataset = ({ | ||
| parentProjectID, | ||
| dataset, | ||
| format, | ||
| selected, | ||
| }: { | ||
| parentProjectID: string; | ||
| dataset: Dataset; | ||
| format: 'list-item' | 'small-card'; | ||
| selected?: boolean; | ||
| }) => { | ||
| const location = useLocation(); | ||
| const navigate = useNavigate(); | ||
| const page = getCurrentPage(); | ||
|
|
||
| const t = useTranslationCustom(); | ||
|
|
||
| const baseURL = '/' + location.pathname.split('/')[1]; | ||
|
|
||
| const { identifier, title, description } = dataset; | ||
|
|
||
| const scope: DiscoveryScope = { project: parentProjectID, dataset: identifier }; | ||
| const datasetURL = scopeToUrl(scope, baseURL, `/${page}`); | ||
|
|
||
| const onNavigate = useCallback(() => navigate(datasetURL), [navigate, datasetURL]); | ||
|
|
||
| if (format === 'list-item') { | ||
| return ( | ||
| <List.Item | ||
| className={`select-dataset-item${selected ? ' selected' : ''}`} | ||
| key={identifier} | ||
| onClick={onNavigate} | ||
| style={{ cursor: 'pointer' }} | ||
| > | ||
| <List.Item.Meta avatar={<Avatar icon={<FaDatabase />} />} title={t(title)} description={t(description)} /> | ||
| </List.Item> | ||
| ); | ||
| } else if (format === 'small-card') { | ||
| return ( | ||
| <Card | ||
| title={<SmallChartCardTitle title={title} />} | ||
| size="small" | ||
| style={{ ...BOX_SHADOW, height: 200 }} | ||
| extra={<Button shape="circle" icon={<RightOutlined />} onClick={onNavigate} />} | ||
| > | ||
| {description} | ||
| </Card> | ||
| ); | ||
| } else { | ||
| return <span style={{ color: 'red' }}>UNIMPLEMENTED</span>; | ||
| } | ||
| }; | ||
|
|
||
| export default Dataset; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import type { CSSProperties, ReactNode } from 'react'; | ||
| import { Space, Typography } from 'antd'; | ||
|
|
||
| type SmallChartCardTitleProps = { | ||
| title: ReactNode; | ||
| description?: ReactNode; | ||
| descriptionStyle?: CSSProperties; | ||
| }; | ||
|
|
||
| const SmallChartCardTitle = ({ title, description, descriptionStyle }: SmallChartCardTitleProps) => ( | ||
| <Space.Compact | ||
| direction="vertical" | ||
| style={{ fontWeight: 'normal', padding: description ? '5px 5px' : '10px 5px', maxWidth: '100%' }} | ||
| > | ||
| <Typography.Text | ||
| ellipsis={true} | ||
| style={{ | ||
| fontSize: '20px', | ||
| fontWeight: '600', | ||
| }} | ||
| > | ||
| {title} | ||
| </Typography.Text> | ||
| {description && ( | ||
| <Typography.Text type="secondary" style={descriptionStyle} ellipsis={{ tooltip: description }}> | ||
| {description} | ||
| </Typography.Text> | ||
| )} | ||
| </Space.Compact> | ||
| ); | ||
|
|
||
| export default SmallChartCardTitle; |
Oops, something went wrong.