fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-10-03 01:28:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

centroid labels (#872)

Browse Source 
* refactor reducer to no longer support hover state and hold many labels

* refactor to generate centroidCoordinates for all values of a category

* create hash for function and memoize export

* create button to display all labels for a category

* clear state

* create label for each thing

* calculate on each value

* change to in place modification of map

* switch to for loop with iterator instead of forEach

* use map from centroidLabel instead of creating copy

* adapt for map

* utilize tarrays

* begin documentation

* disable centroids if in zoom mode

* clean up

* persist uncalc coordinates

* document

* clean up and document

* cleanup and document

* fix

* fix undefined labels and document changes

* fix first element skip

* fix conditional recalc

* rename centroidLabel -> centroidLabels

* break out dilation on hover to new reducer

* numerous styling changes for readability

* change centroid icon

* remove colorAccessor from parameters

* recalc centroids on world change

* make label toggle undoable

* remove unused import

* highlight labels on hover

* remove special characters from svg id

* lighten backdrop

* only generate new centroids if they pre-exist

* fix issue with spaces in catagorical value name

* add label buttons to menubar

* change reducer to use colorAccessor and have single toggle

* fix check to see if svg should be rendered

* move svg overlays onto a single svg layer

* dilate on label hover

* remove logs

* allow centroid to update along side regl renders

* allow actions to pass through svg if in zoom mode

* remove artifact from circle

* remove comment

* remove disabling of centroid button

* fix conditional map to screen

* make styling label conditions stricter

* prettier

* refactor onto master

* refactor computePointFlags() to use pointDilation store

* notify when viewport changes

* move svg attributes out of lasso setup and prevent rerenders/writes

* begin playing with transform matrix

* first solution for camera interaction

* create transform using nested groups

* semi-working method using nested groups with transforms

* inversely scale text

* properly do final transform

* cleanup dead / test code

* reinstate original functionality

* breakout centroid labels labels into separate component

* default toggle on for testing

* separate lasso and centroid layers

* remove unnecessary attributes, working hover

* dilation on label hover

* fix dilation on scatterplot

* add dilation on label hover

* break overlay into separate component

* make overlay agnostic to children

* move label mouse actions to centroidlabels component, add overlay state

* remove lasso on switch to camera

* disallow user selection

* fix reducer

* fix subset with continuous color error

* reset labels on color by continuous

* revert centroids on by default

* refactor for nested restructuring

* remove update checking

* remove unused method

* readd deleted hover delay

* remove old centroid setup

* remove centroid from undoable

* cleanup dead code

* remove dead code

* rollback unnecessary changes

* begin adding annotation functionality

* add annotation functionality

* add reset and undo functionality

* change centroids on layout change

* don't create label for unassigned

* add comment pointing out POI for performance

* touch up matrix transform comment

* add comment explaining coordinate space and children's assumed space

* remove dead code

* switch to pure component

* connect centroidLabels to redux

* clean up camera check and null result

* tool tip change

* rename centroid toggle and the like

* fix the misalignment of buttons, also make blueprint use consistent

* fix comment spelling mistakes

* introduce variable for cleaner logic expressions and state assignment

* alter tooltip text to back color by interaction

* remove manual iterator manipulation for forEach()

* remove debounce

* nit fix

* tooltip wording fix

* lint
This commit is contained in:
Severiano Badajoz
2020-01-22 13:40:22 -08:00
committed by GitHub
parent 69c639b14d
commit 8d725b1ad9
18 changed files with 541 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/menubar/clip.js
+1 -1
View File
@@ -37,7 +37,7 @@ function Clip(props) {
<div
className="bp3-button-group"
style={{
marginLeft: 10
marginRight: 10
}}
>
<Popover
client/src/components/menubar/index.js
+46 -21
View File
@@ -3,6 +3,7 @@ import React from "react";
import { connect } from "react-redux";
import {
Button,
ButtonGroup,
AnchorButton,
Tooltip,
Popover,
@@ -42,7 +43,8 @@ import * as globals from "../../globals";
redoDisabled: state["@@undoable/future"].length === 0,
aboutLink: state.config?.links?.["about-dataset"],
disableDiffexp: state.config?.parameters?.["disable-diffexp"] ?? false,
diffexpMayBeSlow: state.config?.parameters?.["diffexp-may-be-slow"] ?? false
diffexpMayBeSlow: state.config?.parameters?.["diffexp-may-be-slow"] ?? false,
showCentroidLabels: state.centroidLabels.showLabels
}))
class MenuBar extends React.Component {
static isValidDigitKeyEvent(e) {
@@ -258,6 +260,15 @@ class MenuBar extends React.Component {
});
};
handleCentroidChange = () => {
const { dispatch, showCentroidLabels } = this.props;
dispatch({
type: "show centroid labels for category",
showLabels: !showCentroidLabels
});
};
renderDiffExp() {
/* diffexp-related buttons may be disabled */
const { disableDiffexp, differential, diffexpMayBeSlow } = this.props;
@@ -272,7 +283,7 @@ class MenuBar extends React.Component {
const tipMessage = `See top 10 differentially expressed genes${slowMsg}`;
return (
<div className="bp3-button-group" style={{ marginRight: 10 }}>
<ButtonGroup style={{ marginRight: 10 }}>
<CellSetButton {...this.props} eitherCellSetOneOrTwo={1} />
<CellSetButton {...this.props} eitherCellSetOneOrTwo={2} />
{!differential.diffExp ? (
@@ -288,7 +299,6 @@ class MenuBar extends React.Component {
loading={differential.loading}
icon="left-join"
fill
type="button"
onClick={this.computeDiffExp}
/>
</Tooltip>
@@ -310,7 +320,7 @@ class MenuBar extends React.Component {
</Button>
</Tooltip>
) : null}
</div>
</ButtonGroup>
);
}
@@ -327,19 +337,20 @@ class MenuBar extends React.Component {
clipPercentileMax,
layoutChoice,
graphInteractionMode,
aboutLink
aboutLink,
showCentroidLabels
} = this.props;
const { pendingClipPercentiles } = this.state;
// constants used to create selection tool button
let selectionTooltip;
let selectionButtonClass;
let selectionButtonIcon;
if (selectionTool === "brush") {
selectionTooltip = "Brush selection";
selectionButtonClass = "bp3-icon-select";
selectionButtonIcon = "select";
} else {
selectionTooltip = "Lasso selection";
selectionButtonClass = "bp3-icon-polygon-filter";
selectionButtonIcon = "polygon-filter";
}
return (
@@ -347,7 +358,8 @@ class MenuBar extends React.Component {
style={{
position: "fixed",
right: globals.leftSidebarWidth + 8,
top: 8
top: 8,
display: "flex"
}}
>
{this.renderDiffExp()}
@@ -357,7 +369,6 @@ class MenuBar extends React.Component {
hoverOpenDelay={globals.tooltipHoverOpenDelay}
>
<AnchorButton
type="button"
data-testid="subset-button"
disabled={
crossfilter &&
@@ -375,16 +386,16 @@ class MenuBar extends React.Component {
<Icon icon="double-chevron-down" />
</AnchorButton>
</Tooltip>
<div className="bp3-button-group">
<ButtonGroup style={{ marginRight: "10px" }}>
<Tooltip
content={selectionTooltip}
position="bottom"
hoverOpenDelay={globals.tooltipHoverOpenDelay}
>
<Button
<AnchorButton
type="button"
data-testid="mode-lasso"
className={`bp3-button ${selectionButtonClass}`}
icon={selectionButtonIcon}
active={graphInteractionMode === "select"}
onClick={() => {
dispatch({
@@ -402,10 +413,10 @@ class MenuBar extends React.Component {
position="bottom"
hoverOpenDelay={globals.tooltipHoverOpenDelay}
>
<Button
<AnchorButton
type="button"
data-testid="mode-pan-zoom"
className="bp3-button bp3-icon-zoom-in"
icon="zoom-in"
active={graphInteractionMode === "zoom"}
onClick={() => {
dispatch({
@@ -418,11 +429,25 @@ class MenuBar extends React.Component {
}}
/>
</Tooltip>
</div>
<div
className="bp3-button-group"
</ButtonGroup>
<Tooltip
content="When a category is colored by, show labels on the graph"
position="bottom"
disabled={graphInteractionMode === "zoom"}
>
<Button
icon="property"
onClick={this.handleCentroidChange}
active={showCentroidLabels}
intent={showCentroidLabels ? "primary" : "none"}
style={{
marginRight: 10
}}
/>
</Tooltip>
<ButtonGroup
style={{
marginLeft: 10
marginRight: 10
}}
>
<Popover
@@ -435,7 +460,7 @@ class MenuBar extends React.Component {
<Button
type="button"
data-testid="layout-choice"
className="bp3-button bp3-icon-heatmap"
icon="heatmap"
style={{
cursor: "pointer"
}}
@@ -465,7 +490,7 @@ class MenuBar extends React.Component {
</div>
}
/>
</div>
</ButtonGroup>
<Clip
pendingClipPercentiles={pendingClipPercentiles}
clipPercentileMin={clipPercentileMin}
client/src/components/menubar/infoMenu.js
+1 -1
View File
@@ -5,7 +5,7 @@ import { Button, Popover, Menu, MenuItem, Position } from "@blueprintjs/core";
function InformationMenu(props) {
const { libraryVersions, aboutLink } = props;
return (
<div style={{ marginLeft: 10 }} className="bp3-button-group">
<div style={{}} className="bp3-button-group">
<Popover
content={
<Menu>
client/src/components/menubar/undoRedoReset.js
+1 -1
View File
@@ -13,7 +13,7 @@ function InformationMenu(props) {
dispatch
} = props;
return (
<div style={{ marginLeft: 10 }} className="bp3-button-group">
<div style={{ marginRight: 10 }} className="bp3-button-group">
<Tooltip
content="Undo"
position="bottom"