Using WGLMakie remotely with Pluto.jl

[nicolamos]

I tried a simple example to run a Pluto notebook with a WGLMakie interactive plot.
When Pluto is run locally, the plots show just fine. On the other hand, if the notebook is launched on a remote machine (connection through a ssh tunnel), the plots are just blank and I get the warning

┌ Warning: Waiting for page sessions to load.
│                 This can happen for the first cells to run, or is indicative of faulty state
└ @ JSServe ~/.julia/packages/JSServe/bo3OG/src/display.jl:158

What I tried is the following (Pluto cells delimited by begin…end blocks):

begin
  using JSServe
  Page(listen_url="0.0.0.0")
end
begin
  using WGLMakie
  f(x, y) = sin(x^2+y^2)
  xs = range(-2,2; length=40)
  ys = xs
  zs = f.(xs, ys’)
  surface(xs, ys, zs)
end

Maybe I didn’t understand how to configure the server with JSServe.
Thanks for any help.

[SimonDanisch]

I think @koehlerson figured out a running setup?

[koehlerson]

This works for me

using JSServe
external_ip = #yourip e.g. "192.158.1.38/"
port = #somefreeport e.g. "10000"
JSServe.JSSERVE_CONFIGURATION.listen_port[] = port
JSServe.JSSERVE_CONFIGURATION.external_url[] = "http://$(external_ip)$(port)/"
JSServe.JSSERVE_CONFIGURATION.content_delivery_url[] = JSServe.JSSERVE_CONFIGURATION.external_url[]
import WGLMakie

JSServe.Page(;external_url="http://$(external_ip)$(port)/",listen_port=port, content_delivery_url=JSServe.JSSERVE_CONFIGURATION.external_url[])

[SimonDanisch]

Cool :) I'm going to leave this issue open, since this should all be handled in a reasonable way by Page or actually by better integrating with Pluto.

[nicolamos]

Which configuration do you have? For me it’s still not working. With the same configuration below, it does not even work locally.

I tried that on a fresh environment, here the Project.toml (I’m using Julia 1.6.0):

   Status `~/.../Project.toml`
  [8197267c] IntervalSets v0.5.3
  [824d6782] JSServe v1.2.2
  [c3e4b0f8] Pluto v0.14.7
  [7f904dfe] PlutoUI v0.7.9
  [276b4fcb] WGLMakie v0.3.9

[SimonDanisch]

With the same configuration below, it does not even work locally.

What do you mean by that? That configuration can't work locally...
What did you actually try?

[nicolamos]

Sorry, I did not explain it well. I tried what @koehlerson suggested running Pluto on a remote machine and it wasn’t working, so I wanted to try again if it works locally. I tried the following.

begin
	using JSServe, WGLMakie
	Page()
end
begin
	xs = 1:100
	ys = xs
	f(x,y) = exp(x-y)*sin(x-y)
	zs = f.(xs,ys')
	surface(xs, ys, zs)
end

By the configuration I meant the environment configuration in Project.toml: I tried with the same versions of the packages both locally and remotely.

Now locally I get these errors:

┌ Error: error handling request
│   exception =
│    IOError: stream is closed or unusable
│    Stacktrace:
│     [1] check_open
│       @ ./stream.jl:386 [inlined]
│     [2] uv_write_async(s::Sockets.TCPSocket, p::Ptr{UInt8}, n::UInt64)
│       @ Base ./stream.jl:1018
│     [3] uv_write(s::Sockets.TCPSocket, p::Ptr{UInt8}, n::UInt64)
│       @ Base ./stream.jl:981
│     [4] unsafe_write(s::Sockets.TCPSocket, p::Ptr{UInt8}, n::UInt64)
│       @ Base ./stream.jl:1064
│     [5] unsafe_write
│       @ ~/.julia/packages/HTTP/IAI92/src/ConnectionPool.jl:171 [inlined]
│     [6] write
│       @ ./strings/io.jl:185 [inlined]
│     [7] closebody
│       @ ~/.julia/packages/HTTP/IAI92/src/Streams.jl:113 [inlined]
│     [8] closewrite(http::HTTP.Streams.Stream{HTTP.Messages.Request, HTTP.ConnectionPool.Transaction{Sockets.TCPSocket}})
│       @ HTTP.Streams ~/.julia/packages/HTTP/IAI92/src/Streams.jl:128
│     [9] (::HTTP.Servers.var"#13#14"{JSServe.var"#26#28"{JSServe.Server}, HTTP.ConnectionPool.Transaction{Sockets.TCPSocket}, HTTP.Streams.Stream{HTTP.Messages.Request, HTTP.ConnectionPool.Transaction{Sockets.TCPSocket}}})()
│       @ HTTP.Servers ./task.jl:406
└ @ HTTP.Servers ~/.julia/packages/HTTP/IAI92/src/Servers.jl:373
┌ Error: error handling request
│   exception =
│    IOError: stream is closed or unusable
│    Stacktrace:
│     [1] check_open
│       @ ./stream.jl:386 [inlined]
│     [2] uv_write_async(s::Sockets.TCPSocket, p::Ptr{UInt8}, n::UInt64)
│       @ Base ./stream.jl:1018
│     [3] uv_write(s::Sockets.TCPSocket, p::Ptr{UInt8}, n::UInt64)
│       @ Base ./stream.jl:981
│     [4] unsafe_write(s::Sockets.TCPSocket, p::Ptr{UInt8}, n::UInt64)
│       @ Base ./stream.jl:1064
│     [5] unsafe_write
│       @ ~/.julia/packages/HTTP/IAI92/src/ConnectionPool.jl:171 [inlined]
│     [6] write
│       @ ./strings/io.jl:185 [inlined]
│     [7] closebody
│       @ ~/.julia/packages/HTTP/IAI92/src/Streams.jl:113 [inlined]
│     [8] closewrite(http::HTTP.Streams.Stream{HTTP.Messages.Request, HTTP.ConnectionPool.Transaction{Sockets.TCPSocket}})
│       @ HTTP.Streams ~/.julia/packages/HTTP/IAI92/src/Streams.jl:128
│     [9] (::HTTP.Servers.var"#13#14"{JSServe.var"#26#28"{JSServe.Server}, HTTP.ConnectionPool.Transaction{Sockets.TCPSocket}, HTTP.Streams.Stream{HTTP.Messages.Request, HTTP.ConnectionPool.Transaction{Sockets.TCPSocket}}})()
│       @ HTTP.Servers ./task.jl:406
└ @ HTTP.Servers ~/.julia/packages/HTTP/IAI92/src/Servers.jl:373
┌ Warning: Waiting for page sessions to load.
│                 This can happen for the first cells to run, or is indicative of faulty state
└ @ JSServe ~/.julia/packages/JSServe/ZM5F2/src/display.jl:162
┌ Warning: Waiting for page sessions to load.
│                 This can happen for the first cells to run, or is indicative of faulty state
└ @ JSServe ~/.julia/packages/JSServe/ZM5F2/src/display.jl:162

[koehlerson]

Can you try locally to set a different port for JSServe or Pluto?

[nicolamos]

You mean change only the listen_port, or should I provide also a different URL?
If I run Page(listen_url=1235), having Pluto on 1234, it does not work either.

[SimonDanisch]

How long did you actually wait for the plot to show up? These warnings should be non fatal, and it may take a while for the first plot to compile and show up...

[nicolamos]

Well I waited quite long I think. I tried now to follow one of the examples of JSServe using WGLMakie… This works fine, even if it takes a bit.

[SimonDanisch]

So, do I understand it correctly that it works now?

[nicolamos]

Sorry, no. I am trying different things to understand better how it works. I tried to reproduce one of the examples here, deploying an app in the browser. But, still, with Pluto no luck.

[nicolamos]

With Pluto I end up with the errors I’ve shown you and a blank output.

[SimonDanisch]

Can you try something super simple like:

### A Pluto.jl notebook ###
# v0.14.7

using Markdown
using InteractiveUtils

# ╔═╡ f0d681c0-bd82-11eb-167b-8da748987bf1
begin
	using Pkg
	using Pkg: @pkg_str
end

# ╔═╡ 6ac0d09b-3c27-4e96-86e4-3ffbbdf3b5fc
pkg"activate --temp; add WGLMakie JSServe HTTP"; pkg"st"

# ╔═╡ 18bd9faa-0925-487e-97a7-8d730321ecde
begin 
	using WGLMakie, JSServe
	JSServe.Page()
end

# ╔═╡ 78ff0315-e246-4fb5-9fd0-ce37920e58dc
@info sprint(io->Pkg.status(io=io))

# ╔═╡ 19bc836a-b2f9-40b2-b1e9-47668bfd42aa
f,ax, p = contour(rand(10, 10), linewidth=2)

# ╔═╡ Cell order:
# ╠═f0d681c0-bd82-11eb-167b-8da748987bf1
# ╠═6ac0d09b-3c27-4e96-86e4-3ffbbdf3b5fc
# ╠═78ff0315-e246-4fb5-9fd0-ce37920e58dc
# ╠═18bd9faa-0925-487e-97a7-8d730321ecde
# ╠═19bc836a-b2f9-40b2-b1e9-47668bfd42aa

C:\Users\sdani\AppData\Local\Temp\jl_O9cmeK\Project.toml`
  [cd3eb016] HTTP v0.9.9
  [824d6782] JSServe v1.2.2
  [276b4fcb] WGLMakie v0.3.9

And Pluto v0.14.7.

I just tested this and it works well:

Btw, are you on safari by any chance?
That's the only platform specific thing that comes to my mind, which could make things not turn up.

[SimonDanisch]

If you do that, please take note if it just stays blank but interactive (can execute Julia code), or stays blank and freezes the notebook...