Skip to content

Commit

Permalink
Merge branch 'dev' into 'master'
Browse files Browse the repository at this point in the history 
Dev

See merge request ebi-biows/jdispatcher-viewers!2
  • Loading branch information
@biomadeira
biomadeira committed Oct 30, 2024
2 parents d7fc617 + 8e82ff6 commit 624ee39
Show file tree
Hide file tree
Showing 26 changed files with 1,734 additions and 2,896 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.vscode
node_modules
tmpdev
src/testdata
src/testdata
.history/
2 changes: 1 addition & 1 deletion .gitlab-ci.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
# gitlab-runner exec docker build_nodecli

# node 18.7
image: node:18.7-alpine3.16
image: node:18.20-alpine3.19

before_script:
# installing dependencies for node-canvas (https://github.com/Automattic/node-canvas)
Expand Down
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

### [0.0.9](https://github.com/ebi-jdispatcher/jdispatcher-viewers/compare/v0.0.8...v0.0.9) (2024-10-30)

### [0.0.8](https://github.com/ebi-jdispatcher/jdispatcher-viewers/compare/v0.0.7...v0.0.8) (2023-02-16)

### [0.0.7](https://github.com/ebi-jdispatcher/jdispatcher-viewers/compare/v0.0.6...v0.0.7) (2022-08-11)
Expand Down
18 changes: 9 additions & 9 deletions bin/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import svgToMiniDataURI from "mini-svg-data-uri";
import { isBrowser, isNode } from "browser-or-node";
import { VisualOutput } from "./visual-output-app";
import { FunctionalPredictions } from "./functional-predictions-app";
import { validateJobId, fetchData, dataAsType, getJdispatcherJsonURL, validateSubmittedJobIdInput, validateSubmittedDbfetchInput, getIPRMCDataModelFlatFromXML, } from "./other-utilities";
import { ColorSchemeEnum } from "./custom-types";
import svgToMiniDataURI from 'mini-svg-data-uri';
import { isBrowser, isNode } from 'browser-or-node';
import { VisualOutput } from './visual-output-app';
import { FunctionalPredictions } from './functional-predictions-app';
import { validateJobId, fetchData, dataAsType, getJdispatcherJsonURL, validateSubmittedJobIdInput, validateSubmittedDbfetchInput, getIPRMCDataModelFlatFromXML, } from './other-utilities';
import { ColorSchemeEnum } from './custom-types';
// plugin support & module support
// if (typeof window === "undefined") {
if (isBrowser) {
Expand Down Expand Up @@ -35,7 +35,7 @@ if (isNode) {
};
}
// web-component support
import "./visual-output-webcomponent.ts";
import "./functional-predictions-webcomponent.ts";
import './visual-output-webcomponent';
import './functional-predictions-webcomponent';
// demo index page with JobId input form (implemented in TypeScript)
import "./index.ts";
import '.';
48 changes: 24 additions & 24 deletions bin/color-schemes.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { fabric } from "fabric";
import { fabric } from 'fabric';
export const defaultGradient = {
0.0: [255, 64, 64],
0.25: [255, 255, 64],
Expand All @@ -8,21 +8,21 @@ export const defaultGradient = {
keys: [0.0, 0.25, 0.5, 0.75, 1.0],
};
export function colorDefaultGradient(canvasObj, start, end) {
canvasObj.set("fill", new fabric.Gradient({
type: "linear",
canvasObj.set('fill', new fabric.Gradient({
type: 'linear',
coords: {
x1: start,
y1: 0,
x2: end,
y2: 0
y2: 0,
},
colorStops: [
{ offset: 0.0, color: `rgb(${defaultGradient[0.0].join(",")})` },
{ offset: 0.25, color: `rgb(${defaultGradient[0.25].join(",")})` },
{ offset: 0.5, color: `rgb(${defaultGradient[0.5].join(",")})` },
{ offset: 0.75, color: `rgb(${defaultGradient[0.75].join(",")})` },
{ offset: 1.0, color: `rgb(${defaultGradient[1.0].join(",")})` }
]
{ offset: 0.0, color: `rgb(${defaultGradient[0.0].join(',')})` },
{ offset: 0.25, color: `rgb(${defaultGradient[0.25].join(',')})` },
{ offset: 0.5, color: `rgb(${defaultGradient[0.5].join(',')})` },
{ offset: 0.75, color: `rgb(${defaultGradient[0.75].join(',')})` },
{ offset: 1.0, color: `rgb(${defaultGradient[1.0].join(',')})` },
],
}));
}
export const ncbiBlastGradient = {
Expand All @@ -34,25 +34,25 @@ export const ncbiBlastGradient = {
keys: [0, 40, 50, 80, 200],
};
export function colorNcbiBlastGradient(canvasObj, start, end) {
canvasObj.set("fill", new fabric.Gradient({
type: "linear",
canvasObj.set('fill', new fabric.Gradient({
type: 'linear',
coords: {
x1: start,
y1: 0,
x2: end,
y2: 0
y2: 0,
},
colorStops: [
{ offset: 0.0, color: `rgb(${ncbiBlastGradient[0].join(",")})` },
{ offset: 0.199999, color: `rgb(${ncbiBlastGradient[0].join(",")})` },
{ offset: 0.2, color: `rgb(${ncbiBlastGradient[40].join(",")})` },
{ offset: 0.399999, color: `rgb(${ncbiBlastGradient[40].join(",")})` },
{ offset: 0.4, color: `rgb(${ncbiBlastGradient[50].join(",")})` },
{ offset: 0.599999, color: `rgb(${ncbiBlastGradient[50].join(",")})` },
{ offset: 0.6, color: `rgb(${ncbiBlastGradient[80].join(",")})` },
{ offset: 0.799999, color: `rgb(${ncbiBlastGradient[80].join(",")})` },
{ offset: 0.8, color: `rgb(${ncbiBlastGradient[200].join(",")})` },
{ offset: 1.0, color: `rgb(${ncbiBlastGradient[200].join(",")})` },
]
{ offset: 0.0, color: `rgb(${ncbiBlastGradient[0].join(',')})` },
{ offset: 0.199999, color: `rgb(${ncbiBlastGradient[0].join(',')})` },
{ offset: 0.2, color: `rgb(${ncbiBlastGradient[40].join(',')})` },
{ offset: 0.399999, color: `rgb(${ncbiBlastGradient[40].join(',')})` },
{ offset: 0.4, color: `rgb(${ncbiBlastGradient[50].join(',')})` },
{ offset: 0.599999, color: `rgb(${ncbiBlastGradient[50].join(',')})` },
{ offset: 0.6, color: `rgb(${ncbiBlastGradient[80].join(',')})` },
{ offset: 0.799999, color: `rgb(${ncbiBlastGradient[80].join(',')})` },
{ offset: 0.8, color: `rgb(${ncbiBlastGradient[200].join(',')})` },
{ offset: 1.0, color: `rgb(${ncbiBlastGradient[200].join(',')})` },
],
}));
}
129 changes: 47 additions & 82 deletions bin/color-utilities.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { ColorSchemeEnum } from "./custom-types";
import { ColorSchemeEnum } from './custom-types';
export function getRgbColorGradient(score, gradientSteps, colorScheme) {
// assumes length of gradientSteps is 5
const colorSchemeSteps = colorScheme.keys;
if (colorSchemeSteps.length != gradientSteps.length) {
throw Error("Color Scheme and Gradient Steps should have matching lengths!");
throw Error('Color Scheme and Gradient Steps should have matching lengths!');
}
if (score + 0.0 === 0.0) {
return `rgb(${colorScheme[colorSchemeSteps[0]].join(",")})`;
return `rgb(${colorScheme[colorSchemeSteps[0]].join(',')})`;
}
else {
const start = gradientSteps[0];
Expand All @@ -17,55 +17,44 @@ export function getRgbColorGradient(score, gradientSteps, colorScheme) {
let h;
if (score < step1) {
const logStart = start === 0 ? Math.log10(Number.MIN_VALUE) : Math.log10(start);
h =
0.0 +
(Math.log10(score) - logStart) / (Math.log10(step1) - logStart);
h = 0.0 + (Math.log10(score) - logStart) / (Math.log10(step1) - logStart);
}
else if (score < step2) {
h =
1.0 +
(Math.log10(score) - Math.log10(step1)) /
(Math.log10(step2) - Math.log10(step1));
h = 1.0 + (Math.log10(score) - Math.log10(step1)) / (Math.log10(step2) - Math.log10(step1));
}
else if (score < step3) {
h =
2.0 +
(Math.log10(score) - Math.log10(step2)) /
(Math.log10(step3) - Math.log10(step2));
h = 2.0 + (Math.log10(score) - Math.log10(step2)) / (Math.log10(step3) - Math.log10(step2));
}
else if (score < end) {
h =
3.0 +
(Math.log10(score) - Math.log10(step3)) /
(Math.log10(end) - Math.log10(step3));
h = 3.0 + (Math.log10(score) - Math.log10(step3)) / (Math.log10(end) - Math.log10(step3));
}
else {
h = 4.0;
}
const rgb = HSVtoRGB(h / 6, 0.75, 1.0);
return `rgb(${rgb.join(",")})`;
return `rgb(${rgb.join(',')})`;
}
}
export function getRgbColorFixed(score, gradientSteps, colorScheme) {
// assumes length of gradientSteps is 5
const colorSchemeSteps = colorScheme.keys;
if (colorSchemeSteps.length != gradientSteps.length) {
throw Error("Color Scheme and Gradient Steps should have matching lengths!");
throw Error('Color Scheme and Gradient Steps should have matching lengths!');
}
if (score + 0.0 === 0.0 || score < gradientSteps[1]) {
return `rgb(${colorScheme[colorSchemeSteps[0]].join(",")})`;
return `rgb(${colorScheme[colorSchemeSteps[0]].join(',')})`;
}
else if (score >= gradientSteps[1] && score < gradientSteps[2]) {
return `rgb(${colorScheme[colorSchemeSteps[1]].join(",")})`;
return `rgb(${colorScheme[colorSchemeSteps[1]].join(',')})`;
}
else if (score >= gradientSteps[2] && score < gradientSteps[3]) {
return `rgb(${colorScheme[colorSchemeSteps[2]].join(",")})`;
return `rgb(${colorScheme[colorSchemeSteps[2]].join(',')})`;
}
else if (score >= gradientSteps[3] && score < gradientSteps[4]) {
return `rgb(${colorScheme[colorSchemeSteps[3]].join(",")})`;
return `rgb(${colorScheme[colorSchemeSteps[3]].join(',')})`;
}
else if (score >= gradientSteps[4]) {
return `rgb(${colorScheme[colorSchemeSteps[4]].join(",")})`;
return `rgb(${colorScheme[colorSchemeSteps[4]].join(',')})`;
}
else {
return `rgb(192,192,192)`;
Expand All @@ -74,13 +63,7 @@ export function getRgbColorFixed(score, gradientSteps, colorScheme) {
export function getGradientSteps(minEvalue, maxEvalue, minEvalueNotZero, colorScheme) {
let gradientSteps = [];
if (colorScheme === ColorSchemeEnum.fixed) {
gradientSteps = [
0,
Math.pow(10, -1),
Math.pow(10, 0),
Math.pow(10, 1),
Math.pow(10, 2),
];
gradientSteps = [0, Math.pow(10, -1), Math.pow(10, 0), Math.pow(10, 1), Math.pow(10, 2)];
}
else if (colorScheme === ColorSchemeEnum.dynamic) {
if (maxEvalue < 1e-304) {
Expand Down Expand Up @@ -119,31 +102,13 @@ export function getGradientSteps(minEvalue, maxEvalue, minEvalueNotZero, colorSc
else {
const diffEvalue = Math.log10(minEvalueNotZero) - Math.log10(maxEvalue);
if (Math.abs(diffEvalue) <= 2) {
gradientSteps = [
minEvalue,
1,
(2 + maxEvalue) / 3,
(2 + 2 * maxEvalue) / 3,
maxEvalue,
];
gradientSteps = [minEvalue, 1, (2 + maxEvalue) / 3, (2 + 2 * maxEvalue) / 3, maxEvalue];
}
else if (Math.abs(diffEvalue) <= 4) {
gradientSteps = [
minEvalue,
Math.pow(10, diffEvalue / 2),
1,
(maxEvalue + 1) / 2,
maxEvalue,
];
gradientSteps = [minEvalue, Math.pow(10, diffEvalue / 2), 1, (maxEvalue + 1) / 2, maxEvalue];
}
else {
gradientSteps = [
minEvalue,
Math.pow(10, diffEvalue / 2),
Math.pow(10, diffEvalue / 4),
1,
maxEvalue,
];
gradientSteps = [minEvalue, Math.pow(10, diffEvalue / 2), Math.pow(10, diffEvalue / 4), 1, maxEvalue];
}
}
}
Expand Down Expand Up @@ -235,36 +200,36 @@ export function HSVtoRGB(h, s, v) {
export function colorByDatabaseName(domainName) {
let color;
// if (domainName == "InterPro") color = "rgb(211,47,47)";
if (domainName == "Pfam")
color = "rgb(211,47,47)";
else if (domainName == "SUPERFAMILY")
color = "rgb(171,71,188)";
else if (domainName == "SMART")
color = "rgb(106,27,154)";
else if (domainName == "HAMAP")
color = "rgb(57,73,171)";
else if (domainName == "PANTHER")
color = "rgb(33,150,243)";
else if (domainName == "PRODOM")
color = "rgb(0,188,212)";
else if (domainName == "PROSITE profiles")
color = "rgb(0,150,136)";
else if (domainName == "CDD")
color = "rgb(76,175,80)";
else if (domainName == "CATH-Gene3D")
color = "rgb(205,220,57)";
else if (domainName == "PIRSF")
color = "rgb(255,235,59)";
else if (domainName == "PRINTS")
color = "rgb(255,193,7)";
else if (domainName == "TIGRFAMs")
color = "rgb(255,112,67)";
else if (domainName == "SFLD")
color = "rgb(121,85,72)";
else if (domainName == "PROSITE patterns")
color = "rgb(55,71,79)";
if (domainName == 'Pfam')
color = 'rgb(211,47,47)';
else if (domainName == 'SUPERFAMILY')
color = 'rgb(171,71,188)';
else if (domainName == 'SMART')
color = 'rgb(106,27,154)';
else if (domainName == 'HAMAP')
color = 'rgb(57,73,171)';
else if (domainName == 'PANTHER')
color = 'rgb(33,150,243)';
else if (domainName == 'PRODOM')
color = 'rgb(0,188,212)';
else if (domainName == 'PROSITE profiles')
color = 'rgb(0,150,136)';
else if (domainName == 'CDD')
color = 'rgb(76,175,80)';
else if (domainName == 'CATH-Gene3D')
color = 'rgb(205,220,57)';
else if (domainName == 'PIRSF')
color = 'rgb(255,235,59)';
else if (domainName == 'PRINTS')
color = 'rgb(255,193,7)';
else if (domainName == 'TIGRFAMs')
color = 'rgb(255,112,67)';
else if (domainName == 'SFLD')
color = 'rgb(121,85,72)';
else if (domainName == 'PROSITE patterns')
color = 'rgb(55,71,79)';
else
color = "rgb(128,128,128)"; // UNCLASSIFIED and OTHERS
color = 'rgb(128,128,128)'; // UNCLASSIFIED and OTHERS
return color;
}
// Using coloring scheme from https://www.ebi.ac.uk/interpro/entry/InterPro/#table
Expand Down
20 changes: 4 additions & 16 deletions bin/coords-utilities.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,24 +41,12 @@ export function getQuerySubjPixelCoords(queryLen, subjLen, subjHspLen, contentWi
const totalSubjPixels = getTotalPixels(queryLen, subjLen, subjHspLen, contentWidth, contentScoringWidth);
const startQueryPixels = contentLabelWidth + marginWidth;
const endQueryPixels = contentLabelWidth + totalQueryPixels - marginWidth;
const startSubjPixels = contentLabelWidth +
totalQueryPixels +
contentScoringWidth +
marginWidth;
const endSubjPixels = contentLabelWidth +
totalQueryPixels +
contentScoringWidth +
totalSubjPixels -
marginWidth;
const startSubjPixels = contentLabelWidth + totalQueryPixels + contentScoringWidth + marginWidth;
const endSubjPixels = contentLabelWidth + totalQueryPixels + contentScoringWidth + totalSubjPixels - marginWidth;
return [startQueryPixels, endQueryPixels, startSubjPixels, endSubjPixels];
}
export function getDomainPixelCoords(startPixels, endPixels, hitLen, startDomain, endDomain, marginWidth) {
const startDomainPixels = startPixels +
(startDomain * (endPixels - startPixels)) / hitLen +
marginWidth;
const endDomainPixels = startPixels +
(endDomain * (endPixels - startPixels)) / hitLen -
marginWidth -
startDomainPixels;
const startDomainPixels = startPixels + (startDomain * (endPixels - startPixels)) / hitLen + marginWidth;
const endDomainPixels = startPixels + (endDomain * (endPixels - startPixels)) / hitLen - marginWidth - startDomainPixels;
return [startDomainPixels, endDomainPixels];
}
Loading

0 comments on commit 624ee39

Please sign in to comment.