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|safe }}</option>
        {% endfor %}
        {% if unreviewed_objects %}
          <option disabled>Unreviewed Packages</option>
        {% endif %}
        {% for obj in unreviewed_objects %}
          <option value="{{ obj.url }}">{{ obj.name|safe }}</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>
  {# prettier-ignore-start #}
    <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 (key === 'searchterm') {
                    continue;
                }

                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);

            $("#searchbar").on("keydown", function (e) {
                if (e.key === "Enter") {
                    e.preventDefault();
                    search(e);
                }
            });

        });
        {% if search_result %}
            $('#searchbar').val('{{ search_result.searchterm }}')
            handleSearchResponse("results", {{ search_result|safe }});
        {% endif %}
    </script>
    {# prettier-ignore-end #}
{% endblock content %}