#9 PaddingColumns -> pixelsBetween. leftPadding() -> firstDepartureCo…

…lumn(). Refactored leftXStart to simplify code.
graph-genome · Feb 3, 2020 · dbe76cb · dbe76cb
1 parent 92d2fc8
commit dbe76cb
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 26 deletions.
diff --git a/src/App.js b/src/App.js
@@ -40,9 +40,14 @@ class App extends Component {
         let schematic = new PangenomeSchematic({beginBin, endBin});
         console.log(schematic.pathNames.length);
         const sum = (accumulator, currentValue) => accumulator + currentValue;
-        let actualWidth = this.props.store.leftOffset + schematic.components.map(component =>
-            component.arrivals.length + (component.departures.length-1) + (component.lastBin - component.firstBin) + 1 + this.props.store.paddingColumns
-        ).reduce(sum) * this.props.store.pixelsPerColumn;
+        let columnsInComponents = schematic.components.map(component =>
+            component.arrivals.length + (component.departures.length-1) +
+            (component.lastBin - component.firstBin) + 1
+        ).reduce(sum);
+        let paddingBetweenComponents = this.props.store.pixelsBetween * schematic.components.length;
+        let actualWidth = this.props.store.leftOffset +
+            columnsInComponents * this.props.store.pixelsPerColumn +
+            paddingBetweenComponents;
         console.log(actualWidth);
         // console.log(schematic.components);
         this.state = {
@@ -75,11 +80,13 @@ class App extends Component {
         // this.props.store.updateHighlightedLink(linkRect); // TODO this does not work, ask Robert about it
     };
 
-    leftXStart(schematizeComponent, i) {
-        return (schematizeComponent.firstBin - this.props.store.beginBin) + (i * this.props.store.paddingColumns) + schematizeComponent.offset;
+    leftXStart(schematizeComponent, i, firstDepartureColumn, j) {
+        /* Return the x coordinate pixel that starts the LinkColumn at i, j*/
+        let previousColumns = schematizeComponent.firstBin - this.props.store.beginBin + schematizeComponent.offset;
+        let pixelsFromColumns = (previousColumns + firstDepartureColumn + j) * this.props.store.pixelsPerColumn;
+        return this.props.store.leftOffset + pixelsFromColumns + (i * this.props.store.pixelsBetween);
     }
 
-
     renderComponent(schematizeComponent, i) {
         return (
             <>
@@ -89,10 +96,10 @@ class App extends Component {
                     x={this.state.schematize[i].x + this.props.store.leftOffset}
                     y={this.props.store.topOffset}
                     height={this.visibleHeight()}
-                    width={(schematizeComponent.leftPadding() + (schematizeComponent.departures.length-1))}
+                    width={(schematizeComponent.firstDepartureColumn() + (schematizeComponent.departures.length-1))}
                     pixelsPerColumn={this.props.store.pixelsPerColumn}
                     pixelsPerRow={this.props.store.pixelsPerRow}
-                    paddingColumns={this.props.store.paddingColumns}
+                    pixelsBetween={this.props.store.pixelsBetween}
                     compressed_row_mapping={this.compressed_row_mapping}
                 />
 
@@ -103,7 +110,7 @@ class App extends Component {
                 )}
                 {schematizeComponent.departures.slice(0,-1).map(
                     (linkColumn, j) => {
-                        let leftPad = schematizeComponent.leftPadding();
+                        let leftPad = schematizeComponent.firstDepartureColumn();
                         return this.renderLinkColumn(schematizeComponent, i, leftPad, j, linkColumn);
                     }
                 )}
@@ -112,8 +119,9 @@ class App extends Component {
     }
 
 
-    renderLinkColumn(schematizeComponent, i, leftPadding, j, linkColumn) {
-        let xCoordArrival = this.props.store.leftOffset + (this.leftXStart(schematizeComponent,i) + leftPadding + j) * this.props.store.pixelsPerColumn;
+    renderLinkColumn(schematizeComponent, i, firstDepartureColumn, j, linkColumn) {
+        let xCoordArrival = this.leftXStart(schematizeComponent,i, firstDepartureColumn, j) +
+            this.props.store.leftOffset;
         let localColor = stringToColor(linkColumn, this.state.highlightedLink);
         return <LinkColumn
             key={"departure" + i + j}

diff --git a/src/ComponentRect.js b/src/ComponentRect.js
@@ -52,7 +52,7 @@ class ComponentRect extends React.Component {
   renderOccupants(occupant, i, j) {
     const parent = this.props.item;
     const x_val = this.props.x + (parent.arrivals.length * this.props.pixelsPerColumn);
-    const width = (parent.leftPadding() - parent.arrivals.length) * this.props.pixelsPerColumn;
+    const width = (parent.firstDepartureColumn() - parent.arrivals.length) * this.props.pixelsPerColumn;
     if (occupant) {
       return <ComponentConnectorRect
           key={"occupant" + i + j}
@@ -86,12 +86,12 @@ class ComponentRect extends React.Component {
     let component = this.props.item
     // x is the (num_bins + num_arrivals + num_departures)*pixelsPerColumn
     if (useConnector) {
-      const x_val = this.props.x + (component.leftPadding() + component.departures.length-1) * this.props.pixelsPerColumn;
+      const x_val = this.props.x + (component.firstDepartureColumn() + component.departures.length-1) * this.props.pixelsPerColumn;
       return <ComponentConnectorRect
           key={"occupant" + j}
           x={x_val}
           y={this.props.y + this.props.compressed_row_mapping[j] * this.props.pixelsPerRow}
-          width={this.props.paddingColumns * this.props.pixelsPerColumn} //Clarified and corrected adjacent connectors as based on paddingColumns width #9
+          width={this.props.pixelsBetween} //Clarified and corrected adjacent connectors as based on pixelsBetween width #9
           height={this.props.pixelsPerRow}
           color={'#464646'}
       />

diff --git a/src/LinkRecord.js b/src/LinkRecord.js
@@ -28,17 +28,14 @@ export function calculateLinkCoordinates(schematic, pixelsPerColumn, topOffset,
 
     for (let i = 0; i < schematic.length; i++) {
         let schematizeComponent = schematic[i];
-        schematizeComponent.x = (leftXStart(schematizeComponent, i)) * pixelsPerColumn;
+        schematizeComponent.x = leftXStart(schematizeComponent, i, 0, 0);
         //ARRIVALS: Calculate all X
         for (let j = 0; j < schematizeComponent.arrivals.length; j++) {
             let arrival = schematizeComponent.arrivals[j];
-            let xCoordArrival =
-                (leftXStart(schematizeComponent, i) + j) * pixelsPerColumn;
+            let xCoordArrival = leftXStart(schematizeComponent, i, 0, j);
             let paddedKey = arrival.key;
             if (!(paddedKey in linkToXMapping)) {
                 //place holder value, go as far right as possible
-                // linkToXMapping[paddedKey] = [xCoordArrival,
-                //     this.state.actualWidth + 100]
                 // TODO place holder value in the same place
                 linkToXMapping[paddedKey] = new LinkRecord(arrival, xCoordArrival, xCoordArrival, true)
             } else {
@@ -48,9 +45,8 @@ export function calculateLinkCoordinates(schematic, pixelsPerColumn, topOffset,
         //DEPARTURES: Calculate all X
         for (let k = 0; k < schematizeComponent.departures.length-1; k++) {
             let departure = schematizeComponent.departures[k];
-            let xCoordDeparture = (leftXStart(schematizeComponent, i)
-                + schematizeComponent.leftPadding()
-                + k) * pixelsPerColumn;
+            let xCoordDeparture = (leftXStart(schematizeComponent, i,
+                schematizeComponent.firstDepartureColumn(), k));
             let paddedKey = departure.key;
             if (!(paddedKey in linkToXMapping)) {
                 //place holder value, go as far left as possible

diff --git a/src/PangenomeSchematic.js b/src/PangenomeSchematic.js
@@ -63,7 +63,7 @@ class Component {
 		this.occupants = Array.from(component.occupants);
 		this.num_bin = this.lastBin - this.firstBin + 1;
 	}
-	leftPadding() {
+	firstDepartureColumn() {
 		return (this.num_bin) + this.arrivals.length;
 	}
 }

diff --git a/src/ViewportInputsStore.js b/src/ViewportInputsStore.js
@@ -5,9 +5,9 @@ export const RootStore = types
         beginBin: 1,
         endBin: 200,
         pixelsPerColumn:6,
-        pixelsPerRow: 5,
-        paddingColumns:1,
-        leftOffset:10,
+        pixelsPerRow: 2,
+        pixelsBetween:5,
+        leftOffset:5,
         topOffset: 400,
         highlightedLink: 0 // we will compare linkColumns
     })