Graph page (#792)

* phenotype styling

* changing phenotype at UI level

* refreshes upon change

* cleanup

* Getting and displaying phenotype description

* remove medium

* query small or large geneset size

* slightly better way to set up the store

* open in new window

---------

Co-authored-by: Quy <quy@broad.dev>

src/components/GenesetSizeSelectPicker.vue

@@ -1,7 +1,7 @@
 <template>
     <select v-model="size" class="form-control">
         <option value="small">Small</option>
-        <option value="medium">Medium</option>
+        <!-- <option value="medium">Medium</option> -->
         <option value="large">Large</option>
     </select>
 </template>

src/components/NetworkGraph.vue

@@ -111,7 +111,7 @@ export default Vue.component("NetworkGraph", {
     watch: {
         phenotype: {
             handler(newVal, oldVal) {
-                if (newVal?.name !== oldVal?.name) {
+                if (newVal !== oldVal) {
                     this.refreshGraph();
                 }
             },

src/views/PIGEAN/NetworkGraph/Template.vue

@@ -9,17 +9,142 @@
 
         <!-- Body -->
         <div class="container-fluid mdkp-body">
+            <search-header-wrapper>
+                <!-- Wrap page level searchs with "pageSearchParameters" div -->
+
+                <div
+                    class="col filter-col-md hidden"
+                    style="vertical-align: -8px !important"
+                >
+                    <div class="label">Phenotype</div>
+                    <div class="form-control new-phenotype-search-key">
+                        {{
+                            !$parent.newPhenotypeSearchKey
+                                ? "Search phenotype"
+                                : $parent.newPhenotypeSearchKey
+                        }}
+                    </div>
+                    <input
+                        v-model="$parent.phenotypeSearchKey"
+                        class="form-control phenotype-search-input"
+                        type="text"
+                    />
+
+                    <ul
+                        v-if="!!$parent.phenotypeSearchKey"
+                        class="page-phenotypes-list"
+                    >
+                        <template
+                            v-for="item in $store.state.pigeanAllPhenotypes
+                                .data"
+                        >
+                            <li
+                                v-if="
+                                    !!$parent.ifPhenotypeInSearch(
+                                        item.phenotype_name
+                                    )
+                                "
+                                :key="item.phenotype"
+                            >
+                                <a
+                                    href="javascript:;"
+                                    @click="$parent.setSelectedPhenotype(item)"
+                                    v-html="item.phenotype_name"
+                                ></a>
+                                <span class="trait-group">
+                                    ({{
+                                        $parent.traitGroups[item.trait_group]
+                                    }})</span
+                                >
+                            </li>
+                        </template>
+                    </ul>
+                </div>
+                <div class="col filter-col-md">
+                    <div class="label">Number of gene sets included</div>
+                    <geneset-size-selectpicker></geneset-size-selectpicker>
+                </div>
+                <div class="region-search col filter-col-md hidden">
+                    <div class="label">Search</div>
+                    <button
+                        id="regionSearchGo"
+                        class="btn btn-light btn-sm go"
+                        type="button"
+                        @click="$parent.searchPhenotype()"
+                    >
+                        GO
+                    </button>
+                </div>
+            </search-header-wrapper>
             <div class="card mdkp-card">
                 <div class="card-body">
-                    <h4 class="card-title">Mechanism Graph</h4>
-                    <template v-if="$parent.phenotype && $parent.genesetSize">
+                    <h4 class="card-title">Mechanism Graph
+                        <span v-if="!!$store.state.phenotype">
+                            for {{ $store.state.phenotype?.description }}
+                        </span>
+                    </h4>
+                    <template v-if="$store.state.phenotype && $parent.genesetSize">
                         <network-graph
-                            :phenotype="$parent.phenotype"
-                            :geneset-size="$parent.genesetSize"
+                            :phenotype="$store.state.phenotype.name"
+                            :geneset-size="$store.state.genesetSize"
                         ></network-graph>
                     </template>
                 </div>
             </div>
         </div>
     </div>
 </template>
+<style scoped>
+.phenotype-search-input {
+    display: block !important;
+    position: absolute;
+    top: 25px;
+    background: none;
+    border: none;
+}
+
+.phenotype-search-input:focus {
+    background-color: #fff;
+}
+
+.new-phenotype-search-key {
+    text-align: left;
+    overflow: hidden;
+}
+
+.page-phenotypes-list {
+    position: absolute;
+    z-index: 20;
+    list-style: none;
+    text-align: left;
+    white-space: nowrap;
+    padding: 0;
+    display: block;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 300px;
+    border-radius: 5px;
+    border: solid 1px #eeeeee;
+}
+
+.page-phenotypes-list li {
+    background-color: #fff;
+    padding: 3px 12px;
+    border-bottom: solid 1px #eeeeee;
+}
+
+.mechanism-info {
+    font-size: 0.75em;
+    color: #007bff;
+}
+.b-tooltip {
+    color: green !important;
+}
+span.trait-group {
+    color: #495057;
+}
+a.btn-outline-primary:hover {
+    color: #ffffff !important;
+    border-color: #007bff;
+}
+</style>

src/views/PIGEAN/NetworkGraph/main.js

@@ -3,31 +3,84 @@ import Template from "./Template.vue";
 import store from "./store";
 
 import NetworkGraph from "@/components/NetworkGraph.vue";
+import SearchHeaderWrapper from "@/components/SearchHeaderWrapper.vue";
+import GenesetSizeSelectPicker from "@/components/GenesetSizeSelectPicker.vue";
 import keyParams from "@/utils/keyParams";
 import { pageMixin } from "@/mixins/pageMixin.js";
 new Vue({
     store,
     components: {
         NetworkGraph,
+        SearchHeaderWrapper,
+        GenesetSizeSelectPicker,
     },
     mixins: [pageMixin],
     data() {
         return {
             pigeanPhenotypeMap: {},
+            phenotypeSearchKey: null,
+            newPhenotypeSearchKey: null,
+            selectedPhenotype: null,
+            traitGroups: {
+                portal: "A2F",
+                gcat_trait:"GWAS Catalog",
+                rare_v2: "Orphanet"
+            },
         };
     },
     computed: {
-        phenotype() {
-            return keyParams.phenotype || "";
-        },
         genesetSize() {
             return keyParams.genesetSize || "small";
         },
     },
+    methods: {
+        setSelectedPhenotype(PHENOTYPE) {
+            let oldStylePhenotype = this.toOldStyle(PHENOTYPE);
+            this.newPhenotypeSearchKey = oldStylePhenotype.description;
+            this.phenotypeSearchKey = null;
+            this.selectedPhenotype = oldStylePhenotype;
+        },
+        ifPhenotypeInSearch(DESCRIPTION) {
+            let searchKeys = this.phenotypeSearchKey.split(" ");
+            let isInPhenotype = 0;
+
+            searchKeys.map((w) => {
+                if (DESCRIPTION.toLowerCase().includes(w.toLowerCase())) {
+                    isInPhenotype++;
+                }
+            });
+
+            return isInPhenotype == searchKeys.length ? true : null;
+        },
+        toOldStyle(newStylePhenotype){
+            let oldStyle = structuredClone(newStylePhenotype);
+            oldStyle.description = newStylePhenotype.phenotype_name;
+            oldStyle.name = newStylePhenotype.phenotype;
+            oldStyle.group = newStylePhenotype.display_group;
+            return oldStyle;
+        },
+        searchPhenotype(){
+            let phenotypeToSearch = this.selectedPhenotype 
+                || this.pigeanPhenotypeMap[keyParams.phenotype];
+            this.$store.dispatch("sendSearch", phenotypeToSearch);
+        },
+        mapPhenotypes(){
+            let phenotypeMap = {};
+            let phenotypes = this.$store.state.pigeanAllPhenotypes.data
+            phenotypes.forEach(item => {
+                phenotypeMap[item.phenotype] = this.toOldStyle(item);
+            });
+            return phenotypeMap;
+        },
+    },
     async created() {
         this.$store.dispatch("bioPortal/getDiseaseSystems");
         this.$store.dispatch("bioPortal/getDiseaseGroups");
         this.$store.dispatch("bioPortal/getPhenotypes");
+        await this.$store.dispatch("getPigeanPhenotypes");
+        this.pigeanPhenotypeMap = this.mapPhenotypes();
+        let initialPhenotype = this.pigeanPhenotypeMap[keyParams.phenotype];
+        this.$store.dispatch("sendSearch", initialPhenotype)
     },
     render(createElement) {
         return createElement(Template);

src/views/PIGEAN/NetworkGraph/store.js

@@ -17,17 +17,25 @@ export default new Vuex.Store({
     },
     state: {
         phenotype: null,
-        genesetSize: "small",
+        genesetSize: keyParams.genesetSize || DEFAULT_GENESET_SIZE,
+        genesetSizeToQuery: keyParams.genesetSize || DEFAULT_GENESET_SIZE,
+        selectedPhenotype: null,
     },
     mutations: {
         setGenesetSize(state, genesetSize) {
             state.genesetSize = genesetSize || state.genesetSize;
+            keyParams.set({ genesetSize: genesetSize });
+        },
+        setPhenotype(state, phenotype) {
+            state.phenotype = phenotype || state.phenotype;
+            keyParams.set({ phenotype: phenotype.name});
         },
     },
     actions: {
-        onPhenotypeChange(context, phenotype) {
-            context.state.selectedPhenotype = phenotype;
-            keyParams.set({ phenotype: phenotype.name });
+        sendSearch(context, phenotype) {
+            context.commit("setPhenotype", phenotype);
+            context.commit("setGenesetSize", context.state.genesetSizeToQuery);
+
         },
         async getPigeanPhenotypes(context) {
             await context.dispatch("pigeanAllPhenotypes/query", { q: 1 });

src/views/PIGEAN/Phenotype/Template.vue

@@ -251,6 +251,7 @@
                                 size="sm"
                                 variant="outline-primary"
                                 :to="`/pigean/network_graph.html?phenotype=${$store.state.phenotype.name}&genesetSize=${$store.state.genesetSize}`"
+                                target="_blank"
                                 ><b-icon icon="node-plus"></b-icon>
                                 View Detailed Graph
                             </b-button>