more things

pepkit · Jul 11, 2024 · 8f87426 · 8f87426
1 parent 10484a7
commit 8f87426
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 73 deletions.
diff --git a/web/src/components/tables/sample-table.tsx b/web/src/components/tables/sample-table.tsx
@@ -148,6 +148,7 @@ export const SampleTable = (props: Props) => {
           onChange(arraysToSampleList(rows));
         }
       }}
+      outsideClickDeselects={false}
     />
   );
 };
diff --git a/web/src/contexts/project-page-context.tsx b/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 = () => {

diff --git a/web/src/pages/Project.tsx b/web/src/pages/Project.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useLocalStorage } from 'usehooks-ts';
 
@@ -48,7 +48,6 @@ export const ProjectPage = () => {
     shouldFetchSampleTable,
     pageView,
     forceTraditionalInterface,
-    MAX_SAMPLE_COUNT,
     currentHistoryId,
     projectHistoryQuery,
   } = useProjectPage();
@@ -91,6 +90,20 @@ export const ProjectPage = () => {
     projectValidationQuery.refetch();
   };
 
+  const sampleData = useMemo(() => {
+    if (currentHistoryId !== null) {
+      return projectHistoryView?._sample_dict || [];
+    }
+    return viewData ? viewData._samples || [] : newProjectSamples || [];
+  }, [currentHistoryId, projectHistoryView?._sample_dict, viewData, newProjectSamples]);
+
+  const subsampleData = useMemo(() => {
+    if (currentHistoryId !== null) {
+      return projectHistoryView?._subsample_list || [];
+    }
+    return newProjectSubsamples || [];
+  }, [currentHistoryId, projectHistoryView, newProjectSubsamples]);
+
   // watch for query changes to update newProjectConfig and newProjectSamples
   useEffect(() => {
     setNewProjectConfig(projectConfig?.config || '');
@@ -170,34 +183,6 @@ export const ProjectPage = () => {
     };
   }, [currentHistoryId]);
 
-  // dedicated functions to get proper data for the project page
-  // (easier to read and understand the code)
-  const determineWhichSamplesToShow = () => {
-    if (currentHistoryId !== null) {
-      return projectHistoryView?._sample_dict || [];
-    } else if (view !== undefined) {
-      return viewData?._samples || [];
-    } else {
-      return newProjectSamples;
-    }
-  };
-
-  const determineWhichSubsamplesToShow = () => {
-    if (currentHistoryId !== null) {
-      return projectHistoryView?._subsample_list || [];
-    } else {
-      return newProjectSubsamples || [];
-    }
-  };
-
-  const determineWhichConfigToShow = () => {
-    if (currentHistoryId !== null) {
-      return projectHistoryView?._config || '';
-    } else {
-      return newProjectConfig || '';
-    }
-  };
-
   if (projectAnnotationQuery.error) {
     return (
       <PageLayout fullWidth footer={false} title={`${namespace}/${projectName}`}>
@@ -256,32 +241,20 @@ export const ProjectPage = () => {
             <div className="row gx-0 h-100">
               <div className="col-12">
                 <div ref={projectDataRef}>
-                  {pageView === 'samples' ? (
+                  {pageView === 'samples' || pageView === 'subsamples' ? (
                     <SampleTable
                       // fill to the rest of the screen minus the offset of the project data
                       height={window.innerHeight - 15 - (projectDataRef.current?.offsetTop || 300)}
                       readOnly={!(projectInfo && canEdit(user, projectInfo)) || currentHistoryId !== null}
                       // @ts-ignore: TODO: fix this, the model is just messed up
-                      data={determineWhichSamplesToShow()}
-                      onChange={memoizedSetNewProjectSamples}
-                    />
-                  ) : pageView === 'subsamples' ? (
-                    <SampleTable
-                      // fill to the rest of the screen minus the offset of the project data
-                      height={window.innerHeight - 15 - (projectDataRef.current?.offsetTop || 300)}
-                      readOnly={
-                        !(projectInfo && canEdit(user, projectInfo)) ||
-                        newProjectSamples?.length >= MAX_SAMPLE_COUNT ||
-                        currentHistoryId !== null
-                      }
-                      data={newProjectSubsamples || []}
-                      onChange={memoizedSetNewProjectSubsamples}
+                      data={pageView === 'samples' ? sampleData : subsampleData}
+                      onChange={pageView === 'samples' ? memoizedSetNewProjectSamples : memoizedSetNewProjectSubsamples}
                     />
                   ) : (
                     <div className="border border-t">
                       <ProjectConfigEditor
                         readOnly={!(projectInfo && canEdit(user, projectInfo)) || currentHistoryId !== null}
-                        value={determineWhichConfigToShow()}
+                        value={currentHistoryId !== null ? projectHistoryView?._config || '' : newProjectConfig || ''}
                         setValue={(value) => setNewProjectConfig(value)}
                       />
                     </div>