Skip to content

Commit d614f49

Browse files
moriondo2022moriondo2022
authored
Vision plot (#985)
* getting lowest P-value * looks like we can take the latest one each time * receiving LD data at main page level * working toward propagating LD * removed some extraneous console logs * sending LD Data via store * console logs for clarity * more detective work * more slow detective work * looks like the data is being received * color coding all sections * removed extraneous console log * setup * oops * selectable splice track data * main research page receiving splice selection * splice track component receiving splice selection * component is receiving data * receiving both exons and splices * not colliding at least * region parsing is an issue * well this is something kinda * about to begin executing the plot instructions * plot instructions executed. exon count still seems too large * I'm not sure this is what we want * easier to show this way * should label the ends of the graph * putting together the splice track * about to start adding tents * calculating splice midpoints * crude starts and ends * position checking - needs work * it's closer but it's still not working * I don't know why everything has to be doubled, but it does * highlights green on hover * cleanup * more cleanup
1 parent bc69d98 commit d614f49

File tree

11 files changed

+777
-59
lines changed

11 files changed

+777
-59
lines changed

‎src/components/researchPortal/ResearchDataTable.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,12 @@
273273
</button>
274274
</span>
275275
</span>
276+
<span v-else-if="tdKey === 'View Splice Track'">
277+
<button
278+
@click="selectSplice(tdValue)">
279+
View
280+
</button>
281+
</span>
276282

277283
<span v-else v-html="formatValue(tdValue, tdKey, value)"></span>
278284

@@ -790,6 +796,9 @@ export default Vue.component("research-data-table", {
790796
},
791797
},
792798
methods: {
799+
selectSplice(value){
800+
this.$emit("splice", value);
801+
},
793802
checkFeatureExist(DATA,PATH) {
794803
let ifExist = true;
795804

‎src/components/researchPortal/ResearchRegionPlot.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,9 @@ export default Vue.component("research-region-plot", {
171171
window.removeEventListener("resize", this.onResize);
172172
},
173173
computed: {
174+
pageLevelLD(){
175+
return this.$store.state.topLevelLDData;
176+
},
174177
adjPlotMargin() {
175178
176179
let customPlotMargin = !!this.renderConfig["plot margin"] ? this.renderConfig["plot margin"] : null;
@@ -553,7 +556,7 @@ export default Vue.component("research-region-plot", {
553556
},
554557
starItems(CONTENT) {
555558
this.renderPlots();
556-
}
559+
},
557560
},
558561
methods: {
559562

‎src/components/researchPortal/ResearchSection.vue‎

Lines changed: 12 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,7 @@
181181
:regionViewArea="regionViewArea" :region="regionParam"
182182
:bigRegion="bigRegionParam"
183183
:starItems="starItems"
184+
@ld-data-loaded="ld => receiveLDData(ld)"
184185
@on-star="starColumn">
185186
</research-section-visualizers>
186187
</div>
@@ -203,8 +204,9 @@
203204
:plotLegend="getSectionPlotLegend(sectionID + plotIndex)" :sectionId="sectionID + plotIndex"
204205
:utils="utils" :dataComparisonConfig="dataComparisonConfig"
205206
:searchParameters="groupSearchParameters" :regionZoom="regionZoom"
206-
:regionViewArea="regionViewArea" :region="regionParam"
207+
:regionViewArea="regionViewArea" :region="regionParam"
207208
:bigRegion="bigRegionParam" :starItems="starItems"
209+
@ld-data-loaded="ld => receiveLDData(ld)"
208210
@on-star="starColumn">
209211
</research-section-visualizers>
210212
</div>
@@ -218,9 +220,9 @@
218220
:regionZoom="regionZoom" :regionViewArea="regionViewArea" :region="regionParam"
219221
:bigRegion="bigRegionParam"
220222
:starItems="starItems"
223+
@ld-data-loaded="ld => receiveLDData(ld)"
221224
@on-star="starColumn">
222225
</research-section-visualizers>
223-
224226
</div>
225227
</span>
226228
</span>
@@ -238,7 +240,8 @@
238240
:utils="utils" @clicked-sort="sortData" :region="regionParam" :regionZoom="regionZoom"
239241
:regionViewArea="regionViewArea"
240242
:colors="colors" :plotMargin="plotMargin"
241-
@on-star="starColumn" @on-filtering="updateData">
243+
@on-star="starColumn" @on-filtering="updateData"
244+
@splice="selected => passSelectedData(selected, 1)">
242245

243246
</research-data-table>
244247

@@ -568,25 +571,17 @@ export default Vue.component("research-section", {
568571
//filter_c2ct_phenotype_annotationppo
569572
if(!!this.sectionConfig.filters) {
570573
571-
//console.log("this.sectionConfig.filters",this.sectionConfig.filters)
572-
573574
let filters = [];
574575
575576
this.sectionConfig.filters.map( f => {
576-
577-
//console.log("f",f)
578577
579578
const fItem = f.type == 'checkbox'? '.filter-' + this.sectionID + f.field.replace(/\W/g, "").toLowerCase():'#filter_' + this.sectionID + f.field.replace(/\W/g, "").toLowerCase();
580579
const fItems = document.querySelectorAll(fItem);
581580
582-
//console.log("fItem",fItem);
583-
//console.log("fItems",fItems);
584-
585581
if(f.type == 'checkbox') {
586582
fItems.forEach(node => {
587583
if(node.checked) {
588584
filters.push(node.value)
589-
//console.log(node.id + " is checked");
590585
}
591586
})
592587
} else {
@@ -599,7 +594,6 @@ export default Vue.component("research-section", {
599594
}
600595
})
601596
602-
//console.log("filtes", filters);
603597
this.filterValues = filters;
604598
605599
} else {
@@ -961,8 +955,6 @@ export default Vue.component("research-section", {
961955
962956
getParamString(PARAMS_TYPE) {
963957
964-
//console.log("PARAMS_TYPE",PARAMS_TYPE)
965-
966958
let queryParams = {}; // collect search parameters
967959
let queryParamsString = []; // search parameters into one string
968960
let queryParamsSet = true; // if search requirements don't meet set it null
@@ -990,8 +982,6 @@ export default Vue.component("research-section", {
990982
991983
region = chr +":"+posStart+"-"+posEnd;
992984
993-
//console.log("region",region)
994-
995985
queryParams[p] = region.toString().split(",");
996986
997987
} else {
@@ -1040,7 +1030,6 @@ export default Vue.component("research-section", {
10401030
}
10411031
}
10421032
1043-
//console.log("queryParams",queryParams)
10441033
/// check if one of the pre filters require a value from search parameters. If no value, set queryParamsSet null.
10451034
if (!!this.sectionConfig["pre filters"]) {
10461035
this.sectionConfig["pre filters"].map(f => {
@@ -1057,8 +1046,6 @@ export default Vue.component("research-section", {
10571046
10581047
let paramsLength = queryParams[this.dataPoint.parameters[0]].length;
10591048
1060-
//console.log("paramsLength",paramsLength);
1061-
10621049
for (let i = 0; i < paramsLength; i++) {
10631050
let pramsString = ""
10641051
@@ -1081,7 +1068,6 @@ export default Vue.component("research-section", {
10811068
}
10821069
10831070
//5. Check if return the first item in the queryParamsString
1084-
//console.log("queryParamsString", queryParamsString)
10851071
if (queryParamsString.length > 0) {
10861072
return queryParamsString[0];
10871073
} else {
@@ -1100,7 +1086,6 @@ export default Vue.component("research-section", {
11001086
},
11011087
11021088
queryData(FROM) {
1103-
//console.log("here");
11041089
const queryType = this.dataPoint["type"];
11051090
const paramsType = this.dataPoint["parameters type"];
11061091
const params = this.dataPoint["parameters"];
@@ -1163,9 +1148,6 @@ export default Vue.component("research-section", {
11631148
11641149
let paramStrArr = paramsString.split(",");
11651150
1166-
//console.log("paramStrArr",paramsString);
1167-
//console.log("searchParams",this.searchParameters);
1168-
11691151
params.map((param, pIndex) => {
11701152
11711153
for (const [key, value] of Object.entries(body)) {
@@ -1179,7 +1161,6 @@ export default Vue.component("research-section", {
11791161
})
11801162
11811163
if(paramType == "string to array") {
1182-
//console.log("paramStrArr[pIndex]",paramStrArr[pIndex].replaceAll("\n",";"));
11831164
paramStrArr[pIndex] = paramStrArr[pIndex].replaceAll("\n",";");
11841165
body[key] = paramStrArr[pIndex].split(";");
11851166
} else {
@@ -1259,14 +1240,11 @@ export default Vue.component("research-section", {
12591240
},
12601241
async queryBioindex(QUERY, TYPE, PARAMS) {
12611242
1262-
//console.log("here2",QUERY, TYPE, PARAMS);
1263-
12641243
this.searched.push(QUERY);
12651244
12661245
let dataUrl = this.dataPoint.url;
12671246
12681247
if (TYPE == "replace") {
1269-
//console.log("here3");
12701248
PARAMS.map((param, pIndex) => {
12711249
if (!!QUERY.split(",")[pIndex]) {
12721250
dataUrl = dataUrl.replace("$" + param, QUERY.split(",")[pIndex]);
@@ -1277,11 +1255,8 @@ export default Vue.component("research-section", {
12771255
}
12781256
})
12791257
1280-
//console.log("dataUrl",dataUrl);
1281-
12821258
} else if(TYPE == "replace or") {
12831259
1284-
//console.log("here3");
12851260
PARAMS.map((param, pIndex) => {
12861261
if (!!QUERY.split(",")[pIndex]) {
12871262
dataUrl = dataUrl.replace("$" + param, QUERY.split(",")[pIndex]);
@@ -1292,8 +1267,6 @@ export default Vue.component("research-section", {
12921267
}
12931268
})
12941269
1295-
//console.log("dataUrl",dataUrl);
1296-
12971270
} else {
12981271
dataUrl = dataUrl + "query/" + this.dataPoint.index + "?q=" + QUERY;
12991272
}
@@ -1724,8 +1697,6 @@ export default Vue.component("research-section", {
17241697
17251698
data = mergedData;
17261699
1727-
//console.log("CONTENT data",data);
1728-
17291700
} else {
17301701
data = CONTENT;
17311702
}
@@ -1750,7 +1721,6 @@ export default Vue.component("research-section", {
17501721
break;
17511722
17521723
case "object to array":
1753-
//console.log("CONTENT",CONTENT);
17541724
let objKey = this.dataPoint.object.key, objValue = this.dataPoint.object.value;
17551725
17561726
if (!!dataWrapper) {
@@ -1993,6 +1963,12 @@ export default Vue.component("research-section", {
19931963
}
19941964
})
19951965
}
1966+
},
1967+
receiveLDData(LD_DATA){
1968+
this.$emit("ld-data-loaded", LD_DATA);
1969+
},
1970+
passSelectedData(data, whichOne){
1971+
this.$emit("splice", data);
19961972
}
19971973
19981974
},

‎src/components/researchPortal/ResearchSectionVisualizers.vue‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@
128128
:utils="utils"
129129
:starItems="starItems"
130130
:colors="colors"
131-
131+
@ld-data-loaded="ld => receiveLDData(ld)"
132132
@on-star="starColumn"
133133
></multi-region-plot>
134134

@@ -201,9 +201,19 @@
201201
:utils="utils"
202202
:data="plotData"
203203
></research-single-cell-browser>
204-
205204
</template>
206-
205+
<research-splice-track
206+
v-if="sectionId.startsWith('sQTL_by_region0_2')"
207+
:region="region"
208+
:plotConfig="plotConfig"
209+
:plotType="plotConfig['type']"
210+
:plotMargin="plotMargin"
211+
:regionZoom="0"
212+
:regionViewArea="regionViewArea"
213+
:utils="utils"
214+
:colors="colors"
215+
:sectionId="sectionId">
216+
</research-splice-track>
207217
</div>
208218
</template>
209219

@@ -228,11 +238,13 @@ import ResearchBoxPlot from "@/components/researchPortal/ResearchBoxPlot.vue";
228238
import ResearchRegionTrack from "@/components/researchPortal/ResearchRegionTrack.vue";
229239
import ResearchRegionDotsTrack from "@/components/researchPortal/ResearchRegionDotsTrack.vue";
230240
import ResearchSingleCellBrowser from "@/components/researchPortal/singleCellBrowser/ResearchSingleCellBrowser.vue";
241+
import ResearchSpliceTrack from "@/components/researchPortal/ResearchSpliceTrack.vue";
231242
import cfdePhenotypeXing from "@/components/researchPortal/customComponents/cfdePhenotypeXing.vue";
232243
233244
export default Vue.component("research-section-visualizers", {
234245
props: ["plotConfig","plotData","plotLegend","phenotypeMap","plotMargin","colors",
235-
"sectionId","utils","dataComparisonConfig","searchParameters","regionZoom","regionViewArea","starItems","region","bigRegion"],
246+
"sectionId","utils","dataComparisonConfig","searchParameters","regionZoom",
247+
"regionViewArea","starItems","region","bigRegion"],
236248
components: {
237249
ResearchAnnotationsPlot,
238250
ResearchScatterPlot,
@@ -251,6 +263,7 @@ export default Vue.component("research-section-visualizers", {
251263
ResearchRegionTrack,
252264
ResearchRegionDotsTrack,
253265
ResearchSingleCellBrowser,
266+
ResearchSpliceTrack,
254267
cfdePhenotypeXing
255268
},
256269
data() {
@@ -281,6 +294,9 @@ export default Vue.component("research-section-visualizers", {
281294
starColumn(ARRAY) {
282295
this.$emit('on-star', ARRAY);
283296
},
297+
receiveLDData(DATA){
298+
this.$emit("ld-data-loaded", DATA);
299+
}
284300
},
285301
});
286302

0 commit comments

Comments
 (0)