code refactoring change zoom level management #86

graph-genome · Jun 7, 2020 · cd1934a · cd1934a
1 parent 5509f7e
commit cd1934a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 33 deletions.
diff --git a/src/App.js b/src/App.js
@@ -110,11 +110,11 @@ class App extends Component {
       this.openRelevantChunksFromIndex.bind(this)
     );
 
-    /*observe(
+    observe(
       this.props.store,
       "indexSelectedZoomLevel",
       this.openRelevantChunksFromIndex.bind(this) // Whenever the selected zoom level changes
-    );*/
+    );
     observe(
       this.props.store.beginEndBin, //user moves start position
       //This following part is important to scroll right and left on browser
@@ -178,7 +178,7 @@ class App extends Component {
   /** Compares bin2file @param indexContents with the beginBin and EndBin.
    * It finds the appropriate chunk URLS from the index and updates
    * switchChunkURLs which trigger json fetches for the new chunks. **/
-  openRelevantChunksFromIndex(lastIndexSelectedZoomLevel = -1) {
+  openRelevantChunksFromIndex() {
     console.log(
       "STEP #3: with new chunkIndex, this.openRelevantChunksFromIndex()"
     );
@@ -209,20 +209,19 @@ class App extends Component {
       this.props.store.chunkIndex.zoom_levels.get(selZoomLev)["last_bin"]
     );
 
-    let bin_range_changed = false;
-    if (lastIndexSelectedZoomLevel > -1) {
-      const scaling_factor =
-        this.props.store.getSelectedZoomLevel(lastIndexSelectedZoomLevel) /
-        this.props.store.getSelectedZoomLevel();
-      console.log("scaling_factor: " + scaling_factor);
-      bin_range_changed = this.props.store.updateBeginEndBin(
+    const scaling_factor =
+      this.props.store.getSelectedZoomLevel(true) /
+      this.props.store.getSelectedZoomLevel();
+
+    console.log("scaling_factor: " + scaling_factor);
+
+    if (scaling_factor !== 1) {
+      this.props.store.updateBeginEndBin(
         Math.round((beginBin - 1) * scaling_factor),
         Math.round((this.props.store.getEndBin() - 1) * scaling_factor)
       );
-    }
-
-    // To avoid to do the preparation and the following operations two times
-    if (!bin_range_changed) {
+      // The updating will re-trigger openRelevantChunksFromIndex
+    } else {
       const newEndBin = this.prepareWhichComponentsToVisualize(widthInColumns);
 
       if (this.props.store.getEndBin() !== newEndBin) {
@@ -789,13 +788,7 @@ class App extends Component {
             minWidth: "100%",
           }}
         >
-          <ControlHeader
-            store={this.props.store}
-            openRelevantChunksFromIndex={(lastIndexSelectedZoomLevel) =>
-              this.openRelevantChunksFromIndex(lastIndexSelectedZoomLevel)
-            }
-            schematic={this.schematic}
-          />
+          <ControlHeader store={this.props.store} schematic={this.schematic} />
 
           <Stage
             x={this.props.store.leftOffset}

diff --git a/src/ControlHeader.js b/src/ControlHeader.js
@@ -47,12 +47,6 @@ class ControlHeader extends React.Component {
     httpGetAsync(addr + path_name + "/" + nuc_pos, handleOdgiServerResponse);
   }
 
-  _change_zoom_level(newIndexSelectedZoomLevel) {
-    const lastIndexSelectedZoomLevel = this.props.store.indexSelectedZoomLevel;
-    this.props.store.setIndexSelectedZoomLevel(newIndexSelectedZoomLevel);
-    this.props.openRelevantChunksFromIndex(lastIndexSelectedZoomLevel);
-  }
-
   change_zoom_level(target) {
     console.log(
       "change_zoom_level: " +
@@ -61,20 +55,20 @@ class ControlHeader extends React.Component {
         target.options[target.selectedIndex].text
     );
 
-    this._change_zoom_level(parseInt(target.value));
+    this.props.store.setIndexSelectedZoomLevel(parseInt(target.value));
   }
 
   decIndexSelectedZoomLevel() {
     let indexSelZoomLevel = this.props.store.indexSelectedZoomLevel;
     if (indexSelZoomLevel > 0) {
-      this._change_zoom_level(indexSelZoomLevel - 1);
+      this.props.store.setIndexSelectedZoomLevel(indexSelZoomLevel - 1);
     }
   }
 
   incIndexSelectedZoomLevel() {
     let indexSelZoomLevel = this.props.store.indexSelectedZoomLevel;
     if (indexSelZoomLevel < this.props.store.availableZoomLevels.length - 1) {
-      this._change_zoom_level(indexSelZoomLevel + 1);
+      this.props.store.setIndexSelectedZoomLevel(indexSelZoomLevel + 1);
     }
   }
 

diff --git a/src/ViewportInputsStore.js b/src/ViewportInputsStore.js
@@ -46,7 +46,10 @@ RootStore = types
     jsonName: "SARS-CoV-b-v17",
     // Added attributes for the zoom level management
     availableZoomLevels: types.optional(types.array(types.string), ["1"]),
+
+    precIndexSelectedZoomLevel: 0,
     indexSelectedZoomLevel: 0,
+
     chunkURLs: types.optional(types.array(types.string), []),
     chunkFastaURLs: types.optional(types.array(types.string), []),
     //to be compared against chunkURLs
@@ -224,17 +227,24 @@ RootStore = types
       //Zoom level and BinWidth are actually the same thing
       return Number(self.getSelectedZoomLevel());
     }
-    function getSelectedZoomLevel(indexSelectedZoomLevel = -1) {
+    function getSelectedZoomLevel(get_prec_zoom_level = false) {
       //This is a genuinely useful getter
       let a =
         self.availableZoomLevels[
-          indexSelectedZoomLevel > -1
-            ? indexSelectedZoomLevel
+          get_prec_zoom_level
+            ? self.precIndexSelectedZoomLevel
             : self.indexSelectedZoomLevel
         ];
+
+      // Clear precIndexSelectedZoomLevel (it is usable only one time)
+      if (get_prec_zoom_level) {
+        self.precIndexSelectedZoomLevel = self.indexSelectedZoomLevel;
+      }
+
       return a ? a : "1";
     }
     function setIndexSelectedZoomLevel(index) {
+      self.precIndexSelectedZoomLevel = self.indexSelectedZoomLevel;
       self.indexSelectedZoomLevel = index;
     }