UI bug fixes (#20)

* UI bug fixes

* PR comments

* Submodules merged

Author: lumburovskalina

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

@@ -4,7 +4,7 @@ import DataBrowserSidebar from "./DataBrowserSidebar";
 import { useLazyQuery } from "@apollo/client";
 import { DATA_SLICES, GET_RECORD_COMMENTS, GET_UNIQUE_VALUES_BY_ATTRIBUTES, SEARCH_RECORDS_EXTENDED } from "@/src/services/gql/queries/data-browser";
 import { useCallback, useEffect, useState } from "react";
-import { expandRecordList, selectRecords, setActiveDataSlice, setDataSlices, setRecordComments, setSearchRecordsExtended, setUniqueValuesDict, setUsersMapCount, updateAdditionalDataState } from "@/src/reduxStore/states/pages/data-browser";
+import { expandRecordList, selectActiveSearchParams, selectConfiguration, selectFullSearchStore, selectRecords, setActiveDataSlice, setDataSlices, setRecordComments, setSearchRecordsExtended, setUniqueValuesDict, setUsersMapCount, updateAdditionalDataState } from "@/src/reduxStore/states/pages/data-browser";
 import { postProcessRecordsExtended, postProcessUniqueValues, postProcessUsersCount } from "@/src/util/components/projects/projectId/data-browser/data-browser-helper";
 import { GET_ATTRIBUTES_BY_PROJECT_ID, GET_EMBEDDING_SCHEMA_BY_PROJECT_ID, GET_LABELING_TASKS_BY_PROJECT_ID } from "@/src/services/gql/queries/project-setting";
 import { selectAttributes, selectLabelingTasksAll, setAllAttributes, setAllEmbeddings, setLabelingTasksAll } from "@/src/reduxStore/states/pages/settings";
@@ -18,6 +18,8 @@ import { CommentType } from "@/src/types/shared/comments";
 import { CommentDataManager } from "@/src/util/classes/comments";
 import { REQUEST_COMMENTS } from "@/src/services/gql/queries/projects";
 import { useWebsocket } from "@/src/services/base/web-sockets/useWebsocket";
+import { parseFilterToExtended } from "@/src/util/components/projects/projectId/data-browser/filter-parser-helper";
+import { SearchGroup } from "@/submodules/javascript-functions/enums/enums";
 
 const SEARCH_REQUEST = { offset: 0, limit: 20 };
 
@@ -30,7 +32,10 @@ export default function DataBrowser() {
     const attributes = useSelector(selectAttributes);
     const user = useSelector(selectUser);
     const recordList = useSelector(selectRecords).recordList;
-
+    const activeSearchParams = useSelector(selectActiveSearchParams);
+    const configuration = useSelector(selectConfiguration);
+    const fullSearchStore = useSelector(selectFullSearchStore);
+    const fullCount = useSelector(selectRecords).fullCount;
 
     const [searchRequest, setSearchRequest] = useState(SEARCH_REQUEST);
 
@@ -61,15 +66,16 @@ export default function DataBrowser() {
     }, [projectId, labelingTasks, recordList]);
 
     useEffect(() => {
-        if (!projectId) return;
+        if (!projectId || !labelingTasks || !attributes) return;
         if (!searchRequest) return;
-        if (searchRequest.offset == 0) return;
-        refetchExtendedRecord({ variables: { projectId: projectId, filterData: JSON.stringify({}), offset: searchRequest.offset, limit: searchRequest.limit } }).then((res) => {
+        if (searchRequest.offset == 0 || searchRequest.offset > fullCount) return;
+        const filterData = parseFilterToExtended(activeSearchParams, attributes, configuration, labelingTasks, user, fullSearchStore[SearchGroup.DRILL_DOWN])
+        refetchExtendedRecord({ variables: { projectId: projectId, filterData: filterData, offset: searchRequest.offset, limit: searchRequest.limit } }).then((res) => {
             const parsedRecordData = postProcessRecordsExtended(res.data['searchRecordsExtended'], labelingTasks);
             dispatch(expandRecordList(parsedRecordData));
             refetchRecordCommentsAndProcess(parsedRecordData.recordList);
         });
-    }, [searchRequest]);
+    }, [searchRequest, activeSearchParams, projectId, attributes, configuration, labelingTasks, user, fullSearchStore]);
 
     useEffect(() => {
         if (!projectId || users.length == 0) return;
@@ -139,6 +145,7 @@ export default function DataBrowser() {
     }
 
     function getNextRecords() {
+        console.log('getNextRecords?')
         setSearchRequest({ offset: searchRequest.offset + searchRequest.limit, limit: searchRequest.limit });
     }
 
@@ -148,6 +155,10 @@ export default function DataBrowser() {
         });
     }
 
+    const setSearchRequestToInit = useCallback(() => {
+        setSearchRequest(SEARCH_REQUEST);
+    }, []);
+
     const handleWebsocketNotification = useCallback((msgParts: string[]) => {
         if (['data_slice_created', 'data_slice_updated', 'data_slice_deleted'].includes(msgParts[1])) {
             refetchDataSlicesAndProcess(msgParts[2]);
@@ -169,7 +180,7 @@ export default function DataBrowser() {
     return (<>
         {projectId && <div className="flex flex-row h-full">
             <DataBrowserSidebar />
-            <DataBrowserRecords refetchNextRecords={getNextRecords} />
+            <DataBrowserRecords refetchNextRecords={getNextRecords} clearSearchRequest={setSearchRequestToInit} />
         </div>}
     </>)
 }

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

@@ -48,6 +48,7 @@ export default function DataBrowserRecords(props: DataBrowserRecordsProps) {
         dispatch(updateAdditionalDataState('clearFullSearch', true));
         dispatch(updateAdditionalDataState('displayOutdatedWarning', false));
         dispatch(updateAdditionalDataState('canUpdateDynamicSlice', false));
+        props.clearSearchRequest();
     }
 
     function storePreliminaryRecordIds(index: number, forEdit: boolean = false) {

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

@@ -94,18 +94,20 @@ export default function DataBrowserSidebar() {
 
                 {dataSlices && <div className="mt-2 mb-4">
                     {dataSlices.length > 0 && <div className="w-full grid grid-cols-2 gap-y-1 items-center justify-center" style={{ gridColumnGap: '26px' }}>
-                        {filteredSlices.map((slice: DataSlice, index: number) => (<Tooltip content={!slice.static ? slice.name : ''} color="invert" placement={index % 2 == 0 ? 'right' : 'left'} key={slice.id}>
+                        {filteredSlices.map((slice: DataSlice, index: number) => (<Tooltip content={!slice.static ? <div className="w-24 break-words">{slice.name}</div> : null} color="invert" placement={index % 2 == 0 ? 'right' : 'left'} key={slice.id}>
                             <button onClick={() => toggleSlice(slice)} style={{ width: '170px' }}
                                 className={`cursor-pointer inline-flex border items-center justify-between px-2.5 py-1.5 shadow-sm text-sm font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none ${activeSlice?.id == slice.id ? 'ring-blue-500 ring-2' : ' border-gray-200'}`}>
                                 <label className="cursor-pointer mr-2" onClick={(e) => { updateSliceInfo(slice); e.stopPropagation(); }}>
                                     <IconInfoCircle className={`w-6 h-6 ${slice.color.textColor} ${slice.color.fillColor}`} />
                                 </label>
-                                <label className={`text-gray-700 truncate label-max-width cursor-pointer ${slice.sliceType == Slice.STATIC_OUTLIER ? 'text-xs whitespace-pre' : 'text-sm'}`}>
+                                <label className={`text-gray-700 truncate cursor-pointer ${slice.sliceType == Slice.STATIC_OUTLIER ? 'text-xs whitespace-pre' : 'text-sm'}`}>
                                     {slice.displayName}</label>
-                                <IconTrash className="text-red-700 h-6 w-6 ml-2 cursor-pointer" onClick={(e) => {
+                                <label className="cursor-pointer mr-2" onClick={(e) => {
                                     dispatch(setModalStates(ModalEnum.DELETE_SLICE, { sliceId: slice.id, open: true }));
                                     e.stopPropagation();
-                                }} />
+                                }}>
+                                    <IconTrash className="text-red-700 h-5 w-5 ml-2 cursor-pointer" />
+                                </label>
                             </button>
                         </Tooltip>))}
                     </div>}

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

@@ -606,11 +606,11 @@ export default function SearchGroups() {
                     <ChevronDownIcon className="text-gray-700" />
                 </div>
                 <div className="flex flex-col">
-                    <div className="font-bold truncate" style={{ maxWidth: '21rem' }}>
+                    <div className="font-bold truncate" style={{ maxWidth: '20rem' }}>
                         {searchGroupsStore[group.key].name}
                         {searchGroupsStore[group.key].nameAdd != '' && <label className="font-normal ml-2">{searchGroupsStore[group.key].nameAdd}</label>}
                     </div>
-                    <div className="text-xs text-gray-400 truncate" style={{ maxWidth: '21rem' }}>
+                    <div className="text-xs text-gray-400 truncate" style={{ maxWidth: '20rem' }}>
                         {searchGroupsStore[group.key].subText}
                         {searchGroupsStore[group.key].nameAdd != '' && <label className="font-normal ml-1">{searchGroupsStore[group.key].nameAdd}</label>}
                     </div>
@@ -703,7 +703,7 @@ export default function SearchGroups() {
                             <div>Manually labeled</div>
                             {fullSearchStore[group.key].groupElements['manualLabels'] && fullSearchStore[group.key].groupElements['manualLabels'].length == 0 ? (<ButtonLabelsDisabled />) : (
                                 <Dropdown2 options={fullSearchStore[group.key].groupElements['manualLabels'] ?? []} buttonName={manualLabels.length == 0 ? 'None selected' : manualLabels.join(', ')} hasCheckboxesThreeStates={true} keepDrownOpen={true}
-                                    selectedOption={(option: any) => {
+                                    dropdownWidth="w-80" selectedOption={(option: any) => {
                                         const labels = [...manualLabels, option.name]
                                         setManualLabels(labels);
                                         updateLabelsFullSearch(option, group.key, 'manualLabels');
@@ -713,7 +713,7 @@ export default function SearchGroups() {
                             <div className="mt-2">Weakly supervised</div>
                             {fullSearchStore[group.key].groupElements['weakSupervisionLabels'] && fullSearchStore[group.key].groupElements['weakSupervisionLabels'].length == 0 ? (<ButtonLabelsDisabled />) : (
                                 <Dropdown2 options={fullSearchStore[group.key].groupElements['weakSupervisionLabels'] ?? []} buttonName={weakSupervisionLabels.length == 0 ? 'None selected' : weakSupervisionLabels.join(', ')} hasCheckboxesThreeStates={true}
-                                    selectedOption={(option: any) => {
+                                    dropdownWidth="w-80" selectedOption={(option: any) => {
                                         const labels = [...weakSupervisionLabels, option.name]
                                         setWeakSupervisionLabels(labels);
                                         updateLabelsFullSearch(option, group.key, 'weakSupervisionLabels');
@@ -741,7 +741,7 @@ export default function SearchGroups() {
                             <div className="mt-2">Model callback</div>
                             {fullSearchStore[group.key].groupElements['modelCallbackLabels'] && fullSearchStore[group.key].groupElements['modelCallbackLabels'].length == 0 ? (<ButtonLabelsDisabled />) : (
                                 <Dropdown2 options={fullSearchStore[group.key].groupElements['modelCallbackLabels'] ?? []} buttonName={modelCallBacksLabels.length == 0 ? 'None selected' : modelCallBacksLabels.join(', ')} hasCheckboxesThreeStates={true}
-                                    selectedOption={(option: any) => {
+                                    dropdownWidth="w-80" selectedOption={(option: any) => {
                                         const labels = [...modelCallBacksLabels, option.name]
                                         setModelCallBacksLabels(labels);
                                         updateLabelsFullSearch(option, group.key, 'modelCallbackLabels');

src/components/shared/grid-cards/GridCards.tsx

@@ -54,12 +54,12 @@ export default function GridCards(props: GridCardsProps) {
                 <div className="flex-1 min-w-0 text-sm leading-5">
                     <div className="flow-root font-medium">
                         <div className="text-gray-900 float-left"> {heuristic.name}</div>
-                        <a className="text-green-800 float-right cursor-pointer" href={`/refinery${heuristic.routerLink}`} onClick={(e) => {
+                        {heuristic.routerLink && <a className="text-green-800 float-right cursor-pointer" href={`/refinery${heuristic.routerLink}`} onClick={(e) => {
                             e.preventDefault();
                             router.push(`${heuristic.routerLink}`);
                         }}> Details
                             <IconArrowRight className="h-5 w-5 inline-block text-green-800" />
-                        </a>
+                        </a>}
                     </div>
                     <div className="flow-root font-normal">
                         <div className="text-gray-500 float-left line-clamp-3" style={{ maxWidth: '250px' }}>

src/types/components/projects/projectId/data-browser/data-browser.ts

@@ -54,4 +54,5 @@ export enum LineBreaksType {
 
 export type DataBrowserRecordsProps = {
     refetchNextRecords: () => void;
+    clearSearchRequest: () => void;
 };

src/util/components/projects/projectId/model-callbacks-helper.ts

@@ -1,5 +1,5 @@
 import { LabelSource } from "@/submodules/javascript-functions/enums/enums";
-import { mapInformationSourceStatsGlobal } from "./heuristics/shared-helper";
+import { getColorStruct, mapInformationSourceStatsGlobal } from "./heuristics/shared-helper";
 
 export const ACTIONS_DROPDOWN_OPTIONS = ['Select all', 'Deselect all', 'Delete selected'];
 
@@ -8,6 +8,9 @@ export function postProcessModelCallbacks(modelCallBack: string) {
     return JSON.parse(modelCallBack).map((source) => {
         source.labelSource = LabelSource.INFORMATION_SOURCE;
         source.stats = mapInformationSourceStatsGlobal(source.stat_data);
+        source.stats.forEach((stat) => {
+            stat.color = getColorStruct(stat.color);
+        });
         return source;
     });
 }

src/util/components/projects/projectId/settings/data-schema-helper.ts

@@ -49,7 +49,7 @@ export function getColorForDataType(dataType): string {
         case 'BOOLEAN': return 'cyan';
         case 'INTEGER': return 'indigo';
         case 'FLOAT': return 'purple';
-        case 'EMBEDDING_LIST': return 'gray';
+        case 'EMBEDDING_LIST': return 'rose';
         default: return 'gray';
     }
 }