mirror of
				https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
				synced 2025-11-04 04:12:45 +00:00 
			
		
		
		
	Export sub results
This commit is contained in:
		@@ -129,22 +129,31 @@ def corpus_analysis_query(query):
 | 
			
		||||
@socketio_login_required
 | 
			
		||||
def corpus_analysis_inspect_match(payload):
 | 
			
		||||
    type = payload['type']
 | 
			
		||||
    data_index = payload["data_index"]
 | 
			
		||||
    data_indexes = payload['data_indexes']
 | 
			
		||||
    first_cpos = payload['first_cpos']
 | 
			
		||||
    last_cpos = payload['last_cpos']
 | 
			
		||||
    client = corpus_analysis_clients.get(request.sid)
 | 
			
		||||
    if client is None:
 | 
			
		||||
        response = {'code': 424,
 | 
			
		||||
                    'desc': 'No client found for this session',
 | 
			
		||||
                    'msg': 'Failed Dependency',
 | 
			
		||||
                    'type': type,
 | 
			
		||||
                    'data_index': data_index}
 | 
			
		||||
                    'data_indexes': data_indexes}
 | 
			
		||||
        socketio.emit('corpus_analysis_inspect_match', response,
 | 
			
		||||
                      room=request.sid)
 | 
			
		||||
        return
 | 
			
		||||
    try:
 | 
			
		||||
        corpus = client.corpora.get('CORPUS')
 | 
			
		||||
        s = corpus.structural_attributes.get('s')
 | 
			
		||||
        payload = s.export(payload['first_cpos'], payload['last_cpos'],
 | 
			
		||||
                           context=10)
 | 
			
		||||
        payload = {}
 | 
			
		||||
        payload['matches'] = []
 | 
			
		||||
        payload['cpos_lookup'] = {}
 | 
			
		||||
        payload['text_lookup'] = {}
 | 
			
		||||
        for index, f_cpos, l_cpos in zip(data_indexes, first_cpos, last_cpos):
 | 
			
		||||
            tmp_match = s.export(f_cpos, l_cpos, context=10)
 | 
			
		||||
            payload['matches'].append(tmp_match['matches'][0])
 | 
			
		||||
            payload['cpos_lookup'].update(tmp_match['cpos_lookup'])
 | 
			
		||||
            payload['text_lookup'].update(tmp_match['text_lookup'])
 | 
			
		||||
        payload['cpos_ranges'] = True
 | 
			
		||||
    except cqi.errors.CQiException as e:
 | 
			
		||||
        payload = {'code': e.code, 'desc': e.description, 'msg': e.name}
 | 
			
		||||
@@ -153,14 +162,14 @@ def corpus_analysis_inspect_match(payload):
 | 
			
		||||
                    'msg': 'Internal Server Error',
 | 
			
		||||
                    'payload': payload,
 | 
			
		||||
                    'type': type,
 | 
			
		||||
                    'data_index': data_index}
 | 
			
		||||
                    'data_indexes': data_indexes}
 | 
			
		||||
    else:
 | 
			
		||||
        response = {'code': 200,
 | 
			
		||||
                    'desc': None,
 | 
			
		||||
                    'msg': 'OK',
 | 
			
		||||
                    'payload': payload,
 | 
			
		||||
                    'type': type,
 | 
			
		||||
                    'data_index': data_index}
 | 
			
		||||
                    'data_indexes': data_indexes}
 | 
			
		||||
    socketio.emit('corpus_analysis_inspect_match', response, room=request.sid)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -19,6 +19,15 @@ main {
 | 
			
		||||
  font-weight: bold;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* preloader circle in the size of a button icon */
 | 
			
		||||
.button-icon-spinner {
 | 
			
		||||
  bottom: -8px !important;
 | 
			
		||||
  right: -16px !important;
 | 
			
		||||
  margin-right: 12px !important;
 | 
			
		||||
  width: 19.5px !important;
 | 
			
		||||
  height: 19.5px !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* CSS for clickable th elements in tables. Needed for sortable table data with
 | 
			
		||||
list js. On click on th header elements will be sorted accordingly. Also a caret
 | 
			
		||||
indicator will show up how the column is sorted right now.; */
 | 
			
		||||
 
 | 
			
		||||
@@ -88,16 +88,14 @@ class CorpusAnalysisClient {
 | 
			
		||||
 | 
			
		||||
    // inspect callback handeling based on type
 | 
			
		||||
    socket.on("corpus_analysis_inspect_match", (response) => {
 | 
			
		||||
      console.log(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);
 | 
			
		||||
      } else if (response.type === "sub-results"){
 | 
			
		||||
        if (this.callbacks.save_sub_results_choices != undefined) {
 | 
			
		||||
          this.callbacks.save_sub_results_choices(response);
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    });
 | 
			
		||||
 
 | 
			
		||||
@@ -3,6 +3,7 @@ class Results {
 | 
			
		||||
  this.data = data;
 | 
			
		||||
  this.jsList = jsList;
 | 
			
		||||
  this.metaData = metaData
 | 
			
		||||
  this.subResultsData = new Data();
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  clearAll() {
 | 
			
		||||
@@ -10,7 +11,9 @@ class Results {
 | 
			
		||||
    this.jsList.update();
 | 
			
		||||
    this.data.init();
 | 
			
		||||
    this.metaData.init();
 | 
			
		||||
    this.subResultsData.init();
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@@ -22,11 +25,16 @@ class Data {
 | 
			
		||||
    this["cpos_lookup"] = {};  // object contains all this key value pair
 | 
			
		||||
    this["text_lookup"] = {};  // same as above for all text ids
 | 
			
		||||
    this["match_count"] = matchCount;
 | 
			
		||||
    this["corpus_type"] = "subcorpus"
 | 
			
		||||
    this["corpus_type"] = "results";
 | 
			
		||||
    this["query"] = "";
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  addData(jsonData) {
 | 
			
		||||
    Object.assign(this, jsonData);
 | 
			
		||||
  addData(jsonData, key=null) {
 | 
			
		||||
    if (key !== null) {
 | 
			
		||||
      Object.assign(this[key], jsonData);
 | 
			
		||||
    } else if (key === null) {
 | 
			
		||||
      Object.assign(this, jsonData)
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // get query as string from form Element
 | 
			
		||||
@@ -80,6 +88,19 @@ class Data {
 | 
			
		||||
    // start actual download
 | 
			
		||||
    this.download(downloadElement, dataStr, resultFilename, "text/json", ".json")
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // createSubResultsData from subResultsTmpData
 | 
			
		||||
  createSubResultsData() {
 | 
			
		||||
      let tmp = [...results.jsList.addToSubResultsIdsToShow].sort(function(a, b){return a-b});
 | 
			
		||||
      let dataIndexes = [];
 | 
			
		||||
      tmp.forEach((index) => dataIndexes.push(index - 1));
 | 
			
		||||
      console.log(dataIndexes);
 | 
			
		||||
      results.jsList.getMatchWithContext(dataIndexes, "sub-results");
 | 
			
		||||
      // TODO: save incoming matche infos with saveSubResultsChoices.
 | 
			
		||||
      // TODO: trigger this function on dl btn click and seta flag that it has run to avoid double execution
 | 
			
		||||
      // also set this flag to false if addToSubResultsIdsToShow has been altered
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
class MetaData {
 | 
			
		||||
 
 | 
			
		||||
@@ -3,16 +3,34 @@ function recvMetaData(payload) {
 | 
			
		||||
  console.log(results.metaData);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function saveSubSubcorpusChoices(payload) {
 | 
			
		||||
  console.log("SAVE");
 | 
			
		||||
  console.log(payload);
 | 
			
		||||
function saveSubResultsChoices(response) {
 | 
			
		||||
  console.log("Recieve match with context");
 | 
			
		||||
  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 = "sub-results";
 | 
			
		||||
  results.subResultsData.match_count = [...response.payload.matches].length;
 | 
			
		||||
  results.subResultsData.cpos_ranges = response.payload.cpos_ranges;
 | 
			
		||||
  console.log(results.subResultsData);
 | 
			
		||||
  subResultsCreateElement.getElementsByClassName("button-icon-spinner")[0].remove();
 | 
			
		||||
  subResultsCreateElement.getElementsByTagName("i")[0].classList.remove("hide");
 | 
			
		||||
  subResultsCreateElement.firstElementChild.classList.add("disabled");
 | 
			
		||||
  subResultsExportElement.classList.remove("disabled");
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function querySetup(payload) {
 | 
			
		||||
  // This is called when a query was successfull
 | 
			
		||||
  // some hiding and resetting
 | 
			
		||||
  let textarea = subResultsIdListElement.getElementsByTagName("textarea")[0];
 | 
			
		||||
  textarea.innerText = "";
 | 
			
		||||
  M.textareaAutoResize(textarea);
 | 
			
		||||
  results.jsList.addToSubResultsStatus = {};
 | 
			
		||||
  results.jsList.addToSubResultsIdsToShow = new Set();
 | 
			
		||||
  queryResultsExportElement.classList.add("disabled");
 | 
			
		||||
  addToSubSubcorpusElement.setAttribute("disabled", "");
 | 
			
		||||
  addToSubResultsElement.setAttribute("disabled", "");
 | 
			
		||||
  queryResultsDeterminateElement.style.width = "0%";
 | 
			
		||||
  queryResultsProgressElement.classList.remove("hide");
 | 
			
		||||
  queryResultsUserFeedbackElement.classList.remove("hide");
 | 
			
		||||
@@ -72,11 +90,11 @@ function queryRenderResults(payload) {
 | 
			
		||||
    queryResultsProgressElement.classList.add("hide");
 | 
			
		||||
    queryResultsUserFeedbackElement.classList.add("hide");
 | 
			
		||||
    queryResultsExportElement.classList.remove("disabled");
 | 
			
		||||
    addToSubSubcorpusElement.removeAttribute("disabled");
 | 
			
		||||
    addToSubResultsElement.removeAttribute("disabled");
 | 
			
		||||
    results.jsList.activateInspect();
 | 
			
		||||
    // inital expert mode check and sub subcorpus activation
 | 
			
		||||
    if (addToSubSubcorpusElement.checked) {
 | 
			
		||||
      results.jsList.activateAddToSubSubcorpus();
 | 
			
		||||
    // inital expert mode check and sub results activation
 | 
			
		||||
    if (addToSubResultsElement.checked) {
 | 
			
		||||
      results.jsList.activateAddToSubResults();
 | 
			
		||||
    }
 | 
			
		||||
    if (expertModeSwitchElement.checked) {
 | 
			
		||||
      results.jsList.expertModeOn("query-display");
 | 
			
		||||
 
 | 
			
		||||
@@ -134,7 +134,8 @@ class ResultsList extends List {
 | 
			
		||||
  this.currentExpertTokenElements = {}; // all token elements which have added
 | 
			
		||||
  // classes like chip and hoverable for expert view. Collected
 | 
			
		||||
  //here to delete later on
 | 
			
		||||
  this.addToSubSubcorpuStatus = {};
 | 
			
		||||
  this.addToSubResultsStatus = {};
 | 
			
		||||
  this.addToSubResultsIdsToShow = new Set();
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // handels interactionElements during a pagination navigation
 | 
			
		||||
@@ -178,60 +179,74 @@ class ResultsList extends List {
 | 
			
		||||
    return displayOptionsData
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // ###### Functions to add one match to a sub-subcorpus ######
 | 
			
		||||
  // ###### Functions to add one match to a sub-results ######
 | 
			
		||||
  // activate add button
 | 
			
		||||
  activateAddToSubSubcorpus() {
 | 
			
		||||
    let addToSubSubcorpusBtnElements = document.getElementsByClassName("add");
 | 
			
		||||
    for (let addToSubSubcorpusBtn of addToSubSubcorpusBtnElements) {
 | 
			
		||||
      addToSubSubcorpusBtn.classList.remove("hide");
 | 
			
		||||
  activateAddToSubResults() {
 | 
			
		||||
    subResultsIdListElement.classList.remove("hide");
 | 
			
		||||
    subResultsCreateElement.classList.remove("hide");
 | 
			
		||||
    let addToSubResultsBtnElements = document.getElementsByClassName("add");
 | 
			
		||||
    for (let addToSubResultsBtn of addToSubResultsBtnElements) {
 | 
			
		||||
      addToSubResultsBtn.classList.remove("hide");
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  // deactivate add button
 | 
			
		||||
  deactivateAddToSubSubcorpus() {
 | 
			
		||||
    let addToSubSubcorpusBtnElements = document.getElementsByClassName("add");
 | 
			
		||||
    for (let addToSubSubcorpusBtn of addToSubSubcorpusBtnElements) {
 | 
			
		||||
      addToSubSubcorpusBtn.classList.add("hide");
 | 
			
		||||
  deactivateAddToSubResults() {
 | 
			
		||||
    subResultsIdListElement.classList.add("hide");
 | 
			
		||||
    subResultsCreateElement.classList.add("hide");
 | 
			
		||||
    let addToSubResultsBtnElements = document.getElementsByClassName("add");
 | 
			
		||||
    for (let addToSubResultsBtn of addToSubResultsBtnElements) {
 | 
			
		||||
      addToSubResultsBtn.classList.add("hide");
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  // add match on click to a SubSubcorpus
 | 
			
		||||
  addToSubSubcorpus(dataIndex) {
 | 
			
		||||
    if (!this.addToSubSubcorpuStatus[dataIndex]
 | 
			
		||||
        || this.addToSubSubcorpuStatus === undefined) {
 | 
			
		||||
  // add match id on click to a List of marked matches for SubSubcorpora
 | 
			
		||||
  // remove match id on click from same list
 | 
			
		||||
  addToSubResults(dataIndex) {
 | 
			
		||||
    let textarea = subResultsIdListElement.getElementsByTagName("textarea")[0]
 | 
			
		||||
    if (!this.addToSubResultsStatus[dataIndex]
 | 
			
		||||
        || this.addToSubResultsStatus === undefined) {
 | 
			
		||||
      // add button is activated
 | 
			
		||||
      nopaque.flash(`[Match ${dataIndex + 1}] Marked for Sub-Subcorpus!`);
 | 
			
		||||
      nopaque.flash(`[Match ${dataIndex + 1}] Marked for Sub-Results!`);
 | 
			
		||||
      event.target.classList.remove("grey");
 | 
			
		||||
      event.target.classList.add("green");
 | 
			
		||||
      event.target.innerText = "check";
 | 
			
		||||
      this.addToSubSubcorpuStatus[dataIndex] = true;
 | 
			
		||||
      this.getMatchWithContext(dataIndex, "sub-subcorpus");
 | 
			
		||||
    } else if (this.addToSubSubcorpuStatus[dataIndex]) {
 | 
			
		||||
      this.addToSubResultsStatus[dataIndex] = true;
 | 
			
		||||
      this.addToSubResultsIdsToShow.add(dataIndex + 1);
 | 
			
		||||
      textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");
 | 
			
		||||
      M.textareaAutoResize(textarea);
 | 
			
		||||
    } else if (this.addToSubResultsStatus[dataIndex]) {
 | 
			
		||||
      // add button is deactivated
 | 
			
		||||
      nopaque.flash(`[Match ${dataIndex + 1}] Unmarked for Sub-Subcorpus!`);
 | 
			
		||||
      nopaque.flash(`[Match ${dataIndex + 1}] Unmarked for Sub-results!`);
 | 
			
		||||
      event.target.classList.remove("green");
 | 
			
		||||
      event.target.classList.add("grey");
 | 
			
		||||
      event.target.innerText = "add";
 | 
			
		||||
      this.addToSubSubcorpuStatus[dataIndex] = false;
 | 
			
		||||
      this.addToSubResultsStatus[dataIndex] = false;
 | 
			
		||||
      this.addToSubResultsIdsToShow.delete(dataIndex + 1);
 | 
			
		||||
      textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");
 | 
			
		||||
      M.textareaAutoResize(textarea);
 | 
			
		||||
    }
 | 
			
		||||
    if ([...this.addToSubResultsIdsToShow].length > 0) {
 | 
			
		||||
      subResultsCreateElement.firstElementChild.classList.remove("disabled");
 | 
			
		||||
    } else if ([...this.addToSubResultsIdsToShow].length === 0) {
 | 
			
		||||
      subResultsCreateElement.firstElementChild.classList.add("disabled");
 | 
			
		||||
    }
 | 
			
		||||
    subResultsExportElement.classList.add("disabled");
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // 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
 | 
			
		||||
  // triggers emit to get full match context from server for a number of
 | 
			
		||||
  // matches identified by their data_index
 | 
			
		||||
  getMatchWithContext(dataIndexes, type) {
 | 
			
		||||
    let tmp_first_cpos = [];
 | 
			
		||||
    let tmp_last_cpos = [];
 | 
			
		||||
    for (let dataIndex of dataIndexes) {
 | 
			
		||||
      tmp_first_cpos.push(results.data.matches[dataIndex].c[0]);
 | 
			
		||||
      tmp_last_cpos.push(results.data.matches[dataIndex].c[1]);
 | 
			
		||||
    }
 | 
			
		||||
    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],
 | 
			
		||||
                        data_indexes: dataIndexes,
 | 
			
		||||
                        first_cpos: tmp_first_cpos,
 | 
			
		||||
                        last_cpos: tmp_last_cpos,
 | 
			
		||||
                      }
 | 
			
		||||
          );
 | 
			
		||||
  }
 | 
			
		||||
@@ -250,10 +265,22 @@ class ResultsList extends List {
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  //gets result cpos infos for one dataIndex to send back to the server
 | 
			
		||||
  // gets result cpos infos for one dataIndex (list of length 1) to send back to
 | 
			
		||||
  // the server
 | 
			
		||||
  inspect(dataIndex, type) {
 | 
			
		||||
    this.contextId = dataIndex[0];
 | 
			
		||||
    let contextResultsElement;
 | 
			
		||||
    contextResultsElement = document.getElementById("context-results");
 | 
			
		||||
    contextResultsElement.innerHTML = "";  // clear it from old inspects
 | 
			
		||||
    this.getMatchWithContext(dataIndex, type);
 | 
			
		||||
    contextModal.open();
 | 
			
		||||
    let css = `margin-right: 10px;`
 | 
			
		||||
    let classes = `btn-floating btn waves-effect` +
 | 
			
		||||
                  `waves-light grey right`
 | 
			
		||||
    addToSubResultsFromInspectElement = document.createElement("a");
 | 
			
		||||
    addToSubResultsFromInspectElement.setAttribute("class", classes + `add`);
 | 
			
		||||
    addToSubResultsFromInspectElement.innerHTML = '<i class="material-icons">add</i>';
 | 
			
		||||
    addToSubResultsFromInspectElement.onclick= (event) => {this.addToSubResults(dataIndex)};
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // create Element from HTML String helper function
 | 
			
		||||
@@ -286,11 +313,13 @@ class ResultsList extends List {
 | 
			
		||||
    let uniqueS;
 | 
			
		||||
 | 
			
		||||
    this.contextData = response.payload;
 | 
			
		||||
    this.contextData["cpos_ranges"] = response.payload.cpos_ranges;
 | 
			
		||||
    this.contextData["query"] = results.data.query;
 | 
			
		||||
    this.contextData["context_id"] = this.contextId;
 | 
			
		||||
    this.contextData["match_count"] = this.contextData.matches.length
 | 
			
		||||
    this.contextData["corpus_type"] = "sub-subcorpus"
 | 
			
		||||
    this.contextData["corpus_type"] = "inspect-result"
 | 
			
		||||
    Object.assign(this.contextData, results.metaData);
 | 
			
		||||
    console.log(this.contextData);
 | 
			
		||||
    contextResultsElement = document.getElementById("context-results");
 | 
			
		||||
    modalExpertModeSwitchElement = document.getElementById("inspect-display-options-form-expert_mode_inspect");
 | 
			
		||||
    highlightSentencesSwitchElement = document.getElementById("inspect-display-options-form-highlight_sentences");
 | 
			
		||||
@@ -595,7 +624,7 @@ class ResultsList extends List {
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  createResultRowElement(item, chunk) {
 | 
			
		||||
    let addToSubSubcorpusBtn;
 | 
			
		||||
    let addToSubResultsBtn;
 | 
			
		||||
    let c;
 | 
			
		||||
    let cCellElement;
 | 
			
		||||
    let cpos;
 | 
			
		||||
@@ -663,16 +692,16 @@ class ResultsList extends List {
 | 
			
		||||
                            );
 | 
			
		||||
    inspectBtn.setAttribute("style", css)
 | 
			
		||||
    inspectBtn.innerHTML = '<i class="material-icons">search</i>';
 | 
			
		||||
    inspectBtn.onclick = () => {this.inspect(values.index, "inspect")};
 | 
			
		||||
    // # add btn to add matches to sub-subcorpus. hidden per default
 | 
			
		||||
    addToSubSubcorpusBtn = document.createElement("a");
 | 
			
		||||
    addToSubSubcorpusBtn.setAttribute("class", classes + ` hide add`
 | 
			
		||||
    inspectBtn.onclick = () => {this.inspect([values.index], "inspect")};
 | 
			
		||||
    // # add btn to add matches to sub-results. hidden per default
 | 
			
		||||
    addToSubResultsBtn = document.createElement("a");
 | 
			
		||||
    addToSubResultsBtn.setAttribute("class", classes + ` hide add`
 | 
			
		||||
                                );
 | 
			
		||||
    addToSubSubcorpusBtn.setAttribute("style", css)
 | 
			
		||||
    addToSubSubcorpusBtn.innerHTML = '<i class="material-icons">add</i>';
 | 
			
		||||
    addToSubSubcorpusBtn.onclick= (event) => {this.addToSubSubcorpus(values.index)}
 | 
			
		||||
    addToSubResultsBtn.setAttribute("style", css)
 | 
			
		||||
    addToSubResultsBtn.innerHTML = '<i class="material-icons">add</i>';
 | 
			
		||||
    addToSubResultsBtn.onclick= (event) => {this.addToSubResults(values.index)}
 | 
			
		||||
    cCellElement.appendChild(inspectBtn);
 | 
			
		||||
    cCellElement.appendChild(addToSubSubcorpusBtn);
 | 
			
		||||
    cCellElement.appendChild(addToSubResultsBtn);
 | 
			
		||||
    // add text titles at front as first td of one row
 | 
			
		||||
    textTitlesCellElement.innerText = [...textTitles].join(", ");
 | 
			
		||||
    matchRowElement.insertAdjacentHTML("afterbegin", textTitlesCellElement.outerHTML);
 | 
			
		||||
 
 | 
			
		||||
@@ -74,43 +74,109 @@
 | 
			
		||||
          </div>
 | 
			
		||||
          <div class="col s12 m9 l9" id="actions-and-tools">
 | 
			
		||||
            <div class="row section">
 | 
			
		||||
              <div class="col" id="Export">
 | 
			
		||||
              <div class="col s12 m3 l3" id="export">
 | 
			
		||||
                <h6 style="margin-top: 0px;">Export</h6>
 | 
			
		||||
                <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
                <button id="query-results-export"
 | 
			
		||||
                        class="waves-effect
 | 
			
		||||
                        waves-light
 | 
			
		||||
                        btn-flat
 | 
			
		||||
                        disabled"
 | 
			
		||||
                        type="submit">Export Results
 | 
			
		||||
                  <i class="material-icons left">file_download</i>
 | 
			
		||||
                </button>
 | 
			
		||||
              </div>
 | 
			
		||||
              <div class="col" id="Create">
 | 
			
		||||
                <h6 style="margin-top: 0px;">Create</h6>
 | 
			
		||||
                <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
                <div class="switch">
 | 
			
		||||
                  Sub-Subcorpus creation:
 | 
			
		||||
                  <label>
 | 
			
		||||
                    Off
 | 
			
		||||
                    <input disabled
 | 
			
		||||
                           type="checkbox"
 | 
			
		||||
                           id="add-to-sub-subcorpus">
 | 
			
		||||
                    <span class="lever"></span>
 | 
			
		||||
                    On
 | 
			
		||||
                  </label>
 | 
			
		||||
                <div class="row">
 | 
			
		||||
                  <div class="col">
 | 
			
		||||
                    <button id="query-results-export"
 | 
			
		||||
                            class="waves-effect
 | 
			
		||||
                            waves-light
 | 
			
		||||
                            btn-flat
 | 
			
		||||
                            disabled"
 | 
			
		||||
                            type="submit">Export Results
 | 
			
		||||
                      <i class="material-icons left">file_download</i>
 | 
			
		||||
                    </button>
 | 
			
		||||
                  </div>
 | 
			
		||||
                  <div class="col">
 | 
			
		||||
                    <button id="sub-results-export"
 | 
			
		||||
                            class="waves-effect
 | 
			
		||||
                            waves-light
 | 
			
		||||
                            btn-flat
 | 
			
		||||
                            disabled"
 | 
			
		||||
                            type="submit">Export Sub-Results
 | 
			
		||||
                      <i class="material-icons left">file_download</i>
 | 
			
		||||
                    </button>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
              <div class="col" id="Display">
 | 
			
		||||
              <div class="col s12 m3 l3" id="create">
 | 
			
		||||
                <h6 style="margin-top: 0px;">Create</h6>
 | 
			
		||||
                <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
                <div class="row">
 | 
			
		||||
                  <div class="col">
 | 
			
		||||
                    <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 hide" id="sub-results-match-ids-div">
 | 
			
		||||
                    <div class="input-field">
 | 
			
		||||
                      <p>Marked matches for Sub-Results:</p>
 | 
			
		||||
                      <textarea id="sub-results-match-ids"
 | 
			
		||||
                                class="materialize-textarea"
 | 
			
		||||
                                disabled>
 | 
			
		||||
                      </textarea>
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </div>
 | 
			
		||||
                  <div class="col hide" id="sub-results-create-div">
 | 
			
		||||
                    <button class="waves-effect
 | 
			
		||||
                            waves-light
 | 
			
		||||
                            btn-flat
 | 
			
		||||
                            disabled"
 | 
			
		||||
                            type="submit">Create
 | 
			
		||||
                      <i class="material-icons left">build</i>
 | 
			
		||||
                    </button>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
              <div class="col s12 m3 l3" id="display">
 | 
			
		||||
                <h6 style="margin-top: 0px;">Display</h6>
 | 
			
		||||
                <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
                <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 class="row">
 | 
			
		||||
                  <div class="col">
 | 
			
		||||
                    <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 m3 l3" id="anlysis">
 | 
			
		||||
                <h6 style="margin-top: 0px;">Analysis</h6>
 | 
			
		||||
                <div class="divider" style="margin-bottom: 10px;"></div>
 | 
			
		||||
                <div class="row">
 | 
			
		||||
                  <div class="col">
 | 
			
		||||
                    <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">
 | 
			
		||||
                    <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>
 | 
			
		||||
          </div>
 | 
			
		||||
@@ -254,6 +320,11 @@
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
          </li>
 | 
			
		||||
          <li class="collection-item">
 | 
			
		||||
            Add to Sub Results
 | 
			
		||||
            <div class="secondary-content" id="add-to-sub-results-from-inspect">
 | 
			
		||||
            </div>
 | 
			
		||||
          </li>
 | 
			
		||||
        </ul>
 | 
			
		||||
      </form>
 | 
			
		||||
    </div>
 | 
			
		||||
@@ -265,7 +336,7 @@
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="modal-footer">
 | 
			
		||||
    <a id="inspect-download-context" class="left waves-effect waves-light btn">
 | 
			
		||||
      Export Context
 | 
			
		||||
      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>
 | 
			
		||||
@@ -283,7 +354,7 @@
 | 
			
		||||
</script>
 | 
			
		||||
<script>
 | 
			
		||||
// ###### Defining global variables used in other functions ######
 | 
			
		||||
  var addToSubSubcorpusElement; // Button to start adding matches to sub-subcorpus
 | 
			
		||||
  var addToSubResultsElement; // Button to start adding matches to sub-results
 | 
			
		||||
  var client;  // CorpusAnalysisClient first undefined on DOMContentLoaded defined
 | 
			
		||||
  var collapsibleElements;  // All collapsibleElements on this page
 | 
			
		||||
  var contextModal;  // Modal to open on inspect for further match context
 | 
			
		||||
@@ -305,6 +376,10 @@
 | 
			
		||||
  var textLookupCountElement  // Nr of texts the matches occured in will be shown in this element
 | 
			
		||||
  var interactionElements;  // Interaction elements and their parameters
 | 
			
		||||
  var textTitlesElement;  // matched text titles
 | 
			
		||||
  var subResultsIdListElement;  // list showing marked matches for sub corpus creation
 | 
			
		||||
  var subResultsExportElement;  // button to download sub results
 | 
			
		||||
  var subResultsCreateElement; // if presses sub results will be created from ids
 | 
			
		||||
  var addToSubResultsFromInspectElement; // button in inspect mdoal to add this match to the sub results
 | 
			
		||||
 | 
			
		||||
  // ###### Defining local scope variables ######
 | 
			
		||||
  let contextPerItemElement;  // Form Element for display option
 | 
			
		||||
@@ -324,7 +399,7 @@
 | 
			
		||||
 | 
			
		||||
  // ###### Initialize variables ######
 | 
			
		||||
  client = undefined;
 | 
			
		||||
  addToSubSubcorpusElement = document.getElementById("add-to-sub-subcorpus");
 | 
			
		||||
  addToSubResultsElement = document.getElementById("add-to-sub-results");
 | 
			
		||||
  collapsibleElements = document.querySelector('.collapsible.expandable');
 | 
			
		||||
  contextModal = document.getElementById("context-modal");
 | 
			
		||||
  contextPerItemElement = document.getElementById("display-options-form-result_context");
 | 
			
		||||
@@ -347,6 +422,10 @@
 | 
			
		||||
  receivedMatchCountElement = document.getElementById("received-match-count");
 | 
			
		||||
  textLookupCountElement = document.getElementById("text-lookup-count");
 | 
			
		||||
  textTitlesElement = document.getElementById("text-titles");
 | 
			
		||||
  subResultsIdListElement = document.getElementById("sub-results-match-ids-div");
 | 
			
		||||
  subResultsExportElement = document.getElementById("sub-results-export");
 | 
			
		||||
  subResultsCreateElement = document.getElementById("sub-results-create-div");
 | 
			
		||||
  addToSubResultsFromInspectElement = document.getElementById("add-to-sub-results-from-inspect");
 | 
			
		||||
 | 
			
		||||
  // ###### js list options and intialization ######
 | 
			
		||||
  displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
 | 
			
		||||
@@ -405,11 +484,8 @@
 | 
			
		||||
    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);
 | 
			
		||||
    client.setCallback("save_sub_results_choices", (payload) => {
 | 
			
		||||
      saveSubResultsChoices(payload);
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // Trigger corpus analysis initialization on server side
 | 
			
		||||
@@ -460,12 +536,12 @@
 | 
			
		||||
                                      results.jsList,
 | 
			
		||||
                                      ["query-display"])
 | 
			
		||||
 | 
			
		||||
    let subSubcorpusInteraction = new InteractionElement("add-to-sub-subcorpus");
 | 
			
		||||
    subSubcorpusInteraction.setCallback("on",
 | 
			
		||||
                                        results.jsList.activateAddToSubSubcorpus,
 | 
			
		||||
    let subResultsInteraction = new InteractionElement("add-to-sub-results");
 | 
			
		||||
    subResultsInteraction.setCallback("on",
 | 
			
		||||
                                        results.jsList.activateAddToSubResults,
 | 
			
		||||
                                        results.jsList);
 | 
			
		||||
    subSubcorpusInteraction.setCallback("off",
 | 
			
		||||
                                        results.jsList.deactivateAddToSubSubcorpus,
 | 
			
		||||
    subResultsInteraction.setCallback("off",
 | 
			
		||||
                                        results.jsList.deactivateAddToSubResults,
 | 
			
		||||
                                        results.jsList);
 | 
			
		||||
 | 
			
		||||
    let activateInspectInteraction = new InteractionElement("inspect",
 | 
			
		||||
@@ -479,12 +555,12 @@
 | 
			
		||||
    changeContextInteraction.setCallback("noCheck",
 | 
			
		||||
                                        results.jsList.changeContext,
 | 
			
		||||
                                        results.jsList)
 | 
			
		||||
    interactionElements.push(expertModeInteraction, subSubcorpusInteraction, activateInspectInteraction, changeContextInteraction);
 | 
			
		||||
    interactionElements.push(expertModeInteraction, subResultsInteraction, 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
 | 
			
		||||
    // also adds more interaction buttons like add to sub results
 | 
			
		||||
    for (let element of paginationElements) {
 | 
			
		||||
      element.addEventListener("click", (event) => {
 | 
			
		||||
        results.jsList.pageChangeEventInteractionHandler(interactionElements);
 | 
			
		||||
@@ -516,15 +592,49 @@
 | 
			
		||||
  // Add onclick to open download modal when Export Results button is pressed
 | 
			
		||||
  queryResultsExportElement.onclick = () => {
 | 
			
		||||
    exportModal.open();
 | 
			
		||||
    // add onclick to download JSON button and download the file
 | 
			
		||||
    downloadResultsJSONElement = document.getElementById("download-results-json")
 | 
			
		||||
    downloadResultsJSONElement.onclick = () => {
 | 
			
		||||
      let filename = results.data.createDownloadFilename("matches");
 | 
			
		||||
      results.data.addData(results.metaData);
 | 
			
		||||
      results.data.downloadJSONRessource(filename, results.data,
 | 
			
		||||
                                         downloadResultsJSONElement
 | 
			
		||||
      )};
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // create sub results on click from shown marked match ids
 | 
			
		||||
  subResultsCreateElement.onclick = () => {
 | 
			
		||||
    subResultsCreateElement.getElementsByTagName("i")[0].classList.add("hide");
 | 
			
		||||
    let html = `
 | 
			
		||||
                <div class="preloader-wrapper button-icon-spinner small active">
 | 
			
		||||
                  <div class="spinner-layer spinner-green-only">
 | 
			
		||||
                    <div class="circle-clipper left">
 | 
			
		||||
                      <div class="circle"></div>
 | 
			
		||||
                      </div><div class="gap-patch">
 | 
			
		||||
                      <div class="circle"></div>
 | 
			
		||||
                      </div><div class="circle-clipper right">
 | 
			
		||||
                      <div class="circle"></div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
                `
 | 
			
		||||
    subResultsCreateElement.insertAdjacentHTML("afterbegin", html);
 | 
			
		||||
    results.data.createSubResultsData();
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // Add onclick to open download modal when sub results button is pressed
 | 
			
		||||
  subResultsExportElement.onclick = () => {
 | 
			
		||||
    exportModal.open();
 | 
			
		||||
    console.log(results.subResultsData);
 | 
			
		||||
    // add onclick to download JSON button and download the file
 | 
			
		||||
    downloadResultsJSONElement = document.getElementById("download-results-json")
 | 
			
		||||
    downloadResultsJSONElement.onclick = () => {
 | 
			
		||||
      let filename = results.data.createDownloadFilename("matches-sub-results");
 | 
			
		||||
      results.subResultsData.downloadJSONRessource(filename,
 | 
			
		||||
                                                   results.subResultsData,
 | 
			
		||||
                                                   downloadResultsJSONElement
 | 
			
		||||
      )};
 | 
			
		||||
  }
 | 
			
		||||
  // add onclick to download JSON button and download the file
 | 
			
		||||
  downloadResultsJSONElement = document.getElementById("download-results-json")
 | 
			
		||||
  downloadResultsJSONElement.onclick = () => {
 | 
			
		||||
    let filename = results.data.createDownloadFilename("matches");
 | 
			
		||||
    results.data.addData(results.metaData);
 | 
			
		||||
    results.data.downloadJSONRessource(filename, results.data,
 | 
			
		||||
                                       downloadResultsJSONElement
 | 
			
		||||
    )};
 | 
			
		||||
 | 
			
		||||
  // add onclick to download JSON button and download the file
 | 
			
		||||
  downloadInspectContextElement = document.getElementById("inspect-download-context")
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user