Gene sets UI, right sidebar refactor (#2097)

* prototyping * render histos on open gene set * prototyping * render histos on open gene set * factor out add genes to own component * remove unused import * mock reducer * color by geneset stub * menus and buttons * geneset dialogue stub * remove heatmap mock * componetize histogram * reenable add genes * re-add isuserdefined * test data * remove have fetched * add isExpanded state to gene, and pass to histogram * expand button * toggleable * mini * bump number of genes to 50 * don't clear diffexp on subset * move create category to top * render diffexp as geneset * geneset show mean expression * gene set reducer * add geneset UI reducer * wire e2e gene set loading prototype * fix sniffing bug * fix typo * add gene modals * client/src/actions/ * add autosave * rename data-dir cli param * add geneset, add gene, delete set * prototype: remove csv upload placeholder * handle delete gene from set * prepopulate geneset with genes from modal * add geneset: rename action * icons, language consistency * chevron after * handle empty string case on genes for create geneset * edit geneset * fix language on create * copy correction * add popper2 upgrade react popper upgrade react popper adding popover2 package * truncate uses tooltip2 * gene set button text typo * remove logging * moving server over * remove test imports * don't try to destructure map, use array.from * fix add gene map datastructure error * Revert "fix add gene map datastructure error" This reverts commit b0eed45952. * name --> genesetName, genes --> geneSymbols * add gene to geneset, temporary format * handle empty case, clear form input * lint -- genesets wasn't passed via props * userinfo * move genes string to object conversion to action * remove tmp gene description * emptystring default for description * remove empty string * remove top level package json * remove package lock as well * remove flag for feature toggle * remove comments in geneset * comment cleanup * remove comment * revert diffexp genes to 10 * color by gene set * disable color by gene set * Gene menus are now inline, remove dead prototype code * remove todo, magic number to variable * remove jshint in rightsidebar Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com> * remove unused geneset validation code * tmp format pending geneset description * move magic number into variable * reorganize genesetsUI reducer pending tests * rewire edit given new action name * add basic validation and feedback for geneset name uniqueness * mv annoDialog * mv label, repair paths * Update client/src/components/brushableHistogram/header.js Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com> * add imports for icon in histo * update jest snapshots given blueprint/tooltip2 usage of index -1 * ensure no empty paragraph * intent from blueprint * remove remainder of jshint references * do not push undo when autosave fires * fix autosave bugs * remove todos * clamp to util * scient to util * revert clearing diffexp * rename value to be more specific stacked bar * clean up logging and commetns * remove gene entry tests pending rewrite * tab index -1 * update jest snapshot, blueprint tooltip 2 * caret margin * snapshot update * ensure histogram is centered * add geneset actions to config * comment maybeScientific * comment clamp * comment ui reducer * remove prototype code * remove error log * remove references to bl.ocks * componetize parseBulkGeneString * catch case where geneset rename same name * genesetui reducer tests * add geneset ui to index reducer config Co-authored-by: bkmartinjr <bruce@chanzuckerberg.com> Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com>
2026-09-27 16:18:11 +08:00 · 2021-03-24 16:33:26 -04:00
parent 5335c39184
commit e6e358ddc8
66 changed files with 1926 additions and 905 deletions
@@ -0,0 +1,100 @@
+import React, { useCallback } from "react";
+import { Button, ButtonGroup, Tooltip, Icon } from "@blueprintjs/core";
+import { IconNames } from "@blueprintjs/icons";
+import * as globals from "../../globals";
+
+const HistogramHeader = React.memo(
+  ({
+    fieldId,
+    isColorBy,
+    onColorByClick,
+    onRemoveClick,
+    isScatterPlotX,
+    isScatterPlotY,
+    onScatterPlotXClick,
+    onScatterPlotYClick,
+    isObs,
+  }) => {
+    /*
+        Render the toolbar for the histogram.  Props:
+          * fieldId - field identifier, used for various IDs
+          * isColorBy - true/false, is this the current color-by
+          * onColorByClick - color-by click handler
+          * onRemoveClick - optional handler for remove.  Button will not render if not defined.
+          * isScatterPlotX - optional, true/false if currently the X scatterplot field
+          * isScatterPlotY - optional, true/false if currently the Y scatterplot field
+          * onScatterPlotXClick - optional, handler for scatterPlot X button.
+          * onScatterPlotYClick - optional, handler for scatterPlot X button.
+  
+        Scatterplot controls will not render if either handler unspecified.
+      */
+
+    const memoizedColorByCallback = useCallback(
+      () => onColorByClick(fieldId, isObs),
+      [fieldId, isObs]
+    );
+
+    return (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "flex-end",
+          paddingBottom: "8px",
+        }}
+      >
+        {onScatterPlotXClick && onScatterPlotYClick ? (
+          <span>
+            <Icon icon={IconNames.SCATTER_PLOT} style={{ marginRight: 7 }} />
+            <ButtonGroup style={{ marginRight: 7 }}>
+              <Button
+                data-testid={`plot-x-${fieldId}`}
+                onClick={onScatterPlotXClick}
+                active={isScatterPlotX}
+                intent={isScatterPlotX ? "primary" : "none"}
+              >
+                plot x
+              </Button>
+              <Button
+                data-testid={`plot-y-${fieldId}`}
+                onClick={onScatterPlotYClick}
+                active={isScatterPlotY}
+                intent={isScatterPlotY ? "primary" : "none"}
+              >
+                plot y
+              </Button>
+            </ButtonGroup>
+          </span>
+        ) : null}
+        {onRemoveClick ? (
+          <Button
+            minimal
+            onClick={onRemoveClick}
+            style={{
+              color: globals.blue,
+              cursor: "pointer",
+              marginLeft: 7,
+            }}
+          >
+            remove
+          </Button>
+        ) : null}
+        <Tooltip
+          content="Use as color scale"
+          position="bottom"
+          hoverOpenDelay={globals.tooltipHoverOpenDelay}
+        >
+          <Button
+            onClick={memoizedColorByCallback}
+            active={isColorBy}
+            intent={isColorBy ? "primary" : "none"}
+            data-testclass="colorby"
+            data-testid={`colorby-${fieldId}`}
+            icon="tint"
+          />
+        </Tooltip>
+      </div>
+    );
+  }
+);
+
+export default HistogramHeader;