-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add helper panel, add publication/creation date logic, add tooltips t…
…o analysis details, add section descriptions, ensure hash links work with `document.querySelector`, add preliminary logic for scrolling to lazy loaded pieces,
- Loading branch information
1 parent
dea3cb2
commit 4d88066
Showing
22 changed files
with
416 additions
and
85 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
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
138 changes: 138 additions & 0 deletions
138
context/app/static/js/components/detailPage/ProcessedData/HelperPanel/HelperPanel.tsx
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,138 @@ | ||
| import React, { PropsWithChildren } from 'react'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import { formatDate } from 'date-fns/format'; | ||
| import Divider from '@mui/material/Divider'; | ||
| import Box from '@mui/system/Box'; | ||
| import { useIsDesktop } from 'js/hooks/media-queries'; | ||
| import SchemaRounded from '@mui/icons-material/SchemaRounded'; | ||
| import { WorkspacesIcon } from 'js/shared-styles/icons'; | ||
| import { CloudDownloadRounded } from '@mui/icons-material'; | ||
| import { useAppContext } from 'js/components/Contexts'; | ||
| import { formatSectionHash } from 'js/shared-styles/sections/TableOfContents/utils'; | ||
| import { HelperPanelPortal } from '../../DetailLayout/DetailLayout'; | ||
| import useProcessedDataStore from '../store'; | ||
| import StatusIcon from '../../StatusIcon'; | ||
| import { getDateLabelAndValue } from '../../utils'; | ||
| import { HelperPanelButton } from './styles'; | ||
|
|
||
| function useCurrentDataset() { | ||
| return useProcessedDataStore((state) => state.currentDataset); | ||
| } | ||
|
|
||
| function HelperPanelHeader() { | ||
| const currentDataset = useCurrentDataset(); | ||
| return ( | ||
| <Typography variant="subtitle2" display="flex" alignItems="center" gap={0.5} whiteSpace="nowrap"> | ||
| <SchemaRounded fontSize="small" /> | ||
| <a href={formatSectionHash(`#section-${currentDataset?.hubmap_id}`)}>{currentDataset?.hubmap_id}</a> | ||
| </Typography> | ||
| ); | ||
| } | ||
|
|
||
| function HelperPanelStatus() { | ||
| const currentDataset = useCurrentDataset(); | ||
| if (!currentDataset) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <Stack direction="row" alignItems="center"> | ||
| <StatusIcon status={currentDataset.status} /> | ||
| <Typography variant="body2">{currentDataset.status}</Typography> | ||
| </Stack> | ||
| ); | ||
| } | ||
|
|
||
| interface HelperPanelBodyItemProps extends PropsWithChildren { | ||
| label: string; | ||
| noWrap?: boolean; | ||
| } | ||
|
|
||
| const noWrapStyles = { | ||
| overflow: 'hidden', | ||
| textOverflow: 'ellipsis', | ||
| display: '-webkit-box', | ||
| WebkitLineClamp: 2, | ||
| WebkitBoxOrient: 'vertical', | ||
| }; | ||
|
|
||
| function HelperPanelBodyItem({ label, children, noWrap }: HelperPanelBodyItemProps) { | ||
| const valueStyles = noWrap ? noWrapStyles : {}; | ||
| return ( | ||
| <Stack direction="column"> | ||
| <Typography variant="overline">{label}</Typography> | ||
| <Typography variant="body2" sx={valueStyles}> | ||
| {children} | ||
| </Typography> | ||
| </Stack> | ||
| ); | ||
| } | ||
|
|
||
| function HelperPanelBody() { | ||
| const currentDataset = useCurrentDataset(); | ||
| if (!currentDataset) { | ||
| return null; | ||
| } | ||
| const [dateLabel, date] = getDateLabelAndValue(currentDataset); | ||
| return ( | ||
| <> | ||
| {currentDataset.title && <HelperPanelBodyItem label="Title">{currentDataset.title}</HelperPanelBodyItem>} | ||
| {currentDataset.description && ( | ||
| <HelperPanelBodyItem label="Description" noWrap> | ||
| {currentDataset.description} | ||
| </HelperPanelBodyItem> | ||
| )} | ||
| <HelperPanelBodyItem label="Pipeline">{currentDataset.pipeline}</HelperPanelBodyItem> | ||
| <HelperPanelBodyItem label="Consortium">{currentDataset.group_name}</HelperPanelBodyItem> | ||
| <HelperPanelBodyItem label={dateLabel}>{date && formatDate(date, 'yyyy-MM-dd')}</HelperPanelBodyItem> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function HelperPanelActions() { | ||
| const currentDataset = useCurrentDataset(); | ||
| // TODO: Add workspace actions/dropdown menu | ||
| const { isWorkspacesUser } = useAppContext(); | ||
| return ( | ||
| <> | ||
| {isWorkspacesUser && <HelperPanelButton startIcon={<WorkspacesIcon />}>Workspace</HelperPanelButton>} | ||
| <HelperPanelButton | ||
| startIcon={<CloudDownloadRounded />} | ||
| href={`#bulk-data-transfer?bulk-data=${currentDataset?.hubmap_id}`} | ||
| > | ||
| Bulk Download | ||
| </HelperPanelButton> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default function HelperPanel() { | ||
| const currentDataset = useCurrentDataset(); | ||
| // const panelOffset = useProcessedDataStore((state) => state.currentDatasetOffset); | ||
| const isDesktop = useIsDesktop(); | ||
| if (!currentDataset || !isDesktop) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <HelperPanelPortal> | ||
| <Box position="relative" height="100%"> | ||
| <Stack | ||
| position="fixed" | ||
| bottom="50%" | ||
| direction="column" | ||
| maxWidth="12rem" | ||
| padding={1} | ||
| gap={1} | ||
| bgcolor="secondaryContainer.main" | ||
| boxShadow={2} | ||
| > | ||
| <HelperPanelHeader /> | ||
| <Divider /> | ||
| <HelperPanelStatus /> | ||
| <HelperPanelBody /> | ||
| <HelperPanelActions /> | ||
| </Stack> | ||
| </Box> | ||
| </HelperPanelPortal> | ||
| ); | ||
| } |
3 changes: 3 additions & 0 deletions
3
context/app/static/js/components/detailPage/ProcessedData/HelperPanel/index.ts
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,3 @@ | ||
| import HelperPanel from './HelperPanel'; | ||
|
|
||
| export default HelperPanel; |
12 changes: 12 additions & 0 deletions
12
context/app/static/js/components/detailPage/ProcessedData/HelperPanel/styles.tsx
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,12 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { styled } from '@mui/material/styles'; | ||
| import Button, { ButtonProps } from '@mui/material/Button'; | ||
|
|
||
| export const HelperPanelButton = styled((props: ButtonProps) => <Button {...props} variant="outlined" />)( | ||
| ({ theme }) => ({ | ||
| backgroundColor: 'white', | ||
| borderRadius: theme.spacing(0.5), | ||
| whiteSpace: 'nowrap', | ||
| }), | ||
| ); |
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
Oops, something went wrong.