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

Merge branch 'dev' into 335-implement-docarray-vectorstore

Browse source
This commit is contained in:
Gabriel Almeida 2023-05-26 18:22:40 -03:00
commit 7280fae428
9 changed files with 102 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -58,7 +58,6 @@ export default function GenericNode({
if (response.status === 200) {
let jsonResponse = await response.json();
let jsonResponseParsed = await JSON.parse(jsonResponse);
console.log(jsonResponseParsed);
setValidationStatus(jsonResponseParsed);
}
} catch (error) {

5
src/frontend/src/contexts/tabsContext.tsx
View file

@ -58,7 +58,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
}
useEffect(() => {
//save tabs locally
// console.log(id)
save();
}, [flows, id, tabIndex, newNodeId]);
@ -173,8 +172,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
*/
function paste(selectionInstance, position){
console.log(position);
console.log(selectionInstance)
let minimumX = Infinity;
let minimumY = Infinity;
let idsMap = {};
@ -214,7 +211,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
nodes = nodes
.map((e) => ({ ...e, selected: false }))
.concat({ ...newNode, selected: false })
console.log(nodes);
});
reactFlowInstance.setNodes(nodes);
@ -250,7 +246,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
},
edges.map((e) => ({ ...e, selected: false }))
);
console.log(edges);
});
reactFlowInstance.setEdges(edges);
};

1
src/frontend/src/modals/chatModal/index.tsx
View file

@ -183,7 +183,6 @@ export default function ChatModal({
newWs.onopen = () => {
console.log("WebSocket connection established!");
};
console.log(flow.id);
newWs.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log("Received data:", data);

2
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -129,9 +129,7 @@ export default function CodeAreaModal({
onClick={() => {
checkCode(code)
.then((apiReturn) => {
console.log(apiReturn);
if (apiReturn.data) {
console.log(apiReturn.data);
let importsErrors = apiReturn.data.imports.errors;
let funcErrors = apiReturn.data.function.errors;
if (

100
src/frontend/src/modals/importModal/buttonBox/index.tsx
View file

@ -1,4 +1,4 @@
import React, { ReactNode, useEffect } from "react";
import React, { ReactNode, useEffect, useRef, useState } from "react";
import { DocumentDuplicateIcon } from "@heroicons/react/solid";
import { classNames } from "../../../utils";
import Tooltip from "../../../components/TooltipComponent";
@ -24,7 +24,7 @@ export default function ButtonBox({
}) {
let bigCircle: string;
let smallCircle: string;
let titleFontSize: string;
let minTitleFontSize: number;
let descriptionFontSize: string;
let padding: string;
let marginTop: string;
@ -32,23 +32,24 @@ export default function ButtonBox({
let width: string;
let textHeight: number;
let textWidth: number;
const [truncate, setTruncate] = useState<boolean>(false);
switch (size) {
case "small":
bigCircle = "h-12 w-12";
smallCircle = "h-8 w-8";
titleFontSize = "text-sm";
minTitleFontSize =9;
descriptionFontSize = "text-xs";
padding = "p-2 py-3";
marginTop = "mt-2";
height = "h-36";
textHeight = 70;
textWidth = 80;
textWidth = 40;
width = "w-32";
break;
case "medium":
bigCircle = "h-16 w-16";
smallCircle = "h-12 w-12";
titleFontSize = "text-base";
minTitleFontSize = 11;
descriptionFontSize = "text-sm";
padding = "p-4 py-5";
marginTop = "mt-3";
@ -60,7 +61,7 @@ export default function ButtonBox({
case "big":
bigCircle = "h-20 w-20";
smallCircle = "h-16 w-16";
titleFontSize = "text-lg";
minTitleFontSize = 12;
descriptionFontSize = "text-sm";
padding = "p-8 py-10";
marginTop = "mt-6";
@ -70,7 +71,7 @@ export default function ButtonBox({
default:
bigCircle = "h-20 w-20";
smallCircle = "h-16 w-16";
titleFontSize = "text-lg";
minTitleFontSize = 12;
descriptionFontSize = "text-sm";
padding = "p-8 py-10";
marginTop = "mt-6";
@ -79,43 +80,41 @@ export default function ButtonBox({
break;
}
const titleRef = React.useRef<HTMLHeadingElement>(null);
const [fontSize, setFontSize] = useState<number>(16); // Initial font size value
const titleRef = useRef<HTMLHeadingElement>(null);
const parentDivRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const resizeFont = () => {
const titleElement = titleRef.current;
if (titleElement) {
const containerWidth = titleElement.offsetWidth;
const containerHeight = titleElement.offsetHeight;
const titleComputedStyle = window.getComputedStyle(titleElement);
const titleWidth = titleElement.getBoundingClientRect().width;
const currentFontSize = parseFloat(titleComputedStyle.fontSize);
const desiredWidth = textWidth - 10; // Subtracting the desired padding
// Calculate the desired font size based on the adjusted width
let desiredFontSize = currentFontSize * (desiredWidth / titleWidth);
// Adjust the desired font size to fit within the container height, if needed
const maxHeight = containerHeight - 10; // Subtracting the desired top padding
const maxHeightFontSize = maxHeight * 0.8; // Adjust the scaling factor as needed
desiredFontSize = Math.min(desiredFontSize, maxHeightFontSize);
// Apply the desired font size and padding to the title element
titleElement.style.fontSize = `${desiredFontSize}px`;
titleElement.style.paddingLeft = "5px";
titleElement.style.paddingRight = "5px";
}
};
resizeFont();
window.addEventListener("resize", resizeFont);
return () => {
window.removeEventListener("resize", resizeFont);
};
}, []);
const textElement = titleRef.current;
const parentDivElement = parentDivRef.current;
if (!textElement || !parentDivElement) return;
const parentDivHeight = parentDivElement.offsetHeight;
const parentDivWidth = parentDivElement.offsetWidth;
let textElementHeight = textElement.scrollHeight;
let textElementWidth = textElement.scrollWidth;
if (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth && fontSize > minTitleFontSize) {
let newFontSize = fontSize;
while (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth) {
newFontSize -= 1;
textElement.style.fontSize = `${newFontSize}px`;
textElementHeight = textElement.scrollHeight;
textElementWidth = textElement.scrollWidth;
}
if(newFontSize <= minTitleFontSize){
setTruncate(true);
setFontSize(minTitleFontSize);
}
else{
setFontSize(newFontSize);
}
}
}, [title, size, fontSize]);
return (
<button disabled={deactivate} onClick={onClick}>
@ -129,7 +128,7 @@ export default function ButtonBox({
)}
>
<div
className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full`}
className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full mb-1`}
>
<div
className={`flex items-center justify-center ${smallCircle} bg-white dark:bg-white/80 rounded-full`}
@ -137,16 +136,15 @@ export default function ButtonBox({
<div className={textColor}>{icon}</div>
</div>
</div>
<h3
<div ref={parentDivRef} className="w-full h-1/2 mt-auto">
<div
ref={titleRef}
className={classNames(
" font-semibold text-white dark:text-white/80",
marginTop
)}
>
className={classNames(truncate?"truncate":"",
" font-semibold text-white h-full dark:text-white/80",
)} >
{title}
</h3>
</div>
</div>
</div>
</button>
);

2
src/frontend/src/modals/importModal/index.tsx
View file

@ -180,7 +180,7 @@ export default function ImportModal() {
<div id="index">
{" "}
<ButtonBox
size="small"
size="big"
bgColor="bg-emerald-500 dark:bg-emerald-500/75"
description={
example.description ?? "Prebuilt Examples"

1
src/frontend/src/modals/promptModal/index.tsx
View file

@ -109,7 +109,6 @@ export default function PromptAreaModal({
onClick={() => {
checkPrompt(myValue)
.then((apiReturn) => {
console.log(apiReturn);
if (apiReturn.data) {
let inputVariables =
apiReturn.data.input_variables;

69
src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts
View file

@ -1,5 +1,7 @@
import { useCallback, useEffect, useState } from 'react';
import { useCallback, useContext, useEffect, useState } from 'react';
import { Edge, Node, useReactFlow } from 'reactflow';
import { TabsContext } from '../../../contexts/tabsContext';
import { cloneDeep } from 'lodash';
type UseUndoRedoOptions = {
maxHistorySize: number;
@ -30,47 +32,80 @@ export const useUndoRedo: UseUndoRedo = ({
enableShortcuts = defaultOptions.enableShortcuts,
} = defaultOptions) => {
// the past and future arrays store the states that we can jump to
const [past, setPast] = useState<HistoryItem[]>([]);
const [future, setFuture] = useState<HistoryItem[]>([]);
const { tabIndex, flows } = useContext(TabsContext);
const [past, setPast] = useState<HistoryItem[][]>(flows.map(()=>[]));
const [future, setFuture] = useState<HistoryItem[][]>(flows.map(()=>[]));
useEffect(() => {
// whenever the flows variable changes, we need to add one array to the past and future states
setPast((old) => flows.map((f, i)=>old[i] ? old[i] : []));
setFuture((old) => flows.map((f, i)=>old[i] ? old[i] : []));
}, [flows]);
const { setNodes, setEdges, getNodes, getEdges } = useReactFlow();
const takeSnapshot = useCallback(() => {
// push the current graph to the past state
setPast((past) => [
...past.slice(past.length - maxHistorySize + 1, past.length),
{ nodes: getNodes(), edges: getEdges() },
]);
setPast((old) => {
let newPast = cloneDeep(old);
newPast[tabIndex] = old[tabIndex].slice(old[tabIndex].length - maxHistorySize + 1, old[tabIndex].length);
newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
return newPast;
});
// whenever we take a new snapshot, the redo operations need to be cleared to avoid state mismatches
setFuture([]);
}, [getNodes, getEdges, maxHistorySize]);
setFuture((old) => {
let newFuture = cloneDeep(old);
newFuture[tabIndex] = [];
return newFuture
});
}, [getNodes, getEdges, past, future, tabIndex, setPast, setFuture, maxHistorySize]);
const undo = useCallback(() => {
// get the last state that we want to go back to
const pastState = past[past.length - 1];
const pastState = past[tabIndex][past[tabIndex].length - 1];
if (pastState) {
// first we remove the state from the history
setPast((past) => past.slice(0, past.length - 1));
setPast((old) => {
let newPast = cloneDeep(old);
newPast[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
return newPast
});
// we store the current graph for the redo operation
setFuture((future) => [...future, { nodes: getNodes(), edges: getEdges() }]);
setFuture((old) => {
let newFuture = cloneDeep(old);
newFuture[tabIndex] = old[tabIndex]
newFuture[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
return newFuture
});
// now we can set the graph to the past state
setNodes(pastState.nodes);
setEdges(pastState.edges);
}
}, [setNodes, setEdges, getNodes, getEdges, past]);
}, [setNodes, setEdges, getNodes, getEdges, future, past, setFuture, setPast, tabIndex]);
const redo = useCallback(() => {
const futureState = future[future.length - 1];
const futureState = future[tabIndex][future[tabIndex].length - 1];
if (futureState) {
setFuture((future) => future.slice(0, future.length - 1));
setPast((past) => [...past, { nodes: getNodes(), edges: getEdges() }]);
setFuture((old) => {
let newFuture = cloneDeep(old);
newFuture[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
return newFuture
});
setPast((old) => {
let newPast = cloneDeep(old);
newPast[tabIndex] = old[tabIndex];
newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
return newPast
});
setNodes(futureState.nodes);
setEdges(futureState.edges);
}
}, [setNodes, setEdges, getNodes, getEdges, future]);
}, [future, past, setFuture, setPast, setNodes, setEdges, getNodes, getEdges, future, tabIndex]);
useEffect(() => {
// this effect is used to attach the global event handlers

1
src/frontend/src/pages/FlowPage/index.tsx
View file

@ -56,7 +56,6 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
// this effect is used to attach the global event handlers
const onKeyDown = (event: KeyboardEvent) => {
console.log("keydownou", lastCopiedSelection, position);
if (
(event.ctrlKey || event.metaKey) &&
event.key === "c" &&