fix(typesContext.tsx): remove unnecessary console.log statement

fix(extraSidebarComponent/index.tsx): import sensitiveSort function from utils and use it for sorting
feat(utils.ts): add sensitiveSort function for sorting strings in a case-sensitive manner

src/frontend/src/contexts/typesContext.tsx

@@ -140,7 +140,6 @@ export function TypesProvider({ children }: { children: ReactNode }) {
         key
       );
       key = newKey;
-      console.log(component.node?.display_name);
       component.node!.display_name =
         removeCountFromString(component.node?.display_name!) +
         ` (${increment})`;

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -15,7 +15,11 @@ import {
   nodeIconsLucide,
   nodeNames,
 } from "../../../../utils/styleUtils";
-import { classNames, removeCountFromString } from "../../../../utils/utils";
+import {
+  classNames,
+  removeCountFromString,
+  sensitiveSort,
+} from "../../../../utils/utils";
 import DisclosureComponent from "../DisclosureComponent";
 import SidebarDraggableComponent from "./sideBarDraggableComponent";
 
@@ -236,7 +240,7 @@ export default function ExtraSidebar(): JSX.Element {
               >
                 <div className="side-bar-components-gap">
                   {Object.keys(dataFilter[SBSectionName])
-                    .sort()
+                    .sort(sensitiveSort)
                     .map((SBItemName: string, index) => (
                       <ShadTooltip
                         content={

src/frontend/src/utils/utils.ts

@@ -553,3 +553,28 @@ export function removeCountFromString(input: string): string {
 
   return result.trim(); // Trim any leading/trailing spaces
 }
+
+export function sensitiveSort(a: string, b: string): number {
+  // Extract the name and number from each string using regular expressions
+  const regex = /(.+) \((\d+)\)/;
+  const matchA = a.match(regex);
+  const matchB = b.match(regex);
+
+  if (matchA && matchB) {
+    // Compare the names alphabetically
+    const nameA = matchA[1];
+    const nameB = matchB[1];
+    if (nameA !== nameB) {
+      return nameA.localeCompare(nameB);
+    }
+
+    // If the names are the same, compare the numbers numerically
+    const numberA = parseInt(matchA[2]);
+    const numberB = parseInt(matchB[2]);
+    return numberA - numberB;
+  } else {
+    // Handle cases where one or both strings do not match the expected pattern
+    // Simple strings are treated as pure alphabetical comparisons
+    return a.localeCompare(b);
+  }
+}