@@ -9,7 +9,8 @@ import { GoslingComponent } from "gosling.js";
9
9
* @returns {JSX.Element } - The rendered genome visualization component.
10
10
*/
11
11
function GoslingGenomeViz ( { dataKey, showPlot, filter } ) {
12
-
12
+ const COLORS_TSS = [ "#80b1d3" , "#fb8072" , "#ffffb3" , "#8dd3c7" , "#bebada" ]
13
+ const ORDER_TSS_CLASSES = [ "Primary" , "Secondary" , "Internal" , "Antisense" , "Orphan" ]
13
14
const [ spec , setSpec ] = useState ( null ) ;
14
15
15
16
const fetchData = async ( dataKey ) => {
@@ -31,11 +32,25 @@ function GoslingGenomeViz({ dataKey, showPlot, filter }) {
31
32
console . error ( "Error fetching data:" , data ) ;
32
33
return ;
33
34
}
34
- const spec = {
35
+ const maxValue = Math . max ( ...Object . values ( data [ "data" ] ) . map ( d => d [ "maxValue" ] ) ) ;
36
+ const allViews = getViews ( data [ "data" ] )
37
+ const distributedViews = [ {
35
38
"arrangement" : "vertical" ,
39
+ "views" : allViews . filter ( ( _ , i ) => i < allViews . length / 2 )
40
+ } , {
41
+ "arrangement" : "vertical" ,
42
+ "views" : allViews . filter ( ( _ , i ) => i >= allViews . length / 2 )
43
+ } ]
44
+
45
+ const spec = {
46
+ style : { background : "gray" , backgroundOpacity : 0.05 , outline : "black" , outlineWidth : 2 } ,
47
+ "title" : "Visualization of TSSs and Genes" ,
48
+ "arrangement" : "horizontal" ,
36
49
"spacing" : 50 ,
37
50
"linkingId" : "detail" ,
38
- "views" : getViews ( data [ "data" ] )
51
+ "zoomLimits" : [ 0 , maxValue ] ,
52
+
53
+ "views" : distributedViews
39
54
} ;
40
55
setSpec ( spec ) ;
41
56
} catch ( error ) {
@@ -90,64 +105,63 @@ function GoslingGenomeViz({ dataKey, showPlot, filter }) {
90
105
91
106
}
92
107
93
- const createTSSTrack = ( data , aggregatedTSS , strand , title = null ) => {
94
- let binnedViews = [
95
- { "GT" : 50000 , "LT" : 200000 , "size" : 5000 } ,
96
- { "GT" : 200000 , "LT" : 500000 , "size" : 10000 } ,
97
- { "GT" : 500000 , "LT" : NaN , "size" : 50000 } ] . map ( ( { GT , LT , size } ) => {
98
- let transitionPadding = 20000 ;
99
- return {
100
- "data" : {
101
- "values" : aggregatedTSS [ size ] . filter ( d => filter . includes ( d [ "typeTSS" ] ) ) ,
102
- "type" : "json" ,
103
- "genomicFields" : [ "binStart" , "binEnd" ] ,
104
- } ,
105
- "dataTransform" : [
106
- { "type" : "filter" , "field" : "strand" , "oneOf" : [ strand ] }
107
- ] ,
108
- "x" : { "field" : "binStart" , "type" : "genomic" , "axis" : strand === "+" ? "top" : "none" , } ,
109
- "xe" : { "field" : "binEnd" , "type" : "genomic" , } ,
110
- "mark" : "bar" ,
111
- "y" : { "field" : "count" , "type" : "quantitative" , axis : "left" } ,
112
- "color" : {
108
+ const createTSSTrack = ( data , aggregatedTSS , binSizes , strand , maxGenome , title = null ) => {
109
+ let sizesBins = Object . keys ( binSizes ) . map ( ( size , i ) => { return { "GT" : size * 10 , "LT" : ( i === Object . keys ( binSizes ) . length - 1 ) ? maxGenome * 1.1 : size * 40 , size : parseInt ( size ) , maxValueBin : binSizes [ size ] } } )
110
+ console . log ( sizesBins )
111
+ let binnedViews = sizesBins . map ( ( { GT , LT , size, maxValueBin } ) => {
112
+ let transitionPadding = 25000 ;
113
+ return {
114
+ "data" : {
115
+ "values" : aggregatedTSS [ size ] . filter ( d => filter . includes ( d [ "typeTSS" ] ) ) ,
116
+ "type" : "json" ,
117
+ "genomicFields" : [ "binStart" , "binEnd" ] ,
118
+ } ,
119
+ "dataTransform" : [
120
+ { "type" : "filter" , "field" : "strand" , "oneOf" : [ strand ] }
121
+ ] ,
122
+ "x" : { "field" : "binStart" , "type" : "genomic" , "axis" : strand === "+" ? "top" : "none" , } ,
123
+ "xe" : { "field" : "binEnd" , "type" : "genomic" , "axis" : "none" } ,
124
+ "mark" : "bar" ,
125
+ "y" : { "field" : "count" , "type" : "quantitative" , axis : "left" , domain : [ 0 , maxValueBin [ strand ] ] , range : [ 0 , 90 ] } ,
126
+ "color" : {
127
+ "field" : "mainClass" ,
128
+ "type" : "nominal" ,
129
+ "domain" : ORDER_TSS_CLASSES ,
130
+ "range" : COLORS_TSS ,
131
+ "legend" : strand === "+"
132
+ } ,
133
+ "tooltip" : [
134
+ { "field" : "binStart" , "type" : "genomic" , "alt" : "Bin start" } ,
135
+ { "field" : "binEnd" , "alt" : "Bin end" } ,
136
+ {
113
137
"field" : "mainClass" ,
114
138
"type" : "nominal" ,
115
- "domain" : [ "Primary" , "Secondary" , "Internal" , "Antisense" , "Orphan" ] ,
116
- "range" : [ "#7585FF" , "#FF8A85" , "#FFC785" , "#85FFD9" , "#B285FF" ] ,
117
- "legend" : strand === "+"
139
+ "alt" : "Main TSS class" ,
118
140
} ,
119
- "tooltip" : [
120
- { "field" : "binStart" , "type" : "genomic" , "alt" : "Bin start" } ,
121
- { "field" : "binEnd" , "alt" : "Bin end" } ,
122
- {
123
- "field" : "mainClass" ,
124
- "type" : "nominal" ,
125
- "alt" : "Main TSS class" ,
126
- } ,
127
- { "field" : "count" , "alt" : "Number of TSS" } ,
128
- ] ,
129
- "visibility" : [
130
- {
131
- "operation" : "GT" ,
132
- "measure" : "zoomLevel" ,
133
- "threshold" : GT ,
134
- "transitionPadding" : transitionPadding ,
135
- "target" : "track"
136
- } ,
137
- ! isNaN ( LT ) &&
138
- {
139
- "operation" : "LT" ,
140
- "measure" : "zoomLevel" ,
141
- "threshold" : LT + 7500 ,
142
- "transitionPadding" : transitionPadding ,
143
- "target" : "track"
144
- }
145
- ]
146
- }
147
- } ) ;
141
+ { "field" : "count" , "alt" : "Number of TSS" } ,
142
+ ] ,
143
+ "visibility" : [
144
+ {
145
+ "operation" : "GT" ,
146
+ "measure" : "zoomLevel" ,
147
+ "threshold" : GT ,
148
+ "transitionPadding" : transitionPadding ,
149
+ "target" : "track"
150
+ } ,
151
+ ! isNaN ( LT ) &&
152
+ {
153
+ "operation" : "LT" ,
154
+ "measure" : "zoomLevel" ,
155
+ "threshold" : LT ,
156
+ "transitionPadding" : transitionPadding ,
157
+ "target" : "track"
158
+ }
159
+ ]
160
+ }
161
+ } ) ;
148
162
return [
149
163
{
150
- "title" : title ,
164
+
151
165
"alignment" : "overlay" ,
152
166
"data" : {
153
167
"values" : data . filter ( d => filter . includes ( d [ "typeTSS" ] ) ) ,
@@ -158,7 +172,7 @@ function GoslingGenomeViz({ dataKey, showPlot, filter }) {
158
172
159
173
"tracks" : [
160
174
{
161
-
175
+ "title" : title ,
162
176
"dataTransform" : [
163
177
{ "type" : "filter" , "field" : "superStrand" , "oneOf" : [ strand ] }
164
178
] ,
@@ -169,8 +183,8 @@ function GoslingGenomeViz({ dataKey, showPlot, filter }) {
169
183
"color" : {
170
184
"field" : "mainClass" ,
171
185
"type" : "nominal" ,
172
- "domain" : [ "Primary" , "Secondary" , "Internal" , "Antisense" , "Orphan" ] ,
173
- "range" : [ "#7585FF" , "#FF8A85" , "#FFC785" , "#85FFD9" , "#B285FF" ] ,
186
+ "domain" : ORDER_TSS_CLASSES ,
187
+ "range" : COLORS_TSS ,
174
188
"legend" : strand === "+"
175
189
} ,
176
190
"tooltip" : [
@@ -198,10 +212,10 @@ function GoslingGenomeViz({ dataKey, showPlot, filter }) {
198
212
]
199
213
}
200
214
201
- const createTracks = ( data , title ) => {
215
+ const createTracks = ( data , title , maxGenome ) => {
202
216
let geneTracks = createGeneTrack ( data [ "superGFF" ] ) ;
203
- let TSSTracks_plus = createTSSTrack ( data [ "TSS" ] , data [ "aggregatedTSS" ] , "+" , title ) ;
204
- let TSSTracks_minus = createTSSTrack ( data [ "TSS" ] , data [ "aggregatedTSS" ] , "-" ) ;
217
+ let TSSTracks_plus = createTSSTrack ( data [ "TSS" ] , data [ "aggregatedTSS" ] , data [ "maxAggregatedTSS" ] , "+" , maxGenome , title ) ;
218
+ let TSSTracks_minus = createTSSTrack ( data [ "TSS" ] , data [ "aggregatedTSS" ] , data [ "maxAggregatedTSS" ] , "-" , maxGenome ) ;
205
219
return TSSTracks_plus . concat ( geneTracks ) . concat ( TSSTracks_minus ) ;
206
220
}
207
221
@@ -211,17 +225,21 @@ function GoslingGenomeViz({ dataKey, showPlot, filter }) {
211
225
views . push ( {
212
226
"alignment" : "stack" ,
213
227
"title" : genome ,
228
+
214
229
"assembly" : [ [ "" , data [ genome ] [ "maxValue" ] ] ] ,
215
230
"spacing" : 0 ,
216
231
"layout" : "linear" ,
217
- "tracks" : createTracks ( data [ genome ] , genome , )
232
+ "tracks" : createTracks ( data [ genome ] , genome , data [ genome ] [ "maxValue" ] )
218
233
} )
219
234
}
220
235
return views ;
221
236
222
237
}
223
238
224
- return spec && < GoslingComponent spec = { spec } />
239
+ return showPlot && ( spec && < div style = { { padding : "0 !important" , width : "100vw" } } >
240
+ < GoslingComponent spec = { spec } />
241
+ </ div >
242
+ ) ;
225
243
226
244
227
245
0 commit comments