componetize histogram

client/src/components/geneExpression/geneSet.js

@@ -4,15 +4,15 @@
 import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
-import { AnchorButton, Icon } from "@blueprintjs/core";
+import { AnchorButton, Icon, Tooltip, Position } from "@blueprintjs/core";
 import { FaChevronRight, FaChevronDown } from "react-icons/fa";
 import actions from "../../actions";
 import Gene from "./gene";
 import { memoize } from "../../util/dataframe/util";
 import Truncate from "../util/truncate";
-import TestMiniHisto from "./test_miniHisto";
+// import TestMiniHisto from "./test_miniHisto";
 import * as globals from "../../globals";
-import GenesetMenus from "./menus/genesetMenus";
+// import GenesetMenus from "./menus/genesetMenus";
 
 @connect((state, ownProps) => {
   return {
@@ -140,7 +140,7 @@ class GeneSet extends React.Component {
                 style={{
                   maxWidth:
                     globals.leftSidebarWidth -
-                    240 /* todo_genesets this magic number determines how much of a long geneset name we see, and will be tweaked as we build */,
+                    150 /* todo_genesets this magic number determines how much of a long geneset name we see, and will be tweaked as we build */,
                 }}
                 data-testid={`${setName}:geneset-label`}
               >
@@ -149,16 +149,28 @@ class GeneSet extends React.Component {
             </Truncate>
           </span>
           <div>
-            <TestMiniHisto />
-            <GenesetMenus genesetsEditable geneset={setName} />
-            <AnchorButton
-              data-testclass="colorby"
-              data-testid={`colorby-${setName}`}
-              onClick={this.onColorChangeClick}
-              active={isColorAccessor}
-              intent={isColorAccessor ? "primary" : "none"}
-              icon={<Icon icon="tint" iconSize={16} />}
-            />
+            {/* <TestMiniHisto /> */}
+            {/* <GenesetMenus genesetsEditable geneset={setName} /> */}
+            <Tooltip
+              content="Color by geneset"
+              position={Position.LEFT}
+              usePortal
+              hoverOpenDelay={globals.tooltipHoverOpenDelay}
+              modifiers={{
+                preventOverflow: { enabled: false },
+                hide: { enabled: false },
+              }}
+            >
+              <AnchorButton
+                disabled
+                data-testclass="colorby"
+                data-testid={`colorby-${setName}`}
+                onClick={this.onColorChangeClick}
+                active={isColorAccessor}
+                intent={isColorAccessor ? "primary" : "none"}
+                icon={<Icon icon="tint" iconSize={16} />}
+              />
+            </Tooltip>
           </div>
         </div>