RunasSudo/OpenTally
1
Fork 0
Code Issues 3 Pull Requests Activity

Web client: Count election asynchronously in Web Worker

Browse Source
This commit is contained in:
RunasSudo 2021-06-04 15:01:53 +10:00
parent ba8d9bf79c
commit b7f18a74ac
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
4 changed files with 302 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

422
html/index.html
View File

@ -24,226 +24,228 @@
<link rel="stylesheet" type="text/css" href="main.css?v=GITVERSION">
</head>
<body class="interactive">
<div class="menudiv">
<input type="file" id="bltFile">
<button onclick="clickCount()">Count</button>
<!--<label>
Preset:
<select id="selPreset" onchange="changePreset()">
<option value="scottish" selected>Scottish STV</option>
<option value="senate">Australian Senate STV</option>
<option value="meek">Meek STV</option>
<option value="wright">Wright STV</option>
<option value="prsa77">PRSA 1977</option>
<option value="ers97">ERS97</option>
</select>
</label>-->
<button id="btnAdvancedOptions" onclick="clickAdvancedOptions()">Show advanced options</button>
<!--GITREV-->
<!--<a href="https://yingtongli.me/blog/2020/12/24/pyrcv2.html">Information and instructions</a> &middot;
<a href="blt/">Ballot input/editor</a>-->
<div id="divLoading">
Loading&hellip;
</div>
<div id="divAdvancedOptions" class="menudiv cols-12 cols-sm-6" style="display: none;">
<div class="col-6" style="align-self: start;">
<div class="subheading">
Method specification:
</div>
<div>
<label>
Quota:
<select id="selQuotaCriterion">
<option value="geq" selected>&gt;=</option>
<option value="gt">&gt;</option>
</select>
</label>
<label>
<select id="selQuota">
<option value="droop" selected>Droop</option>
<option value="droop_exact">Droop (exact)</option>
<option value="hare">Hare</option>
<option value="hare_exact">Hare (exact)</option>
</select>
</label>
<!--<label>
<select id="selQuotaMode">
<option value="static" selected>Static quota</option>
<option value="progressive">Progressive quota</option>
<option value="ers97">Static with ERS97 rules</option>
</select>
</label>-->
</div>
<div>
<label>
Surplus order:
<select id="selSurplus">
<option value="by_size" selected>By size</option>
<option value="by_order">By order</option>
</select>
</label>
<label>
Method:
<select id="selTransfers">
<option value="wig" selected>Weighted inclusive Gregory</option>
<option value="uig">Unweighted inclusive Gregory</option>
<option value="eg">Exclusive Gregory (last bundle)</option>
<option value="meek">Meek method</option>
</select>
</label>
<label>
<select id="selPapers">
<option value="both" selected>Include non-transferable papers</option>
<option value="transferable">Use transferable papers only</option>
</select>
</label>
</div>
<div>
<label>
Exclusion:
<select id="selExclusion">
<option value="single_stage" selected>Exclude in single stage</option>
<option value="by_value">Exclude by value</option>
<option value="parcels_by_order">Exclude by parcel (by order)</option>
<!--<option value="wright">Wright method (re-iterate)</option>-->
</select>
</label>
</div>
<!--<div class="subheading">
Tie-breaking:
</div>
<div>
<label>
Ties:
<select id="selTies">
<option value="backwards_random" selected>Backwards then random</option>
<option value="forwards_random">Forwards then random</option>
<option value="random">Random</option>
<option value="prompt">Prompt</option>
</select>
</label>
<label>
Random seed:
<input type="text" id="txtSeed" value="">
</label>
</div>
<div class="subheading">
Constraints:
</div>
<div>
<input type="file" id="conFile">
</div>-->
</div>
<div class="col-6 cols-12" style="align-self: start;">
<div class="col-12 subheading">
Numeric representation:
</div>
<div class="col-12">
<!--<label>
Numbers:
<select id="selNumbers">
<option value="native">Native</option>
<option value="rational">Rational</option>
<option value="fixed" selected>Fixed</option>
<option value="gfixed">Fixed (guarded)</option>
</select>
</label>
<label>
Decimal places (if Numbers = Fixed):
<input type="number" id="txtDP" value="5" min="0" style="width: 3em;">
</label>-->
</div>
<div class="col-12">
<label>
Display up to
<input type="number" id="txtPPDP" value="2" min="0" style="width: 3em;">
d.p.
</label>
</div>
<!--<div class="col-12 subheading">
Count optimisations:
</div>
<label class="col-6">
<input type="checkbox" id="chkBulkElection" checked>
Bulk election
</label>
<label class="col-6">
<input type="checkbox" id="chkBulkExclusion">
Bulk exclusion
</label>
<label class="col-12">
<input type="checkbox" id="chkDeferSurpluses">
Defer surpluses
<div id="divUI" style="display: none;">
<div class="menudiv">
<input type="file" id="bltFile">
<button onclick="clickCount()">Count</button>
<!--<label>
Preset:
<select id="selPreset" onchange="changePreset()">
<option value="scottish" selected>Scottish STV</option>
<option value="senate">Australian Senate STV</option>
<option value="meek">Meek STV</option>
<option value="wright">Wright STV</option>
<option value="prsa77">PRSA 1977</option>
<option value="ers97">ERS97</option>
</select>
</label>-->
<div class="col-12 subheading">
Rounding:
<button id="btnAdvancedOptions" onclick="clickAdvancedOptions()">Show advanced options</button>
OpenTally (revision <span id="spanRevNum"></span>)
<!--&middot; <a href="https://yingtongli.me/blog/2020/12/24/pyrcv2.html">Information and instructions</a> &middot;
<a href="blt/">Ballot input/editor</a>-->
</div>
<div id="divAdvancedOptions" class="menudiv cols-12 cols-sm-6" style="display: none;">
<div class="col-6" style="align-self: start;">
<div class="subheading">
Method specification:
</div>
<div>
<label>
Quota:
<select id="selQuotaCriterion">
<option value="geq" selected>&gt;=</option>
<option value="gt">&gt;</option>
</select>
</label>
<label>
<select id="selQuota">
<option value="droop" selected>Droop</option>
<option value="droop_exact">Droop (exact)</option>
<option value="hare">Hare</option>
<option value="hare_exact">Hare (exact)</option>
</select>
</label>
<!--<label>
<select id="selQuotaMode">
<option value="static" selected>Static quota</option>
<option value="progressive">Progressive quota</option>
<option value="ers97">Static with ERS97 rules</option>
</select>
</label>-->
</div>
<div>
<label>
Surplus order:
<select id="selSurplus">
<option value="by_size" selected>By size</option>
<option value="by_order">By order</option>
</select>
</label>
<label>
Method:
<select id="selTransfers">
<option value="wig" selected>Weighted inclusive Gregory</option>
<option value="uig">Unweighted inclusive Gregory</option>
<option value="eg">Exclusive Gregory (last bundle)</option>
<option value="meek">Meek method</option>
</select>
</label>
<label>
<select id="selPapers">
<option value="both" selected>Include non-transferable papers</option>
<option value="transferable">Use transferable papers only</option>
</select>
</label>
</div>
<div>
<label>
Exclusion:
<select id="selExclusion">
<option value="single_stage" selected>Exclude in single stage</option>
<option value="by_value">Exclude by value</option>
<option value="parcels_by_order">Exclude by parcel (by order)</option>
<!--<option value="wright">Wright method (re-iterate)</option>-->
</select>
</label>
</div>
<!--<div class="subheading">
Tie-breaking:
</div>
<div>
<label>
Ties:
<select id="selTies">
<option value="backwards_random" selected>Backwards then random</option>
<option value="forwards_random">Forwards then random</option>
<option value="random">Random</option>
<option value="prompt">Prompt</option>
</select>
</label>
<label>
Random seed:
<input type="text" id="txtSeed" value="">
</label>
</div>
<div class="subheading">
Constraints:
</div>
<div>
<input type="file" id="conFile">
</div>-->
</div>
<div class="col-6">
<label>
<input type="checkbox" id="chkRoundQuota" checked>
Quota:
<div class="col-6 cols-12" style="align-self: start;">
<div class="col-12 subheading">
Numeric representation:
</div>
<div class="col-12">
<!--<label>
Numbers:
<select id="selNumbers">
<option value="native">Native</option>
<option value="rational">Rational</option>
<option value="fixed" selected>Fixed</option>
<option value="gfixed">Fixed (guarded)</option>
</select>
</label>
<label>
Decimal places (if Numbers = Fixed):
<input type="number" id="txtDP" value="5" min="0" style="width: 3em;">
</label>-->
</div>
<div class="col-12">
<label>
Display up to
<input type="number" id="txtPPDP" value="2" min="0" style="width: 3em;">
d.p.
</label>
</div>
<!--<div class="col-12 subheading">
Count optimisations:
</div>
<label class="col-6">
<input type="checkbox" id="chkBulkElection" checked>
Bulk election
</label>
<label>
<input type="number" id="txtRoundQuota" value="0" min="0" style="width: 3em;">
d.p.
</label>
</div>
<div class="col-6">
<label>
<input type="checkbox" id="chkRoundVotes">
Votes:
</label>
<label>
<input type="number" id="txtRoundVotes" value="0" min="0" style="width: 3em;">
d.p.
</label>
</div>
<div class="col-6">
<label>
<input type="checkbox" id="chkRoundTVs">
Transfer values:
</label>
<label>
<input type="number" id="txtRoundTVs" value="0" min="0" style="width: 3em;">
d.p.
</label>
</div>
<div class="col-6">
<label>
<input type="checkbox" id="chkRoundWeights">
Ballot weights:
</label>
<label>
<input type="number" id="txtRoundWeights" value="0" min="0" style="width: 3em;">
d.p.
<label class="col-6">
<input type="checkbox" id="chkBulkExclusion">
Bulk exclusion
</label>
<label class="col-12">
<input type="checkbox" id="chkDeferSurpluses">
Defer surpluses
</label>-->
<div class="col-12 subheading">
Rounding:
</div>
<div class="col-6">
<label>
<input type="checkbox" id="chkRoundQuota" checked>
Quota:
</label>
<label>
<input type="number" id="txtRoundQuota" value="0" min="0" style="width: 3em;">
d.p.
</label>
</div>
<div class="col-6">
<label>
<input type="checkbox" id="chkRoundVotes">
Votes:
</label>
<label>
<input type="number" id="txtRoundVotes" value="0" min="0" style="width: 3em;">
d.p.
</label>
</div>
<div class="col-6">
<label>
<input type="checkbox" id="chkRoundTVs">
Transfer values:
</label>
<label>
<input type="number" id="txtRoundTVs" value="0" min="0" style="width: 3em;">
d.p.
</label>
</div>
<div class="col-6">
<label>
<input type="checkbox" id="chkRoundWeights">
Ballot weights:
</label>
<label>
<input type="number" id="txtRoundWeights" value="0" min="0" style="width: 3em;">
d.p.
</label>
</div>
</div>
</div>
<div id="resultLogs1" style="white-space: pre-wrap;"></div>
<table id="result" class="result"></table>
<div id="resultLogs2"></div>
<div id="printPane" style="display: none;">
<button onclick="printResult()">Print result</button>
<label>
Paper size:
<select id="selPaperSize">
<option value="A4" selected>A4</option>
<option value="A3">A3</option>
<option value="letter">US Letter</option>
</select>
</label>
</div>
<div id="printWarning">Printing directly from this page is not supported. Use the ‘Print result’ button to generate a printer-friendly report.</div>
</div>
<div id="resultLogs1" style="white-space: pre-wrap;"></div>
<table id="result" class="result"></table>
<div id="resultLogs2"></div>
<div id="printPane" style="display: none;">
<button onclick="printResult()">Print result</button>
<label>
Paper size:
<select id="selPaperSize">
<option value="A4" selected>A4</option>
<option value="A3">A3</option>
<option value="letter">US Letter</option>
</select>
</label>
</div>
<div id="printWarning">Printing directly from this page is not supported. Use the ‘Print result’ button to generate a printer-friendly report.</div>
<script>
var openTallyVersion = 'GITVERSION';
</script>
<script src="opentally.js?v=GITVERSION"></script>
<script src="index.js?v=GITVERSION"></script>
</body>

90
html/index.js
View File

@ -25,22 +25,40 @@ function clickAdvancedOptions() {
}
}
var wasm = wasm_bindgen;
var tblResult = document.getElementById('result');
var divLogs2 = document.getElementById('resultLogs2');
var olStageComments;
function updateResultTable(result) {
for (let i = 0; i < result.length; i++) {
tblResult.rows[i].insertAdjacentHTML('beforeend', result[i]);
}
}
var worker = new Worker('worker.js');
function updateStageComments(comment) {
let elLi = document.createElement('li');
elLi.innerHTML = comment;
olStageComments.append(elLi);
worker.onmessage = function(evt) {
if (evt.data.type === 'init') {
document.getElementById('spanRevNum').innerText = evt.data.version;
document.getElementById('divLoading').style.display = 'none';
document.getElementById('divUI').style.display = 'block';
} else if (evt.data.type === 'initResultsTable') {
tblResult.innerHTML = evt.data.content;
divLogs2.innerHTML = '<p>Stage comments:</p>';
olStageComments = document.createElement('ol');
divLogs2.append(olStageComments);
} else if (evt.data.type === 'describeCount') {
document.getElementById('resultLogs1').innerHTML = evt.data.content;
} else if (evt.data.type === 'updateResultsTable') {
for (let i = 0; i < evt.data.result.length; i++) {
tblResult.rows[i].insertAdjacentHTML('beforeend', evt.data.result[i]);
}
} else if (evt.data.type === 'updateStageComments') {
let elLi = document.createElement('li');
elLi.innerHTML = evt.data.comment;
olStageComments.append(elLi);
} else if (evt.data.type === 'finalResultSummary') {
divLogs2.insertAdjacentHTML('beforeend', evt.data.summary);
}
}
async function clickCount() {
@ -49,24 +67,14 @@ async function clickCount() {
}
// Read BLT file
let filePath = document.getElementById('bltFile').value;
filePath = filePath.substring(Math.max(filePath.lastIndexOf('\\'), filePath.lastIndexOf('/')) + 1);
let bltFile = document.getElementById('bltFile').files[0];
let electionData = await bltFile.text();
// Load WASM
await wasm_bindgen('opentally_bg.wasm');
// Init election
let election = wasm.election_from_blt_Rational(electionData);
// Init results table
tblResult.innerHTML = wasm.init_results_table_Rational(election);
divLogs2.innerHTML = '<p>Stage comments:</p>';
olStageComments = document.createElement('ol');
divLogs2.append(olStageComments);
// Init STV options
let opts = wasm.STVOptions.new(
let optsStr = [
document.getElementById('chkRoundTVs').checked ? parseInt(document.getElementById('txtRoundTVs').value) : null,
document.getElementById('chkRoundWeights').checked ? parseInt(document.getElementById('txtRoundWeights').value) : null,
document.getElementById('chkRoundVotes').checked ? parseInt(document.getElementById('txtRoundVotes').value) : null,
@ -78,29 +86,13 @@ async function clickCount() {
document.getElementById('selPapers').value == 'transferable',
document.getElementById('selExclusion').value,
parseInt(document.getElementById('txtPPDP').value),
);
];
// Describe count
let filePath = document.getElementById('bltFile').value;
filePath = filePath.substring(Math.max(filePath.lastIndexOf('\\'), filePath.lastIndexOf('/')) + 1);
document.getElementById('resultLogs1').innerHTML = wasm.describe_count_Rational(filePath, election, opts);
// Step election
let state = wasm.CountStateRational.new(election);
wasm.count_init_Rational(state, opts);
updateResultTable(wasm.update_results_table_Rational(1, state, opts));
updateStageComments(wasm.update_stage_comments_Rational(state));
for (let stageNum = 2;; stageNum++) {
let isDone = wasm.count_one_stage_Rational(state, opts);
if (isDone) {
break;
}
updateResultTable(wasm.update_results_table_Rational(stageNum, state, opts));
updateStageComments(wasm.update_stage_comments_Rational(state));
}
updateResultTable(wasm.finalise_results_table_Rational(state));
divLogs2.insertAdjacentHTML('beforeend', wasm.final_result_summary_Rational(state));
// Dispatch to worker
worker.postMessage({
'type': 'countElection',
'electionData': electionData,
'optsStr': optsStr,
'filePath': filePath
});
}

45
html/worker.js Normal file
View File

@ -0,0 +1,45 @@
importScripts('opentally.js');
var wasm = wasm_bindgen;
async function initWasm() {
await wasm_bindgen('opentally_bg.wasm');
postMessage({'type': 'init', 'version': wasm.version()});
}
initWasm();
onmessage = function(evt) {
if (evt.data.type === 'countElection') {
// Init election
let election = wasm.election_from_blt_Rational(evt.data.electionData);
// Init results table
postMessage({'type': 'initResultsTable', 'content': wasm.init_results_table_Rational(election)});
// Init STV options
let opts = wasm.STVOptions.new.apply(null, evt.data.optsStr);
// Describe count
postMessage({'type': 'describeCount', 'content': wasm.describe_count_Rational(evt.data.filePath, election, opts)});
// Step election
let state = wasm.CountStateRational.new(election);
wasm.count_init_Rational(state, opts);
postMessage({'type': 'updateResultsTable', 'result': wasm.update_results_table_Rational(1, state, opts)});
postMessage({'type': 'updateStageComments', 'comment': wasm.update_stage_comments_Rational(state)});
for (let stageNum = 2;; stageNum++) {
let isDone = wasm.count_one_stage_Rational(state, opts);
if (isDone) {
break;
}
postMessage({'type': 'updateResultsTable', 'result': wasm.update_results_table_Rational(stageNum, state, opts)});
postMessage({'type': 'updateStageComments', 'comment': wasm.update_stage_comments_Rational(state)});
}
postMessage({'type': 'updateResultsTable', 'result': wasm.finalise_results_table_Rational(state)});
postMessage({'type': 'finalResultSummary', 'summary': wasm.final_result_summary_Rational(state)});
}
}

4
src/lib.rs
View File

@ -21,5 +21,9 @@ pub mod numbers;
pub mod stv;
use git_version::git_version;
use wasm_bindgen::prelude::wasm_bindgen;
pub const VERSION: &str = git_version!(args=["--always", "--dirty=-dev"], fallback="unknown");
#[wasm_bindgen]
pub fn version() -> String { VERSION.to_string() }