Description
Prototype of a web page that can search through a list of genes from user input and return the associated symbols.
Can search by synonyms and symbols.
A panel has already been built. For any new panel, you need to recreate the javascript file holding the maps of symbols and synonyms. Run this bash script to create the supporting javascript file and place it next to index.html
python create_js_gene_panel.py <-a path/to/list/of/all/genes/in/human.any> <-p /path/to/panel [path/to/another/panel]> <-n panel_name1 [panel_name2]> <-o path/to/the/javascript.js>
Where: -a is the location of the complete list of genes, with synonyms (like this file: Homo_sapiens.gene_info)
-p is the path to one or more panels (list of genes), only one columns, all gene names must be symbols
-n is the name of the panel(s). Must have the same number of panels and names
-o is the javascript file name output. After verifying and curating the file, rename it to final_panel_gene_list.js
Then open index.html
Inserting Into a Website
This protoype uses Vuetify on top of Vue.js as a javascript framework. It manages the layout, text fields, events etc.
Vue.js works using components. The component used here is "gene-panel-search" and is self contained in gene-panel-search.js. To work, it must be inserted in the following block:
<div id="app">
<v-app>
<v-content>
<gene-panel-search></gene-panel-search>
</v-content>
</v-app>
</div>
index.js starts the Vue.js application (by using the div id "app") which requires vue.js, vuetify.min.js and vuetify.min.css either from a CDN or locally. Make sure to use the production version to improve the speed of the application.
final_panel_gene_list.js hosts a client side map used to search through the list of genes. It is possible to implement it as a server-side database but the responsivness seems to be okay as is, for now.