Add match_count represnetation for the user.

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 = '';
@@ -121,23 +121,18 @@ function queryDataRecievingCallback(resultsList, detail) {
                                                       client);
       }
     });
-  // update user feedback about query status
+    // update user feedback about query status
-  resultsList.recievedMatchCount.textContent = results.data.matches.length;
+    resultsList.recievedMatchCount.textContent = results.data.matches.length;
-  resultsList.queryProgressBar.firstElementChild.style.width = `${client.requestQueryProgress}%`;
+    resultsList.queryProgressBar.firstElementChild.style.width = `${client.requestQueryProgress}%`;
-  resultsList.textLookupCount.textContent = `${Object.keys(results.data.text_lookup).length}`;
+    resultsList.textLookupCount.textContent = `${Object.keys(results.data.text_lookup).length}`;
-  let titles = new Array();
+    // updating table on finished item creation callback via createResultRowElement
-  for (let [key, value] of Object.entries(results.data.text_lookup)) {
+    resultsList.update();
-    titles.push(`${value.title} (${value.publishing_year})`);
+    resultsList.changeHitsPerPage(client, results);
-  }
+    resultsList.changeContext();
-  resultsList.textLookupTitles.textContent = `${titles.join(', ')}`;
+    //activate expertMode of switch is checked
-  // updating table on finished item creation callback via createResultRowElement
+    if (resultsList.displayOptionsFormExpertMode.checked) {
-  resultsList.update();
+      resultsList.expertModeOn('query-display', results);
-  resultsList.changeHitsPerPage(client, results);
+    }
-  resultsList.changeContext();
-  //activate expertMode of switch is checked
-  if (resultsList.displayOptionsFormExpertMode.checked) {
-    resultsList.expertModeOn('query-display', results);
-  }
   } else if (!client.dynamicMode) {
     resultsList.add(resultItems, (items) => {
       for (let item of items) {
@@ -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');
 }
 
 /**

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,

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
-}

web/app/static/json_schema/nopaque_cqi_py_results_schema.json

@@ -143,6 +143,9 @@
                 },
                 "title": {
                     "type": "string"
+                },
+                "match_count": {
+                    "type": "integer"
                 }
             },
             "required": [

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);

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>
+    </div>
-        <span id="recieved-match-count">
+    <div class="col s12">
-        </span> of
+      <button id="show-corpus-files"
-        <span id="total-match-count"></span>
+              class="waves-effect
-        matches loaded.
+                     waves-light
-        <br>
+                     btn-flat
-        <br>
+                     flat-interaction"
-        Matches occured in
+              type="submit">
+        <i class="material-icons left">info_outline</i>
+        Matches in
         <span id="text-lookup-count"></span>
-        corpus files:
+        files
-        <br>
+      </button>
-        <span id=text-lookup-titles></span>
+    </div>
-      </p>
+    <div class="col s12">
-      <br>
       <p class="hide" id="query-results-user-feedback">
         <i class="material-icons tiny">help</i>
         Server is sending your results.

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>

web/app/templates/modals/show_metadata.html.j2

@@ -2,14 +2,18 @@
 results -->
 
 <div id="meta-data-modal" class="modal bottom-sheet">
-  <div class="section">
+  <div class="container">
-    <div class="col s12 right-align">
+    <div class="row">
-      <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
+      <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>
-    <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>

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');
 });