NEW ISSUE: Bokeh plots are not exhibiting TapTool behavior when they should

Dear All,

I am facing some trouble with ensuring that the Bokeh plots I am a generating with multiple pandas Series objects all exhibit the TapTool behavior. I have generated 3 Bokeh plots and embedded them in a webpage, but somehow only one of them has that TapTool functionality when all of them should have. This problem also exists even when the plots are on their own unembedded. Google told me that my files take up too much space, so I have shared them through these links:
https://drive.google.com/file/d/0B3-pP2zyNCngbEh1dS0yNzR6czg/view?usp=sharing
https://drive.google.com/file/d/0B3-pP2zyNCngY2NhTWZOcm1KYlE/view?usp=sharing
https://drive.google.com/file/d/0B3-pP2zyNCngc2ZQemVWbmYwREE/view?usp=sharing
https://drive.google.com/file/d/0B3-pP2zyNCngaFhkY01LMmJ5QVU/view?usp=sharing

I am pretty sure about my assertion because all the 3 plots were generated from the same Class method by passing in 3 different pandas Series for each Series that I wanted to plot to each call to the method. Below here is my code for generating my Bokeh plot:

class WebPlot:
def init(self, analysis_type, buildbot_queue):
‘’’
Analysis_type parameter must not have any empty space between words…
‘’’
self.analysis_type = analysis_type
self.buildbot_queue = buildbot_queue

def bokeh_plot(self, data, metric):
‘’’
The metric parameter must be a string that must be exactly the same as the name
of the column on the Series that contains all the data we want to plot
against the build numbers.
‘’’

if isinstance(data, pd.Series):
  # We generate two lists from the series object
  buildnums = list(data.index)
  datapts = list(data)
  # We construct a dictionary from the two lists in order to pass the data into
  # the ColumnDataSource instance because ColumnDataSource does not accept Series objects
  source = ColumnDataSource(dict(x = buildnums, y=datapts))

  p = figure(title="%s of %s vs build number" %(self.analysis_type, metric),
             tools="pan,wheel_zoom,reset,hover")

  # Be sure to instantiate the circle glyph factory before the line glyph factory
  # otherwise TapTool OpenURL on the circle won't work with the clickable link
  p.circle(x = buildnums, y = datapts, radius=0.3, source = source,
  fill_color="blue", fill_alpha=0.6, line_color=None)

  p.line(x = buildnums, y = datapts)

  hover = p.select(dict(type=HoverTool))
  hover.tooltips = OrderedDict([
    ("(Build Number, %s)"%self.analysis_type, "(@x, @y)")
    ])

  tap = TapTool(plot=p,
      action=OpenURL(url="http://192.168.1.253:8010/builders/%s/builds/@x"%self.buildbot_queue))

  p.tools.append(tap)

  output_file("%s_%s.html" %(self.analysis_type, metric))
  save(p)
  return p

``

With the plots I have generated from this, I follow the instructions on http://bokeh.pydata.org/en/latest/docs/user_guide/embedding.html#components using the Components method to embed the plots into a HTML with the direct use of the jinja2 templating engine.

While I have had problems with TapTool before (Redirecting to Google Groups) , I am pretty sure this is a new problem. An old problem that I previoously had was in that post where the solution turned out to be that I had to generate the Circle glyphs before the line glyph, and this is what I’m doing here, and it worked for one Series object, but not for the other two. Furthermore, I am very sure that this isn’t due to any issues with embedding the plots, because, as I have attached here, the html files of the 3 plots, you can see that the two that did not work while on the embedded html also do not work when they are as individual plots.

I will greatly appreciate any help and suggestions to move forward on this issue.

Thank you very much!

Best,
Augustine

Augustine,

First, FYI your plots are very large because they contain the Bokeh JS and CSS inline. You might consider using CDN resources, which will pull those files form CDN, and make the HTML files substantially smaller.

Second, can you provide a minimal complete example that reproduces the behaviour? Nothing goes further towards helping track down problems. For instance, I recently discovered that there may be an issue with selections when there are multiple plots in a vplot, or an hplot, so if that is the case here it would suggest an avenue of investigation. But I can't deduce that structure from the bit pile of JSON in the output with any ease or speed.

Bryan

···

On May 14, 2015, at 10:53 PM, 'Augustine Koh' via Bokeh Discussion - Public <[email protected]> wrote:

Dear All,

I am facing some trouble with ensuring that the Bokeh plots I am a generating with multiple pandas Series objects all exhibit the TapTool behavior. I have generated 3 Bokeh plots and embedded them in a webpage, but somehow only one of them has that TapTool functionality when all of them should have. This problem also exists even when the plots are on their own unembedded. Google told me that my files take up too much space, so I have shared them through these links:
https://drive.google.com/file/d/0B3-pP2zyNCngbEh1dS0yNzR6czg/view?usp=sharing
https://drive.google.com/file/d/0B3-pP2zyNCngY2NhTWZOcm1KYlE/view?usp=sharing
https://drive.google.com/file/d/0B3-pP2zyNCngc2ZQemVWbmYwREE/view?usp=sharing
https://drive.google.com/file/d/0B3-pP2zyNCngaFhkY01LMmJ5QVU/view?usp=sharing

I am pretty sure about my assertion because all the 3 plots were generated from the same Class method by passing in 3 different pandas Series for each Series that I wanted to plot to each call to the method. Below here is my code for generating my Bokeh plot:

class WebPlot:
  def __init__(self, analysis_type, buildbot_queue):
    '''
    Analysis_type parameter must not have any empty space between words...
    '''
    self.analysis_type = analysis_type
    self.buildbot_queue = buildbot_queue
  
  def bokeh_plot(self, data, metric):
    '''
    The metric parameter must be a string that must be exactly the same as the name
    of the column on the Series that contains all the data we want to plot
    against the build numbers.
    '''

    if isinstance(data, pd.Series):
      # We generate two lists from the series object
      buildnums = list(data.index)
      datapts = list(data)
      # We construct a dictionary from the two lists in order to pass the data into
      # the ColumnDataSource instance because ColumnDataSource does not accept Series objects
      source = ColumnDataSource(dict(x = buildnums, y=datapts))

      p = figure(title="%s of %s vs build number" %(self.analysis_type, metric),
                 tools="pan,wheel_zoom,reset,hover")

      # Be sure to instantiate the circle glyph factory before the line glyph factory
      # otherwise TapTool OpenURL on the circle won't work with the clickable link
      p.circle(x = buildnums, y = datapts, radius=0.3, source = source,
      fill_color="blue", fill_alpha=0.6, line_color=None)

      p.line(x = buildnums, y = datapts)

      hover = p.select(dict(type=HoverTool))
      hover.tooltips = OrderedDict([
        ("(Build Number, %s)"%self.analysis_type, "(@x, @y)")
        ])

      tap = TapTool(plot=p,
          action=OpenURL(url="http://192.168.1.253:8010/builders/%s/builds/@x"%self.buildbot_queue))

      p.tools.append(tap)

      output_file("%s_%s.html" %(self.analysis_type, metric))
      save(p)
      return p

With the plots I have generated from this, I follow the instructions on http://bokeh.pydata.org/en/latest/docs/user_guide/embedding.html#components using the Components method to embed the plots into a HTML with the direct use of the jinja2 templating engine.

While I have had problems with TapTool before (Redirecting to Google Groups) , I am pretty sure this is a new problem. An old problem that I previoously had was in that post where the solution turned out to be that I had to generate the Circle glyphs before the line glyph, and this is what I'm doing here, and it worked for one Series object, but not for the other two. Furthermore, I am very sure that this isn't due to any issues with embedding the plots, because, as I have attached here, the html files of the 3 plots, you can see that the two that did not work while on the embedded html also do not work when they are as individual plots.

I will greatly appreciate any help and suggestions to move forward on this issue.

Thank you very much!

Best,
Augustine

--
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/2eb2c6a2-0c69-4a22-9bb8-9f0542b24598%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Dear Bryan,

Thank you for your suggestion to use CDN resources; they have helped to reduce my plot size greatly.

Following on your request, I have attached here a tar ball that contains all the files necessary to exactly replicate this issue. To generate the HTML that I have attached here earlier, please enter into the directory of “bug_report” and run the python script "generate_plot.py " in the very same directory that it is sitting in. This python script will pull in data from CSV files located in the “csv” folder and output all the html files (both the html for the individual plots as well as the combined html webpage that displays multiple plots on one page) in the “data_analysis_webpage” folder. The jinja2 template that I used as the template to render the combined html plots is called “data_analysis_page.html” and also sits in the “data_analysis_webpage” folder.

If you notice, I have included two groups of csv files; one group consists of csv files, “cycles.csv”. “fmax.csv” and “regs.csv”, that are the actual data used in the plots that gave me the problems which I have reported in this post here. Another group consists of random values that I have named as “random1.csv”, “random2.csv”, and “random3.csv”. The reason why I included these additional 3 csv files of random values was that I really wanted see if the issue would manifest itself another set of data. When I tried generating the plots with the random csv files, surprisingly, the Hovertool WORKS FOR ALL PLOTS! You’ll see what I mean when you run my script. To be clear, the html page that contains all the plots from my actual data is named “combined_plot_build.html” while that page that plots out the random csv data is “combined_plot_random.html”.

Comparing the datasets that I’m using with the random data, I can see that one difference which stands out is the absolute sizes of the data. Since it works all fine for the random datasets (which comprise of small absolute values) but not for mine (which comprises of many large values) I am tempted to hypothesize that the cause of the issue could probably be that somewhere in the Bokeh engine breaks down when data values get too large. Furthermore, you can see that on “combined_plot_build.html”, the plot “geomean of fmax versus build number” contains the smallest values on the y-axis among the three plots on the same page, and it is the only plot that does not have this Hovertool issue. The other plots have values at least 10 times larger, and Hovertool does not work for the data points on those plots.

Thank you very much for looking into this and I hope that what I have provided here will be helpful to you in diagnosing and fixing this issue. Please let me know if you need me to provide you anything else and also keep me engaged in your further disucssions as we work towards fixing this bug.

Best,
Augustine

bug_report.tar.gz (3.69 KB)

···

On Friday, 15 May 2015 23:35:31 UTC+8, Bryan Van de ven wrote:

Augustine,

First, FYI your plots are very large because they contain the Bokeh JS and CSS inline. You might consider using CDN resources, which will pull those files form CDN, and make the HTML files substantially smaller.

Second, can you provide a minimal complete example that reproduces the behaviour? Nothing goes further towards helping track down problems. For instance, I recently discovered that there may be an issue with selections when there are multiple plots in a vplot, or an hplot, so if that is the case here it would suggest an avenue of investigation. But I can’t deduce that structure from the bit pile of JSON in the output with any ease or speed.

Bryan

On May 14, 2015, at 10:53 PM, ‘Augustine Koh’ via Bokeh Discussion - Public [email protected] wrote:

Dear All,

I am facing some trouble with ensuring that the Bokeh plots I am a generating with multiple pandas Series objects all exhibit the TapTool behavior. I have generated 3 Bokeh plots and embedded them in a webpage, but somehow only one of them has that TapTool functionality when all of them should have. This problem also exists even when the plots are on their own unembedded. Google told me that my files take up too much space, so I have shared them through these links:

https://drive.google.com/file/d/0B3-pP2zyNCngbEh1dS0yNzR6czg/view?usp=sharing

https://drive.google.com/file/d/0B3-pP2zyNCngY2NhTWZOcm1KYlE/view?usp=sharing

https://drive.google.com/file/d/0B3-pP2zyNCngc2ZQemVWbmYwREE/view?usp=sharing

https://drive.google.com/file/d/0B3-pP2zyNCngaFhkY01LMmJ5QVU/view?usp=sharing

I am pretty sure about my assertion because all the 3 plots were generated from the same Class method by passing in 3 different pandas Series for each Series that I wanted to plot to each call to the method. Below here is my code for generating my Bokeh plot:

class WebPlot:

def init(self, analysis_type, buildbot_queue):

'''
Analysis_type parameter must not have any empty space between words...
'''
self.analysis_type = analysis_type
self.buildbot_queue = buildbot_queue

def bokeh_plot(self, data, metric):

'''
The metric parameter must be a string that must be exactly the same as the name
of the column on the Series that contains all the data we want to plot
against the build numbers.
'''
if isinstance(data, pd.Series):
  # We generate two lists from the series object
  buildnums = list(data.index)
  datapts = list(data)
  # We construct a dictionary from the two lists in order to pass the data into
  # the ColumnDataSource instance because ColumnDataSource does not accept Series objects
  source = ColumnDataSource(dict(x = buildnums, y=datapts))
  p = figure(title="%s of %s vs build number" %(self.analysis_type, metric),
             tools="pan,wheel_zoom,reset,hover")
  # Be sure to instantiate the circle glyph factory before the line glyph factory
  # otherwise TapTool OpenURL on the circle won't work with the clickable link
  p.circle(x = buildnums, y = datapts, radius=0.3, source = source,
  fill_color="blue", fill_alpha=0.6, line_color=None)
  p.line(x = buildnums, y = datapts)
  hover = p.select(dict(type=HoverTool))
  hover.tooltips = OrderedDict([
    ("(Build Number, %s)"%self.analysis_type, "(@x, @y)")
    ])
  tap = TapTool(plot=p,
      action=OpenURL(url="[http://192.168.1.253:8010/builders/%s/builds/@x](http://192.168.1.253:8010/builders/%s/builds/@x)"%self.buildbot_queue))
  p.tools.append(tap)
  output_file("%s_%s.html" %(self.analysis_type, metric))
  save(p)
  return p

With the plots I have generated from this, I follow the instructions on http://bokeh.pydata.org/en/latest/docs/user_guide/embedding.html#components using the Components method to embed the plots into a HTML with the direct use of the jinja2 templating engine.

While I have had problems with TapTool before (https://groups.google.com/a/continuum.io/forum/#!topic/bokeh/Lo51k7dU0TQ) , I am pretty sure this is a new problem. An old problem that I previoously had was in that post where the solution turned out to be that I had to generate the Circle glyphs before the line glyph, and this is what I’m doing here, and it worked for one Series object, but not for the other two. Furthermore, I am very sure that this isn’t due to any issues with embedding the plots, because, as I have attached here, the html files of the 3 plots, you can see that the two that did not work while on the embedded html also do not work when they are as individual plots.

I will greatly appreciate any help and suggestions to move forward on this issue.

Thank you very much!

Best,

Augustine


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/2eb2c6a2-0c69-4a22-9bb8-9f0542b24598%40continuum.io.

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