Added text list to data browser

Author: lumburovskalina

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

@@ -155,7 +155,7 @@ export default function LLMPlaygroundModal() {
                     <div className="grid grid-cols-2 gap-2 text-sm max-h-52 overflow-y-auto" style={{ gridTemplateColumns: `max-content auto` }}>
                         {recordKeys.map((rk) => <Fragment key={rk.name}>
                             <label className="block font-bold text-gray-900">{rk.name}</label>
-                            {recordData.map((record) => rk.dataType == DataTypeEnum.EMBEDDING_LIST ? <div key={record.running_id} className="flex flex-col divide-y divide-gray-200">
+                            {recordData.map((record) => (rk.dataType == DataTypeEnum.EMBEDDING_LIST || rk.dataType == DataTypeEnum.TEXT_LIST) ? <div key={record.running_id} className="flex flex-col divide-y divide-gray-200">
                                 {record[rk.name].map((li, idx) => <span key={idx} className="text-gray-700">{li}</span>)}
                             </div> : <span key={record.running_id} className="text-gray-700">{record[rk.name]}</span>)}
                         </Fragment>)}

src/components/projects/projectId/attributes/attributeId/ViewRecordDetailsModal.tsx

@@ -4,7 +4,6 @@ import { ModalEnum } from "@/src/types/shared/modal";
 import { useSelector } from "react-redux";
 import style from '@/src/styles/components/projects/projectId/attribute-calculation.module.css';
 import { RecordDisplay } from "@/src/components/shared/record-display/RecordDisplay";
-import { DataTypeEnum } from "@/src/types/shared/general";
 import { ViewRecordDetailsModalProps } from "@/src/types/components/projects/projectId/settings/attribute-calculation";
 import { selectVisibleAttributesHeuristics } from "@/src/reduxStore/states/pages/settings";
 
@@ -23,13 +22,9 @@ export default function ViewRecordDetailsModal(props: ViewRecordDetailsModalProp
                         record={modalViewRecordDetails.record} />
                     <div className="text-sm leading-5 text-left text-gray-900 font-medium">Calculated value</div>
                     <div className="text-sm leading-5 text-left text-gray-500 font-normal whitespace-pre-line">
-                        {props.currentAttribute.dataType != DataTypeEnum.EMBEDDING_LIST ? <span>
+                        <div className="flex flex-col gap-y-2 divide-y">
                             {props.sampleRecords[modalViewRecordDetails.recordIdx].calculatedValue.value}
-                        </span> : <div className="flex flex-col gap-y-2 divide-y">
-                            {props.sampleRecords[modalViewRecordDetails.recordIdx].calculatedValue.value.map((item: any) => <span key={item} className="mt-1">
-                                {item}
-                            </span>)}
-                        </div>}
+                        </div>
                     </div>
                 </div>
             </Modal>

src/components/projects/projectId/data-browser/DataBrowser.tsx

@@ -48,9 +48,15 @@ export default function DataBrowser() {
         refetchAttributesAndProcess();
         refetchLabelingTasksAndProcess();
         refetchEmbeddingsAndPostProcess();
-        refetchUniqueValuesAndProcess();
     }, [projectId, users, user]);
 
+    useEffect(() => {
+        if (!attributes || attributes.length == 0 || !projectId) return;
+        getUniqueValuesByAttributes(projectId, (res) => {
+            dispatch(setUniqueValuesDict(postProcessUniqueValues(res, attributes)));
+        });
+    }, [attributes, projectId]);
+
     useEffect(() => {
         if (!projectId || !labelingTasks || !recordList) return;
         refetchRecordCommentsAndProcess(recordList);
@@ -140,12 +146,6 @@ export default function DataBrowser() {
         setSearchRequest({ offset: searchRequest.offset + searchRequest.limit, limit: searchRequest.limit });
     }
 
-    function refetchUniqueValuesAndProcess() {
-        getUniqueValuesByAttributes(projectId, (res) => {
-            dispatch(setUniqueValuesDict(postProcessUniqueValues(res, attributes)));
-        });
-    }
-
     const setSearchRequestToInit = useCallback(() => {
         setSearchRequest(SEARCH_REQUEST);
     }, []);

src/components/projects/projectId/data-browser/SearchGroups.tsx

@@ -29,6 +29,7 @@ import { getRecordsByStaticSlice, searchRecordsExtended } from "@/src/services/b
 import { staticDataSlicesCurrentCount } from "@/src/services/base/dataSlices";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 import { MemoIconArrowDown, MemoIconArrowsRandom, MemoIconFilterOff, MemoIconPlus, MemoIconPointerOff, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
+import { useConsoleLog } from "@/submodules/react-components/hooks/useConsoleLog";
 
 const GROUP_SORT_ORDER = 0;
 let GLOBAL_SEARCH_GROUP_COUNT = 0;
@@ -336,7 +337,14 @@ export default function SearchGroups() {
             const attributeName = formControlsIdx['name'];
             attributeType = getAttributeType(attributesSortOrder, attributeName);
         }
-        if (attributeType !== DataTypeEnum.BOOLEAN) {
+        if (attributeType == DataTypeEnum.TEXT_LIST) {
+            operatorsCopy.push({
+                value: SearchOperator.CONTAINS.split("_").join(" "),
+            });
+            tooltipsCopy.push(getSearchOperatorTooltip(SearchOperator.CONTAINS));
+            formControlsIdx['operator'] = SearchOperator.CONTAINS;
+
+        } else if (attributeType !== DataTypeEnum.BOOLEAN) {
             for (let t of Object.values(SearchOperator)) {
                 operatorsCopy.push({
                     value: t.split("_").join(" "),
@@ -357,6 +365,8 @@ export default function SearchGroups() {
         dispatch(setFullSearchStore(fullSearchCopy));
     }
 
+    useConsoleLog(uniqueValuesDict, 'uniqueValuesDict');
+
     function removeSearchGroupItem(groupKey, index) {
         const fullSearchCopy = jsonCopy(fullSearchStore);
         fullSearchCopy[groupKey].groupElements.splice(index, 1);
@@ -622,7 +632,7 @@ export default function SearchGroups() {
                                             }
                                         </div>
                                     </div>
-                                    {uniqueValuesDict[groupItem['name']] && groupItem['operator'] != '' && groupItem['operator'] != 'BETWEEN' && groupItem['operator'] != 'IN' && groupItem['operator'] != 'IN WC' ? (
+                                    {(uniqueValuesDict[groupItem['name']] && groupItem['operator'] != '' && groupItem['operator'] != 'BETWEEN' && groupItem['operator'] != 'IN' && groupItem['operator'] != 'IN WC' || saveAttributeType == DataTypeEnum.TEXT_LIST) ? (
                                         <div className="my-2">
                                             <KernDropdown options={uniqueValuesDict[groupItem['name']]} buttonName={groupItem['searchValue'] ? groupItem['searchValue'] : 'Select value'}
                                                 selectedOption={(option: any) => selectValueDropdown(option, index, 'searchValue', group.key)} fontClass="font-dmMono" />

src/util/components/projects/projectId/data-browser/data-browser-helper.ts

@@ -176,9 +176,13 @@ function parseUTC(utc: string, forOutlier: boolean = false) {
 export function postProcessUniqueValues(uniqueValues: any, attributesSortOrder: any) {
     const uniqueValuesDict = uniqueValues;
     for (let key in uniqueValuesDict) {
-        const attributeType = getAttributeType(attributesSortOrder, key);
+        const attributeType = attributesSortOrder.find(att => att.name == key)?.dataType;
         if (attributeType == DataTypeEnum.TEXT || attributeType == DataTypeEnum.LLM_RESPONSE) {
             delete uniqueValuesDict[key];
+        } else if (attributeType == DataTypeEnum.TEXT_LIST) {
+            uniqueValuesDict[key] = uniqueValuesDict[key].map((value: string) => {
+                return JSON.parse(value);
+            })[0];
         }
     }
     return uniqueValuesDict;