Use bokeh to hover over scatter plot and display thumbnail

readme.md

• display.py in the gist is from the jupyter notebook and has variables that have been defined previously.
• hover.py is a separate python file that has some methods used in display.py
• tooltip.html is a little html snippet used for the html that renders the thumbnail.

• src=”@image_urls” in the img tag uses image_urls from the dataframe
• @source_text uses the source_text column from the dataframe

display.py

import pandas as pd
import autoencoder.hover as hover
from bokeh.plotting import figure, ColumnDataSource
from bokeh.models import HoverTool, ZoomInTool, ZoomOutTool
from bokeh.io import output_notebook, show
from bokeh.palettes import Spectral6, inferno

## this uses the pandas dataframe df that is already full of data
df['agc'] =agc ## this put results from clustering into the dataframe
output_notebook()

df['agc'] = agc

colors = pd.Series(inferno(agc.max() + 1))
df['colors'] = df['agc'].map(colors)

## vv is a numpy array of images - scale from 0 to 255 
fimages = 255*vv[:,:,:,0]
bimages = fimages.astype(np.int32) ## convert float it int

## in hover.py convert (encode) int array images into strings 
urls = hover.encode_images(bimages) 

df['source_text']=df['agc']
df['image_urls'] = urls

hv = HoverTool(tooltips=hover.maketooltip())

src = ColumnDataSource(data=df)
TOOLS = [ZoomInTool(), ZoomOutTool(), hv]
p = figure(plot_width=800, plot_height=800,
           title="Hey, that's nice", tools=TOOLS)

p.circle('x','y', size=4, source=src, color='colors')

show(p)

hover.py

import numpy as np
import pandas as pd
import bokeh
from bokeh.plotting import figure, show, ColumnDataSource
from bokeh.models import HoverTool, ZoomInTool, ZoomOutTool
from io import BytesIO
import base64
import skimage

from PIL import Image


def getmmfile():
    mh = np.memmap('snail5_phago.mm', mode='r',
                   dtype=np.int32, shape=(4,))

    shape = tuple(mh)
    del mh
    mm = np.memmap('snail5_phago.mm', mode='r',
                   dtype=np.float32, shape=shape)

    return mm

def maketooltip():
    f = open("/Users/cjw/Projects/cjw/cyto/DeepLearning/autoencoder/tooltip.html",'r')
    t = f.read()
    return t

def to_png(image):
    image = image.astype(np.uint8)
    out = BytesIO()
    ia = Image.fromarray(image)
    ia.save(out, format='png')
    return out.getvalue()

    
def encode_images(images):
    urls=[]
    for im in images:
        png = to_png(im)
        url = 'data:image/png;base64,'
        url += base64.b64encode(png).decode('utf-8')
        urls.append(url)
    return urls

def bokehplot(images, df):
    fimages = 255*images
    bimages = fimages.astype(np.int32)
    urls = encode_images(bimages)

    df['source_text']=df['agc']
    df['image_urls'] = urls

    hv = HoverTool(tooltips=maketooltip())

    src = ColumnDataSource(data=df)
    TOOLS = [ZoomInTool(), ZoomOutTool(), hv]
    p = figure(plot_width=600, plot_height=600,
               title="Hey, that's nice", tools=TOOLS)

    p.circle('x','y', size=4, source=src)
    return p

tooltip.html

<div>
  <div>
    <img
      src="@image_urls" height="64"
      style="float: left; margin: 0px 15px 15px 0px; image-rendering: pixelated;"
      border="2"
      ></img>
  </div>
  <div>
    <span style="font-size: 17px;">@source_text</span>
  </div>
</div>