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

2
src/App.tsx
View file

@ -154,7 +154,7 @@ export function App() {
state={appState.history.at(-1)!}
setState={pushHistory}
onCancel={() => {}}
filter={() => true}
suggestionPriority={() => 0}
/>
</CommandContext>

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
// )}
// />;
// }

8
src/Editor.tsx
View file

@ -28,7 +28,7 @@ export interface State2Props<InType, OutType = InType> {
}
interface EditorProps extends State2Props<EditorState> {
filter: (suggestion: SuggestionType) => boolean;
suggestionPriority: (suggestion: SuggestionType) => number;
onCancel: () => void;
}
@ -59,7 +59,7 @@ function removeFocus(state: EditorState): EditorState {
return state;
}
export function Editor({state, setState, onCancel, filter}: EditorProps) {
export function Editor({state, setState, onCancel, suggestionPriority}: EditorProps) {
const env = useContext(EnvContext);
const [needCommand, setNeedCommand] = useState(false);
const commandInputRef = useRef<HTMLInputElement>(null);
@ -144,14 +144,14 @@ export function Editor({state, setState, onCancel, filter}: EditorProps) {
return <InputBlock
state={state}
setState={setState as (callback:(p:InputBlockState)=>EditorState)=>void}
filter={filter}
suggestionPriority={suggestionPriority}
onCancel={onCancel}
/>;
case "call":
return <CallBlock
state={state}
setState={setState as (callback:(p:CallBlockState)=>EditorState)=>void}
filter={filter}
suggestionPriority={suggestionPriority}
/>;
case "let":
return <LetInBlock

23
src/InputBlock.tsx
View file

@ -30,13 +30,14 @@ export interface InputBlockState {
}
export type SuggestionType = ['literal'|'name', string, Dynamic];
export type PrioritizedSuggestionType = [number, ...SuggestionType];
interface InputBlockProps extends State2Props<InputBlockState> {
filter: (suggestion: SuggestionType) => boolean;
suggestionPriority: (suggestion: SuggestionType) => number;
onCancel: () => void;
}
const computeSuggestions = (text, env, filter): SuggestionType[] => {
const computeSuggestions = (text, env, suggestionPriority: (s: SuggestionType) => number): PrioritizedSuggestionType[] => {
const asDouble = parseDouble(text);
const asInt = parseInt(text);
@ -46,14 +47,12 @@ const computeSuggestions = (text, env, filter): SuggestionType[] => {
... trie.suggest(env.name2dyn)(text)(Infinity).map(([name,type]) => ["name", name, type]),
]
// return ls;
return [
...ls.filter(filter), // ones that match filter come first
...ls.filter(s => !filter(s)),
]
// .slice(0,30);
return ls
.map(suggestion => [suggestionPriority(suggestion), ...suggestion] as PrioritizedSuggestionType)
.sort(([priorityA], [priorityB]) => priorityB - priorityA)
}
export function InputBlock({ state, setState, filter, onCancel }: InputBlockProps) {
export function InputBlock({ state, setState, suggestionPriority, onCancel }: InputBlockProps) {
const {text, focus} = state;
const env = useContext(EnvContext);
const inputRef = useRef<HTMLInputElement>(null);
@ -61,7 +60,7 @@ export function InputBlock({ state, setState, filter, onCancel }: InputBlockProp
const [haveFocus, setHaveFocus] = useState(false); // whether to render suggestions or not
const singleSuggestion = trie.growPrefix(env.name2dyn)(text);
const suggestions = useMemo(() => computeSuggestions(text, env, filter), [text]);
const suggestions = useMemo(() => computeSuggestions(text, env, suggestionPriority), [text]);
useEffect(() => autoInputWidth(inputRef, text), [inputRef, text]);
@ -146,7 +145,7 @@ export function InputBlock({ state, setState, filter, onCancel }: InputBlockProp
onTextChange(e.target.value);
};
const onSelectSuggestion = ([kind, name, dynamic]: SuggestionType) => {
const onSelectSuggestion = ([priority, kind, name, dynamic]: PrioritizedSuggestionType) => {
if (kind === "literal") {
setState(state => ({
...state,
@ -200,13 +199,13 @@ function Suggestions({ suggestions, onSelect, i, setI }) {
};
return <>{(suggestions.length > 0) &&
<div className={"suggestions"}>
{suggestions.map(([kind, name, dynamic], j) =>
{suggestions.map(([priority, kind, name, dynamic], j) =>
<div
key={`${j}_${name}`}
className={(i === j ? " selected" : "")}
onMouseEnter={onMouseEnter(j)}
onMouseDown={onMouseDown(j)}>
({kind}) {name} :: <Type type={getType(dynamic)} />
({priority}) ({kind}) {name} :: <Type type={getType(dynamic)} />
</div>)}
</div>
}</>;

4
src/LetInBlock.tsx
View file

@ -62,7 +62,7 @@ export function LetInBlock({state, setState}: LetInBlockProps) {
<Editor
state={value}
setState={setValue}
filter={() => true}
suggestionPriority={() => 0}
onCancel={() => {}}
/>
&nbsp;<span className="keyword">in</span>
@ -72,7 +72,7 @@ export function LetInBlock({state, setState}: LetInBlockProps) {
<Editor
state={inner}
setState={setInner}
filter={() => true}
suggestionPriority={() => 0}
onCancel={() => {}}
/>
</EnvContext>