-
- Inactivating Events
-
-
-
-
- x
-
-
-
- {{ geneId }}
-
-
-
+
@@ -95,13 +68,15 @@ import { dispatch } from './../../plot-link.js';
// child components
import Spinner from './../Spinner.vue';
+import GeneAutocomplete from './../GeneAutocomplete.vue';
export default {
name: 'ExposuresPlot',
mixins: [plotMixin],
props: [],
components: {
- Spinner
+ Spinner,
+ GeneAutocomplete
},
data: function () {
return {
@@ -126,11 +101,7 @@ export default {
xScroll: true
},
sortByCategory: null,
- sortByList: [],
- showDropdown: false,
- geneInput: "",
- geneAutocompleteList: [],
- geneAutocompleteIndex: null
+ sortByList: []
};
},
computed: {
@@ -148,50 +119,11 @@ export default {
} else if(val == "clinical") {
this.sortByList = this.selectedClinicalVariables.map((el) => el.name);
}
- },
- geneInput: function(val) {
- if(val.length >= 2) {
- API.fetchAutocompleteGene(val)
- .then((geneArray) => {
- let oldListLength = this.geneAutocompleteList.length;
- this.geneAutocompleteList = geneArray;
- if(this.geneAutocompleteList.length === 0) {
- this.geneAutocompleteIndex = null;
- } else {
- if(this.geneAutocompleteIndex === null) {
- this.geneAutocompleteIndex = 0;
- } else if(this.geneAutocompleteList.length < oldListLength && this.geneAutocompleteIndex >= this.geneAutocompleteList.length) {
- this.geneAutocompleteIndex = this.geneAutocompleteList.length - 1;
- }
- }
- });
- }
- },
+ }
},
methods: {
- toggleInactivatingDropdown() {
- this.showDropdown = !this.showDropdown;
- // reset
- this.geneAutocompleteList = [];
- this.geneInput = "";
- },
- geneAutocompleteInc() {
- if(this.geneAutocompleteIndex < (this.geneAutocompleteList.length - 1)) {
- this.geneAutocompleteIndex += 1;
- }
- },
- geneAutocompleteDec() {
- if(this.geneAutocompleteIndex > 0) {
- this.geneAutocompleteIndex -= 1;
- }
- },
- geneAutocompleteEnter() {
- console.log(this.geneAutocompleteList[this.geneAutocompleteIndex]);
- this.toggleInactivatingDropdown();
- },
- geneAutocompleteSelect(geneId) {
+ submitGene(geneId) {
console.log(geneId);
- this.toggleInactivatingDropdown();
},
fileInput: function(files) {
let vm = this;
@@ -566,39 +498,6 @@ export default {
right: 0;
top: 0;
position: absolute;
- #inactivating-events-button {
- position: relative;
- right: 0;
- text-align: right;
- button {
- margin-top: 0.5em;
- margin-right: 0.5em;
- }
- }
-
- #inactivating-events-dropdown {
- border-left: 1px solid gray;
- border-bottom: 1px solid gray;
- .dropdown-input-wrapper {
- padding: 0.5em;
- }
- div > span {
- display: block;
- padding: 0.5em;
- border-top: 1px solid #ddd;
- cursor: pointer;
- &.selected-gene {
- background-color: #ddd;
- }
- }
- input {
- position: relative;
- }
- button {
- padding: 2px 4px;
- position: relative;
- }
- }
}
From c6fd5daa207d4702152d3b81dd75369385a7ca5d Mon Sep 17 00:00:00 2001
From: Mark Keller <7525285+keller-mark@users.noreply.github.com>
Date: Thu, 6 Sep 2018 21:57:27 -0400
Subject: [PATCH 10/19] Added genome events to plot
---
src/api.js | 9 +++
src/components/GeneAutocomplete.vue | 3 +-
src/components/plots/ExposuresPlot.vue | 94 ++++++++++++++++++++++----
3 files changed, 92 insertions(+), 14 deletions(-)
diff --git a/src/api.js b/src/api.js
index 1327fcc..8fdb80f 100644
--- a/src/api.js
+++ b/src/api.js
@@ -47,6 +47,15 @@ export default class API {
});
}
+ static fetchGeneEventTrack(dataOptions) {
+ let url = API.api_base + "genome-event-track";
+
+ return fetch(url, { method: "POST", body: JSON.stringify(dataOptions) })
+ .then(function(response) {
+ return response.json();
+ });
+ }
+
// Fetches with cacheing
static fetchChromosomes() {
let url = API.api_base + "chromosomes";
diff --git a/src/components/GeneAutocomplete.vue b/src/components/GeneAutocomplete.vue
index a1b44a9..4e4ba95 100644
--- a/src/components/GeneAutocomplete.vue
+++ b/src/components/GeneAutocomplete.vue
@@ -50,7 +50,7 @@ export default {
},
watch: {
geneInput: function(val) {
- if(val.length >= 2) {
+ if(val.length >= 1) {
API.fetchAutocompleteGene(val)
.then((geneArray) => {
let oldListLength = this.geneAutocompleteList.length;
@@ -116,6 +116,7 @@ export default {
#inactivating-events-dropdown {
border-left: 1px solid gray;
border-bottom: 1px solid gray;
+ background-color: white;
.dropdown-input-wrapper {
padding: 0.5em;
}
diff --git a/src/components/plots/ExposuresPlot.vue b/src/components/plots/ExposuresPlot.vue
index a4daf20..0a18db7 100644
--- a/src/components/plots/ExposuresPlot.vue
+++ b/src/components/plots/ExposuresPlot.vue
@@ -4,7 +4,7 @@
-