nopaque/web/app/templates/query_results/inspect.html.j2

{% extends "nopaque.html.j2" %}

{% set headline = ' ' %}

{% set full_width = True %}
{% set imported = True %}

{% block page_content %}

<div class="col s12">
  <div class="card">
    <div class="card-content" style="padding-top: 5px;
                             padding-bottom: 0px;">
      <!-- Query form -->
      <div class="row">
      <form id="query-form">
          <div class="col s12 m10">
            <div class="input-field">
              <i class="material-icons prefix">search</i>
              <input disabled value="{{ query_metadata.query|escape }}" id="disabled" type="text" class="validate">
          <label for="disabled">Query</label>
            </div>
          </div>
          <div class="col s12 m2 right-align">
            <br class="hide-on-small-only">
          </div>
      </form>
    </div>
    </div>
  </div>
</div>

<!-- entire results div/card -->
<div class="col s12" id="query-display">
  <div class="card">
    <div class="card-content" id="result-list" style="overflow: hidden;">
      <div class=" row show-on-success">
        {% include 'interactions/infos.html.j2' %}
        {% include 'interactions/display.html.j2' %}
        {% include 'interactions/analysis.html.j2' %}
        {% include 'interactions/cite.html.j2' %}
      </div>
      {% include 'tables/query_results.html.j2' %}
    </div>
  </div>
</div>

<!-- Modals -->
{% include 'modals/show_metadata.html.j2' %}
{% include 'modals/show_text_details.html.j2' %}
{% include 'modals/context_modal.html.j2' %}


<script src="{{ url_for('static', filename='js/nopaque.Results.js') }}">
</script>
<script src="{{ url_for('static', filename='js/nopaque.callbacks.js') }}">
</script>
<script src="{{ url_for('static', filename='js/nopaque.InteractionElement.js') }}">
</script>
<script>
  // ###### global variables ######
  var full_result_json;
  var result_json;
  var receivedMatchCountElement;  // Nr. of loaded matches will be displayed in this element
  var textLookupCountElement  // Nr of texts the matches occured in will be shown in this element
  var textTitlesElement;  // matched text titles
  var progress;  // global progress value
  var queryResultsProgressElement;  // Div element holding the progress bar
  var expertModeSwitchElement; // Expert mode switch Element
  var matchCountElement;  // Total nr. of matches will be displayed in this element
  var interactionElements;  // Interaction elements and their parameters
  var contextModal;  // Modal to open on inspect for further match context

  // ###### Defining local scope variables
  let displayOptionsFormElement;  // Form holding the display informations
  let resultItems;  // array of built html result items row element. This is called when results are transmitted and being recieved
  let hitsPerPageInputElement;let contextPerItemElement;  // Form Element for display option
  let paginationElements;
  let inspectBtnElements;
  let metaDataModal;
  let showMetaDataButton

  // ###### Initializing variables ######
  displayOptionsFormElement = document.getElementById("display-options-form");
  resultItems = [];
  receivedMatchCountElement = document.getElementById("received-match-count");
  textLookupCountElement = document.getElementById("text-lookup-count");
  textTitlesElement = document.getElementById("text-titles");
  queryResultsProgressElement = document.getElementById("query-results-progress");
  expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
  matchCountElement = document.getElementById("match-count");
  hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page");
  contextPerItemElement = document.getElementById("display-options-form-result_context");
  paginationElements = document.getElementsByClassName("pagination");
  contextModal = document.getElementById("context-modal");
  metaDataModal = document.getElementById("metadata-modal");
  showMetaDataButton = document.getElementById("show-metadata");

  // js list options
  displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
  resultsListOptions = {page: displayOptionsData["resultsPerPage"],
  pagination: [{
      name: "paginationTop",
      paginationClass: "paginationTop",
      innerWindow: 8,
      outerWindow: 1
    }, {
      paginationClass: "paginationBottom",
      innerWindow: 8,
      outerWindow: 1
    }],
    valueNames: ["titles", "lc", "c", "rc", {data: ["index"]}],
    item: `<span></span>`
  };

  document.addEventListener("DOMContentLoaded", () => {
    // Initialize some Modals
    contextModal = M.Modal.init(contextModal, {"dismissible": true});

    // ###### recreating chunk structure to reuse callback queryRenderResults()
    full_result_json = {{ query_result_file_content|tojson|safe }};
    result_json = {};
    result_json["chunk"] = {};
    result_json.chunk["cpos_lookup"] = full_result_json.cpos_lookup;
    result_json.chunk["cpos_ranges"] = full_result_json.cpos_ranges;
    result_json.chunk["matches"] = full_result_json.matches;
    result_json.chunk["text_lookup"] = full_result_json.text_lookup;

    // Init corpus analysis components
    data = new Data();
    resultsList = new ResultsList("result-list", resultsListOptions);
    resultsMetaData = new MetaData();
    results = new Results(data, resultsList, resultsMetaData);
    results.clearAll();  // inits some object keys and values
    // init some modals
    let deleteOverlay = () => {
      let overlay = document.getElementsByClassName("modal-overlay")[0];
      overlay.remove();
    };
    metaDataModal = M.Modal.init(metaDataModal, {"preventScrolling": false,
                                 "opacity": 0.0,
                                 "dismissible": false,
                                 "onOpenEnd": deleteOverlay});

    // setting some initial values for user feedback
    matchCountElement.innerText = full_result_json.match_count;

    // Initialization of interactionElemnts
    // An interactionElement is an object identifing a switch or button via
    // htmlID. Callbacks are set for these elements which will be triggered on
    // a pagination interaction by the user or if the status of the element has
    // been altered. (Like the switche has ben turned on or off).
    interactionElements = new InteractionElements();
    let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
    expertModeInteraction.setCallback("on",
                                      results.jsList.expertModeOn,
                                      results.jsList,
                                      ["query-display"])
    expertModeInteraction.setCallback("off",
                                      results.jsList.expertModeOff,
                                      results.jsList,
                                      ["query-display"])

    let activateInspectInteraction = new InteractionElement("inspect",
                                                            false);
    activateInspectInteraction.setCallback("noCheck",
                                            results.jsList.activateInspect,
                                            results.jsList);

    let changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
                                                          false);
    changeContextInteraction.setCallback("noCheck",
                                        results.jsList.changeContext,
                                        results.jsList)
    interactionElements.addInteractions([expertModeInteraction, activateInspectInteraction, changeContextInteraction]);

    // checks if a change for every interactionElement happens and executes
    // the callbacks accordingly
    interactionElements.onChangeExecute();

    // eventListener if pagination is used to apply new context size to new page
    // and also activate inspect match if progress is 100
    // also adds more interaction buttons like add to sub results
    for (let element of paginationElements) {
      element.addEventListener("click", (event) => {
        results.jsList.pageChangeEventInteractionHandler(interactionElements);
      });
    }

    // render results in table imported parameter is true
    queryRenderResults(result_json, true);

    // ### Show corpus Metadata
    showMetaDataButton.onclick = () => {
      console.log(results.metaData);
      console.log(results.data.text_lookup);
      metaDataModal.open();
    };

    // live update of hits per page if hits per page value is changed
    let changeHitsPerPageBind = results.jsList.changeHitsPerPage.bind(results.jsList);
    hitsPerPageInputElement.onchange = changeHitsPerPageBind;

    // live update of lr context per item if context value is changed
    contextPerItemElement.onchange = results.jsList.changeContext;
  });
</script>
{% endblock %}