v16 JSON #86 and #91. Link click jump to middle of screen

src/App.js

@@ -1,22 +1,17 @@
-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 visualzied components
@@ -50,10 +45,6 @@ class App extends Component {
   constructor(props) {
     super(props);
 
-    // TODO: Are these 2 instructions necessary?
-    //this.updateHighlightedNode = this.updateHighlightedNode.bind(this);
-    //this.updateSelectedLink = this.updateSelectedLink.bind(this);
-
     this.state = {
       schematize: [],
       pathNames: [],
@@ -455,13 +446,15 @@ class App extends Component {
       if (bin1 < beginBin || bin2 > last_bin_last_visualized_component) {
         console.log("updateSelectedLink - NewBeginEndBin");
 
-        const end_closer = Math.abs(beginBin - bin1) < Math.abs(endBin - bin2);
+          const end_closer = Math.abs(beginBin - bin1) > Math.abs(endBin - bin2);
 
         let [newBeginBin, newEndBin] = this.props.store.beginEndBin;
-        if (!end_closer) {
-          [newBeginBin, newEndBin] = [bin1, bin1 + (endBin - beginBin)];
+          let screenWidth = endBin - beginBin;
+          let half = Math.floor(screenWidth / 2);
+          if (end_closer) {
+              [newBeginBin, newEndBin] = [bin1 - half, bin1 + half];
         } else {
-          [newBeginBin, newEndBin] = [bin2 - (endBin - beginBin), bin2];
+              [newBeginBin, newEndBin] = [bin2 - half, bin2 + half];
         }
 
         this.props.store.updateBeginEndBin(newBeginBin, newEndBin);

src/PangenomeSchematic.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { observe } from "mobx";
-import { urlExists } from "./URL";
+import {observe} from "mobx";
+import {urlExists} from "./URL";
 
 class PangenomeSchematic extends React.Component {
   constructor(props) {
@@ -67,12 +67,12 @@ class PangenomeSchematic extends React.Component {
   loadJsonCache(url, data) {
     console.log("STEP #6: fetched chunks go into loadJsonCache");
 
-    if (data.json_version !== 15) {
+      if (data.json_version !== 16) {
       throw MediaError(
-        "Wrong Data JSON version: was expecting version 15, got " +
-        data.json_version +
-        ".  " +
-        "This version switched to sparse JSON.  " + // KEEP THIS UP TO DATE!
+          "Wrong Data JSON version: was expecting version 16, got " +
+          data.json_version +
+          ".  " +
+          "This version added compressedX.  " + // 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."
       );

src/ViewportInputsStore.js

@@ -43,7 +43,7 @@ RootStore = types
     highlightedLink: 0, // we will compare linkColumns
     maximumHeightThisFrame: 150,
     cellToolTipContent: "",
-    jsonName: "run1.B1phi1.i1.seqwish",
+    jsonName: "run1.B1phi1.i1.seqwish.v16",
     // Added attributes for the zoom level management
     availableZoomLevels: types.optional(types.array(types.string), ["1"]),
     indexSelectedZoomLevel: 0,