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">
        {% 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>

<!-- Scroll to top element -->
{% include 'interactions/scroll_to_top.html.j2' %}

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


<script type="module">
/**
 * First Phase:
 * Document content is loaded and scripts are being imported and executed.
 */

// Import Client classes. Client handles the server client communication.
import {
  Client,
  ClientEventListener,
  ListenerCallback,
} from '../../static/js/modules/corpus_analysis/client/Client.js';
/**
 * Import Client listener functions which will listen for defined socket or
 * javascript events.
 */
import {
  recieveQueryStatus,
  recieveQueryData,
} from '../../static/js/modules/corpus_analysis/client/listeners.js';
// Import client listener callbacks so they can be registered to the listeners.
import {
  prepareQueryData,
  saveQueryData,
} from '../../static/js/modules/corpus_analysis/client/callbacks.js';
// Import Results class which will be used to save results data of a query etc.
import {
  Results,
} from '../../static/js/modules/corpus_analysis/model/Results.js';
/**
 * Import the ResultsList which can be understood as a View class that handles
 * how the data from Results is represented to the user. The ViewEventListener
 * is used to register listener functions which listen for events emitred by
 * the Client.
 */
import {
  ResultsList,
  ViewEventListener,
} from '../../static/js/modules/corpus_analysis/view/ResultsView.js';
import {
  scrollToTop,
} from '../../static/js/modules/corpus_analysis/view/scrollToTop.js'
/**
 * Second Phase:
 * Asynchronus and event driven code.
 */
document.addEventListener("DOMContentLoaded", () => {
  // Initialize the client with dynamicMode set to false.
  const client = new Client({'logging': true,
                             'dynamicMode': false});
  /**
   * Initializing the results object as a model holding all the data of a
   * query. Also holds the metadata of one query and results data.
   * After that initialize the ResultsList object as the View handeling the
   * representation of the data for the user.
   */
  let results = new Results();
  let resultsList = new ResultsList('result-list', ResultsList.options);
  // Import results data from json file.
  const resultsJson = {{ query_result_file_content|tojson|safe }};
  /**
   * Register needed listeners and their callbacks. But we will
   * just call the attached callbacks manually. Because dynamicMode is false.
   */
  const listenForQueryStatus = new ClientEventListener('corpus_analysis_query',
                                                       recieveQueryStatus);
  const queryStatusCallback = new ListenerCallback('corpus_analysis_query',
                                                   prepareQueryData,
                                                   [client, results]);
  listenForQueryStatus.setCallbacks([queryStatusCallback]);
  const listenForQueryData = new ClientEventListener('corpus_analysis_query_results',
                                                     recieveQueryData);
  const queryDataCallback = new ListenerCallback('corpus_analysis_query_results',
                                                 saveQueryData,
                                                 [client, results]);
  listenForQueryData.setCallbacks([queryDataCallback]);
  // TODO: execute callbacks manually with right input
  // Enable scroll to Top functionality.
  scrollToTop('#headline', '#menu-scroll-to-top-div');
});
</script>
{% endblock %}