Update

app/templates/corpora/analyse_corpus.html.j2

@@ -238,7 +238,7 @@ server side -->
   var exportModal;
   // create some global variables
   var result;  // will gradually be filled with JSON result chunks of a query
-  var resultList;  // the list.js new ResultList object displaying the results
+  var resultsList;  // the list.js new ResultList object displaying the results
   var queryFinished;  // bool flag that shows if query is finished or not
   var analysisClientStatus;  // Object holding: {<sid>: 'running'|'idle'}
   var sessionId;  // the clients current session id

app/templates/corpora/pj_analyse_corpus.html.j2

@@ -195,28 +195,54 @@
   </div>
 </div>
 
+<!-- Context modal used for detailed information about one match -->
+<div id="context-modal" class="modal modal-fixed-footer">
+  <div class="modal-content">
+    <h4>Match context and information</h4>
+    <div id="context-modal-loading">
+      <div class="progress">
+        <div class="indeterminate"></div>
+      </div>
+    </div>
+    <div id="context-modal-ready" class="hide">
+      <div id="context-results"></div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <a href="#!" class="left waves-effect waves-light btn">Export</a>
+    <a href="#!" class="modal-close waves-effect waves-light red btn">Close</a>
+  </div>
+</div>
+
 
 <script src="{{ url_for('static', filename='js/nopaque.CorpusAnalysisClient.js') }}">
 </script>
+<script src="{{ url_for('static', filename='js/nopaque.Results.js') }}">
+</script>
 <script src="{{ url_for('static', filename='js/nopaque.callbacks.js') }}">
 </script>
 <script src="{{ url_for('static', filename='js/nopaque.pj_analyse_corpus.js') }}">
 </script>
 <script>
   // ###### Defining global variables used in other functions ######
-  var results;  // full JSON object holding match results
+  var results;  // results object
+  var resultsJSON;  // full JSON object holding match results
+  var resultsList;  // resultsList object
   var queryFormElement;  // the query form
   var collapsibleElements;  // all collapsibles on site
   var queryResultsProgressElement;  // Div element holding the progress bar
   var queryResultsDeterminateElement;  // The progress bar for recieved results
   var queryResultsUserFeedbackElement;  // Element showing match count|total etc
   var queryResultsExportElement;  // Download button opens download modal
-  var exportModal;
+  var exportModal;  // Download options modal
+  var contextModal;  // Modal to open on inspect for further match context
   var initModal;
   var downloadResultsJSONElement;  // button for downloading results as JSON
   var displayOptionsFormElement;
 
   // ###### Initialize variables ######
+  contextModal = document.getElementById("context-modal");
+  exportModal = document.getElementById("query-results-download-modal");
   queryFormElement = document.getElementById("query-form");
   queryResultsProgressElement = document.getElementById("query-results-progress");
   queryResultsDeterminateElement = document.getElementById("query-results-determinate");
@@ -224,6 +250,22 @@
   queryResultsExportElement = document.getElementById("query-results-export");
   displayOptionsFormElement = document.getElementById("display-options-form");
 
+  // js list options and intialization
+  let displayOptionsData = getDisplayOptions(displayOptionsFormElement);
+  let resultsListOptions = {page: displayOptionsData["resultsPerPage"],
+    pagination: [{
+      name: "paginationTop",
+      paginationClass: "paginationTop",
+      innerWindow: 8,
+      outerWindow: 1
+    }, {
+      paginationClass: "paginationBottom",
+      innerWindow: 8,
+      outerWindow: 1
+    }],
+    valueNames: ["titles", "lc", "c", "rc", {data: ["index"]}],
+    item: `<span></span>`};
+
   // ###### Set some css options ######
   // get collapsibles to alter options of those
   var collapsibleElements = document.querySelector('.collapsible.expandable');
@@ -244,14 +286,18 @@
     //set accordion of collapsibles to false
     M.Collapsible.init(collapsibleElements, {accordion: false});
     // creates some models on DOMContentLoaded
-    exportModal = M.Modal.init(document.getElementById("query-results-download-modal"),
-                                {"dismissible": true});
-    initModal = M.Modal.init(initDisplayElement, {dismissible: false});
+    contextModal = M.Modal.init(contextModal, {"dismissible": true});
+    exportModal = M.Modal.init(exportModal, {"dismissible": true});
+    initModal = M.Modal.init(initDisplayElement, {"dismissible": false});
     // Init corpus analysis components
+    resultsJSON = {};
+    resultsList = new ResultsList("result-list", resultsListOptions);
+    results = new Results(resultsJSON, resultsList);
     initDisplay = new CorpusAnalysisDisplay(initDisplayElement);
     queryDisplay = new CorpusAnalysisDisplay(queryDisplayElement);
     client = new CorpusAnalysisClient({{ corpus_id }}, nopaque.socket);
     initModal.open();
+
     // set displays visibilitys and Callback functions
     client.setDisplay("init", initDisplay);
     client.setCallback("init", () => {
@@ -272,12 +318,18 @@
     queryFormElement.addEventListener("submit", (event) => {
       // Prevent page from reloading on submit
       event.preventDefault();
+      // empty list for new query
+      resultsList.clear();
       // Get query string and send query to server
-      let queryStr = client.getQueryStr(queryFormElement);
+      let queryStr = getQueryStr(queryFormElement);
       client.sendQuery(queryStr);
     });
+
+    // get context of one match if inspected via socket.io
+    nopaque.socket.on("pj_match_context", showMatchContext);
   });
 
+
   // Add onclick to open download modal wen Export Results button is pressed
   queryResultsExportElement.onclick = function() {
     exportModal.open();