Fixed logic of getting tooltips, added description when tooltip is empty

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) {
+    if (groupedObj && groupedObj.length > 0) {
-      refNumberComponents.current = groupedObj[0]?.type?.length;
-
       refHtml.current = groupedObj.map((item, i) => {
         const Icon: any =
           nodeIconsLucide[item.family] ?? nodeIconsLucide["unknown"];
@@ -153,6 +150,10 @@ export default function ParameterComponent({
           </span>
         );
       });
+    } else {
+      refHtml.current = <span>
+        {TOOLTIP_EMPTY}
+      </span>
     }
   }
 
@@ -202,9 +203,7 @@ export default function ParameterComponent({
         ) : (
           <ShadTooltip
             styleClasses={
-              refNumberComponents.current > MAX_LENGTH_TO_SCROLL_TOOLTIP
+              "tooltip-fixed-width custom-scroll nowheel"
-                ? "tooltip-fixed-width custom-scroll overflow-y-scroll nowheel"
-                : "tooltip-fixed-width"
             }
             delayDuration={0}
             content={refHtml.current}

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);

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

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 {

src/frontend/src/utils/utils.ts

@@ -88,24 +88,42 @@ 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();
 
+  if (flow) {
     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,
+        hasBaseClassInTemplate:
-      hasBaseClassInBaseClasses,
+          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)) {
     let tempInputs = [],
@@ -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)