🐛 fix(constants.tsx): change node type id format to include the type name in uppercase

✨ feat(constants.tsx): add support for tweaks in getPythonApiCode and getCurlCode functions
🎨 style(ApiModal/index.tsx): remove unused imports and components
🎨 style(PageComponent/index.tsx): change node type id format to include the type name in uppercase
✨ feat(utils.ts): add buildTweaks function to create an empty tweaks object for each node
The node type id format is now changed to include the type name in uppercase, which improves consistency with the naming conventions. Support for tweaks is added to the getPythonApiCode and getCurlCode functions, which allows the API to apply tweaks to the flow. Unused imports and components are removed from the ApiModal component. The buildTweaks function is added to create an empty tweaks object for each node.

src/frontend/src/constants.tsx

@@ -1,5 +1,8 @@
 // src/constants.tsx
 
+import { FlowType } from "./types/flow";
+import { buildTweaks } from "./utils";
+
 /**
  * The base text for subtitle of Export Dialog (Toolbar)
  * @constant
@@ -51,11 +54,21 @@ export const TEXT_DIALOG_SUBTITLE = "Edit your text.";
  * @param {string} flowId - The id of the flow
  * @returns {string} - The python code
  */
-export const getPythonApiCode = (flowId: string): string => {
+export const getPythonApiCode = (flow: FlowType): string => {
+  const flowId = flow.id;
+
+  // create a dictionary of node ids and the values is an empty dictionary
+  // flow.data.nodes.forEach((node) => {
+  //   node.data.id
+  // }
+  const tweaks = buildTweaks(flow);
   return `import requests
 
-BASE_API_URL = "${window.location.protocol}//${window.location.host}/ap1/v1/predict"
+BASE_API_URL = "${window.location.protocol}//${
+    window.location.host
+  }/ap1/v1/predict"
 FLOW_ID = "${flowId}"
+TWEAKS = ${JSON.stringify(tweaks, null, 2)}
 
 def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict:
     """
@@ -77,28 +90,35 @@ def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict:
     return response.json()
 
 # Setup any tweaks you want to apply to the flow
-tweaks = {} # {"nodeId": {"key": "value"}, "nodeId2": {"key": "value"}}
 
-
-print(run_flow("Your message", flow_id=FLOW_ID, tweaks=tweaks))`;
+print(run_flow("Your message", flow_id=FLOW_ID, tweaks=TWEAKS))`;
 };
 /**
  * Function to get the curl code for the API
  * @param {string} flowId - The id of the flow
  * @returns {string} - The curl code
  */
-export const getCurlCode = (flowId: string): string => {
+export const getCurlCode = (flow: FlowType): string => {
+  const flowId = flow.id;
+  const tweaks = buildTweaks(flow);
   return `curl -X POST \\
-  ${window.location.protocol}//${window.location.host}/api/v1/predict/${flowId} \\
+  ${window.location.protocol}//${
+    window.location.host
+  }/api/v1/predict/${flowId} \\
   -H 'Content-Type: application/json' \\
-  -d '{"message": "Your message"}'`;
+  -d '{"message": "Your message", "tweaks": ${JSON.stringify(
+    tweaks,
+    null,
+    2
+  )}}'`;
 };
 /**
  * Function to get the python code for the API
  * @param {string} flowName - The name of the flow
  * @returns {string} - The python code
  */
-export const getPythonCode = (flowName: string): string => {
+export const getPythonCode = (flow: FlowType): string => {
+  const flowName = flow.name;
   return `from langflow import load_flow_from_json
 
     flow = load_flow_from_json("${flowName}.json")

src/frontend/src/modals/ApiModal/index.tsx

@@ -1,10 +1,6 @@
-import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
-import {
-  XMarkIcon,
-  CommandLineIcon,
-  CodeBracketSquareIcon,
-} from "@heroicons/react/24/outline";
-import { Fragment, useContext, useRef, useState } from "react";
+import { IconCheck, IconClipboard } from "@tabler/icons-react";
+import { CodeBracketSquareIcon } from "@heroicons/react/24/outline";
+import { useContext, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
@@ -18,12 +14,10 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { Button } from "../../components/ui/button";
 import { FlowType } from "../../types/flow/index";
 import { getCurlCode, getPythonApiCode, getPythonCode } from "../../constants";
 import { EXPORT_CODE_DIALOG } from "../../constants";
@@ -55,10 +49,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
     }
   }
 
-  const pythonApiCode = getPythonApiCode(flow.id);
+  const pythonApiCode = getPythonApiCode(flow);
 
-  const curl_code = getCurlCode(flow.id);
-  const pythonCode = getPythonCode(flow.name);
+  const curl_code = getCurlCode(flow);
+  const pythonCode = getPythonCode(flow);
 
   const tabs = [
     {

src/frontend/src/utils.ts

@@ -711,3 +711,10 @@ export function groupByFamily(data, baseClasses) {
 
   return groupedObj;
 }
+
+export function buildTweaks(flow) {
+  return flow.data.nodes.reduce((acc, node) => {
+    acc[node.data.id] = {};
+    return acc;
+  }, {});
+}