monarch-initiative / phenogrid

The phenogrid widget
13 stars 14 forks source link

tooltips might not work on local installation. #148

Closed harryhoch closed 9 years ago

harryhoch commented 9 years ago

tooltip text pulled up from the files in js/res might not work correctly if run locally, as the aax call will not work with the "file" url. Workaround needed.

yuanzhou commented 9 years ago

@harryhoch Javascript has limited access to local files. Google chrome doesn't allow ajax to access local files that's why those popups don't work in chrome. But firefox allows local ajax calls. I'll look into this and see if there's a good workaround.

harryhoch commented 9 years ago

@yuanzhou yes, I know. Please consider this to be low priority, thanks

yuanzhou commented 9 years ago

Already added this information in README.md.

yuanzhou commented 9 years ago

I think we can close this since it's an known issue with browser safety and there's no workaround unless you run everything on a web server.

yuanzhou commented 9 years ago

@harryhoch @davism84 I was still not satisfied with the answer to this issue. Have been thinking about some workarounds. I think I found a better way. Instead of putting those html notes in separate html files and getting the content via ajax calls, I tried to add the html content (after some basic json encoding) of each note into a json file, called htmlnotes.json in the same directory.

{
  "scores": "<div><h5>What is the score shown at the top of the grid?<\/h5><div>The score indicated at the top of each column, below the target label, is the overall similarity score between the query and target. Briefly, for each of the targets (columns) listed, the set of Q(1..n) phenotypes of the query are pairwise compared against all of the T(1..m) phenotypes in the target.<br \/><br \/>Then, for each pairwise comparison of phenotypes (q x P1...n), the best comparison is retained for each q and summed for all p1..n. <\/div><br \/><div>The raw score is then normalized against the maximal possible score, which is the query matching to itself. Therefore, range of scores displayed is 0..100. For more details, please see (Smedley et al, 2012 <a href='http:\/\/www.ncbi.nlm.nih.gov\/pubmed\/23660285' target='_blank'>http:\/\/www.ncbi.nlm.nih.gov\/pubmed\/23660285<\/a> and <a href='http:\/\/www.owlsim.org' target='_blank'>http:\/\/www.owlsim.org<\/a>)<\/div>\r\n",
  "sorts": "<div><h5>What are the different ways that phenotypes can be sorted?<\/h5><div>The phenotypes that are shown on the left side of the grid may be sorted using one of three methods.  More options may be available in the future.<\/div><ul><li><b>Alphabetical<\/b> - A-Z<\/li><li><b>Frequency and Rarity<\/b> - Phenotypes are sorted by the sum of the phenotype values across all models\/genes<\/li><li><b>Frequency (Default)<\/b> - Phenotypes are sorted by the count of the number of model\/gene matches per phenotype <\/li><\/ul>",
  "faq": "<div><h4>Phenogrid Faq<\/h4><h5>How are the similar targets obtained?<\/h5><div>We query our owlsim server to obtain the top 100 most-phenotypically similar targets for the selected organism.  The grid defaults to showing mouse.<\/div><h5>What are the possible targets for comparison?<\/h5><div>Currently, the phenogrid is configured to permit comparisons between your query (typically a set of disease-phenotype associations) and one of:<ul><li>human diseases<\/li><li>mouse genes<\/li><li>zebrafish genes<\/li><\/ul>You can change the target organism by selecting a new organism.  The grid will temporarily disappear, and reappear with the new target rendered.<\/div><h5>Can I compare the phenotypes to human genes?<\/h5><div>No, not yet.  But that will be added soon.<\/div><h5>Where does the data come from?<\/h5><div>The phenotype annotations utilized to compute the phenotypic similarity are drawn from a number of sources:<ul><li>Human disease-phenotype annotations were obtained from  <a href='http:\/\/human-phenotype-ontology.org' target='_blank'>http:\/\/human-phenotype-ontology.org<\/a>, which contains annotations for approx. 7,500 diseases.<\/li><li>Mouse gene-phenotype annotations were obtained from MGI <a href='www.informatics.jax.org'>(www.informatics.jax.org).<\/a> The original annotations were made between genotypes and phenotypes.  We then inferred the relationship between gene and phenotype based on the genes that were variant in each genotype.  We only perform this inference for those genotypes that contain a single variant gene.<\/li><li>Zebrafish genotype-phenotype annotations were obtained from ZFIN  <a href='www.zfin.org' target='_blank'>(www.zfin.org).<\/a> The original annotations were made between genotypes and phenotypes, with some of those genotypes created experimentally with the application of morpholino reagents.  Like for mouse, we inferred the relationship between gene and phenotype based on the genes that were varied in each genotype.  We only perform this inference for those genotypes that contain a single variant gene.<\/li><li>All annotation data, preformatted for use in OWLSim, is available for download from  <a href='http:\/\/code.google.com\/p\/phenotype-ontologies\/' target='_blank'>http:\/\/code.google.com\/p\/phenotype-ontologies\/ <\/a> <\/li><\/ul><h5>What does the phenogrid show?<\/h5><div>The grid depicts the comparison of a set of phenotypes in a query (such as those annotated to a disease or a gene) with one or more phenotypically similar targets.  Each row is a phenotype that is annotated to the query (either directly or it is a less-specific phenotype that is inferred), and each column is an annotated target (such as a gene or disease).  When a phenotype is shared between the query and target, the intersection is colored based on the selected calculation method (see What do the different calculation methods mean).   You can hover over the intersection to get more information about what the original phenotype is of the target, and what is in-common between the two.<\/div><h5>Where can I make suggestions for improvements or additions?<\/h5><div>Please email your feedback to <a href='mailto:info@monarchinitiative.org'>info@monarchinitiative.org.<\/a><h5>What happens to the phenotypes that are not shared?<\/h5><div>Phenotypes that were part of your query but are not shared by any of the targets can be seen by clicking the View Unmatched Phenotype link.<\/div><h5>Why do I sometimes see two targets that share the same phenotypes have very different overall scores?<\/h5><div>This is usually because of some of the phenotypes that are not shared with the query.  For example, if the top hit to a query matches each phenotype exactly, and the next hit matches all of them exactly plus it has 10 additional phenotypes that don&#39;t match it at all, it is penalized for those phenotypes are not in common, and thus ranks lower on the similarity scale. <div><\/div>\r\n",
  "calcs": "<div><h5>What do the different calculation methods mean?<\/h5><div>For each pairwise comparison of phenotypes from the query (q) and target (t), we can assess their individual similarities in a number of ways.  First, we find the phenotype-in-common between each pair (called the lowest common subsumer or LCS). Then, we can leverage the Information Content (IC) of the phenotypes (q,t,lcs) in a variety of combinations to interpret the strength of the similarity.<\/div><br \/><div><b>**Uniqueness <\/b>reflects how often the phenotype-in-common is annotated to all diseases and genes in the Monarch Initiative knowledgebase.  This is simply a reflection of the IC normalized based on the maxIC. IC(PhenotypeInCommon)maxIC(AllPhenotypes)<\/div><br \/><div><b>**Distance<\/b> is the euclidian distance between the query, target, and phenotype-in-common, computed using IC scores.<br\/><center>d=(IC(q)-IC(lcs))2+(IC(t)-IC(lcs))2<\/center>  <\/div><br \/><div>This is normalized based on the maximal distance possible, which would be between two rarely annotated leaf nodes that only have the root node (phenotypic abnormality) in common.  So what is depicted in the grid is 1-dmax(d)<\/div><br \/><div><b>**Ratio(q)<\/b> is the proportion of shared information between a query phenotype and the phenotype-in-common with the target.<br \/><center>ratio(q)=IC(lcs)IC(q)*100<\/center><\/div><br \/><div><b>**Ratio(t)<\/b> is the proportion of shared information between the target phenotype and the phenotype-in-common with the query.<br \/><center>ratio(t)=IC(lcs)IC(t)*100<\/center><\/div><\/div>\r\n"
}

Then include this file in phenogrid.js using the nodejs require() method.

// html content to be used for popup dialogues
var htmlnotes = require('./htmlnotes.json');

After that, I could simply call _populateDialog(htmlnotes.scores) ,for example, to display the popup. This works perfectly with the local installation when you load the index.html in browser with file:// URI.

This change also got rid of the _getResourceURL() as well as the _showDialog() function. Meanwhile, we no longer need the htmlPath config from both phenogrid.js and the monarch-app end.

harryhoch commented 9 years ago

@yuanzhou, sounds like a good fix. go for it.

yuanzhou commented 9 years ago

PR #198