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

src/App.tsx

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

src/CallBlock.tsx

@@ -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" : "")}>
+  let nestedParams;
-    {(fn.kind === "call") &&
+  if (fn.kind === "call") {
-      // if the function we're calling is itself the result of a function call,
+    // Nest input of nested function
-      // then we render its input parameter nested in our own input parameter box, which is way more readable
+    const {
-
+      setFn         : setFnFn,
-      // recurse:
+      setInput      : setFnInput,
-      <NestedParams fn={fn} setFn={setFn} depth={depth} errorDepth={errorDepth}/>
+    } = headlessCallBlock(setFn);
-    }
+    nestedParams = <InputParams
-    {/* Our own input */}
+      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}) {
+// function NestedParams({fn, setFn, depth, errorDepth, suggestionPriority}) {
-  const {
+//   const env = useContext(EnvContext);
-      setFn         : setFnFn,
+//   const {
-      setInput      : setFnInput,
+//     setFn         : setFnFn,
-    } = headlessCallBlock(setFn);
+//     setInput      : setFnInput,
-  return <InputParams
+//   } = headlessCallBlock(setFn);
-    fn={fn.fn}
+//   return <InputParams
-    setFn={setFnFn}
+//     fn={fn.fn}
-    input={fn.input}
+//     setFn={setFnFn}
-    setInput={setFnInput}
+//     input={fn.input}
-    onInputCancel={() => {/*todo*/}}
+//     setInput={setFnInput}
-    depth={depth+1}
+//     onInputCancel={() => {/*todo*/}}
-    errorDepth={errorDepth}
+//     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
+//       )}
+//   />;
+// }

src/Editor.tsx

@@ -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

src/InputBlock.tsx

@@ -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 [
+  return ls
-    ...ls.filter(filter), // ones that match filter come first
+    .map(suggestion => [suggestionPriority(suggestion), ...suggestion] as PrioritizedSuggestionType)
-    ...ls.filter(s => !filter(s)),
+    .sort(([priorityA], [priorityB]) => priorityB - priorityA)
-  ]
-  // .slice(0,30);
 }
 
-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>
   }</>;

src/LetInBlock.tsx

@@ -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>