Skip to content
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

Jump to bottom

Austenem/CAT-246 dataset detail workspace updates #3533

Merged
merged 8 commits into from
Sep 10, 2024
Merged

Austenem/CAT-246 dataset detail workspace updates #3533

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fbd022a
separate menu component
austenem Aug 30, 2024
c47f2c3
update tooltip
austenem Sep 3, 2024
ed7649f
consolidate menu options
austenem Sep 5, 2024
5db03fa
add changelog
austenem Sep 5, 2024
e28157b
update imports
austenem Sep 5, 2024
8fbbcdc
update to use current helper panel datasets
austenem Sep 6, 2024
cbe6a73
update initial datasets
austenem Sep 6, 2024
56e0ccd
add notebook button to processed dataset pages
austenem Sep 9, 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
1 change: 1 addition & 0 deletions CHANGELOG-dataset-detail-workspace-updates.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Update menu choices for the workspace buttons in unified views dataset detail pages.
129 changes: 19 additions & 110 deletions context/app/static/js/components/detailPage/ProcessedData/HelperPanel/HelperPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,26 @@
import React, { PropsWithChildren } from 'react';
import { animated } from '@react-spring/web';
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 { useIsDesktop } from 'js/hooks/media-queries';
import Fade from '@mui/material/Fade';
import SchemaRounded from '@mui/icons-material/SchemaRounded';
import { WorkspacesIcon } from 'js/shared-styles/icons';
import CloudDownloadRounded from '@mui/icons-material/CloudDownloadRounded';
import { useAppContext } from 'js/components/Contexts';

import { useIsDesktop } from 'js/hooks/media-queries';
import { WorkspacesIcon } from 'js/shared-styles/icons';
import { useAnimatedSidebarPosition } from 'js/shared-styles/sections/TableOfContents/hooks';
import { animated } from '@react-spring/web';
import { useEventCallback } from '@mui/material/utils';
import ListItemIcon from '@mui/material/ListItemIcon';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import AddRounded from '@mui/icons-material/AddRounded';
import NewWorkspaceDialog from 'js/components/workspaces/NewWorkspaceDialog';
import { useCreateWorkspaceForm } from 'js/components/workspaces/NewWorkspaceDialog/useCreateWorkspaceForm';
import { useOpenDialog } from 'js/components/workspaces/WorkspacesDropdownMenu/WorkspacesDropdownMenu';
import SelectableTableProvider from 'js/shared-styles/tables/SelectableTableProvider/SelectableTableProvider';
import AddDatasetsFromSearchDialog from 'js/components/workspaces/AddDatasetsFromSearchDialog';
import { LineClamp } from 'js/shared-styles/text';
import Fade from '@mui/material/Fade';
import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips';

import { formatDate } from 'date-fns/format';
import { HelperPanelPortal } from '../../DetailLayout/DetailLayout';
import useProcessedDataStore from '../store';
import StatusIcon from '../../StatusIcon';
import { getDateLabelAndValue } from '../../utils';
import { HelperPanelButton } from './styles';
import { useTrackEntityPageEvent } from '../../useTrackEntityPageEvent';
import ProcessedDataWorkspaceMenu from '../ProcessedDataWorkspaceMenu';

function useCurrentDataset() {
return useProcessedDataStore((state) => state.currentDataset);
Expand Down Expand Up @@ -100,108 +92,25 @@ function HelperPanelBody() {
);
}

function WorkspaceButton() {
const currentDataset = useCurrentDataset();
const { isWorkspacesUser } = useAppContext();
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const track = useTrackEntityPageEvent();

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
track({
action: 'Open Workspace Menu',
label: currentDataset?.hubmap_id,
});
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};

const {
control,
errors,
removeDatasets,
setDialogIsOpen: setOpenCreateWorkspace,
dialogIsOpen: createWorkspaceIsOpen,
...rest
} = useCreateWorkspaceForm({
defaultName: currentDataset?.hubmap_id,
initialSelectedDatasets: currentDataset ? [currentDataset.uuid] : [],
});

const openEditWorkspaceDialog = useOpenDialog('ADD_DATASETS_FROM_SEARCH');

const trackCreateWorkspace = useEventCallback(() => {
track({
action: 'Start Creating Workspace',
label: currentDataset?.hubmap_id,
});
setOpenCreateWorkspace(true);
handleClose();
});

const trackAddToWorkspace = useEventCallback(() => {
track({
action: 'Start Adding Dataset to Existing Workspace',
label: currentDataset?.hubmap_id,
});
openEditWorkspaceDialog();
handleClose();
});

if (!isWorkspacesUser || currentDataset?.status !== 'Published') {
return null;
}
// The selectable table provider is used here since a lot of the workspace logic relies on the selected rows
return (
<SelectableTableProvider tableLabel="Current Dataset" selectedRows={new Set([currentDataset.uuid])}>
<HelperPanelButton
startIcon={<WorkspacesIcon color="primary" />}
onClick={handleClick}
aria-controls={open ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
>
Workspace
</HelperPanelButton>
<Menu
open={open}
onClose={handleClose}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
>
<MenuItem onClick={trackCreateWorkspace}>
<ListItemIcon>
<WorkspacesIcon color="primary" fontSize="1.5rem" />
</ListItemIcon>
Launch New Workspace
</MenuItem>
<MenuItem onClick={trackAddToWorkspace}>
<ListItemIcon>
<AddRounded />
</ListItemIcon>
Add to Workspace
</MenuItem>
</Menu>
<NewWorkspaceDialog dialogIsOpen={createWorkspaceIsOpen} control={control} errors={errors} {...rest} />
<AddDatasetsFromSearchDialog />
</SelectableTableProvider>
);
}

function HelperPanelActions() {
const currentDataset = useCurrentDataset();
const track = useTrackEntityPageEvent();
if (!currentDataset) {
return null;
}

const { hubmap_id, uuid, status } = currentDataset;

return (
<>
<WorkspaceButton />
<ProcessedDataWorkspaceMenu
button={
<SecondaryBackgroundTooltip title="Launch new workspace or add dataset to an existing workspace.">
<HelperPanelButton startIcon={<WorkspacesIcon color="primary" />}>Workspace</HelperPanelButton>
</SecondaryBackgroundTooltip>
}
datasetDetails={{ hubmap_id, uuid, status }}
/>
<SecondaryBackgroundTooltip title="Scroll down to the Bulk Data Transfer Section.">
<HelperPanelButton
startIcon={<CloudDownloadRounded />}
Expand Down
134 changes: 134 additions & 0 deletions context/app/static/js/components/detailPage/ProcessedData/ProcessedDataWorkspaceMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import React from 'react';
import { useEventCallback } from '@mui/material/utils';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import AddRounded from '@mui/icons-material/AddRounded';

import SelectableTableProvider from 'js/shared-styles/tables/SelectableTableProvider';
import { WorkspacesIcon } from 'js/shared-styles/icons';
import { useOpenDialog } from 'js/components/workspaces/WorkspacesDropdownMenu/WorkspacesDropdownMenu';
import { useCreateWorkspaceForm } from 'js/components/workspaces/NewWorkspaceDialog/useCreateWorkspaceForm';
import { useAppContext, useFlaskDataContext } from 'js/components/Contexts';
import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntityPageEvent';
import NewWorkspaceDialog from 'js/components/workspaces/NewWorkspaceDialog/NewWorkspaceDialog';
import AddDatasetsFromSearchDialog from 'js/components/workspaces/AddDatasetsFromSearchDialog/AddDatasetsFromSearchDialog';

interface ProcessedDataWorkspaceMenuProps {
button: React.ReactNode;
datasetDetails: { hubmap_id: string; uuid: string; status: string };
}

function ProcessedDataWorkspaceMenu({
button,
datasetDetails: { hubmap_id, uuid, status },
}: ProcessedDataWorkspaceMenuProps) {
const {
entity: { mapped_data_access_level },
} = useFlaskDataContext();

const { isWorkspacesUser } = useAppContext();
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
austenem marked this conversation as resolved.
Show resolved Hide resolved
const open = Boolean(anchorEl);
const track = useTrackEntityPageEvent();

const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
track({
action: 'Open Workspace Menu',
label: hubmap_id,
});
setAnchorEl(event.currentTarget);
};

const handleClose = () => {
setAnchorEl(null);
};

const {
control,
errors,
removeDatasets,
setDialogIsOpen: setOpenCreateWorkspace,
dialogIsOpen: createWorkspaceIsOpen,
...rest
} = useCreateWorkspaceForm({
defaultName: hubmap_id,
initialSelectedDatasets: [uuid].filter(Boolean),
john-conroy marked this conversation as resolved.
Show resolved Hide resolved
});

const openEditWorkspaceDialog = useOpenDialog('ADD_DATASETS_FROM_SEARCH');

const createWorkspace = useEventCallback(() => {
track({
action: 'Start Creating Workspace',
label: hubmap_id,
});
setOpenCreateWorkspace(true);
handleClose();
});

const addToWorkspace = useEventCallback(() => {
track({
action: 'Start Adding Dataset to Existing Workspace',
label: hubmap_id,
});
openEditWorkspaceDialog();
handleClose();
});

// Clone the button element and add the onClick handler
const buttonWithClickHandler = React.cloneElement(button as React.ReactElement, {
onClick: handleOpen,
'aria-controls': open ? 'basic-menu' : undefined,
'aria-haspopup': 'true',
'aria-expanded': open ? 'true' : undefined,
});

const showWorkspaceButton = mapped_data_access_level && hubmap_id && isWorkspacesUser && status === 'Published';

if (!showWorkspaceButton) {
return null;
}

const options = [
{
children: 'Launch New Workspace',
onClick: createWorkspace,
icon: <WorkspacesIcon color="primary" fontSize="1.25rem" />,
},
{
children: 'Add to Workspace',
onClick: addToWorkspace,
icon: <AddRounded color="primary" />,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need the fontSize prop here?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a fontSize prop of any value to this icon shrinks it, not sure why - but the default size matches designs.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Icons directly imported from @mui/material/icons have a default fontSize of 1.25rem (medium): https://mui.com/material-ui/icons/#size

Icons we import from our icon map have their default font size set to 1rem by the default icon styles, so we end up needing to add the fontSize prop for those cases.

},
];

// The selectable table provider is used here since a lot of the workspace logic relies on the selected rows
return (
<SelectableTableProvider tableLabel="Current Dataset" selectedRows={new Set([uuid])}>
austenem marked this conversation as resolved.
Show resolved Hide resolved
{buttonWithClickHandler}
<>
<Menu
open={open}
onClose={handleClose}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
>
{options.map(({ children, onClick, icon }) => (
<MenuItem key={children} onClick={onClick}>
<ListItemIcon>{icon}</ListItemIcon>
{children}
</MenuItem>
))}
</Menu>
<NewWorkspaceDialog dialogIsOpen={createWorkspaceIsOpen} control={control} errors={errors} {...rest} />
<AddDatasetsFromSearchDialog />
</>
</SelectableTableProvider>
);
}

export default ProcessedDataWorkspaceMenu;
8 changes: 7 additions & 1 deletion ...t/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDataset.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,13 @@ function VisualizationAccordion() {
This visualization includes various interactive elements such as scatter plots, spatial imaging plots, heat
maps, genome browser tracks, and more.
</SectionDescription>
<VisualizationWrapper vitData={conf} uuid={uuid} shouldDisplayHeader={false} hasBeenMounted={hasBeenSeen} />
<VisualizationWrapper
vitData={conf}
uuid={uuid}
shouldDisplayHeader={false}
hasBeenMounted={hasBeenSeen}
hasNotebook
/>
</Subsection>
);
}
Expand Down
Loading
Loading