Add tooltips

hubmapconsortium · Sep 17, 2024 · 7160282 · 7160282
1 parent eef1146
commit 7160282
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 4 deletions.
diff --git a/context/app/static/js/components/workspaces/WorkspaceJobTypeField/WorkspaceJobTypeField.tsx b/context/app/static/js/components/workspaces/WorkspaceJobTypeField/WorkspaceJobTypeField.tsx
@@ -5,10 +5,37 @@ import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormLabel from '@mui/material/FormLabel';
 import { FieldValues, useController, UseControllerProps } from 'react-hook-form';
+
+import InfoTooltipIcon from 'js/shared-styles/icons/TooltipIcon';
 import { useJobTypes } from '../api';
+import {
+  JUPYTER_LAB_GPU_JOB_TYPE,
+  JUPYTER_LAB_JOB_TYPE,
+  JUPYTER_LAB_NON_GPU_JOB_TYPE,
+  JUPYTER_LAB_R_JOB_TYPE,
+} from '../constants';
 
 type WorkspaceJobTypeFieldProps<FormType extends FieldValues> = Pick<UseControllerProps<FormType>, 'name' | 'control'>;
 
+const jobTypeDescriptions: Record<string, string> = {
+  [JUPYTER_LAB_JOB_TYPE]: 'No packages.',
+  [JUPYTER_LAB_R_JOB_TYPE]: 'Standard R packages. No Python packages.',
+  [JUPYTER_LAB_NON_GPU_JOB_TYPE]:
+    'Python packages: Pandas, Numpy, Scikit Learn, Pytorch (CPU), Seaborn, Scipy, Biopython, cellxgene_census, scanpy, squidpy, matplotlib, scVI, anndata, spatialdata, umap, napari.',
+  [JUPYTER_LAB_GPU_JOB_TYPE]:
+    'Python packages: Pandas, Numpy, Scikit Learn, Pytorch, Seaborn, Scipy, Biopython, cellxgene_census, scanpy, squidpy, matplotlib, scVI, anndata, spatialdata, umap, napari, rapids, rapids-singlecell.',
+};
+
+function JobTypeLabel({ label, id }: { label: string; id: string }) {
+  const tooltip = jobTypeDescriptions?.[id];
+  return (
+    <>
+      {label}
+      {tooltip && <InfoTooltipIcon iconTooltipText={tooltip} />}
+    </>
+  );
+}
+
 function WorkspaceJobTypeField<FormType extends FieldValues>({ control, name }: WorkspaceJobTypeFieldProps<FormType>) {
   const { field } = useController({
     name,
@@ -36,9 +63,16 @@ function WorkspaceJobTypeField<FormType extends FieldValues>({ control, name }:
         value={field.value}
         onChange={(e, value) => field.onChange(value)}
       >
-        {Object.values(data).map(({ id, name: jobTypeName }) => (
-          <FormControlLabel value={id} control={<Radio />} label={jobTypeName} key={id} />
-        ))}
+        {Object.values(data).map(({ id, name: jobTypeName }) => {
+          return (
+            <FormControlLabel
+              value={id}
+              control={<Radio />}
+              label={<JobTypeLabel label={jobTypeName} id={id} />}
+              key={id}
+            />
+          );
+        })}
       </RadioGroup>
     </Box>
   );

diff --git a/context/app/static/js/components/workspaces/constants.ts b/context/app/static/js/components/workspaces/constants.ts
@@ -1,5 +1,11 @@
+/* Workspace job types */
+export const JUPYTER_LAB_JOB_TYPE = 'jupyter_lab';
+export const JUPYTER_LAB_R_JOB_TYPE = 'jupyter_lab_r';
+export const JUPYTER_LAB_GPU_JOB_TYPE = 'jupyter_lab_gpu_common_packages';
+export const JUPYTER_LAB_NON_GPU_JOB_TYPE = 'jupyter_lab_non_gpu_common_packages';
+
 /* Workspace defaults */
-export const DEFAULT_JOB_TYPE = 'jupyter_lab';
+export const DEFAULT_JOB_TYPE = JUPYTER_LAB_JOB_TYPE;
 export const DEFAULT_TEMPLATE_KEY = 'blank';
 
 /* Workspace resource defaults */