enviPy-bayer/templates/search.html

{% extends "framework.html" %}
{% load static %}
{% block content %}

    <div id=searchContent>
        <div id="packSelector">
            <label>Select Packages</label><br>
            <select id="selPackages" name="selPackages" data-actions-box='true' class="selPackages" multiple
                    data-width='100%'>
                {% if unreviewed_objects %}
                    <option disabled>Reviewed Packages</option>
                {% endif %}
                {% for obj in reviewed_objects %}
                    <option value="{{ obj.url }}" selected>{{ obj.name }}</option>
                {% endfor %}
                {% if unreviewed_objects %}
                    <option disabled>Unreviewed Packages</option>
                {% endif %}
                {% for obj in unreviewed_objects %}
                    <option value="{{ obj.url }}">{{ obj.name }}</option>
                {% endfor %}
            </select>
        </div>
        <p></p>
        <div>
            <label>Search Term</label><br>
            <div class="input-group" id="index-form-bar">
                <input type="text" class="form-control" id='searchbar' placeholder="Benfuracarb">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            id="mode-button"
                            aria-haspopup="true" aria-expanded="false">Text <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">Text</li>
                        <li><a id="dropdown-predict-text-text">Text</a></li>
                        <li class="dropdown-header">SMILES</li>
                        <li><a id="dropdown-search-smiles-default" data-toggle="tooltip">Default</a></li>
                        <li><a id="dropdown-search-smiles-canonical">Canonical</a></li>
                        <li><a id="dropdown-search-smiles-exact">Exact</a></li>
                        <li class="dropdown-header">InChI</li>
                        <li><a id="dropdown-search-inchi-inchikey">InChIKey</a></li>
                    </ul>
                    <button class="btn" style="background-color:#222222;color:#9d9d9d" type="button" id="search-button">
                        Go!
                    </button>
                </div>
            </div>
            <p></p>
            <div id="results"></div>
            <p></p>
            <div id="loading"></div>
        </div>
    </div>
    <script>
        function modeDropdownClicked() {
            var suffix = ' <span class="caret"></span>';
            var dropdownVal = $(this).text();
            $('#mode-button').html(dropdownVal + suffix);
        }

        function handleSearchResponse(id, data) {
            content = `
                <div class='panel-group' id='search-accordion'>
                    <div class='panel panel-default'>
                        <div class='panel-heading' id='headingPanel' style='font-size:2rem;height: 46px'>
                        Results
                        </div>
                        <div id='descDiv'></div>
                    </div>`;

            function makeContent(objs) {
                links = "";
                for (idx in objs) {
                    obj = objs[idx];
                    links += `<a class='list-group-item' href='${obj.url}'>${obj.name}</a>`
                }
                return links;
            }

            allEmpty = true;
            for (key in data) {
                if (data[key].length < 1) {
                    continue;
                }
                allEmpty = false;
                content += `
                    <div class='panel panel-default panel-heading list-group-item' style='background-color:silver'>
                        <h4 class='panel-title'>
                            <a id='${key}_link' data-toggle='collapse' data-parent='#search-accordion' href='#${key}_panel'>
                                ${key}
                            </a>
                        </h4>
                    </div>
                    <div id='${key}_panel' class='panel-collapse collapse in'>
                        <div class='panel-body list-group-item'>
                        ${makeContent(data[key])}
                        </div>
                    </div>

        `;
            }
            if (allEmpty) {
                $('#' + id).append('<div class="alert alert-danger" role="alert"><p>' + "No results..." + '</p></div>');
            } else {
                $('#' + id).append(content);
            }
        }

        function search(e) {
            e.preventDefault();

            query = $("#searchbar").val()

            if (!query) {
                // Nothing to search...
                console.log("Search phrase empty, won't do search")
                return;
            }

            var selPacks = [];
            $("#selPackages :selected").each(function () {
                var id = this.value;
                selPacks.push(id);
            });

            if (selPacks.length < 1) {
                console.log("No package selected, won't do search")
                return;
            }

            var mode = $('#mode-button').text().trim().toLowerCase();

            var par = {};
            par['packages'] = selPacks;
            par['search'] = query;
            par['mode'] = mode;

            console.log(par);

            var queryString = $.param(par, true);

            makeLoadingGif("#loading", "{% static '/images/wait.gif' %}");

            $("#results").empty();

            $.getJSON("{{ SERVER_BASE }}/search?" + queryString, function (result) {
                handleSearchResponse("results", result);
                $("#loading").empty();
            }).fail(function (d) {
                $("#loading").empty();
                console.log(d.responseText);
                handleError(JSON.parse(d.responseText));
            });
        }


        $(function () {

            tooltips = {
                'dropdown-predict-text-text': 'The inserted pattern will be searched on all enviPath object names and descriptions',
                'dropdown-search-smiles-default': 'Search by SMILES, stereochemistry and charge are ignored',
                'dropdown-search-smiles-canonical': 'Search by SMILES, stereochemistry is ignored but charge is preserved',
                'dropdown-search-smiles-exact': 'Search by SMILES, exact match for stereochemistry and charge',
                'dropdown-search-inchi-inchikey': 'Search by InChIKey',
            }

            Object.keys(tooltips).forEach(key => {
                $('#' + key).tooltip({
                    placement: "top",
                    title: tooltips[key]
                });

                $('#' + key).on('click', modeDropdownClicked);
            });

            $("#selPackages").selectpicker();
            $("#search-button").on("click", search);

        });
        {% if search_result %}
            handleSearchResponse("results", {{ search_result|safe }});
        {% endif %}
    </script>

{% endblock content %}