From 144d24b8ca808b52d8490be00ae42490b5587324 Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Mon, 23 Sep 2024 23:55:42 +0100 Subject: [PATCH 1/2] try vis --- taxonium_component/src/components/Key.jsx | 162 ++++++++++++++-------- 1 file changed, 103 insertions(+), 59 deletions(-) diff --git a/taxonium_component/src/components/Key.jsx b/taxonium_component/src/components/Key.jsx index 26f1f448..d5771f96 100644 --- a/taxonium_component/src/components/Key.jsx +++ b/taxonium_component/src/components/Key.jsx @@ -1,6 +1,7 @@ -import prettifyName from "../utils/prettifyName"; -import { useState } from "react"; -import classNames from "classnames"; +import React, { useState, useEffect } from 'react'; +import classNames from 'classnames'; +import prettifyName from '../utils/prettifyName'; + const Key = ({ keyStuff, colorByField, @@ -14,80 +15,123 @@ const Key = ({ }) => { const numLegendEntries = 10; const [collapsed, setCollapsed] = useState(window.innerWidth < 800); - // sort by item.count in descending order - const sortedKeyStuff = keyStuff.sort((a, b) => b.count - a.count); - // truncate to 10 items - const isTruncated = sortedKeyStuff.length > numLegendEntries; - const topTenKeyStuff = sortedKeyStuff.slice(0, numLegendEntries); - // if there is an item with value of "", remove it - const filteredKeyStuff = topTenKeyStuff.filter((item) => item.value !== ""); - if (colorByField === "None") { - return null; - } - if (!filteredKeyStuff || filteredKeyStuff.length == 0) { + const [colorRamp, setColorRamp] = useState(null); + + useEffect(() => { + if (config.colorRamps && config.colorRamps[colorByField]) { + setColorRamp(config.colorRamps[colorByField]); + } else { + setColorRamp(null); + } + }, [colorByField, config.colorRamps]); + + if (colorByField === 'None' || !keyStuff || keyStuff.length === 0) { return null; } + + const sortedKeyStuff = keyStuff + .sort((a, b) => b.count - a.count) + .filter((item) => item.value !== ''); + const isTruncated = sortedKeyStuff.length > numLegendEntries; + const topKeyStuff = sortedKeyStuff.slice(0, numLegendEntries); + + const ColorRampScale = ({ colorRamp }) => { + const { scale } = colorRamp; + const minValue = scale[0][0]; + const maxValue = scale[scale.length - 1][0]; + const range = maxValue - minValue; + + const getPositionPercentage = (value) => { + return ((value - minValue) / range) * 100; + }; + + const gradientStops = scale.map(([value, color]) => { + const percentage = getPositionPercentage(value); + return `${color} ${percentage}%`; + }).join(', '); + + return ( +
+
+
+ {scale.map(([value, color], index) => { + const positionPercentage = getPositionPercentage(value); + return ( +
+ {value} +
+
+ ); + })} +
+
+ ); + }; + return (

setCollapsed(!collapsed)} > {collapsed - ? "Key" - : colorByField === "genotype" - ? colorByGene + ":" + colorByPosition + ? 'Key' + : colorByField === 'genotype' + ? `${colorByGene}:${colorByPosition}` : prettifyName(colorByField, config)} - {/* Arrow to collapse up/down */} - {collapsed ? "▲" : "▼"} + {collapsed ? '▲' : '▼'}

{!collapsed && ( <> - {filteredKeyStuff.map((item, index) => { - // item.color is [r, g, b] - const rgb = item.color; - const color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`; - return ( -
{ - setCurrentColorSettingKey(item.value); - setColorSettingOpen(true); - }} - onMouseEnter={() => { - setHoveredKey(item.value); - }} - onMouseLeave={() => setHoveredKey(null)} - title="Edit color" - > + {colorRamp ? ( + + ) : ( + topKeyStuff.map((item, index) => { + const rgb = item.color; + const color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`; + return (
- {item.value} -
- ); - })} - + className="key-text text-xs text-gray-700 mt-0.5 break-all cursor-pointer" + key={index} + onClick={() => { + setCurrentColorSettingKey(item.value); + setColorSettingOpen(true); + }} + onMouseEnter={() => setHoveredKey(item.value)} + onMouseLeave={() => setHoveredKey(null)} + title="Edit color" + > +
+ {item.value} +
+ ); + }) + )} {isTruncated &&
...
} )} @@ -95,4 +139,4 @@ const Key = ({ ); }; -export default Key; +export default Key; \ No newline at end of file From f9b8241c358fa1990c39ef144efc42bfe44ab8aa Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Mon, 23 Sep 2024 22:56:13 +0000 Subject: [PATCH 2/2] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- taxonium_component/src/components/Key.jsx | 36 ++++++++++++----------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/taxonium_component/src/components/Key.jsx b/taxonium_component/src/components/Key.jsx index d5771f96..eb0b56b8 100644 --- a/taxonium_component/src/components/Key.jsx +++ b/taxonium_component/src/components/Key.jsx @@ -1,6 +1,6 @@ -import React, { useState, useEffect } from 'react'; -import classNames from 'classnames'; -import prettifyName from '../utils/prettifyName'; +import React, { useState, useEffect } from "react"; +import classNames from "classnames"; +import prettifyName from "../utils/prettifyName"; const Key = ({ keyStuff, @@ -25,13 +25,13 @@ const Key = ({ } }, [colorByField, config.colorRamps]); - if (colorByField === 'None' || !keyStuff || keyStuff.length === 0) { + if (colorByField === "None" || !keyStuff || keyStuff.length === 0) { return null; } const sortedKeyStuff = keyStuff .sort((a, b) => b.count - a.count) - .filter((item) => item.value !== ''); + .filter((item) => item.value !== ""); const isTruncated = sortedKeyStuff.length > numLegendEntries; const topKeyStuff = sortedKeyStuff.slice(0, numLegendEntries); @@ -45,10 +45,12 @@ const Key = ({ return ((value - minValue) / range) * 100; }; - const gradientStops = scale.map(([value, color]) => { - const percentage = getPositionPercentage(value); - return `${color} ${percentage}%`; - }).join(', '); + const gradientStops = scale + .map(([value, color]) => { + const percentage = getPositionPercentage(value); + return `${color} ${percentage}%`; + }) + .join(", "); return (
@@ -83,22 +85,22 @@ const Key = ({ return (

setCollapsed(!collapsed)} > {collapsed - ? 'Key' - : colorByField === 'genotype' + ? "Key" + : colorByField === "genotype" ? `${colorByGene}:${colorByPosition}` : prettifyName(colorByField, config)} - {collapsed ? '▲' : '▼'} + {collapsed ? "▲" : "▼"}

{!collapsed && ( @@ -124,7 +126,7 @@ const Key = ({
{item.value} @@ -139,4 +141,4 @@ const Key = ({ ); }; -export default Key; \ No newline at end of file +export default Key;