Merge remote-tracking branch 'origin/release-updates' into websocket-change

Author: JWittmeyer

src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicsLayout.tsx

@@ -136,7 +136,7 @@ export default function HeuristicsLayout(props: any) {
             </div>
             <div className="w-full overflow-hidden">
                 <div className={`grid gap-4 ${isHeaderNormal ? 'grid-cols-2' : 'grid-cols-1'}`}>
-                    {isHeaderNormal && <div className="flex items-center mt-2">
+                    {isHeaderNormal && <div className="flex items-start mt-2">
                         <Tooltip color="invert" placement="bottom" content={TOOLTIPS_DICT.HEURISTICS.EDIT_NAME}>
                             <button onClick={() => openProperty(true, HeuristicsProperty.NAME)}
                                 className="flex-shrink-0 bg-white text-gray-700 text-xs font-semibold mr-3 px-4 py-2 rounded-md border border-gray-300 block float-left hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
@@ -148,22 +148,20 @@ export default function HeuristicsLayout(props: any) {
                                 ? (<input type="text" value={currentHeuristic.name} ref={nameRef} onInput={(e: any) => changeHeuristic(e.target.value, HeuristicsProperty.NAME)}
                                     onBlur={() => openProperty(false, HeuristicsProperty.NAME)} onKeyDown={(e) => { if (e.key == 'Enter') openProperty(false, HeuristicsProperty.NAME) }}
                                     className="h-8 w-full border-gray-300 rounded-md placeholder-italic border text-gray-700 pl-4 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-100" />)
-                                : (<div className="mr-4 text-sm leading-5 font-medium text-gray-500 inline-block">{currentHeuristic.name}</div>)}
+                                : (<div className="mr-4 text-sm leading-5 font-medium text-gray-500 inline-block " style={{ marginTop: '6px' }}>{currentHeuristic.name}</div>)}
                         </div>
                     </div>}
-                    <div className="flex items-center mt-2">
-                        <Tooltip color="invert" placement="bottom" content={TOOLTIPS_DICT.HEURISTICS.EDIT_DESCRIPTION}>
-                            <button onClick={() => openProperty(true, HeuristicsProperty.DESCRIPTION)}
-                                className="flex-shrink-0 bg-white text-gray-700 text-xs font-semibold mr-3 px-4 py-2 rounded-md border border-gray-300 block float-left hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                                Edit description
-                            </button>
-                        </Tooltip>
+                    <div className="flex items-start mt-2">
+                        <button onClick={() => openProperty(true, HeuristicsProperty.DESCRIPTION)}
+                            className="flex-shrink-0 bg-white text-gray-700 text-xs font-semibold mr-3 px-4 py-2 rounded-md border border-gray-300 block float-left hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                            Edit description
+                        </button>
                         <div className="flex-grow" onDoubleClick={() => openProperty(true, HeuristicsProperty.DESCRIPTION)}>
                             {isDescriptionOpen
                                 ? (<input type="text" value={currentHeuristic.description} ref={descriptionRef} onInput={(e: any) => changeHeuristic(e.target.value, HeuristicsProperty.DESCRIPTION)}
                                     onBlur={() => openProperty(false, HeuristicsProperty.DESCRIPTION)} onKeyDown={(e) => { if (e.key == 'Enter') openProperty(false, HeuristicsProperty.DESCRIPTION) }}
                                     className="h-8 w-full border-gray-300 rounded-md placeholder-italic border text-gray-700 pl-4 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-100" />)
-                                : (<div className="mr-4 text-sm leading-5 font-medium text-gray-500 inline-block">{currentHeuristic.description}</div>)}
+                                : (<div className="mr-4 text-sm leading-5 font-medium text-gray-500 inline-block " style={{ marginTop: '6px' }}>{currentHeuristic.description}</div>)}
                         </div>
                     </div>
                 </div>

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

@@ -1,11 +1,11 @@
-import { selectHoverGroupDict, selectSettings, selectTmpHighlightIds, setHoverGroupDict, tmpAddHighlightIds } from "@/src/reduxStore/states/pages/labeling";
+import { selectActiveTokenSelection, selectHoverGroupDict, selectSettings, selectTmpHighlightIds, setHoverGroupDict, tmpAddHighlightIds } from "@/src/reduxStore/states/pages/labeling";
 import { LineBreaksType } from "@/src/types/components/projects/projectId/data-browser/data-browser";
 import { ExtractionDisplayProps, LabelSourceHover } from "@/src/types/components/projects/projectId/labeling/labeling";
 import { LabelingPageParts } from "@/src/types/components/projects/projectId/labeling/labeling-main-component";
 import { Tooltip } from "@nextui-org/react";
 import { useDispatch, useSelector } from "react-redux";
 import style from '@/src/styles/components/projects/projectId/labeling.module.css';
-import { useState, forwardRef } from "react";
+import { useState, forwardRef, useEffect, useMemo } from "react";
 
 export function shouldHighlightOn(tmpHighlightIds: string[], comparedId: string[]) {
     return tmpHighlightIds.some((id) => comparedId.includes(id));
@@ -106,11 +106,19 @@ const ExtractionDisplay = forwardRef<HTMLInputElement, ExtractionDisplayProps>(f
 });
 
 function TokenValue(props: any) {
+    const activeTokenSelection = useSelector(selectActiveTokenSelection);
+
+    const isSelected = useMemo(() => {
+        if (!activeTokenSelection || !props.attributeId) return false;
+        if (activeTokenSelection.attributeId != props.attributeId) return false;
+        return props.token.idx >= activeTokenSelection.tokenStart && props.token.idx <= activeTokenSelection.tokenEnd;
+    }, [activeTokenSelection, props.attributeId]);
+
     return (<>
         {props.token && props.token.value != '\n' && <label onClick={(e) => props.setSelected(e)}
             className={`rounded-lg hover:bg-gray-200 text-sm text-gray-500 leading-5 relative font-normal ${!props.token.nextCloser ? 'pr-1' : ''}`}
             data-tokenidx={props.token.idx} data-attributeid={props.attributeId}
-            style={{ backgroundColor: props.token.selected ? '#3399FF' : null, borderRadius: props.token.selected ? '0' : null, color: props.token.selected ? 'white' : null, zIndex: '100' }}>
+            style={{ backgroundColor: isSelected ? '#3399FF' : null, borderRadius: isSelected ? '0' : null, color: isSelected ? 'white' : null, zIndex: '100' }}>
             {props.token.value}
         </label>}
     </>)

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

@@ -6,7 +6,7 @@ import { UserRole } from "@/src/types/shared/sidebar";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { Tooltip } from "@nextui-org/react";
 import { IconCirclePlus } from "@tabler/icons-react";
-import { Fragment, useEffect, useState, useCallback } from "react";
+import { Fragment, useEffect, useState, useCallback, useRef } from "react";
 import { useSelector } from "react-redux";
 
 const eventListenersMap = new Map();
@@ -21,12 +21,20 @@ export default function LabelSelectionBox(props: LabelSelectionBoxProps) {
     const [currentLabelHotkeys, setCurrentLabelHotkeys] = useState<any>({});
     const [currentActiveTasks, setCurrentActiveTasks] = useState([]);
 
+    const clearSelectedRef = useRef(props.clearSelected);
+
     useEffect(() => {
         if (props.activeTasks && props.activeTasks.length > 0) {
             setCurrentActiveTasks(props.activeTasks);
+        } else {
+            clearSelectedRef.current();
         }
     }, [props.activeTasks]);
 
+    useEffect(() => {
+        clearSelectedRef.current = props.clearSelected;
+    }, [props.clearSelected]);
+
     useEffect(() => {
         let missingValues = 0;
         for (let key in props.labelHotkeys) {