support re-use in other omero-web apps

[will-moore]

Following todays discussion, here are some ideas for how to reuse the UI components from this repo in other omero-web apps (potentially other external web-pages later).

• Move this app to a Django-based omero-web app
• Move as much JavaScript as possible to a common library that allows re-use in different apps. e.g:

<form id="searchForm"></form>
<table id="searchResults"></table>

<script>
let url = "https://idr.openmicroscopy.org/searchengineapi/";
let search = new OmeroSearch(url, "#searchForm", "#searchResults");
search.on("image_select", function(imageIds) {
  console.log("Selected search results", imageIds);
});
</script>

In that example, you have no control over the html. An alternative is to do something like this, where the library takes care of handling the form manipulation (add/remove, auto-complete etc) and submitting the results, but you have to take care of rendering the results in a table:

<!-- form must have certain essential elements/classNames. This is just what's in webclient PR just now -->
<form id="searchForm" class="search_panel standard_form">
    <div class="and_clause">
        <div class="form-row">
            <div>
                <label>Attribute</label><br>
                <select class="keyFields">
                    <option value="Any">Any</option>
                </select>
            </div>
            <div>
                <label>Value</label><br>
                <input class="search valueFields" name="query" value="" size="25"/>
            </div>
            <button class="remove no-border" style="margin-bottom: 8px; visibility: hidden">
                X
            </button>
        </div>
    </div>
</form>

<script>
let url = "https://idr.openmicroscopy.org/searchengineapi/";
let search = new OmeroSearch(url, "#searchForm");
search.on("results", function(results) {
  console.log("Response JSON", results);
  // render results into table...
});
</script>

The above only considers the basic search form and results table. Other UI components to consider:

• JSON search query textarea
• Attribute browser & "search for any value" (jsTree and table)

cc @khaledk2 @joshmoore @sbesson

[will-moore]

Potential steps to sharing code between this repo and e.g. https://github.com/ome/omero-web/pull/368/ (some of the code in that PR is more or less similar to code in this repo):

• One option is to move all the duplicated JavaScript code to a JS library, installable via npm. This may be a good idea once it becomes stable, but while it is evolving and being tested/consumed in various web apps, we want an easier way of sharing the code.

Steps for using the omero-web framework (Django) to share code between web apps: 1) convert this app to Django 2) install it anywhere we want to use/test (e.g. merge-ci, idr-testing) 3) move duplicated JS code to a static js file that can be included in webclient UI. It would be good if we can avoid using jQuery for this code, so that it's re-usable in non-jQuery apps. 4) consume this from within this app, and also from e.g. webclient

IF we want a search page in idr-gallery, then we can consume it from there too.

I think that the 2nd option above (user provides the html and handles rendering of the results) is the easiest to start with. This means that webclient etc can use a different table for results (e.g. this repo could use ag-grid but webclient wouldn't need to).

If this sounds acceptable, I could start with 1) and 2) above, since that can happen before we're done deciding on the JavaScript API for this lib?

[khaledk2]

Will has started working with a PR https://github.com/ome/omero_search_engine_client/pull/12 to call the searchengine API from JS, I think we should finish this first. Then the web framework (Flask and then Django) will only initialize the first page and the JS will do the actual job. After that, we shold start to organize the JS to be consumed by the apps as Will mentined. In addition, I have started working with PRs for ssearchengine and searchengine client to implement the https://github.com/ome/omero_search_engine/issues/4 which I almost finished and will push them soon.

[will-moore]

Currently, the "API" for re-using a limited amount of code for the search form looks like this:

Include js and css from this app:

<link rel="stylesheet" href="{% static 'omero_search_engine_client/css/search_form_styles.css' %}">
<script src="{% static 'omero_search_engine_client/js/search_form_utils.js' %}"></script>

Include html for the form (not all is provided yet - include snippets in appropriate places):

<form id="search_form" class="standard_form">
    {% include "omero_search_engine_client/and_clause.html" %}
</form>
<button id="addAND" type="button" class="no-border" title="Add an 'AND' clause to the query">
    add AND...
 </button>
{% include "omero_search_engine_client/case_insensitive_checkbox.html" %}
<button id="doElasticSearch">Search</button>

Then we can use some of these JS methods in our code: e.g. get_current_query() is provided:

async function submitQuery() {
    let submitqueryurl = SEARCH_ENGINE_URL + "resources/image/searchannotation/";
    let searchQuery = get_current_query();
    console.log("searchQuery", searchQuery)
    const data = await postData(submitqueryurl, searchQuery);
    displayResults(data);
}

Clearly, this current state with reuse of a subset of methods is a bit fragile:

• Global variables
• form id="search_form" is hard-coded
• incomplete coverage

What do we want the API usage to look like? Eg.

<form id="mySearchForm"></form>

<script>
...
// create a form - this populates the <form> with html
const searchForm = omeroSearchForm(SEARCH_ENGINE_URL, "#mySearchForm");
// (all 'ADD' and 'OR' buttons are handled)

// to add an 'AND' clause
searchForm.addAnd("Key", "Value")

// handle return of search results
searchForm.on("results", displayResults);

</script>

I started a move to this form at https://github.com/ome/omero_search_engine_client/pull/18 but I'm not consuming it at https://github.com/ome/omero-web/pull/368 yet - was getting too many errors, and I ended up rolling back the dependency on this repo, so as to deploy the webclient search on idr without needing to add the deployment of this repo.

[khaledk2]

I think it should be similar to the "ag-grid": it accepts the div id (which will contain the table) and uses the columns "desc" and "data" to generate the table inside the div. So I imagine that it should accept the div which contains the form and it should also have methods to add/delete or/and clauses, search, and display results. So the developer provides the parent container and using the javascript code it creates the form and adds the proper GUI elements (e.g. add and remove buttons).

I am not sure if you have already modified it or not; I think the code of the 'https://github.com/ome/omero-web/pull/368' was using the searchengineclient endpoints; It should use the seachengine endpoints instead.