Add match_count represnetation for the user.

2024-11-15 01:05:42 +00:00 · 2020-10-05 16:55:02 +02:00 · 2020-10-05 16:55:02 +02:00 · 8c707fa81c
commit 8c707fa81c
parent f195b72ebd
9 changed files with 161 additions and 228 deletions
--- a/web/app/static/js/modules/corpus_analysis/view/callbacks.js
+++ b/web/app/static/js/modules/corpus_analysis/view/callbacks.js
@ -75,8 +75,8 @@ function queryDataPreparingCallback(resultsList, detail) {
    '#interactions-menu',
    '#recieved-match-count',
    '#total-match-count',
-    '#text-lookup-count',
    '#text-lookup-titles',
+    '#text-lookup-count',
    '#query-results-user-feedback',
    '#query-progress-bar',
    '#query-results-create',
@ -84,16 +84,16 @@ function queryDataPreparingCallback(resultsList, detail) {
    '#nr-marked-matches',
   ]);
  // show or enable some things for the user
-  resultsList.interactionsMenu.classList.toggle('hide', false)
+  resultsList.interactionsMenu.classList.toggle('hide', false);
  resultsList.queryResultsUserFeedback.classList.toggle('hide', false);
  resultsList.queryProgressBar.classList.toggle('hide', false);
+  resultsList.showCorpusFiles.classList.toggle('disabled', true);
  /**
   * Set some initial values for the user feedback
   * or reset values for new issued query
   */
  resultsList.recievedMatchCount.textContent = 0;
  resultsList.totalMatchCount.textContent = results.data.match_count;
-  resultsList.textLookupTitles.textContent = '';
  resultsList.textLookupCount.textContent = 0;
  resultsList.nrMarkedMatches.textContent = 0;
  resultsList.subResultsIndexesDisplay.textContent = '';
@ -125,11 +125,6 @@ function queryDataRecievingCallback(resultsList, detail) {
    resultsList.recievedMatchCount.textContent = results.data.matches.length;
    resultsList.queryProgressBar.firstElementChild.style.width = `${client.requestQueryProgress}%`;
    resultsList.textLookupCount.textContent = `${Object.keys(results.data.text_lookup).length}`;
-  let titles = new Array();
-  for (let [key, value] of Object.entries(results.data.text_lookup)) {
-    titles.push(`${value.title} (${value.publishing_year})`);
-  }
-  resultsList.textLookupTitles.textContent = `${titles.join(', ')}`;
    // updating table on finished item creation callback via createResultRowElement
    resultsList.update();
    resultsList.changeHitsPerPage(client, results);
@ -151,11 +146,6 @@ function queryDataRecievingCallback(resultsList, detail) {
    resultsList.recievedMatchCount.textContent = results.data.matches.length;
    resultsList.queryProgressBar.firstElementChild.style.width = `${client.requestQueryProgress}%`;
    resultsList.textLookupCount.textContent = `${Object.keys(results.data.text_lookup).length}`;
-    let titles = new Array();
-    for (let [key, value] of Object.entries(results.data.text_lookup)) {
-      titles.push(`${value.title} (${value.publishing_year})`);
-    }
-    resultsList.textLookupTitles.textContent = `${titles.join(', ')}`;
    // updating table on finished item creation callback via createResultRowElement
    resultsList.update();
    resultsList.changeHitsPerPage(client, results);
@ -170,6 +160,7 @@ function queryDataRecievedCallback(resultsList, detail) {
  resultsList.queryProgressBar.classList.toggle('hide');
  // reset bar progress for next query
  resultsList.queryProgressBar.firstElementChild.style.width = '0%';
+  resultsList.showCorpusFiles.classList.toggle('disabled');
 }

 /**
--- a/web/app/static/js/modules/corpus_analysis/view/eventListeners.js
+++ b/web/app/static/js/modules/corpus_analysis/view/eventListeners.js
@ -93,6 +93,63 @@ function showMetaData(resultsList, results) {
  };
 }

+/**
+ * The following event listener handles the button showing infos about matches
+ * and their corresponding corpus files
+ */
+
+function showCorpusFiles(resultsList, results) {
+  resultsList.showCorpusFiles.onclick = () => {
+    resultsList.showCorpusFilesModalContent.innerHTML = '';
+    let htmlString = `
+    <div id="corpus-file-table">
+      <ul class="pagination paginationTop"></ul>
+      <table class="responsive-table highlight">
+        <thead>
+          <tr>
+            <th class="sort" data-sort="title">Title</th>
+            <th class="sort" data-sort="year">Year</th>
+            <th class="sort" data-sort="match-count">Match count in this text</th>
+          </tr>
+        </thead>
+        <tbody class="list">
+    `
+    for (let [key, value] of Object.entries(results.data.text_lookup)) {
+      htmlString += `
+        <tr>
+          <td class="title">${value.title}</td>
+          <td class="year">${value.publishing_year}</td>
+          <td class="match-count">${value.match_count}</td>
+        </tr>
+      `
+    }
+    htmlString += `
+      </tbody>
+      </table>
+      <ul class="pagination paginationBottom"></ul>
+    </div>
+      `
+    resultsList.showCorpusFilesModalContent.insertAdjacentHTML('afterbegin', htmlString);
+    resultsList.showCorpusFilesModal.open();
+    let options = {
+      page: 10,
+      pagination: [{
+        name: "paginationTop",
+        paginationClass: "paginationTop",
+        innerWindow: 8,
+        outerWindow: 1
+      }, {
+        paginationClass: "paginationBottom",
+        innerWindow: 8,
+        outerWindow: 1
+      }],
+      valueNames: ["title", "year", "match-count"],
+    };
+    let corpusFileTable = new List('corpus-file-table', options);
+    console.log(corpusFileTable);
+  }
+}
+
 /**
 * Checks if resultsList.exportFullInspectContext switch is changed.
 * If it has been changed reset all Download buttons.
@ -207,6 +264,7 @@ export {
  actionButtons,
  displayOptions,
  showMetaData,
+  showCorpusFiles,
  exportFullContextSwitch,
  createFullResults,
  createSubResults,
--- a/web/app/static/js/nopaque.callbacks.js
+++ b/web/app/static/js/nopaque.callbacks.js
@ -1,182 +0,0 @@
-// This callback is called on a socket.on "corpus_analysis_send_meta_data".
-// Handels incoming corpus metadata
-function recvMetaData(payload) {
-  results.metaData.init(payload)
-  console.log("Metada recieved:", results.metaData);
-}
-
-// This callback is called in socket.on "corpus_analysis_get_match_with_full_context" but
-// only if the response.type is "sub-results".
-// Saves the incoming inspect match results into results.subResultsData.
-function saveSubResultsChoices(response) {
-  console.log("Recieving results for export.");
-  if (response.type === "sub-results") {
-    results.subResultsData.init();
-    results.subResultsData.matches.push(...response.payload.matches);
-    results.subResultsData.addData(response.payload.cpos_lookup, "cpos_lookup");
-    results.subResultsData.addData(response.payload.text_lookup, "text_lookup");
-    results.subResultsData.addData(results.metaData);
-    results.subResultsData.query = results.data.query;
-    results.subResultsData.corpus_type = response.type;
-    results.subResultsData.match_count = [...response.payload.matches].length;
-    results.subResultsData.cpos_ranges = response.payload.cpos_ranges;
-    // hides create element after all results are revieved
-    subResultsCreateElement.classList.add("hide");
-    // shows export element after create element hs been hidden
-    subResultsExportElement.classList.remove("hide", "btn-flat");
-    subResultsExportElement.classList.add("pulse", "btn-small");
-    setTimeout(() => {
-      subResultsExportElement.classList.remove("pulse", "btn-small");
-      subResultsExportElement.classList.add("btn-flat");
-      clearTimeout();
-    }, 3000)
-    // Resets the subResultsCreateElement (removing spinner with setting innerText)
-    subResultsCreateElement.innerText = "Create Sub-Results";
-    subResultsCreateElement.insertAdjacentHTML("beforeend", `<i class="material-icons left">build</i>`);
-    // reactivate resultsCreateElement
-    resultsCreateElement.classList.remove("disabled");
-  } else if (response.type === "results") {
-    results.resultsData.init();
-    results.resultsData.matches.push(...response.payload.matches);
-    results.resultsData.addData(response.payload.cpos_lookup, "cpos_lookup");
-    results.resultsData.addData(response.payload.text_lookup, "text_lookup");
-    results.resultsData.addData(results.metaData);
-    results.resultsData.query = results.data.query;
-    results.resultsData.corpus_type = response.type;
-    results.resultsData.match_count = [...response.payload.matches].length;
-    results.resultsData.cpos_ranges = response.payload.cpos_ranges;
-    // hides create element after all results are revieved
-    resultsCreateElement.classList.add("hide");
-    // shows export element after create element hs been hidden
-    resultsExportElement.classList.remove("hide", "btn-flat");
-    resultsExportElement.classList.add("pulse", "btn-small");
-    setTimeout(() => {
-      resultsExportElement.classList.remove("pulse", "btn-small");
-      resultsExportElement.classList.add("btn-flat");
-      clearTimeout();
-    }, 3000)
-    // Resets the resultsCreateElement (removing spinner with setting innerText)
-    resultsCreateElement.innerText = "Create Results";
-    resultsCreateElement.insertAdjacentHTML("beforeend", `<i class="material-icons left">build</i>`);
-    // reactivate subResultsCreateElement
-    subResultsCreateElement.classList.remove("disabled");
-  }
-  // reactivate inspect
-  results.jsList.activateInspect();
-  activateInspectInteraction.setCallback("noCheck",
-                                          results.jsList.activateInspect,
-                                          results.jsList);
-  // set resultCreationRunning to flase
-  resultCreationRunning = false;
-}
-
-// This callback is called on socket.on "query".
-// Does some hiding, showing disabling etc.
-function querySetup(payload) {
-  // some hiding and resetting
-  let textarea = subResultsIdListElement.getElementsByTagName("textarea")[0];
-  textarea.innerText = "";
-  M.textareaAutoResize(textarea);
-  nrMarkedMatches.innerText = 0;
-  results.jsList.addToSubResultsStatus = {};
-  results.jsList.addToSubResultsIdsToShow = new Set();
-  resultsExportElement.classList.add("disabled");
-  addToSubResultsElement.setAttribute("disabled", "");
-  queryResultsDeterminateElement.style.width = "0%";
-  queryResultsProgressElement.classList.remove("hide");
-  queryResultsUserFeedbackElement.classList.remove("hide");
-  resultsCreateElement.classList.add("disabled");
-  resultsCreateElement.classList.remove("hide");
-  resultsExportElement.classList.add("hide");
-  // some initial values
-  receivedMatchCountElement.innerText = "0";
-  textLookupCountElement.innerText = "0";
-  matchCountElement.innerText = payload.match_count;
-  textTitlesElement.innterText = "";
-  // always re initializes results to delete old results from it
-  // this has to be done here again because the last chunk from old results was still being recieved
-  results.clearAll()
-  // Get query string again
-  results.data.getQueryStr(queryFormElement);
-  results.data.match_count = payload.match_count;
-}
-
-// This callback is called on socket.on "query_results"
-// this handels the incoming result chunks
-function queryRenderResults(payload, imported=false) {
-  let resultItems;  // array of built html result items row element
-  // This is called when results are transmitted and being recieved
-  console.log("Current recieved chunk:", payload.chunk);
-  if (payload.chunk.cpos_ranges == true) {
-    results.data["cpos_ranges"] = true;
-  } else {
-    results.data["cpos_ranges"] = false;
-  }
-  // building the result list js list from incoming chunk
-  resultItems = []; // list for holding every row item
-  // get infos for full match row
-  for (let [index, match] of payload.chunk.matches.entries()) {
-    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);
-      }
-      helperQueryRenderResults(payload);
-      if (progress === 100) {
-        resultsCreateElement.classList.remove("disabled");
-        queryResultsProgressElement.classList.add("hide");
-        queryResultsUserFeedbackElement.classList.add("hide");
-        resultsExportElement.classList.remove("disabled");
-        addToSubResultsElement.removeAttribute("disabled");
-        // inital expert mode check and sub results activation
-        results.jsList.activateInspect();
-        if (addToSubResultsElement.checked) {
-          results.jsList.activateAddToSubResults();
-        }
-        if (expertModeSwitchElement.checked) {
-          results.jsList.expertModeOn("query-display");
-        }
-      }
-    });
-  } else if (imported) {
-    results.jsList.add(resultItems, (items) => {
-      for (let item of items) {
-        item.elm = results.jsList.createResultRowElement(item, payload.chunk,
-                                                         true);
-      }
-      helperQueryRenderResults(payload);
-      progress = 100;
-      results.jsList.activateInspect();
-      if (expertModeSwitchElement.checked) {
-        results.jsList.expertModeOn("query-display");
-      }
-    });
-  }
-}
-
-function helperQueryRenderResults (payload) {
-  // updating table on finished item creation callback via createResultRowElement
-  results.jsList.update();
-  results.jsList.changeContext(); // sets lr context on first result load
-  // incorporating new chunk results into full results
-  results.data.matches.push(...payload.chunk.matches);
-  results.data.addData(payload.chunk.cpos_lookup, "cpos_lookup");
-  results.data.addData(payload.chunk.text_lookup, "text_lookup");
-  // complete metaData
-  // results.metaData.add();
-  // show user current and total match count
-  receivedMatchCountElement.innerText = `${results.data.matches.length}`;
-  textLookupCountElement.innerText = `${Object.keys(results.data.text_lookup).length}`;
-  let titles = new Array();
-  for (let [key, value] of Object.entries(results.data.text_lookup)) {
-    titles.push(`${value.title} (${value.publishing_year})`);
-  };
-  textTitlesElement.innerText = `${titles.join(", ")}`;
-  console.log("Results recieved:", results.data);
-  // upate progress status
-  progress = payload.progress;  // global declaration
-}
--- a/web/app/static/json_schema/nopaque_cqi_py_results_schema.json
+++ b/web/app/static/json_schema/nopaque_cqi_py_results_schema.json
@ -143,6 +143,9 @@
                },
                "title": {
                    "type": "string"
+                },
+                "match_count": {
+                    "type": "integer"
                }
            },
            "required": [
--- a/web/app/templates/corpora/analyse_corpus.html.j2
+++ b/web/app/templates/corpora/analyse_corpus.html.j2
@ -63,6 +63,7 @@
 {% include 'modals/analysis_init.html.j2' %}
 {% include 'modals/export_query_results.html.j2' %}
 {% include 'modals/context_modal.html.j2' %}
+{% include 'modals/show_corpus_files.html.j2' %}

 <!-- import modules -->
 <script type="module">
@ -126,6 +127,7 @@ import {
  actionButtons,
  displayOptions,
  showMetaData,
+  showCorpusFiles,
  exportFullContextSwitch,
  createFullResults,
  createSubResults,
@ -254,6 +256,15 @@ document.addEventListener("DOMContentLoaded", () => {
    ['#query-results-download-modal', {}],
    '#query-results-table',
    '#show-meta-data',
+    '#show-corpus-files',
+    '#show-corpus-files-modal-content',
+    ['#show-corpus-files-modal', {
+       'preventScrolling': false,
+       'opacity': 0.0,
+       'dismissible': false,
+       'onOpenEnd': (() => {document.querySelector(".modal-overlay").remove()})
+      }
+    ],
    '#sub-results-create',
    '#sub-results-export',
    '#export-full-inspect-context',
@ -265,6 +276,7 @@ document.addEventListener("DOMContentLoaded", () => {
  actionButtons(resultsList, results, client);
  displayOptions(resultsList, results, client);
  showMetaData(resultsList, results);
+  showCorpusFiles(resultsList, results);
  // Still vanilla event listeners, but focused on result download and export
  exportFullContextSwitch(resultsList);
  createFullResults(resultsList, results);
--- a/web/app/templates/interactions/infos.html.j2
+++ b/web/app/templates/interactions/infos.html.j2
@ -16,24 +16,40 @@ result.-->
        <i class="material-icons left">info_outline</i>
      </button>
    </div>
+    <div class="col s12">
+      <button id="loading-matches"
+              class="waves-effect
+                     waves-light
+                     btn-flat
+                     flat-interaction
+                     disabled black-text"
+              style="color: #000 !important;"
+              type="submit">
+        <i class="material-icons left">dvr</i>
+        <span id="recieved-match-count"></span>/
+        <span id="total-match-count"></span>
+        matches loaded
+      </button>
+    </div>
    <div class="col s12">
      <div class="progress hide" id="query-progress-bar">
        <div class="determinate"></div>
      </div>
-      <p>
-        <span id="recieved-match-count">
-        </span> of
-        <span id="total-match-count"></span>
-        matches loaded.
-        <br>
-        <br>
-        Matches occured in
+    </div>
+    <div class="col s12">
+      <button id="show-corpus-files"
+              class="waves-effect
+                     waves-light
+                     btn-flat
+                     flat-interaction"
+              type="submit">
+        <i class="material-icons left">info_outline</i>
+        Matches in
        <span id="text-lookup-count"></span>
-        corpus files:
-        <br>
-        <span id=text-lookup-titles></span>
-      </p>
-      <br>
+        files
+      </button>
+    </div>
+    <div class="col s12">
      <p class="hide" id="query-results-user-feedback">
        <i class="material-icons tiny">help</i>
        Server is sending your results.
--- a/web/app/templates/modals/show_corpus_files.html.j2
+++ b/web/app/templates/modals/show_corpus_files.html.j2
@ -0,0 +1,19 @@
+<!-- Modal showing the corpus files for the current query results including
+title ant match count per corpus file. -->
+
+<div id="show-corpus-files-modal" class="modal bottom-sheet">
+  <div class="container">
+    <div class="row">
+      <div class="section">
+        <div class="col s12 right-align">
+          <a href="#!" class="modal-close waves-effect waves-green btn red"
+             style="left: 5px;">Close</a>
+        </div>
+      </div>
+      <div class="col s12 modal-content" id="show-corpus-files-modal-content"></div>
+      <div class="col s12 modal-footer">
+        <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
+      </div>
+    </div>
+  </div>
+</div>
--- a/web/app/templates/modals/show_metadata.html.j2
+++ b/web/app/templates/modals/show_metadata.html.j2
@ -2,14 +2,18 @@
 results -->

 <div id="meta-data-modal" class="modal bottom-sheet">
+  <div class="container">
+    <div class="row">
      <div class="section">
        <div class="col s12 right-align">
+          <a href="#!" class="modal-close waves-effect waves-green btn red"
+          style="left: 5px;">Close</a>
+        </div>
+      </div>
+      <div class="col s12 modal-content" id="meta-data-modal-content"></div>
+      <div class="col s12 modal-footer">
        <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
      </div>
    </div>
-    <div class="modal-content" id="meta-data-modal-content">
-    </div>
-  <div class="modal-footer">
-    <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
  </div>
 </div>
--- a/web/app/templates/query_results/inspect.html.j2
+++ b/web/app/templates/query_results/inspect.html.j2
@ -55,6 +55,7 @@

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


@ -111,6 +112,7 @@ import {
  actionButtons,
  displayOptions,
  showMetaData,
+  showCorpusFiles,
 } from '../../static/js/modules/corpus_analysis/view/eventListeners.js';
 /**
 * Second Phase:
@ -182,6 +184,15 @@ document.addEventListener("DOMContentLoaded", () => {
    ],
    '#query-results-table',
    '#show-meta-data',
+    '#show-corpus-files',
+    '#show-corpus-files-modal-content',
+    ['#show-corpus-files-modal', {
+       'preventScrolling': false,
+       'opacity': 0.0,
+       'dismissible': false,
+       'onOpenEnd': (() => {document.querySelector(".modal-overlay").remove()})
+      }
+    ],
    '#sub-results-create',
    '#sub-results-export',
  ]);
@ -199,6 +210,7 @@ document.addEventListener("DOMContentLoaded", () => {
  actionButtons(resultsList, results, client);
  displayOptions(resultsList, results, client);
  showMetaData(resultsList, results);
+  showCorpusFiles(resultsList, results);
  // Enable scroll to Top functionality.
  scrollToTop('#headline', '#menu-scroll-to-top-div');
 });