data loading driven from input group button

1

Hi All

  • I have input group of two date and one button component
  • I want to query BigQuery only after pressing button component from my input group

Rather simple use case, but I am totally stuck. I tired to adopt https://observablehq.com/@mbostock/wait-until-button and trying for my use case, but I can’t figure out how to refer my button in either BQ block as I can’t extract button from the input group.

Here is my inputGroup:

viewof date_selector = inputsGroup(
[
  [
   date({
     title: "Pick start date", 
     value: d3.timeFormat('%Y-%m-%d')(new Date()),
     description: ""
   }),
   date({
     title: "Pick end date", 
     value: d3.timeFormat('%Y-%m-%d')(new Date()),
     description: ""
   }),
   button({
     name: "bq_button",
     value: "Query Data",
     description: "",
     onclick: event => event.currentTarget.dispatchEvent(new CustomEvent("input", {bubbles: true}))
   }),
    //button: html`<form>${Object.assign(html`<button type=button>Query Data</button>`, {onclick: event => event.currentTarget.dispatchEvent(new CustomEvent("input", {bubbles: true}))})}`)
   //slider({'title':'test',name:'name',description:'description'}),
  ]
]
)

Here is my cell to extract data:

db_server = {
  date_selector.bq_button;
  return client.query(`SELECT DISTINCT name
FROM test.names`);
}

The problem is date_selector.bq_button is undefined and using date_selector doesn’t cut it out because I only want to listen on the button and not the whole group. Appreciate any help!

2

Check out Mike Bostock’s More Deliberate Inputs notebook for some pointers on how to change the value of the view only when the form is submitted.