research/dope2-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better-looking parameters

Browse source
This commit is contained in:
Joeri Exelmans 2025-05-12 23:40:58 +02:00
parent 9afaa41fbb
commit 95eb8aef84
10 changed files with 306 additions and 229 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/CallBlock.tsx
View file

@ -1,6 +1,6 @@
import { useState } from "react";
import { apply, UnifyError } from "dope2";
import { apply, UnifyError, assignFn, getType } from "dope2";
import { Editor, type EditorState } from "./Editor";
import { Value } from "./Value";
@ -17,6 +17,7 @@ export interface CallBlockState<
fn: FnState;
input: InputState;
resolved: undefined | Dynamic;
// focus: boolean;
}
interface CallBlockProps<
@ -26,25 +27,24 @@ interface CallBlockProps<
onResolve: (resolved: EditorState) => void;
}
function headlessCallBlock({state: {kind, env, fn, input, resolved }, setState, onResolve}: CallBlockProps) {
function headlessCallBlock({state, setState, onResolve}: CallBlockProps) {
const [unifyError, setUnifyError] = useState<UnifyError | undefined>(undefined);
const {fn, input } = state;
const setFn = (fn: EditorState) => {
setState({kind, env, fn, input, resolved});
setState({...state, fn});
}
const setInput = (input: EditorState) => {
setState({kind, env, fn, input, resolved});
setState({...state, input});
}
const setResolved = (resolved?: Dynamic) => {
setState({kind, env, fn, input, resolved});
setState({...state, resolved});
}
const makeTheCall = (input, fn) => {
console.log('makeTheCall...')
try {
const outputResolved = apply(input.resolved)(fn.resolved);
setResolved(outputResolved);
console.log("onResolve callblock..")
onResolve({
kind, env, fn, input, resolved: outputResolved
...state, resolved: outputResolved
});
setUnifyError(undefined);
}
@ -54,12 +54,11 @@ function headlessCallBlock({state: {kind, env, fn, input, resolved }, setState,
}
setUnifyError(e);
onResolve({
kind, env, fn, input, resolved: undefined
...state, resolved: undefined
})
}
};
const onFnResolve = (fnState) => {
console.log('my fn resolved')
if (input.resolved) {
makeTheCall(input, fnState);
}
@ -67,20 +66,18 @@ function headlessCallBlock({state: {kind, env, fn, input, resolved }, setState,
// setFn(fnState);
setResolved(undefined);
onResolve({
kind, env, fn: fnState, input, resolved: undefined
...state, resolved: undefined
});
}
};
const onInputResolve = (inputState) => {
console.log('my input resolved')
if (fn.resolved) {
makeTheCall(inputState, fn);
}
else {
// setInput(inputState);
setResolved(undefined);
onResolve({
kind, env, fn, input: inputState, resolved: undefined
...state, resolved: undefined
});
}
};
@ -90,24 +87,11 @@ function headlessCallBlock({state: {kind, env, fn, input, resolved }, setState,
const onInputCancel = () => {
setState(fn);
}
// const filterCompatibleInputs = ([_name, dynamic]: [string, Dynamic]) => {
// if (fn.resolved) {
// try {
// assignFn(getType(fn.resolved), getType(dynamic));
// } catch (e) {
// if (!(e instanceof UnifyError)) {
// throw e;
// }
// return false;
// }
// }
// return true;
// }
return {unifyError, setFn, setInput, onFnResolve, onInputResolve, onFnCancel, onInputCancel};
}
export function CallBlock({ state, setState, onResolve }: CallBlockProps) {
const {unifyError, setFn, setInput, onFnResolve, onInputResolve, onFnCancel, onInputCancel}
const {unifyError, setFn, setInput, onFnResolve, onInputResolve, onInputCancel}
= headlessCallBlock({ state, setState, onResolve });
return <span className={"functionBlock" + (unifyError ? " unifyError" : "")}>
<FunctionHeader
@ -120,6 +104,7 @@ export function CallBlock({ state, setState, onResolve }: CallBlockProps) {
<InputParams
fn={state.fn} setFn={setFn}
input={state.input} setInput={setInput}
focus={true}
onFnResolve={onFnResolve}
onInputResolve={onInputResolve} onInputCancel={onInputCancel} />
@ -153,38 +138,59 @@ function FunctionHeader({ fn, setFn, onFnResolve }) {
<Editor
state={fn}
setState={setFn}
focus={false}
onResolve={onFnResolve}
onCancel={() => {/*todo*/}}/>
onCancel={() => {/*todo*/}}
filter={() => true} />
</div>;
}
}
function InputParams({ fn, setFn, input, setInput, onFnResolve, onInputResolve, onInputCancel }) {
const {
onInputResolve: onFnInputResolve,
onFnResolve : onFnFnResolve
} = headlessCallBlock({state: fn, setState: setFn, onResolve: onFnResolve});
function InputParams({ fn, setFn, input, setInput, onFnResolve, onInputResolve, onInputCancel, focus }) {
const filterCompatibleInputs = ([_name, dynamic]: [string, Dynamic]) => {
if (fn.resolved) {
try {
assignFn(getType(fn.resolved), getType(dynamic));
} catch (e) {
if (!(e instanceof UnifyError)) {
throw e;
}
return false;
}
}
return true;
}
return <div className="inputParam">
{(fn.kind === "call") &&
// if the function we're calling is itself the result of a function call,
// then we render its input parameter nested in our own input parameter box, which is way more readable
// Input(s) of the function we're calling:
<InputParams
fn={fn.fn}
setFn={fnFn => setFn({...fn, fn: fnFn})}
input={fn.input}
setInput={fnInput => setFn({...fn, input: fnInput})}
onFnResolve={onFnFnResolve}
onInputResolve={onFnInputResolve}
onInputCancel={() => {/*todo*/}}/>
<NestedInputParams fn={fn} setFn={setFn} onFnResolve={onFnResolve} />
}
{/* Our own input */}
<Editor
state={input}
setState={setInput}
onResolve={onInputResolve}
onCancel={onInputCancel} />
onCancel={onInputCancel}
filter={filterCompatibleInputs}
focus={focus} />
</div>;
};
}
function NestedInputParams({fn, setFn, onFnResolve}) {
const {
onInputResolve: onFnInputResolve,
onFnResolve : onFnFnResolve,
} = headlessCallBlock({state: fn, setState: setFn, onResolve: onFnResolve});
return <InputParams
fn={fn.fn}
setFn={fnFn => setFn({...fn, fn: fnFn})}
input={fn.input}
setInput={fnInput => setFn({...fn, input: fnInput})}
onFnResolve={onFnFnResolve}
onInputResolve={onFnInputResolve}
onInputCancel={() => {/*todo*/}}
focus={false}/>;
}