Draft: Experiment with React context for local navigation (#366)

papyri-lab/src/papyri-comp.tsx

@@ -1,6 +1,26 @@
 // Global and other papyri-myst related componets
 import { DEFAULT_RENDERERS, MyST } from 'myst-to-react';
 import React from 'react';
+import { createContext, useContext } from 'react';
+
+export const SearchContext = createContext(async (query: string) => {
+  return true;
+});
+
+const MyLink = ({ node }: any) => {
+  const onSearch = useContext(SearchContext);
+  const parts = node.url.split('/');
+  const search_term = parts[parts.length - 1];
+  const f = (q: string) => {
+    onSearch(q);
+  };
+
+  return (
+    <a onClick={() => f(search_term)}>
+      <MyST ast={node.children} />
+    </a>
+  );
+};
 
 const DefaultComponent = ({ node }: { node: any }) => {
   if (!node.children) {
@@ -106,7 +126,7 @@ const SignatureRenderer = ({ node }: { node: any }) => {
     acc.push(p);
   }
   return (
-    <code className="flex my-5 group signature">
+    <code className="group signature">
       {node.kind.indexOf('async') !== -1 ||
       node.kind.indexOf('coroutine') !== -1
         ? 'async '
@@ -121,15 +141,15 @@ const SignatureRenderer = ({ node }: { node: any }) => {
             return (
               <>
                 <MyST ast={parameter} />
-                {', '}
+                <span className="signature-separator">{', '}</span>
               </>
             );
           }
         })}
       </>
       {')'}
       <span className="ret-ann">
-        {'->'} {node.return_annotation.data}
+        {node.return_annotation.data ? '-> ' + node.return_annotation.data : ''}
       </span>
       :
     </code>
@@ -159,7 +179,8 @@ const LOC = {
   ParameterNode: ParameterNodeRenderer,
   Param: Param,
   MUnimpl: MUnimpl,
-  DefaultComponent: DefaultComponent
+  DefaultComponent: DefaultComponent,
+  link: MyLink
 };
 export const RENDERERS = { ...DEFAULT_RENDERERS, ...LOC };
 

papyri-lab/src/widgets.tsx

@@ -1,5 +1,5 @@
 import { requestAPI } from './handler';
-import { MyPapyri, RENDERERS } from './papyri-comp';
+import { MyPapyri, RENDERERS, SearchContext } from './papyri-comp';
 import { ReactWidget } from '@jupyterlab/apputils';
 import { ThemeProvider } from '@myst-theme/providers';
 import React, { useState } from 'react';
@@ -18,22 +18,38 @@ const PapyriComponent = (): JSX.Element => {
   // list of a few pages in the database that matches
   // the current query
   const [possibilities, setPossibilities] = useState([]);
+  const [navs, setNavs] = useState<string[]>([]);
   const [root, setRoot] = useState({});
-  const [what, setWhat] = useState('');
+
+  const [searchTerm, setSearchTerm] = useState('');
 
   // callback when typing in the input field.
   const onChange = async (event: any) => {
-    setWhat(event.target.value);
+    setSearchTerm(event.target.value);
     search(event.target.value);
   };
+
+  const back = async () => {
+    navs.pop();
+    const pen = navs.pop();
+    if (pen !== undefined) {
+      console.log('Settgin search term', pen);
+      await setSearchTerm(pen);
+      console.log('... and searchg for ', pen);
+      await search(pen);
+    }
+  };
+
   const search = async (query: string) => {
     const res = await requestAPI<any>('get-example', {
       body: query,
       method: 'post'
     });
+    console.log('Got a response for', query, 'res.body=', res.body);
     // response has body (MyST–json if the query has an exact match)
     // and data if we have some close matches.
     if (res.body !== null) {
+      setNavs([...navs, query]);
       setRoot(res.body);
       setPossibilities([]);
     } else {
@@ -42,10 +58,11 @@ const PapyriComponent = (): JSX.Element => {
     }
   };
 
-  const onClick = (value: string) => {
-    setWhat(value);
+  const onClick = async (query: string) => {
+    console.log('On click trigger', query);
+    setSearchTerm(query);
     try {
-      search(value);
+      search(query);
     } catch (e) {
       console.error(e);
     }
@@ -54,21 +71,31 @@ const PapyriComponent = (): JSX.Element => {
 
   return (
     <React.StrictMode>
-      <input onChange={onChange} value={what} />
+      <input onChange={onChange} value={searchTerm} />
+      <button onClick={back}>Back</button>
       <ul>
         {possibilities.map(e => {
           return (
             <li>
-              <a href={e} onClick={() => onClick(e)}>
+              <a
+                href={e}
+                onClick={async () => {
+                  await onClick(e);
+                }}
+              >
                 {e}
               </a>
             </li>
           );
         })}
       </ul>
-      <ThemeProvider renderers={RENDERERS}>
-        <MyPapyri node={root} />
-      </ThemeProvider>
+      <div className="view">
+        <SearchContext.Provider value={onClick}>
+          <ThemeProvider renderers={RENDERERS}>
+            <MyPapyri node={root} />
+          </ThemeProvider>
+        </SearchContext.Provider>
+      </div>
     </React.StrictMode>
   );
 };