From 2baae9b115c3280d67d99109ffe2a52cd6859630 Mon Sep 17 00:00:00 2001 From: Vedran Kasalica Date: Fri, 7 Jun 2024 05:56:24 +0200 Subject: [PATCH 1/3] Update demo examples and a slightly the interface --- src/components/Home.tsx | 2 +- src/components/HomeBox.tsx | 1 + src/components/explore/InputOutputSelection.tsx | 3 ++- src/components/explore/InputsOutputs.tsx | 12 +++++------- src/stores/ExploreDataStore.ts | 4 ++-- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/Home.tsx b/src/components/Home.tsx index e2c5a9c3..a0589909 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -9,7 +9,7 @@ const Home: FC = () => { return (
- +
diff --git a/src/components/HomeBox.tsx b/src/components/HomeBox.tsx index f72bc278..89fca340 100644 --- a/src/components/HomeBox.tsx +++ b/src/components/HomeBox.tsx @@ -28,6 +28,7 @@ export function HomeBox({ label, descr, buttonText, imgUrl, isEnabled, component

{label}

{descr}

+
{buttonText}
diff --git a/src/components/explore/InputOutputSelection.tsx b/src/components/explore/InputOutputSelection.tsx index 94f8d61b..9cd59819 100644 --- a/src/components/explore/InputOutputSelection.tsx +++ b/src/components/explore/InputOutputSelection.tsx @@ -18,7 +18,8 @@ const InputsOutputSelection: React.FC = observer(({ }; return ( -
+
{ Object.values(dataTaxonomy).map((paramClass) => { // try { diff --git a/src/components/explore/InputsOutputs.tsx b/src/components/explore/InputsOutputs.tsx index 2d77a333..bcf388ab 100644 --- a/src/components/explore/InputsOutputs.tsx +++ b/src/components/explore/InputsOutputs.tsx @@ -59,8 +59,8 @@ const InputsOutputs: React.FC = observer((props) => { ] workflowConfig.outputs = [ { - "http://edamontology.org/data_0006": { id: "http://edamontology.org/data_0006", label: "Data", root: "http://edamontology.org/data_0006", subsets: [] }, - "http://edamontology.org/format_1915": { id: "http://edamontology.org/format_3747", label: "protXML", root: "http://edamontology.org/format_1915", subsets: [] }, + "http://edamontology.org/data_0006": { id: "http://edamontology.org/data_3753", label: "Over-representation data", root: "http://edamontology.org/data_0006", subsets: [] }, + "http://edamontology.org/format_1915": { id: "http://edamontology.org/format_3464", label: "JSON", root: "http://edamontology.org/format_1915", subsets: [] }, } ]; }); @@ -80,8 +80,7 @@ const InputsOutputs: React.FC = observer((props) => { {taxStore.error &&
Data taxonomy could not be retrieved ({taxStore.error})
} {/* Inputs */} -
+
Inputs
{workflowConfig.inputs.map((input: ApeTaxTuple, index: number) => { @@ -97,8 +96,7 @@ const InputsOutputs: React.FC = observer((props) => {
{/* Outputs */} -
+
Outputs
{workflowConfig.outputs.map((output: ApeTaxTuple, index: number) => { @@ -118,7 +116,7 @@ const InputsOutputs: React.FC = observer((props) => {
- +
diff --git a/src/stores/ExploreDataStore.ts b/src/stores/ExploreDataStore.ts index 2a5b7501..659d22bc 100644 --- a/src/stores/ExploreDataStore.ts +++ b/src/stores/ExploreDataStore.ts @@ -18,8 +18,8 @@ const emptyWorkflowConfig = () => { ], outputs: [ { - "http://edamontology.org/data_0006": { id: "http://edamontology.org/data_0006", label: "Data", root: "http://edamontology.org/data_0006", subsets: [] }, - "http://edamontology.org/format_1915": { id: "http://edamontology.org/format_3747", label: "protXML", root: "http://edamontology.org/format_1915", subsets: [] }, + "http://edamontology.org/data_0006": { id: "http://edamontology.org/data_3753", label: "Over-representation data", root: "http://edamontology.org/data_0006", subsets: [] }, + "http://edamontology.org/format_1915": { id: "http://edamontology.org/format_3464", label: "JSON", root: "http://edamontology.org/format_1915", subsets: [] }, } ], constraints: [{id: "", label: "", parameters: []} as ConstraintInstance], From 62c4dedecd85985cd19722a84b625cb7446a254a Mon Sep 17 00:00:00 2001 From: Vedran Kasalica Date: Tue, 13 Aug 2024 12:19:48 +0200 Subject: [PATCH 2/3] Change CSS for Unknown values --- .../benchmark/VisualizeBenchmarks.tsx | 4 +- src/components/explore/GenerationResults.tsx | 4 +- src/utils.ts | 44 ++++++++++++++++++- 3 files changed, 47 insertions(+), 5 deletions(-) diff --git a/src/components/benchmark/VisualizeBenchmarks.tsx b/src/components/benchmark/VisualizeBenchmarks.tsx index 33601930..f960a95c 100644 --- a/src/components/benchmark/VisualizeBenchmarks.tsx +++ b/src/components/benchmark/VisualizeBenchmarks.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { observer } from 'mobx-react-lite'; import { BenchmarkValue, BenchmarkRun } from '../../stores/BenchmarkTypes'; -import { mapValueToColor } from '../../utils'; +import { mapDesirabilityToColor } from '../../utils'; import './VisualizeBenchmarks.css'; const VisualizeBenchmark: React.FC = observer((props) => { @@ -41,7 +41,7 @@ const VisualizeBenchmark: React.FC = observer((props) => { {/* Benchmark values */} { benchmarkValues.map((bmv: BenchmarkValue, index: number) => { - const color = mapValueToColor(bmv.desirability); + const color = mapDesirabilityToColor(bmv.desirability); const tooltip = bmv.tooltip; return ( = observer((props) => { const navigate = useNavigate(); @@ -126,7 +126,7 @@ const GenerationResults: React.FC = observer((props) => { [ , + style={{ backgroundColor: mapDesirabilityToColor(step.desirability), backgroundImage: mapValueToBackground(step.label) }}> , i + 1 < benchmark.steps.length ? : null ])}
diff --git a/src/utils.ts b/src/utils.ts index 361dc330..e7f261f0 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,8 +1,50 @@ import * as d3 from 'd3'; -export const mapValueToColor = (value: number) => { +/** + * Maps a numerical desirability value to a corresponding color using a quantized color scale. + * + * This function uses D3's `scaleQuantize` to map an input value between -1 and 1 + * to a discrete color from a predefined range. The color scale is intended to represent + * a gradient from undesirable to neutral to desirable, with the colors transitioning + * from warm to cool. + * + * @param {number} value - A numerical value representing the desirability, + * expected to be within the range [-1, 1]. + * @returns {string} A color code in hexadecimal format that corresponds to the + * input value on the desirability scale. + * + * Example: + * ```typescript + * const color = mapDesirabilityToColor(0.5); + * console.log(color); // might output "#aee5a3" + * ``` + */ +export const mapDesirabilityToColor = (value: number) => { const colorScale = d3.scaleQuantize() .domain([-1, 1]) .range(["#fc9d5a", "#ffb582", "#ffceab", "#ffe6d5", "#ffffff", "#d7f3d1", "#aee5a3", "#81d876", "#48c946"]); return colorScale(value); } + +/** + * Maps a string value to a corresponding CSS background style. + * + * This function checks if the provided string starts with the word "Unknown." + * If it does, it returns a CSS linear gradient that creates a striped pattern. + * If the value is undefined or doesn't start with "Unknown," it returns 'transparent'. + * + * This can be useful for visually indicating unknown or unspecified values in a UI. + * + * @param {string | undefined} value - A string value that may be undefined. The function + * checks if this value starts with 'Unknown'. + * @returns {string} A CSS background property value. If the value starts with 'Unknown', + * it returns a striped pattern as a linear gradient. Otherwise, it returns 'transparent'. + */ +export const mapValueToBackground = (value: string | undefined) => { + if (value?.startsWith('Unknown')) { + return 'linear-gradient(135deg, transparent 45%, black 45%, black 55%, transparent 55%)'; + } else { + return 'transparent'; + } +} + From 74235610c561ae7efa97e06567096a6e93aa5db8 Mon Sep 17 00:00:00 2001 From: Vedran Kasalica Date: Tue, 13 Aug 2024 12:32:12 +0200 Subject: [PATCH 3/3] Update gitignore --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index eb8f921d..f04711d2 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,5 @@ yarn-error.log* .env .vscode +# Build files +web.zip