Commit be9cde1e authored by Ian Sillitoe's avatar Ian Sillitoe
Browse files

trying to get match list figure working

parent 0bfe5c08
...@@ -12,7 +12,7 @@ import TableSortLabel from "@material-ui/core/TableSortLabel"; ...@@ -12,7 +12,7 @@ import TableSortLabel from "@material-ui/core/TableSortLabel";
import Toolbar from "@material-ui/core/Toolbar"; import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
import Button from "@material-ui/core/Button"; //import Button from "@material-ui/core/Button";
import Badge from "@material-ui/core/Badge"; import Badge from "@material-ui/core/Badge";
import Chip from "@material-ui/core/Chip"; import Chip from "@material-ui/core/Chip";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@material-ui/core/IconButton";
...@@ -328,7 +328,7 @@ class FunfamMatchList extends React.Component { ...@@ -328,7 +328,7 @@ class FunfamMatchList extends React.Component {
<TableCell> <TableCell>
<ScanMatchFigure <ScanMatchFigure
width={250} width={250}
residueLength={querySequence.length} sequenceLength={querySequence.length}
segments={n.segments} segments={n.segments}
/> />
</TableCell> </TableCell>
......
...@@ -7,30 +7,29 @@ const styles = theme => ({ ...@@ -7,30 +7,29 @@ const styles = theme => ({
position: "relative", position: "relative",
display: "block", display: "block",
height: 2, height: 2,
"background-color": "#ddd" "background-color": "#ddd",
}, },
hsp: { match: {
height: 7, height: 7,
position: "absolute", position: "absolute",
"background-color": "#c00" "background-color": "#c00",
} }
}); });
class ScanMatchFigure extends React.Component { class ScanMatchFigure extends React.Component {
render() { render() {
const { classes, width, residueLength, segments } = this.props; const { classes, width, sequenceLength, segments } = this.props;
const resPerPixel = residueLength / width; const pixelsPerRes = width / sequenceLength;
const style = { width }; const style = { width };
console.log('width', width, 'sequenceLength', sequenceLength, 'pixelsPerRes', pixelsPerRes);
return ( return (
<div className={classes.root} style={style}> <div className={classes.root} style={style}>
{segments.map(n => { {segments.map(n => {
const { id, start, end } = n; const { id, start, end } = n;
const w = (end - start) * resPerPixel; const w = (end - start) * pixelsPerRes;
const l = start * resPerPixel; const l = start * pixelsPerRes;
const spanStyle = { width: w + "%", left: l + "%" }; const spanStyle = { width: w + "%", left: l + "%" };
console.log("ScanMatchFigure.style: ", n, spanStyle); return <div key={id} className={classes.match} style={spanStyle} />;
return <span key={id} style={spanStyle} />;
})} })}
</div> </div>
); );
...@@ -43,7 +42,7 @@ ScanMatchFigure.defaultProps = { ...@@ -43,7 +42,7 @@ ScanMatchFigure.defaultProps = {
ScanMatchFigure.propTypes = { ScanMatchFigure.propTypes = {
classes: PropTypes.object.isRequired, classes: PropTypes.object.isRequired,
residueLength: PropTypes.number.isRequired, sequenceLength: PropTypes.number.isRequired,
segments: PropTypes.array.isRequired, segments: PropTypes.array.isRequired,
width: PropTypes.number.isRequired width: PropTypes.number.isRequired
}; };
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment