Skip to content

Commit

Permalink
Dk multi features byor (#569)
Browse files Browse the repository at this point in the history 
* temp save

* muti-byor bug fix

* data type "file" added to multi-byor

* temp save

* temp save

* temp save

* BYOR summary section update

* BYOR summary section bug fix

* Section summary filter improved

* temp save

* Style update

* region dot track added to BYOR

* bug fix in formatting feature columns in multi-section BYOR added

* temp save

* BYOR bug in formatting feature subtable in multi-section BYOR fixed

* auto margin fix

* temp save

* Edge case in 600 traits portal fix

* Front page template styling bug fix.

* created 'fixed-to-bottom' 'tab group' type

* added update notification class to summary drawer button

* Fixed summary section implemented.

* research-data-table bug fix

* created loading spinner

* temp save

* temp save

* Custom evidence row number implemented in BYOR summary section.

* Single-search on BYOR front-page component

---------

Co-authored-by: Alex Shilin <shilin@broadinstitute.org>
  • Loading branch information
@dkjang @a-shilin
dkjang and a-shilin authored Jan 25, 2024
1 parent fcd83ce commit 66741e4
Show file tree
Hide file tree
Showing 8 changed files with 206 additions and 57 deletions.
32 changes: 29 additions & 3 deletions src/components/researchPortal/ResearchDataTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
class="convert-2-csv btn-sm"
@click="showHidePanel('#showHideColumnsBox' + sectionId)"
>
show/hide columns
{{ !!summarySection ? 'Set summary table' : 'Show/hide columns' }}
</div>
<div v-if="!!tableFormat" :id="'showHideColumnsBox'+sectionId" class="hidden">
<div
Expand All @@ -69,7 +69,7 @@
>
<b-icon icon="x-circle-fill"></b-icon>
</div>
<h4 style="text-align: center">Show/hide columns</h4>
<h4 style="text-align: center">show/hide columns</h4>
<p></p>
<div class="table-wrapper">
<table class="table table-sm">
Expand Down Expand Up @@ -97,6 +97,25 @@
</tr>
</tbody>
</table>
<div v-if="!!summarySection">
<h4 style="text-align: center">Number of rows in evidence tables</h4>
<label
>Set rows:
<select v-model="featureRowsNumber" class="number-per-page">
<option value="10" selected>10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
</select>
</label>
<div style="color:red;">*Updating this value requires rebuilding of the summary table, which may take long time depends on
the number of the evidence groups and their data rows.</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -234,9 +253,11 @@
>
<td :colspan="topRowNumber" class="features-td">
<research-data-table-features
:featureRowsNumber="featureRowsNumber"
:featuresData="value.features"
:featuresFormat="tableFormat"
:utils="utils"
:summarySection="summarySection"
></research-data-table-features>
</td>
</tr>
Expand Down Expand Up @@ -278,6 +299,7 @@ export default Vue.component("research-data-table", {
"pkgDataSelected",
"phenotypeMap",
"multiSectionPage",
"summarySection",
"starItems",
"sectionId",
"utils",
Expand All @@ -289,6 +311,7 @@ export default Vue.component("research-data-table", {
return {
currentPage: 1,
perPageNumber: null,
featureRowsNumber: 10,
compareGroups: [],
stared: false,
};
Expand Down Expand Up @@ -579,6 +602,9 @@ export default Vue.component("research-data-table", {
},
},
watch: {
featureRowsNumber(NUMBER) {
this.$emit('on-feature-rows-change', NUMBER);
},
dataset(DATA) {
if (this.dataComparisonConfig != null) {
this.compareGroups = [];
Expand All @@ -604,7 +630,7 @@ export default Vue.component("research-data-table", {
methods: {
setParameter(VALUE,KEY,SECTION,PARAMETERS){
console.log("section component", VALUE, ":", KEY, ":", SECTION, ":", PARAMETERS);
//console.log("section component", VALUE, ":", KEY, ":", SECTION, ":", PARAMETERS);
let targetSections = SECTION == "all" ? "":[SECTION];
Expand Down
23 changes: 19 additions & 4 deletions src/components/researchPortal/ResearchDataTableFeatures.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
<template>
<div class="research-data-table-features-wrapper">
<!--{{ featuresFormat['features'] }}<br />
{{ featuresData }}-->
<div
v-for="(value, index) in featuresFormat['features']"
:key="index"
Expand Down Expand Up @@ -43,7 +41,7 @@
>
<template v-for="headerValue in featuresFormat[value]">
<td
v-if="!!featuresFormat[value].includes(headerValue)"
v-if="!!summarySection && featureIndex < featureRowsNumber && !!featuresFormat[value].includes(headerValue)"
:key="headerValue"
v-html="
formatValue(
Expand All @@ -52,7 +50,21 @@
)
"
></td>

<td
v-if="!summarySection && !!featuresFormat[value].includes(headerValue)"
:key="headerValue"
v-html="formatValue(
featureValue[headerValue],
headerValue
)
"
></td>

</template>
<td colspan="100" v-if="!!summarySection && featureIndex == featureRowsNumber" style="color: red; text-align: center;">
There are {{ featureValue.featureRows - featureRowsNumber }} more rows of evidence data.
Click to 'Set summary table' button to set the number of visible evidence data rows.</td>
</tr>
</table>
</div>
Expand All @@ -63,7 +75,7 @@
import Vue from "vue";
export default Vue.component("research-data-table-features", {
props: ["featuresData", "featuresFormat", "phenotypeMap","utils"],
props: ["featureRowsNumber","featuresData", "featuresFormat", "phenotypeMap","utils", "summarySection"],
data() {
return {};
},
Expand Down Expand Up @@ -130,6 +142,9 @@ export default Vue.component("research-data-table-features", {
watch: {},
methods: {
//...Formatters,
getAllEvidence(){
},
formatValue(tdValue, tdKey) {
let content;
Expand Down
56 changes: 28 additions & 28 deletions src/components/researchPortal/ResearchFrontPage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,31 @@
<template>
<div class="container-fluid mdkp-body flex-body front-page">
<div class="fp-top"
:style="{ background: `linear-gradient( ${this.sectionConfigs['content']['color_secondary']} 0%, ${this.sectionConfigs['content']['color_primary']} 100% )`}">
:style="{ background: `linear-gradient( ${this.sectionConfigs['content']['color secondary']} 0%, ${this.sectionConfigs['content']['color primary']} 100% )`}">
<div class="fp-intro-section">
<div class="fp-intro-logo">
<img style="width:400px;"
:src="this.sectionConfigs['content']['logo_large']"/>
:src="this.sectionConfigs['content']['logo large']"/>
</div>
<div class="fp-intro-divider"></div>
<div class="fp-intro-blurb">
<div class="fp-intro-blurb-text">{{ this.sectionConfigs["content"]["tagline"] }}</div>
</div>
</div>
<div v-if="this.sectionConfigs['content']['search_enabled']"
<div v-if="this.sectionConfigs['content']['search enabled']"
class="row fp-search-section">
<div class="fp-search">
<input
class="form-control byor-single-search"
type="text"
id="byor_research_search"
v-model="this.researchSearchParam"
placeholder="Search gene, variant, region or phenotype"
@keyup.enter="this.onSearch"
/>
<!--
<research-single-search
:single-search-config="null"
:phenotypes="phenotypesInSession"
:single-search-config="sectionConfigs['content']"
:phenotypes="phenotypesInUse"
:utils="utilsBox"
></research-single-search>
-->
></research-single-search>
</div>
<div class="fp-search-examples">
<!--
<documentation
name="home.example"
v-if="diseaseGroup"
:group="diseaseGroup.name"
></documentation>
-->
<div v-if="!!sectionConfigs['content']['search examples']" class="fp-search-examples">
<span v-html="'examples: '"></span>
<span v-for="example in sectionConfigs['content']['search examples']" :key="example.value"
v-html="getExampleLink(example)">
</span>
</div>
</div>
</div>
Expand All @@ -55,9 +42,10 @@

<script>
import Vue from "vue";
import ResearchSingleSearch from "@/components/researchPortal/ResearchSingleSearch.vue";
export default Vue.component("research-front-page", {
props: ["sectionConfigs","pageDescription", "utilsBox"],
props: ["sectionConfigs","pageDescription", "utilsBox","phenotypeMap","phenotypesInUse"],
components: {},
Expand All @@ -74,9 +62,15 @@ export default Vue.component("research-front-page", {
}
},
methods: {
onSearch(){
let searchKey = this.researchSearchParam.replace(/,/g, "").trim();
console.log("searching", searchKey)
getExampleLink(EXAMPLE) {
let exampleLink;
this.sectionConfigs['content']['search parameters'].map(param =>{
if(param.parameter == EXAMPLE.parameter) {
exampleLink = "<a href='/research.html?pageid="+param["target page"]["page id"]
+"&"+ param.parameter+"="+EXAMPLE.value+"'>"+ EXAMPLE.value +"</a>";
}
})
return exampleLink;
}
},
});
Expand Down Expand Up @@ -167,6 +161,12 @@ export default Vue.component("research-front-page", {
.fp-search-examples,
.fp-search-examples a {
color: white !important;
font-size: 1.15em;
}
.fp-search-examples span {
margin-left: 3px;
margin-right: 3px;
}
Expand Down
5 changes: 3 additions & 2 deletions src/components/researchPortal/ResearchSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,9 @@
v-for="parameter in dataPoint['parameters']" :key="parameter"
style="font-size:0.7em"
v-html="!!utils.keyParams[parameter] ? utils.keyParams[parameter] + ' ' : parameter + ' not set. '"></small>
<small :class="(loadingDataFlag == 'down') ? 'data-loading-flag hidden' : 'data-loading-flag'"
:id="'flag_' + sectionID">Loading data...</small>
<!--<small :class="(loadingDataFlag == 'down') ? 'data-loading-flag hidden' : 'data-loading-flag'"
:id="'flag_' + sectionID">Loading data...</small>-->
<research-loading-spinner :isLoading="(loadingDataFlag == 'down') ? '' : 'whatever'" colorStyle="color"></research-loading-spinner>
</h4>
</div>
</div>
Expand Down
35 changes: 26 additions & 9 deletions src/components/researchPortal/ResearchSectionsSummary.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,14 @@
</div>
<div>
<h5 class="btn btn-primary" @click="buildSummary()"><strong>Update Summary</strong></h5>
<!-- colorStyle can be: none = white, "black", "color" -->
<research-loading-spinner isLoading="yeah" colorStyle="color"></research-loading-spinner>
<!-- colorStyle can be: none = white, "black", "color"
<research-loading-spinner isLoading="yeah" colorStyle="color"></research-loading-spinner>-->
</div>

<div class="row card-body" :id="'section_' + sectionID">
<div class="col-md-12" :class="'wrapper-' + sectionIndex">
<research-data-table
v-if="!!sectionData"
v-if="!!sectionData && summarizing == null"
:pageID="sectionIndex"
:dataset="sectionData"
:tableFormat="tableFormat"
Expand All @@ -44,10 +44,12 @@
:phenotypeMap="null"
:sectionId="sectionsConfig['section id']"
:multiSectionPage="true"
:summarySection="true"
:starItems="starItems"
:utils="utils"
@clicked-sort="sortData"
@on-star="starColumn"
@on-feature-rows-change="setFeatureRows"
:region="regionParam"
:regionZoom="regionZoom"
:regionViewArea="regionViewArea"
Expand Down Expand Up @@ -92,6 +94,7 @@ export default Vue.component("research-sections-summary", {
loadingDataFlag: "down",
regionParam: null,
summarizing: null,
featureRowsNumber: 10,
};
},
modules: {
Expand Down Expand Up @@ -128,13 +131,17 @@ export default Vue.component("research-sections-summary", {
wholeDataCounts(NUM) {
//this.buildSummary();
let element = document.getElementById("fixed_group_toggle");
console.log('element', element)
//console.log('element', element)
if(!!element) {
element.classList.add('has-updates');
}
}
},
methods: {
setFeatureRows(NUMBER){
this.featureRowsNumber = NUMBER;
this.buildSummary();
},
isSectionData(SECTION) {
let filterSection = this.sectionsData.filter(data => data.id == SECTION)[0]
Expand Down Expand Up @@ -176,6 +183,8 @@ export default Vue.component("research-sections-summary", {
}
})
//console.log("filteredData", filteredData);
section.actions.map(action => {
switch (action.action) {
Expand Down Expand Up @@ -207,7 +216,6 @@ export default Vue.component("research-sections-summary", {
})
let collapsedData = [];
//let filterLogic = this.sectionsConfig.sections["inter sections filter logic"];
targetData.map(row => {
let meetFilter = true;
Expand Down Expand Up @@ -250,7 +258,9 @@ export default Vue.component("research-sections-summary", {
targetData.map(TD => {
TD[FEATURE] = [];
let featureRows = 1;
TD[KEY_FIELD].map(tdKey => {
filterDataObj[tdKey].map(fdIndex => {
let tempObj = {};
Expand All @@ -261,7 +271,10 @@ export default Vue.component("research-sections-summary", {
switch (IF_MULTIPLE) //add, replace, pick greater, pick lower
{
case "add":
TD[FEATURE].push(tempObj);
featureRows++
if(TD[FEATURE].length < this.featureRowsNumber) {
TD[FEATURE].push(tempObj);
}
break;
case "replace":
TD[FEATURE] = [tempObj];
Expand All @@ -272,8 +285,14 @@ export default Vue.component("research-sections-summary", {
break;
}
})
})
if(featureRows > this.featureRowsNumber) {
console.log("featureRows: ", featureRows)
TD[FEATURE].push({"featureRows": featureRows });
console.log(TD[FEATURE].length,TD[FEATURE])
}
})
return targetData;
Expand Down Expand Up @@ -339,8 +358,6 @@ export default Vue.component("research-sections-summary", {
},
applyFilter(targetData,filterData,targetField,filterField,TYPE){
console.log(targetField, filterField, TYPE);
let returnData = [];
let filterFieldArr;
switch (TYPE) {
Expand Down
Loading

0 comments on commit 66741e4

Please sign in to comment.