Search bar query should auto-populate guided search fields

[utf]

I've found myself doing an initial query using the search bar, then trying to refine it using the guided search fields dropdown menu. However, the search fields don't reflect the changes in the search bar.

So I end up adding another property say, then when I search it ends up being just for that specific property rather than my previous search + new property. Quite unintuitive.

Would be nice if the search bar query was parsed into the guided search fields.

[ardunn]

this can maybe be fixed with a callback for populating the search fields from the main bar on search. So at least after searches the main bar and the search fields will match exactly.

if we do it "live" this will cause a circular callback graph and plotly dash will be mad (i.e., the search fields update the text bar and the text bar updates the search fields, all live)...

[utf]

this can maybe be fixed with a callback for populating the search fields from the main bar on search. So at least after searches the main bar and the search fields will match exactly.

That sounds reasonable!

[ardunn]

@jdagdelen

Unfortunately there are a lot of JS errors when actually implementing this callback, due to ESAutosuggest:

Here's a test case which just returns "test" into every search field on searching:

# A test callback for updating guided search fields on searching
@app.callback(
    get_search_field_callback_args(as_type="output", return_component="value"),
    # [Output("material_filter_input", "value")],
    [Input('search-btn', 'n_clicks')],
    [State('text_input', 'value')]
)
def sync_search_fields_to_text_input_on_search(n_clicks, text_input):
    return ["test"]*8

Gives:

undefined is not an object (evaluating '(valueBeforeUpDown === null ? value : valueBeforeUpDown).trim')

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
getQuery
render
ce@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:98:142
Qg@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:144:295
Rg@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:145:170
Sc@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:158:111
Z@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:156:494
Kc@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:155:70
ya@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:153:187
enqueueSetState@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:202:411
http://localhost:8050/_dash-component-suites/dash_renderer/react@16.8.6.min.js?v=1.0.0&m=1570309824:20:448
handleChange@http://localhost:8050/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1570309824:32559:22
handleChange@[native code]
dispatch@http://localhost:8050/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1570309824:33559:15
updateRequestQueue@http://localhost:8050/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1570309824:37336:17
handleJson@http://localhost:8050/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1570309824:37554:31
promiseReactionJob@[native code]

---

When the search fields are dcc.Input rather than ESAutosuggest this callback works without issue.

The solutions seem like

A. Fix ESAutosuggest if possible

There seems to be some problem with setting "value" or any attr of an ESAutosuggest instance via Plotly callbacks...? Don't know how hard this would be, could use @jdagdelen advice

B. Replace all the search fields with dcc.Input

I personally don't find the autosuggestions particularly helpful but we could wait for more user input before doing this option

C. Hold off on this issue until v3

We could also just box this issue until v3, since we will be presumably be removing the search fields in favor of a unified bar...

[jdagdelen]

maybe have the entities disappear from the box once they click an entity or hit enter?

[ardunn]

actually @jdagdelen I think we can make this work really easily if a callback is able to set "value" of ESAutosuggest. After trying having the entities just disappear on search there is still the same JS issue.

Do you have an idea of how we can make ESAutosuggest do this and if it would be easy?

[jdagdelen]

I think this isn't actually related to the ESAutosuggest. Can you try making a hidden Div that holds the current value of the search box fields (updated by a callback when the search box changes) and then have the value of the ESAutosuggest components updated when that hidden Div changes?

[jdagdelen]

@jdagdelen

Unfortunately there are a lot of JS errors when actually implementing this callback, due to ESAutosuggest:

Here's a test case which just returns "test" into every search field on searching:

# A test callback for updating guided search fields on searching
@app.callback(
    get_search_field_callback_args(as_type="output", return_component="value"),
    # [Output("material_filter_input", "value")],
    [Input('search-btn', 'n_clicks')],
    [State('text_input', 'value')]
)
def sync_search_fields_to_text_input_on_search(n_clicks, text_input):
    return ["test"]*8

Gives:

undefined is not an object (evaluating '(valueBeforeUpDown === null ? value : valueBeforeUpDown).trim')

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
getQuery
render
ce@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:98:142
Qg@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:144:295
Rg@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:145:170
Sc@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:158:111
Z@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:156:494
Kc@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:155:70
ya@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:153:187
enqueueSetState@http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1570309824:202:411
http://localhost:8050/_dash-component-suites/dash_renderer/react@16.8.6.min.js?v=1.0.0&m=1570309824:20:448
handleChange@http://localhost:8050/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1570309824:32559:22
handleChange@[native code]
dispatch@http://localhost:8050/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1570309824:33559:15
updateRequestQueue@http://localhost:8050/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1570309824:37336:17
handleJson@http://localhost:8050/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1570309824:37554:31
promiseReactionJob@[native code]

When the search fields are dcc.Input rather than ESAutosuggest this callback works without issue.

The solutions seem like

A. Fix ESAutosuggest if possible

There seems to be some problem with setting "value" or any attr of an ESAutosuggest instance via Plotly callbacks...? Don't know how hard this would be, could use @jdagdelen advice

B. Replace all the search fields with dcc.Input

I personally don't find the autosuggestions particularly helpful but we could wait for more user input before doing this option

C. Hold off on this issue until v3

We could also just box this issue until v3, since we will be presumably be removing the search fields in favor of a unified bar...

The reason for this JS error has been fixed in the most recent version of dash_elasticsearch_autosuggest but it was not the reason the auto-population wasn't working.

[ardunn]

This is being benched until v3