@myst-theme/site 0.3.3 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -16,20 +16,20 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/diagrams": "^0.3.3",
-    "@myst-theme/frontmatter": "^0.3.3",
-    "@myst-theme/jupyter": "^0.3.3",
-    "@myst-theme/providers": "^0.3.3",
+    "@myst-theme/diagrams": "^0.3.4",
+    "@myst-theme/frontmatter": "^0.3.4",
+    "@myst-theme/jupyter": "^0.3.4",
+    "@myst-theme/providers": "^0.3.4",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
     "myst-common": "^1.0.1",
     "myst-config": "^1.0.0",
-    "myst-demo": "^0.3.3",
-    "myst-to-react": "^0.3.3",
+    "myst-demo": "^0.3.4",
+    "myst-to-react": "^0.3.4",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",
-    "thebe-react": "^0.2.5",
+    "thebe-react": "^0.2.7",
     "unist-util-select": "^4.0.1"
   },
   "peerDependencies": {

package/src/components/ContentBlocks.tsx

@@ -3,7 +3,11 @@ import { SourceFileKind } from 'myst-common';
 import type { GenericParent } from 'myst-common';
 import { useNodeRenderers } from '@myst-theme/providers';
 import classNames from 'classnames';
-import { ClearCell, RunCell } from './ComputeControls';
+import {
+  NotebookClearCell,
+  NotebookRunCell,
+  NotebookRunCellSpinnerOnly,
+} from '@myst-theme/jupyter';
 
 function isACodeCell(node: GenericParent) {
   return (
@@ -18,6 +22,7 @@ function isACodeCell(node: GenericParent) {
 
 function Block({
   id,
+  pageKind,
   node,
   className,
 }: {
@@ -41,13 +46,22 @@ function Block({
         [subGrid]: !noSubGrid,
       })}
     >
-      {children}
-      {isACodeCell(node) && (
-        <div className="hidden group-hover/block:flex md:flex-col absolute -top-[28px] md:top-0 right-0 md:-right-[28px] mt-8">
-          <RunCell id={id} />
-          <ClearCell id={id} />
-        </div>
+      {pageKind === SourceFileKind.Notebook && isACodeCell(node) && (
+        <>
+          <div className="flex sticky top-[80px] z-10 opacity-70 group-hover/block:opacity-100 group-hover/block:hidden">
+            <div className="absolute top-0 -right-[28px] flex md:flex-col">
+              <NotebookRunCellSpinnerOnly id={id} />
+            </div>
+          </div>
+          <div className="hidden sticky top-[80px] z-10 opacity-70 group-hover/block:opacity-100 group-hover/block:flex">
+            <div className="absolute top-0 -right-[28px] flex md:flex-col">
+              <NotebookRunCell id={id} />
+              <NotebookClearCell id={id} />
+            </div>
+          </div>
+        </>
       )}
+      {children}
     </div>
   );
 }

package/src/components/Navigation/TableOfContents.tsx

@@ -48,7 +48,7 @@ const HeadingLink = ({
           'border-l pl-4 text-blue-500 border-current dark:text-blue-400': !isIndex && isActive,
           'font-semibold': isActive,
           'border-l pl-4 border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300':
-            !isActive,
+            !isIndex && !isActive,
         })
       }
       to={withBaseurl(path, baseurl)}
@@ -191,7 +191,7 @@ export const TableOfContents = ({
         </nav>
         {footer && (
           <div
-            className="flex-none py-4 opacity-0 transition-all duration-700 translate-y-6"
+            className="flex-none py-4 transition-all duration-700 translate-y-6 opacity-0"
             ref={footerRef}
           >
             {footer}

package/src/pages/Article.tsx

@@ -1,55 +1,52 @@
 import React from 'react';
 import { ReferencesProvider } from '@myst-theme/providers';
-import { FrontmatterBlock } from '@myst-theme/frontmatter';
 import { Bibliography, ContentBlocks, FooterLinksBlock } from '../components';
 import { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
 import { ErrorProjectNotFound } from './ErrorProjectNotFound';
 import type { PageLoader } from '../types';
-import { ThebeRenderMimeRegistryProvider, ThebeSessionProvider } from 'thebe-react';
 import type { GenericParent } from 'myst-common';
 import { SourceFileKind } from 'myst-common';
-import { EnableCompute } from '../components/EnableCompute';
-import { NotebookRunAll } from '../components/ComputeControls';
 import {
-  NotebookProvider,
-  BinderBadge,
   useComputeOptions,
+  ExecuteScopeProvider,
+  BusyScopeProvider,
+  NotebookToolbar,
   ConnectionStatusTray,
+  BinderBadge,
 } from '@myst-theme/jupyter';
+import { FrontmatterBlock } from '@myst-theme/frontmatter';
 
 export const ArticlePage = React.memo(function ({ article }: { article: PageLoader }) {
   const computeOptions = useComputeOptions();
   const canCompute = computeOptions.canCompute && (article.frontmatter as any)?.thebe !== false;
-  const { hide_title_block, hide_footer_links, binder } =
-    (article.frontmatter as any)?.design ?? {};
-  const isJupyter = article?.kind && article.kind === SourceFileKind.Notebook;
+  const { hide_title_block, hide_footer_links } = (article.frontmatter as any)?.design ?? {};
+
+  // take binder url from article frontmatter or fallback to project
+  const binderUrl = article.frontmatter.binder ?? computeOptions.binderBadgeUrl;
+
   return (
     <ReferencesProvider
       references={{ ...article.references, article: article.mdast }}
       frontmatter={article.frontmatter}
     >
-      <ThebeRenderMimeRegistryProvider>
-        <ThebeSessionProvider start={false} name={article.slug}>
+      <BusyScopeProvider>
+        <ExecuteScopeProvider contents={article}>
           {!hide_title_block && (
             <FrontmatterBlock kind={article.kind} frontmatter={article.frontmatter} />
           )}
-          <NotebookProvider siteConfig={false} page={article}>
-            <div className="flex items-center">
-              <div className="flex-grow"></div>
-              {binder && <BinderBadge binder={binder} />}
-              {canCompute && isJupyter && (
-                <EnableCompute canCompute={true} key={article.slug}>
-                  <NotebookRunAll />
-                </EnableCompute>
-              )}
+          {binderUrl && !canCompute && (
+            <div className="flex justify-end">
+              <BinderBadge binder={binderUrl} />
             </div>
-            <ContentBlocks pageKind={article.kind} mdast={article.mdast as GenericParent} />
-            <ConnectionStatusTray />
-            <Bibliography />
-            {!hide_footer_links && <FooterLinksBlock links={article.footer} />}
-          </NotebookProvider>
-        </ThebeSessionProvider>
-      </ThebeRenderMimeRegistryProvider>
+          )}
+          {canCompute && article.kind === SourceFileKind.Notebook && <NotebookToolbar showLaunch />}
+          {canCompute && article.kind === SourceFileKind.Article && <NotebookToolbar />}
+          <ContentBlocks pageKind={article.kind} mdast={article.mdast as GenericParent} />
+          <Bibliography />
+          <ConnectionStatusTray />
+          {!hide_footer_links && <FooterLinksBlock links={article.footer} />}
+        </ExecuteScopeProvider>
+      </BusyScopeProvider>
     </ReferencesProvider>
   );
 });

package/src/components/ComputeControls.tsx

@@ -1,131 +0,0 @@
-import { Spinner } from './Spinner';
-import PlayCircleIcon from '@heroicons/react/24/outline/PlayCircleIcon';
-import ArrowPathIcon from '@heroicons/react/24/outline/ArrowPathIcon';
-import MinusCircleIcon from '@heroicons/react/24/outline/MinusCircleIcon';
-import ArrowTopRightOnSquareIcon from '@heroicons/react/24/outline/ArrowTopRightOnSquareIcon';
-import classNames from 'classnames';
-import type { NotebookExecuteOptions } from 'thebe-react';
-import { useThebeServer } from 'thebe-react';
-import type { IThebeCellExecuteReturn } from 'thebe-core';
-import { useMDASTNotebook, useNotebookCellExecution } from '@myst-theme/jupyter';
-
-export function Run({
-  ready,
-  executing,
-  disabled,
-  execute,
-}: {
-  ready: boolean;
-  executing: boolean;
-  disabled?: boolean;
-  execute: (
-    options?: NotebookExecuteOptions | undefined,
-  ) => Promise<(IThebeCellExecuteReturn | null)[]>;
-}) {
-  return (
-    <div className="relative flex text-sm">
-      <button
-        className={classNames(
-          'cursor-pointer text-gray-700 active:text-green-700 hover:opacity-100',
-          {
-            'opacity-10 hover:opacity-10': executing,
-            'opacity-60': !executing,
-          },
-        )}
-        disabled={disabled || !ready || executing}
-        onClick={() => execute()}
-      >
-        <PlayCircleIcon className="inline-block w-6 h-6 align-top" title="run all cells" />
-      </button>
-      {executing && (
-        <span className="absolute top-0 left-0 z-10 w-[22px] h-[22px] opacity-100">
-          <Spinner size={24} />
-        </span>
-      )}
-    </div>
-  );
-}
-
-export function Clear({
-  ready,
-  executing,
-  disabled,
-  clear,
-}: {
-  ready: boolean;
-  executing: boolean;
-  disabled?: boolean;
-  clear: () => void;
-}) {
-  return (
-    <button
-      className="flex text-gray-700 cursor-pointer active:text-green-700 opacity-60 hover:opacity-100"
-      disabled={disabled || !ready || executing}
-      onClick={() => clear()}
-    >
-      <MinusCircleIcon className="inline-block w-6 h-6 align-top" title="clear all outputs" />
-    </button>
-  );
-}
-
-export function RunCell({ id }: { id: string }) {
-  const exec = useNotebookCellExecution(id);
-  if (!exec?.ready) return null;
-  const { ready, executing, notebookIsExecuting, execute } = exec;
-  return (
-    <Run ready={ready} executing={executing} disabled={notebookIsExecuting} execute={execute} />
-  );
-}
-
-export function ClearCell({ id }: { id: string }) {
-  const exec = useNotebookCellExecution(id);
-  if (!exec?.ready) return null;
-  const { ready, executing, notebookIsExecuting, clear } = exec;
-  return <Clear ready={ready} executing={executing} disabled={notebookIsExecuting} clear={clear} />;
-}
-
-export function NotebookRunAll() {
-  const { ready: serverReady, server } = useThebeServer();
-  const exec = useMDASTNotebook();
-
-  if (!exec?.ready) return null;
-  const { ready, executing, executeAll, restart, clear } = exec;
-
-  const clickLaunchInJupyter = () => {
-    if (!serverReady || !server?.settings) return;
-    window.open(server.settings.baseUrl, '_blank');
-  };
-
-  return (
-    <div className="flex">
-      <div className="relative flex group space-x-1">
-        <Run
-          ready={ready}
-          executing={executing}
-          execute={(options) => {
-            clear();
-            return executeAll(options);
-          }}
-        />
-        <button
-          className="flex items-center text-gray-700 cursor-pointer active:text-green-700 opacity-60 hover:opacity-100"
-          disabled={!ready || executing}
-          onClick={() => restart()}
-        >
-          <ArrowPathIcon className="w-6 h-6" title="restart kernel" />
-        </button>
-        <Clear ready={ready} executing={executing} clear={clear} />
-        <button
-          className="flex items-center text-gray-700 cursor-pointer active:text-green-700 opacity-60 hover:opacity-100"
-          disabled={!ready}
-          onClick={clickLaunchInJupyter}
-        >
-          <ArrowTopRightOnSquareIcon
-            className="inline-block w-6 h-6 align-top"
-            title="launch in juptyer"
-          />
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/components/EnableCompute.tsx

@@ -1,72 +0,0 @@
-import { useThebeLoader, useThebeServer, useThebeSession } from 'thebe-react';
-import PowerIcon from '@heroicons/react/24/outline/PowerIcon';
-import { useHasNotebookProvider } from '@myst-theme/jupyter';
-import { useNavigation } from '@remix-run/react';
-import { useEffect, useState } from 'react';
-import { Spinner } from './Spinner';
-import classNames from 'classnames';
-
-export function EnableCompute({
-  canCompute,
-  children,
-}: React.PropsWithChildren<{ canCompute: boolean }>) {
-  const { load, loading, core } = useThebeLoader();
-  const { connect, connecting, ready: serverReady, error: serverError } = useThebeServer();
-  const { start, starting, shutdown, ready: sessionReady, error: sessionError } = useThebeSession();
-  const hasNotebookProvider = useHasNotebookProvider();
-  const navigation = useNavigation();
-  const [enabling, setEnabling] = useState(false);
-  const [enabled, setEnabled] = useState(false);
-  const busy = enabling || loading || connecting || starting;
-
-  useEffect(() => {
-    if (!enabling) return;
-    if (!core) return load();
-    if (!serverReady) return connect();
-    if (!sessionReady) start();
-    if (sessionReady) {
-      setEnabled(true);
-      setEnabling(false);
-    }
-  }, [enabling, core, serverReady, sessionReady]);
-
-  if (!canCompute || !hasNotebookProvider) return null;
-  let title = 'Connect to a compute server';
-  const error = !!sessionError || !!serverError;
-  if (error) {
-    title = 'Error connecting to compute server';
-  }
-  if (busy) {
-    title = 'Connecting...';
-  }
-
-  useEffect(() => {
-    if (navigation.state === 'loading') {
-      shutdown();
-    }
-  }, [shutdown, navigation]);
-
-  return (
-    <div className="relative flex items-center mx-1 mb-2">
-      {!enabled && (
-        <button
-          className={classNames(
-            'flex text-center mr-1 cursor-pointer rounded-full disabled:opacity-10 text-gray-700',
-            { 'text-red-600 opacity-100': error },
-          )}
-          onClick={() => setEnabling(true)}
-          disabled={connecting || starting}
-          title={title}
-        >
-          <PowerIcon className="inline-block w-6 h-6 mx-1 align-top" />
-        </button>
-      )}
-      {(connecting || starting) && !error && (
-        <span className="absolute top-0 left-1 z-10 w-[22px] h-[22px] opacity-100" title={title}>
-          <Spinner size={24} />
-        </span>
-      )}
-      {enabled && <>{children}</>}
-    </div>
-  );
-}