molstar · Jhsmit · Nov 4, 2024 · Nov 4, 2024 · Nov 4, 2024 · Nov 4, 2024
diff --git a/examples/mouseover_highlight.py b/examples/mouseover_highlight.py
@@ -0,0 +1,210 @@
+"""
+Example solara app with two-way hover/highlight between ipymolstar and altair
+"""
+
+# %%
+from pathlib import Path
+
+import altair as alt
+import numpy as np
+import pandas as pd
+import solara
+from cmap import Colormap
+from ipymolstar.widget import PDBeMolstar
+
+# color limits in kJ/mol
+VMIN = 10
+VMAX = 40
+NO_COVERAGE = "#8c8c8c"
+HIGHLIGHT_COLOR = "#e933f8"
+cmap = Colormap("tol:rainbow_PuRd_r", bad=NO_COVERAGE)
+domain = np.linspace(VMIN, VMAX, 256, endpoint=True)
+scale = alt.Scale(domain=list(domain), range=cmap.to_altair())
+
+# %%
+
+
+def norm(x, vmin=VMIN, vmax=VMAX):
+    return (x - vmin) / (vmax - vmin)
+
+
+# %%
+script_path = Path(__file__).parent
+kwargs = {"comment": "#", "header": [0]}
+data = pd.read_csv(script_path / "pyhdx_secb_deltaG.csv", **kwargs).rename(
+    columns={"r_number": "residue"}
+)
+data = data.drop(data.index[-1])[["residue", "deltaG"]]
+data["deltaG"] *= 1e-3
+
+
+# %%
+cmap = Colormap("tol:rainbow_PuRd_r", bad=NO_COVERAGE)
+
+rgba_array = cmap(norm(data["deltaG"]), bytes=True)
+base_v = np.vectorize(np.base_repr)
+ints = rgba_array.astype(np.uint8).view(dtype=np.uint32).byteswap()
+padded = np.char.rjust(base_v(ints // 2**8, 16), 6, "0")
+hex_colors = np.char.add("#", padded).squeeze()
+
+# %%
+color_data = {
+    "data": [
+        {"residue_number": resi, "color": hcolor.lower()}
+        for resi, hcolor in zip(data["residue"], hex_colors)
+    ],
+    "nonSelectedColor": NO_COVERAGE,
+}
+
+# %%
+
+tooltips = {
+    "data": [
+        {
+            "residue_number": resi,
+            "tooltip": f"ΔG: {value:.2f} kJ/mol"
+            if not np.isnan(value)
+            else "No coverage",
+        }
+        for resi, value in zip(data["residue"], data["deltaG"])
+    ]
+}
+
+
+# Create a selection that chooses the nearest point & selects based on x-value
+nearest = alt.selection_point(
+    name="point",
+    nearest=True,
+    on="pointerover",
+    fields=["residue"],
+    empty=False,
+    clear="mouseout",
+)
+
+pad = (VMAX - VMIN) * 0.05
+
+# The basic scatter
+scatter = (
+    alt.Chart(data)
+    .mark_circle(interpolate="basis", size=200)
+    .encode(
+        x=alt.X("residue:Q", title="Residue Number"),
+        y=alt.Y(
+            "deltaG:Q",
+            title="ΔG (kJ/mol)",
+            scale=alt.Scale(domain=(VMAX + pad, VMIN - pad)),
+        ),
+        color=alt.Color("deltaG:Q", scale=scale, title="ΔG (kJ/mol)"),
+    )
+)
+
+# %%
+
+# Transparent selectors across the chart. This is what tells us
+# the x-value of the cursor
+selectors = (
+    alt.Chart(data)
+    .mark_point()
+    .encode(
+        x="residue:Q",
+        opacity=alt.value(0),
+    )
+    .add_params(nearest)
+)
+
+# Draw a rule at the location of the selection
+rule = (
+    alt.Chart(data)
+    .mark_rule(color="gray", size=2)
+    .encode(
+        x="residue:Q",
+    )
+    .transform_filter(nearest)
+)
+
+vline = (
+    alt.Chart(pd.DataFrame({"x": [0]}))
+    .mark_rule(color=HIGHLIGHT_COLOR, size=2)
+    .encode(x="x:Q")
+)
+
+
+# Put the five layers into a chart and bind the data
+chart = (
+    alt.layer(scatter, vline, selectors, rule).properties(
+        width="container",
+        height=480,  # autosize height?
+    )
+    # .configure(autosize="fit")
+)
+
+spec = chart.to_dict()
+data_name = spec["layer"][1]["data"]["name"]
+
+
+@solara.component
+def SelectChart(on_selections, line_value):
+    spec["datasets"][data_name] = [{"x": line_value}]
+    view = alt.JupyterChart.element(
+        chart=chart, spec=spec, embed_options={"actions": False}
+    )
+
+    def bind():
+        real = solara.get_widget(view)
+        real.selections.observe(on_selections, "point")
+
+    solara.use_effect(bind, [])
+
+
+@solara.component
+def Page():
+    # residue number to highlight in altair chart
+    line_number = solara.use_reactive(None)
+
+    # residue number to highlight in protein view
+    highlight_number = solara.use_reactive(None)
+    with solara.AppBar():
+        solara.AppBarTitle("altair/ipymolstar bidirectional highlight")
+    solara.Style(
+        """
+        .vega-embed {
+        overflow: visible;
+        width: 100% !important;
+        height: 800px !important;
+        }"""
+    )
+
+    def on_mouseover(value):
+        r = value.get("residueNumber", None)
+        line_number.set(r)
+
+    def on_mouseout(value):
+        on_mouseover({})
+
+    def on_selections(event):
+        try:
+            r = event["new"].value[0]["residue"]
+            highlight_number.set(r)
+        except (IndexError, KeyError):
+            highlight_number.set(None)
+
+    with solara.ColumnsResponsive([4, 8]):
+        with solara.Card(style={"height": "550px"}):
+            PDBeMolstar.element(
+                molecule_id="1qyn",
+                color_data=color_data,
+                hide_water=True,
+                tooltips=tooltips,
+                height="500px",
+                highlight={"data": [{"residue_number": int(highlight_number.value)}]}
+                if highlight_number.value
+                else None,
+                highlight_color=HIGHLIGHT_COLOR,
+                on_mouseover_event=on_mouseover,
+                on_mouseout_event=on_mouseout,
+            )
+        with solara.Card(style={"height": "550px"}):
+            SelectChart(on_selections, line_number.value)
+
+
+# %%
diff --git a/examples/pyhdx_secb_deltaG.csv b/examples/pyhdx_secb_deltaG.csv
@@ -0,0 +1,151 @@
+# PyHDX v0.4.0b2+34.gcb83492 
+# 2021/08/20 11:32:33 (1629451953) 
+# <metadata>{"r1": 2, "epochs": 200000, "patience": 100, "stop_loss": 1e-05, "optimizer": "SGD", "lr": 10000.0, "momentum": 0.5, "nesterov": true, "model_name": "DeltaGFit", "total_loss": 1.72128356163797, "mse_loss": 1.3044053161108615, "reg_loss": 0.4168782455271085, "regularization_percentage": 24.219033680331435, "epochs_run": 66406}</metadata>
+# <pandas_kwargs>{"comment": "#", "header": [0], "index_col": 0}</pandas_kwargs>
+r_number,sequence,_deltaG,deltaG,pfact,k_obs,covariance
+10,T,20919.430436051756,20919.430436051756,4022.3351440972306,2.4547916966364984,2199.361913446584
+11,F,20919.412154717586,20919.412154717586,4022.3059703101985,2.0418216044135877,2271.551332671181
+12,Q,20919.44082172526,20919.44082172526,4022.3517178957886,2.951296593638542,1528.8012869134923
+13,I,21386.831723581752,21386.831723581752,4841.8668761799245,0.5489064390732655,1399.8350238032224
+14,Q,21386.8224886335,21386.8224886335,4841.849136133268,1.2574766119631515,1603.8319233328189
+15,R,21059.19763359226,21059.19763359226,4251.679754775063,4.035879368140441,1865.73481412718
+16,I,21059.164750663786,21059.164750663786,4251.624287549613,0.6545515283426903,1470.3584191504274
+17,Y,21059.170923250273,21059.170923250273,4251.634699469968,0.6697963521460933,1481.3185274088164
+18,T,20693.032146224697,,,,
+19,K,20692.997641104288,20692.997641104288,3676.742619355029,3.540132555080082,1576.3747429038096
+20,D,20693.035167457594,20693.035167457594,3676.7973601459116,4.0657708833246184,1486.0574538989097
+21,I,21360.490530363208,21360.490530363208,4791.529662130848,0.23134588353839522,5986.358829054358
+22,S,35766.64249139626,35766.64249139626,1454439.8024162317,0.008548793110493598,2859.2003704705885
+23,F,37061.97643529757,37061.97643529757,2431563.0143466685,0.004253193573346486,2242.247939793355
+24,E,37061.96631403077,37061.96631403077,2431553.2503466266,0.0033027199089483506,2251.420648907708
+25,A,20813.342791325536,20813.342791325536,3856.5507081213314,1.654236511048838,1607.9204046269394
+26,P,20813.387886890752,,,,
+27,N,18149.998736732974,18149.998736732974,1340.593708979362,11.939326898781227,1414.4500438249765
+28,A,18150.005460981174,18150.005460981174,1340.5972854094032,14.027448586679636,1357.232499614844
+29,P,18534.163621054628,,,,
+30,H,18031.826501806907,18031.826501806907,1279.1920740457272,3.949226556493646,2358.6347356693536
+31,V,34971.949977670265,34971.949977670265,1061128.396762391,0.0026371315086005666,1669.2917177140157
+32,F,29243.181159656666,29243.181159656666,109316.20134441808,0.03434886188829527,357.703018200999
+33,Q,16809.57074962795,16809.57074962795,787.657776938731,15.056092220540023,1556.6671030537907
+34,K,16809.6083372667,16809.6083372667,787.6695230494516,16.508430965688692,2004.5041090215273
+35,D,17254.54663502072,17254.54663502072,939.7410429332765,15.895002704490233,3133.463816091973
+36,W,25415.39983917216,25415.39983917216,23941.246625989035,0.09675238640252719,1070.861350789624
+37,Q,16343.510915312785,16343.510915312785,654.6875927580811,12.243452216995303,3555.338692727679
+38,P,16343.47746288956,,,,
+39,E,16343.537335444113,16343.537335444113,654.6944552145262,6.138386030065746,1362.5326952741855
+40,V,20964.408403054615,20964.408403054615,4094.7565574927858,0.31086734953708856,1398.076164655746
+41,K,15305.883616868221,15305.883616868221,433.75843330767725,13.688404847244868,3012.652445521661
+42,L,15305.819245718982,15305.819245718982,433.7473558042994,7.183960027772581,2293.157055443234
+43,D,14824.745335403722,14824.745335403722,358.3821881515886,19.461403162147157,1620.2126520444083
+44,L,14745.752092739818,14745.752092739818,347.3246870215025,4.496165928583153,1234.0661726400788
+45,D,14745.7480368854,14745.7480368854,347.3241281320621,20.07923393196863,1330.991074925188
+46,T,18420.5268231792,18420.5268231792,1492.484904728409,3.3933272785866087,734.5796499583479
+47,A,37591.36113684838,37591.36113684838,2999853.4654005547,0.004758835257313989,1471.75656217688
+48,S,37591.32862589079,37591.32862589079,2999814.7721474436,0.007038923937679549,1580.8413386090645
+49,S,32028.591208089692,32028.591208089692,330079.630170158,0.12763824282087013,1727.8668697183139
+50,Q,36320.34866276733,36320.34866276733,1811761.0665843543,0.011389369793521746,2305.2280577127667
+51,L,35824.38584117635,35824.38584117635,1488144.4769514224,0.002523222029800536,1612.3035051968263
+52,A,18443.7739792064,18443.7739792064,1506.3139543665934,3.684657598492488,1584.3043893956876
+53,D,17369.504974145206,17369.504974145206,983.5939497352186,11.520558549949104,1894.6929695107722
+54,D,17369.537881463995,17369.537881463995,983.6067913436877,7.615415454300077,4071.652566875675
+55,V,19722.95345724863,19722.95345724863,2502.1988268169202,0.4746038306651238,1460.2188730606017
+56,Y,19722.976953583093,19722.976953583093,2502.222152383326,1.3999143423922167,2641.9472798986594
+57,E,19722.94137510081,19722.94137510081,2502.186832565106,3.1351797277427793,2440.666490250231
+58,V,19817.645823666517,,,,
+59,V,20443.90324338757,,,,
+60,L,21094.215835522362,,,,
+61,R,21744.52842765715,,,,
+62,V,33286.110561087175,33286.110561087175,543616.886313745,0.005486648255651761,2241.0514977604494
+63,T,34262.50322691518,34262.50322691518,800807.650745016,0.006935409363845657,3471.749531744862
+64,V,35183.67277357366,35183.67277357366,1154113.1402045572,0.0024680394334270907,2344.2913945447503
+65,T,36184.558016831186,36184.558016831186,1716737.138673367,0.003235167722968787,1774.2023430999427
+66,A,36184.61155893592,36184.61155893592,1716773.6066860207,0.008315484829028495,3044.303792906657
+67,S,31965.739137051878,31965.739137051878,321950.5199066919,0.06558588402787163,1379.6936295092294
+68,L,28175.665397740027,28175.665397740027,71572.8785865007,0.06604596714994004,1362.1988662523968
+69,G,18049.636343421433,18049.636343421433,1288.2627427779237,4.020308905144217,1540.8920503317502
+70,E,17480.20797232154,17480.20797232154,1027.7566483143535,10.056411895699735,1673.1779467423257
+71,E,17480.18819570885,17480.18819570885,1027.748584347357,4.816758212488473,1879.27845348462
+72,T,18034.703600071225,18034.703600071225,1280.6530618376737,4.237783505289487,1320.4964598132806
+73,A,18034.708121283336,18034.708121283336,1280.6553590175677,11.138574107552488,2055.4342303713393
+74,F,20633.15891003089,20633.15891003089,3590.4827387090454,1.4432018369299298,1595.7249045922301
+75,L,22977.832474821,22977.832474821,9102.210332908211,0.2988176727632178,1424.8094204705324
+76,C,38055.8606966381,38055.8606966381,3606904.6041440717,0.006418980847125078,6187.955049249469
+77,E,38055.86304583672,38055.86304583672,3606907.9658741355,0.006880508355236782,7822.1597818519895
+78,V,35959.84796624756,35959.84796624756,1570310.779939945,0.0008108179545246907,7833.572826668836
+79,Q,36714.51290101607,36714.51290101607,2118441.9060547557,0.0035365849348005223,6155.599716681484
+80,Q,37056.3704517837,37056.3704517837,2426160.913175716,0.0067558667591728055,7083.195225987243
+81,G,37056.415745414335,37056.415745414335,2426204.511407945,0.005491275986559386,12031.078784124582
+82,G,37056.343758330426,37056.343758330426,2426135.219259382,0.005124903298071557,10916.014935637273
+83,I,34189.772843035185,34189.772843035185,778030.3857223899,0.0031886271505492123,5915.103525543223
+84,F,34187.314347557425,34187.314347557425,777271.8737694325,0.003926696587710748,6581.891207965823
+85,S,24398.96224795455,,,,
+86,I,18502.891000433552,18502.891000433552,1542.0609259951618,2.168791399877809,1909.6439837732762
+87,A,17370.72730027929,17370.72730027929,984.0710575144565,5.384350180826554,1611.2677668523293
+88,G,17370.736126437725,17370.736126437725,984.0745034502467,8.533590095632096,2830.6274635774294
+89,I,17370.770853627477,17370.770853627477,984.0880618630993,2.518406319737342,1674.9914512798407
+90,E,17370.772266360487,17370.772266360487,984.0886134353644,4.181002322749086,1471.719415677227
+91,G,17370.777818023937,17370.777818023937,984.0907809700608,6.045510654785301,1744.7874892721293
+92,T,18454.212918661615,18454.212918661615,1512.5653899518584,7.492032766549868,2214.163067154405
+93,Q,18565.580500180018,18565.580500180018,1580.895322819498,10.36151152679036,5802.230049438161
+94,M,18650.68822923237,18650.68822923237,1635.186985747294,8.526443576884947,5016.776144280829
+95,A,20883.27291810903,,,,
+96,H,23907.980116388553,,,,
+97,C,26932.68731466808,,,,
+98,L,29957.394512947605,,,,
+99,G,32157.84975720566,,,,
+100,A,32157.828467489442,32157.828467489442,347445.4885546223,0.038345369726348395,1331.149551118488
+101,Y,33944.833774070474,33944.833774070474,705980.7347118829,0.006851842814223264,2948.4702936197095
+102,C,36724.94262594434,36724.94262594434,2127225.9904860826,0.01980555521932716,1269.2141478508795
+103,P,36810.77452984988,,,,
+104,N,36810.766334191896,36810.766334191896,2200905.031488488,0.007277787251107704,2478.9459565426732
+105,I,34036.66778660016,34036.66778660016,732177.0558956296,0.004786126223067703,2756.184669090075
+106,L,34036.62736599442,34036.62736599442,732165.3143926405,0.0019054217247063178,5400.099638580072
+107,F,34036.66050959576,34036.66050959576,732174.942034909,0.004365011596196762,6830.932109651076
+108,P,34412.55116980607,,,,
+109,Y,35677.89991058932,35677.89991058932,1404122.983391218,0.0019824187606506246,6032.587161999365
+110,A,36736.95068487817,36736.95068487817,2137384.490977934,0.004728441272774879,12586.58616014294
+111,R,37755.1440496577,37755.1440496577,3201255.29505735,0.0033828318504479597,7286.13209998546
+112,E,37755.216431347755,37755.216431347755,3201347.2263797494,0.003625958180277894,7986.939594956758
+113,C,37755.19195063535,37755.19195063535,3201316.133355422,0.008309608189782172,8181.308303959258
+114,I,37219.94106038409,,,,
+115,T,37219.99342127409,37219.99342127409,2588882.332336185,0.0017437666884690065,2231.95118108176
+116,S,39102.217967293866,39102.217967293866,5462922.438286001,0.006125982367458822,1819.6296246184863
+117,M,39102.22333612587,39102.22333612587,5462934.074549683,0.003214954399810702,1756.1083225687696
+118,V,34775.20101549821,34775.20101549821,981448.515948399,0.00235902688976224,1772.9736350929495
+119,S,31712.02125939371,31712.02125939371,291120.51309290633,0.05254441444643108,1442.7855645406123
+120,R,29873.97299648735,29873.97299648735,140401.51249202696,0.15389551982272456,839.440538021873
+121,G,29874.001705835035,29874.001705835035,140403.1117032424,0.09936216144977028,1126.6317611291659
+122,T,29874.057032199416,29874.057032199416,140406.19362688548,0.08076282420378642,1323.39802357682
+123,F,29874.045786474024,29874.045786474024,140405.56718467432,0.058507755129008,1491.7770622412565
+124,P,27180.865410127568,,,,
+125,Q,24940.676339827005,24940.676339827005,19831.270168220122,0.3000740407134874,714.5709876481052
+126,L,24944.253113893177,24944.253113893177,19859.431841919537,0.1890654483688677,831.8619334265086
+127,N,17069.58370709346,17069.58370709346,873.2499079629926,19.632032357449095,1552.620936347317
+128,L,14041.566570657673,14041.566570657673,262.6651498004279,18.77362445992593,1593.1155837640247
+129,A,14041.537793171956,14041.537793171956,262.66215090677565,21.064592684880132,2562.5574829086654
+130,P,13719.961984919912,,,,
+131,V,13107.866705440014,13107.866705440014,181.35238549218082,5.671388620158085,1858.0264623099183
+132,N,16001.759959888463,16001.759959888463,571.6753078967847,35.21213826098592,4731.509974566803
+133,F,16001.735399184396,16001.735399184396,571.6697373686366,18.91022180797328,2402.5108334346082
+134,D,16001.767890625099,,,,
+135,A,16001.753465642932,,,,
+136,L,15445.976927574618,,,,
+137,F,15445.960152271085,,,,
+138,M,15445.920041689666,15445.920041689666,458.53935089828894,21.992679737845545,1659.3476471682227
+139,N,15445.916900977076,15445.916900977076,458.5387795344132,78.03306938267686,34224.96320926817
+140,Y,15445.876530200469,15445.876530200469,458.53143527617556,21.993058571161768,1154.755721966316
+141,L,10004.632777289324,10004.632777289324,52.9452628232315,49.27737252182043,4278.159298908949
+142,Q,10004.66782322247,10004.66782322247,52.94599898964294,118.2065702567813,482392.73647053854
+143,Q,10136.85278903163,10136.85278903163,55.79676219857428,288.58734172713747,293341008925.16125
+144,Q,10136.856729918336,10136.856729918336,55.79684943774523,288.5868984609935,293330599026.5491
+145,A,10136.85624598459,10136.85624598459,55.79683872492582,251.34872850885395,15053511864.55236
+146,G,10058.255380131106,10058.255380131106,54.08370531273599,152.60814388532276,6565657.453759824
+147,E,10058.146362485824,10058.146362485824,54.081366141120284,187.8239651751353,100584866.22360535
+148,G,10058.13118513682,10058.13118513682,54.081040491549984,108.12026713981362,227650.0767580462
+149,T,10058.126693897279,10058.126693897279,54.08094412659722,205.87304149638751,413613238.5413494
+150,E,10058.089738512477,10058.089738512477,54.08015121083325,201.26144389605025,287969589.8329091
+151,E,10058.04630342949,10058.04630342949,54.079219281346546,89.96556699414205,60433.52536198467
+152,H,10058.001570477172,10058.001570477172,54.07825952196978,113.00960682114687,365840.3022100215
+153,Q,10057.987395708305,10057.987395708305,54.077955401457864,292.36294221033376,443907616929.0691
+154,D,10057.946780954537,10057.946780954537,54.07708401896283,326.4072218268354,6816460454893.367
+155,A,4848.998941539874,4848.998941539874,6.8469398956720475,12.026141759383467,1173.980996585565
diff --git a/src/ipymolstar/panel.py b/src/ipymolstar/panel.py
@@ -94,7 +94,7 @@ class PDBeMolstar(AnyWidgetComponent):
 
     spin = param.Boolean(default=False)
     _focus = param.List(default=None)
-    _highlight = param.Dict(default=None)
+    highlight = param.Dict(default=None)
     _clear_highlight = param.Boolean(default=False)
     color_data = param.Dict(default=None)
     _clear_selection = param.Boolean(default=False)
@@ -105,6 +105,7 @@ class PDBeMolstar(AnyWidgetComponent):
     _update = param.Dict(default=None)
     _args = param.Dict(default={})
     mouseover_event = param.Dict(default={})
+    mouseout_event = param.Boolean(default=False)
 
     def __init__(self, theme="light", **params):
         _stylesheets = [THEMES[theme]["css"]]
@@ -139,10 +140,6 @@ def focus(self, data: list[QueryParam]):
         self._focus = data
         self._focus = None
 
-    def highlight(self, data: list[QueryParam]):
-        self._highlight = data
-        self._highlight = None
-
     def clear_highlight(self):
         self._clear_highlight = not self._clear_highlight