Hotfix release (#11)

* redirect logic on label task deletion/heursitic deletion

* attribute calculation progress not parsed correctly

* Crowd labeler details page → status

* Project deleted notification with multiple users

* Similarity search display fixes

* Filtered attribute specific embeddings for similarity search and outlier slice

* Loading indicator missing for sync with backend on record change

* Text center for ac modal

* Project snapshot export doesnt return fix

* Sample projects navigation issue fix

* Embeddings in creation not displayed for outliers and similarity search and progress for heursitics displayed correctlye

* Record IDE reload and labeling page navigation fixes

* Small fix on hovering

* Fixed issue for azure embeddings

* Azure url,versions and engines duplicate fix

* REmvoes bracket for tranferred tokenizer value

* Forces uploadtype for none button changes

---------

Co-authored-by: Lennart Schmidt <[email protected]>
Co-authored-by: JWittmeyer <[email protected]>

Author: 3 people

src/components/projects/SampleProjectsDropdown.tsx

@@ -1,17 +1,17 @@
-import { Fragment, useCallback, useEffect, useState } from 'react'
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { Menu, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { useMutation } from '@apollo/client';
 import { useRouter } from 'next/router';
 import { useDispatch, useSelector } from 'react-redux';
-import { extendAllProjects, selectAllProjects, updateProjectState } from '@/src/reduxStore/states/project';
+import { selectAllProjects } from '@/src/reduxStore/states/project';
 import { ModalButton, ModalEnum } from '@/src/types/shared/modal';
 import { closeModal, openModal } from '@/src/reduxStore/states/modal';
 import Modal from '../shared/modal/Modal';
 import { IconAlertTriangle, IconFishHook, IconMessageCircle, IconNews } from '@tabler/icons-react';
 import { CREATE_SAMPLE_PROJECT } from '@/src/services/gql/mutations/projects';
-import { ProjectStatus } from '@/src/types/components/projects/projects-list';
 import { setSearchGroupsStore } from '@/src/reduxStore/states/pages/data-browser';
+import { selectProjectIdSampleProject, setProjectIdSampleProject } from '@/src/reduxStore/states/tmp';
 
 const ACCEPT_BUTTON = { buttonCaption: "Create", closeAfterClick: false, useButton: true, disabled: true };
 
@@ -20,10 +20,11 @@ export default function SampleProjectsDropdown() {
     const dispatch = useDispatch();
 
     const projects = useSelector(selectAllProjects);
+    const tmpProjectIdSample = useSelector(selectProjectIdSampleProject);
 
-    const [projectNameInput, setProjectNameInput] = useState<string>("");
-    const [projectTypeInput, setProjectTypeInput] = useState<string>("");
-    const [projectNameExists, setProjectNameExists] = useState<boolean>(false);
+    const [projectNameInput, setProjectNameInput] = useState("");
+    const [projectTypeInput, setProjectTypeInput] = useState("");
+    const [projectNameExists, setProjectNameExists] = useState(false);
 
     const [createSampleProjectMut] = useMutation(CREATE_SAMPLE_PROJECT);
 
@@ -38,23 +39,14 @@ export default function SampleProjectsDropdown() {
         }
         const projectNameFinal = projectName && projectName ? projectName : projectNameInput;
         const projectTypeFinal = projectType ? projectType : projectTypeInput;
-        const projectSample = {
-            name: projectNameFinal,
-            id: "sample",
-            status: ProjectStatus.INIT_SAMPLE_PROJECT
-        }
-        dispatch(extendAllProjects(projectSample));
         dispatch(closeModal(ModalEnum.SAMPLE_PROJECT_TITLE));
         dispatch(setSearchGroupsStore({}));
         createSampleProjectMut({ variables: { name: projectNameFinal, projectType: projectTypeFinal } }).then((res) => {
-            const projectUpdated = res.data.createSampleProject['project'];
-            dispatch(updateProjectState('sample', { ...projectUpdated }));
             dispatch(closeModal(ModalEnum.SAMPLE_PROJECT_TITLE));
-            if (router.pathname.includes("/projects")) {
-                router.push(`/projects/${projectUpdated.id}/overview`);
-            }
+            const projectId = res['data']['createSampleProject']['project'].id;
+            dispatch(setProjectIdSampleProject(projectId));
         });
-    }, []);
+    }, [projects, projectNameInput, projectTypeInput, router]);
 
     const [acceptButton, setAcceptButton] = useState<ModalButton>(ACCEPT_BUTTON);
 
@@ -70,6 +62,18 @@ export default function SampleProjectsDropdown() {
         setAcceptButton({ ...acceptButton, emitFunction: () => importSampleProject(projectNameInput, projectTypeInput) });
     }, [projectNameInput]);
 
+    useEffect(() => {
+        if (tmpProjectIdSample) {
+            router.push(`/projects/${tmpProjectIdSample}/overview`);
+        }
+    }, [tmpProjectIdSample]);
+
+    useEffect(() => {
+        return () => {
+            dispatch(setProjectIdSampleProject(null));
+        }
+    }, []);
+
     return (
         <Menu as="div" className="relative inline-block text-left">
             <div>

src/components/projects/new/NewProject.tsx

@@ -1,32 +1,37 @@
 import { UploadFileType, UploadOptions } from "@/src/types/shared/upload";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { setUploadFileType } from "@/src/reduxStore/states/upload";
+import { selectUploadData, setUploadFileType } from "@/src/reduxStore/states/upload";
 import Upload from "../../shared/upload/Upload";
 import { CacheEnum, selectCachedValue } from "@/src/reduxStore/states/cachedValues";
 import { setAllProjects } from "@/src/reduxStore/states/project";
 import { useLazyQuery } from "@apollo/client";
 import { GET_PROJECT_LIST } from "@/src/services/gql/queries/projects";
 
 const UPLOAD_OPTION = { deleteProjectOnFail: true, tokenizerValues: [] };
-
+const COMPONENT_FILE_TYPE = UploadFileType.RECORDS_NEW;
 export default function NewProject() {
     const dispatch = useDispatch();
-
+    const currentFileType = useSelector(selectUploadData).uploadFileType;
     const tokenizerValues = useSelector(selectCachedValue(CacheEnum.TOKENIZER_VALUES));
 
     const [uploadOptions, setUploadOptions] = useState<UploadOptions>(UPLOAD_OPTION);
 
     const [refetchProjects] = useLazyQuery(GET_PROJECT_LIST, { fetchPolicy: "no-cache" });
 
     useEffect(() => {
-        dispatch(setUploadFileType(UploadFileType.RECORDS_NEW));
+        dispatch(setUploadFileType(COMPONENT_FILE_TYPE));
         refetchProjects().then((res) => {
             const projects = res.data["allProjects"].edges.map((edge: any) => edge.node);
             dispatch(setAllProjects(projects));
         });
     }, []);
 
+    useEffect(() => {
+        if (!currentFileType || currentFileType == COMPONENT_FILE_TYPE) return;
+        dispatch(setUploadFileType(COMPONENT_FILE_TYPE));
+    }, [currentFileType]);
+
     useEffect(() => {
         setUploadOptions({ ...UPLOAD_OPTION, tokenizerValues });
     }, [tokenizerValues]);

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

@@ -444,7 +444,7 @@ export default function AttributeCalculation() {
                                     <Tooltip content={TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.BEING_EXECUTED} color="invert" placement="right" className="relative z-10 cursor-auto"><LoadingIcon /></Tooltip>
                                     <div className="text-sm leading-5 font-normal text-gray-500 w-full">
                                         <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-                                            <div className="bg-green-400 h-2.5 rounded-full" style={{ 'width': currentAttribute.progress + '%' }}>
+                                            <div className="bg-green-400 h-2.5 rounded-full" style={{ 'width': (currentAttribute.progress * 100) + '%' }}>
                                             </div>
                                         </div>
                                     </div>

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

@@ -30,6 +30,7 @@ export default function DataBrowserRecords(props: DataBrowserRecordsProps) {
     const additionalData = useSelector(selectAdditionalData);
     const activeSearchParams = useSelector(selectActiveSearchParams);
     const attributes = useSelector(selectVisibleAttributesHeuristics);
+    const recordsInDisplay = useSelector(selectSimilaritySearch).recordsInDisplay;
 
     useEffect(() => {
         router.events.on("routeChangeStart", clearFilters);
@@ -84,6 +85,7 @@ export default function DataBrowserRecords(props: DataBrowserRecordsProps) {
     }
 
     function refetchMoreRecords(e: any) {
+        if (recordsInDisplay) return;
         if (e.target.offsetHeight + e.target.scrollTop >= e.target.scrollHeight) {
             props.refetchNextRecords();
         }

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

@@ -115,6 +115,7 @@ export default function SearchGroups() {
     useEffect(() => {
         if (!user || !activeSearchParams || !labelingTasks || !attributes) return;
         if (!fullSearchStore || fullSearchStore[SearchGroup.DRILL_DOWN] == undefined) return;
+        if (recordsInDisplay) return;
         refreshTextHighlightNeeded();
         setHighlightingToRecords();
         if (activeSlice && activeSlice.static) {

src/components/projects/projectId/data-browser/modals/CreateOutlierSliceModal.tsx

@@ -1,6 +1,6 @@
 import Modal from "@/src/components/shared/modal/Modal";
 import { selectActiveSearchParams, selectSimilaritySearch } from "@/src/reduxStore/states/pages/data-browser";
-import { selectEmbeddings } from "@/src/reduxStore/states/pages/settings";
+import { selectEmbeddings, selectOnAttributeEmbeddings } from "@/src/reduxStore/states/pages/settings";
 import { selectProjectId } from "@/src/reduxStore/states/project";
 import { CREATE_OUTLIER_SLICE } from "@/src/services/gql/mutations/data-browser";
 import { Embedding } from "@/src/types/components/projects/projectId/settings/embeddings";
@@ -18,14 +18,14 @@ export default function CreateOutlierSliceModal() {
     const activeSearchParams = useSelector(selectActiveSearchParams);
     const similaritySearch = useSelector(selectSimilaritySearch);
     const embeddings = useSelector(selectEmbeddings);
+    const onAttributeEmbeddings = useSelector(selectOnAttributeEmbeddings);
 
     const [selectedEmbedding, setSelectedEmbedding] = useState<Embedding>(null);
     const [acceptButton, setAcceptButton] = useState<ModalButton>(ACCEPT_BUTTON);
 
     const [createOutlierSliceMut] = useMutation(CREATE_OUTLIER_SLICE);
 
     const requestOutlierSlice = useCallback(() => {
-        // const embeddingId = embeddings.find((embedding) => embedding.name == selectedEmbedding).id;
         createOutlierSliceMut({ variables: { projectId: projectId, embeddingId: selectedEmbedding.id } }).then((res) => { });
     }, [selectedEmbedding]);
 
@@ -38,6 +38,6 @@ export default function CreateOutlierSliceModal() {
         {(activeSearchParams.length > 0 || similaritySearch.recordsInDisplay) && <div className="text-red-500 mb-2 flex flex-grow justify-center text-sm">
             Warning: your current filter selection will be removed!</div>}
 
-        <Dropdown2 options={embeddings} buttonName={selectedEmbedding ? selectedEmbedding.name : 'Select embedding'} selectedOption={(option: any) => setSelectedEmbedding(option)} />
+        <Dropdown2 options={onAttributeEmbeddings} buttonName={selectedEmbedding ? selectedEmbedding.name : 'Select embedding'} selectedOption={(option: any) => setSelectedEmbedding(option)} />
     </Modal>)
 }

src/components/projects/projectId/data-browser/modals/SimilaritySeachModal.tsx

@@ -1,7 +1,7 @@
 import Modal from "@/src/components/shared/modal/Modal";
 import { selectModal } from "@/src/reduxStore/states/modal";
 import { selectActiveSearchParams, selectSimilaritySearch, selectUniqueValuesDict, setRecordsInDisplay, setSearchRecordsExtended } from "@/src/reduxStore/states/pages/data-browser";
-import { selectEmbeddings, selectLabelingTasksAll, selectUsableAttributes } from "@/src/reduxStore/states/pages/settings";
+import { selectEmbeddings, selectLabelingTasksAll, selectOnAttributeEmbeddings, selectUsableAttributes } from "@/src/reduxStore/states/pages/settings";
 import { selectProjectId } from "@/src/reduxStore/states/project";
 import { SEARCH_SIMILAR_RECORDS } from "@/src/services/gql/queries/data-browser";
 import { FilterIntegrationOperator, SearchOperator } from "@/src/types/components/projects/projectId/data-browser/search-operators";
@@ -33,6 +33,7 @@ export default function SimilaritySearchModal() {
     const projectId = useSelector(selectProjectId);
     const labelingTasks = useSelector(selectLabelingTasksAll);
     const uniqueValuesDict = useSelector(selectUniqueValuesDict);
+    const onAttributeEmbeddings = useSelector(selectOnAttributeEmbeddings);
 
     const [filterAttributesSS, setFilterAttributesSS] = useState<any>(null);
     const [filterAttributesForm, setFilterAttributesForm] = useState<any>([]);
@@ -162,7 +163,7 @@ export default function SimilaritySearchModal() {
         <div className="flex flex-grow justify-center text-lg leading-6 text-gray-900 font-medium">Select embedding for similarity search </div>
         {(activeSearchParams.length > 0 || similaritySearch.recordsInDisplay) && <div className="text-red-500 mb-2 flex flex-grow justify-center text-sm">Warning: your current filter selection will be removed!</div>}
 
-        <Dropdown2 options={embeddings} buttonName={selectedEmbedding ? selectedEmbedding.name : 'Select embedding'} selectedOption={(value) => setSelectedEmbedding(value)} dropdownClasses="my-2" />
+        <Dropdown2 options={onAttributeEmbeddings} buttonName={selectedEmbedding ? selectedEmbedding.name : 'Select embedding'} selectedOption={(value) => setSelectedEmbedding(value)} dropdownClasses="my-2" />
 
         {filterAttributesSS && filterAttributesSS.length > 0 && <div className="flex flex-col justify-start mt-4">
             <div className="pr-2 bg-white text-md font-medium text-gray-900">Filter attributes</div>

src/components/projects/projectId/edit-records/SyncRecordsModal.tsx

@@ -27,6 +27,7 @@ export default function SyncRecordsModal(props: SyncRecordsModalProps) {
         const erdDataCopy = { ...props.erdData };
         erdDataCopy.syncing = true;
         erdDataCopy.errors = null;
+        props.setErdData(erdDataCopy);
         const changes = jsonCopy(erdDataCopy.cachedRecordChanges);
         for (const key in changes) delete changes[key].display;
         syncChangesMut({ variables: { projectId: projectId, changes: JSON.stringify(changes) } }).then((res) => {

src/components/projects/projectId/heuristics/heuristicId/active-learning/ActiveLearning.tsx

@@ -185,10 +185,10 @@ export default function ActiveLearning() {
         if (!currentHeuristic) return;
         if (['labeling_task_updated', 'labeling_task_created', 'label_created', 'label_deleted'].includes(msgParts[1])) {
             refetchLabelingTasksAndProcess();
-        } else if ('labeling_task_deleted' == msgParts[1]) {
+        } else if ('labeling_task_deleted' == msgParts[1] && msgParts[2] == currentHeuristic.labelingTaskId) {
             alert('Parent labeling task was deleted!');
             router.push(`/projects/${projectId}/heuristics`);
-        } else if ('information_source_deleted' == msgParts[1]) {
+        } else if ('information_source_deleted' == msgParts[1] && msgParts[2] == currentHeuristic.id) {
             alert('Information source was deleted!');
             router.push(`/projects/${projectId}/heuristics`);
         } else if (['information_source_updated', 'model_callback_update_statistics'].includes(msgParts[1])) {

src/components/projects/projectId/heuristics/heuristicId/crowd-labeler/CrowdLabeler.tsx

@@ -109,10 +109,10 @@ export default function CrowdLabeler() {
         if (!currentHeuristic) return;
         if (['labeling_task_updated', 'labeling_task_created', 'label_created', 'label_deleted'].includes(msgParts[1])) {
             refetchLabelingTasksAndProcess();
-        } else if ('labeling_task_deleted' == msgParts[1]) {
+        } else if ('labeling_task_deleted' == msgParts[1] && currentHeuristic.id == msgParts[2]) {
             alert('Parent labeling task was deleted!');
             router.push(`/projects/${projectId}/heuristics`);
-        } else if ('information_source_deleted' == msgParts[1]) {
+        } else if ('information_source_deleted' == msgParts[1] && currentHeuristic.id == msgParts[2]) {
             alert('Information source was deleted!');
             router.push(`/projects/${projectId}/heuristics`);
         } else if (['information_source_updated', 'model_callback_update_statistics'].includes(msgParts[1])) {