Skip to content

Commit 0d81936

Browse files
lumburovskalinalumburovskalina
committed
Selected issue fixes
1 parent 6992f82 commit 0d81936

File tree

5 files changed

+97
-27
lines changed

5 files changed

+97
-27
lines changed

‎src/components/projects/projectId/labeling/sessionId/sub-components/ExtractionDisplay.tsx‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { selectHoverGroupDict, selectSettings, selectTmpHighlightIds, setHoverGroupDict, tmpAddHighlightIds } from "@/src/reduxStore/states/pages/labeling";
1+
import { selectHoverGroupDict, selectSettings, selectTmpHighlightIds, selectTokenLookupSelected, setHoverGroupDict, tmpAddHighlightIds } from "@/src/reduxStore/states/pages/labeling";
22
import { LineBreaksType } from "@/src/types/components/projects/projectId/data-browser/data-browser";
33
import { ExtractionDisplayProps, LabelSourceHover } from "@/src/types/components/projects/projectId/labeling/labeling";
44
import { LabelingPageParts } from "@/src/types/components/projects/projectId/labeling/labeling-main-component";
55
import { Tooltip } from "@nextui-org/react";
66
import { useDispatch, useSelector } from "react-redux";
77
import style from '@/src/styles/components/projects/projectId/labeling.module.css';
8-
import { useState, forwardRef } from "react";
8+
import { useState, forwardRef, useEffect, useMemo } from "react";
9+
import { useConsoleLog } from "@/submodules/react-components/hooks/useConsoleLog";
910

1011
export function shouldHighlightOn(tmpHighlightIds: string[], comparedId: string[]) {
1112
return tmpHighlightIds.some((id) => comparedId.includes(id));
@@ -20,6 +21,8 @@ const ExtractionDisplay = forwardRef<HTMLInputElement, ExtractionDisplayProps>(f
2021

2122
const [hoverBoxDict, setHoverGroupDictTmp] = useState({});
2223

24+
// useConsoleLog(tokenLookupSelected)
25+
2326
function deleteRecordLabelAssociation(rlaId: string) {
2427
props.deleteRla(rlaId);
2528
}
@@ -106,11 +109,30 @@ const ExtractionDisplay = forwardRef<HTMLInputElement, ExtractionDisplayProps>(f
106109
});
107110

108111
function TokenValue(props: any) {
112+
const tokenLookupSelected = useSelector(selectTokenLookupSelected);
113+
// const saveTokenData = useSelector(selectTokenData)
114+
115+
useConsoleLog(tokenLookupSelected, 'tokenLookupSelected in tkoen value')
116+
117+
const [findToken, setFindToken] = useState(null);
118+
const isSelected = useMemo(() => {
119+
if (!tokenLookupSelected || !props.attributeId) return false;
120+
// return props.token.idx >= tokenLookupSelected[props.attributeId].tokenStart && token.idx <= saveTokenData.tokenEnd;
121+
// const findToken = tokenLookupSelected[props.attributeId].token.find((token) => token.value == props.token.value && token.idx == props.token.idx);
122+
return false;
123+
}, [tokenLookupSelected, props.attributeId]);
124+
125+
// useEffect(() => {
126+
// if (!tokenLookupSelected || !props.attributeId) return;
127+
// const findToken = tokenLookupSelected[props.attributeId].token.find((token) => token.value == props.token.value && token.idx == props.token.idx);
128+
// setFindToken(findToken);
129+
// }, [tokenLookupSelected, props.attributeId]);
130+
109131
return (<>
110132
{props.token && props.token.value != '\n' && <label onClick={(e) => props.setSelected(e)}
111133
className={`rounded-lg hover:bg-gray-200 text-sm text-gray-500 leading-5 relative font-normal ${!props.token.nextCloser ? 'pr-1' : ''}`}
112134
data-tokenidx={props.token.idx} data-attributeid={props.attributeId}
113-
style={{ backgroundColor: props.token.selected ? '#3399FF' : null, borderRadius: props.token.selected ? '0' : null, color: props.token.selected ? 'white' : null, zIndex: '100' }}>
135+
style={{ backgroundColor: (findToken && findToken.selected) ? '#3399FF' : null, borderRadius: (findToken && findToken.selected) ? '0' : null, color: (findToken && findToken.selected) ? 'white' : null, zIndex: '100' }}>
114136
{props.token.value}
115137
</label>}
116138
</>)

‎src/components/projects/projectId/labeling/sessionId/sub-components/LabelSelectionBox.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { UserRole } from "@/src/types/shared/sidebar";
66
import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
77
import { Tooltip } from "@nextui-org/react";
88
import { IconCirclePlus } from "@tabler/icons-react";
9-
import { Fragment, useEffect, useState, useCallback } from "react";
9+
import { Fragment, useEffect, useState, useCallback, useRef } from "react";
1010
import { useSelector } from "react-redux";
1111

1212
const eventListenersMap = new Map();
@@ -21,12 +21,31 @@ export default function LabelSelectionBox(props: LabelSelectionBoxProps) {
2121
const [currentLabelHotkeys, setCurrentLabelHotkeys] = useState<any>({});
2222
const [currentActiveTasks, setCurrentActiveTasks] = useState([]);
2323

24+
const clearSelectedRef = useRef(props.clearSelected);
25+
2426
useEffect(() => {
27+
console.log("active tasks changed", props.activeTasks)
2528
if (props.activeTasks && props.activeTasks.length > 0) {
2629
setCurrentActiveTasks(props.activeTasks);
30+
} else {
31+
clearSelectedRef.current();
32+
console.log("called current ref")
33+
2734
}
2835
}, [props.activeTasks]);
2936

37+
useEffect(() => {
38+
return () => {
39+
clearSelectedRef.current();
40+
console.log("destruction evennt")
41+
}
42+
}, []);
43+
44+
useEffect(() => {
45+
clearSelectedRef.current = props.clearSelected;
46+
console.log("updated current ref")
47+
}, [props.clearSelected]);
48+
3049
useEffect(() => {
3150
let missingValues = 0;
3251
for (let key in props.labelHotkeys) {

‎src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteLabeling.tsx‎

Lines changed: 41 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import LoadingIcon from "@/src/components/shared/loading/LoadingIcon"
22
import { selectUser } from "@/src/reduxStore/states/general"
3-
import { removeFromRlaById, selectDisplayUserRole, selectHoverGroupDict, selectRecordRequests, selectRecordRequestsRecord, selectSettings, selectTmpHighlightIds, selectUserDisplayId, setHoverGroupDict, tmpAddHighlightIds } from "@/src/reduxStore/states/pages/labeling"
3+
import { removeFromRlaById, selectDisplayUserRole, selectHoverGroupDict, selectRecordRequests, selectRecordRequestsRecord, selectSettings, selectTmpHighlightIds, selectTokenLookupSelected, selectUserDisplayId, setHoverGroupDict, setTokenLookupSelected, tmpAddHighlightIds } from "@/src/reduxStore/states/pages/labeling"
44
import { selectLabelingTasksAll, selectVisibleAttributesLabeling } from "@/src/reduxStore/states/pages/settings"
55
import { selectProjectId } from "@/src/reduxStore/states/project"
66
import { HotkeyLookup, LabelSourceHover, LabelingVars, TokenLookup } from "@/src/types/components/projects/projectId/labeling/labeling"
@@ -10,7 +10,7 @@ import { DEFAULT_LABEL_COLOR, FULL_RECORD_ID, SWIM_LANE_SIZE_PX, buildLabelingRl
1010
import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants"
1111
import { Tooltip } from "@nextui-org/react"
1212
import { IconAlertCircle, IconAssembly, IconBolt, IconCode, IconSparkles, IconStar, IconUsers } from "@tabler/icons-react"
13-
import { Fragment, useRef, useEffect, useState } from "react"
13+
import { Fragment, useRef, useEffect, useState, useCallback } from "react"
1414
import { useDispatch, useSelector } from "react-redux"
1515
import ExtractionDisplay from "./ExtractionDisplay"
1616
import { LineBreaksType } from "@/src/types/components/projects/projectId/data-browser/data-browser"
@@ -26,6 +26,7 @@ import LabelSelectionBox from "./LabelSelectionBox"
2626
import { filterRlaDataForUser } from "@/src/util/components/projects/projectId/labeling/overview-table-helper"
2727
import { LabelingPageParts } from "@/src/types/components/projects/projectId/labeling/labeling-main-component"
2828
import style from '@/src/styles/components/projects/projectId/labeling.module.css';
29+
import { useConsoleLog } from "@/submodules/react-components/hooks/useConsoleLog"
2930

3031
const L_VARS = getDefaultLabelingVars();
3132

@@ -99,6 +100,7 @@ export default function LabelingSuiteLabeling() {
99100

100101
useEffect(() => {
101102
const handleMouseDown = (event) => {
103+
console.log("closing the box?")
102104
if (!event.target.closest('.label-selection-box')) {
103105
setActiveTasksFunc([]);
104106
}
@@ -122,6 +124,7 @@ export default function LabelingSuiteLabeling() {
122124
const handleMouseUp = (e) => {
123125
const [check, attributeIdStart, tokenStart, tokenEnd, startEl] = parseSelectionData();
124126
setSaveTokenData({ attributeIdStart, tokenStart, tokenEnd, startEl });
127+
125128
if (!check) {
126129
clearSelected();
127130
} else {
@@ -146,6 +149,19 @@ export default function LabelingSuiteLabeling() {
146149
setCanEditLabels(checkCanEditLabels(user, userDisplayRole, displayUserId));
147150
}, [user, displayUserId, userDisplayRole]);
148151

152+
// useEffect(() => {
153+
// if (!saveTokenData) return;
154+
// if (!settings.labeling.closeLabelBoxAfterLabel) {
155+
// const tokenLookupCopy = {};
156+
// for (const token of tokenLookupCopy[saveTokenData.attributeIdStart]?.token) {
157+
// token.selected = token.idx >= saveTokenData.tokenStart && token.idx <= saveTokenData.tokenEnd;
158+
// }
159+
// dispatch(setTokenLookupSelected(tokenLookupCopy));
160+
// } else {
161+
// dispatch(setTokenLookupSelected(null))
162+
// }
163+
// }, [saveTokenData, settings.labeling.closeLabelBoxAfterLabel]);
164+
149165
function attributesChanged() {
150166
if (!attributes) return;
151167
const lVarsCopy = { ...lVars };
@@ -474,16 +490,18 @@ export default function LabelingSuiteLabeling() {
474490
addExtractionLabelToRecordMut({ variables: { projectId: projectId, recordId: record.id, labelingTaskId: labelingTaskId, labelId: labelId, tokenStartIndex: selectionData.startIdx, tokenEndIndex: selectionData.endIdx, value: selectionData.value, sourceId: sourceId } }).then((res) => { });
475491
}
476492

477-
function clearSelected() {
478-
const tokenLookupCopy = { ...tokenLookup };
479-
for (const attributeId in tokenLookupCopy) {
480-
if (!tokenLookupCopy[attributeId].token) continue;
481-
for (const token of tokenLookupCopy[attributeId].token) {
482-
if ('selected' in token) delete token.selected;
483-
}
484-
}
485-
setTokenLookup(tokenLookupCopy);
486-
}
493+
const clearSelected = useCallback(() => {
494+
console.log("clearSelected called")
495+
// const tokenLookupCopy = jsonCopy(tokenLookup);
496+
// for (const attributeId in tokenLookupCopy) {
497+
// if (!tokenLookupCopy[attributeId].token) continue;
498+
// for (const token of tokenLookupCopy[attributeId].token) {
499+
// if ('selected' in token) delete token.selected;
500+
// }
501+
// }
502+
// setTokenLookup(tokenLookupCopy);
503+
dispatch(setTokenLookupSelected(null));
504+
}, [tokenLookup]);
487505

488506
function setSelected(attributeId: string, tokenStart: number, tokenEnd: number, e?: any) {
489507
if (!canEditLabels && user.role != UserRole.ANNOTATOR && userDisplayRole != UserRole.ANNOTATOR) return;
@@ -492,9 +510,9 @@ export default function LabelingSuiteLabeling() {
492510
labelBoxPosition(e);
493511
return;
494512
}
495-
for (const token of tokenLookupCopy[attributeId]?.token) {
496-
token.selected = token.idx >= tokenStart && token.idx <= tokenEnd;
497-
}
513+
// for (const token of tokenLookupCopy[attributeId]?.token) {
514+
// token.selected = token.idx >= tokenStart && token.idx <= tokenEnd;
515+
// }
498516
if (lVars.taskLookup[attributeId].lookup[0].task.taskType == LabelingTaskTaskType.INFORMATION_EXTRACTION) {
499517
const extractionTasks = lVars.taskLookup[attributeId].lookup.filter(t => t.task.taskType == LabelingTaskTaskType.INFORMATION_EXTRACTION);
500518
setActiveTasksFunc(extractionTasks);
@@ -631,14 +649,15 @@ export default function LabelingSuiteLabeling() {
631649
</div>
632650
{activeTasks && activeTasks.length > 0 ? (
633651
<LabelSelectionBox activeTasks={activeTasks} position={position} labelLookup={labelLookup} labelAddButtonDisabledDict={labelAddButtonDisabledDict}
652+
clearSelected={clearSelected}
634653
addRla={(task, labelId) => {
635-
const tokenLookupCopy = jsonCopy(tokenLookup);
636-
if (saveTokenData && tokenLookupCopy[saveTokenData.attributeIdStart]) {
637-
for (const token of tokenLookupCopy[saveTokenData.attributeIdStart]?.token) {
638-
token.selected = token.idx >= saveTokenData.tokenStart && token.idx <= saveTokenData.tokenEnd;
639-
}
640-
}
641-
addRla(task, labelId, tokenLookupCopy);
654+
// const tokenLookupCopy = jsonCopy(tokenLookup);
655+
// if (saveTokenData && tokenLookupCopy[saveTokenData.attributeIdStart]) {
656+
// for (const token of tokenLookupCopy[saveTokenData.attributeIdStart]?.token) {
657+
// token.selected = token.idx >= saveTokenData.tokenStart && token.idx <= saveTokenData.tokenEnd;
658+
// }
659+
// }
660+
addRla(task, labelId, tokenLookup);
642661
}}
643662
addNewLabelToTask={(newLabel, task) => addNewLabelToTask(newLabel, task)}
644663
checkLabelVisibleInSearch={(newLabel, task) => checkLabelVisibleInSearch(labelLookup, newLabel, task)}

‎src/reduxStore/states/pages/labeling.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ type LabelingSuiteState = {
2828
displayUserId: string;
2929
displayUserRole: UserRole;
3030
hoverGroupDict: { [key: string]: any };
31+
tokenLookupSelected: any;
3132
}
3233

3334
function getInitState(): LabelingSuiteState {
@@ -50,6 +51,7 @@ function getInitState(): LabelingSuiteState {
5051
displayUserId: null,
5152
displayUserRole: null,
5253
hoverGroupDict: {},
54+
tokenLookupSelected: null
5355
};
5456
}
5557

@@ -199,7 +201,13 @@ const labelingSlice = createSlice({
199201
setDisplayUserRole(state, action: PayloadAction<UserRole>) {
200202
if (action.payload) state.displayUserRole = action.payload;
201203
else state.displayUserRole = null;
204+
},
205+
setTokenLookupSelected(state, action: PayloadAction<any>) {
206+
console.log("setTokenLookupSelected", action.payload)
207+
if (action.payload) state.tokenLookupSelected = action.payload;
208+
else state.tokenLookupSelected = null;
202209
}
210+
203211
},
204212
});
205213

@@ -217,9 +225,10 @@ export const selectTmpHighlightIds = (state: any) => state.labeling.tmpHighlight
217225
export const selectUserDisplayId = (state: any) => state.labeling.displayUserId;
218226
export const selectHoverGroupDict = (state: any) => state.labeling.hoverGroupDict;
219227
export const selectDisplayUserRole = (state: any) => state.labeling.displayUserRole;
228+
export const selectTokenLookupSelected = (state: any) => state.labeling.tokenLookupSelected;
220229

221230
export const { setAvailableLinks, setSelectedLink, updateRecordRequests, updateUsers, setSettings, updateSettings,
222-
removeFromRlaById, tmpAddHighlightIds, setUserDisplayId, setHoverGroupDict, initOnLabelPageDestruction, setDisplayUserRole } = labelingSlice.actions;
231+
removeFromRlaById, tmpAddHighlightIds, setUserDisplayId, setHoverGroupDict, initOnLabelPageDestruction, setDisplayUserRole, setTokenLookupSelected } = labelingSlice.actions;
223232

224233
export const labelingReducer = labelingSlice.reducer;
225234

‎src/types/components/projects/projectId/labeling/labeling.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export type LabelSelectionBoxProps = {
6161
labelAddButtonDisabledDict: { [taskId: string]: boolean };
6262
addNewLabelToTask: (newLabel: string, task) => void;
6363
checkLabelVisibleInSearch: (newLabel: string, task) => void;
64+
clearSelected: () => void;
6465
};
6566

6667
export type HotkeyLookup = {

0 commit comments

Comments
 (0)