nicer, nested rendering when currying

src/CallBlock.css

@@ -23,18 +23,32 @@
   content: "";
   position: absolute;
   border: solid 10px transparent;
-  border-left-color: rgba(242, 253, 146);
+  border-left-color: rgb(242, 253, 146);
   margin-left: 0px;
   /* z-index: 1; */
 }
-
 .inputParam {
   /* height: 20px; */
   margin-right: 20px;
   display: inline-block;
-  background-color: rgba(242, 253, 146);
+  background-color: rgb(242, 253, 146);
 }
 
+
+.inputParam .inputParam {
+  background-color: rgb(180, 248, 214);
+}
+.inputParam .inputParam:after {
+  border-left-color: rgb(180, 248, 214);
+}
+.inputParam .inputParam .inputParam {
+  background-color: rgb(153, 212, 214);
+}
+.inputParam .inputParam .inputParam:after {
+  border-left-color: rgb(153, 212, 214);
+}
+
+
 .typeAnnot {
   display: inline-block;
   vertical-align: top;

src/CallBlock.tsx

@@ -8,24 +8,35 @@ import { Type } from "./Type";
 import { Value } from "./Value";
 import { focusPrevElement } from "./util/dom_trickery";
 
-export interface CallBlockState {
+export interface CallBlockState<
+  FnState=EditorState,
+  InputState=EditorState,
+> {
   kind: "call";
   env: any;
-  fn: EditorState;
+  fn: FnState;
-  input: EditorState;
+  input: InputState;
   resolved: undefined | Dynamic;
 }
 
-interface CallBlockProps extends State2Props<CallBlockState> {
+interface CallBlockProps<
+  FnState=EditorState,
+  InputState=EditorState,
+> extends State2Props<CallBlockState<FnState,InputState>> {
   onResolve: (resolved: EditorState) => void;
 }
 
-export function CallBlock({ state: {kind, env, fn, input, resolved }, setState, onResolve }: CallBlockProps) {
+function headlessCallBlock({state: {kind, env, fn, input, resolved }, setState, onResolve}: CallBlockProps) {
   const [unifyError, setUnifyError] = useState<UnifyError | undefined>(undefined);
+  const setFn = (fn: EditorState) => {
+    setState({kind, env, fn, input, resolved});
+  }
+  const setInput = (input: EditorState) => {
+    setState({kind, env, fn, input, resolved});
+  }
   const setResolved = (resolved?: Dynamic) => {
     setState({kind, env, fn, input, resolved});
   }
-
   const makeTheCall = (input, fn) => {
     console.log('makeTheCall...')
     try {
@@ -46,14 +57,7 @@ export function CallBlock({ state: {kind, env, fn, input, resolved }, setState,
         kind, env, fn, input, resolved: undefined
       })
     }
-  }
+  };
-
-  const setFn = (fn: EditorState) => {
-    setState({kind, env, fn, input, resolved});
-  }
-  const setInput = (input: EditorState) => {
-    setState({kind, env, fn, input, resolved});
-  }
   const onFnResolve = (fnState) => {
     console.log('my fn resolved')
     if (input.resolved) {
@@ -66,7 +70,7 @@ export function CallBlock({ state: {kind, env, fn, input, resolved }, setState,
         kind, env, fn: fnState, input, resolved: undefined
       });
     }
-  }
+  };
   const onInputResolve = (inputState) => {
     console.log('my input resolved')
     if (fn.resolved) {
@@ -79,47 +83,86 @@ export function CallBlock({ state: {kind, env, fn, input, resolved }, setState,
         kind, env, fn, input: inputState, resolved: undefined
       });
     }
-  }
+  };
   const onFnCancel = () => {
-
+    setState(input);
   }
   const onInputCancel = () => {
     setState(fn);
   }
-
+  // const filterCompatibleInputs = ([_name, dynamic]: [string, Dynamic]) => {
-  const filterCompatibleInputs = ([_name, dynamic]: [string, Dynamic]) => {
+  //   if (fn.resolved) {
-    if (fn.resolved) {
+  //     try {
-      try {
+  //       assignFn(getType(fn.resolved), getType(dynamic));
-        assignFn(getType(fn.resolved), getType(dynamic));
+  //     } catch (e) {
-      } catch (e) {
+  //       if (!(e instanceof UnifyError)) {
-        if (!(e instanceof UnifyError)) {
+  //         throw e;
-          throw e;
+  //       }
-        }
+  //       return false;
-        return false;
+  //     }  
-      }  
+  //   }
-    }
+  //   return true;
-    return true;
+  // }
+  return {unifyError, setFn, setInput, onFnResolve, onInputResolve, onFnCancel, onInputCancel};
 }
 
+export function CallBlock({ state, setState, onResolve }: CallBlockProps) {
+  const {unifyError, setFn, setInput, onFnResolve, onInputResolve, onFnCancel, onInputCancel}
+    = headlessCallBlock({ state, setState, onResolve });
   return <span className={"functionBlock" + (unifyError ? " unifyError" : "")}>
-    <div className="functionName">
+    <FunctionHeader fn={state.fn}/>
-    &#119891;&#119899;&nbsp;
-      <Editor state={fn} setState={setFn}
-        onResolve={onFnResolve} onCancel={onFnCancel}/>
-    </div>
     <div className="functionParams">
       <div className="outputParam">
-      <div className="inputParam">
+        {/* Sequence of input parameters */}
-        <Editor state={input} setState={setInput} onResolve={onInputResolve} onCancel={onInputCancel} />
+        <InputParams fn={state.fn} input={state.input} setInput={setInput}
-      </div>
+          onInputResolve={onInputResolve} onInputCancel={onInputCancel} />
-      { resolved
+          
-        ? <Value dynamic={resolved} />
+        {/* Output (or Error) */}
-        : <></> }
+        {state.resolved && <Value dynamic={state.resolved} />}
-      { unifyError
+        {unifyError && unifyError.toString()}
-        ? <>{unifyError.toString()}</>
-        : <></>
-      }
       </div>
     </div>
   </span>;
 }
+
+function FunctionHeader({ fn }) {
+  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
+
+    // recurse:
+    return <FunctionHeader fn={fn.fn} />;
+  }
+  else {
+    //  end of recursion - draw function name
+    return <div className="functionName">
+      &#119891;&#119899;&nbsp;
+      <Editor state={fn} setState={() => {/*todo*/}}
+        onResolve={() => {}} onCancel={() => {/*todo*/}}/>
+    </div>;
+  }
+}
+
+function InputParams({ fn, input, setInput, onInputResolve, onInputCancel }) {
+  return <div className="inputParam">
+    {(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
+
+      // Input(s) of the function we're calling:
+      <InputParams
+        fn={fn.fn}
+        input={fn.input}
+        setInput={() => {/*todo*/}}
+        onInputResolve={() => {/*todo*/}}
+        onInputCancel={() => {/*todo*/}}/>
+    }
+
+    {/* Our own input */}
+    <Editor
+      state={input}
+      setState={setInput}
+      onResolve={onInputResolve}
+      onCancel={onInputCancel} />
+  </div>;
+};

src/Editor.tsx

@@ -1,4 +1,4 @@
-import { getSymbol, getType, module2Env, ModuleStd, symbolFunction } from "dope2";
+import { getSymbol, getType, module2Env, ModuleStd, symbolFunction, getDefaultTypeParser } from "dope2";
 
 import { InputBlock, type InputBlockState } from "./InputBlock";
 import { type Dynamic, type State2Props } from "./util/extra";
@@ -16,7 +16,6 @@ interface LambdaBlockState {
   paramName: string;
   expr: EditorState;
   resolved: undefined | Dynamic;
-  rollback?: EditorState;
 }
 
 export type EditorState =
@@ -25,12 +24,14 @@ export type EditorState =
   | LetInBlockState
   | LambdaBlockState;
 
+const mkType = getDefaultTypeParser();
 export const initialEditorState: EditorState = {
   kind: "input",
-  env: module2Env(ModuleStd),
+  env: module2Env(ModuleStd.concat([
+    ["functionWith3Params", {i: i=>j=>k=>i+j+k, t: mkType("Int->Int->Int->Int")}],
+  ])),
   text: "",
   resolved: undefined,
-  rollback: undefined,
 };
 
 interface EditorProps extends State2Props<EditorState> {
@@ -84,7 +85,6 @@ export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
         fn: state,
         input: initialEditorState,
         resolved: undefined,
-        rollback: state,
       });
       return;
     }
@@ -97,7 +97,6 @@ export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
         fn: initialEditorState,
         input: state,
         resolved: undefined,
-        rollback: state,
       });
       return;
     }
@@ -116,7 +115,6 @@ export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
         name: "",
         value: state,
         resolved: undefined,
-        rollback: state,
       });
       return;
     }
@@ -141,7 +139,13 @@ export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
       ? <div className="typeSignature">
           :: <Type type={getType(state.resolved)} />
           { (needCommand)
-            ? <input autoFocus={true} className="editable command" placeholder="<enter command>" onKeyDown={onCommand} value=""/>
+            ? <input
+                spellCheck={false}
+                autoFocus={true}
+                className="editable command"
+                placeholder="<enter command>"
+                onKeyDown={onCommand}
+                value=""/>
             : <></>
           }
         </div>

src/InputBlock.css

@@ -22,6 +22,8 @@
   display: block;
   text-align: left;
   position: absolute;
+  margin-top: 7px;
+  margin-left: 4px;
   border: solid 1px dodgerblue;
   cursor: pointer;
   max-height: calc(100vh - 44px);

src/InputBlock.tsx

@@ -8,14 +8,12 @@ import { Type } from "./Type";
 import "./InputBlock.css";
 import type { Dynamic, State2Props } from "./util/extra";
 import type { EditorState } from "./Editor";
-import { ShowIf } from "./ShowIf";
 
 export interface InputBlockState {
   kind: "input";
   env: any;
   text: string;
   resolved: undefined | Dynamic;
-  rollback?: EditorState;
 }
 
 interface InputBlockProps extends State2Props<InputBlockState> {
@@ -24,7 +22,7 @@ interface InputBlockProps extends State2Props<InputBlockState> {
   onCancel: () => void;
 }
 
-export function InputBlock({ state: {kind, env, text, resolved, rollback}, setState, filter, onResolve, onCancel }: InputBlockProps) {
+export function InputBlock({ state: {kind, env, text, resolved}, setState, filter, onResolve, onCancel }: InputBlockProps) {
   const ref = useRef<any>(null);
   useEffect(() => {
     ref.current?.focus();
@@ -34,10 +32,10 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
   const [haveFocus, setHaveFocus] = useState(false); // whether to render suggestions or not
 
   const setText = (text: string) => {
-    setState({kind, env, text, resolved, rollback});
+    setState({kind, env, text, resolved});
   }
   const setResolved = (resolved: Dynamic) => {
-    setState({kind, env, text, resolved, rollback});
+    setState({kind, env, text, resolved});
   }
 
   const singleSuggestion = trie.growPrefix(env.name2dyn)(text);
@@ -60,7 +58,6 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
   }, [text]);
 
   const onSelectSuggestion = ([name, dynamic]) => {
-    console.log(name);
     // setText(name);
     // ref.current.textContent = name;
     // setRightMostCaretPosition(ref.current);
@@ -72,7 +69,6 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
       env,
       text: name,
       resolved: dynamic,
-      rollback,
     });
   };
 
@@ -84,7 +80,6 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
         env,
         text: e.target.value,
         resolved: undefined,
-        rollback,
       });
     }
   };
@@ -151,6 +146,16 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
 
   return <span>
     <span className="">
+      {/* Dropdown suggestions */}
+      {haveFocus &&
+        <span style={{display:'inline-block'}}>
+        <Suggestions
+          suggestions={suggestions}
+          onSelect={onSelectSuggestion}
+          i={i} setI={setI} />
+        </span>
+      }
+      {/* Input box */}
       <input ref={ref}
         placeholder="start typing..."
         className="editable"
@@ -159,15 +164,10 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
         onKeyDown={onKeyDown}
         onFocus={() => setHaveFocus(true)}
         onBlur={() => setHaveFocus(false)}
-      />
+        spellCheck={false}/>
+      {/* Single 'grey' suggestion */}
       <span className="text-block suggest">{singleSuggestion}</span>
     </span>
-      <ShowIf cond={haveFocus}>
-        <Suggestions
-          suggestions={suggestions}
-          onSelect={onSelectSuggestion}
-          i={i} setI={setI} />
-      </ShowIf>
   </span>;
 }
 

src/LetInBlock.tsx

@@ -9,7 +9,6 @@ export interface LetInBlockState {
   value: EditorState;
   inner: EditorState;
   resolved: undefined | Dynamic;
-  rollback?: EditorState;
 }
 
 interface LetInBlockProps extends State2Props<LetInBlockState> {
@@ -17,6 +16,6 @@ interface LetInBlockProps extends State2Props<LetInBlockState> {
 }
 
 
-export function LetInBlock({env, name, value, inner, resolved, rollback, onResolve}) {
+export function LetInBlock({env, name, value, inner, resolved, onResolve}) {
   
 }

src/ShowIf.tsx

@@ -1,9 +0,0 @@
-// syntactic sugar
-export function ShowIf({cond, children}) {
-  if (cond) {
-    return <>{children}</>;
-  }
-  else {
-    return <></>;
-  }
-}

src/Type.css

@@ -6,6 +6,12 @@
 .type {
   margin:1px;
   display: inline-block;
+
+  font-family: "Roboto", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-variation-settings: "wdth" 100;
 }
 
 .functionType {

src/index.css

@@ -7,12 +7,6 @@ body {
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
-  font-variation-settings:
+  font-variation-settings: "wdth" 100;
-    "wdth" 100;
-
 }
 
-:focus-within:not(body) {
-  /* outline: 2px solid black; */
-  /* background-color: aqua; */
-}