Skip to content

Commit 44c4666

Browse files
mwittepmwittep
authored
Merge pull request #105 from Integrative-Transcriptomics/dev
Dev
2 parents 4a7eaa7 + 1bf7585 commit 44c4666

File tree

3 files changed

+62
-69
lines changed

3 files changed

+62
-69
lines changed

‎src/components/Result/GenomeViewer.jsx‎

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ function GenomeViewer({ filePath, dataGosling, filter, gosRef, widthTrack, nameG
1111
const [currentPosition, setCurrentPosition] = useState([0, Number.MAX_SAFE_INTEGER]);
1212
const [enableUpdate, setEnableUpdate] = useState(false);
1313
const [allowWiggleVisualization, setAllowWiggleVisualization] = useState(false);
14-
const [zoomLevel, setZoomLevel] = useState(1);
1514

1615

1716

@@ -21,7 +20,7 @@ function GenomeViewer({ filePath, dataGosling, filter, gosRef, widthTrack, nameG
2120
if (abs_diff < 5500) {
2221
setEnableUpdate(true);
2322
}
24-
else{
23+
else {
2524
setEnableUpdate(false);
2625
setAllowWiggleVisualization(false);
2726
}
@@ -33,7 +32,7 @@ function GenomeViewer({ filePath, dataGosling, filter, gosRef, widthTrack, nameG
3332

3433

3534
useEffect(() => {
36-
35+
3736
if (gosRef.current) {
3837
console.log(gosRef.current.api.getViews())
3938

@@ -45,7 +44,7 @@ function GenomeViewer({ filePath, dataGosling, filter, gosRef, widthTrack, nameG
4544
if (Math.abs(start - end) < 10000) {
4645
updatePositionThrottled(start, end);
4746
}
48-
47+
4948
}
5049
});
5150
}
@@ -67,7 +66,7 @@ function GenomeViewer({ filePath, dataGosling, filter, gosRef, widthTrack, nameG
6766
<div className='gosling-component'>
6867
<div className='genome-viewer-select' style={{ paddingBottom: "1.5em" }}>
6968
<SingleSelectDropdown
70-
helpText={`Two different views are available: Single View shows the genome viewer grouped vertically by Genome/Condition, while the Aligned View aligns the strands vertically and the genomes/conditions on each row.`}
69+
helpText={`Two different views are available: Single View shows the genome viewer grouped vertically by Genome/Condition, while the Aligned View aligns the strands vertically and the genomes/conditions on each row.`}
7170

7271
label="Change Genome Viewer Modus:"
7372
value={currentType}
@@ -83,12 +82,12 @@ function GenomeViewer({ filePath, dataGosling, filter, gosRef, widthTrack, nameG
8382
<label
8483
htmlFor="wiggle-toggle"
8584
style={{
86-
textAlign: "center"
85+
textAlign: "center"
8786
}}
8887
data-title={
8988
allowWiggleVisualization
90-
? "Coverage profile visualization enabled. This consumes more resources, please, disable if unnecessary."
91-
: "You can enable it when zoomed in, but consider that this requires a stable high-sppeed internet connection."
89+
? "The coverage profile visualization is enabled. As this consumes more resources, please, disable if unnecessary. It will be disabled automatically when zooming out."
90+
: "The visualization of the coverage profile can be activated once you are reach the detailed view of the explorer (i.e. TSS are visualized individually). Consider that this requires a stable and high-speed internet connection for a smooth interaction."
9291
}
9392
>
9493
<input
@@ -100,15 +99,15 @@ function GenomeViewer({ filePath, dataGosling, filter, gosRef, widthTrack, nameG
10099
style={{
101100
width: "1.1em",
102101
height: "1.1em",
103-
cursor: "pointer",
102+
cursor: enableUpdate ? "pointer" : "not-allowed",
104103
accentColor: "#ffa000", // similar to your button color
105104
}}
106105
/>
107106
<span>
108107
Enable read coverage visualization
109108
</span>
110109
</label>
111-
</div>
110+
</div>
112111

113112
<div className='button-container'>
114113
<label htmlFor="update-button" style={{ textAlign: "center" }}
@@ -135,34 +134,34 @@ function GenomeViewer({ filePath, dataGosling, filter, gosRef, widthTrack, nameG
135134
</div>
136135

137136
<div className='button-container'>
138-
<button className="button-results" style={
139-
{
140-
backgroundColor: "#ffa000",
141-
color: "white",
142-
padding: "0.5em",
143-
margin: "2px",
144-
border: "none",
145-
cursor: "pointer",
146-
borderRadius: "6px",
147-
fontFamily: "Arial",
148-
maxWidth: "auto"
149-
}
150-
} onClick={() => {
137+
<button className="button-results" style={
138+
{
139+
backgroundColor: "#ffa000",
140+
color: "white",
141+
padding: "0.5em",
142+
margin: "2px",
143+
border: "none",
144+
cursor: "pointer",
145+
borderRadius: "6px",
146+
fontFamily: "Arial",
147+
maxWidth: "auto"
148+
}
149+
} onClick={() => {
151150
gosRef.current.api.exportPdf()
152151
}}>Export as PDF</button>
153152
<button className="button-results" style={
154-
{
155-
backgroundColor: "#ffa000",
156-
color: "white",
157-
padding: "0.5em",
158-
margin: "2px",
159-
border: "none",
160-
cursor: "pointer",
161-
borderRadius: "6px",
162-
fontFamily: "Arial",
163-
maxWidth: "auto"
164-
}
165-
} onClick={() => {
153+
{
154+
backgroundColor: "#ffa000",
155+
color: "white",
156+
padding: "0.5em",
157+
margin: "2px",
158+
border: "none",
159+
cursor: "pointer",
160+
borderRadius: "6px",
161+
fontFamily: "Arial",
162+
maxWidth: "auto"
163+
}
164+
} onClick={() => {
166165
gosRef.current.api.exportPng()
167166
}}>Export as PNG</button>
168167

@@ -179,21 +178,20 @@ function GenomeViewer({ filePath, dataGosling, filter, gosRef, widthTrack, nameG
179178
dataGosling={dataGosling}
180179
filePath={filePath}
181180
filter={filter}
182-
allowWiggleVisualization = {allowWiggleVisualization}
181+
allowWiggleVisualization={allowWiggleVisualization}
183182
allowFetch={enableUpdate}
184183
gosRef={gosRef}
185184
widthTrack={widthTrack}
186-
zoomLevel={zoomLevel}
187185
/> :
188186
<AlignedGenomeViz
189-
maxValueWiggleDict = {maxValueWiggleDict}
190-
dataGosling = {dataGosling}
191-
filePath = {filePath}
192-
allowFetch = {enableUpdate}
193-
allowWiggleVisualization = {allowWiggleVisualization}
194-
filter = {filter}
195-
gosRef = {gosRef}
196-
widthTrack = {widthTrack}
187+
maxValueWiggleDict={maxValueWiggleDict}
188+
dataGosling={dataGosling}
189+
filePath={filePath}
190+
allowFetch={enableUpdate}
191+
allowWiggleVisualization={allowWiggleVisualization}
192+
filter={filter}
193+
gosRef={gosRef}
194+
widthTrack={widthTrack}
197195

198196
/>
199197

‎src/components/Result/GoslingVisualizations/AlignedGenomeViz.jsx‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { createGenomeTrack, createWiggleTracks, createDetailTSSTrack, createBinn
1414
function AlignedGenomeViz({ dataGosling, filter, filePath, gosRef, maxValueWiggleDict, allowFetch, allowWiggleVisualization, widthTrack }) {
1515

1616

17-
const createTSSTrack = (binSizes, strand, maxGenome, title, filePath) => {
17+
const createTSSTrack = (binSizes, strand, maxGenome, title, filePath, maxValueGenome) => {
1818
let genomeName = title;
1919
const TSS_DETAIL_LEVEL_ZOOM = 50000;
2020
let sizesBins = Object.keys(binSizes).sort((a, b) => parseInt(a) - parseInt(b)).map((size, i, arr) => {
@@ -48,7 +48,8 @@ function AlignedGenomeViz({ dataGosling, filter, filePath, gosRef, maxValueWiggl
4848
"genomicFields": ["binStart","binEnd"],
4949
"sampleLength": 100000
5050
},
51-
51+
"zoomLimits": [50, maxValueGenome],
52+
5253
"alignment": "overlay",
5354
"tracks": [
5455
detailTSSTrack,
@@ -79,14 +80,14 @@ function AlignedGenomeViz({ dataGosling, filter, filePath, gosRef, maxValueWiggl
7980
return view;
8081
}
8182

82-
const createTracks = (filePath, data, genomeName, maxGenome, strand, allowFetch) => {
83+
const createTracks = (filePath, data, genomeName, maxGenome, strand, maxValueGenome) => {
8384
let genes = createGFFTrack(filePath, genomeName, strand, widthTrack);
8485
let fastaTrack = createGenomeTrack(filePath, genomeName, strand, widthTrack);
85-
let TSSTracks = createTSSTrack(data["maxAggregatedTSS"], strand, maxGenome, genomeName, filePath, allowFetch);
86+
let TSSTracks = createTSSTrack(data["maxAggregatedTSS"], strand, maxGenome, genomeName, filePath, maxValueGenome);
8687
return [...TSSTracks, ...genes, ...fastaTrack];
8788
}
8889

89-
const getViews = (data, filePath) => {
90+
const getViews = (data, filePath, maxValueGenome) => {
9091
let views_plus = [];
9192
let views_minus = [];
9293
let addLegend = true;
@@ -98,7 +99,7 @@ function AlignedGenomeViz({ dataGosling, filter, filePath, gosRef, maxValueWiggl
9899
"assembly": [[genome, data[genome]["lengthGenome"]]],
99100
"spacing": 0,
100101
"layout": "linear",
101-
"tracks": createTracks(filePath, data[genome], genome, data[genome]["lengthGenome"], strand)
102+
"tracks": createTracks(filePath, data[genome], genome, data[genome]["lengthGenome"], strand, maxValueGenome)
102103
}
103104
if (addLegend)
104105
tempView = addLegendToTSS(tempView)
@@ -114,14 +115,7 @@ function AlignedGenomeViz({ dataGosling, filter, filePath, gosRef, maxValueWiggl
114115
return [views_minus, views_plus];
115116

116117
}
117-
const completeView = (views, subtitle) => {
118-
return {
119-
"style": { "outline": "black", "outlineWidth": 2 },
120-
"spacing": 0,
121-
"tracks": views,
122-
"id": `subtitle_${subtitle}`,
123-
}
124-
}
118+
125119

126120
const completeViewPerGenome = (viewsForward, viewsReverse) => {
127121
// Zip views
@@ -138,7 +132,7 @@ function AlignedGenomeViz({ dataGosling, filter, filePath, gosRef, maxValueWiggl
138132
const createSpecsGosling = (dataGosling, filePath, maxValueWiggleDict, filter, allowFetch) => {
139133
const data = dataGosling.current
140134
const maxValue = Math.max(...Object.values(data).map(d => d["lengthGenome"]));
141-
const [view_forward, view_reverse] = getViews(data, filePath);
135+
const [view_forward, view_reverse] = getViews(data, filePath, maxValue);
142136
const distributedViews = [completeViewPerGenome(view_forward, view_reverse)].flat();
143137

144138
const specs = React.useMemo(() => ({

‎src/components/Result/GoslingVisualizations/SingleGenomeViz.jsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { useEffect } from "react";
1212
*/
1313
function SingleGenomeViz({ dataGosling, filter, filePath, gosRef, maxValueWiggleDict, allowFetch, widthTrack, allowWiggleVisualization }) {
1414

15-
const createTSSTrack = (binSizes, strand, maxGenome, title = null, filePath, allowFetch) => {
15+
const createTSSTrack = (binSizes, strand, maxGenome, title = null, filePath, maxValueGenome) => {
1616
const TSS_DETAIL_LEVEL_ZOOM = 50000;
1717
let sizesBins = Object.keys(binSizes).sort((a, b) => parseInt(a) - parseInt(b)).map((size, i, arr) => {
1818
const overflowForTransition = 40;
@@ -49,6 +49,7 @@ function SingleGenomeViz({ dataGosling, filter, filePath, gosRef, maxValueWiggle
4949
"sampleLength": 100000
5050
},
5151
"alignment": "overlay",
52+
"zoomLimits": [50, Math.round( maxValueGenome)],
5253
"tracks": [
5354
detailTSSTrack,
5455
...binnedViews,
@@ -59,10 +60,10 @@ function SingleGenomeViz({ dataGosling, filter, filePath, gosRef, maxValueWiggle
5960
]
6061
}
6162

62-
const createTracks = (data, genomeName, maxGenome, filePath, allowFetch) => {
63+
const createTracks = (data, genomeName, maxGenome, filePath, maxValueGenome) => {
6364

64-
const createTracks = (filePath, genomeName, direction, allowFetch) => {
65-
const TSSTracks = createTSSTrack(data["maxAggregatedTSS"], direction, maxGenome, genomeName, filePath, allowFetch);
65+
const createTracks = (filePath, genomeName, direction, maxValueGenome) => {
66+
const TSSTracks = createTSSTrack(data["maxAggregatedTSS"], direction, maxGenome, genomeName, filePath, maxValueGenome);
6667
const genes = createGFFTrack(filePath, genomeName, direction,widthTrack);
6768
const fastaTrack = createGenomeTrack(filePath, genomeName, direction,widthTrack);
6869
if (direction === "-") {
@@ -73,21 +74,21 @@ function SingleGenomeViz({ dataGosling, filter, filePath, gosRef, maxValueWiggle
7374
}
7475
};
7576

76-
const tracks_plus = createTracks(filePath, genomeName, "+", allowFetch);
77-
const tracks_minus = createTracks(filePath, genomeName, "-", allowFetch);
77+
const tracks_plus = createTracks(filePath, genomeName, "+", maxValueGenome);
78+
const tracks_minus = createTracks(filePath, genomeName, "-", maxValueGenome);
7879

7980
return [...tracks_plus, ...tracks_minus];
8081
}
8182

82-
const getViews = (data, filePath, allowFetch) => {
83+
const getViews = (data, filePath, maxValueGenome) => {
8384
let views = [];
8485
for (let genome of Object.keys(data)) {
8586
views.push({
8687
style: {outline: "black", outlineWidth: 2},
8788
"alignment": "stack",
8889
"assembly": [[genome, data[genome]["lengthGenome"]]],
8990
"layout": "linear",
90-
"tracks": createTracks(data[genome], genome, data[genome]["lengthGenome"], filePath, allowFetch)
91+
"tracks": createTracks(data[genome], genome, data[genome]["lengthGenome"], filePath, maxValueGenome)
9192
})
9293
}
9394
return views;
@@ -98,7 +99,7 @@ function SingleGenomeViz({ dataGosling, filter, filePath, gosRef, maxValueWiggle
9899

99100
const data = dataGosling.current
100101
const maxValue = Math.max(...Object.values(data).map(d => d["lengthGenome"]));
101-
const allViews = getViews(data, filePath)
102+
const allViews = getViews(data, filePath, maxValue)
102103
const distributedViews = [{
103104
"arrangement": "vertical",
104105
"views": allViews.filter((_, i) => i < allViews.length / 2)

0 commit comments

Comments
 (0)