Gives optimal total cost and minimum tests possible.

rljacobson · rljacobson · commit e7ea46a9f488 · 2020-06-24T22:47:39.000-04:00
diff --git a/BayesTesting.html b/BayesTesting.html
@@ -29,15 +29,6 @@ <h1 id="page-heading">Comparison Between Individual Testing and Sample Pooling f
 <div id="center_content">
     <div id="top_pane" class="row-container">
         <div id="illustration" class="row-item column-container">
-            <div id="people_count_group" class="column-item slider-labels">
-                <label for="people_count_slider" id="people_count_label">
-                    Number of
-                    People: <span id="people_count"></span>
-                </label>
-                <input type="number" min="100" max="1000000000" step="10"
-                       value="2500" id="people_count_slider"
-                       oninput="sliderUpdate(value, '#people_count_slider')"/>
-            </div>
             <div id="people_dots_group" class="column-item row-container">
                 <div id="people_dots" class="row-item"></div>
                 <div id="displayAsForm" class="row-item">
@@ -49,6 +40,16 @@ <h1 id="page-heading">Comparison Between Individual Testing and Sample Pooling f
                     <label for="Grid">Grid</label>
                 </div>
             </div>
+
+            <div id="people_count_group" class="column-item margin-top-zero">
+                <label for="people_count_slider" id="people_count_label">
+                    Number of
+                    People: <span id="people_count"></span>
+                </label>
+                <input type="number" min="100" max="1000000000" step="10"
+                       value="2500" id="people_count_slider" class="number-input-box"
+                       oninput="sliderUpdate(value, '#people_count_slider')"/>
+            </div>
             <div class="data-metric">
                 <div class="data-metric-def">
                     <dl>
@@ -71,7 +72,7 @@ <h1 id="page-heading">Comparison Between Individual Testing and Sample Pooling f
 
             </div>
 
-            <div class="slider-group column-item">
+            <div class="margin-bottom-zero slider-group column-item">
                 <label class="slider-labels" for="infection_rate_slider">
                     Infection Rate:
                 </label>
@@ -84,12 +85,13 @@ <h1 id="page-heading">Comparison Between Individual Testing and Sample Pooling f
                    '#infection_rate')"/>
             </div>
 
-            <div id="cost_per_test_group" class="column-item slider-labels">
+            <div id="cost_per_test_group" class="column-item margin-top-zero">
                 <label for="cost_per_test_slider" id="cost_per_test_label">
                     Cost Per Test: <span id="cost_per_test"></span>
+                    <span class="number-input-box">&nbsp;$</span>
                 </label>
-                <input type="number" min="1" max="200" step="1"
-                       value="100" id="cost_per_test_slider"
+                <input type="number" min="1" max="any" step="1"
+                       value="100" id="cost_per_test_slider" class="number-input-box"
                        oninput="sliderUpdate(value, '#cost_per_test_slider')"/>
             </div>
         </div>
@@ -241,6 +243,24 @@ <h1 id="page-heading">Comparison Between Individual Testing and Sample Pooling f
         <div id="pooling-testing" class="row-item column-container">
             <div class="stats_title column-item">Sample Pooling</div>
             <div class="stats_subtitle column-item">Expected Values</div>
+
+            <div class="slider-group column-item">
+                <div class="column-item row-container margin-bottom-zero" id="optimal_container">
+                    <span class="row-item margin-bottom-zero margin-right-auto">
+                        <label class=" row-item margin-bottom-zero" for="pool_size_slider">
+                            Pool Size: </label>
+                        <output for="pool_size_slider" id="pool_size"
+                                class=" margin-bottom-zero">25
+                        </output>
+                    </span>
+                    <span id="optimal_pool_size_label" class="row-item margin-bottom-zero">Optimal Pool Size: <span id="pooling_optimal_pool_size"></span></span>
+                </div>
+                <input type="range"
+                       id="pool_size_slider" class="slider-widget margin-top-zero" min="1"
+                       max="40" step="1" value="25" oninput="sliderUpdate(value, '#pool_size')"/>
+            </div>
+            <hr class="row-line">
+
             <div class="data-metric">
                 <div class="data-metric-def">
                     <dl>
@@ -251,6 +271,16 @@ <h1 id="page-heading">Comparison Between Individual Testing and Sample Pooling f
                 <div class="answer-equals">$$=$$</div>
                 <div id="pooling_total_cost" class="answer-value"></div>
             </div>
+            <div class="data-metric">
+                <div class="data-metric-def">
+                    <dl>
+                        <dt>Optimal Total Cost</dt>
+                        <dd>cost at optimal pool size</dd>
+                    </dl>
+                </div>
+                <div class="answer-equals">$$=$$</div>
+                <div id="pooling_optimal_cost" class="answer-value"></div>
+            </div>
             <div class="data-metric">
                 <div class="data-metric-def">
                     <dl>
@@ -261,6 +291,16 @@ <h1 id="page-heading">Comparison Between Individual Testing and Sample Pooling f
                 <div class="answer-equals">$$=$$</div>
                 <div id="pooling_tests_used" class="answer-value"></div>
             </div>
+            <div class="data-metric">
+                <div class="data-metric-def">
+                    <dl>
+                        <dt>Minimum Tests Possible</dt>
+                        <dd>tests used at optimal pool size</dd>
+                    </dl>
+                </div>
+                <div class="answer-equals">$$=$$</div>
+                <div id="pooling_min_tests_possible" class="answer-value"></div>
+            </div>
             <hr class="row-line">
             <div class="data-metric">
                 <div class="data-metric-def">
@@ -338,25 +378,6 @@ <h1 id="page-heading">Comparison Between Individual Testing and Sample Pooling f
                 <div id="pooling_specificity" class="answer-value"></div>
             </div>
 
-            <hr class="row-line">
-
-            <div class="slider-group column-item">
-                <div class="column-item row-container">
-                    <span class="row-item">
-                        <label class="slider-labels row-item" for="pool_size_slider">
-                            Pool Size: </label>
-                        <output for="pool_size_slider" id="pool_size"
-                                class="slider-labels">25
-                        </output>
-                    </span>
-                    <span class="row-item slider-labels">Optimal Pool Size: <span id="pooling_optimal_pool_size"></span></span>
-                </div>
-                <br>
-                <input type="range"
-                       id="pool_size_slider" class="slider-widget" min="1"
-                       max="40" step="1" value="25" oninput="sliderUpdate(value, '#pool_size')"/>
-            </div>
-
 
         </div>
 
diff --git a/bayestesting.css b/bayestesting.css
@@ -38,6 +38,7 @@ body {
   z-index: 10;
   position: relative;
   background-color: white;
+  padding-bottom: 1rem;
   /*display: flex;*/
   /*flex-flow: row wrap;*/
   /*justify-content: space-around;*/
@@ -64,6 +65,15 @@ body {
   box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
 }
 
+.margin-bottom-zero{
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+.margin-top-zero{
+  margin-top: 0;
+}
+
+
 #displayAsForm {
   /*position: relative;*/
   text-align: left;
@@ -159,29 +169,26 @@ dl {
   /*overflow-y: visible;*/
   /*background-color: aliceblue;*/
   align-items: flex-end;
+  padding-top: 0;
   margin-bottom: 1.4rem;
 }
 
+
 #people_count_group {
 
-  /*font-size: large;*/
-  text-align: center;
+  /*text-align: center;*/
   vertical-align: top;
   display: inline-block;
-  white-space: nowrap;
-  width: 30rem;
-
-  /*style="display: inline-block; width: 240px; text-align: right"*/
+  margin-bottom: .5rem;
+  /*white-space: nowrap;*/
+  /*width: 30rem;*/
 }
 
+
 #people_count{
   display: none;
 }
 
-#people_count_slider{
-  font-size: larger;
-  max-width: 12rem;
-}
 
 #graph_group {
   text-align: center;
@@ -215,12 +222,33 @@ dl {
   margin-top:0;
 }
 
+#optimal_container{
+  width: 30rem;
+  margin-top: 1rem;
+}
+#optimal_pool_size_label{
+  /*margin-top: 1rem;*/
+}
+
+.margin-right-auto{
+  margin-right: auto;
+}
+
+
 /* slider css  */
 
+.number-input-box{
+  font-size: larger;
+  max-width: 12rem;
+}
+
 .slider-labels {
   white-space: nowrap;
+  text-align: left;
   display: inline-block;
   margin-top: 1rem;
+  margin-right: auto;
+  /*width: 100%;*/
 }
 
 .slider-widget {
@@ -229,5 +257,5 @@ dl {
 
 .slider-group {
   margin-top: -1rem;
-  margin-bottom: 1rem;
+  /*margin-bottom: 1rem;*/
 }
diff --git a/bayestesting.js b/bayestesting.js
@@ -126,6 +126,12 @@ function animationIntervalHandler(){
   }
 }
 
+/**
+  I had to write my own Lambert-W implementation,  because the only version I could find online
+  cannot handle input less than $$e$$. The function uses the well-known Halley's method, which
+  is just Newton's method but with one more term of the Taylor series. I use an initial guess
+  of $$w=1$$ regardless of the value of the input.
+*/
 function lambertW(x, tol) {
   if (!(tol)){
     tol = 0.00000001
@@ -144,14 +150,20 @@ function lambertW(x, tol) {
   return w;
 }
 
+/**
+  The number of tests required is given by
+  $$f(s) = n \left(\text{sense} \left(1-(1-i)^s\right)+(1-\text{spec}) (1-i)^s\right)+\frac{n}{s}$$,
+  which can be minimized with standard freshman calculus. Mathematica can find the solution to
+  $$f'(s)=0$$, which involves the Lambert-W function.
+ */
 function optimalPoolSize(sensitivity, specificity, infection_rate){
+
   // ln(1-i)
   let lnomi = Math.log(1 - infection_rate);
   // 1 - sensitivity - specificity
   let omsms = 1 - sensitivity - specificity;
 
   return 2 * lambertW(-lnomi * Math.sqrt(omsms/lnomi)/(2*omsms)) / lnomi;
-  // return lnomi * Math.sqrt(omsms/lnomi)/(2*omsms);
 }
 
 function getRandomSample(array, count) {
@@ -184,6 +196,7 @@ function sliderUpdate(val, valueLabel) {
   DEFAULT_VALUES.infection_rate = Number(document.querySelector('#infection_rate_slider').value);
   DEFAULT_VALUES.people_count = Number(document.querySelector('#people_count_slider').value);
   DEFAULT_VALUES.pool_size = Number(document.querySelector('#pool_size_slider').value);
+  DEFAULT_VALUES.cost_per_test = Number(document.querySelector('#cost_per_test_slider').value);
 
   computeNaiveMetrics();
   computeSamplePoolingMetrics();
@@ -229,11 +242,13 @@ function updateMetrics(){
     'people_count',
     'pool_size',
     'tests_used',
-    'optimal_pool_size'
+    'optimal_pool_size',
+    'min_tests_possible'
   ];
   let currency = [
     'total_cost',
-    'cost_per_test_label'
+    'cost_per_test_out',
+    'optimal_cost'
   ]
 
   let metrics;
@@ -493,7 +508,19 @@ function computeSamplePoolingMetrics() {
   let pooling_tests_used = people_count*(pool_positive + 1.0/pool_size);
 
   spmetrics = computeMetrics(positive_given_infected, negative_given_not_infected, pooling_tests_used);
-  spmetrics['optimal_pool_size'] = optimalPoolSize(sensitivity, specificity, infection_rate);
+
+  // Computation of Optimal Values //
+
+  optimal_pool_size = optimalPoolSize(sensitivity, specificity, infection_rate);
+  spmetrics['optimal_pool_size'] = optimal_pool_size;
+  // This just reiterates the computation of number of tests but with `optimal_pool_size`.
+  pool_not_infected = (1 - infection_rate)**optimal_pool_size;
+  pool_infected     = 1 - pool_not_infected;
+  pool_positive =  sensitivity*pool_infected + false_positive_rate * pool_not_infected;
+  pooling_tests_used = people_count*(pool_positive + 1.0/optimal_pool_size);
+  let optimal_total_cost = DEFAULT_VALUES.cost_per_test * pooling_tests_used;
+  spmetrics['optimal_cost'] = optimal_total_cost;
+  spmetrics['min_tests_possible'] = pooling_tests_used;
   spmetrics['prefix'] = 'pooling_';
 }
 
@@ -538,6 +565,8 @@ function processURLParams(){
   document.querySelector('#infection_rate_slider').value = DEFAULT_VALUES.infection_rate;
   document.querySelector('#people_count_slider').value = DEFAULT_VALUES.people_count;
   document.querySelector('#pool_size_slider').value = DEFAULT_VALUES.pool_size;
+  document.querySelector(`#${DEFAULT_VALUES.select_stats}-tab`).checked = true;
+
 }
 
 
diff --git a/tabs.css b/tabs.css
@@ -22,11 +22,12 @@
 .tabset > label {
     position: relative;
     display: inline-block;
-    margin-top: -1.3rem;
-    padding-top: 25px;
+    margin-top: -2.3rem;
+    padding-top: 40px;
     padding-right: 15px;
     padding-left: 15px;
-    padding-bottom: 15px;
+    padding-bottom: 20px;
+    border-radius: 1rem;
     /*border: 1px solid transparent;*/
     border-top: 0;
     cursor: pointer;
