mirror of
				https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
				synced 2025-11-04 04:12:45 +00:00 
			
		
		
		
	Soem clean up and restructure
This commit is contained in:
		@@ -112,8 +112,6 @@ function queryRenderResults(payload, imported=false) {
 | 
			
		||||
  } else {
 | 
			
		||||
    results.data["cpos_ranges"] = false;
 | 
			
		||||
  }
 | 
			
		||||
  // update progress bar
 | 
			
		||||
  queryResultsDeterminateElement.style.width = `${payload.progress}%`;
 | 
			
		||||
  // building the result list js list from incoming chunk
 | 
			
		||||
  resultItems = []; // list for holding every row item
 | 
			
		||||
  // get infos for full match row
 | 
			
		||||
@@ -121,6 +119,8 @@ function queryRenderResults(payload, imported=false) {
 | 
			
		||||
    resultItems.push({...match, ...{"index": index + results.data.matches.length}});
 | 
			
		||||
  }
 | 
			
		||||
  if (!imported) {
 | 
			
		||||
    // update progress bar
 | 
			
		||||
    queryResultsDeterminateElement.style.width = `${payload.progress}%`;
 | 
			
		||||
    results.jsList.add(resultItems, (items) => {
 | 
			
		||||
      for (let item of items) {
 | 
			
		||||
        item.elm = results.jsList.createResultRowElement(item, payload.chunk);
 | 
			
		||||
 
 | 
			
		||||
@@ -1015,4 +1015,87 @@ class ResultsList extends List {
 | 
			
		||||
    }
 | 
			
		||||
    return matchRowElement
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // creates the HTML table code for the metadata vie in the corpus analysis interface
 | 
			
		||||
  createMetaDataForModal(metaDataObject) {
 | 
			
		||||
    let table = `<div class="col s12">
 | 
			
		||||
                      <table class="highlight">
 | 
			
		||||
                        <thead>
 | 
			
		||||
                          <tr>
 | 
			
		||||
                            <th>Metadata Description</th>
 | 
			
		||||
                            <th>Value</th>
 | 
			
		||||
                          </tr>
 | 
			
		||||
                        </thead>
 | 
			
		||||
                        <tbody>`
 | 
			
		||||
    for (let [outerKey, outerValue] of Object.entries(metaDataObject)) {
 | 
			
		||||
      table += `<tr>
 | 
			
		||||
                  <td>${outerKey}</td>`
 | 
			
		||||
      if (outerKey === "corpus_all_texts" || outerKey === "text_lookup") {
 | 
			
		||||
        table += `<td>
 | 
			
		||||
                  <table>`
 | 
			
		||||
        for (let [innerKey, innerValue] of Object.entries(outerValue)) {
 | 
			
		||||
          table += `<tr style="border-bottom: none;">
 | 
			
		||||
                      <td>
 | 
			
		||||
                        <i>${innerValue.title}</i> written
 | 
			
		||||
                        by <i>${innerValue.author}</i>
 | 
			
		||||
                        in <i>${innerValue.publishing_year}</i>
 | 
			
		||||
                        <a class="waves-effect
 | 
			
		||||
                                  waves-light
 | 
			
		||||
                                  btn
 | 
			
		||||
                                  right
 | 
			
		||||
                                  more-text-detials"
 | 
			
		||||
                           data-metadata-key="${outerKey}"
 | 
			
		||||
                           data-text-key="${innerKey}"
 | 
			
		||||
                           href="#modal-text-details">More
 | 
			
		||||
                            <i class="material-icons right"
 | 
			
		||||
                               data-metadata-key="${outerKey}"
 | 
			
		||||
                               data-text-key="${innerKey}">
 | 
			
		||||
                               info_outline
 | 
			
		||||
                            </i>
 | 
			
		||||
                        </a>
 | 
			
		||||
                      </td>
 | 
			
		||||
                    </tr>`
 | 
			
		||||
        }
 | 
			
		||||
        table += `</td>
 | 
			
		||||
                  </table>`
 | 
			
		||||
      } else {
 | 
			
		||||
        table += `<td>${outerValue}</td>`
 | 
			
		||||
      }
 | 
			
		||||
      table += `</tr>`
 | 
			
		||||
    }
 | 
			
		||||
    table += `</tbody>
 | 
			
		||||
              </table>`
 | 
			
		||||
    return table
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // Creates the text details for the texts shown in the corpus analysis metadata modal.
 | 
			
		||||
  createTextDetails(metaDataObject) {
 | 
			
		||||
    let modal = document.getElementById("modal-text-details");
 | 
			
		||||
    modal = M.Modal.init(modal, {"dismissible": true});
 | 
			
		||||
    modal.open();
 | 
			
		||||
    let metadataKey = event.target.dataset.metadataKey;
 | 
			
		||||
    let textKey = event.target.dataset.textKey;
 | 
			
		||||
    let textData = metaDataObject[metadataKey][textKey];
 | 
			
		||||
    let bibliographicData = document.getElementById("bibliographic-data");
 | 
			
		||||
    bibliographicData.innerHTML = "";
 | 
			
		||||
    let table = document.createElement("table");
 | 
			
		||||
    for (let [key, value] of Object.entries(textData)) {
 | 
			
		||||
      table.insertAdjacentHTML("afterbegin",
 | 
			
		||||
      `
 | 
			
		||||
        <tr>
 | 
			
		||||
          <td>${key}</td>
 | 
			
		||||
          <td>${value}</td>
 | 
			
		||||
        </tr>
 | 
			
		||||
      `);
 | 
			
		||||
    }
 | 
			
		||||
    table.insertAdjacentHTML("afterbegin",
 | 
			
		||||
      `
 | 
			
		||||
        <thead>
 | 
			
		||||
          <th>Description</th>
 | 
			
		||||
          <th>Value</th>
 | 
			
		||||
        </thead>
 | 
			
		||||
      `)
 | 
			
		||||
    bibliographicData.appendChild(table);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -3,6 +3,7 @@
 | 
			
		||||
{% set headline = ' ' %}
 | 
			
		||||
 | 
			
		||||
{% set full_width = True %}
 | 
			
		||||
{% set imported = False %}
 | 
			
		||||
 | 
			
		||||
{% block page_content %}
 | 
			
		||||
<div class="col s12">
 | 
			
		||||
@@ -42,378 +43,25 @@
 | 
			
		||||
    <div class="card-content" id="result-list" style="overflow: hidden;">
 | 
			
		||||
      <div class="error-container hide show-on-error"></div>
 | 
			
		||||
      <div class=" row hide 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="export">
 | 
			
		||||
          <h6 style="margin-top: 0px;">Export</h6>
 | 
			
		||||
          <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
          <div class="row">
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <button class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat
 | 
			
		||||
                      disabled"
 | 
			
		||||
                      type="submit"
 | 
			
		||||
                      id="results-create">Create Results
 | 
			
		||||
                <i class="material-icons left">build</i>
 | 
			
		||||
              </button>
 | 
			
		||||
              <button id="query-results-export"
 | 
			
		||||
                      class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat
 | 
			
		||||
                      hide"
 | 
			
		||||
                      type="submit">Results
 | 
			
		||||
                <i class="material-icons left">file_download</i>
 | 
			
		||||
              </button>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <button class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat
 | 
			
		||||
                      hide
 | 
			
		||||
                      disabled"
 | 
			
		||||
                      type="submit"
 | 
			
		||||
                      id="sub-results-create">Create Sub-Results
 | 
			
		||||
                <i class="material-icons left">build</i>
 | 
			
		||||
              </button>
 | 
			
		||||
              <button id="sub-results-export"
 | 
			
		||||
                      class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat
 | 
			
		||||
                      hide"
 | 
			
		||||
                      type="submit">Sub-Results
 | 
			
		||||
                <i class="material-icons left">file_download</i>
 | 
			
		||||
              </button>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="col s12 m2 l2" id="create">
 | 
			
		||||
          <h6 style="margin-top: 0px;">Create</h6>
 | 
			
		||||
          <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
          <div class="row">
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <div class="switch">
 | 
			
		||||
                Sub-Results creation:
 | 
			
		||||
                <label>
 | 
			
		||||
                  Off
 | 
			
		||||
                  <input disabled
 | 
			
		||||
                         type="checkbox"
 | 
			
		||||
                         id="add-to-sub-results">
 | 
			
		||||
                  <span class="lever"></span>
 | 
			
		||||
                  On
 | 
			
		||||
                </label>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="col s12 hide" id="sub-results-match-ids-div">
 | 
			
		||||
              <div class="input-field">
 | 
			
		||||
                <p><span id="nr-marked-matches"></span> matches marked
 | 
			
		||||
                  for Sub-Results:</p>
 | 
			
		||||
                <textarea id="sub-results-match-ids"
 | 
			
		||||
                          class="materialize-textarea"
 | 
			
		||||
                          disabled>
 | 
			
		||||
                </textarea>
 | 
			
		||||
              </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 class="col s12 m2 l2" id="anlysis">
 | 
			
		||||
          <h6 style="margin-top: 0px;">Analysis</h6>
 | 
			
		||||
          <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
          <div class="row">
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <button id="placeholder1"
 | 
			
		||||
                      class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat
 | 
			
		||||
                      disabled"
 | 
			
		||||
                      type="submit">Action One
 | 
			
		||||
                <i class="material-icons left">cloud</i>
 | 
			
		||||
              </button>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <button id="placeholder2"
 | 
			
		||||
                      class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat
 | 
			
		||||
                      disabled"
 | 
			
		||||
                      type="submit">Action Two
 | 
			
		||||
                <i class="material-icons left">add</i>
 | 
			
		||||
              </button>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="col s12 m2 l2" id="cite">
 | 
			
		||||
          <h6 style="margin-top: 0px;">Cite Nopaque</h6>
 | 
			
		||||
          <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
          <div class="row">
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <button id="placeholder1"
 | 
			
		||||
                      class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat
 | 
			
		||||
                      disabled"
 | 
			
		||||
                      type="submit">Action One
 | 
			
		||||
                <i class="material-icons left">cloud</i>
 | 
			
		||||
              </button>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              <button id="placeholder2"
 | 
			
		||||
                      class="waves-effect
 | 
			
		||||
                      waves-light
 | 
			
		||||
                      btn-flat
 | 
			
		||||
                      disabled"
 | 
			
		||||
                      type="submit">Action Two
 | 
			
		||||
                <i class="material-icons left">add</i>
 | 
			
		||||
              </button>
 | 
			
		||||
            </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>
 | 
			
		||||
        {% include 'interactions/infos.html.j2' %}
 | 
			
		||||
        {% include 'interactions/export.html.j2' %}
 | 
			
		||||
        {% include 'interactions/create.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 -->
 | 
			
		||||
 | 
			
		||||
<!-- Metadata modal -->
 | 
			
		||||
{% import "macros/query_result_macro.html.j2" as metadata %}
 | 
			
		||||
<div id="meta-data-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" id="meta-data-modal-content">
 | 
			
		||||
    </div>
 | 
			
		||||
  {% endif %}
 | 
			
		||||
  <div class="modal-footer">
 | 
			
		||||
    <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
<!-- Metadata text details modal -->
 | 
			
		||||
<div id="modal-text-details" class="modal modal-fixed-footer">
 | 
			
		||||
  <div class="modal-content">
 | 
			
		||||
    <h4>Bibliographic data</h4>
 | 
			
		||||
    <p id="bibliographic-data"></p>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="modal-footer">
 | 
			
		||||
    <a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
<!-- Analysis init modal -->
 | 
			
		||||
<div class="modal no-autoinit" id="init-display">
 | 
			
		||||
  <div class="modal-content">
 | 
			
		||||
    <h4>Initializing your corpus analysis session...</h4>
 | 
			
		||||
    <div class="error-container hide show-on-error"></div>
 | 
			
		||||
    <div class="hide progress show-while-waiting">
 | 
			
		||||
      <div class="indeterminate"></div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
<!-- Export query results modal -->
 | 
			
		||||
<div id="query-results-download-modal"
 | 
			
		||||
     class="modal modal-fixed-footer no-autoinit">
 | 
			
		||||
  <div class="modal-content">
 | 
			
		||||
    <h4>Download current query Results</h4>
 | 
			
		||||
    <p>The results of the current query can be downloaded as several files like
 | 
			
		||||
       csv or json. Those files can be used in other software like Excel.
 | 
			
		||||
       Also it is easy to publish your results as raw data like this!</p>
 | 
			
		||||
    <table>
 | 
			
		||||
      <tr>
 | 
			
		||||
        <td>JSON</td>
 | 
			
		||||
        <td>
 | 
			
		||||
          <a class="btn waves-effect waves-light" id="download-results-json">
 | 
			
		||||
             Download
 | 
			
		||||
            <i class="material-icons right">file_download</i>
 | 
			
		||||
          </a>
 | 
			
		||||
        </td>
 | 
			
		||||
      </tr>
 | 
			
		||||
      <tr>
 | 
			
		||||
        <td>CSV</td>
 | 
			
		||||
        <td>
 | 
			
		||||
          <a class="btn waves-effect waves-light disabled"
 | 
			
		||||
             id="download-results-csv">
 | 
			
		||||
             Download
 | 
			
		||||
            <i class="material-icons right">file_download</i>
 | 
			
		||||
          </a>
 | 
			
		||||
        </td>
 | 
			
		||||
      </tr>
 | 
			
		||||
      <tr>
 | 
			
		||||
        <td>EXCEL</td>
 | 
			
		||||
        <td>
 | 
			
		||||
          <a class="btn waves-effect waves-light disabled">Download
 | 
			
		||||
            <i class="material-icons right">file_download</i>
 | 
			
		||||
          </a>
 | 
			
		||||
        </td>
 | 
			
		||||
      </tr>
 | 
			
		||||
      <tr>
 | 
			
		||||
        <td>HTML</td>
 | 
			
		||||
        <td>
 | 
			
		||||
          <a class="btn waves-effect waves-light disabled">Download
 | 
			
		||||
            <i class="material-icons right">file_download</i>
 | 
			
		||||
          </a>
 | 
			
		||||
        </td>
 | 
			
		||||
      </tr>
 | 
			
		||||
    </table>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="modal-footer">
 | 
			
		||||
    <a href="#!" class="modal-close waves-effect waves-light red btn">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 class="col s12 m6 l6">
 | 
			
		||||
          <div class="section">
 | 
			
		||||
            <h6 style="margin-top: 0px;">Create</h6>
 | 
			
		||||
            <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              Add to Sub Results
 | 
			
		||||
              <div class="secondary-content right" id="add-to-sub-results-from-inspect">
 | 
			
		||||
              </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>
 | 
			
		||||
{% include 'modals/show_metadata.html.j2' %}
 | 
			
		||||
{% include 'modals/show_text_details.html.j2' %}
 | 
			
		||||
{% include 'modals/analysis_init.html.j2' %}
 | 
			
		||||
{% include 'modals/export_query_results.html.j2' %}
 | 
			
		||||
{% include 'modals/context_modal.html.j2' %}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<script src="{{ url_for('static', filename='js/nopaque.CorpusAnalysisClient.js') }}">
 | 
			
		||||
@@ -668,90 +316,20 @@
 | 
			
		||||
 | 
			
		||||
    // ### Show corpus Metadata
 | 
			
		||||
    showMetaDataButton.onclick = () => {
 | 
			
		||||
      let tmpObject = {};
 | 
			
		||||
      Object.assign(tmpObject, results.metaData);
 | 
			
		||||
      tmpObject["query"] = results.data.query;
 | 
			
		||||
      tmpObject["text_lookup"] = results.data.text_lookup;
 | 
			
		||||
      let metaDataObject = {};
 | 
			
		||||
      Object.assign(metaDataObject, results.metaData);
 | 
			
		||||
      metaDataObject["query"] = results.data.query;
 | 
			
		||||
      metaDataObject["text_lookup"] = results.data.text_lookup;
 | 
			
		||||
      metaDataModalContent = document.getElementById("meta-data-modal-content");
 | 
			
		||||
      let table = `<div class="col s12">
 | 
			
		||||
                        <table class="responsive-table highlight">
 | 
			
		||||
                          <thead>
 | 
			
		||||
                            <tr>
 | 
			
		||||
                              <th>Metadata Description</th>
 | 
			
		||||
                              <th>Value</th>
 | 
			
		||||
                            </tr>
 | 
			
		||||
                          </thead>
 | 
			
		||||
                          <tbody>`
 | 
			
		||||
      for (let [outerKey, outerValue] of Object.entries(tmpObject)) {
 | 
			
		||||
        table += `<tr>
 | 
			
		||||
                    <td>${outerKey}</td>`
 | 
			
		||||
        if (outerKey === "corpus_all_texts" || outerKey === "text_lookup") {
 | 
			
		||||
          table += `<td>
 | 
			
		||||
                    <table>`
 | 
			
		||||
          for (let [innerKey, innerValue] of Object.entries(outerValue)) {
 | 
			
		||||
            table += `<tr style="border-bottom: none;">
 | 
			
		||||
                        <td>
 | 
			
		||||
                          <i>${innerValue.title}</i> written
 | 
			
		||||
                          by <i>${innerValue.author}</i>
 | 
			
		||||
                          in <i>${innerValue.publishing_year}</i>
 | 
			
		||||
                          <a class="waves-effect
 | 
			
		||||
                                    waves-light
 | 
			
		||||
                                    btn
 | 
			
		||||
                                    right
 | 
			
		||||
                                    more-text-detials"
 | 
			
		||||
                             data-metadata-key="${outerKey}"
 | 
			
		||||
                             data-text-key="${innerKey}"
 | 
			
		||||
                             href="#modal-text-details">More
 | 
			
		||||
                              <i class="material-icons right"
 | 
			
		||||
                                 data-metadata-key="${outerKey}"
 | 
			
		||||
                                 data-text-key="${innerKey}">
 | 
			
		||||
                                 info_outline
 | 
			
		||||
                              </i>
 | 
			
		||||
                          </a>
 | 
			
		||||
                        </td>
 | 
			
		||||
                      </tr>`
 | 
			
		||||
          }
 | 
			
		||||
          table += `</td>
 | 
			
		||||
                    </table>`
 | 
			
		||||
        } else {
 | 
			
		||||
          table += `<td>${outerValue}</td>`
 | 
			
		||||
        }
 | 
			
		||||
        table += `</tr>`
 | 
			
		||||
      }
 | 
			
		||||
      table += `</tbody>
 | 
			
		||||
                </table>`
 | 
			
		||||
      metaDataModalContent.innerHTML = "";
 | 
			
		||||
      let table = results.jsList.createMetaDataForModal(metaDataObject);
 | 
			
		||||
      metaDataModalContent.insertAdjacentHTML("afterbegin", table);
 | 
			
		||||
      metaDataModal.open();
 | 
			
		||||
      var moreTextDetailsButtons;
 | 
			
		||||
      moreTextDetailsButtons = document.getElementsByClassName("more-text-detials");
 | 
			
		||||
      for (var btn of moreTextDetailsButtons) {
 | 
			
		||||
        btn.onclick = () => {
 | 
			
		||||
          let modal = document.getElementById("modal-text-details");
 | 
			
		||||
          modal = M.Modal.init(modal, {"dismissible": true});
 | 
			
		||||
          modal.open();
 | 
			
		||||
          let metadataKey = event.target.dataset.metadataKey;
 | 
			
		||||
          let textKey = event.target.dataset.textKey;
 | 
			
		||||
          let textData = tmpObject[metadataKey][textKey];
 | 
			
		||||
          let bibliographicData = document.getElementById("bibliographic-data");
 | 
			
		||||
          bibliographicData.innerHTML = "";
 | 
			
		||||
          let table = document.createElement("table");
 | 
			
		||||
          for (let [key, value] of Object.entries(textData)) {
 | 
			
		||||
            table.insertAdjacentHTML("afterbegin",
 | 
			
		||||
            `
 | 
			
		||||
              <tr>
 | 
			
		||||
                <td>${key}</td>
 | 
			
		||||
                <td>${value}</td>
 | 
			
		||||
              </tr>
 | 
			
		||||
            `);
 | 
			
		||||
          }
 | 
			
		||||
          table.insertAdjacentHTML("afterbegin",
 | 
			
		||||
            `
 | 
			
		||||
              <thead>
 | 
			
		||||
                <th>Description</th>
 | 
			
		||||
                <th>Value</th>
 | 
			
		||||
              </thead>
 | 
			
		||||
            `)
 | 
			
		||||
          bibliographicData.appendChild(table);
 | 
			
		||||
          results.jsList.createTextDetails(metaDataObject);
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    };
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										28
									
								
								web/app/templates/interactions/analysis.html.j2
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										28
									
								
								web/app/templates/interactions/analysis.html.j2
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,28 @@
 | 
			
		||||
<!-- WIP. The user should be able to call several analysis tools from here.-->
 | 
			
		||||
 | 
			
		||||
<div class="col s12 m2 l2" id="anlysis">
 | 
			
		||||
  <h6 style="margin-top: 0px;">Analysis</h6>
 | 
			
		||||
  <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
  <div class="row">
 | 
			
		||||
    <div class="col s12">
 | 
			
		||||
      <button id="placeholder1"
 | 
			
		||||
              class="waves-effect
 | 
			
		||||
              waves-light
 | 
			
		||||
              btn-flat
 | 
			
		||||
              disabled"
 | 
			
		||||
              type="submit">Action One
 | 
			
		||||
        <i class="material-icons left">cloud</i>
 | 
			
		||||
      </button>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="col s12">
 | 
			
		||||
      <button id="placeholder2"
 | 
			
		||||
              class="waves-effect
 | 
			
		||||
              waves-light
 | 
			
		||||
              btn-flat
 | 
			
		||||
              disabled"
 | 
			
		||||
              type="submit">Action Two
 | 
			
		||||
        <i class="material-icons left">add</i>
 | 
			
		||||
      </button>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
							
								
								
									
										28
									
								
								web/app/templates/interactions/cite.html.j2
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										28
									
								
								web/app/templates/interactions/cite.html.j2
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,28 @@
 | 
			
		||||
<!-- WIP. The user should be able to cite nopaque and the current service easily using these buttons.-->
 | 
			
		||||
 | 
			
		||||
<div class="col s12 m2 l2" id="cite">
 | 
			
		||||
  <h6 style="margin-top: 0px;">Cite Nopaque</h6>
 | 
			
		||||
  <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
  <div class="row">
 | 
			
		||||
    <div class="col s12">
 | 
			
		||||
      <button id="placeholder1"
 | 
			
		||||
              class="waves-effect
 | 
			
		||||
              waves-light
 | 
			
		||||
              btn-flat
 | 
			
		||||
              disabled"
 | 
			
		||||
              type="submit">Action One
 | 
			
		||||
        <i class="material-icons left">cloud</i>
 | 
			
		||||
      </button>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="col s12">
 | 
			
		||||
      <button id="placeholder2"
 | 
			
		||||
              class="waves-effect
 | 
			
		||||
              waves-light
 | 
			
		||||
              btn-flat
 | 
			
		||||
              disabled"
 | 
			
		||||
              type="submit">Action Two
 | 
			
		||||
        <i class="material-icons left">add</i>
 | 
			
		||||
      </button>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
							
								
								
									
										32
									
								
								web/app/templates/interactions/create.html.j2
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										32
									
								
								web/app/templates/interactions/create.html.j2
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,32 @@
 | 
			
		||||
<!-- HTML to allow the user to create sub results from the current query
 | 
			
		||||
results.-->
 | 
			
		||||
 | 
			
		||||
<div class="col s12 m2 l2" id="create">
 | 
			
		||||
  <h6 style="margin-top: 0px;">Create</h6>
 | 
			
		||||
  <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
  <div class="row">
 | 
			
		||||
    <div class="col s12">
 | 
			
		||||
      <div class="switch">
 | 
			
		||||
        Sub-Results creation:
 | 
			
		||||
        <label>
 | 
			
		||||
          Off
 | 
			
		||||
          <input disabled
 | 
			
		||||
                 type="checkbox"
 | 
			
		||||
                 id="add-to-sub-results">
 | 
			
		||||
          <span class="lever"></span>
 | 
			
		||||
          On
 | 
			
		||||
        </label>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="col s12 hide" id="sub-results-match-ids-div">
 | 
			
		||||
      <div class="input-field">
 | 
			
		||||
        <p><span id="nr-marked-matches"></span> matches marked
 | 
			
		||||
          for Sub-Results:</p>
 | 
			
		||||
        <textarea id="sub-results-match-ids"
 | 
			
		||||
                  class="materialize-textarea"
 | 
			
		||||
                  disabled>
 | 
			
		||||
        </textarea>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
							
								
								
									
										17
									
								
								web/app/templates/interactions/display.html.j2
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										17
									
								
								web/app/templates/interactions/display.html.j2
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,17 @@
 | 
			
		||||
<!-- HTML to allow the user to change how the results are being displayed.-->
 | 
			
		||||
 | 
			
		||||
<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>
 | 
			
		||||
							
								
								
									
										46
									
								
								web/app/templates/interactions/export.html.j2
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										46
									
								
								web/app/templates/interactions/export.html.j2
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,46 @@
 | 
			
		||||
<!-- HTML to allow the user to export the current querey results in full or
 | 
			
		||||
the selected sub results.-->
 | 
			
		||||
 | 
			
		||||
<div class="col s12 m2 l2" id="export">
 | 
			
		||||
  <h6 style="margin-top: 0px;">Export</h6>
 | 
			
		||||
  <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
  <div class="row">
 | 
			
		||||
    <div class="col s12">
 | 
			
		||||
      <button class="waves-effect
 | 
			
		||||
              waves-light
 | 
			
		||||
              btn-flat
 | 
			
		||||
              disabled"
 | 
			
		||||
              type="submit"
 | 
			
		||||
              id="results-create">Create Results
 | 
			
		||||
        <i class="material-icons left">build</i>
 | 
			
		||||
      </button>
 | 
			
		||||
      <button id="query-results-export"
 | 
			
		||||
              class="waves-effect
 | 
			
		||||
              waves-light
 | 
			
		||||
              btn-flat
 | 
			
		||||
              hide"
 | 
			
		||||
              type="submit">Results
 | 
			
		||||
        <i class="material-icons left">file_download</i>
 | 
			
		||||
      </button>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="col s12">
 | 
			
		||||
      <button class="waves-effect
 | 
			
		||||
              waves-light
 | 
			
		||||
              btn-flat
 | 
			
		||||
              hide
 | 
			
		||||
              disabled"
 | 
			
		||||
              type="submit"
 | 
			
		||||
              id="sub-results-create">Create Sub-Results
 | 
			
		||||
        <i class="material-icons left">build</i>
 | 
			
		||||
      </button>
 | 
			
		||||
      <button id="sub-results-export"
 | 
			
		||||
              class="waves-effect
 | 
			
		||||
              waves-light
 | 
			
		||||
              btn-flat
 | 
			
		||||
              hide"
 | 
			
		||||
              type="submit">Sub-Results
 | 
			
		||||
        <i class="material-icons left">file_download</i>
 | 
			
		||||
      </button>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
							
								
								
									
										44
									
								
								web/app/templates/interactions/infos.html.j2
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										44
									
								
								web/app/templates/interactions/infos.html.j2
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,44 @@
 | 
			
		||||
<!-- HTML for showing infos about the current query or result. Also gives
 | 
			
		||||
the user the abiltiy to access the meta data for the current query or
 | 
			
		||||
result.-->
 | 
			
		||||
 | 
			
		||||
<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>
 | 
			
		||||
      {% if not imported %}
 | 
			
		||||
      <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>
 | 
			
		||||
      {% endif %}
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
@@ -1,7 +1,7 @@
 | 
			
		||||
{% macro show_metadata(query_metadata) %}
 | 
			
		||||
 | 
			
		||||
<div class="col s12">
 | 
			
		||||
  <table class="responsive-table highlight">
 | 
			
		||||
  <table class="highlight">
 | 
			
		||||
    <thead>
 | 
			
		||||
      <tr>
 | 
			
		||||
        <th>Metadata Description</th>
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										12
									
								
								web/app/templates/modals/analysis_init.html.j2
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										12
									
								
								web/app/templates/modals/analysis_init.html.j2
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,12 @@
 | 
			
		||||
<!-- Analysis init modal. User feedback showing that the analysis session is
 | 
			
		||||
loading. -->
 | 
			
		||||
 | 
			
		||||
<div class="modal no-autoinit" id="init-display">
 | 
			
		||||
  <div class="modal-content">
 | 
			
		||||
    <h4>Initializing your corpus analysis session...</h4>
 | 
			
		||||
    <div class="error-container hide show-on-error"></div>
 | 
			
		||||
    <div class="hide progress show-while-waiting">
 | 
			
		||||
      <div class="indeterminate"></div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
							
								
								
									
										77
									
								
								web/app/templates/modals/context_modal.html.j2
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										77
									
								
								web/app/templates/modals/context_modal.html.j2
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,77 @@
 | 
			
		||||
<!-- Modal showing detailed context info for 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>
 | 
			
		||||
        {% if not imported %}
 | 
			
		||||
        <div class="col s12 m6 l6">
 | 
			
		||||
          <div class="section">
 | 
			
		||||
            <h6 style="margin-top: 0px;">Create</h6>
 | 
			
		||||
            <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
            <div class="col s12">
 | 
			
		||||
              Add to Sub Results
 | 
			
		||||
              <div class="secondary-content right" id="add-to-sub-results-from-inspect">
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
        {% endif %}
 | 
			
		||||
      </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>
 | 
			
		||||
							
								
								
									
										54
									
								
								web/app/templates/modals/export_query_results.html.j2
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										54
									
								
								web/app/templates/modals/export_query_results.html.j2
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,54 @@
 | 
			
		||||
<!-- Export query results modal. Allos the user to download the results in
 | 
			
		||||
different file formats. WIP -->
 | 
			
		||||
 | 
			
		||||
<div id="query-results-download-modal"
 | 
			
		||||
     class="modal modal-fixed-footer no-autoinit">
 | 
			
		||||
  <div class="modal-content">
 | 
			
		||||
    <h4>Download your results</h4>
 | 
			
		||||
    <p>Download your results or sub results in different file formats like JSON
 | 
			
		||||
       or CSV, so you can reuse them in Excel or other software.
 | 
			
		||||
       You can also simply publish your results as raw data using one of these
 | 
			
		||||
       formats. We recommend JSON!
 | 
			
		||||
    </p>
 | 
			
		||||
    <table>
 | 
			
		||||
      <tr>
 | 
			
		||||
        <td>JSON</td>
 | 
			
		||||
        <td>
 | 
			
		||||
          <a class="btn waves-effect waves-light" id="download-results-json">
 | 
			
		||||
             Download
 | 
			
		||||
            <i class="material-icons right">file_download</i>
 | 
			
		||||
          </a>
 | 
			
		||||
        </td>
 | 
			
		||||
      </tr>
 | 
			
		||||
      <tr>
 | 
			
		||||
        <td>CSV</td>
 | 
			
		||||
        <td>
 | 
			
		||||
          <a class="btn waves-effect waves-light disabled"
 | 
			
		||||
             id="download-results-csv">
 | 
			
		||||
             Download
 | 
			
		||||
            <i class="material-icons right">file_download</i>
 | 
			
		||||
          </a>
 | 
			
		||||
        </td>
 | 
			
		||||
      </tr>
 | 
			
		||||
      <tr>
 | 
			
		||||
        <td>EXCEL</td>
 | 
			
		||||
        <td>
 | 
			
		||||
          <a class="btn waves-effect waves-light disabled">Download
 | 
			
		||||
            <i class="material-icons right">file_download</i>
 | 
			
		||||
          </a>
 | 
			
		||||
        </td>
 | 
			
		||||
      </tr>
 | 
			
		||||
      <tr>
 | 
			
		||||
        <td>HTML</td>
 | 
			
		||||
        <td>
 | 
			
		||||
          <a class="btn waves-effect waves-light disabled">Download
 | 
			
		||||
            <i class="material-icons right">file_download</i>
 | 
			
		||||
          </a>
 | 
			
		||||
        </td>
 | 
			
		||||
      </tr>
 | 
			
		||||
    </table>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="modal-footer">
 | 
			
		||||
    <a href="#!" class="modal-close waves-effect waves-light red btn">Close</a>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
							
								
								
									
										22
									
								
								web/app/templates/modals/show_metadata.html.j2
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										22
									
								
								web/app/templates/modals/show_metadata.html.j2
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,22 @@
 | 
			
		||||
<!-- Modal showing the meta data for the current query results or the imported
 | 
			
		||||
results -->
 | 
			
		||||
 | 
			
		||||
{% import "macros/query_result_macro.html.j2" as metadata %}
 | 
			
		||||
<div id="meta-data-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" id="meta-data-modal-content">
 | 
			
		||||
    </div>
 | 
			
		||||
  {% endif %}
 | 
			
		||||
  <div class="modal-footer">
 | 
			
		||||
    <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
							
								
								
									
										12
									
								
								web/app/templates/modals/show_text_details.html.j2
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										12
									
								
								web/app/templates/modals/show_text_details.html.j2
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,12 @@
 | 
			
		||||
<!-- Modal to show all metadata of one text/corpus file. Used in conjunction
 | 
			
		||||
with the show_meta_data.html.j2 template.-->
 | 
			
		||||
 | 
			
		||||
<div id="modal-text-details" class="modal modal-fixed-footer">
 | 
			
		||||
  <div class="modal-content">
 | 
			
		||||
    <h4>Bibliographic data</h4>
 | 
			
		||||
    <p id="bibliographic-data"></p>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="modal-footer">
 | 
			
		||||
    <a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
@@ -3,6 +3,7 @@
 | 
			
		||||
{% set headline = ' ' %}
 | 
			
		||||
 | 
			
		||||
{% set full_width = True %}
 | 
			
		||||
{% set imported = True %}
 | 
			
		||||
 | 
			
		||||
{% block page_content %}
 | 
			
		||||
 | 
			
		||||
@@ -34,169 +35,21 @@
 | 
			
		||||
  <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>
 | 
			
		||||
        {% 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>
 | 
			
		||||
 | 
			
		||||
<!-- 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>
 | 
			
		||||
<!-- Modals -->
 | 
			
		||||
{% include 'modals/show_metadata.html.j2' %}
 | 
			
		||||
{% include 'modals/show_text_details.html.j2' %}
 | 
			
		||||
{% include 'modals/context_modal.html.j2' %}
 | 
			
		||||
 | 
			
		||||
<!-- 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>
 | 
			
		||||
@@ -208,7 +61,6 @@
 | 
			
		||||
  // ###### 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
 | 
			
		||||
@@ -231,7 +83,6 @@
 | 
			
		||||
  // ###### 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");
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										21
									
								
								web/app/templates/tables/query_results.html.j2
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										21
									
								
								web/app/templates/tables/query_results.html.j2
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,21 @@
 | 
			
		||||
<!-- Table showing the query results of the current query or the imported
 | 
			
		||||
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>
 | 
			
		||||
		Reference in New Issue
	
	Block a user