mirror of
https://github.com/chanzuckerberg/cellxgene.git
synced 2026-09-26 18:48:11 +08:00
Severiano Badajoz
334b8bb8da
* Connect mouse over events to reducer actions * Change Styling on hover * Rename reducer actions to be more descriptive * Reorder reducer in cascade * Create centroid calculation util * Whitespace * Typo fix, use correct action * Create centroid calc util * Create centroid svg setup * Refactor existing svg layer to toolSVG * Change calcCentroid signature and centroidXY to match mapPointToScreen * Add id and styling * Run prettier * Set z-index to 999 * Draw the label * Introduce the centroid SVG, refactor code to allow both SVG layers * Add text label and compute radius based on population * Implement optional chaining * Update font family * Optimize calcMeanCentroid() * Create and utilize calcMedianCentroid() * Remove mass circle from label * Remove styling change on hover * Remove reducer action logs * Prettier * Swap out binds for arrow functions * Style text * switch from selectAll() to select() * Reflect centroid container's purpose in id * Remove mass from the output * Swap to obj * Add finite check * Don't draw centroid if no finite values * Fix finite check * Remove log * Toggle label coloring based on colorBy state * Pass cursor events through centroid svg
67 lines
1.7 KiB
JavaScript
67 lines
1.7 KiB
JavaScript
// jshint esversion: 6
|
|
import * as d3 from "d3";
|
|
import styles from "./graph.css";
|
|
import Lasso from "./setupLasso";
|
|
|
|
/******************************************
|
|
*******************************************
|
|
put svg & brush in DOM
|
|
*******************************************
|
|
******************************************/
|
|
|
|
export default (
|
|
selectionToolType,
|
|
handleStartAction,
|
|
handleDragAction,
|
|
handleEndAction,
|
|
handleCancelAction,
|
|
responsive,
|
|
graphPaddingRight,
|
|
graphInteractionMode
|
|
) => {
|
|
const svg = d3
|
|
.select("#graphAttachPoint")
|
|
.append("svg")
|
|
.attr("id", "tool")
|
|
.attr("data-testid", "layout-overlay")
|
|
.attr("width", responsive.width - graphPaddingRight)
|
|
.attr("height", responsive.height)
|
|
.attr("class", `${styles.graphSVG}`)
|
|
.style("z-index", 999)
|
|
.style("display", graphInteractionMode === "select" ? "inherit" : "none");
|
|
|
|
if (selectionToolType === "brush") {
|
|
const brush = d3
|
|
.brush()
|
|
.extent([
|
|
[0, 0],
|
|
[responsive.width - graphPaddingRight, responsive.height]
|
|
])
|
|
.on("start", handleStartAction)
|
|
.on("brush", handleDragAction)
|
|
// FYI, brush doesn't generate cancel
|
|
.on("end", handleEndAction);
|
|
|
|
const brushContainer = svg
|
|
.append("g")
|
|
.attr("class", "graph_brush")
|
|
.call(brush);
|
|
|
|
return { svg, container: brushContainer, tool: brush };
|
|
}
|
|
|
|
if (selectionToolType === "lasso") {
|
|
const lasso = Lasso()
|
|
.on("end", handleEndAction)
|
|
// FYI, Lasso doesn't generate drag
|
|
.on("start", handleStartAction)
|
|
.on("cancel", handleCancelAction);
|
|
|
|
const lassoContainer = svg.call(lasso);
|
|
|
|
return { svg, container: lassoContainer, tool: lasso };
|
|
}
|
|
|
|
throw new Error("unknown graph selection tool");
|
|
};
|