Skip to content

Commit

Permalink
Change to v2 api by Deepak, merge Xiaoyu's genome align track change …
Browse files Browse the repository at this point in the history 
…about block on primary genome, with height/color fix
  • Loading branch information
@lidaof
lidaof committed Jun 11, 2019
2 parents af6a69a + 59f49d4 commit ee2668f
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 20 deletions.
43 changes: 28 additions & 15 deletions frontend/src/components/trackVis/GenomeAlignTrack.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,13 +200,13 @@ class GenomeAlignTrackWithoutOptions extends React.Component<PropsFromTrackConta
}

// Add arrow to query region, arrow direction is determined by plotReverse.
renderRoughStrand(strand: string, viewWindow: OpenInterval, roughHeight: number) {
renderRoughStrand(strand: string, topY: number, viewWindow: OpenInterval, isPrimary: boolean) {
const plotReverse = strand === '-' ? true : false;
return <AnnotationArrows
key={"roughArrow" + viewWindow.start}
key={"roughArrow" + viewWindow.start + isPrimary}
startX={viewWindow.start}
endX={viewWindow.end}
y={roughHeight - RECT_HEIGHT}
y={topY}
height={RECT_HEIGHT}
opacity={0.75}
isToRight={!plotReverse}
Expand All @@ -215,15 +215,24 @@ class GenomeAlignTrackWithoutOptions extends React.Component<PropsFromTrackConta
}

renderRoughAlignment(placement: PlacedMergedAlignment,
plotReverse: boolean, roughHeight: number, fillColor: string) {
const { queryFeature, queryXSpan, segments } = placement;
plotReverse: boolean, roughHeight: number) {
const { queryFeature, queryXSpan, segments, targetXSpan } = placement;
const queryRectTopY = roughHeight - RECT_HEIGHT;
const targetGenomeRect = <rect
x={targetXSpan.start}
y={0}
width={targetXSpan.getLength()}
height={RECT_HEIGHT}
fill={this.props.options.primaryColor}
// tslint:disable-next-line:jsx-no-lambda
onClick={() => alert("You clicked on " + queryFeature.getLocus().toString())}
/>;
const queryGenomeRect = <rect
x={queryXSpan.start}
y={queryRectTopY}
width={queryXSpan.getLength()}
height={RECT_HEIGHT}
fill={fillColor}
fill={this.props.options.queryColor}
// tslint:disable-next-line:jsx-no-lambda
onClick={() => alert("You clicked on " + queryFeature.getLocus().toString())}
/>;
Expand All @@ -245,10 +254,10 @@ class GenomeAlignTrackWithoutOptions extends React.Component<PropsFromTrackConta

const segmentPolygons = segments.map((segment, i) => {
const points = [
[Math.floor(segment.targetXSpan.start), 0],
[Math.floor(segment.targetXSpan.start), RECT_HEIGHT],
[Math.floor(segment.queryXSpan.start), queryRectTopY],
[Math.ceil(segment.queryXSpan.end), queryRectTopY],
[Math.ceil(segment.targetXSpan.end), 0],
[Math.ceil(segment.targetXSpan.end), RECT_HEIGHT],
];
if ((!plotReverse && segment.record.queryStrand === '-') ||
(plotReverse && segment.record.queryStrand === '+')) {
Expand All @@ -258,14 +267,15 @@ class GenomeAlignTrackWithoutOptions extends React.Component<PropsFromTrackConta
return <polygon
key={i}
points={points as any} // Contrary to what Typescript thinks, you CAN pass a number[][].
fill={fillColor}
fill={this.props.options.queryColor}
fillOpacity={0.5}
// tslint:disable-next-line:jsx-no-lambda
onClick={() => alert("You clicked on " + segment.record.getLocus())}
/>;
});

return <React.Fragment key={queryFeature.getLocus().toString()} >
{targetGenomeRect}
{queryGenomeRect}
{label}
{ensureMaxListLength(segmentPolygons, MAX_POLYGONS)}
Expand Down Expand Up @@ -297,7 +307,7 @@ class GenomeAlignTrackWithoutOptions extends React.Component<PropsFromTrackConta
* @inheritdoc
*/
render() {
const { width, trackModel, alignment, options } = this.props;
const { width, trackModel, alignment, options, viewWindow } = this.props;
const { height, queryColor, primaryColor } = options;
let drawheight, svgElements = [];
const hoverHeight = height - ALIGN_TRACK_MARGIN;
Expand Down Expand Up @@ -331,12 +341,15 @@ class GenomeAlignTrackWithoutOptions extends React.Component<PropsFromTrackConta
const queryXSpanArray = [].concat.apply([], queryXSpanArrayArray);
const strand = alignment.plotStrand;
svgElements = drawData.map(placement =>
this.renderRoughAlignment(placement, strand === '-', height, queryColor));
const viewWindow = alignment.primaryVisData.viewWindow;
const arrow = this.renderRoughStrand(strand, viewWindow, height);
svgElements.push(arrow);
this.renderRoughAlignment(placement, strand === '-', height));
const arrows = this.renderRoughStrand("+", 0, viewWindow, false);
svgElements.push(arrows);
const primaryViewWindow = alignment.primaryVisData.viewWindow;
const primaryArrows = this.renderRoughStrand(strand, height - RECT_HEIGHT, primaryViewWindow, true);
svgElements.push(primaryArrows);
visualizer = <HorizontalFragment
height={height - RECT_HEIGHT}
height={height}
rectHeight={RECT_HEIGHT}
primaryColor={primaryColor}
queryColor={queryColor}
targetXSpanList={targetXSpanArray}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/trackVis/commonComponents/AlignmentCoordinates.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ class AlignmentSequence extends React.Component {
render() {
const {alignment, x, halfLength, target, query, basesPerPixel} = this.props;
if (!alignment) {
return <div>{"No alignment available"}</div>;
return <div>No alignment available</div>;
}
else {
const highlightLength = Math.max(Math.round(basesPerPixel), 1);
Expand Down
7 changes: 4 additions & 3 deletions frontend/src/components/trackVis/commonComponents/HorizontalFragment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@ class HorizontalFragment extends React.Component {
* @inheritdoc
*/
render() {
const {height, targetXSpanList, queryXSpanList, primaryColor, queryColor, onMouseMove, onMouseLeave, style, children, ...otherProps} = this.props;
const {height, targetXSpanList, queryXSpanList, primaryColor, queryColor,
onMouseMove, onMouseLeave, style, children, rectHeight, ...otherProps} = this.props;
// calculate xSpanIndex by comparing relativeX with tangetXSpan.
const relativeX = this.state.relativeX;
const xSpanIndex = targetXSpanList.reduce((iCusor, x, i) => x.start < relativeX && x.end >= relativeX ? i : iCusor, NaN);
Expand All @@ -73,8 +74,8 @@ class HorizontalFragment extends React.Component {
lines = (
<React.Fragment>
{<HorizontalLine relativeY={LINE_MARGIN} xSpan={targetXSpan} color={primaryColor} />}
{<Triangle relativeX={relativeX - TRIANGLE_SIZE} relativeY={LINE_MARGIN + LINE_WIDTH} color={primaryColor} direction={"down"}/>}
{<Triangle relativeX={queryX - TRIANGLE_SIZE} relativeY={height - LINE_MARGIN - LINE_WIDTH - TRIANGLE_SIZE} color={queryColor} direction={"up"}/>}
{<Triangle relativeX={relativeX - TRIANGLE_SIZE} relativeY={LINE_MARGIN + LINE_WIDTH + rectHeight} color={primaryColor} direction={"down"}/>}
{<Triangle relativeX={queryX - TRIANGLE_SIZE} relativeY={height - rectHeight - LINE_MARGIN - LINE_WIDTH - TRIANGLE_SIZE} color={queryColor} direction={"up"}/>}
{<HorizontalLine relativeY={height - LINE_MARGIN - LINE_WIDTH} xSpan={queryXSpan} color={queryColor} />}
</React.Fragment>
)
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/dataSources/GeneSource.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import _ from 'lodash';
import DataSource from './DataSource';


export const AWS_API = "https://lambda.epigenomegateway.org";
export const AWS_API = "https://lambda.epigenomegateway.org/v2";
/**
* A DataSource that calls our backend API for gene annotations.
*
Expand Down

0 comments on commit ee2668f

Please sign in to comment.