Fix issues with samples in progress

web/src/components/project/project-validation-and-edit-buttons.tsx

@@ -76,11 +76,7 @@ export const ProjectValidationAndEditButtons = (props: ProjectValidationAndEditB
   } = useProjectPage();
 
   const configMutation = useConfigMutation(namespace, projectName, tag, newProjectConfig);
-  const totalProjectMutation = useTotalProjectChangeMutation(namespace, projectName, tag, {
-    config: newProjectConfig,
-    samples: newProjectSamples,
-    subsamples: newProjectSubsamples,
-  });
+  const totalProjectMutation = useTotalProjectChangeMutation(namespace, projectName, tag);
 
   const projectInfo = projectAnnotationQuery.data;
   const projectConfig = projectConfigQuery.data;
@@ -105,8 +101,11 @@ export const ProjectValidationAndEditButtons = (props: ProjectValidationAndEditB
   };
 
   const handleTotalProjectChange = async () => {
-    await totalProjectMutation.mutateAsync();
-    runValidation();
+    await totalProjectMutation.mutateAsync({
+      config: newProjectConfig,
+      samples: newProjectSamples,
+      subsamples: newProjectSubsamples,
+    });
   };
 
   return (
@@ -120,7 +119,6 @@ export const ProjectValidationAndEditButtons = (props: ProjectValidationAndEditB
           projectView={view}
           setProjectView={setView}
         />
-
         {/* no matter what, only render if belonging to the user */}
         {user && projectInfo && canEdit(user, projectInfo) ? (
           <div className="h-100 d-flex flex-row align-items-center w-25 justify-content-end">

web/src/components/tables/sample-table.tsx

@@ -129,7 +129,6 @@ export const SampleTable = (props: Props) => {
             // @ts-ignore - we know that col is a number
             rows[row][col] = newVal;
           });
-
           // debugger;
           onChange(arraysToSampleList(rows));
         }
@@ -149,6 +148,7 @@ export const SampleTable = (props: Props) => {
           onChange(arraysToSampleList(rows));
         }
       }}
+      outsideClickDeselects={false}
     />
   );
 };

web/src/contexts/project-page-context.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
 
 import { useProjectAllHistory } from '../hooks/queries/useProjectAllHistory';
@@ -56,8 +56,19 @@ export const ProjectPageProvider = ({ children }: ProviderProps) => {
 
   // GENERAL STATE
   const [pageView, setPageView] = useState<ProjectPageView>('samples');
+  const pageViewStateMemoized = useMemo(() => {
+    return { pageView, setPageView };
+  }, [pageView]);
+
   const [forceTraditionalInterface, setForceTraditionalInterface] = useState(false);
+  const forceTraditionalInterfaceMemoized = useMemo(() => {
+    return { forceTraditionalInterface, setForceTraditionalInterface };
+  }, [forceTraditionalInterface]);
+
   const [currentHistoryId, setCurrentHistoryId] = useState<number | null>(null);
+  const currentHistoryIdMemoized = useMemo(() => {
+    return { currentHistoryId, setCurrentHistoryId };
+  }, [currentHistoryId]);
 
   // get state
   // PROJECT ANNOTATION
@@ -112,33 +123,48 @@ export const ProjectPageProvider = ({ children }: ProviderProps) => {
     }
   }, [currentHistoryId]);
 
-  return (
-    <ProjectPageContext.Provider
-      value={{
-        namespace,
-        projectName,
-        tag,
-        projectAnnotationQuery,
-        sampleTableQuery,
-        subSampleTableQuery,
-        projectConfigQuery,
-        projectViewsQuery,
-        projectValidationQuery,
-        projectAllHistoryQuery,
-        projectHistoryQuery,
-        shouldFetchSampleTable,
-        pageView,
-        setPageView,
-        forceTraditionalInterface,
-        setForceTraditionalInterface,
-        MAX_SAMPLE_COUNT,
-        currentHistoryId,
-        setCurrentHistoryId,
-      }}
-    >
-      {children}
-    </ProjectPageContext.Provider>
+  const contextValue = useMemo(
+    () => ({
+      namespace,
+      projectName,
+      tag,
+      projectAnnotationQuery,
+      sampleTableQuery,
+      subSampleTableQuery,
+      projectConfigQuery,
+      projectViewsQuery,
+      projectValidationQuery,
+      projectAllHistoryQuery,
+      projectHistoryQuery,
+      shouldFetchSampleTable,
+      pageView,
+      setPageView,
+      forceTraditionalInterface,
+      setForceTraditionalInterface,
+      MAX_SAMPLE_COUNT,
+      currentHistoryId,
+      setCurrentHistoryId,
+    }),
+    [
+      namespace,
+      projectName,
+      tag,
+      projectAnnotationQuery,
+      sampleTableQuery,
+      subSampleTableQuery,
+      projectConfigQuery,
+      projectViewsQuery,
+      projectValidationQuery,
+      projectAllHistoryQuery,
+      projectHistoryQuery,
+      shouldFetchSampleTable,
+      pageView,
+      forceTraditionalInterface,
+      currentHistoryId,
+    ],
   );
+
+  return <ProjectPageContext.Provider value={contextValue}>{children}</ProjectPageContext.Provider>;
 };
 
 export const useProjectPage = () => {

web/src/hooks/mutations/useTotalProjectChangeMutation.ts

@@ -13,21 +13,40 @@ interface TotalProjectChangeMutationProps {
   subsamples?: Sample[];
 }
 
-export const useTotalProjectChangeMutation = (
-  namespace: string,
-  project: string,
-  tag: string,
-  data: TotalProjectChangeMutationProps,
-) => {
+export const useTotalProjectChangeMutation = (namespace: string, project: string, tag: string) => {
   const session = useSession();
   const queryClient = useQueryClient();
 
   const mutation = useMutation({
-    mutationFn: () => editTotalProject(namespace || '', project || '', tag, session.jwt || '', data),
-    onSuccess: () => {
+    mutationFn: (data: TotalProjectChangeMutationProps) => editTotalProject(namespace, project, tag, session.jwt, data),
+    onSuccess: (_data, variables) => {
       queryClient.invalidateQueries({
         queryKey: [namespace, project, tag],
       });
+
+      // set the project config
+      queryClient.setQueryData([namespace, project, tag, 'config'], (_oldData: string) => {
+        return {
+          config: variables.config,
+        };
+      });
+
+      // set the sample table
+      queryClient.setQueryData([namespace, project, tag, 'samples'], (_oldData: Sample[]) => {
+        return {
+          count: variables.samples?.length,
+          items: variables.samples,
+        };
+      });
+
+      // set the subsample table
+      queryClient.setQueryData([namespace, project, tag, 'subsamples'], (_oldData: Sample[]) => {
+        return {
+          count: variables.subsamples?.length,
+          items: variables.subsamples,
+        };
+      });
+
       toast.success('Successfully updated the project!');
     },
     onError: (err: AxiosError) => {

web/src/hooks/queries/useSchema.ts

@@ -16,6 +16,5 @@ export const useSchema = (registry: string | undefined) => {
     queryKey: ['schema', registry],
     queryFn: () => fetchSchema(registry || ''),
     enabled: registry !== undefined && registry.length > 0,
-    refetchOnWindowFocus: false,
   });
 };

web/src/hooks/queries/useSearch.ts

@@ -29,7 +29,6 @@ export const useSearch = (params: SearchParams) => {
     queryKey: ['search', q, offset],
     queryFn: () => search(q, _limit, _offset, _scoreThreshold, session.jwt || ''),
     enabled: _autoRun && !!q, // only run if autoRun is true and q is not empty
-    refetchOnWindowFocus: false,
     placeholderData: keepPreviousData,
     staleTime: 1000 * 60 * 5, // 5 minutes
   });

web/src/hooks/queries/useValidation.ts

@@ -48,7 +48,6 @@ export const useValidation = (params: ValidationParams) => {
     queryKey: ['validation', pepRegistry, pepFiles, schema, schema_registry],
     queryFn: () => runValidation(params),
     enabled: enabled,
-    refetchOnWindowFocus: false,
     retry: false,
   });
 };

web/src/hooks/useSession.ts

@@ -45,7 +45,7 @@ export const useSession = (): Session => {
       return response.json();
     },
     enabled: !!jwt,
-    refetchOnWindowFocus: true,
+    refetchOnWindowFocus: false,
   });
 
   let decoded = null;