Plotly zoom: histology background image is not zoomed

[lcolladotor]

I've tried to get the histology background image to work with plotly's zoom functionality but I haven't gotten it to work. Here's some R code I played with:

## sce is loaded in global.R
## sce_image_clus() is defined in global.R
p <- sce_image_clus(sce, '151507', clustervar = 'Cluster10X', spatial = FALSE)

pen <- png::readPNG('data/151507/tissue_lowres_image.png')
layout(ggplotly(p, width = 600, height = 600), images = list(list(
    source = raster2uri(as.raster(pen)),
    xref = "paper", 
    yref = "paper", 
    x = 0, y = 0, 
    sizex = 1, sizey = 1, 
    xanchor = "left", yanchor = "bottom",
    opacity = 1, layer = 'below',
    sizing = 'stretch'
)))

layout(ggplotly(p, width = 600, height = 600), images = list(list(
    source = raster2uri(as.raster(pen)),
    xref = "imagerow", 
    yref = "imagecol", 
    x = 0, y = 0, 
    sizex = 1, sizey = 1, 
    opacity = 1, layer = 'below',
    xanchor = "left", yanchor = "bottom",
    sizing = 'stretch'
)))

layout(ggplotly(p, width = 600, height = 600), images = list(list(
    source = raster2uri(as.raster(pen)),
    xref = 'x', 
    yref = 'y', 
    x = 'imagerow', y = 'imagecol', 
    sizex = 600, sizey = 600, 
    opacity = 1, layer = 'below',
    xanchor = "left", yanchor = "bottom",
    sizing = 'stretch'
)))

Related links:

• https://plot.ly/r/logos/
• https://plotly-r.com/embedding-images.html

[goldfoxplays]

Have you figred out the solution to this?

[lcolladotor]

Nope =(

[jvelezmagic]

Hi, Leo. c:

I've been playing around with this problem a bit, and this setup seems to work fine. You can check it, and if you like, I can make a pull request later. :) The idea comes from this part of the plotly manual: https://plotly.com/python/images/#zoom-on-static-images.

library(spatialLIBD)
library(plotly)

# Read spatial experiment -------------------------------------------------
spe <- fetch_data(type = "spe")

# Read specific tissue image ----------------------------------------------
sample_id <- "151507"
image_path <-  system.file(
    "app", "www", "data", sample_id, "tissue_lowres_image.png",
    package="spatialLIBD"
)

img <- png::readPNG(image_path)

# Create ggplot visualization ---------------------------------------------
p <- vis_gene(spe, sample_id, clustervar = "Cluster10X", spatial = FALSE)

# Make it interactive -----------------------------------------------------
# Adjust to size of image to avoid distortion.
img_width <- ncol(img)
img_height <- nrow(img)

layout(
    # Convert ggplot to plotly.
    ggplotly(
        p = p,
        width = img_width,
        height = img_height
    ),
    # Now add image to background.
    images = list(
        list(
            source = raster2uri(img),
            layer = "below",
            xanchor = "left",
            yanchor = "bottom",
            xref = "x",
            yref = "y",
            sizing = "stretch",
            x = 0,
            y = -img_height,
            sizex = img_width,
            sizey = img_height,
            opacity = 0.8
        )
    )
)