From 028bc908e37474dbd93e32721911caff16d2a9c4 Mon Sep 17 00:00:00 2001 From: Muhammad Khatri Date: Mon, 23 Dec 2019 15:59:56 -0600 Subject: [PATCH 01/41] chore: add .vscode to gitignore --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index 9beb605..e155d5f 100644 --- a/.gitignore +++ b/.gitignore @@ -12,3 +12,5 @@ venv/ .env* !.env.example + +.vscode/ \ No newline at end of file From 12f24901bacfc2bb837c4b828168f76edf1f4e72 Mon Sep 17 00:00:00 2001 From: Muhammad Khatri Date: Mon, 23 Dec 2019 16:00:40 -0600 Subject: [PATCH 02/41] perf: remove nested css and use more efficient row addition to admin panel --- gavel/static/css/style.scss | 26 +- gavel/static/js/admin/admin_live.js | 431 ++++++++++++++-------------- gavel/templates/admin.html | 284 ++++++++++-------- 3 files changed, 376 insertions(+), 365 deletions(-) diff --git a/gavel/static/css/style.scss b/gavel/static/css/style.scss index 42e3899..092787b 100644 --- a/gavel/static/css/style.scss +++ b/gavel/static/css/style.scss @@ -1201,7 +1201,7 @@ dl.instructions dt p { //border-radius: 4px 4px 0px 0px !important; } -.admin-table > table > thead > tr { +.admin-table-head { border: 0; max-height: 48px !important; @@ -1209,7 +1209,7 @@ dl.instructions dt p { //border-radius: 4px 4px 0px 0px !important; } -.admin-table > table > thead > tr > th { +.admin-table-head-item { border: 0; text-align: left; font-family: Rubik; @@ -1222,28 +1222,6 @@ dl.instructions dt p { color: #000000; } -.admin-table > table > tbody { - background: white; - border: 1px solid #B7B7B7; - box-sizing: border-box; -} - -.admin-table > table > tbody > tr { - border: 0; - border-bottom: 1px solid #B7B7B7; - height: 48px; - max-height: 48px; -} - -.admin-table > table > tbody > tr > td { - border: 0; - font-family: Rubik; - font-style: normal; - font-weight: normal; - line-height: normal; - font-size: 14px; -} - .admin-head-check { width: 48px; max-width: 48px !important; diff --git a/gavel/static/js/admin/admin_live.js b/gavel/static/js/admin/admin_live.js index 5055682..ad9fb5b 100644 --- a/gavel/static/js/admin/admin_live.js +++ b/gavel/static/js/admin/admin_live.js @@ -7,63 +7,63 @@ let currentItems; let token; -function setToken (t) { token = t } +function setToken(t) { token = t } const tableBody = document.getElementById("admin-table-body"); const tableHead = document.getElementById("admin-table-head"); const itemsHead = ` - - + + - Id - Project Name - Location - Description - Mu - Sigma2 - Votes - Seen - Skipped - Actions + Id + Project Name + Location + Description + Mu + Sigma2 + Votes + Seen + Skipped + Actions `; const annotatorsHead = ` - - + + - Id - Name - Email - Description - Votes - Next (Id) - Prev. (Id) - Updated - Actions + Id + Name + Email + Description + Votes + Next (Id) + Prev. (Id) + Updated + Actions `; const flagsHead = ` - - + + - Id - Judge Name - Project Name - Project Location - Reason - Actions + Id + Judge Name + Project Name + Project Location + Reason + Actions `; @@ -161,8 +161,9 @@ async function populateItems(data) { `; - const newRow = tableBody.insertRow(tableBody.rows.length); + const newRow = document.createElement('tr'); newRow.innerHTML = item_template; + tableBody.appendChild(row); } catch (e) { console.error(`Error populating item at index ${i}`); console.log(e) @@ -229,8 +230,9 @@ async function populateAnnotators(data) { `; - const newRow = tableBody.insertRow(tableBody.rows.length); + const newRow = document.createElement('tr'); newRow.innerHTML = annotator_template; + tableBody.appendChild(newRow); } catch (e) { console.error(`Error populating annotator at index ${i}`); console.log(e) @@ -271,8 +273,9 @@ async function populateFlags(data) { `; - const newRow = tableBody.insertRow(tableBody.rows.length); + const newRow = document.createElement('tr'); newRow.innerHTML = flag_template; + tableBody.appendChild(newRow); } catch (e) { console.error(`Error populating flag at index ${i}`); console.log(e); @@ -297,7 +300,7 @@ async function spawnTable(id) { await data; } }).then(async (data) => { - switch(id) { + switch (id) { case "items": Promise.all([ clearTableBody(), @@ -326,38 +329,38 @@ async function spawnTable(id) { } async function refresh() { - const data = $.ajax({ - url: "/admin/auxiliary", - type: "get", - dataType: "json", - error: function (error) { - return error; - }, - success: async function (data) { - await data; - } - }).then((data) => { - const flag_count = data.flag_count; - const item_count = data.item_count; - const votes = data.votes; - const sigma = data.average_sigma; - const seen = data.average_seen; - - // Populate vote count - let vote_count = document.getElementById("total-votes"); - vote_count.innerText = votes; - - // Populate total active projects - let total_active = document.getElementById("total-active"); - total_active.innerText = item_count; - - // Populate avg. sigma^2 - let average_sigma = document.getElementById("average-sigma"); - average_sigma.innerText = sigma.toFixed(4); - - let average_seen = document.getElementById("average-seen"); - average_seen.innerText = seen.toFixed(2); - }); + const data = $.ajax({ + url: "/admin/auxiliary", + type: "get", + dataType: "json", + error: function (error) { + return error; + }, + success: async function (data) { + await data; + } + }).then((data) => { + const flag_count = data.flag_count; + const item_count = data.item_count; + const votes = data.votes; + const sigma = data.average_sigma; + const seen = data.average_seen; + + // Populate vote count + let vote_count = document.getElementById("total-votes"); + vote_count.innerText = votes; + + // Populate total active projects + let total_active = document.getElementById("total-active"); + total_active.innerText = item_count; + + // Populate avg. sigma^2 + let average_sigma = document.getElementById("average-sigma"); + average_sigma.innerText = sigma.toFixed(4); + + let average_seen = document.getElementById("average-seen"); + average_seen.innerText = seen.toFixed(2); + }); } /* @@ -365,192 +368,192 @@ async function refresh() { * */ function toggleSelector() { - const selectorModal = document.getElementById("selector"); - selectorModal.style.display = selectorModal.style.display === "block" ? "none" : "block"; + const selectorModal = document.getElementById("selector"); + selectorModal.style.display = selectorModal.style.display === "block" ? "none" : "block"; } function showTab(e) { - const content = document.getElementById("admin-switcher-content"); - const batch = document.getElementById("batchPanel"); - currentTab = e; - content.innerText = "none"; - batch.style.display = "none"; - localStorage.setItem("currentTab", e); - clearTable(); - switch (localStorage.getItem("currentTab")) { - case "annotators": - content.innerText = "Manage Judges"; - batch.style.display = "inline-block"; - setTableHead(annotatorsHead); - break; - case "items": - content.innerText = "Manage Projects"; - batch.style.display = "inline-block"; - setTableHead(itemsHead); - break; - case "flags": - content.innerText = "Manage Reports"; - setTableHead(flagsHead); - break; - default: - content.innerText = "Manage Reports"; - setTableHead(flagsHead); - break; - } - setAddButtonState(); - triggerTableUpdate(); + const content = document.getElementById("admin-switcher-content"); + const batch = document.getElementById("batchPanel"); + currentTab = e; + content.innerText = "none"; + batch.style.display = "none"; + localStorage.setItem("currentTab", e); + clearTable(); + switch (localStorage.getItem("currentTab")) { + case "annotators": + content.innerText = "Manage Judges"; + batch.style.display = "inline-block"; + setTableHead(annotatorsHead); + break; + case "items": + content.innerText = "Manage Projects"; + batch.style.display = "inline-block"; + setTableHead(itemsHead); + break; + case "flags": + content.innerText = "Manage Reports"; + setTableHead(flagsHead); + break; + default: + content.innerText = "Manage Reports"; + setTableHead(flagsHead); + break; + } + setAddButtonState(); + triggerTableUpdate(); } function setAddButtonState() { - const tab = localStorage.getItem("currentTab"); - const text = document.getElementById('add-text'); - const add = document.getElementById('add'); - if (tab === "annotators") { - text.innerText = "+ Add Judges"; - text.onclick = function () { - openModal('add-judges') - }; - //text.addEventListener('onclick', openModal('add-judges')); - } - if (tab === "items") { - text.innerText = "+ Add Projects"; - text.onclick = function () { - openModal('add-projects') - }; - //text.addEventListener('onclick', openModal('add-projects')); - } - if (tab === "flags") { - text.innerText = ""; - text.onclick = null; - } + const tab = localStorage.getItem("currentTab"); + const text = document.getElementById('add-text'); + const add = document.getElementById('add'); + if (tab === "annotators") { + text.innerText = "+ Add Judges"; + text.onclick = function () { + openModal('add-judges') + }; + //text.addEventListener('onclick', openModal('add-judges')); + } + if (tab === "items") { + text.innerText = "+ Add Projects"; + text.onclick = function () { + openModal('add-projects') + }; + //text.addEventListener('onclick', openModal('add-projects')); + } + if (tab === "flags") { + text.innerText = ""; + text.onclick = null; + } } function openModal(modal) { - $("body").find(".modal-wrapper").css('display', 'none'); + $("body").find(".modal-wrapper").css('display', 'none'); - var dumdum; - modal !== 'close' && modal ? document.getElementById(modal).style.display = 'block' : dumdum = 'dum'; + var dumdum; + modal !== 'close' && modal ? document.getElementById(modal).style.display = 'block' : dumdum = 'dum'; } $(".full-modal").click(function (event) { - //if you click on anything except the modal itself or the "open modal" link, close the modal - if (!$(event.target).hasClass('admin-modal-content') && $(event.target).hasClass('full-modal')) { - openModal('close') - } - if (!$(event.target).hasClass('admin-switcher-modal') && - !$(event.target).parents('*').hasClass('admin-switcher') && - !$(event.target).hasClass('admin-switcher')) { - $("body").find("#selector").css('display', 'none') - } + //if you click on anything except the modal itself or the "open modal" link, close the modal + if (!$(event.target).hasClass('admin-modal-content') && $(event.target).hasClass('full-modal')) { + openModal('close') + } + if (!$(event.target).hasClass('admin-switcher-modal') && + !$(event.target).parents('*').hasClass('admin-switcher') && + !$(event.target).hasClass('admin-switcher')) { + $("body").find("#selector").css('display', 'none') + } }); function checkAllReports() { - let check = document.getElementById('check-all-reports'); - if (check.checked) { - $('#admin-table').find('input[type=checkbox]').each(function () { - this.checked = true; - }); - check.checked = true; - } else { - $('#admin-table').find('input[type=checkbox]:checked').each(function () { - this.checked = false; - }); - check.checked = false; - } + let check = document.getElementById('check-all-reports'); + if (check.checked) { + $('#admin-table').find('input[type=checkbox]').each(function () { + this.checked = true; + }); + check.checked = true; + } else { + $('#admin-table').find('input[type=checkbox]:checked').each(function () { + this.checked = false; + }); + check.checked = false; + } } function checkAllProjects() { - let check = document.getElementById('check-all-projects'); - if (check.checked) { - $('#admin-table').find('input[type=checkbox]').each(function () { - this.checked = true; - }); - check.checked = true; - } else { - $('#admin-table').find('input[type=checkbox]:checked').each(function () { - this.checked = false; - }); - check.checked = false; - } + let check = document.getElementById('check-all-projects'); + if (check.checked) { + $('#admin-table').find('input[type=checkbox]').each(function () { + this.checked = true; + }); + check.checked = true; + } else { + $('#admin-table').find('input[type=checkbox]:checked').each(function () { + this.checked = false; + }); + check.checked = false; + } } function checkAllJudges() { - let check = document.getElementById('check-all-judges'); - if (check.checked) { - $('#admin-table').find('input[type=checkbox]').each(function () { - this.checked = true; - }); - check.checked = true; - } else { - $('#admin-table').find('input[type=checkbox]:checked').each(function () { - this.checked = false; - }); - check.checked = false; - } + let check = document.getElementById('check-all-judges'); + if (check.checked) { + $('#admin-table').find('input[type=checkbox]').each(function () { + this.checked = true; + }); + check.checked = true; + } else { + $('#admin-table').find('input[type=checkbox]:checked').each(function () { + this.checked = false; + }); + check.checked = false; + } } const judgeCheckboxValues = JSON.parse(localStorage.getItem('judgeCheckboxValues')) || {}; const $judgeCheckboxes = $("#judge-check-container :checkbox"); -$judgeCheckboxes.on("change", function() { - $judgeCheckboxes.each(function() { - judgeCheckboxValues[this.id] = this.checked; - }); - localStorage.setItem("judgeCheckboxValues", JSON.stringify(judgeCheckboxValues)) +$judgeCheckboxes.on("change", function () { + $judgeCheckboxes.each(function () { + judgeCheckboxValues[this.id] = this.checked; + }); + localStorage.setItem("judgeCheckboxValues", JSON.stringify(judgeCheckboxValues)) }); const projectCheckboxValues = JSON.parse(localStorage.getItem('projectCheckboxValues')) || {}; const $projectCheckboxes = $("#project-check-container :checkbox"); -$projectCheckboxes.on("change", function() { - $projectCheckboxes.each(function() { - projectCheckboxValues[this.id] = this.checked; - }); - localStorage.setItem("projectCheckboxValues", JSON.stringify(projectCheckboxValues)) +$projectCheckboxes.on("change", function () { + $projectCheckboxes.each(function () { + projectCheckboxValues[this.id] = this.checked; + }); + localStorage.setItem("projectCheckboxValues", JSON.stringify(projectCheckboxValues)) }); let judgeIds = []; let projectIds = []; let form = null; $('#batchDelete').click(async function () { - const tab = localStorage.getItem("currentTab"); - projectIds = []; - judgeIds = []; - form = null; - if (tab === 'items') { - form = document.getElementById('batchDeleteItems'); - } else if (tab === 'annotators') { - form = document.getElementById('batchDeleteAnnotators'); - } - $('#admin-table').find('input[type="checkbox"]:checked').each(function () { - form.innerHTML = form.innerHTML + ''; - }); - try { - form.serializeArray() - } catch { + const tab = localStorage.getItem("currentTab"); + projectIds = []; + judgeIds = []; + form = null; + if (tab === 'items') { + form = document.getElementById('batchDeleteItems'); + } else if (tab === 'annotators') { + form = document.getElementById('batchDeleteAnnotators'); + } + $('#admin-table').find('input[type="checkbox"]:checked').each(function () { + form.innerHTML = form.innerHTML + ''; + }); + try { + form.serializeArray() + } catch { - } - const full = await form; - full.submit(); + } + const full = await form; + full.submit(); }); $('#batchDisable').click(async function () { - const tab = localStorage.getItem("currentTab"); - projectIds = []; - judgeIds = []; - form = null; - if (tab === 'items') { - form = document.getElementById('batchDisableItems'); - } else if (tab === 'annotators') { - form = document.getElementById('batchDisableAnnotators'); - } - $('#admin-table').find('input[type="checkbox"]:checked').each(function () { - form.innerHTML = form.innerHTML + ''; - }); - try { - form.serializeArray(); - } catch { + const tab = localStorage.getItem("currentTab"); + projectIds = []; + judgeIds = []; + form = null; + if (tab === 'items') { + form = document.getElementById('batchDisableItems'); + } else if (tab === 'annotators') { + form = document.getElementById('batchDisableAnnotators'); + } + $('#admin-table').find('input[type="checkbox"]:checked').each(function () { + form.innerHTML = form.innerHTML + ''; + }); + try { + form.serializeArray(); + } catch { - } - const full = await form; - full.submit(); + } + const full = await form; + full.submit(); }); diff --git a/gavel/templates/admin.html b/gavel/templates/admin.html index 09a0058..2142071 100644 --- a/gavel/templates/admin.html +++ b/gavel/templates/admin.html @@ -1,157 +1,187 @@ {% extends "layout.html" %} {% block title %}Admin{% endblock %} {% block content %} -
-