-
Notifications
You must be signed in to change notification settings - Fork 4
Documentation
This document itemizes some of the themes and issues to be aware of when continuing the development of the nSides visualization, written in d3.js, which will be accessible online at http://nsides.io.
Just a few quick notes first:
- The code is written for d3.js v.4 which has a distinct set of and style for calling methods.
- The codebase is written in JS and Python; in respect to Python, it makes calls to two sets of API's ... one accessing a MySQL DB and the other (main) one accessing MongoDB.
- API calls follow a standard pattern. ** One important query is: http://localhost:8080/api/v1/query?service=nsides&meta=get_top_10_effects&q=19097016 ** See API implementation below for more details
The layout has a media query added to provide responsive layouts when on a Mobile device or Tablet. We employ a single block @media only screen and (max-width: 600px) { that then alters the behavior of the .select_container, .select_container_effect, #header-content, #header h3, #header, .svg-container, .footer-img, #footer elements.
Additionally, to provide scaling per the original aspect ratio of the graph as well as centering, we use a naive approach on lines 190-195 of the main nsides_dev.html page. We use the style properties preserveAspectRatio, viewBox and d3.js classed function to implement the scaling and removed the static style attributes width, height.
We can consider the usage of the FauxDOM React+D3.js strategy (as employed with the qtdb histogram) for a more tightly coupled display.
The visualization is written in D3.js version v.4. We are using the hosted version (http://d3js.org/d3.v4.min.js). Consider checking in hosted version into this repos.
The visualization features two items of note: the grid and mouseover; both of these need to be coupled to the React.JS functionality.
Because the X and Y axis details change (e.g Some drugs have data for fewer years than others; Some PRR values have a narrower range than others) it is important to scale the visualization accordingly. Consider this example code when performing that task: http://bl.ocks.org/WilliamQLiu/59c87d2bcc00800ec3f9)
When it comes time to add multiple drug effects, consider using the d3.nest function as seen in this example: http://bl.ocks.org/d3noob/d8be922a10cb0b148cd5
The current implementation uses a file (drug-brandnames-v4.js) with the drug class lines removed. However, we can also pull from the API. Unfortunately the API is meant to search for DISPLAY NAMES but we wish to search for RxCUIS.
Using the following call allows for one to get the drug details (i.e. name) from RxNorm's REST API; using this with the fetch.js file (./index/js/fetch.js) should allow for drugs to be found and then added to the selection list.
https://rxnav.nlm.nih.gov/REST/rxcui/392151/allProperties.json?prop=all
refs.
- https://clin-table-search.lhc.nlm.nih.gov/apidoc/rxterms/v3/doc.html#params
- https://rxnav.nlm.nih.gov/RxNormAPIs.html#uLink=RxNorm_SOAP_getAllProperties
Currently, we have eschewed using NPM in favor of using inline script tags to ensure stability of the prototype. The file, however, are React v.14 and so it is recommended to use Babel/ES6 sparingly. Nonetheless, babel.js (./index/js/babel.js) has been included for transcoding on the fly.
As per the QTDB project, a new FauxDOM file has been added (./index/js/PlotFauxDOM.js) and this is where the integration of the D3.js code goes. During initial iterations, the D3 code was added as an inline script. The code is well encapsulated which should make it a matter of copying it into the FauxDOM after it has been polished. Take notice of commented lines where dynamic variables can be replaced as PROPS as per the React.js methodology of development.
The nSides API can retreive data from the Mongo OR the MySQL store. Despite the difference in DB storage, the output and API URL patterns are the same.
- URL pattern should be like /api/v1/query?service=&meta=&q=
- The nSides API call to "get top 10 effects based on this drug" would be /api/v1/query?service=nsides&meta=get_top_10_effects&q=19097016
- The mobile responsive code does not alter the d3.js code in anyway. Consider updating d3 so that fonts scale appropriately