diff --git a/client/src/components/brushableHistogram/index.js b/client/src/components/brushableHistogram/index.js index fe32f6b2..5ef7adb1 100644 --- a/client/src/components/brushableHistogram/index.js +++ b/client/src/components/brushableHistogram/index.js @@ -24,8 +24,8 @@ import { makeContinuousDimensionName } from "../../util/nameCreators"; class HistogramBrush extends React.Component { static getColumn(world, field, clipped = true) { /* - Return the underlying Dataframe column for our field. By default, - returns the clipped column. If clipped===false, will return the + Return the underlying Dataframe column for our field. By default, + returns the clipped column. If clipped===false, will return the unclipped column. */ const obsAnnotations = clipped @@ -357,14 +357,24 @@ class HistogramBrush extends React.Component { .append("g") .attr("class", "axis axis--x") .attr("transform", `translate(0,${this.height - this.marginBottom})`) - .call(d3.axisBottom(x).ticks(5)); + .call( + d3 + .axisBottom(x) + .ticks(5) + .tickFormat(d3.format(".0s")) + ); /* Y AXIS */ svg .append("g") .attr("class", "axis axis--y") .attr("transform", `translate(${this.width - this.marginRight},0)`) - .call(d3.axisRight(y).ticks(3)); + .call( + d3 + .axisRight(y) + .ticks(3) + .tickFormat(d3.format(".0s")) + ); /* axis style */ svg.selectAll(".axis text").style("fill", "rgb(80,80,80)"); @@ -407,8 +417,8 @@ class HistogramBrush extends React.Component { isDiffExp ? "histogram-diffexp" : isUserDefined - ? "histogram-user-gene" - : "histogram-continuous-metadata" + ? "histogram-user-gene" + : "histogram-continuous-metadata" } style={{ padding: globals.leftSidebarSectionPadding, diff --git a/client/src/components/continuous/drawAxes.js b/client/src/components/continuous/drawAxes.js deleted file mode 100644 index 35aa43cf..00000000 --- a/client/src/components/continuous/drawAxes.js +++ /dev/null @@ -1,83 +0,0 @@ -// jshint esversion: 6 -import * as d3 from "d3"; -import styles from "./parallelCoordinates.css"; -import { yAxis, brushstart } from "./util"; - -const drawAxes = ( - svg, - ctx, - dimensions, - xscale, - height, - width, - handleBrushAction, - handleColorAction -) => { - /***************************************** - ****************************************** - Handles a brush event, toggling the display of foreground lines. - ****************************************** - ******************************************/ - - function brush() { - const actives = []; - svg - .selectAll(".parcoords_axis .parcoords_brush") - .filter(() => d3.brushSelection(this)) - .each(d => { - actives.push({ - dimension: d, - extent: d3.brushSelection(this) - }); - }); - /* fire action, with selected dimensions & their values */ - handleBrushAction(actives); - } - - const axes = svg - .selectAll(".parcoords_axis") - .data(dimensions) - .enter() - .append("g") - .attr("class", `${styles.axis} parcoords_axis`) - .attr("transform", (d, i) => `translate(${xscale(i)})`); - - axes - .append("g") - .each(d => { - const renderAxis = - "axis" in d - ? d.axis.scale(d.scale) // custom axis - : yAxis.scale(d.scale); // default axis - d3.select(this).call(renderAxis); - }) - .append("text") - .on("click", d => { - handleColorAction(d.key); - }) - .attr("class", styles.title) - .attr("text-anchor", "start") - .text(d => ("description" in d ? `${d.description} 🖌️` : `${d.key} 🖌️`)); - - // Add and store a brush for each axis. - axes - .append("g") - .attr("class", `${styles.brush} parcoords_brush`) - .each(d => { - d3.select(this).call( - (d.brush = d3 - .brushY() - .extent([[-10, 0], [10, height]]) - .on("start", brushstart) - .on("brush", brush) - .on("end", brush)) - ); - }) - .selectAll("rect") - .attr("x", -8) - .attr("width", 16); - - return axes; -}; - -export default drawAxes;