Skip to content

Commit

Permalink
feat: Color ramps (#604)
Browse files Browse the repository at this point in the history
  • Loading branch information
@theosanderson
theosanderson authored Sep 22, 2024
1 parent 8bd595d commit eefdc9f
Show file tree
Hide file tree
Showing 9 changed files with 163 additions and 99 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,4 @@ taxonium_component/storybook-static/**
**/*.pyc
**/_version.py
*/node_modules/**
.aider*
11 changes: 5 additions & 6 deletions node_modules/.yarn-integrity
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Empty file added taxonium_component/aider
View file
Empty file.
33 changes: 17 additions & 16 deletions taxonium_component/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,22 +32,6 @@
"@jbrowse/plugin-data-management": "^2.5.0",
"@jbrowse/react-linear-genome-view": "^2.5.0",
"@rollup/plugin-commonjs": "^25.0.0",
"axios": "^1.4.0",
"classnames": "^2.3.2",
"deck.gl": "=8.6.6",
"react-circular-progressbar": "^2.1.0",
"react-color": "^2.19.3",
"react-debounce-input": "^3.3.0",
"react-hot-toast": "^2.4.1",
"react-icons": "^4.8.0",
"react-modal": "^3.16.1",
"react-spinners": "^0.13.8",
"react-tabs": "4",
"react-tooltip": "^4.2.21",
"readable-web-to-node-stream": "^3.0.2",
"sb": "^7.0.14",
"scale-color-perceptual": "^1.1.2",
"taxonium_data_handling": "file:../taxonium_data_handling",
"@storybook/addon-essentials": "^7.0.14",
"@storybook/addon-interactions": "^7.0.14",
"@storybook/addon-links": "^7.0.14",
Expand All @@ -60,17 +44,34 @@
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^4.0.0",
"autoprefixer": "^10.4.14",
"axios": "^1.4.0",
"classnames": "^2.3.2",
"d3-scale": "^4.0.2",
"deck.gl": "=8.6.6",
"eslint": "^8.38.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"eslint-plugin-storybook": "^0.6.12",
"postcss": "^8.4.23",
"react": "^17.0.2",
"react-circular-progressbar": "^2.1.0",
"react-color": "^2.19.3",
"react-debounce-input": "^3.3.0",
"react-dom": "^17.0.2",
"react-hot-toast": "^2.4.1",
"react-icons": "^4.8.0",
"react-modal": "^3.16.1",
"react-spinners": "^0.13.8",
"react-tabs": "4",
"react-tooltip": "^4.2.21",
"readable-web-to-node-stream": "^3.0.2",
"release-it": "^15.10.3",
"sb": "^7.0.14",
"scale-color-perceptual": "^1.1.2",
"storybook": "^7.0.14",
"tailwindcss": "^3.3.2",
"taxonium_data_handling": "file:../taxonium_data_handling",
"vite": "^4.3.2",
"vite-plugin-css-injected-by-js": "^3.1.1",
"vite-plugin-externalize-deps": "^0.6.0",
Expand Down
2 changes: 1 addition & 1 deletion taxonium_component/src/Taxonium.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ function Taxonium({
const initial = config.colorMapping ? config.colorMapping : {};
return { ...initial, ...additionalColorMapping };
}, [config.colorMapping, additionalColorMapping]);
const colorHook = useColor(colorMapping);
const colorHook = useColor(config, colorMapping, colorBy.colorByField);

//TODO: this is always true for now
config.enable_ns_download = true;
Expand Down
107 changes: 48 additions & 59 deletions taxonium_component/src/hooks/useColor.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,36 @@
import { useCallback, useMemo } from "react";
import scale from "scale-color-perceptual";
import { scaleLinear } from "d3-scale";

let rgb_cache = {};

const useColor = (colorMapping) => {
const useColor = (config, colorMapping, colorByField) => {
const colorScales = useMemo(() => {
const scales = {};
if (config.colorRamps && config.colorRamps[colorByField]) {
const { scale: rampScale } = config.colorRamps[colorByField];
const domain = rampScale.map((d) => d[0]);
const range = rampScale.map((d) => d[1]);
scales.colorRamp = scaleLinear().domain(domain).range(range);
}
return scales;
}, [config.colorRamps, colorByField]);

const toRGB_uncached = useCallback(
(string) => {
console.log("colorRamps", config.colorRamps, colorByField);
if (config.colorRamps && config.colorRamps[colorByField]) {
const value = parseFloat(string);
const output = colorScales.colorRamp(value);
const as_list = output
.slice(4, -1)
.split(",")
.map((d) => parseInt(d));
return as_list;
}

if (typeof string === "number") {
const log10 = Math.log10(string);

const color = scale.plasma(log10 / 10);
// convert from hex to rgb
const rgb = [
Expand All @@ -23,6 +45,7 @@ const useColor = (colorMapping) => {
if (string in colorMapping) {
return colorMapping[string];
}

const amino_acids = {
A: [230, 25, 75],
R: [60, 180, 75],
Expand All @@ -31,19 +54,16 @@ const useColor = (colorMapping) => {
C: [245, 130, 49],
Q: [70, 240, 240],
E: [145, 30, 180],

G: [240, 50, 230],
H: [188, 246, 12],
I: [250, 190, 190],

L: [230, 0, 255],
K: [0, 128, 128],
M: [154, 99, 36],
F: [154, 60, 256],
P: [128, 0, 0],
T: [170, 255, 195],
W: [128, 128, 0],

Y: [0, 0, 117],
V: [0, 100, 177],
X: [128, 128, 128],
Expand All @@ -67,66 +87,35 @@ const useColor = (colorMapping) => {
if (string === "None") {
return [220, 220, 220];
}

if (string === "N/A") {
return [180, 180, 180];
}

if (string === "NA") {
return [180, 180, 180];
}

if (string === "USA") {
return [95, 158, 245]; //This is just because the default is ugly
}

if (string === "B.1.2") {
return [95, 158, 245]; //This is near B.1.617.2
}
if (string === "South_Africa") {
return [9, 191, 255]; // otherwise collides with Kenya
}
if (string === "England") {
return [214, 58, 15]; // UK all brick
}

if (string === "Scotland") {
return [255, 130, 82]; // UK all brick
}
if (string === "North America") {
return [200, 200, 50];
}
if (string === "South America") {
return [200, 100, 50];
}
if (string === "Wales") {
return [148, 49, 22]; // UK all brick
}
if (string === "Northern Ireland") {
return [140, 42, 15]; // UK all brick
}
if (string === "France") {
return [140, 28, 120]; // diff to UK
}
if (string === "Germany") {
return [106, 140, 28]; // diff to UK
}
if (string === "India") {
return [61, 173, 166]; // diff to UK
}
if (string === "Denmark") {
return [24, 112, 32]; // diff to UK
}
if (string === "OXFORD_NANOPORE") {
return [24, 32, 200];
}

if (string === "ION_TORRENT") {
return [24, 160, 32];
}
// Special cases for specific strings
const specialCases = {
USA: [95, 158, 245],
"B.1.2": [95, 158, 245],
South_Africa: [9, 191, 255],
England: [214, 58, 15],
Scotland: [255, 130, 82],
"North America": [200, 200, 50],
"South America": [200, 100, 50],
Wales: [148, 49, 22],
"Northern Ireland": [140, 42, 15],
France: [140, 28, 120],
Germany: [106, 140, 28],
India: [61, 173, 166],
Denmark: [24, 112, 32],
OXFORD_NANOPORE: [24, 32, 200],
ION_TORRENT: [24, 160, 32],
"Democratic Republic of the Congo": [17, 58, 99],
};

if (string === "Democratic Republic of the Congo") {
return [17, 58, 99]; // otherwise too similar to CAR
if (string in specialCases) {
return specialCases[string];
}

string = string.split("").reverse().join("");
Expand All @@ -146,7 +135,7 @@ const useColor = (colorMapping) => {
}
return rgb;
},
[colorMapping]
[colorMapping, config, colorByField, colorScales]
);

const toRGB = useCallback(
Expand All @@ -159,7 +148,7 @@ const useColor = (colorMapping) => {
return result;
}
},
[toRGB_uncached]
[toRGB_uncached, colorMapping]
);

const toRGBCSS = useCallback(
Expand Down
1 change: 1 addition & 0 deletions taxonium_component/src/hooks/useColorBy.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ function useColorBy(config, query, updateQuery) {
if (colorByField === "None") {
return "None";
}

if (colorByField === "genotype") {
if (colorCache[node.node_id]) {
//console.log("using cache");
Expand Down
Loading

0 comments on commit eefdc9f

Please sign in to comment.