From a158a19efe875344078303fa23837133fb1a61c1 Mon Sep 17 00:00:00 2001 From: Matthias Bussonnier Date: Mon, 22 Jan 2024 14:45:50 +0100 Subject: [PATCH 1/3] turn into class compnebt --- papyri-lab/src/widgets.tsx | 154 ++++++++++++++++++++++--------------- 1 file changed, 92 insertions(+), 62 deletions(-) diff --git a/papyri-lab/src/widgets.tsx b/papyri-lab/src/widgets.tsx index 1ac40487..a0265456 100644 --- a/papyri-lab/src/widgets.tsx +++ b/papyri-lab/src/widgets.tsx @@ -2,7 +2,7 @@ import { requestAPI } from './handler'; import { MyPapyri, RENDERERS, SearchContext } from './papyri-comp'; import { ReactWidget } from '@jupyterlab/apputils'; import { ThemeProvider } from '@myst-theme/providers'; -import React, { useState } from 'react'; +import React from 'react'; // this is a papyri react component that in the end should // have navigation UI and a myst renderer to display the @@ -14,33 +14,57 @@ import React, { useState } from 'react'; // // I'm going to guess it will need some configuration hook for when we click on links. // -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([]); - const [root, setRoot] = useState({}); +// +class PapyriComponent extends React.Component { + state = { + possibilities: [], + navs: [], + root: {}, + searchterm: '' + }; + constructor(props: any) { + super(props); + this.state = { + possibilities: [], + navs: [], + root: {}, + searchterm: '' + }; + } - const [searchTerm, setSearchTerm] = useState(''); + setPossibilities(pos: any) { + this.setState({ possibilities: pos }); + } - // callback when typing in the input field. - const onChange = async (event: any) => { - setSearchTerm(event.target.value); - search(event.target.value); - }; + setNavs(navs: any) { + this.setState({ navs: navs }); + } + + setRoot(root: any) { + this.setState({ root: root }); + } + + setSearchTerm(searchterm: string) { + this.setState({ searchterm: searchterm }); + } + + async handleInputChange(event: any) { + console.log('on change, this is', this); + this.setSearchTerm(event.target.value); + this.search(event.target.value); + } - const back = async () => { - navs.pop(); - const pen = navs.pop(); + async back() { + this.state.navs.pop(); + const pen = this.state.navs.pop(); if (pen !== undefined) { console.log('Setting search term', pen); - await setSearchTerm(pen); + await this.setSearchTerm(pen); console.log('... and searchg for ', pen); - await search(pen); + await this.search(pen); } - }; - - const search = async (query: string) => { + } + async search(query: string) { const res = await requestAPI('get-example', { body: query, method: 'post' @@ -49,56 +73,62 @@ const PapyriComponent = (): JSX.Element => { // 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([]); + this.setNavs([...this.state.navs, query]); + this.setRoot(res.body); + this.setPossibilities([]); } else { - setRoot({}); - setPossibilities(res.data); + this.setRoot({}); + this.setPossibilities(res.data); } - }; + } + + async onClick(query: string) { + console.log('On click trigger', query, 'this is', this); - const onClick = async (query: string) => { - console.log('On click trigger', query); - setSearchTerm(query); + this.setSearchTerm(query); try { - search(query); + this.search(query); } catch (e) { console.error(e); } return false; - }; + } - return ( - - - - -
- - - - - -
- - ); -}; + render(): JSX.Element { + return ( + + + + +
+ + + + + +
+ + ); + } +} // This seem to be the way to have an adapter between lumino and react, and // allow to render react inside a JupyterLab panel From 1fe20d2998f783040c416ed2704e05b077634ca6 Mon Sep 17 00:00:00 2001 From: Matthias Bussonnier Date: Mon, 22 Jan 2024 14:52:19 +0100 Subject: [PATCH 2/3] bind handlers --- papyri-lab/src/widgets.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/papyri-lab/src/widgets.tsx b/papyri-lab/src/widgets.tsx index a0265456..fed39f46 100644 --- a/papyri-lab/src/widgets.tsx +++ b/papyri-lab/src/widgets.tsx @@ -98,7 +98,7 @@ class PapyriComponent extends React.Component { return ( @@ -119,7 +119,7 @@ class PapyriComponent extends React.Component { })}
- + From fdbb53fd0b252f819440a460c2a6910de8336e8f Mon Sep 17 00:00:00 2001 From: Matthias Bussonnier Date: Mon, 22 Jan 2024 15:20:24 +0100 Subject: [PATCH 3/3] Create component ref and hook into the kernelspy. This using the IPython extension and using `?` on an existing object, it should pop out the right docstring. %load_ext papyri import numpy as np np.einsum? --- papyri-lab/src/index.tsx | 3 ++- papyri-lab/src/widgets.tsx | 9 ++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/papyri-lab/src/index.tsx b/papyri-lab/src/index.tsx index 5dd051ee..8a7052ed 100644 --- a/papyri-lab/src/index.tsx +++ b/papyri-lab/src/index.tsx @@ -86,9 +86,10 @@ const plugin: JupyterFrontEndPlugin = { } const kernelSpy = new KernelSpyModel(notebookTracker); - kernelSpy.questionMarkSubmitted.connect((_, args) => { + kernelSpy.questionMarkSubmitted.connect((_, args: any) => { console.info('KSpy questionMarkSubmitted args:', args); if (args !== undefined) { + widget.content.updateSeachTerm(args.qualname); console.info('DO your thing here.'); } }); diff --git a/papyri-lab/src/widgets.tsx b/papyri-lab/src/widgets.tsx index fed39f46..bf9ef1ed 100644 --- a/papyri-lab/src/widgets.tsx +++ b/papyri-lab/src/widgets.tsx @@ -133,15 +133,22 @@ class PapyriComponent extends React.Component { // This seem to be the way to have an adapter between lumino and react, and // allow to render react inside a JupyterLab panel export class PapyriPanel extends ReactWidget { + comp: any; constructor() { super(); this.addClass('jp-ReactWidget'); this.id = 'papyri-browser'; this.title.label = 'Papyri browser'; this.title.closable = true; + this.comp = React.createRef(); + } + + updateSeachTerm(str: string) { + this.comp.current.setSearchTerm(str); + this.comp.current.search(str); } render(): JSX.Element { - return ; + return ; } }