Change to v2 api by Deepak, merge Xiaoyu's genome align track change about block on primary genome, with height/color fix

Author: lidaof

frontend/src/components/trackVis/GenomeAlignTrack.tsx

@@ -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}
@@ -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())}
         />;
@@ -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 === '+')) {
@@ -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)}
@@ -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;
@@ -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}

frontend/src/components/trackVis/commonComponents/AlignmentCoordinates.js

@@ -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);

frontend/src/components/trackVis/commonComponents/HorizontalFragment.js

@@ -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);
@@ -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>
             )

frontend/src/dataSources/GeneSource.js

@@ -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.
  *