Skip to content

Commit f574412

Browse files
lumburovskalinalumburovskalina
committed
PR comments
1 parent b7f15de commit f574412

File tree

5 files changed

+63
-14
lines changed

5 files changed

+63
-14
lines changed

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { setModalStates } from "@/src/reduxStore/states/modal";
55
import { ModalEnum } from "@/src/types/shared/modal";
66
import { useCallback } from "react";
77
import { MemoIconPlayCardStar } from "@/submodules/react-components/components/kern-icons/icons";
8+
import useRefFor from "@/submodules/react-components/hooks/useRefFor";
89

910

1011
type LLMResponsePlaygroundProps = {
@@ -15,8 +16,10 @@ type LLMResponsePlaygroundProps = {
1516
export default function LLMResponsePlayground(props: LLMResponsePlaygroundProps) {
1617
const dispatch = useDispatch();
1718

19+
const attributeIdRef = useRefFor(props.attributeId);
20+
const apiKeyRef = useRefFor(props.apiKey);
1821
const openLLMPlayground = useCallback(() => {
19-
dispatch(setModalStates(ModalEnum.LLM_PLAYGROUND, { open: true, attributeId: props.attributeId, apiKey: props.apiKey }));
22+
dispatch(setModalStates(ModalEnum.LLM_PLAYGROUND, { open: true, attributeId: attributeIdRef.current, apiKey: apiKeyRef.current }));
2023
}, []);
2124

2225
return (

‎src/components/projects/projectId/settings/embeddings/Embeddings.tsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import { selectOrganizationId } from "@/src/reduxStore/states/general";
33
import { openModal, setModalStates } from "@/src/reduxStore/states/modal";
44
import { selectAttributes, selectEmbeddings } from "@/src/reduxStore/states/pages/settings";
55
import { selectProjectId } from "@/src/reduxStore/states/project";
6-
import { Embedding, EmbeddingState, EmbeddingType } from "@/src/types/components/projects/projectId/settings/embeddings";
6+
import { Embedding, EmbeddingState, EmbeddingType, EmbeddingWithOnClick } from "@/src/types/components/projects/projectId/settings/embeddings";
77
import { ModalEnum } from "@/src/types/shared/modal";
88
import { DATA_TYPES, getColorForDataType } from "@/src/util/components/projects/projectId/settings/data-schema-helper";
99
import { Tooltip } from "@nextui-org/react";
1010
import { useRouter } from "next/router";
11-
import { useCallback, useEffect, useState } from "react";
11+
import { useCallback, useEffect, useMemo, useState } from "react";
1212
import { useDispatch, useSelector } from "react-redux";
1313
import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
1414
import AddNewEmbeddingModal from "./AddNewEmbeddingModal";
@@ -71,6 +71,14 @@ export default function Embeddings(props: { refetchEmbeddings: () => void }) {
7171
const orgId = useSelector(selectOrganizationId);
7272
useWebsocket(orgId, Application.REFINERY, CurrentPage.PROJECT_SETTINGS, handleWebsocketNotification, projectId, CurrentPageSubKey.EMBEDDINGS);
7373

74+
const openFilterAttributesModal = useCallback((embedding: Embedding) => () => {
75+
embedding.onQdrant ? dispatch(setModalStates(ModalEnum.FILTERED_ATTRIBUTES, { embeddingId: embedding.id, open: true, attributeNames: prepareAttributeDataByNames(embedding.filterAttributes), showEditOption: showEditOption })) : null;
76+
}, [showEditOption]);
77+
78+
const embeddingsFinal = useMemo(() => embeddings.map((embedding) => (
79+
{ ...embedding, onIconNotesClick: openFilterAttributesModal(embedding) }
80+
)), [embeddings]);
81+
7482
return (<div className="mt-8">
7583
<div className="text-lg leading-6 text-gray-900 font-medium inline-block w-full">
7684
<label>Embeddings</label>
@@ -107,7 +115,7 @@ export default function Embeddings(props: { refetchEmbeddings: () => void }) {
107115
</tr>
108116
</thead>
109117
{!somethingLoading ? <tbody className="divide-y divide-gray-200">
110-
{embeddings.map((embedding: Embedding, index: number) => (
118+
{embeddingsFinal.map((embedding: EmbeddingWithOnClick, index: number) => (
111119
<tr key={embedding.id} className={`${index % 2 != 0 ? 'bg-gray-50' : 'bg-white'}`}>
112120
<td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
113121
{embedding.name}
@@ -119,8 +127,11 @@ export default function Embeddings(props: { refetchEmbeddings: () => void }) {
119127
TOOLTIPS_DICT.PROJECT_SETTINGS.EMBEDDINGS.HAS_FILTER_ATTRIBUTES :
120128
TOOLTIPS_DICT.PROJECT_SETTINGS.EMBEDDINGS.NO_FILTER_ATTRIBUTES)
121129
} color="invert" >
122-
<MemoIconNotes onClick={() => embedding.onQdrant ? dispatch(setModalStates(ModalEnum.FILTERED_ATTRIBUTES, { embeddingId: embedding.id, open: true, attributeNames: prepareAttributeDataByNames(embedding.filterAttributes), showEditOption: showEditOption })) : null}
123-
className={`h-6 w-6 ${embedding.filterAttributes && embedding.filterAttributes.length > 0 ? 'text-gray-700' : 'text-gray-300'} ${embedding.onQdrant ? "" : "cursor-not-allowed opacity-50"}`} />
130+
<span onClick={embedding.onIconNotesClick}>
131+
<MemoIconNotes
132+
className={`h-6 w-6 ${embedding.filterAttributes && embedding.filterAttributes.length > 0 ? 'text-gray-700' : 'text-gray-300'} ${embedding.onQdrant ? "" : "cursor-not-allowed opacity-50"}`} />
133+
</span>
134+
124135
</Tooltip>
125136
</td> : <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500 flex justify-center"><LoadingIcon /></td>}
126137
<td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">

‎src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { openModal, setModalStates } from "@/src/reduxStore/states/modal";
22
import { selectLabelingTasksAll, setLabelingTasksAll } from "@/src/reduxStore/states/pages/settings";
33
import { selectProjectId } from "@/src/reduxStore/states/project";
4-
import { LabelType, LabelingTask, LabelingTaskTaskType } from "@/src/types/components/projects/projectId/settings/labeling-tasks";
4+
import { LabelType, LabelTypeWithOnClick, LabelingTask, LabelingTaskTaskType, LabelingTaskWithOnClick } from "@/src/types/components/projects/projectId/settings/labeling-tasks";
55
import { ModalEnum } from "@/src/types/shared/modal";
66
import { LabelHelper } from "@/src/util/classes/label-helper";
77
import { isTaskNameUnique, labelingTaskFromString, labelingTaskToString } from "@/src/util/components/projects/projectId/settings/labeling-tasks-helper";
88
import { jsonCopy } from "@/submodules/javascript-functions/general";
9-
import { useEffect, useState } from "react"
9+
import { useCallback, useEffect, useMemo, useState } from "react"
1010
import { useDispatch, useSelector } from "react-redux";
1111
import RenameLabelModal from "./RenameLabelModal";
1212
import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
@@ -20,6 +20,7 @@ import { updateLabelingTask } from "@/src/services/base/labeling-tasks";
2020
import IconButton from "@/submodules/react-components/components/kern-button/IconButton";
2121
import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
2222
import { MemoIconColorPicker, MemoIconPlus, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
23+
import { useConsoleLog } from "@/submodules/react-components/hooks/useConsoleLog";
2324

2425
export default function LabelingTasks() {
2526
const dispatch = useDispatch();
@@ -87,6 +88,28 @@ export default function LabelingTasks() {
8788
return prepareNewArray;
8889
}
8990

91+
const deleteLabelingTask = useCallback((task) => () => dispatch(setModalStates(ModalEnum.DELETE_LABELING_TASK, { taskId: task.id, open: true })), [])
92+
93+
const deleteLabel = useCallback((task: LabelingTask, label: LabelType) => () => {
94+
dispatch(setModalStates(ModalEnum.DELETE_LABEL, { taskId: task.id, label: label, open: true }));
95+
}, []);
96+
97+
const changeColorLabel = useCallback((task: LabelingTask, label: LabelType) => () => {
98+
dispatch(setModalStates(ModalEnum.CHANGE_COLOR, { taskId: task.id, label: label, open: true }));
99+
}, []);
100+
101+
const labelingTasksFinal = useMemo(() => {
102+
if (!labelingTasksSchema) return null;
103+
return labelingTasksSchema.map((labelingTask) => (
104+
{
105+
...labelingTask,
106+
onDelete: deleteLabelingTask(labelingTask),
107+
labels: labelingTask.labels.map((label) => ({ ...label, onDelete: deleteLabel(labelingTask, label), onChangeColor: changeColorLabel(labelingTask, label) })),
108+
}
109+
))
110+
}, [labelingTasksSchema]);
111+
112+
90113
return (<div className="mt-8">
91114
<div className="text-lg leading-6 text-gray-900 font-medium inline-block">
92115
Labeling tasks
@@ -119,7 +142,7 @@ export default function LabelingTasks() {
119142
</tr>
120143
</thead>
121144
<tbody className="divide-y divide-gray-200">
122-
{labelingTasksSchema && labelingTasksSchema.map((task: LabelingTask, index: number) => (
145+
{labelingTasksFinal && labelingTasksFinal.map((task: LabelingTaskWithOnClick, index: number) => (
123146
<tr key={task.id} className={`${index % 2 != 0 ? 'bg-gray-50' : 'bg-white'}`}>
124147
<td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{task.targetName}</td>
125148
<td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
@@ -136,12 +159,12 @@ export default function LabelingTasks() {
136159
selectedOption={(option: any) => updateLabelingTaskType(task, index, labelingTaskFromString(option.name))} />
137160
</td>
138161
<td className="flex flex-wrap justify-center items-center px-3 py-2 text-sm text-gray-500">
139-
{task.labels.map((label: LabelType) => (
162+
{task.labels.map((label: LabelTypeWithOnClick) => (
140163
<div key={label.id} className={`inline-flex border items-center m-1 px-1.5 py-0.5 rounded-md text-sm font-medium ${label.color.backgroundColor} ${label.color.textColor} ${label.color.borderColor} ${label.color.hoverColor}`}>
141-
<MemoIconColorPicker className="h-4 w-4 mr-1 cursor-pointer" onClick={() => dispatch(setModalStates(ModalEnum.CHANGE_COLOR, { taskId: task.id, label: label, open: true }))} />
164+
<MemoIconColorPicker className="h-4 w-4 mr-1 cursor-pointer" onClick={label.onChangeColor} />
142165
<span>{label.name}</span>
143166
{label.hotkey && <kbd className="ml-2 uppercase inline-flex items-center border bg-white border-gray-200 rounded px-2 text-sm font-sans font-medium text-gray-400">{label.hotkey}</kbd>}
144-
<MemoIconTrash className="h-4 w-4 ml-1 cursor-pointer" onClick={() => dispatch(setModalStates(ModalEnum.DELETE_LABEL, { taskId: task.id, label: label, open: true }))} />
167+
<MemoIconTrash className="h-4 w-4 ml-1 cursor-pointer" onClick={label.onDelete} />
145168
</div>
146169
))}
147170
<IconButton
@@ -151,8 +174,7 @@ export default function LabelingTasks() {
151174
/>
152175
</td>
153176
<td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
154-
<MemoIconTrash onClick={() => dispatch(setModalStates(ModalEnum.DELETE_LABELING_TASK, { taskId: task.id, open: true }))}
155-
className="h-6 w-6 text-red-700 cursor-pointer" />
177+
<MemoIconTrash onClick={task.onDelete} className="h-6 w-6 text-red-700 cursor-pointer" />
156178
</td>
157179
</tr>
158180
))}

‎src/types/components/projects/projectId/settings/embeddings.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ export type Embedding = {
2525
onQdrant?: boolean;
2626
};
2727

28+
export type EmbeddingWithOnClick = Embedding & {
29+
onIconNotesClick?: () => void;
30+
}
31+
2832
export enum EmbeddingType {
2933
ON_ATTRIBUTE = "ON_ATTRIBUTE",
3034
ON_TOKEN = "ON_TOKEN"

‎src/types/components/projects/projectId/settings/labeling-tasks.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,22 @@ export type LabelingTask = {
1414
targetName?: string;
1515
};
1616

17+
export type LabelingTaskWithOnClick = LabelingTask & {
18+
onDelete: () => void;
19+
}
20+
1721
export type LabelType = {
1822
id: string;
1923
name: string;
2024
color: LabelColors;
2125
hotkey: string;
2226
}
2327

28+
export type LabelTypeWithOnClick = LabelType & {
29+
onDelete: () => void;
30+
onChangeColor: () => void;
31+
}
32+
2433
export type LabelColors = {
2534
name: string,
2635
backgroundColor: string,

0 commit comments

Comments
 (0)