formatting

This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-24 15:30:00 -03:00
commit 078626052f
3 changed files with 88 additions and 78 deletions

View file

@ -1,4 +1,4 @@
import { cloneDeep, flow } from "lodash";
import { cloneDeep } from "lodash";
import React, { useContext, useEffect, useRef, useState } from "react";
import { Handle, Position, useUpdateNodeInternals } from "reactflow";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
@ -14,6 +14,7 @@ import PromptAreaComponent from "../../../../components/promptComponent";
import TextAreaComponent from "../../../../components/textAreaComponent";
import ToggleShadComponent from "../../../../components/toggleShadComponent";
import { MAX_LENGTH_TO_SCROLL_TOOLTIP } from "../../../../constants/constants";
import { PopUpContext } from "../../../../contexts/popUpContext";
import { TabsContext } from "../../../../contexts/tabsContext";
import { typesContext } from "../../../../contexts/typesContext";
import { ParameterComponentType } from "../../../../types/components";
@ -51,6 +52,7 @@ export default function ParameterComponent({
const updateNodeInternals = useUpdateNodeInternals();
const [position, setPosition] = useState(0);
const { setTabsState, tabId, save, flows } = useContext(TabsContext);
const { closeEdit } = useContext(PopUpContext);
// Update component position
useEffect(() => {
@ -100,25 +102,33 @@ export default function ParameterComponent({
);
}, [info]);
useEffect(() => {
let groupedObj = groupByFamily(myData, tooltipTitle, left, data.type, flows.find((f) => f.id === tabId).data.nodes);
if(groupedObj?.length === 0){
groupedObj = groupByFamilyCustom(myData, tooltipTitle, left, data.type, flows.find((f) => f.id === tabId).data.nodes)
}
console.log(flows.find((f) => f.id === tabId).data.nodes);
let groupedObj = groupByFamily(
myData,
tooltipTitle,
left,
data.type,
flows.find((f) => f.id === tabId).data.nodes
);
if(groupedObj){
if (groupedObj?.length === 0) {
groupedObj = groupByFamilyCustom(
myData,
tooltipTitle,
left,
data.type,
flows.find((f) => f.id === tabId).data.nodes
);
}
if (groupedObj) {
refNumberComponents.current = groupedObj[0]?.type?.length;
refHtml.current = groupedObj.map((item, i) => {
const Icon: any = nodeIconsLucide[item.family];
return (
<span
key={getRandomKeyByssmm() + item.family + i}
@ -141,31 +151,34 @@ export default function ParameterComponent({
/>
</div>
<span className="ps-2 text-xs text-foreground">
{item.family !== 'custom_components' ? nodeNames[item.family] : item.component ?? ""}{" "}
<span className="text-xs">
{" "}
{item.type === "" ? "" : " - "}
{item.type.split(", ").length > 2
? item.type.split(", ").map((el, i) => (
<React.Fragment key={el + i}>
<span>
{i === item.type.split(", ").length - 1
? el
: (el += `, `)}
</span>
</React.Fragment>
))
: item.type}
{item.family !== "custom_components"
? nodeNames[item.family]
: item.component ?? ""}{" "}
<span className="text-xs">
{" "}
{item.type === "" ? "" : " - "}
{item.type.split(", ").length > 2
? item.type.split(", ").map((el, i) => (
<React.Fragment key={el + i}>
<span>
{i === item.type.split(", ").length - 1
? el
: (el += `, `)}
</span>
</React.Fragment>
))
: item.type}
</span>
</span>
</span>
</span>
);
});
}
}, [tooltipTitle, flows.find((f) => f.id === tabId).data.nodes]);
}, [
tooltipTitle,
flows.find((f) => f.id === tabId).data.nodes.length,
closeEdit,
]);
return (
<div
ref={ref}

View file

@ -11,9 +11,11 @@ import { Button } from "../../components/ui/button";
import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants/constants";
import { alertContext } from "../../contexts/alertContext";
import { darkContext } from "../../contexts/darkContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { typesContext } from "../../contexts/typesContext";
import { postCustomComponent, postValidateCode } from "../../controllers/API";
import { APIClassType } from "../../types/api";
import { getRandomKeyByssmm } from "../../utils/utils";
import BaseModal from "../baseModal";
export default function CodeAreaModal({
@ -39,6 +41,7 @@ export default function CodeAreaModal({
const [error, setError] = useState<{
detail: { error: string; traceback: string };
}>(null);
const { setCloseEdit } = useContext(PopUpContext);
useEffect(() => {
// if nodeClass.template has more fields other than code and dynamic is true
@ -61,6 +64,7 @@ export default function CodeAreaModal({
});
setOpen(false);
setValue(code);
setCloseEdit(getRandomKeyByssmm().toString());
// setValue(code);
} else {
if (funcErrors.length !== 0) {
@ -97,6 +101,7 @@ export default function CodeAreaModal({
setNodeClass(data);
setValue(code);
setOpen(false);
setCloseEdit(getRandomKeyByssmm().toString());
}
})
.catch((err) => {

View file

@ -208,7 +208,6 @@ export function groupByFamily(data, baseClasses, left, type, flow) {
export function groupByFamilyCustom(data, baseClasses, left, type, flow) {
let arrOfParentCustom: string[] = [];
let arrOfType: { family: string; type: string; component: string }[] = [];
if (type === "CustomComponent") {
const uniqueValuesSet = new Set();
@ -222,8 +221,6 @@ export function groupByFamilyCustom(data, baseClasses, left, type, flow) {
});
}
if (left === false) {
arrOfParentCustom.map((n) => {
try {
@ -236,13 +233,13 @@ export function groupByFamilyCustom(data, baseClasses, left, type, flow) {
console.log(e);
}
});
}
else{
} else {
flow.forEach((element) => {
Object.keys(element["data"]["node"]["template"]).map((el) => {
if(element["data"]["node"]["template"][el].input_types && element["data"]["node"]["template"][el].input_types.length > 0){
if (
element["data"]["node"]["template"][el].input_types &&
element["data"]["node"]["template"][el].input_types.length > 0
) {
element["data"]["node"]["template"][el].input_types.map((n) => {
try {
arrOfType.push({
@ -255,52 +252,47 @@ export function groupByFamilyCustom(data, baseClasses, left, type, flow) {
}
});
}
});
});
}
const groupedResult = {};
const groupedResult = {};
arrOfType.forEach((item) => {
const { family, type, component } = item;
if (groupedResult.hasOwnProperty(family)) {
if (!groupedResult[family].type.includes(type)) {
groupedResult[family].type += `, ${type}`;
}
} else {
groupedResult[family] = { family, type, component };
}
});
const result = Object.values(groupedResult);
if(left === false)
{
let resultFiltered = [];
flow.forEach((element) => {
Object.keys(element["data"]["node"]["template"]).map((el) => {
if(element["data"]["node"]["template"][el].input_types && element["data"]["node"]["template"][el].input_types.length > 0){
element["data"]["node"]["template"][el].input_types.map((n) => {
resultFiltered.push({
family: "custom_components",
type: n,
component: element["data"]["node"]["display_name"],
})
});
arrOfType.forEach((item) => {
const { family, type, component } = item;
if (groupedResult.hasOwnProperty(family)) {
if (!groupedResult[family].type.includes(type)) {
groupedResult[family].type += `, ${type}`;
}
});
} else {
groupedResult[family] = { family, type, component };
}
});
return resultFiltered;
}
else{
return result;
}
const result = Object.values(groupedResult);
if (left === false) {
let resultFiltered = [];
flow.forEach((element) => {
Object.keys(element["data"]["node"]["template"]).map((el) => {
if (
element["data"]["node"]["template"][el].input_types &&
element["data"]["node"]["template"][el].input_types.length > 0
) {
element["data"]["node"]["template"][el].input_types.map((n) => {
resultFiltered.push({
family: "custom_components",
type: n,
component: element["data"]["node"]["display_name"],
});
});
}
});
});
return resultFiltered;
} else {
return result;
}
}
export function buildInputs(tabsState, id) {