1<!doctype html>
2<html lang="en-us">
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
7    <link rel="stylesheet" href="common/emscripten.css"/>
8    <link rel="stylesheet" href="common/testing.css"/>
9    <title>speedtest1.wasm Worker</title>
10  </head>
11  <body>
12    <header id='titlebar'>speedtest1.wasm Worker</header>
13    <div>See also: <a href='speedtest1.html'>A main-thread variant of this page.</a></div>
14    <!-- emscripten bits -->
15    <figure id="module-spinner">
16      <div class="spinner"></div>
17      <div class='center'><strong>Initializing app...</strong></div>
18      <div class='center'>
19        On a slow internet connection this may take a moment.  If this
20        message displays for "a long time", intialization may have
21        failed and the JavaScript console may contain clues as to why.
22      </div>
23    </figure>
24    <div class="emscripten" id="module-status">Downloading...</div>
25    <div class="emscripten">
26      <progress value="0" max="100" id="module-progress" hidden='1'></progress>
27    </div><!-- /emscripten bits -->
28    <fieldset id='ui-controls' class='hidden'>
29      <legend>Options</legend>
30      <div id='toolbar'>
31        <div id='toolbar-select'>
32          <select id='select-flags' size='10' multiple></select>
33          <div>TODO? Options which require values are not represented here.</div>
34        </div>
35        <div class='toolbar-inner-vertical' id='toolbar-selected-flags'>
36          <button id='btn-reset-flags'>Reset Flags</button>
37          <button id='btn-output-clear'>Clear output</button>
38          <button id='btn-run'>Run</button>
39        </div>
40        <div class='toolbar-inner-vertical' id='toolbar-runner-controls'>
41          <button id='btn-reset-flags'>Reset Flags</button>
42          <button id='btn-output-clear'>Clear output</button>
43          <button id='btn-run'>Run</button>
44        </div>
45      </div>
46    </fieldset>
47    <div>
48      <span class='input-wrapper'>
49        <input type='checkbox' class='disable-during-eval' id='cb-reverse-log-order' checked></input>
50        <label for='cb-reverse-log-order' id='lbl-reverse-log-order'>Reverse log order</label>
51      </span>
52    </div>
53    <div id='test-output'></div>
54    <style>
55      #test-output {
56          white-space: break-spaces;
57          overflow: auto;
58      }
59      #toolbar {
60          display: flex;
61          flex-direction: row;
62          flex-wrap: wrap;
63      }
64      #toolbar > * {
65          margin: 0 0.5em;
66      }
67      .toolbar-inner-vertical {
68          display: flex;
69          flex-direction: column;
70          justify-content: space-between;
71      }
72      #toolbar-select {
73          display: flex;
74          flex-direction: column;
75      }
76      .toolbar-inner-vertical > *, #toolbar-select > * {
77          margin: 0.2em 0;
78      }
79      #select-flags > option {
80          white-space: pre;
81          font-family: monospace;
82      }
83      fieldset {
84          border-radius: 0.5em;
85      }
86      #toolbar-runner-controls { flex-grow: 1 }
87      #toolbar-runner-controls > * { flex: 1 0 auto }
88      #toolbar-selected-flags::before {
89        font-family: initial;
90        content:"Selected flags: ";
91      }
92      #toolbar-selected-flags {
93        font-family: monospace;
94        justify-content: flex-start;
95      }
96    </style>
97    <script>(function(){
98      'use strict';
99      const E = (sel)=>document.querySelector(sel);
100      const eOut = E('#test-output');
101      const log2 = function(cssClass,...args){
102        let ln;
103        if(1 || cssClass){
104          ln = document.createElement('div');
105          if(cssClass) ln.classList.add(cssClass);
106          ln.append(document.createTextNode(args.join(' ')));
107        }else{
108          // This doesn't work with the "reverse order" option!
109          ln = document.createTextNode(args.join(' ')+'\n');
110        }
111        eOut.append(ln);
112      };
113      const log = (...args)=>{
114        //console.log(...args);
115        log2('', ...args);
116      };
117      const logErr = function(...args){
118        //console.error(...args);
119        log2('error', ...args);
120      };
121      const logWarn = function(...args){
122        //console.warn(...args);
123        log2('warning', ...args);
124      };
125
126      const spacePad = function(str,len=18){
127        if(str.length===len) return str;
128        else if(str.length>len) return str.substr(0,len);
129        const a = []; a.length = len - str.length;
130        return str+a.join(' ');
131      };
132      // OPTION elements seem to ignore white-space:pre, so do this the hard way...
133      const nbspPad = function(str,len=18){
134        if(str.length===len) return str;
135        else if(str.length>len) return str.substr(0,len);
136        const a = []; a.length = len - str.length;
137        return str+a.join('&nbsp;');
138      };
139
140      const W = new Worker("speedtest1-worker.js");
141      const mPost = function(msgType,payload){
142        W.postMessage({type: msgType, data: payload});
143      };
144
145      const eFlags = E('#select-flags');
146      const eSelectedFlags = E('#toolbar-selected-flags');
147
148      const getSelectedFlags = ()=>Array.prototype.map.call(eFlags.selectedOptions, (v)=>v.value);
149      const updateSelectedFlags = function(){
150        eSelectedFlags.innerText = '';
151        getSelectedFlags().forEach(function(f){
152          const e = document.createElement('span');
153          e.innerText = f;
154          eSelectedFlags.appendChild(e);
155        });
156      };
157      eFlags.addEventListener('change', updateSelectedFlags );
158      {
159        const flags = Object.create(null);
160        /* TODO? Flags which require values need custom UI
161           controls and some of them make little sense here
162           (e.g. --script FILE). */
163        flags["autovacuum"] = "Enable AUTOVACUUM mode";
164        //flags["cachesize"] = "N       Set the cache size to N";
165        flags["checkpoint"] = "Run PRAGMA wal_checkpoint after each test case";
166        flags["exclusive"] = "Enable locking_mode=EXCLUSIVE";
167        flags["explain"] = "Like --sqlonly but with added EXPLAIN keywords";
168        //flags["heap"] = "SZ MIN       Memory allocator uses SZ bytes & min allocation MIN";
169        flags["incrvacuum"] = "Enable incremenatal vacuum mode";
170        //flags["journal"] = "M         Set the journal_mode to M";
171        //flags["key"] = "KEY           Set the encryption key to KEY";
172        //flags["lookaside"] = "N SZ    Configure lookaside for N slots of SZ bytes each";
173        flags["memdb"] = "Use an in-memory database";
174        //flags["mmap"] = "SZ           MMAP the first SZ bytes of the database file";
175        flags["multithread"] = "Set multithreaded mode";
176        flags["nomemstat"] = "Disable memory statistics";
177        flags["nosync"] = "Set PRAGMA synchronous=OFF";
178        flags["notnull"] = "Add NOT NULL constraints to table columns";
179        //flags["output"] = "FILE       Store SQL output in FILE";
180        //flags["pagesize"] = "N        Set the page size to N";
181        //flags["pcache"] = "N SZ       Configure N pages of pagecache each of size SZ bytes";
182        //flags["primarykey"] = "Use PRIMARY KEY instead of UNIQUE where appropriate";
183        //flags["repeat"] = "N          Repeat each SELECT N times (default: 1)";
184        flags["reprepare"] = "Reprepare each statement upon every invocation";
185        //flags["reserve"] = "N         Reserve N bytes on each database page";
186        //flags["script"] = "FILE       Write an SQL script for the test into FILE";
187        flags["serialized"] = "Set serialized threading mode";
188        flags["singlethread"] = "Set single-threaded mode - disables all mutexing";
189        flags["sqlonly"] = "No-op.  Only show the SQL that would have been run.";
190        flags["shrink"] = "memory     Invoke sqlite3_db_release_memory() frequently.";
191        //flags["size"] = "N            Relative test size.  Default=100";
192        flags["strict"] = "Use STRICT table where appropriate";
193        flags["stats"] = "Show statistics at the end";
194        //flags["temp"] = "N            N from 0 to 9.  0: no temp table. 9: all temp tables";
195        //flags["testset"] = "T         Run test-set T (main, cte, rtree, orm, fp, debug)";
196        flags["trace"] = "Turn on SQL tracing";
197        //flags["threads"] = "N         Use up to N threads for sorting";
198        /*
199          The core API's WASM build does not support UTF16, but in
200          this app it's not an issue because the data are not crossing
201          JS/WASM boundaries.
202        */
203        flags["utf16be"] = "Set text encoding to UTF-16BE";
204        flags["utf16le"] = "Set text encoding to UTF-16LE";
205        flags["verify"] = "Run additional verification steps.";
206        flags["without"] = "rowid     Use WITHOUT ROWID where appropriate";
207        const preselectedFlags = [
208          'singlethread',
209          'memdb'
210        ];
211        Object.keys(flags).sort().forEach(function(f){
212          const opt = document.createElement('option');
213          eFlags.appendChild(opt);
214          const lbl = nbspPad('--'+f)+flags[f];
215          //opt.innerText = lbl;
216          opt.innerHTML = lbl;
217          opt.value = '--'+f;
218          if(preselectedFlags.indexOf(f) >= 0) opt.selected = true;
219        });
220
221        const cbReverseLog = E('#cb-reverse-log-order');
222        const lblReverseLog = E('#lbl-reverse-log-order');
223        if(cbReverseLog.checked){
224          lblReverseLog.classList.add('warning');
225          eOut.classList.add('reverse');
226        }
227        cbReverseLog.addEventListener('change', function(){
228          if(this.checked){
229            eOut.classList.add('reverse');
230            lblReverseLog.classList.add('warning');
231          }else{
232            eOut.classList.remove('reverse');
233            lblReverseLog.classList.remove('warning');
234          }
235        }, false);
236        updateSelectedFlags();
237      }
238      E('#btn-output-clear').addEventListener('click', ()=>{
239        eOut.innerText = '';
240      });
241      E('#btn-reset-flags').addEventListener('click',()=>{
242        eFlags.value = '';
243        updateSelectedFlags();
244      });
245      E('#btn-run').addEventListener('click',function(){
246        log("Running speedtest1. UI controls will be disabled until it completes.");
247        mPost('run', getSelectedFlags());
248      });
249
250      const eControls = E('#ui-controls');
251      /** Update Emscripten-related UI elements while loading the module. */
252      const updateLoadStatus = function f(text){
253        if(!f.last){
254          f.last = { text: '', step: 0 };
255          const E = (cssSelector)=>document.querySelector(cssSelector);
256          f.ui = {
257            status: E('#module-status'),
258            progress: E('#module-progress'),
259            spinner: E('#module-spinner')
260          };
261        }
262        if(text === f.last.text) return;
263        f.last.text = text;
264        if(f.ui.progress){
265          f.ui.progress.value = f.last.step;
266          f.ui.progress.max = f.last.step + 1;
267        }
268        ++f.last.step;
269        if(text) {
270          f.ui.status.classList.remove('hidden');
271          f.ui.status.innerText = text;
272        }else{
273          if(f.ui.progress){
274            f.ui.progress.remove();
275            f.ui.spinner.remove();
276            delete f.ui.progress;
277            delete f.ui.spinner;
278          }
279          f.ui.status.classList.add('hidden');
280        }
281      };
282
283      log("Control-click the flags to (de)select multiple flags.");
284      logWarn("\nThe easiest way to try different optimization levels is, from this directory:\n"+
285              "  $ make clean; make -e emcc_opt='-O2' speedtest1\n"+
286              "Then reload this page. -O2 seems to consistently produce the fastest results.\n");
287      logWarn('\nAchtung: the Worker thread overhead slightly reduces the speed',
288              'compared to running the same options via speedtest1.html.\n'+
289              'TODO: add a link in this app which launches the main-thread',
290              'version with the same flags.\n');
291
292      W.onmessage = function(msg){
293        msg = msg.data;
294        switch(msg.type){
295            case 'ready': log("Worker is ready."); eControls.classList.remove('hidden'); break;
296            case 'stdout': log(msg.data); break;
297            case 'stdout': logErr(msg.data); break;
298            case 'run-start':
299              eControls.disabled = true;
300              log("Running speedtest1 with argv =",msg.data.join(' '));
301              break;
302            case 'run-end': log("speedtest1 finished.");
303              eControls.disabled = false;
304              // app output is in msg.data
305              break;
306            case 'error': logErr(msg.data); break;
307            case 'load-status': updateLoadStatus(msg.data); break;
308            default:
309              logErr("Unhandled worker message type:",arguments[0]);
310              break;
311        }
312      };
313    })();</script>
314  </body>
315</html>
316