Export sub results

This commit is contained in:
Stephan Porada 2020-06-25 10:51:51 +02:00
parent ead0117bbb
commit 2113065075
7 changed files with 317 additions and 123 deletions

View File

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

View File

@ -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.; */

View File

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

View File

@ -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 {

View File

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

View File

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

View File

@ -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")