Describe the bug

context
When I do scroll up of down the page.

expectation
I expected React not to re-render the page

bug
But instead rerendering is happening, as confirmed by a console log message in development

problem
This is a problem as this re-rendering is unnecessary and can affect page performance.

Reproduce the bug

1. run the theme in development
2. add a console.log message to a page
3. scroll and watch the console

List your environment

No response

Describe the bug

context
When I do include a jupyter notebook in a myst site that contains the following code:

display(HTML('<div>hello MyST!</div>'))
print('some caption')

This results in a code cell with two outputs attached. When the notebook is then rendered as a myst site, the output is erroneously considered as safe and the text/plain part of the mimebundle of the first output is rendered in place of the text/html

expectation
I expected the text/html to be rendered

bug
But instead the whole array of outputs are classes as safe and the text/html content is ignored.

problem
This is a problem as html content produced in jupyter does not appear on the page as expected.

Reproduce the bug

1. Create a minimal notebook with the above code in a cell
2. myst init
3. myst start
4. go to the notebook page in the browser

List your environment

No response

Describe the bug

context
When we have a wide jupyter output, like a pandas table

expectation
I expected to be able to scroll horizontally to see the whole content

bug
But instead overflow is hidden

problem
This is a problem because content becomes inaccessible.

Reproduce the bug

any notebook with a wide pandas table

List your environment

No response

Context

Currently, the executed result directly ignores the myst-nb tags and settings. It would be great if we bring these features into the mystjs rendering process, especially for tags like hide-*/skip-execution/raises-exception/remove-* (* can be input/output/cell).

Proposal

No response

Tasks and updates

No response

Context

If a theme creator fails to put in place all the providers required by the thebe related code, it can causer a hard runtime failure in the web interface.

Proposal

create and export from @myst-theme/site a single component that bundles the article and required parameters - similar to the pattern here: curvenote/mystmd.org@a872514

Tasks and updates

No response

Describe the bug

context
The book theme has a sidebar/footer item that "Made with MyST" it links to the url: https://myst-tools.org/made-with-myst but that link is broken.

expectation
I expected a page to load.

Reproduce the bug

1. click on "Made with MyST" on a myst website

List your environment

No response

Describe the bug

context
When I visit a site that contains a notebook but has no compute enabled, like https://climasoma.curve.space/report/meta-graph on https://climasoma.curve.space/report

expectation
I expected the notebook based page to render

bug
but instead is crashes.

and the call stack points to this line:

Reproduce the bug

visit https://climasoma.curve.space/report/meta-graph

List your environment

No response

We are not falling back to capture the license properly when the license is an empty object:

"license": {
      
}

It shows the default icon with undefined text.

1. ✅ thebe: true with no binder or github connects to local server
2. ✅ thebe: true with github as user/repo connects to binder with that repo
3. ✅ thebe: true with github as full url connects to binder with that repo
4. ✅ thebe: true with binder connects to binder with that link
5. ✅ project.thebe.binder: true with github as user/repo connects to binder with that repo
6. ✅ project.thebe.binder: true with github as full url connects to binder with that repo
7. ✅ project.thebe.binder: true with binder with connects to binder with that link
8. ✅ project.thebe.binder: true with connects to binder with defaults
9. 🚧 project.thebe.lite: true connects to jlite - need #70 70
10. ✅ thebe:false disables thebe
11. ✅ thebe:false on a (notebook) page disables thebe only on that page
12. ✅ project.thebe.binder.repo connects to binder with that repo
13. ✅ project.thebe.binder.* all options work as expected
14. ✅ project.thebe.server:true connects to local with defaults
15. ✅ project.thebe.server.* all options work as expected
16. ✅ project.thebe.local:true points to a local server even when remote options are set
17. ✅ project.thebe.local.(url|token) points to a local server even when remote options are set
18. 👎 project.thebe.local.kernelName points to a local server even when remote options are set
19. ✅ project.thebe.disableSessionSaving
20. ✅ project.thebe.mathjaxUrl
21. ✅ project.thebe.mathjaxConfig
22. 🚧local: true and local.* are ignored when website is deployed (NODE_ENV === ''production')

Describe the bug

Similar to #96 , we should remove hooks in MermaidRenderer:
https://github.com/executablebooks/myst-theme/blob/e95834a58ae08d3b2a381854aa8fb0d4725ad8d6/packages/diagrams/src/index.tsx#L14

Reproduce the bug

raise error: Invalid hook call. Hooks can only be called inside of the body of a function component.

List your environment

No response

Context

When articles can display notebook outputs as figures, or if notebooks support hidden cells - it is possible that an error will occur in a notebook cell that is not attached to the page, so the error output will not be visible.

Proposal

Implement improvements to the error handling to catch errors that occur in the notebook and surfaces them to the UI. The error handling should be consistent with the extended multi-page execution scope introduced in #136 and probably should be implemented via a new provider (similar to the busy provider) in conjunction with the existing ErrorTray component.

Tasks and updates

No response

This should be a div, with the same styles.

This shouldn't be shown in the jupyterlab toc:

Related to:
jupyter-book/jupyterlab-myst#90

This should be a good place to test out realistic content and be self-contained in this repository so that developers do not have to go to a different place to get a site/theme fully working locally. There has been a lot of work put into the pydata theme recently, including a "kitchen sink" of themes:

https://pydata-sphinx-theme.readthedocs.io/en/latest/examples/index.html
https://sphinx-themes.org/

This is both a way to track where we are in implementation, as well as come out of the box with something close to what sphinx/jupyter-book users are used to.

Currently you have to hover over a math error for about a second. That is super annoying if you are trying to quickly fix a bug.

cc @agoose77

Describe the bug

Now the Katex rendering will result to all single line formula hold scrollbar like

In order to fix this, I localize the katex.css and add one more overflow rule on that

.katex-display {
  overflow-y: hidden;
}

This one has the desired behavior and I have verified that this won't break overflow-x-auto and multi-line formula rendering

But this is still kind of cumbersome for direct math component use, it better it add the overflow-y-hidden at here, which I think is a better solution.
https://github.com/executablebooks/myst-theme/blob/3420bb7562cca1d8a8cf906af2d576c00a2dfb5e/packages/myst-to-react/src/math.tsx#L58
If @rowanc1 is satisfied with this change, I will make a pr to fix.

Reproduce the bug

/

List your environment

No response

Context

Currently, after I browse the doc in 1, 2 and 3, I find the only way for me to produce subfigure is using grid. However, the gutterClass and number of column is hard-coded:
https://github.com/executablebooks/myst-theme/blob/941b59cdcc66f1b1346b62f07398cf9d0700a4b5/packages/myst-to-react/src/grid.tsx#L83
https://github.com/executablebooks/myst-theme/blob/941b59cdcc66f1b1346b62f07398cf9d0700a4b5/packages/myst-to-react/src/grid.tsx#L111
I'm wondering do we have a standard way to make multiple subfigures in one directive (like here), which is pretty common in scientific writing. What I had in mind was something like the following style:

```{subfigure}
:name: my-fig
:align: center
:layout-sm: AA|BC
:gap: 8px

:::{figure} https://source.unsplash.com/random/400x200?beach,ocean
:name: my-fig-A
:alt: Random image of the beach or ocean!

Relaxing at the beach 🏝 🌊 😎
:::

:::{figure} https://source.unsplash.com/random/400x200?beach,ocean
:name: my-fig-B
:alt: Random image of the beach or ocean!

Relaxing at the beach 🏝 🌊 😎
:::

:::{figure} https://source.unsplash.com/random/400x200?beach,ocean
:name: my-fig-C
:alt: Random image of the beach or ocean!

Relaxing at the beach 🏝 🌊 😎
:::

Here is my caption.
```

More discussions are required.

Proposal

No response

Tasks and updates

No response

It covers the menus and other UI elements in MyST.

Context

When I used sphinx-book-theme, the pandas DataFrame type output is rendered pretty well. However, in the React Node with jupyter output, especially for multi-index DataFrame, the effect is not fully desired. We can try to align with the sphinx version for myst-theme to improve user experience.

Proposal

No response

Tasks and updates

No response

Context

When users share links on social media, a growing trend is to automatically generate an image that contains metadata about the link. For example, here are the cards that GitHub generates for any GitHub link:

And here's an example of what Jupyter Book generates now (it is modeled after GitHub)

We should add functionality to generate social media preview images for the MyST themes (or, as a plugin). This could be triggered with a flag, or be the default behavior unless a user explicitly provides their own thumbnail image.

References and links

• This discussion has a number of examples for inspiration
• Satori is a tool for generating images from HTML.
• Curvenote has done this before

Tasks and updates

Context

Currently the thebe integration has a UI for starting a connection and running a notebook. Right now there is no feedback for the ongoing connection and no feedback on failure.

Proposal

Extend the UI to:

• show busy during the connection setup
• pipe messages back from the connection process - especially important for binder connections that take time
• clearly show connection failure

Tasks and updates

No response

An example here:
https://myst-tools.org/docs/mystjs/quickstart-myst-markdown#links-cross-references

Context

Now, figcaption is always starting at the left side, regardless of the align setting for figure:

For better visual experience, it's a good choice for figcaption to set as text-center when figure align=center, especially when the screen is relatively wide:

Proposal

No response

Tasks and updates

No response

Describe the bug

#21 is introduced in version 0.1.37. When I'm rendering the ast contains Output node, which calls useNotebookCellExecution in Output component in @myst-theme/jupyter, the following hook raises:

export function Output(node: GenericNode) {
    const [executing, setExecuting] = useState(false);
    ...
}
-> "Invalid hook call. Hooks can only be called inside of the body of a function component" 

Everything works fine for 0.1.36. Thanks for any response.

Reproduce the bug

Here is a sample ast:

{
  "type": "root",
  "children": [
    {
      "type": "block",
      "meta": "{}",
      "position": {
        "start": {
          "line": 0,
          "column": 0
        },
        "end": {
          "line": 1,
          "column": 0
        }
      },
      "children": [
        {
          "type": "mystDirective",
          "name": "code-cell",
          "args": "python",
          "value": "import numpy as np\nimport pandas as pd",
          "position": {
            "start": {
              "line": 2,
              "column": 0
            },
            "end": {
              "line": 6,
              "column": 0
            }
          },
          "children": [
            {
              "type": "code",
              "lang": "python",
              "executable": true,
              "value": "import numpy as np\nimport pandas as pd"
            }
          ]
        },
        {
          "type": "output",
          "id": "HnAzXQRvGWVyHgRtN9RK-",
          "data": [
            {
              "output_type": "execute_result",
              "execution_count": 4,
              "metadata": {},
              "data": {
                "text/html": {
                  "content": "<div>\n<style scoped>\n    .dataframe tbody tr th:only-of-type {\n        vertical-align: middle;\n    }\n\n    .dataframe tbody tr th {\n        vertical-align: top;\n    }\n\n    .dataframe thead th {\n        text-align: right;\n    }\n</style>\n<table border=\"1\" class=\"dataframe\">\n  <thead>\n    <tr style=\"text-align: right;\">\n      <th></th>\n      <th>0</th>\n      <th>1</th>\n      <th>2</th>\n      <th>3</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>0</th>\n      <td>0.748943</td>\n      <td>0.745973</td>\n      <td>0.582013</td>\n      <td>0.450207</td>\n    </tr>\n    <tr>\n      <th>1</th>\n      <td>0.254574</td>\n      <td>0.375159</td>\n      <td>0.664602</td>\n      <td>0.829163</td>\n    </tr>\n    <tr>\n      <th>2</th>\n      <td>0.208465</td>\n      <td>0.168282</td>\n      <td>0.172431</td>\n      <td>0.069546</td>\n    </tr>\n    <tr>\n      <th>3</th>\n      <td>0.614599</td>\n      <td>0.501844</td>\n      <td>0.675450</td>\n      <td>0.248261</td>\n    </tr>\n  </tbody>\n</table>\n</div>",
                  "content_type": "text/html"
                },
                "text/plain": {
                  "content": "          0         1         2         3\n0  0.748943  0.745973  0.582013  0.450207\n1  0.254574  0.375159  0.664602  0.829163\n2  0.208465  0.168282  0.172431  0.069546\n3  0.614599  0.501844  0.675450  0.248261",
                  "content_type": "text/plain"
                }
              }
            }
          ]
        }
      ]
    }
  ]
}

List your environment

No response

if for some reason execution does not complete as expected the page can be left in a busy state where it is impossible to execute or reset using the controls.

The reset control click handling is currently disabled when the notebook is executing, we should change this to allow reset.

Describe the bug

context
When I do add an image to a myst file either using the commonmark image link syntax or an image directive, the text following the image is too close for comfort.

expectation
I expected there to be a reasonable amount of whitespace after the image

bug
But instead thre is no padding

problem
This is a problem for people doing publishing blog articles because that don't want to use the figure directive.

Reproduce the bug

insert and image using ![]() or the image directive immedaitely followed by text

List your environment

No response

Is there a nice way to test myst-demo during dev? Would it make sense to add to storybook as just another component?

This should be an h1, and the admonition is not picking up the styles. Used to work, have no idea what changed. This only is in the storybook theme.

The blue highlighted component is not visible but it does cover the content underneath, preventing, for example, clicking on the email icon.

The patches need to also be in the theme repos at the moment. The install now fails -- @stevejpurves any idea how to get around that?

There are various instances for example #131 that can cause a connection failure, result in console errors or exceptions but these are then not surfaces to the UI and the user is unaware. An improved error catching system is needed.

Describe the bug

context
When I setup biner using the following fields:

  github: username/repo
  thebe:
    binder:
      repo: username/repo

an error occurs and the binder url is malformed

https://mybinder.org/build/gh/username/repo/undefined

Note that the following settings work as expected:

  github: username/repo
  thebe:
    binder: true

as does

  github: username/repo
  thebe:
    binder:
      repo: username/repo
      ref: HEAD

expectation
I expected binder to launch correctly

bug
But instead binder fails with no UI feedback

$ jupyter-book build mybook
ERROR ...

problem
This is a problem for people using binder as there is a failure and no feedback.

Reproduce the bug

Setup thebe as so:

  github: username/repo
  thebe:
    binder:
      repo: username/repo

run myst start
navigate to a notebook
click the power button

List your environment

No response

Currently the styling of the clear buttons on the cell controls are a little off. We should properly align the color and opacity levels with the run control and ensure that the disable state during execution is properly applied.

You can not cross-reference the diagram on the same page, it disappears, likely because it uses the same ID for the cross-ref.

In JupyterLab-MyST, we are reducing margins on paragraphs and that is causing issues in nested content in the tabs/callouts/dropdowns. We should add a first/last child explicit padding on children elements.

see jupyter-book/jupyterlab-myst#116

Describe the bug

context
When I include multiple figures on the page, pointing to the same ipywidgets based output

expectation
I expected mulitple versions of the figure to apopear and for these to be "linked" as should be supported by widget views.

bug
But instead only the last figure gets the outputs attached (and if you open a cross reference is steals it)

Reproduce the bug

1. add multiple figure directives to a page with thebe enabled where they poth point to the same ipywidgets output

List your environment

No response

This is with the thebe updates:

Display a link to a source notebook under the any figure that is embedded in a page, the link should open the notebook (and scroll to the right cell) in the current tab.

For example here:

https://mystmd.org/guide/cross-references#fig-altair-horsepower

Describe the bug

context
When I do make a cross reference to a figure that contains ipywidgets

expectation
I expected the ipywidgets to appear in the cross reference hover popover in the same state as the figure, and I expected to be able to interact with it and update the state of the figure.

bug
But instead the placeholder is displayed

problem
This is a problem for people because the cross reference hover should show the correct figure state.

Reproduce the bug

1. add a figure from a notebook that uses ipywidgets
2. give the figure a :name:
3. use the name in a cross reference

List your environment

No response

In the book theme, clicking on this link in the mystjs docs will break the page:

http://localhost:3000/mystjs/cross-references#targeting-cells

Describe the bug

Here is the error

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'prototype')
    at sax.js:222:46
    at node_modules/sax/lib/sax.js (sax.js:1565:1)
    at __require (chunk-AC2VUBZ6.js?v=af094f58:11:50)
    at node_modules/xml-js/lib/xml2js.js (xml2js.js:1:11)
    at __require (chunk-AC2VUBZ6.js?v=af094f58:11:50)
    at node_modules/xml-js/lib/index.js (index.js:3:14)
    at __require (chunk-AC2VUBZ6.js?v=af094f58:11:50)
    at index.js:1:24

And also there is no CSS style in the web page for the component:

I want to reproduce the sandbox example in a separate project, I'm not sure whether directly using the MySTRenderer from myst-demo will success. Since there is no formal docs for using it in React, please give some instructions on this.

Besides, I noticed that there is a editable component which is different from the sandbox in the myst docs. Is it still using the same component? If it's different from the above-mentioned MySTRenderer, how to reproduce this in react?

Thanks!

Reproduce the bug

/

List your environment

lastest

currently there is no error message surfaced to the UI and the page is stuck in an indeterminant state

The current node renderer is not a react function, which can lead to problems if you use hooks inside of them. I think that we should be able to refactor this without too much effort, and it will be much simpler and lead to fewer bugs.

This will be a breaking change, but I don't think too many folks are extending at this point, so it is a good idea to do it now rather than later. @GYHHAHA are you currently extending the renderers?

I think the change would be changing the function signature from MyRenderer(node) --> MyRenderer({ node, children }) and then changing where we integrate this in the code. That change allows these to actually be react nodes. The children would also now be on the react component, and not inside of the node.children.

This issue was raised in #95, which is a bit confusing why this doesn't work.

From @fwkoch:

When text outputs (mime type text/plain, error, stream outputs) are larger than 25000 characters, nbtx minifies the content, saving it to a separate file and replacing it in the output node with a path.

While theme-base handles non-text minified content, it does not load minified text. This means very large text outputs will not show up in the site.

Describe the bug

context
Plotly plots can contain interactivity that does not require a kernel, but also often include a back up image in the output mimebundle.

expectation
I expected to see interactive plotly figures here: http://localhost:3000/la-palma-earthquakes/interactive-plots

bug
but the backup image is shown instead.

problem
This is a problem for people including plotly in their sites as they will lose a lot of interactivity.

Reproduce the bug

visit http://localhost:3000/la-palma-earthquakes/interactive-plots to experience this

List your environment

No response

These should map to the following thebe options:

• sessionName -> name
• sessionPath -> path

Expectations:

• Defining a named session will mean that future requests to start that same session will reuse a a named session if it exists
• Defining the path will mean that the session will be started in that location within the jupyter instance, important for relative file imports for example

After cell execution completes, the DOM nodes are replaced causing a flicker. Replacement is fast and this could be addressed in ccs using an animated height with delay.