From 7f0787ad70f707962030e9975042ea694321706b Mon Sep 17 00:00:00 2001
From: Thomas Sibley <tsibley@fredhutch.org>
Date: Thu, 25 Feb 2021 12:55:23 -0800
Subject: [PATCH] controls/filter: Avoid spread syntax with potentially large
 arrays
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Push each value individually instead of all at once, which results in
more method calls but a much smaller call stack size.  Alternatively,
Array.concat could be used, but this follows the pattern of surrounding
code and avoids reassignment of "options", which would also necessitate
removal of the "const" declaration.

The /tb/global build has ~277k genotype states, which resulted in a call
to Array.push with as many arguments when the spread syntax was used.
This blew through the call stack size limit on Chrome with an error
like:

    RangeError: Maximum call stack size exceeded
        at FilterData.eval [as makeOptions] (filter.js?6bcb:65)
        at FilterData.render (filter.js?6bcb:100)
        …

Firefox was unaffected, so presumably has a larger limit.

Debugging was waylaid for a bit by the assumption that exceeding the
call stack size necessarily meant deep recursion, but the lack of a deep
stack trace led to the realization that it can also occur when a
function's arguments are too many.

Resolves #1292.
---
 src/components/controls/filter.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/controls/filter.js b/src/components/controls/filter.js
index 763c2898c..e5e83e494 100644
--- a/src/components/controls/filter.js
+++ b/src/components/controls/filter.js
@@ -61,11 +61,14 @@ class FilterData extends React.Component {
           });
       });
     if (genotypeSymbol in this.props.activeFilters) {
-      const sortedGenotypes = [...collectGenotypeStates(this.props.nodes)].sort();
-      options.push(...sortedGenotypes.map((o) => ({
-        label: `genotype ${o}`,
-        value: [genotypeSymbol, o]
-      })));
+      Array.from(collectGenotypeStates(this.props.nodes))
+        .sort()
+        .forEach((o) => {
+          options.push({
+            label: `genotype ${o}`,
+            value: [genotypeSymbol, o]
+          });
+        });
     }
     if (strainSymbol in this.props.activeFilters) {
       this.props.nodes