jupyter-book · stevejpurves · Sep 30, 2021 · Sep 20, 2021 · Sep 20, 2021 · Aug 16, 2021
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -7,3 +7,4 @@ updates:
     directory: "/" # Location of yarn.lock
     schedule:
       interval: "weekly"
+    open-pull-requests-limit: 0
diff --git a/development/binder.html b/development/binder.html
@@ -9,6 +9,8 @@
       -->
     <script type="text/x-thebe-config">
       {
+        mountStatusWidget: true,
+        mountActivateWidget: true,
         requestKernel: true,
         binderOptions: {
           repo: "binder-examples/requirements",
@@ -22,17 +24,8 @@
   </head>
   <body>
     <div class="container">
-      <button id="activateButton">Activate</button>
-      <script>
-        var bootstrapThebe = function () {
-          thebelab.bootstrap();
-        };
-
-        document
-          .querySelector("#activateButton")
-          .addEventListener("click", bootstrapThebe);
-      </script>
-
+      <div class="thebe-activate"></div>
+      <div class="thebe-status"></div>
       <pre data-executable="true" data-language="python" class="pre-element">
 print("Hello!")</pre
       >

diff --git a/development/local.html b/development/local.html
@@ -10,7 +10,9 @@
         -->
     <script type="text/x-thebe-config">
       {
-        requestKernel: true,
+        requestKernel: false,
+        mountActivateWidget: true,
+        mountStatusWidget: true,
         kernelOptions: {
           name: "python3",
           path: ".",
@@ -41,16 +43,8 @@
             </pre
         >
       </div>
-      <button id="activateButton">Activate</button>
-      <script>
-        var bootstrapThebe = function () {
-          thebelab.bootstrap();
-        };
-
-        document
-          .querySelector("#activateButton")
-          .addEventListener("click", bootstrapThebe);
-      </script>
+      <div class="thebe-activate"></div>
+      <div class="thebe-status"></div>
       <pre data-executable="true" data-language="python" class="pre-element">
 print("Hello!")</pre
       >

diff --git a/development/main.css b/development/main.css
@@ -8,10 +8,10 @@ body {
   align-items: center;
   height: 100vh;
 }
-#activateButton {
-  width: 130px;
-  height: 50px;
-  font-size: 1.25em;
+.thebe-activate {
+  margin-bottom: 15px;
+}
+.thebe-activate-button {
   border: 1px solid black;
   border-radius: 5px;
   background-color: lightblue;

diff --git a/docs/Makefile b/docs/Makefile
@@ -2,7 +2,7 @@
 #
 
 # You can set these variables from the command line.
-SPHINXOPTS    =
+SPHINXOPTS    = -v
 SPHINXBUILD   = sphinx-build
 SPHINXPROJ    = Thebe
 SOURCEDIR     = .

diff --git a/docs/api.rst b/docs/api.rst
@@ -10,4 +10,4 @@ The thebe JavaScript API
     We need to add jsdoc-style docstrings to our exported functions.
 
 
-.. js:autofunction:: bootstrap
+.. js:autofunction:: thebelab.bootstrap
diff --git a/docs/index.rst b/docs/index.rst
@@ -10,6 +10,7 @@ Thebe
    configure
    security
    events
+   ui
    config_reference
    howto/initialize_cells
    contribute
@@ -53,7 +54,7 @@ Try clicking the button. The cell will be come active!
 
 .. raw:: html
 
-   <button id="activateButton" style="width: 120px; height: 40px; font-size: 1.5em;">Activate</button>
+
    <script>
    var bootstrapThebe = function() {
        thebelab.bootstrap();

diff --git a/docs/ui.rst b/docs/ui.rst
@@ -0,0 +1,96 @@
+==============
+User Interface
+==============
+
+Thebe includes support for some built-in user interface elements.
+
+The aim is to provide simple elements that can be added to a page and styled accordingly by the consumer without needing to [re]write code.
+Using these UI elements in the way shown here, assumes that you already have Thebe statically loaded on page.
+
+Built in UI elements are:
+
+- Activate Button
+- Kernel Status Widget
+
+Activate Button
+===============
+
+When this button is pressed, it will run the `thebelab.bootstrap` function on the page.
+Configure this UI element as follows.
+
+Add a ``div`` element to the page in the desired location.
+
+.. code-block:: html
+
+  <div class="thebe-activate" />
+
+Then set the following option to :code:`mountActivateWidget:true` in the Thebe config object
+
+Status Widget
+=============
+
+This element will display the status of the kernel, it will update when the kernel sends new messages or when code is executed.
+Configure this UI element as follows.
+
+Add a :code:`div` element to the page in the desired location.
+
+.. code-block:: html
+
+  <div class="thebe-status" />
+
+Then set the following option to :code:`mountStatusWidget:true` in the Thebe config object
+
+Example
+=======
+
+Adding the following to a page will render both Activate and Status widgets.
+
+.. code-block:: html
+
+  <script src="https://unpkg.com/thebe@latest/lib/index.js"></script>
+  <script type="text/x-thebe-config">
+    {
+      requestKernel: true,
+      binderOptions: {
+        repo: "binder-examples/requirements",
+      },
+      mountActivateWidget: true,
+      mountStatusWidget: true
+    }
+  </script>
+  <div class="thebe-activate" />
+  <div class="thebe-status" />
+
+Pressing activate will convert the following code into an activate cell, and the kernel status widget
+will show status of the kernel launch.
+
+.. raw:: html
+
+  <script src="https://unpkg.com/thebe@latest/lib/index.js"></script>
+  <script type="text/x-thebe-config">
+    {
+      requestKernel: true,
+      binderOptions: {
+        repo: "binder-examples/requirements",
+      },
+      mountActivateWidget: true,
+      mountStatusWidget: true
+    }
+  </script>
+  <div class="thebe-activate"></div>
+  <div class="thebe-status"></div>
+
+
+.. raw:: html
+
+   <pre data-executable="true" data-language="python">
+   %matplotlib inline
+   import numpy as np
+   import matplotlib.pyplot as plt
+   x = np.linspace(0,10)
+   plt.plot(x, np.sin(x))
+   plt.plot(x, np.cos(x))
+   </pre>
+
+
+Note: If you are looking to load Thebe dynamically, check the custom launch button `in the example here. <https://github.com/executablebooks/thebe/blob/feat/kernel-status/examples/demo-launch-button.html>`_
diff --git a/examples/activate_button.html b/examples/activate_button.html
diff --git a/examples/demo-activate-button.html b/examples/demo-activate-button.html
@@ -0,0 +1,57 @@
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Thebe Activate Button</title>
+    <link rel="stylesheet" type="text/css" href="index.css" />
+
+    <!-- Thebe configuration !-->
+    <script type="text/x-thebe-config">
+      {
+        binderOptions: {
+          repo: "binder-examples/requirements"
+        },
+        requestKernel: true,
+        mountStatusWidget: true,
+        mountActivateWidget: true,
+      }
+    </script>
+    <script src="../lib/index.js"></script>
+    <!-- Dependency: jquery !-->
+    <script
+      src="https://code.jquery.com/jquery-3.2.1.min.js"
+      type="text/javascript"
+    ></script>
+    <style>
+      body: {
+        padding: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Built In Activate Button</h1>
+    <p>
+      This page illustrates the use of the built in activation button in Thebe.
+      By adding an element with the <code>.thebe-activate</code> class and
+      setting the <code>mountActivateWidget</code> option, an activate button
+      will be added to the page. Add rules to the
+      <code>.thebe-activate</code> class to change styling to suit your needs.
+    </p>
+
+    <div class="thebe-activate"></div>
+    <div class="thebe-status"></div>
+    <p>This cell will turn into the live cell:</p>
+    <pre data-executable>
+%matplotlib inline
+import numpy as np
+import matplotlib.pyplot as plt
+x = np.linspace(0,10)
+plt.plot(x, np.sin(x))
+plt.plot(x, np.cos(x))
+    </pre>
+    <p>
+      Note: this page also contains the built in status widget - see
+      <a href="./demo-status-widget.html">demo-status-widget.html</a> for more
+      info.
+    </p>
+  </body>
+</html>
diff --git a/examples/demo-active-variation.html b/examples/demo-active-variation.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <title>Variation</title>
-
+    <link rel="stylesheet" type="text/css" href="index.css" />
     <script type="text/x-thebe-config">
       {
         bootstrap: true,
@@ -14,8 +14,10 @@
         },
       }
     </script>
-    <script type="text/javascript" src="https://unpkg.com/thebe@latest"></script>
-
+    <script
+      type="text/javascript"
+      src="https://unpkg.com/thebe@latest"
+    ></script>
   </head>
   <body>
     <h1>My web page with code samples</h1>

diff --git a/examples/demo-active.html b/examples/demo-active.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <title>An active web page</title>
-
+    <link rel="stylesheet" type="text/css" href="index.css" />
     <script type="text/x-thebe-config">
       {
         bootstrap: true,
@@ -14,8 +14,10 @@
         },
       }
     </script>
-    <script type="text/javascript" src="https://unpkg.com/thebe@latest"></script>
-
+    <script
+      type="text/javascript"
+      src="https://unpkg.com/thebe@latest"
+    ></script>
   </head>
   <body>
     <h1>My web page with code samples</h1>
@@ -34,6 +36,5 @@ <h1>My web page with code samples</h1>
 plt.plot(x, np.sin(x))
 plt.plot(x, np.cos(x))
     </pre>
-
   </body>
 </html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,4 +10,4 @@ The thebe JavaScript API
		We need to add jsdoc-style docstrings to our exported functions.


		.. js:autofunction:: bootstrap
		.. js:autofunction:: thebelab.bootstrap