use structuredClone to improve performance

Author: Chenglong-MS

src/app/utils.tsx

@@ -98,7 +98,7 @@ export function runCodeOnInputListsInVM(
                     let target = undefined;
                     try {
                         // copy args to ensure correctness of mapping
-                        target = func(...JSON.parse(JSON.stringify(args)))
+                        target = func(...structuredClone(args))
                     } catch (err) {
                         console.warn(`execution err ${err}`)
                     }
@@ -179,7 +179,7 @@ export function baseTableToExtTable(table: any[], derivedFields: FieldItem[], al
                     let args = inputTuples;
                     if (func.length == baseCols.length * 2 + 1) {
                         // avoid side effect, use the copy of the column when calling the function
-                        args = [...inputTuples, rowIdx, ...JSON.parse(JSON.stringify(baseCols))]
+                        args = [...inputTuples, rowIdx, ...structuredClone(baseCols)]
                     }            
 
                     target = func(...args);
@@ -257,7 +257,7 @@ export const assembleVegaChart = (
     let chartTemplate = getChartTemplate(chartType) as ChartTemplate;
     //console.log(chartTemplate);
 
-    let vgObj = JSON.parse(JSON.stringify(chartTemplate.template));
+    let vgObj = structuredClone(chartTemplate.template);
 
     for (const [channel, encoding] of Object.entries(encodingMap)) {
 
@@ -412,7 +412,7 @@ export const assembleVegaChart = (
     }
 
     // this is the data that will be assembled into the vega chart
-    let values = JSON.parse(JSON.stringify(workingTable));
+    let values = structuredClone(workingTable);
     values = values.map((r: any) => { 
         let keys = Object.keys(r);
         let temporalKeys = keys.filter((k: string) => conceptShelfItems.some(concept => concept.name == k && (concept.type == "date" || concept.semanticType == "Year")));

src/views/ModelSelectionDialog.tsx

@@ -136,18 +136,22 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
                 data.forEach((modelConfig: any) => {
                     const provider = modelConfig.endpoint;
                     const model = modelConfig.model;
+
+                    if (provider && model && !modelsByProvider[provider]) {
+                        modelsByProvider[provider] = [];
+                    }
 
                     if (provider && model && !modelsByProvider[provider].includes(model)) {
                         modelsByProvider[provider].push(model);
                     }
                 });
 
                 setProviderModelOptions(modelsByProvider);
+                
             } catch (error) {
                 console.error("Failed to fetch model options:", error);
-            } finally {
-                setIsLoadingModelOptions(false);
-            }
+            } 
+            setIsLoadingModelOptions(false);
         };
 
         fetchModelOptions();
@@ -501,13 +505,18 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
                 })}
                 {newModelEntry}
                 <TableRow>
-                    <TableCell colSpan={8} align="left" sx={{fontSize: "0.625rem"}}>
-                        Model configuration based on LiteLLM,  <a href="https://docs.litellm.ai/docs/" target="_blank" rel="noopener noreferrer">check out supported endpoint / models here</a>. 
-                        Models with limited code generation capabilities (e.g., llama3.2) may fail frequently to derive new data.
+                    <TableCell colSpan={8} align="left" sx={{ '& .MuiTypography-root': { fontSize: "0.625rem" } }}>
+                        <Typography>
+                            Model configuration based on LiteLLM,  <a href="https://docs.litellm.ai/docs/" target="_blank" rel="noopener noreferrer">check out supported endpoint / models here</a>. 
+                            If using custom providers that are compatible with the OpenAI API, choose 'openai' as the provider.
+                        </Typography>
+                        <Typography>
+                            Models with limited code generation capabilities (e.g., llama3.2) may fail frequently to derive new data.
+                        </Typography>
                     </TableCell>
                 </TableRow>
-            </TableBody>
-        </Table>
+                </TableBody>
+            </Table>
     </TableContainer>
 
     return <>