work around blueprint restriction (#1677)

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}
+                annoMatrix={annoMatrix}
-              >
+                layoutChoice={layoutChoice}
-                {layoutChoice.available.map((name) => (
+              />
-                  <LayoutChoice
-                    annoMatrix={annoMatrix}
-                    layoutName={name}
-                    key={name}
-                  />
-                ))}
-              </RadioGroup>
             </div>
           }
         />
@@ -106,40 +99,58 @@ class Embedding extends React.PureComponent {
 
 export default Embedding;
 
-const loadEmbeddingCounts = async ({ annoMatrix, layoutName }) => {
+const loadAllEmbeddingCounts = async ({ annoMatrix, available }) => {
-  const embedding = await annoMatrix.fetch("emb", layoutName);
+  const embeddings = await Promise.all(
-  const discreteCellIndex = getDiscreteCellEmbeddingRowIndex(embedding);
+    available.map((name) => annoMatrix.fetch("emb", name))
-  return { embedding, discreteCellIndex };
+  );
+  return available.map((name, idx) => ({
+    embeddingName: name,
+    embedding: embeddings[idx],
+    discreteCellIndex: getDiscreteCellEmbeddingRowIndex(embeddings[idx]),
+  }));
 };
 
-const LayoutChoice = ({ annoMatrix, layoutName }) => {
+const EmbeddingChoices = ({ onChange, annoMatrix, layoutChoice }) => {
-  return (
+  const { available } = layoutChoice;
-    <Async
+  const { data, error, isPending } = useAsync({
-      promiseFn={loadEmbeddingCounts}
+    promiseFn: loadAllEmbeddingCounts,
-      annoMatrix={annoMatrix}
+    annoMatrix,
-      layoutName={layoutName}
+    available,
-    >
+  });
-      {({ data, error, isPending }) => {
+
-        if (error) {
+  if (error) {
-          /* log, as this is unexpected */
+    /* log, as this is unexpected */
-          console.error(error);
+    console.error(error);
-        }
+  }
-        if (error || isPending) {
+  if (error || isPending) {
-          /* still loading, or errored out - just omit counts (TODO: spinner?) */
+    /* still loading, or errored out - just omit counts (TODO: spinner?) */
-          return <Radio label={`${layoutName}`} value={layoutName} />;
+    return (
-        }
+      <RadioGroup onChange={onChange} selectedValue={layoutChoice.current}>
-        if (data) {
+        {layoutChoice.available.map((name) => (
-          const { embedding, discreteCellIndex } = data;
+          <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;
+      </RadioGroup>
-      }}
+    );
-    </Async>
+  }
-  );
+  return null;
 };