How variables are fetched
This page describes the variable viewer and how it fetches data from the kernel.
The variable viewer is a custom webview registered in the Jupyter extension's package.json:
Those entries in the package.json are picked up when the extension registers the variable view type.
The registration is then handled by a VariableView which eventually uses the html property on a webview to load some react code for the UI.
The variable viewer UI is a react control that hosts a react-data-grid control that does our rendering.
It's actually split into two parts:
The main entry point is a panel that hosts an inner VariableExplorer. This outer panel was created so that we might continue to host the inner VariableExplorer elsewhere.
The inner part actually hosts the react-data-grid.
The internal state of the control (variables, rows, columns, etc) is stored in a redux store. We use a set of messages (or actions) to modify the state of the variable viewer store:
| Message | When it fires | What it does |
|---|---|---|
| GET_VARIABLE_DATA | Rendering the name column of any row in the grid will force a refresh for the current page of variables with this message | The response from this message contains a page of data for the variable viewer to display |
| ForceVariableRefresh | Fired by multiple actions on the extension side - cell executes, variable explorer pane activates, kernel restarts, debugger steps | Increments refreshCount in the store and then sends a GetVariableRequest to the extension side code |
- Show refresh cycle
- Describe how they're fetched from kernel
- Describe how they're fetched from the debugger