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

Refactor IOView component to use new state management

Browse source
This commit is contained in:
anovazzi1 2024-01-23 16:24:06 -03:00
commit 0a26bc52bf
1 changed files with 12 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/frontend/src/components/IOview/index.tsx
View file

@ -1,7 +1,7 @@
import { cloneDeep } from "lodash";
import { ReactNode, useState } from "react"; import { ReactNode, useState } from "react";
import useFlowStore from "../../stores/flowStore"; import useFlowStore from "../../stores/flowStore";
import useFlowIOStore from "../../stores/flowsIOStore"; import { NodeType } from "../../types/flow";
import { NodeDataType } from "../../types/flow";
import { extractTypeFromLongId } from "../../utils/utils"; import { extractTypeFromLongId } from "../../utils/utils";
import AccordionComponent from "../AccordionComponent"; import AccordionComponent from "../AccordionComponent";
import IconComponent from "../genericIconComponent"; import IconComponent from "../genericIconComponent";
@ -10,8 +10,9 @@ import { Badge } from "../ui/badge";
import { Textarea } from "../ui/textarea"; import { Textarea } from "../ui/textarea";
export default function IOView(): JSX.Element { export default function IOView(): JSX.Element {
const { inputIds, outputIds, updateNodeFlowData } = useFlowIOStore(); const { inputIds, outputIds } = useFlowStore();
const { reactFlowInstance } = useFlowStore(); const nodes = useFlowStore((state) => state.nodes);
const setNode = useFlowStore((state) => state.setNode);
const options = inputIds.concat(outputIds); const options = inputIds.concat(outputIds);
const [selectedView, setSelectedView] = useState<ReactNode>( const [selectedView, setSelectedView] = useState<ReactNode>(
handleSelectChange(options[0]) handleSelectChange(options[0])
@ -39,9 +40,7 @@ export default function IOView(): JSX.Element {
{inputIds {inputIds
.filter((input) => extractTypeFromLongId(input) !== "ChatInput") .filter((input) => extractTypeFromLongId(input) !== "ChatInput")
.map((inputId, index) => { .map((inputId, index) => {
const nodeData: NodeDataType = reactFlowInstance const node: NodeType = nodes.find((node) => node.id === inputId)!;
?.getNodes()
.find((node) => node.id === inputId)?.data;
return ( return (
<div className="file-component-accordion-div" key={index}> <div className="file-component-accordion-div" key={index}>
<AccordionComponent <AccordionComponent
@ -61,21 +60,21 @@ export default function IOView(): JSX.Element {
key={index} key={index}
keyValue={inputId} keyValue={inputId}
> >
{/* TODO: EXTEND AND IMPROVE VIEW MODE AND ADD OTHER TYPES OF VIEWS */}
<div className="file-component-tab-column"> <div className="file-component-tab-column">
<Textarea <Textarea
value={ value={
reactFlowInstance nodes.find((node) => node.id === inputId)?.data?.node
?.getNodes()
.find((node) => node.id === inputId)?.data?.node
?.template?.value.value ?.template?.value.value
} }
className="custom-scroll" className="custom-scroll"
onChange={(e) => { onChange={(e) => {
e.target.value; e.target.value;
if (nodeData) { if (node) {
nodeData.node!.template["value"].value = let newNode = cloneDeep(node);
newNode.data.node!.template["value"].value =
e.target.value; e.target.value;
updateNodeFlowData(inputId, nodeData); setNode(node.id, newNode);
} }
}} }}
placeholder="Enter text..." placeholder="Enter text..."