fix model configuration reloading related stuff

Author: Chenglong-MS

src/app/dfSlice.tsx

@@ -45,7 +45,8 @@ export interface ModelConfig {
 }
 
 // Define model slot types
-export type ModelSlotType = 'generation' | 'hint';
+export const MODEL_SLOT_TYPES = ['generation', 'hint'] as const;
+export type ModelSlotType = typeof MODEL_SLOT_TYPES[number];
 
 export interface ModelSlots {
     generation?: string; // model id assigned to generation tasks
@@ -271,7 +272,7 @@ export const dataFormulatorSlice = createSlice({
             // avoid resetting inputted models
             // state.oaiModels = state.oaiModels.filter((m: any) => m.endpoint != 'default');
 
-            state.modelSlots = {};
+            // state.modelSlots = {};
             state.testedModels = [];
 
             state.tables = [];
@@ -763,8 +764,12 @@ export const dataFormulatorSlice = createSlice({
                 ...state.testedModels.filter(t => !defaultModels.map((m: ModelConfig) => m.id).includes(t.id))
             ]
 
-            if (state.modelSlots.generation == undefined && defaultModels.length > 0) {
-                state.modelSlots.generation = defaultModels[0].id;
+            if (defaultModels.length > 0) {
+                for (const slotType of MODEL_SLOT_TYPES) {
+                    if (state.modelSlots[slotType] == undefined) {
+                        state.modelSlots[slotType] = defaultModels[0].id;
+                    }
+                }
             }
 
             // console.log("load model complete");
@@ -796,7 +801,7 @@ export const dfSelectors = {
         return modelId ? state.models.find(m => m.id === modelId) : undefined;
     },
     getAllSlotTypes: () : ModelSlotType[] => {
-        return ['generation', 'hint'];
+        return [...MODEL_SLOT_TYPES];
     },
     getActiveBaseTableIds: (state: DataFormulatorState) => {
         let focusedTableId = state.focusedTableId;

src/views/DataFormulator.tsx

@@ -8,6 +8,7 @@ import { useDispatch, useSelector } from "react-redux"; /* code change */
 import { 
     DataFormulatorState,
     dfActions,
+    dfSelectors,
 } from '../app/dfSlice'
 
 import _ from 'lodash';
@@ -43,6 +44,7 @@ import exampleImageTable from "../assets/example-image-table.png";
 import { ModelSelectionButton } from './ModelSelectionDialog';
 import { DBTableSelectionDialog } from './DBTableManager';
 import { connectToSSE } from './SSEClient';
+import { getUrls } from '../app/utils';
 
 //type AppProps = ConnectedProps<typeof connector>;
 
@@ -51,14 +53,62 @@ export const DataFormulatorFC = ({ }) => {
     const displayPanelSize = useSelector((state: DataFormulatorState) => state.displayPanelSize);
     const visPaneSize = useSelector((state: DataFormulatorState) => state.visPaneSize);
     const tables = useSelector((state: DataFormulatorState) => state.tables);
-    const selectedModelId = useSelector((state: DataFormulatorState) => state.selectedModelId);
+
+    const models = useSelector((state: DataFormulatorState) => state.models);
+    const modelSlots = useSelector((state: DataFormulatorState) => state.modelSlots);
+    const testedModels = useSelector((state: DataFormulatorState) => state.testedModels);
+    
+    const noBrokenModelSlots= useSelector((state: DataFormulatorState) => {
+        const slotTypes = dfSelectors.getAllSlotTypes();
+        return slotTypes.every(
+            slotType => state.modelSlots[slotType] !== undefined && state.testedModels.find(t => t.id == state.modelSlots[slotType])?.status != 'error');
+    });
 
     const dispatch = useDispatch();
 
     useEffect(() => {
         document.title = toolName;
     }, []);
 
+    useEffect(() => {
+        const findWorkingModel = async () => {
+            let assignedModels = models.filter(m => Object.values(modelSlots).includes(m.id));
+            let unassignedModels = models.filter(m => !Object.values(modelSlots).includes(m.id));
+            
+            // Combine both arrays: assigned models first, then unassigned models
+            let allModelsToTest = [...assignedModels, ...unassignedModels];
+
+            for (let i = 0; i < allModelsToTest.length; i++) {
+                let model = allModelsToTest[i];
+                let isAssignedModel = i < assignedModels.length;
+
+                const message = {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', },
+                    body: JSON.stringify({
+                        model: model,
+                    }),
+                };
+                try {
+                    const response = await fetch(getUrls().TEST_MODEL, {...message });
+                    const data = await response.json();
+                    const status = data["status"] || 'error';
+                    dispatch(dfActions.updateModelStatus({id: model.id, status, message: data["message"] || ""}));
+                    // For unassigned models, break when we find a working one
+                    if (!isAssignedModel && status == 'ok') {
+                        break;
+                    }
+                } catch (error) {
+                    dispatch(dfActions.updateModelStatus({id: model.id, status: 'error', message: (error as Error).message || 'Failed to test model'}));
+                }
+            }
+        };
+
+        if (models.length > 0) {
+            findWorkingModel();
+        }
+    }, []);
+
     let conceptEncodingPanel = (
         <Box sx={{display: "flex", flexDirection: "row", width: '100%', flexGrow: 1, overflow: "hidden"}}>
             <ConceptShelf />
@@ -173,7 +223,7 @@ Totals (7 entries)	5	5	5	15
     return (
         <Box sx={{ display: 'block', width: "100%", height: 'calc(100% - 49px)' }}>
             <DndProvider backend={HTML5Backend}>
-                {selectedModelId == undefined ? modelSelectionDialogBox : (tables.length > 0 ? fixedSplitPane : dataUploadRequestBox)} 
+                {!noBrokenModelSlots ? modelSelectionDialogBox : (tables.length > 0 ? fixedSplitPane : dataUploadRequestBox)} 
             </DndProvider>
         </Box>);
 }

src/views/ModelSelectionDialog.tsx

@@ -104,11 +104,17 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
 
     useEffect(() => {
         const findWorkingModel = async () => {
-            for (let i = 0; i < models.length; i++) {
-                if (testedModels.find(t => t.id == models[i].id)) {
-                    continue;
-                }
-                const model = models[i];
+            let assignedModels = models.filter(m => Object.values(modelSlots).includes(m.id));
+            let unassignedModels = models.filter(m => !Object.values(modelSlots).includes(m.id));
+            
+            // Combine both arrays: assigned models first, then unassigned models
+            let allModelsToTest = [...assignedModels, ...unassignedModels];
+
+
+            for (let i = 0; i < allModelsToTest.length; i++) {
+                let model = allModelsToTest[i];
+                let isAssignedModel = i < assignedModels.length;
+
                 const message = {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json', },
@@ -121,7 +127,9 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
                     const data = await response.json();
                     const status = data["status"] || 'error';
                     updateModelStatus(model, status, data["message"] || "");
-                    if (status === 'ok') {
+                    
+                    // For unassigned models, break when we find a working one
+                    if (!isAssignedModel && status == 'ok') {
                         break;
                     }
                 } catch (error) {
@@ -130,7 +138,7 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
             }
         };
 
-        if (models.length > 0 && testedModels.filter(t => t.status == 'ok').length == 0) {
+        if (models.length > 0) {
             findWorkingModel();
         }
     }, []);