feat/thebe v2 - interactive figures in articles #136

stevejpurves · 2023-06-23T09:09:01Z

Current thebe integration only applies to notebooks, whereas we can include notebook outputs in any markdown file as a figure or embedding.

This PR will replace the thebe provider system with one that can support interactive figures anywhere in a myst site, in addition to still enabling the notebooks to be run and made interactive as before.

Goals:

any notebook on a site is identified as "computable" and can be run
any article containing a notebook output is identified as "computable" and can be run
execution state/context is separate between pages on a site
a user can navigate around the site, without losing their session when returning to a page previously visited and run
simplified UI for notebooks
new compact UI for figures in markdown
UI feedback during server connections
connections/startups that are initiated will continue to progress even if the user navigates away
[DEFERRED] Errors that occur in parts of a notebook that are not attached to the UI are surfaced - see Surface errors in notebook cells not visible on the page #139

rowanc1 · 2023-07-03T17:30:38Z

I think this is good to go in after a few minor changes that I am making locally. Notes are for future PRs.

There is no error feedback when a server: true fails to connect.

Navigating back to a notebook does not reattach cells (I thought that was in scope?).

Navigating back to an article does not reattach the model correctly.

It would be nice to figure out a way to only install things on lite:

In lite, there are calls to /pypi/all.json, should this be the place that we put our dependencies?

packages/site/tsconfig.json

stevejpurves · 2023-07-03T19:00:06Z

navigating back should reattach cells -- will investigate.

afaik the /pypi/all.json is more like a fake pypi.org main listing, rather than the list of wheels that should be loaded

stevejpurves · 2023-07-03T19:01:46Z

packages/jupyter/src/controls/NotebookToolbar.tsx

-      <div className="sticky top-[60px] flex justify-end w-full z-20">
-        <div className="flex p-1 m-1 space-x-1 border rounded-full shadow border-stone-300 bg-white/80 dark:bg-stone-900/80 backdrop-blur">
+      <div className="sticky top-[60px] flex justify-end w-full z-20 pointer-events-none">
+        <div className="flex p-1 m-1 space-x-1 border rounded-full shadow pointer-events-auto border-stone-300 bg-white/80 dark:bg-stone-900/80 backdrop-blur">


@rowanc1 guessing this was to stop the pointer showing up over blank space in the rest of the div yeah?

stevejpurves · 2023-07-03T19:03:04Z

packages/site/tsconfig.json

@@ -1,6 +1,6 @@
 {
  "extends": "../tsconfig/react-library.json",
-  "include": [".", "../jupyter/src/execute", "../jupyter/src/controls"],
+  "include": ["."],


hmm wonder if this was a vscode auto thing, as i didnt; add these explicitly

Yeah, when you drag from one folder to another it happens!

rowanc1

Woops, didn't post my comments!

rowanc1 · 2023-07-03T18:32:31Z

packages/jupyter/package.json

-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest watch"


@stevejpurves this is more consistent with mystmd.

rowanc1 · 2023-07-03T18:32:46Z

packages/jupyter/src/ConnectionStatusTray.tsx

@@ -44,6 +45,7 @@ export function ConnectionStatusTray() {

  const host = thebe?.useBinder ? 'Binder' : thebe?.useJupyterLite ? 'JupyterLite' : 'Local Server';

+  // TODO radix ui toast!


Looking forward to this. :)

rowanc1 · 2023-07-03T18:33:04Z

packages/jupyter/src/ErrorTray.tsx

+  );
+}
+
+export function ErrorTray({ errors }: { errors: IThebeNotebookError[] }) {


I think this should also be radix in the future.

rowanc1 · 2023-07-03T18:36:28Z

packages/jupyter/src/execute/actions.ts

+    | 'NAVIGATE'
+    | 'REQUEST_BUILD'
+    | 'BUILD_STATUS'
+    | 'CLEAR_BUILD'
+    | 'ADD_MDAST'
+    | 'ADD_NOTEBOOK'
+    | 'ADD_SESSION'
+    | 'SET_FIRST_EXECUTION'
+    | 'SET_RENDERING_READY';


We might want to turn this into a type in future (or enum). Might catch a few errors.

yeah the typing is not great, so strengthening that is good. I'm getting turned off enums though as they're not types and trying to use the thebe event enums for example are painful.

rowanc1 · 2023-07-03T18:37:03Z

packages/jupyter/src/execute/busy.tsx

+  kind: BusyKind;
+}
+
+// TODO action typing is not giving build time type errors :(


An enum would. But that might be overkill.

rowanc1 · 2023-07-03T19:05:51Z

packages/site/tsconfig.json

@@ -1,6 +1,6 @@
 {
  "extends": "../tsconfig/react-library.json",
-  "include": [".", "../jupyter/src/execute", "../jupyter/src/controls"],
+  "include": ["."],


Yeah, when you drag from one folder to another it happens!

rowanc1 · 2023-07-03T19:05:59Z

packages/jupyter/src/controls/NotebookToolbar.tsx

-      <div className="sticky top-[60px] flex justify-end w-full z-20">
-        <div className="flex p-1 m-1 space-x-1 border rounded-full shadow border-stone-300 bg-white/80 dark:bg-stone-900/80 backdrop-blur">
+      <div className="sticky top-[60px] flex justify-end w-full z-20 pointer-events-none">
+        <div className="flex p-1 m-1 space-x-1 border rounded-full shadow pointer-events-auto border-stone-300 bg-white/80 dark:bg-stone-900/80 backdrop-blur">


stevejpurves · 2023-07-03T19:10:58Z

packages/site/src/components/Navigation/TableOfContents.tsx

@@ -163,7 +163,7 @@ export const TableOfContents = ({
    <div
      ref={tocRef}
      className={classNames(
-        'fixed xl:article-grid article-grid-gap xl:w-screen xl:pointer-events-none overflow-auto max-xl:min-w-[300px] z-20',
+        'fixed xl:article-grid article-grid-gap xl:w-screen xl:pointer-events-none overflow-auto max-xl:min-w-[300px]',


@rowanc1 reverting this causes two issues: the menu items can be covered by the toolbar div and the inset black background no longer blacks out the compute toolbar. The toolbar is set to z-10 to lift above content in the main body.

did the z-20 here interfere with something else?

or is there a better way to deal with this overall?

It breaks the cross-references which appear under the toc.

The pointer-events-none should allow the controls to be mostly fixed though, only the right hand side is active?

Left some other notes on this here:
#136 (comment)

stevejpurves mentioned this pull request Jun 28, 2023

make cells more stateful executablebooks/thebe#647

Merged

rowanc1 mentioned this pull request Jun 28, 2023

Thebe integration: Modify sources executablebooks/mystmd#443

Open

stevejpurves added 22 commits June 29, 2023 10:00

🤔wip

ca326e2

🤺 basic scope persisted across navigation

64b6a32

👷🏽build requests

00a9460

🛤 parallel builds

b5c57eb

📡 fetching dependency mdast on demand

f52df10

🗺fix navigation logic

74f22e5

🍱 prepping for notebook build step

a5efd80

🔧 use standard selector arg ordering

2e32add

🪐 move to jupyter package

5741d21

🎥📒 notebook and rendermime added to scope

09e4e11

🐐ready for session start

efde2c1

🖥 server started & beginning session startup

9ae03d8

🚀 sessions are started

b67ac7d

🧲 cells attach to the DOM in articles

0dad078

⚡️ execution

bf3fa3e

🙏 session creation happening as expected

c6cd741

🏗 loading core on demand

0ba558b

🛟 outputs from execution are preserved across navigation

f341a1d

🎚reset all

8b1e7f3

🪝extended execution hooks

cbd6654

🚥 start of toolbar UI

7f9a39a

🎛 notebook UI controls

376b86d

stevejpurves force-pushed the feat/thebe-v2 branch from 75f7f92 to 376b86d Compare June 29, 2023 10:15

stevejpurves added 5 commits June 29, 2023 11:27

🏃‍♀️autorun

52d6e16

♻️ session restarts on reconnect

dbbde15

🕵️‍♀️ debug not log

0a6eb0e

🎒port to new exec scope provider

1052db1

☎️ button uniformity

428731d

stevejpurves added 9 commits July 3, 2023 12:17

🔧 fix reset behaviour

66c2bbe

🛠fix resetall

2607ff7

💭renaming

60df62b

👔 final styles

c526827

♻ busy status on restarts

0ec804c

🌗dark mode

8d5be08

🐑 lint

d835a1e

🌀 reinstate binder badge and frontmatter block

2e5a7b5

⚠️ added error tray component

59cfc66

stevejpurves mentioned this pull request Jul 3, 2023

Surface errors in notebook cells not visible on the page #139

Open

💚 tests green

c20e74d

stevejpurves marked this pull request as ready for review July 3, 2023 15:00

stevejpurves requested a review from rowanc1 July 3, 2023 15:00

rowanc1 reviewed Jul 3, 2023

View reviewed changes

packages/site/tsconfig.json Outdated Show resolved Hide resolved

rowanc1 added 7 commits July 3, 2023 11:58

📖 Table of contents indent for index page

3eeb188

👆 pointer-events-none on execute controls

2fcb4b8

📦 Fix tsconfig

705088a

📦 Make vitest stop when running test.

2e9e504

🤫 Remove console logs

6292f0a

⎌ Revert z-index change

9067da0

📖 Update error message

d44ea52

rowanc1 merged commit b81068e into main Jul 3, 2023
1 check passed

rowanc1 deleted the feat/thebe-v2 branch July 3, 2023 18:41

stevejpurves commented Jul 3, 2023

View reviewed changes

rowanc1 reviewed Jul 3, 2023

View reviewed changes

stevejpurves commented Jul 3, 2023

View reviewed changes

stevejpurves mentioned this pull request Jul 3, 2023

🪐 Thebe updates to loading #141

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat/thebe v2 - interactive figures in articles #136

feat/thebe v2 - interactive figures in articles #136

stevejpurves commented Jun 23, 2023 •

edited

rowanc1 commented Jul 3, 2023

stevejpurves commented Jul 3, 2023

stevejpurves Jul 3, 2023 •

edited

rowanc1 Jul 3, 2023

stevejpurves Jul 3, 2023

rowanc1 Jul 3, 2023

rowanc1 left a comment

rowanc1 Jul 3, 2023

rowanc1 Jul 3, 2023

rowanc1 Jul 3, 2023

rowanc1 Jul 3, 2023

stevejpurves Jul 3, 2023

rowanc1 Jul 3, 2023

rowanc1 Jul 3, 2023

rowanc1 Jul 3, 2023

stevejpurves Jul 3, 2023

stevejpurves Jul 3, 2023

rowanc1 Jul 3, 2023

rowanc1 Jul 3, 2023

		@@ -44,6 +45,7 @@ export function ConnectionStatusTray() {

		const host = thebe?.useBinder ? 'Binder' : thebe?.useJupyterLite ? 'JupyterLite' : 'Local Server';

		// TODO radix ui toast!

feat/thebe v2 - interactive figures in articles #136

feat/thebe v2 - interactive figures in articles #136

Conversation

stevejpurves commented Jun 23, 2023 • edited

rowanc1 commented Jul 3, 2023

stevejpurves commented Jul 3, 2023

stevejpurves Jul 3, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rowanc1 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stevejpurves commented Jun 23, 2023 •

edited

stevejpurves Jul 3, 2023 •

edited