initial modification to fill entirely the screen

src/App.js

@@ -119,7 +119,7 @@ class App extends Component {
     );
 
     // For debugging purposes
-      //makeInspectable(this.props.store);
+    //makeInspectable(this.props.store);
   }
 
   prepareWhichComponentsToVisualize() {
@@ -137,7 +137,7 @@ class App extends Component {
           schematizeComponent.lastBin
         )
       ) {
-          //console.log('PREPARE: ' + schematizeComponent.index + ': [' + schematizeComponent.firstBin + ',' + schematizeComponent.lastBin + '] - ' + schematizeComponent.arrivals.length + ' - ' + schematizeComponent.departures.length)
+        //console.log('PREPARE: ' + schematizeComponent.index + ': [' + schematizeComponent.firstBin + ',' + schematizeComponent.lastBin + '] - ' + schematizeComponent.arrivals.length + ' - ' + schematizeComponent.departures.length)
 
         index_to_component_to_visualize_dict[
           schematizeComponent.index
@@ -174,7 +174,7 @@ class App extends Component {
       this.props.store.chunkIndex["zoom_levels"].keys()
     );
     const selZoomLev = this.props.store.getSelectedZoomLevel();
-    let [fileArray, fileArrayFasta] = calculateEndBinFromScreen(
+    let [newEndBin, fileArray, fileArrayFasta] = calculateEndBinFromScreen(
       beginBin,
       this.props.store.getEndBin(),
       selZoomLev,
@@ -194,8 +194,15 @@ class App extends Component {
         Math.round((beginBin - 1) * scaling_factor),
         Math.round((this.props.store.getEndBin() - 1) * scaling_factor)
       );
+    } else if (this.props.store.getEndBin() !== newEndBin) {
+      bin_range_changed = this.props.store.updateBeginEndBin(
+        beginBin,
+        newEndBin
+      );
     }
 
+    console.log("newEndBin: " + newEndBin);
+
     // To avoid to do the preparation and the following operations two times
     if (!bin_range_changed) {
       this.prepareWhichComponentsToVisualize();
@@ -676,8 +683,8 @@ class App extends Component {
           const nt_shift = this.schematic.components[0].firstBin || 1;
 
           const nucleotides_slice = this.schematic.nucleotides.slice(
-              schematizeComponent.firstBin - nt_shift, // firstBin is 1 indexed, but this is canceled by nt_shift
-              schematizeComponent.lastBin - nt_shift + 1 // inclusive end
+            schematizeComponent.firstBin - nt_shift, // firstBin is 1 indexed, but this is canceled by nt_shift
+            schematizeComponent.lastBin - nt_shift + 1 // inclusive end
           );
 
           //console.log("nucleotides_slice: " + nucleotides_slice);

src/PangenomeSchematic.js

@@ -67,19 +67,19 @@ class PangenomeSchematic extends React.Component {
   loadJsonCache(url, data) {
     console.log("STEP #6: fetched chunks go into loadJsonCache");
 
-    if (data.json_version !== 16) {
+    if (data.json_version !== 17) {
       throw MediaError(
-        "Wrong Data JSON version: was expecting version 16, got " +
+        "Wrong Data JSON version: was expecting version 17, got " +
         data.json_version +
         ".  " +
-        "This version added compressedX.  " + // KEEP THIS UP TO DATE!
+        "This version added x and compressedX fields for the chunks too.  " + // KEEP THIS UP TO DATE!
           "Using a mismatched data file and renderer will cause unpredictable behavior," +
           " instead generate a new data file using github.com/graph-genome/component_segmentation."
       );
     }
     this.jsonCache[url] = data;
     this.pathNames = data.path_names; //TODO: in later JSON versions path_names gets moved to bin2file.json
-      console.log(this.pathNames.length, " path names loaded")
+    console.log(this.pathNames.length, " path names loaded");
     this.processArray();
   }
 
@@ -148,11 +148,11 @@ class PangenomeSchematic extends React.Component {
               jsonChunk.components[0].x
           );*/
 
-            // At the moment, the index is used as a rank of the component, then it has to be progressive between chunks
+          // At the moment, the index is used as a rank of the component, then it has to be progressive between chunks
           const num_components_already_loaded =
-              this.components.length > 0
-                  ? this.components[this.components.length - 1].index + 1
-                  : 0;
+            this.components.length > 0
+              ? this.components[this.components.length - 1].index + 1
+              : 0;
           for (let [index, component] of jsonChunk.components.entries()) {
             if (component.first_bin > 0) {
               let componentItem = new Component(

src/ViewportInputsStore.js

@@ -1,14 +1,14 @@
 import { types } from "mobx-state-tree";
 import { urlExists } from "./URL";
-import { arraysEqual, isInt } from "./utilities";
+import { arraysEqual } from "./utilities";
 
 const Chunk = types.model({
   file: types.string,
   fasta: types.maybeNull(types.string),
   first_bin: types.integer,
   last_bin: types.integer,
-  component_count: types.integer,
-  link_count: types.integer,
+  x: types.integer,
+  compressedX: types.integer,
 });
 const ZoomLevel = types.model({
   bin_width: types.integer,
@@ -44,7 +44,7 @@ RootStore = types
     highlightedLink: 0, // we will compare linkColumns
     maximumHeightThisFrame: 150,
     cellToolTipContent: "",
-    jsonName: "SARS-CoV-b",
+    jsonName: "SARS-CoV-b.v17",
     // Added attributes for the zoom level management
     availableZoomLevels: types.optional(types.array(types.string), ["1"]),
     indexSelectedZoomLevel: 0,

src/utilities.js

@@ -25,27 +25,53 @@ export function areOverlapping(startA, endA, startB, endB) {
 }
 
 export function calculateEndBinFromScreen(beginBin, endBin, selZoomLev, store) {
+  const deviceWidth = window.innerWidth;
+  let widthInCells = deviceWidth / store.pixelsPerColumn;
+
+  console.log("calculateEndBinFromScreen: deviceWidth --> " + deviceWidth);
+
+  let newEndBin = endBin;
+
   let chunkURLarray = [];
   let fileArrayFasta = [];
 
+  let firstFieldX = -1;
+
   let level = store.chunkIndex.zoom_levels.get(selZoomLev);
   //this loop will automatically cap out at the last bin of the file
   for (let ichunk = 0; ichunk < level.files.length; ichunk++) {
     // The "x" info is not here
     let chunk = level.files[ichunk];
-    if (areOverlapping(beginBin, endBin, chunk.first_bin, chunk.last_bin)) {
+
+    //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;
+      }
+
       chunkURLarray.push(chunk["file"]);
       if (chunk.fasta !== null) {
         fileArrayFasta.push(chunk.fasta);
       }
+
+      newEndBin = chunk.last_bin;
     }
   }
 
   // store.updateBeginEndBin(b, b + widthInCells);
   //TODO the logic in let width = could be much more complex by looking at
   //width of components and whether various settings are on.  The consequence
   //of overestimating widthInCells is to make the shift buttons step too big
-  return [chunkURLarray, fileArrayFasta];
+  return [newEndBin, chunkURLarray, fileArrayFasta];
 }
 
 export function range(start, end) {