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

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

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-31 09:57:06 -03:00
commit 2ec4cf1a55
5 changed files with 62 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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({
</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 overflow-y-scroll nowheel"
: "tooltip-fixed-width"
"tooltip-fixed-width custom-scroll nowheel"
}
delayDuration={0}
content={refHtml.current}

2
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

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

7
src/frontend/src/constants/constants.ts
View file

@ -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

2
src/frontend/src/style/applies.css
View file

@ -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 {

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

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