# Pluto Notebook Excessive Compute Time with PlotlyJS

**URL:** https://discourse.julialang.org/t/pluto-notebook-excessive-compute-time-with-plotlyjs/122854
**Category:** General Usage
**Created:** [November 20, 2024, 3:19pm UTC](https://discourse.julialang.org/t/pluto-notebook-excessive-compute-time-with-plotlyjs/122854 "2024-11-20T15:19:11Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![Jake](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jake/32/46007_2.png) [@Jake](https://discourse.julialang.org/u/Jake)
#### Post date: [November 20, 2024, 3:19pm UTC](https://discourse.julialang.org/t/pluto-notebook-excessive-compute-time-with-plotlyjs/122854/1 "2024-11-20T15:19:11Z")

</div>

I have a Pluto notebook with about 13 cells, most of which have a variable number of lines between the begin and end. When I take a look at the sum total of the time taken to execute each cell as reported by Pluto, it takes about 600 ms. The notebook was written fairly early on in my Julia programming experience, so is all written in the global scope. However 600 ms is acceptable.

The problem is that when I time the execution with a stopwatch, the time is about 30s. And it comes up with the message:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/4/6/4631432c4c4967c37ccb3e7e4aa56a7b8da12096.png)

I can see which cell blocks update quickly and which ones don’t, but I don’t know why this message comes and why the time for update is much longer than that recorded by Pluto.

---

<div class="post-metadata">

### Author: ![Jake](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jake/32/46007_2.png) [@Jake](https://discourse.julialang.org/u/Jake)
#### Post date: [November 20, 2024, 3:24pm UTC](https://discourse.julialang.org/t/pluto-notebook-excessive-compute-time-with-plotlyjs/122854/2 "2024-11-20T15:24:55Z")

</div>

I have both

```julia
	using PlotlyJS
	using PlutoUI

```

which forced me to prepend the plots command with Plots as follows:

```julia
	plotlyjs() # use for finding and annotating peaks
	plotMD = Plots.plot(1:nc-1,MDmean,
		title="MD $type Variation",
		legend=false, 
		size=(600,375),
		ylabel = "$type [$unit]",
		xlabel = "MD position [strip number]",
		xticks = 0:2:nc-1)

```

Not sure if this is significant.

It happens in both Julia 1.10.6 and 1.11.1.

---

<div class="post-metadata">

### Author: ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)
#### Post date: [November 20, 2024, 3:49pm UTC](https://discourse.julialang.org/t/pluto-notebook-excessive-compute-time-with-plotlyjs/122854/3 "2024-11-20T15:49:51Z")

</div>

I’ve never seen that message in a Pluto notebook but it looks like the kind of message you get when JavaScript crashes and burns…I bet there are errors showing up in the console of the browser, but I’m not sure how much help they will be…?

---

<div class="post-metadata">

### Author: ![Jake](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jake/32/46007_2.png) [@Jake](https://discourse.julialang.org/u/Jake)
#### Post date: [November 20, 2024, 4:28pm UTC](https://discourse.julialang.org/t/pluto-notebook-excessive-compute-time-with-plotlyjs/122854/4 "2024-11-20T16:28:33Z")

</div>

The Julia session shows the following:

```julia
julia> using Pluto

julia> Pluto.run()
[ Info: Loading...
┌ Info:
└ Opening http://localhost:1234/?secret=6QRRwPv8 in your default browser... ~ have fun!
┌ Info:
│ Press Ctrl+C in this terminal to stop Pluto
└
┌ Info: Removing compat entry for stdlib
└ p = "Statistics"
┌ Warning: The active manifest file has dependencies that were resolved with a different julia version (1.11.1). Unexpected behavior may occur.
└ @ C:\Users\jakez\AppData\Local\Temp\jl_BveW2q\Manifest.toml:0
┌ Info: Operation failed. Updating registries and trying again...
└ exception = Could not locate the source code for the StyledStrings package. Are you trying to use a manifest generated by a different version of Julia?
    Updating registry at `C:\Users\jakez\.julia\registries\local_julia_registry`
    Updating git-repo `https://github.com/Spectrum-Tec/local_julia_registry`
    Updating registry at `C:\Users\jakez\.julia\registries\General.toml`
┌ Warning: Operation failed. Removing Manifest and trying again...
│ exception = Could not locate the source code for the StyledStrings package. Are you trying to use a manifest generated by a different version of Julia?
└ @ Pluto C:\Users\jakez\.julia\packages\Pluto\esC4R\src\packages\Packages.jl:496

```

This is after I ran Pkg.instantiate, Pkg.resolve, Pkg.update to try and coax it to play nice with 1.10.6 after using 1.11.1 for a while. Problem remained with both. I was wondering if I should remove the PlotlyJS dependency and see what happens. Thinking back the problem may have started when I switched from Plotly to PlotlyJS. I did that to get savefig() to work. I will experiment a bit more when I get a chance.

---

<div class="post-metadata">

### Author: ![Jake](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jake/32/46007_2.png) [@Jake](https://discourse.julialang.org/u/Jake)
#### Post date: [November 21, 2024, 4:22pm UTC](https://discourse.julialang.org/t/pluto-notebook-excessive-compute-time-with-plotlyjs/122854/5 "2024-11-21T16:22:47Z")

</div>

The cell that is causing the problem is:

```julia
begin
	#plotlyjs() # use for finding and annotating peaks
	wavelength = 1.0 ./ stripsf[:,1] # spatial frequency converted to wavelength
	i = findlast(x -> x >= 1, wavelength) + 1 # don't plot high wavelength data
	abscissa = reverse(wavelength[i:end])
	ordinate = reverse(sqrt.(averagef[i:end]./2.0))
	plotCDf = Plots.plot(abscissa, ordinate,
		title="CD $type Variation Frequency",
		legend=false, 
		size=(600,375),
		ylabel="$type [$unit]",
		xlabel="CD wavelength [m]",
		xlims=(0, 1))
	threshold = 0.05
	idx = findall(x -> x > threshold, ordinate)
	#idx = [idx[1], idx[3], idx[5]]
	#idx = idx[1:3]
	for n in idx # perform annotation
		annotate!(abscissa[n], ordinate[n], text("($(round(abscissa[n];digits=3)),
		$(round(ordinate[n];digits=2)))", 10, :left))
	end
	figname = splitext(filename)[1] * "_avgSpectrum.png"
	#Plots.savefig(plotCDf, figname)
	plotCDf
	#==#
end

```

When the default plots backend is used the last line `plotCDf` goes into an infinite loop or something, I never get control back. When the last line is commented out then the cell behaves normally.

---

<div class="post-metadata">

### Author: ![Jake](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jake/32/46007_2.png) [@Jake](https://discourse.julialang.org/u/Jake)
#### Post date: [November 21, 2024, 4:27pm UTC](https://discourse.julialang.org/t/pluto-notebook-excessive-compute-time-with-plotlyjs/122854/6 "2024-11-21T16:27:14Z")

</div>

With more fiddling and reading how things work in the REPL, I tried the following in the Pluto notebook.

```julia
	using Plots
	import PlotlyJS # instead of `using PlotlyJS`
    plotlyjs()

```

This seems to have solved the problem. It should probably be documented somewhere.

Edit: Premature comment above it is still exhibiting the same problematic behaviour.

---

<div class="post-metadata">

### Author: ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)
#### Post date: [November 21, 2024, 6:40pm UTC](https://discourse.julialang.org/t/pluto-notebook-excessive-compute-time-with-plotlyjs/122854/7 "2024-11-21T18:40:15Z")

</div>

I just remembered [GitHub - JuliaPluto/PlutoPlotly.jl](https://github.com/JuliaPluto/PlutoPlotly.jl) Maybe it could be of use?

---

<div class="post-metadata">

### Author: ![Jake](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jake/32/46007_2.png) [@Jake](https://discourse.julialang.org/u/Jake)
#### Post date: [December 9, 2024, 3:14pm UTC](https://discourse.julialang.org/t/pluto-notebook-excessive-compute-time-with-plotlyjs/122854/8 "2024-12-09T15:14:42Z")

</div>

I tried a simple example using PlutoPlotsly.

```julia
begin
	using PlutoPlotly
	x = range(0, stop=6π, length=500)
	y=sin.(x)
	plot(x,y,title="Title", xlabel="freq", ylabel="Amp")
end

```

Outside of the notebook the title and labels plot correctly when I am `using Plots`. However the code as shown in the Pluto notebook displays the plot but not the title or text.

---

<div class="post-metadata">

### Author: ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)
#### Post date: [December 9, 2024, 3:43pm UTC](https://discourse.julialang.org/t/pluto-notebook-excessive-compute-time-with-plotlyjs/122854/9 "2024-12-09T15:43:20Z")

</div>

> **[Setting](https://plotly.com/julia/figure-labels/)**
>
> Detailed examples of Setting the Font, Title, Legend Entries, and Axis Titles including changing color, size, log axes, and more in Julia.

---

<div class="post-metadata">

### Author: ![Jake](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jake/32/46007_2.png) [@Jake](https://discourse.julialang.org/u/Jake)
#### Post date: [December 30, 2024, 9:16pm UTC](https://discourse.julialang.org/t/pluto-notebook-excessive-compute-time-with-plotlyjs/122854/10 "2024-12-30T21:16:19Z")

</div>

I gave PlutoPlotly.jl a try and it seems to work well except I have not figured out how to use the equivalent to the Plots command `annotate!()`. Or any mutating command for that matter.

---

<div class="post-metadata">

### Author: ![disberd](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@disberd](https://discourse.julialang.org/u/disberd)
#### Post date: [December 31, 2024, 10:16am UTC](https://discourse.julialang.org/t/pluto-notebook-excessive-compute-time-with-plotlyjs/122854/11 "2024-12-31T10:16:48Z")

</div>

Hi @Jake,

PlutoPlotly.jl is based on and shares the synthax of PlotlyJS.jl and PlotlyBase.jl, which do not have a function with the same functionality as `annotate!` if not used from Plots.jl directly.

Adding annotations in a plot directly with PlotlyJS.jl requires putting the annotations inside a vector in the field `annotations` of the `Layout` object that you can optionally pass as second argument to the `plot` function.

Check out some example in the documentation [here](https://plotly.com/julia/text-and-annotations/#text-annotations)

Similarly, mutating commands should work as long as they are the ones defined in PlotlyBase.jl (mostly documented [here](https://juliaplots.org/PlotlyJS.jl/stable/api/), but beware that some of the mutating functions do not return the plot object itself and would not show the plot in Pluto if used as last command within a cell) and not the ones in Plots.jl.

---

<div class="post-metadata">

### Author: ![KeithWM](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/keithwm/32/48936_2.png) [@KeithWM](https://discourse.julialang.org/u/KeithWM)
#### Post date: [June 8, 2026, 9:11pm UTC](https://discourse.julialang.org/t/pluto-notebook-excessive-compute-time-with-plotlyjs/122854/12 "2026-06-08T21:11:34Z")

</div>

FWIW, I had a similar issue. Incidentally also around plotting a cumulative density function. I had put together this function

```julia
function cdf(x; kwargs...)
	n = length(x)
	scatter(x=sort(x), y=(1:n)/n; kwargs...)
end

```

that worked fine, but when proviging the `mode="markers"` kwarg, everything “went to bits” and became pretty unresponsive.
