jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Added scroll on tooltip, added logic to check base_classes in flow nodes before the /all list

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-31 08:41:52 -03:00
commit 3683c01102
3 changed files with 71 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -102,7 +102,7 @@ export default function ParameterComponent({
}, [info]);
function renderTooltips() {
let groupedObj = groupByFamily(myData, tooltipTitle, left);
let groupedObj = groupByFamily(myData, tooltipTitle, left, flow);
if (groupedObj) {
refNumberComponents.current = groupedObj[0]?.type?.length;
@ -133,7 +133,7 @@ export default function ParameterComponent({
/>
</div>
<span className="ps-2 text-xs text-foreground">
{nodeNames[item.family]}
{nodeNames[item.family] ?? "Unknown"}
<span className="text-xs">
{" "}
{item.type === "" ? "" : " - "}

2
src/frontend/src/components/ui/tooltip.tsx
View file

@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
"overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
className
)}
{...props}

94
src/frontend/src/utils/utils.ts
View file

@ -2,10 +2,9 @@ import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "../flow_constants";
import { IVarHighlightType } from "../types/components";
import { FlowType } from "../types/flow";
import { FlowType, NodeType } from "../types/flow";
import { TabsState } from "../types/tabs";
import { buildTweaks } from "./reactflowUtils";
import { nodeNames } from "./styleUtils";
export function classNames(...classes: Array<string>) {
return classes.filter(Boolean).join(" ");
@ -89,32 +88,75 @@ export function checkUpperWords(str: string) {
export const isWrappedWithClass = (event: any, className: string | undefined) =>
event.target.closest(`.${className}`);
export function groupByFamily(data, baseClasses, left) {
const baseClassesSet = new Set(baseClasses.split("\n"));
let arrOfPossibleInputs = [];
let arrOfPossibleOutputs = [];
for (const [d, nodes] of Object.entries(data)) {
let tempInputs = [], tempOutputs = [];
for (const [n, node] of Object.entries(nodes)) {
const hasBaseClassInTemplate = Object.values(node.template).some((t: any) => t.type && baseClassesSet.has(t.type));
const hasBaseClassInBaseClasses = node.base_classes.some(t => baseClassesSet.has(t));
if(hasBaseClassInTemplate) tempInputs.push(n);
if(hasBaseClassInBaseClasses) tempOutputs.push(n);
}
const totalNodes = Object.keys(nodes).length;
if(tempInputs.length) arrOfPossibleInputs.push({category: d, nodes: tempInputs, full: tempInputs.length === totalNodes});
if(tempOutputs.length) arrOfPossibleOutputs.push({category: d, nodes: tempOutputs, full: tempOutputs.length === totalNodes});
}
return left
? arrOfPossibleOutputs.map(t => ({family: t.category, type: t.full ? "" : t.nodes.join(", ")}))
: arrOfPossibleInputs.map(t => ({family: t.category, type: t.full ? "" : t.nodes.join(", ")}));
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,
});
}
for (const [d, nodes] of Object.entries(data)) {
let tempInputs = [],
tempOutputs = [];
for (const [n, node] of Object.entries(nodes)) {
let hasBaseClassInTemplate, hasBaseClassInBaseClasses;
const foundNode = checkedNodes.get(n);
if (foundNode) {
hasBaseClassInBaseClasses = foundNode.hasBaseClassInBaseClasses;
hasBaseClassInTemplate = foundNode.hasBaseClassInTemplate;
} else {
hasBaseClassInTemplate = Object.values(node.template).some(
(t: any) => t.type && baseClassesSet.has(t.type)
);
hasBaseClassInBaseClasses = node.base_classes.some((t) =>
baseClassesSet.has(t)
);
}
if (hasBaseClassInTemplate) tempInputs.push(n);
if (hasBaseClassInBaseClasses) tempOutputs.push(n);
}
const totalNodes = Object.keys(nodes).length;
if (tempInputs.length)
arrOfPossibleInputs.push({
category: d,
nodes: tempInputs,
full: tempInputs.length === totalNodes,
});
if (tempOutputs.length)
arrOfPossibleOutputs.push({
category: d,
nodes: tempOutputs,
full: tempOutputs.length === totalNodes,
});
}
return left
? arrOfPossibleOutputs.map((t) => ({
family: t.category,
type: t.full ? "" : t.nodes.join(", "),
}))
: arrOfPossibleInputs.map((t) => ({
family: t.category,
type: t.full ? "" : t.nodes.join(", "),
}));
}
export function buildInputs(tabsState, id) {
return tabsState &&
tabsState[id] &&