Cs fixes (#776)

* small fixes * labeling * labeling all annotation * annotation column on phenotype page * fixed annotation issues * removed All option from annotations * fixed cs2ct query * warning
broadinstitute · Nov 1, 2024 · 4bbcceb · 4bbcceb
1 parent e67c64d
commit 4bbcceb
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 27 deletions.
diff --git a/src/components/C2ctTable.vue b/src/components/C2ctTable.vue
@@ -66,12 +66,12 @@
                 :per-page="perPage"
             ></b-pagination>
         </div>
-        <!-- <div v-else>
+        <div v-else>
             <b-alert show variant="warning" class="text-center">
                 <b-icon icon="exclamation-triangle"></b-icon> No data available
                 for this query.
             </b-alert>
-        </div> -->
+        </div>
     </div>
 </template>
 <script>
@@ -82,7 +82,7 @@ export default Vue.component("c2ct-table", {
     components: {
         DataDownload,
     },
-    props: ["c2ctData", "filter", "phenotype"],
+    props: ["c2ctData", "filter", "phenotype", "isTissuePage"],
     data() {
         return {
             perPage: 10,

diff --git a/src/views/Phenotype/Template.vue b/src/views/Phenotype/Template.vue
@@ -207,12 +207,13 @@
                             Credible Sets to Cell Type (CS2CT) results for
                             {{ $store.state.phenotype.description }}
                             (Ancestry:
-                            {{
-                                $store.state.ancestry == ""
+                            {{ $store.state.selectedAncestry == ""
                                     ? "All"
                                     : $parent.ancestryFormatter(
-                                          $store.state.ancestry
-                                      )
+                                        $store.state.selectedAncestry
+                                      )}}, Annotation: 
+                            {{ 
+                                $parent.tissueFormatter($store.state.selectedAnnotation)
                             }})
                             <tooltip-documentation
                                 name="phenotype.cs2ct.tooltip"
@@ -239,7 +240,6 @@
                                     <select v-model="$parent.annotation"
                                         class="form-control"
                                         @change="$parent.onAnnotationSelected()">
-                                        <option value="">All</option>
                                         <option v-for="anno in $store.state.annotationOptions"
                                             :value="anno">
                                             {{ anno }}

diff --git a/src/views/Phenotype/main.js b/src/views/Phenotype/main.js
@@ -206,7 +206,9 @@ new Vue({
             //Initial query. Should only happen once.
             this.$store.dispatch("queryPhenotype");
         },
-
+        "$store.state.annotationOptions"(data) {
+            this.annotation = data[0];
+        },
         "$store.state.phenotype": function (phenotype) {
             keyParams.set({ phenotype: phenotype.name });
             uiUtils.hideElement("phenotypeSearchHolder");
@@ -254,6 +256,7 @@ new Vue({
         ...sessionUtils,
         intFormatter: Formatters.intFormatter,
         ancestryFormatter: Formatters.ancestryFormatter,
+        tissueFormatter: Formatters.tissueFormatter,
         maFormatter(value) {
             return value
                 .split(";")

diff --git a/src/views/Phenotype/store.js b/src/views/Phenotype/store.js
@@ -56,7 +56,7 @@ export default new Vuex.Store({
             keyParams.set({ phenotype: PHENOTYPE.name });
         },
         setSelectedAnnotation(state, annotation){
-            state.selectedAnnotation = annotation || state.selectedAnnotation;
+            state.selectedAnnotation = annotation;
         }
     },
     getters: {
@@ -138,12 +138,9 @@ export default new Vuex.Store({
             if (!!context.state.selectedAncestry){
                 queryString = `${context.state.selectedAncestry},${queryString}`;
             }
-            if (!!context.state.selectedAnnotation){
-                queryString = `${queryString},${context.state.selectedAnnotation}`;
-                context.dispatch("c2ctAnnotation/query", { q : queryString });
-            } else {
-                context.dispatch("c2ct/query", { q : queryString });
-            }
+            queryString = `${queryString},${context.state.selectedAnnotation}`;
+            context.dispatch("c2ctAnnotation/query", { q : queryString });
+
         },
         phenotypesInSession(context, PHENOTYPES) {
             context.commit("setPhenotypesInSession", PHENOTYPES);

diff --git a/src/views/Tissue/Template.vue b/src/views/Tissue/Template.vue
@@ -123,12 +123,12 @@
                             Credible Sets to Cell Type (CS2CT) results for
                             {{ $store.state.selectedPhenotype?.description }}
                             (Ancestry:
-                            {{
-                                $store.state.selectedAncestry == ""
+                            {{ $store.state.selectedAncestry == ""
                                     ? "All"
                                     : $parent.ancestryFormatter(
                                         $store.state.selectedAncestry
-                                      )
+                                      )}}, Annotation: {{ 
+                                $parent.tissueFormatter($store.state.selectedAnnotation)
                             }})
                             <tooltip-documentation
                                 name="phenotype.cs2ct.tooltip"
@@ -160,6 +160,14 @@
                                     >
                                     </phenotype-selectpicker>
                                 </div>
+                                <div class="col filter-col-md">
+                                    <span>
+                                        <div class="label">Search by ancestry</div>
+                                    </span>
+                                    <ancestry-selectpicker
+                                        :ancestries="$store.state.ancestryOptions">
+                                    </ancestry-selectpicker>
+                                </div>
                                 <div class="col filter-col-md">
                                     <span>
                                         <div class="label">Search by annotation</div>
@@ -173,14 +181,7 @@
                                         </option>
                                     </select>
                                 </div>
-                                <div class="col filter-col-md">
-                                    <span>
-                                        <div class="label">Search by ancestry</div>
-                                    </span>
-                                    <ancestry-selectpicker
-                                        :ancestries="$store.state.ancestryOptions">
-                                    </ancestry-selectpicker>
-                                </div>
+
                             </div>
                         </div>
                         <criterion-function-group>
@@ -210,6 +211,7 @@
                                 <c2ct-table
                                     :c2ct-data="$parent.cs2ctData"
                                     :filter="filter"
+                                    :isTissuePage="true"
                                     :phenotype="
                                         $store.state.selectedPhenotype
                                     "