Skip to content

Commit

Permalink
colo[u]r schemes key
Browse files Browse the repository at this point in the history
  • Loading branch information
@colin-combe
colin-combe committed Jun 24, 2020
1 parent 69c259a commit 3146249
Show file tree
Hide file tree
Showing 29 changed files with 329 additions and 959 deletions.
7 changes: 7 additions & 0 deletions css/demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@
text-decoration: underline;
}

.examples-dropdown {
float: right;
margin-top: 5px;
margin-right: 10px;
}

h1 {
font-size: 1.6em;
display: inline;
Expand Down Expand Up @@ -155,4 +161,5 @@ div#legendInner {

img {
vertical-align: middle;
/*margin: 3px;*/
}
24 changes: 9 additions & 15 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,9 @@ body, html {
-moz-user-select: none;
user-select: none;
}
h1 > a {
color: #fff;
}

body, input, select, textarea, button {
Font-family: "Lato-Regular", Helvetica, Arial, sans-serif;
Expand Down Expand Up @@ -165,17 +168,13 @@ body, input, select, textarea, button {


#main {
/*
height:100vh;
*/
width: 100vw;
/*display: table;*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/ overflow: hidden;
/* overflow: hidden;*/
/*z-index:-1;*/
}

Expand All @@ -194,11 +193,8 @@ body, input, select, textarea, button {
}
*/

.bar rect {
/*.bar rect {
fill: steelblue;
/*
shape-rendering: crispEdges;
*/
}
.bar text {
Expand All @@ -221,7 +217,6 @@ body, input, select, textarea, button {
font-weight: 400;
color: #039;
height: 30px;
/*#091D42;*/
}
.panelInner thead td {
Expand All @@ -230,10 +225,9 @@ body, input, select, textarea, button {
.panelInner td, .helpPanel td {
color: #777;
}
}*/

.controls {
margin: 0 10px 10px;
background: #ecedf2;
color: #091D42;
padding: 5px 10px;
Expand All @@ -242,9 +236,9 @@ body, input, select, textarea, button {
user-select: none;
}

#colourSelect span {
margin-right: 0.5em;
}
/*#colourSelect span {*/
/* margin-right: 0.5em;*/
/*}*/

label.horizontalFlow input[type=number] {
margin-left: 0.2em;
Expand Down
168 changes: 53 additions & 115 deletions dist/complexviewer.js
View file

Large diffs are not rendered by default.

0 images/logos/rapsilber-logo-lrg.png → images/logos/rappsilber-logo-lrg.png
View file
File renamed without changes
Binary file removed images/logos/rappsilber-logo-sml.png
View file
Binary file not shown.
Binary file added images/logos/rappsilber-logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 14 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,14 @@

<div class="page-header">
<i class="fa fa-github" onclick="window.location = 'https://github.com/MICommunity/ComplexViewer';"
style="margin-right:5px;" title="Go to GitHub project"></i>
<h1><a href="https://doi.org/10.1093/bioinformatics/btx497" target="_blank">ComplexViewer</a></h1>
<label for="dataSets">Examples:</label>
style="margin-right:5px;" title="GitHub project"></i>
<h1><a href="https://doi.org/10.1093/bioinformatics/btx497" target="_blank" title="Publication">ComplexViewer</a></h1>
<div class="examples-dropdown">
<label for="dataSets">Choose example:</label>
<select class="noShrink" id="dataSets"
onChange="/*document.getElementById('chkexpansion').checked = true;*/loadData();"></select>
<br>
</div>
</div>

<div id="centre">
Expand Down Expand Up @@ -127,7 +129,7 @@ <h1><a href="https://doi.org/10.1093/bioinformatics/btx497" target="_blank">Comp
</div> <!-- centreDiv -->

<div class="logoBar">
<a class="logo" href="http://rappsilberlab.org/" target="_blank"><img src="images/logos/rappsilber-logo-sml.png"
<a class="logo" href="http://rappsilberlab.org/" target="_blank"><img src="images/logos/rappsilber-logo.png"
alt="Rappsilber Laboratory"></a>
<a class="logo" href="http://www.ed.ac.uk/" target="_blank"><img src="./images/logos/eduni.jpeg"
alt="Edinburgh University"></a>
Expand All @@ -147,11 +149,11 @@ <h1><a href="https://doi.org/10.1093/bioinformatics/btx497" target="_blank">Comp
//<![CDATA[

const networkTargetDiv = document.getElementById('networkDiv');
const symbolTargetDiv = document.getElementById('symbolKeyDiv');
xlv = new complexviewer.App(networkTargetDiv);
// complexviewer.makeSymbolKey(document.getElementById('symbolKeyDiv'));
// const colorsTargetDiv = document.getElementById('colors');
cv = new complexviewer.App(networkTargetDiv);
cv.addColorSchemeKey(document.getElementById('colors'));
//todo - er, use css
xlv.svgElement.setAttribute('style', 'display: -webkit-box;display: -moz-box;display: -ms-flexbox; display: -webkit-flex;display: flex;flex-grow:1;');
cv.svgElement.setAttribute('style', 'display: -webkit-box;display: -moz-box;display: -ms-flexbox; display: -webkit-flex;display: flex;flex-grow:1;');

for (let example of exampleIndex) {
const dataSetsSelect = document.getElementById('dataSets');
Expand All @@ -165,7 +167,7 @@ <h1><a href="https://doi.org/10.1093/bioinformatics/btx497" target="_blank">Comp
changeAnnotations();

function loadData() {
xlv.clear();
cv.clear();
const dataSetsSelect = document.getElementById('dataSets');

const example = exampleIndex[dataSetsSelect.selectedIndex];
Expand All @@ -191,18 +193,18 @@ <h1><a href="https://doi.org/10.1093/bioinformatics/btx497" target="_blank">Comp

const path = dataSetsSelect.options[dataSetsSelect.selectedIndex].value;
d3.json(path, function (data) {
xlv.readMIJSON(data);//, matrixExpansion);
cv.readMIJSON(data);//, matrixExpansion);
});
}

function changeAnnotations() {
const annotationSelect = document.getElementById('annotationsSelect');
xlv.setAnnotations(annotationSelect.options[annotationSelect.selectedIndex].value);
cv.setAnnotations(annotationSelect.options[annotationSelect.selectedIndex].value);
}

function exportSVG() {
// todo
const xml = xlv.getSVG();
const xml = cv.getSVG();
let xmlAsUrl = 'data:image/svg;filename=xiNET-output.svg,';
xmlAsUrl += encodeURIComponent(xml);
alert('Downloading as SVG. You may need to change the file extension to \'.svg\' before opening.');
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@
"d3": "~3.5.5",
"intersectionjs": "^1.0.1",
"point2d": "^0.0.1",
"webcola": "^3.4.0"
"webcola": "^3.4.0",
"rgbcolor": "^1.0.1"
},
"keywords": [
"biojs",
Expand Down
71 changes: 36 additions & 35 deletions src/js/annotations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,85 +5,85 @@ import {Feature} from './viz/feature';


//todo - cache annotations in memory
export function setAnnotations (annotationChoice, /*App*/ controller) {
controller.annotationChoice = annotationChoice;
export function setAnnotations (annotationChoice, /*App*/ app) {
app.annotationChoice = annotationChoice;

// proteins = participants.filter('blah') // todo

//clear all annot's
for (let mol of controller.participants.values()) {
for (let mol of app.participants.values()) {
if (mol.id.indexOf("uniprotkb_") === 0) { //LIMIT IT TO PROTEINS
mol.clearPositionalFeatures();
}
}
//controller.legendChanged(null); // todo - this isn't happening?
//app.legendChanged(null); // todo - this isn't happening?

let molsAnnotated = 0;
const molCount = controller.participants.size;
const molCount = app.participants.size;
if (annotationChoice.toUpperCase() === "MI FEATURES") {
for (let mol of controller.participants.values()) {
for (let mol of app.participants.values()) {
if (mol.id.indexOf("uniprotkb_") === 0) { //LIMIT IT TO PROTEINS
mol.setPositionalFeatures(mol.miFeatures);
}
}
chooseColours();
chooseColors();
} else if (annotationChoice.toUpperCase() === "INTERACTOR") {
if (controller.proteinCount < 21) {
for (let mol of controller.participants.values()) {
if (app.proteinCount < 21) {
for (let mol of app.participants.values()) {
if (mol.id.indexOf("uniprotkb_") === 0) { //LIMIT IT TO PROTEINS
const annotation = new Annotation(mol.json.label, new Feature(null, 1 + "-" + mol.size));
mol.setPositionalFeatures([annotation]);
}
}
chooseColours();
chooseColors();
} else {
alert("Too many (> 20) - can't colour by interactor.");
alert("Too many (> 20) - can't color by interactor.");
}
} else if (annotationChoice.toUpperCase() === "SUPERFAM" || annotationChoice.toUpperCase() === "SUPERFAMILY") {
for (let mol of controller.participants.values()) {
for (let mol of app.participants.values()) {
if (mol.id.indexOf("uniprotkb_") === 0) { //LIMIT IT TO PROTEINS
getSuperFamFeatures(mol.id, function (id, fts) {
const m = controller.participants.get(id);
const m = app.participants.get(id);
m.setPositionalFeatures(fts);
molsAnnotated++;
if (molsAnnotated === molCount) {
chooseColours();
chooseColors();
}
});
} else {
molsAnnotated++;
if (molsAnnotated === molCount) {
chooseColours();
chooseColors();
}
}
}
} else if (annotationChoice.toUpperCase() === "UNIPROT" || annotationChoice.toUpperCase() === "UNIPROTKB") {
for (let mol of controller.participants.values()) {
for (let mol of app.participants.values()) {
if (mol.id.indexOf("uniprotkb_") === 0) { //LIMIT IT TO PROTEINS
getUniProtFeatures(mol.id, function (id, fts) {
const m = controller.participants.get(id);
const m = app.participants.get(id);
for (let f = 0; f < fts.length; f++) {
const feature = fts[f];
feature.seqDatum = new Feature(null, feature.begin + "-" + feature.end);
}
m.setPositionalFeatures(fts);
molsAnnotated++;
if (molsAnnotated === molCount) {
chooseColours();
chooseColors();
}
});
} else {
molsAnnotated++;
if (molsAnnotated === molCount) {
chooseColours();
chooseColors();
}
}
}
}

function chooseColours() {
function chooseColors() {
const categories = new Set();
for (let participant of controller.participants.values()) {
for (let participant of app.participants.values()) {
if (participant.annotations) {
for (let annotation of participant.annotations) {
categories.add(annotation.description);
Expand All @@ -92,45 +92,46 @@ export function setAnnotations (annotationChoice, /*App*/ controller) {
}
let catCount = categories.size;

let colourScheme;
let colorScheme;

if (catCount < 3) {
catCount = 3;
}

if (catCount < 9) {
colourScheme = d3.scale.ordinal().range(colorbrewer.Dark2[catCount].slice().reverse());
colorScheme = d3.scale.ordinal().range(colorbrewer.Dark2[catCount].slice().reverse());
// } else if (catCount < 13) {
// var reversed = colorbrewer.Paired[catCount];//.slice().reverse();
// colourScheme = d3.scale.ordinal().range(reversed);
// colorScheme = d3.scale.ordinal().range(reversed);
} else {
colourScheme = d3.scale.category20();
colorScheme = d3.scale.category20();
}

for (let mol of controller.participants.values()) {
for (let mol of app.participants.values()) {
if (mol.annotations) {
for (let anno of mol.annotations) {
let colour;
let color;
if (anno.description === "No annotations") {
colour = "#cccccc";
color = "#cccccc";
} else {
colour = colourScheme(anno.description);
color = colorScheme(anno.description);
}

//ToDO - way more of these are being created than needed
controller.createHatchedFill("checkers_" + anno.description, colour);
app.createHatchedFill("checkers_" + anno.description, color);
const checkedFill = "url('#checkers_" + anno.description + "')";

anno.fuzzyStart.setAttribute("fill", checkedFill);
anno.fuzzyStart.setAttribute("stroke", colour);
anno.fuzzyStart.setAttribute("stroke", color);
anno.fuzzyEnd.setAttribute("fill", checkedFill);
anno.fuzzyEnd.setAttribute("stroke", colour);
anno.certain.setAttribute("fill", colour);
anno.certain.setAttribute("stroke", colour);
anno.fuzzyEnd.setAttribute("stroke", color);
anno.certain.setAttribute("fill", color);
anno.certain.setAttribute("stroke", color);
}
}
}
controller.legendChanged(colourScheme);
app.featureColors = colorScheme;
app.colorSchemeChanged();
}
}

Expand Down
Loading

0 comments on commit 3146249

Please sign in to comment.