clean up the code

.vscode/settings.json

@@ -24,5 +24,8 @@
     "source.organizeImports": "explicit"
   },
   "typescript.preferences.importModuleSpecifier": "non-relative",
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  }
 }

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -265,16 +265,10 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
   }
 
   public onExecuteQueryClick = async (): Promise<void> => {
-    // console.log("i am ",this.props.collection.databaseId);
-    //  console.log("I am query",this.state.sqlQueryEditorContent );
-    //  console.log("i am",this.props.collection.id()); 
       const query1=this.state.sqlQueryEditorContent;
       const db = this.props.collection.databaseId;
       const container = this.props.collection.id();
     useQueryMetadataStore.getState().setMetadata(query1, db, container);
-    console.log("i am ",query1);
-    console.log("I am db",db);
-    console.log("i am cnt",container); 
     this._iterator = undefined;
 
     setTimeout(async () => {

src/Explorer/Tabs/QueryTab/ResultsView.tsx

@@ -39,7 +39,7 @@ import { ResultsViewProps } from "./QueryResultSection";
 enum ResultsTabs {
   Results = "results",
   QueryStats = "queryStats",
-  IndexAdvisor="indexadv",
+  IndexAdvisor = "indexadv",
 }
 
 const ResultsTab: React.FC<ResultsViewProps> = ({ queryResults, isMongoDB, executeQueryDocumentsPage }) => {
@@ -392,8 +392,7 @@ const QueryStatsTab: React.FC<Pick<ResultsViewProps, "queryResults">> = ({ query
         },
         {
           metric: "User defined function execution time",
-          value: `${
-            aggregatedQueryMetrics.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.toString() || 0
+          value: `${aggregatedQueryMetrics.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.toString() || 0
             } ms`,
           toolTip: "Total time spent executing user-defined functions",
         },
@@ -541,7 +540,7 @@ interface IIndexMetric {
   section: "Included" | "Not Included" | "Header";
 }
 const IndexAdvisorTab: React.FC = () => {
-  const {userQuery, databaseId, containerId}=useQueryMetadataStore();
+  const { userQuery, databaseId, containerId } = useQueryMetadataStore();
   const [loading, setLoading] = useState(true);
   const [indexMetrics, setIndexMetrics] = useState<any>(null);
   const [showIncluded, setShowIncluded] = useState(true);
@@ -574,13 +573,13 @@ const IndexAdvisorTab: React.FC = () => {
         setLoading(false);
       }
     }
-    if(userQuery && databaseId && containerId){
+    if (userQuery && databaseId && containerId) {
       fetchIndexMetrics();
     }
   }, [userQuery, databaseId, containerId]);
 
-useEffect(() => {
-  if (!indexMetrics) return ;
+  useEffect(() => {
+    if (!indexMetrics) return;
 
     const included: any[] = [];
     const notIncluded: any[] = [];
@@ -600,7 +599,7 @@ useEffect(() => {
         const isComposite = index.includes(",");
         const indexObj: any = { index, impact };
         if (isComposite) {
-        indexObj.composite = index.split(",").map((part:string) => {
+          indexObj.composite = index.split(",").map((part: string) => {
             const [path, order] = part.trim().split(/\s+/);
             return {
               path: path.trim(),
@@ -632,14 +631,14 @@ useEffect(() => {
     }
     setIncludedIndexes(included);
     setNotIncludedIndexes(notIncluded);
-},[indexMetrics]);
+  }, [indexMetrics]);
 
-useEffect(() => {
+  useEffect(() => {
     const allSelected = notIncluded.length > 0 && notIncluded.every((item) => selectedIndexes.some((s) => s.index === item.index));
     setSelectAll(allSelected);
-}, [selectedIndexes, notIncluded]);
+  }, [selectedIndexes, notIncluded]);
 
-const handleCheckboxChange = (indexObj: any, checked: boolean) => {
+  const handleCheckboxChange = (indexObj: any, checked: boolean) => {
     if (checked) {
       setSelectedIndexes((prev) => [...prev, indexObj]);
     } else {
@@ -647,14 +646,14 @@ const handleCheckboxChange = (indexObj: any, checked: boolean) => {
         prev.filter((item) => item.index !== indexObj.index)
       );
     }
-};
+  };
 
-const handleSelectAll = (checked: boolean) => {
+  const handleSelectAll = (checked: boolean) => {
     setSelectAll(checked);
     setSelectedIndexes(checked ? notIncluded : []);
   };
 
-const handleUpdatePolicy = async () => {
+  const handleUpdatePolicy = async () => {
     if (selectedIndexes.length === 0) {
       console.log("No indexes selected for update");
       return;
@@ -699,8 +698,6 @@ const handleUpdatePolicy = async () => {
           indexingPolicy: updatedPolicy,
         });
 
-    console.log("Indexing policy successfully updated:", updatedPolicy);
-
       const newIncluded = [...included, ...notIncluded.filter(item =>
         selectedIndexes.find(s => s.index === item.index)
       )];
@@ -715,9 +712,9 @@ const handleUpdatePolicy = async () => {
     } catch (err) {
       console.error("Failed to update indexing policy:", err);
     }
-};
+  };
 
-const setIndexMetricsFromParsed = (included: { index: string; impact: string }[], notIncluded: { index: string; impact: string }[]) => {
+  const setIndexMetricsFromParsed = (included: { index: string; impact: string }[], notIncluded: { index: string; impact: string }[]) => {
     const serialize = (sectionTitle: string, items: { index: string; impact: string }[], isUtilized: boolean) =>
       items.length
         ? `${sectionTitle}\n` +
@@ -725,20 +722,20 @@ const setIndexMetricsFromParsed = (included: { index: string; impact: string }[]
           .map((item) => `Index Spec: ${item.index}\nIndex Impact Score: ${item.impact}`)
           .join("\n") + "\n"
         : "";
-const composedMetrics =
+    const composedMetrics =
       serialize("Utilized Single Indexes", included, true) +
       serialize("Potential Single Indexes", notIncluded, false);
 
     setIndexMetrics(composedMetrics.trim());
   };
 
-const renderImpactDots = (impact: string) => {
+  const renderImpactDots = (impact: string) => {
     let count = 0;
     if (impact === "High") count = 3;
     else if (impact === "Medium") count = 2;
     else if (impact === "Low") count = 1;
 
-  return(
+    return (
       <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
         {Array.from({ length: count }).map((_, i) => (
           <CircleFilled
@@ -752,9 +749,9 @@ const renderImpactDots = (impact: string) => {
         ))}
       </div>
     );
-};
+  };
 
-const renderRow = (item: IIndexMetric, index: number) => {
+  const renderRow = (item: IIndexMetric, index: number) => {
     const isHeader = item.section === "Header";
     const isNotIncluded = item.section === "Not Included";
     const isIncluded = item.section === "Included";
@@ -771,7 +768,7 @@ const renderRow = (item: IIndexMetric, index: number) => {
             }}>
             {isNotIncluded ? (
               <Checkbox
-            checked={selectedIndexes.some((selected)=>selected.index===item.index)}
+                checked={selectedIndexes.some((selected) => selected.index === item.index)}
                 onChange={(_, data) => handleCheckboxChange(item, data.checked === true)}
               />
             ) : isHeader && item.index === "Not Included in Current Policy" && notIncluded.length > 0 ? (
@@ -818,7 +815,7 @@ const renderRow = (item: IIndexMetric, index: number) => {
         </TableCell>
       </TableRow>
     );
-};
+  };
   const generateIndexMetricItems = (
 
     included: { index: string; impact: string }[],
@@ -849,10 +846,11 @@ const renderRow = (item: IIndexMetric, index: number) => {
           '--spinner-size': '16px',
           '--spinner-thickness': '2px',
           '--spinner-color': '#0078D4',
-  } as React.CSSProperties}/>
-    </div>;}
+        } as React.CSSProperties} />
+    </div>;
+  }
 
-return (
+  return (
     <div>
       <div style={{ padding: "1rem", fontSize: "1.2rem", display: "flex", alignItems: "center", gap: "0.5rem" }}>
         {updateMessageShown ? (
@@ -876,9 +874,9 @@ return (
         ) : (
           "Here is an analysis on the indexes utilized for executing the query. Based on the analysis, Cosmos DB recommends adding the selected indexes to your indexing policy to optimize the performance of this particular query."
         )}
-</div>
+      </div>
       <div style={{ padding: "1rem", fontSize: "1.3rem", fontWeight: "bold" }}>Indexes analysis</div>
-      <Table style={{ display: "block", alignItems: "center",marginBottom:"7rem" }}>
+      <Table style={{ display: "block", alignItems: "center", marginBottom: "7rem" }}>
         <TableHeader>
           <TableRow >
             <TableCell colSpan={2}>
@@ -891,8 +889,8 @@ return (
                   fontWeight: "bold",
                 }}
               >
-                <div style={{ width: "18px", height: "18px" }}></div> {/* Checkbox column */}
-                <div style={{ width: "24px" }}></div> {/* Chevron column */}
+                <div style={{ width: "18px", height: "18px" }}></div>
+                <div style={{ width: "24px" }}></div>
                 <div>Index</div>
                 <div><span style={{ whiteSpace: "nowrap" }}>Estimated Impact</span></div>
               </div>
@@ -904,7 +902,7 @@ return (
         </TableBody>
       </Table>
       {selectedIndexes.length > 0 && (
-        <div style={{ padding: "1rem", marginTop: "-7rem",flexWrap:"wrap"}}>
+        <div style={{ padding: "1rem", marginTop: "-7rem", flexWrap: "wrap" }}>
           <button
             onClick={handleUpdatePolicy}
             style={{
@@ -928,7 +926,7 @@ export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResult
   const styles = useQueryTabStyles();
   const [activeTab, setActiveTab] = useState<ResultsTabs>(ResultsTabs.Results);
 
-  const onTabSelect = useCallback((event: SelectTabEvent, data: SelectTabData) =>{
+  const onTabSelect = useCallback((event: SelectTabEvent, data: SelectTabData) => {
     setActiveTab(data.value as ResultsTabs);
   }, []);