PR comments

JWittmeyer · JWittmeyer · commit de7f57541aae · 2025-02-04T16:06:36.000+01:00
diff --git a/package.json b/package.json
@@ -29,7 +29,6 @@
     "eslint-config-next": "15.0.3",
     "focus-visible": "^5.2.0",
     "lodash.debounce": "^4.0.8",
-    "mustache": "^4.2.0",
     "next": "14.2.10",
     "postcss-focus-visible": "^6.0.4",
     "react": "18.2.0",
diff --git a/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx b/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
@@ -4,7 +4,7 @@ import { selectAttributes, selectVisibleAttributeAC, setAllAttributes, setLabeli
 import { selectProjectId } from "@/src/reduxStore/states/project"
 import { Attribute, AttributeState, LLMConfig } from "@/src/types/components/projects/projectId/settings/data-schema";
 import { DataTypeEnum } from "@/src/types/shared/general";
-import { postProcessCurrentAttribute } from "@/src/util/components/projects/projectId/settings/attribute-calculation-helper";
+import { LLM_PROVIDER_OPTIONS, postProcessCurrentAttribute } from "@/src/util/components/projects/projectId/settings/attribute-calculation-helper";
 import { ATTRIBUTES_VISIBILITY_STATES, DATA_TYPES, getTooltipVisibilityState } from "@/src/util/components/projects/projectId/settings/data-schema-helper";
 import { copyToClipboard } from "@/submodules/javascript-functions/general";
 import { Editor } from "@monaco-editor/react";
@@ -38,17 +38,10 @@ import LLMResponseConfig from "./LLMResponseConfig";
 import useDebounce from "@/submodules/react-components/hooks/useHooks/useDebounce";
 import useRefFor from "@/submodules/react-components/hooks/useRefFor";
 import { simpleDictCompare } from "@/submodules/javascript-functions/validations";
-import { LLM_CODE_TEMPLATE_EXAMPLES } from "./LLM/llmTemplates";
-import { capitalizeFirst } from "@/submodules/javascript-functions/case-types-parser";
+import { LLM_CODE_TEMPLATE_EXAMPLES, LLM_CODE_TEMPLATE_OPTIONS } from "./LLM/llmTemplates";
 
 const EDITOR_OPTIONS = { theme: 'vs-light', language: 'python', readOnly: false };
 
-export const LLM_PROVIDER_OPTIONS = [
-    'Open AI',
-    'Azure'
-];
-
-const LLM_CODE_TEMPLATE_OPTIONS = Object.keys(LLM_CODE_TEMPLATE_EXAMPLES).map((key) => ({ name: capitalizeFirst(key), value: key }));
 
 
 export default function AttributeCalculation() {
@@ -109,7 +102,7 @@ export default function AttributeCalculation() {
             setCurrentAttribute(currentAttribute);
             setEditorValue(currentAttribute?.sourceCodeToDisplay);
         });
-    }, [projectId, currentAttribute])
+    }, [projectId, currentAttribute, router.query.attributeId])
 
     useEffect(() => {
         if (!attributes) return;
diff --git a/src/components/projects/projectId/attributes/attributeId/ExecutionContainer.tsx b/src/components/projects/projectId/attributes/attributeId/ExecutionContainer.tsx
@@ -77,15 +77,15 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
                 <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 whitespace-nowrap border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed`}>
+                        className="bg-white text-gray-700 text-xs font-semibold px-4 py-2 rounded-md border whitespace-nowrap border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed">
                         Run on 10
                     </button>
                 </Tooltip>
 
                 <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`}>
+                        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">
                         Run
                     </button>
                 </Tooltip>
diff --git a/src/components/projects/projectId/attributes/attributeId/LLM/InputWithSlider.tsx b/src/components/projects/projectId/attributes/attributeId/LLM/InputWithSlider.tsx
diff --git a/src/components/projects/projectId/attributes/attributeId/LLM/LLMConfig.tsx b/src/components/projects/projectId/attributes/attributeId/LLM/LLMConfig.tsx
@@ -1,16 +1,7 @@
 
 import OpenAI from "./models/OpenAI"
 import Azure from "./models/Azure"
-
-type LLMConfigProps = {
-    llmIdentifier: string,
-    llmConfig: any,
-    setLlmConfig: (llmConfig: any) => void,
-    onlyEssential?: boolean,
-    projectId?: string,
-    isVision?: boolean,
-    disabled?: boolean,
-}
+import { LLMConfigProps } from "./types";
 
 export function isLLMConfigValid(llmIdentifier: string, llmConfig: any): boolean {
     switch (llmIdentifier) {
diff --git a/src/components/projects/projectId/attributes/attributeId/LLM/LLMPlaygroundModal.tsx b/src/components/projects/projectId/attributes/attributeId/LLM/LLMPlaygroundModal.tsx
@@ -11,23 +11,18 @@ import useRefFor from "@/submodules/react-components/hooks/useRefFor";
 import { updateAttribute } from "@/src/services/base/project-setting";
 import { selectProjectId } from "@/src/reduxStore/states/project";
 import KernDropdown from "@/submodules/react-components/components/KernDropdown";
-import { LLM_PROVIDER_OPTIONS } from "../AttributeCalculations";
 import { searchRecordsExtended } from "@/src/services/base/data-browser";
 import { generateRandomSeed } from "@/src/util/components/projects/projectId/data-browser/search-groups-helper";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 import { DataTypeEnum } from "@/src/types/shared/general";
-import { capitalizeFirst } from "@/submodules/javascript-functions/case-types-parser";
 import { runAttributeLlmPlayground } from "@/src/services/base/attribute";
 import { jsonCopy } from "@/submodules/javascript-functions/general";
-import { TEMPLATE_EXAMPLES } from "./llmTemplates";
+import { TEMPLATE_EXAMPLES, TEMPLATE_OPTIONS } from "./llmTemplates";
+import { LLM_PROVIDER_OPTIONS } from "@/src/util/components/projects/projectId/settings/attribute-calculation-helper";
 
 const ACCEPT_BUTTON = { buttonCaption: "Use current values for attribute", useButton: true };
 const DISPLAY_STATES = [AttributeState.AUTOMATICALLY_CREATED, AttributeState.UPLOADED, AttributeState.USABLE]
 
-
-const TEMPLATE_OPTIONS = Object.keys(TEMPLATE_EXAMPLES).map((key) => ({ name: capitalizeFirst(key), value: key }));
-
-
 export default function LLMPlaygroundModal() {
     const projectId = useSelector(selectProjectId);
     const attributeDict = useSelector(selectAttributesDict);
@@ -44,7 +39,7 @@ export default function LLMPlaygroundModal() {
     const recordDataRef = useRefFor(recordData);
     const [llmAnswer, setLlmAnswer] = useState<any>(null);
 
-    const [inputRunningId, setInputRunningId] = useState<string>('');
+    const [inputRunningId, setInputRunningId] = useState('');
     const inputRunningIdRef = useRefFor(inputRunningId);
 
     const searchAndSetWithFilter = useCallback((filter) => {
diff --git a/src/components/projects/projectId/attributes/attributeId/LLM/llmTemplates.ts b/src/components/projects/projectId/attributes/attributeId/LLM/llmTemplates.ts
@@ -1,3 +1,4 @@
+import { capitalizeFirst } from "@/submodules/javascript-functions/case-types-parser";
 
 export const TEMPLATE_EXAMPLES = {
   REASONED_CLICKBAIT: {
@@ -168,4 +169,8 @@ async def ac(record):
         return "Error: " + str(e)
 `
 
-}
+}
+
+
+export const LLM_CODE_TEMPLATE_OPTIONS = Object.keys(LLM_CODE_TEMPLATE_EXAMPLES).map((key) => ({ name: capitalizeFirst(key), value: key }));
+export const TEMPLATE_OPTIONS = Object.keys(TEMPLATE_EXAMPLES).map((key) => ({ name: capitalizeFirst(key), value: key }));
diff --git a/src/components/projects/projectId/attributes/attributeId/LLM/models/Azure.tsx b/src/components/projects/projectId/attributes/attributeId/LLM/models/Azure.tsx
@@ -1,16 +1,10 @@
 import { useEffect } from "react";
 import { LocalStorageDropdown } from "@/submodules/react-components/components/LocalStorageDropdown";
-import { InputWithSlider } from "../InputWithSlider";
+import { InputWithSlider } from "@/submodules/react-components/components/InputWithSlider";
+import { LLmPropsAzure } from "../types";
 
-type LLmProps = {
-    llmConfig: any;
-    setLlmConfig: (llmConfig: any) => void;
-    onlyEssential?: boolean;
-    projectId?: string;
-    disabled?: boolean;
-}
 
-export default function Azure(props: LLmProps) {
+export default function Azure(props: LLmPropsAzure) {
 
 
     useEffect(() => {
diff --git a/src/components/projects/projectId/attributes/attributeId/LLM/models/OpenAI.tsx b/src/components/projects/projectId/attributes/attributeId/LLM/models/OpenAI.tsx
@@ -1,16 +1,9 @@
 import { useEffect } from "react";
 import KernDropdown from "@/submodules/react-components/components/KernDropdown";
-import { InputWithSlider } from "../InputWithSlider";
+import { InputWithSlider } from "@/submodules/react-components/components/InputWithSlider";
+import { LLmPropsOpenAI } from "../types";
 
 
-interface LLmProps {
-    llmConfig: any;
-    setLlmConfig: (llmConfig: any) => void;
-    onlyEssential?: boolean;
-    projectId?: string;
-    isVision?: boolean;
-    disabled?: boolean;
-}
 
 // https://platform.openai.com/docs/models
 const MODEL_OPTIONS = ['gpt-4o-mini', 'gpt-4o', 'gpt-4', 'gpt-4-turbo-preview', 'gpt-4-1106-preview', 'gpt-4-0125-preview', 'gpt-4-turbo', 'gpt-3.5-turbo']
@@ -26,7 +19,7 @@ const MAX_LENGTH = {
     'gpt-4o-mini': 128000,
 }
 
-export default function OpenAI(props: LLmProps) {
+export default function OpenAI(props: LLmPropsOpenAI) {
 
     useEffect(() => {
         if (props.llmConfig.model) {
diff --git a/src/components/projects/projectId/attributes/attributeId/LLM/types.ts b/src/components/projects/projectId/attributes/attributeId/LLM/types.ts
@@ -0,0 +1,42 @@
+import { LLMConfig } from "@/src/types/components/projects/projectId/settings/data-schema";
+import { Dispatch, SetStateAction } from "react";
+
+export type LLMResponseConfigProps = {
+    attributeId: string;
+    fullLlmConfig: LLMConfig;
+    setFullLlmConfig: Dispatch<SetStateAction<LLMConfig>>;
+    disabled?: boolean;
+    noPlayground?: boolean;
+    keepConfigOpen?: boolean;
+    apiKey?: string; //only for playground
+}
+
+
+export type LLMConfigProps = {
+    llmIdentifier: string,
+    llmConfig: any,
+    setLlmConfig: (llmConfig: any) => void,
+    onlyEssential?: boolean,
+    projectId?: string,
+    isVision?: boolean,
+    disabled?: boolean,
+}
+
+
+export type LLmPropsOpenAI = {
+    llmConfig: any;
+    setLlmConfig: (llmConfig: any) => void;
+    onlyEssential?: boolean;
+    projectId?: string;
+    isVision?: boolean;
+    disabled?: boolean;
+}
+
+
+export type LLmPropsAzure = {
+    llmConfig: any;
+    setLlmConfig: (llmConfig: any) => void;
+    onlyEssential?: boolean;
+    projectId?: string;
+    disabled?: boolean;
+}
diff --git a/src/components/projects/projectId/attributes/attributeId/LLMResponseConfig.tsx b/src/components/projects/projectId/attributes/attributeId/LLMResponseConfig.tsx
@@ -1,19 +1,10 @@
-import { Dispatch, SetStateAction, useState } from "react";
+import { useState } from "react";
 import { LLMConfig } from "./LLM/LLMConfig";
 import { IconAdjustmentsAlt, IconAdjustmentsOff, IconSettings, IconTerminal, IconUser } from "@tabler/icons-react";
-import { LLMConfig as LLMConfigType } from "@/src/types/components/projects/projectId/settings/data-schema";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 import LLMResponsePlayground from "./LLMResponsePlayground";
+import { LLMResponseConfigProps } from "./LLM/types";
 
-type LLMResponseConfigProps = {
-    attributeId: string;
-    fullLlmConfig: LLMConfigType;
-    setFullLlmConfig: Dispatch<SetStateAction<LLMConfigType>>;
-    disabled?: boolean;
-    noPlayground?: boolean;
-    keepConfigOpen?: boolean;
-    apiKey?: string; //only for playground
-}
 
 export default function LLMResponseConfig(props: LLMResponseConfigProps) {
     const [configOpen, setConfigOpen] = useState(true);
diff --git a/src/components/projects/projectId/settings/labeling-tasks/ChangeColorModal.tsx b/src/components/projects/projectId/settings/labeling-tasks/ChangeColorModal.tsx
@@ -21,7 +21,7 @@ export default function ChangeColorModal() {
     const modalChangeColor = useSelector(selectModal(ModalEnum.CHANGE_COLOR));
     const modalRenameLabel = useSelector(selectModal(ModalEnum.RENAME_LABEL));
 
-    const [hotKeyError, setHotKeyError] = useState<string>('');
+    const [hotKeyError, setHotKeyError] = useState('');
     const [usedHotKeys, setUsedHotKeys] = useState<string[]>([]);
 
     function handleKeyboardEvent(event: KeyboardEvent) {
diff --git a/src/util/classes/attribute-calculation.ts b/src/util/classes/attribute-calculation.ts
@@ -1,3 +1,5 @@
+import { DataTypeEnum } from "@/src/types/shared/general"
+
 export enum AttributeCalculationExamples {
     AC_EMPTY_TEMPLATE
 }
@@ -7,7 +9,7 @@ export class AttributeCodeLookup {
         switch (l) {
             case AttributeCalculationExamples.AC_EMPTY_TEMPLATE: {
                 switch (dataType) {
-                    case 'CATEGORY': return {
+                    case DataTypeEnum.CATEGORY: return {
                         code: `def ac(record):
     # e.g. categorize the records conditional on the text length of a string attribute
     text_length = len(record["str_attribute"].text)
@@ -18,37 +20,37 @@ export class AttributeCodeLookup {
     else:
         return "long"
                     `}
-                    case 'TEXT': return {
+                    case DataTypeEnum.TEXT: return {
                         code: `def ac(record):
     # e.g. transform the string attribute to lower case
     return record["str_attribute"].text.lower()
                     `}
-                    case 'BOOLEAN': return {
+                    case DataTypeEnum.BOOLEAN: return {
                         code: `def ac(record):
     # e.g. does the string attribute contain a digit
     return any([token.is_digit for token in record["str_attribute"]])
                     `}
-                    case 'INTEGER': return {
+                    case DataTypeEnum.INTEGER: return {
                         code: `def ac(record):
     # e.g. length of the longest word in string attribute
     word_length = [len(word) for word in record["str_attribute"]]
     return max(word_length)
                     `}
-                    case 'FLOAT': return {
+                    case DataTypeEnum.FLOAT: return {
                         code: `def ac(record):
     # e.g. mean number of chars per word
     words = record["str_attribute"].text.split()
     num_words = len(words)
     sum_word_lengths = sum([len(word) for word in words])
     return sum_word_lengths / num_words
                     `}
-                    case 'EMBEDDING_LIST': return {
+                    case DataTypeEnum.EMBEDDING_LIST: return {
                         code: `def ac(record):
     # e.g. use spacy sentences to create a list
     return [r.text for r in record["str_attribute"].sents]
                     `
                     }
-                    case 'LLM_RESPONSE': return {
+                    case DataTypeEnum.LLM_RESPONSE: return {
                         code: `                  
 async def ac(record):
     # no post processing of answer
diff --git a/src/util/components/projects/projectId/settings/attribute-calculation-helper.ts b/src/util/components/projects/projectId/settings/attribute-calculation-helper.ts
diff --git a/submodules/react-components b/submodules/react-components
