Austenem/CAT-899 Add access levels (#3574)

* add access levels * add changelog * rely on processed dataset access level * update readme
hubmapconsortium · Oct 16, 2024 · 6d47a5e · 6d47a5e
1 parent eec31fa
commit 6d47a5e
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 36 deletions.
diff --git a/CHANGELOG-add-access-levels.md b/CHANGELOG-add-access-levels.md
@@ -0,0 +1,2 @@
+- Add access levels to processed dataset helper panels.
+- Use relevant access levels when determining whether or not to show workspace buttons on dataset detail pages.
diff --git a/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/HelperPanel.tsx b/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/HelperPanel.tsx
@@ -15,17 +15,12 @@ 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 { getDateLabelAndValue, useCurrentDataset } from '../../utils';
 import { HelperPanelButton } from './styles';
 import { useTrackEntityPageEvent } from '../../useTrackEntityPageEvent';
 import ProcessedDataWorkspaceMenu from '../ProcessedDataWorkspaceMenu';
 
-function useCurrentDataset() {
-  return useProcessedDataStore((state) => state.currentDataset);
-}
-
 function HelperPanelHeader() {
   const currentDataset = useCurrentDataset();
   if (!currentDataset) {
@@ -47,7 +42,7 @@ function HelperPanelStatus() {
   return (
     <Stack direction="row" alignItems="center">
       <StatusIcon status={currentDataset.status} />
-      <Typography variant="body2">{currentDataset.status}</Typography>
+      <Typography variant="body2">{`${currentDataset.status} (${currentDataset.mapped_data_access_level})`}</Typography>
     </Stack>
   );
 }
@@ -99,7 +94,7 @@ function HelperPanelActions() {
     return null;
   }
 
-  const { hubmap_id, uuid, status } = currentDataset;
+  const { hubmap_id, uuid, status, mapped_data_access_level } = currentDataset;
 
   return (
     <>
@@ -109,7 +104,7 @@ function HelperPanelActions() {
             <HelperPanelButton startIcon={<WorkspacesIcon color="primary" />}>Workspace</HelperPanelButton>
           </SecondaryBackgroundTooltip>
         }
-        datasetDetails={{ hubmap_id, uuid, status }}
+        datasetDetails={{ hubmap_id, uuid, status, mapped_data_access_level }}
         dialogType="ADD_DATASETS_FROM_HELPER_PANEL"
       />
       <SecondaryBackgroundTooltip title="Scroll down to the Bulk Data Transfer Section.">

diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataWorkspaceMenu.tsx b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataWorkspaceMenu.tsx
@@ -8,27 +8,23 @@ import AddRounded from '@mui/icons-material/AddRounded';
 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 { useAppContext } from 'js/components/Contexts';
 import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntityPageEvent';
 import NewWorkspaceDialog from 'js/components/workspaces/NewWorkspaceDialog/NewWorkspaceDialog';
 import { DialogType } from 'js/stores/useWorkspaceModalStore';
 import AddDatasetsFromDetailDialog from 'js/components/workspaces/AddDatasetsFromDetailDialog';
 
 interface ProcessedDataWorkspaceMenuProps {
   button: React.ReactNode;
-  datasetDetails: { hubmap_id: string; uuid: string; status: string };
+  datasetDetails: { hubmap_id: string; uuid: string; status: string; mapped_data_access_level: string };
   dialogType: DialogType;
 }
 
 function ProcessedDataWorkspaceMenu({
   button,
-  datasetDetails: { hubmap_id, uuid, status },
+  datasetDetails: { hubmap_id, uuid, status, mapped_data_access_level },
   dialogType,
 }: ProcessedDataWorkspaceMenuProps) {
-  const {
-    entity: { mapped_data_access_level },
-  } = useFlaskDataContext();
-
   const { isWorkspacesUser } = useAppContext();
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
@@ -86,9 +82,7 @@ function ProcessedDataWorkspaceMenu({
     'aria-expanded': open ? 'true' : undefined,
   });
 
-  const showWorkspaceButton = mapped_data_access_level && hubmap_id && isWorkspacesUser && status === 'Published';
-
-  if (!showWorkspaceButton) {
+  if (!isWorkspacesUser || !hubmap_id || mapped_data_access_level !== 'Public' || status !== 'Published') {
     return null;
   }
 

diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/hooks.ts b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/hooks.ts
@@ -22,6 +22,7 @@ export type ProcessedDatasetDetails = ProcessedDatasetInfo &
     | 'protocol_url' // TODO: This is present for non-dataset entities, but not for datasets.
     | 'dataset_type'
     | 'mapped_consortium'
+    | 'mapped_data_access_level'
   >;
 
 export function useProcessedDatasetDetails(uuid: string) {
@@ -54,6 +55,7 @@ export function useProcessedDatasetDetails(uuid: string) {
       'mapped_consortium',
       'contributors',
       'contacts',
+      'mapped_data_access_level',
     ],
     size: 10000,
   };

diff --git a/...omponents/detailPage/entityHeader/EntityHeaderActionButtons/EntityHeaderActionButtons.tsx b/...omponents/detailPage/entityHeader/EntityHeaderActionButtons/EntityHeaderActionButtons.tsx
@@ -210,7 +210,7 @@ function EntityHeaderActionButtons({
             disabled={disabled}
           />
         }
-        datasetDetails={{ hubmap_id, uuid, status }}
+        datasetDetails={{ hubmap_id, uuid, status, mapped_data_access_level }}
         dialogType="ADD_DATASETS_FROM_HEADER"
       />
     </Stack>

diff --git a/.../static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx b/.../static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx
@@ -237,7 +237,7 @@ function EntityHeaderContent({ view, setView }: { view: SummaryViewsType; setVie
       <RightDiv>
         {vizIsFullscreen ? (
           <>
-            {vizNotebookId && <VisualizationWorkspaceButton uuid={vizNotebookId} />}
+            {vizNotebookId && <VisualizationWorkspaceButton />}
             <VisualizationShareButtonWrapper />
             <VizualizationThemeSwitch />
             <VisualizationCollapseButton />

diff --git a/context/app/static/js/components/detailPage/utils.ts b/context/app/static/js/components/detailPage/utils.ts
@@ -1,4 +1,5 @@
 import { Dataset, Donor, isDataset, isDonor, isSample, Sample } from 'js/components/types';
+import useProcessedDataStore from 'js/components/detailPage/ProcessedData/store';
 import { ProcessedDatasetDetails } from './ProcessedData/ProcessedDataset/hooks';
 
 export function getSectionOrder(
@@ -48,3 +49,7 @@ export function getOriginSampleAndMappedOrgan(entity: Sample | Dataset) {
   const origin_sample = entity.origin_samples[0];
   return { origin_sample, mapped_organ: origin_sample.mapped_organ };
 }
+
+export function useCurrentDataset() {
+  return useProcessedDataStore((state) => state.currentDataset);
+}
diff --git a/context/app/static/js/components/detailPage/visualization/Visualization/Visualization.tsx b/context/app/static/js/components/detailPage/visualization/Visualization/Visualization.tsx
@@ -131,7 +131,7 @@ function Visualization({
           leftText={shouldDisplayHeader ? <StyledSectionHeader>Visualization</StyledSectionHeader> : undefined}
           buttons={
             <Stack direction="row" spacing={1}>
-              {hasNotebook && <VisualizationWorkspaceButton uuid={uuid} />}
+              {hasNotebook && <VisualizationWorkspaceButton />}
               <VisualizationDownloadButton uuid={uuid} hasNotebook={hasNotebook} parentUuid={parentUuid} />
               <VisualizationShareButton />
               <VisualizationThemeSwitch />

diff --git a/...ts/detailPage/visualization/VisualizationWorkspaceButton/VisualizationWorkspaceButton.tsx b/...ts/detailPage/visualization/VisualizationWorkspaceButton/VisualizationWorkspaceButton.tsx
@@ -7,29 +7,21 @@ import NewWorkspaceDialog from 'js/components/workspaces/NewWorkspaceDialog';
 import { useCreateWorkspaceForm } from 'js/components/workspaces/NewWorkspaceDialog/useCreateWorkspaceForm';
 import { WhiteBackgroundIconTooltipButton } from 'js/shared-styles/buttons';
 import { useAppContext } from 'js/components/Contexts';
-import { useDetailContext } from 'js/components/detailPage/DetailContext';
-import { useProcessedDatasetDetails } from 'js/components/detailPage/ProcessedData/ProcessedDataset/hooks';
+import { useCurrentDataset } from 'js/components/detailPage/utils';
 
 const tooltip = 'Launch New Workspace';
 
-interface VisualizationWorkspaceButtonProps {
-  uuid?: string;
-}
-
-function VisualizationWorkspaceButton({ uuid = '' }: VisualizationWorkspaceButtonProps) {
-  const { mapped_data_access_level } = useDetailContext();
-  const {
-    datasetDetails: { hubmap_id },
-  } = useProcessedDatasetDetails(uuid);
+function VisualizationWorkspaceButton() {
+  const currentDataset = useCurrentDataset();
   const { isWorkspacesUser } = useAppContext();
 
   const { setDialogIsOpen, removeDatasets, ...rest } = useCreateWorkspaceForm({
-    defaultName: hubmap_id,
+    defaultName: currentDataset?.hubmap_id,
     defaultTemplate: 'visualization',
-    initialSelectedDatasets: [uuid],
+    initialSelectedDatasets: currentDataset ? [currentDataset.uuid] : [],
   });
 
-  if (!isWorkspacesUser || !hubmap_id || mapped_data_access_level !== 'Public') {
+  if (!isWorkspacesUser || !currentDataset?.hubmap_id || currentDataset?.mapped_data_access_level !== 'Public') {
     return null;
   }