From 370636b7d5d46fa66452390c582170ff2cbc5365 Mon Sep 17 00:00:00 2001 From: Quy Date: Mon, 9 Sep 2024 12:04:03 -0400 Subject: [PATCH 001/132] setup pankbase --- configs/vue.config.A2FKP.js | 317 ----------------------- configs/vue.config.PanKbase.js | 77 ++++++ src/portals/PanKbase/components/.gitkeep | 0 src/portals/PanKbase/views/.gitkeep | 0 4 files changed, 77 insertions(+), 317 deletions(-) delete mode 100644 configs/vue.config.A2FKP.js create mode 100644 configs/vue.config.PanKbase.js create mode 100644 src/portals/PanKbase/components/.gitkeep create mode 100644 src/portals/PanKbase/views/.gitkeep diff --git a/configs/vue.config.A2FKP.js b/configs/vue.config.A2FKP.js deleted file mode 100644 index e4a726ad6..000000000 --- a/configs/vue.config.A2FKP.js +++ /dev/null @@ -1,317 +0,0 @@ -/* We define all the pages first in an object that can be modified BEFORE being - * exported so we can add/remove pages based on build type. - */ - -let pages = { - index: { - entry: "src/views/A2fIndex/main.js", - template: "public/index.html", - filename: "index.html", - title: "Home", - chunks: ["chunk-vendors", "chunk-common", "index"], - }, - debug: { - entry: "src/views/Debug/main.js", - template: "public/index.html", - filename: "debug.html", - title: "Debug Page", - chunks: ["chunk-vendors", "chunk-common", "debug"], - }, - phenotype: { - entry: "src/views/Phenotype/main.js", - template: "public/index.html", - filename: "phenotype.html", - title: "Phenotype", - chunks: ["chunk-vendors", "chunk-common", "phenotype"], - }, - region: { - entry: "src/views/Region/main.js", - template: "public/index.html", - filename: "region.html", - title: "Region Info", - chunks: ["chunk-vendors", "chunk-common", "region"], - }, - variant: { - entry: "src/views/Variant/main.js", - template: "public/index.html", - filename: "variant.html", - title: "Variant Info", - chunks: ["chunk-vendors", "chunk-common", "variant"], - }, - gene: { - entry: "src/views/Gene/main.js", - template: "public/index.html", - filename: "gene.html", - title: "Gene Info", - chunks: ["chunk-vendors", "chunk-common", "gene"], - }, - datasets: { - entry: "src/views/Datasets/main.js", - template: "public/index.html", - filename: "datasets.html", - title: "Datasets", - chunks: ["chunk-vendors", "chunk-common", "datasets"], - }, - dinspector: { - entry: "src/views/DatasetInspector/main.js", - template: "public/index.html", - filename: "dinspector.html", - title: "Dataset Inspector", - chunks: ["chunk-vendors", "chunk-common", "dinspector"], - }, - downloads: { - entry: "src/views/Downloads/main.js", - template: "public/index.html", - filename: "downloads.html", - title: "Downloads", - chunks: ["chunk-vendors", "chunk-common", "downloads"], - }, - policies: { - entry: "src/views/Policies/main.js", - template: "public/index.html", - filename: "policies.html", - title: "Policies", - chunks: ["chunk-vendors", "chunk-common", "policies"], - }, - about: { - entry: "src/views/About/main.js", - template: "public/index.html", - filename: "about.html", - title: "About", - chunks: ["chunk-vendors", "chunk-common", "about"], - }, - collaborate: { - entry: "src/views/Collaborate/main.js", - template: "public/index.html", - filename: "collaborate.html", - title: "Collaborate", - chunks: ["chunk-vendors", "chunk-common", "collaborate"], - }, - resources: { - entry: "src/views/Resources/main.js", - template: "public/index.html", - filename: "resources.html", - title: "Resources", - chunks: ["chunk-vendors", "chunk-common", "resources"], - }, - publications: { - entry: "src/views/Publications/main.js", - template: "public/index.html", - filename: "publications.html", - title: "Publications", - chunks: ["chunk-vendors", "chunk-common", "publications"], - }, - news: { - entry: "src/views/News/main.js", - template: "public/index.html", - filename: "news.html", - title: "News", - chunks: ["chunk-vendors", "chunk-common", "news"], - }, - contacts: { - entry: "src/views/Contacts/main.js", - template: "public/index.html", - filename: "contacts.html", - title: "Contacts", - chunks: ["chunk-vendors", "chunk-common", "contacts"], - }, - kplab: { - entry: "src/views/KPLab/main.js", - template: "public/index.html", - filename: "kplab.html", - title: "KP Lab", - chunks: ["chunk-vendors", "chunk-common", "kplab"], - }, - apis: { - entry: "src/views/Apis/main.js", - template: "public/index.html", - filename: "apis.html", - title: "APIs", - chunks: ["chunk-vendors", "chunk-common", "apis"], - }, - epigeneticdatasets: { - entry: "src/views/EpigeneticDatasets/main.js", - template: "public/index.html", - filename: "epigeneticdatasets.html", - title: "Epigenetic Datasets", - chunks: ["chunk-vendors", "chunk-common", "epigeneticdatasets"], - }, - epigenomicdatasets: { - entry: "src/views/EpigenomicDatasets/main.js", - template: "public/index.html", - filename: "epigenomicdatasets.html", - title: "Epigenomic Datasets", - chunks: ["chunk-vendors", "chunk-common", "epigenomicdatasets"], - }, - ampt2dpartnership: { - entry: "src/views/AmpT2dPartnership/main.js", - template: "public/index.html", - filename: "ampt2dpartnership.html", - title: "AMP T2D Partnership", - chunks: ["chunk-vendors", "chunk-common", "ampt2dpartnership"], - }, - effectorgenes: { - entry: "src/views/EffectorGenes/main.js", - template: "public/index.html", - filename: "effectorgenes.html", - title: "Predicted Effector Genes Research Methods", - chunks: ["chunk-vendors", "chunk-common", "effectorgenes"], - }, - eglmethod: { - entry: "src/views/EglMethod/main.js", - template: "public/index.html", - filename: "method.html", - title: "Research Method", - chunks: ["chunk-vendors", "chunk-common", "eglmethod"], - }, - hugecalculator: { - entry: "src/views/HuGeCalculator/main.js", - template: "public/index.html", - filename: "hugecalculator.html", - title: "HuGe Calculator", - chunks: ["chunk-vendors", "chunk-common", "hugecalculator"], - }, - - genefinder: { - entry: "src/views/GeneFinder/main.js", - template: "public/index.html", - filename: "genefinder.html", - title: "Gene Finder", - chunks: ["chunk-vendors", "chunk-common", "genefinder"], - }, - signalsifter: { - entry: "src/views/SignalSifter/main.js", - template: "public/index.html", - filename: "signalsifter.html", - title: "Signal Sifter", - chunks: ["chunk-vendors", "chunk-common", "signalsifter"], - }, - complicationsviewer: { - entry: "src/views/ComplicationsViewer/main.js", - template: "public/index.html", - filename: "complicationsviewer.html", - title: "Complications Viewer", - chunks: ["chunk-vendors", "chunk-common", "complicationsviewer"], - }, - - page404: { - entry: "src/views/404/main.js", - template: "public/index.html", - filename: "404.html", - title: "Page Not Found", - chunks: ["chunk-vendors", "chunk-common", "page404"], - }, - gait: { - entry: "src/views/GAIT/main.js", - template: "public/index.html", - filename: "gait.html", - title: "Genetic Association Interactive Tool", - chunks: ["chunk-vendors", "chunk-common", "gait"], - }, - gait2: { - entry: "src/views/GAIT2/main.js", - template: "public/index.html", - filename: "ncgait.html", - title: "Non-Coding Genetic Association Interactive Tool", - chunks: ["chunk-vendors", "chunk-common", "gait2"], - }, - project: { - entry: "src/views/Project/main.js", - template: "public/index.html", - filename: "project.html", - title: "Project", - chunks: ["chunk-vendors", "chunk-common", "project"], - }, - variantsearch: { - entry: "src/views/VariantSearch/main.js", - template: "public/index.html", - filename: "variantsearch.html", - title: "Variant Search", - chunks: ["chunk-vendors", "chunk-common", "variantsearch"], - }, - research: { - entry: "src/views/Papers/Research/main.js", - template: "public/index.html", - filename: "research.html", - title: "Research", - chunks: ["chunk-vendors", "chunk-common", "research"], - }, - egggenerator: { - entry: "src/views/EggGenerator/main.js", - template: "public/index.html", - filename: "egggenerator.html", - title: "Exome Gene-Level Group-file Generator", - chunks: ["chunk-vendors", "chunk-common", "egggenerator"], - }, - help: { - entry: "src/views/Help/main.js", - template: "public/index.html", - filename: "help.html", - title: "Help", - chunks: ["chunk-vendors", "chunk-common", "help"], - }, -}; - -// remove the debug page in production -if (process.env.NODE_ENV === "production") { - delete pages.debug; -} - -module.exports = { - devServer: { - writeToDisk: true, // https://webpack.js.org/configuration/dev-server/#devserverwritetodisk- - }, - configureWebpack: (config) => { - let bioindex_dev = process.env.BIOINDEX_DEV; - let bioindex_host = "https://bioindex.hugeamp.org"; // production by default - //set private bioindex host if variable is defined, otherwise use default - let bioindex_host_private = - process.env.BIOINDEX_HOST_PRIVATE || "https://bioindex.hugeamp.org"; - - if (!!bioindex_dev) { - bioindex_host = - bioindex_dev == "localhost" - ? "http://localhost:5000" - : "https://bioindex-dev.hugeamp.org"; - } - - // output which vue config file and bioindex is being used - console.log( - `VUE_CONFIG_PATH=${process.env.VUE_CLI_SERVICE_CONFIG_PATH}; BIOINDEX_DEV=${process.env.BIOINDEX_DEV}; using ${bioindex_host} and ${bioindex_host_private}` - ); - - // add the transform rule for bioindex - config.module.rules.push({ - test: /bioIndexUtils\.js$/, - loader: "string-replace-loader", - options: { - search: "SERVER_IP_ADDRESS", - replace: bioindex_host, - flags: "g", - }, - }); - - // add the transform rule for bioindex - // Helen 2021-06-17 - config.module.rules.push({ - test: /bioIndexUtils\.js$/, - loader: "string-replace-loader", - options: { - search: "SERVER_IP_PRIVATE", - replace: bioindex_host_private, - flags: "g", - }, - }); - - // create inline maps for dev builds - if (process.env.NODE_ENV !== "production") { - //config.devtool = "inline-source-map"; - - //https://stackoverflow.com/questions/48047150/chrome-extension-compiled-by-webpack-throws-unsafe-eval-error - config.devtool = "cheap-module-source-map"; - } - }, - outputDir: "portals/A2FKP/dist", - productionSourceMap: false, - pages, -}; diff --git a/configs/vue.config.PanKbase.js b/configs/vue.config.PanKbase.js new file mode 100644 index 000000000..1d5ba7140 --- /dev/null +++ b/configs/vue.config.PanKbase.js @@ -0,0 +1,77 @@ +/* We define all the pages first in an object that can be modified BEFORE being + * exported so we can add/remove pages based on build type. + */ + +let pages = { + index: { + entry: "src/views/A2fIndex/main.js", + template: "public/index.html", + filename: "index.html", + title: "Home", + chunks: ["chunk-vendors", "chunk-common", "index"], + }, + page404: { + entry: "src/views/404/main.js", + template: "public/index.html", + filename: "404.html", + title: "Page Not Found", + chunks: ["chunk-vendors", "chunk-common", "page404"], + }, +}; + +module.exports = { + devServer: { + writeToDisk: true, // https://webpack.js.org/configuration/dev-server/#devserverwritetodisk- + }, + configureWebpack: (config) => { + let bioindex_dev = process.env.BIOINDEX_DEV; + let bioindex_host = "https://bioindex.hugeamp.org"; // production by default + //set private bioindex host if variable is defined, otherwise use default + let bioindex_host_private = + process.env.BIOINDEX_HOST_PRIVATE || "https://bioindex.hugeamp.org"; + + if (!!bioindex_dev) { + bioindex_host = + bioindex_dev == "localhost" + ? "http://localhost:5000" + : "https://bioindex-dev.hugeamp.org"; + } + + // output which vue config file and bioindex is being used + console.log( + `VUE_CONFIG_PATH=${process.env.VUE_CLI_SERVICE_CONFIG_PATH}; BIOINDEX_DEV=${process.env.BIOINDEX_DEV}; using ${bioindex_host} and ${bioindex_host_private}` + ); + + // add the transform rule for bioindex + config.module.rules.push({ + test: /bioIndexUtils\.js$/, + loader: "string-replace-loader", + options: { + search: "SERVER_IP_ADDRESS", + replace: bioindex_host, + flags: "g", + }, + }); + + config.module.rules.push({ + test: /bioIndexUtils\.js$/, + loader: "string-replace-loader", + options: { + search: "SERVER_IP_PRIVATE", + replace: bioindex_host_private, + flags: "g", + }, + }); + + // create inline maps for dev builds + if (process.env.NODE_ENV !== "production") { + //config.devtool = "inline-source-map"; + + //https://stackoverflow.com/questions/48047150/chrome-extension-compiled-by-webpack-throws-unsafe-eval-error + config.devtool = "cheap-module-source-map"; + } + }, + outputDir: "portals/PanKbase", + productionSourceMap: false, + pages, +}; diff --git a/src/portals/PanKbase/components/.gitkeep b/src/portals/PanKbase/components/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/src/portals/PanKbase/views/.gitkeep b/src/portals/PanKbase/views/.gitkeep new file mode 100644 index 000000000..e69de29bb From 1b4b997144272b0f76cb7b3f9d2cf5e2c61300d9 Mon Sep 17 00:00:00 2001 From: Alex Shilin Date: Fri, 20 Sep 2024 08:59:30 -0400 Subject: [PATCH 002/132] index setup --- configs/vue.config.PanKbase.js | 2 +- src/portals/PanKbase/assets/pkb-styles.css | 216 ++++++++++++++++++ .../PanKbase/components/pkb-footer.vue | 41 ++++ .../PanKbase/components/pkb-header.vue | 176 ++++++++++++++ src/portals/PanKbase/views/Index/Template.vue | 18 ++ src/portals/PanKbase/views/Index/main.js | 57 +++++ 6 files changed, 509 insertions(+), 1 deletion(-) create mode 100644 src/portals/PanKbase/assets/pkb-styles.css create mode 100644 src/portals/PanKbase/components/pkb-footer.vue create mode 100644 src/portals/PanKbase/components/pkb-header.vue create mode 100644 src/portals/PanKbase/views/Index/Template.vue create mode 100644 src/portals/PanKbase/views/Index/main.js diff --git a/configs/vue.config.PanKbase.js b/configs/vue.config.PanKbase.js index 1d5ba7140..f7ef966c4 100644 --- a/configs/vue.config.PanKbase.js +++ b/configs/vue.config.PanKbase.js @@ -4,7 +4,7 @@ let pages = { index: { - entry: "src/views/A2fIndex/main.js", + entry: "src/portals/PanKbase/views/Index/main.js", template: "public/index.html", filename: "index.html", title: "Home", diff --git a/src/portals/PanKbase/assets/pkb-styles.css b/src/portals/PanKbase/assets/pkb-styles.css new file mode 100644 index 000000000..a7f20d880 --- /dev/null +++ b/src/portals/PanKbase/assets/pkb-styles.css @@ -0,0 +1,216 @@ +/* global */ + +:root { + --pkb-primary-green: #219197; + --pkb-secondary-green: #94c95e; + --pkb-black: #2D2E2F; + --pkb-disabled-grey: #dddddd; +} + +html, body{ + margin: 0; + padding: 0; + font-family: 'Open Sans', sans-serif; + font-size: 14px; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +*{ + box-sizing: border-box; +} + +/* body */ +.pbk-wrapper{ + .pkb-body { + padding: 40px; + min-width: 880px; + max-width: 1400px; + } + + .box { + background: #fafafa; + border: 1px solid #ddd; + padding: 20px; + border-radius: 10px; + margin: 0 0 10px 0; + position: relative; + display: flex; + gap: 10px; + } + + /* elements */ + + h1{ + font-size: 34px; + line-height: 42px; + letter-spacing: -1.5px; + margin: 0; + } + h2{ + font-size: 28px; + line-height: 36px; + letter-spacing: -.8px; + margin: 0; + } + h3{ + font-size: 24px; + line-height: 32px; + letter-spacing: -.6px; + margin: 0; + } + h4{ + font-size: 20px; + line-height: 28px; + letter-spacing: -.4px; + margin: 0; + } + h1, h2, h3, h4{ + color: var(--pkb-black); + position: relative; + } + + .bold{ + font-weight: 600; + } + .small{ + font-size: 12px; + } + + a, + a:visited{ + color: var(--pkb-primary-green); + text-decoration: none; + font-weight: 600; + width: fit-content; + } + a:hover{ + color: var(--pkb-secondary-green); + } + + button{ + border: 1px solid var(--pkb-secondary-green); + background: white; + width: fit-content; + padding: 5px 10px; + border-radius: 10px; + font-family: 'Open Sans'; + cursor: pointer; + } + button:not(:disabled):hover{ + background: var(--pkb-secondary-green); + color:white; + } + button.alt1{ + background: var(--pkb-secondary-green); + } + button.alt1:not(:disabled):hover{ + border-color: 1px solid var(--pkb-primary-green); + background: var(--pkb-primary-green); + } + button:disabled{ + border: 1px solid var(--pkb-disabled-green); + background: var(--pkb-disabled-grey); + cursor: default; + } + + select { + padding: 5px 10px; + padding-right: 40px; + font-family: 'Open Sans'; + border: 1px solid var(--pkb-secondary-green); + border-radius: 10px; + appearance: none; + cursor: pointer; + background: url('data:image/svg+xml;utf8,') no-repeat right 10px center; + background-size: 10px; + width: fit-content; + } + select:hover{ + color:white; + background: url('data:image/svg+xml;utf8,') no-repeat right 10px center; + background-color: var(--pkb-secondary-green); + background-size: 10px; + border: 1px solid var(--pkb-secondary-green); + } + + input[type="checkbox"] { + width: 15px; + height: 15px; + padding: 0; + border: 1px solid var(--pkb-secondary-green); + border-radius: 25%; + appearance: none; + outline: none; + transition: outline 0.1s; + margin: 0; + cursor:pointer; + } + input[type="checkbox"]:checked { + background-size: 60%; + background-repeat: no-repeat; + background-position: center; + background-image: url('data:image/svg+xml;utf8,'); + } + input[type="checkbox"]:not(:disabled):checked { + background-color: var(--pkb-primary-green); + border-color: var(--pkb-primary-green); + } + input[type="checkbox"]:disabled { + background-color: var(--pkb-disabled-grey); + border-color: var(--pkb-disabled-grey); + cursor: default; + } + input[type="checkbox"]:disabled:checked { + background-color: var(--pkb-disabled-grey); + border-color: var(--pkb-disabled-grey); + } + @media (hover: hover) { + input[type="checkbox"]:not(:disabled):hover { + background-color: var(--pkb-secondary-green); + border-color: var(--pkb-secondary-green); + } + } + + input[type="radio"] { + width: 15px; + height: 15px; + padding: 0; + border: 1px solid var(--pkb-secondary-green); + border-radius: 50%; + appearance: none; + outline: none; + transition: outline 0.1s; + margin: 0; + cursor:pointer; + } + input[type="radio"]:checked:after { + content: ''; + display: block; + width: 60%; + aspect-ratio: 1; + background: white; + border-radius: 50%; + margin: 20%; + } + input[type="radio"]:not(:disabled):checked { + background-color: var(--pkb-primary-green); + border-color: var(--pkb-primary-green); + } + input[type="radio"]:disabled { + background-color: var(--pkb-disabled-grey); + border-color: var(--pkb-disabled-grey); + cursor: default; + } + input[type="radio"]:disabled:checked { + background-color: var(--pkb-disabled-grey); + border-color: var(--pkb-disabled-grey); + } + @media (hover: hover) { + input[type="radio"]:not(:disabled):hover { + background-color: var(--pkb-secondary-green); + border-color: var(--pkb-secondary-green); + } + } +} diff --git a/src/portals/PanKbase/components/pkb-footer.vue b/src/portals/PanKbase/components/pkb-footer.vue new file mode 100644 index 000000000..27a401087 --- /dev/null +++ b/src/portals/PanKbase/components/pkb-footer.vue @@ -0,0 +1,41 @@ + + + + \ No newline at end of file diff --git a/src/portals/PanKbase/components/pkb-header.vue b/src/portals/PanKbase/components/pkb-header.vue new file mode 100644 index 000000000..5428a67f6 --- /dev/null +++ b/src/portals/PanKbase/components/pkb-header.vue @@ -0,0 +1,176 @@ + + + + \ No newline at end of file diff --git a/src/portals/PanKbase/views/Index/Template.vue b/src/portals/PanKbase/views/Index/Template.vue new file mode 100644 index 000000000..3584ff6b7 --- /dev/null +++ b/src/portals/PanKbase/views/Index/Template.vue @@ -0,0 +1,18 @@ + + + \ No newline at end of file diff --git a/src/portals/PanKbase/views/Index/main.js b/src/portals/PanKbase/views/Index/main.js new file mode 100644 index 000000000..e481ec53c --- /dev/null +++ b/src/portals/PanKbase/views/Index/main.js @@ -0,0 +1,57 @@ +import Vue from "vue"; +import Template from "./Template.vue"; + +import "../../assets/pkb-styles.css" + +Vue.config.productionTip = false; + +import pbkHeader from "../../components/pkb-header.vue" +import pkbFooter from "../../components/pkb-footer.vue" + +new Vue({ + data: { + }, + + components: { + pbkHeader, + pkbFooter + }, + + created() { + this.injectFavicon('https://hugeampkpncms.org/sites/default/files/users/user32/pankbase/favicon.ico'); + this.injectFont('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); + }, + + render(createElement, context) { + return createElement(Template); + }, + + methods: { + injectFavicon(faviconUrl) { //todo: make util + let favicon = document.querySelector('link[rel="icon"]'); + if (!favicon) { + favicon = document.createElement('link') + favicon.setAttribute('rel', 'icon') + favicon.setAttribute('type', 'image/png') + document.head.appendChild(favicon) + } + favicon.setAttribute('href', faviconUrl); + }, + injectFont(fontUrl){ //todo: make util + const linkTag = document.createElement('link'); + linkTag.rel = 'stylesheet'; + linkTag.href = fontUrl; + document.head.appendChild(linkTag); + linkTag.onload = () => { + }; + } + }, + + computed: { + + }, + + watch: { + + } +}).$mount("#app"); \ No newline at end of file From b84aa89490d3a77adfe83a44c76eed1321ed4cfa Mon Sep 17 00:00:00 2001 From: Alex Shilin Date: Fri, 20 Sep 2024 09:04:01 -0400 Subject: [PATCH 003/132] index config --- configs/vue.config.PanKbase.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/configs/vue.config.PanKbase.js b/configs/vue.config.PanKbase.js index f7ef966c4..78042c154 100644 --- a/configs/vue.config.PanKbase.js +++ b/configs/vue.config.PanKbase.js @@ -7,7 +7,7 @@ let pages = { entry: "src/portals/PanKbase/views/Index/main.js", template: "public/index.html", filename: "index.html", - title: "Home", + title: "PanKbase", chunks: ["chunk-vendors", "chunk-common", "index"], }, page404: { From 9e8e8c1713bacab6b35c6a18e2baac6ef8760031 Mon Sep 17 00:00:00 2001 From: Alex Shilin Date: Fri, 20 Sep 2024 09:26:01 -0400 Subject: [PATCH 004/132] page wrapper --- src/portals/PanKbase/assets/layout.css | 57 +++ src/portals/PanKbase/assets/pkb-styles.css | 379 +++++++++--------- .../PanKbase/components/pkb-header.vue | 2 +- src/portals/PanKbase/views/Index/main.js | 4 +- 4 files changed, 251 insertions(+), 191 deletions(-) create mode 100644 src/portals/PanKbase/assets/layout.css diff --git a/src/portals/PanKbase/assets/layout.css b/src/portals/PanKbase/assets/layout.css new file mode 100644 index 000000000..ea72e5cc5 --- /dev/null +++ b/src/portals/PanKbase/assets/layout.css @@ -0,0 +1,57 @@ +/* LAYOUT STYLES */ +.no-events{ + pointer-events: none; +} +.f-col{ + display: flex; + flex-direction: column; +} +.f-row{ + display: flex; + flex-direction: row; +} +.f-col.align-v-center{ + justify-content: center; +} +.f-row.align-v-center{ + align-items: center; +} +.f-col.align-h-center{ + align-items: center; +} +.f-row.align-h-center{ + justify-content: center; +} +.f-col.align-v-bottom{ + justify-content: flex-end; +} +.f-row.align-v-bottom{ + align-items: flex-end; +} +.f-col.align-h-bottom{ + align-items: flex-end; +} +.f-row.align-h-bottom{ + justify-content: flex-end; +} +.f-col.spread-out, +.f-row.spread-out{ + justify-content: space-between; +} +.fill-height{ + height: stretch; + height: 100%; +} +.fill-width{ + width: stretch; + width: 100%; +} +.hug-height{ + height: fit-content; +} +.hug-width{ + width: fit-content +} +.grow-children>*{ + flex-grow: 1; +} \ No newline at end of file diff --git a/src/portals/PanKbase/assets/pkb-styles.css b/src/portals/PanKbase/assets/pkb-styles.css index a7f20d880..190afae73 100644 --- a/src/portals/PanKbase/assets/pkb-styles.css +++ b/src/portals/PanKbase/assets/pkb-styles.css @@ -10,7 +10,7 @@ html, body{ margin: 0; padding: 0; - font-family: 'Open Sans', sans-serif; + font-family: 'Open Sans', sans-serif !important; font-size: 14px; min-height: 100vh; display: flex; @@ -22,195 +22,196 @@ html, body{ } /* body */ -.pbk-wrapper{ - .pkb-body { - padding: 40px; - min-width: 880px; - max-width: 1400px; - } - - .box { - background: #fafafa; - border: 1px solid #ddd; - padding: 20px; - border-radius: 10px; - margin: 0 0 10px 0; - position: relative; - display: flex; - gap: 10px; - } - - /* elements */ - - h1{ - font-size: 34px; - line-height: 42px; - letter-spacing: -1.5px; - margin: 0; - } - h2{ - font-size: 28px; - line-height: 36px; - letter-spacing: -.8px; - margin: 0; - } - h3{ - font-size: 24px; - line-height: 32px; - letter-spacing: -.6px; - margin: 0; - } - h4{ - font-size: 20px; - line-height: 28px; - letter-spacing: -.4px; - margin: 0; - } - h1, h2, h3, h4{ - color: var(--pkb-black); - position: relative; - } - - .bold{ - font-weight: 600; - } - .small{ - font-size: 12px; - } - - a, - a:visited{ - color: var(--pkb-primary-green); - text-decoration: none; - font-weight: 600; - width: fit-content; - } - a:hover{ - color: var(--pkb-secondary-green); - } - - button{ - border: 1px solid var(--pkb-secondary-green); - background: white; - width: fit-content; - padding: 5px 10px; - border-radius: 10px; - font-family: 'Open Sans'; - cursor: pointer; - } - button:not(:disabled):hover{ - background: var(--pkb-secondary-green); - color:white; - } - button.alt1{ - background: var(--pkb-secondary-green); - } - button.alt1:not(:disabled):hover{ - border-color: 1px solid var(--pkb-primary-green); - background: var(--pkb-primary-green); - } - button:disabled{ - border: 1px solid var(--pkb-disabled-green); - background: var(--pkb-disabled-grey); - cursor: default; - } - - select { - padding: 5px 10px; - padding-right: 40px; - font-family: 'Open Sans'; - border: 1px solid var(--pkb-secondary-green); - border-radius: 10px; - appearance: none; - cursor: pointer; - background: url('data:image/svg+xml;utf8,') no-repeat right 10px center; - background-size: 10px; - width: fit-content; - } - select:hover{ - color:white; - background: url('data:image/svg+xml;utf8,') no-repeat right 10px center; +.pkb-wrapper{ + flex: 1; +} +.pkb-body { + padding: 40px; + min-width: 880px; + max-width: 1400px; +} + +.box { + background: #fafafa; + border: 1px solid #ddd; + padding: 20px; + border-radius: 10px; + margin: 0 0 10px 0; + position: relative; + display: flex; + gap: 10px; +} + +/* elements */ + +h1{ + font-size: 34px; + line-height: 42px; + letter-spacing: -1.5px; + margin: 0; +} +h2{ + font-size: 28px; + line-height: 36px; + letter-spacing: -.8px; + margin: 0; +} +h3{ + font-size: 24px; + line-height: 32px; + letter-spacing: -.6px; + margin: 0; +} +h4{ + font-size: 20px; + line-height: 28px; + letter-spacing: -.4px; + margin: 0; +} +h1, h2, h3, h4{ + color: var(--pkb-black); + position: relative; +} + +.bold{ + font-weight: 600; +} +.small{ + font-size: 12px; +} + +a, +a:visited{ + color: var(--pkb-primary-green) !important; + text-decoration: none; + font-weight: 600; + width: fit-content; +} +a:hover{ + color: var(--pkb-secondary-green) !important; +} + +button{ + border: 1px solid var(--pkb-secondary-green); + background: white; + width: fit-content; + padding: 5px 10px; + border-radius: 10px; + font-family: 'Open Sans'; + cursor: pointer; +} +button:not(:disabled):hover{ + background: var(--pkb-secondary-green); + color:white; +} +button.alt1{ + background: var(--pkb-secondary-green); +} +button.alt1:not(:disabled):hover{ + border-color: 1px solid var(--pkb-primary-green); + background: var(--pkb-primary-green); +} +button:disabled{ + border: 1px solid var(--pkb-disabled-green); + background: var(--pkb-disabled-grey); + cursor: default; +} + +select { + padding: 5px 10px; + padding-right: 40px; + font-family: 'Open Sans'; + border: 1px solid var(--pkb-secondary-green); + border-radius: 10px; + appearance: none; + cursor: pointer; + background: url('data:image/svg+xml;utf8,') no-repeat right 10px center; + background-size: 10px; + width: fit-content; +} +select:hover{ + color:white; + background: url('data:image/svg+xml;utf8,') no-repeat right 10px center; + background-color: var(--pkb-secondary-green); + background-size: 10px; + border: 1px solid var(--pkb-secondary-green); +} + +input[type="checkbox"] { + width: 15px; + height: 15px; + padding: 0; + border: 1px solid var(--pkb-secondary-green); + border-radius: 25%; + appearance: none; + outline: none; + transition: outline 0.1s; + margin: 0; + cursor:pointer; +} +input[type="checkbox"]:checked { + background-size: 60%; + background-repeat: no-repeat; + background-position: center; + background-image: url('data:image/svg+xml;utf8,'); +} +input[type="checkbox"]:not(:disabled):checked { + background-color: var(--pkb-primary-green); + border-color: var(--pkb-primary-green); +} +input[type="checkbox"]:disabled { + background-color: var(--pkb-disabled-grey); + border-color: var(--pkb-disabled-grey); + cursor: default; +} +input[type="checkbox"]:disabled:checked { + background-color: var(--pkb-disabled-grey); + border-color: var(--pkb-disabled-grey); +} +@media (hover: hover) { + input[type="checkbox"]:not(:disabled):hover { background-color: var(--pkb-secondary-green); - background-size: 10px; - border: 1px solid var(--pkb-secondary-green); - } - - input[type="checkbox"] { - width: 15px; - height: 15px; - padding: 0; - border: 1px solid var(--pkb-secondary-green); - border-radius: 25%; - appearance: none; - outline: none; - transition: outline 0.1s; - margin: 0; - cursor:pointer; - } - input[type="checkbox"]:checked { - background-size: 60%; - background-repeat: no-repeat; - background-position: center; - background-image: url('data:image/svg+xml;utf8,'); + border-color: var(--pkb-secondary-green); } - input[type="checkbox"]:not(:disabled):checked { - background-color: var(--pkb-primary-green); - border-color: var(--pkb-primary-green); - } - input[type="checkbox"]:disabled { - background-color: var(--pkb-disabled-grey); - border-color: var(--pkb-disabled-grey); - cursor: default; - } - input[type="checkbox"]:disabled:checked { - background-color: var(--pkb-disabled-grey); - border-color: var(--pkb-disabled-grey); - } - @media (hover: hover) { - input[type="checkbox"]:not(:disabled):hover { - background-color: var(--pkb-secondary-green); - border-color: var(--pkb-secondary-green); - } - } - - input[type="radio"] { - width: 15px; - height: 15px; - padding: 0; - border: 1px solid var(--pkb-secondary-green); - border-radius: 50%; - appearance: none; - outline: none; - transition: outline 0.1s; - margin: 0; - cursor:pointer; - } - input[type="radio"]:checked:after { - content: ''; - display: block; - width: 60%; - aspect-ratio: 1; - background: white; - border-radius: 50%; - margin: 20%; - } - input[type="radio"]:not(:disabled):checked { - background-color: var(--pkb-primary-green); - border-color: var(--pkb-primary-green); - } - input[type="radio"]:disabled { - background-color: var(--pkb-disabled-grey); - border-color: var(--pkb-disabled-grey); - cursor: default; - } - input[type="radio"]:disabled:checked { - background-color: var(--pkb-disabled-grey); - border-color: var(--pkb-disabled-grey); - } - @media (hover: hover) { - input[type="radio"]:not(:disabled):hover { - background-color: var(--pkb-secondary-green); - border-color: var(--pkb-secondary-green); - } +} + +input[type="radio"] { + width: 15px; + height: 15px; + padding: 0; + border: 1px solid var(--pkb-secondary-green); + border-radius: 50%; + appearance: none; + outline: none; + transition: outline 0.1s; + margin: 0; + cursor:pointer; +} +input[type="radio"]:checked:after { + content: ''; + display: block; + width: 60%; + aspect-ratio: 1; + background: white; + border-radius: 50%; + margin: 20%; +} +input[type="radio"]:not(:disabled):checked { + background-color: var(--pkb-primary-green); + border-color: var(--pkb-primary-green); +} +input[type="radio"]:disabled { + background-color: var(--pkb-disabled-grey); + border-color: var(--pkb-disabled-grey); + cursor: default; +} +input[type="radio"]:disabled:checked { + background-color: var(--pkb-disabled-grey); + border-color: var(--pkb-disabled-grey); +} +@media (hover: hover) { + input[type="radio"]:not(:disabled):hover { + background-color: var(--pkb-secondary-green); + border-color: var(--pkb-secondary-green); } } diff --git a/src/portals/PanKbase/components/pkb-header.vue b/src/portals/PanKbase/components/pkb-header.vue index 5428a67f6..1b2e85cbd 100644 --- a/src/portals/PanKbase/components/pkb-header.vue +++ b/src/portals/PanKbase/components/pkb-header.vue @@ -48,7 +48,7 @@ + \ No newline at end of file diff --git a/src/portals/PanKbase/views/Index/Template.vue b/src/portals/PanKbase/views/Index/Template.vue index 3584ff6b7..79bfefaca 100644 --- a/src/portals/PanKbase/views/Index/Template.vue +++ b/src/portals/PanKbase/views/Index/Template.vue @@ -1,12 +1,11 @@ \ No newline at end of file diff --git a/src/portals/PanKbase/views/Index/main.js b/src/portals/PanKbase/views/Index/main.js index 673ac8952..15b517727 100644 --- a/src/portals/PanKbase/views/Index/main.js +++ b/src/portals/PanKbase/views/Index/main.js @@ -6,7 +6,8 @@ import "../../assets/pkb-styles.css" Vue.config.productionTip = false; -import pbkHeader from "../../components/pkb-header.vue" +import pkbHeader from "../../components/pkb-header.vue" +import pkbHero from "../../components/pkb-hero.vue" import pkbFooter from "../../components/pkb-footer.vue" new Vue({ @@ -14,7 +15,8 @@ new Vue({ }, components: { - pbkHeader, + pkbHeader, + pkbHero, pkbFooter }, From 2afc229726e51e9fb20188d52845d2b462365c80 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 6 Dec 2024 16:22:10 -0500 Subject: [PATCH 007/132] building mouse structure --- src/views/{ => Mouse}/MouseDiffExp/Template.vue | 0 src/views/{ => Mouse}/MouseDiffExp/main.js | 0 src/views/{ => Mouse}/MouseDiffExp/store.js | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename src/views/{ => Mouse}/MouseDiffExp/Template.vue (100%) rename src/views/{ => Mouse}/MouseDiffExp/main.js (100%) rename src/views/{ => Mouse}/MouseDiffExp/store.js (100%) diff --git a/src/views/MouseDiffExp/Template.vue b/src/views/Mouse/MouseDiffExp/Template.vue similarity index 100% rename from src/views/MouseDiffExp/Template.vue rename to src/views/Mouse/MouseDiffExp/Template.vue diff --git a/src/views/MouseDiffExp/main.js b/src/views/Mouse/MouseDiffExp/main.js similarity index 100% rename from src/views/MouseDiffExp/main.js rename to src/views/Mouse/MouseDiffExp/main.js diff --git a/src/views/MouseDiffExp/store.js b/src/views/Mouse/MouseDiffExp/store.js similarity index 100% rename from src/views/MouseDiffExp/store.js rename to src/views/Mouse/MouseDiffExp/store.js From c01143e23fe990c966c1df8f826b511ace9d01fa Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 6 Dec 2024 16:27:52 -0500 Subject: [PATCH 008/132] continuing to build mouse portal pages --- src/views/Mouse/Gene/Template.vue | 945 ++++++++++++++++++++++++++++ src/views/Mouse/Gene/main.js | 731 +++++++++++++++++++++ src/views/Mouse/Gene/store.js | 197 ++++++ src/views/Mouse/Index/Template.vue | 220 +++++++ src/views/Mouse/Index/main.js | 419 ++++++++++++ src/views/Mouse/Index/store.js | 101 +++ src/views/Mouse/Tissue/Template.vue | 350 +++++++++++ src/views/Mouse/Tissue/main.js | 183 ++++++ src/views/Mouse/Tissue/store.js | 123 ++++ vue.config.js | 25 +- 10 files changed, 3292 insertions(+), 2 deletions(-) create mode 100644 src/views/Mouse/Gene/Template.vue create mode 100644 src/views/Mouse/Gene/main.js create mode 100644 src/views/Mouse/Gene/store.js create mode 100644 src/views/Mouse/Index/Template.vue create mode 100644 src/views/Mouse/Index/main.js create mode 100644 src/views/Mouse/Index/store.js create mode 100644 src/views/Mouse/Tissue/Template.vue create mode 100644 src/views/Mouse/Tissue/main.js create mode 100644 src/views/Mouse/Tissue/store.js diff --git a/src/views/Mouse/Gene/Template.vue b/src/views/Mouse/Gene/Template.vue new file mode 100644 index 000000000..f04ec4383 --- /dev/null +++ b/src/views/Mouse/Gene/Template.vue @@ -0,0 +1,945 @@ + + + diff --git a/src/views/Mouse/Gene/main.js b/src/views/Mouse/Gene/main.js new file mode 100644 index 000000000..03e692c09 --- /dev/null +++ b/src/views/Mouse/Gene/main.js @@ -0,0 +1,731 @@ +import Vue from "vue"; +import Template from "./Template.vue"; +import store from "./store.js"; +import _ from "lodash"; + +import UniprotReferencesTable from "@/components/UniprotReferencesTable.vue"; +import GeneAssociationsTable from "@/components/GeneAssociationsTable"; +import GeneAssociationsMasks from "@/components/GeneAssociationsMasks"; +import UnauthorizedMessage from "@/components/UnauthorizedMessage"; +import Documentation from "@/components/Documentation.vue"; +import TooltipDocumentation from "@/components/TooltipDocumentation.vue"; +import Autocomplete from "@/components/Autocomplete.vue"; +import GeneSelectPicker from "@/components/GeneSelectPicker.vue"; +import AncestrySelectPicker from "@/components/AncestrySelectPicker"; +import TranscriptSelectPicker from "@/components/TranscriptSelectPicker"; +import VariantSearch from "@/components/VariantSearch.vue"; +import LocusZoom from "@/components/lz/LocusZoom"; +import LocusZoomPhewasPanel from "@/components/lz/panels/LocusZoomPhewasPanel"; +import ResearchPheWAS from "@/components/researchPortal/ResearchPheWAS.vue"; +import HugeScoresTable from "@/components/HugeScoresTable.vue"; +import ResearchExpressionDisplay from "@/components/researchPortal/ResearchExpressionDisplay.vue"; +import ResearchDataTable from "@/components/researchPortal/ResearchDataTable.vue"; +import EffectorGenesSectionOnGene from "@/components/EffectorGenesSectionOnGene.vue"; +import MouseSummaryTable from "@/components/MouseSummaryTable.vue"; +import ColocusTable from "@/components/ColocusTable.vue"; +import CriterionFunctionGroup from "@/components/criterion/group/CriterionFunctionGroup.vue"; +import FilterPValue from "@/components/criterion/FilterPValue.vue"; +import FilterEnumeration from "@/components/criterion/FilterEnumeration.vue"; +import FilterGreaterThan from "@/components/criterion/FilterGreaterThan.vue"; +import ColorBarPlot from "@/components/ColorBarPlot.vue"; +import SearchHeaderWrapper from "@/components/SearchHeaderWrapper.vue"; +import ResearchSingleSearch from "@/components/researchPortal/ResearchSingleSearch.vue"; +import GenePageCombinedEvidenceTable from "@/components/GenePageCombinedEvidenceTable.vue"; + +import NCATSPredicateTable from "@/components/NCATS/old/PredicateTable.vue"; +import ResultsDashboard from "@/components/NCATS/ResultsDashboard.vue"; + +import sessionUtils from "@/utils/sessionUtils"; +import HugeCalScoreSection from "@/components/HugeCalScoreSection.vue"; + +import Counter from "@/utils/idCounter"; +import regionUtils from "@/utils/regionUtils"; + +import uiUtils from "@/utils/uiUtils"; +import plotUtils from "@/utils/plotUtils"; +import sortUtils from "@/utils/sortUtils"; +import alertUtils from "@/utils/alertUtils"; +import Formatters from "@/utils/formatters"; +import dataConvert from "@/utils/dataConvert"; +import keyParams from "@/utils/keyParams"; +import { pageMixin } from "@/mixins/pageMixin.js"; + +Vue.config.productionTip = false; + +new Vue({ + store, + modules: {}, + components: { + UniprotReferencesTable, + GeneAssociationsTable, + GeneAssociationsMasks, + Documentation, + TooltipDocumentation, + Autocomplete, + GeneSelectPicker, + AncestrySelectPicker, + TranscriptSelectPicker, + UnauthorizedMessage, + CriterionFunctionGroup, + FilterPValue, + FilterEnumeration, + FilterGreaterThan, + LocusZoom, + LocusZoomPhewasPanel, + ResearchPheWAS, + ResearchExpressionDisplay, + ResearchDataTable, + SearchHeaderWrapper, + ResultsDashboard, + NCATSPredicateTable, + VariantSearch, + ColorBarPlot, + GenePageCombinedEvidenceTable, + HugeCalScoreSection, + HugeScoresTable, + EffectorGenesSectionOnGene, + ResearchSingleSearch, + MouseSummaryTable, + ColocusTable, + }, + mixins: [pageMixin], + + data() { + return { + counter: 0, + genePageSearchCriterion: [], + phenotypeFilterList: [], + activeTab: "hugeScorePheWASPlot", + externalResources: { + ensembl: { + title: "Ensembl", + link: "https://useast.ensembl.org/Homo_sapiens/Gene/Summary?db=core;g=", + }, + hgnc: { + title: "HUGO Gene Nomenclature Committee", + link: "https://www.genenames.org/data/gene-symbol-report/#!/hgnc_id/", + }, + mgd: { + title: "Mouse Genome Database", + link: "http://www.informatics.jax.org/marker/", + }, + rgd: { + title: "Rat Genome Database", + link: "https://rgd.mcw.edu/rgdweb/report/gene/main.html?id=", + }, + ucsc: { + title: "USSC Genome Browser", + link: "http://genome.ucsc.edu/cgi-bin/hgGene?db=hg19&hgg_gene=", + }, + uniprot: { + title: "Universal Protein Resource", + link: "https://www.uniprot.org/uniprot/", + }, + }, + noTranscriptDataPortal: ["sleep", "lung", "ndkp", "autoimmune"], + plotColors: [ + "#007bff", + "#048845", + "#8490C8", + "#BF61A5", + "#EE3124", + "#FCD700", + "#5555FF", + "#7aaa1c", + "#9F78AC", + "#F88084", + "#F5A4C7", + "#CEE6C1", + "#cccc00", + "#6FC7B6", + "#D5A768", + "#d4d4d4", + ], + phewasPlotMargin: { + leftMargin: 150, + rightMargin: 40, + topMargin: 20, + bottomMargin: 100, + bump: 11, + }, + hugeScoreRenderConfig: { + type: "phewas plot", + "render by": "phenotype", + "group by": "group", + "phenotype map": "kp phenotype map", + "y axis field": "renderScore", + "convert y -log10": "false", + "y axis label": "Log(HuGE score)", + "x axis label": "", + "beta field": "null", + "hover content": ["bf_common", "bf_rare", "huge"], + thresholds: [Math.log(3), Math.log(30)], + "label in black": "greater than", + height: "600", + "plot margin": { + left: 150, + right: 150, + top: 250, + bottom: 300, + }, + }, + commonVariantRenderConfig: { + type: "phewas plot", + "render by": "phenotype", + "group by": "phenotype group", + "phenotype map": "kp phenotype map", + "y axis field": "pValue", + "convert y -log10": "true", + "y axis label": "-Log10(p-value)", + "x axis label": "beta", + "beta field": "null", + "hover content": ["pValue"], + thresholds: ["2.5e-6"], + height: "600", + "plot margin": { + left: 150, + right: 150, + top: 250, + bottom: 300, + }, + }, + rareVariantRenderConfig: { + type: "phewas plot", + "group by": "phenotype group", + "render by": "phenotype", + "phenotype map": "kp phenotype map", + "y axis field": "pValue", + "convert y -log10": "true", + "y axis label": "-Log10(p-value)", + "x axis label": "beta", + "beta field": "beta", + "hover content": ["pValue", "beta"], + thresholds: ["2.5e-6", "0.05"], + height: "600", + "plot margin": { + left: 150, + right: 150, + top: 250, + bottom: 300, + }, + }, + }; + }, + + computed: { + utilsBox() { + let utils = { + Formatters: Formatters, + uiUtils: uiUtils, + alertUtils: alertUtils, + keyParams: keyParams, + dataConvert: dataConvert, + sortUtils: sortUtils, + plotUtils: plotUtils, + regionUtils: regionUtils, + }; + return utils; + }, + /// for disease systems + diseaseInSession() { + if (this.$store.state.diseaseInSession == null) { + return ""; + } else { + return this.$store.state.diseaseInSession; + } + }, + phenotypesInSession() { + if (this.$store.state.phenotypesInSession == null) { + return this.$store.state.bioPortal.phenotypes; + } else { + return this.$store.state.phenotypesInSession; + } + }, + rawPhenotypes() { + return this.$store.state.bioPortal.phenotypes; + }, + /// + phenotypeOptions() { + return this.phenotypesInSession + .filter((x) => x.name != this.$store.state.phenotype) + .map((phenotype) => phenotype.name); + }, + + transcriptOr52k() { + let endpoint = !this.$store.state.selectedTranscript + ? this.$store.state.associations52k + : this.$store.state.transcriptAssoc; + this.$store.state.restricted = endpoint.restricted; + + if (!!this.diseaseInSession && this.diseaseInSession != "") { + endpoint.data = sessionUtils.getInSession( + endpoint.data, + this.phenotypesInSession, + "phenotype" + ); + } + + let assocMap = {}; + + for (let i in endpoint.data) { + const assoc = endpoint.data[i]; + + // skip associations not part of the disease group + if (!this.phenotypeMap[assoc.phenotype]) { + continue; + } + + const curAssoc = assocMap[assoc.phenotype]; + if (!curAssoc || assoc.pValue < curAssoc.pValue) { + assocMap[assoc.phenotype] = assoc; + } + } + + endpoint.data.sort( + (a, b) => + this.pValueFormatter(a.pValue) - + this.pValueFormatter(b.pValue) + ); + + return endpoint.data; + }, + + geneassociations() { + let data = this.$store.state.geneassociations.data; + + if (!!this.diseaseInSession && this.diseaseInSession != "") { + data = sessionUtils.getInSession( + data, + this.phenotypesInSession, + "phenotype" + ); + } + + let assocMap = {}; + + for (let i in data) { + const assoc = data[i]; + + // skip associations not part of the disease group + if (!this.phenotypeMap[assoc.phenotype]) { + continue; + } + + const curAssoc = assocMap[assoc.phenotype]; + if (!curAssoc || assoc.pValue < curAssoc.pValue) { + assocMap[assoc.phenotype] = assoc; + } + } + + // convert to an array, sorted by p-value + let x = Object.values(assocMap).sort((a, b) => a.pValue - b.pValue); + return x; + }, + //filter associations that only exist in the phenotypeMap + filteredAssociations() { + return ( + this.geneassociations.filter((row) => { + return this.phenotypeMap[row.phenotype]; + }) || [] + ); + }, + hugeScores() { + let data = sortUtils.sortArrOfObjects( + this.$store.state.hugeScores.data, + "huge", + "number", + "desc" + ); + + if (!!this.diseaseInSession && this.diseaseInSession != "") { + data = sessionUtils.getInSession( + data, + this.phenotypesInSession, + "phenotype" + ); + } + + let hugeMap = {}; + + for (let i in data) { + const score = data[i]; + let phenotypeEntity = + this.$store.state.bioPortal.phenotypeMap[score.phenotype]; + score["group"] = phenotypeEntity + ? phenotypeEntity.group + : "No group info"; + score["renderScore"] = Math.log(data[i].huge); + + // skip associations not part of the disease group + if (!this.phenotypeMap[score.phenotype]) { + continue; + } + + hugeMap[score.phenotype] = score; + } + + // convert to an array, sorted by p-value + let x = Object.values(hugeMap); + return x; + }, + + associations52k() { + let data = this.$store.state.associations52k.data; + + if (!!this.diseaseInSession && this.diseaseInSession != "") { + data = sessionUtils.getInSession( + data, + this.phenotypesInSession, + "phenotype" + ); + } + + let assocMap = {}; + + for (let i in data) { + const assoc = data[i]; + + // skip associations not part of the disease group + if (!this.phenotypeMap[assoc.phenotype]) { + continue; + } + + const curAssoc = assocMap[assoc.phenotype]; + if (!curAssoc || assoc.pValue < curAssoc.pValue) { + assocMap[assoc.phenotype] = assoc; + } + } + + // convert to an array, sorted by p-value + let x = Object.values(assocMap).sort((a, b) => a.pValue - b.pValue); + return x; + }, + geneExpression() { + let data = this.$store.state.geneExpression.data; + return data; + }, + + /*smallestpValuePhenotype() { + // let data = this.$store.state.varassociations.data; + // let x = data.sort( + // (a, b) => a.pValue - b.pValue + // ); + + return "T2D"; + },*/ + selectedPhenotypes() { + let phenotypeMap = this.$store.state.bioPortal.phenotypeMap; + if (Object.keys(phenotypeMap).length === 0) { + return []; + } + + return this.genePageSearchCriterion + .filter((criterion) => criterion.field === "phenotype") + .map((criterion) => phenotypeMap[criterion.threshold]); + }, + + selectedPhenotype() { + if (this.selectedPhenotypes.length > 0) { + return this.selectedPhenotypes[0].name; + } else return "T2D"; + }, + + queries() { + return [ + this.biolinkQueryGraph("NCBIGENE:1017", { + subject: "biolink:Gene", + predicate: "biolink:enables", + object: "biolink:MolecularActivity", + }), + ]; + }, + + region() { + return this.$store.getters.region; + }, + + symbolName() { + return this.$store.getters.canonicalSymbol; + }, + geneSymbol() { + return this.$store.getters.geneSymbol; + }, + + aliasNames() { + return this.$store.state.genes.data.filter( + (g) => g.source === "alias" + ); + }, + + alternateNames() { + let geneData = this.$store.state.gene.data; + return this.$store.state.genes.data + .filter((g) => g.start == geneData[0].start) + .filter((g) => g.end == geneData[0].end) + .filter((g) => g.source !== "symbol") + .sort((a, b) => { + if (a.source < b.source) return -1; + if (a.source > b.source) return 1; + return 0; + }); + }, + + dbReference() { + return this.$store.getters["uniprot/dbReference"] || []; + }, + + accession() { + return this.$store.getters["uniprot/accession"] || []; + }, + + geneFunction() { + return this.$store.getters["uniprot/geneFunction"] || ""; + }, + + geneNames() { + return this.$store.getters["uniprot/geneNames"] || []; + }, + + gene() { + let data = this.$store.state.gene.data; + if (data.length > 0) { + return data[0]; + } + return {}; + }, + + regionText() { + let r = this.region; + + if (r) { + return `${r.chromosome}:${Formatters.intFormatter( + r.start + )}-${Formatters.intFormatter(r.end)}`; + } else { + return ""; + } + }, + + regionTextExpanded() { + let r = this.region; + + if (r) { + return `${r.chromosome}:${Formatters.intFormatter( + r.start - 50000 + )}-${Formatters.intFormatter(r.end + 50000)}`; + } else { + return ""; + } + }, + + associationPhenotypes() { + return this.$store.state.geneassociations.data.map( + (a) => a.phenotype + ); + }, + + docDetails() { + let symbol = this.geneSymbol; + let r = this.region; + + if (!!symbol && !!r) { + return { + gene: symbol, + region: `${r.chromosome}:${Formatters.intFormatter( + r.start + )}-${Formatters.intFormatter(r.end)}`, + }; + } + return {}; + }, + + phenotypeMap() { + return this.$store.state.bioPortal.phenotypeMap; + }, + }, + + watch: { + geneassociations(newData, oldData) { + let topPhenotype = "LDL"; + if (newData.length > 0) { + topPhenotype = newData[0].phenotype; + if (this.genePageSearchCriterion[0] != topPhenotype) { + this.genePageSearchCriterion = []; + } + this.pushCriterionPhenotype(topPhenotype); + + this.$store.dispatch("getVarAssociationsData", topPhenotype); + } + }, + geneExpressionTable() { + console.log(this.geneExpressionTable); + }, + + selectedPhenotypes(phenotypes, oldPhenotypes) { + const removedPhenotypes = _.difference( + oldPhenotypes.map((p) => p.name), + phenotypes.map((p) => p.name) + ); + this.$store.dispatch("get52KAssociationData"); + if (removedPhenotypes.length > 0) { + this.$store.dispatch( + "getVarAssociationsData", + phenotypes[0].name + ); + } + }, + + diseaseGroup(group) { + this.$store.dispatch("kp4cd/getFrontContents", group.name); + }, + + // the region for the gene was found + region(region) { + if (region) { + //uiUtils.hideElement("pageSearchHeaderContent"); + this.$store.dispatch("queryGeneRegion", region); + } + }, + + // the canonical symbol was found + symbolName(symbol) { + this.$store.dispatch("queryUniprot", symbol); + this.$store.dispatch("queryAssociations"); + this.$store.dispatch("getHugeScoresData"); + this.$store.dispatch("getMouseData"); + }, + "$store.state.selectedAncestry"(newAncestry) { + let geneQuery = !newAncestry + ? { q: this.$store.state.geneName } + : { q: `${this.$store.state.geneName},${newAncestry}` }; + this.$store.dispatch("geneassociations/query", geneQuery); + }, + "$store.state.selectedTranscript"(newTranscript) { + if (newTranscript) { + this.$store.dispatch("transcriptAssoc/query", { + q: newTranscript, + }); + } + }, + "$store.state.geneName"(NAME) { + this.$store.dispatch("getHugeScoresData"); + }, + }, + + created() { + /// disease systems + this.$store.dispatch("bioPortal/getDiseaseSystems"); + //// + this.$store.dispatch("queryGeneName", this.$store.state.geneName); + // this.$store.dispatch("queryAliasName", this.$store.state.aliasName) + //this.$store.dispatch("queryAssociations"); + // get the disease group and set of phenotypes available + this.$store.dispatch("bioPortal/getDiseaseGroups"); + this.$store.dispatch("bioPortal/getPhenotypes"); + this.$store.dispatch("bioPortal/getDatasets"); + this.pushCriterionPhenotype("T2D"); + this.checkGeneName(this.$store.state.geneName); + }, + + methods: { + ...uiUtils, + ...sessionUtils, + ancestryFormatter: Formatters.ancestryFormatter, + pValueFormatter: Formatters.pValueFormatter, + + async checkGeneName(KEY) { + let gene = await regionUtils.geneSymbol(KEY); + + if (!!gene && gene != KEY) { + document.getElementById("invalidGeneMessage").innerHTML = + "Your search term is an alias name for gene symbol " + + gene + + ". Please enter a new search term above, or go to the " + + gene + + " Gene page"; + + document + .getElementById("invalidGeneRedirect") + .setAttribute("href", "/gene.html?gene=" + gene); + uiUtils.showElement("invalidGeneWarning"); + //uiUtils.showElement("pageSearchHeaderContent"); + } + }, + + hideGeneWarning() { + uiUtils.hideElement("invalidGeneWarning"); + }, + + pushCriterionPhenotype(phenotypeName) { + this.genePageSearchCriterion.push({ + field: "phenotype", + threshold: phenotypeName, + }); + }, + biolinkQueryGraph(subjectCurie, { subject, predicate, object }) { + const uuid = Counter.getUniqueId; + const sid = uuid("s"); + const oid = uuid("o"); + const eid = uuid("e"); + return { + query_graph: { + nodes: { + [sid]: { + id: subjectCurie, + category: subject, + }, + [oid]: { + category: object, + }, + }, + edges: { + [eid]: { + subject: sid, + object: oid, + predicate: predicate, + }, + }, + }, + }; + }, + + // go to region page + exploreRegion(expanded = 0) { + let r = this.region; + + if (r) { + window.location.href = `./region.html?chr=${ + r.chromosome + }&start=${r.start - expanded}&end=${r.end + expanded}`; + } + }, + + topPhenotype(topAssocData) { + return topAssocData[0]; + }, + renderPhewas(REF) { + this.activeTab = REF; + let refComponent = this.$children[0].$refs[REF]; + setTimeout(function () { + refComponent.renderPheWas(); + }, 500); + }, + filterPhenotype(newFilters) { + this.phenotypeFilterList = newFilters; + }, + clearCriterion(criterion) { + if (criterion === "transcript") { + this.$store.state.selectedTranscript = ""; + return; + } + if (criterion === "ancestry") { + this.$store.state.selectedAncestry = ""; + return; + } + }, + }, + + render(createElement, context) { + return createElement(Template); + }, +}).$mount("#app"); diff --git a/src/views/Mouse/Gene/store.js b/src/views/Mouse/Gene/store.js new file mode 100644 index 000000000..a72a3120c --- /dev/null +++ b/src/views/Mouse/Gene/store.js @@ -0,0 +1,197 @@ +import Vue from "vue"; +import Vuex from "vuex"; + +import bioPortal from "@/modules/bioPortal"; +import bioIndex from "@/modules/bioIndex"; +import kp4cd from "@/modules/kp4cd"; +import keyParams from "@/utils/keyParams"; +import uniprot from "@/modules/uniprot"; +import regionUtils from "@/utils/regionUtils"; + +Vue.use(Vuex); + +export default new Vuex.Store({ + modules: { + bioPortal, + kp4cd, + gene: bioIndex("gene"), + genes: bioIndex("genes"), + geneassociations: bioIndex("gene-associations"), + varassociations: bioIndex("associations"), + ancestryAssoc: bioIndex("ancestry-associations"), + associations52k: bioIndex("gene-associations-52k"), + geneToTranscript: bioIndex("gene-to-transcript"), + transcriptAssoc: bioIndex("transcript-associations"), + hugeScores: bioIndex("huge"), + geneExpression: bioIndex("gene-expression"), + mouseSummary: bioIndex("diff-exp-summary-gene"), + uniprot, + }, + state: { + geneName: keyParams.gene, + geneToQuery: "", + aliasName: null, + prior: 0.3696, + phenotypesInSession: null, + diseaseInSession: null, + phenotypeCorrelation: null, + selectedAncestry: "", + selectedTranscript: "", + commonVariantsLength: 0, + }, + + mutations: { + setGeneName(state, geneName) { + state.geneName = geneName || state.geneName; + keyParams.set({ gene: state.geneName }); + }, + setGene(state, { name, chromosome, start, end }) { + state.geneName = name; + state.geneRegion = `${chromosome}:${start}-${end}`; + }, + setAliasName(state, aliasName) { + state.aliasName = aliasName || state.aliasName; + }, + setPhenotypesInSession(state, PHENOTYPES) { + state.phenotypesInSession = PHENOTYPES; + }, + setDiseaseInSession(state, DISEASE) { + state.diseaseInSession = DISEASE; + }, + setPhenotypeCorrelation(state, Correlation) { + state.phenotypeCorrelation = Correlation; + }, + setCommonVariantsLength(state, NUM) { + state.commonVariantsLength = NUM; + }, + }, + + getters: { + region(state) { + let data = state.gene.data; + + if (data.length > 0) { + let gene = data[0]; + + return { + chromosome: gene.chromosome, + start: gene.start, + end: gene.end, + }; + } + }, + + // canonicalSymbol(state) { + // let data = state.genes.data; + // let geneData = state.gene.data; + + // for (let i in data) { + // if (data[i].source === "symbol") { + // return data[i].name; + // } + // } + // }, + canonicalSymbol(state) { + let data = state.gene.data; + if (data.length > 0) { + return data[0].symbol; + } + return null; + }, + + geneSymbol(state) { + let data = state.genes.data; + let geneData = state.gene.data; + + for (let i in data) { + if ( + data[i].chromosome == geneData[0].chromosome && + data[i].start == geneData[0].start && + data[i].end == geneData[0].end + ) { + if (data[i].source === "symbol") { + return data[i].name; + } + } + } + }, + }, + + actions: { + // For custom phenotypes + phenotypesInSession(context, PHENOTYPES) { + context.commit("setPhenotypesInSession", PHENOTYPES); + }, + diseaseInSession(context, DISEASE) { + context.commit("setDiseaseInSession", DISEASE); + }, + commonVariantsLength(context, NUM) { + context.commit("setCommonVariantsLength", NUM); + }, + + async queryGeneName(context, symbol) { + let name = context.state.geneToQuery || context.state.geneName; + context.commit("setGeneName", name); + + if (!!name) { + context.dispatch("gene/query", { q: name }); + context.dispatch("geneToTranscript/query", { q: name }); + } + }, + /// + + async queryGeneRegion(context, region) { + //To match with HuGE cal +- 300000 to the region + let { chromosome, start, end } = region || context.getters.region; + let q = `${chromosome}:${start - 300000}-${end + 300000}`; + + context.dispatch("genes/query", { q }); + }, + + async queryUniprot(context, symbol) { + let name = symbol || context.getters.canonicalSymbol; + + if (!!symbol) { + context.dispatch("uniprot/getUniprotGeneInfo", name); + } + }, + + async queryAssociations(context) { + let query = { q: context.state.geneName }; + context.dispatch("associations52k/query", query); + context.dispatch("geneassociations/query", query); + context.dispatch("geneExpression/query", query); + }, + async getVarAssociationsData(context, phenotype) { + let gene = context.state.geneName; + let locus = await regionUtils.parseRegion(gene, true, 50000); + + if (locus) { + context.state.newChr = locus.chr; + context.state.newStart = locus.start; + context.state.newEnd = locus.end; + } + + const phenoRegionQuery = `${phenotype},${locus.chr}:${ + locus.start - 50000 + }-${locus.end + 50000}`; + + context.dispatch("varassociations/query", { q: phenoRegionQuery }); + }, + async get52KAssociationData(context) { + let name = context.state.geneName; + context.dispatch("associations52k/query", { q: name }); + }, + async getHugeScoresData(context) { + let name = context.state.geneName; + context.dispatch("hugeScores/query", { q: name }); + }, + async getMouseData(context) { + let name = context.state.geneName; + context.dispatch("mouseSummary/query", { q: name }); + }, + phenotypeCorrelation(context, DATA) { + context.commit("setPhenotypeCorrelation", DATA); + }, + }, +}); diff --git a/src/views/Mouse/Index/Template.vue b/src/views/Mouse/Index/Template.vue new file mode 100644 index 000000000..1660fb3f7 --- /dev/null +++ b/src/views/Mouse/Index/Template.vue @@ -0,0 +1,220 @@ + + diff --git a/src/views/Mouse/Index/main.js b/src/views/Mouse/Index/main.js new file mode 100644 index 000000000..af612e798 --- /dev/null +++ b/src/views/Mouse/Index/main.js @@ -0,0 +1,419 @@ +import Vue from "vue"; +import Template from "./Template.vue"; +import store from "./store.js"; + +import PhenotypeSelectPicker from "@/components/PhenotypeSelectPicker.vue"; +import DatasetSelectPicker from "@/components/DatasetSelectPicker.vue"; +import NewsFeedSection from "@/components/frontPage/NewsFeedSection.vue"; +import DiseaseGroupSelect from "@/components/DiseaseGroupSelect.vue"; +import DiseaseSystems from "@/components/DiseaseSystems.vue"; +import Autocomplete from "@/components/Autocomplete.vue"; +import ResearchSingleSearch from "@/components/researchPortal/ResearchSingleSearch.vue"; +import ResearchPageDescription from "@/components/researchPortal/ResearchPageDescription.vue"; + +import uiUtils from "@/utils/uiUtils"; +import plotUtils from "@/utils/plotUtils"; +import sortUtils from "@/utils/sortUtils"; +import alertUtils from "@/utils/alertUtils"; +import pigeanUtils from "@/utils/pigeanUtils.js"; +import Formatters from "@/utils/formatters"; +import dataConvert from "@/utils/dataConvert"; +import keyParams from "@/utils/keyParams"; +import regionUtils from "@/utils/regionUtils"; +import { BIO_INDEX_HOST } from "@/utils/bioIndexUtils"; +import { pageMixin } from "@/mixins/pageMixin.js"; + +new Vue({ + store, + components: { + PhenotypeSelectPicker, + DatasetSelectPicker, + NewsFeedSection, + DiseaseGroupSelect, + Autocomplete, + ResearchSingleSearch, + ResearchPageDescription, + DiseaseSystems, + }, + mixins: [pageMixin], + + data: { + selected: "", + searches: [ + { id: "gene", name: "gene" }, + { id: "variantOrRegion", name: "variantOrRegion" }, + ], + stats: [], + statsKeys: [ + { icon: "phenotypes", label: "Phenotypes" }, + { icon: "genetic_datasets", label: "Genetic datasets" }, + { icon: "genomic_datasets", label: "Genomic datasets" }, + { icon: "bioinfomatics_methods", label: "Bioinformatic methods" }, + { icon: "curated_datasets", label: "Curated datasets" }, + ], + oldStats: keyParams.oldstats, + config: { + "search instruction": "Search gene, geneset or phenotype", + "search examples": [ + { + parameter: "gene", + value: "PLAU", + }, + { + parameter: "gene", + value: "MLX", + }, + ], + "search parameters": [ + { + parameter: "gene", + "data point": { + type: "api", + url: `${BIO_INDEX_HOST}/api/bio/keys/pigean-gene/3?columns=gene`, + "data type": "json", + "data wrapper": ["keys"], + }, + "target page": { + label: "Search Gene", + url: "/pigean/gene.html?", + }, + }, + { + parameter: "geneset", + "data point": { + type: "api", + url: `${BIO_INDEX_HOST}/api/bio/keys/pigean-gene-set/3?columns=gene_set`, + "data type": "json", + "data wrapper": ["keys"], + }, + "target page": { + label: "Search Geneset", + url: "/pigean/geneset.html?", + }, + }, + // { + // parameter: "phenotype", + // "data point": { + // type: "api", + // url: "https://bioindex-dev.hugeamp.org/api/bio/keys/pigean-gene-set-phenotype/1", + // "data type": "json", + // "data wrapper": ["keys"], + // }, + // "target page": { + // label: "Search Phenotype", + // url: "/pigean/phenotype.html?", + // }, + // }, + { + parameter: "phenotype", + values: "kp phenotypes", + "target page": { + label: "Search Phenotype", + url: "/pigean/phenotype.html?", + }, + }, + ], + }, + }, + + computed: { + utilsBox() { + let utils = { + Formatters: Formatters, + uiUtils: uiUtils, + alertUtils: alertUtils, + keyParams: keyParams, + dataConvert: dataConvert, + sortUtils: sortUtils, + plotUtils: plotUtils, + regionUtils: regionUtils, + }; + return utils; + }, + diseaseGroups() { + return this.$store.state.bioPortal.diseaseGroups; + }, + phenotypes() { + return this.$store.state.bioPortal.phenotypes; + }, + diseaseInSession() { + if (this.$store.state.diseaseInSession == null) { + return ""; + } else { + return this.$store.state.diseaseInSession; + } + }, + phenotypesInSession() { + if (this.$store.state.phenotypesInSession == null) { + return this.$store.state.bioPortal.phenotypes; + } else { + return this.$store.state.phenotypesInSession; + } + }, + matchingGenes() { + return this.$store.state.matchingGenes; + }, + geneOrRegionOrVariant() { + return this.$store.state.geneOrRegionOrVariant; + }, + + datasetsInfo() { + let datasets = this.$store.state.kp4cd.datasetsInfo; + + if (datasets.length === 0) { + return {}; + } + return datasets[0]; + }, + kPortals() { + let portals = this.$store.state.kp4cd.portals; + + if (portals.length === 0) { + return null; + } + return portals; + }, + phenotypesByName() { + if (!this.phenotypes) { + return null; + } + + let content = {}; + + this.phenotypes.map((p) => { + content[p.name] = p; + }); + + return content; + }, + datasetsDescription() { + let datasets = this.$store.state.bioPortal.datasets; + let diseases = this.$store.state.bioPortal.diseaseSystems; + + //first get datasets by phenotype groups + if ( + datasets.length > 0 && + !!this.phenotypesByName && + diseases.length > 0 + ) { + let pGroups = {}; + + this.$store.state.bioPortal.phenotypes.map((p) => { + if (!pGroups[p.group]) { + pGroups[p.group] = { phenotypes: [], datasets: [] }; + } + pGroups[p.group].phenotypes.push(p.name); + }); + + datasets.map((d) => { + d.phenotypes.map((dp) => { + for (const [key, data] of Object.entries(pGroups)) { + if (data.phenotypes.includes(dp)) { + data.datasets.push(d.name); + } + } + }); + }); + + let diseaseSystems = [ + ...new Set(diseases.map((d) => d.system)), + ].sort(); + + let dGroups = {}; + + diseaseSystems.map((ds) => { + dGroups[ds] = { phenotypes: [], datasets: [] }; + }); + + diseases.map((d) => { + if (!dGroups[d.system].phenotypes.includes(d.group)) { + dGroups[d.system].phenotypes.push(d.group); + } + }); + + //then get dataset numbers by disease systems X phenotype groups + + Object.keys(dGroups).map((dg) => { + dGroups[dg].phenotypes.map((p) => { + if (pGroups[p]) { + let tempDatasetsArr = [].concat( + dGroups[dg].datasets, + pGroups[p].datasets + ); + dGroups[dg].datasets = [ + ...new Set(tempDatasetsArr), + ]; + } + }); + }); + + let filteredDGroups = {}; + + Object.keys(dGroups).map((dg) => { + if (dGroups[dg].datasets.length > 0) { + filteredDGroups[dg] = dGroups[dg]; + } + }); + + //then create diagram content by disease groups + + let dataContent = ""; + + let dGroupKeys = Object.keys(filteredDGroups).sort(); + let dcountLength = dGroupKeys.length - 1; + + let kIndex = 0; + + dGroupKeys.map((k) => { + dataContent += + '"' + + k.replaceAll(" system", "").replaceAll(" & ", " / ") + + '":' + + filteredDGroups[k].datasets.length; + dataContent += kIndex < dcountLength ? "," : ""; + + kIndex++; + }); + + let content = + '
{"type":"bar","data": { ' + + dataContent + + ' },"width": 400,"height": 150,"color": "multi","x label angle":65,"label space":100}
'; + + return content; + } else { + return null; + } + }, + phenotypesDescription() { + let phenotypes = this.$store.state.bioPortal.phenotypes; + + if (phenotypes.length > 0) { + ///create phenotypes plot content + + let groupLabel = [ + ...new Set(phenotypes.map((p) => p.group)), + ].sort(); + let group = phenotypes.map((g) => g.group); + let groupCount = {}; + + groupLabel.map((l) => { + let tempCount = group.filter((t) => t == l); + groupCount[l] = tempCount.length; + }); + + let groupContent = ""; + let gCountLength = Object.keys(groupCount).length - 1; + + let gIndex = 0; + Object.keys(groupCount).map((g) => { + groupContent += '"' + g + '":' + groupCount[g]; + + groupContent += gIndex < gCountLength ? "," : ""; + gIndex++; + }); + + let content = + '
{"type":"bar","data": { ' + + groupContent + + ' },"width": 400,"height": 150,"color": "multi","x label angle":65,"label space":175}
'; + + return content; + } else { + return null; + } + }, + + pageDescription() { + if ( + this.phenotypesDescription != null && + this.datasetsDescription != null + ) { + let datasets = this.$store.state.bioPortal.datasets; + let phenotypes = this.$store.state.bioPortal.phenotypes; + + let content = "
Datasets by organ system
"; + content += + "Total: " + datasets.length + " datasets"; + content += this.datasetsDescription; + content += "
Phenotypes by group
"; + content += + "Total: " + phenotypes.length + " phenotypes"; + content += this.phenotypesDescription; + + return content; + } else { + return null; + } + }, + pageStats() { + if (this.diseaseGroup) { + return this.stats.find( + (s) => s["Portal ID"] == this.diseaseGroup.name + ); + } else { + return {}; + } + }, + }, + + watch: { + geneOrRegionOrVariant() { + this.$store.commit("setInvalidGeneOrRegionOrVariant", false); + }, + + diseaseGroup(group) { + this.$store.dispatch("kp4cd/getNewsFeed", group.name); + this.$store.dispatch("kp4cd/getFrontContents", group.name); + // this.$store.dispatch("kp4cd/getDatasetsInfo", group.name); + this.$store.dispatch("kp4cd/getPortals"); + }, + }, + + async created() { + this.$store.dispatch("bioPortal/getDiseaseSystems"); + this.$store.dispatch("bioPortal/getDiseaseGroups"); + this.$store.dispatch("bioPortal/getPhenotypes"); + this.$store.dispatch("bioPortal/getDatasets"); + this.getStats(); + await this.$store.dispatch("getPigeanPhenotypes"); + this.formatAllPhenotypes(); + }, + + methods: { + ...uiUtils, + showHideElement(ID) { + uiUtils.showHideElement(ID); + }, + async getStats() { + let dataPoint = + "https://hugeampkpncms.org/rest/directcsv?id=Portal_stats_501"; + + let contJson = await fetch(dataPoint).then((resp) => resp.json()); + + if (contJson.error == null) { + let data = dataConvert.csv2Json( + contJson[0]["field_data_points"] + ); + this.stats = data; + } + }, + capitalize(str) { + return str.replace(/\b\w/g, function (char) { + return char.toUpperCase(); + }); + }, + formatAllPhenotypes(){ + let newPhenotypes = this.$store.state.pigeanAllPhenotypes.data; + let output = []; + for (let i = 0; i < newPhenotypes.length; i++){ + output.push(pigeanUtils.toOldStyle(newPhenotypes[i])); + } + this.$store.dispatch("phenotypesInSession", output); + } + }, + + render(createElement, context) { + return createElement(Template); + }, +}).$mount("#app"); diff --git a/src/views/Mouse/Index/store.js b/src/views/Mouse/Index/store.js new file mode 100644 index 000000000..4ecd45c0e --- /dev/null +++ b/src/views/Mouse/Index/store.js @@ -0,0 +1,101 @@ +import Vue from "vue"; +import Vuex from "vuex"; + +import bioPortal from "@/modules/bioPortal"; +import bioIndex from "@/modules/bioIndex"; +import kp4cd from "@/modules/kp4cd"; +import regionUtils from "@/utils/regionUtils"; +import variantUtils from "@/utils/variantUtils"; +import { postAlertError } from "@/components/Alert.vue"; +import { match } from "@/utils/bioIndexUtils"; + +Vue.use(Vuex); + +export default new Vuex.Store({ + + modules: { + bioPortal, + kp4cd, + pigeanAllPhenotypes: bioIndex("pigean-phenotypes"), + }, + state: { + geneOrRegionOrVariant: null, + invalidGeneOrRegionOrVariant: false, + userInput: null, + matchingGenes: null, + phenotypesInSession: null, + diseaseInSession: null, + phenotypeCorrelation: null, + }, + mutations: { + setInvalidGeneOrRegionOrVariant(state, flag) { + state.invalidGeneOrRegionOrVariant = flag; + }, + setExample(state, example) { + state.geneOrRegionOrVariant = example; + }, + setMatchingGenes(state, genes) { + state.matchingGenes = genes; + }, + setPhenotypesInSession(state, PHENOTYPES) { + state.phenotypesInSession = PHENOTYPES; + }, + setDiseaseInSession(state, DISEASE) { + state.diseaseInSession = DISEASE; + }, + setPhenotypeCorrelation(state, Correlation) { + state.phenotypeCorrelation = Correlation; + } + }, + + actions: { + phenotypesInSession(context, PHENOTYPES) { + context.commit("setPhenotypesInSession", PHENOTYPES); + }, + diseaseInSession(context, DISEASE) { + context.commit("setDiseaseInSession", DISEASE); + }, + + phenotypeCorrelation(context, DATA) { + context.commit("setPhenotypeCorrelation", DATA); + }, + + async exploreRegionOrVariant(context, input) { + let locus = await regionUtils.parseRegion(input, true, 50000); + let varID = await variantUtils.parseVariant(input); + + if (locus) { + window.location.href = `./region.html?chr=${locus.chr}&start=${locus.start}&end=${locus.end}`; + } + else if (varID) { + window.location.href = `./variant.html?variant=${varID}`; + } else { + postAlertError("Invalid gene, variant, or region"); + } + }, + + async lookupGenes(context, input) { + let matches = await match('gene', input, { limit: 10 }) + context.commit('setMatchingGenes', matches); + }, + + //select gene on autocomplete. + async onGeneChange(context, gene) { + let locus = await regionUtils.parseRegion(gene, true, 50000); + + if (locus) { + window.location.href = `./region.html?chr=${locus.chr}&start=${locus.start}&end=${locus.end}`; + } + }, + + //select gene on autocomplete. + async onDatasetChange(context, dataset) { + window.location.href = "./dinspector.html?dataset=" + dataset.name; + }, + async getPigeanPhenotypes(context) { + await context.dispatch("pigeanAllPhenotypes/query", {q:1}); + }, + + }, + +}); diff --git a/src/views/Mouse/Tissue/Template.vue b/src/views/Mouse/Tissue/Template.vue new file mode 100644 index 000000000..6acc0de34 --- /dev/null +++ b/src/views/Mouse/Tissue/Template.vue @@ -0,0 +1,350 @@ + + + diff --git a/src/views/Mouse/Tissue/main.js b/src/views/Mouse/Tissue/main.js new file mode 100644 index 000000000..5f3f855ee --- /dev/null +++ b/src/views/Mouse/Tissue/main.js @@ -0,0 +1,183 @@ +import Vue from "vue"; +import Template from "./Template.vue"; +import store from "./store.js"; +import TissueHeritabilityTable from "@/components/TissueHeritabilityTable.vue"; +import TissueExpressionTable from "@/components/TissueExpressionTable.vue"; +import CriterionFunctionGroup from "@/components/criterion/group/CriterionFunctionGroup.vue"; +import FilterPValue from "@/components/criterion/FilterPValue.vue"; +import FilterEnumeration from "@/components/criterion/FilterEnumeration.vue"; +import FilterGreaterThan from "@/components/criterion/FilterGreaterThan.vue"; +import FilterLessThan from "@/components/criterion/FilterLessThan.vue"; +import SearchHeaderWrapper from "@/components/SearchHeaderWrapper.vue"; +import TissueSelectPicker from "@/components/TissueSelectPicker.vue"; +import Scatterplot from "@/components/Scatterplot.vue"; +import MouseSummaryTable from "@/components/MouseSummaryTable.vue"; +import C2ctTable from "@/components/C2ctTable.vue"; +import PhenotypeSelectPicker from "@/components/PhenotypeSelectPicker.vue"; +import AncestrySelectPicker from "@/components/AncestrySelectPicker.vue"; + +import uiUtils from "@/utils/uiUtils"; +import plotUtils from "@/utils/plotUtils"; +import sortUtils from "@/utils/sortUtils"; +import alertUtils from "@/utils/alertUtils"; +import Formatters from "@/utils/formatters"; +import dataConvert from "@/utils/dataConvert"; +import keyParams from "@/utils/keyParams"; +import regionUtils from "@/utils/regionUtils"; + +import ResearchSingleSearch from "@/components/researchPortal/ResearchSingleSearch.vue"; +import { pageMixin } from "@/mixins/pageMixin"; +new Vue({ + store, + components: { + TissueHeritabilityTable, + TissueExpressionTable, + CriterionFunctionGroup, + FilterPValue, + FilterEnumeration, + FilterGreaterThan, + FilterLessThan, + SearchHeaderWrapper, + TissueSelectPicker, + ResearchSingleSearch, + Scatterplot, + MouseSummaryTable, + C2ctTable, + PhenotypeSelectPicker, + AncestrySelectPicker, + }, + mixins: [pageMixin], + data() { + return { + tissue: keyParams.tissue || "", + selectTissue: "", + logScale: false, + cs2ctAncestry: "", + plotConfig: { + xField: "H", + xAxisLabel: "Entropy (genericity)", + yField: "meanTpm", + yAxisLabel: "TPM (mean)", + dotKey: "gene", + hoverBoxPosition: "both", + plotHeight: 300, + hoverFields: [ + { + key: "gene", + label: "Gene", + }, + { + key: "H", + label: "Genericity", + formatter: Formatters.pValueFormatter, + }, + { + key: "Q", + label: "Combined score", + formatter: Formatters.tpmFormatter, + }, + { + key: "meanTpm", + label: "TPM (mean)", + formatter: Formatters.tpmFormatter, + }, + { + key: "nSamples", + label: "Samples", + }, + ], + }, + annotation: "", + }; + }, + computed: { + utilsBox() { + let utils = { + Formatters: Formatters, + uiUtils: uiUtils, + alertUtils: alertUtils, + keyParams: keyParams, + dataConvert: dataConvert, + sortUtils: sortUtils, + plotUtils: plotUtils, + regionUtils: regionUtils, + }; + return utils; + }, + rawPhenotypes() { + return this.$store.state.bioPortal.phenotypes; + }, + phenotypesInSession() { + if (this.$store.state.phenotypesInSession == null) { + return this.$store.state.bioPortal.phenotypes; + } else { + return this.$store.state.phenotypesInSession; + } + }, + diseaseSystem() { + return this.$store.getters["bioPortal/diseaseSystem"]; + }, + tissueData() { + return this.$store.getters["tissueData"]; + }, + docDetails() { + return { + tissue: this.tissue + ? this.tissue.toUpperCase().replaceAll("_", " ") + : "", + }; + }, + cs2ctData() { + let data = this.$store.state.cs2ct.data; + data.forEach((d) => { + // Makes biosamples show up alphabetically in the dropdown menu. + d.originalBiosample = d.biosample; + d.biosample = Formatters.tissueFormatter(d.biosample); + }); + return data.filter(d => d.source !== 'bottom-line_analysis_rare'); + }, + }, + created() { + // get the disease group and set of phenotypes available + this.$store.dispatch("bioPortal/getDiseaseGroups"); + this.$store.dispatch("bioPortal/getPhenotypes"); + this.$store.dispatch("bioPortal/getDatasets"); + this.$store.dispatch("bioPortal/getDiseaseSystems"); + if (this.tissue) { + this.$store.dispatch("getTissue"); + } + this.$store.dispatch("getAnnotations"); + this.$store.dispatch("getAncestries"); + }, + methods: { + tissueFormatter: Formatters.tissueFormatter, + ancestryFormatter: Formatters.ancestryFormatter, + phenotypeFormatter: Formatters.phenotypeFormatter, + newTissue(tissue) { + this.selectTissue = tissue; + }, + updateTissueData() { + this.tissue = this.selectTissue; + this.$store.commit("setTissueName", this.tissue); + this.$store.dispatch("getTissue"); + }, + getTopPhenotype(phenotype) { + if (this.$store.state.selectedPhenotype === null){ + this.$store.dispatch("onPhenotypeChange", phenotype); + } + }, + onAnnotationSelected(){ + this.$store.commit("setSelectedAnnotation", this.annotation); + this.$store.dispatch("getCs2ct"); + } + }, + watch: { + "$store.state.annotationOptions"(data) { + this.annotation = data[0]; + }, + "$store.state.selectedAncestry"(){ + this.$store.dispatch("getCs2ct"); + }, + }, + render: (h) => h(Template), +}).$mount("#app"); diff --git a/src/views/Mouse/Tissue/store.js b/src/views/Mouse/Tissue/store.js new file mode 100644 index 000000000..451d1c39e --- /dev/null +++ b/src/views/Mouse/Tissue/store.js @@ -0,0 +1,123 @@ +import Vue from "vue"; +import Vuex from "vuex"; + +import bioPortal from "@/modules/bioPortal"; +import bioIndex from "@/modules/bioIndex"; +import kp4cd from "@/modules/kp4cd"; +import keyParams from "@/utils/keyParams"; +import { BIO_INDEX_HOST } from "@/utils/bioIndexUtils"; +import { query } from "@/utils/bioIndexUtils"; + +Vue.use(Vuex); + +export default new Vuex.Store({ + modules: { + bioPortal, + kp4cd, + tissue: bioIndex("gene-expression-tissue"), + geneExpression: bioIndex("gene-expression"), + geneLinks: bioIndex("gene-links"), + mouseSummary: bioIndex("diff-exp-summary-tissue"), + cs2ct: bioIndex("c2ct-tissue"), + }, + state: { + tissueName: keyParams.tissue || "", + selectedTissue: "", + geneExpressionTissue: [], + selectedAncestry: "", + selectedPhenotype: null, + annotationOptions: [], + selectedAnnotation: "", + }, + + mutations: { + setTissueName(state, tissueName) { + state.tissueName = tissueName || state.tissueName; + keyParams.set({ tissue: state.tissueName }); + }, + setTopPhenotype(state, phenotype) { + state.topPhenotype = phenotype || state.topPhenotype; + if (!state.selectedPhenotype){ + console.log("no phenotype here"); + state.selectedPhenotype = phenotype; + } + }, + setSelectedAnnotation(state, annotation){ + state.selectedAnnotation = annotation || state.selectedAnnotation; + } + }, + actions: { + getTissue(context) { + context.state.tissueName = context.state.selectedTissue || context.state.tissueName; + context.dispatch("tissue/query", { + q: context.state.tissueName.replaceAll(" ", "_"), limit: 1000 + }); + let name = context.state.tissueName; + // TODO FIX BIOINDICES + if (name === 'adipose_tissue'){ + name = 'adipose'; + } + context.dispatch("mouseSummary/query", {q: name}); + }, + async getEvidence(context, { q }) { + //Do we neeed this? + let evidence = await context.dispatch("geneExpression/query", { + q, + }); + return evidence; + }, + onTissueChange(context, tissue){ + tissue = tissue.replaceAll(" ", "_"); + context.state.selectedTissue = tissue; + keyParams.set({ tissue: tissue }); + }, + getCs2ct(context){ + let queryString = `${context.state.selectedAnnotation},${context.state.tissueName}`; + if (!!context.state.selectedAncestry){ + queryString = `${context.state.selectedAncestry},${queryString}`; + } + queryString = `${context.state.selectedPhenotype.name},${queryString}`; + console.log(queryString); + context.dispatch("cs2ct/query", { q : queryString }); + }, + onPhenotypeChange(context, phenotype){ + context.state.selectedPhenotype = phenotype; + // Credible set is based on top phenotype or user selected phenotype, + // whichever is changed most recently. + context.dispatch("getCs2ct"); + }, + async getAnnotations(context) { + let annotations = await fetch(`${BIO_INDEX_HOST}/api/bio/keys/c2ct-tissue/3?columns=annotation`) + .then(resp => resp.json()) + .then(json => { + if (json.count == 0) { + return null; + } + return json.keys.map(key => key[0]) + }); + console.log(annotations); + context.state.annotationOptions = annotations; + context.state.selectedAnnotation = annotations[0]; + }, + async getAncestries(context) { + let ancestries = await fetch(`${BIO_INDEX_HOST}/api/bio/keys/c2ct-tissue/4?columns=ancestry`) + .then(resp => resp.json()) + .then(json => { + if (json.count == 0) { + return null; + } + return json.keys.map(key => key[0]) + }); + context.state.ancestryOptions = ancestries; + }, + }, + getters: { + tissueData(state) { + if (state.tissue.data) { + //return all data where meanTpm > 1 + return state.tissue.data.filter((d) => d.meanTpm >= 1); + } + return []; + }, + }, +}); diff --git a/vue.config.js b/vue.config.js index 332da6250..47127448c 100644 --- a/vue.config.js +++ b/vue.config.js @@ -334,10 +334,31 @@ let pages = { title: "Gene Set Factorization Server", chunks: ["chunk-vendors", "chunk-common", "factorization"], }, + mouse_index: { + entry: "src/views/Mouse/Index/main.js", + template: "public/index.html", + filename: "mouse/index.html", + title: "Mouse Knowledge Portal", + chunks: ["chunk-vendors", "chunk-common", "mouse_index"], + }, + mouse_gene: { + entry: "src/views/Mouse/Gene/main.js", + template: "public/index.html", + filename: "mouse/gene.html", + title: "Mouse Gene", + chunks: ["chunk-vendors", "chunk-common", "mouse_gene"], + }, + mouse_tissue: { + entry: "src/views/Mouse/Tissue/main.js", + template: "public/index.html", + filename: "mouse/tissue.html", + title: "Mouse Tissue", + chunks: ["chunk-vendors", "chunk-common", "mouse_tissue"], + }, mouse_diff_exp: { - entry: "src/views/MouseDiffExp/main.js", + entry: "src/views/Mouse/MouseDiffExp/main.js", template: "public/index.html", - filename: "mouse_diff_exp.html", + filename: "mouse/diff_exp.html", title: "Mouse Differential Expression", chunks: ["chunk-vendors", "chunk-common", "mouse_diff_exp"], }, From ae26cb3ed7291abb2937e14ad379d4bc67effb08 Mon Sep 17 00:00:00 2001 From: Quy Date: Tue, 10 Dec 2024 16:55:20 -0500 Subject: [PATCH 009/132] setup new pages --- configs/vue.config.PanKbase.js | 49 +++++++++++++++++++ src/portals/PanKbase/views/About/Template.vue | 0 src/portals/PanKbase/views/About/main.js | 0 .../PanKbase/views/Contact/Template.vue | 0 src/portals/PanKbase/views/Contact/main.js | 0 .../PanKbase/views/DataBrowser/Template.vue | 0 .../PanKbase/views/DataBrowser/main.js | 0 src/portals/PanKbase/views/Help/Template.vue | 0 src/portals/PanKbase/views/Help/main.js | 0 .../PanKbase/views/People/Template.vue | 0 src/portals/PanKbase/views/People/main.js | 0 .../PanKbase/views/Programs/Template.vue | 0 src/portals/PanKbase/views/Programs/main.js | 0 .../PanKbase/views/SingleCell/Template.vue | 0 src/portals/PanKbase/views/SingleCell/main.js | 0 15 files changed, 49 insertions(+) create mode 100644 src/portals/PanKbase/views/About/Template.vue create mode 100644 src/portals/PanKbase/views/About/main.js create mode 100644 src/portals/PanKbase/views/Contact/Template.vue create mode 100644 src/portals/PanKbase/views/Contact/main.js create mode 100644 src/portals/PanKbase/views/DataBrowser/Template.vue create mode 100644 src/portals/PanKbase/views/DataBrowser/main.js create mode 100644 src/portals/PanKbase/views/Help/Template.vue create mode 100644 src/portals/PanKbase/views/Help/main.js create mode 100644 src/portals/PanKbase/views/People/Template.vue create mode 100644 src/portals/PanKbase/views/People/main.js create mode 100644 src/portals/PanKbase/views/Programs/Template.vue create mode 100644 src/portals/PanKbase/views/Programs/main.js create mode 100644 src/portals/PanKbase/views/SingleCell/Template.vue create mode 100644 src/portals/PanKbase/views/SingleCell/main.js diff --git a/configs/vue.config.PanKbase.js b/configs/vue.config.PanKbase.js index 78042c154..5e9ccf152 100644 --- a/configs/vue.config.PanKbase.js +++ b/configs/vue.config.PanKbase.js @@ -17,6 +17,55 @@ let pages = { title: "Page Not Found", chunks: ["chunk-vendors", "chunk-common", "page404"], }, + databrowser: { + entry: "src/portals/PanKbase/views/DataBrowser/main.js", + template: "public/index.html", + filename: "databrowser.html", + title: "Data Browser", + chunks: ["chunk-vendors", "chunk-common", "databrowser"], + }, + singlecell: { + entry: "src/portals/PanKbase/views/SingleCell/main.js", + template: "public/index.html", + filename: "singlecell.html", + title: "Single Cell", + chunks: ["chunk-vendors", "chunk-common", "singlecell"], + }, + about: { + entry: "src/portals/PanKbase/views/About/main.js", + template: "public/index.html", + filename: "about.html", + title: "About", + chunks: ["chunk-vendors", "chunk-common", "about"], + }, + programs: { + entry: "src/portals/PanKbase/views/Programs/main.js", + template: "public/index.html", + filename: "programs.html", + title: "Programs", + chunks: ["chunk-vendors", "chunk-common", "programs"], + }, + people: { + entry: "src/portals/PanKbase/views/People/main.js", + template: "public/index.html", + filename: "people.html", + title: "People", + chunks: ["chunk-vendors", "chunk-common", "people"], + }, + help: { + entry: "src/portals/PanKbase/views/Help/main.js", + template: "public/index.html", + filename: "help.html", + title: "Help", + chunks: ["chunk-vendors", "chunk-common", "help"], + }, + contact: { + entry: "src/portals/PanKbase/views/Contact/main.js", + template: "public/index.html", + filename: "contact.html", + title: "Contact", + chunks: ["chunk-vendors", "chunk-common", "contact"], + }, }; module.exports = { diff --git a/src/portals/PanKbase/views/About/Template.vue b/src/portals/PanKbase/views/About/Template.vue new file mode 100644 index 000000000..e69de29bb diff --git a/src/portals/PanKbase/views/About/main.js b/src/portals/PanKbase/views/About/main.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/portals/PanKbase/views/Contact/Template.vue b/src/portals/PanKbase/views/Contact/Template.vue new file mode 100644 index 000000000..e69de29bb diff --git a/src/portals/PanKbase/views/Contact/main.js b/src/portals/PanKbase/views/Contact/main.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/portals/PanKbase/views/DataBrowser/Template.vue b/src/portals/PanKbase/views/DataBrowser/Template.vue new file mode 100644 index 000000000..e69de29bb diff --git a/src/portals/PanKbase/views/DataBrowser/main.js b/src/portals/PanKbase/views/DataBrowser/main.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/portals/PanKbase/views/Help/Template.vue b/src/portals/PanKbase/views/Help/Template.vue new file mode 100644 index 000000000..e69de29bb diff --git a/src/portals/PanKbase/views/Help/main.js b/src/portals/PanKbase/views/Help/main.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/portals/PanKbase/views/People/Template.vue b/src/portals/PanKbase/views/People/Template.vue new file mode 100644 index 000000000..e69de29bb diff --git a/src/portals/PanKbase/views/People/main.js b/src/portals/PanKbase/views/People/main.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/portals/PanKbase/views/Programs/Template.vue b/src/portals/PanKbase/views/Programs/Template.vue new file mode 100644 index 000000000..e69de29bb diff --git a/src/portals/PanKbase/views/Programs/main.js b/src/portals/PanKbase/views/Programs/main.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/portals/PanKbase/views/SingleCell/Template.vue b/src/portals/PanKbase/views/SingleCell/Template.vue new file mode 100644 index 000000000..e69de29bb diff --git a/src/portals/PanKbase/views/SingleCell/main.js b/src/portals/PanKbase/views/SingleCell/main.js new file mode 100644 index 000000000..e69de29bb From 4927d994b3ad0345c41deff8e2e71a0dce3cb448 Mon Sep 17 00:00:00 2001 From: Quy Date: Tue, 10 Dec 2024 19:03:29 -0500 Subject: [PATCH 010/132] refactor header/footer into mixin --- configs/vue.config.PanKbase.js | 4 +- .../PanKbase/components/pkb-footer.vue | 12 +- .../PanKbase/components/pkb-header.vue | 112 +++++++++++------- src/portals/PanKbase/components/pkb-hero.vue | 29 +++-- src/portals/PanKbase/mixins/pankbaseMixin.js | 17 +++ .../PanKbase/views/DataBrowser/Template.vue | 19 +++ .../PanKbase/views/DataBrowser/main.js | 21 ++++ src/portals/PanKbase/views/Index/main.js | 58 ++------- 8 files changed, 161 insertions(+), 111 deletions(-) create mode 100644 src/portals/PanKbase/mixins/pankbaseMixin.js diff --git a/configs/vue.config.PanKbase.js b/configs/vue.config.PanKbase.js index 5e9ccf152..7268768c3 100644 --- a/configs/vue.config.PanKbase.js +++ b/configs/vue.config.PanKbase.js @@ -20,14 +20,14 @@ let pages = { databrowser: { entry: "src/portals/PanKbase/views/DataBrowser/main.js", template: "public/index.html", - filename: "databrowser.html", + filename: "data-browser.html", title: "Data Browser", chunks: ["chunk-vendors", "chunk-common", "databrowser"], }, singlecell: { entry: "src/portals/PanKbase/views/SingleCell/main.js", template: "public/index.html", - filename: "singlecell.html", + filename: "single-cell.html", title: "Single Cell", chunks: ["chunk-vendors", "chunk-common", "singlecell"], }, diff --git a/src/portals/PanKbase/components/pkb-footer.vue b/src/portals/PanKbase/components/pkb-footer.vue index b57918195..49d8e4071 100644 --- a/src/portals/PanKbase/components/pkb-footer.vue +++ b/src/portals/PanKbase/components/pkb-footer.vue @@ -1,26 +1,24 @@ \ No newline at end of file + diff --git a/src/portals/PanKbase/components/pkb-header.vue b/src/portals/PanKbase/components/pkb-header.vue index 33c384fc0..d36e62a77 100644 --- a/src/portals/PanKbase/components/pkb-header.vue +++ b/src/portals/PanKbase/components/pkb-header.vue @@ -1,51 +1,51 @@ - + From e1abf653138fb3b9e1cc5228d2a3eb37bd0beac4 Mon Sep 17 00:00:00 2001 From: Quy Date: Tue, 17 Dec 2024 12:02:23 -0500 Subject: [PATCH 020/132] link accessions to data site --- .../PanKbase/views/DataBrowser/Template.vue | 46 +++++++++++++++++-- .../PanKbase/views/DataBrowser/main.js | 1 + 2 files changed, 43 insertions(+), 4 deletions(-) diff --git a/src/portals/PanKbase/views/DataBrowser/Template.vue b/src/portals/PanKbase/views/DataBrowser/Template.vue index 7d88deacb..27d2e64a5 100644 --- a/src/portals/PanKbase/views/DataBrowser/Template.vue +++ b/src/portals/PanKbase/views/DataBrowser/Template.vue @@ -16,7 +16,17 @@ hover responsive="sm" head-variant="light" - > + > + + + > + + + > + > Date: Tue, 17 Dec 2024 13:23:37 -0500 Subject: [PATCH 021/132] starting to build static pages --- src/portals/PanKbase/views/People/Template.vue | 5 +++++ src/portals/PanKbase/views/People/main.js | 17 +++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/src/portals/PanKbase/views/People/Template.vue b/src/portals/PanKbase/views/People/Template.vue index e69de29bb..4d5ebc3f1 100644 --- a/src/portals/PanKbase/views/People/Template.vue +++ b/src/portals/PanKbase/views/People/Template.vue @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/src/portals/PanKbase/views/People/main.js b/src/portals/PanKbase/views/People/main.js index e69de29bb..801ec7748 100644 --- a/src/portals/PanKbase/views/People/main.js +++ b/src/portals/PanKbase/views/People/main.js @@ -0,0 +1,17 @@ +import Vue from "vue"; +import Template from "./Template.vue"; + +new Vue({ + components: { + }, + data() { + return {}; + }, + computed: {}, + watch: {}, + created() {}, + + render(createElement, context) { + return createElement(Template); + }, +}).$mount("#app"); From 2d38391f7fa9ab12357630542cc23c4ed848039a Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Tue, 17 Dec 2024 13:26:49 -0500 Subject: [PATCH 022/132] more basic setup --- .../PanKbase/views/Contact/Template.vue | 5 +++++ src/portals/PanKbase/views/Contact/main.js | 22 +++++++++++++++++++ src/portals/PanKbase/views/Help/Template.vue | 5 +++++ src/portals/PanKbase/views/Help/main.js | 22 +++++++++++++++++++ src/portals/PanKbase/views/People/main.js | 5 +++++ .../PanKbase/views/Programs/Template.vue | 5 +++++ src/portals/PanKbase/views/Programs/main.js | 22 +++++++++++++++++++ .../PanKbase/views/Projects/Template.vue | 5 +++++ src/portals/PanKbase/views/Projects/main.js | 22 +++++++++++++++++++ 9 files changed, 113 insertions(+) diff --git a/src/portals/PanKbase/views/Contact/Template.vue b/src/portals/PanKbase/views/Contact/Template.vue index e69de29bb..ef36c0411 100644 --- a/src/portals/PanKbase/views/Contact/Template.vue +++ b/src/portals/PanKbase/views/Contact/Template.vue @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/src/portals/PanKbase/views/Contact/main.js b/src/portals/PanKbase/views/Contact/main.js index e69de29bb..02819c80d 100644 --- a/src/portals/PanKbase/views/Contact/main.js +++ b/src/portals/PanKbase/views/Contact/main.js @@ -0,0 +1,22 @@ +import Vue from "vue"; +import Template from "./Template.vue"; +import "../../assets/layout.css"; +import "../../assets/pkb-styles.css"; +import { pankbaseMixin } from "@/portals/PanKbase/mixins/pankbaseMixin.js"; +import { getResource } from "@/portals/PanKbase/utils/api"; + +new Vue({ + components: { + }, + mixins: [pankbaseMixin], + data() { + return {}; + }, + computed: {}, + watch: {}, + created() {}, + + render(createElement, context) { + return createElement(Template); + }, +}).$mount("#app"); diff --git a/src/portals/PanKbase/views/Help/Template.vue b/src/portals/PanKbase/views/Help/Template.vue index e69de29bb..6529c273f 100644 --- a/src/portals/PanKbase/views/Help/Template.vue +++ b/src/portals/PanKbase/views/Help/Template.vue @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/src/portals/PanKbase/views/Help/main.js b/src/portals/PanKbase/views/Help/main.js index e69de29bb..02819c80d 100644 --- a/src/portals/PanKbase/views/Help/main.js +++ b/src/portals/PanKbase/views/Help/main.js @@ -0,0 +1,22 @@ +import Vue from "vue"; +import Template from "./Template.vue"; +import "../../assets/layout.css"; +import "../../assets/pkb-styles.css"; +import { pankbaseMixin } from "@/portals/PanKbase/mixins/pankbaseMixin.js"; +import { getResource } from "@/portals/PanKbase/utils/api"; + +new Vue({ + components: { + }, + mixins: [pankbaseMixin], + data() { + return {}; + }, + computed: {}, + watch: {}, + created() {}, + + render(createElement, context) { + return createElement(Template); + }, +}).$mount("#app"); diff --git a/src/portals/PanKbase/views/People/main.js b/src/portals/PanKbase/views/People/main.js index 801ec7748..02819c80d 100644 --- a/src/portals/PanKbase/views/People/main.js +++ b/src/portals/PanKbase/views/People/main.js @@ -1,9 +1,14 @@ import Vue from "vue"; import Template from "./Template.vue"; +import "../../assets/layout.css"; +import "../../assets/pkb-styles.css"; +import { pankbaseMixin } from "@/portals/PanKbase/mixins/pankbaseMixin.js"; +import { getResource } from "@/portals/PanKbase/utils/api"; new Vue({ components: { }, + mixins: [pankbaseMixin], data() { return {}; }, diff --git a/src/portals/PanKbase/views/Programs/Template.vue b/src/portals/PanKbase/views/Programs/Template.vue index e69de29bb..f9f0e42bc 100644 --- a/src/portals/PanKbase/views/Programs/Template.vue +++ b/src/portals/PanKbase/views/Programs/Template.vue @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/src/portals/PanKbase/views/Programs/main.js b/src/portals/PanKbase/views/Programs/main.js index e69de29bb..02819c80d 100644 --- a/src/portals/PanKbase/views/Programs/main.js +++ b/src/portals/PanKbase/views/Programs/main.js @@ -0,0 +1,22 @@ +import Vue from "vue"; +import Template from "./Template.vue"; +import "../../assets/layout.css"; +import "../../assets/pkb-styles.css"; +import { pankbaseMixin } from "@/portals/PanKbase/mixins/pankbaseMixin.js"; +import { getResource } from "@/portals/PanKbase/utils/api"; + +new Vue({ + components: { + }, + mixins: [pankbaseMixin], + data() { + return {}; + }, + computed: {}, + watch: {}, + created() {}, + + render(createElement, context) { + return createElement(Template); + }, +}).$mount("#app"); diff --git a/src/portals/PanKbase/views/Projects/Template.vue b/src/portals/PanKbase/views/Projects/Template.vue index e69de29bb..0f05dc40a 100644 --- a/src/portals/PanKbase/views/Projects/Template.vue +++ b/src/portals/PanKbase/views/Projects/Template.vue @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/src/portals/PanKbase/views/Projects/main.js b/src/portals/PanKbase/views/Projects/main.js index e69de29bb..02819c80d 100644 --- a/src/portals/PanKbase/views/Projects/main.js +++ b/src/portals/PanKbase/views/Projects/main.js @@ -0,0 +1,22 @@ +import Vue from "vue"; +import Template from "./Template.vue"; +import "../../assets/layout.css"; +import "../../assets/pkb-styles.css"; +import { pankbaseMixin } from "@/portals/PanKbase/mixins/pankbaseMixin.js"; +import { getResource } from "@/portals/PanKbase/utils/api"; + +new Vue({ + components: { + }, + mixins: [pankbaseMixin], + data() { + return {}; + }, + computed: {}, + watch: {}, + created() {}, + + render(createElement, context) { + return createElement(Template); + }, +}).$mount("#app"); From a76340bc224ced6f4cfa413edfa1642a382ac2cf Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Tue, 17 Dec 2024 13:31:05 -0500 Subject: [PATCH 023/132] setup with header/footer --- .../PanKbase/views/Contact/Template.vue | 11 ++++++++-- src/portals/PanKbase/views/Help/Template.vue | 11 ++++++++-- .../PanKbase/views/People/Template.vue | 11 ++++++++-- .../PanKbase/views/Programs/Template.vue | 11 ++++++++-- .../PanKbase/views/Projects/Template.vue | 11 ++++++++-- .../PanKbase/views/SingleCell/Template.vue | 12 ++++++++++ src/portals/PanKbase/views/SingleCell/main.js | 22 +++++++++++++++++++ 7 files changed, 79 insertions(+), 10 deletions(-) diff --git a/src/portals/PanKbase/views/Contact/Template.vue b/src/portals/PanKbase/views/Contact/Template.vue index ef36c0411..491dab780 100644 --- a/src/portals/PanKbase/views/Contact/Template.vue +++ b/src/portals/PanKbase/views/Contact/Template.vue @@ -1,5 +1,12 @@ \ No newline at end of file diff --git a/src/portals/PanKbase/views/Help/Template.vue b/src/portals/PanKbase/views/Help/Template.vue index 6529c273f..018dfc28b 100644 --- a/src/portals/PanKbase/views/Help/Template.vue +++ b/src/portals/PanKbase/views/Help/Template.vue @@ -1,5 +1,12 @@ \ No newline at end of file diff --git a/src/portals/PanKbase/views/People/Template.vue b/src/portals/PanKbase/views/People/Template.vue index 4d5ebc3f1..e3e48a4d5 100644 --- a/src/portals/PanKbase/views/People/Template.vue +++ b/src/portals/PanKbase/views/People/Template.vue @@ -1,5 +1,12 @@ \ No newline at end of file diff --git a/src/portals/PanKbase/views/Programs/Template.vue b/src/portals/PanKbase/views/Programs/Template.vue index f9f0e42bc..3295cc441 100644 --- a/src/portals/PanKbase/views/Programs/Template.vue +++ b/src/portals/PanKbase/views/Programs/Template.vue @@ -1,5 +1,12 @@ \ No newline at end of file diff --git a/src/portals/PanKbase/views/Projects/Template.vue b/src/portals/PanKbase/views/Projects/Template.vue index 0f05dc40a..32d4df3d3 100644 --- a/src/portals/PanKbase/views/Projects/Template.vue +++ b/src/portals/PanKbase/views/Projects/Template.vue @@ -1,5 +1,12 @@ \ No newline at end of file diff --git a/src/portals/PanKbase/views/SingleCell/Template.vue b/src/portals/PanKbase/views/SingleCell/Template.vue index e69de29bb..8cf193c26 100644 --- a/src/portals/PanKbase/views/SingleCell/Template.vue +++ b/src/portals/PanKbase/views/SingleCell/Template.vue @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/src/portals/PanKbase/views/SingleCell/main.js b/src/portals/PanKbase/views/SingleCell/main.js index e69de29bb..02819c80d 100644 --- a/src/portals/PanKbase/views/SingleCell/main.js +++ b/src/portals/PanKbase/views/SingleCell/main.js @@ -0,0 +1,22 @@ +import Vue from "vue"; +import Template from "./Template.vue"; +import "../../assets/layout.css"; +import "../../assets/pkb-styles.css"; +import { pankbaseMixin } from "@/portals/PanKbase/mixins/pankbaseMixin.js"; +import { getResource } from "@/portals/PanKbase/utils/api"; + +new Vue({ + components: { + }, + mixins: [pankbaseMixin], + data() { + return {}; + }, + computed: {}, + watch: {}, + created() {}, + + render(createElement, context) { + return createElement(Template); + }, +}).$mount("#app"); From 1899dc751a46df13ee2ac1b81a35429521df8d19 Mon Sep 17 00:00:00 2001 From: Alex Shilin Date: Tue, 17 Dec 2024 15:37:48 -0500 Subject: [PATCH 024/132] landing page --- src/portals/PanKbase/components/pkb-hero.vue | 59 ---- src/portals/PanKbase/views/Index/Template.vue | 309 +++++++++++++++++- src/portals/PanKbase/views/Index/main.js | 233 ++++++++++++- 3 files changed, 534 insertions(+), 67 deletions(-) delete mode 100644 src/portals/PanKbase/components/pkb-hero.vue diff --git a/src/portals/PanKbase/components/pkb-hero.vue b/src/portals/PanKbase/components/pkb-hero.vue deleted file mode 100644 index e7eb7a51c..000000000 --- a/src/portals/PanKbase/components/pkb-hero.vue +++ /dev/null @@ -1,59 +0,0 @@ - - - - - diff --git a/src/portals/PanKbase/views/Index/Template.vue b/src/portals/PanKbase/views/Index/Template.vue index 79bfefaca..a25076dc6 100644 --- a/src/portals/PanKbase/views/Index/Template.vue +++ b/src/portals/PanKbase/views/Index/Template.vue @@ -3,9 +3,146 @@ - +
+
+ +
+
+ {{$parent.content.hero.blurb}} +
+
+
- +
+
+
{{$parent.content.resources.title}}
+
{{$parent.content.resources.subtitle}}
+
+
+
+
+
+
{{ item.title }}
+
{{ item.body }}
+
+ {{ item.linkLabel }} ❯ +
+
+ +
+
+
+
+
+
+
{{ item.title }}
+
{{ item.body }}
+ {{ item.linkLabel }} ❯ +
+
+ +
+
+
+
+ +
+
+
{{$parent.content.tools.title}}
+
{{$parent.content.tools.subtitle}}
+
+
+
+
+
{{ item.title }}
+
{{ item.body }}
+ {{ item.linkLabel }} ❯ +
+
+ +
+
+
+
+ +
+
+
{{$parent.content.examples.title}}
+
{{$parent.content.examples.subtitle}}
+
+
+
+
+ {{ item.title }} +
+ {{ item.linkLabel }} ❯ +
+
+
+ +
+
+
{{$parent.content.external.title}}
+
{{$parent.content.external.subtitle}}
+
+
+
+
+
{{ item.title }}
+
{{ item.body }}
+ {{ item.linkLabel }} ❯ +
+
+ +
+
+
+
+ +
+
+ +
+
{{ $parent.content.partners.title }}
+
+ +
+
+ +
+
{{ $parent.content.supporters.title }}
+
+ +
+ +
+
Collaborate
+
+
+ +
+
News
+
+
+
+
+
{{item.title}}
 +
+
+
+ See All News +
+
+ +
@@ -16,4 +153,172 @@ .pkb-nav{ background: #fafafa99 !important; } +.pkb-hero{ + position: relative; + min-height: 500px; + width: 100%; + overflow: hidden; +} +.pkb-hero-bg{ + position: absolute; + width: 100%; +} +.pkb-hero-bg img[data-v-365f9957] { + position: absolute; + width: 1300px; + top: -400px; + right: calc(50% - 450px); +} +.pbk-hero-title { + position: absolute; + left: calc(50% + 75px); + top: 250px; + max-width: 250px; + font-size: 20px; + font-weight: bold; + line-height: 22px; +} + +.pkb-body{ + display:flex; + flex-direction: column; + gap: 40px; + margin-bottom: 50px; +} + +.section{ + display:flex; + flex-direction: column; + gap:20px; +} +.section-title { + font-size: 1.6em; + font-weight: bold; +} +.section-subtitle { + font-size: 1.2em; +} +.section-items { + display: flex; + gap: 20px; +} +.section-item { + display: flex; + background: #fbfbfb; + border: 1px solid #eee; + flex: 1; + position: relative; +} +.item-copy { + width: -webkit-fill-available; + max-width: 200px; + padding: 20px; +} +.item-title { + font-weight: bold; + font-size: 1.2em; +} +.item-bg { + width: 100%; + height: 300px; + display: flex; + align-items: center; + justify-content: center; + mix-blend-mode: darken; + overflow: hidden; +} +::v-deep .contain img { + width: 100%; + height: 100%; + object-fit: contain; +} + +::v-deep .cover img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.section-item.medium{ + flex-direction: column-reverse; + justify-content: flex-end; + + .item-copy { + width: -webkit-fill-available; + max-width: unset; + padding: 20px; + } + .item-title { + font-weight: bold; + font-size: 1.2em; + } + .item-bg { + width: auto; + height: 200px; + display: flex; + align-items: center; + justify-content: center; + mix-blend-mode: darken; + overflow: hidden; + } +} + +.section-item.soon::after { + content: 'Coming Soon'; + position: absolute; + width: 100%; + height: 100%; + z-index: 1; + background: rgb(251 251 251 / 80%); + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + color: black; +} + +.example-item { + display: flex; + justify-content: space-between; + background: #fbfbfb; + padding: 10px; +} + +.partners { + display: flex; + gap: 20px; + justify-content: center; + padding: 20px; +} +.partners-title { + align-self: center; + text-transform: uppercase; + font-weight: bold; + color: #ccc; +} +.partner-logo { + height: 50px; + mix-blend-mode: darken; +} +.partner-logo img { + height: inherit; +} + +.news-items{ + display: flex; + flex-direction: column; + gap: 10px; +} +.news-item { + gap: 10px; +} +.news-thumbnail { + min-width: 200px; + height: 100px; + background: #fbfbfb; + border: 1px solid #eee; +} +.news-thumbnail img { + mix-blend-mode: darken; +} \ No newline at end of file diff --git a/src/portals/PanKbase/views/Index/main.js b/src/portals/PanKbase/views/Index/main.js index 3814e783e..355f42e01 100644 --- a/src/portals/PanKbase/views/Index/main.js +++ b/src/portals/PanKbase/views/Index/main.js @@ -6,19 +6,240 @@ import "../../assets/pkb-styles.css"; import { pankbaseMixin } from "../../mixins/pankbaseMixin.js"; -import pkbHero from "../../components/pkb-hero.vue"; - new Vue({ - components: { - pkbHero, - }, + components: {}, + mixins: [pankbaseMixin], - data: {}, + + data: { + newsFeed: null, + content:{ + hero:{ + blurb: "A centralized resource of the human pancreas for diabetes research." + }, + resources:{ + title: "Resources", + subtitle: "Learn what is unique to PanKbase", + rows: [ + [ + { + title: "PanKgraph", + body: "", + linkLabel: "Learn More", + linkUrl: "https://dev.pankgraph.org/", + bgImage: "https://hugeampkpncms.org/sites/default/files/images/pankbase/pkb-landing-pankgraph.jpg", + type: "large", + comingSoon: false, + }, + { + title: "Integrated Maps of the pancreas", + body: "", + linkLabel: "Learn More", + linkUrl: "/", + bgImage: "https://hugeampkpncms.org/sites/default/files/images/pankbase/pkb-landing-umap.jpg", + type: "large", + comingSoon: false, + } + ], + [ + { + title: "Donor Metadata", + body: "", + linkLabel: "Learn More", + linkUrl: "/", + bgImage: "https://hugeampkpncms.org/sites/default/files/images/pankbase/pkb-landing-donors.png", + type: "medium", + comingSoon: false, + }, + { + title: "Genetic Associations", + body: "", + linkLabel: "Learn More", + linkUrl: "/", + bgImage: "https://hugeampkpncms.org/sites/default/files/images/pankbase/pkb-landing-manhattan.png", + type: "medium", + comingSoon: true, + }, + { + title: "Image Browser", + body: "", + linkLabel: "Learn More", + linkUrl: "/", + bgImage: "https://hugeampkpncms.org/sites/default/files/images/pankbase/pkb-landing-histology.png", + type: "medium", + comingSoon: true, + } + ] + ] + }, + tools:{ + title: "Tools and Workflows", + subtitle: "Analyses you can do on PanKbase", + rows: [ + { + title: "Cell Browser", + body: "", + linkLabel: "Learn More", + linkUrl: "/", + bgImage: "https://hugeampkpncms.org/sites/default/files/images/pankbase/pkb-landing-scexpression.png", + type: "medium", + comingSoon: false, + }, + { + title: "Find Relationships", + body: "", + linkLabel: "Learn More", + linkUrl: "/", + bgImage: "https://hugeampkpncms.org/sites/default/files/images/pankbase/pkb-landing-relationships.png", + type: "medium", + comingSoon: false, + }, + { + title: "Differential Expression", + body: "", + linkLabel: "Learn More", + linkUrl: "/", + bgImage: "https://hugeampkpncms.org/sites/default/files/images/pankbase/pkb-landing-volcano.png", + type: "medium", + comingSoon: true, + }, + { + title: "eQTLs", + body: "", + linkLabel: "Learn More", + linkUrl: "/", + bgImage: "https://hugeampkpncms.org/sites/default/files/images/pankbase/pkb-landing-eqtl.png", + type: "medium", + comingSoon: true, + } + ] + }, + examples: { + title: "Browse Examples", + subtitle: "Explore what is in PanKbase", + rows: [ + { + title: "Pancreatic islet all donor single cell map", + linkLabel: "Explore", + linkUrl: "/", + }, + { + title: "Pancreatic islet diabetics single cell map", + linkLabel: "Explore", + linkUrl: "/", + }, + { + title: "Top 20 DEG pancreas X diabetes", + linkLabel: "Explore", + linkUrl: "/", + }, + { + title: "Identify pancreatic eQTLs for a gene", + linkLabel: "Explore", + linkUrl: "/", + } + ] + }, + external:{ + title: "External Resources", + subtitle: "Research knowledge and tools from specialized sources", + rows: [ + { + title: "HPAP", + body: "Understanding type 1 and type 2 diabetes through deep molecular phenotyping", + linkLabel: "Learn More", + linkUrl: "/", + bgImage: "https://hugeampkpncms.org/sites/default/files/images/pankbase/pkb-landing-hpap.png", + type: "medium", + comingSoon: false, + }, + { + title: "IIDP", + body: "Distributing samples and data derived from human islets and associated tissues", + linkLabel: "Learn More", + linkUrl: "/", + bgImage: "https://hugeampkpncms.org/sites/default/files/images/pankbase/pkb-landing-iidp.png", + type: "medium", + comingSoon: false, + }, + { + title: "nPOD", + body: "Identifying mechanisms for prevention or reversal of type 1 diabetes", + linkLabel: "Learn More", + linkUrl: "/", + bgImage: "https://hugeampkpncms.org/sites/default/files/images/pankbase/pkb-landing-npod.png", + type: "medium", + comingSoon: false, + }, + { + title: "Pancreatlas", + body: "Facilitating pancreatic disease research through accessible imaging datasets", + linkLabel: "Learn More", + linkUrl: "/", + bgImage: "https://hugeampkpncms.org/sites/default/files/images/pankbase/pkb-landing-pancreatlas.png", + type: "medium", + comingSoon: false, + }, + { + title: "ADI", + body: "Isolating, biobanking, and distributing human islets and associated tissues", + linkLabel: "Learn More", + linkUrl: "/", + bgImage: "https://hugeampkpncms.org/sites/default/files/images/pankbase/pkb-landing-adi.png", + type: "medium", + comingSoon: false, + } + ] + }, + partners: { + title: "Our Partners", + logos: [ + "https://hugeampkpncms.org/sites/default/files/images/pankbase/logo_hirn.png", + "https://hugeampkpncms.org/sites/default/files/images/pankbase/logo_pancreatlas.png", + "https://hugeampkpncms.org/sites/default/files/images/pankbase/logo_cmdga.png", + "https://hugeampkpncms.org/sites/default/files/images/pankbase/logo_cmdkp.png" + ] + }, + supporters: { + title: "Supported By", + logos: [ + "https://hugeampkpncms.org/sites/default/files/images/pankbase/logo_nih-niddk.png", + "https://hugeampkpncms.org/sites/default/files/images/pankbase/logo_nih-odss.png" + ] + }, + + collaborate: "PanKbase is a growing resource that is actively under development. If you have new data, analysis tools, features, or visualizations that you'd like us to incorporate, please contact us at help@pankbase.org", + + news:{ + feedUrl: "https://hugeampkpncms.org/rest/news_list?project=pankbase", + newsUrl: "/news.html", + newsItemUrl: "/news.html?id=" + } + } + }, computed: {}, watch: {}, + async created() { + this.getNews(); + }, + + methods: { + async getNews(){ + const newsFeedUrl = this.content.news.feedUrl; + const newsFeed = await fetch(newsFeedUrl).then(resp => { return resp.json();}); + //trim feed to 5 items + if(newsFeed.length > 5) newsFeed.length = 5; + newsFeed.forEach(item=>{ + //extract only the img element frforom thumbnail, wysiwyg html can be polluted sometimes + item.field_thumbnail_image = new DOMParser().parseFromString(item.field_thumbnail_image, 'text/html').querySelector('img')?.outerHTML || ''; + }) + this.newsFeed = newsFeed; + } + }, + render(createElement) { return createElement(Template); }, From 9160676764925efba8216f2a9459cb0f08408de6 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Tue, 17 Dec 2024 16:17:04 -0500 Subject: [PATCH 025/132] fetching content --- src/portals/PanKbase/utils/content.js | 10 ++++++++++ src/portals/PanKbase/views/People/main.js | 11 ++++++++--- 2 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 src/portals/PanKbase/utils/content.js diff --git a/src/portals/PanKbase/utils/content.js b/src/portals/PanKbase/utils/content.js new file mode 100644 index 000000000..86f7d37cd --- /dev/null +++ b/src/portals/PanKbase/utils/content.js @@ -0,0 +1,10 @@ +const CONTENT_URL = "https://hugeampkpncms.org/rest/data?pageid="; + +export async function getPankbaseContent(contentId){ + console.log("Getting pankbase content"); + let resourceUrl = `${CONTENT_URL}${contentId}`; + console.log(resourceUrl); + let jsonContent = await fetch(resourceUrl).then( + resp => resp.json()); + return jsonContent; +} \ No newline at end of file diff --git a/src/portals/PanKbase/views/People/main.js b/src/portals/PanKbase/views/People/main.js index 02819c80d..2970314f2 100644 --- a/src/portals/PanKbase/views/People/main.js +++ b/src/portals/PanKbase/views/People/main.js @@ -3,18 +3,23 @@ import Template from "./Template.vue"; import "../../assets/layout.css"; import "../../assets/pkb-styles.css"; import { pankbaseMixin } from "@/portals/PanKbase/mixins/pankbaseMixin.js"; -import { getResource } from "@/portals/PanKbase/utils/api"; +import { getPankbaseContent } from "@/portals/PanKbase/utils/content"; new Vue({ components: { }, mixins: [pankbaseMixin], data() { - return {}; + return { + pageId: "pankbase_people", + }; }, computed: {}, watch: {}, - created() {}, + async created() { + let content = await getPankbaseContent("pankbase_people"); + console.log(JSON.stringify(content)); + }, render(createElement, context) { return createElement(Template); From 42ebf74f615ad236b58c322eb0a4c14862ab79cb Mon Sep 17 00:00:00 2001 From: Alex Shilin Date: Tue, 17 Dec 2024 16:22:13 -0500 Subject: [PATCH 026/132] css fix --- src/portals/PanKbase/views/Index/Template.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/portals/PanKbase/views/Index/Template.vue b/src/portals/PanKbase/views/Index/Template.vue index a25076dc6..dd9719cbd 100644 --- a/src/portals/PanKbase/views/Index/Template.vue +++ b/src/portals/PanKbase/views/Index/Template.vue @@ -163,7 +163,7 @@ position: absolute; width: 100%; } -.pkb-hero-bg img[data-v-365f9957] { +.pkb-hero-bg img { position: absolute; width: 1300px; top: -400px; From ce17d5fa5b1e77add4af5e590814c677a6c9cc23 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Tue, 17 Dec 2024 16:32:55 -0500 Subject: [PATCH 027/132] People page showing content --- src/portals/PanKbase/utils/content.js | 6 +++++- src/portals/PanKbase/views/People/Template.vue | 8 +++++++- src/portals/PanKbase/views/People/main.js | 11 ++++++++--- 3 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/portals/PanKbase/utils/content.js b/src/portals/PanKbase/utils/content.js index 86f7d37cd..f4d1291db 100644 --- a/src/portals/PanKbase/utils/content.js +++ b/src/portals/PanKbase/utils/content.js @@ -1,3 +1,6 @@ +import dataConvert from "@/utils/dataConvert"; + + const CONTENT_URL = "https://hugeampkpncms.org/rest/data?pageid="; export async function getPankbaseContent(contentId){ @@ -6,5 +9,6 @@ export async function getPankbaseContent(contentId){ console.log(resourceUrl); let jsonContent = await fetch(resourceUrl).then( resp => resp.json()); - return jsonContent; + let csvContent = jsonContent[0].field_data_points; + return dataConvert.csv2Json(csvContent); } \ No newline at end of file diff --git a/src/portals/PanKbase/views/People/Template.vue b/src/portals/PanKbase/views/People/Template.vue index e3e48a4d5..f1a1d5a26 100644 --- a/src/portals/PanKbase/views/People/Template.vue +++ b/src/portals/PanKbase/views/People/Template.vue @@ -4,7 +4,13 @@
- People page content goes here +
+ +

{{ person["Name"] }}

+
{{ person["Affiliation"] }}
+

{{ person["Role"] }}

+ +
diff --git a/src/portals/PanKbase/views/People/main.js b/src/portals/PanKbase/views/People/main.js index 2970314f2..fcb731b35 100644 --- a/src/portals/PanKbase/views/People/main.js +++ b/src/portals/PanKbase/views/People/main.js @@ -12,13 +12,18 @@ new Vue({ data() { return { pageId: "pankbase_people", + people: [] }; }, - computed: {}, + computed: { + peopleList(){ + return this.people; + } + }, watch: {}, async created() { - let content = await getPankbaseContent("pankbase_people"); - console.log(JSON.stringify(content)); + let content = await getPankbaseContent(this.pageId); + this.people = content; }, render(createElement, context) { From f0251cb9244c2c3f3e95c28b5439cd26440f9216 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Tue, 17 Dec 2024 16:56:50 -0500 Subject: [PATCH 028/132] basic styling for person page --- src/portals/PanKbase/views/People/Template.vue | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/portals/PanKbase/views/People/Template.vue b/src/portals/PanKbase/views/People/Template.vue index f1a1d5a26..5715e78d9 100644 --- a/src/portals/PanKbase/views/People/Template.vue +++ b/src/portals/PanKbase/views/People/Template.vue @@ -3,8 +3,8 @@ -
-
+
+

{{ person["Name"] }}

{{ person["Affiliation"] }}
@@ -15,4 +15,9 @@
- \ No newline at end of file + + \ No newline at end of file From 1c5fd8d3d7a336c35ce3c32999b8772339d1183f Mon Sep 17 00:00:00 2001 From: Alex Shilin Date: Wed, 18 Dec 2024 11:09:15 -0500 Subject: [PATCH 029/132] nav and footer updates --- src/portals/PanKbase/assets/pkb-styles.css | 2 +- .../PanKbase/components/pkb-footer.vue | 95 +++++++++++++++++- .../PanKbase/components/pkb-header.vue | 97 +++++++++++++------ src/portals/PanKbase/views/Index/main.js | 6 +- 4 files changed, 159 insertions(+), 41 deletions(-) diff --git a/src/portals/PanKbase/assets/pkb-styles.css b/src/portals/PanKbase/assets/pkb-styles.css index 797e0874f..1eef6bfc7 100644 --- a/src/portals/PanKbase/assets/pkb-styles.css +++ b/src/portals/PanKbase/assets/pkb-styles.css @@ -28,8 +28,8 @@ body { } .pkb-body { padding: 40px; - min-width: 1200px; max-width: 1400px; + width: 100%; } .box { diff --git a/src/portals/PanKbase/components/pkb-footer.vue b/src/portals/PanKbase/components/pkb-footer.vue index 49d8e4071..1bb7dac1b 100644 --- a/src/portals/PanKbase/components/pkb-footer.vue +++ b/src/portals/PanKbase/components/pkb-footer.vue @@ -1,5 +1,67 @@ diff --git a/src/portals/PanKbase/views/Index/Template.vue b/src/portals/PanKbase/views/Index/Template.vue index dd9719cbd..7689e2b1a 100644 --- a/src/portals/PanKbase/views/Index/Template.vue +++ b/src/portals/PanKbase/views/Index/Template.vue @@ -103,7 +103,7 @@
-
+
+
diff --git a/src/portals/PanKbase/views/Index/main.js b/src/portals/PanKbase/views/Index/main.js index 0d2980d81..a30484197 100644 --- a/src/portals/PanKbase/views/Index/main.js +++ b/src/portals/PanKbase/views/Index/main.js @@ -46,7 +46,7 @@ new Vue({ title: "Donor Metadata", body: "", linkLabel: "Learn More", - linkUrl: "http://tools.cmdga.org:3838/metadata_analysis/", + linkUrl: "http://tools.cmdga.org:3838/metadata_analysis_assays/", bgImage: "https://hugeampkpncms.org/sites/default/files/images/pankbase/pkb-landing-donors.png", type: "medium", comingSoon: false, @@ -197,7 +197,8 @@ new Vue({ "https://hugeampkpncms.org/sites/default/files/images/pankbase/logo_hirn.png", "https://hugeampkpncms.org/sites/default/files/images/pankbase/logo_pancreatlas.png", "https://hugeampkpncms.org/sites/default/files/images/pankbase/logo_cmdga.png", - "https://hugeampkpncms.org/sites/default/files/images/pankbase/logo_cmdkp.png" + "https://hugeampkpncms.org/sites/default/files/images/pankbase/logo_cmdkp.png", + "https://hugeampkpncms.org/sites/default/files/images/pankbase/logo_dknet.png" ] }, supporters: { From 2453b8c198d686056f5bd640bfc7109f437d3423 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 3 Jan 2025 12:12:30 -0500 Subject: [PATCH 055/132] few static pages done --- src/portals/PanKbase/assets/pkb-styles.css | 3 +++ src/portals/PanKbase/views/People/Template.vue | 8 ++++++-- src/portals/PanKbase/views/Policies/Template.vue | 1 + src/portals/PanKbase/views/Projects/Template.vue | 1 + 4 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/portals/PanKbase/assets/pkb-styles.css b/src/portals/PanKbase/assets/pkb-styles.css index a4897ba21..c17783cf8 100644 --- a/src/portals/PanKbase/assets/pkb-styles.css +++ b/src/portals/PanKbase/assets/pkb-styles.css @@ -223,3 +223,6 @@ input.pkb[type="radio"]:disabled:checked { border-color: var(--pkb-secondary-green); } } +.page-title { + margin-bottom: 25px; +} \ No newline at end of file diff --git a/src/portals/PanKbase/views/People/Template.vue b/src/portals/PanKbase/views/People/Template.vue index 8efc1fe4e..2063def4b 100644 --- a/src/portals/PanKbase/views/People/Template.vue +++ b/src/portals/PanKbase/views/People/Template.vue @@ -3,14 +3,18 @@ -
-
+
+

People

+
+

{{ person["Name"] }}

{{ person["Affiliation"] }}

{{ person["Role"] }}

+
+
diff --git a/src/portals/PanKbase/views/Policies/Template.vue b/src/portals/PanKbase/views/Policies/Template.vue index 6397fb012..fed383906 100644 --- a/src/portals/PanKbase/views/Policies/Template.vue +++ b/src/portals/PanKbase/views/Policies/Template.vue @@ -4,6 +4,7 @@
+

Policies

diff --git a/src/portals/PanKbase/views/Projects/Template.vue b/src/portals/PanKbase/views/Projects/Template.vue index 16bc77312..c237b7214 100644 --- a/src/portals/PanKbase/views/Projects/Template.vue +++ b/src/portals/PanKbase/views/Projects/Template.vue @@ -4,6 +4,7 @@
+

About This Project

From 872d60b8558b580ffe454906417512cd68668f44 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 3 Jan 2025 12:41:57 -0500 Subject: [PATCH 056/132] that's all the About pages --- src/portals/PanKbase/views/Collaborate/Template.vue | 1 + src/portals/PanKbase/views/Programs/Template.vue | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/portals/PanKbase/views/Collaborate/Template.vue b/src/portals/PanKbase/views/Collaborate/Template.vue index 2ec055e2e..b3433fbed 100644 --- a/src/portals/PanKbase/views/Collaborate/Template.vue +++ b/src/portals/PanKbase/views/Collaborate/Template.vue @@ -4,6 +4,7 @@
+

Collaborate

diff --git a/src/portals/PanKbase/views/Programs/Template.vue b/src/portals/PanKbase/views/Programs/Template.vue index 3cbf3d80a..cf3b02482 100644 --- a/src/portals/PanKbase/views/Programs/Template.vue +++ b/src/portals/PanKbase/views/Programs/Template.vue @@ -4,7 +4,8 @@
-
+

Related Programs

+
@@ -27,4 +28,7 @@ .program img { margin-bottom: 10px; } + .program-info{ + font-size: 18px; + } \ No newline at end of file From aab461ca64245b6c54b97e2a1a8e757ca73a8f2c Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 3 Jan 2025 12:51:02 -0500 Subject: [PATCH 057/132] that's all the Help pages --- src/portals/PanKbase/assets/pkb-styles.css | 3 +++ src/portals/PanKbase/views/Contact/Template.vue | 3 ++- .../PanKbase/views/MetadataDataStandards/Template.vue | 3 ++- src/portals/PanKbase/views/News/Template.vue | 2 +- src/portals/PanKbase/views/Programs/Template.vue | 5 +---- src/portals/PanKbase/views/ToolsPipelines/Template.vue | 3 ++- src/portals/PanKbase/views/Tutorials/Template.vue | 3 ++- 7 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/portals/PanKbase/assets/pkb-styles.css b/src/portals/PanKbase/assets/pkb-styles.css index c17783cf8..3e875888c 100644 --- a/src/portals/PanKbase/assets/pkb-styles.css +++ b/src/portals/PanKbase/assets/pkb-styles.css @@ -225,4 +225,7 @@ input.pkb[type="radio"]:disabled:checked { } .page-title { margin-bottom: 25px; +} +.page-info { + font-size: 18px; } \ No newline at end of file diff --git a/src/portals/PanKbase/views/Contact/Template.vue b/src/portals/PanKbase/views/Contact/Template.vue index 2d8d65026..c3b9ec09d 100644 --- a/src/portals/PanKbase/views/Contact/Template.vue +++ b/src/portals/PanKbase/views/Contact/Template.vue @@ -4,7 +4,8 @@
-
+

Contact Us

+
diff --git a/src/portals/PanKbase/views/MetadataDataStandards/Template.vue b/src/portals/PanKbase/views/MetadataDataStandards/Template.vue index 4bc82cb85..7b36443cf 100644 --- a/src/portals/PanKbase/views/MetadataDataStandards/Template.vue +++ b/src/portals/PanKbase/views/MetadataDataStandards/Template.vue @@ -4,9 +4,10 @@
+

Metadata / Data Standards

- \ No newline at end of file + diff --git a/src/portals/PanKbase/views/News/Template.vue b/src/portals/PanKbase/views/News/Template.vue index 2142f7f73..29dda705c 100644 --- a/src/portals/PanKbase/views/News/Template.vue +++ b/src/portals/PanKbase/views/News/Template.vue @@ -5,7 +5,7 @@
-

News

+

News

All News
diff --git a/src/portals/PanKbase/views/Programs/Template.vue b/src/portals/PanKbase/views/Programs/Template.vue index cf3b02482..95a63b870 100644 --- a/src/portals/PanKbase/views/Programs/Template.vue +++ b/src/portals/PanKbase/views/Programs/Template.vue @@ -5,7 +5,7 @@

Related Programs

-
+
@@ -28,7 +28,4 @@ .program img { margin-bottom: 10px; } - .program-info{ - font-size: 18px; - } \ No newline at end of file diff --git a/src/portals/PanKbase/views/ToolsPipelines/Template.vue b/src/portals/PanKbase/views/ToolsPipelines/Template.vue index 25f1089d9..5198f8d92 100644 --- a/src/portals/PanKbase/views/ToolsPipelines/Template.vue +++ b/src/portals/PanKbase/views/ToolsPipelines/Template.vue @@ -4,7 +4,8 @@
-
+

Tools & Pipelines

+
diff --git a/src/portals/PanKbase/views/Tutorials/Template.vue b/src/portals/PanKbase/views/Tutorials/Template.vue index a0f00b055..19b7d3606 100644 --- a/src/portals/PanKbase/views/Tutorials/Template.vue +++ b/src/portals/PanKbase/views/Tutorials/Template.vue @@ -4,7 +4,8 @@
-
+

Tutorials

+
From 3292594455a524b12001082683f895ba20ba174d Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 3 Jan 2025 12:57:15 -0500 Subject: [PATCH 058/132] first paragraph on metadata standards page --- src/portals/PanKbase/views/MetadataDataStandards/main.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/portals/PanKbase/views/MetadataDataStandards/main.js b/src/portals/PanKbase/views/MetadataDataStandards/main.js index dba362026..1366e81cf 100644 --- a/src/portals/PanKbase/views/MetadataDataStandards/main.js +++ b/src/portals/PanKbase/views/MetadataDataStandards/main.js @@ -18,12 +18,14 @@ new Vue({ computed: { metadataInfo(){ return this.about; - } + }, }, watch: {}, async created() { let content = await getPankbaseContent(this.pageId, true); - this.about = content; + let tag = "

" + let newTag = "

" + this.about = content.replace(tag, newTag); }, render(createElement, context) { return createElement(Template); From 9b83d8990f498cf455f7dc0b443dcc9b15edf8b3 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 3 Jan 2025 12:59:33 -0500 Subject: [PATCH 059/132] People page edits --- src/portals/PanKbase/views/People/Template.vue | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/portals/PanKbase/views/People/Template.vue b/src/portals/PanKbase/views/People/Template.vue index 2063def4b..fd297bef8 100644 --- a/src/portals/PanKbase/views/People/Template.vue +++ b/src/portals/PanKbase/views/People/Template.vue @@ -8,8 +8,8 @@

-

{{ person["Name"] }}

-
{{ person["Affiliation"] }}
+
{{ person["Name"] }}
+
{{ person["Affiliation"] }}

{{ person["Role"] }}

@@ -28,4 +28,7 @@ width: 85%; text-align: justify; } + h5, h6 { + font-weight: bolder; + } \ No newline at end of file From a83baa4943fefbb9afb3fbfc93d4fb5b8008da5d Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 3 Jan 2025 13:03:15 -0500 Subject: [PATCH 060/132] Publications page --- src/portals/PanKbase/utils/content.js | 6 ++++++ src/portals/PanKbase/views/MetadataDataStandards/main.js | 6 ++---- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/portals/PanKbase/utils/content.js b/src/portals/PanKbase/utils/content.js index fd1f934ee..7b60366b8 100644 --- a/src/portals/PanKbase/utils/content.js +++ b/src/portals/PanKbase/utils/content.js @@ -18,4 +18,10 @@ export async function getPankbaseContent(contentId, getBody=false, getAll=false) } let csvContent = jsonContent[0].field_data_points; return dataConvert.csv2Json(csvContent); +} + +export function highlightIntro(content){ + let tag = "

" + let newTag = "

" + return content.replace(tag, newTag); } \ No newline at end of file diff --git a/src/portals/PanKbase/views/MetadataDataStandards/main.js b/src/portals/PanKbase/views/MetadataDataStandards/main.js index 1366e81cf..73d20c5a6 100644 --- a/src/portals/PanKbase/views/MetadataDataStandards/main.js +++ b/src/portals/PanKbase/views/MetadataDataStandards/main.js @@ -3,7 +3,7 @@ import Template from "./Template.vue"; import "../../assets/layout.css"; import "../../assets/pkb-styles.css"; import { pankbaseMixin } from "@/portals/PanKbase/mixins/pankbaseMixin.js"; -import { getPankbaseContent } from "@/portals/PanKbase/utils/content"; +import { getPankbaseContent, highlightIntro } from "@/portals/PanKbase/utils/content"; new Vue({ components: { @@ -23,9 +23,7 @@ new Vue({ watch: {}, async created() { let content = await getPankbaseContent(this.pageId, true); - let tag = "

" - let newTag = "

" - this.about = content.replace(tag, newTag); + this.about = highlightIntro(content); }, render(createElement, context) { return createElement(Template); From bfa755cdf3637d9496063fd42f7946a641fd01d3 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 3 Jan 2025 13:10:47 -0500 Subject: [PATCH 061/132] publications page --- src/portals/PanKbase/views/Publications/Template.vue | 1 + src/portals/PanKbase/views/Publications/main.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/portals/PanKbase/views/Publications/Template.vue b/src/portals/PanKbase/views/Publications/Template.vue index 37f63cb94..44ba7df48 100644 --- a/src/portals/PanKbase/views/Publications/Template.vue +++ b/src/portals/PanKbase/views/Publications/Template.vue @@ -4,6 +4,7 @@

+

Publications

diff --git a/src/portals/PanKbase/views/Publications/main.js b/src/portals/PanKbase/views/Publications/main.js index b1cdf2045..30f40b51c 100644 --- a/src/portals/PanKbase/views/Publications/main.js +++ b/src/portals/PanKbase/views/Publications/main.js @@ -3,7 +3,7 @@ import Template from "./Template.vue"; import "../../assets/layout.css"; import "../../assets/pkb-styles.css"; import { pankbaseMixin } from "@/portals/PanKbase/mixins/pankbaseMixin.js"; -import { getPankbaseContent } from "@/portals/PanKbase/utils/content"; +import { getPankbaseContent, highlightIntro } from "@/portals/PanKbase/utils/content"; new Vue({ components: { @@ -23,7 +23,7 @@ new Vue({ watch: {}, async created() { let content = await getPankbaseContent(this.pageId, true); - this.about = content; + this.about = highlightIntro(content); }, render(createElement, context) { return createElement(Template); From e29bf24481e566fd09e4323c3cd29bb4c27a85a0 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 3 Jan 2025 13:11:25 -0500 Subject: [PATCH 062/132] analytical library --- src/portals/PanKbase/views/AnalyticalLibrary/Template.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/portals/PanKbase/views/AnalyticalLibrary/Template.vue b/src/portals/PanKbase/views/AnalyticalLibrary/Template.vue index 6d535ce4d..414eb59c5 100644 --- a/src/portals/PanKbase/views/AnalyticalLibrary/Template.vue +++ b/src/portals/PanKbase/views/AnalyticalLibrary/Template.vue @@ -4,6 +4,7 @@
+

Analytical Library

From 6670745627735cd5ad0917611425e3745a4354ca Mon Sep 17 00:00:00 2001 From: Alex Shilin Date: Fri, 3 Jan 2025 14:24:01 -0500 Subject: [PATCH 063/132] nav updates --- src/portals/PanKbase/assets/pkbMenu.js | 42 ++++++++++ .../PanKbase/components/pkb-footer.vue | 57 +++---------- .../PanKbase/components/pkb-header.vue | 82 ++++++++----------- 3 files changed, 88 insertions(+), 93 deletions(-) create mode 100644 src/portals/PanKbase/assets/pkbMenu.js diff --git a/src/portals/PanKbase/assets/pkbMenu.js b/src/portals/PanKbase/assets/pkbMenu.js new file mode 100644 index 000000000..932b61b6e --- /dev/null +++ b/src/portals/PanKbase/assets/pkbMenu.js @@ -0,0 +1,42 @@ +export const pkbMenu = { + highlightItems: [ + { label: 'PanKgraph', path: 'https://dev.pankgraph.org/' }, + { label: 'Data Library', path: 'https://data.pankbase.org' }, + { label: 'Integrated Cell Browser', path: '/single-cell.html' } + ], + menuItems: [ + { + label: 'Data', path: '', + subMenuItems: [ + { label: 'Data Browser', path: '/data-browser.html' }, + { label: 'Donor Metadata', path: 'http://tools.cmdga.org:3838/metadata_analysis_assays/' }, + { label: 'APIs', path: '/apis.html' } + ] + },{ + label: 'Resources', path: '', + subMenuItems: [ + { label: 'Integrated Cell Browser', path: '/single-cell.html' }, + { label: 'Analytical Library', path: '/analytical-library.html' }, + { label: 'Publications', path: '/publications.html' } + ] + },{ + label: 'About', path: '', + subMenuItems: [ + { label: 'Project', path: '/projects.html' }, + { label: 'People', path: '/people.html' }, + { label: 'Policies', path: '/policies.html' }, + { label: 'Programs', path: '/programs.html' }, + { label: 'Collaborate', path: '/collaborate.html' } + ] + },{ + label: 'Help', path: '', + subMenuItems: [ + { label: 'Contact', path: '/contact.html' }, + { label: 'Metadata | Data Standards', path: '/metadata-data-standards.html' }, + { label: 'Tools | Pipelines', path: '/tools-pipelines.html' }, + { label: 'Tutorials', path: '/tutorials.html' }, + { label: 'News', path: '/news.html' } + ] + } + ], +} \ No newline at end of file diff --git a/src/portals/PanKbase/components/pkb-footer.vue b/src/portals/PanKbase/components/pkb-footer.vue index 014d724c1..8675bf4b9 100644 --- a/src/portals/PanKbase/components/pkb-footer.vue +++ b/src/portals/PanKbase/components/pkb-footer.vue @@ -1,53 +1,15 @@ + + \ No newline at end of file diff --git a/src/portals/MousePortal/components/mouse-header.vue b/src/portals/MousePortal/components/mouse-header.vue index ef0afe0ed..274148fc9 100644 --- a/src/portals/MousePortal/components/mouse-header.vue +++ b/src/portals/MousePortal/components/mouse-header.vue @@ -1,5 +1,44 @@ \ No newline at end of file + + + \ No newline at end of file diff --git a/src/portals/MousePortal/views/Index/Template.vue b/src/portals/MousePortal/views/Index/Template.vue index 1ad757d74..abdedd183 100644 --- a/src/portals/MousePortal/views/Index/Template.vue +++ b/src/portals/MousePortal/views/Index/Template.vue @@ -1,5 +1,7 @@ \ No newline at end of file diff --git a/src/portals/MousePortal/views/Index/main.js b/src/portals/MousePortal/views/Index/main.js index 6493f6fc7..0d6340bc1 100644 --- a/src/portals/MousePortal/views/Index/main.js +++ b/src/portals/MousePortal/views/Index/main.js @@ -1,6 +1,7 @@ import Vue from "vue"; import Template from "./Template.vue"; import "../../assets/layout.css"; +import "../../assets/mouseportal.css"; import { mouseMixin } from "@/portals/MousePortal/mixins/mouseMixin.js"; new Vue({ From 2d7ea06d9a7d5cfdd0a11b01f8cd76b97380f9d3 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 17 Jan 2025 14:34:14 -0500 Subject: [PATCH 115/132] making it more like pigean --- .../MousePortal/views/Index/Template.vue | 225 +++++++++++++++++- src/portals/MousePortal/views/Index/main.js | 16 ++ src/portals/MousePortal/views/Index/store.js | 26 ++ 3 files changed, 261 insertions(+), 6 deletions(-) create mode 100644 src/portals/MousePortal/views/Index/store.js diff --git a/src/portals/MousePortal/views/Index/Template.vue b/src/portals/MousePortal/views/Index/Template.vue index abdedd183..68652a9c0 100644 --- a/src/portals/MousePortal/views/Index/Template.vue +++ b/src/portals/MousePortal/views/Index/Template.vue @@ -1,7 +1,220 @@ \ No newline at end of file +
+ + + +
+
+
+
+
+
+
+ + Priors Inferred from GEne + ANotations +
+
+
+ + + +
+
+
+

+ Search for gene, geneset or phenotype +

+ +
+
+
+ + +
+
+
+ + +
+ + +
+ + diff --git a/src/portals/MousePortal/views/Index/main.js b/src/portals/MousePortal/views/Index/main.js index 0d6340bc1..463b6fccb 100644 --- a/src/portals/MousePortal/views/Index/main.js +++ b/src/portals/MousePortal/views/Index/main.js @@ -1,10 +1,14 @@ import Vue from "vue"; import Template from "./Template.vue"; +import store from "./store.js"; + import "../../assets/layout.css"; import "../../assets/mouseportal.css"; import { mouseMixin } from "@/portals/MousePortal/mixins/mouseMixin.js"; +import { pageMixin } from "@/mixins/pageMixin.js"; new Vue({ + store, components: { }, mixins: [mouseMixin], @@ -12,6 +16,18 @@ new Vue({ return { }; }, + computed: { + diseaseGroup() { + return this.$store.getters["bioPortal/diseaseGroup"]; + }, + frontContents() { + let contents = this.$store.state.kp4cd.frontContents; + if (contents.length === 0) { + return {}; + } + return contents[0]; + }, + }, watch: {}, async created() { }, diff --git a/src/portals/MousePortal/views/Index/store.js b/src/portals/MousePortal/views/Index/store.js new file mode 100644 index 000000000..9db24aa75 --- /dev/null +++ b/src/portals/MousePortal/views/Index/store.js @@ -0,0 +1,26 @@ +import Vue from "vue"; +import Vuex from "vuex"; +import bioPortal from "@/modules/bioPortal"; +import bioIndex from "@/modules/bioIndex"; +import kp4cd from "@/modules/kp4cd"; +import keyParams from "@/utils/keyParams"; +import bioIndexUtils from "@/utils/bioIndexUtils"; + +Vue.use(Vuex); + +export default new Vuex.Store({ + modules: { + bioPortal, + kp4cd, + }, + state: { + }, + + mutations: {}, + + getters: { + }, + + actions: { + }, +}); From e90705c68cd469762051f84ea536f340dbb652f6 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 17 Jan 2025 15:21:24 -0500 Subject: [PATCH 116/132] cmdkp styling --- src/portals/MousePortal/assets/mdkp_copy.css | 2489 +++++++++++++++++ src/portals/MousePortal/assets/pop_out.svg | 29 + .../MousePortal/assets/pop_out_over.svg | 28 + .../MousePortal/views/Index/Template.vue | 50 +- src/portals/MousePortal/views/Index/main.js | 11 +- 5 files changed, 2574 insertions(+), 33 deletions(-) create mode 100644 src/portals/MousePortal/assets/mdkp_copy.css create mode 100644 src/portals/MousePortal/assets/pop_out.svg create mode 100644 src/portals/MousePortal/assets/pop_out_over.svg diff --git a/src/portals/MousePortal/assets/mdkp_copy.css b/src/portals/MousePortal/assets/mdkp_copy.css new file mode 100644 index 000000000..c6573acac --- /dev/null +++ b/src/portals/MousePortal/assets/mdkp_copy.css @@ -0,0 +1,2489 @@ +@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:100,200,300,400italic,400,700,700italic|Open+Sans:400,600, 700,700italic,600italic,600,400italic|Oswald:400,300,700"); + +body.kp-default { + background-color: #eee; + font-family: "Roboto", Arial, sans-serif; +} + +a { + /*color: #0097d6 !important;*/ + color: #007bff !important; +} + +a:hover { + /*text-decoration: none !important;*/ +} + +/*huge calculator*/ +#posteriorpriorplot .center-posterior-prior-plot { + display: flex; + justify-content: center; + align-items: center; + height: 200px; + border: 3px solid green; +} + +/* front page */ +.front-top-banner-agingkp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/agingkp_front_bg.png), + linear-gradient(#75bee9, #20c4f4); + background-position: 120% 100px, top left; +} + +.front-top-banner-kidneykp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/kidneykp_front_bg.png), + linear-gradient(#96cbca, #619faf); + background-position: 120% 100px, top left; +} + +.front-top-banner-autoimmunekp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/autoimmunekp_front_bg.png), + linear-gradient(#71cddd, #009bc8); + background-position: 120% 100px, top left; +} + +.front-top-banner-ocularkp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/ocular_front_bg.png), + linear-gradient(#008fd0, #005e9e); + background-position: 120% 100px, top left; +} + +.front-top-banner-reproductivekp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/reproductive_front_bg.png), + linear-gradient(#8f7fbb, #5e53a3); + background-position: 120% 100px, top left; +} + +.front-top-banner-mdkp { + /*background-image: url(//kp4cd.org/sites/default/files/vueportal/mdkp_front_bg.png), + linear-gradient(#0097d6, #8ed8f8);*/ + background-image: linear-gradient(#0077b6, #5ec8e8); + background-position: 120% 0px, top left; +} + +.front-top-banner-cvdkp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/cvdkp_front_bg.png), + linear-gradient(#f58752, #fdbc63); + background-position: 120% 100px, top left; +} + +.front-top-banner-sleepkp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/sleepkp_front_bg.png), + linear-gradient(#74b9e2, #477cbf); + background-position: 120% 100px, top left; +} + +.front-top-banner-t2dkp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/t2dkp_front_bg.png), + linear-gradient(#55aaee, #3c80bd); + background-position: 120% 100px, top left; +} + +.front-top-banner-skinkp { + background-image: linear-gradient(#286FB7, #61C2EE); + background-position: 120% 0px, top left; +} + +.front-top-banner-cdkp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/cdkp_front_bg.png), + linear-gradient(#73d253, #38942d); + background-position: 120% 100px, top left; +} + +.front-top-banner-v2fkp, +.front-top-banner-a2fkp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/a2fkp_front_bg.png), + linear-gradient(#f7835c, #bd516f); + background-position: 100% 300px, top left; +} + +.front-top-banner-t1dkp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/t1dkp_front_bg.png), + linear-gradient(#5481c1, #aec5e7); + background-position: 120% 100px, top left; +} + +.front-top-banner-mskkp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/mskkp_front_bg.png), + linear-gradient(#bcafd6, #918bc3); + background-position: 120% 100px, top left; +} + +.front-top-banner-lungkp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/lungkp_front_bg.png), + linear-gradient(#7accc8, #08b89d); + background-position: 120% 100px, top left; +} + +.front-top-banner-alskp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/alskp_front_bg.png), + linear-gradient(#5eb9e9, #4967b0); + background-position: 120% 100px, top left; +} + +.front-top-banner-nephkp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/nephkp_front_bg.png), + linear-gradient(#39bbed, #59be86); + background-position: 120% 100px, top left; +} + +.front-top-banner-ndkpkp { + background-image: url(//kp4cd.org/sites/default/files/vueportal/ndkpkp_front_bg.png), + linear-gradient(#5698d2, #70a4d8); + background-position: 120% 100px, top left; +} + +.front-top-banner-nagekp { + background-image: linear-gradient(#751dc7, #9928c5); + background-position: 120% 0px, top left; +} + +.front-top-banner { + font-size: 16px; + background-repeat: no-repeat; + padding: 30px 0 20px 0; +} + +.front-logo-wrapper { + margin-left: auto; + margin-right: auto; + width: 900px; +} + +.front-logo-img { + width: 470px; + padding-right: 30px; + border-right: solid 1px #fff; + margin-right: 30px; + padding: 20px 20px 20px 0; + float: left; +} + +.front-top-banner-mdkp .front-logo-img { + width: 490px; + margin-left: -20px; + border-right: solid 1px #5ec8e8; + padding: 0 20px 20px 0; +} + +.front-top-banner-cvdkp .front-logo-img { + width: 430px; +} + +.front-top-banner-cdkp .front-logo-img { + width: 430px; +} + +.front-top-banner-sleepkp .front-logo-img { + width: 430px; +} + +.front-top-banner-t2dkp .front-logo-img { + width: 430px; +} + +.front-top-banner-skinkp .front-logo-img { + width: 430px; +} + +.front-top-banner-v2fkp .front-logo-img, +.front-top-banner-a2fkp .front-logo-img { + width: 430px; +} + +.front-top-banner-t1dkp .front-logo-img { + width: 430px; +} + +.front-top-banner-mskkp .front-logo-img { + width: 470px; +} + +.front-top-banner-alskp .front-logo-img { + width: 430px; +} + +.front-top-banner-nephkp .front-logo-img { + width: 430px; +} + +.front-top-banner-ndkpkp .front-logo-img { + width: 470px; +} + +.front-top-banner-nagekp .front-logo-img { + width: 470px; +} + +.front-banner-btn { + border-radius: 30px !important; + width: 250px; + background: none; + border: solid 1px #fff !important; + color: #fff !important; +} + +.front-logo-tagline { + color: #fff; + width: 400px; + font-size: 24px; + display: block; + float: left; +} + +.front-logo-tagline-agingkp { + transform: translate(0%, 70%); +} + +.front-logo-tagline-kidneykp { + transform: translate(0%, 75%); +} + +.front-logo-tagline-autoimmunekp { + transform: translate(0%, 25%); +} + +.front-logo-tagline-ocularkp { + transform: translate(0%, 35%); +} + +.front-logo-tagline-reproductivekp { + transform: translate(0%, 35%); +} + +.front-logo-tagline-mdkp { + transform: translate(0%, 65%); +} + +.front-logo-tagline-t2dkp { + transform: translate(0%, 20%); +} + +.front-logo-tagline-skinkp { + transform: translate(0%, 80%); +} + +.front-logo-tagline-cvdkp { + transform: translate(0%, 29%); +} + +.front-logo-tagline-cdkp { + transform: translate(0%, 35%); +} + +.front-logo-tagline-sleepkp { + transform: translate(0%, 35%); +} + +.front-logo-tagline-v2fkp, +.front-logo-tagline-a2fkp { + transform: translate(0%, 85%); +} + +.front-logo-tagline-t1dkp { + transform: translate(0%, 20%); +} + +.front-logo-tagline-mskkp { + transform: translate(0%, 25%); +} + +.front-logo-tagline-lungkp { + transform: translate(0%, 85%); +} + +.front-logo-tagline-alskp { + transform: translate(0%, 20%); +} + +.front-logo-tagline-nephkp { + transform: translate(0%, 20%); +} + +.front-logo-tagline-ndkpkp { + transform: translate(0%, 25%); +} + +.front-logo-tagline-nagekp { + transform: translate(0%, 8%); +} + +.front-banner-ui-tabs { + width: 800px; + margin-left: auto; + margin-right: auto; + text-align: center; + margin-top: 70px; + border-bottom: solid 1px rgba(255, 255, 255, 1); + font-size: 45px; + padding-bottom: 15px; + color: #fff; +} + +.amp-banner-2021 { + height: 70px; + background-position-x: right; + background-position-y: top; + background-image: url(//kp4cd.org/sites/default/files/vueportal/amp_banner_bg.jpg); + border-bottom: solid 1px #acd; +} + +.amp-header { + height: 70px; + background-image: url(//kp4cd.org/sites/default/files/vueportal/amp_banner_middle.png); + background-size: 100% 70px; +} + +.amp-banner-right { + width: 100%; + height: 70px; + background-image: url(//kp4cd.org/sites/default/files/vueportal/amp_banner_right.png); + background-repeat: no-repeat; + background-position: right; +} + +.amp-banner-left { + height: 70px; + background-image: url(//kp4cd.org/sites/default/files/vueportal/amp_banner_left.png); + background-repeat: no-repeat; + background-position: left top; + padding: 15px 0 0 20px; +} + +.amp-banner-left a { + color: #fff !important; + font-size: 30px; + font-weight: 200; + letter-spacing: 0.01em; + text-decoration: none; +} + +.portals-2-mdkp-logo { + width: 500px; +} + +.agingkp-logo { + height: 50px; +} + +.kidneykp-logo { + height: 50px; +} + +.autoimmunekp-logo { + height: 50px; +} + +.ocularkp-logo { + height: 50px; +} + +.reproductivekp-logo { + height: 50px; +} + +.mdkp-logo { + height: 50px; +} + +.t2dkp-logo { + height: 50px; +} + +.skinkp-logo { + height: 50px; +} + +.cvdkp-logo { + height: 50px; +} + +.cdkp-logo { + height: 50px; +} + +.sleepkp-logo { + height: 50px; +} + +.v2fkp-logo, +.a2fkp-logo { + height: 50px; +} + +.t1dkp-logo { + height: 50px; +} + +.mskkp-logo { + height: 50px; +} + +.lungkp-logo { + height: 50px; +} + +.alskp-logo { + height: 50px; +} + +.nephkp-logo { + height: 50px; +} + +.ndkpkp-logo { + height: 50px; +} + +.nagekp-logo { + height: 50px; +} + +.registered-mark { + display: none; +} + +.mdkp-footer .registered-mark { + display: contents; +} + +.agingkp-header, +.agingkp-footer { + background-color: #75bee9; + height: 50px; +} + +.kidneykp-header, +.kidneykp-footer { + background-color: #96cbca; + height: 50px; +} + +.autoimmunekp-header, +.autoimmunekp-footer { + background-color: #71cddd; + height: 50px; +} + +.ocularkp-header, +.ocularkp-footer { + background-color: #008fd0; + height: 50px; +} + +.reproductivekp-header, +.reproductivekp-footer { + background-color: #8f7fbb; + height: 50px; +} + +.mdkp-header, +.mdkp-footer { + background-color: #0077b6; + height: 50px; +} + +.cvdkp-header, +.cvdkp-footer { + background-color: #f58752; + height: 50px; +} + +.sleepkp-header, +.sleepkp-footer { + background-color: #74b9e2; + height: 50px; +} + +.cdkp-header, +.cdkp-footer { + background-color: #73d253; + height: 50px; +} + +.t2dkp-header, +.t2dkp-footer { + background-color: #55aaee; + height: 50px; +} + +.skinkp-header, +.skinkp-footer { + background-color: #286fb7; + height: 50px; +} + +.v2fkp-header, +.v2fkp-footer, +.a2fkp-header, +.a2fkp-footer { + background-color: #f7835c; + height: 50px; +} + +.t1dkp-header, +.t1dkp-footer { + background-color: #5481c1; + height: 50px; +} + +.mskkp-header, +.mskkp-footer { + background-color: #bcafd6; + height: 50px; +} + +.lungkp-header, +.lungkp-footer { + background-color: #7accc8; + height: 50px; +} + +.alskp-header, +.alskp-footer { + background-color: #5eb9e9; + height: 50px; +} + +.nephkp-header, +.nephkp-footer { + background-color: #39bbed; + height: 50px; +} + +.ndkpkp-header, +.ndkpkp-footer { + background-color: #5698d2; + height: 50px; +} + +.nagekp-header, +.nagekp-footer { + background-color: #751dc7; + height: 50px; +} + +.kp-menu-wrapper { + text-align: right; +} + +.a2fkp-header>.a2fkp-logo-wrapper { + flex: 0 0 100%; + max-width: 100%; +} + +.a2fkp-header>.kp-menu-wrapper { + position: absolute; + right: 15px; +} + +.portal-menu-wrapper, +.login-menu-wrapper { + display: inline-block; +} + +.portal-menu-wrapper ul, +.login-menu-wrapper ul, +.portal-menu-wrapper, +.login-menu-wrapper { + list-style: none; + margin: 0; + padding: 0; +} + +.portal-menu-wrapper>ul>li, +.login-menu-wrapper>ul>li { + display: inline-block; + position: relative; + padding-top: 15px; +} + +.login-menu-wrapper>ul>li>a { + border-left: solid 1px #fff; +} + +.portal-menu-wrapper>ul>li>a, +.login-menu-wrapper>ul>li>a { + padding-left: 10px; + padding-right: 10px; + padding-top: 5px; + padding-bottom: 5px; + color: #fff !important; + font-size: 16px; + font-weight: 300; +} + +.portal-menu-wrapper .item+.item:before { + content: "" !important; +} + +.portal-menu-wrapper>ul>li>ul { + display: none; + position: absolute; + z-index: 100000; + padding: 0; + margin: 0; +} + +.portal-menu-wrapper>ul>li:hover>ul { + display: block; +} + +.portal-menu-wrapper>ul>li>ul>li { + width: 100%; + padding: 0 !important; + font-size: 0.8em; + background-color: rgba(100, 100, 100, 0.85); + text-align: left; + list-style: none; +} + +.portal-menu-wrapper>ul>li>ul>li:hover { + background-color: rgba(90, 90, 90, 1); +} + +.portal-menu-wrapper>ul>li>ul>li>a { + display: block; + width: 100%; + padding: 5px 15px 5px 15px; + border-bottom: solid 1px #666; + list-style: none; + white-space: nowrap; + color: #ffffff !important; + font-size: 16px; + font-weight: 300; +} + +.agingkp-footer, +.kidneykp-footer, +.autoimmunekp-footer, +.ocularkp-footer, +.reproductivekp-footer, +.mdkp-footer, +.cvdkp-footer, +.sleepkp-footer, +.t2dkp-footer, +.skinkp-footer, +.cdkp-footer, +.v2fkp-footer, +.a2fkp-footer, +.t1dkp-footer, +.mskkp-footer, +.lungkp-footer, +.alskp-footer, +.nephkp-footer, +.ndkpkp-footer, +.nagekp-footer { + text-align: center; + padding-top: 15px; + color: #fff; + font-weight: 300; + font-size: 14px; +} + +.agingkp-body, +.kidneykp-body, +.autoimmunekp-body, +.ocularkp-body, +.reproductivekp-body, +.mdkp-body, +.cvdkp-body, +.sleekp-body, +.t2dkp-body, +.skinkp-body, +.cdkp-body, +.v2fkp-body, +.a2fkp-body, +.t1dkp-body, +.mskkp-body, +.lungkp-body, +.alskp-body, +.nephkp-body, +.ndkpkp-body, +.nagekp-body { + background-color: #eee; + min-height: 400px; + padding-top: 10px; + padding-bottom: 10px; +} + +.agingkp-card, +.kidneykp-card, +.autoimmunekp-card, +.ocularkp-card, +.reproductivekp-card, +.mdkp-card, +.cvdkp-card, +.sleepkp-card, +.t2dkp-card, +.skinkp-card, +.cdkp-card, +.v2fkp-card, +.a2fkp-card, +.t1dkp-card, +.mskkp-card, +.lungkp-card, +.alskp-card, +.nephkp-card, +.ndkpkp-card, +.nagekp-card { + margin-top: 10px; + margin-bottom: 10px; + min-width: 1024px !important; +} + +.card.gem-wrapper { + box-shadow: inset 0 0 5px #00000050; + border: solid 1px #9cf; +} + +.portal-front-tabs { + margin-top: 50px; +} + +.portal-front-tabs .nav-tabs .nav-link, +.portal-front-tabs .nav-tabs .nav-link.active, +.portal-front-tabs .nav-tabs .nav-item.show .nav-link { + color: rgba(255, 255, 255, 0.75) !important; + font-size: 25px; + background: none; + border-color: rgba(255, 255, 255, 0.5); + border-radius: 0; + border-top: none; + margin-right: -1px; +} + +.portal-front-tabs .nav-tabs .nav-link.active { + color: rgba(255, 255, 255, 1) !important; + background-image: linear-gradient(rgba(255, 255, 255, 0), + rgba(255, 255, 255, 0), + rgba(255, 255, 255, 0), + rgba(255, 255, 255, 0.5)); +} + +.portal-front-tabs .tab-content { + padding-top: 20px; + padding-bottom: 20px; +} + +.portal-front-tabs .tab-content .v-select { + width: 50%; + margin: auto; +} + +.portal-front-tabs .tab-content .vs__clear { + width: 20px; +} + +.portal-front-tabs .tab-content .vs__open-indicator { + height: 10px; +} + +.portal-front-tabs .tab-content .vs__dropdown-toggle { + background-color: rgba(255, 255, 255, 0.75); + border-color: #fff; + height: 50px; +} + +.portal-front-tabs .tab-content .disease-group-select { + width: 50%; + margin: auto; +} + +.portal-front-tabs .tab-content .disease-group-select select { + height: 50px; + width: 100%; + font-size: 16px; + background-color: rgba(255, 255, 255, 0.75); + border-color: #fff; +} + +/* front page datasets info graphs */ + +.front-datasets-graph, +.front-phenotypes-graph { + width: 50%; + padding: 0px 10px 20px 10px; + display: inline-block; + position: relative; +} + +.front-datasets-graph .each-item, +.front-phenotypes-graph .each-item { + font-size: 16px; + position: relative; + width: 100%; + height: 30px; + margin-bottom: 3px; +} + +.front-datasets-graph .percent-bg, +.front-phenotypes-graph .percent-bg { + position: absolute; + left: 0; + top: 0; + background-color: #ccc; + border-radius: 30px; + width: 0%; + transition: width 2s; + height: 30px; +} + +.front-datasets-graph .percent-bg { + background-color: rgba(0, 185, 242, 0.5); +} + +.front-phenotypes-graph .percent-bg { + background-color: rgba(128, 194, 66, 0.5); +} + +.front-datasets-graph .info-label, +.front-phenotypes-graph .info-label { + position: absolute; + left: 10px; + top: 5px; + font-size: 14px; +} + +.header-disease-group-select-wrapper { + display: inline-block; + border-left: solid 1px #ddd; + margin-left: 10px; + padding-left: 10px; + padding-top: 5px; + padding-bottom: 5px; +} + +.header-disease-group-select-wrapper select { + color: #fff; + background: none; + border: none; +} + +.gene-page-header .card-body { + padding: 0px 15px !important; +} + +.gene-page-header-title { + font-size: 12px; + padding: 2px 0 2px 5px; + border-bottom: solid 1px #eee; + border-left: solid 1px #eee; +} + +a.edit-btn { + position: absolute; + top: 0; + right: 0; + background-color: #ddd; + color: #fff; + font-size: 12px; + padding: 2px 5px; + z-index: 15; +} + +a.edit-btn:hover { + cursor: pointer; +} + +.gene-page-header-search-holder { + position: absolute; + top: 0; + left: 0; + /*height: 65px;*/ + width: 100%; + background-color: #fff; + font-size: 16px; + z-index: 10; +} + +.shorten-when-full { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gene-page-header-body { + /*height: 65px;*/ + font-size: 25px; + padding: 12px 0 12px 5px; + border-left: solid 1px #eee; +} + +.gene-page-header-search-holder {} + +div.filtering-tools { + border: solid 1px #ddd; + border-radius: 5px; + background-color: #efefef; + text-align: center; + margin-bottom: 40px; + padding-top: 8px; +} + +div.filtering-tools table td, +div.filtering-tools table th { + padding-right: 10px; + padding-left: 10px; + border-right: solid 1px #fff; +} + +.table-filter label { + display: block; + max-width: 100%; + margin-bottom: 20px; + font-weight: 700; +} + +.phenotype-btn { + position: relative; +} + +.phenotype-btn.mr-1 { + margin-right: 10px !important; +} + +.phenotype-btn>span.remove { + font-family: "Roboto"; + font-size: 1.2em; + position: absolute; + background-color: #ccc; + color: #000; + font-size: 12px; + font-weight: 800; + width: 18px; + height: 18px; + border-radius: 10px; + padding: 2px; + padding-top: 1px; + top: -5px; + right: -5px; + text-align: center; +} + +.phenotype-btn:hover>span.remove { + background-color: #000; + color: #fff; +} + +#phenotypeSearchHolder input.form-control, +#datasetSearchHolder input.form-control { + border-radius: 0; + border: solid 1px #ddd; + height: 65px; + width: 100%; + font-size: 20px; + background-image: url("/images/searchicon.png"); + background-position: 10px 20px; + background-repeat: no-repeat; + padding-left: 40px; +} + +.search-header { + margin-top: -10px; + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + background-color: #bbbbbb !important; + font-size: 14px !important; + padding: 1px !important; + color: #333333; + font-weight: 300 !important; + border: none !important; + position: relative; + z-index: 10; +} + +.search-header.fixed-header { + position: fixed; + top: 8px; + width: calc(100% - 30px); + background-color: #bbbbbb; + left: 15px; +} + +.search-header .row { + padding: 0 1.25rem; +} + +.search-header div[class^="col-md-"] { + padding: 0; +} + +.search-header .input-wrapper input[type="text"] { + border: none; + border-radius: 0; + border-right: solid 1px #ddd; + display: inline-block; +} + +.reset-page-parameters { + position: relative; + display: block; + width: 250px; + margin-left: auto; + margin-right: auto; + margin-bottom: -25px; + padding: 5px 15px; + background-color: #bbbbbb; + border-bottom-left-radius: 5px !important; + border-bottom-right-radius: 5px !important; + font-weight: 400; +} + +.reset-page-parameters:hover { + cursor: pointer; +} + +#regionSearchHolder .region-search { + height: 100%; +} + +.region-search>.input-wrapper { + display: inline-block !important; +} + +.region-search-examples { + text-align: center; + color: #fff; + margin-top: 10px; +} + +.region-search-examples a { + color: #fff !important; +} + +#regionSearchHolder .input-wrapper { + display: inline-block; + min-height: 100%; + position: relative; + padding: 0; + margin: 0; +} + +#regionSearchHolder .input-wrapper span.gene-search-or { + position: absolute; + display: block; + background-color: #ccc; + width: 30px; + height: 30px; + color: #fff; + border-radius: 20px; + padding-top: 3px; + margin: auto; + position: absolute; + text-align: center; + top: 25%; +} + +#regionSearchHolder .input-default, +#variantSearchHolder .input-default, +#regionSearchHolder .input-group, +#variantSearchHolder .input-group, +#regionSearchHolder input.form-control, +#variantSearchHolder input.form-control { + height: 100%; + width: 100%; + border: 0; + position: absolute; + top: 0; + left: 0; + border-left: solid 1px #ddd; + border-radius: 0; + font-size: 20px; +} + +#regionSearchHolder .vbt-autcomplete-list, +#variantSearchHolder .vbt-autcomplete-list { + top: 95% !important; + height: auto !important; +} + +#variantSearchHolder div { + height: 100%; + display: inline-block; + vertical-align: top; +} + +#variantSearchHolder div.search-example, +div.search-example { + font-size: 14px; + padding-top: 8px; +} + +#regionSearchHolder #regionSearchGo, +#variantSearchHolder #variantSearchGo { + position: absolute; + padding: 0; + top: 13px; + right: calc(50% - 20px); + height: 40px; + width: 40px; + border-radius: 30px; + background-color: #0097d6; + border: solid 1px #0097d6; + text-align: center; +} + +.front-gene-search-wrapper, +.front-dataset-search-wrapper, +.front-phenotype-search-wrapper { + width: 50%; + margin: auto; +} + +.front-gene-search-wrapper .input-wrapper { + display: inline-block; + padding: 0; +} + +.front-gene-search-wrapper .input-wrapper .input-default, +.front-phenotype-search-wrapper input { + height: 50px; + background-color: rgba(255, 255, 255, 0.75); + border-color: #fff; + width: 100%; +} + +.front-gene-search-wrapper #regionSearchGo { + padding: 0; + height: 50px; + width: 50px; + border-radius: 30px; + background-color: rgba(255, 255, 255, 0.75); + border: solid 1px rgba(255, 255, 255, 1); + text-align: center; + color: #666; + margin-left: 10px; +} + +.gene-with-signal { + display: inline-block; + margin: 0px 10px 10px 0; + padding: 2px 20px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + font-size: 13px; + color: #007bff; +} + +.gene-with-signal>a { + text-decoration: none; +} + +.gene-with-signal.protein_coding { + cursor: pointer; + background-color: #a0d7ff; + border: solid 1px #30b7f6; +} + +.gene-with-signal.antisense { + cursor: pointer; + background-color: #b7eab7; + border: solid 1px #72ce49; +} + +.gene-with-signal.none { + background-color: #eee; + border: solid 1px #ccc; +} + +.phenotype-with-signal.high { + background-color: #a0d7ff; + border: solid 1px #30b7f6; +} + +.phenotype-with-signal.moderate { + /*background-color: #d0efff; + border: solid 1px #30b7f6;*/ + background-color: #ffffb3; + border: solid 1px #ffcc44; +} + +.phenotype-with-signal.none { + background-color: #eee; + border: solid 1px #ccc; +} + +.phenotype-with-signal.none.hidden { + display: none; +} + +.variant-table-row.high { + background-color: #d0efff; +} + +.variant-table-cell.high { + background-color: #d0efff; +} + +.c3 .c3-axis-x path, +.c3 .c3-axis-x line { + fill: none; + stroke: #000; + stroke-width: 0.5px; +} + +.c3 .c3-axis-x .c3-axis-x-label, +.c3 .c3-axis-y .c3-axis-y-label { + font-size: 12px; +} + +.c3 .c3-axis-y path, +.c3 .c3-axis-y line { + fill: none; + stroke: #000; + stroke-width: 0.5px; +} + +.static-content-section { + padding-top: 50px; +} + +.under-datasets-section-wrapper { + margin-top: 40px; + padding-top: 20px; + padding-bottom: 20px; +} + +.under-datasets-section-wrapper h4.header { + font-weight: 400; + font-size: 35px; + font-family: "Oswald"; + margin: 2px 0 0 10px; + padding: 0px 5px 2px 5px; + border: solid 1px #ddd; + border-right: none; + border-left: none; +} + +.under-datasets-section-wrapper ul { + list-style: none; + padding: 0; + margin-top: 20px; +} + +.under-datasets-section-wrapper ul li { + display: block; + clear: both; + font-family: Oswald; + font-size: 30px; + line-height: 25px; + margin-bottom: 30px; +} + +.under-datasets-section-wrapper ul li img { + display: block; + float: left; + margin-right: 15px; + width: 80px; + height: 80px; + margin-top: -15px; +} + +.under-datasets-section-wrapper ul li a { + font-size: 20px; + font-family: "Roboto", Arial, sans-serif; + font-weight: 500; +} + +#news-feed { + position: relative; + height: 140px; + margin-bottom: 30px; +} + +#news-feed ul.news-items { + list-style: none; + padding: 0; + margin: 0; +} + +#news-feed ul.news-items li { + padding: 0; + margin: 0; + display: none; +} + +#news-feed ul.news-items li:first-child { + display: block; +} + +#news-feed ul.news-items li span p { + display: contents; +} + +#news-feed .news-items-ui { + position: absolute; + top: 10px; + right: 0; +} + +#news-feed .news-items-ui a { + display: inline-block; + width: 16px; + height: 16px; + border-radius: 8px; + background-color: #aaa; + color: #fff !important; + font-size: 10px; + margin-left: 7px; + font-size: 12px; + text-align: center; +} + +#news-feed .news-items-ui a.on-view { + background-color: #0097d6; +} + +path.slice { + stroke-width: 2px; +} + +polyline { + opacity: 0.3; + stroke: black; + stroke-width: 2px; + fill: none; +} + +.slice-value { + font-family: "Oswald"; + font-size: 30px; +} + +.slice-label { + font-size: 12px; +} + +.p-bellow-section-header { + font-size: 16px; + margin-bottom: 20px; +} + +.popped-out { + position: fixed; + z-index: 100; + top: 2%; + width: 96%; + left: 2%; + height: 96% !important; + max-height: 96% !important; +} + +.pop-out-icon { + display: block; + background-image: url(pop_out.svg); + width: 20px; + height: 20px; + background-position: center; + background-repeat: no-repeat; + float: right; + margin-top: -10px; + margin-right: -10px; +} + +.pop-out-icon:hover { + background-image: url(pop_out_over.svg); +} + +.hidden, +.row.hidden { + display: none; +} + +.front-page-body { + background-color: #fff !important; +} + +.pagination.b-pagination { + border: solid 1px #dddddd; + border-radius: 25px; + padding: 3px 10px; + font-size: 15px; + /* width: fit-content;*/ + margin: auto; + width: intrinsic; + /* Safari/WebKit uses a non-standard name */ + width: -moz-max-content; + /* Firefox/Gecko */ + width: -webkit-max-content; + /* Chrome */ +} + +.pagination.b-pagination .page-item { + display: inline-block; +} + +.pagination.b-pagination .page-link { + border: solid 1px #fff !important; + border-radius: 20px; + min-width: 31px; + height: 31px; +} + +.pagination.b-pagination .page-item:last-child .page-link, +.pagination.b-pagination .page-item:first-child .page-link { + border-radius: 20px; +} + +.alternative-names span::after { + content: ", "; +} + +.alternative-names span:last-child::after { + content: ""; +} + +.dataset-page-header .card-body h2 { + margin: 0 !important; +} + +/* Filtering UI */ +div.filtering-ui-wrapper { + border: solid 1px #ddd; + border-radius: 5px; + background-color: #efefef; + text-align: center; + margin-bottom: 10px; + padding: 3px 0; + position: relative; +} + +div.filtering-ui-wrapper.add-content { + background-color: #ddefff; + border: 1px solid #bbdfff; +} + +div.filtering-ui-wrapper .filter-by-label { + font-size: 14px; + font-weight: 600; +} + +div.filtering-ui-wrapper .list-group { + text-align: left; +} + +div.selected-filters-ui-wrapper { + margin-bottom: 30px; + text-align: center; + font-size: 14px; + font-weight: 400; + min-height: 1px; +} + +div.selected-filters-ui-wrapper .badge-pill { + font-size: 12px; + font-weight: 400; + margin: 0 3px; +} + +div.filtering-ui-content { + width: auto !important; + display: block; +} + +div.filtering-ui-content .divider.col { + width: 1px !important; + height: 61px; + padding: 0 1px 0 0; + background-color: #aaa; + margin-bottom: -17px; + margin-left: 8px; + margin-right: 8px; +} + +div.filtering-ui-content .divider.col .or-text { + display: block; + position: absolute; + left: -8px; + top: 35%; + font-size: 10px; + background-color: #aaa; + color: #fff; + padding: 2px 2px 1px 2px; + border-radius: 14px; +} + +#pageSearchParameters .divider.col { + width: 1px !important; + height: 61px; + padding: 0 1px 0 0; + background-color: #fff; + margin-bottom: -17px; + margin-left: 8px; + margin-right: 8px; +} + +#pageSearchParameters .divider.col .or-text { + display: block; + position: absolute; + left: -6px; + top: 35%; + font-size: 10px; + background-color: #666; + color: #fff; + padding: 2px 2px 1px 2px; + border-radius: 14px; + width: 18px; + font-weight: 500; + height: 18px; +} + +#pageSearchParameters .btn.go { + border: 1px solid #ced4da; + border-radius: 0.25em; + height: 30px; + margin-top: -2px !important; +} + +div.filtering-ui-content div.col { + display: inline-block !important; + width: auto !important; + font-size: 14px; + padding: 5px 7px; +} + +div.filtering-ui-content div.col.hidden-search { + display: none !important; +} + +div.filtering-ui-content div.col .label { + font-weight: 600; +} + +span div.label { + font-size: 14px; + font-weight: 600; +} + +div.filtering-ui-content div.col .form-control, +div.filtering-ui-content div.col select, +div.filtering-ui-content div.col input { + height: 30px; + width: 175px; + font-size: 14px; +} + +div.filtering-ui-content div.col input.or-half-gt, +div.filtering-ui-content div.col input.or-half-lt { + width: 70px; +} + +div.filtering-ui-content div.col.filter-col-md .form-control, +div.filtering-ui-content div.col.filter-col-md select, +div.filtering-ui-content div.col.filter-col-md input { + width: 220px; + display: inline-block; +} + +div.filtering-ui-content div.col.filter-col-lg .form-control, +div.filtering-ui-content div.col.filter-col-lg select, +div.filtering-ui-content div.col.filter-col-lg input { + width: 300px !important; + display: inline-block; +} + +div.filtering-ui-content div.filter-col-sm .form-control, +div.filtering-ui-content div.col.filter-col-sm select, +div.filtering-ui-content div.col.filter-col-sm input { + width: 110px !important; + display: inline-block; +} + +.help-content.filter-wrapper-help { + display: block !important; + position: absolute; + top: 2px; + left: 5px; +} + +.help-content.filter-wrapper-help .help-content-caller.hover { + padding: 0.075em 0.525em 0.075em 0.525em !important; +} + +.btn.btn-sm.btn-2-vptz { + height: 30px; + font-size: 12px; + margin-top: -1px; + background-color: #a0d7ff; + border: solid 1px #30b7f6; + color: #0087c6 !important; +} + +.btn.btn-sm.btn-2-vptz:hover { + background-color: #30b7f6; + border: solid 1px #30b7f6; + color: #fff !important; +} + +/* IGV */ +.igv-zooms-wrapper { + position: relative; + z-index: 1000000; + float: right; + margin-right: 50px; + margin-bottom: 8px; + font-size: 14px; +} + +.igv-zoom { + width: 28px; + height: 28px; + background-color: #30b7f6; + border: solid 1px #0087d6; + border-radius: 15px; + color: #fff; +} + +/* style for new features page */ +.news-content-wrapper, +.resource-content-wrapper { + background-color: #eee; + padding: 15px; + border: solid 1px #ccc; + border-radius: 0.25em; +} + +.new-feature-item-wrapper, +.resource-item-wrapper { + margin: 15px 0; + padding-bottom: 10px; + border-bottom: solid 1px #ddd; +} + +.new-feature-item-wrapper h3, +.resource-item-wrapper h3 { + font-size: 22px; +} + +.resources-iframe-wrapper { + width: 560px; + height: 315px; + margin: 0 auto; +} + +.egl-research-method-wrapper { + display: block; + border-bottom: solid 1px #ccc; + padding-bottom: 35px; + padding: 35px 35px 0 35px !important; +} + +.egl-research-trait-bubbles { + list-style: none; +} + +.egl-research-trait-bubbles li { + display: inline-block; + margin-right: 5px; + margin-bottom: 7px; +} + +.egl-research-trait-bubbles-multi li { + font-size: 20px; + margin-bottom: 10px; +} + +.egl-research-trait-bubbles li a, +.egl-research-trait-bubbles-multi li a { + display: block; + background-color: #0097d6; + color: #fff !important; + padding: 5px 10px; + height: 34px; + border-radius: 5px; + display: inline-block; + font-size: 16px; +} + +.egl-research-trait-bubbles li a:hover, +.egl-research-trait-bubbles-multi li a:hover { + background-color: #0097d675; +} + +.egl-research-trait-bubbles li a::after, +.egl-research-trait-bubbles-multi li a::after { + content: ""; +} + +.egl-research-trait-bubbles li a:hover::after, +.egl-research-trait-bubbles-multi li a:hover::after { + content: " GO >"; + font-size: 0.75em; +} + +.egl-table-ss { + width: 350px; + border: solid 1px #ccc; + float: right; +} + +.viewing-region { + float: left; + margin-right: 20px; +} + +.expand-region-select { + background-color: #66bbff !important; + border: solid 1px #3399ff !important; + color: #fff; + font-size: 20px; + border-radius: 5px; + padding: 5px; + float: left; +} + +.expand-region-select:hover { + background-color: #66bbff75 !important; +} + +.temporary-card { + background-color: #66bbff30 !important; + border: solid 1px #3399ff30 !important; + padding-bottom: 0.25em !important; +} + +a.to-previous-page { + color: #fff !important; + font-size: 14px; + background-color: #00aaff75; + border: solid 1px #00aaff95; + padding: 1px 10px; +} + +a.to-previous-page:hover { + background-color: #00aaff95; +} + +.dev-flag { + position: fixed; + top: 0; + right: 0; + z-index: 20000; + width: 50px; + height: 50px; +} + +.img .alert, +.no-access .alert { + border-style: dashed; + border-width: 1px; + text-align: center; +} + +.img .alert-warning, +.no-access .alert-warning { + border-color: darkorange; +} + +.img .alert-danger, +.no-access .alert-danger { + border-color: darkred; +} + +/* pheWAS dataset association table */ +#phewas-datasets { + border-right: none; + margin-top: 1rem; +} + +#phewas-datasets div { + border-left: none; + border-right: none; +} + +#phewas-datasets .top-level-value-item:first-child { + text-align: left; +} + +#phewas-datasets .top-level-header, +#phewas-datasets .top-level-value { + font-size: 1rem; +} + +#phewas-datasets .top-level-value:hover { + background-color: #efefef; +} + +#phewas-datasets .list { + margin-bottom: 1rem; +} + +#phewas-datasets .feature-content-wrapper { + border-left: 4px solid #6c757d78; +} + +#phewas-datasets .feature-header-item { + background-color: #d2d2d2; +} + +.phenotype-gene-association { + position: relative; +} + +.phenotype-gene-association>.options-4-actions { + display: none; + position: absolute; + background-color: #000000; + color: #fff; + font-weight: 400; + padding: 10px; + border-radius: 5px; + left: -12px; + top: 10px; + z-index: 20; + white-space: nowrap; + line-height: 1.5em; +} + +.phenotype-gene-association>.options-4-actions { + left: 80%; + top: -30%; +} + +.phenotype-gene-association:hover>.options-4-actions { + display: block; +} + +.phenotype-gene-association:hover>.options-4-actions a { + color: #ffffff !important; +} + +.phenotype-gene-association:hover>.options-4-actions a:hover { + color: #aaaaff !important; +} + +/* for vue-bootstrap-typeahead */ +[type="search"] { + background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px; +} + +[class*="filter-pill-"] { + margin-right: 2px; + margin-left: 2px; +} + +/* !important is required to override the default pill styling from Bootstrap */ +.filter-pill-pValue { + background-color: #dc3545 !important; +} + +.filter-pill-fold { + background-color: #dc3545 !important; +} + +.filter-pill-beta { + background-color: #007bff !important; +} + +.filter-pill-nearest { + background-color: #28a745 !important; +} + +.filter-pill-phenotype { + background-color: #28a745 !important; +} + +.filter-pill-condition { + background-color: #28a745 !important; +} + +.filter-pill-secondaryPhenotype { + background-color: #007bff !important; +} + +.filter-pill-primaryphenotype { + background-color: #28a745 !important; +} + +.filter-pill-secondaryphenotype { + background-color: #007bff !important; +} + +.filter-pill-nearest { + background-color: #28a745 !important; +} + +.filter-pill-gene { + background-color: #28a745 !important; +} + +.filter-pill-geneHuge { + background-color: #52a866 !important; +} + +.filter-pill-phenotypeHuge { + background-color: #b2c060 !important; +} + +.filter-pill-consequence { + background-color: #28a745 !important; +} + +.filter-pill-annotation { + background-color: hsl(211deg 100% 50% / 80%) !important; +} + +.filter-pill-source { + background-color: #28a745 !important; +} + +.filter-pill-moleculeType { + background-color: #28a745 !important; +} + +.filter-pill-tech { + background-color: #28a745 !important; +} + +.filter-pill-method { + background-color: #28a745 !important; +} + +.filter-pill-tissue { + background-color: rgb(231 31 175 / 74%) !important; +} + +.filter-pill-ancestry { + background-color: #28a745 !important; +} + +.filter-pill-collection { + margin: 10px 0 10px 0; +} + +.filter-pill-collection.center { + display: flex; + justify-content: center; + align-items: center; +} + +/* HuGe Calculator specific */ +#huge .filter-pill-gene { + background-color: #ff8c00 !important; +} + +#huge .filter-pill-phenotype { + background-color: #9de21c !important; +} + +/* GAIT specific */ +#gait .accordion .card.mb-1 { + overflow: unset; +} + +#gait .accordion .btn-block { + text-align: left; + position: relative; +} + +#gait .accordion .btn-block.btn-outline-primary { + border-color: transparent; +} + +#gait .accordion .criteria { + position: absolute; + right: 0.75rem; + top: unset; +} + +#gait .criteria { + display: inline; + overflow: visible; +} + +#gait .accordion .alert, +#variant-search .alert { + text-align: center; +} + +#gait .reference>span { + color: white; +} + +#gait .function { + text-align: center; + margin: 20px auto; +} + +#gait .filter-tests.card { + border-style: dashed; +} + +#gait .filter-tests>.card-header { + background-color: #cce5ff; + color: #004085; +} + +#gait .filter-pill-dataset { + background-color: #8a2be2 !important; +} + +#gait .filter-pill-gene, +#gait .filter-pill-geneORregion { + background-color: #ff8c00 !important; +} + +#gait .filter-pill-test { + background-color: #dc3545 !important; +} + +#gait .filter-pill-transcript { + background-color: #3e78ff !important; +} + +#gait .form-group { + margin-bottom: auto; +} + +#gait .alert-info, +#variant-search .alert-info, +#dataset_inspector .alert-info { + padding: 0.1rem 1.25rem; +} + +#gait .b-table-details { + background-color: unset; +} + +#gait .b-table-details td { + padding: 0; +} + +#gait .variants { + margin-top: 2rem; +} + +button.btn.btn-mini { + padding: 0.1rem 0.25rem; + font-size: 0.75rem; + line-height: 1.25rem; +} + +#gait .forest-plot-simple { + position: relative; + padding-top: 20px; + padding-bottom: 10px; + overflow-x: hidden; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; + line-height: 2rem; + border-left: 4px solid #ddd; + color: #aaa; + margin-left: 15px; +} + +#gait .forest-plot-html-row { + margin-top: 10px auto; +} + +#gait .forest-plot-html-row:hover { + background-color: unset; +} + +#gait .beta-box { + background-color: #55aaee; +} + +#gait .plot { + overflow: hidden; +} + +.fade-enter-active, +.fade-leave-active { + transition: opacity 1s; +} + +.fade-enter, +.fade-leave-to + +/* .fade-leave-active below version 2.1.8 */ + { + opacity: 0; +} + +/* for volcano plot. Move it to it's own CSS when there's too much */ +#volcanoPlot { + display: block; + margin-left: auto; + margin-right: auto; +} + +.volcano-plot-label { + text-align: center; + font-size: 16px; + font-weight: bold; +} + +.volcano-plot-legend { + text-align: center; + font-size: 14px; +} + +span.volcano-score-0, +span.volcano-score-1, +span.volcano-score-2 { + width: 12px; + height: 12px; + display: inline-block; + background-color: #00000050; + border-radius: 6px; + vertical-align: middle; + margin-left: 10px; +} + +span.volcano-score-1 { + background-color: #09910980; +} + +span.volcano-score-2 { + background-color: #ff003780; +} + +#clicked_dot_value, +#ld_clicked_dot_value, +#clicked_cell_value { + position: absolute; + background-color: #fff; + border: solid 1px #aaa; + box-shadow: 0 0 5px #00000075; + font-size: 12px; + padding: 0px 10px 5px 10px; + max-width: 300px; + border-radius: 5px; + z-index: 10; + width: auto; +} + +.gene-on-clicked-dot { + /* + background-color: #ddd; + border: solid 1px #aaa; + padding: 2px 6px; + border-radius: 3px; + */ + + display: inline-block; + margin-right: 10px; + margin-top: 3px; +} + +.top-associations-section-phenotype-filter { + margin-bottom: 35px; + display: block; +} + +.top-associations-section-phenotype-filter>div { + background-color: #ddefff; + border: solid 1px #bbdfff; + border-radius: 5px; + height: 58px; +} + +.top-associations-section-phenotype-filter div.filtering-ui-wrapper { + border: none !important; + background: none !important; + width: 50% !important; + display: inline-block; + text-align: left; + padding-left: 30px; + padding-bottom: 20px; + padding-top: 10px; +} + +.top-associations-section-phenotype-filter span.filter-pill-collection { + border: none !important; + background: none !important; + width: 50% !important; + display: inline-block; + text-align: right; + padding-right: 10px; +} + +.top-associations-section-phenotype-filter div.filter-col-md>div { + display: inline-block; + margin-right: 10px; +} + +.kp-lab-icon { + width: 75px; + float: left; + margin-right: 10px; +} + +.svg-wrapper, +.tab-content-wrapper, +.plot-tab-content-wrapper { + visibility: visible; + height: auto; +} + +.svg-wrapper.hidden-svg, +.tab-content-wrapper.hidden-content, +.plot-tab-content-wrapper.hidden-content, +.tab-content-wrapper.hidden-content .plot-tab-content-wrapper { + visibility: hidden; + height: 25px; +} + +.hidden-svg .plot-tab-content-wrapper { + visibility: hidden; + height: 1; +} + +.kp-tabs-wrapper { + margin-bottom: -1px; + padding-left: 20px; +} + +.kp-tabs { + z-index: 1; + margin: 0 !important; + padding: 0 !important; + white-space: nowrap; + margin-left: 40px; +} + +.kp-tabs li { + display: inline-block; + background-color: #eee; + border: solid 1px #ddd; + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} + +.kp-tabs li.active { + border-bottom: solid 1px #fff; + background-color: #fff; +} + +.kp-tabs li>a { + display: block; + padding: 10px 15px 5px 15px; + cursor: pointer; +} + +.kp-tabs-contents { + /*margin: auto;*/ + background-color: #fff; + padding: 1.25em; + border-radius: 5px; + border: solid 1px #ddd; +} + +.kp-tabs-contents.not-active { + background: none; + padding: 1.25em; + border: none; +} + +.kp-tab-content { + visibility: hidden; + height: 0px !important; + margin: 0 !important; +} + +.kp-tab-content .svg-wrapper { + visibility: hidden; + height: 0px !important; + margin: 0 !important; +} + +.kp-tab-content.active { + visibility: visible; + height: auto !important; +} + +.kp-tab-content.active .svg-wrapper { + visibility: visible !important; + height: auto !important; +} + +.kp-tab-content.active .svg-wrapper.hidden-svg { + visibility: hidden !important; + height: 25px !important; +} + +span[class^="spacer-"], +span[class^=" spacer-"] { + display: inline-block; +} + +span.spacer-1 { + width: 1em; +} + +span.spacer-2 { + width: 2em; +} + +span.spacer-3 { + width: 3em; +} + +span.spacer-4 { + width: 4em; +} + +span.spacer-5 { + width: 5em; +} + +.reference-area { + border-left: solid 1px #ddd; + height: 100%; + padding-top: 15px; + padding-bottom: 15px; +} + +/* for tool tip UI. */ + +.tip-wrapper { + vertical-align: -13px; + margin-left: 5px; + position: relative; +} + +.tip-wrapper>.tip-content { + display: none; + position: absolute; + width: auto; + z-index: 10; + top: 0; + left: 18px; + min-width: 300px; + background-color: #000000; + color: #ffffff; + padding: 5px 10px; + border-radius: 3px; + font-size: 13px; +} + +.tip-wrapper:hover>.tip-content { + display: block; +} + +.tip-bigger { + font-size: 1.25em; +} + +.warning { + color: #ff0000; +} + +.all_biosamples { + font-weight: bold; +} + +.download-images-setting { + position: absolute; + top: -10px; + right: 5px; +} + +.download-images-setting .options-gear { + color: #333333; + padding: 3px 10px; + border-radius: 15px; + font-size: 12px; + margin-right: 10px; + border: solid 1px #dddddd; +} + +.download-images-setting .options-gear>svg { + font-size: 12px !important; +} + +.download-images-setting:hover .options-gear { + color: #000000; +} + +.download-images-setting ul.options { + display: none; + position: absolute; + background-color: #ffffff; + padding: 15px; + border: solid 1px #dddddd; + border-radius: 5px; + z-index: 10; + list-style: none; + right: 0; + box-shadow: 0px 5px 5px 5px rgb(0 0 0 / 20%) +} + +.download-images-setting ul.options li { + white-space: nowrap; +} + +.download-images-setting ul.options li label { + padding-left: 5px; +} + +.download-images-setting:hover ul.options { + display: block; +} + +.greater-less-filter select { + /* This can't be done at component level due to scope concerns.*/ + display: inline; + width: inherit; + margin-right: -5px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + height: 30px; +} + +.greater-less-filter input { + height: 30px; + margin-left: -5px; + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} + +.greater-less-filter .label { + margin-left: -30px !important; +} + +/* single search on gene, region, phenotype, variant pages */ + +.search-header-content .byor-single-search { + width: 400px !important; +} + +.search-header-content .byor-single-search-wrapper .reset-search { + top: 24px !important; +} + +/* BYOR stuff */ + +/* Associations table color coding - can't do scoped because it is within table template*/ +.assoc-table-bottom-line td.meta { + width: 10px; +} + +.assoc-table-bottom-line td.bottom-line-only { + background-color: #6dcff6; +} + +.assoc-table-bottom-line td.bottom-line-min-p { + background-color: #8781bd; +} + +.assoc-table-bottom-line td.all-meta-types { + background-color: #b6aaa7; +} + +.alert-pop-up { + position: fixed; + z-index: 200; + width: 400px; + top: 50%; + left: calc(50% - 200px); + background-color: #ffefef; + padding: 15px 30px; + border: solid 1px #ff8888; + border-radius: 5px; + font-size: 1.15em; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; +} \ No newline at end of file diff --git a/src/portals/MousePortal/assets/pop_out.svg b/src/portals/MousePortal/assets/pop_out.svg new file mode 100644 index 000000000..839a12856 --- /dev/null +++ b/src/portals/MousePortal/assets/pop_out.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/portals/MousePortal/assets/pop_out_over.svg b/src/portals/MousePortal/assets/pop_out_over.svg new file mode 100644 index 000000000..2a6dc93a8 --- /dev/null +++ b/src/portals/MousePortal/assets/pop_out_over.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/portals/MousePortal/views/Index/Template.vue b/src/portals/MousePortal/views/Index/Template.vue index 68652a9c0..54cfefd63 100644 --- a/src/portals/MousePortal/views/Index/Template.vue +++ b/src/portals/MousePortal/views/Index/Template.vue @@ -8,7 +8,7 @@ >
-
+
- Priors Inferred from GEne - ANotationsMouse Differential Expression Portal
- -

- Search for gene, geneset or phenotype + Search by gene or tissue

- +
- +
+

About this project

+ Lorem ipsum dolor sit amet +
@@ -214,7 +195,12 @@ p[id="home.example"] { font-size: 12px; max-width: 70px; } -#pigean .front-logo-tagline-a2fkp { - transform: translate(0%, 40%); +.front-logo-img { + max-height: 300px !important; + width: auto !important; +} +.about { + color: #fff; + font-size: smaller; } diff --git a/src/portals/MousePortal/views/Index/main.js b/src/portals/MousePortal/views/Index/main.js index 463b6fccb..412367363 100644 --- a/src/portals/MousePortal/views/Index/main.js +++ b/src/portals/MousePortal/views/Index/main.js @@ -4,6 +4,7 @@ import store from "./store.js"; import "../../assets/layout.css"; import "../../assets/mouseportal.css"; +import "../../assets/mdkp_copy.css"; import { mouseMixin } from "@/portals/MousePortal/mixins/mouseMixin.js"; import { pageMixin } from "@/mixins/pageMixin.js"; @@ -28,8 +29,16 @@ new Vue({ return contents[0]; }, }, - watch: {}, + watch: { + diseaseGroup(group) { + this.$store.dispatch("kp4cd/getFrontContents", group.name); + }, + }, async created() { + this.$store.dispatch("bioPortal/getDiseaseSystems"); + this.$store.dispatch("bioPortal/getDiseaseGroups"); + this.$store.dispatch("bioPortal/getPhenotypes"); + this.$store.dispatch("bioPortal/getDatasets"); }, render(createElement, context) { From 164404184fd418fc8d8b604a946ed4f0a63f5f7c Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 17 Jan 2025 15:45:59 -0500 Subject: [PATCH 117/132] gene page --- configs/vue.config.mouseportal.js | 10 +- .../MousePortal/views/Contact/Template.vue | 5 - src/portals/MousePortal/views/Contact/main.js | 21 - .../MousePortal/views/Gene/Template.vue | 501 ++++++++++++++++++ src/portals/MousePortal/views/Gene/main.js | 346 ++++++++++++ src/portals/MousePortal/views/Gene/store.js | 120 +++++ 6 files changed, 972 insertions(+), 31 deletions(-) delete mode 100644 src/portals/MousePortal/views/Contact/Template.vue delete mode 100644 src/portals/MousePortal/views/Contact/main.js create mode 100644 src/portals/MousePortal/views/Gene/Template.vue create mode 100644 src/portals/MousePortal/views/Gene/main.js create mode 100644 src/portals/MousePortal/views/Gene/store.js diff --git a/configs/vue.config.mouseportal.js b/configs/vue.config.mouseportal.js index 2622fe8e1..9520ff93c 100644 --- a/configs/vue.config.mouseportal.js +++ b/configs/vue.config.mouseportal.js @@ -17,12 +17,12 @@ let pages = { title: "Page Not Found", chunks: ["chunk-vendors", "chunk-common", "page404"], }, - contact: { - entry: "src/portals/MousePortal/views/Contact/main.js", + gene: { + entry: "src/portals/MousePortal/views/Gene/main.js", template: "src/portals/MousePortal/index.html", - filename: "contact.html", - title: "Contact", - chunks: ["chunk-vendors", "chunk-common", "contact"], + filename: "gene.html", + title: "Mouse Gene", + chunks: ["chunk-vendors", "chunk-common", "gene"], }, }; diff --git a/src/portals/MousePortal/views/Contact/Template.vue b/src/portals/MousePortal/views/Contact/Template.vue deleted file mode 100644 index 9aad91f22..000000000 --- a/src/portals/MousePortal/views/Contact/Template.vue +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/src/portals/MousePortal/views/Contact/main.js b/src/portals/MousePortal/views/Contact/main.js deleted file mode 100644 index 6493f6fc7..000000000 --- a/src/portals/MousePortal/views/Contact/main.js +++ /dev/null @@ -1,21 +0,0 @@ -import Vue from "vue"; -import Template from "./Template.vue"; -import "../../assets/layout.css"; -import { mouseMixin } from "@/portals/MousePortal/mixins/mouseMixin.js"; - -new Vue({ - components: { - }, - mixins: [mouseMixin], - data() { - return { - }; - }, - watch: {}, - async created() { - }, - - render(createElement, context) { - return createElement(Template); - }, -}).$mount("#app"); diff --git a/src/portals/MousePortal/views/Gene/Template.vue b/src/portals/MousePortal/views/Gene/Template.vue new file mode 100644 index 000000000..d42955f81 --- /dev/null +++ b/src/portals/MousePortal/views/Gene/Template.vue @@ -0,0 +1,501 @@ + + + diff --git a/src/portals/MousePortal/views/Gene/main.js b/src/portals/MousePortal/views/Gene/main.js new file mode 100644 index 000000000..73067ecc2 --- /dev/null +++ b/src/portals/MousePortal/views/Gene/main.js @@ -0,0 +1,346 @@ +import Vue from "vue"; +import Template from "./Template.vue"; +import store from "./store.js"; + +import CriterionFunctionGroup from "../../../../components/criterion/group/CriterionFunctionGroup.vue"; +import FilterPValue from "../../../../components/criterion/FilterPValue.vue"; +import FilterEnumeration from "../../../../components/criterion/FilterEnumeration.vue"; +import FilterGreaterThan from "../../../../components/criterion/FilterGreaterThan.vue"; +import FilterLessThan from "../../../../components/criterion/FilterLessThan.vue"; +import SearchHeaderWrapper from "../../../../components/SearchHeaderWrapper.vue"; +import TissueSelectPicker from "../../../../components/TissueSelectPicker.vue"; +import Scatterplot from "../../../../components/Scatterplot.vue"; +import MouseSummaryTable from "../../../../components/MouseSummaryTable.vue"; +import MouseTissueSelect from "../../../../components/MouseTissueSelect.vue"; +import MouseGeneSelect from "../../../../components/MouseGeneSelect.vue"; +import MouseDiffExpTable from "../../../../components/MouseDiffExpTable.vue"; +import MouseWhiskerPlot from "../../../../components/MouseWhiskerPlot.vue"; +import ResearchPheWAS from "../../../../components/researchPortal/ResearchPheWAS.vue"; +import HugeScoresTable from "../../../../components/HugeScoresTable.vue"; +import UnauthorizedMessage from "../../../../components/UnauthorizedMessage"; +import GeneAssociationsTable from "../../../../components/GeneAssociationsTable"; +import GeneAssociationsMasks from "../../../../components/GeneAssociationsMasks"; + +import uiUtils from "../../../../utils/uiUtils"; +import plotUtils from "../../../../utils/plotUtils"; +import sortUtils from "../../../../utils/sortUtils"; +import alertUtils from "../../../../utils/alertUtils"; +import Formatters from "../../../../utils/formatters"; +import dataConvert from "../../../../utils/dataConvert"; +import keyParams from "../../../../utils/keyParams"; +import regionUtils from "../../../../utils/regionUtils"; + +import "../../assets/layout.css"; +import "../../assets/mouseportal.css"; +import "../../assets/mdkp_copy.css"; +import ResearchSingleSearch from "../../../../components/researchPortal/ResearchSingleSearch.vue"; +import { pageMixin } from "../../../../mixins/pageMixin"; +new Vue({ + store, + components: { + CriterionFunctionGroup, + FilterPValue, + FilterEnumeration, + FilterGreaterThan, + FilterLessThan, + SearchHeaderWrapper, + TissueSelectPicker, + ResearchSingleSearch, + Scatterplot, + MouseSummaryTable, + MouseTissueSelect, + MouseGeneSelect, + MouseDiffExpTable, + MouseWhiskerPlot, + ResearchPheWAS, + HugeScoresTable, + UnauthorizedMessage, + GeneAssociationsMasks, + GeneAssociationsTable, + }, + mixins: [pageMixin], + data() { + return { + currentPage: 1, + perPage: 10, + phenotypeFilterList: [], + activeTab: "hugeScorePheWASPlot", + plotColors: [ + "#007bff", + "#048845", + "#8490C8", + "#BF61A5", + "#EE3124", + "#FCD700", + "#5555FF", + "#7aaa1c", + "#9F78AC", + "#F88084", + "#F5A4C7", + "#CEE6C1", + "#cccc00", + "#6FC7B6", + "#D5A768", + "#d4d4d4", + ], + phewasPlotMargin: { + leftMargin: 150, + rightMargin: 40, + topMargin: 20, + bottomMargin: 100, + bump: 11, + }, + hugeScoreRenderConfig: { + type: "phewas plot", + "render by": "phenotype", + "group by": "group", + "phenotype map": "kp phenotype map", + "y axis field": "renderScore", + "convert y -log10": "false", + "y axis label": "Log(HuGE score)", + "x axis label": "", + "beta field": "null", + "hover content": ["bf_common", "bf_rare", "huge"], + thresholds: [Math.log(3), Math.log(30)], + "label in black": "greater than", + height: "600", + "plot margin": { + left: 150, + right: 150, + top: 250, + bottom: 300, + }, + }, + commonVariantRenderConfig: { + type: "phewas plot", + "render by": "phenotype", + "group by": "phenotype group", + "phenotype map": "kp phenotype map", + "y axis field": "pValue", + "convert y -log10": "true", + "y axis label": "-Log10(p-value)", + "x axis label": "beta", + "beta field": "null", + "hover content": ["pValue"], + thresholds: ["2.5e-6"], + height: "600", + "plot margin": { + left: 150, + right: 150, + top: 250, + bottom: 300, + }, + }, + mouseGeneOnly: false, + }; + }, + computed: { + utilsBox() { + let utils = { + Formatters: Formatters, + uiUtils: uiUtils, + alertUtils: alertUtils, + keyParams: keyParams, + dataConvert: dataConvert, + sortUtils: sortUtils, + plotUtils: plotUtils, + regionUtils: regionUtils, + }; + return utils; + }, + rareVariantRenderConfig() { + let config = structuredClone(this.commonVariantRenderConfig); + config["beta field"] = "beta"; + config["hover content"].push("beta"); + config["thresholds"].push(0.05); + return config; + }, + phenotypeMap() { + return this.$store.state.bioPortal.phenotypeMap; + }, + diseaseSystem() { + return this.$store.getters["bioPortal/diseaseSystem"]; + }, + homologRegion() { + return this.$store.getters.region; + }, + docDetails() { + let r = this.homologRegion; + return { + tissue: this.tissue + ? this.tissue.toUpperCase().replaceAll("_", " ") + : "", + gene: this.$store.state.gene, + region: !!r + ? `${r.chromosome}:${Formatters.intFormatter( + r.start + )}-${Formatters.intFormatter(r.end)}` + : null, + }; + }, + diffExpData() { + let data = structuredClone(this.$store.state.diffExp.data); + for (let i = 0; i < data.length; i++) { + data[i].founder_sex = `${data[i].founder}_${data[i].sex}`; + } + return data; + }, + geneassociations() { + let data = this.$store.state.geneassociations.data; + + if (!!this.diseaseInSession && this.diseaseInSession != "") { + data = sessionUtils.getInSession( + data, + this.phenotypesInSession, + "phenotype" + ); + } + + let assocMap = {}; + + for (let i in data) { + const assoc = data[i]; + + // skip associations not part of the disease group + if (!this.phenotypeMap[assoc.phenotype]) { + continue; + } + + const curAssoc = assocMap[assoc.phenotype]; + if (!curAssoc || assoc.pValue < curAssoc.pValue) { + assocMap[assoc.phenotype] = assoc; + } + } + + // convert to an array, sorted by p-value + let x = Object.values(assocMap).sort((a, b) => a.pValue - b.pValue); + return x; + }, + transcriptOr52k() { + let endpoint = !this.$store.state.selectedTranscript + ? this.$store.state.associations52k + : this.$store.state.transcriptAssoc; + this.$store.state.restricted = endpoint.restricted; + + if (!!this.diseaseInSession && this.diseaseInSession != "") { + endpoint.data = sessionUtils.getInSession( + endpoint.data, + this.phenotypesInSession, + "phenotype" + ); + } + + let assocMap = {}; + + for (let i in endpoint.data) { + const assoc = endpoint.data[i]; + + // skip associations not part of the disease group + if (!this.phenotypeMap[assoc.phenotype]) { + continue; + } + + const curAssoc = assocMap[assoc.phenotype]; + if (!curAssoc || assoc.pValue < curAssoc.pValue) { + assocMap[assoc.phenotype] = assoc; + } + } + + endpoint.data.sort( + (a, b) => + this.pValueFormatter(a.pValue) - + this.pValueFormatter(b.pValue) + ); + + return endpoint.data; + }, + filteredAssociations() { + return ( + this.geneassociations.filter((row) => { + return this.phenotypeMap[row.phenotype]; + }) || [] + ); + }, + hugeScores() { + let data = sortUtils.sortArrOfObjects( + this.$store.state.hugeScores.data, + "huge", + "number", + "desc" + ); + + if (!!this.diseaseInSession && this.diseaseInSession != "") { + data = sessionUtils.getInSession( + data, + this.phenotypesInSession, + "phenotype" + ); + } + + let hugeMap = {}; + + for (let i in data) { + const score = data[i]; + let phenotypeEntity = + this.$store.state.bioPortal.phenotypeMap[score.phenotype]; + score["group"] = phenotypeEntity + ? phenotypeEntity.group + : "No group info"; + score["renderScore"] = Math.log(data[i].huge); + + // skip associations not part of the disease group + if (!this.phenotypeMap[score.phenotype]) { + continue; + } + + hugeMap[score.phenotype] = score; + } + + // convert to an array, sorted by p-value + let x = Object.values(hugeMap); + return x; + }, + mouseOnly(){ + return this.mouseGeneOnly; + } + + }, + created() { + // get the disease group and set of phenotypes available + this.$store.dispatch("bioPortal/getDiseaseGroups"); + this.$store.dispatch("bioPortal/getPhenotypes"); + this.$store.dispatch("bioPortal/getDatasets"); + this.$store.dispatch("bioPortal/getDiseaseSystems"); + + this.$store.dispatch("queryDiffExp"); + }, + methods: { + tissueFormatter: Formatters.tissueFormatter, + ancestryFormatter: Formatters.ancestryFormatter, + pValueFormatter: Formatters.pValueFormatter, + searchDiffExp() { + this.$store.dispatch("queryDiffExp"); + }, + filterPhenotype(newFilters) { + this.phenotypeFilterList = newFilters; + }, + renderPhewas(REF) { + this.activeTab = REF; + let refComponent = this.$children[0].$refs[REF]; + setTimeout(function () { + refComponent.renderPheWas(); + }, 500); + }, + }, + watch: { + "$store.state.homologGene"(newGene){ + console.log(JSON.stringify(newGene)); + this.mouseGeneOnly = false; + if (newGene.data.length === 0){ + console.log("data missing"); + this.mouseGeneOnly = true; + } + } + }, + render: (h) => h(Template), +}).$mount("#app"); diff --git a/src/portals/MousePortal/views/Gene/store.js b/src/portals/MousePortal/views/Gene/store.js new file mode 100644 index 000000000..4d4ffdb7d --- /dev/null +++ b/src/portals/MousePortal/views/Gene/store.js @@ -0,0 +1,120 @@ +import Vue from "vue"; +import Vuex from "vuex"; + +import bioPortal from "@/modules/bioPortal"; +import bioIndex from "@/modules/bioIndex"; +import kp4cd from "@/modules/kp4cd"; +import keyParams from "@/utils/keyParams"; +import { BIO_INDEX_HOST } from "@/utils/bioIndexUtils"; + +Vue.use(Vuex); + +export default new Vuex.Store({ + modules: { + bioPortal, + kp4cd, + diffExp: bioIndex("diff-exp"), + tissueSummary: bioIndex("diff-exp-summary-tissue"), + geneSummary: bioIndex("diff-exp-summary-gene"), + hugeScores: bioIndex("huge"), + geneassociations: bioIndex("gene-associations"), + varassociations: bioIndex("associations"), + associations52k: bioIndex("gene-associations-52k"), + geneToTranscript: bioIndex("gene-to-transcript"), + transcriptAssoc: bioIndex("transcript-associations"), + homologGene: bioIndex("gene"), + }, + state: { + tissue: keyParams.tissue || "", + gene: keyParams.gene || "", + tissueKeys: [], + tissueToQuery: "", + geneToQuery: "", + selectedAncestry: "", + loadingGene: false, + loadingExpression: false, + }, + + mutations: { + setTissueName(state, tissueName) { + state.tissue = tissueName || state.tissue; + keyParams.set({ tissue: state.tissue }); + }, + setGeneName(state, geneName) { + state.gene = geneName || state.gene; + keyParams.set({ gene: state.gene }); + }, + setCommonVariantsLength(state, NUM) { + state.commonVariantsLength = NUM; + }, + setLoadingGene(state, loading=true){ + state.loadingGene = loading; + }, + setLoadingExpression(state, loading=true){ + state.loadingExpression = loading; + } + }, + getters: { + region(state) { + let data = state.homologGene.data; + + if (data.length > 0) { + let gene = data[0]; + + return { + chromosome: gene.chromosome, + start: gene.start, + end: gene.end, + }; + } + }, + }, + actions: { + commonVariantsLength(context, NUM) { + context.commit("setCommonVariantsLength", NUM); + }, + async getTissueKeys(context) { + let tissues = await fetch(`${BIO_INDEX_HOST}/api/bio/keys/diff-exp/2?columns=tissue`) + .then(resp => resp.json()) + .then(json => { + if (json.count == 0) { + return null; + } + return json.keys.map(key => key[0]) + }); + context.state.tissueKeys = tissues; + }, + async selectGeneName(context, geneName){ + context.state.geneToQuery = geneName; + }, + async queryDiffExp(context) { + context.commit("setLoadingExpression"); + + let gene = context.state.geneToQuery || context.state.gene; + context.commit("setLoadingGene"); + context.commit("setGeneName", gene); + await context.dispatch("homologGene/query", {q: gene}); + context.commit("setLoadingGene", false); + + let tissue = context.state.tissueToQuery || context.state.tissue; + context.commit("setTissueName", tissue); + + if (!!tissue){ + context.dispatch("tissueSummary/query", {q: tissue}); + } + if (!!gene){ + let query = { q: gene}; + context.dispatch("geneSummary/query", query); + context.dispatch("hugeScores/query", query); + context.dispatch("associations52k/query", query); + context.dispatch("geneassociations/query", query); + context.dispatch("geneToTranscript/query", query); + } + if (!!gene && !!tissue) { + await context.dispatch("diffExp/query", { q: + `${gene},${tissue}` }); + context.commit("setLoadingExpression", false); + } + }, + }, +}); From bfbe74b08f6aeffab1c13487d919456c4377581c Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 17 Jan 2025 16:03:00 -0500 Subject: [PATCH 118/132] working on front page --- .../MousePortal/views/Gene/Template.vue | 3 +-- .../MousePortal/views/Index/Template.vue | 22 +++++++++---------- src/portals/MousePortal/views/Index/main.js | 6 +++++ 3 files changed, 18 insertions(+), 13 deletions(-) diff --git a/src/portals/MousePortal/views/Gene/Template.vue b/src/portals/MousePortal/views/Gene/Template.vue index d42955f81..be08a1f1f 100644 --- a/src/portals/MousePortal/views/Gene/Template.vue +++ b/src/portals/MousePortal/views/Gene/Template.vue @@ -22,14 +22,13 @@
-

Mouse Differential Expression Browser

+

Mouse Differential Expression by Gene

-
diff --git a/src/portals/MousePortal/views/Index/main.js b/src/portals/MousePortal/views/Index/main.js index c50fb0d1e..4ee0714a8 100644 --- a/src/portals/MousePortal/views/Index/main.js +++ b/src/portals/MousePortal/views/Index/main.js @@ -2,15 +2,39 @@ import Vue from "vue"; import Template from "./Template.vue"; import store from "./store.js"; -import "../../assets/layout.css"; -import "../../assets/mouseportal.css"; -import "../../assets/mdkp_copy.css"; - +import CriterionFunctionGroup from "../../../../components/criterion/group/CriterionFunctionGroup.vue"; +import FilterPValue from "../../../../components/criterion/FilterPValue.vue"; +import FilterEnumeration from "../../../../components/criterion/FilterEnumeration.vue"; +import FilterGreaterThan from "../../../../components/criterion/FilterGreaterThan.vue"; +import FilterLessThan from "../../../../components/criterion/FilterLessThan.vue"; +import SearchHeaderWrapper from "../../../../components/SearchHeaderWrapper.vue"; +import TissueSelectPicker from "../../../../components/TissueSelectPicker.vue"; +import Scatterplot from "../../../../components/Scatterplot.vue"; +import MouseSummaryTable from "../../../../components/MouseSummaryTable.vue"; import MouseTissueSelect from "../../../../components/MouseTissueSelect.vue"; import MouseGeneSelect from "../../../../components/MouseGeneSelect.vue"; +import MouseDiffExpTable from "../../../../components/MouseDiffExpTable.vue"; +import MouseWhiskerPlot from "../../../../components/MouseWhiskerPlot.vue"; +import ResearchPheWAS from "../../../../components/researchPortal/ResearchPheWAS.vue"; +import HugeScoresTable from "../../../../components/HugeScoresTable.vue"; +import UnauthorizedMessage from "../../../../components/UnauthorizedMessage"; +import GeneAssociationsTable from "../../../../components/GeneAssociationsTable"; +import GeneAssociationsMasks from "../../../../components/GeneAssociationsMasks"; + +import uiUtils from "../../../../utils/uiUtils.js"; +import plotUtils from "../../../../utils/plotUtils.js"; +import sortUtils from "../../../../utils/sortUtils.js"; +import alertUtils from "../../../../utils/alertUtils.js"; +import Formatters from "../../../../utils/formatters.js"; +import dataConvert from "../../../../utils/dataConvert.js"; +import keyParams from "../../../../utils/keyParams.js"; +import regionUtils from "../../../../utils/regionUtils.js"; -import { mouseMixin } from "@/portals/MousePortal/mixins/mouseMixin.js"; -import { pageMixin } from "@/mixins/pageMixin.js"; +import "../../assets/layout.css"; +import "../../assets/mouseportal.css"; +import "../../assets/mdkp_copy.css"; +import ResearchSingleSearch from "../../../../components/researchPortal/ResearchSingleSearch.vue"; +import { pageMixin } from "../../../../mixins/pageMixin.js"; new Vue({ store, @@ -18,9 +42,15 @@ new Vue({ MouseGeneSelect, MouseTissueSelect }, - mixins: [mouseMixin], + mixins: [pageMixin], data() { return { + searchConfig: { + "search instruction": "Search by gene or tissue", + "search parameters": [ + { parameter: "gene", values: []}, + { parameter: "tissue", values: []}] + } }; }, methods: { @@ -32,6 +62,19 @@ new Vue({ } }, computed: { + utilsBox() { + let utils = { + Formatters: Formatters, + uiUtils: uiUtils, + alertUtils: alertUtils, + keyParams: keyParams, + dataConvert: dataConvert, + sortUtils: sortUtils, + plotUtils: plotUtils, + regionUtils: regionUtils, + }; + return utils; + }, diseaseGroup() { return this.$store.getters["bioPortal/diseaseGroup"]; }, From 481c2b3cb5092e92224bd9b4869315834dbfb671 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 17 Jan 2025 16:52:38 -0500 Subject: [PATCH 123/132] making mouse single search --- .../components/MouseSingleSearch.vue | 468 ++++++++++++++++++ 1 file changed, 468 insertions(+) create mode 100644 src/portals/MousePortal/components/MouseSingleSearch.vue diff --git a/src/portals/MousePortal/components/MouseSingleSearch.vue b/src/portals/MousePortal/components/MouseSingleSearch.vue new file mode 100644 index 000000000..7671d0256 --- /dev/null +++ b/src/portals/MousePortal/components/MouseSingleSearch.vue @@ -0,0 +1,468 @@ + + + + + From 9bbf3f164c5b62ab8db0223c09f482219ffb30d1 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 17 Jan 2025 16:56:10 -0500 Subject: [PATCH 124/132] mouse single search works but it is only using portal stuff not mouse stuff --- src/portals/MousePortal/components/MouseSingleSearch.vue | 2 +- src/portals/MousePortal/views/Index/Template.vue | 8 ++++++-- src/portals/MousePortal/views/Index/main.js | 5 +++-- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/portals/MousePortal/components/MouseSingleSearch.vue b/src/portals/MousePortal/components/MouseSingleSearch.vue index 7671d0256..d31d5d6f0 100644 --- a/src/portals/MousePortal/components/MouseSingleSearch.vue +++ b/src/portals/MousePortal/components/MouseSingleSearch.vue @@ -67,7 +67,7 @@ import { match } from "@/utils/bioIndexUtils"; import { BIO_INDEX_HOST } from "@/utils/bioIndexUtils"; import alertUtils from "@/utils/alertUtils"; -export default Vue.component("research-single-search", { +export default Vue.component("mouse-single-search", { props: ["singleSearchConfig", "utils"], modules: {}, diff --git a/src/portals/MousePortal/views/Index/Template.vue b/src/portals/MousePortal/views/Index/Template.vue index 874c73a5d..b3a4bf9b1 100644 --- a/src/portals/MousePortal/views/Index/Template.vue +++ b/src/portals/MousePortal/views/Index/Template.vue @@ -40,11 +40,15 @@

Search by gene or tissue

- + -
diff --git a/src/portals/MousePortal/views/Tissue/Template.vue b/src/portals/MousePortal/views/Tissue/Template.vue index e992e4699..dd5f0eda6 100644 --- a/src/portals/MousePortal/views/Tissue/Template.vue +++ b/src/portals/MousePortal/views/Tissue/Template.vue @@ -13,11 +13,10 @@
Begin new search
- + >
diff --git a/src/portals/MousePortal/views/Tissue/main.js b/src/portals/MousePortal/views/Tissue/main.js index 5b452967e..eb7b24674 100644 --- a/src/portals/MousePortal/views/Tissue/main.js +++ b/src/portals/MousePortal/views/Tissue/main.js @@ -20,6 +20,7 @@ import HugeScoresTable from "../../../../components/HugeScoresTable.vue"; import UnauthorizedMessage from "../../../../components/UnauthorizedMessage"; import GeneAssociationsTable from "../../../../components/GeneAssociationsTable"; import GeneAssociationsMasks from "../../../../components/GeneAssociationsMasks"; +import MouseSingleSearch from "../../components/MouseSingleSearch.vue"; import uiUtils from "../../../../utils/uiUtils.js"; import plotUtils from "../../../../utils/plotUtils.js"; @@ -57,6 +58,7 @@ new Vue({ UnauthorizedMessage, GeneAssociationsMasks, GeneAssociationsTable, + MouseSingleSearch }, mixins: [pageMixin], data() { From 23aeea8c5715bcfcab86c253203b532ca0e1850b Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 17 Jan 2025 17:08:11 -0500 Subject: [PATCH 128/132] Gene and tissue pages --- src/portals/MousePortal/views/Gene/Template.vue | 2 +- src/portals/MousePortal/views/Tissue/Template.vue | 2 +- src/portals/MousePortal/views/Tissue/main.js | 2 -- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/portals/MousePortal/views/Gene/Template.vue b/src/portals/MousePortal/views/Gene/Template.vue index 91c5e5aa3..4a5b71ee8 100644 --- a/src/portals/MousePortal/views/Gene/Template.vue +++ b/src/portals/MousePortal/views/Gene/Template.vue @@ -69,7 +69,7 @@
- Select a tissue and a gene to view differential expression data. + Select a tissue to view differential expression data.
No differential expression data found for this diff --git a/src/portals/MousePortal/views/Tissue/Template.vue b/src/portals/MousePortal/views/Tissue/Template.vue index dd5f0eda6..f3d22b790 100644 --- a/src/portals/MousePortal/views/Tissue/Template.vue +++ b/src/portals/MousePortal/views/Tissue/Template.vue @@ -69,7 +69,7 @@
- Select a tissue and a gene to view differential expression data. + Select a gene to view differential expression data.
No differential expression data found for this diff --git a/src/portals/MousePortal/views/Tissue/main.js b/src/portals/MousePortal/views/Tissue/main.js index eb7b24674..3725600ad 100644 --- a/src/portals/MousePortal/views/Tissue/main.js +++ b/src/portals/MousePortal/views/Tissue/main.js @@ -313,8 +313,6 @@ new Vue({ this.$store.dispatch("bioPortal/getPhenotypes"); this.$store.dispatch("bioPortal/getDatasets"); this.$store.dispatch("bioPortal/getDiseaseSystems"); - - this.$store.dispatch("queryDiffExp"); }, methods: { tissueFormatter: Formatters.tissueFormatter, From 25be560c68eeab02323bb088e6b6105161bfeef8 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Fri, 17 Jan 2025 17:13:54 -0500 Subject: [PATCH 129/132] styling --- src/portals/MousePortal/components/MouseSingleSearch.vue | 2 +- src/portals/MousePortal/views/Gene/main.js | 2 -- src/portals/MousePortal/views/Index/Template.vue | 6 +++++- src/portals/MousePortal/views/Tissue/main.js | 2 -- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/portals/MousePortal/components/MouseSingleSearch.vue b/src/portals/MousePortal/components/MouseSingleSearch.vue index 3251b2817..156be8383 100644 --- a/src/portals/MousePortal/components/MouseSingleSearch.vue +++ b/src/portals/MousePortal/components/MouseSingleSearch.vue @@ -381,7 +381,7 @@ export default Vue.component("mouse-single-search", { } .byor-single-search { - width: 100%; + width: 60%; margin-left: auto; margin-right: auto; } diff --git a/src/portals/MousePortal/views/Gene/main.js b/src/portals/MousePortal/views/Gene/main.js index 2a28f2b23..63b463e0b 100644 --- a/src/portals/MousePortal/views/Gene/main.js +++ b/src/portals/MousePortal/views/Gene/main.js @@ -34,7 +34,6 @@ import regionUtils from "../../../../utils/regionUtils"; import "../../assets/layout.css"; import "../../assets/mouseportal.css"; import "../../assets/mdkp_copy.css"; -import ResearchSingleSearch from "../../../../components/researchPortal/ResearchSingleSearch.vue"; import { pageMixin } from "../../../../mixins/pageMixin"; new Vue({ store, @@ -46,7 +45,6 @@ new Vue({ FilterLessThan, SearchHeaderWrapper, TissueSelectPicker, - ResearchSingleSearch, Scatterplot, MouseSummaryTable, MouseTissueSelect, diff --git a/src/portals/MousePortal/views/Index/Template.vue b/src/portals/MousePortal/views/Index/Template.vue index c720a86fc..c3cef6f3d 100644 --- a/src/portals/MousePortal/views/Index/Template.vue +++ b/src/portals/MousePortal/views/Index/Template.vue @@ -38,7 +38,7 @@

- Search by gene or tissue + Search the Mouse Portal

Date: Tue, 21 Jan 2025 11:52:27 -0500 Subject: [PATCH 130/132] diff exp tissue table --- .../MousePortal/views/Tissue/Template.vue | 43 +++++++++++++++++++ src/portals/MousePortal/views/Tissue/main.js | 1 + 2 files changed, 44 insertions(+) diff --git a/src/portals/MousePortal/views/Tissue/Template.vue b/src/portals/MousePortal/views/Tissue/Template.vue index f3d22b790..dbc7bb39b 100644 --- a/src/portals/MousePortal/views/Tissue/Template.vue +++ b/src/portals/MousePortal/views/Tissue/Template.vue @@ -76,8 +76,51 @@ query.
Loading...
+
+
+
+

+ Differential gene expression in + {{ $parent.tissueFormatter($store.state.tissue) }}, in + mouse founder strains +

+ + +
+ Adjusted p-value: sex (≤) +
+ + +
+ Adjusted p-value: strain (≤) +
+ + +
+ Adjusted p-value: strain and sex (≤) +
+ + + +
+
diff --git a/src/portals/MousePortal/views/Tissue/main.js b/src/portals/MousePortal/views/Tissue/main.js index 4e8337bc9..202b0b2e7 100644 --- a/src/portals/MousePortal/views/Tissue/main.js +++ b/src/portals/MousePortal/views/Tissue/main.js @@ -311,6 +311,7 @@ new Vue({ this.$store.dispatch("bioPortal/getPhenotypes"); this.$store.dispatch("bioPortal/getDatasets"); this.$store.dispatch("bioPortal/getDiseaseSystems"); + this.$store.dispatch("queryDiffExp"); }, methods: { tissueFormatter: Formatters.tissueFormatter, From 66e84b7c110eabda46593424f709bd4689173ae3 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Tue, 21 Jan 2025 11:53:33 -0500 Subject: [PATCH 131/132] remove header for now --- src/portals/MousePortal/views/Gene/Template.vue | 4 ++-- src/portals/MousePortal/views/Index/Template.vue | 4 ++-- src/portals/MousePortal/views/Tissue/Template.vue | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/portals/MousePortal/views/Gene/Template.vue b/src/portals/MousePortal/views/Gene/Template.vue index 4a5b71ee8..72f5cf67e 100644 --- a/src/portals/MousePortal/views/Gene/Template.vue +++ b/src/portals/MousePortal/views/Gene/Template.vue @@ -1,11 +1,11 @@