2 |
3 |
4 |
5 |
13 |
14 |
17 |
18 |
Predicted drugs associated with this side effect
19 |
20 |
21 |
22 |
23 |
89 |
90 |
91 |
--------------------------------------------------------------------------------
/python/generate_download_data_meta.py:
--------------------------------------------------------------------------------
1 | '''
2 | Generate meta-data for data available for download
3 | '''
4 | import os, sys, json
5 | import gzip
6 | import hashlib
7 | import numpy as np
8 | import pandas as pd
9 |
10 |
11 | fields = ['short_name', 'Name', 'Description', 'Rows', 'Columns',
12 | 'Size(MB)', 'md5', 'Source', 'Reference', 'path']
13 |
14 |
15 | class DataFile(object):
16 | def __init__(self, fn):
17 | self.name = fn.split('/')[-1]
18 |
19 | self._path = '../downloads/' + fn
20 | self.desc = ''
21 | self.df = pd.read_csv(self._path, compression='gzip')
22 | self.rows, self.columns = self.df.shape
23 |
24 | self.md5 = hashlib.md5(open(self._path, 'rb').read()).hexdigest()
25 | self.size = os.path.getsize(self._path)
26 | self.size = '%.1f' % (self.size / (1024. * 1024)) # size in MB
27 | self.ref = ''
28 | self.source_url = ''
29 | self.path = 'downloads/' + fn
30 |
31 | def to_record(self):
32 | record = {
33 | 'short_name': self.name.split('_')[0],
34 | 'Name': self.name,
35 | 'Description': self.desc,
36 | 'Rows': self.rows,
37 | 'Columns': self.columns,
38 | 'Size(MB)': self.size,
39 | 'md5': self.md5,
40 | 'Source': self.source_url,
41 | 'Reference': self.ref,
42 | 'path': self.path,
43 | }
44 | return record
45 |
46 |
47 | class MetaDataFile(object):
48 | def __init__(self, fn):
49 | self.name = fn.split('/')[-1]
50 | self._path = '../downloads/' + fn
51 | df = pd.read_csv(self._path)
52 | self.fields = df.columns.tolist()
53 | self.rows, self.columns = df.shape
54 | self.md5 = hashlib.md5(open(self._path, 'rb').read()).hexdigest()
55 | self.size = os.path.getsize(self._path)
56 | self.size = '%.1f' % (self.size / (1024. * 1024)) # size in MB
57 | self.path = 'downloads/' + fn
58 |
59 | def to_record(self):
60 | record = {
61 | 'Name': self.name,
62 | 'Fields': self.fields,
63 | 'Rows': self.rows,
64 | 'Columns': self.columns,
65 | 'Size(MB)': self.size,
66 | 'md5': self.md5,
67 | 'path': self.path,
68 | }
69 | return record
70 |
71 | records = []
72 | for fn in os.listdir('../downloads/'):
73 | if fn.endswith('.gz'):
74 | print fn
75 | d = DataFile(fn)
76 | record = d.to_record()
77 | records.append(record)
78 |
79 | meta_for_data = pd.DataFrame.from_records(records)
80 | meta_for_data = meta_for_data[fields]
81 | meta_for_data = meta_for_data.sort('Name')
82 |
83 | descs = [
84 | 'Processed drug side effects data from
FDA Adverse Event Report System (FAERS) using Propensity Score Matching (PSM) based methods to correct for unknown or unmeasured covariates in the spontaneous reporting systems.',
85 | 'Gene Ontology (GO) transformed gene expression profiles of drug/small molecule compound perturbations.
Principal Angel Enrichment Analysis (PAEA) was used to compute enrichment p-values for each CD signature in the space of all genes against gene sets created from the Gene Ontology including Biological Processes, Cellular Components and Molecular Function.',
86 | 'Gene expression signatures for drugs/small molecule compounds in the landmark gene space. The
Characteristic Direction (CD) method was used to compute gene expression signatures.',
87 | '166-bit MACCS chemical fingerprint matrix for drugs/small molecule compounds computed using
Open Babel.',
88 | 'Drug/small molecule compound induced cell morphological profiles.',
89 | 'Drug-ADR connections mined from drug package inserts from SIDER.',
90 | ]
91 |
92 | urls = [
93 | 'https://www.pharmgkb.org/downloads/',
94 | None,
95 | 'http://www.lincscloud.org/l1000/',
96 | 'http://api.lincscloud.org/a2/docs/pertinfo',
97 | 'https://www.broadinstitute.org/scientific-community/science/programs/csoft/therapeutics-platform/mlpcn/accessing-mlpcn-data',
98 | 'ftp://xi.embl.de/SIDER/2012-10-17/'
99 | ]
100 |
101 | pmids = [
102 | '22422992',
103 | None,
104 | None,
105 | None,
106 | '24710340',
107 | '20087340'
108 | ]
109 |
110 | meta_for_data['Description'] = descs
111 | meta_for_data['Source'] = urls
112 | meta_for_data['Reference'] = pmids
113 |
114 | meta_for_data.to_json('../data/download_data.json', orient='records')
115 |
116 | ## get meta for metadata
117 | records = []
118 | for fn in os.listdir('../downloads/'):
119 | if fn.startswith('meta_'):
120 | print fn
121 | mdf = MetaDataFile(fn)
122 | record = mdf.to_record()
123 | records.append(record)
124 |
125 | json.dump(records, open('../data/download_metadata.json', 'w'))
126 |
127 |
--------------------------------------------------------------------------------
/js/functions.js:
--------------------------------------------------------------------------------
1 | function getQueryParams(qs) {
2 | qs = qs.split("+").join(" ");
3 | var params = {},
4 | tokens,
5 | re = /[?&]?([^=]+)=([^&]*)/g;
6 | while (tokens = re.exec(qs)) {
7 | params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
8 | }
9 | return params;
10 | };
11 |
12 | function obj2Table(obj) {
13 | var table = $('
')
14 | $.each(obj, function(key, val){
15 | var tr = $('');
16 | var tdKey = $('| ' + key + ' | ');
17 | var tdVal = $('' + val + ' | ');
18 | tr.append(tdKey);
19 | tr.append(tdVal);
20 | table.append(tr);
21 | });
22 | return table;
23 | };
24 |
25 | function objs2TableRows(objs, keyToAddLink, baseUrl) {
26 | // convert an array of objects to table rows
27 | // and add links
28 | var table = $('
')
29 | for (var i = 0; i < objs.length; i++) {
30 | var obj = objs[i];
31 | var tr = $('');
32 | $.each(obj, function(key, val){
33 | var td = $('| ' + val + ' | ');
34 | if (key === keyToAddLink) {
35 | $(td).wrapInner('');
36 | };
37 | tr.append(td);
38 | });
39 | table.append(tr);
40 | };
41 | return table;
42 | };
43 |
44 | function objs2TableRowsWithStatus(objs, keyToAddLink, baseUrl, progressBarSelector) {
45 | // convert an array of objects to table rows
46 | // and add links
47 | var table = $('
');
48 | for (var i = 0; i < objs.length; i++) {
49 | var obj = objs[i];
50 | var tr = $('');
51 | $.each(obj, function(key, val){
52 | var td = $('| ' + val + ' | ');
53 | if (key === keyToAddLink) {
54 | $(td).wrapInner('');
55 | };
56 | tr.append(td);
57 | });
58 | var progressValue = i*100/objs.length + '%';
59 | $(progressBarSelector).css("width", progressValue)
60 | table.append(tr);
61 | };
62 | return table;
63 | };
64 |
65 | function addLinks(id, baseUrl){
66 | $('#' + id + 'td:nth-child(2)').append('Here');
67 | return;
68 | };
69 |
70 | function searchAutocomplete(selector){
71 | $(selector).autocomplete({
72 | minLength : 4,
73 | source : function(request, response){
74 | $.getJSON('search.php', request, function(json){
75 | var outObjs = [];
76 | for (var i = 0; i < json['se'].length; i++) {
77 | var obj = {};
78 | obj.label = json['se'][i]['umls_id'] + ':' + json['se'][i]['name'];
79 | obj.value = json['se'][i]['name'];
80 | outObjs.push(obj);
81 | };
82 | for (var i = 0; i < json['drugs'].length; i++) {
83 | var obj = {};
84 | obj.label = json['drugs'][i]['pert_id'] + ':' + json['drugs'][i]['pert_iname'];
85 | obj.value = json['drugs'][i]['pert_iname'];
86 | outObjs.push(obj);
87 | };
88 | response(outObjs);
89 | });
90 | }
91 | });
92 | };
93 |
94 | function drawPieChart(json, title, selector){
95 | // draw interactive piechart with json data using d3pie
96 | var data = [];
97 | var total = 0;
98 | $.each(json, function(key, val){
99 | data.push({"label": key, "value": val});
100 | total += val;
101 | });
102 | var pie = new d3pie(selector, {
103 | "header": {
104 | "title": {
105 | "text": title,
106 | "fontSize": 24,
107 | "font": "open sans"
108 | },
109 | "subtitle": {
110 | "text": "Total: " + total,
111 | "color": "#999999",
112 | "fontSize": 12,
113 | "font": "open sans"
114 | },
115 | "titleSubtitlePadding": 9
116 | },
117 | "footer": {
118 | "color": "#999999",
119 | "fontSize": 10,
120 | "font": "open sans",
121 | "location": "bottom-left"
122 | },
123 | "size": {
124 | "canvasWidth": 500,
125 | "canvasHeight": 500,
126 | },
127 | "data": {
128 | "sortOrder": "value-desc",
129 | "content": data,
130 | },
131 | "labels": {
132 | "outer": {
133 | "format": "label-value1",
134 | "pieDistance": 32
135 | },
136 | "inner": {
137 | "hideWhenLessThanPercentage": 3
138 | },
139 | "mainLabel": {
140 | "fontSize": 11
141 | },
142 | "percentage": {
143 | "color": "#ffffff",
144 | "decimalPlaces": 0
145 | },
146 | "value": {
147 | "color": "#adadad",
148 | "fontSize": 11
149 | },
150 | "lines": {
151 | "enabled": true
152 | }
153 | },
154 | "effects": {
155 | "pullOutSegmentOnClick": {
156 | "effect": "linear",
157 | "speed": 400,
158 | "size": 8
159 | }
160 | },
161 | "misc": {
162 | "gradient": {
163 | "enabled": true,
164 | "percentage": 100
165 | }
166 | }
167 | });
168 | };
169 |
--------------------------------------------------------------------------------
/python/orm.py:
--------------------------------------------------------------------------------
1 | # ORMs for the database behind SEP-L1000
2 | from sqlalchemy import create_engine
3 | from sqlalchemy.ext.declarative import declarative_base
4 | from sqlalchemy import ForeignKey, Column, Integer, String, Table, Float, Text, DATETIME
5 | from sqlalchemy.orm import backref, relationship
6 | from sqlalchemy.orm import sessionmaker
7 |
8 |
9 | db_config = 'mysql://root:@localhost/sep'
10 | engine = create_engine(db_config)
11 | Session = sessionmaker(autocommit=False, autoflush=False, bind=engine)
12 | session = Session()
13 |
14 | ## ORMs of the database
15 | Base = declarative_base()
16 |
17 |
18 | class Prediction(Base):
19 | """predicted drug-se connection"""
20 | __tablename__ = 'prediction'
21 | drug_id = Column(Integer, ForeignKey('drugs_lincs.id'), primary_key=True)
22 | se_id = Column(Integer, ForeignKey('side_effects.id'), primary_key=True)
23 | p_val = Column(Float)
24 | side_effect = relationship("SideEffect")
25 |
26 |
27 | class KnownConnection(Base):
28 | """Known drug-se connection from SIDER"""
29 | __tablename__ = 'sider_connections'
30 | drug_id = Column(Integer, ForeignKey('drugs_lincs.id'), primary_key=True)
31 | se_id = Column(Integer, ForeignKey('side_effects.id'), primary_key=True)
32 | known_side_effect = relationship("SideEffect")
33 |
34 |
35 | class DrugLINCS(Base):
36 | __tablename__ = 'drugs_lincs'
37 |
38 | id = Column(Integer, primary_key=True)
39 | pert_id = Column(String(32), unique=True)
40 | alt_name = Column(String(255))
41 | pert_iname = Column(String(255))
42 | LSM_id = Column(String(16))
43 | mls_id = Column(String(16))
44 | ncgc_id = Column(String(16))
45 | pert_collection = Column(String(16))
46 | pert_icollection = Column(String(16))
47 | pert_summary = Column(Text)
48 | pert_url = Column(Text)
49 | pubchem_cid = Column(String(16))
50 | canonical_smiles = Column(Text)
51 | inchi_key = Column(Text)
52 | inchi_string = Column(Text)
53 | molecular_formula = Column(Text)
54 | molecular_wt = Column(Float)
55 | structure_url = Column(Text)
56 |
57 | side_effects = relationship('Prediction')
58 | known_side_effects = relationship('KnownConnection')
59 |
60 | def __repr__(self):
61 | return "" % (self.pert_id, self.pert_iname)
62 |
63 |
64 | class SideEffect(Base):
65 | __tablename__ = 'side_effects'
66 |
67 | id = Column(Integer, primary_key=True)
68 | umls_id = Column(String(16), unique=True)
69 | name = Column(String(256))
70 | synonyms = Column(Text)
71 | auroc = Column(Float)
72 | soc = Column(String(128))
73 |
74 | def __repr__(self):
75 | return "" % self.name
76 |
77 |
78 | ### below are classes that are not connected to other tables
79 | class SOC(Base):
80 | __tablename__ = 'soc'
81 | id = Column(Integer, primary_key=True)
82 | name = Column(String(128), unique=True)
83 | color = Column(String(8))
84 |
85 |
86 | class DrugDrugbank(Base):
87 | __tablename__ = 'drugs_drugbank'
88 |
89 | id = Column(Integer, primary_key=True)
90 | drugbank_id = Column(String(32), unique=True)
91 | name = Column(String(64))
92 | pubchem_cid = Column(String(32))
93 | pharmgkb_id = Column(String(16))
94 |
95 |
96 | class DrugStitch(Base):
97 | __tablename__ = 'drugs_stitch'
98 |
99 | id = Column(Integer, primary_key=True)
100 | stitch_id = Column(String(32), unique=True)
101 | name = Column(String(128))
102 | smile_string = Column(Text)
103 | pubchem_cid = Column(String(32))
104 |
105 |
106 | Base.metadata.create_all(engine)
107 |
108 |
109 | ## functions to add and retrieve objects
110 | def get_or_create(session, model, **kwargs):
111 | # init a instance if not exists
112 | # http://stackoverflow.com/questions/2546207/does-sqlalchemy-have-an-equivalent-of-djangos-get-or-create
113 | instance = session.query(model).filter_by(**kwargs).first()
114 | if instance:
115 | return instance
116 | else:
117 | instance = model(**kwargs)
118 | session.add(instance)
119 | session.commit()
120 | return instance
121 |
122 | def add_predictions(se_names, aucs, pert_id, coefs, session):
123 | # add predictions into the database
124 | drug = get_or_create(session, DrugLINCS, pert_id=pert_id)
125 |
126 | for coef, se_name, auc in zip(coefs, se_names, aucs):
127 | a = Prediction(p_val=coef)
128 | a.side_effect = get_or_create(session, SideEffect, name=se_name)
129 | if a.side_effect.auroc is None:
130 | a.side_effect.auroc = auc
131 | drug.side_effects.append(a)
132 | try:
133 | session.add(drug)
134 | session.commit()
135 | except Exception as e:
136 | session.rollback()
137 | print e
138 | pass
139 | return
140 |
141 | def add_associations(se_ids, pert_id, session):
142 | # add known associations into the database
143 | drug = get_or_create(session, DrugLINCS, pert_id=pert_id)
144 |
145 | for se_id in se_ids:
146 | a = KnownConnection()
147 | a.known_side_effect = get_or_create(session, SideEffect, umls_id=se_id)
148 | drug.known_side_effects.append(a)
149 | try:
150 | session.add(drug)
151 | session.commit()
152 | except Exception as e:
153 | session.rollback()
154 | print e
155 | pass
156 | return
157 |
158 |
--------------------------------------------------------------------------------
/js/dataTables.bootstrap.js:
--------------------------------------------------------------------------------
1 | /*! DataTables Bootstrap integration
2 | * ©2011-2014 SpryMedia Ltd - datatables.net/license
3 | */
4 |
5 | /**
6 | * DataTables integration for Bootstrap 3. This requires Bootstrap 3 and
7 | * DataTables 1.10 or newer.
8 | *
9 | * This file sets the defaults and adds options to DataTables to style its
10 | * controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap
11 | * for further information.
12 | */
13 | (function(window, document, undefined){
14 |
15 | var factory = function( $, DataTable ) {
16 | "use strict";
17 |
18 |
19 | /* Set the defaults for DataTables initialisation */
20 | $.extend( true, DataTable.defaults, {
21 | dom:
22 | "<'row'<'col-xs-6'l><'col-xs-6'f>r>"+
23 | "t"+
24 | "<'row'<'col-xs-6'i><'col-xs-6'p>>",
25 | renderer: 'bootstrap'
26 | } );
27 |
28 |
29 | /* Default class modification */
30 | $.extend( DataTable.ext.classes, {
31 | sWrapper: "dataTables_wrapper form-inline dt-bootstrap",
32 | sFilterInput: "form-control input-sm",
33 | sLengthSelect: "form-control input-sm"
34 | } );
35 |
36 |
37 | /* Bootstrap paging button renderer */
38 | DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) {
39 | var api = new DataTable.Api( settings );
40 | var classes = settings.oClasses;
41 | var lang = settings.oLanguage.oPaginate;
42 | var btnDisplay, btnClass;
43 |
44 | var attach = function( container, buttons ) {
45 | var i, ien, node, button;
46 | var clickHandler = function ( e ) {
47 | e.preventDefault();
48 | if ( e.data.action !== 'ellipsis' ) {
49 | api.page( e.data.action ).draw( false );
50 | }
51 | };
52 |
53 | for ( i=0, ien=buttons.length ; i 0 ?
72 | '' : ' disabled');
73 | break;
74 |
75 | case 'previous':
76 | btnDisplay = lang.sPrevious;
77 | btnClass = button + (page > 0 ?
78 | '' : ' disabled');
79 | break;
80 |
81 | case 'next':
82 | btnDisplay = lang.sNext;
83 | btnClass = button + (page < pages-1 ?
84 | '' : ' disabled');
85 | break;
86 |
87 | case 'last':
88 | btnDisplay = lang.sLast;
89 | btnClass = button + (page < pages-1 ?
90 | '' : ' disabled');
91 | break;
92 |
93 | default:
94 | btnDisplay = button + 1;
95 | btnClass = page === button ?
96 | 'active' : '';
97 | break;
98 | }
99 |
100 | if ( btnDisplay ) {
101 | node = $('', {
102 | 'class': classes.sPageButton+' '+btnClass,
103 | 'aria-controls': settings.sTableId,
104 | 'tabindex': settings.iTabIndex,
105 | 'id': idx === 0 && typeof button === 'string' ?
106 | settings.sTableId +'_'+ button :
107 | null
108 | } )
109 | .append( $('', {
110 | 'href': '#'
111 | } )
112 | .html( btnDisplay )
113 | )
114 | .appendTo( container );
115 |
116 | settings.oApi._fnBindAction(
117 | node, {action: button}, clickHandler
118 | );
119 | }
120 | }
121 | }
122 | };
123 |
124 | attach(
125 | $(host).empty().html('').children('ul'),
126 | buttons
127 | );
128 | };
129 |
130 |
131 | /*
132 | * TableTools Bootstrap compatibility
133 | * Required TableTools 2.1+
134 | */
135 | if ( DataTable.TableTools ) {
136 | // Set the classes that TableTools uses to something suitable for Bootstrap
137 | $.extend( true, DataTable.TableTools.classes, {
138 | "container": "DTTT btn-group",
139 | "buttons": {
140 | "normal": "btn btn-default",
141 | "disabled": "disabled"
142 | },
143 | "collection": {
144 | "container": "DTTT_dropdown dropdown-menu",
145 | "buttons": {
146 | "normal": "",
147 | "disabled": "disabled"
148 | }
149 | },
150 | "print": {
151 | "info": "DTTT_print_info modal"
152 | },
153 | "select": {
154 | "row": "active"
155 | }
156 | } );
157 |
158 | // Have the collection use a bootstrap compatible drop down
159 | $.extend( true, DataTable.TableTools.DEFAULTS.oTags, {
160 | "collection": {
161 | "container": "ul",
162 | "button": "li",
163 | "liner": "a"
164 | }
165 | } );
166 | }
167 |
168 | }; // /factory
169 |
170 |
171 | // Define as an AMD module if possible
172 | if ( typeof define === 'function' && define.amd ) {
173 | define( ['jquery', 'datatables'], factory );
174 | }
175 | else if ( typeof exports === 'object' ) {
176 | // Node/CommonJS
177 | factory( require('jquery'), require('datatables') );
178 | }
179 | else if ( jQuery ) {
180 | // Otherwise simply initialise as normal, stopping multiple evaluation
181 | factory( jQuery, jQuery.fn.dataTable );
182 | }
183 |
184 |
185 | })(window, document);
186 |
187 |
--------------------------------------------------------------------------------
/toy/se_canvas_old.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Prediction of drug side effects
8 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
26 |
27 |
28 |
29 |
34 |
35 |
39 |
40 |
Predicted associated drugs:
41 |
44 |
45 |
46 |
73 |
74 |
75 |
Find side effects or drugs
76 |
77 |
81 |
82 |
83 |
84 |
89 |
90 |
91 |
92 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
121 |
--------------------------------------------------------------------------------
/drug_profile.html:
--------------------------------------------------------------------------------
1 |
117 |
--------------------------------------------------------------------------------
/js/download.js:
--------------------------------------------------------------------------------
1 | var clipboard = new Clipboard('.copy');
2 | clipboard.on('success', function(e) {
3 | flashTooltip(e.trigger, 'Copied!');
4 | });
5 |
6 | function flashTooltip(elem, msg) {
7 | // distroy the helper text
8 | $(elem).tooltip('destroy');
9 | // show tooltip
10 | elem.setAttribute('title', msg);
11 | $(elem).tooltip('show');
12 | // remote title and tooltip
13 | setTimeout(function(){
14 | $(elem).tooltip('destroy');
15 | elem.removeAttribute('title');
16 | }, 500);
17 | }
18 |
19 | // For data
20 | $.getJSON('data/download_data.json', function(results){
21 | var headerLabels = ['Name', 'Description', 'Rows', 'Columns', 'Size(MB)', 'md5', 'Source', 'Reference'];
22 | var widths = ["20%", "50%", "5%", "5%", "5%", "5%", "5%", "5%"];
23 |
24 | var table = $('').addClass('table table-striped table-hover table-condensed');
25 |
26 | var thead = $('');
27 | var tr = $('')
28 |
29 | $.each(headerLabels,function(i, headerLabel) {
30 | var w = widths[i];
31 | tr.append('| ' + headerLabel + ' | ');
32 | });
33 |
34 | thead.append(tr)
35 | table.append(thead);
36 | $("#data").append(table);
37 | var columnsDef = [
38 | {
39 | "data": "Name",
40 | "render": function(data, type, full, meta){
41 | return ''+data+'';
42 | },
43 | "className": "left"
44 | },
45 | {
46 | "data": "Description",
47 | "className": "left"
48 | },
49 | { "data": "Rows"},
50 | { "data": "Columns"},
51 | { "data": "Size(MB)"},
52 | {
53 | "data": "md5",
54 | "render": function(data, type, full, meta){
55 | var icon = '';
56 | return '' + icon + '';
57 | }
58 | },
59 | {
60 | "data" : "Source",
61 | "render": function(data, type, full, meta){
62 | var icon = ''
63 | if (data) {
64 | return ''+icon+'';
65 | }else{
66 | return icon;
67 | };
68 | },
69 | },
70 | {
71 | "data": "Reference",
72 | "render": function(data, type, full, meta){
73 | var icon = ''
74 | if (data) {
75 | return ''+icon+'';
76 | }else{
77 | return icon;
78 | }
79 | },
80 | }
81 | ];
82 |
83 | rctable = table.dataTable({
84 | "data": results,
85 | "columns": columnsDef,
86 | "order": [[0, 'asc']],
87 | "deferRender": true,
88 | "bAutoWidth": false,
89 | "ordering": false,
90 | "fnInitComplete": function(oSettings, json){ //DataTables has finished its initialisation.
91 | $('[data-toggle="tooltip"]').tooltip();
92 | },
93 | });
94 |
95 | });
96 |
97 | // For metadata
98 | $.getJSON('data/download_metadata.json', function(results){
99 | var headerLabels = ['Name', 'Fields', 'Rows', 'Columns', 'Size(MB)', 'md5'];
100 | var widths = ["20%", "40%", "10%", "10%", "10%", "10%"];
101 |
102 | var table = $('').addClass('table table-striped table-hover table-condensed');
103 |
104 | var thead = $('');
105 | var tr = $('')
106 |
107 | $.each(headerLabels,function(i, headerLabel) {
108 | var w = widths[i];
109 | tr.append('| ' + headerLabel + ' | ');
110 | });
111 |
112 | thead.append(tr)
113 | table.append(thead);
114 | $("#metadata").append(table);
115 | var columnsDef = [
116 | {
117 | "data": "Name",
118 | "render": function(data, type, full, meta){
119 | return ''+data+'';
120 | },
121 | "className": "left"
122 | },
123 | {
124 | "data": "Fields",
125 | "render": function(data, type, full, meta){
126 | var res = [];
127 | $.each(data, function(i, d){
128 | res.push( ''+ d +'' );
129 | })
130 | return res.join(', ')
131 | },
132 | "className": "left"
133 | },
134 | { "data": "Rows", "className": "left"},
135 | { "data": "Columns", "className": "left"},
136 | { "data": "Size(MB)", "className": "left"},
137 | {
138 | "data": "md5",
139 | "render": function(data, type, full, meta){
140 | var icon = '';
141 | return '' + icon + '';
142 | },
143 | "className": "left"
144 | },
145 | ];
146 |
147 | rctable = table.dataTable({
148 | "data": results,
149 | "columns": columnsDef,
150 | "order": [[0, 'asc']],
151 | "deferRender": true,
152 | "bAutoWidth": false,
153 | "ordering": false,
154 | "fnInitComplete": function(oSettings, json){ //DataTables has finished its initialisation.
155 | $('[data-toggle="tooltip"]').tooltip();
156 | },
157 | });
158 |
159 | });
160 |
--------------------------------------------------------------------------------
/toy/se_canvas.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Prediction of drug side effects
7 |
8 |
9 |
13 |
14 |
15 |
16 |
17 |
18 |
30 |
31 |
32 |
33 |
Side Effect Network Visualization on a Canvas
34 |
35 |
36 |
37 |
41 |
45 |
46 |
47 |
48 |
Loading side-effect canvas
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
Information of the selected tile
57 |
58 | Please click a tile on the canvas to display its information
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
73 |
74 |
75 |
162 |
163 |
--------------------------------------------------------------------------------
/css/visualizer5.css:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | text {font: 10px sans-serif; pointer-events: none;}
5 |
6 | body{
7 | margin-left:0px;
8 | font-family:Arial;
9 | }
10 |
11 | a.linker{
12 | text-decoration: none;
13 | }
14 |
15 | a.linker:hover{
16 | text-decoration:none;
17 | }
18 |
19 | div#topbar{
20 | position:absolute;
21 | top: 112px;
22 | left:0px;
23 | text-align: center;
24 | width: 1200px;
25 | }
26 |
27 | span.linker{
28 | /*padding-left: 40px;
29 | padding-right:40px;*/
30 | width:250px;
31 | display:inline-block;
32 | cursor: pointer;
33 | font-size:11px;
34 | }
35 |
36 | span.linker:hover{
37 | background-color: #FFF;
38 | font-weight:700;
39 |
40 | }
41 |
42 |
43 | div#externalwrapper{
44 | width:1000px;
45 | height:825px;
46 | margin-left:200px;
47 | margin-top:30px;
48 | padding:0px;
49 |
50 | }
51 |
52 | div#holdElements{
53 | width:800px;
54 | height:800px;
55 | border: 1px solid;
56 | font-size:11px;
57 | border-radius:40px;
58 | -moz-border-radius:40px; /*Firefox*/
59 | }
60 |
61 | div#header{
62 | width:800px;
63 | height:100px;
64 | background-color:#CCC;
65 | border-radius:40px 40px 0px 0px;
66 | -moz-border-radius:40px 40px 0px 0px; /*Firefox*/
67 | border-bottom: 1px solid;
68 |
69 | }
70 |
71 | div#footer{
72 | font-size:11px;
73 | text-align:center;
74 | position:absolute;
75 | left: 200px;
76 | top: 850px;
77 | height: 25px;
78 | width: 800px;
79 |
80 | }
81 |
82 | a {
83 | color:#579;
84 | }
85 |
86 | a:visited{
87 | color:#648;
88 | }
89 |
90 | div#menu.outputMenu{
91 | position:absolute;
92 | top:131px;
93 | left:810px;
94 | width:190px;
95 | height:24px;
96 | border-style:solid;
97 | border-color: #000;
98 | border-width: 1px 0px 1px 1px;
99 |
100 |
101 | }
102 | div#outputDisplay1{
103 | position:absolute;
104 | top:155px;
105 | left:810px;
106 | border-style: solid;
107 | border-color: #000;
108 | border-width: 0px 1px 1px 1px;
109 | border-radius:0px 0px 40px 0px;
110 | -moz-border-radius:0px 0px 40px 0px;
111 | width:190px;
112 | height:676px;
113 | text-align:center;
114 | font-size:12px;
115 | }
116 |
117 | div#outputDisplay2{
118 | position:absolute;
119 | left:810px;
120 | top:155px;
121 | width: 190px;
122 | height:676px;
123 | border-style: solid;
124 | border-color: #000;
125 | border-width: 0px 1px 1px 1px;
126 | border-radius:0px 0px 40px 0px;
127 | -moz-border-radius:0px 0px 40px 0px;
128 | text-align:center;
129 | }
130 |
131 | div#enrichmentResults{
132 | height:600px;
133 | width:185px;
134 | overflow-y:auto;
135 | overflow-x:visible;
136 | word-wrap:break-word;
137 | word-wrap:break-all; /*Chrome*/
138 | }
139 | div#SD1{
140 | width:175px;
141 | height:50px;
142 | border-radius:20px 20px 0px 0px;
143 | -moz-border-radius:20px 20px 0px 0px; /*Firefox*/
144 | background-color:#CCC;
145 | font-weight:700;
146 | margin-bottom:25px;
147 | line-height:50px;
148 | }
149 |
150 | .displayTitle{
151 | font-size:11px;
152 | font-weight:700px;
153 | }
154 | span#additTitle{
155 |
156 | position:absolute;
157 | top:100px;
158 | left:10px;
159 | width:171px;
160 | font-size:11px;
161 | font-weight:700px;
162 |
163 | }
164 | span#SD1{
165 | vertical-align:center;
166 | font-size:11px;
167 | }
168 |
169 | div#nodeInformation{
170 | position:absolute;
171 | top:25px;
172 | width:191px;
173 | height:45px;
174 | word-wrap:break-word;
175 | margin-bottom:5px;
176 | }
177 |
178 | div#infoContainer{
179 | border-top: 1px solid #CCC;
180 | padding-top:10px;
181 | padding-bottom:10px;
182 | border-bottom: 1px solid #CCC;
183 | position:absolute;
184 | top:135px;
185 | left:10px;
186 | width:171px;
187 | height:350px;
188 | overflow:auto;
189 |
190 | }
191 |
192 | /*Side Panel*/
193 |
194 | div#menu{
195 | background-color:#CCC;
196 | height:25px;
197 | line-height:25px;
198 | }
199 |
200 | div#menu span{
201 | padding-left:15px;
202 | padding-right:15px;
203 | padding-top:1px;
204 | padding-bottom:4px;
205 | background-color:#FFF;
206 | vertical-align:-10%;
207 | border: 1px outset #DDD;
208 | border-bottom:none;
209 | font-weight:700;
210 | cursor:default;
211 | border-radius:7px 7px 0px 0px;
212 | -moz-border-radius:7px 7px 0px 0px; /*Firefox*/
213 | }
214 |
215 | div#sidePanel{
216 | padding-top:0px;
217 | width:200px;
218 | height:699px;
219 | text-align:center;
220 | border-right: 1px solid;
221 | }
222 |
223 |
224 | div#menu span#tab2{
225 | font-weight:400;
226 | background-color:#CCC;
227 | }
228 |
229 | form#form1, form#form2{
230 | height:380px;
231 | }
232 | form#form2{
233 | display:none;
234 | }
235 |
236 | form#form3{
237 | height:150px;
238 | }
239 |
240 | textArea#nodes{
241 | width:150px;
242 | height:85px;
243 | vertical-align:middle;
244 | }
245 | div#sidePanel textarea#genes{
246 | width:150px;
247 | height:100px;
248 | }
249 |
250 | span.canvasOptions{
251 | padding-bottom:15px;
252 | }
253 |
254 | /*holdSVG Elements*/
255 |
256 | div#holdSVG{
257 | position:absolute;
258 | top:130px;
259 | left:401px;
260 | width:410px;
261 | height:500px;
262 | vertical-align:middle;
263 | text-align:center;
264 |
265 | }
266 |
267 | div#svgWrapper{
268 | padding-top:25px;
269 | width:390px;
270 | }
271 |
272 | div#svgContainer, div#chartContainer{
273 | padding-top:10px;
274 | text-align:center;
275 | }
276 |
277 | div#chartContainer{
278 | display:none;
279 | }
280 |
281 | svg#mainSVG{
282 | margin-top: 10px;
283 | vertical-align:middle;
284 | border: 1px solid;
285 | }
286 |
287 | svg#pvalueSVG{
288 | margin-top:10px;
289 | border: 1px solid;
290 | }
291 |
292 | form#selectSVG{
293 | padding-bottom:5px;
294 | font-size:11px;
295 | width:390px;
296 | text-align:center;
297 | }
298 |
299 |
300 | select{
301 | text-align:left;
302 | }
303 |
304 | /*GSEA Elements*/
305 |
306 |
307 |
308 | /*Manhattan Elements*/
309 |
310 | div#selectionDisplay3{
311 | position:absolute;
312 | left:401px;
313 | top:530px;
314 | height:200px;
315 | width:390px;
316 | text-align:center;
317 |
318 | }
319 |
320 | div#manhattan p{
321 | font-style:italic;
322 | font-size:11px;
323 | }
324 |
325 | div#manhattan p#clusterTitle{
326 | font-weight:700;
327 | font-style:normal;
328 | text-align:center;
329 | }
330 |
331 |
332 | div#manhattan table{
333 | margin-left:auto;
334 | margin-right:auto;
335 | }
336 |
337 | svg#sample_gene, svg#sample {
338 | width: 20px;
339 | height: 20px;
340 | }
341 |
342 | table{
343 | font-size:13px;
344 | }
345 |
346 | table.contain{
347 | table-layout:fixed;
348 | width:180px;
349 | word-wrap:break-word;
350 | }
351 |
352 | table.containManhattan{
353 | width:180px;
354 | }
355 | table.class{
356 | width:100%;
357 | }
358 |
359 |
360 | th {
361 | padding:5px;
362 | padding-left:12px;
363 | padding-right:12px;
364 | font-size:11px;
365 | }
366 |
367 | td, tr{
368 | padding-left: 10px;
369 | padding-right: 10px;
370 | font-size:10px;
371 | }
372 |
373 | td {
374 | text-align:center;
375 |
376 | }
377 | svg.chart{
378 | margin-top: 10px;
379 | border-style: solid;
380 | border-width: 1px;
381 | font-size:12px;
382 | }
383 |
384 |
385 | span#title{
386 | font-size:30px;
387 | vertical-align:center;
388 |
389 | }
390 |
391 | div#header{
392 | text-align:center;
393 | line-height:100px;
394 | }
395 |
396 |
397 | .axis path, .axis line {
398 | fill:none;
399 | stroke-width: 1px;
400 | stroke: black;
401 | shape-rendering: crispEdges;
402 | }
403 |
404 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Prediction of drug side effects
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
19 |
20 |
27 |
28 |
29 |
30 |