Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
hierarchic-heatmap-table-component
Advanced tools
Readme
This is a code repository for the SIB - Swiss Institute of Bioinformatics CALIPHO group neXtProt project
A generic componenent to visualize data in a hierarchic table with heat map capabilities
Live demo : https://cdn.rawgit.com/calipho-sib/hierarchic-heatmap-table-component/v0.0.6/doc/index.html
1. You can get the library in your project using bower or npm
//BOWER//
bower install hierarchic-heatmap-table-component
//NODE//
npm install hierarchic-heatmap-table-component
Or Include the hierarchic-heatmap-table-component JS and CSS from rawgit CDN in the header of your html
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/calipho-sib/hierarchic-heatmap-table-component/v0.0.6/dist/heatmap-table.css">
<script src="https://cdn.rawgit.com/calipho-sib/hierarchic-heatmap-table-component/v0.0.6/dist/heatmap-table-bundle.js"></script>
NOTE : If you already got the dependencies (Bootstrap & Jquery) in your project, use the simple minified version instead of the bundle :
<script src="https://cdn.rawgit.com/calipho-sib/hierarchic-heatmap-table-component/v0.0.6/dist/heatmap-table.js"></script>
2. Specify a div in your html
<div id="heatmap-table"></div>
3. Create an instance of HeatmapTable in javascript, the div in which it will be display and the rendering options of your choice.
var heatmapTableOptions = {
valuesSetting: [
{ value: 'NotDetected', color: 'lightgray'},
{ value: 'Positive', color: 'FFA10A'},
{ value: 'High', color: 'red'}
],
columnWidth: "120px"
}
var heatMapTable = new HeatMapTable({
tableID: "heatmap-table",
options: heatmapTableOptions
});
4. Load the data
var data = [
{
"rowLabel": "Human anatomical entity",
"values": ["NotDetected", "High", "Positive"],
"children": [
{
"rowLabel": "Fluid and secretion",
"values": ["NotDetected", "High", "Positive"],
"children": []
}
],
}
];
heatMapTable.loadJSONData(data);
heatMapTable.show();
5. Et voila!
Check out this page for a better understanding of how to use the hierarchic heatmap table and its possibilities :
It is possible to fill the hierarchic heatmap table with protein features from NeXtProt, the human protein database.
//initalize nextprot Client
var applicationName = 'demo app'; //please provide a name for your application
var clientInfo='calipho group at sib'; //please provide some information about you
var nx = new Nextprot.Client(applicationName, clientInfo);
//var entry = "NX_P01308";
var isoform = "NX_P01308-1";
// hierarchic heatmap table options
var heatmapTableOptions = {
valuesSetting: [
// { value: 'Positive', color: '#FFA10A'},
{ value: 'Positive', color: '#FFA10A'},
{ value: 'NotDetected', color: "lightgray"},
{ value: 'Low', color: '#FFE6BD'},
{ value: 'Medium', color: '#FFC870'},
{ value: 'High', color: '#FFA10A'}
],
columnWidth: "30px",
detailTemplate: "detailTemplate",
headerTemplate: "headerTemplate",
headerTemplateData: headerTemplateData,
}
// Create nextprot hierarchic heatmap table
var heatMapTableName = "heatmap-table";
var heatMapTable = HeatMapTable({
tableID: heatMapTableName,
options: heatmapTableOptions
});
nx.getAnnotationsByCategory(proteinAccession, 'expression-profile').then(function (data) {
var experimentalContext = {};
//load experimental context
$.ajax(
{
type: "get",
url: "https://api.nextprot.org/entry/"+proteinAccession+"/experimental-context.json",
// url: "./data/experimental-context.json",
async: false,
success: function (data) {
data = data['entry']['experimentalContexts'];
for (var i = 0; i < data.length; i++) {
if (data[i].developmentalStage && data[i].developmentalStage.name != "unknown") {
experimentalContext[data[i].contextId] = data[i].developmentalStage.name;
}
}
},
error: function (msg) {
console.log(msg);
}
}
);
//convert the data to the format of heatmap table
var heatmapData = convertNextProtDataIntoHeatMapTableFormat(experimentalContext, data);
heatMapTable.loadJSONData(heatmapData);
heatMapTable.show();
});
https://search.nextprot.org/entry/NX_Q01101/gh/calipho-sib/protein-expression
If you have any problem or suggestion please open an issue here.
git clone https://github.com/calipho-sib/hierarchic-heatmap-table-component.git
npm install
(will install the development dependencies)
bower install
(will install the browser dependencies)
...make your changes and modifications...
grunt prod
(will create the min/bundle js & css in dist/ for node)
grunt bump
(will push and add a new release)
npm publish
(will publish in npm)
Copyright (c) 2016, SIB Swiss Institute of Bioinformatics
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
FAQs
A visualisation tool for displaying rows in a hiearchic manner with heatmap capabilities
The npm package hierarchic-heatmap-table-component receives a total of 5 weekly downloads. As such, hierarchic-heatmap-table-component popularity was classified as not popular.
We found that hierarchic-heatmap-table-component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.