Migrate Tweaks Module to Zustand Library and Add All Flows (langflow-…

…ai#1847) * ✨ (codeTabsComponent/index.tsx): refactor code to remove unnecessary code and improve readability 📝 (codeTabsComponent/index.tsx): update comments in source code to provide better understanding of the code logic ♻️ (apiModal/index.tsx): refactor code to remove unnecessary code and improve readability 📝 (apiModal/index.tsx): update comments in source code to provide better understanding of the code logic 🔧 (tweaksStore.ts): add new store for managing tweaks data 📝 (components/index.ts): update codeTabsPropsType to use array syntax for tweak and tweaksList properties for better readability and consistency ♻️ (utils/utils.ts): refactor toTitleCase function to remove unnecessary comma and improve code readability ♻️ (utils/utils.ts): refactor groupByFamily function to remove unnecessary comma and improve code readability ♻️ (utils/utils.ts): refactor getPythonApiCode function to remove unnecessary comma and improve code readability ♻️ (utils/utils.ts): refactor getCurlCode function to remove unnecessary comma and improve code readability ♻️ (utils/utils.ts): refactor getPythonCode function to remove unnecessary comma and improve code readability ♻️ (utils/utils.ts): refactor getWidgetCode function to remove unnecessary comma and improve code readability ♻️ (utils/utils.ts): refactor getFieldTitle function to remove unnecessary comma and improve code readability ♻️ (utils/utils.ts): refactor IncrementObjectKey function to remove unnecessary comma and improve code readability ♻️ (utils/utils.ts): refactor getSetFromObject function to remove unnecessary comma and improve code readability ♻️ (utils/utils.ts): refactor getRandomName function to remove unnecessary comma and improve code readability * 📝 (codeTabsComponent/index.tsx): remove unnecessary whitespace in className ♻️ (codeTabsComponent/index.tsx): refactor code to improve readability and remove unnecessary code ♻️ (apiModal/index.tsx): refactor code to improve readability and remove unnecessary code ♻️ (tweaksStore.ts): refactor code to improve readability and remove unnecessary code ✨ (zustand/tweaks/index.ts): add types for tweaks store * ✨ (codeTabsComponent/index.tsx): refactor code to improve readability and remove unnecessary code ♻️ (codeTabsComponent/index.tsx): refactor code to improve readability and remove unnecessary code ♻️ (utils/utils.ts): refactor code to improve readability and remove unnecessary code ✅ (tweaks_test.spec.ts): add end-to-end test to check if tweaks are updating when something on the flow changes * 🐛 (accordionComponent/index.tsx): fix variable name from 'trigger' to 'keyValue' for better clarity and readability ♻️ (accordionComponent/index.tsx): refactor code to use 'defaultValue' prop instead of manually setting the value in the AccordionItem component 🐛 (codeTabsComponent/index.tsx): remove unused 'openAccordions' function ♻️ (codeTabsComponent/index.tsx): refactor code to remove unnecessary condition for opening accordions in the onValueChange event handler ♻️ (codeTabsComponent/index.tsx): refactor code to remove unused 'open' prop in AccordionItem component ♻️ (codeTabsComponent/index.tsx): refactor code to remove unused 'openAccordion' state variable ♻️ (codeTabsComponent/index.tsx): refactor code to remove unused 'openAccordions' function call in the onValueChange event handler * 🐛 (apiModal/index.tsx): remove unnecessary comma after ref parameter in ApiModal component ♻️ (apiModal/index.tsx): refactor code to improve readability and remove unnecessary commas in function parameters ✨ (apiModal/index.tsx): add conditional check before assigning values to tabs array to prevent errors when tabs is undefined or empty * 🐛 (index.tsx): remove unnecessary defaultValue prop from Accordion component ♻️ (index.tsx): refactor AccordionItem component to remove defaultValue prop and simplify code * 🐛 (apiModal/index.tsx): remove unnecessary comma after ref parameter in function signature ♻️ (apiModal/index.tsx): refactor code to improve readability and remove unnecessary comma after ref parameter in function signature * refactor tweaks * ✨ (codeTabsComponent/index.tsx): add autoFocus prop to the tweaks switch to prevent it from automatically gaining focus when rendered ♻️ (codeTabsComponent/index.tsx): refactor classNames in the api-modal-according-display div to remove unnecessary whitespace ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses ♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api * fix tests on tweaks
datastax · May 10, 2024 · c69f950 · c69f950
1 parent 7132444
commit c69f950
Show file tree

Hide file tree

Showing 17 changed files with 575 additions and 435 deletions.
diff --git a/src/frontend/src/components/accordionComponent/index.tsx b/src/frontend/src/components/accordionComponent/index.tsx
@@ -15,17 +15,16 @@ export default function AccordionComponent({
   sideBar,
 }: AccordionComponentType): JSX.Element {
   const [value, setValue] = useState(
-    open.length === 0 ? "" : getOpenAccordion()
+    open.length === 0 ? "" : getOpenAccordion(),
   );
 
   function getOpenAccordion(): string {
     let value = "";
     open.forEach((el) => {
-      if (el == trigger) {
-        value = trigger;
+      if (el == keyValue) {
+        value = keyValue;
       }
     });
-
     return value;
   }
 

diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
@@ -1,7 +1,7 @@
 import { Transition } from "@headlessui/react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import IOModal from "../../modals/IOModal";
-import ApiModal from "../../modals/apiModal";
+import ApiModal from "../../modals/apiModal/views";
 import ShareModal from "../../modals/shareModal";
 import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";

diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
diff --git a/src/frontend/src/modals/apiModal/index.tsx b/src/frontend/src/modals/apiModal/index.tsx
diff --git a/src/frontend/src/modals/apiModal/utils/build-content.tsx b/src/frontend/src/modals/apiModal/utils/build-content.tsx
@@ -0,0 +1,10 @@
+export function buildContent(value: string) {
+  const htmlContent = (
+    <div className="w-[200px]">
+      <span>{value != null && value != "" ? value : "None"}</span>
+    </div>
+  );
+  return htmlContent;
+}
+
+export default buildContent;
diff --git a/src/frontend/src/modals/apiModal/utils/build-tweaks.ts b/src/frontend/src/modals/apiModal/utils/build-tweaks.ts
@@ -0,0 +1,8 @@
+import { FlowType } from "../../../types/flow";
+
+export function buildTweaks(flow: FlowType) {
+  return flow.data!.nodes.reduce((acc, node) => {
+    acc[node.data.id] = {};
+    return acc;
+  }, {});
+}
diff --git a/src/frontend/src/modals/apiModal/utils/check-can-build-tweak-object.ts b/src/frontend/src/modals/apiModal/utils/check-can-build-tweak-object.ts
@@ -0,0 +1,13 @@
+import { LANGFLOW_SUPPORTED_TYPES } from "../../../constants/constants";
+
+export const checkCanBuildTweakObject = (element, templateField) => {
+  return (
+    element.data.node.template[templateField] &&
+    templateField.charAt(0) !== "_" &&
+    element.data.node.template[templateField].show &&
+    LANGFLOW_SUPPORTED_TYPES.has(
+      element.data.node.template[templateField].type,
+    ) &&
+    templateField !== "code"
+  );
+};
diff --git a/src/frontend/src/modals/apiModal/utils/get-changes-types.ts b/src/frontend/src/modals/apiModal/utils/get-changes-types.ts
@@ -0,0 +1,26 @@
+import { TemplateVariableType } from "../../../types/api";
+import { convertArrayToObj } from "../../../utils/reactflowUtils";
+
+export const getChangesType = (
+  changes: string | string[] | boolean | number | Object[] | Object,
+  template: TemplateVariableType,
+) => {
+  if (typeof changes === "string" && template.type === "float") {
+    changes = parseFloat(changes);
+  }
+  if (typeof changes === "string" && template.type === "int") {
+    changes = parseInt(changes);
+  }
+  if (template.list === true && Array.isArray(changes)) {
+    changes = changes?.filter((x) => x !== "");
+  }
+
+  if (template.type === "dict" && Array.isArray(changes)) {
+    changes = convertArrayToObj(changes);
+  }
+
+  if (template.type === "NestedDict") {
+    changes = JSON.stringify(changes);
+  }
+  return changes;
+};
diff --git a/src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts b/src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts
@@ -0,0 +1,28 @@
+import { LANGFLOW_SUPPORTED_TYPES } from "../../../constants/constants";
+
+export const getNodesWithDefaultValue = (flow) => {
+  let arrNodesWithValues: string[] = [];
+
+  flow["data"]!["nodes"].forEach((node) => {
+    if (!node["data"]["node"]["template"]) {
+      return;
+    }
+    Object.keys(node["data"]["node"]["template"])
+      .filter(
+        (templateField) =>
+          templateField.charAt(0) !== "_" &&
+          node.data.node.template[templateField].show &&
+          LANGFLOW_SUPPORTED_TYPES.has(
+            node.data.node.template[templateField].type,
+          ),
+      )
+      .map((n, i) => {
+        arrNodesWithValues.push(node["id"]);
+      });
+  });
+
+  const tweaksListFiltered = arrNodesWithValues.filter((value, index, self) => {
+    return self.indexOf(value) === index;
+  });
+  return tweaksListFiltered;
+};
diff --git a/src/frontend/src/modals/apiModal/utils/get-value.ts b/src/frontend/src/modals/apiModal/utils/get-value.ts
@@ -0,0 +1,29 @@
+import { TemplateVariableType } from "../../../types/api";
+import { NodeType } from "../../../types/flow";
+
+export const getValue = (
+  value: string,
+  node: NodeType,
+  template: TemplateVariableType,
+  tweak: Object[],
+) => {
+  let returnValue = value ?? "";
+
+  if (tweak.length > 0) {
+    for (const obj of tweak) {
+      Object.keys(obj).forEach((key) => {
+        const value = obj[key];
+        if (key == node["id"]) {
+          Object.keys(value).forEach((key) => {
+            if (key == template["name"]) {
+              returnValue = value[key];
+            }
+          });
+        }
+      });
+    }
+  } else {
+    return value ?? "";
+  }
+  return returnValue;
+};