From 14cd1b9f0b59fdf4ec5faa12a1ab3024beb0f38b Mon Sep 17 00:00:00 2001
From: Bruce Martin <bruce@chanzuckerberg.com>
Date: Mon, 27 Jul 2020 12:52:22 -0700
Subject: [PATCH] work around blueprint restriction (#1677)

---
 client/src/components/embedding/index.js | 91 +++++++++++++-----------
 1 file changed, 51 insertions(+), 40 deletions(-)

diff --git a/client/src/components/embedding/index.js b/client/src/components/embedding/index.js
index 586218d8..337843ab 100644
--- a/client/src/components/embedding/index.js
+++ b/client/src/components/embedding/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import Async from "react-async";
+import { useAsync } from "react-async";
 import {
   ButtonGroup,
   Popover,
@@ -84,18 +84,11 @@ class Embedding extends React.PureComponent {
               <p style={{ fontStyle: "italic" }}>
                 There are {schema?.dataframe?.nObs} cells in the entire dataset.
               </p>
-              <RadioGroup
+              <EmbeddingChoices
                 onChange={this.handleLayoutChoiceChange}
-                selectedValue={layoutChoice.current}
-              >
-                {layoutChoice.available.map((name) => (
-                  <LayoutChoice
-                    annoMatrix={annoMatrix}
-                    layoutName={name}
-                    key={name}
-                  />
-                ))}
-              </RadioGroup>
+                annoMatrix={annoMatrix}
+                layoutChoice={layoutChoice}
+              />
             </div>
           }
         />
@@ -106,40 +99,58 @@ class Embedding extends React.PureComponent {
 
 export default Embedding;
 
-const loadEmbeddingCounts = async ({ annoMatrix, layoutName }) => {
-  const embedding = await annoMatrix.fetch("emb", layoutName);
-  const discreteCellIndex = getDiscreteCellEmbeddingRowIndex(embedding);
-  return { embedding, discreteCellIndex };
+const loadAllEmbeddingCounts = async ({ annoMatrix, available }) => {
+  const embeddings = await Promise.all(
+    available.map((name) => annoMatrix.fetch("emb", name))
+  );
+  return available.map((name, idx) => ({
+    embeddingName: name,
+    embedding: embeddings[idx],
+    discreteCellIndex: getDiscreteCellEmbeddingRowIndex(embeddings[idx]),
+  }));
 };
 
-const LayoutChoice = ({ annoMatrix, layoutName }) => {
-  return (
-    <Async
-      promiseFn={loadEmbeddingCounts}
-      annoMatrix={annoMatrix}
-      layoutName={layoutName}
-    >
-      {({ data, error, isPending }) => {
-        if (error) {
-          /* log, as this is unexpected */
-          console.error(error);
-        }
-        if (error || isPending) {
-          /* still loading, or errored out - just omit counts (TODO: spinner?) */
-          return <Radio label={`${layoutName}`} value={layoutName} />;
-        }
-        if (data) {
-          const { embedding, discreteCellIndex } = data;
+const EmbeddingChoices = ({ onChange, annoMatrix, layoutChoice }) => {
+  const { available } = layoutChoice;
+  const { data, error, isPending } = useAsync({
+    promiseFn: loadAllEmbeddingCounts,
+    annoMatrix,
+    available,
+  });
+
+  if (error) {
+    /* log, as this is unexpected */
+    console.error(error);
+  }
+  if (error || isPending) {
+    /* still loading, or errored out - just omit counts (TODO: spinner?) */
+    return (
+      <RadioGroup onChange={onChange} selectedValue={layoutChoice.current}>
+        {layoutChoice.available.map((name) => (
+          <Radio label={`${name}`} value={name} key={name} />
+        ))}
+      </RadioGroup>
+    );
+  }
+  if (data) {
+    return (
+      <RadioGroup onChange={onChange} selectedValue={layoutChoice.current}>
+        {data.map((summary) => {
+          const { discreteCellIndex, embedding, embeddingName } = summary;
           const isAllCells = discreteCellIndex.size() === embedding.length;
           const sizeHint = `${discreteCellIndex.size()} ${
             isAllCells ? "(all) " : ""
           }cells`;
           return (
-            <Radio label={`${layoutName}: ${sizeHint}`} value={layoutName} />
+            <Radio
+              label={`${embeddingName}: ${sizeHint}`}
+              value={embeddingName}
+              key={embeddingName}
+            />
           );
-        }
-        return null;
-      }}
-    </Async>
-  );
+        })}
+      </RadioGroup>
+    );
+  }
+  return null;
 };