DataTable show only selected entries

Will_Kew · August 24, 2016, 1:25pm

Is it possible to have a datatable automatically hide entries which aren’t selected (i.e. from a shared source scatter plot) without using the server?

Due to lack of IT support, I’m just trying to produce “static” HTML pages which can run on the most basic webhosts.

I’ve been looking at the export_csv example, but that needs to be served, no? Also, its based on a single variable (Salary), whereas I’d want it to be for any of the x variables which are being plotted.
I see the “scroll_to_selected” call, but thats not quite what I need?

Out of interest, does the download (customJS) function on that example also need a server, or can it be static?

Finally, is there a way to get a “count” of number of selected points?

Thanks,

birdsarah_continuum · August 24, 2016, 6:58pm

Hi Will,

** > does the download (customJS) function on that example
also need a server, or can it be static?**

No - CustomJS runs client side and doesn’t need a server.

** > Is it possible to have a datatable automatically hide
entries which aren’t selected (i.e. from a shared source scatter
plot) without using the server?**

Yes. The way I would approach it is as follows:

  * DataTable doesn't hide rows that aren't selected. If you want

them gone from your DataTable you have to remove those rows from
the ColumnDataSource that powers the DataTable.

Make one column data source for your scatter CDS-Scatter

Make another column data source for your table CDS-Table

* Write a CustomJS function that is attached to the CDS-Scatter.

On selection it will copy the data from selected rows to CDS-Table

  I can't see any reason why this won't work off the top of my

head.

  (Alternatively, the super cheap, super hacky way - add the

following css to your html page which (sort of) hides any cells that aren’t part of
the selection - see attached image)

.bk-slick-cell:not(.selected) {
display: none;
}

** > Finally, is there a way to get a “count” of number of
selected points?**

  The data format for selections is a giant pain (in my opinion) -

you almost always want source.selected.1d.indices to get your
selection. So in javascript (e.g. in a CustomJS) the count would
be - source.selected.1d.indices.length in python it would be
len(source.selected['1d']['indices']).

Hope that helps.

···

http://bokeh.pydata.org/en/latest/docs/reference/models/sources.html#bokeh.models.sources.DataSource.selected
On 8/24/16 6:25 AM, Will Kew wrote:

    Is it possible to have a datatable automatically
hide entries which aren’t selected (i.e. from a shared source
scatter plot) without using the server?
        Due to lack of IT support, I'm just trying to produce
“static” HTML pages which can run on the most basic
webhosts.

      I've been looking at the export_csv example, but that needs
to be served, no? Also, its based on a single variable
(Salary), whereas I’d want it to be for any of the x variables
which are being plotted.
      I see the "scroll_to_selected" call, but thats not quite what
I need?

      Out of interest, does the download (customJS) function on
that example also need a server, or can it be static?

      Finally, is there a way to get a "count" of number of

selected points?

Thanks,

–

  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/cbbe27ef-d0d0-4612-a4d1-78b338839a74%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/cbbe27ef-d0d0-4612-a4d1-78b338839a74%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).

–
Sarah Bird
Developer, Bokeh

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

Will_Kew · August 28, 2016, 10:43pm

Hi Sarah,

Thanks for that - very helpful!

The CustomJS approach works - cobbled together the code from JavaScript Callbacks — Bokeh 0.12.1 documentation CustomJS for selections.

Unfortunately the datatable doesnt seem to “refresh” unless you click on one of the column headings (like re-sorting it)? Is this expected behaviour?

I’ve also not managed to get the download.js code to work on my script - is there any way to debug why it isn’t working?

p.s. The CSS trick works, although it is of limited use with large data tables (the hidden points are still rows).

···

On Wednesday, 24 August 2016 19:58:12 UTC+1, Sarah Bird wrote:

Hi Will,

** > does the download (customJS) function on that example
also need a server, or can it be static?**

No - CustomJS runs client side and doesn’t need a server.

** > Is it possible to have a datatable automatically hide
entries which aren’t selected (i.e. from a shared source scatter
plot) without using the server?**

Yes. The way I would approach it is as follows:

  * DataTable doesn't hide rows that aren't selected. If you want
them gone from your DataTable you have to remove those rows from
the ColumnDataSource that powers the DataTable.

Make one column data source for your scatter CDS-Scatter

Make another column data source for your table CDS-Table

  * Write a CustomJS function that is attached to the CDS-Scatter.
On selection it will copy the data from selected rows to CDS-Table

  I can't see any reason why this won't work off the top of my

head.

  (Alternatively, the super cheap, super hacky way - add the
following css to your html page which (sort of) hides any cells that aren’t part of
the selection - see attached image)

.bk-slick-cell:not(.selected) {
display: none;
}

** > Finally, is there a way to get a “count” of number of
selected points?**

The data format for selections is a giant pain (in my opinion) -
http://bokeh.pydata.org/en/latest/docs/reference/models/sources.html#bokeh.models.sources.DataSource.selected
- you almost always want source.selected.1d.indices to get your
selection. So in javascript (e.g. in a CustomJS) the count would
be - source.selected.1d.indices. length in python it would be
len(source.selected['1d']['indices']).

Hope that helps.

On 8/24/16 6:25 AM, Will Kew wrote:

    Is it possible to have a datatable automatically
hide entries which aren’t selected (i.e. from a shared source
scatter plot) without using the server?
        Due to lack of IT support, I'm just trying to produce
“static” HTML pages which can run on the most basic
webhosts.

      I've been looking at the export_csv example, but that needs
to be served, no? Also, its based on a single variable
(Salary), whereas I’d want it to be for any of the x variables
which are being plotted.
      I see the "scroll_to_selected" call, but thats not quite what
I need?

      Out of interest, does the download (customJS) function on
that example also need a server, or can it be static?

      Finally, is there a way to get a "count" of number of

selected points?

Thanks,

–

  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/cbbe27ef-d0d0-4612-a4d1-78b338839a74%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/cbbe27ef-d0d0-4612-a4d1-78b338839a74%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).

–
Sarah Bird
Developer, Bokeh

    [
      <img alt="Continuum Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" style="width:150px;min-height:30px" height="30px" width="150px">
    ](http://continuum.io)

Will_Kew · August 29, 2016, 2:22pm

Download.js fixed - when including the JS code within the python script, rather than reading it externally, the new line character needs an extra backslash.

The datatable “refresh” issue is also solved by calling dt.trigger(‘change’); at the end of the customJS (missing from the provided example). dt = datatable, passed with args.

Thanks

···

On Sunday, 28 August 2016 23:43:48 UTC+1, Will Kew wrote:

Hi Sarah,

Thanks for that - very helpful!

The CustomJS approach works - cobbled together the code from http://bokeh.pydata.org/en/0.12.1/docs/user_guide/interaction/callbacks.html CustomJS for selections.

Unfortunately the datatable doesnt seem to “refresh” unless you click on one of the column headings (like re-sorting it)? Is this expected behaviour?

I’ve also not managed to get the download.js code to work on my script - is there any way to debug why it isn’t working?

p.s. The CSS trick works, although it is of limited use with large data tables (the hidden points are still rows).

On Wednesday, 24 August 2016 19:58:12 UTC+1, Sarah Bird wrote:

Hi Will,

** > does the download (customJS) function on that example
also need a server, or can it be static?**

No - CustomJS runs client side and doesn’t need a server.

** > Is it possible to have a datatable automatically hide
entries which aren’t selected (i.e. from a shared source scatter
plot) without using the server?**

Yes. The way I would approach it is as follows:

  * DataTable doesn't hide rows that aren't selected. If you want
them gone from your DataTable you have to remove those rows from
the ColumnDataSource that powers the DataTable.

Make one column data source for your scatter CDS-Scatter

Make another column data source for your table CDS-Table

  * Write a CustomJS function that is attached to the CDS-Scatter.
On selection it will copy the data from selected rows to CDS-Table

  I can't see any reason why this won't work off the top of my

head.

  (Alternatively, the super cheap, super hacky way - add the
following css to your html page which (sort of) hides any cells that aren’t part of
the selection - see attached image)

.bk-slick-cell:not(.selected) {
display: none;
}

** > Finally, is there a way to get a “count” of number of
selected points?**

The data format for selections is a giant pain (in my opinion) -
http://bokeh.pydata.org/en/latest/docs/reference/models/sources.html#bokeh.models.sources.DataSource.selected
- you almost always want source.selected.1d.indices to get your
selection. So in javascript (e.g. in a CustomJS) the count would
be - source.selected.1d.indices. length in python it would be
len(source.selected['1d']['indices']).

Hope that helps.

On 8/24/16 6:25 AM, Will Kew wrote:

    Is it possible to have a datatable automatically
hide entries which aren’t selected (i.e. from a shared source
scatter plot) without using the server?
        Due to lack of IT support, I'm just trying to produce
“static” HTML pages which can run on the most basic
webhosts.

      I've been looking at the export_csv example, but that needs
to be served, no? Also, its based on a single variable
(Salary), whereas I’d want it to be for any of the x variables
which are being plotted.
      I see the "scroll_to_selected" call, but thats not quite what
I need?

      Out of interest, does the download (customJS) function on
that example also need a server, or can it be static?

      Finally, is there a way to get a "count" of number of

selected points?

Thanks,

–

  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/cbbe27ef-d0d0-4612-a4d1-78b338839a74%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/cbbe27ef-d0d0-4612-a4d1-78b338839a74%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).

–
Sarah Bird
Developer, Bokeh

    [
      <img alt="Continuum Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" style="width:150px;min-height:30px" height="30px" width="150px">
    ](http://continuum.io)

birdsarah_continuum · August 29, 2016, 8:19pm

Brilliant!

If you can share any code snippets I’m sure folks would appreciate it.

···

On 8/29/16 7:22 AM, Will Kew wrote:

  Download.js fixed - when including the JS code within
the python script, rather than reading it externally, the new line
character needs an extra backslash.

    The datatable "refresh" issue is also solved by calling
dt.trigger(‘change’); at the end of the customJS (missing from
the provided example). dt = datatable, passed with args.

Thanks

–
Sarah Bird
Developer, Bokeh

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