jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

♻️ (GenericNode): refactor to use optional chaining for template fields

Browse source 
♻️ (count-handles): refactor to use optional chaining for template fields

♻️ (get-nodes-with-default-value): refactor to use optional chaining

♻️ (nodeToolbarComponent): refactor to use optional chaining for template fields

💡 (utils.ts): remove unnecessary trailing commas in function parameters to improve code readability and consistency
This commit is contained in:
cristhianzl 2024-06-12 12:43:35 -03:00
commit 191fae732c
5 changed files with 51 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -1,5 +1,6 @@
import emojiRegex from "emoji-regex"; import emojiRegex from "emoji-regex";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { useHotkeys } from "react-hotkeys-hook";
import Markdown from "react-markdown"; import Markdown from "react-markdown";
import { NodeToolbar, useUpdateNodeInternals } from "reactflow"; import { NodeToolbar, useUpdateNodeInternals } from "reactflow";
import IconComponent from "../../components/genericIconComponent"; import IconComponent from "../../components/genericIconComponent";
@ -38,7 +39,6 @@ import useValidationStatusString from "../hooks/use-validation-status-string";
import getFieldTitle from "../utils/get-field-title"; import getFieldTitle from "../utils/get-field-title";
import sortFields from "../utils/sort-fields"; import sortFields from "../utils/sort-fields";
import ParameterComponent from "./components/parameterComponent"; import ParameterComponent from "./components/parameterComponent";
import { useHotkeys } from "react-hotkeys-hook";
export default function GenericNode({ export default function GenericNode({
data, data,
@ -61,10 +61,10 @@ export default function GenericNode({
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
const isDark = useDarkStore((state) => state.dark); const isDark = useDarkStore((state) => state.dark);
const buildStatus = useFlowStore( const buildStatus = useFlowStore(
(state) => state.flowBuildStatus[data.id]?.status, (state) => state.flowBuildStatus[data.id]?.status
); );
const lastRunTime = useFlowStore( const lastRunTime = useFlowStore(
(state) => state.flowBuildStatus[data.id]?.timestamp, (state) => state.flowBuildStatus[data.id]?.timestamp
); );
const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
@ -72,7 +72,7 @@ export default function GenericNode({
const [nodeName, setNodeName] = useState(data.node!.display_name); const [nodeName, setNodeName] = useState(data.node!.display_name);
const [inputDescription, setInputDescription] = useState(false); const [inputDescription, setInputDescription] = useState(false);
const [nodeDescription, setNodeDescription] = useState( const [nodeDescription, setNodeDescription] = useState(
data.node?.description!, data.node?.description!
); );
const [isOutdated, setIsOutdated] = useState(false); const [isOutdated, setIsOutdated] = useState(false);
const [validationStatus, setValidationStatus] = const [validationStatus, setValidationStatus] =
@ -90,7 +90,7 @@ export default function GenericNode({
data.node!, data.node!,
setNode, setNode,
setIsOutdated, setIsOutdated,
updateNodeInternals, updateNodeInternals
); );
const name = nodeIconsLucide[data.type] ? data.type : types[data.type]; const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
@ -117,12 +117,12 @@ export default function GenericNode({
selected: boolean, selected: boolean,
showNode: boolean, showNode: boolean,
buildStatus: BuildStatus | undefined, buildStatus: BuildStatus | undefined,
validationStatus: VertexBuildTypeAPI | null, validationStatus: VertexBuildTypeAPI | null
) => { ) => {
const specificClassFromBuildStatus = getSpecificClassFromBuildStatus( const specificClassFromBuildStatus = getSpecificClassFromBuildStatus(
buildStatus, buildStatus,
validationStatus, validationStatus,
isDark, isDark
); );
const baseBorderClass = getBaseBorderClass(selected); const baseBorderClass = getBaseBorderClass(selected);
@ -131,7 +131,7 @@ export default function GenericNode({
baseBorderClass, baseBorderClass,
nodeSizeClass, nodeSizeClass,
"generic-node-div group/node", "generic-node-div group/node",
specificClassFromBuildStatus, specificClassFromBuildStatus
); );
return names; return names;
}; };
@ -176,7 +176,7 @@ export default function GenericNode({
showNode, showNode,
isEmoji, isEmoji,
nodeIconFragment, nodeIconFragment,
checkNodeIconFragment, checkNodeIconFragment
); );
function countHandles(): void { function countHandles(): void {
@ -309,7 +309,7 @@ export default function GenericNode({
selected, selected,
showNode, showNode,
buildStatus, buildStatus,
validationStatus, validationStatus
)} )}
> >
{data.node?.beta && showNode && ( {data.node?.beta && showNode && (
@ -411,8 +411,8 @@ export default function GenericNode({
.filter((templateField) => templateField.charAt(0) !== "_") .filter((templateField) => templateField.charAt(0) !== "_")
.map( .map(
(templateField: string, idx) => (templateField: string, idx) =>
data.node!.template[templateField].show && data.node!.template[templateField]?.show &&
!data.node!.template[templateField].advanced && ( !data.node!.template[templateField]?.advanced && (
<ParameterComponent <ParameterComponent
selected={selected} selected={selected}
index={idx.toString()} index={idx.toString()}
@ -457,7 +457,7 @@ export default function GenericNode({
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
templateField, templateField
)} )}
info={data.node?.template[templateField].info} info={data.node?.template[templateField].info}
name={templateField} name={templateField}
@ -485,7 +485,7 @@ export default function GenericNode({
proxy={data.node?.template[templateField].proxy} proxy={data.node?.template[templateField].proxy}
showNode={showNode} showNode={showNode}
/> />
), )
)} )}
<ParameterComponent <ParameterComponent
selected={selected} selected={selected}
@ -643,7 +643,7 @@ export default function GenericNode({
!data.node?.description) && !data.node?.description) &&
nameEditable nameEditable
? "font-light italic" ? "font-light italic"
: "", : ""
)} )}
onDoubleClick={(e) => { onDoubleClick={(e) => {
setInputDescription(true); setInputDescription(true);
@ -670,8 +670,8 @@ export default function GenericNode({
.sort((a, b) => sortFields(a, b, data.node?.field_order ?? [])) .sort((a, b) => sortFields(a, b, data.node?.field_order ?? []))
.map((templateField: string, idx) => ( .map((templateField: string, idx) => (
<div key={idx}> <div key={idx}>
{data.node!.template[templateField].show && {data.node!.template[templateField]?.show &&
!data.node!.template[templateField].advanced ? ( !data.node!.template[templateField]?.advanced ? (
<ParameterComponent <ParameterComponent
selected={selected} selected={selected}
index={idx.toString()} index={idx.toString()}
@ -713,13 +713,13 @@ export default function GenericNode({
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
templateField, templateField
)} )}
info={data.node?.template[templateField].info} info={data.node?.template[templateField].info}
name={templateField} name={templateField}
tooltipTitle={ tooltipTitle={
data.node?.template[templateField].input_types?.join( data.node?.template[templateField].input_types?.join(
"\n", "\n"
) ?? data.node?.template[templateField].type ) ?? data.node?.template[templateField].type
} }
required={data.node!.template[templateField].required} required={data.node!.template[templateField].required}
@ -746,7 +746,7 @@ export default function GenericNode({
<div <div
className={classNames( className={classNames(
Object.keys(data.node!.template).length < 1 ? "hidden" : "", Object.keys(data.node!.template).length < 1 ? "hidden" : "",
"flex-max-width justify-center", "flex-max-width justify-center"
)} )}
> >
{" "} {" "}

6
src/frontend/src/CustomNodes/helpers/count-handles.ts
View file

@ -5,9 +5,9 @@ export function countHandlesFn(data: NodeDataType): number {
.filter((templateField) => templateField.charAt(0) !== "_") .filter((templateField) => templateField.charAt(0) !== "_")
.map((templateCamp) => { .map((templateCamp) => {
const { template } = data.node!; const { template } = data.node!;
if (template[templateCamp].input_types) return true; if (template[templateCamp]?.input_types) return true;
if (!template[templateCamp].show) return false; if (!template[templateCamp]?.show) return false;
switch (template[templateCamp].type) { switch (template[templateCamp]?.type) {
case "str": case "str":
case "bool": case "bool":
case "float": case "float":

6
src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts
View file

@ -11,10 +11,10 @@ export const getNodesWithDefaultValue = (flow) => {
.filter( .filter(
(templateField) => (templateField) =>
templateField.charAt(0) !== "_" && templateField.charAt(0) !== "_" &&
node.data.node.template[templateField].show && node.data.node.template[templateField]?.show &&
LANGFLOW_SUPPORTED_TYPES.has( LANGFLOW_SUPPORTED_TYPES.has(
node.data.node.template[templateField].type, node.data.node.template[templateField]?.type
), )
) )
.map((n, i) => { .map((n, i) => {
arrNodesWithValues.push(node["id"]); arrNodesWithValues.push(node["id"]);

22
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -57,17 +57,17 @@ export default function NodeToolbarComponent({
const nodeLength = Object.keys(data.node!.template).filter( const nodeLength = Object.keys(data.node!.template).filter(
(templateField) => (templateField) =>
templateField.charAt(0) !== "_" && templateField.charAt(0) !== "_" &&
data.node?.template[templateField].show && data.node?.template[templateField]?.show &&
(data.node.template[templateField].type === "str" || (data.node.template[templateField]?.type === "str" ||
data.node.template[templateField].type === "bool" || data.node.template[templateField]?.type === "bool" ||
data.node.template[templateField].type === "float" || data.node.template[templateField]?.type === "float" ||
data.node.template[templateField].type === "code" || data.node.template[templateField]?.type === "code" ||
data.node.template[templateField].type === "prompt" || data.node.template[templateField]?.type === "prompt" ||
data.node.template[templateField].type === "file" || data.node.template[templateField]?.type === "file" ||
data.node.template[templateField].type === "Any" || data.node.template[templateField]?.type === "Any" ||
data.node.template[templateField].type === "int" || data.node.template[templateField]?.type === "int" ||
data.node.template[templateField].type === "dict" || data.node.template[templateField]?.type === "dict" ||
data.node.template[templateField].type === "NestedDict") data.node.template[templateField]?.type === "NestedDict")
).length; ).length;
const hasStore = useStoreStore((state) => state.hasStore); const hasStore = useStoreStore((state) => state.hasStore);

28
src/frontend/src/utils/utils.ts
View file

@ -56,7 +56,7 @@ export function normalCaseToSnakeCase(str: string): string {
export function toTitleCase( export function toTitleCase(
str: string | undefined, str: string | undefined,
isNodeField?: boolean, isNodeField?: boolean
): string { ): string {
if (!str) return ""; if (!str) return "";
let result = str let result = str
@ -65,7 +65,7 @@ export function toTitleCase(
if (isNodeField) return word; if (isNodeField) return word;
if (index === 0) { if (index === 0) {
return checkUpperWords( return checkUpperWords(
word[0].toUpperCase() + word.slice(1).toLowerCase(), word[0].toUpperCase() + word.slice(1).toLowerCase()
); );
} }
return checkUpperWords(word.toLowerCase()); return checkUpperWords(word.toLowerCase());
@ -78,7 +78,7 @@ export function toTitleCase(
if (isNodeField) return word; if (isNodeField) return word;
if (index === 0) { if (index === 0) {
return checkUpperWords( return checkUpperWords(
word[0].toUpperCase() + word.slice(1).toLowerCase(), word[0].toUpperCase() + word.slice(1).toLowerCase()
); );
} }
return checkUpperWords(word.toLowerCase()); return checkUpperWords(word.toLowerCase());
@ -182,7 +182,7 @@ export function checkLocalStorageKey(key: string): boolean {
export function IncrementObjectKey( export function IncrementObjectKey(
object: object, object: object,
key: string, key: string
): { newKey: string; increment: number } { ): { newKey: string; increment: number } {
let count = 1; let count = 1;
const type = removeCountFromString(key); const type = removeCountFromString(key);
@ -217,7 +217,7 @@ export function groupByFamily(
data: APIDataType, data: APIDataType,
baseClasses: string, baseClasses: string,
left: boolean, left: boolean,
flow?: NodeType[], flow?: NodeType[]
): groupedObjType[] { ): groupedObjType[] {
const baseClassesSet = new Set(baseClasses.split("\n")); const baseClassesSet = new Set(baseClasses.split("\n"));
let arrOfPossibleInputs: Array<{ let arrOfPossibleInputs: Array<{
@ -237,13 +237,13 @@ export function groupByFamily(
const checkBaseClass = (template: TemplateVariableType) => { const checkBaseClass = (template: TemplateVariableType) => {
return ( return (
template.type && template?.type &&
template.show && template?.show &&
((!excludeTypes.has(template.type) && ((!excludeTypes.has(template.type) &&
baseClassesSet.has(template.type)) || baseClassesSet.has(template.type)) ||
(template.input_types && (template?.input_types &&
template.input_types.some((inputType) => template?.input_types.some((inputType) =>
baseClassesSet.has(inputType), baseClassesSet.has(inputType)
))) )))
); );
}; };
@ -263,7 +263,7 @@ export function groupByFamily(
hasBaseClassInBaseClasses: hasBaseClassInBaseClasses:
foundNode?.hasBaseClassInBaseClasses || foundNode?.hasBaseClassInBaseClasses ||
nodeData.node!.base_classes.some((baseClass) => nodeData.node!.base_classes.some((baseClass) =>
baseClassesSet.has(baseClass), baseClassesSet.has(baseClass)
), //seta como anterior ou verifica se o node tem base class ), //seta como anterior ou verifica se o node tem base class
displayName: nodeData.node?.display_name, displayName: nodeData.node?.display_name,
}); });
@ -280,10 +280,10 @@ export function groupByFamily(
if (!foundNode) { if (!foundNode) {
foundNode = { foundNode = {
hasBaseClassInTemplate: Object.values(node!.template).some( hasBaseClassInTemplate: Object.values(node!.template).some(
checkBaseClass, checkBaseClass
), ),
hasBaseClassInBaseClasses: node!.base_classes.some((baseClass) => hasBaseClassInBaseClasses: node!.base_classes.some((baseClass) =>
baseClassesSet.has(baseClass), baseClassesSet.has(baseClass)
), ),
displayName: node?.display_name, displayName: node?.display_name,
}; };
@ -355,7 +355,7 @@ export function isTimeStampString(str: string): boolean {
export function extractColumnsFromRows( export function extractColumnsFromRows(
rows: object[], rows: object[],
mode: "intersection" | "union", mode: "intersection" | "union",
excludeColumns?: Array<string>, excludeColumns?: Array<string>
): (ColDef<any> | ColGroupDef<any>)[] { ): (ColDef<any> | ColGroupDef<any>)[] {
let columnsKeys: { [key: string]: ColDef<any> | ColGroupDef<any> } = {}; let columnsKeys: { [key: string]: ColDef<any> | ColGroupDef<any> } = {};
if (rows.length === 0) { if (rows.length === 0) {