Skip to content

epiviz/epiviz-chart

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
cdn
 
 
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Documentation

Documentation for the web components is available at

https://epiviz.github.io/components/

Usage from cdn

Add this to HTML head (loads dependencies)

<script src="https://cdn.jsdelivr.net/gh/epiviz/epiviz-chart/cdn/jquery/dist/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/gh/epiviz/epiviz-chart/cdn/jquery-ui/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/gh/epiviz/epiviz-chart/cdn/renderingQueues/renderingQueue.js"></script>
<script src="https://cdn.jsdelivr.net/gh/epiviz/epiviz-chart/cdn/webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="https://cdn.jsdelivr.net/gh/epiviz/epiviz-chart/cdn/epiviz-components.html">

For development

To locally setup epiviz-chart

  • Clone the repo git clone https://github.com/epiviz/epiviz-chart
  • Install Bower from bower.io
  • install bower dependencies bower install
  • Install polymer-cli polymer server

Dependency in an application

bower install --save epiviz/epiviz-chart

Demos

demo folder contains examples of various epiviz components

  • index-json.html should work as it contains static data in the html

most other examples, require an instance of EFS running.

To run a local instance of polymer-server

polymer serve -p 8080

Then navigate to any files inside the demo folder

http://localhost:8080/components/epiviz-charts/demo/<FILE_NAME.html>

Epiviz-environment or Epiviz-nav elements

(also checkout demo/index-readme.html)

Imagine a html page containing a navigational element (a genome browser)

<epiviz-navigation 
    id="nav" 
    chr="chr11" 
    start=101322295 
    end=131454659>
</epiviz-navigation>

We can add a visualization with static data assigned to the element.

elem = document.createElement('epiviz-scatter-plot'); 
elem.setAttribute('json-data', '{ \
  "rows": { \
         "end": [101454659,0,417130,0,0,83502,0,148863,0,0], \
         "start": [101322295,0,463451,0,0,132428,0,63018,0,0], \
         "chr": ["chr11","chr11","chr11","chr11","chr11","chr11","chr11","chr11","chr11","chr11"] \
  }, \
  "cols": { \
         "ExpressionA": [-0.188,0.153,-0.762,0.53,-0.776,-0.32,-0.731,6.503,11.087,10.569], \
         "ExpressionB": [-0.325,-0.289,-0.523,1.417,-0.636,-0.89,-0.786,4.885,9.112,8.862] \
  } \
}'); 
elem.setAttribute('dim-s', '["ExpressionA", "ExpressionB"]');
// instead can also set `json-data` on the component
elem.slot="charts"

Add the plot to the dom

nav = document.querySelector('#nav')
nav.appendChild(elem)

We can programmatically update any of the attributes on the visualization. This should be similar to updating attributes in JS.

// get chart
chart = document.querySelector("epiviz-scatter-plot")

// get current chart settings
currentSettings = chart.chartSettings;
// modify chart settings
currentSettings["circleRadiusRatio"] = 0.1;

// set settings back to chart
chart.setAttribute("chart-settings", JSON.stringify(currentSettings));

Similarly, can also update chart-colors & other attributes

Optimize elements for production

npm install -g polymer-bundler

polymer-bundler --inline-scripts --inline-css --strip-comments epiviz-charts.html > dist/epiviz-charts.html

Docker Instructions

The docker setup, runs polymer server to serve the components and/or app pages, and nginx as a proxy.

To build,

docker build . -t epiviz-chart

--no-cache for rebuilding during development

To run,

docker run -p 80:80 -dt epiviz-chart

Development

For development, also expose port 8081 on the container.

docker run -p 80:80 -p 8081:8081 -dt epiviz-chart

To use the container for serving app pages,

copy html files to /app/, there's an nginx route (<HOSTNAME>/app/) configured to serve these pages. The included index.html uses the loader.