the last loaded chunk may go beyond the width of the current browser …

…window
graph-genome · Jun 6, 2020 · 210b44e · 210b44e · AndreaGuarracino · Jun 7, 2020
1 parent b12b692
commit 210b44e
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 27 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,17 +1,22 @@
-import {Layer, Stage, Text} from "react-konva";
-import React, {Component} from "react";
+import { Layer, Stage, Text } from "react-konva";
+import React, { Component } from "react";
 
 import "./App.css";
 import PangenomeSchematic from "./PangenomeSchematic";
-import ComponentRect, {compress_visible_rows} from "./ComponentRect";
+import ComponentRect, { compress_visible_rows } from "./ComponentRect";
 import ComponentNucleotides from "./ComponentNucleotides";
 import LinkColumn from "./LinkColumn";
 import LinkArrow from "./LinkArrow";
-import {calculateLinkCoordinates} from "./LinkRecord";
+import { calculateLinkCoordinates } from "./LinkRecord";
 import NucleotideTooltip from "./NucleotideTooltip";
 import ControlHeader from "./ControlHeader";
-import {observe} from "mobx";
-import {areOverlapping, arraysEqual, calculateEndBinFromScreen, stringToColorAndOpacity,} from "./utilities";
+import { observe } from "mobx";
+import {
+  areOverlapping,
+  arraysEqual,
+  calculateEndBinFromScreen,
+  stringToColorAndOpacity,
+} from "./utilities";
 
 //import makeInspectable from "mobx-devtools-mst";
 // TO_DO: improve the management of visualized components
@@ -20,9 +25,9 @@ let index_to_component_to_visualize_dict;
 function Legend(props) {
   return (
     <img
-        src={process.env.PUBLIC_URL + "/Schematize legend.gif"}
-        alt="legend"
-        style={{
+      src={process.env.PUBLIC_URL + "/Schematize legend.gif"}
+      alt="legend"
+      style={{
         position: "fixed",
         bottom: "20px",
         left: "20px",
@@ -168,12 +173,16 @@ class App extends Component {
     this.props.store.setAvailableZoomLevels(
       this.props.store.chunkIndex["zoom_levels"].keys()
     );
+
+    const deviceWidth = window.innerWidth;
+
     const selZoomLev = this.props.store.getSelectedZoomLevel();
     let [newEndBin, fileArray, fileArrayFasta] = calculateEndBinFromScreen(
       beginBin,
       this.props.store.getEndBin(),
       selZoomLev,
-      this.props.store
+      this.props.store,
+      deviceWidth
     );
     this.props.store.setLastBinPangenome(
       this.props.store.chunkIndex.zoom_levels.get(selZoomLev)["last_bin"]
@@ -205,7 +214,7 @@ class App extends Component {
       //console.log([selZoomLev, endBin, fileArray, fileArrayFasta]);
       let URLprefix =
         process.env.PUBLIC_URL +
-          "/test_data/" +
+        "/test_data/" +
         this.props.store.jsonName +
         "/" +
         selZoomLev +
@@ -380,13 +389,12 @@ class App extends Component {
     }
   }
 
-    componentDidMount() {
-  };
+  componentDidMount() {}
 
   // Now it is wrapped in the updateHighlightedNode() function
-    _updateHighlightedNode(linkRect) {
+  _updateHighlightedNode(linkRect) {
     this.setState({ highlightedLink: linkRect });
-  };
+  }
 
   // Wrapper function to wrap the logic (no link selected and time delay)
   updateHighlightedNode = (linkRect) => {

diff --git a/src/ViewportInputsStore.js b/src/ViewportInputsStore.js
@@ -104,9 +104,10 @@ RootStore = types
 
       /*This method needs to be atomic to avoid spurious updates and out of date validation.*/
 
-      //TO_DO: remove endBin and manage beginBin and widthBinRange (100 by default)?
-      newBegin = Math.max(1, Math.round(newBegin));
-      newEnd = Math.max(2, Math.round(newBegin + self.maxWidthBinRange));
+      newBegin = Math.min(
+        self.last_bin_pangenome,
+        Math.max(1, Math.round(newBegin))
+      );
 
       // So that the end bin is at the most the end of the pangenome
       if (newEnd > self.last_bin_pangenome) {

diff --git a/src/utilities.js b/src/utilities.js
@@ -24,11 +24,21 @@ export function areOverlapping(startA, endA, startB, endB) {
   }
 }
 
-export function calculateEndBinFromScreen(beginBin, endBin, selZoomLev, store) {
-  const deviceWidth = window.innerWidth;
+export function calculateEndBinFromScreen(
+  beginBin,
+  endBin,
+  selZoomLev,
+  store,
+  deviceWidth
+) {
   let widthInCells = deviceWidth / store.pixelsPerColumn;
 
-  console.log("calculateEndBinFromScreen: deviceWidth --> " + deviceWidth);
+  console.log(
+    "calculateEndBinFromScreen: deviceWidth/deviceWidth --> " +
+      deviceWidth +
+      "/" +
+      widthInCells
+  );
 
   let newEndBin = endBin;
 
@@ -46,24 +56,26 @@ export function calculateEndBinFromScreen(beginBin, endBin, selZoomLev, store) {
     //if (areOverlapping(beginBin, endBin, chunk.first_bin, chunk.last_bin)){
     if (chunk.last_bin >= beginBin) {
       const fieldX = store.useWidthCompression ? chunk.compressedX : chunk.x;
-      console.log("fieldX: " + fieldX);
-      console.log("chunk.last_bin: " + chunk.last_bin);
 
       if (firstFieldX === -1) {
         firstFieldX = fieldX;
       }
 
-      // If the new chunck is outside the windows, the chunk-pushing is over
-      if (fieldX - firstFieldX >= widthInCells) {
-        break;
-      }
+      /*console.log("fieldX: " + fieldX);
+      console.log('fieldX - firstFieldX: ' + (fieldX - firstFieldX))
+      console.log("chunk.last_bin: " + chunk.last_bin);*/
 
       chunkURLarray.push(chunk["file"]);
       if (chunk.fasta !== null) {
         fileArrayFasta.push(chunk.fasta);
       }
 
       newEndBin = chunk.last_bin;
+
+      // If the new chunck is outside the windows, the chunk-pushing is over
+      if (fieldX - firstFieldX >= widthInCells) {
+        break;
+      }
     }
   }