fix suggestion order

src/CallBlock.tsx

@@ -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,
         )}