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

when sorting suggestions, not only function and input type are matched, but also output type (=input of surrounding function)

Browse source
This commit is contained in:
Joeri Exelmans 2025-05-15 10:09:22 +02:00
parent d3138e6617
commit ea8c015eff
5 changed files with 132 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

150
src/CallBlock.tsx
View file

@ -3,11 +3,12 @@ import { useContext } from "react";
import { Editor, type EditorState } from "./Editor";
import { Value } from "./Value";
import { type SetStateFn, type State2Props } from "./Editor";
import { DeepError, evalCallBlock, evalEditorBlock } from "./eval";
import { DeepError, evalCallBlock, evalEditorBlock, haveValue } from "./eval";
import { type ResolvedType } from "./eval";
import "./CallBlock.css";
import { EnvContext } from "./EnvContext";
import type { SuggestionType } from "./InputBlock";
import { getType, NotAFunctionError, unify, UnifyError } from "dope2";
export interface CallBlockState<
FnState=EditorState,
@ -22,7 +23,7 @@ interface CallBlockProps<
FnState=EditorState,
InputState=EditorState,
> extends State2Props<CallBlockState<FnState,InputState>,EditorState> {
filter: (suggestion: SuggestionType) => boolean;
suggestionPriority: (suggestion: SuggestionType) => number;
}
function headlessCallBlock(setState: (callback: SetStateFn<CallBlockState,EditorState>) => void) {
@ -41,7 +42,7 @@ function headlessCallBlock(setState: (callback: SetStateFn<CallBlockState,Editor
return {setFn, setInput, onFnCancel, onInputCancel};
}
export function CallBlock({ state, setState, filter }: CallBlockProps) {
export function CallBlock({ state, setState, suggestionPriority }: CallBlockProps) {
const {setFn, setInput, onFnCancel, onInputCancel}
= headlessCallBlock(setState);
const env = useContext(EnvContext);
@ -51,7 +52,9 @@ export function CallBlock({ state, setState, filter }: CallBlockProps) {
fn={state.fn}
setFn={setFn}
onFnCancel={onFnCancel}
input={state.input} />
input={state.input}
suggestionPriority={suggestionPriority}
/>
<div className="functionParams">
<div className="outputParam">
{/* Sequence of input parameters */}
@ -61,6 +64,7 @@ export function CallBlock({ state, setState, filter }: CallBlockProps) {
onInputCancel={onInputCancel}
depth={0}
errorDepth={resolved instanceof DeepError ? (resolved.depth) : -1}
suggestionPriority={suggestionPriority}
/>
{/* Output (or Error) */}
{ resolved instanceof DeepError && resolved.e.toString()
@ -71,12 +75,17 @@ export function CallBlock({ state, setState, filter }: CallBlockProps) {
</span>;
}
function filterFnInputs(fn: ResolvedType, input: ResolvedType) {
function computePriority(fn: ResolvedType, input: ResolvedType, outPriority: (s: SuggestionType) => number) {
const resolved = evalCallBlock(fn, input);
return (resolved && !(resolved instanceof DeepError));
if ((resolved && !(resolved instanceof DeepError))) {
// The computed output becomes an input for the surrounding block, which may also have a priority function defined, for instance our output is the input to another function
return 1 + outPriority(['literal', '<computed>', resolved]);
}
return 0; // no fit
}
function FunctionHeader({ fn, setFn, input, onFnCancel }) {
function FunctionHeader({ fn, setFn, input, onFnCancel, suggestionPriority }) {
const env = useContext(EnvContext);
if (fn.kind === "call") {
// if the function we're calling is itself the result of a function call,
// then we are anonymous, and so we don't draw a function name
@ -91,10 +100,15 @@ function FunctionHeader({ fn, setFn, input, onFnCancel }) {
fn={fn.fn}
setFn={setFnFn}
onFnCancel={onFnFnCancel}
input={fn.input} />;
input={fn.input}
suggestionPriority={(fnSuggestion: SuggestionType) => computePriority(
fnSuggestion[2],
evalEditorBlock(fn.input, env),
suggestionPriority,
)}
/>;
}
else {
const env = useContext(EnvContext);
// end of recursion - draw function name
return <span className="functionName">
&nbsp;&#119891;&#119899;&nbsp;
@ -102,43 +116,107 @@ function FunctionHeader({ fn, setFn, input, onFnCancel }) {
state={fn}
setState={setFn}
onCancel={onFnCancel}
filter={(fnSuggestion: SuggestionType) => filterFnInputs(fnSuggestion[2], evalEditorBlock(input, env))} />
suggestionPriority={
(fnSuggestion: SuggestionType) => computePriority(
fnSuggestion[2], // suggestions will be for function
evalEditorBlock(input, env), // input *may* be set
suggestionPriority, // priority function we get from parent block
)}
/>
</span>;
}
}
function InputParams({ fn, setFn, input, setInput, onInputCancel, depth, errorDepth }) {
function InputParams({ fn, setFn, input, setInput, onInputCancel, depth, errorDepth, suggestionPriority }) {
const env = useContext(EnvContext);
return <div className={"inputParam" + (depth === errorDepth ? " offending" : "")}>
{(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
// recurse:
<NestedParams fn={fn} setFn={setFn} depth={depth} errorDepth={errorDepth}/>
}
{/* Our own input */}
let nestedParams;
if (fn.kind === "call") {
// Nest input of nested function
const {
setFn : setFnFn,
setInput : setFnInput,
} = headlessCallBlock(setFn);
nestedParams = <InputParams
fn={fn.fn}
setFn={setFnFn}
input={fn.input}
setInput={setFnInput}
onInputCancel={() => {/*todo*/}}
depth={depth+1}
errorDepth={errorDepth}
suggestionPriority={
(inputSuggestion: SuggestionType) => computePriority(
evalEditorBlock(fn.fn, env),
inputSuggestion[2],
suggestionPriority,
)}
/>;
}
else {
nestedParams = <></>;
}
const isOffending = depth === errorDepth;
return <div className={"inputParam" + (isOffending ? " offending" : "")}>
{nestedParams}
<Editor
state={input}
setState={setInput}
onCancel={onInputCancel}
filter={(inputSuggestion: SuggestionType) => filterFnInputs(evalEditorBlock(fn, env), inputSuggestion[2])}
suggestionPriority={
(inputSuggestion: SuggestionType) => computePriority(
evalEditorBlock(fn, env), // fn *may* be set
inputSuggestion[2], // suggestions will be for input
suggestionPriority, // priority function we get from parent block
)}
/>
</div>;
// {(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
// // recurse:
// <NestedParams
// fn={fn}
// setFn={setFn}
// depth={depth}
// errorDepth={errorDepth}
// suggestionPriority={suggestionPriority}
// />
// }
// {/* Our own input */}
// <Editor
// state={input}
// setState={setInput}
// onCancel={onInputCancel}
// suggestionPriority={
// (inputSuggestion: SuggestionType) => computePriority(
// evalEditorBlock(fn, env), // fn *may* be set
// inputSuggestion[2], // suggestions will be for input
// suggestionPriority, // priority function we get from parent block
// )}
// />
// </div>;
}
function NestedParams({fn, setFn, depth, errorDepth}) {
const {
setFn : setFnFn,
setInput : setFnInput,
} = headlessCallBlock(setFn);
return <InputParams
fn={fn.fn}
setFn={setFnFn}
input={fn.input}
setInput={setFnInput}
onInputCancel={() => {/*todo*/}}
depth={depth+1}
errorDepth={errorDepth}
/>;
}
// function NestedParams({fn, setFn, depth, errorDepth, suggestionPriority}) {
// const env = useContext(EnvContext);
// const {
// setFn : setFnFn,
// setInput : setFnInput,
// } = headlessCallBlock(setFn);
// return <InputParams
// fn={fn.fn}
// setFn={setFnFn}
// input={fn.input}
// setInput={setFnInput}
// onInputCancel={() => {/*todo*/}}
// depth={depth+1}
// errorDepth={errorDepth}
// suggestionPriority={
// (inputSuggestion: SuggestionType) => computePriority(
// evalEditorBlock(fn.fn, env), // fn *may* be set
// inputSuggestion[2], // suggestions will be for input
// suggestionPriority, // priority function we get from parent block
// )}
// />;
// }