fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-09-17 05:47:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

remove dead code and lint (#310)

Browse Source 
remove dead code from client/src/frameworks
delint various files
This commit is contained in:
Bruce Martin
2018-10-10 18:04:43 -07:00
committed by GitHub
parent eb3b3fc59a
commit aea934bb6d
7 changed files with 58 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
client/src/components/app.js
View File

@@ -1,45 +1,36 @@
// jshint esversion: 6
import React from "react";
import _ from "lodash";
import Helmet from "react-helmet";
import Container from "./framework/container";
import { connect } from "react-redux";
// import PulseLoader from "halogen/PulseLoader";
import Container from "./framework/container";
import LeftSideBar from "./leftsidebar";
import Legend from "./continuousLegend";
import Graph from "./graph/graph";
import * as globals from "../globals";
import actions from "../actions";
import SectionHeader from "./framework/sectionHeader";
@connect(state => {
return {
loading: state.controls.loading,
error: state.controls.error
};
})
@connect(state => ({
loading: state.controls.loading,
error: state.controls.error
}))
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
_onURLChanged() {
this.props.dispatch({ type: "url changed", url: document.location.href });
}
componentDidMount() {
const { dispatch } = this.props;
/* listen for url changes, fire one when we start the app up */
window.addEventListener("popstate", this._onURLChanged);
this._onURLChanged();
this.props.dispatch(actions.doInitialDataLoad(window.location.search));
dispatch(actions.doInitialDataLoad(window.location.search));
/* listen for resize events */
window.addEventListener("resize", () => {
this.props.dispatch({
dispatch({
type: "window resize",
data: {
height: window.innerHeight,
@@ -47,7 +38,7 @@ class App extends React.Component {
}
});
});
this.props.dispatch({
dispatch({
type: "window resize",
data: {
height: window.innerHeight,
@@ -56,6 +47,12 @@ class App extends React.Component {
});
}
_onURLChanged() {
const { dispatch } = this.props;
dispatch({ type: "url changed", url: document.location.href });
}
render() {
const { loading, error } = this.props;
return (

84
client/src/components/continuousLegend/index.js
View File

@@ -6,34 +6,33 @@ import { interpolateViridis } from "d3-scale-chromatic";
// create continuous color legend
// http://bl.ocks.org/syntagmatic/e8ccca52559796be775553b467593a9f
const continuous = (selector_id, colorscale) => {
const continuous = (selectorId, colorscale) => {
const legendheight = 200;
const legendwidth = 80;
const margin = { top: 10, right: 60, bottom: 10, left: 2 };
const canvas = d3
.select(selector_id)
.style("height", legendheight + "px")
.style("width", legendwidth + "px")
// .style("position", "relative")
.select(selectorId)
.style("height", `${legendheight}px`)
.style("width", `${legendwidth}px`)
.append("canvas")
.attr("height", legendheight - margin.top - margin.bottom)
.attr("width", 1)
.style("height", legendheight - margin.top - margin.bottom + "px")
.style("width", legendwidth - margin.left - margin.right + "px")
// .style("border", "1px solid #000")
.style("height", `${legendheight - margin.top - margin.bottom}px`)
.style("width", `${legendwidth - margin.left - margin.right}px`)
.style("position", "absolute")
.style("top", margin.top + 1 + "px")
.style("left", margin.left + 1 + "px")
.style("top", `${margin.top + 1}px`)
.style("left", `${margin.left + 1}px`)
.style(
"transform",
"scale(1,-1)"
) /* flip it! dark is high value light is low. we flip the color scale as well [1, 0] instead of [0, 1] */
) /* flip it! dark is high value light is low.
we flip the color scale as well [1, 0] instead of [0, 1] */
.node();
var ctx = canvas.getContext("2d");
const ctx = canvas.getContext("2d");
var legendscale = d3
const legendscale = d3
.scaleLinear()
.range([1, legendheight - margin.top - margin.bottom])
.domain([
@@ -42,9 +41,9 @@ const continuous = (selector_id, colorscale) => {
]); /* we flip this to make viridis colors dark if high in the color scale */
// image data hackery based on http://bl.ocks.org/mbostock/048d21cf747371b11884f75ad896e5a5
var image = ctx.createImageData(1, legendheight);
d3.range(legendheight).forEach(function(i) {
var c = d3.rgb(colorscale(legendscale.invert(i)));
const image = ctx.createImageData(1, legendheight);
d3.range(legendheight).forEach(i => {
const c = d3.rgb(colorscale(legendscale.invert(i)));
image.data[4 * i] = c.r;
image.data[4 * i + 1] = c.g;
image.data[4 * i + 2] = c.b;
@@ -52,7 +51,8 @@ const continuous = (selector_id, colorscale) => {
});
ctx.putImageData(image, 0, 0);
// A simpler way to do the above, but possibly slower. keep in mind the legend width is stretched because the width attr of the canvas is 1
// A simpler way to do the above, but possibly slower. keep in mind the legend
// width is stretched because the width attr of the canvas is 1
// See http://stackoverflow.com/questions/4899799/whats-the-best-way-to-set-a-single-pixel-in-an-html5-canvas
/*
d3.range(legendheight).forEach(function(i) {
@@ -61,17 +61,17 @@ const continuous = (selector_id, colorscale) => {
});
*/
var legendaxis = d3
const legendaxis = d3
.axisRight()
.scale(legendscale)
.tickSize(6)
.ticks(8);
var svg = d3
.select(selector_id)
const svg = d3
.select(selectorId)
.append("svg")
.attr("height", legendheight + "px")
.attr("width", legendwidth + "px")
.attr("height", `${legendheight}px`)
.attr("width", `${legendwidth}px`)
.style("position", "absolute")
.style("left", "0px")
.style("top", "0px");
@@ -81,22 +81,16 @@ const continuous = (selector_id, colorscale) => {
.attr("class", "axis")
.attr(
"transform",
"translate(" +
(legendwidth - margin.left - margin.right + 3) +
"," +
margin.top +
")"
`translate(${legendwidth - margin.left - margin.right + 3},${margin.top})`
)
.call(legendaxis);
};
@connect(state => {
return {
colorAccessor: state.controls.colorAccessor,
colorScale: state.controls.colorScale,
responsive: state.responsive
};
})
@connect(state => ({
colorAccessor: state.controls.colorAccessor,
colorScale: state.controls.colorScale,
responsive: state.responsive
}))
class ContinuousLegend extends React.Component {
constructor(props) {
super(props);
@@ -104,10 +98,11 @@ class ContinuousLegend extends React.Component {
}
componentDidUpdate(prevProps) {
const { colorAccessor, responsive, colorScale } = this.props;
if (
prevProps.colorAccessor !== this.props.colorAccessor ||
prevProps.responsive.height !== this.props.responsive.height ||
prevProps.responsive.width !== this.props.responsive.width
prevProps.colorAccessor !== colorAccessor ||
prevProps.responsive.height !== responsive.height ||
prevProps.responsive.width !== responsive.width
) {
/* always remove it, if it's not continuous we don't put it back. */
d3.select("#continuous_legend")
@@ -115,30 +110,27 @@ class ContinuousLegend extends React.Component {
.remove();
}
if (this.props.colorAccessor && this.props.colorScale) {
if (colorAccessor && colorScale) {
/* fragile! continuous range is 0 to 1, not [#fa4b2c, ...], make this a flag? */
if (this.props.colorScale.range()[0][0] !== "#") {
if (colorScale.range()[0][0] !== "#") {
continuous(
"#continuous_legend",
d3
.scaleSequential(interpolateViridis)
.domain(this.props.colorScale.domain())
d3.scaleSequential(interpolateViridis).domain(colorScale.domain())
);
}
}
}
drawScale() {}
render() {
const { colorAccessor, responsive } = this.props;
return (
<div
id="continuous_legend"
style={{
position: "fixed",
display: this.props.colorAccessor ? "inherit" : "none",
display: colorAccessor ? "inherit" : "none",
right: 0,
top: this.props.responsive.height / 2
top: responsive.height / 2
}}
/>
);

7
client/src/components/framework/container.js
View File

@@ -3,8 +3,9 @@ import React from "react";
import styles from "./container.css";
const Container = props => (
<div className={styles.container}>{props.children}</div>
);
const Container = props => {
const { children } = props;
return <div className={styles.container}>{children}</div>;
};
export default Container;

3
client/src/components/framework/header.css
View File

@@ -1,3 +0,0 @@
.header {
background: red;
}

13
client/src/components/framework/header.js
View File

@@ -1,13 +0,0 @@
// jshint esversion: 6
import React from "react";
import Container from "./container";
import styles from "./header.css";
const Header = () => (
<header className={styles.header}>
<Container />
</header>
);
export default Header;

15
client/src/components/framework/sectionHeader.js
View File

@@ -1,15 +0,0 @@
// jshint esversion: 6
import React from "react";
const SectionHeader = ({ text }) => (
<p
style={{
fontSize: 32,
fontWeight: 700
}}
>
{text}
</p>
);
export default SectionHeader;

2
client/src/components/scatterplot/scatterplot.js
View File

@@ -301,5 +301,3 @@ class Scatterplot extends React.Component {
}
export default Scatterplot;
// <SectionHeader text="Continuous Metadata"/>