resolve naming conflicts

CHANGELOG-new-ws-envs.md

@@ -0,0 +1 @@
+- Add language to workspace environment sections to help users distinguish between environments.

context/app/static/js/components/workspaces/LaunchWorkspaceDialog/LaunchWorkspaceDialog.tsx

@@ -15,16 +15,21 @@ import {
   useLaunchWorkspaceDialog,
   LaunchWorkspaceFormTypes,
 } from 'js/components/workspaces/LaunchWorkspaceDialog/hooks';
+import WorkspaceEnvironmentDescription from '../WorkspaceEnvironmentDescription';
 
 const formId = 'launch-workspace-form';
 
 const text = {
   environment: {
     title: 'Environment Selection',
-    description: [
-      'All workspaces are launched with Python support, with the option to add support for R. Workspaces with added R support may experience longer load times.',
-      'If a workspace was previously launched with R, launching a workspace without R support may cause issues with your saved work.',
-    ],
+    description: (
+      <WorkspaceEnvironmentDescription>
+        <Typography>
+          If a workspace was previously launched with R, launching a workspace without R support may cause issues with
+          your saved work.
+        </Typography>
+      </WorkspaceEnvironmentDescription>
+    ),
   },
   resources: {
     alert:
@@ -100,9 +105,7 @@ function LaunchWorkspaceDialog() {
               <SummaryPaper>
                 <Stack direction="column" spacing={2}>
                   <StyledSubtitle1>{text.environment.title}</StyledSubtitle1>
-                  {text.environment.description.map((description) => (
-                    <Typography key={description}>{description}</Typography>
-                  ))}
+                  {text.environment.description}
                   <WorkspaceJobTypeField control={control} name="workspaceJobTypeId" />
                 </Stack>
               </SummaryPaper>

context/app/static/js/components/workspaces/NewWorkspaceDialog/NewWorkspaceDialog.tsx

@@ -28,6 +28,7 @@ import AdvancedConfigOptions from '../AdvancedConfigOptions';
 import AddDatasetsTable from '../AddDatasetsTable';
 import { SearchAheadHit } from '../AddDatasetsTable/hooks';
 import { StyledSubtitle1 } from '../style';
+import WorkspaceEnvironmentDescription from '../WorkspaceEnvironmentDescription';
 
 const text = {
   overview: {
@@ -63,9 +64,7 @@ const text = {
   },
   configure: {
     title: 'Configure Workspace',
-    description: [
-      'All workspaces are launched with Python support, with the option to add support for R. Workspaces with added R support may experience longer load times.',
-    ],
+    description: <WorkspaceEnvironmentDescription />,
     advancedDescription: 'Adjusting these settings may result in longer workspace load times.',
   },
   templates: {
@@ -214,7 +213,7 @@ function NewWorkspaceDialog({
             />
             <Stack spacing={2} p={2} component={Paper} direction="column">
               <StyledSubtitle1>Environment Selection</StyledSubtitle1>
-              <Typography>{text.configure.description}</Typography>
+              {text.configure.description}
               <WorkspaceJobTypeField control={control} name="workspaceJobTypeId" />
             </Stack>
             <AdvancedConfigOptions control={control} description={text.configure.advancedDescription} />

context/app/static/js/components/workspaces/NewWorkspaceDialog/hooks.ts

@@ -17,7 +17,7 @@ import { useCreateAndLaunchWorkspace, useCreateTemplates } from 'js/components/w
 import { buildDatasetSymlinks } from 'js/components/workspaces/utils';
 import { useWorkspaceToasts } from 'js/components/workspaces/toastHooks';
 import { useJobTypes } from 'js/components/workspaces/api';
-import { DEFAULT_JOB_TYPE, R_JOB_TYPE, R_TEMPLATE_TITLE } from 'js/components/workspaces/constants';
+import { DEFAULT_JOB_TYPE, JUPYTER_LAB_R_JOB_TYPE, R_TEMPLATE_TITLE } from 'js/components/workspaces/constants';
 
 interface UserTemplatesTypes {
   templatesURL: string;
@@ -54,7 +54,7 @@ function useWorkspaceTemplates(tags: string[] = []) {
     Object.entries(templates)
       .filter(([, template]) => !template?.is_hidden)
       .map(([key, template]) => {
-        const newTitle = template?.job_types?.includes(R_JOB_TYPE)
+        const newTitle = template?.job_types?.includes(JUPYTER_LAB_R_JOB_TYPE)
           ? `${template.title} (${R_TEMPLATE_TITLE})`
           : template.title;
         return [key, { ...template, title: newTitle }];

context/app/static/js/components/workspaces/SelectableTemplateGrid/SelectableTemplateGrid.tsx

@@ -7,7 +7,7 @@ import { useController, Control, Path } from 'react-hook-form';
 import { SpacedSectionButtonRow } from 'js/shared-styles/sections/SectionButtonRow';
 import { useSelectItems } from 'js/hooks/useSelectItems';
 import ErrorOrWarningMessages from 'js/shared-styles/alerts/ErrorOrWarningMessages';
-import { DEFAULT_R_TEMPLATE_KEY, R_JOB_TYPE } from 'js/components/workspaces/constants';
+import { DEFAULT_R_TEMPLATE_KEY, JUPYTER_LAB_R_JOB_TYPE } from 'js/components/workspaces/constants';
 
 import { TemplatesTypes, WorkspacesEventCategories } from '../types';
 import TemplateGrid from '../TemplateGrid';
@@ -56,7 +56,7 @@ function SelectableTemplateGrid<FormType extends FormWithTemplates>({
 
   // If the Python + R job type is selected, select the default R template
   useEffect(() => {
-    if (jobType.value === R_JOB_TYPE) {
+    if (jobType.value === JUPYTER_LAB_R_JOB_TYPE) {
       addItem(DEFAULT_R_TEMPLATE_KEY);
     }
   }, [jobType.value, addItem]);

context/app/static/js/components/workspaces/TemplateGrid/TemplateGrid.tsx

@@ -3,7 +3,7 @@ import Grid from '@mui/material/Grid';
 import SelectableCard from 'js/shared-styles/cards/SelectableCard/SelectableCard';
 import { InternalLink } from 'js/shared-styles/Links';
 import { sortTemplates } from 'js/components/workspaces/utils';
-import { R_JOB_TYPE } from 'js/components/workspaces/constants';
+import { JUPYTER_LAB_R_JOB_TYPE } from 'js/components/workspaces/constants';
 import { TemplatesTypes, WorkspacesEventInfo } from 'js/components/workspaces/types';
 import { trackEvent } from 'js/helpers/trackers';
 
@@ -29,7 +29,7 @@ function TemplateGrid({
       return 'This template is already in your workspace.';
     }
     // If the template is an R template and the job type is not R
-    if (jobType !== R_JOB_TYPE && job_types?.includes(R_JOB_TYPE)) {
+    if (jobType !== JUPYTER_LAB_R_JOB_TYPE && job_types?.includes(JUPYTER_LAB_R_JOB_TYPE)) {
       return 'This template is not compatible with your current environment. To avoid potential issues, please ensure that you have selected the correct environment for your workspace.';
     }
     return undefined;

context/app/static/js/components/workspaces/WorkspaceEnvironmentDescription/WorkspaceEnvironmentDescription.tsx

@@ -0,0 +1,30 @@
+import React, { PropsWithChildren } from 'react';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+
+import HighEmphasis from 'js/shared-styles/text/HighEmphasis';
+import ContactUsLink from 'js/shared-styles/Links/ContactUsLink';
+
+function WorkspaceEnvironmentDescription({ children }: PropsWithChildren) {
+  return (
+    <Stack spacing={2}>
+      <Typography>
+        All workspaces environments have built-in Python support, with the option to include R or pre-installed packages
+        as needed. To view the full list of packages, use the <HighEmphasis>help(&apos;modules&apos;)</HighEmphasis>{' '}
+        command for Python or <HighEmphasis>install.packages()</HighEmphasis> for R in your workspace.
+      </Typography>
+      {children}
+      <Typography>
+        Please note that selecting environments with extra features may result in longer loading times. For environments
+        with GPU packages, it is strongly recommended to enable GPU support in the advanced configurations section.
+        Since GPU resources are limited, please select this option only if it is essential for your workspace.
+      </Typography>
+      <Typography>
+        If you have questions about these environments and their respective packages or suggestions for improvements,
+        please <ContactUsLink />.
+      </Typography>
+    </Stack>
+  );
+}
+
+export default WorkspaceEnvironmentDescription;

context/app/static/js/components/workspaces/WorkspaceEnvironmentDescription/index.ts

@@ -0,0 +1,3 @@
+import WorkspaceEnvironmentDescription from './WorkspaceEnvironmentDescription';
+
+export default WorkspaceEnvironmentDescription;

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>
   );

context/app/static/js/components/workspaces/constants.ts

@@ -1,12 +1,17 @@
+/* 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_PYTHON_TEMPLATE_KEY = 'blank';
 export const DEFAULT_R_TEMPLATE_KEY = 'blank_r';
 
 /* Workspace R templates */
 export const R_TEMPLATE_TAG = 'R';
 export const R_TEMPLATE_TITLE = 'Jupyter Lab: Python + R';
-export const R_JOB_TYPE = 'jupyter_lab_r';
 
 export const RECOMMENDED_TAGS = ['visualization', 'api', R_TEMPLATE_TAG];
 

context/app/static/js/shared-styles/text/HighEmphasis.tsx

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren } from 'react';
+import Typography, { TypographyProps } from '@mui/material/Typography';
+
+function HighEmphasis({ children, ...rest }: PropsWithChildren & TypographyProps) {
+  return (
+    <Typography variant="subtitle2" color="textPrimary" component="span" {...rest}>
+      {children}
+    </Typography>
+  );
+}
+
+export default HighEmphasis;