From 8c04c3c46696dabbe77e1af324fe7058962e2696 Mon Sep 17 00:00:00 2001 From: AndreaGuarracino Date: Fri, 5 Jun 2020 18:28:39 +0200 Subject: [PATCH] initial modification to fill entirely the screen --- src/App.js | 17 ++++++++++++----- src/PangenomeSchematic.js | 16 ++++++++-------- src/ViewportInputsStore.js | 8 ++++---- src/utilities.js | 30 ++++++++++++++++++++++++++++-- 4 files changed, 52 insertions(+), 19 deletions(-) diff --git a/src/App.js b/src/App.js index e75322bc..0f6728a3 100644 --- a/src/App.js +++ b/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); diff --git a/src/PangenomeSchematic.js b/src/PangenomeSchematic.js index 0da00ea5..25fd61a0 100644 --- a/src/PangenomeSchematic.js +++ b/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( diff --git a/src/ViewportInputsStore.js b/src/ViewportInputsStore.js index 8bfbb1ff..040a2fbf 100644 --- a/src/ViewportInputsStore.js +++ b/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, diff --git a/src/utilities.js b/src/utilities.js index a5d4b338..65f96bda 100644 --- a/src/utilities.js +++ b/src/utilities.js @@ -25,19 +25,45 @@ 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; } } @@ -45,7 +71,7 @@ export function calculateEndBinFromScreen(beginBin, endBin, selZoomLev, store) { //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) {