using new uid

src/frontend/package-lock.json

@@ -49,6 +49,7 @@
                 "remark-gfm": "^3.0.1",
                 "remark-math": "^5.1.1",
                 "shadcn-ui": "^0.1.3",
+                "short-unique-id": "^4.4.4",
                 "switch": "^0.0.0",
                 "table": "^6.8.1",
                 "tailwind-merge": "^1.13.0",
@@ -8407,6 +8408,15 @@
                 "node": ">=8"
             }
         },
+        "node_modules/short-unique-id": {
+            "version": "4.4.4",
+            "resolved": "https://registry.npmjs.org/short-unique-id/-/short-unique-id-4.4.4.tgz",
+            "integrity": "sha512-oLF1NCmtbiTWl2SqdXZQbo5KM1b7axdp0RgQLq8qCBBLoq+o3A5wmLrNM6bZIh54/a8BJ3l69kTXuxwZ+XCYuw==",
+            "bin": {
+                "short-unique-id": "bin/short-unique-id",
+                "suid": "bin/short-unique-id"
+            }
+        },
         "node_modules/side-channel": {
             "version": "1.0.4",
             "dev": true,

src/frontend/package.json

@@ -44,6 +44,7 @@
         "remark-gfm": "^3.0.1",
         "remark-math": "^5.1.1",
         "shadcn-ui": "^0.1.3",
+        "short-unique-id": "^4.4.4",
         "switch": "^0.0.0",
         "table": "^6.8.1",
         "tailwind-merge": "^1.13.0",

src/frontend/src/contexts/tabsContext.tsx

@@ -17,10 +17,12 @@ import {
 import { alertContext } from "./alertContext";
 import { typesContext } from "./typesContext";
 import { APITemplateType, TemplateVariableType } from "../types/api";
-import { v4 as uuidv4 } from "uuid";
+import ShortUniqueId from "short-unique-id";
 import { addEdge } from "reactflow";
 import _ from "lodash";
 
+const uid = new ShortUniqueId({ length: 4 });
+
 const TabsContextInitialValue: TabsContextType = {
   save: () => {},
   tabIndex: 0,
@@ -29,7 +31,7 @@ const TabsContextInitialValue: TabsContextType = {
   removeFlow: (id: string) => {},
   addFlow: (flowData?: any) => {},
   updateFlow: (newFlow: FlowType) => {},
-  incrementNodeId: () => uuidv4(),
+  incrementNodeId: () => uid(),
   downloadFlow: (flow: FlowType) => {},
   uploadFlow: () => {},
   hardReset: () => {},
@@ -53,13 +55,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   const { setErrorData, setNoticeData } = useContext(alertContext);
   const [tabIndex, setTabIndex] = useState(0);
   const [flows, setFlows] = useState<Array<FlowType>>([]);
-  const [id, setId] = useState(uuidv4());
+  const [id, setId] = useState(uid());
   const { templates, reactFlowInstance } = useContext(typesContext);
   const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
 
-  const newNodeId = useRef(uuidv4());
+  const newNodeId = useRef(uid());
   function incrementNodeId() {
-    newNodeId.current = uuidv4();
+    newNodeId.current = uid();
     return newNodeId.current;
   }
   function save() {
@@ -144,10 +146,10 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   }, [flows, id, tabIndex, newNodeId]);
 
   function hardReset() {
-    newNodeId.current = uuidv4();
+    newNodeId.current = uid();
     setTabIndex(0);
     setFlows([]);
-    setId(uuidv4());
+    setId(uid());
   }
 
   /**
@@ -362,12 +364,12 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     let newFlow: FlowType = {
       description,
       name: flow?.name ?? "New Flow",
-      id: uuidv4(),
+      id: uid(),
       data,
     };
 
     // Increment the ID counter.
-    setId(uuidv4());
+    setId(uid());
 
     // Add the new flow to the list of flows.