Bug fixes (#18)

lumburovskalina · web-flow · commit 7158bfb6d53d · 2024-04-04T08:55:20.000+02:00
* Fixed link for waitlist

* Submodules merge

* Layout fix for refinery

* Smaller fix for the monaco editor

* Scrollable part for projects list

* PR comments

* Submodules merge
diff --git a/src/components/models-download/AddModelDownloadModal.tsx b/src/components/models-download/AddModelDownloadModal.tsx
@@ -82,7 +82,7 @@ export default function AddModelDownloadModal() {
                     <span className="card-title mb-0 label-text flex"><span className="cursor-help underline filtersUnderline">Name</span></span>
                 </Tooltip>
                 <Dropdown2 options={filteredList && filteredList} useDifferentTextColor={colorDownloadedModels} differentTextColor="green" valuePropertyPath="configString"
-                    hasSearchBar={true} dropdownItemsClasses="max-h-96 overflow-y-auto"
+                    hasSearchBar={true} dropdownItemsClasses="max-h-96 overflow-y-auto" ignoreDisabledForSearch={true}
                     selectedOption={(option: any) => {
                         setModelName(option.configString);
                     }} optionsHaveHoverBox={true} hoverBoxList={hoverBoxList} lineSeparatorIndex={lineSeparatorIndex}
diff --git a/src/components/projects/ProjectsList.tsx b/src/components/projects/ProjectsList.tsx
@@ -13,7 +13,6 @@ import ProjectCard from "./ProjectCard";
 import { GET_CAN_CREATE_LOCAL_ORG } from "@/src/services/gql/queries/organizations";
 import { ADD_USER_TO_ORGANIZATION, CREATE_ORGANIZATION } from "@/src/services/gql/mutations/organizations";
 import style from "@/src/styles/components/projects/projects-list.module.css";
-import { useRouter } from "next/router";
 import AdminDeleteProjectModal from "./AdminDeleteProjectModal";
 import { setAllAttributes, setAllEmbeddings, setLabelingTasksAll } from "@/src/reduxStore/states/pages/settings";
 import { setOverviewFilters } from "@/src/reduxStore/states/tmp";
@@ -22,7 +21,6 @@ import { SearchGroup } from "@/submodules/javascript-functions/enums/enums";
 import { useWebsocket } from "@/src/services/base/web-sockets/useWebsocket";
 
 export default function ProjectsList() {
-    const router = useRouter();
     const dispatch = useDispatch();
 
     const organizationInactive = useSelector(selectInactiveOrganization);
@@ -143,7 +141,7 @@ export default function ProjectsList() {
                                             </div>
                                             <div className="font-normal text-xl text-gray-500 mt-5">
                                                 In a 15 minute onboarding call, we can directly assign you access. Reach out to us &nbsp;
-                                                <a href="https://www.kern.ai/waitlist" target="_blank"><span
+                                                <a href="https://www.kern.ai/schedule-demo" target="_blank"><span
                                                     className="underline cursor-pointer">here</span></a>.
                                             </div>
                                             <div className="text-gray-500 mt-5">
@@ -219,7 +217,7 @@ export default function ProjectsList() {
                             <div className="ml-4">
                                 <ButtonsContainer />
                             </div>
-                            <div className="h-screen overflow-y-auto my-3">
+                            <div className="h-full overflow-y-auto my-3">
                                 <div className={style.scrollableSize}>
                                     {projects && projects.map((project: Project) => (
                                         <ProjectCard project={project} projectStatisticsById={projectStatisticsById} key={project.id}></ProjectCard>
diff --git a/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx b/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
@@ -292,7 +292,7 @@ export default function AttributeCalculation() {
 
     useWebsocket(CurrentPage.ATTRIBUTE_CALCULATION, handleWebsocketNotification, projectId);
 
-    return (projectId && <div className="bg-white p-4 pb-16 overflow-y-auto h-screen" style={{ width: 'calc(100vw - 75px)' }} onScroll={(e: any) => onScrollEvent(e)}>
+    return (projectId && <div className="bg-white p-4 overflow-y-auto max-h-full" style={{ width: 'calc(100vw - 95px)', minWidth: '1175px' }} onScroll={(e: any) => onScrollEvent(e)}>
         {currentAttribute && <div>
             <div className={`sticky z-40 h-12 ${isHeaderNormal ? 'top-1' : '-top-5'}`}>
                 <div className={`bg-white flex-grow ${isHeaderNormal ? '' : 'shadow'}`}>
diff --git a/src/components/projects/projectId/edit-records/EditRecords.tsx b/src/components/projects/projectId/edit-records/EditRecords.tsx
@@ -14,6 +14,7 @@ import { useRouter } from "next/router";
 import { ModalEnum } from "@/src/types/shared/modal";
 import { openModal } from "@/src/reduxStore/states/modal";
 import { useWebsocket } from "@/src/services/base/web-sockets/useWebsocket";
+import { scrollElementIntoView } from "@/submodules/javascript-functions/scrollHelper";
 
 export default function EditRecords() {
     const dispatch = useDispatch();
@@ -41,6 +42,7 @@ export default function EditRecords() {
         if (!erdDataCopy.modals.hideExplainModal) {
             dispatch(openModal(ModalEnum.EXPLAIN_EDIT_RECORDS));
         }
+        scrollElementIntoView('flash-it', 100);
     }, [sessionData, projectId]);
 
     useEffect(() => {
@@ -71,9 +73,9 @@ export default function EditRecords() {
 
     useWebsocket(CurrentPage.EDIT_RECORDS, handleWebsocketNotification, projectId);
 
-    return (<>{projectId && <div className="h-screen bg-white flex flex-col">
+    return (<>{projectId && <div className="h-full bg-white flex flex-col">
         <NavBarTopEditRecords erdData={erdData} setErdData={(erdData) => setErdData(erdData)} />
-        <div className={`grid items-start pt-2 px-2 pb-8 gap-2 flex-grow overflow-y-auto auto-rows-max ${erdData.columnClass}`} style={{ maxHeight: 'calc(100vh - 95px)' }}>
+        <div className={`grid items-start p-2 gap-2 flex-grow overflow-y-auto auto-rows-max ${erdData.columnClass}`} >
             {erdData.data && <>
                 {erdData.displayRecords.map((record) =>
                     <div key={record.id} className={`relative space-x-3 items-center bg-white overflow-hidden shadow rounded-lg border w-full scroll-mt-8 ${erdData.displayRecords?.length > 2 ? style.item : ''} `}
diff --git a/src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicsLayout.tsx b/src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicsLayout.tsx
@@ -107,7 +107,7 @@ export default function HeuristicsLayout(props: any) {
         });
     }
 
-    return (projectId && <div className={`bg-white p-4 pb-16 overflow-y-auto h-screen ${style.widthSize}`} onScroll={onScrollEvent}>
+    return (projectId && <div className={`bg-white p-4 overflow-y-auto max-h-full ${style.widthSize}`} onScroll={onScrollEvent}>
         {currentHeuristic && <div>
             <div className={`sticky z-40 h-12 ${isHeaderNormal ? 'top-1' : '-top-5'}`}>
                 <div className={`bg-white flex-grow ${isHeaderNormal ? '' : 'shadow'}`}>
diff --git a/src/components/projects/projectId/heuristics/modals/AddZeroShotModal.tsx b/src/components/projects/projectId/heuristics/modals/AddZeroShotModal.tsx
@@ -160,7 +160,7 @@ export default function AddZeroShotModal() {
                 </div>
             </Tooltip>
             <Dropdown2 options={filteredList && filteredList} hasSearchBar={true} optionsHaveLink={true} optionsHaveHoverBox={true} valuePropertyPath="configString"
-                useDifferentTextColor={colorDownloadedModels} differentTextColor="green"
+                useDifferentTextColor={colorDownloadedModels} differentTextColor="green" ignoreDisabledForSearch={true}
                 linkList={filteredList && filteredList.map(model => model.link)}
                 selectedOption={(option: any) => setModel(option.configString)}
                 hoverBoxList={hoverBoxList}
diff --git a/src/components/projects/projectId/lookup-lists/LookupListsOverview.tsx b/src/components/projects/projectId/lookup-lists/LookupListsOverview.tsx
@@ -124,7 +124,7 @@ export default function LookupListsOverview() {
 
     return (
         projectId ? (
-            <div className="p-4 h-screen bg-gray-100 flex-1 flex flex-col">
+            <div className="p-4 h-full bg-gray-100 flex-1 flex flex-col">
                 <div className="w-full ">
                     <div className="flex-shrink-0 block sm:flex justify-between items-center">
                         <div className="text-lg leading-6 text-gray-900 font-medium inline-block">
diff --git a/src/components/projects/projectId/lookup-lists/lookupListId/LookupListsDetails.tsx b/src/components/projects/projectId/lookup-lists/lookupListId/LookupListsDetails.tsx
@@ -150,7 +150,7 @@ export default function LookupListsDetails() {
 
     useWebsocket(CurrentPage.LOOKUP_LISTS_DETAILS, handleWebsocketNotification, projectId);
 
-    return (projectId && <div className="bg-white p-4 pb-16 overflow-y-auto h-screen" onScroll={(e: any) => onScrollEvent(e)}>
+    return (projectId && <div className="bg-white p-4 overflow-y-auto max-h-full" onScroll={(e: any) => onScrollEvent(e)}>
         {lookupList && <div>
             <div className={`sticky z-40 h-12 ${isHeaderNormal ? 'top-1' : '-top-5'}`}>
                 <div className={`bg-white flex-grow ${isHeaderNormal ? '' : 'shadow'}`}>
@@ -211,7 +211,7 @@ export default function LookupListsDetails() {
                         className="font-dmMono px-4 py-2 rounded-none rounded-r-md border border-gray-300 text-gray-500 sm:text-sm bg-gray-100 cursor-pointer">
                         {lookupList.pythonVariable}</span>
                 </Tooltip>
-                <LookupListOperations  refetchTerms={refetchTerms}/>
+                <LookupListOperations refetchTerms={refetchTerms} />
             </div>
             <Terms terms={terms} finalSize={finalSize} refetchTerms={refetchTerms} setTerms={(terms: Term[]) => setTerms(terms)} />
             <DangerZone elementType={DangerZoneEnum.LOOKUP_LIST} name={lookupList.name} id={lookupList.id} />
diff --git a/src/components/projects/projectId/record-ide/RecordIDE.tsx b/src/components/projects/projectId/record-ide/RecordIDE.tsx
@@ -175,7 +175,7 @@ export default function RecordIDE() {
         setOutput("");
     }
 
-    return (<div className="relative h-full">
+    return (<>
         {projectId && <div className={`bg-white grid overflow-hidden ${vertical ? 'grid-cols-2' : 'grid-cols-1'}`}>
             <div className="h-full">
                 <div className="m-3 flex items-center">
@@ -224,7 +224,7 @@ export default function RecordIDE() {
                     height={screenHeight}
                     onChange={(val) => setCode(val)} />
             </div>
-            <div className={`h-screen border-gray-300 ${vertical ? 'border-l' : 'border-t'}`}>
+            <div className={`h-full border-gray-300 ${vertical ? 'border-l' : 'border-t'}`}>
                 <div className="flex flex-row m-3 items-center">
                     <span className="mr-4">Shell</span>
                     <Tooltip content={<MultilineTooltip tooltipLines={['Press Shift + Enter in the editor', 'to run the code']} />} color="invert" placement="bottom">
@@ -266,5 +266,5 @@ export default function RecordIDE() {
                 </div>}
             </div>
         </div>}
-    </div >)
+    </>)
 }
diff --git a/src/components/projects/projectId/settings/ProjectSettings.tsx b/src/components/projects/projectId/settings/ProjectSettings.tsx
@@ -276,7 +276,7 @@ export default function ProjectSettings() {
     useWebsocket(CurrentPage.PROJECT_SETTINGS, handleWebsocketNotification, project?.id);
 
     return (<div>
-        {project != null && <div className="p-4 bg-gray-100 pb-10 h-screen overflow-y-auto flex-1 flex flex-col">
+        {project != null && <div className="p-4 bg-gray-100 h-full flex-1 flex flex-col overflow-y-auto">
             <DataSchema isAcOrTokenizationRunning={isAcRunning || tokenizationProgress < 1} pKeyValid={pKeyValid} />
 
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-1 align-top">
diff --git a/src/components/projects/projectId/settings/embeddings/AddNewEmbeddingModal.tsx b/src/components/projects/projectId/settings/embeddings/AddNewEmbeddingModal.tsx
@@ -359,7 +359,7 @@ function SuggestionsModel(props: SuggestionsProps) {
         <span className="card-title mb-0 label-text flex"><span className="cursor-help underline filtersUnderline">Model</span></span>
     </Tooltip>
         <Dropdown2 options={filteredList && filteredList} hasSearchBar={true} differentTextColor="green" useDifferentTextColor={colorDownloadedModels} valuePropertyPath="configString"
-            selectedOption={(option: any) => props.selectedOption(option.configString)} optionsHaveHoverBox={true} hoverBoxList={hoverBoxList}
+            selectedOption={(option: any) => props.selectedOption(option.configString)} optionsHaveHoverBox={true} hoverBoxList={hoverBoxList} ignoreDisabledForSearch={true}
             searchTextTyped={(option: string) => props.selectedOption(option)}
             filteredOptions={(option: string) => setFilteredList(props.options.filter((val: any) => val.configString.includes(option)))} />
     </>
@@ -378,7 +378,7 @@ function SuggestionsAzure(props: SuggestionsProps) {
     return <><Tooltip content={props.tooltip} placement="right" color="invert">
         <span className="card-title mb-0 label-text flex"><span className="cursor-help underline filtersUnderline">{props.name}</span></span>
     </Tooltip>
-        <Dropdown2 options={filteredList && filteredList} hasSearchBar={true}
+        <Dropdown2 options={filteredList && filteredList} hasSearchBar={true} ignoreDisabledForSearch={true}
             selectedOption={(option: string) => props.selectedOption(option)}
             searchTextTyped={(option: string) => props.selectedOption(option)}
             filteredOptions={(option: string) => setFilteredList(props.options.filter((val: any) => val.includes(option)))} />
diff --git a/src/components/shared/layout/Layout.tsx b/src/components/shared/layout/Layout.tsx
@@ -6,7 +6,7 @@ import { Fragment, useCallback, useEffect, useState } from "react";
 import { NotificationLevel } from "@/src/types/shared/notification-center";
 import { IconAlertTriangleFilled, IconCircleCheckFilled, IconInfoCircleFilled } from "@tabler/icons-react";
 import { useDispatch, useSelector } from "react-redux";
-import { selectUser } from "@/src/reduxStore/states/general";
+import { selectCurrentPage, selectUser } from "@/src/reduxStore/states/general";
 import { interval } from "rxjs";
 import { setNotificationId } from "@/src/reduxStore/states/tmp";
 import AdminMessages from "../admin-messages/AdminMessages";
@@ -29,6 +29,7 @@ export default function Layout({ children }) {
 
     const user = useSelector(selectUser);
     const projectId = useSelector(selectProjectId);
+    const currentPage = useSelector(selectCurrentPage);
 
     const [deletionTimer, setDeletionTimer] = useState(null);
     const [activeAdminMessages, setActiveAdminMessages] = useState<AdminMessage[]>([]);
@@ -115,13 +116,15 @@ export default function Layout({ children }) {
 
     return (
         <>
-            <div className="h-screen bg-gray-100 flex overflow-hidden"
+            <div className="h-screen bg-gray-100 flex overflow-hidden flex-col"
                 style={{ width: windowWidth < MIN_WIDTH ? MIN_WIDTH + 'px' : '100%', overflowX: windowWidth < MIN_WIDTH ? 'auto' : 'hidden' }}>
-                <Sidebar />
-                <div className="h-full w-full flex-1 flex flex-col">
-                    <Header />
-                    <div className="block flex-grow h-full w-full bg-gray-100">
-                        <main>{children}</main>
+                <div className="h-screen flex overflow-hidden">
+                    <Sidebar />
+                    <div className="h-full w-full flex flex-col">
+                        <Header />
+                        <div className={`block flex-grow h-full w-full ${currentPage == CurrentPage.DATA_BROWSER ? '' : 'overflow-y-auto'}`}>
+                            <main>{children}</main>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/src/components/users/UsersList.tsx b/src/components/users/UsersList.tsx
@@ -304,7 +304,7 @@ export default function UsersList() {
                                     </div>
                                     <div className="font-normal text-xl text-gray-500 mt-5">
                                         In a 15 minute onboarding call, we can directly assign you access. Reach out to us &nbsp;
-                                        <a href="https://www.kern.ai/waitlist" target="_blank"><span
+                                        <a href="https://www.kern.ai/schedule-demo" target="_blank"><span
                                             className="underline cursor-pointer">here</span></a>.
                                     </div>
                                     <div className="text-gray-500 mt-5">
diff --git a/src/styles/components/projects/projectId/heuristics/heuristics-details.module.css b/src/styles/components/projects/projectId/heuristics/heuristics-details.module.css
@@ -6,6 +6,7 @@
 
 @media screen and (min-width: 1250px) {
     .widthSize {
-        width: calc(100vw - 75px);
+        width: calc(100vw - 95px);
+        min-width: 1175px;
     }
 }
diff --git a/submodules/react-components b/submodules/react-components
@@ -1 +1 @@
-Subproject commit 8ede24ab961b0d90246dfaa7c5c7bcdfbd1949fe
+Subproject commit bf6dd523b94be0c4e1c5315d32720ba0a067803b

Original file line number	Diff line number	Diff line change
`@@ -107,7 +107,7 @@ export default function HeuristicsLayout(props: any) {`
`107`	`107`	`});`
`108`	`108`	`}`
`109`	`109`
`110`		- return (projectId && <div className={`bg-white p-4 pb-16 overflow-y-auto h-screen ${style.widthSize}`} onScroll={onScrollEvent}>
	`110`	+ return (projectId && <div className={`bg-white p-4 overflow-y-auto max-h-full ${style.widthSize}`} onScroll={onScrollEvent}>
`111`	`111`	`{currentHeuristic && <div>`
`112`	`112`	<div className={`sticky z-40 h-12 ${isHeaderNormal ? 'top-1' : '-top-5'}`}>
`113`	`113`	<div className={`bg-white flex-grow ${isHeaderNormal ? '' : 'shadow'}`}>