nteract / outputs

A collection of React components for displaying rich Jupyter display objects
BSD 3-Clause "New" or "Revised" License
26 stars 19 forks source link

Image output doesn't have width and height set #91

Closed jruales closed 2 years ago

jruales commented 2 years ago

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)
jruales commented 2 years ago

I thought that maybe the metadata wasn't keyed properly, but it doesn't seem to be that, since I do see some logic in the RichMedia component to extract that:

https://github.com/nteract/outputs/blob/9f538719d77e221f756d3ea77fd8a6c768115e30/packages/outputs/src/components/rich-media.tsx#L150-L153

image