From 2ec4cf1a55e431d74c4a37abf2c4edfe04e57c06 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 31 Jul 2023 09:57:06 -0300 Subject: [PATCH] Fixed logic of getting tooltips, added description when tooltip is empty --- .../components/parameterComponent/index.tsx | 15 +++-- .../src/CustomNodes/GenericNode/index.tsx | 2 - src/frontend/src/constants/constants.ts | 7 +++ src/frontend/src/style/applies.css | 2 +- src/frontend/src/utils/utils.ts | 60 +++++++++++++++---- 5 files changed, 62 insertions(+), 24 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index dce5af259..c164046f2 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -13,7 +13,7 @@ import IntComponent from "../../../../components/intComponent"; 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 { MAX_LENGTH_TO_SCROLL_TOOLTIP, TOOLTIP_EMPTY } from "../../../../constants/constants"; import { TabsContext } from "../../../../contexts/tabsContext"; import { typesContext } from "../../../../contexts/typesContext"; import { ParameterComponentType } from "../../../../types/components"; @@ -44,7 +44,6 @@ export default function ParameterComponent({ }: ParameterComponentType) { const ref = useRef(null); const refHtml = useRef(null); - const refNumberComponents = useRef(0); const infoHtml = useRef(null); const updateNodeInternals = useUpdateNodeInternals(); const [position, setPosition] = useState(0); @@ -104,9 +103,7 @@ export default function ParameterComponent({ function renderTooltips() { let groupedObj = groupByFamily(myData, tooltipTitle, left, flow); - if (groupedObj) { - refNumberComponents.current = groupedObj[0]?.type?.length; - + if (groupedObj && groupedObj.length > 0) { refHtml.current = groupedObj.map((item, i) => { const Icon: any = nodeIconsLucide[item.family] ?? nodeIconsLucide["unknown"]; @@ -153,6 +150,10 @@ export default function ParameterComponent({ ); }); + } else { + refHtml.current = + {TOOLTIP_EMPTY} + } } @@ -202,9 +203,7 @@ export default function ParameterComponent({ ) : ( MAX_LENGTH_TO_SCROLL_TOOLTIP - ? "tooltip-fixed-width custom-scroll overflow-y-scroll nowheel" - : "tooltip-fixed-width" + "tooltip-fixed-width custom-scroll nowheel" } delayDuration={0} content={refHtml.current} diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 32ade1ad1..ad46c532c 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -23,10 +23,8 @@ export default function GenericNode({ selected: boolean; }) { const [data, setData] = useState(olddata); - const { setErrorData } = useContext(alertContext); const { updateFlow, flows, tabId } = useContext(TabsContext); const updateNodeInternals = useUpdateNodeInternals(); - const showError = useRef(true); const { types, deleteNode, reactFlowInstance } = useContext(typesContext); const name = nodeIconsLucide[data.type] ? data.type : types[data.type]; const [validationStatus, setValidationStatus] = useState(null); diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index a8728834d..73d242bba 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -143,6 +143,13 @@ export const TEXT_DIALOG_SUBTITLE = "Edit your text."; export const IMPORT_DIALOG_SUBTITLE = "Upload a JSON file or select from the available community examples."; +/** + * The text that shows when a tooltip is empty + * @constant + */ +export const TOOLTIP_EMPTY = + "No compatible components found."; + /** * The base text for subtitle of code dialog * @constant diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css index bc820d1f3..45730fed4 100644 --- a/src/frontend/src/style/applies.css +++ b/src/frontend/src/style/applies.css @@ -992,7 +992,7 @@ } .tooltip-fixed-width { - @apply max-h-[20vh] max-w-[30vw] overflow-auto; + @apply max-h-[25vh] max-w-[30vw] overflow-auto; } .ace-editor-arrangement { diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts index df8eb6e32..004e856dc 100644 --- a/src/frontend/src/utils/utils.ts +++ b/src/frontend/src/utils/utils.ts @@ -88,23 +88,41 @@ export function checkUpperWords(str: string) { export const isWrappedWithClass = (event: any, className: string | undefined) => event.target.closest(`.${className}`); -export function groupByFamily(data, baseClasses, left, flow: NodeType[]) { +export function groupByFamily(data, baseClasses, left, flow?: NodeType[]) { const baseClassesSet = new Set(baseClasses.split("\n")); let arrOfPossibleInputs = []; let arrOfPossibleOutputs = []; let checkedNodes = new Map(); - for (const node of flow) { - const hasBaseClassInTemplate = Object.values(node.data.node.template).some( - (t: any) => t.type && baseClassesSet.has(t.type) - ); - const hasBaseClassInBaseClasses = node.data.node.base_classes.some((t) => - baseClassesSet.has(t) - ); - checkedNodes.set(node.data.type, { - hasBaseClassInTemplate, - hasBaseClassInBaseClasses, - }); + if (flow) { + for (const node of flow) { + checkedNodes.set(node.data.type, { + hasBaseClassInTemplate: + checkedNodes.get(node.data.type)?.hasBaseClassInTemplate || + Object.values(node.data.node.template).some( + (t: any) => + t.type && + t.show && + !( + (t.type === "str" || + t.type === "bool" || + t.type === "float" || + t.type === "code" || + t.type === "prompt" || + t.type === "file" || + t.type === "int") && + !( + t.input_types && + t.input_types.some((x) => baseClassesSet.has(x)) + ) + ) && + baseClassesSet.has(t.type) + ), + hasBaseClassInBaseClasses: + checkedNodes.get(node.data.type)?.hasBaseClassInBaseClasses || + node.data.node.base_classes.some((t) => baseClassesSet.has(t)), + }); + } } for (const [d, nodes] of Object.entries(data)) { @@ -120,7 +138,23 @@ export function groupByFamily(data, baseClasses, left, flow: NodeType[]) { hasBaseClassInTemplate = foundNode.hasBaseClassInTemplate; } else { hasBaseClassInTemplate = Object.values(node.template).some( - (t: any) => t.type && baseClassesSet.has(t.type) + (t: any) => + t.type && + t.show && + !( + (t.type === "str" || + t.type === "bool" || + t.type === "float" || + t.type === "code" || + t.type === "prompt" || + t.type === "file" || + t.type === "int") && + !( + t.input_types && + t.input_types.some((x) => baseClassesSet.has(x)) + ) + ) && + baseClassesSet.has(t.type) ); hasBaseClassInBaseClasses = node.base_classes.some((t) => baseClassesSet.has(t)