Skip to content

Commit

Permalink
Add first version of web form (only loads JSON query into form) #12
Browse files Browse the repository at this point in the history
  • Loading branch information
@JetamZ
JetamZ committed Nov 19, 2024
1 parent 6084cf0 commit a13304c
Show file tree
Hide file tree
Showing 4 changed files with 354 additions and 0 deletions.
58 changes: 58 additions & 0 deletions WebApp/average_named_entity_references_by_ANO_members.json
View file
Original file line number Diff line number Diff line change
@@ -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":""
}

]
}
50 changes: 50 additions & 0 deletions WebApp/form.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta cahrset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple loading of JSON into the Form</title>
<script src="https://code.jquery.com/jquery-3.6.0.mn.js"></script>
<script src="scripts/form_filler.js" defer></script>
<link rel="stylesheet" href="styles/form.css"></link>
</head>
<body>
<h1>Simple loading of JSON into form</h1">
<label for="targetDatabase">Target database:</label>
<input type="text" id="targetDatabase" name="TargetDatabase"></input>
<br>
<br>
<label for="description">Description:</label>
<input type="text" id="description" name="Description"></input>

<div id="stepsSection">
<div id="columnsSection">
<h3>Columns</h3>
</div>

<div id="aggregationSection">

<h2>Aggregation</h2>

<div id="groupBySection">
<h3>Group By</h3>
</div>

<div id="orderBySection">
<h3>Order By<h3>
</div>

</div>

<div id="filteringSection">
<h3>Filtering</h3>
<div id="conditionsSection">
<h3>Conditions</h3>
</div>
</div>
<div id="limitSection">
<h3>Limit<h3>
</div>
</div>
</body>
</html>
116 changes: 116 additions & 0 deletions WebApp/scripts/form_filler.js
View file
Original file line number Diff line number Diff line change
@@ -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 = `<h2>${index + 1}: ${step.goal}</h2>`;

stepContainer.appendChild(goalDiv);

// Columns
const columnSection = document.createElement("div");
columnSection.classList.add("columns");
columnSection.innerHTML = `<h3>Columns</h3>`;

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 = `<h3>Aggregation</h3>`;

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

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=`<h4>Order By</h4>`;

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 = `<h3>Filtering</h3>`;

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

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 = `<h4>Limit</h4>`;
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);
130 changes: 130 additions & 0 deletions WebApp/styles/form.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit a13304c

Please sign in to comment.