mirror of
https://github.com/chanzuckerberg/cellxgene.git
synced 2026-09-24 02:48:12 +08:00
Severiano Badajoz
8d725b1ad9
* 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
74 lines
2.0 KiB
JavaScript
74 lines
2.0 KiB
JavaScript
/* eslint-disable jsx-a11y/mouse-events-have-key-events */
|
|
import React, { PureComponent } from "react";
|
|
import { connect } from "react-redux";
|
|
|
|
export default
|
|
@connect(state => ({
|
|
colorAccessor: state.colors.colorAccessor,
|
|
dilatedValue: state.pointDilation.categoryField,
|
|
labels: state.centroidLabels.labels
|
|
}))
|
|
class CentroidLabels extends PureComponent {
|
|
render() {
|
|
const {
|
|
labels,
|
|
inverseTransform,
|
|
dilatedValue,
|
|
dispatch,
|
|
colorAccessor
|
|
} = this.props;
|
|
|
|
const labelSVGS = [];
|
|
let fontSize = "15px";
|
|
let fontWeight = null;
|
|
labels.forEach((value, key) => {
|
|
fontSize = "15px";
|
|
fontWeight = null;
|
|
if (key === dilatedValue) {
|
|
fontSize = "18px";
|
|
fontWeight = "800";
|
|
}
|
|
labelSVGS.push(
|
|
<g
|
|
// eslint-disable-next-line react/no-array-index-key
|
|
key={key}
|
|
className="centroid-label"
|
|
transform={`translate(${value[0]}, ${value[1]})`}
|
|
>
|
|
<text
|
|
transform={inverseTransform}
|
|
textAnchor="middle"
|
|
data-label={key}
|
|
style={{
|
|
fontFamily: "Roboto Condensed",
|
|
fontSize,
|
|
fontWeight,
|
|
fill: "black",
|
|
userSelect: "none"
|
|
}}
|
|
onMouseEnter={e =>
|
|
dispatch({
|
|
type: "category value mouse hover start",
|
|
metadataField: colorAccessor,
|
|
categoryField: e.target.getAttribute("data-label")
|
|
})
|
|
}
|
|
onMouseOut={e =>
|
|
dispatch({
|
|
type: "category value mouse hover end",
|
|
metadataField: colorAccessor,
|
|
categoryField: e.target.getAttribute("data-label")
|
|
})
|
|
}
|
|
pointerEvents="visiblePainted"
|
|
>
|
|
{key.length > 20 ? `${key.substr(0, 20)}...` : key}
|
|
</text>
|
|
</g>
|
|
);
|
|
});
|
|
|
|
return <>{labelSVGS}</>;
|
|
}
|
|
}
|