From a13304cbb36798422a1c75d11d3e0d14dadb39cb Mon Sep 17 00:00:00 2001 From: Matej Date: Tue, 19 Nov 2024 12:46:47 +0100 Subject: [PATCH] Add first version of web form (only loads JSON query into form) #12 --- ...amed_entity_references_by_ANO_members.json | 58 ++++++++ WebApp/form.html | 50 +++++++ WebApp/scripts/form_filler.js | 116 ++++++++++++++++ WebApp/styles/form.css | 130 ++++++++++++++++++ 4 files changed, 354 insertions(+) create mode 100644 WebApp/average_named_entity_references_by_ANO_members.json create mode 100644 WebApp/form.html create mode 100644 WebApp/scripts/form_filler.js create mode 100644 WebApp/styles/form.css diff --git a/WebApp/average_named_entity_references_by_ANO_members.json b/WebApp/average_named_entity_references_by_ANO_members.json new file mode 100644 index 0000000..83870a8 --- /dev/null +++ b/WebApp/average_named_entity_references_by_ANO_members.json @@ -0,0 +1,58 @@ +{ + "target_databases":["databaseCS"], + "description":"Average named_entity references by ANO members.", + "steps":[ + { + "goal":"get_ano_members", + "columns":["person.person_id"], + "aggregation": { + "group_by":["person.person_id","organisation.organisation_id"], + "order_by":[] + }, + "filtering":{ + "conditions":[ + { + "column":"organisation.organisation_id", + "operator":" LIKE ", + "value":"'%%ANO%%'" + } + ] + }, + "limit":"" + }, + { + "goal":"main", + "columns":["affiliation.person_id", "AVG(speech.named_entity_count) AS average_named_entity_references"], + "aggregation":{ + "group_by":["affiliation.person_id"], + "order_by":[ + { + "column":"average_named_entity_references", + "direction":"DESC" + } + ] + }, + "filtering":{ + "conditions": [ + { + "column":"affiliation.person_id", + "operator":"IN", + "value":"step_result.get_ano_members.affiliation.person_id" + }, + { + "column":"speech.date", + "operator":"<=", + "value":"affiliation.until" + }, + { + "column":"speech.date", + "operator":">=", + "value":"affiliation.since" + } + ] + }, + "limit":"" + } + + ] +} diff --git a/WebApp/form.html b/WebApp/form.html new file mode 100644 index 0000000..46ab90f --- /dev/null +++ b/WebApp/form.html @@ -0,0 +1,50 @@ + + + + + + Simple loading of JSON into the Form + + + + + +

Simple loading of JSON into form + + +
+
+ + + +
+
+

Columns

+
+ +
+ +

Aggregation

+ +
+

Group By

+
+ +
+

Order By

+

+ +
+ +
+

Filtering

+
+

Conditions

+
+
+
+

Limit

+

+
+ + diff --git a/WebApp/scripts/form_filler.js b/WebApp/scripts/form_filler.js new file mode 100644 index 0000000..2dcbb76 --- /dev/null +++ b/WebApp/scripts/form_filler.js @@ -0,0 +1,116 @@ +// Picked a more complex example +const json_file_path = "average_named_entity_references_by_ANO_members.json" + +// Load JSON +function load_JSON() { + fetch(json_file_path) + .then((response) => { return response.json(); }) + .then((data) => { fill_form(data); }) + .catch((error) => {console.error("Error loading JSON:", error); } ); +} + +// Fill out the form +function fill_form(data) { + + document.getElementById("targetDatabase").value = data.target_databases.join(", "); + document.getElementById("description").value = data.description; + + const stepSection = document.getElementById("stepsSection"); + stepSection.innerHTML=""; + + + data.steps.forEach((step, index) => { + + // Step + const stepContainer = document.createElement("div"); + stepContainer.classList.add("step"); + + const goalDiv = document.createElement("div"); + goalDiv.classList.add("goal"); + goalDiv.innerHTML = `

${index + 1}: ${step.goal}

`; + + stepContainer.appendChild(goalDiv); + + // Columns + const columnSection = document.createElement("div"); + columnSection.classList.add("columns"); + columnSection.innerHTML = `

Columns

`; + + step.columns.forEach((column) => { + const columnDiv = document.createElement("div"); + columnDiv.classList.add("columns-entry"); + columnDiv.textContent = column; + columnSection.appendChild(columnDiv); + }); + stepContainer.appendChild(columnSection); + + // Aggregation section + const aggregationSection = document.createElement("div"); + aggregationSection.classList.add("aggregation") + aggregationSection.innerHTML = `

Aggregation

`; + + // Group By + const groupBySection = document.createElement("div"); + groupBySection.classList.add("group-by"); + groupBySection.innerHTML = `

Group By

`; + + step.aggregation.group_by.forEach((groupBy) => { + const groupByDiv = document.createElement("div"); + groupByDiv.classList.add("group-by-entry"); + groupByDiv.textContent = groupBy; + groupBySection.appendChild(groupByDiv); + }); + aggregationSection.appendChild(groupBySection); + + // Order By + const orderBySection = document.createElement("div"); + orderBySection.classList.add("order-by"); + orderBySection.innerHTML=`

Order By

`; + + step.aggregation.order_by.forEach((orderBy) => { + const orderByDiv = document.createElement("div"); + orderByDiv.classList.add("order-by-entry"); + orderByDiv.textContent = `${orderBy.column} ${orderBy.direction}` || "None"; + orderBySection.appendChild(orderByDiv); + }); + aggregationSection.appendChild(orderBySection); + + stepContainer.appendChild(aggregationSection); + + // Filtering + const filteringSection = document.createElement("div"); + filteringSection.classList.add("filtering"); + filteringSection.innerHTML = `

Filtering

`; + + // Conditions + const conditionSection = document.createElement("div"); + conditionSection.classList.add("conditions") + conditionSection.innerHTML = `

Conditions

` + + step.filtering.conditions.forEach((condition) => { + const conditionDiv = document.createElement("div"); + conditionDiv.classList.add("conditions-entry"); + conditionDiv.textContent = `${condition.column} ${condition.operator} ${condition.value}`; + conditionSection.appendChild(conditionDiv); + }); + filteringSection.appendChild(conditionSection); + + stepContainer.appendChild(filteringSection); + + // Limit + const limitSection = document.createElement("div"); + limitSection.innerHTML = `

Limit

`; + limitSection.classList.add("limit"); + const limitDiv = document.createElement("div"); + limitDiv.textContent= step.limit || "None"; + + limitSection.appendChild(limitDiv); + + stepContainer.appendChild(limitSection); + + stepSection.appendChild(stepContainer); + + }); +} + +document.addEventListener("DOMContentLoaded", load_JSON); diff --git a/WebApp/styles/form.css b/WebApp/styles/form.css new file mode 100644 index 0000000..bdb3f25 --- /dev/null +++ b/WebApp/styles/form.css @@ -0,0 +1,130 @@ +body { + font-family: Arial, sans-serif; + margin: 20px; + background-color: #f9f9f9; + display:flex; + justify-content:left; + font-size:0.5em; +} + +h1 { + text-align: center; + color: #333; +} + +.form-section { + margin-bottom:20px; + padding:15px; + border-radius: 8px; + border: 1px solid #ccc; + box-shadow: 0 5px 5px rgba(0,0,0,0.1); +} + +.target-database { + background-color:#f9f9f9; + border: 5px solid #ebc77c; +} + +.step{ + width=50%; + + font-size=1.5em; + background-color:#f9f9f9; + border: 5px solid #ffcb66; + padding:15px; + margin-bottom:20px; +} + +.goal{ + border:5px solid #b6d4ff; + padding:10px; + margin-bottom:15px; + background-color:#f9f9f9; + font-size=1.5em; +} + +.columns { + border:5px solid #82c995; + padding:10px; + margin-bottom:10px; + background-color:#f9f9f9; + font-size=1.5em; +} + + +.columns-entry { + border: 5px dashed #67e976; + padding:5px; + margin-bottom:5px; + background-color:#f9f9f9; +} + +.aggregation { + border:5px solid #c6a6f2; + padding:10px; + margin-bottom:15px; + background-color:#f9f9f9; + font-size=1.5em; +} + +.group-by { + border:5px solid #7b9ef5; + padding:5px; + margin-bottom:10px; + background-color:#f9f9f9; + font-size=1.5em; +} + +.group-by-entry { + border:5px dashed #7b9ef5; + padding:5px; + margin-bottom:5px; + background-color:#f9f9f9; + font-size=1.5em; +} + +.order-by { + border: 5px solid #8778d8; + padding:5px; + background-color:#f9f9f9; + font-size=1.5em; +} + +.order-by-entry { + border:5px dashed #8778d8; + padding:5px; + margin-bottom:5px; + background-color:#f9f9f9; + font-size=1.5em; +} + +.filtering { + border: 5px solid #ffb2d2; + padding:10px; + margin-bottom:15px; + background-color:#f9f9f9; + font-size=1.5em; +} + +.conditions { + border: 5px solid #ffa1d8; + padding: 5px; + background-color:#f9f9f9; + font-size=1.5em; +} + +.conditions-entry { + border: 5px dashed #ff81d8; + padding: 5px; + margin-bottom:5px; + background-color:#f9f9f9; + font-size=1.5em; +} + +.limit { + border: 5px solid #ffa37b; + padding:10px; + background-color:#f9f9f9; + font-size=1.5em; +} +