Release updates (#24)

* Version number to 1.14.0

* fix prepareRecordExport

* Pages with bottom part gray & edit records only records scrollable

* erros aren’t displayed if the request fails

* only dynamic slice has tooltip for long names

* Dropdown values hidden (z-index seems off)

* Tooltip overlaps button ( 3x occurences)

* Loading sign is shown on close

* Heading for Calculation progress always visible

* Space on edit name is not automatically replaced

* Allow removal of last character in heuristic name (wont save but for changes)

* Adds fix for heuristic layout

* Import snapshot with PW → keep modal open

* new line is added on SHIFT + ENTER

* when saving the code, load is not available until reload of page

* run on 10 error

* Dropdown Type is always reset to Attribute on page navigation

* Clear the tmp value in store

* fixes: (Zero Shot) on some refresh, input attribute options are empty

* fixes key for prepare-record-export

---------

Co-authored-by: anmarhindi <anmar.hindi@kern.ai>
Co-authored-by: JWittmeyer <jens.wittmeyer@kern.ai>

src/components/projects/ButtonsContainer.tsx

@@ -12,7 +12,7 @@ import SampleProjectsDropdown from "./SampleProjectsDropdown";
 import { CurrentPage, CurrentPageSubKey } from "@/src/types/shared/general";
 import { useWebsocket } from "@/src/services/base/web-sockets/useWebsocket";
 
-const BASE_OPTIONS = { reloadOnFinish: false, deleteProjectOnFail: true, closeModalOnClick: true, isModal: true, navigateToProject: true, showBadPasswordMsg: null };
+const BASE_OPTIONS = { reloadOnFinish: false, deleteProjectOnFail: true, closeModalOnClick: false, isModal: true, navigateToProject: true, showBadPasswordMsg: null };
 
 export default function ButtonsContainer() {
     const router = useRouter();

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

@@ -14,7 +14,7 @@ import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux"
 import ExecutionContainer from "./ExecutionContainer";
-import { getPythonFunctionRegExMatch } from "@/submodules/javascript-functions/python-functions-parser";
+import { getPythonFunctionRegExMatch, toPythonFunctionName } from "@/submodules/javascript-functions/python-functions-parser";
 import DangerZone from "@/src/components/shared/danger-zone/DangerZone";
 import { DangerZoneEnum } from "@/src/types/shared/danger-zone";
 import ContainerLogs from "@/src/components/shared/logs/ContainerLogs";
@@ -58,6 +58,7 @@ export default function AttributeCalculation() {
     const [editorValue, setEditorValue] = useState('');
     const [attributeName, setAttributeName] = useState('');
     const [checkUnsavedChanges, setCheckUnsavedChanges] = useState(false);
+    const [enableRunButton, setEnableButton] = useState(false);
 
     useEffect(() => {
         if (!currentAttribute) return;
@@ -285,9 +286,9 @@ export default function AttributeCalculation() {
 
     useWebsocket(CurrentPage.ATTRIBUTE_CALCULATION, handleWebsocketNotification, projectId);
 
-    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)}>
+    return (projectId && <div className={`bg-white p-4 overflow-y-auto min-h-full h-[calc(100vh-4rem)]`} onScroll={(e: any) => onScrollEvent(e)}>
         {currentAttribute && <div>
-            <div className={`sticky z-40 h-12 ${isHeaderNormal ? 'top-1' : '-top-5'}`}>
+            <div className={`sticky z-50 h-12 ${isHeaderNormal ? 'top-1' : '-top-5'}`}>
                 <div className={`bg-white flex-grow ${isHeaderNormal ? '' : 'shadow'}`}>
                     <div className={`flex-row justify-start items-center inline-block ${isHeaderNormal ? 'p-0' : 'flex py-2'}`} style={{ transition: 'all .25s ease-in-out' }}>
                         <a href={`/refinery/projects/${projectId}/settings`} onClick={(e) => {
@@ -305,15 +306,15 @@ export default function AttributeCalculation() {
             <div className="w-full">
                 <div className={`grid gap-4 ${isHeaderNormal ? 'grid-cols-2' : 'grid-cols-1'}`}>
                     {isHeaderNormal && <div className="flex items-center mt-2">
-                        <Tooltip color="invert" placement="right" content={currentAttribute.state == AttributeState.USABLE || currentAttribute.state == AttributeState.RUNNING ? TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.CANNOT_EDIT_NAME : TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.EDIT_NAME}>
+                        <Tooltip color="invert" placement="bottom" content={currentAttribute.state == AttributeState.USABLE || currentAttribute.state == AttributeState.RUNNING ? TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.CANNOT_EDIT_NAME : TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.EDIT_NAME}>
                             <button onClick={() => openName(true)} disabled={currentAttribute.state == AttributeState.USABLE || currentAttribute.state == AttributeState.RUNNING}
                                 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 ${currentAttribute.state == AttributeState.USABLE || currentAttribute.state == AttributeState.RUNNING}`}>
                                 Edit name
                             </button>
                         </Tooltip>
                         <div className="inline-block" onDoubleClick={() => openName(true)}>
                             {(isNameOpen && currentAttribute.state != AttributeState.USABLE && currentAttribute.state != AttributeState.RUNNING)
-                                ? (<input type="text" value={attributeName} onInput={(e: any) => setAttributeName(e.target.value)}
+                                ? (<input type="text" value={attributeName} onInput={(e: any) => setAttributeName(toPythonFunctionName(e.target.value))}
                                     onBlur={() => openName(false)} onKeyDown={(e) => { if (e.key == 'Enter') openName(false) }}
                                     className="h-8 text-sm 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">{currentAttribute.name}</div>)}
@@ -324,7 +325,7 @@ export default function AttributeCalculation() {
                 <div className="grid grid-cols-2 gap-2 items-center mt-8" style={{ gridTemplateColumns: 'max-content auto' }}>
                     <div className="text-sm leading-5 font-medium text-gray-700">Visibility</div>
                     <Dropdown2 buttonName={currentAttribute.visibilityName} options={ATTRIBUTES_VISIBILITY_STATES} dropdownWidth="w-52" tooltipArrayPlacement="right" tooltipsArray={tooltipsArray}
-                        selectedOption={(option: any) => updateVisibility(option)} disabled={currentAttribute.state == AttributeState.USABLE} />
+                        selectedOption={(option: any) => updateVisibility(option)} disabled={currentAttribute.state == AttributeState.USABLE} dropdownClasses="z-40" />
 
                     <div className="text-sm leading-5 font-medium text-gray-700">Data type</div>
                     <div className="flex flex-row items-center">
@@ -372,7 +373,7 @@ export default function AttributeCalculation() {
                                 if (currentAttribute.state == AttributeState.USABLE) return;
                                 updateNameAndCodeBricksIntegrator(code);
                             }} />
-                        <Tooltip content={TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.AVAILABLE_LIBRARIES} placement="left" color="invert">
+                        <Tooltip content={TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.AVAILABLE_LIBRARIES} placement="bottom" color="invert">
                             <a href="https://github.com/code-kern-ai/refinery-ac-exec-env/blob/dev/requirements.txt"
                                 target="_blank"
                                 className="ml-2 bg-white text-gray-700 text-xs font-semibold  px-4 py-2 rounded-md border border-gray-300 hover:bg-gray-50 focus:outline-none">
@@ -403,6 +404,7 @@ export default function AttributeCalculation() {
                         options={editorOptions}
                         onChange={(value) => {
                             setEditorValue(value);
+                            setEnableButton(true);
                         }}
                     />
                 </div>
@@ -415,7 +417,8 @@ export default function AttributeCalculation() {
                 </div>
 
 
-                <ExecutionContainer currentAttribute={currentAttribute} tokenizationProgress={tokenizationProgress} checkUnsavedChanges={checkUnsavedChanges}
+                <ExecutionContainer currentAttribute={currentAttribute} tokenizationProgress={tokenizationProgress} enableRunButton={enableRunButton} checkUnsavedChanges={checkUnsavedChanges}
+                    setEnabledButton={(value: boolean) => setEnableButton(value)}
                     refetchCurrentAttribute={() => {
                         getAttributeByAttributeId(projectId, currentAttribute?.id, (res) => {
                             const attribute = res.data['attributeByAttributeId'];
@@ -427,7 +430,10 @@ export default function AttributeCalculation() {
 
                 <div className="mt-8">
                     <div className="text-sm leading-5 font-medium text-gray-700 inline-block">Calculation progress</div>
-                    {currentAttribute.progress == 0 && currentAttribute.state == AttributeState.INITIAL && <div className="bg-white">
+                    {(currentAttribute.progress == 0 || isNaN(currentAttribute.progress)) && currentAttribute.state == AttributeState.INITIAL && <div className="bg-white">
+                        <div className="py-6 text-sm leading-5 font-normal text-gray-500">This attribute was not yet run.</div>
+                    </div>}
+                    {currentAttribute.progress == 0.9 && currentAttribute.state == AttributeState.INITIAL && <div className="bg-white">
                         <div className="py-6 text-sm leading-5 font-normal text-gray-500">This attribute was not yet run.</div>
                     </div>}
                     {currentAttribute.progress < 1 && currentAttribute.state == AttributeState.RUNNING &&

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

@@ -6,7 +6,7 @@ import { AttributeState } from "@/src/types/components/projects/projectId/settin
 import { ModalEnum } from "@/src/types/shared/modal";
 import { postProcessRecordByRecordId } from "@/src/util/components/projects/projectId/settings/attribute-calculation-helper";
 import { Tooltip } from "@nextui-org/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import ConfirmExecutionModal from "./ConfirmExecutionModal";
@@ -26,12 +26,20 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
     const [checkIfAtLeastRunning, setCheckIfAtLeastRunning] = useState(false);
     const [checkIfAtLeastQueued, setCheckIfAtLeastQueued] = useState(false);
 
+    useEffect(() => {
+        if (props.enableRunButton) {
+            setRunOn10HasError(false);
+            setRequestedSomething(false);
+        }
+    }, [props.enableRunButton]);
+
     function calculateUserAttributeSampleRecords() {
         if (requestedSomething) return;
         setRequestedSomething(true);
         getSampleRecords(projectId, props.currentAttribute.id, (res) => {
             const sampleRecordsFinal = { ...res.data['calculateUserAttributeSampleRecords'] };
             setRequestedSomething(false);
+            props.setEnabledButton(false);
             setRunOn10HasError(sampleRecordsFinal.calculatedAttributes.length > 0 ? false : true);
             if (props.currentAttribute.dataType == 'EMBEDDING_LIST') {
                 sampleRecordsFinal.calculatedAttributesList = sampleRecordsFinal.calculatedAttributes.map((record: string) => JSON.parse(record));
@@ -64,15 +72,15 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
                     <LoadingIcon color="indigo" />
                 </div>}
 
-                <Tooltip content={TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.EXECUTE_10_RECORDS} color="invert" placement="left" className="ml-auto">
+                <Tooltip content={TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.EXECUTE_10_RECORDS} color="invert" placement="bottom" className="ml-auto">
                     <button onClick={calculateUserAttributeSampleRecords}
                         disabled={props.currentAttribute.state == AttributeState.USABLE || props.currentAttribute.state == AttributeState.RUNNING || requestedSomething || props.tokenizationProgress < 1 || props.checkUnsavedChanges}
                         className={`bg-white text-gray-700 text-xs font-semibold px-4 py-2 rounded-md border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed`}>
                         Run on 10
                     </button>
                 </Tooltip>
 
-                <Tooltip color="invert" placement="left" content={props.currentAttribute.state == AttributeState.USABLE ? 'Attribute is already in use' : requestedSomething ? 'Test is running' : checkIfAtLeastRunning ? 'Another attribute is running' : checkIfAtLeastQueued ? 'Another attribute is queued for execution' : props.tokenizationProgress < 1 ? 'Tokenization is in progress' : runOn10HasError ? 'Run on 10 records has an error' : 'Execute the attribute on all records'}>
+                <Tooltip color="invert" placement="bottom" content={props.currentAttribute.state == AttributeState.USABLE ? 'Attribute is already in use' : requestedSomething ? 'Test is running' : checkIfAtLeastRunning ? 'Another attribute is running' : checkIfAtLeastQueued ? 'Another attribute is queued for execution' : props.tokenizationProgress < 1 ? 'Tokenization is in progress' : runOn10HasError ? 'Run on 10 records has an error' : 'Execute the attribute on all records'}>
                     <button onClick={() => dispatch(setModalStates(ModalEnum.EXECUTE_ATTRIBUTE_CALCULATION, { open: true, requestedSomething: requestedSomething }))}
                         disabled={props.currentAttribute.state == AttributeState.USABLE || props.currentAttribute.state == AttributeState.RUNNING || requestedSomething || checkIfAtLeastRunning || checkIfAtLeastQueued || props.tokenizationProgress < 1 || runOn10HasError || props.checkUnsavedChanges}
                         className={`bg-indigo-700 text-white text-xs leading-4 font-semibold px-4 py-2 rounded-md cursor-pointer ml-3 hover:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed`}>

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

@@ -5,35 +5,34 @@ 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 LoadingIcon from "@/src/components/shared/loading/LoadingIcon";
 import { ViewRecordDetailsModalProps } from "@/src/types/components/projects/projectId/settings/attribute-calculation";
 import { selectVisibleAttributesHeuristics } from "@/src/reduxStore/states/pages/settings";
 
-
 export default function ViewRecordDetailsModal(props: ViewRecordDetailsModalProps) {
     const modalViewRecordDetails = useSelector(selectModal(ModalEnum.VIEW_RECORD_DETAILS));
     const attributes = useSelector(selectVisibleAttributesHeuristics);
 
-    return (<Modal modalName={ModalEnum.VIEW_RECORD_DETAILS}>
-        <h1 className="text-lg text-gray-900 mb-2 text-center">View details</h1>
-        {modalViewRecordDetails.record ? (
-            <div className={`overflow-y-auto max-height-modal text-sm text-gray-500 my-2 ${style.scrollableSize}`}>
-                <RecordDisplay
-                    attributes={attributes}
-                    record={modalViewRecordDetails.record} />
-                <div className="text-sm leading-5 text-left text-gray-900 font-bold">Calculated value</div>
-                <div className="text-sm leading-5 text-left text-gray-500 font-normal">
-                    {props.currentAttribute.dataType != DataTypeEnum.EMBEDDING_LIST ? <span>
-                        {props.sampleRecords.calculatedAttributes[modalViewRecordDetails.recordIdx]}
-                    </span> : <div className="flex flex-col gap-y-2 divide-y">
-                        {props.sampleRecords.calculatedAttributesListDisplay[modalViewRecordDetails.recordIdx].map((item: any) => <span key={item.id} className="mt-1">
-                            {props.sampleRecords.calculatedAttributesList[modalViewRecordDetails.recordIdx]}
-                        </span>)}
-                    </div>}
-                </div>
-            </div>
-        ) : (<LoadingIcon />)}
-    </Modal>
+    return (<>
+        {modalViewRecordDetails.open && modalViewRecordDetails.record && props.sampleRecords && <>
+            <Modal modalName={ModalEnum.VIEW_RECORD_DETAILS}>
+                <h1 className="text-lg text-gray-900 mb-2 text-center">View details</h1>
 
-    )
+                <div className={`overflow-y-auto max-height-modal text-sm text-gray-500 my-2 ${style.scrollableSize}`}>
+                    <RecordDisplay
+                        attributes={attributes}
+                        record={modalViewRecordDetails.record} />
+                    <div className="text-sm leading-5 text-left text-gray-900 font-bold">Calculated value</div>
+                    <div className="text-sm leading-5 text-left text-gray-500 font-normal">
+                        {props.currentAttribute.dataType != DataTypeEnum.EMBEDDING_LIST ? <span>
+                            {props.sampleRecords.calculatedAttributes[modalViewRecordDetails.recordIdx]}
+                        </span> : <div className="flex flex-col gap-y-2 divide-y">
+                            {props.sampleRecords.calculatedAttributesListDisplay[modalViewRecordDetails.recordIdx].map((item: any) => <span key={item.id} className="mt-1">
+                                {props.sampleRecords.calculatedAttributesList[modalViewRecordDetails.recordIdx]}
+                            </span>)}
+                        </div>}
+                    </div>
+                </div>
+            </Modal>
+        </>}
+    </>)
 }

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

@@ -94,7 +94,7 @@ 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 ? <div className="w-24 break-words">{slice.name}</div> : null} color="invert" placement={index % 2 == 0 ? 'right' : 'left'} key={slice.id}>
+                        {filteredSlices.map((slice: DataSlice, index: number) => (<Tooltip content={<div className="w-24 break-words">{slice.displayName}</div>} 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(); }}>

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

@@ -73,7 +73,7 @@ export default function EditRecords() {
 
     useWebsocket(CurrentPage.EDIT_RECORDS, handleWebsocketNotification, projectId);
 
-    return (<>{projectId && <div className="h-full bg-white flex flex-col">
+    return (<>{projectId && <div className="bg-white flex flex-col min-h-full h-[calc(100vh-4rem)]">
         <NavBarTopEditRecords erdData={erdData} setErdData={(erdData) => setErdData(erdData)} />
         <div className={`grid items-start p-2 gap-2 flex-grow overflow-y-auto auto-rows-max ${erdData.columnClass}`} >
             {erdData.data && <>