Embedding button to lower left, cell selection (#1658)

* embedding * menu bottom left * button * change gutters to support lower toolbar * fix scatterplot layout * fix tests to match new layout * fix smoke tests to match new layout * better sentence, dataset.nObs to top * scatterplot position Co-authored-by: bkmartinjr <bruce@chanzuckerberg.com>
2026-09-27 10:58:11 +08:00 · 2020-07-22 18:48:21 -04:00
parent a44da11f3f
commit 03bad04436
9 changed files with 136 additions and 136 deletions
@@ -0,0 +1,105 @@
+import React from "react";
+import { connect } from "react-redux";
+import {
+  ButtonGroup,
+  Popover,
+  Button,
+  Radio,
+  RadioGroup,
+  Tooltip,
+  Position,
+} from "@blueprintjs/core";
+import * as globals from "../../globals";
+import actions from "../../actions";
+
+@connect((state) => {
+  return {
+    layoutChoice: state.layoutChoice,
+    schema: state.annoMatrix?.schema,
+    crossfilter: state.obsCrossfilter,
+  };
+})
+class Embedding extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  handleLayoutChoiceChange = (e) => {
+    const { dispatch } = this.props;
+    dispatch(actions.layoutChoiceAction(e.currentTarget.value));
+  };
+
+  render() {
+    const { layoutChoice, schema, crossfilter } = this.props;
+    return (
+      <ButtonGroup
+        style={{
+          position: "absolute",
+          display: "inherit",
+          left: 8,
+          bottom: 8,
+          zIndex: 9999,
+        }}
+      >
+        <Popover
+          target={
+            <Tooltip
+              content="Select embedding for visualization"
+              position="top"
+              hoverOpenDelay={globals.tooltipHoverOpenDelay}
+            >
+              <Button
+                type="button"
+                data-testid="layout-choice"
+                icon="heatmap"
+                // minimal
+                id="embedding"
+                style={{
+                  cursor: "pointer",
+                }}
+              >
+                {layoutChoice?.current}: {crossfilter.countSelected()} out of{" "}
+                {crossfilter.size()} cells
+                {/* BRUCE to extend 1559 */}
+              </Button>
+            </Tooltip>
+          }
+          // minimal /* removes arrow */
+          position={Position.TOP_LEFT}
+          content={
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "flex-start",
+                alignItems: "flex-start",
+                flexDirection: "column",
+                padding: 10,
+                width: 400,
+              }}
+            >
+              <h1>Embedding Choice</h1>
+              <p style={{ fontStyle: "italic" }}>
+                There are {schema?.dataframe?.nObs} cells in the entire dataset.
+              </p>
+              <RadioGroup
+                onChange={this.handleLayoutChoiceChange}
+                selectedValue={layoutChoice.current}
+              >
+                {layoutChoice.available.map((name) => (
+                  <Radio
+                    label={`${name} ${schema?.dataframe?.nObs} cells`}
+                    value={name}
+                    key={name}
+                  />
+                ))}
+              </RadioGroup>
+            </div>
+          }
+        />
+      </ButtonGroup>
+    );
+  }
+}
+
+export default Embedding;