Memoized icons in refinery (#72)

* Memoized icons in refinery

* Avoid additional rerendering using callbacks and refs

* More memoized icons replaced

* PR comments

* PR comments

* PR comments

* PR comments

* Submodules merge

Author: lumburovskalina

src/components/models-download/ModelsDownload.tsx

@@ -1,15 +1,11 @@
 import { selectModelsDownloaded, setModelsDownloaded } from "@/src/reduxStore/states/pages/models-downloaded";
-import { Tooltip } from "@nextui-org/react";
-import { IconAlertTriangleFilled, IconArrowLeft, IconCircleCheckFilled, IconExternalLink, IconLoader, IconPlus, IconTrash } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import LoadingIcon from "../../../submodules/react-components/components/LoadingIcon";
 import { openModal, setModalStates } from "@/src/reduxStore/states/modal";
 import { ModalEnum } from "@/src/types/shared/modal";
 import { selectIsAdmin, selectOrganizationId } from "@/src/reduxStore/states/general";
 import { timer } from "rxjs";
-import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import AddModelDownloadModal from "./AddModelDownloadModal";
 import DeleteModelDownloadModal from "./DeleteModelDownloadModal";
 import { useWebsocket } from "@/submodules/react-components/hooks/web-socket/useWebsocket";
@@ -19,6 +15,7 @@ import { MODELS_DOWNLOAD_TABLE_COLUMNS, prepareTableBodyModelsDownload } from "@
 import KernTable from "@/submodules/react-components/components/kern-table/KernTable";
 import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconArrowLeft, MemoIconPlus } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function ModelsDownload() {
     const router = useRouter();
@@ -59,13 +56,17 @@ 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
                 text="Go back"
                 onClick={() => router.back()}
                 color="green"
-                iconLeft={IconArrowLeft}
+                iconLeft={MemoIconArrowLeft}
                 iconColor="green"
             />
         </div>
@@ -86,8 +87,8 @@ export default function ModelsDownload() {
             <div>
                 <KernButton
                     text="Add new model"
-                    icon={IconPlus}
-                    onClick={() => dispatch(openModal(ModalEnum.ADD_MODEL_DOWNLOAD))}
+                    icon={MemoIconPlus}
+                    onClick={openCreateModal}
                 />
             </div>
         </div>

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} />

src/components/projects/ProjectCard.tsx

@@ -1,17 +1,19 @@
 import { selectIsAdmin, selectUser } from "@/src/reduxStore/states/general";
 import { closeModal, setModalStates } from "@/src/reduxStore/states/modal";
 import { removeFromAllProjectsById } from "@/src/reduxStore/states/project";
-import { Project, ProjectCardProps, ProjectStatus } from "@/src/types/components/projects/projects-list";
+import { ProjectCardProps, ProjectStatus } from "@/src/types/components/projects/projects-list";
 import { ModalEnum } from "@/src/types/shared/modal";
 import { isStringTrue } from "@/submodules/javascript-functions/general";
 import { Tooltip } from "@nextui-org/react";
 import { useRouter } from "next/router";
 import { useDispatch, useSelector } from "react-redux";
 import { NOT_AVAILABLE, UNKNOWN_USER } from "@/src/util/constants";
-import { IconArrowRight, IconX } from "@tabler/icons-react";
 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 { MemoIconArrowRight, 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();
@@ -20,20 +22,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') {
@@ -47,6 +35,20 @@ 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(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) && (
@@ -64,9 +66,9 @@ 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">
-                                <IconX className="h-6 w-6 text-gray-500" />
+                                <MemoIconX className="h-6 w-6 text-gray-500" />
                             </Tooltip>
                         </div>
                     }
@@ -108,7 +110,7 @@ export default function ProjectCard(props: ProjectCardProps) {
                                     text="Continue project"
                                     onClick={manageProject}
                                     color="green"
-                                    iconRight={IconArrowRight}
+                                    iconRight={MemoIconArrowRight}
                                     iconColor="green"
                                 />
                             }

src/components/projects/SampleProjectsDropdown.tsx

@@ -6,12 +6,12 @@ import { selectAllProjects } from '@/src/reduxStore/states/project';
 import { ModalButton, ModalEnum } from '@/src/types/shared/modal';
 import { closeModal, openModal } from '@/src/reduxStore/states/modal';
 import Modal from '../shared/modal/Modal';
-import { IconAlertTriangle, IconArrowDown, IconFishHook, IconMessageCircle, IconNews, IconQuestionMark, IconScreenshot } from '@tabler/icons-react';
 import { setSearchGroupsStore } from '@/src/reduxStore/states/pages/data-browser';
 import { selectProjectIdSampleProject, setProjectIdSampleProject } from '@/src/reduxStore/states/tmp';
 import { createSampleProject } from '@/src/services/base/project';
 import KernButton from '@/submodules/react-components/components/kern-button/KernButton';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { MemoIconAlertTriangle, MemoIconFishHook, MemoIconMessageCircle, MemoIconNews, MemoIconQuestionMark, MemoIconScreenshot } from '@/submodules/react-components/components/kern-icons/icons';
 
 const ACCEPT_BUTTON = { buttonCaption: "Create", closeAfterClick: false, useButton: true, disabled: true };
 
@@ -72,6 +72,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>
@@ -107,7 +111,7 @@ export default function SampleProjectsDropdown() {
                                         importSampleProject("Clickbait", "Clickbait");
                                     }}>
                                     <div className="flex flex-row items-center">
-                                        <IconFishHook className="h-5 w-5 inline-block" />
+                                        <MemoIconFishHook className="h-5 w-5 inline-block" />
                                         <span className="ml-2">Clickbait</span>
                                     </div>
                                     <div className="mt-2">Binary classification for detecting nudging articles.</div>
@@ -133,7 +137,7 @@ export default function SampleProjectsDropdown() {
                                         importSampleProject("Conversational AI", "Conversational AI");
                                     }}>
                                     <div className="flex flex-row items-center">
-                                        <IconMessageCircle className="h-5 w-5 inline-block" />
+                                        <MemoIconMessageCircle className="h-5 w-5 inline-block" />
                                         <span className="ml-2">Conversational AI</span>
                                     </div>
                                     <div className="mt-2">Detecting intent within conversational lines.</div>
@@ -159,7 +163,7 @@ export default function SampleProjectsDropdown() {
                                         importSampleProject("AG News", "AG News");
                                     }}>
                                     <div className="flex flex-row items-center">
-                                        <IconNews className="h-5 w-5 inline-block" />
+                                        <MemoIconNews className="h-5 w-5 inline-block" />
                                         <span className="ml-2">AG News</span>
                                     </div>
                                     <div className="mt-2">Modelling topics of headline news.</div>
@@ -185,7 +189,7 @@ export default function SampleProjectsDropdown() {
                                         importSampleProject("Global Guard [References]", "Global Guard [References]");
                                     }}>
                                     <div className="flex flex-row items-center">
-                                        <IconScreenshot className="h-5 w-5 inline-block" />
+                                        <MemoIconScreenshot className="h-5 w-5 inline-block" />
                                         <span className="ml-2">DEV Global Guard [References]</span>
                                     </div>
                                     <div className="mt-2">References right after the wizard went through.</div>
@@ -200,7 +204,7 @@ export default function SampleProjectsDropdown() {
                                         importSampleProject("Global Guard [Questions]", "Global Guard [Questions]");
                                     }}>
                                     <div className="flex flex-row items-center">
-                                        <IconQuestionMark className="h-5 w-5 inline-block" />
+                                        <MemoIconQuestionMark className="h-5 w-5 inline-block" />
                                         <span className="ml-2">DEV Global Guard [Questions]</span>
                                     </div>
                                     <div className="mt-2">Questions right after the wizard went through.</div>
@@ -211,7 +215,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>
                             )}
@@ -235,7 +239,7 @@ export default function SampleProjectsDropdown() {
                     </div>
                     {projectNameExists && (<div className="text-red-700 text-xs mt-2 text-left">Project title exists</div>)}
                     <div className="flex flex-row mt-2">
-                        <IconAlertTriangle className="h-5 w-5 text-yellow-700" />
+                        <MemoIconAlertTriangle className="h-5 w-5 text-yellow-700" />
                         <label className="text-yellow-700 text-xs italic ml-2 text-left">The first sample project of a specific type can use the
                             default name, but after the name is taken, the user needs a custom name.</label>
                     </div>