Using Span annotations in a bokeh app

Hi,

I am trying to use span annotations in a bokeh app to draw threshold lines in a time series plot, I have a select widget and would like to change the value of the threshold when the selection changes.

I noticed that I cannot configure a span annotation with a data source, so I do:

minimum = 1

threshold = Span( location=minimum, dimension='width',
                         line_width=1, line_color='red',
                         line_dash='dotted',)

self.plot.add_layout(threshold)

then I change the selection and it draws the new annotation but I don’t know how to remove the previous one.

what is the solution for that?

···

Angelo Fausti Neto
LIneA/LSST

Hi all,

in my previous message I mentioned an issue using annotations in a bokeh app, here I provide more information and a complete example to reproduce the problem.

The attached screenshot illustrates what happens. If I change the “Metric” select widget it draws the second annotation, but I cannot remove the previous one. Another problem is that the plot start ‘blinking’.

The app is here

https://github.com/lsst-sqre/qa-dashboard/blob/tickets/DM-7427/squash/dashboard/viz/metrics.py

see the methods draw_spec_annotations() and on_metric_change()

use the following to run, it requires

bokeh==0.12.1

requests==2.9.1

$ export SQUASH_API_URL=https://squash.lsst.codes/dashboard/api/ (this give you some data to feed the plot)

$ bokeh serve metrics.py

If I could configure the annotations using a data source then perhaps changing the datasource would update the plot correctly, but following the documentation it seems not possible in the current bokeh version.

http://bokeh.pydata.org/en/0.12.1/docs/reference/models/annotations.html#bokeh.models.annotations.Span

any suggestions on how to do that?

···

On Tue, Aug 30, 2016 at 1:28 PM, Angelo Fausti Neto [email protected] wrote:

Hi,

I am trying to use span annotations in a bokeh app to draw threshold lines in a time series plot, I have a select widget and would like to change the value of the threshold when the selection changes.

I noticed that I cannot configure a span annotation with a data source, so I do:

minimum = 1

threshold = Span( location=minimum, dimension='width',
                         line_width=1, line_color='red',
                         line_dash='dotted',)


self.plot.add_layout(threshold)

then I change the selection and it draws the new annotation but I don’t know how to remove the previous one.

what is the solution for that?

Angelo Fausti Neto
LIneA/LSST

Angelo Fausti Neto
LIneA/LSST

Hi Angelo,

Thanks for sharing.

          You're code's pretty long

s o
it’s too much for me to
debug.

      A couple of things

though:

          1) as soon as you change

the metric select dropdown it
causes some kind of pingpon ging
so there’s a loop in
your code somewhere - this is what’s responsible for the flashin axis I believe - alth ough it’s pretty
strange and I don’t quite understand
it (You can see this b y using the
chrome web
developer tools and
selecting the websocket under the
network tab.

  1. I don’ t see any
    annotation in the code you sent so
    it’s
    hard for me to comment , but I
    would suggest that you shouldn’t
    be removing an anno tation
    and drawing a second one,
    but rather settin g
    a new x / y
    coordinate for your
    annotation.

Sincerely,

                                                      Sarah

Bird

···

On 9/3/16 7:12 PM, Angelo Fausti Neto
wrote:

Hi all,

      in my previous message I mentioned an issue using

annotations in a bokeh app, here I provide more information
and a complete example to reproduce the problem.

      The attached screenshot illustrates what happens. If I

change the “Metric” select widget it draws the second
annotation, but I cannot remove the previous one. Another
problem is that the plot start ‘blinking’.

The app is here

https://github.com/lsst-sqre/qa-dashboard/blob/tickets/DM-7427/squash/dashboard/viz/metrics.py

        see the methods draw_spec_annotations() and

on_metric_change()

use the following to run, it requires

bokeh==0.12.1

requests==2.9.1

$ export SQUASH_API_URL=https://squash.lsst.codes/dashboard/api/
(this give you some data to feed the plot)

$ bokeh serve metrics.py

      If I could configure the annotations using a data source

then perhaps changing the datasource would update the plot
correctly, but following the documentation it seems not
possible in the current bokeh version.

http://bokeh.pydata.org/en/0.12.1/docs/reference/models/annotations.html#bokeh.models.annotations.Span

any suggestions on how to do that?

Angelo Fausti Neto

                  LIneA/LSST
      On Tue, Aug 30, 2016 at 1:28 PM, Angelo

Fausti Neto [email protected]
wrote:

Hi,

            I am trying to use span annotations in a bokeh app to

draw threshold lines in a time series plot, I have a
select widget and would like to change the value of the
threshold when the selection changes.

            I noticed that I cannot configure a span annotation

with a data source, so I do:

minimum = 1

threshold = Span( location=minimum, dimension='width'                         ,
line_width=1, line_color='red'                         ,
line_dash='dotted'
,)

self.plot.add_layout(threshold)

            then I change the selection and it draws the new

annotation but I don’t know how to remove the previous
one.

what is the solution for that?

Angelo Fausti Neto

                              LIneA/LSST

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected]

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD%3DOK5Mi1a1kLAZb8DB3y38D6UQ9QBGLOEmV8a1f%2B_AvBJbWbw%40mail.gmail.com](https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD%3DOK5Mi1a1kLAZb8DB3y38D6UQ9QBGLOEmV8a1f%2B_AvBJbWbw%40mail.gmail.com?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).


Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)

Also as a reference, here's a complete minimal example showing an updating span based on a slider that was posted on Stack Overflow the other day:

  http://stackoverflow.com/a/39235127/3406693

Thanks,

Bryan

···

On Sep 4, 2016, at 11:26 PM, Sarah Bird - Continuum <[email protected]> wrote:

Hi Angelo,

Thanks for sharing.

You're code's pretty long so it's too much for me to debug.

A couple of things though:

1) as soon as you change the metric select dropdown it causes some kind of pingponging so there's a loop in your code somewhere - this is what's responsible for the flashin axis I believe - although it's pretty strange and I don't quite understand it (You can see this by using the chrome web developer tools and selecting the websocket under the network tab.

2) I don't see any annotation in the code you sent so it's hard for me to comment, but I would suggest that you shouldn't be removing an annotation and drawing a second one, but rather setting a new x / y coordinate for your annotation.

Sincerely,

Sarah Bird

On 9/3/16 7:12 PM, Angelo Fausti Neto wrote:

Hi all,

in my previous message I mentioned an issue using annotations in a bokeh app, here I provide more information and a complete example to reproduce the problem.

The attached screenshot illustrates what happens. If I change the "Metric" select widget it draws the second annotation, but I cannot remove the previous one. Another problem is that the plot start 'blinking'.

The app is here

https://github.com/lsst-sqre/qa-dashboard/blob/tickets/DM-7427/squash/dashboard/viz/metrics.py

see the methods draw_spec_annotations() and on_metric_change()

use the following to run, it requires

bokeh==0.12.1
requests==2.9.1

$ export SQUASH_API_URL=https://squash.lsst.codes/dashboard/api/ (this give you some data to feed the plot)

$ bokeh serve metrics.py

If I could configure the annotations using a data source then perhaps changing the datasource would update the plot correctly, but following the documentation it seems not possible in the current bokeh version.

http://bokeh.pydata.org/en/0.12.1/docs/reference/models/annotations.html#bokeh.models.annotations.Span

any suggestions on how to do that?

Angelo Fausti Neto
LIneA/LSST

On Tue, Aug 30, 2016 at 1:28 PM, Angelo Fausti Neto <[email protected]> wrote:
Hi,

I am trying to use span annotations in a bokeh app to draw threshold lines in a time series plot, I have a select widget and would like to change the value of the threshold when the selection changes.

I noticed that I cannot configure a span annotation with a data source, so I do:

minimum = 1
threshold = Span( location=minimum, dimension='width'
,
                         
line_width=1, line_color='red'
,
                         
line_dash='dotted'
,)

self.plot.add_layout(threshold)

then I change the selection and it draws the new annotation but I don't know how to remove the previous one.

what is the solution for that?

Angelo Fausti Neto
LIneA/LSST

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD%3DOK5Mi1a1kLAZb8DB3y38D6UQ9QBGLOEmV8a1f%2B_AvBJbWbw%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

--
Sarah Bird
Developer, Bokeh

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/ecd7feb9-93bf-d00d-4f65-b9c877fc0286%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi Sarah, Brian

I started from the minimal example provided by Brian and added a Label annotation in addition to the Span annotation and executed the code as a bokeh app.

It works fine and it does pretty much what I need, so the trick was to use a javascript callback to update the annotation parameters.

Here is the modified example:

from bokeh.io import curdoc

from bokeh.layouts import row, widgetbox

from bokeh.models import Slider, Span, CustomJS, Label

from bokeh.plotting import figure

slider = Slider(start=0, end=10, value=3, step=0.1, title=‘Slider’)

plot = figure(width=700, height=250, x_range=(0,10), y_range=(-1, 1))

span = Span(location=slider.value, dimension=‘height’)

plot.add_layout(span)

label = Label(x=slider.value, y=0, x_units=‘data’, y_units=‘data’,

text=“Limit”)

plot.add_layout(label)

slider.callback = CustomJS(args=dict(span=span, label=label, slider=slider), code="""

span.location = slider.value

label.x = slider.value

“”")

curdoc().add_root(row(plot, widgetbox(slider)))

···

On Mon, Sep 5, 2016 at 12:36 PM, Bryan Van de Ven [email protected] wrote:

Also as a reference, here’s a complete minimal example showing an updating span based on a slider that was posted on Stack Overflow the other day:

    [http://stackoverflow.com/a/39235127/3406693](http://stackoverflow.com/a/39235127/3406693)

Thanks,

Bryan

On Sep 4, 2016, at 11:26 PM, Sarah Bird - Continuum [email protected] wrote:

Hi Angelo,

Thanks for sharing.

You’re code’s pretty long so it’s too much for me to debug.

A couple of things though:

  1. as soon as you change the metric select dropdown it causes some kind of pingponging so there’s a loop in your code somewhere - this is what’s responsible for the flashin axis I believe - although it’s pretty strange and I don’t quite understand it (You can see this by using the chrome web developer tools and selecting the websocket under the network tab.
  1. I don’t see any annotation in the code you sent so it’s hard for me to comment, but I would suggest that you shouldn’t be removing an annotation and drawing a second one, but rather setting a new x / y coordinate for your annotation.

Sincerely,

Sarah Bird

On 9/3/16 7:12 PM, Angelo Fausti Neto wrote:

Hi all,

in my previous message I mentioned an issue using annotations in a bokeh app, here I provide more information and a complete example to reproduce the problem.

The attached screenshot illustrates what happens. If I change the “Metric” select widget it draws the second annotation, but I cannot remove the previous one. Another problem is that the plot start ‘blinking’.

The app is here

https://github.com/lsst-sqre/qa-dashboard/blob/tickets/DM-7427/squash/dashboard/viz/metrics.py

see the methods draw_spec_annotations() and on_metric_change()

use the following to run, it requires

bokeh==0.12.1

requests==2.9.1

$ export SQUASH_API_URL=https://squash.lsst.codes/dashboard/api/ (this give you some data to feed the plot)

$ bokeh serve metrics.py

If I could configure the annotations using a data source then perhaps changing the datasource would update the plot correctly, but following the documentation it seems not possible in the current bokeh version.

http://bokeh.pydata.org/en/0.12.1/docs/reference/models/annotations.html#bokeh.models.annotations.Span

any suggestions on how to do that?

Angelo Fausti Neto

LIneA/LSST

On Tue, Aug 30, 2016 at 1:28 PM, Angelo Fausti Neto [email protected] wrote:

Hi,

I am trying to use span annotations in a bokeh app to draw threshold lines in a time series plot, I have a select widget and would like to change the value of the threshold when the selection changes.

I noticed that I cannot configure a span annotation with a data source, so I do:

minimum = 1

threshold = Span( location=minimum, dimension=‘width’

,

line_width=1, line_color=‘red’

,

line_dash=‘dotted’

,)

self.plot.add_layout(threshold)

then I change the selection and it draws the new annotation but I don’t know how to remove the previous one.

what is the solution for that?

Angelo Fausti Neto

LIneA/LSST

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD%3DOK5Mi1a1kLAZb8DB3y38D6UQ9QBGLOEmV8a1f%2B_AvBJbWbw%40mail.gmail.com.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Sarah Bird

Developer, Bokeh

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/ecd7feb9-93bf-d00d-4f65-b9c877fc0286%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/884EF679-3E94-458B-AC7A-EC0D33989134%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Angelo Fausti Neto
LIneA/LSST

Thanks for sharing Angelo,

  I don't see any reason why the same callback (same in logic)

wouldn’t work server side. something like

def update_annotations(attr, old, new):
span.location = new
label.x = new

slider.on_change(‘value’, update_annotations)

If that doesn’t work, I would say it’s a bug.

Best,

bird

···

On 9/6/16 12:07 PM, Angelo Fausti Neto
wrote:

Hi Sarah, Brian

      I started from the minimal example provided by Brian and

added a Label annotation in addition to the Span annotation
and executed the code as a bokeh app.

      It works fine and it does pretty much what I need, so the

trick was to use a javascript callback to update the
annotation parameters.

Here is the modified example:

from bokeh.io
import curdoc

from bokeh.layouts import row, widgetbox

from bokeh.models import Slider, Span, CustomJS, Label

from bokeh.plotting import figure

        slider = Slider(start=0, end=10, value=3, step=0.1,

title=‘Slider’)

        plot = figure(width=700, height=250, x_range=(0,10),

y_range=(-1, 1))

span = Span(location=slider.value, dimension=‘height’)

plot.add_layout(span)

        label = Label(x=slider.value, y=0, x_units='data',

y_units=‘data’,

text=“Limit”)

plot.add_layout(label)

        slider.callback = CustomJS(args=dict(span=span,

label=label, slider=slider), code="""

span.location = slider.value

label.x = slider.value

“”")

curdoc().add_root(row(plot, widgetbox(slider)))

Angelo Fausti Neto

                  LIneA/LSST
      On Mon, Sep 5, 2016 at 12:36 PM, Bryan

Van de Ven [email protected]
wrote:

        Also as a

reference, here’s a complete minimal example showing an
updating span based on a slider that was posted on Stack
Overflow the other day:

                [http://stackoverflow.com/a/39235127/3406693](http://stackoverflow.com/a/39235127/3406693)



        Thanks,



        Bryan


            > On Sep 4, 2016, at 11:26 PM, Sarah Bird - Continuum

<[email protected] >
wrote:

            >

            > Hi Angelo,

            >

            > Thanks for sharing.

            >

            > You're code's pretty long so it's too much for me

to debug.

            >

            > A couple of things though:

            >

            > 1) as soon as you change the metric select dropdown

it causes some kind of pingponging so there’s a loop in
your code somewhere - this is what’s responsible for the
flashin axis I believe - although it’s pretty strange
and I don’t quite understand it (You can see this by
using the chrome web developer tools and selecting the
websocket under the network tab.

            >

            > 2) I don't see any annotation in the code you sent

so it’s hard for me to comment, but I would suggest that
you shouldn’t be removing an annotation and drawing a
second one, but rather setting a new x / y coordinate
for your annotation.

            >

            > Sincerely,

            >

            > Sarah Bird

            >

            > On 9/3/16 7:12 PM, Angelo Fausti Neto wrote:

            >> Hi all,

            >>

            >> in my previous message I mentioned an issue

using annotations in a bokeh app, here I provide more
information and a complete example to reproduce the
problem.

            >>

            >> The attached screenshot illustrates what

happens. If I change the “Metric” select widget it draws
the second annotation, but I cannot remove the previous
one. Another problem is that the plot start ‘blinking’.

            >>

            >> The app is here

            >>

            >> [https://github.com/lsst-sqre/qa-dashboard/blob/tickets/DM-7427/squash/dashboard/viz/metrics.py](https://github.com/lsst-sqre/qa-dashboard/blob/tickets/DM-7427/squash/dashboard/viz/metrics.py)

            >>

            >> see the methods draw_spec_annotations() and

on_metric_change()

            >>

            >> use the following to run, it requires

            >>

            >> bokeh==0.12.1

            >> requests==2.9.1

            >>

            >> $ export SQUASH_API_URL=[https://squash.lsst.codes/dashboard/api/](https://squash.lsst.codes/dashboard/api/)                 
(this give you some data to feed the plot)

            >>

            >> $ bokeh serve metrics.py

            >>

            >> If I could configure the annotations using a

data source then perhaps changing the datasource would
update the plot correctly, but following the
documentation it seems not possible in the current bokeh
version.

            >>

            >> [http://bokeh.pydata.org/en/0.12.1/docs/reference/models/annotations.html#bokeh.models.annotations.Span](http://bokeh.pydata.org/en/0.12.1/docs/reference/models/annotations.html#bokeh.models.annotations.Span)

            >>

            >> any suggestions on how to do that?

            >>

            >>

            >> Angelo Fausti Neto

            >> LIneA/LSST

            >>

            >>

            >>

            >> On Tue, Aug 30, 2016 at 1:28 PM, Angelo Fausti

Neto <[email protected] >
wrote:

            >> Hi,

            >>

            >> I am trying to use span annotations in a bokeh

app to draw threshold lines in a time series plot, I
have a select widget and would like to change the value
of the threshold when the selection changes.

            >>

            >> I noticed that I cannot configure a span

annotation with a data source, so I do:

            >>

            >> minimum = 1

            >> threshold = Span( location=minimum,

dimension=‘width’

            >> ,

            >>

            >> line_width=1, line_color='red'

            >> ,

            >>

            >> line_dash='dotted'

            >> ,)

            >>

            >>

            >> self.plot.add_layout(threshold)

            >>

            >> then I change the selection and it draws the

new annotation but I don’t know how to remove the
previous one.

            >>

            >> what is the solution for that?

            >>

            >> Angelo Fausti Neto

            >> LIneA/LSST

            >>

            >>

            >>

            >> --

            >> You received this message because you are

subscribed to the Google Groups “Bokeh Discussion -
Public” group.

            >> To unsubscribe from this group and stop

receiving emails from it, send an email to [email protected].

            >> To post to this group, send email to [email protected]

            >> To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD%3DOK5Mi1a1kLAZb8DB3y38D6UQ9QBGLOEmV8a1f%2B_AvBJbWbw%40mail.gmail.com](https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD%3DOK5Mi1a1kLAZb8DB3y38D6UQ9QBGLOEmV8a1f%2B_AvBJbWbw%40mail.gmail.com).

            >> For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

            >

            > --

            > Sarah Bird

            > Developer, Bokeh

            >

            >

            >

            >

          > You received this message because you are subscribed

to the Google Groups “Bokeh Discussion - Public” group.

          > To unsubscribe from this group and stop receiving

emails from it, send an email to [email protected].

          > To post to this group, send email to [email protected]

          > To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/ecd7feb9-93bf-d00d-4f65-b9c877fc0286%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/ecd7feb9-93bf-d00d-4f65-b9c877fc0286%40continuum.io).

          > For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).



        --

          You received this message because you are subscribed to

the Google Groups “Bokeh Discussion - Public” group.

          To unsubscribe from this group and stop receiving emails

from it, send an email to [email protected].

          To post to this group, send email to [email protected]

        To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/884EF679-3E94-458B-AC7A-EC0D33989134%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/884EF679-3E94-458B-AC7A-EC0D33989134%40continuum.io).

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected]

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD%3DOK5Op%2B-PQJ-G6d1kuhVhBiHfykeRMhh%3DcSJBEcOMEndffwg%40mail.gmail.com](https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD%3DOK5Op%2B-PQJ-G6d1kuhVhBiHfykeRMhh%3DcSJBEcOMEndffwg%40mail.gmail.com?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).


Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)

Hi Sarah,

it works too! it was very helpful to see both methods now I understand better what the code is doing.

from bokeh.io import curdoc

from bokeh.layouts import row, widgetbox

from bokeh.models import Slider, Span, Label

from bokeh.plotting import figure

slider = Slider(start=0, end=10, value=3, step=0.1, title=‘Slider’)

plot = figure(width=700, height=250, x_range=(0,10), y_range=(-1, 1))

span = Span(location=slider.value, dimension=‘height’)

plot.add_layout(span)

label = Label(x=slider.value, y=0, x_units=‘data’, y_units=‘data’,

text=“Minimum”)

plot.add_layout(label)

def update_annotations(attr, old, new):

span.location = new

label.x = new

slider.on_change(‘value’, update_annotations)

curdoc().add_root(row(plot, widgetbox(slider)))

···

On Tue, Sep 6, 2016 at 12:14 PM, Sarah Bird - Continuum [email protected] wrote:

Thanks for sharing Angelo,

  I don't see any reason why the same callback (same in logic)

wouldn’t work server side. something like

def update_annotations(attr, old, new):
span.location = new
label.x = new

slider.on_change(‘value’, update_annotations)

If that doesn’t work, I would say it’s a bug.

Best,

bird

  On 9/6/16 12:07 PM, Angelo Fausti Neto

wrote:

Hi Sarah, Brian

      I started from the minimal example provided by Brian and

added a Label annotation in addition to the Span annotation
and executed the code as a bokeh app.

      It works fine and it does pretty much what I need, so the

trick was to use a javascript callback to update the
annotation parameters.

Here is the modified example:

from bokeh.io
import curdoc

from bokeh.layouts import row, widgetbox

from bokeh.models import Slider, Span, CustomJS, Label

from bokeh.plotting import figure

        slider = Slider(start=0, end=10, value=3, step=0.1,

title=‘Slider’)

        plot = figure(width=700, height=250, x_range=(0,10),

y_range=(-1, 1))

span = Span(location=slider.value, dimension=‘height’)

plot.add_layout(span)

        label = Label(x=slider.value, y=0, x_units='data',

y_units=‘data’,

text=“Limit”)

plot.add_layout(label)

        slider.callback = CustomJS(args=dict(span=span,

label=label, slider=slider), code="""

span.location = slider.value

label.x = slider.value

“”")

curdoc().add_root(row(plot, widgetbox(slider)))

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected]

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD%3DOK5Op%2B-PQJ-G6d1kuhVhBiHfykeRMhh%3DcSJBEcOMEndffwg%40mail.gmail.com.

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).


Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/7cadb4cb-ac0e-5d6d-d20a-d4e01fbe7bf5%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Angelo Fausti Neto
LIneA/LSST

Angelo Fausti Neto

                  LIneA/LSST

      On Mon, Sep 5, 2016 at 12:36 PM, Bryan

Van de Ven [email protected]
wrote:

        Also as a

reference, here’s a complete minimal example showing an
updating span based on a slider that was posted on Stack
Overflow the other day:

                [http://stackoverflow.com/a/39235127/3406693](http://stackoverflow.com/a/39235127/3406693)



        Thanks,



        Bryan


            > On Sep 4, 2016, at 11:26 PM, Sarah Bird - Continuum

<[email protected] >
wrote:

            >

            > Hi Angelo,

            >

            > Thanks for sharing.

            >

            > You're code's pretty long so it's too much for me

to debug.

            >

            > A couple of things though:

            >

            > 1) as soon as you change the metric select dropdown

it causes some kind of pingponging so there’s a loop in
your code somewhere - this is what’s responsible for the
flashin axis I believe - although it’s pretty strange
and I don’t quite understand it (You can see this by
using the chrome web developer tools and selecting the
websocket under the network tab.

            >

            > 2) I don't see any annotation in the code you sent

so it’s hard for me to comment, but I would suggest that
you shouldn’t be removing an annotation and drawing a
second one, but rather setting a new x / y coordinate
for your annotation.

            >

            > Sincerely,

            >

            > Sarah Bird

            >

            > On 9/3/16 7:12 PM, Angelo Fausti Neto wrote:

            >> Hi all,

            >>

            >> in my previous message I mentioned an issue

using annotations in a bokeh app, here I provide more
information and a complete example to reproduce the
problem.

            >>

            >> The attached screenshot illustrates what

happens. If I change the “Metric” select widget it draws
the second annotation, but I cannot remove the previous
one. Another problem is that the plot start ‘blinking’.

            >>

            >> The app is here

            >>

            >> [https://github.com/lsst-sqre/qa-dashboard/blob/tickets/DM-7427/squash/dashboard/viz/metrics.py](https://github.com/lsst-sqre/qa-dashboard/blob/tickets/DM-7427/squash/dashboard/viz/metrics.py)

            >>

            >> see the methods draw_spec_annotations() and

on_metric_change()

            >>

            >> use the following to run, it requires

            >>

            >> bokeh==0.12.1

            >> requests==2.9.1

            >>

            >> $ export SQUASH_API_URL=[https://squash.lsst.codes/dashboard/api/](https://squash.lsst.codes/dashboard/api/)                 
(this give you some data to feed the plot)

            >>

            >> $ bokeh serve metrics.py

            >>

            >> If I could configure the annotations using a

data source then perhaps changing the datasource would
update the plot correctly, but following the
documentation it seems not possible in the current bokeh
version.

            >>

            >> [http://bokeh.pydata.org/en/0.12.1/docs/reference/models/annotations.html#bokeh.models.annotations.Span](http://bokeh.pydata.org/en/0.12.1/docs/reference/models/annotations.html#bokeh.models.annotations.Span)

            >>

            >> any suggestions on how to do that?

            >>

            >>

            >> Angelo Fausti Neto

            >> LIneA/LSST

            >>

            >>

            >>

            >> On Tue, Aug 30, 2016 at 1:28 PM, Angelo Fausti

Neto <[email protected] >
wrote:

            >> Hi,

            >>

            >> I am trying to use span annotations in a bokeh

app to draw threshold lines in a time series plot, I
have a select widget and would like to change the value
of the threshold when the selection changes.

            >>

            >> I noticed that I cannot configure a span

annotation with a data source, so I do:

            >>

            >> minimum = 1

            >> threshold = Span( location=minimum,

dimension=‘width’

            >> ,

            >>

            >> line_width=1, line_color='red'

            >> ,

            >>

            >> line_dash='dotted'

            >> ,)

            >>

            >>

            >> self.plot.add_layout(threshold)

            >>

            >> then I change the selection and it draws the

new annotation but I don’t know how to remove the
previous one.

            >>

            >> what is the solution for that?

            >>

            >> Angelo Fausti Neto

            >> LIneA/LSST

            >>

            >>

            >>

            >> --

            >> You received this message because you are

subscribed to the Google Groups “Bokeh Discussion -
Public” group.

            >> To unsubscribe from this group and stop

receiving emails from it, send an email to [email protected].

            >> To post to this group, send email to [email protected]

            >> To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD%3DOK5Mi1a1kLAZb8DB3y38D6UQ9QBGLOEmV8a1f%2B_AvBJbWbw%40mail.gmail.com](https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD%3DOK5Mi1a1kLAZb8DB3y38D6UQ9QBGLOEmV8a1f%2B_AvBJbWbw%40mail.gmail.com).

            >> For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

            >

            > --

            > Sarah Bird

            > Developer, Bokeh

            >

            >

            >

            >

          > You received this message because you are subscribed

to the Google Groups “Bokeh Discussion - Public” group.

          > To unsubscribe from this group and stop receiving

emails from it, send an email to [email protected].

          > To post to this group, send email to [email protected]

          > To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/ecd7feb9-93bf-d00d-4f65-b9c877fc0286%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/ecd7feb9-93bf-d00d-4f65-b9c877fc0286%40continuum.io).

          > For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).



        --

          You received this message because you are subscribed to

the Google Groups “Bokeh Discussion - Public” group.

          To unsubscribe from this group and stop receiving emails

from it, send an email to [email protected].

          To post to this group, send email to [email protected]

        To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/884EF679-3E94-458B-AC7A-EC0D33989134%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/884EF679-3E94-458B-AC7A-EC0D33989134%40continuum.io).

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Great :smiley:

···

On 9/6/16 12:43 PM, Angelo Fausti Neto
wrote:

Hi Sarah,

      it works too! it was very helpful to see both methods now I

understand better what the code is doing.

from bokeh.io
import curdoc

from bokeh.layouts import row, widgetbox

from bokeh.models import Slider, Span, Label

from bokeh.plotting import figure

      slider = Slider(start=0, end=10, value=3, step=0.1,

title=‘Slider’)

      plot = figure(width=700, height=250, x_range=(0,10),

y_range=(-1, 1))

span = Span(location=slider.value, dimension=‘height’)

plot.add_layout(span)

      label = Label(x=slider.value, y=0, x_units='data',

y_units=‘data’,

text=“Minimum”)

plot.add_layout(label)

def update_annotations(attr, old, new):

span.location = new

label.x = new

slider.on_change(‘value’, update_annotations)

curdoc().add_root(row(plot, widgetbox(slider)))

Angelo Fausti Neto

                  LIneA/LSST
      On Tue, Sep 6, 2016 at 12:14 PM, Sarah

Bird - Continuum [email protected] wrote:

Thanks for sharing Angelo,

            I don't see any reason why the same callback (same in

logic) wouldn’t work server side. something like

def update_annotations(attr, old, new):
span.location = new
label.x = new

slider.on_change(‘value’, update_annotations)

If that doesn’t work, I would say it’s a bug.

Best,

bird

On 9/6/16 12:07 PM, Angelo Fausti Neto wrote:

Hi Sarah, Brian

                    I started from the minimal example provided

by Brian and added a Label annotation in
addition to the Span annotation and executed the
code as a bokeh app.

                    It works fine and it does pretty much what I

need, so the trick was to use a javascript
callback to update the annotation parameters.

Here is the modified example:

from bokeh.io
import curdoc

from bokeh.layouts import row, widgetbox

                      from bokeh.models import Slider, Span,

CustomJS, Label

from bokeh.plotting import figure

                      slider = Slider(start=0, end=10, value=3,

step=0.1, title=‘Slider’)

                      plot = figure(width=700, height=250,

x_range=(0,10), y_range=(-1, 1))

                      span = Span(location=slider.value,

dimension=‘height’)

plot.add_layout(span)

                      label = Label(x=slider.value, y=0,

x_units=‘data’, y_units=‘data’,

text=“Limit”)

plot.add_layout(label)

                      slider.callback =

CustomJS(args=dict(span=span, label=label,
slider=slider), code="""

span.location = slider.value

label.x = slider.value

“”")

                      curdoc().add_root(row(plot,

widgetbox(slider)))

Angelo Fausti Neto

                                LIneA/LSST
                    On Mon, Sep 5, 2016 at

12:36 PM, Bryan Van de Ven [email protected]
wrote:

                      Also as a reference,

here’s a complete minimal example showing an
updating span based on a slider that was
posted on Stack Overflow the other day:

                              [http://stackoverflow.com/a/39235127/3406693](http://stackoverflow.com/a/39235127/3406693)



                      Thanks,



                      Bryan


                          > On Sep 4, 2016, at 11:26 PM, Sarah

Bird - Continuum <[email protected] >
wrote:

                          >

                          > Hi Angelo,

                          >

                          > Thanks for sharing.

                          >

                          > You're code's pretty long so it's too

much for me to debug.

                          >

                          > A couple of things though:

                          >

                          > 1) as soon as you change the metric

select dropdown it causes some kind of
pingponging so there’s a loop in your code
somewhere - this is what’s responsible for
the flashin axis I believe - although it’s
pretty strange and I don’t quite
understand it (You can see this by using
the chrome web developer tools and
selecting the websocket under the network
tab.

                          >

                          > 2) I don't see any annotation in the

code you sent so it’s hard for me to
comment, but I would suggest that you
shouldn’t be removing an annotation and
drawing a second one, but rather setting a
new x / y coordinate for your annotation.

                          >

                          > Sincerely,

                          >

                          > Sarah Bird

                          >

                          > On 9/3/16 7:12 PM, Angelo Fausti Neto

wrote:

                          >> Hi all,

                          >>

                          >> in my previous message I

mentioned an issue using annotations in a
bokeh app, here I provide more information
and a complete example to reproduce the
problem.

                          >>

                          >> The attached screenshot

illustrates what happens. If I change the
“Metric” select widget it draws the second
annotation, but I cannot remove the
previous one. Another problem is that the
plot start ‘blinking’.

                          >>

                          >> The app is here

                          >>

                          >> [https://github.com/lsst-sqre/qa-dashboard/blob/tickets/DM-7427/squash/dashboard/viz/metrics.py](https://github.com/lsst-sqre/qa-dashboard/blob/tickets/DM-7427/squash/dashboard/viz/metrics.py)

                          >>

                          >> see the methods

draw_spec_annotations() and
on_metric_change()

                          >>

                          >> use the following to run, it

requires

                          >>

                          >> bokeh==0.12.1

                          >> requests==2.9.1

                          >>

                          >> $ export SQUASH_API_URL=[https://squash.lsst.codes/dashboard/api/](https://squash.lsst.codes/dashboard/api/)                               
(this give you some data to feed the

plot)

                          >>

                          >> $ bokeh serve metrics.py

                          >>

                          >> If I could configure the

annotations using a data source then
perhaps changing the datasource would
update the plot correctly, but following
the documentation it seems not possible in
the current bokeh version.

                          >>

                          >> [http://bokeh.pydata.org/en/0.12.1/docs/reference/models/annotations.html#bokeh.models.annotations.Span](http://bokeh.pydata.org/en/0.12.1/docs/reference/models/annotations.html#bokeh.models.annotations.Span)

                          >>

                          >> any suggestions on how to do

that?

                          >>

                          >>

                          >> Angelo Fausti Neto

                          >> LIneA/LSST

                          >>

                          >>

                          >>

                          >> On Tue, Aug 30, 2016 at 1:28 PM,

Angelo Fausti Neto <[email protected] >
wrote:

                          >> Hi,

                          >>

                          >> I am trying to use span

annotations in a bokeh app to draw
threshold lines in a time series plot, I
have a select widget and would like to
change the value of the threshold when the
selection changes.

                          >>

                          >> I noticed that I cannot configure

a span annotation with a data source, so I
do:

                          >>

                          >> minimum = 1

                          >> threshold = Span(

location=minimum, dimension=‘width’

                          >> ,

                          >>

                          >> line_width=1, line_color='red'

                          >> ,

                          >>

                          >> line_dash='dotted'

                          >> ,)

                          >>

                          >>

                          >> self.plot.add_layout(threshold)

                          >>

                          >> then I change the selection and

it draws the new annotation but I don’t
know how to remove the previous one.

                          >>

                          >> what is the solution for that?

                          >>

                          >> Angelo Fausti Neto

                          >> LIneA/LSST

                          >>

                          >>

                          >>

                          >> --

                          >> You received this message because

you are subscribed to the Google Groups
“Bokeh Discussion - Public” group.

                          >> To unsubscribe from this group

and stop receiving emails from it, send an
email to [email protected].

                          >> To post to this group, send email

to [email protected].

                          >> To view this discussion on the

web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD%3DOK5Mi1a1kLAZb8DB3y38D6UQ9QBGLOEmV8a1f%2B_AvBJbWbw%40mail.gmail.com.

                          >> For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

                          >

                          > --

                          > Sarah Bird

                          > Developer, Bokeh

                          >

                          >

                          >

                          >

                        > You received this message because you

are subscribed to the Google Groups “Bokeh
Discussion - Public” group.

                        > To unsubscribe from this group and stop

receiving emails from it, send an email to [email protected].

                        > To post to this group, send email to [email protected]

                        > To view this discussion on the web

visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/ecd7feb9-93bf-d00d-4f65-b9c877fc0286%40continuum.io.

                        > For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).



                      --

                        You received this message because you are

subscribed to the Google Groups “Bokeh
Discussion - Public” group.

                        To unsubscribe from this group and stop

receiving emails from it, send an email to [email protected].

                        To post to this group, send email to [email protected]

                                                To view this discussion on the web

visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/884EF679-3E94-458B-AC7A-EC0D33989134%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

                You received this message because you are subscribed

to the Google Groups “Bokeh Discussion - Public”
group.

                To unsubscribe from this group and stop receiving

emails from it, send an email to [email protected].

                To post to this group, send email to [email protected]

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD%3DOK5Op%2B-PQJ-G6d1kuhVhBiHfykeRMhh%3DcSJBEcOMEndffwg%40mail.gmail.com.

              For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).


Sarah Bird
Developer, Bokeh

              [ ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png) ](http://continuum.io)
          --

          You received this message because you are subscribed to

the Google Groups “Bokeh Discussion - Public” group.

          To unsubscribe from this group and stop receiving emails

from it, send an email to [email protected].

          To post to this group, send email to [email protected]


        To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/7cadb4cb-ac0e-5d6d-d20a-d4e01fbe7bf5%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/7cadb4cb-ac0e-5d6d-d20a-d4e01fbe7bf5%40continuum.io?utm_medium=email&utm_source=footer).


            For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected]

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD%3DOK5MDZd_%3DyssT053mVwb0pD%2BSiNno1f76LvmwjpST8KRA%2BQ%40mail.gmail.com](https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD%3DOK5MDZd_%3DyssT053mVwb0pD%2BSiNno1f76LvmwjpST8KRA%2BQ%40mail.gmail.com?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).


Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)