fixed AutoUpdate for each node
This commit is contained in:
anovazzi1
Gabriel Luiz Freitas Almeida
parent
1813befde1
commit
83b3347fc5
2 changed files with 380 additions and 361 deletions
|
|
@ -8,10 +8,10 @@ import {
|
||||||
} from "react";
|
} from "react";
|
||||||
import { FlowType } from "../types/flow";
|
import { FlowType } from "../types/flow";
|
||||||
import { LangFlowState, TabsContextType } from "../types/tabs";
|
import { LangFlowState, TabsContextType } from "../types/tabs";
|
||||||
import { normalCaseToSnakeCase, updateObject } from "../utils";
|
import { normalCaseToSnakeCase, updateObject, updateTemplate } from "../utils";
|
||||||
import { alertContext } from "./alertContext";
|
import { alertContext } from "./alertContext";
|
||||||
import { typesContext } from "./typesContext";
|
import { typesContext } from "./typesContext";
|
||||||
import { TemplateVariableType } from "../types/api";
|
import { APITemplateType, TemplateVariableType } from "../types/api";
|
||||||
const { v4: uuidv4 } = require("uuid");
|
const { v4: uuidv4 } = require("uuid");
|
||||||
|
|
||||||
const TabsContextInitialValue: TabsContextType = {
|
const TabsContextInitialValue: TabsContextType = {
|
||||||
|
|
@ -64,12 +64,12 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
||||||
cookieObject.flows.forEach((flow) => {
|
cookieObject.flows.forEach((flow) => {
|
||||||
flow.data.nodes.forEach((node) => {
|
flow.data.nodes.forEach((node) => {
|
||||||
if (Object.keys(templates[node.data.type]["template"]).length > 0) {
|
if (Object.keys(templates[node.data.type]["template"]).length > 0) {
|
||||||
node.data.node.template = updateObject(
|
node.data.node.template = updateTemplate(
|
||||||
templates[node.data.type][
|
templates[node.data.type][
|
||||||
"template"
|
"template"
|
||||||
] as unknown as TemplateVariableType,
|
] as unknown as APITemplateType,
|
||||||
|
|
||||||
node.data.node.template as TemplateVariableType
|
node.data.node.template as APITemplateType
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -127,16 +127,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
||||||
file.text().then((text) => {
|
file.text().then((text) => {
|
||||||
// parse the text into a JSON object
|
// parse the text into a JSON object
|
||||||
let flow: FlowType = JSON.parse(text);
|
let flow: FlowType = JSON.parse(text);
|
||||||
flow.data.nodes.forEach((node) => {
|
|
||||||
if (Object.keys(templates[node.data.type]["template"]).length > 0) {
|
|
||||||
node.data.node.template = updateObject(
|
|
||||||
templates[node.data.type][
|
|
||||||
"template"
|
|
||||||
] as unknown as TemplateVariableType,
|
|
||||||
node.data.node.template as TemplateVariableType
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
addFlow(flow);
|
addFlow(flow);
|
||||||
});
|
});
|
||||||
|
|
@ -176,6 +166,18 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
||||||
const data = flow?.data ? flow.data : null;
|
const data = flow?.data ? flow.data : null;
|
||||||
const description = flow?.description ? flow.description : "";
|
const description = flow?.description ? flow.description : "";
|
||||||
|
|
||||||
|
if(data){
|
||||||
|
data.nodes.forEach((node) => {
|
||||||
|
if (Object.keys(templates[node.data.type]["template"]).length > 0) {
|
||||||
|
node.data.node.template = updateTemplate(
|
||||||
|
templates[node.data.type][
|
||||||
|
"template"
|
||||||
|
] as unknown as APITemplateType,
|
||||||
|
node.data.node.template as APITemplateType
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
// Create a new flow with a default name if no flow is provided.
|
// Create a new flow with a default name if no flow is provided.
|
||||||
let newFlow: FlowType = {
|
let newFlow: FlowType = {
|
||||||
description,
|
description,
|
||||||
|
|
|
||||||
|
|
@ -1,431 +1,448 @@
|
||||||
import {
|
import {
|
||||||
RocketLaunchIcon,
|
RocketLaunchIcon,
|
||||||
LinkIcon,
|
LinkIcon,
|
||||||
CpuChipIcon,
|
CpuChipIcon,
|
||||||
LightBulbIcon,
|
LightBulbIcon,
|
||||||
CommandLineIcon,
|
CommandLineIcon,
|
||||||
WrenchScrewdriverIcon,
|
WrenchScrewdriverIcon,
|
||||||
WrenchIcon,
|
WrenchIcon,
|
||||||
ComputerDesktopIcon,
|
ComputerDesktopIcon,
|
||||||
Bars3CenterLeftIcon,
|
Bars3CenterLeftIcon,
|
||||||
GiftIcon,
|
GiftIcon,
|
||||||
PaperClipIcon,
|
PaperClipIcon,
|
||||||
QuestionMarkCircleIcon,
|
QuestionMarkCircleIcon,
|
||||||
FingerPrintIcon,
|
FingerPrintIcon,
|
||||||
ScissorsIcon,
|
ScissorsIcon,
|
||||||
CircleStackIcon,
|
CircleStackIcon,
|
||||||
Squares2X2Icon,
|
Squares2X2Icon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
|
import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
|
||||||
import { FlowType } from "./types/flow";
|
import { FlowType } from "./types/flow";
|
||||||
|
import { APITemplateType, TemplateVariableType } from "./types/api";
|
||||||
var _ = require("lodash");
|
var _ = require("lodash");
|
||||||
|
|
||||||
export function classNames(...classes: Array<string>) {
|
export function classNames(...classes: Array<string>) {
|
||||||
return classes.filter(Boolean).join(" ");
|
return classes.filter(Boolean).join(" ");
|
||||||
}
|
}
|
||||||
|
|
||||||
export const textColors = {
|
export const textColors = {
|
||||||
white: "text-white",
|
white: "text-white",
|
||||||
red: "text-red-700",
|
red: "text-red-700",
|
||||||
orange: "text-orange-700",
|
orange: "text-orange-700",
|
||||||
amber: "text-amber-700",
|
amber: "text-amber-700",
|
||||||
yellow: "text-yellow-700",
|
yellow: "text-yellow-700",
|
||||||
lime: "text-lime-700",
|
lime: "text-lime-700",
|
||||||
green: "text-green-700",
|
green: "text-green-700",
|
||||||
emerald: "text-emerald-700",
|
emerald: "text-emerald-700",
|
||||||
teal: "text-teal-700",
|
teal: "text-teal-700",
|
||||||
cyan: "text-cyan-700",
|
cyan: "text-cyan-700",
|
||||||
sky: "text-sky-700",
|
sky: "text-sky-700",
|
||||||
blue: "text-blue-700",
|
blue: "text-blue-700",
|
||||||
indigo: "text-indigo-700",
|
indigo: "text-indigo-700",
|
||||||
violet: "text-violet-700",
|
violet: "text-violet-700",
|
||||||
purple: "text-purple-700",
|
purple: "text-purple-700",
|
||||||
fuchsia: "text-fuchsia-700",
|
fuchsia: "text-fuchsia-700",
|
||||||
pink: "text-pink-700",
|
pink: "text-pink-700",
|
||||||
rose: "text-rose-700",
|
rose: "text-rose-700",
|
||||||
black: "text-black-700",
|
black: "text-black-700",
|
||||||
gray: "text-gray-700",
|
gray: "text-gray-700",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const borderLColors = {
|
export const borderLColors = {
|
||||||
white: "border-l-white",
|
white: "border-l-white",
|
||||||
red: "border-l-red-500",
|
red: "border-l-red-500",
|
||||||
orange: "border-l-orange-500",
|
orange: "border-l-orange-500",
|
||||||
amber: "border-l-amber-500",
|
amber: "border-l-amber-500",
|
||||||
yellow: "border-l-yellow-500",
|
yellow: "border-l-yellow-500",
|
||||||
lime: "border-l-lime-500",
|
lime: "border-l-lime-500",
|
||||||
green: "border-l-green-500",
|
green: "border-l-green-500",
|
||||||
emerald: "border-l-emerald-500",
|
emerald: "border-l-emerald-500",
|
||||||
teal: "border-l-teal-500",
|
teal: "border-l-teal-500",
|
||||||
cyan: "border-l-cyan-500",
|
cyan: "border-l-cyan-500",
|
||||||
sky: "border-l-sky-500",
|
sky: "border-l-sky-500",
|
||||||
blue: "border-l-blue-500",
|
blue: "border-l-blue-500",
|
||||||
indigo: "border-l-indigo-500",
|
indigo: "border-l-indigo-500",
|
||||||
violet: "border-l-violet-500",
|
violet: "border-l-violet-500",
|
||||||
purple: "border-l-purple-500",
|
purple: "border-l-purple-500",
|
||||||
fuchsia: "border-l-fuchsia-500",
|
fuchsia: "border-l-fuchsia-500",
|
||||||
pink: "border-l-pink-500",
|
pink: "border-l-pink-500",
|
||||||
rose: "border-l-rose-500",
|
rose: "border-l-rose-500",
|
||||||
black: "border-l-black-500",
|
black: "border-l-black-500",
|
||||||
gray: "border-l-gray-500",
|
gray: "border-l-gray-500",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const nodeColors: { [char: string]: string } = {
|
export const nodeColors: { [char: string]: string } = {
|
||||||
prompts: "#4367BF",
|
prompts: "#4367BF",
|
||||||
llms: "#6344BE",
|
llms: "#6344BE",
|
||||||
chains: "#FE7500",
|
chains: "#FE7500",
|
||||||
agents: "#903BBE",
|
agents: "#903BBE",
|
||||||
tools: "#FF3434",
|
tools: "#FF3434",
|
||||||
memories: "#F5B85A",
|
memories: "#F5B85A",
|
||||||
advanced: "#000000",
|
advanced: "#000000",
|
||||||
chat: "#198BF6",
|
chat: "#198BF6",
|
||||||
thought: "#272541",
|
thought: "#272541",
|
||||||
embeddings: "#42BAA7",
|
embeddings: "#42BAA7",
|
||||||
documentloaders: "#7AAE42",
|
documentloaders: "#7AAE42",
|
||||||
vectorstores: "#AA8742",
|
vectorstores: "#AA8742",
|
||||||
textsplitters: "#B47CB5",
|
textsplitters: "#B47CB5",
|
||||||
toolkits: "#DB2C2C",
|
toolkits: "#DB2C2C",
|
||||||
wrappers: "#E6277A",
|
wrappers: "#E6277A",
|
||||||
utilities: "#31A3CC",
|
utilities: "#31A3CC",
|
||||||
unknown: "#9CA3AF",
|
unknown: "#9CA3AF",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const nodeNames: { [char: string]: string } = {
|
export const nodeNames: { [char: string]: string } = {
|
||||||
prompts: "Prompts",
|
prompts: "Prompts",
|
||||||
llms: "LLMs",
|
llms: "LLMs",
|
||||||
chains: "Chains",
|
chains: "Chains",
|
||||||
agents: "Agents",
|
agents: "Agents",
|
||||||
tools: "Tools",
|
tools: "Tools",
|
||||||
memories: "Memories",
|
memories: "Memories",
|
||||||
advanced: "Advanced",
|
advanced: "Advanced",
|
||||||
chat: "Chat",
|
chat: "Chat",
|
||||||
embeddings: "Embeddings",
|
embeddings: "Embeddings",
|
||||||
documentloaders: "Document Loaders",
|
documentloaders: "Document Loaders",
|
||||||
vectorstores: "Vector Stores",
|
vectorstores: "Vector Stores",
|
||||||
toolkits: "Toolkits",
|
toolkits: "Toolkits",
|
||||||
wrappers: "Wrappers",
|
wrappers: "Wrappers",
|
||||||
textsplitters: "Text Splitters",
|
textsplitters: "Text Splitters",
|
||||||
utilities: "Utilities",
|
utilities: "Utilities",
|
||||||
unknown: "Unknown",
|
unknown: "Unknown",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const nodeIcons: {
|
export const nodeIcons: {
|
||||||
[char: string]: React.ForwardRefExoticComponent<
|
[char: string]: React.ForwardRefExoticComponent<
|
||||||
React.SVGProps<SVGSVGElement>
|
React.SVGProps<SVGSVGElement>
|
||||||
>;
|
>;
|
||||||
} = {
|
} = {
|
||||||
agents: RocketLaunchIcon,
|
agents: RocketLaunchIcon,
|
||||||
chains: LinkIcon,
|
chains: LinkIcon,
|
||||||
memories: CpuChipIcon,
|
memories: CpuChipIcon,
|
||||||
llms: LightBulbIcon,
|
llms: LightBulbIcon,
|
||||||
prompts: CommandLineIcon,
|
prompts: CommandLineIcon,
|
||||||
tools: WrenchIcon,
|
tools: WrenchIcon,
|
||||||
advanced: ComputerDesktopIcon,
|
advanced: ComputerDesktopIcon,
|
||||||
chat: Bars3CenterLeftIcon,
|
chat: Bars3CenterLeftIcon,
|
||||||
embeddings: FingerPrintIcon,
|
embeddings: FingerPrintIcon,
|
||||||
documentloaders: PaperClipIcon,
|
documentloaders: PaperClipIcon,
|
||||||
vectorstores: CircleStackIcon,
|
vectorstores: CircleStackIcon,
|
||||||
toolkits: WrenchScrewdriverIcon,
|
toolkits: WrenchScrewdriverIcon,
|
||||||
textsplitters: ScissorsIcon,
|
textsplitters: ScissorsIcon,
|
||||||
wrappers: GiftIcon,
|
wrappers: GiftIcon,
|
||||||
utilities: Squares2X2Icon,
|
utilities: Squares2X2Icon,
|
||||||
unknown: QuestionMarkCircleIcon,
|
unknown: QuestionMarkCircleIcon,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const bgColors = {
|
export const bgColors = {
|
||||||
white: "bg-white",
|
white: "bg-white",
|
||||||
red: "bg-red-100",
|
red: "bg-red-100",
|
||||||
orange: "bg-orange-100",
|
orange: "bg-orange-100",
|
||||||
amber: "bg-amber-100",
|
amber: "bg-amber-100",
|
||||||
yellow: "bg-yellow-100",
|
yellow: "bg-yellow-100",
|
||||||
lime: "bg-lime-100",
|
lime: "bg-lime-100",
|
||||||
green: "bg-green-100",
|
green: "bg-green-100",
|
||||||
emerald: "bg-emerald-100",
|
emerald: "bg-emerald-100",
|
||||||
teal: "bg-teal-100",
|
teal: "bg-teal-100",
|
||||||
cyan: "bg-cyan-100",
|
cyan: "bg-cyan-100",
|
||||||
sky: "bg-sky-100",
|
sky: "bg-sky-100",
|
||||||
blue: "bg-blue-100",
|
blue: "bg-blue-100",
|
||||||
indigo: "bg-indigo-100",
|
indigo: "bg-indigo-100",
|
||||||
violet: "bg-violet-100",
|
violet: "bg-violet-100",
|
||||||
purple: "bg-purple-100",
|
purple: "bg-purple-100",
|
||||||
fuchsia: "bg-fuchsia-100",
|
fuchsia: "bg-fuchsia-100",
|
||||||
pink: "bg-pink-100",
|
pink: "bg-pink-100",
|
||||||
rose: "bg-rose-100",
|
rose: "bg-rose-100",
|
||||||
black: "bg-black-100",
|
black: "bg-black-100",
|
||||||
gray: "bg-gray-100",
|
gray: "bg-gray-100",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const bgColorsHover = {
|
export const bgColorsHover = {
|
||||||
white: "hover:bg-white",
|
white: "hover:bg-white",
|
||||||
black: "hover:bg-black-50",
|
black: "hover:bg-black-50",
|
||||||
gray: "hover:bg-gray-50",
|
gray: "hover:bg-gray-50",
|
||||||
red: "hover:bg-red-50",
|
red: "hover:bg-red-50",
|
||||||
orange: "hover:bg-orange-50",
|
orange: "hover:bg-orange-50",
|
||||||
amber: "hover:bg-amber-50",
|
amber: "hover:bg-amber-50",
|
||||||
yellow: "hover:bg-yellow-50",
|
yellow: "hover:bg-yellow-50",
|
||||||
lime: "hover:bg-lime-50",
|
lime: "hover:bg-lime-50",
|
||||||
green: "hover:bg-green-50",
|
green: "hover:bg-green-50",
|
||||||
emerald: "hover:bg-emerald-50",
|
emerald: "hover:bg-emerald-50",
|
||||||
teal: "hover:bg-teal-50",
|
teal: "hover:bg-teal-50",
|
||||||
cyan: "hover:bg-cyan-50",
|
cyan: "hover:bg-cyan-50",
|
||||||
sky: "hover:bg-sky-50",
|
sky: "hover:bg-sky-50",
|
||||||
blue: "hover:bg-blue-50",
|
blue: "hover:bg-blue-50",
|
||||||
indigo: "hover:bg-indigo-50",
|
indigo: "hover:bg-indigo-50",
|
||||||
violet: "hover:bg-violet-50",
|
violet: "hover:bg-violet-50",
|
||||||
purple: "hover:bg-purple-50",
|
purple: "hover:bg-purple-50",
|
||||||
fuchsia: "hover:bg-fuchsia-50",
|
fuchsia: "hover:bg-fuchsia-50",
|
||||||
pink: "hover:bg-pink-50",
|
pink: "hover:bg-pink-50",
|
||||||
rose: "hover:bg-rose-50",
|
rose: "hover:bg-rose-50",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const textColorsHex = {
|
export const textColorsHex = {
|
||||||
red: "rgb(185 28 28)",
|
red: "rgb(185 28 28)",
|
||||||
orange: "rgb(194 65 12)",
|
orange: "rgb(194 65 12)",
|
||||||
amber: "rgb(180 83 9)",
|
amber: "rgb(180 83 9)",
|
||||||
yellow: "rgb(161 98 7)",
|
yellow: "rgb(161 98 7)",
|
||||||
lime: "rgb(77 124 15)",
|
lime: "rgb(77 124 15)",
|
||||||
green: "rgb(21 128 61)",
|
green: "rgb(21 128 61)",
|
||||||
emerald: "rgb(4 120 87)",
|
emerald: "rgb(4 120 87)",
|
||||||
teal: "rgb(15 118 110)",
|
teal: "rgb(15 118 110)",
|
||||||
cyan: "rgb(14 116 144)",
|
cyan: "rgb(14 116 144)",
|
||||||
sky: "rgb(3 105 161)",
|
sky: "rgb(3 105 161)",
|
||||||
blue: "rgb(29 78 216)",
|
blue: "rgb(29 78 216)",
|
||||||
indigo: "rgb(67 56 202)",
|
indigo: "rgb(67 56 202)",
|
||||||
violet: "rgb(109 40 217)",
|
violet: "rgb(109 40 217)",
|
||||||
purple: "rgb(126 34 206)",
|
purple: "rgb(126 34 206)",
|
||||||
fuchsia: "rgb(162 28 175)",
|
fuchsia: "rgb(162 28 175)",
|
||||||
pink: "rgb(190 24 93)",
|
pink: "rgb(190 24 93)",
|
||||||
rose: "rgb(190 18 60)",
|
rose: "rgb(190 18 60)",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const bgColorsHex = {
|
export const bgColorsHex = {
|
||||||
red: "rgb(254 226 226)",
|
red: "rgb(254 226 226)",
|
||||||
orange: "rgb(255 237 213)",
|
orange: "rgb(255 237 213)",
|
||||||
amber: "rgb(254 243 199)",
|
amber: "rgb(254 243 199)",
|
||||||
yellow: "rgb(254 249 195)",
|
yellow: "rgb(254 249 195)",
|
||||||
lime: "rgb(236 252 203)",
|
lime: "rgb(236 252 203)",
|
||||||
green: "rgb(220 252 231)",
|
green: "rgb(220 252 231)",
|
||||||
emerald: "rgb(209 250 229)",
|
emerald: "rgb(209 250 229)",
|
||||||
teal: "rgb(204 251 241)",
|
teal: "rgb(204 251 241)",
|
||||||
cyan: "rgb(207 250 254)",
|
cyan: "rgb(207 250 254)",
|
||||||
sky: "rgb(224 242 254)",
|
sky: "rgb(224 242 254)",
|
||||||
blue: "rgb(219 234 254)",
|
blue: "rgb(219 234 254)",
|
||||||
indigo: "rgb(224 231 255)",
|
indigo: "rgb(224 231 255)",
|
||||||
violet: "rgb(237 233 254)",
|
violet: "rgb(237 233 254)",
|
||||||
purple: "rgb(243 232 255)",
|
purple: "rgb(243 232 255)",
|
||||||
fuchsia: "rgb(250 232 255)",
|
fuchsia: "rgb(250 232 255)",
|
||||||
pink: "rgb(252 231 243)",
|
pink: "rgb(252 231 243)",
|
||||||
rose: "rgb(255 228 230)",
|
rose: "rgb(255 228 230)",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const taskTypeMap: { [key: string]: string } = {
|
export const taskTypeMap: { [key: string]: string } = {
|
||||||
MULTICLASS_CLASSIFICATION: "Multiclass Classification",
|
MULTICLASS_CLASSIFICATION: "Multiclass Classification",
|
||||||
};
|
};
|
||||||
|
|
||||||
const charWidths: { [char: string]: number } = {
|
const charWidths: { [char: string]: number } = {
|
||||||
" ": 0.2,
|
" ": 0.2,
|
||||||
"!": 0.2,
|
"!": 0.2,
|
||||||
'"': 0.3,
|
'"': 0.3,
|
||||||
"#": 0.5,
|
"#": 0.5,
|
||||||
$: 0.5,
|
$: 0.5,
|
||||||
"%": 0.5,
|
"%": 0.5,
|
||||||
"&": 0.5,
|
"&": 0.5,
|
||||||
"(": 0.2,
|
"(": 0.2,
|
||||||
")": 0.2,
|
")": 0.2,
|
||||||
"*": 0.5,
|
"*": 0.5,
|
||||||
"+": 0.5,
|
"+": 0.5,
|
||||||
",": 0.2,
|
",": 0.2,
|
||||||
"-": 0.2,
|
"-": 0.2,
|
||||||
".": 0.1,
|
".": 0.1,
|
||||||
"/": 0.5,
|
"/": 0.5,
|
||||||
":": 0.2,
|
":": 0.2,
|
||||||
";": 0.2,
|
";": 0.2,
|
||||||
"<": 0.5,
|
"<": 0.5,
|
||||||
"=": 0.5,
|
"=": 0.5,
|
||||||
">": 0.5,
|
">": 0.5,
|
||||||
"?": 0.2,
|
"?": 0.2,
|
||||||
"@": 0.5,
|
"@": 0.5,
|
||||||
"[": 0.2,
|
"[": 0.2,
|
||||||
"\\": 0.5,
|
"\\": 0.5,
|
||||||
"]": 0.2,
|
"]": 0.2,
|
||||||
"^": 0.5,
|
"^": 0.5,
|
||||||
_: 0.2,
|
_: 0.2,
|
||||||
"`": 0.5,
|
"`": 0.5,
|
||||||
"{": 0.2,
|
"{": 0.2,
|
||||||
"|": 0.2,
|
"|": 0.2,
|
||||||
"}": 0.2,
|
"}": 0.2,
|
||||||
"~": 0.5,
|
"~": 0.5,
|
||||||
};
|
};
|
||||||
|
|
||||||
for (let i = 65; i <= 90; i++) {
|
for (let i = 65; i <= 90; i++) {
|
||||||
charWidths[String.fromCharCode(i)] = 0.6;
|
charWidths[String.fromCharCode(i)] = 0.6;
|
||||||
}
|
}
|
||||||
for (let i = 97; i <= 122; i++) {
|
for (let i = 97; i <= 122; i++) {
|
||||||
charWidths[String.fromCharCode(i)] = 0.5;
|
charWidths[String.fromCharCode(i)] = 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function measureTextWidth(text: string, fontSize: number) {
|
export function measureTextWidth(text: string, fontSize: number) {
|
||||||
let wordWidth = 0;
|
let wordWidth = 0;
|
||||||
for (let j = 0; j < text.length; j++) {
|
for (let j = 0; j < text.length; j++) {
|
||||||
let char = text[j];
|
let char = text[j];
|
||||||
let charWidth = charWidths[char] || 0.5;
|
let charWidth = charWidths[char] || 0.5;
|
||||||
wordWidth += charWidth * fontSize;
|
wordWidth += charWidth * fontSize;
|
||||||
}
|
}
|
||||||
return wordWidth;
|
return wordWidth;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function measureTextHeight(
|
export function measureTextHeight(
|
||||||
text: string,
|
text: string,
|
||||||
width: number,
|
width: number,
|
||||||
fontSize: number
|
fontSize: number
|
||||||
) {
|
) {
|
||||||
const charHeight = fontSize;
|
const charHeight = fontSize;
|
||||||
const lineHeight = charHeight * 1.5;
|
const lineHeight = charHeight * 1.5;
|
||||||
const words = text.split(" ");
|
const words = text.split(" ");
|
||||||
let lineWidth = 0;
|
let lineWidth = 0;
|
||||||
let totalHeight = 0;
|
let totalHeight = 0;
|
||||||
for (let i = 0; i < words.length; i++) {
|
for (let i = 0; i < words.length; i++) {
|
||||||
let word = words[i];
|
let word = words[i];
|
||||||
let wordWidth = measureTextWidth(word, fontSize);
|
let wordWidth = measureTextWidth(word, fontSize);
|
||||||
if (lineWidth + wordWidth + charWidths[" "] * fontSize <= width) {
|
if (lineWidth + wordWidth + charWidths[" "] * fontSize <= width) {
|
||||||
lineWidth += wordWidth + charWidths[" "] * fontSize;
|
lineWidth += wordWidth + charWidths[" "] * fontSize;
|
||||||
} else {
|
} else {
|
||||||
totalHeight += lineHeight;
|
totalHeight += lineHeight;
|
||||||
lineWidth = wordWidth;
|
lineWidth = wordWidth;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
totalHeight += lineHeight;
|
totalHeight += lineHeight;
|
||||||
return totalHeight;
|
return totalHeight;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function toCamelCase(str: string) {
|
export function toCamelCase(str: string) {
|
||||||
return str
|
return str
|
||||||
.split(" ")
|
.split(" ")
|
||||||
.map((word, index) =>
|
.map((word, index) =>
|
||||||
index === 0
|
index === 0
|
||||||
? word.toLowerCase()
|
? word.toLowerCase()
|
||||||
: word[0].toUpperCase() + word.slice(1).toLowerCase()
|
: word[0].toUpperCase() + word.slice(1).toLowerCase()
|
||||||
)
|
)
|
||||||
.join("");
|
.join("");
|
||||||
}
|
}
|
||||||
export function toFirstUpperCase(str: string) {
|
export function toFirstUpperCase(str: string) {
|
||||||
return str
|
return str
|
||||||
.split(" ")
|
.split(" ")
|
||||||
.map((word, index) => word[0].toUpperCase() + word.slice(1).toLowerCase())
|
.map((word, index) => word[0].toUpperCase() + word.slice(1).toLowerCase())
|
||||||
.join("");
|
.join("");
|
||||||
}
|
}
|
||||||
|
|
||||||
export function snakeToNormalCase(str: string) {
|
export function snakeToNormalCase(str: string) {
|
||||||
return str
|
return str
|
||||||
.split("_")
|
.split("_")
|
||||||
.map((word, index) => {
|
.map((word, index) => {
|
||||||
if (index === 0) {
|
if (index === 0) {
|
||||||
return word[0].toUpperCase() + word.slice(1).toLowerCase();
|
return word[0].toUpperCase() + word.slice(1).toLowerCase();
|
||||||
}
|
}
|
||||||
return word.toLowerCase();
|
return word.toLowerCase();
|
||||||
})
|
})
|
||||||
.join(" ");
|
.join(" ");
|
||||||
}
|
}
|
||||||
|
|
||||||
export function normalCaseToSnakeCase(str: string) {
|
export function normalCaseToSnakeCase(str: string) {
|
||||||
return str
|
return str
|
||||||
.split(" ")
|
.split(" ")
|
||||||
.map((word, index) => {
|
.map((word, index) => {
|
||||||
if (index === 0) {
|
if (index === 0) {
|
||||||
return word[0].toUpperCase() + word.slice(1).toLowerCase();
|
return word[0].toUpperCase() + word.slice(1).toLowerCase();
|
||||||
}
|
}
|
||||||
return word.toLowerCase();
|
return word.toLowerCase();
|
||||||
})
|
})
|
||||||
.join("_");
|
.join("_");
|
||||||
}
|
}
|
||||||
|
|
||||||
export function roundNumber(x: number, decimals: number) {
|
export function roundNumber(x: number, decimals: number) {
|
||||||
return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals);
|
return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
|
export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
|
||||||
const sourceId = edge.source;
|
const sourceId = edge.source;
|
||||||
const targetId = edge.target;
|
const targetId = edge.target;
|
||||||
const connectedNodes = nodes.filter(
|
const connectedNodes = nodes.filter(
|
||||||
(node) => node.id === targetId || node.id === sourceId
|
(node) => node.id === targetId || node.id === sourceId
|
||||||
);
|
);
|
||||||
return connectedNodes;
|
return connectedNodes;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isValidConnection(
|
export function isValidConnection(
|
||||||
{ source, target, sourceHandle, targetHandle }: Connection,
|
{ source, target, sourceHandle, targetHandle }: Connection,
|
||||||
reactFlowInstance: ReactFlowInstance
|
reactFlowInstance: ReactFlowInstance
|
||||||
) {
|
) {
|
||||||
if (
|
if (
|
||||||
sourceHandle.split("|")[0] === targetHandle.split("|")[0] ||
|
sourceHandle.split("|")[0] === targetHandle.split("|")[0] ||
|
||||||
sourceHandle
|
sourceHandle
|
||||||
.split("|")
|
.split("|")
|
||||||
.slice(2)
|
.slice(2)
|
||||||
.some((t) => t === targetHandle.split("|")[0]) ||
|
.some((t) => t === targetHandle.split("|")[0]) ||
|
||||||
targetHandle.split("|")[0] === "str"
|
targetHandle.split("|")[0] === "str"
|
||||||
) {
|
) {
|
||||||
let targetNode = reactFlowInstance.getNode(target).data.node;
|
let targetNode = reactFlowInstance.getNode(target).data.node;
|
||||||
if (!targetNode) {
|
if (!targetNode) {
|
||||||
if (
|
if (
|
||||||
!reactFlowInstance
|
!reactFlowInstance
|
||||||
.getEdges()
|
.getEdges()
|
||||||
.find((e) => e.targetHandle === targetHandle)
|
.find((e) => e.targetHandle === targetHandle)
|
||||||
) {
|
) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
} else if (
|
} else if (
|
||||||
(!targetNode.template[targetHandle.split("|")[1]].list &&
|
(!targetNode.template[targetHandle.split("|")[1]].list &&
|
||||||
!reactFlowInstance
|
!reactFlowInstance
|
||||||
.getEdges()
|
.getEdges()
|
||||||
.find((e) => e.targetHandle === targetHandle)) ||
|
.find((e) => e.targetHandle === targetHandle)) ||
|
||||||
targetNode.template[targetHandle.split("|")[1]].list
|
targetNode.template[targetHandle.split("|")[1]].list
|
||||||
) {
|
) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function removeApiKeys(flow: FlowType): FlowType {
|
export function removeApiKeys(flow: FlowType): FlowType {
|
||||||
let cleanFLow = _.cloneDeep(flow);
|
let cleanFLow = _.cloneDeep(flow);
|
||||||
cleanFLow.data.nodes.forEach((node) => {
|
cleanFLow.data.nodes.forEach((node) => {
|
||||||
for (const key in node.data.node.template) {
|
for (const key in node.data.node.template) {
|
||||||
if (key.includes("api")) {
|
if (key.includes("api")) {
|
||||||
console.log(node.data.node.template[key]);
|
console.log(node.data.node.template[key]);
|
||||||
node.data.node.template[key].value = "";
|
node.data.node.template[key].value = "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return cleanFLow;
|
return cleanFLow;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function updateObject<T extends Record<string, any>>(
|
export function updateObject<T extends Record<string, any>>(
|
||||||
reference: T,
|
reference: T,
|
||||||
objectToUpdate: T
|
objectToUpdate: T
|
||||||
): T {
|
): T {
|
||||||
let clonedObject = _.cloneDeep(objectToUpdate);
|
let clonedObject = _.cloneDeep(objectToUpdate);
|
||||||
// Loop through each key in the object to update
|
// Loop through each key in the object to update
|
||||||
for (const key in clonedObject) {
|
for (const key in clonedObject) {
|
||||||
// If the key is not in the reference object, delete it
|
// If the key is not in the reference object, delete it
|
||||||
if (!(key in reference)) {
|
if (!(key in reference)) {
|
||||||
delete clonedObject[key];
|
delete clonedObject[key];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Loop through each key in the reference object
|
// Loop through each key in the reference object
|
||||||
for (const key in reference) {
|
for (const key in reference) {
|
||||||
// If the key is not in the object to update, add it
|
// If the key is not in the object to update, add it
|
||||||
if (!(key in clonedObject)) {
|
if (!(key in clonedObject)) {
|
||||||
clonedObject[key] = reference[key];
|
clonedObject[key] = reference[key];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return clonedObject;
|
return clonedObject;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function debounce(func, wait) {
|
export function debounce(func, wait) {
|
||||||
let timeout;
|
let timeout;
|
||||||
return function (...args) {
|
return function (...args) {
|
||||||
const context = this;
|
const context = this;
|
||||||
clearTimeout(timeout);
|
clearTimeout(timeout);
|
||||||
timeout = setTimeout(() => func.apply(context, args), wait);
|
timeout = setTimeout(() => func.apply(context, args), wait);
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateTemplate(
|
||||||
|
reference: APITemplateType,
|
||||||
|
objectToUpdate: APITemplateType
|
||||||
|
): APITemplateType {
|
||||||
|
let clonedObject:APITemplateType = _.cloneDeep(reference);
|
||||||
|
|
||||||
|
// Loop through each key in the reference object
|
||||||
|
for (const key in clonedObject) {
|
||||||
|
// If the key is not in the object to update, add it
|
||||||
|
if (objectToUpdate[key] && objectToUpdate[key].value) {
|
||||||
|
clonedObject[key].value = objectToUpdate[key].value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return clonedObject;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue