More Analysis Javascript updates for unified interaction handeling

web/app/corpora/events.py

@@ -128,10 +128,15 @@ def corpus_analysis_query(query):
 @socketio.on('corpus_analysis_inspect_match')
 @socketio_login_required
 def corpus_analysis_inspect_match(payload):
+    type = payload['type']
+    data_index = payload["data_index"]
     client = corpus_analysis_clients.get(request.sid)
     if client is None:
-        response = {'code': 424, 'desc': 'No client found for this session',
+        response = {'code': 424,
-                    'msg': 'Failed Dependency'}
+                    'desc': 'No client found for this session',
+                    'msg': 'Failed Dependency',
+                    'type': type,
+                    'data_index': data_index}
         socketio.emit('corpus_analysis_inspect_match', response,
                       room=request.sid)
         return
@@ -143,10 +148,19 @@ def corpus_analysis_inspect_match(payload):
         payload['cpos_ranges'] = True
     except cqi.errors.CQiException as e:
         payload = {'code': e.code, 'desc': e.description, 'msg': e.name}
-        response = {'code': 500, 'desc': None, 'msg': 'Internal Server Error',
+        response = {'code': 500,
-                    'payload': payload}
+                    'desc': None,
+                    'msg': 'Internal Server Error',
+                    'payload': payload,
+                    'type': type,
+                    'data_index': data_index}
     else:
-        response = {'code': 200, 'desc': None, 'msg': 'OK', 'payload': payload}
+        response = {'code': 200,
+                    'desc': None,
+                    'msg': 'OK',
+                    'payload': payload,
+                    'type': type,
+                    'data_index': data_index}
     socketio.emit('corpus_analysis_inspect_match', response, room=request.sid)
 
 

web/app/static/js/nopaque.CorpusAnalysisClient.js

@@ -86,10 +86,20 @@ class CorpusAnalysisClient {
         }
     });
 
+    // inspect callback handeling based on type
     socket.on("corpus_analysis_inspect_match", (response) => {
+      if (response.type === "inspect") {
         if (this.callbacks.query_match_context != undefined) {
           this.callbacks.query_match_context(response);
         }
+      } else if (response.type === "sub-subcorpus"){
+        if (this.callbacks.show_sub_subcorpus_choices != undefined) {
+          this.callbacks.show_sub_subcorpus_choices(response);
+        }
+        if (this.callbacks.save_sub_subcorpus_choices != undefined) {
+          this.callbacks.save_sub_subcorpus_choices(response);
+        }
+      }
     });
   }
 
@@ -104,7 +114,7 @@ class CorpusAnalysisClient {
   }
 
   getMetaData() {
-    // just emits thos to tell the server to gather all meta dat infos and send
+    // just emits thos to tell the server to gather all meta data infos and send
     // those back
     this.socket.emit("corpus_analysis_get_meta_data", this.corpusId);
   }

web/app/static/js/nopaque.InteractionElement.js

@@ -1,10 +1,12 @@
 class InteractionElement {
   constructor(htmlId="",
+              checkStatus=true,
               disabledBefore=true,
               disabledAfter=false,
               hideBefore=true,
               hideAfter=false) {
   this.htmlId = htmlId;
+  this.checkStatus = checkStatus;
   this.callbacks = {};
   this.disabledBefore = disabledBefore;
   this.disabledAfter = disabledAfter;
@@ -14,7 +16,7 @@ class InteractionElement {
 
   getElement() {
     this.interactionStatusElement = document.getElementById(this.htmlId);
-    return this.interactionStatusElement
+    return this.interactionStatusElement;
   }
 
   setCallback(trigger, callback, bindThis, args=[]) {

web/app/static/js/nopaque.callbacks.js

@@ -3,6 +3,11 @@ function recvMetaData(payload) {
   console.log(results.metaData);
 }
 
+function saveSubSubcorpusChoices(payload) {
+  console.log("SAVE");
+  console.log(payload);
+}
+
 function querySetup(payload) {
   // This is called when a query was successfull
   // some hiding and resetting

web/app/static/js/nopaque.lists.js

@@ -141,6 +141,7 @@ class ResultsList extends List {
   pageChangeEventInteractionHandler(interactionElements) {
     // get elements to check thier status
     for (let interaction of interactionElements) {
+      if (interaction.checkStatus) {
         let element = interaction.getElement();
         if (element.checked) {
           let f_on = interaction.bindThisToCallback("on");
@@ -153,6 +154,12 @@ class ResultsList extends List {
           f_off(...args_off);
           console.log("OFF TRIGGERED");
         }
+      } else {
+        let f = interaction.bindThisToCallback("noCheck");
+        let args = interaction.callbacks.noCheck.args;
+        f(...args);
+        console.log("noCheck activated");
+      }
     }
   }
 
@@ -174,13 +181,11 @@ class ResultsList extends List {
   // ###### Functions to add one match to a sub-subcorpus ######
   // activate add button
   activateAddToSubSubcorpus() {
-    if (progress === 100) {
     let addToSubSubcorpusBtnElements = document.getElementsByClassName("add");
     for (let addToSubSubcorpusBtn of addToSubSubcorpusBtnElements) {
       addToSubSubcorpusBtn.classList.remove("hide");
     }
   }
-  }
   // deactivate add button
   deactivateAddToSubSubcorpus() {
     let addToSubSubcorpusBtnElements = document.getElementsByClassName("add");
@@ -192,12 +197,16 @@ class ResultsList extends List {
   addToSubSubcorpus(dataIndex) {
     if (!this.addToSubSubcorpuStatus[dataIndex]
         || this.addToSubSubcorpuStatus === undefined) {
+      // add button is activated
+      nopaque.flash(`[Match ${dataIndex + 1}] Marked for Sub-Subcorpus!`);
       event.target.classList.remove("grey");
       event.target.classList.add("green");
       event.target.innerText = "check";
       this.addToSubSubcorpuStatus[dataIndex] = true;
-      console.log(dataIndex);
+      this.getMatchWithContext(dataIndex, "sub-subcorpus");
     } else if (this.addToSubSubcorpuStatus[dataIndex]) {
+      // add button is deactivated
+      nopaque.flash(`[Match ${dataIndex + 1}] Unmarked for Sub-Subcorpus!`);
       event.target.classList.remove("green");
       event.target.classList.add("grey");
       event.target.innerText = "add";
@@ -205,11 +214,33 @@ class ResultsList extends List {
     }
   }
 
+  // handels incoming match info from socket on event
+  showSubSubcorpusChoices(response) {
+    console.log("SHOW");
+    console.log(response.data_index);
+  }
+
+  // gets full info for one match
+  getMatchWithContext(dataIndex, type) {
+    this.contextId = dataIndex;
+    let contextResultsElement;
+    contextResultsElement = document.getElementById("context-results");
+    contextResultsElement.innerHTML = "";  // clear it from old inspects
+    nopaque.socket.emit("corpus_analysis_inspect_match",
+                      {
+                        type: type,
+                        data_index: dataIndex,
+                        first_cpos: results.data.matches[dataIndex].c[0],
+                        last_cpos: results.data.matches[dataIndex].c[1],
+                      }
+          );
+  }
+
   // ###### Functions to inspect one match, to show more details ######
   // activate inspect buttons if progress is 100
   activateInspect() {
-    let inspectBtnElements;
     if (progress === 100) {
+      let inspectBtnElements;
       inspectBtnElements = document.getElementsByClassName("inspect");
       for (let inspectBtn of inspectBtnElements) {
         inspectBtn.classList.remove("disabled");
@@ -221,17 +252,8 @@ class ResultsList extends List {
 
   //gets result cpos infos for one dataIndex to send back to the server
   inspect(dataIndex, type) {
-    this.contextId = dataIndex;
+    this.getMatchWithContext(dataIndex, type);
-    let contextResultsElement;
-    contextResultsElement = document.getElementById("context-results");
-    contextResultsElement.innerHTML = "";  // clear it from old inspects
     contextModal.open();
-    nopaque.socket.emit("corpus_analysis_inspect_match",
-                      {"type": type,
-                       first_cpos: results.data.matches[dataIndex].c[0],
-                       last_cpos: results.data.matches[dataIndex].c[1],
-                      }
-          );
   }
 
   // create Element from HTML String helper function
@@ -633,7 +655,7 @@ class ResultsList extends List {
     // add some interaction buttons
     // # some btn css rules and classes
     let css = `margin-right: 10px;`
-    let classes = `btn-floating btn-flat waves-effect` +
+    let classes = `btn-floating btn waves-effect` +
                   `waves-light grey right`
     // # add button to trigger more context to every match td
     inspectBtn = document.createElement("a");

web/app/templates/corpora/analyse_corpus.html.j2

@@ -404,7 +404,13 @@
     });
     client.setCallback("query_match_context", (payload) => {
       results.jsList.showMatchContext(payload);
-    })
+    });
+    client.setCallback("show_sub_subcorpus_choices", (payload) => {
+      results.jsList.showSubSubcorpusChoices(payload);
+    });
+    client.setCallback("save_sub_subcorpus_choices", (payload) => {
+      saveSubSubcorpusChoices(payload);
+    });
 
     // Trigger corpus analysis initialization on server side
     client.init();
@@ -443,7 +449,6 @@
 
     // stuff that happens in the list table and should also be checked and
     // updated if the pagination is used
-
     interactionElements = new Array();
     let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
     expertModeInteraction.setCallback("on",
@@ -454,6 +459,7 @@
                                       results.jsList.expertModeOff,
                                       results.jsList,
                                       ["query-display"])
+
     let subSubcorpusInteraction = new InteractionElement("add-to-sub-subcorpus");
     subSubcorpusInteraction.setCallback("on",
                                         results.jsList.activateAddToSubSubcorpus,
@@ -461,16 +467,25 @@
     subSubcorpusInteraction.setCallback("off",
                                         results.jsList.deactivateAddToSubSubcorpus,
                                         results.jsList);
-    interactionElements.push(expertModeInteraction, subSubcorpusInteraction);
+
+    let activateInspectInteraction = new InteractionElement("inspect",
+                                                            false);
+    activateInspectInteraction.setCallback("noCheck",
+                                            results.jsList.activateInspect,
+                                            results.jsList);
+
+    let changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
+                                                          false);
+    changeContextInteraction.setCallback("noCheck",
+                                        results.jsList.changeContext,
+                                        results.jsList)
+    interactionElements.push(expertModeInteraction, subSubcorpusInteraction, activateInspectInteraction, changeContextInteraction);
 
 
     // eventListener if pagination is used to apply new context size to new page
     // and also activate inspect match if progress is 100
     // also adds more interaction buttons like add to subcorpus
     for (let element of paginationElements) {
-      element.addEventListener("click", results.jsList.changeContext);
-      element.addEventListener("click", results.jsList.activateInspect);
-      element.addEventListener("click", results.jsList.activateAddToSubSubcorpus);
       element.addEventListener("click", (event) => {
         results.jsList.pageChangeEventInteractionHandler(interactionElements);
       });
@@ -479,6 +494,7 @@
     // checks if a change for every interactionElement happens and executes
     // the callbacks accordingly
     for (let interaction of interactionElements) {
+      if (interaction.checkStatus) {
         let element = interaction.getElement()
         element.addEventListener("change", (event) => {
           if (event.target.checked) {
@@ -491,24 +507,10 @@
             f_off(...args_off);
           }
         });
+      } else {
+        continue
+      }
     };
-
-    // Show add buttons for sub-subcorpus creation if this is pressed
-    // addToSubSubcorpusElement.addEventListener("change", (event) => {
-    //   if (event.target.checked) {
-    //     results.jsList.activateAddToSubSubcorpus();
-    //   } else {
-    //     results.jsList.deActivateAddToSubSubcorpus();
-    //   }
-    // });
-
-    // expertModeSwitchElement.addEventListener("change", (event) => {
-    //   if (event.target.checked) {
-    //     results.jsList.expertModeOn("query-display");
-    //   } else {
-    //     results.jsList.expertModeOff("query-display");
-    //   }
-    // });
   });
 
   // Add onclick to open download modal when Export Results button is pressed