formatting
This commit is contained in:
parent
891abae528
commit
078626052f
3 changed files with 88 additions and 78 deletions
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue