We need to create a collection of test notebooks that we can use to validate/reproduce buggy behavior in ipywidgets.

I'm trying to figure out the latest version of @nteract/transform-vdom (which we depend on in JupyterLab).

I notice that on npm:

• the last non-prerelease version, 4.0.15, was published 2020-03-29T01:06:15.129Z
• 4.0.16-alpha.0 was published 2020-03-31T01:11:25.025Z
• 4.0.16-alpha.0 is listed as the latest release on npm, which means it is the default version installed when doing npm install @nteract/transform-vdom
• I can't find 4.0.16-alpha.0 in this repo

When I compare the actual tarballs on npmjs.com, I see these differences:

% diff -qNaur 4.0.15 4.0.16-alpha.0  
Files 4.0.15/LICENSE and 4.0.16-alpha.0/LICENSE differ
Files 4.0.15/package.json and 4.0.16-alpha.0/package.json differ
Files 4.0.15/tsconfig.json and 4.0.16-alpha.0/tsconfig.json differ
Files 4.0.15/tsconfig.tsbuildinfo and 4.0.16-alpha.0/tsconfig.tsbuildinfo differ

In particular, notice there is no change in the actual js files published, and the only change in the package.json is:

% diff -Naur 4.0.15/package.json 4.0.16-alpha.0/package.json 
--- 4.0.15/package.json	1985-10-26 01:15:00.000000000 -0700
+++ 4.0.16-alpha.0/package.json	1985-10-26 01:15:00.000000000 -0700
@@ -1,6 +1,6 @@
 {
   "name": "@nteract/transform-vdom",
-  "version": "4.0.15",
+  "version": "4.0.16-alpha.0",
   "description": "VDOM Transform for jupyter outputs",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -20,5 +20,6 @@
   "license": "BSD-3-Clause",
   "devDependencies": {
     "@types/lodash.clonedeep": "^4.5.6"
-  }
+  },
+  "gitHead": "8984bec0b7195ad19d5f1b860593df26bd9881f1"
 }

To me, it looks like the latest tag was accidentally set to 4.0.16-alpha.0, and perhaps that prerelease was accidentally published? If this is true, I'd suggest resetting the npmjs.com latest tag with:

npm dist-tag add @nteract/[email protected] latest

Once things are a little more polished with the package, we'll need to do the following documentation clean-up:

• Add docstrings to applicable classes
• Update the usage docs in the README
• Add a section to the README that explains the overall design of the feature

The frontend code for 3rd party widgets is typically hosted on public CDNs and retrieved by the WidgetManager via HTTP calls.
Current implementation for custom widget support provides the following mechanism to override the base CDN URL for fetching widgets:

<script data-jupyter-widgets-cdn="https://cdn.jsdelivr.net/npm" src="bundle.js"></script>

The data-jupyter-widgets-cdn attribute on a script tag is based off the HTML Manager example in the ipywidgets project. This extensibility point on the DOM can potentially allow a user to override the base CDN URL to a malicious link and might open up avenues for scripting attacks.

We'd want to better understand this design choice, investigate and address this security issue for the jupyter-widgets package.

Nteract desktop app and jupyter extension currently uses the ansi-to-react library that takes four props to configure the ansi outputs. I want to configure the passing of optional options to the ansi object the controls stream and error outputs.

Motivation

Azure notebooks needs to change some of the default ansi values to fit our customers' needs. We understand that what is best for our product might not be what is best for other consumers of nteract. Making these options configurable will help all nteract consumers create the best experience to fit their needs.

Goals:

• Azure notebooks wants to make links in error outputs clickable.
• Azure notebooks wants to improve the accessibility of ansi outputs foreground colors to make certain outputs more visible in our themes.

Design and Implementation

Ansi to react has four properties that are passed down as props found here

 declare interface Props {
        children?: string;
        linkify?: boolean;
        className?: string;
      useClasses?: boolean;
  }

I want to add two of these options: useClasses and Linkify, to be passed down via the kernel-output-error class and the stream-text.tsx so that individual consumers have the power to control how ansi outputs are rendered. These options will be added to the existing props for these output classes.
The following is kernel-ouput-error:

   interface Props {
     className?: string;
     output: ImmutableErrorOutput;
     output_type: "error";
     linkify?: boolean;
     useClasses?: boolean;
  }

The following is stream-text:

  interface Props {
      output_type: "stream";
      output: ImmutableStreamOutput;
      linkify?: boolean;
      useClasses?: boolean;
   }

These options would override the default properties if provided which would match the current options in nteract.

Testing

To validate the correct behavior of the new ansi options I will add unit tests for the different options configurations and for if no options are provided..

Compatibility

If no options are provided I will provide default values that are the same as the current settings in nteract.

User Impact

No user impact if a user doesn't pass down options, the current behavior will stay the same. However, if a user chooses to pass down options they will have full control of how ansi outputs are rendered.

Hi:
nteract tools for interaction are getting better. Plotly is also supported. However, FigureWidget is not supported. I think that this is very interesting for nteract.

Thanks for your great work

Hello!

I'm interested in adding a new transform, specifically for https://deck.gl, an open source high performance geospatial rendering engine.

We have a Python binding, pydeck, that works in Jupyter notebook and lab through the ipywidget interface, but I'd like to enable it within the nteract ecosystem as well.

Aside from using a widget, Deck.gl has a JSON serialization interface, which encapsulates all the information we need to render a map, e.g.:

{
  "initialViewState": {
    "bearing": -27.36,
    "latitude": 52.2323,
    "longitude": -1.415,
    "maxZoom": 15,
    "minZoom": 5,
    "pitch": 40.5,
    "zoom": 6
  },
  "layers": [
    {
      "@@type": "HexagonLayer",
      "autoHighlight": true,
      "coverage": 1,
      "data": "https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv",
      "elevationRange": [0, 3000],
      "elevationScale": 50,
      "extruded": true,
      "getPosition": "@@=[lng, lat]",
      "id": "2655e643-8abb-41a2-99f7-cd79c0e41aea",
      "pickable": true
    }
  ],
  "mapStyle": "mapbox://styles/mapbox/dark-v9",
  "views": [{ "@@type": "MapView", "controller": true }]
}

This is easily generated by Pydeck, and on the JS side, it's very easy to consume (docs). Pseudocode:

import Deck from 'deck.gl'
import {JSONConverter} from '@deck.gl/json';

const deck = new Deck({
  canvas: 'deck-canvas',
  json
});

deck.setProps(jsonConverter.convert(json));

Deck.gl is react-based but with an optional js imperative API, so I think there's a simple way to do the above using React but haven't researched it yet.

So my proposal is to add a transform to consume Deck.gl JSON and render it with the Deck.gl JS library.

Would such a PR be accepted?

Context: Found this while going through the Output Widget.ipynb example notebook.

Currently, if an Output widget is initialized, stdout and stderr streams are not redirected to it.

Icons do not render on ipywidgets that require them.

Jupyterlab and Jupyter-classic both support a way to save the notebook such that it persists the widget data in the ipynb (see here). This can be used so that exporting a notebooks will show the widgets with the correct value. It is done by writing to the metadata portion of the ipynb, not by changing the output value saved in the ipynb. My question is

• Are we open to supporting this in nteract?
• If yes, how would we want to do it? Since widgets are written as an output, writing to metadata from within an output might be considered a bit of an anti-pattern

So exciting to see initial widgets support in recently released 0.18!

Application or Package Used
nteract desktop

Describe the bug
The Jupyter widget Qgrid does not render in nteract.

To Reproduce
Steps to reproduce the behavior:

1. Open interact
2. Run !pip install pandas numpy qgrid
3. Run qgrid's official Example 1 code:

import numpy as np
import pandas as pd
import qgrid
randn = np.random.randn
df_types = pd.DataFrame({
    'A' : pd.Series(['2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04',
               '2013-01-05', '2013-01-06', '2013-01-07', '2013-01-08', '2013-01-09'],index=list(range(9)),dtype='datetime64[ns]'),
    'B' : pd.Series(randn(9),index=list(range(9)),dtype='float32'),
    'C' : pd.Categorical(["washington", "adams", "washington", "madison", "lincoln","jefferson", "hamilton", "roosevelt", "kennedy"]),
    'D' : ["foo", "bar", "buzz", "bippity","boppity", "foo", "foo", "bar", "zoo"] })
df_types['E'] = df_types['D'] == 'foo'
qgrid_widget = qgrid.show_grid(df_types, show_toolbar=True)
qgrid_widget

4. No output is rendered. Error thrown in the console:

Uncaught (in promise) Module qgrid@undefined not found

Source line in widget-manager.ts, in the loadClass function:

                return Promise.reject(`Module ${moduleName}@${moduleVersion} not found`);

Expected behavior
The widget (Qgrid) should display / render.

Desktop:

• OS: MacOS Catalina
• Browser: n/a
• Version: n/a

Additional context
Add any other context about the problem here.

Hey folks, we are leveraging the @nteract/jupyter-widgets to support ipywidgets in our notebooks experience. I noticed that while rendering some notebooks that contain widget reference(s), we start seeing errors like the following on the console:

Cause

On a deeper investigation, the error is coming from this line in the WidgetDisplay component:

const model = await modelById(model_id);

I believe the component tries to fetch the model state from the kernel and if the state is not found there is a promise rejection that is uncaught in WidgetDisplay. This seems to be printing out this uncaught exceptions on to the console.

Proposal

I think the line I highlighted above with modelById should be surrounded by a try-catch block.

However, I wanted to understand what is the guidance on routing errors when caught? From this discussion thread, it seems like we might be able to dispatch an action so that hosts like us can then intercept these actions in our own epics if we need to log those errors upstream. However, I couldn't locate which action should we be relying on. Would you be able to provide some guidance here?

Thanks!

Application or Package Used

nteract desktop

Describe the bug

ipywidget sliders dissapear when they are used.

To Reproduce

import ipywidgets as widgets
from IPython.display import display

a = widgets.IntSlider(description='a')
b = widgets.IntSlider(description='b')
c = widgets.IntSlider(description='c')

def f(a, b, c):
    print('{}*{}*{}={}'.format(a, b, c, a*b*c))

out = widgets.interactive_output(f, {'a': a, 'b': b, 'c': c})

display(out)
display(a, b, c)

Expected behavior

The output should update to show the product of the three slider numbers.

Screenshots

Desktop

macOS Catalina 10.15.4
nteract 0.22.0
Python 3.7.7
ipywidgets 7.5.1

Additional context

I am trying to reproduce the example here from ipywidgets documentation. The documentation example is not for nteract, but every modified version with display also fails to show the sliders.

The current implementation of WidgetManager only support single kernel notebooks, so if loaded in a Notebook with multiple kernels it will have unusual behavior

The output transform for image MIME-types should apply width and height attributes to the < img > tag, if those properties were part of the output's metadata. In fact, one would think that it would do this, since if you look at the implementation you see that it has some logic that handles adding width and height: https://github.com/nteract/outputs/blob/master/packages/outputs/src/components/media/image.tsx

However, it doesn't seem like it's actually setting the width and height attributes on the HTML tag.

Minimal repro in Python:

Run this in a cell

import IPython
IPython.display.Image("https://hips.hearstapps.com/countryliving.cdnds.net/17/47/2048x1365/gallery-1511194376-cavachon-puppy-christmas.jpg", height=100, width=100)

The expected behavior is that the output should be an image with width 100px and height 100px.

What is happening currently instead is that the output is an image with no "width" or "height" properties set in the img tag, so it's scaled to the original size of the image.

Note that the width and height are indeed being sent over correctly via the Jupyter protocol as part of the metadata, although it's possible that they're not being passed into the image output transform correctly?

Another repro

Another way to repro is to create a plot using ggplot in R

library("ggplot2")
# Generate some sample data, then compute mean and standard deviation
# in each group
df <- data.frame(
  gp = factor(rep(letters[1:3], each = 10)),
  y = rnorm(30)
)
ds <- do.call(rbind, lapply(split(df, df$gp), function(d) {
  data.frame(mean = mean(d$y), sd = sd(d$y), gp = d$gp)
}))

# The summary data frame ds is used to plot larger red points on top
# of the raw data. Note that we don't need to supply `data` or `mapping`
# in each layer because the defaults from ggplot() are used.
ggplot(df, aes(gp, y)) +
  geom_point() +
  geom_point(data = ds, aes(y = mean), colour = 'red', size = 3)

Looking for a way to add the functionality to save/restore ipywidget state using nteract widget manager.

See the following implementation of set_state() in jupyter-widget and it needs _get_comm_info() but _get_comm_info() is not implemented in nteract.

My question is, can nteract add _get_comm_info implementation?

<set_state() in jupyter-widget>
set_state(state: IManagerState): Promise<WidgetModel[]> {
// Check to make sure that it's the same version we are parsing.
if (!(state.version_major && state.version_major <= 2)) {
throw 'Unsupported widget state format';
}
const models = state.state as any;
// Recreate all the widget models for the given widget manager state.
const all_models = this._get_comm_info().then((live_comms) => {
/* Note: It is currently safe to just loop over the models in any order,
given that the following holds (does at the time of writing):
1: any call to new_model with state registers the model promise (e.g. with register_model)
synchronously (before it's first await statement).
2: any calls to a model constructor or the set_state method on a model,
happens asynchronously (in a then clause, or after an await statement).
Without these assumptions, one risks trying to set model state with a reference
to another model that doesn't exist yet!
*/

<_get_comm_info() in nteract>
_get_comm_info(): Promise<{}> {
throw new Error("_get_comm_info is not implemented!");
}

In backbone-wrapper.tsx, there's an import for widgets-base.css and another one for widgets.css. However, it seems like widgets.css itself already imports widgets-base.css.

This is probably very minor and probably de-duped during webpack build, but just pointing it out in case it's helpful.

Application or Package Used
@nteract/core
@nteract/outputs

Describe the bug
When interacting with a JupyterWiget, changing the value will mark the last-ran cell with the status of "Busy".

To Reproduce

1. Start with a fresh notebook
2. Create an IntSlider in the first cell

import ipywidgets
x = ipywidgets.IntSlider()
display(x)

3. Create a new code cell underneath where you create a separate widget

ipywidgets.Button()

4. Adjust the slider in the output of cell 1
5. Note that the status of cell 2 is marked as "Busy" as the widget in cell 1 communicates with the kernel, while the status of cell 1 is unchanged

Expected behavior
Cell status should not be marked "Busy" when interacting with the unrelated output of another cell

Screenshots

Proposed solution
We should not mark the status for a cell as busy for comm messages (which is what the jupyter widgets are using to talk to the kernel). Colab seems to follow this same behavior of widgets not changing the cell spinner, JupyterLab and Classic don't seem to show cell status.

Edit: Updated proposed solution

Hi nteract team,

I'm currently trying to make use of @nteract/jupyter-widgets in a project of mine with Next.js but I'm running into the issue below. I'm wondering if anyone has encountered such an issue and managed to solve it.

Application or Package Used
@nteract/core

I'm evaluating if there is any XSS risks by turning on the VDOM transform, code like

VDOM({
    'tagName': 'script',
    'attributes':{},
    'children': "console.log(\"vdom\");alert(\"vdom\");"
})

would run, however the script is not executed, I am wondering if the content of VDOM object gets sanitized?

In the Using Interact example notebook, the horizontal slider does not render when the interact code is executed.

from __future__ import print_function
from ipywidgets import interact, interactive, fixed, interact_manual
import ipywidgets as widgets

def f(x):
    return x

interact(f, x=10);

Looks like the Manager component in the jupyter-widgets package only exports a connected component causing it to fail when it's required outside of a redux store context.

The error reads: Could not finde "store" in the context of "Connect(Manager)"

The main component that the library exports (WidgetDisplay) can be imported anyway because the class is also exported.

Can this Manager be decoupled from redux?

Thanks!!

@captainsafia