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

fix suggestion order

Browse source
This commit is contained in:
Joeri Exelmans 2025-05-17 22:40:17 +02:00
parent 46baad7cf4
commit 1ff4b181ff
8 changed files with 91 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/App.tsx
View file

@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
import './App.css';
import { CommandContext } from './CommandContext';
import { GlobalContext } from './GlobalContext';
import { Editor, type EditorState } from './Editor';
import { extendedEnv } from './EnvContext';
import { biggerExample, initialEditorState, lambda2Params, nonEmptyEditorState, tripleFunctionCallEditorState } from "./configurations";
@ -161,14 +161,14 @@ export function App() {
</header>
<main onKeyDown={onKeyDown}>
<CommandContext value={{undo: onUndo, redo: onRedo, doHighlight, syntacticSugar}}>
<GlobalContext value={{undo: onUndo, redo: onRedo, doHighlight, syntacticSugar}}>
<Editor
state={appState.history.at(-1)!}
setState={pushHistory}
onCancel={() => {}}
suggestionPriority={() => 1}
/>
</CommandContext>
</GlobalContext>
</main>

161
src/CallBlock.tsx
View file

@ -1,14 +1,11 @@
import { useContext, useInsertionEffect } from "react";
import { useContext } from "react";
import { Editor, type EditorState } from "./Editor";
import { Value } from "./Value";
import { type SetStateFn, type State2Props } from "./Editor";
import { evalCallBlock, evalCallBlock2, evalEditorBlock, scoreResolved } from "./eval";
import { type ResolvedType } from "./eval";
import "./CallBlock.css";
import { Editor, type EditorState, type SetStateFn, type State2Props } from "./Editor";
import { EnvContext } from "./EnvContext";
import type { SuggestionType } from "./InputBlock";
import { UnifyError } from "dope2";
import { evalCallBlock2, evalEditorBlock, scoreResolved, type ResolvedType } from "./eval";
import { Value } from "./Value";
import { GlobalContext } from "./GlobalContext";
export interface CallBlockState {
kind: "call";
@ -19,9 +16,7 @@ export interface CallBlockState {
interface CallBlockProps<
FnState=EditorState,
InputState=EditorState,
> extends State2Props<CallBlockState,EditorState> {
suggestionPriority: (suggestion: SuggestionType) => number;
}
> extends State2Props<CallBlockState,EditorState> {}
function headlessCallBlock(setState: (callback: SetStateFn<CallBlockState,EditorState>) => void) {
const setFn = (callback: SetStateFn) => {
@ -40,97 +35,51 @@ function headlessCallBlock(setState: (callback: SetStateFn<CallBlockState,Editor
}
export function CallBlock({ state, setState, suggestionPriority }: CallBlockProps) {
const {setFn, setInput, onFnCancel, onInputCancel}
= headlessCallBlock(setState);
const env = useContext(EnvContext);
const resolved = evalEditorBlock(state, env);
return <span className={"functionBlock" + ((resolved.kind === "error") ? " unifyError" : "")}>
<FunctionHeader
fn={state.fn}
setFn={setFn}
onFnCancel={onFnCancel}
input={state.input}
state={state}
setState={setState}
suggestionPriority={suggestionPriority}
/>
<div className="functionParams">
<Output resolved={resolved}>
<div className="outputParam">
{/* Sequence of input parameters */}
<InputParams
fn={state.fn} setFn={setFn}
input={state.input} setInput={setInput}
onInputCancel={onInputCancel}
state={state}
setState={setState}
suggestionPriority={suggestionPriority}
depth={0}
errorDepth={(resolved.kind === "error") ? (resolved.depth) : -1}
suggestionPriority={suggestionPriority}
/>
</Output>
{ (resolved.kind === "error") && resolved.e.toString()
|| (resolved.kind === "value") && <Value dynamic={resolved} />
|| "unknown" }
</div>
</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
env,
)}
/>
</div>
</Output>
</div>
</span>;
}
function computePriority(fn: ResolvedType, input: ResolvedType, outPriority: (s: SuggestionType) => number, env) {
function computePriority(fn: ResolvedType, input: ResolvedType, outPriority: (s: ResolvedType) => number, env) {
const resolved = evalCallBlock2(fn, input, env);
return scoreResolved(resolved, outPriority);
const score = scoreResolved(resolved, outPriority);
return score;
}
function FunctionHeader({ fn, setFn, input, onFnCancel, suggestionPriority }) {
function FunctionHeader({ state, setState, suggestionPriority }) {
const env = useContext(EnvContext);
if (fn.kind === "call") {
const globalContext = useContext(GlobalContext);
const {setFn, onFnCancel} = headlessCallBlock(setState);
if (state.fn.kind === "call" && globalContext?.syntacticSugar) {
// 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
// recurse:
const {
setFn : setFnFn,
onFnCancel : onFnFnCancel,
} = headlessCallBlock(setFn);
return <FunctionHeader
fn={fn.fn}
setFn={setFnFn}
onFnCancel={onFnFnCancel}
input={fn.input}
suggestionPriority={(fnSuggestion: SuggestionType) => computePriority(
fnSuggestion[2],
evalEditorBlock(fn.input, env),
state={state.fn}
setState={setFn}
suggestionPriority={(fnSuggestion: ResolvedType) => computePriority(
fnSuggestion,
evalEditorBlock(state.fn.input, env),
suggestionPriority,
env,
)}
@ -138,54 +87,44 @@ function FunctionHeader({ fn, setFn, input, onFnCancel, suggestionPriority }) {
}
else {
// end of recursion - draw function name
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">
return <span className="functionName">
&nbsp;&#119891;&#119899;&nbsp;
<Editor
state={fn}
state={state.fn}
setState={setFn}
onCancel={onFnCancel}
suggestionPriority={
(fnSuggestion: SuggestionType) => computePriority(
fnSuggestion[2], // suggestions will be for function
evalEditorBlock(input, env), // input *may* be set
(fnSuggestion: ResolvedType) => computePriority(
fnSuggestion, // suggestions will be for function
evalEditorBlock(state.input, env), // input *may* be set
suggestionPriority, // priority function we get from parent block
env,
)}
/>
</span>;
}
}
function InputParams({ fn, setFn, input, setInput, onInputCancel, depth, errorDepth, suggestionPriority }) {
function InputParams({ state, setState, suggestionPriority, depth, errorDepth }) {
const env = useContext(EnvContext);
const globalContext = useContext(GlobalContext);
const {setFn, setInput, onInputCancel} = headlessCallBlock(setState);
let nestedParams;
if (fn.kind === "call") {
if (state.fn.kind === "call" && globalContext?.syntacticSugar) {
// 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}
state={state.fn}
setState={setFn}
suggestionPriority={
(inputSuggestion: SuggestionType) => computePriority(
evalEditorBlock(fn.fn, env),
inputSuggestion[2],
(inputSuggestion: ResolvedType) => computePriority(
evalEditorBlock(state.fn.fn, env),
inputSuggestion,
suggestionPriority,
env,
)}
/>;
depth={depth+1}
errorDepth={errorDepth}
/>;
}
else {
nestedParams = <></>;
@ -195,13 +134,13 @@ function InputParams({ fn, setFn, input, setInput, onInputCancel, depth, errorDe
{nestedParams}
{/* Our own input param */}
<Editor
state={input}
state={state.input}
setState={setInput}
onCancel={onInputCancel}
suggestionPriority={
(inputSuggestion: SuggestionType) => computePriority(
evalEditorBlock(fn, env), // fn *may* be set
inputSuggestion[2], // suggestions will be for input
(inputSuggestion: ResolvedType) => computePriority(
evalEditorBlock(state.fn, env), // fn *may* be set
inputSuggestion, // suggestions will be for input
suggestionPriority, // priority function we get from parent block
env,
)}

29
src/Editor.tsx
View file

@ -2,11 +2,11 @@ import { useContext, useEffect, useRef, useState } from "react";
import { getSymbol, getType, symbolFunction } from "dope2";
import { CallBlock, CallBlockNoSugar, type CallBlockState } from "./CallBlock";
import { CallBlock, type CallBlockState } from "./CallBlock";
import { InputBlock, type InputBlockState, type SuggestionType } from "./InputBlock";
import { Type } from "./Type";
import { evalEditorBlock } from "./eval";
import { CommandContext } from "./CommandContext";
import { evalEditorBlock, type ResolvedType } from "./eval";
import { GlobalContext } from "./GlobalContext";
import "./Editor.css";
import { EnvContext } from "./EnvContext";
import { LambdaBlock, type LambdaBlockState } from "./LambdaBlock";
@ -25,10 +25,10 @@ export type SetStateFn<InType = EditorState, OutType = InType> = (state: InType)
export interface State2Props<InType, OutType = InType> {
state: InType;
setState: (callback: SetStateFn<InType, OutType>) => void;
suggestionPriority: (suggestion: ResolvedType) => number;
}
interface EditorProps extends State2Props<EditorState> {
suggestionPriority: (suggestion: SuggestionType) => number;
onCancel: () => void;
}
@ -69,7 +69,7 @@ export function Editor({state, setState, onCancel, suggestionPriority}: EditorPr
}
}, [needCommand]);
const globalContext = useContext(CommandContext);
const globalContext = useContext(GlobalContext);
const onCommand = (e: React.KeyboardEvent) => {
const commands = ['e', 't', 'Enter', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Tab', 'l', 'L', '=', '.', 'c', 'a'];
if (!commands.includes(e.key)) {
@ -163,20 +163,11 @@ export function Editor({state, setState, onCancel, suggestionPriority}: EditorPr
onCancel={onCancel}
/>;
case "call":
if (globalContext?.syntacticSugar) {
return <CallBlock
state={state}
setState={setState as (callback:(p:CallBlockState)=>EditorState)=>void}
suggestionPriority={suggestionPriority}
/>;
}
else {
return <CallBlockNoSugar
state={state}
setState={setState as (callback:(p:CallBlockState)=>EditorState)=>void}
suggestionPriority={suggestionPriority}
/>;
}
return <CallBlock
state={state}
setState={setState as (callback:(p:CallBlockState)=>EditorState)=>void}
suggestionPriority={suggestionPriority}
/>;
case "let":
return <LetInBlock
state={state}

2
src/CommandContext.ts → src/GlobalContext.ts
View file

@ -7,4 +7,4 @@ interface GlobalActions {
syntacticSugar: boolean;
}
export const CommandContext = createContext<GlobalActions|null>(null);
export const GlobalContext = createContext<GlobalActions|null>(null);

15
src/InputBlock.tsx
View file

@ -3,7 +3,7 @@ import { memo, useContext, useEffect, useMemo, useRef, useState } from "react";
import { getType, prettyT, trie } from "dope2";
import { EnvContext } from "./EnvContext";
import type { Dynamic } from "./eval";
import type { Dynamic, ResolvedType } from "./eval";
import "./InputBlock.css";
import { Type } from "./Type";
import type { State2Props } from "./Editor";
@ -33,11 +33,10 @@ export type SuggestionType = ['literal'|'name', string, Dynamic];
export type PrioritizedSuggestionType = [number, ...SuggestionType];
interface InputBlockProps extends State2Props<InputBlockState> {
suggestionPriority: (suggestion: SuggestionType) => number;
onCancel: () => void;
}
const computeSuggestions = (text, env, suggestionPriority: (s: SuggestionType) => number): PrioritizedSuggestionType[] => {
const computeSuggestions = (text, env, suggestionPriority: (s: ResolvedType) => number): PrioritizedSuggestionType[] => {
const literals = attemptParseLiteral(text, env);
const ls: SuggestionType[] = [
@ -46,11 +45,17 @@ const computeSuggestions = (text, env, suggestionPriority: (s: SuggestionType) =
// names
... trie.suggest(env.name2dyn)(text)(Infinity)
.map(([name,type]) => ["name", name, {...type, substitutions: new Map()}]),
.map(([name,type]) => [
"name",
name, {
...type,
substitutions: type.substitutions || new Map(),
kind: type.kind || "value",
}]),
]
// return ls;
return ls
.map(suggestion => [suggestionPriority(suggestion), ...suggestion] as PrioritizedSuggestionType)
.map(suggestion => [suggestionPriority(suggestion[2]), ...suggestion] as PrioritizedSuggestionType)
.sort(([priorityA], [priorityB]) => priorityB - priorityA)
}

15
src/LambdaBlock.tsx
View file

@ -1,13 +1,14 @@
import { useContext, useEffect, useRef } from "react";
import { growEnv } from "dope2";
import { Editor, type EditorState, type State2Props } from "./Editor";
import type { SuggestionType } from "./InputBlock";
import { EnvContext } from "./EnvContext";
import { growEnv, TYPE_VARS } from "dope2";
import { getUnusedTypeVar } from "./eval";
import { autoInputWidth } from "./util/dom_trickery";
import "./LambdaBlock.css";
import { getUnusedTypeVar } from "./eval";
export interface LambdaBlockState {
@ -19,9 +20,7 @@ export interface LambdaBlockState {
interface LambdaBlockProps<
FnState=EditorState,
InputState=EditorState,
> extends State2Props<LambdaBlockState,EditorState> {
suggestionPriority: (suggestion: SuggestionType) => number;
}
> extends State2Props<LambdaBlockState,EditorState> {}
export function LambdaBlock({state, setState, suggestionPriority}: LambdaBlockProps) {
@ -78,9 +77,7 @@ export function LambdaBlock({state, setState, suggestionPriority}: LambdaBlockPr
state={state.expr}
setState={setExpr}
onCancel={() => setState(state => state.expr)}
suggestionPriority={(suggestion: SuggestionType) => {
return suggestionPriority(suggestion);
}}
suggestionPriority={suggestionPriority}
/>
</EnvContext>
</div>

18
src/LetInBlock.tsx
View file

@ -1,15 +1,13 @@
import { useContext, useEffect, useRef } from "react";
import { Editor, type EditorState } from "./Editor";
import { EnvContext } from "./EnvContext";
import { evalEditorBlock, makeInnerEnv, scoreResolved } from "./eval";
import { evalEditorBlock, makeInnerEnv, scoreResolved, type ResolvedType } from "./eval";
import { type State2Props } from "./Editor";
import { autoInputWidth } from "./util/dom_trickery";
import { GlobalContext } from "./GlobalContext";
import "./LetInBlock.css";
import type { SuggestionType } from "./InputBlock";
import { CommandContext } from "./CommandContext";
export interface LetInBlockState {
kind: "let";
@ -18,9 +16,7 @@ export interface LetInBlockState {
inner: EditorState;
}
interface LetInBlockProps extends State2Props<LetInBlockState,EditorState> {
suggestionPriority: (suggestion: SuggestionType) => number;
}
interface LetInBlockProps extends State2Props<LetInBlockState,EditorState> {}
export function LetInBlock({state, setState, suggestionPriority}: LetInBlockProps) {
return <span className="letIn">
@ -43,7 +39,7 @@ export function LetInBlock({state, setState, suggestionPriority}: LetInBlockProp
function DeclColumns({state, setState, suggestionPriority}) {
const env = useContext(EnvContext);
const globalContext = useContext(CommandContext);
const globalContext = useContext(GlobalContext);
const {name, value, inner} = state;
const setInner = callback => setState(state => ({...state, inner: callback(state.inner)}));
@ -52,8 +48,8 @@ function DeclColumns({state, setState, suggestionPriority}) {
setState(state => ({...state, name: e.target.value}));
}
const valueSuggestionPriority = (suggestion: SuggestionType) => {
const innerEnv = makeInnerEnv(env, name, suggestion[2]);
const valueSuggestionPriority = (suggestion: ResolvedType) => {
const innerEnv = makeInnerEnv(env, name, suggestion);
const resolved = evalEditorBlock(inner, innerEnv);
return scoreResolved(resolved, suggestionPriority);
};
@ -103,7 +99,7 @@ function DeclColumns({state, setState, suggestionPriority}) {
function InnerMost({state, setState, suggestionPriority}) {
const env = useContext(EnvContext);
const globalContext = useContext(CommandContext);
const globalContext = useContext(GlobalContext);
const setInner = callback => setState(state => ({...state, inner: callback(state.inner)}));
const valueResolved = evalEditorBlock(state.value, env);
const innerEnv = makeInnerEnv(env, state.name, valueResolved);

13
src/eval.ts
View file

@ -66,7 +66,7 @@ export function evalInputBlock(text: string, value: InputValueType, env): Resolv
return {
kind: found.kind || "value",
...found,
substitutions: new Map(),
substitutions: found.substitutions || new Map(),
};
}
}
@ -170,6 +170,7 @@ export function evalCallBlock(fn: EditorState, input: EditorState, env): Resolve
export function evalLetInBlock(value: EditorState, name: string, inner: EditorState, env): ResolvedType {
const valueResolved = evalEditorBlock(value, env);
// console.log('eval', name, '...', valueResolved.kind, valueResolved.e);
// const innerEnv = growEnv(env)(name)(valueResolved);
const innerEnv = makeInnerEnv(env, name, valueResolved);
return evalEditorBlock(inner, innerEnv);
}
@ -281,14 +282,8 @@ export function attemptParseLiteral(text: string, env): Dynamic[] {
.filter(resolved => (resolved.kind !== "unknown" && resolved.kind !== "error")) as unknown as Dynamic[];
}
export function scoreResolved(resolved: ResolvedType, outPriority: (s:SuggestionType) => number) {
const bias = outPriority(['literal', '<computed>',
{
// @ts-ignore
kind: "unknown",
t: resolved.t,
substitutions: new Map(),
}]);
export function scoreResolved(resolved: ResolvedType, outPriority: (s:ResolvedType) => number) {
const bias = outPriority(resolved);
if (resolved.kind === "value") {
return 1 + bias;