debounce pushHistoryState, default stepBatchSize to 20

README.md

@@ -65,9 +65,9 @@ From [the supplement][mpower supplement]:
 
 ∧p∨d [struggles a bit][mpower best] with this one:
 
-<img src="public/img/mpower%20best.png" width="500" />
+<img src=public/img/mpower%20best.png width=500 />
 
-Error is 22.9 (4.64%); half of that is { Red ∩ Yellow ∩ Blue }, which is 1.56 instead of 12. [Incorporating each region's relative error](#proportional-errors) would likely produce more intuitive results.
+Error is 22.9 (4.64%); half of that is { Red ∩ Yellow ∩ Blue }, which is 1.56 instead of 12. [Incorporating each region's relative error](#proportional-errors) would likely produce more intuitive results (see [shapes#9]).
 
 (Also, the "182" for "TP53 only" is on the { TP53 ∩ STK11 } region; TODO!)
 
@@ -279,6 +279,8 @@ Cubic-bezier splines would be ideal, but the math is much harder; I'm not sure h
 ## Other notes/references <a id="misc"></a>
 - [List of Venn diagram tools for bioinformaticians][dlcompbiobiotech tool list]
 - [RectEuler]: many links to other tools
+- [Vsauce twitter thread]
+- [O'Rawe et al 2013]: 3- and 5-set Venn diagrmas
 
 ### Earlier versions of apvd <a id="earlier"></a>
 
@@ -407,3 +409,6 @@ Core code is from a [web solver](http://www.akiti.ca/Quad4Deg.html) written by [
 [shapes#9]: https://github.com/runsascoded/shapes/issues/9
 [shapes#10]: https://github.com/runsascoded/shapes/issues/10
 [shapes#11]: https://github.com/runsascoded/shapes/issues/11
+
+[Vsauce twitter thread]: https://twitter.com/tweetsauce/status/1108498701427732481
+[O'Rawe et al 2013]: https://genomemedicine.biomedcentral.com/counter/pdf/10.1186/gm432.pdf?site=genomemedicine.biomedcentral.com

pages/index.tsx

@@ -26,6 +26,7 @@ import { SparkLineProps } from "../src/components/spark-lines";
 import { CircleCoords, Coord, makeVars, Vars, XYRRCoords, XYRRTCoords } from "../src/lib/vars";
 import { CopyCoordinatesType, ShapesTable } from "../src/components/tables/shapes";
 import _ from "lodash"
+import debounce from "lodash/debounce"
 import { getHashMap, getHistoryStateHash, HashMapVal, Param, ParsedParam, parseHashParams, updatedHash, updateHashParams } from "next-utils/params";
 import { precisionSchemes, ShapesParam } from "../src/lib/shapes-buffer";
 import { Checkbox, Control, Number, Select } from "../src/components/controls";
@@ -233,6 +234,7 @@ export function Body() {
                     in cancer," Fig. 3</>},
             { name: "MPower", val: "#t=42,15,16,10,10,12,25,182,60,23,13,44,13,18,11&n=KRAS,STK11,KEAP1=P,TP53", description: <>Values from "Clinical efficacy of atezolizumab plus bevacizumab and chemotherapy in KRAS-mutated non-small cell lung cancer with STK11, KEAP1, or TP53 comutations: subgroup results from the phase III IMpower150 trial", {MPowerLink}</> },
             { name: "\"Venn Diagrams with D3.js\"", val: "#t=i16,16,4,12,4,3,2&s=5zg0000200b4001KSA00i900000800g00&n=,,", description: <>Example from Ben Frederickson's blog post, <A href={"https://www.benfrederickson.com/venn-diagrams-with-d3.js/"}>"Venn Diagrams with D3.js"</A>.</> },
+            { name: "Zhang et al (2014)", val: "#t=7,798,0,35,0,197,0,1097,1,569,4,303,0,3177,65&n=Microarray@#99f,Cuffdiff2,DESeq@#f99,edgeR@orange", description: "Target values from Zhang et al (2014)"},
         ].map(({ name, val, description }) => ({
             name,
             val: typeof val === 'string' ? val : makeTargets(val),
@@ -362,7 +364,7 @@ export function Body() {
 
     const [ maxErrorRatioStepSize, setMaxErrorRatioStepSize ] = useSessionStorageState("maxErrorRatioStepSize", { defaultValue: 0.5 })
     const [ maxSteps, setMaxSteps ] = useSessionStorageState("maxSteps", { defaultValue: 10000 })
-    const [ stepBatchSize, setStepBatchSize ] = useSessionStorageState("stepBatchSize", { defaultValue: 10 })
+    const [ stepBatchSize, setStepBatchSize ] = useSessionStorageState("stepBatchSize", { defaultValue: 20 })
     const [ showRegionSizes, setShowRegionSizes ] = useSessionStorageState("showRegionSizes", { defaultValue: false })
 
     const [ model, setModel ] = useState<Model | null>(null)
@@ -389,14 +391,19 @@ export function Body() {
 
     const historyLog = false
     const pushHistoryState = useCallback(
-        ({ shapes, newTargets, newSetMetadata, push }: { shapes: Shapes, newTargets?: Targets, newSetMetadata?: SetMetadata, push?: boolean }) => {
-            if (stateInUrlFragment) {
-                const param = { shapes, precisionSchemeId: urlShapesPrecisionScheme }
-                const newHashMap = { s: param, t: newTargets || targets, n: newSetMetadata || setMetadata, }
-                if (historyLog) console.log(`history push (${push ? "push" : "replace"}, ${targets.numShapes}, ${newHashMap.s.shapes.length}`, newHashMap)
-                updateHashParams(params, newHashMap, { push, log: historyLog })
-            }
-        },
+        debounce(
+            ({ shapes, newTargets, newSetMetadata, push }: { shapes: Shapes, newTargets?: Targets, newSetMetadata?: SetMetadata, push?: boolean }) => {
+                console.log("debounced pushHistoryState:", shapes, newTargets, newSetMetadata, push)
+                if (stateInUrlFragment) {
+                    const param = { shapes, precisionSchemeId: urlShapesPrecisionScheme }
+                    const newHashMap = { s: param, t: newTargets || targets, n: newSetMetadata || setMetadata, }
+                    if (historyLog) console.log(`history push (${push ? "push" : "replace"}, ${targets.numShapes}, ${newHashMap.s.shapes.length}`, newHashMap)
+                    updateHashParams(params, newHashMap, { push, log: historyLog })
+                }
+            },
+            400,
+            // { leading: true, trailing: false, }
+        ),
         [ stateInUrlFragment, targets, setMetadata, urlShapesPrecisionScheme, ]
     )