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

Disabled components done

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-17 18:27:49 -03:00
commit cc1bbefc84
7 changed files with 81 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

2
space_flow/src/CustomNodes/BooleanNode/index.tsx
View file

@ -26,7 +26,7 @@ export default function BooleanNode({ data }) {
</button>
</div>
<div className="w-full flex justify-center p-5 h-full">
<ToggleComponent enabled={enabled} setEnabled={(x) => {setEnabled(x); data.enabled = x}} />
<ToggleComponent enabled={enabled} disabled={false} setEnabled={(x) => {setEnabled(x); data.enabled = x}} />
</div>
<Handle
type="target"

14
space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -24,12 +24,7 @@ export default function ParameterComponent({
const ref = useRef(null);
const updateNodeInternals = useUpdateNodeInternals();
const [position, setPosition] = useState(0);
function updatePos(){
if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
setPosition(ref.current.offsetTop + ref.current.clientHeight / 2);
updateNodeInternals(data.id);
}
}
var _ = require('lodash');
useEffect(() => {
if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
setPosition(ref.current.offsetTop + ref.current.clientHeight / 2);
@ -42,6 +37,7 @@ export default function ParameterComponent({
}, [data.id, position, updateNodeInternals]);
const [enabled, setEnabled] = useState(data.node.template[name]?.value ?? false);
let disabled = data.reactFlowInstance.getEdges().some((e) => (e.sourceHandle === id));
return (
<div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 mt-1 px-5 py-2">
@ -67,16 +63,17 @@ export default function ParameterComponent({
</Tooltip>
{left === true && type === "str" ? (
<div className="mt-2 w-full">
{/* data.node.template[name].list */false ?
{data.node.template[name].list ?
<InputListComponent
disabled={disabled}
value={!data.node.template[name].value || data.node.template[name].value === "" ? [""] : data.node.template[name].value}
onChange={(t) => {
data.node.template[name].value = t;
updatePos();
}}
/>
:
<InputComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
onChange={(t) => {
data.node.template[name].value = t;
@ -88,6 +85,7 @@ export default function ParameterComponent({
) : left === true && type === "bool" ? (
<div className="mt-2">
<ToggleComponent
disabled={disabled}
enabled={enabled}
setEnabled={(t) => {
data.node.template[name].value = t;

1
space_flow/src/CustomNodes/InputNode/index.tsx
View file

@ -44,6 +44,7 @@ export default function InputNode({ data }) {
</div>
<div className="w-full p-5 h-full">
<InputComponent
disabled={false}
value=""
onChange={(e) => {
data.text = e;

16
space_flow/src/components/inputComponent/index.tsx
View file

@ -1,19 +1,25 @@
import { useState } from "react";
import { useEffect, useState } from "react";
export default function InputComponent({value, onChange}){
export default function InputComponent({value, onChange, disabled}){
const [myValue, setMyValue] = useState(value ?? "");
useEffect(()=> {
if(disabled){
setMyValue("");
onChange("");
}
}, [disabled, onChange])
return (
<>
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<input
type="text"
value={myValue}
className="block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className={"block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200" : "")}
placeholder="Type a text"
onChange={(e) => {
setMyValue(e.target.value);
onChange(e.target.value);
}}
/>
</>
</div>
);
}

15
space_flow/src/components/inputListComponent/index.tsx
View file

@ -1,19 +1,24 @@
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useState } from "react";
import { useEffect, useState } from "react";
var _ = require("lodash");
export default function InputListComponent({ value, onChange }) {
export default function InputListComponent({ value, onChange, disabled}) {
const [inputList, setInputList] = useState(value ?? [""]);
useEffect(()=> {
if(disabled){
setInputList([""]);
onChange([""]);
}
}, [disabled, onChange])
return (
<div className="flex flex-col gap-3">
<div className={(disabled ? "pointer-events-none cursor-not-allowed" : "") + "flex flex-col gap-3"}>
{inputList.map((i, idx) => (
<div key={idx} className="w-full flex gap-3">
<input
type="text"
value={i}
className="block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className={"block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200" : "")}
placeholder="Type a text"
onChange={(e) => {
setInputList((old) => {

55
space_flow/src/components/toggleComponent/index.tsx
View file

@ -1,31 +1,46 @@
import { Switch } from "@headlessui/react";
import { classNames } from "../../utils";
import { useState } from "react";
import { useEffect, useState } from "react";
export default function ToggleComponent({enabled, setEnabled}){
return (<Switch
export default function ToggleComponent({ enabled, setEnabled, disabled }) {
useEffect(()=> {
if(disabled){
setEnabled(false);
}
}, [disabled, setEnabled])
return (
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<Switch
checked={enabled}
onChange={(x) => {setEnabled(x);}}
onChange={(x) => {
setEnabled(x);
}}
className={classNames(
enabled ? 'bg-indigo-600' : 'bg-gray-200',
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
enabled ? "bg-indigo-600" : "bg-gray-200",
"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
)}
>
<span className="sr-only">Use setting</span>
<span
className={classNames(
enabled ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
enabled ? "translate-x-5" : "translate-x-0",
"pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out", disabled ? "bg-gray-200" : "bg-white"
)}
>
<span
className={classNames(
enabled ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200',
'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity'
enabled
? "opacity-0 ease-out duration-100"
: "opacity-100 ease-in duration-200",
"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
)}
aria-hidden="true"
>
<svg className="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
<svg
className="h-3 w-3 text-gray-400"
fill="none"
viewBox="0 0 12 12"
>
<path
d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
stroke="currentColor"
@ -37,15 +52,23 @@ export default function ToggleComponent({enabled, setEnabled}){
</span>
<span
className={classNames(
enabled ? 'opacity-100 ease-in duration-200' : 'opacity-0 ease-out duration-100',
'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity'
enabled
? "opacity-100 ease-in duration-200"
: "opacity-0 ease-out duration-100",
"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
)}
aria-hidden="true"
>
<svg className="h-3 w-3 text-indigo-600" fill="currentColor" viewBox="0 0 12 12">
<svg
className="h-3 w-3 text-indigo-600"
fill="currentColor"
viewBox="0 0 12 12"
>
<path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
</svg>
</span>
</span>
</Switch>)
}
</Switch>
</div>
);
}

14
space_flow/src/pages/FlowPage/index.tsx
View file

@ -45,13 +45,25 @@ export default function FlowPage() {
const [nodes, setNodes, onNodesChange] = useNodesState([]);
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const onEdgesChangeMod = useCallback((s) => {
onEdgesChange(s);
setNodes((x) => {
let newX = _.cloneDeep(x);
return newX;
})
}, [_, onEdgesChange, setNodes])
const [reactFlowInstance, setReactFlowInstance] = useState(null);
var _ = require('lodash');
const onConnect = useCallback(
(params) => {
/* console.log(params)
console.log(reactFlowInstance.getNodes())
console.log(getConnectedNodes(params,reactFlowInstance.getNodes())) */
setEdges((eds) => addEdge({...params,className:"animate-pulse"}, eds))
setNodes((x) => {
let newX = _.cloneDeep(x);
return newX;
})
},
[reactFlowInstance]
);
@ -93,7 +105,7 @@ export default function FlowPage() {
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onEdgesChange={onEdgesChangeMod}
onConnect={onConnect}
onInit={setReactFlowInstance}
nodeTypes={nodeTypes}