Skip to content

Memoized icons in refinery #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
May 21, 2025
Merged

Memoized icons in refinery #72

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
86c1b31
Memoized icons in refinery
lumburovskalina May 13, 2025
f6995d8
Avoid additional rerendering using callbacks and refs
lumburovskalina May 14, 2025
18b5695
More memoized icons replaced
lumburovskalina May 14, 2025
3de2f74
PR comments
lumburovskalina May 14, 2025
b7f15de
PR comments
lumburovskalina May 14, 2025
f574412
PR comments
lumburovskalina May 15, 2025
663afa3
PR comments
lumburovskalina May 21, 2025
8d04bfb
Submodules merge
lumburovskalina May 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions src/components/models-download/ModelsDownload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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();
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
20 changes: 12 additions & 8 deletions src/components/projects/ButtonsContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
40 changes: 21 additions & 19 deletions src/components/projects/ProjectCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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') {
Expand All @@ -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) && (
Expand All @@ -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>
}
Expand Down Expand Up @@ -108,7 +110,7 @@ export default function ProjectCard(props: ProjectCardProps) {
text="Continue project"
onClick={manageProject}
color="green"
iconRight={IconArrowRight}
iconRight={MemoIconArrowRight}
iconColor="green"
/>
}
Expand Down
20 changes: 12 additions & 8 deletions src/components/projects/SampleProjectsDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
)}
Expand All @@ -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>
Expand Down
Loading