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

change the way text suggestions are rendered + option to disable syntactic sugar

Browse source
This commit is contained in:
Joeri Exelmans 2025-05-15 22:22:45 +02:00
parent ea8c015eff
commit 2d81e42447
12 changed files with 357 additions and 291 deletions
Download patch file Download diff file Expand all files Collapse all files

158
src/CallBlock.tsx
View file

@ -1,14 +1,14 @@
import { useContext } from "react";
import { useContext, useInsertionEffect } from "react";
import { Editor, type EditorState } from "./Editor";
import { Value } from "./Value";
import { type SetStateFn, type State2Props } from "./Editor";
import { DeepError, evalCallBlock, evalEditorBlock, haveValue } from "./eval";
import { evalCallBlock, evalEditorBlock } 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";
import { UnifyError } from "dope2";
export interface CallBlockState<
FnState=EditorState,
@ -47,7 +47,7 @@ export function CallBlock({ state, setState, suggestionPriority }: CallBlockProp
= headlessCallBlock(setState);
const env = useContext(EnvContext);
const resolved = evalEditorBlock(state, env);
return <span className={"functionBlock" + ((resolved instanceof DeepError) ? " unifyError" : "")}>
return <span className={"functionBlock" + ((resolved.kind === "error") ? " unifyError" : "")}>
<FunctionHeader
fn={state.fn}
setFn={setFn}
@ -56,32 +56,79 @@ export function CallBlock({ state, setState, suggestionPriority }: CallBlockProp
suggestionPriority={suggestionPriority}
/>
<div className="functionParams">
<div className="outputParam">
<Output resolved={resolved}>
{/* Sequence of input parameters */}
<InputParams
fn={state.fn} setFn={setFn}
input={state.input} setInput={setInput}
onInputCancel={onInputCancel}
depth={0}
errorDepth={resolved instanceof DeepError ? (resolved.depth) : -1}
errorDepth={(resolved.kind === "error") ? (resolved.depth) : -1}
suggestionPriority={suggestionPriority}
/>
{/* Output (or Error) */}
{ resolved instanceof DeepError && resolved.e.toString()
|| resolved && <><Value dynamic={resolved} />
</>}
</div>
</Output>
</div>
</span>;
}
export function Output({resolved, children}) {
return <div className="outputParam">
{children}
{ (resolved.kind === "error") && resolved.e.toString()
|| (resolved.kind === "value") && <Value dynamic={resolved} />
|| "unknown" }
</div>;
}
export function CallBlockNoSugar({ state, setState, suggestionPriority }: CallBlockProps) {
const {setFn, setInput, onFnCancel, onInputCancel}
= headlessCallBlock(setState);
const env = useContext(EnvContext);
const resolved = evalEditorBlock(state, env);
const isOffending = (resolved.kind === "error") ? (resolved.depth===0) : false;
return <span className={"functionBlock" + ((resolved.kind === "error") ? " unifyError" : "")}>
<FunctionName fn={state.fn} setFn={setFn} onFnCancel={onFnCancel} suggestionPriority={suggestionPriority} input={state.input} />
<div className="functionParams">
<Output resolved={resolved}>
<div className={"inputParam" + (isOffending ? " offending" : "")}>
<Editor
state={state.input}
setState={setInput}
onCancel={onInputCancel}
suggestionPriority={
(inputSuggestion: SuggestionType) => computePriority(
evalEditorBlock(state.fn, env), // fn *may* be set
inputSuggestion[2], // suggestions will be for input
suggestionPriority, // priority function we get from parent block
)}
/>
</div>
</Output>
</div>
</span>;
}
function computePriority(fn: ResolvedType, input: ResolvedType, outPriority: (s: SuggestionType) => number) {
const resolved = evalCallBlock(fn, input);
if ((resolved && !(resolved instanceof DeepError))) {
const r = outPriority(['literal', '<computed>',
// @ts-ignore: // TODO fix this
{t: resolved.t}]);
if (resolved.kind === "value") {
// 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]);
console.log('r:', r);
return 1 + r;
}
else if (resolved.kind === "unknown") {
return 0 + r;
}
if (resolved.e instanceof UnifyError) {
return -1 + r; // parameter doesn't match
}
else {
return -2 + r; // even worse: fn is not a function!
}
return 0; // no fit
}
function FunctionHeader({ fn, setFn, input, onFnCancel, suggestionPriority }) {
@ -110,23 +157,28 @@ function FunctionHeader({ fn, setFn, input, onFnCancel, suggestionPriority }) {
}
else {
// end of recursion - draw function name
return <span className="functionName">
&nbsp;&#119891;&#119899;&nbsp;
<Editor
state={fn}
setState={setFn}
onCancel={onFnCancel}
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>;
return <FunctionName fn={fn} setFn={setFn} onFnCancel={onFnCancel} suggestionPriority={suggestionPriority} input={input}/>;
}
}
function FunctionName({fn, setFn, onFnCancel, suggestionPriority, input}) {
const env = useContext(EnvContext);
return <span className="functionName">
&nbsp;&#119891;&#119899;&nbsp;
<Editor
state={fn}
setState={setFn}
onCancel={onFnCancel}
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, suggestionPriority }) {
const env = useContext(EnvContext);
let nestedParams;
@ -158,6 +210,7 @@ function InputParams({ fn, setFn, input, setInput, onInputCancel, depth, errorDe
const isOffending = depth === errorDepth;
return <div className={"inputParam" + (isOffending ? " offending" : "")}>
{nestedParams}
{/* Our own input param */}
<Editor
state={input}
setState={setInput}
@ -170,53 +223,4 @@ function InputParams({ fn, setFn, input, setInput, onInputCancel, depth, errorDe
)}
/>
</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, 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
// )}
// />;
// }