Pass groups as props in dataset manager

Author: jessica-cheng

frontend/packages/@depmap/dataset-manager/src/components/DatasetEditForm.tsx

@@ -15,7 +15,7 @@ import Form from "@rjsf/core";
 
 interface DatasetEditFormProps {
   getDataTypesAndPriorities: () => Promise<InvalidPrioritiesByDataType>;
-  getGroups: () => Promise<Group[]>;
+  groups: Group[];
   datasetToEdit: Dataset;
   onSubmit: (
     datasetId: string,
@@ -41,12 +41,7 @@ const uiSchema: UiSchema = {
 };
 
 export default function DatasetForm(props: DatasetEditFormProps) {
-  const {
-    getDataTypesAndPriorities,
-    getGroups,
-    datasetToEdit,
-    onSubmit,
-  } = props;
+  const { getDataTypesAndPriorities, groups, datasetToEdit, onSubmit } = props;
 
   const [schema, setSchema] = useState<RJSFSchema | null>(null);
   const [formDataVals, setFormDataVals] = useState<any>(null);
@@ -57,10 +52,7 @@ export default function DatasetForm(props: DatasetEditFormProps) {
   useEffect(() => {
     (async () => {
       try {
-        const [dataTypesPriorities, groups] = await Promise.all([
-          getDataTypesAndPriorities(),
-          getGroups(),
-        ]);
+        const dataTypesPriorities = await getDataTypesAndPriorities();
 
         const dataTypeOptions = Object.keys(dataTypesPriorities).map(
           (dType) => {
@@ -116,7 +108,7 @@ export default function DatasetForm(props: DatasetEditFormProps) {
         console.error(e);
       }
     })();
-  }, [getGroups, getDataTypesAndPriorities, datasetToEdit]);
+  }, [groups, getDataTypesAndPriorities, datasetToEdit]);
 
   return schema && formDataVals ? (
     <Form

frontend/packages/@depmap/dataset-manager/src/components/DatasetForm.tsx

@@ -26,7 +26,7 @@ import styles from "../styles/styles.scss";
 interface DatasetFormProps {
   getDimensionTypes: () => Promise<DimensionType[]>;
   getDataTypesAndPriorities: () => Promise<InvalidPrioritiesByDataType>;
-  getGroups: () => Promise<Group[]>;
+  groups: Group[];
   uploadFile: (fileArgs: { file: File | Blob }) => Promise<UploadFileResponse>;
   uploadDataset: (datasetParams: DatasetParams) => Promise<any>;
   getTaskStatus: (taskIds: string) => Promise<CeleryTask>;
@@ -37,7 +37,7 @@ interface DatasetFormProps {
 export default function DatasetForm(props: DatasetFormProps) {
   const {
     getDimensionTypes,
-    getGroups,
+    groups,
     getDataTypesAndPriorities,
     uploadFile,
     uploadDataset,
@@ -110,7 +110,6 @@ export default function DatasetForm(props: DatasetFormProps) {
   const [sampleTypeOptions, setSampleTypesOptions] = useState<
     SampleDimensionType[]
   >([]);
-  const [groupOptions, setGroupsOptions] = useState<Group[]>([]);
   const [
     invalidPrioritiesByDataType,
     setInvalidPrioritiesByDataType,
@@ -128,14 +127,9 @@ export default function DatasetForm(props: DatasetFormProps) {
   useEffect(() => {
     (async () => {
       try {
-        const [
-          dataTypesPriorities,
-          dimensionTypes,
-          groups,
-        ] = await Promise.all([
+        const [dataTypesPriorities, dimensionTypes] = await Promise.all([
           getDataTypesAndPriorities(),
           getDimensionTypes(),
-          getGroups(),
         ]);
 
         const dataTypes = Object.keys(dataTypesPriorities).map((dType) => {
@@ -153,12 +147,11 @@ export default function DatasetForm(props: DatasetFormProps) {
         setDataTypeOptions(dataTypes);
         setFeatureTypesOptions(featureTypes);
         setSampleTypesOptions(sampleTypes);
-        setGroupsOptions(groups);
       } catch (e) {
         console.error(e);
       }
     })();
-  }, [getDimensionTypes, getGroups, getDataTypesAndPriorities]);
+  }, [getDimensionTypes, groups, getDataTypesAndPriorities]);
 
   /**
     checkStatus and reject functions influenced by ProgressTracker.tsx
@@ -309,7 +302,7 @@ export default function DatasetForm(props: DatasetFormProps) {
           <MatrixDatasetForm
             featureTypes={featureTypeOptions}
             sampleTypes={sampleTypeOptions}
-            groups={groupOptions}
+            groups={groups}
             dataTypes={dataTypeOptions}
             invalidDataTypePriorities={invalidPrioritiesByDataType}
             initFormData={formContent.matrix}
@@ -336,7 +329,7 @@ export default function DatasetForm(props: DatasetFormProps) {
         <>
           <TableDatasetForm
             dimensionTypes={dimensionTypeOptions}
-            groups={groupOptions}
+            groups={groups}
             dataTypes={dataTypeOptions}
             invalidDataTypePriorities={invalidPrioritiesByDataType}
             initFormData={formContent.table}
@@ -363,7 +356,7 @@ export default function DatasetForm(props: DatasetFormProps) {
     reject,
     featureTypeOptions,
     sampleTypeOptions,
-    groupOptions,
+    groups,
     dataTypeOptions,
     invalidPrioritiesByDataType,
     formContent,

frontend/packages/@depmap/dataset-manager/src/components/index.tsx

@@ -7,6 +7,7 @@ import {
   // instanceOfErrorDetail,
   DimensionTypeAddArgs,
   DimensionTypeUpdateArgs,
+  Group,
   instanceOfErrorDetail,
 } from "@depmap/types";
 
@@ -26,6 +27,7 @@ export default function Datasets() {
   const { getApi } = useContext(ApiContext);
   const [dapi] = useState(() => getApi());
   const [datasets, setDatasets] = useState<Dataset[] | null>(null);
+  const [groups, setGroups] = useState<Group[]>(null);
 
   const [initError, setInitError] = useState(false);
 
@@ -52,10 +54,7 @@ export default function Datasets() {
       dapi.updateDimensionType(dimTypeName, dimTypeArgs),
     [dapi]
   );
-  const getGroups = useCallback(() => dapi.getGroups(!isAdvancedMode), [
-    dapi,
-    isAdvancedMode,
-  ]); // write access set to true if not advanced mode
+
   const getDataTypesAndPriorities = useCallback(
     () => dapi.getDataTypesAndPriorities(),
     [dapi]
@@ -126,10 +125,12 @@ export default function Datasets() {
     (async () => {
       try {
         let currentDatasets = await dapi.getBreadboxDatasets();
+        // write access set to true if not advanced mode
+        const userGroups = await dapi.getGroups(!isAdvancedMode);
+        setGroups(userGroups);
 
         if (!isAdvancedMode) {
-          const writeGroups = await dapi.getGroups(!isAdvancedMode);
-          const group_ids = writeGroups.map((group) => {
+          const group_ids = userGroups.map((group) => {
             return group.id;
           });
           currentDatasets = currentDatasets.filter((dataset) =>
@@ -159,7 +160,7 @@ export default function Datasets() {
         setInitError(true);
       }
     })();
-  }, [dapi, getDimensionTypes, getGroups, isAdvancedMode]);
+  }, [dapi, getDimensionTypes, isAdvancedMode]);
 
   const datasetForm = useCallback(() => {
     if (datasets) {
@@ -170,7 +171,7 @@ export default function Datasets() {
         formTitle = "Edit Dataset";
         datasetFormComponent = (
           <DatasetEditForm
-            getGroups={getGroups}
+            groups={groups}
             getDataTypesAndPriorities={getDataTypesAndPriorities}
             onSubmit={async (
               datasetId: string,
@@ -200,7 +201,7 @@ export default function Datasets() {
         datasetFormComponent = (
           <DatasetForm
             getDimensionTypes={getDimensionTypes}
-            getGroups={getGroups}
+            groups={groups}
             getDataTypesAndPriorities={getDataTypesAndPriorities}
             uploadFile={postFileUpload}
             uploadDataset={postDatasetUpload}
@@ -243,7 +244,7 @@ export default function Datasets() {
     isEditDatasetMode,
     datasetToEdit,
     showDatasetModal,
-    getGroups,
+    groups,
     getDataTypesAndPriorities,
     updateDataset,
     getDimensionTypes,