fix pop adding and removing issue by replacing query

pepkit · Sep 23, 2024 · 3d56c93 · 3d56c93
1 parent 8995653
commit 3d56c93
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 21 deletions.
diff --git a/web/src/components/forms/components/pep-search-dropdown.tsx b/web/src/components/forms/components/pep-search-dropdown.tsx
@@ -65,6 +65,13 @@ export const PepSearchDropdown = (props: Props) => {
           value: `${n.namespace}/${n.name}:${n.tag}`,
         })) || []
       }
+      styles={{
+        control: (provided) => ({
+          ...provided,
+          borderRadius: '.375em',
+          borderColor: '#dee2e6'
+        })
+      }}
       placeholder="Search for PEPs"
       menuPlacement="bottom"
       controlShouldRenderValue={true}

diff --git a/web/src/components/modals/remove-pep-from-pop.tsx b/web/src/components/modals/remove-pep-from-pop.tsx
@@ -1,8 +1,12 @@
 import { FC, useState } from 'react';
 import { Modal } from 'react-bootstrap';
+import { useParams, useSearchParams } from 'react-router-dom';
 
 import { Sample } from '../../../types';
-import { useSampleTableMutation } from '../../hooks/mutations/useSampleTableMutation';
+import { useTotalProjectChangeMutation } from '../../hooks/mutations/useTotalProjectChangeMutation';
+import { useProjectConfig } from '../../hooks/queries/useProjectConfig';
+import { useSampleTable } from '../../hooks/queries/useSampleTable';
+import { useSubsampleTable } from '../../hooks/queries/useSubsampleTable';
 
 interface Props {
   show: boolean;
@@ -33,7 +37,18 @@ export const RemovePEPFromPOPModal: FC<Props> = ({
     setConfirmText('');
   };
 
-  const { isPending: isSampleTablePending, submit } = useSampleTableMutation(
+  let { namespace, project, tag } = useParams();
+
+  const { data: projectConfig } = useProjectConfig(namespace, project, tag);
+  const { data: subSampleTable } = useSubsampleTable(namespace, project, tag);
+
+  // const { isPending: isSampleTablePending, submit } = useSampleTableMutation(
+  //   namespaceToRemoveFrom!,
+  //   projectToRemoveFrom!,
+  //   tagToRemoveFrom || 'default',
+  // );
+
+  const { isPending: isSampleTablePending, submit } = useTotalProjectChangeMutation(
     namespaceToRemoveFrom!,
     projectToRemoveFrom!,
     tagToRemoveFrom || 'default',
@@ -73,15 +88,20 @@ export const RemovePEPFromPOPModal: FC<Props> = ({
       <Modal.Footer>
         <button
           onClick={() => {
-            submit(
-              currentPeps.filter((pep) => pep.sample_name !== `${namespaceToRemove}/${projectToRemove}:${tagToRemove}`),
-              {
-                onSuccess: () => {
-                  onSuccess();
-                  onHide();
-                },
-              },
-            );
+            submit({
+              config: projectConfig?.config,
+              samples: currentPeps.filter((pep) => pep.sample_name !== `${namespaceToRemove}/${projectToRemove}:${tagToRemove}`),
+              subsamples: subSampleTable?.items,
+            });
+            // submit(
+            //   currentPeps.filter((pep) => pep.sample_name !== `${namespaceToRemove}/${projectToRemove}:${tagToRemove}`),
+            //   {
+            //     onSuccess: () => {
+            //       onSuccess();
+            //       onHide();
+            //     },
+            //   },
+            // );
           }}
           disabled={confirmText !== `${namespaceToRemove}/${projectToRemove}:${tagToRemove}` || isSampleTablePending}
           type="button"

diff --git a/web/src/components/pop/pop-interface.tsx b/web/src/components/pop/pop-interface.tsx
@@ -8,19 +8,24 @@ import { useSampleTableMutation } from '../../hooks/mutations/useSampleTableMuta
 import { useMultiProjectAnnotation } from '../../hooks/queries/useMultiProjectAnnotation';
 import { useProjectAnnotation } from '../../hooks/queries/useProjectAnnotation';
 import { useSampleTable } from '../../hooks/queries/useSampleTable';
+import { useSubsampleTable } from '../../hooks/queries/useSubsampleTable';
+import { useProjectConfig } from '../../hooks/queries/useProjectConfig';
 import { NamespaceSearchDropdown } from '../forms/components/namespace-search-dropdown';
 import { PepSearchDropdown } from '../forms/components/pep-search-dropdown';
 import { ProjectCardPlaceholder } from '../placeholders/project-card-placeholder';
 import { LoadingSpinner } from '../spinners/loading-spinner';
 import { PopCard } from './pop-card';
+import { useTotalProjectChangeMutation } from '../../hooks/mutations/useTotalProjectChangeMutation';
 
 type Props = {
   projectInfo: ReturnType<typeof useProjectAnnotation>['data'];
   sampleTable: ReturnType<typeof useSampleTable>['data'];
+  subSampleTable: ReturnType<typeof useSubsampleTable>['data'];
+  projectConfig: ReturnType<typeof useProjectConfig>['data'];
 };
 
 export const PopInterface = (props: Props) => {
-  const { projectInfo } = props;
+  const { projectInfo, subSampleTable, projectConfig } = props;
 
   const { namespace, projectName, tag } = useProjectPage();
 
@@ -38,7 +43,8 @@ export const PopInterface = (props: Props) => {
   const [addToPopRegistry, setAddToPopRegistry] = useState<string | undefined>(undefined);
   const [isAddingNew, setIsAddingNew] = useState<boolean>(false);
 
-  const { isPending: isSampleTablePending, submit } = useSampleTableMutation(namespace, projectName, tag);
+  // const { isPending: isSampleTablePending, submit } = useSampleTableMutation(namespace, projectName, tag);
+  const { isPending: isSampleTablePending, submit } = useTotalProjectChangeMutation(namespace, projectName, tag);
 
   if (isLoading) {
     return (
@@ -119,15 +125,19 @@ export const PopInterface = (props: Props) => {
                             return;
                           }
                           let newPeps = peps?.items || [];
-                          const [newNamespace, newPojectNameAndTag] = addToPopRegistry.split('/');
-                          const [newProjectName, newProjectTag] = newPojectNameAndTag.split(':');
+                          const [newNamespace, newProjectNameAndTag] = addToPopRegistry.split('/');
+                          const [newProjectName, newProjectTag] = newProjectNameAndTag.split(':');
                           newPeps?.push({
                             sample_name: `${newNamespace}/${newProjectName}:${newProjectTag}`,
                             namespace: newNamespace,
                             name: newProjectName,
                             tag: newProjectTag,
                           });
-                          submit(newPeps);
+                          submit({
+                            config: projectConfig?.config,
+                            samples: newPeps,
+                            subsamples: subSampleTable?.items,
+                          });
                         }}
                         disabled={addToPopNamespace === '' || addToPopRegistry === '' || isSampleTablePending}
                       >

diff --git a/web/src/components/project/project-interface.tsx b/web/src/components/project/project-interface.tsx
@@ -23,7 +23,6 @@ import { SampleTable } from '../tables/sample-table';
 import { ProjectConfigEditor } from './project-config';
 import { ProjectValidationAndEditButtons } from './project-validation-and-edit-buttons';
 import { StandardizeMetadataModal } from '../modals/standardize-metadata';
-
 import { useStandardizeModalStore } from '../../hooks/stores/useStandardizeModalStore'
 
 type Props = {
@@ -106,7 +105,7 @@ export const ProjectInterface = (props: Props) => {
     try {
       const samplesParsed = arraysToSampleList(values.samples, 'Sample');
       const subsamplesParsed = arraysToSampleList(values.subsamples, 'Subsample');
-      const configParsed = yaml.load(values.config) as Record<string, unknown>;
+      // const configParsed = yaml.load(values.config) as Record<string, unknown>;
 
       // // check if 'name' value exists in config for PEPhub PEP
       // if (!('name' in configParsed) || (('name' in configParsed) && (!configParsed.name))) {

diff --git a/web/src/components/project/project-page-header-bar.tsx b/web/src/components/project/project-page-header-bar.tsx
@@ -19,11 +19,9 @@ import { downloadZip } from '../../utils/project';
 import { ProjectHistoryModal } from '../modals/project-history';
 import { ProjectHeaderBarPlaceholder } from './placeholders/project-header-bar-placeholder';
 import { ProjectStars } from './project-stars'
-
 import { useStandardizeModalStore } from '../../hooks/stores/useStandardizeModalStore'
 import { useSampleTable } from '../../hooks/queries/useSampleTable'
 
-
 type Props = {
   sampleTable: ReturnType<typeof useSampleTable>['data'];
   sampleTableIndex: string;

diff --git a/web/src/pages/Project.tsx b/web/src/pages/Project.tsx
@@ -118,7 +118,7 @@ export const ProjectPage = () => {
         <div className='d-flex flex-column' style={{height: 'calc(100vh - 85px)'}}>
           <ProjectHeader sampleTable={sampleTableQuery.data} sampleTableIndex={sampleTableIndex || 'sample_name'}/>
           {projectInfo?.pop && !forceTraditionalInterface ? (
-            <PopInterface projectInfo={projectInfo} sampleTable={sampleTableQuery.data} />
+            <PopInterface projectInfo={projectInfo} sampleTable={sampleTableQuery.data} subSampleTable={subSampleTableQuery.data} projectConfig={projectConfigQuery.data} />
           ) : (
             <ProjectInterface
               key={`${projectAnnotationQuery.dataUpdatedAt}-${projectConfigQuery.dataUpdatedAt}-${sampleTableQuery.dataUpdatedAt}-${subSampleTableQuery.dataUpdatedAt}`}