Interface to other libraries

HoloViews
3

Hi @Ikajiro

For example you can create an application using the PointerXY stream like this.

panel-chemistry-app

import hvplot.pandas
import pandas as pd
import panel as pn
import param
from bokeh.models import HoverTool
from holoviews import streams
from panel_chemistry.pane import (
    NGLViewer,  # panel_chemistry needs to be imported before you run pn.extension()
)

pn.extension("ngl_viewer", sizing_mode="stretch_width")

DIST=0.005
HEIGHT=400
ACCENT="#0072b5"

TOOLTIPS = [("x","@x"), 
            ("y","@y"), 
            ("Molecule","@file_path"), 
           ]

df = pd.DataFrame({
  "x": [1,2,3], "y": [1,2,3], "file_path": ["1CRN", "1NKT", "3pqr"]
})

hover = HoverTool(tooltips=TOOLTIPS)

plot = df.hvplot.scatter(x="x", y="y", tools=[hover], color=ACCENT, size=100)
plot = plot.add_dimension("file_path",dim_pos=2,vdim=True,dim_val = "file_path")

pointer = streams.PointerXY(source=plot)
streams.MouseEnter()

molecule_text = pn.pane.Markdown("# Molecule: 1CRN")
ngl_viewer = NGLViewer("1CRN", background="white", height=HEIGHT)

class App(param.Parameterized):
  """Keeps track of the application state"""
  file = param.String(doc="The selected molecule")

app = App()

@pn.depends(pointer.param.x, pointer.param.y, watch=True)
def set_file(x,y, app=app):
  df["dist"]=((df["x"]-x)**2+(df["y"]-y)**2)**1/2
  idxmin = df["dist"].idxmin()
  closest = df.iloc[idxmin,:]
  dist = closest.dist
  if dist<DIST:
    app.file=closest.file_path

@pn.depends(file=app.param.file, watch=True)
def file_view(file):
  if not file:
    return
  molecule_text.object = f"# Molecule: {file}"
  ngl_viewer.object=file

settings = pn.Param(ngl_viewer, parameters=["representation"])
main = pn.Column(plot, molecule_text, ngl_viewer)

pn.template.FastListTemplate(
    site="Awesome Panel",
    site_url="https://awesome-panel.org/sharing",
    favicon="https://raw.githubusercontent.com/MarcSkovMadsen/awesome-panel-assets/320297ccb92773da099f6b97d267cc0433b67c23/favicon/ap-1f77b4.ico",
    title="Chemistry Data Exploration",
    sidebar=[settings], main=[main]
).servable()

I you like the example and would like to help Panel get more know please like or repost this tweet. Thanks.

1 Like