search

marimo-team / marimo

A reactive notebook for Python — run reproducible experiments, execute as a script, deploy as an app, and version with git.
https://marimo.io
Apache License 2.0
7.5k stars 259 forks source link

Go to defining code (when viewing html result) #1875

Open Eloitor opened 3 months ago

Eloitor commented 3 months ago

Description

When I'm viewing the html of a cell, its hard to see where something is defined. For example imagine a notebook here the last cell is

import matplotlib.pyplot as plt

plt.plot([1, 2])
axis = plt.gca()

And the first one is

md(f"Here's a plot: {mo.as_html(axis)}")

If I want to edit the plot, I have to view the code that renders the markdown, identify what is the rendered graphic and click "go to definition". This can be difficult if the markdown has a lot of variable interpolation.

Suggested solution

I would like to directly jump to the code definition of that markdown. Some examples:

  1. I notice something wrong in a latex equation, I can jump to the equation and edit it.
  2. If the markdown embeds a marimo object using as_html, such as md(f"Here's a plot: {mo.as_html(axis)}") From the rendered markdown it should be possible to jump to axis.

Alternative

No response

Additional context

No response

akshayka commented 3 months ago

Are there two requests here?

  1. In preview mode (when code is hidden), make it possible to jump to the cell of an output in edit/code mode?
  2. For an output, in preview mode, see what variables the cell references and jump to cells that define those variables?
Eloitor commented 3 months ago

I'm not sure I understand you. What I'm requesting is: In preview mode, I would like to click somewhere in the preview and go to where it is defined. Clicking on a formula should bring me to the $$ where the formula is. Clicking a graph should bring me to where the graph is defined, ...

It could be an item on the right click menu and possibly a shortcut like control+click

Eloitor commented 3 months ago

Now that I think about it, sometimes it won't be possible to handle this:

A = ["$", "x", "^", "2", "$"]
mo.md("".join(A))

But it should work on reasonable cells.

akshayka commented 3 months ago

Thanks for clarifying.

Clicking on a formula should bring me to the $$ where the formula is.

This could be possible one day, if we support WYSIWYG markdown (similar to Google Colab).

Clicking a graph should bring me to where the graph is defined, ...

That's a cool idea, but I'm not sure we'll be able to pull that off. We know what variables a cell defines and references, but we don't know how those variables enter the output.

Eloitor commented 3 months ago

I had an idea for this, maybe is not possible because I haven't looked at the internals of marimo and I'm only guessing.

When an object is constructed with mo.md() or mo.ui.X() it knows the cell where it is defined. The generated html for those, could have the ID of the cell where they are defined as a class, so it is possible to go to the cell where the object is defined from the html.

Do you think is feasible?