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

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

{% set headline = ' ' %}

{% set full_width = 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">
        <div class="col s12 m2 l2" id="infos">
          <h6 style="margin-top: 0px;">Infos</h6>
          <div class="divider" style="margin-bottom: 10px;"></div>
          <div class="row">
            <div class="col s12">
              <button id="show-metadata"
                      class="waves-effect
                             waves-light
                             btn-flat"
                      type="submit">Corpus Metadata
                <i class="material-icons left">info_outline</i>
              </button>
            </div>
            <div class="col s12">
              <p>
                <span id="received-match-count">
                </span> of
                <span id="match-count"></span>
                matches loaded.
                <br>
                Matches occured in
                <span id="text-lookup-count"></span>
                corpus files:
                <br>
                <span id=text-titles></span>
              </p>
              <p id="query-results-user-feedback">
                <i class="material-icons">help</i>
                The Server is still sending your results.
                Functions like "Export Results" and "Match Inspect" will be
                available after all matches have been loaded.
              </p>
              <div class="progress" id="query-results-progress">
                <div class="determinate" id="query-results-determinate"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col s12 m2 l2" id="display">
          <h6 style="margin-top: 0px;">Display</h6>
          <div class="divider" style="margin-bottom: 10px;"></div>
          <div class="row">
            <div class="col s12">
              <form id="display-options-form">
                {{ M.render_field(display_options_form.results_per_page,
                                  material_icon='format_list_numbered') }}
                {{ M.render_field(display_options_form.result_context,
                                  material_icon='short_text') }}
                {{ M.render_field(display_options_form.expert_mode) }}
              </form>
            </div>
          </div>
        </div>
      </div>
      <!-- Table showing the query results -->
      <div class="col s12">
        <ul class="pagination paginationTop"></ul>
        <table class="responsive-table highlight">
          <thead>
            <tr>
              <th style="width: 2%">Nr.</th>
              <th style="width: 3%">Title</th>
              <th style="width: 25%">Left context</th>
              <th style="width: 35%">Match</th>
              <th style="width: 10%">Actions</th>
              <th style="width: 25%">Right Context</th>
            </tr>
          </thead>
          <tbody class="list" id="query-results">
          </tbody>
        </table>
        <ul class="pagination paginationBottom"></ul>
      </div>
    </div>
  </div>
</div>

<!-- Metadata modal -->
{% import "macros/query_result_macro.html.j2" as metadata %}
<div id="metadata-modal" class="modal bottom-sheet">
  <div class="section">
    <div class="col s12 right-align">
      <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
    </div>
  </div>
  {% if query_metadata is defined %}
    <div class="modal-content">
      {{ metadata.show_metadata(query_metadata) }}
    </div>
  {% else %}
    <div class="modal-content">
      <div class="metaDataModal">
      </div>
    </div>
  {% endif %}
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
  </div>
</div>

<!-- Context modal used for detailed information about one match -->
<div id="context-modal" class="modal modal-fixed-footer">
  <div class="modal-content">
    <form>
      <div class="row" style="margin-bottom: 0px; margin-top: -20px;">
        <div class="col s12 m6 l6">
          <div class="section">
            <h6 style="margin-top: 0px;">Display</h6>
            <div class="divider" style="margin-bottom: 10px;"></div>
            <div class="col s12" style="margin-bottom: 10px;" id="display-inspect">
              {{ inspect_display_options_form.expert_mode_inspect.label.text }}
              <div class="switch right">
                <label>
                  {{ inspect_display_options_form.expert_mode_inspect() }}
                  <span class="lever"></span>
                </label>
              </div>
            </div>
            <div class="col s12" style="margin-bottom: 10px;" id="create-inspect">
              {{ inspect_display_options_form.highlight_sentences.label.text }}
              <div class="switch right">
                <label>
                  {{ inspect_display_options_form.highlight_sentences() }}
                  <span class="lever"></span>
                </label>
              </div>
            </div>
            <div class="col s12" style="margin-bottom: 10px;">
              Sentences around match
              <div class="input-field right" style="margin-top: -2rem;
                                                    margin-bottom: -2rem;
                                                    height: 0px;">
                <p class="range-field">
                  <input type="range"
                         id="context-sentences"
                         min="1"
                         max="10"
                         value="3" />
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
    <div class="row section">
      <h5 style="margin-top: 0px;">Context for match:
        <span id="context-match-nr"></span></h5>
      <div class="divider" style="margin-bottom: 10px;"></div>
      <div class="col s12" >
        <div id="context-results">
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    {# <a id="inspect-download-context" class="left waves-effect waves-light btn">
      Export Single Context
      <i class="material-icons right">file_download</i>
    </a> #}
    <a href="#!" class="modal-close waves-effect waves-light red btn">Close</a>
  </div>
</div>

<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 queryResultsDeterminateElement;  // The progress bar for recieved results
  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 = [];
  queryResultsDeterminateElement = document.getElementById("query-results-determinate");
  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 %}