Skip to content

Commit 18b5695

Browse files
lumburovskalinalumburovskalina
committed
More memoized icons replaced
1 parent f6995d8 commit 18b5695

File tree

68 files changed

+113
-176
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+113
-176
lines changed

‎src/components/models-download/ModelsDownload.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
import { selectModelsDownloaded, setModelsDownloaded } from "@/src/reduxStore/states/pages/models-downloaded";
2-
import { Tooltip } from "@nextui-org/react";
3-
import { IconAlertTriangleFilled, IconArrowLeft, IconCircleCheckFilled, IconExternalLink, IconLoader, IconPlus, IconTrash } from "@tabler/icons-react";
42
import { useRouter } from "next/router";
53
import { useCallback, useEffect, useState } from "react";
64
import { useDispatch, useSelector } from "react-redux";
7-
import LoadingIcon from "../../../submodules/react-components/components/LoadingIcon";
85
import { openModal, setModalStates } from "@/src/reduxStore/states/modal";
96
import { ModalEnum } from "@/src/types/shared/modal";
107
import { selectIsAdmin, selectOrganizationId } from "@/src/reduxStore/states/general";
118
import { timer } from "rxjs";
12-
import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
139
import AddModelDownloadModal from "./AddModelDownloadModal";
1410
import DeleteModelDownloadModal from "./DeleteModelDownloadModal";
1511
import { useWebsocket } from "@/submodules/react-components/hooks/web-socket/useWebsocket";
@@ -19,6 +15,7 @@ import { MODELS_DOWNLOAD_TABLE_COLUMNS, prepareTableBodyModelsDownload } from "@
1915
import KernTable from "@/submodules/react-components/components/kern-table/KernTable";
2016
import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
2117
import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
18+
import { MemoIconArrowLeft, MemoIconPlus } from "@/submodules/react-components/components/kern-icons/icons";
2219

2320
export default function ModelsDownload() {
2421
const router = useRouter();
@@ -69,7 +66,7 @@ export default function ModelsDownload() {
6966
text="Go back"
7067
onClick={() => router.back()}
7168
color="green"
72-
iconLeft={IconArrowLeft}
69+
iconLeft={MemoIconArrowLeft}
7370
iconColor="green"
7471
/>
7572
</div>
@@ -90,7 +87,7 @@ export default function ModelsDownload() {
9087
<div>
9188
<KernButton
9289
text="Add new model"
93-
icon={IconPlus}
90+
icon={MemoIconPlus}
9491
onClick={openCreateModal}
9592
/>
9693
</div>

‎src/components/projects/ProjectCard.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,10 @@ import { Tooltip } from "@nextui-org/react";
88
import { useRouter } from "next/router";
99
import { useDispatch, useSelector } from "react-redux";
1010
import { NOT_AVAILABLE, UNKNOWN_USER } from "@/src/util/constants";
11-
import { IconArrowRight } from "@tabler/icons-react";
1211
import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
1312
import { deleteProjectPost } from "@/src/services/base/project";
1413
import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
15-
import { MemoIconX } from "@/submodules/react-components/components/kern-icons/icons";
14+
import { MemoIconArrowRight, MemoIconX } from "@/submodules/react-components/components/kern-icons/icons";
1615
import { useCallback } from "react";
1716
import useRefFor from "@/submodules/react-components/hooks/useRefFor";
1817

@@ -112,7 +111,7 @@ export default function ProjectCard(props: ProjectCardProps) {
112111
text="Continue project"
113112
onClick={manageProject}
114113
color="green"
115-
iconRight={IconArrowRight}
114+
iconRight={MemoIconArrowRight}
116115
iconColor="green"
117116
/>
118117
}

‎src/components/projects/SampleProjectsDropdown.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { selectAllProjects } from '@/src/reduxStore/states/project';
66
import { ModalButton, ModalEnum } from '@/src/types/shared/modal';
77
import { closeModal, openModal } from '@/src/reduxStore/states/modal';
88
import Modal from '../shared/modal/Modal';
9-
import { IconAlertTriangle, IconMessageCircle, IconNews, IconQuestionMark, IconScreenshot } from '@tabler/icons-react';
109
import { setSearchGroupsStore } from '@/src/reduxStore/states/pages/data-browser';
1110
import { selectProjectIdSampleProject, setProjectIdSampleProject } from '@/src/reduxStore/states/tmp';
1211
import { createSampleProject } from '@/src/services/base/project';

‎src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { ATTRIBUTES_VISIBILITY_STATES, DATA_TYPES, getTooltipVisibilityState } f
99
import { copyToClipboard } from "@/submodules/javascript-functions/general";
1010
import { Editor } from "@monaco-editor/react";
1111
import { Tooltip } from "@nextui-org/react";
12-
import { IconAlertTriangleFilled, IconArrowLeft, IconCircleCheckFilled } from "@tabler/icons-react";
1312
import { useRouter } from "next/router";
1413
import { useCallback, useEffect, useMemo, useState } from "react";
1514
import { useDispatch, useSelector } from "react-redux"

‎src/components/projects/projectId/attributes/attributeId/ExecutionContainer.tsx‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { AttributeState } from "@/src/types/components/projects/projectId/settin
66
import { ModalEnum } from "@/src/types/shared/modal";
77
import { postProcessRecordByRecordId } from "@/src/util/components/projects/projectId/settings/attribute-calculation-helper";
88
import { Tooltip } from "@nextui-org/react";
9-
import { useEffect, useState } from "react";
9+
import { useCallback, useEffect, useState } from "react";
1010
import { useDispatch, useSelector } from "react-redux";
1111
import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
1212
import ConfirmExecutionModal from "./ConfirmExecutionModal";
@@ -16,6 +16,7 @@ import { getRecordByRecordId } from "@/src/services/base/project-setting";
1616
import { getSampleRecords } from "@/src/services/base/attribute";
1717
import { DataTypeEnum } from "@/src/types/shared/general";
1818
import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
19+
import useRefFor from "@/submodules/react-components/hooks/useRefFor";
1920

2021
export default function ExecutionContainer(props: ExecutionContainerProps) {
2122
const projectId = useSelector(selectProjectId);
@@ -35,29 +36,41 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
3536
}
3637
}, [props.enableRunButton]);
3738

38-
function calculateUserAttributeSampleRecords() {
39+
const currentAttributesRef = useRefFor(props.currentAttribute);
40+
const calculateUserAttributeSampleRecords = useCallback(() => {
3941
if (requestedSomething) return;
4042
setRequestedSomething(true);
41-
getSampleRecords(projectId, props.currentAttribute.id, (res) => {
43+
getSampleRecords(projectId, currentAttributesRef.current.id, (res) => {
4244
const sampleRecordsFinal = { ...res };
4345
setRequestedSomething(false);
4446
props.setEnabledButton(false);
4547
setRunOn10HasError(sampleRecordsFinal.calculatedAttributes.length > 0 ? false : true);
46-
if (props.currentAttribute.dataType == 'EMBEDDING_LIST') {
48+
if (currentAttributesRef.current.dataType == DataTypeEnum.EMBEDDING_LIST) {
4749
sampleRecordsFinal.calculatedAttributesList = sampleRecordsFinal.calculatedAttributes.map((record: string) => JSON.parse(record));
4850
sampleRecordsFinal.calculatedAttributesListDisplay = extendArrayElementsByUniqueId(sampleRecordsFinal.calculatedAttributesList);
4951
}
5052
sampleRecordsFinal.calculatedAttributesDisplay = extendArrayElementsByUniqueId(sampleRecordsFinal.calculatedAttributes);
5153
setSampleRecords(sampleRecordsFinal);
5254
props.refetchCurrentAttribute();
5355
});
54-
}
56+
}, [projectId]);
5557

5658
function recordByRecordId(recordId: string) {
5759
getRecordByRecordId(projectId, recordId, (res) => {
5860
dispatch(setModalStates(ModalEnum.VIEW_RECORD_DETAILS, { record: postProcessRecordByRecordId(res) }));
5961
});
6062
}
63+
64+
const executeAttribute = useCallback(() => {
65+
dispatch(setModalStates(ModalEnum.EXECUTE_ATTRIBUTE_CALCULATION, { open: true, requestedSomething: requestedSomething }));
66+
}, []);
67+
68+
const sampleRecordsRef = useRefFor(sampleRecords);
69+
const viewRecordDetails = useCallback((index: number) => () => {
70+
dispatch(setModalStates(ModalEnum.VIEW_RECORD_DETAILS, { open: true, recordIdx: index }));
71+
recordByRecordId(sampleRecordsRef.current.recordIds[index]);
72+
}, []);
73+
6174
return (<div>
6275
<div className="mt-8 text-sm leading-5">
6376
<div className="text-gray-700 font-medium mr-2">
@@ -92,7 +105,7 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
92105
solidTheme={true}
93106
textColor="white"
94107
disabled={props.currentAttribute.state == AttributeState.USABLE || props.currentAttribute.state == AttributeState.RUNNING || requestedSomething || checkIfAtLeastRunning || checkIfAtLeastQueued || props.tokenizationProgress < 1 || runOn10HasError || props.checkUnsavedChanges}
95-
onClick={() => dispatch(setModalStates(ModalEnum.EXECUTE_ATTRIBUTE_CALCULATION, { open: true, requestedSomething: requestedSomething }))}
108+
onClick={executeAttribute}
96109
tooltip={props.currentAttribute.state == AttributeState.USABLE ? 'Attribute is already in use' : requestedSomething ? 'Test is running' : checkIfAtLeastRunning ? 'Another attribute is running' : checkIfAtLeastQueued ? 'Another attribute is queued for execution' : props.tokenizationProgress < 1 ? 'Tokenization is in progress' : runOn10HasError ? 'Run on 10 records has an error' : 'Execute the attribute on all records'}
97110
className="ml-3"
98111
/>
@@ -113,10 +126,7 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
113126
<div className="flex items-center justify-center mr-5 ml-auto">
114127
<KernButton
115128
text="View"
116-
onClick={() => {
117-
dispatch(setModalStates(ModalEnum.VIEW_RECORD_DETAILS, { open: true, recordIdx: index }));
118-
recordByRecordId(sampleRecords.recordIds[index]);
119-
}}
129+
onClick={viewRecordDetails(index)}
120130
/>
121131
</div>
122132
</div>

‎src/components/projects/projectId/attributes/attributeId/LLM/LLMPlaygroundModal.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
44
import { useSelector } from "react-redux";
55
import { selectModal } from "@/src/reduxStore/states/modal";
66
import { selectAttributes, selectAttributesDict } from "@/src/reduxStore/states/pages/settings";
7-
import { IconHandClick, IconPlayCardStar, IconPlayerPlay, IconRefresh, IconTerminal } from "@tabler/icons-react";
87
import LLMResponseConfig from "../LLMResponseConfig";
98
import { AttributeState, LLMConfig } from "@/src/types/components/projects/projectId/settings/data-schema";
109
import useRefFor from "@/submodules/react-components/hooks/useRefFor";
@@ -19,7 +18,7 @@ import { runAttributeLlmPlayground } from "@/src/services/base/attribute";
1918
import { jsonCopy } from "@/submodules/javascript-functions/general";
2019
import { TEMPLATE_EXAMPLES, TEMPLATE_OPTIONS } from "./llmTemplates";
2120
import { LLM_PROVIDER_OPTIONS, postProcessLLMPlaygroundRecordData } from "@/src/util/components/projects/projectId/settings/attribute-calculation-helper";
22-
import { MemoIconPlayCardStar, MemoIconTerminal } from "@/submodules/react-components/components/kern-icons/icons";
21+
import { MemoIconHandClick, MemoIconPlayCardStar, MemoIconPlayerPlay, MemoIconRefresh, MemoIconTerminal } from "@/submodules/react-components/components/kern-icons/icons";
2322

2423
const ACCEPT_BUTTON = { buttonCaption: "Use current values for attribute", useButton: true };
2524
const DISPLAY_STATES = [AttributeState.AUTOMATICALLY_CREATED, AttributeState.UPLOADED, AttributeState.USABLE]
@@ -141,7 +140,7 @@ export default function LLMPlaygroundModal() {
141140
{recordData && <div className="">
142141
<div className="flex flex-row gap-x-2 items-center">
143142
<label className="block font-bold text-gray-900">Sample Record</label>
144-
<KernButton icon={IconRefresh} text="Get Random" size="small" onClick={get1RandomRecords} />
143+
<KernButton icon={MemoIconRefresh} text="Get Random" size="small" onClick={get1RandomRecords} />
145144

146145
<input
147146
type="number"
@@ -151,7 +150,7 @@ export default function LLMPlaygroundModal() {
151150
onKeyDown={(e) => e.key === 'Enter' && getByRunningId()}
152151
className="w-16 h-full text-right text-sm text-gray-900 border border-gray-200 rounded-lg align-top"
153152
/>
154-
<KernButton disabled={!inputRunningId} icon={IconHandClick} text="Get by running_id" size="small" onClick={getByRunningId} />
153+
<KernButton disabled={!inputRunningId} icon={MemoIconHandClick} text="Get by running_id" size="small" onClick={getByRunningId} />
155154
</div>
156155
<div className="grid grid-cols-2 gap-2 text-sm max-h-52 overflow-y-auto" style={{ gridTemplateColumns: `max-content auto` }}>
157156
{recordKeys.map((rk) => <Fragment key={rk.name}>
@@ -185,7 +184,7 @@ export default function LLMPlaygroundModal() {
185184
</div>}
186185
<LLMResponseConfig attributeId={modal.attributeId} fullLlmConfig={fullLlmConfig} setFullLlmConfig={setFullLlmConfig} noPlayground keepConfigOpen />
187186
<div className="h-2"></div>
188-
<KernButton text="Test configuration" icon={IconPlayerPlay} size="small" onClick={testConfigurationForRecordId} loading={playgroundTestRunning} />
187+
<KernButton text="Test configuration" icon={MemoIconPlayerPlay} size="small" onClick={testConfigurationForRecordId} loading={playgroundTestRunning} />
189188
{llmAnswer && <div className="border-b mb-10 border-gray-200 w-full align-top">
190189
<div className="flex gap-x-2">
191190
<div className='py-2'>

‎src/components/projects/projectId/attributes/attributeId/LLMResponseConfig.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { useState } from "react";
22
import { LLMConfig } from "./LLM/LLMConfig";
3-
import { IconAdjustmentsAlt, IconAdjustmentsOff, IconSettings, IconTerminal, IconUser } from "@tabler/icons-react";
43
import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
54
import LLMResponsePlayground from "./LLMResponsePlayground";
65
import { LLMResponseConfigProps } from "./LLM/types";
7-
import { MemoIconTerminal, MemoIconUser } from "@/submodules/react-components/components/kern-icons/icons";
6+
import { MemoIconAdjustmentsAlt, MemoIconAdjustmentsOff, MemoIconSettings, MemoIconTerminal, MemoIconUser } from "@/submodules/react-components/components/kern-icons/icons";
87

98

109
export default function LLMResponseConfig(props: LLMResponseConfigProps) {
@@ -16,8 +15,8 @@ export default function LLMResponseConfig(props: LLMResponseConfigProps) {
1615
<div className="mt-3 flex flex-col gap-y-2">
1716
<div className="flex flex-row flex-nowrap items-center gap-x-2">
1817
<label className="block font-bold text-gray-900">LLM Config</label>
19-
{!props.keepConfigOpen && <KernButton icon={IconSettings} onClick={() => setConfigOpen((p) => !p)} size="small" />}
20-
{configOpen && <KernButton icon={fullConfigOpen ? IconAdjustmentsAlt : IconAdjustmentsOff} onClick={() => setFullConfigOpen((p) => !p)} size="small" />}
18+
{!props.keepConfigOpen && <KernButton icon={MemoIconSettings} onClick={() => setConfigOpen((p) => !p)} size="small" />}
19+
{configOpen && <KernButton icon={fullConfigOpen ? MemoIconAdjustmentsAlt : MemoIconAdjustmentsOff} onClick={() => setFullConfigOpen((p) => !p)} size="small" />}
2120

2221
{props.noPlayground ? null : <LLMResponsePlayground attributeId={props.attributeId} apiKey={props.apiKey} />}
2322

‎src/components/projects/projectId/attributes/attributeId/LLMResponsePlayground.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
2-
import { IconPlayCardStar } from "@tabler/icons-react";
32
import { useDispatch } from "react-redux";
43
import LLMPlaygroundModal from "./LLM/LLMPlaygroundModal";
54
import { setModalStates } from "@/src/reduxStore/states/modal";
65
import { ModalEnum } from "@/src/types/shared/modal";
6+
import { useCallback } from "react";
7+
import { MemoIconPlayCardStar } from "@/submodules/react-components/components/kern-icons/icons";
78

89

910
type LLMResponsePlaygroundProps = {
@@ -13,9 +14,14 @@ type LLMResponsePlaygroundProps = {
1314

1415
export default function LLMResponsePlayground(props: LLMResponsePlaygroundProps) {
1516
const dispatch = useDispatch();
17+
18+
const openLLMPlayground = useCallback(() => {
19+
dispatch(setModalStates(ModalEnum.LLM_PLAYGROUND, { open: true, attributeId: props.attributeId, apiKey: props.apiKey }));
20+
}, []);
21+
1622
return (
1723
<>
18-
<KernButton text="Open LLM Playground" icon={IconPlayCardStar} onClick={() => dispatch(setModalStates(ModalEnum.LLM_PLAYGROUND, { open: true, attributeId: props.attributeId, apiKey: props.apiKey }))} size="small" />
24+
<KernButton text="Open LLM Playground" icon={MemoIconPlayCardStar} onClick={openLLMPlayground} size="small" />
1925
<LLMPlaygroundModal />
2026
</>
2127
)

‎src/components/projects/projectId/data-browser/DataBrowserRecords.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { ModalEnum } from '@/src/types/shared/modal';
55
import { TOOLTIPS_DICT } from '@/src/util/tooltip-constants';
66
import { Slice } from '@/submodules/javascript-functions/enums/enums';
77
import { Tooltip } from '@nextui-org/react';
8-
import { IconAdjustments, IconAlertTriangleFilled, IconChartCircles, IconFilter, IconFilterOff, IconTriangleFilled } from '@tabler/icons-react';
98
import { useDispatch, useSelector } from 'react-redux';
109
import LoadingIcon from '@/submodules/react-components/components/LoadingIcon';
1110
import { selectVisibleAttributesHeuristics } from '@/src/reduxStore/states/pages/settings';
@@ -19,7 +18,7 @@ import Export from '@/src/components/shared/export/Export';
1918
import { LabelingLinkType } from '@/src/types/components/projects/projectId/labeling/labeling-main-component';
2019
import { Fragment, useEffect } from 'react';
2120
import KernButton from '@/submodules/react-components/components/kern-button/KernButton';
22-
import { MemoIconAlertTriangleFilled, MemoIconChartCircles, MemoIconFilter } from '@/submodules/react-components/components/kern-icons/icons';
21+
import { MemoIconAdjustments, MemoIconAlertTriangleFilled, MemoIconChartCircles, MemoIconFilter, MemoIconFilterOff } from '@/submodules/react-components/components/kern-icons/icons';
2322

2423
export default function DataBrowserRecords(props: DataBrowserRecordsProps) {
2524
const dispatch = useDispatch();
@@ -123,13 +122,13 @@ export default function DataBrowserRecords(props: DataBrowserRecordsProps) {
123122
</div>}
124123
{(activeSlice != null || activeSearchParams.length > 0 || similaritySearch.recordsInDisplay) && <KernButton
125124
text="Clear filters"
126-
icon={IconFilterOff}
125+
icon={MemoIconFilterOff}
127126
onClick={clearFilters}
128127
className="mr-1"
129128
/>}
130129
<KernButton
131130
text="Configuration"
132-
icon={IconAdjustments}
131+
icon={MemoIconAdjustments}
133132
onClick={() => dispatch(openModal(ModalEnum.CONFIGURATION))}
134133
className="mr-1"
135134
tooltip={TOOLTIPS_DICT.DATA_BROWSER.CONFIGURATION}

‎src/components/projects/projectId/data-browser/DataBrowserSidebar.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { ModalEnum } from '@/src/types/shared/modal';
88
import { updateSliceInfoHelper } from '@/src/util/components/projects/projectId/data-browser/data-browser-helper';
99
import { Slice } from '@/submodules/javascript-functions/enums/enums';
1010
import { Tooltip } from '@nextui-org/react';
11-
import { IconAlertTriangle, IconInfoCircle, IconLayoutSidebar, IconTrash } from '@tabler/icons-react';
1211
import { useEffect, useState } from 'react';
1312
import { useDispatch, useSelector } from 'react-redux';
1413
import { timer } from 'rxjs';

0 commit comments

Comments
 (0)