Avoid additional rerendering using callbacks and refs

lumburovskalina · lumburovskalina · commit f6995d84bd0a · 2025-05-14T12:04:11.000+02:00
diff --git a/src/components/models-download/ModelsDownload.tsx b/src/components/models-download/ModelsDownload.tsx
@@ -59,6 +59,10 @@ export default function ModelsDownload() {
     const orgId = useSelector(selectOrganizationId);
     useWebsocket(orgId, Application.REFINERY, CurrentPage.MODELS_DOWNLOAD, handleWebsocketNotification);
 
+    const openCreateModal = useCallback(() => {
+        dispatch(openModal(ModalEnum.ADD_MODEL_DOWNLOAD));
+    }, []);
+
     return (<div className="p-4 bg-gray-100 flex-1 flex flex-col h-[calc(100vh-4rem)] overflow-y-auto">
         <div className="flex flex-row items-center">
             <ButtonAsText
@@ -87,7 +91,7 @@ export default function ModelsDownload() {
                 <KernButton
                     text="Add new model"
                     icon={IconPlus}
-                    onClick={() => dispatch(openModal(ModalEnum.ADD_MODEL_DOWNLOAD))}
+                    onClick={openCreateModal}
                 />
             </div>
         </div>
diff --git a/src/components/projects/ButtonsContainer.tsx b/src/components/projects/ButtonsContainer.tsx
@@ -37,27 +37,31 @@ export default function ButtonsContainer() {
     const orgId = useSelector(selectOrganizationId);
     useWebsocket(orgId, Application.REFINERY, CurrentPage.PROJECTS, handleWebsocketNotification, null, CurrentPageSubKey.BUTTONS_CONTAINER);
 
+    const createNewProject = useCallback(() => {
+        dispatch(setUploadFileType(UploadFileType.RECORDS_NEW));
+        router.push("/projects/new");
+    }, []);
+
+    const importSnapshot = useCallback(() => {
+        dispatch(openModal(ModalEnum.MODAL_UPLOAD));
+        dispatch(setUploadFileType(UploadFileType.PROJECT));
+    }, []);
+
     return (
         user && user.role === UserRole.ENGINEER ? (<div className="flex flex-row items-start gap-x-4 mt-4">
             <KernButton
                 text='New project'
                 buttonColor="blue"
                 solidTheme={true}
                 textColor="white"
-                onClick={() => {
-                    dispatch(setUploadFileType(UploadFileType.RECORDS_NEW));
-                    router.push("/projects/new");
-                }}
+                onClick={createNewProject}
             />
             <KernButton
                 text="Import snapshot"
                 buttonColor="blue"
                 solidTheme={true}
                 textColor="white"
-                onClick={() => {
-                    dispatch(openModal(ModalEnum.MODAL_UPLOAD));
-                    dispatch(setUploadFileType(UploadFileType.PROJECT));
-                }}
+                onClick={importSnapshot}
             />
             <SampleProjectsDropdown />
             <ModalUpload uploadOptions={uploadOptions} />
diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx
@@ -13,6 +13,8 @@ import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { deleteProjectPost } from "@/src/services/base/project";
 import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
 import { MemoIconX } from "@/submodules/react-components/components/kern-icons/icons";
+import { useCallback } from "react";
+import useRefFor from "@/submodules/react-components/hooks/useRefFor";
 
 export default function ProjectCard(props: ProjectCardProps) {
     const router = useRouter();
@@ -21,20 +23,6 @@ export default function ProjectCard(props: ProjectCardProps) {
     const isAdmin = useSelector(selectIsAdmin);
     const user = useSelector(selectUser);
 
-    function adminOpenOrDeleteProject(project: Project) {
-        if (!isAdmin) return;
-        const deleteInstant = isStringTrue(localStorage.getItem("adminInstantDelete"));
-        if (deleteInstant) {
-            deleteProjectPost(project.id, (res) => {
-                dispatch(closeModal(ModalEnum.ADMIN_DELETE_PROJECT));
-                dispatch(removeFromAllProjectsById(project.id));
-            })
-        }
-        else {
-            dispatch(setModalStates(ModalEnum.ADMIN_DELETE_PROJECT, { projectId: project.id, open: true }));
-        }
-    }
-
     function manageProject(): void {
         const projectId = props.project.id;
         if (user?.role == 'ENGINEER') {
@@ -48,6 +36,21 @@ export default function ProjectCard(props: ProjectCardProps) {
         }
     }
 
+    const projectId = useRefFor(props.project.id);
+    const adminOpenOrDeleteProjectFunc = useCallback(() => {
+        if (!isAdmin) return;
+        const deleteInstant = isStringTrue(localStorage.getItem("adminInstantDelete"));
+        if (deleteInstant) {
+            deleteProjectPost(projectId.current, (res) => {
+                dispatch(closeModal(ModalEnum.ADMIN_DELETE_PROJECT));
+                dispatch(removeFromAllProjectsById(projectId.current));
+            })
+        }
+        else {
+            dispatch(setModalStates(ModalEnum.ADMIN_DELETE_PROJECT, { projectId: projectId.current, open: true }));
+        }
+    }, []);
+
     return (
         <div key={props.project.id} className="relative card shadow bg-white m-4 rounded-2xl">
             {(props.project.status != ProjectStatus.IN_DELETION && props.project.status != ProjectStatus.HIDDEN) && (
@@ -65,7 +68,7 @@ export default function ProjectCard(props: ProjectCardProps) {
                         </>}
                     </div>}
                     {(isAdmin && props.project.status !== ProjectStatus.INIT_SAMPLE_PROJECT) &&
-                        <div className="absolute top-0 left-0 cursor-pointer" onClick={() => adminOpenOrDeleteProject(props.project)}>
+                        <div className="absolute top-0 left-0 cursor-pointer" onClick={adminOpenOrDeleteProjectFunc}>
                             <Tooltip content={TOOLTIPS_DICT.PROJECTS.QUICK_DELETE} color="invert" offset={2} placement="right">
                                 <MemoIconX className="h-6 w-6 text-gray-500" />
                             </Tooltip>
diff --git a/src/components/projects/SampleProjectsDropdown.tsx b/src/components/projects/SampleProjectsDropdown.tsx
@@ -73,6 +73,10 @@ export default function SampleProjectsDropdown() {
         }
     }, []);
 
+    const furtherSampleProjects = useCallback(() => {
+        window.open("https://github.com/code-kern-ai/refinery-sample-projects", "_blank")
+    }, []);
+
     return (
         <Menu as="div" className="relative inline-block text-left">
             <div>
@@ -212,7 +216,7 @@ export default function SampleProjectsDropdown() {
                             {({ active }) => (
                                 <a key="sample-project-6"
                                     className={`opacity-100 cursor-pointer text-gray-900 block px-3 py-2 text-sm ${active ? "bg-kernindigo text-white" : ""}`}
-                                    onClick={() => window.open("https://github.com/code-kern-ai/refinery-sample-projects", "_blank")}>
+                                    onClick={furtherSampleProjects}>
                                     <span>Further sample projects</span>
                                 </a>
                             )}
diff --git a/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx b/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
@@ -198,49 +198,48 @@ export default function AttributeCalculation() {
 
     }
 
-    function changeAttributeName(name: string) {
-        if (name == currentAttribute.name) return;
+    const changeAttributeName = useCallback((name: string) => {
+        if (name == currentAttributeRef.current.name) return;
         if (name == '') return;
         const duplicateNameExists = attributes.find((attribute) => attribute.name == name);
         if (duplicateNameExists) {
             setDuplicateNameExists(true);
-            setAttributeName(currentAttribute.name);
+            setAttributeName(currentAttributeRef.current.name);
             return;
         }
-        const attributeNew = { ...currentAttribute };
+        const attributeNew = { ...currentAttributeRef.current };
         attributeNew.name = name;
         attributeNew.saveSourceCode = false;
-        updateAttribute(projectId, currentAttribute.id, (res) => {
+        updateAttribute(projectId, currentAttributeRef.current.id, (res) => {
             setCurrentAttribute(postProcessCurrentAttribute(attributeNew));
             setEditorValue(attributeNew.sourceCode.replace('def ac(record)', 'def ' + attributeNew.name + '(record)'));
             dispatch(updateAttributeById(attributeNew));
             setDuplicateNameExists(false);
         }, null, null, attributeNew.name);
-    }
+    }, []);
 
-    function updateVisibility(option: any) {
-        const attributeNew = { ...currentAttribute };
+    const updateVisibility = useCallback((option: any) => {
+        const attributeNew = { ...currentAttributeRef.current };
         attributeNew.visibility = option.value;
         attributeNew.visibilityIndex = ATTRIBUTES_VISIBILITY_STATES.findIndex((state) => state.name === option);
         attributeNew.visibilityName = option.name;
         attributeNew.saveSourceCode = false;
-        updateAttribute(projectId, currentAttribute.id, (res) => {
+        updateAttribute(projectId, currentAttributeRef.current.id, (res) => {
             setCurrentAttribute(postProcessCurrentAttribute(attributeNew));
             dispatch(updateAttributeById(attributeNew));
         }, null, null, null, null, attributeNew.visibility);
-    }
+    }, []);
 
-    function updateDataType(option: any) {
-        const attributeNew = { ...currentAttribute };
+    const updateDataType = useCallback((option: any) => {
+        const attributeNew = { ...currentAttributeRef.current };
         attributeNew.dataType = option.value;
         attributeNew.dataTypeName = option.name;
         attributeNew.saveSourceCode = false;
-        updateAttribute(projectId, currentAttribute.id, (res) => {
+        updateAttribute(projectId, currentAttributeRef.current.id, (res) => {
             setCurrentAttribute(postProcessCurrentAttribute(attributeNew));
             dispatch(updateAttributeById(attributeNew));
         }, attributeNew.dataType);
-    }
-
+    }, []);
 
     function onScrollEvent(event: any) {
         if (!(event.target instanceof HTMLElement)) return;
@@ -251,7 +250,6 @@ export default function AttributeCalculation() {
         }
     }
 
-
     function checkProjectTokenization() {
         getProjectTokenization(projectId, (res) => {
             setTokenizationProgress(res?.progress);
@@ -311,6 +309,16 @@ export default function AttributeCalculation() {
     const orgId = useSelector(selectOrganizationId);
     useWebsocket(orgId, Application.REFINERY, CurrentPage.ATTRIBUTE_CALCULATION, handleWebsocketNotification, projectId);
 
+    const goBack = useCallback((e: React.MouseEvent) => {
+        e.preventDefault();
+        router.push(`/projects/${projectId}/settings`);
+    }, []);
+
+    const copyToClipboardFunc = useCallback(
+        (name: string) => () => copyToClipboard(name),
+        []
+    );
+
     const disabledOptions = useMemo(() => {
         if (!currentAttribute || currentAttribute.dataType == DataTypeEnum.LLM_RESPONSE) return undefined;
         return DATA_TYPES.map((e) => e.value == DataTypeEnum.LLM_RESPONSE);
@@ -321,10 +329,7 @@ export default function AttributeCalculation() {
             <div className={`sticky z-50 h-12 ${isHeaderNormal ? 'top-1' : '-top-5'}`}>
                 <div className={`bg-white flex-grow ${isHeaderNormal ? '' : 'shadow'}`}>
                     <div className={`flex-row justify-start items-center inline-block ${isHeaderNormal ? 'p-0' : 'flex py-2'}`} style={{ transition: 'all .25s ease-in-out' }}>
-                        <a href={`/refinery/projects/${projectId}/settings`} onClick={(e) => {
-                            e.preventDefault();
-                            router.push(`/projects/${projectId}/settings`);
-                        }} className="text-green-800 text-sm font-medium">
+                        <a href={`/refinery/projects/${projectId}/settings`} onClick={goBack} className="text-green-800 text-sm font-medium">
                             <MemoIconArrowLeft className="h-5 w-5 inline-block text-green-800" />
                             <span className="leading-5">Go back</span>
                         </a>
@@ -386,7 +391,7 @@ export default function AttributeCalculation() {
                         {usableAttributes.length == 0 && <div className="text-sm font-normal text-gray-500">No usable attributes.</div>}
                         {usableAttributes.map((attribute: Attribute) => (
                             <Tooltip key={attribute.id} content={attribute.dataTypeName + ' - ' + TOOLTIPS_DICT.GENERAL.CLICK_TO_COPY} color="invert" placement="top">
-                                <span onClick={() => copyToClipboard(attribute.name)}>
+                                <span onClick={copyToClipboardFunc(attribute.name)}>
                                     <div className={`cursor-pointer border items-center px-2 py-0.5 rounded text-xs font-medium text-center mr-2 ${'bg-' + attribute.color + '-100'} ${'text-' + attribute.color + '-700'} ${'border-' + attribute.color + '-400'} ${'hover:bg-' + attribute.color + '-200'}`}>
                                         {attribute.name}
                                     </div>
@@ -400,7 +405,7 @@ export default function AttributeCalculation() {
                     <div className="flex flex-row items-center">
                         {lookupLists.map((lookupList) => (
                             <Tooltip key={lookupList.id} content={TOOLTIPS_DICT.GENERAL.IMPORT_STATEMENT} color="invert" placement="top">
-                                <span onClick={() => copyToClipboard("from knowledge import " + lookupList.pythonVariable)}>
+                                <span onClick={copyToClipboardFunc("from knowledge import " + lookupList.pythonVariable)}>
                                     <div className="cursor-pointer border items-center px-2 py-0.5 rounded text-xs font-medium text-center mr-2">
                                         {lookupList.pythonVariable} - {lookupList.termCount}
                                     </div>
diff --git a/src/components/projects/projectId/data-browser/DataSliceOperations.tsx b/src/components/projects/projectId/data-browser/DataSliceOperations.tsx
@@ -14,6 +14,7 @@ import CreateOutlierSliceModal from "./modals/CreateOutlierSliceModal";
 import SaveDataSliceModal from "./modals/SaveDataSliceModal";
 import { createOutlierSlice, updateDataSlice } from "@/src/services/base/data-browser";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { useCallback } from "react";
 
 export function DataSliceOperations(props: { fullSearch: {} }) {
     const dispatch = useDispatch();
@@ -29,7 +30,19 @@ export function DataSliceOperations(props: { fullSearch: {} }) {
     const additionalData = useSelector(selectAdditionalData);
     const embeddings = useSelector(selectEmbeddings);
 
-    function updateSlice() {
+    // function updateSlice() {
+    //     updateDataSlice(projectId, {
+    //         static: activeSlice.static,
+    //         dataSliceId: activeSlice.id,
+    //         filterRaw: getRawFilterForSave(props.fullSearch),
+    //         filterData: parseFilterToExtended(activeSearchParams, attributes, configuration, labelingTasks, user, props.fullSearch[SearchGroup.DRILL_DOWN].value)
+    //     }, (res) => {
+    //         dispatch(setActiveDataSlice(activeSlice));
+    //     });
+    //     dispatch(updateAdditionalDataState('displayOutdatedWarning', false));
+    // }
+
+    const updateSlice = useCallback(() => {
         updateDataSlice(projectId, {
             static: activeSlice.static,
             dataSliceId: activeSlice.id,
@@ -39,7 +52,7 @@ export function DataSliceOperations(props: { fullSearch: {} }) {
             dispatch(setActiveDataSlice(activeSlice));
         });
         dispatch(updateAdditionalDataState('displayOutdatedWarning', false));
-    }
+    }, [activeSlice, projectId, props.fullSearch, dispatch, activeSearchParams, attributes, configuration, labelingTasks, user]);
 
     function requestOutlierSlice() {
         if (embeddings.length == 0) return;
