Merge pull request #69 from Workflomics/small_updates

UI/UX updates

.gitignore

@@ -25,3 +25,5 @@ yarn-error.log*
 .env
 .vscode
 
+# Build files
+web.zip

src/components/Home.tsx

@@ -9,7 +9,7 @@ const Home: FC = () => {
   return (
     <div>
       <div className="flex space-x-7 p-11 justify-center">
-        <HomeBox label="Generate workflow" descr="Explore bioinformatics workflows generated according to your description" imgUrl={generate_img} buttonText="Explore" isEnabled={true} component="/explore/domain" />
+        <HomeBox label="Generate and Benchmark workflows" descr="Explore bioinformatics workflows generated according to your description" imgUrl={generate_img} buttonText="Explore" isEnabled={true} component="/explore/domain" />
         <HomeBox label="Visualize benchmarks" descr="Upload and visualize the benchmarks performed locally" imgUrl={benchmark_img} buttonText="Benchmark" isEnabled={true} component="/benchmark/visualize" />
         <HomeBox label="How to use Workflomics?" descr="Explore the Workflomics documentation" imgUrl={history_img} buttonText="User Guide" isEnabled={true} component="https://workflomics.readthedocs.io/en/latest/user-guide/web-interface.html" />
       </div>

src/components/HomeBox.tsx

@@ -28,6 +28,7 @@ export function HomeBox({ label, descr, buttonText, imgUrl, isEnabled, component
       <div className="card-body items-center text-center">
         <h2 className="card-title">{label}</h2>
         <p>{descr}</p>
+        <hr />
         <div className="card-actions">
           <Link className="btn btn-primary" to={component}>{buttonText}</Link>
         </div>

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<any> = observer((props) => {
@@ -41,7 +41,7 @@ const VisualizeBenchmark: React.FC<any> = 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 (<td key={index} style={{textAlign: "center", padding: "8px", backgroundColor: bgColor}}>
           <span style={{backgroundColor: color}} 

src/components/explore/GenerationResults.tsx

@@ -9,7 +9,7 @@ import './GenerationResults.css';
 import { WorkflowBenchmark } from '../../stores/BenchmarkTypes';
 import Icon from '@mdi/react';
 import { mdiDownload, mdiEyeOff } from '@mdi/js';
-import { mapValueToColor } from '../../utils';
+import { mapDesirabilityToColor, mapValueToBackground } from '../../utils';
 
 const GenerationResults: React.FC<any> = observer((props) => {
   const navigate = useNavigate();
@@ -126,7 +126,7 @@ const GenerationResults: React.FC<any> = observer((props) => {
           [
             <span key={i} className={"tooltip square"}
               data-tip={step.label}
-              style={{ backgroundColor: mapValueToColor(step.desirability) }}> </span>,
+              style={{ backgroundColor: mapDesirabilityToColor(step.desirability), backgroundImage: mapValueToBackground(step.label) }}> </span>,
             i + 1 < benchmark.steps.length ? <span className="connect-squares"></span> : null
           ])}
       </div>

src/components/explore/InputOutputSelection.tsx

@@ -18,7 +18,8 @@ const InputsOutputSelection: React.FC<InputsOutputSelectionProps> = observer(({
   };
 
   return (
-    <div>
+    <div className="tooltip tooltip-bottom"
+    data-tip="Specify data type and format as concrete as possible.">
       {
         Object.values(dataTaxonomy).map((paramClass) => {
           // try {

src/components/explore/InputsOutputs.tsx

@@ -59,8 +59,8 @@ const InputsOutputs: React.FC<any> = 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<any> = observer((props) => {
           {taxStore.error && <div className="alert alert-error">Data taxonomy could not be retrieved ({taxStore.error})</div>}
 
           {/* Inputs */}
-          <div className="flex items-center space-x-4 tooltip tooltip-right"
-                data-tip="Specify data type and format of each input as concrete as possible.">
+          <div className="flex items-center space-x-4">
               <span className="text-3xl flex-grow-0 w-32">Inputs</span>
             <div className="flex flex-grow items-center">
               {workflowConfig.inputs.map((input: ApeTaxTuple, index: number) => {
@@ -97,8 +96,7 @@ const InputsOutputs: React.FC<any> = observer((props) => {
           </div>
 
           {/* Outputs */}
-          <div className="flex items-center space-x-4 tooltip tooltip-right"
-                data-tip="Specify data type and format of each output as concrete as possible.">
+          <div className="flex items-center space-x-4">
               <span className="text-3xl flex-grow-0 w-32">Outputs</span>
             <div className="flex flex-grow items-center">
               {workflowConfig.outputs.map((output: ApeTaxTuple, index: number) => {
@@ -118,7 +116,7 @@ const InputsOutputs: React.FC<any> = observer((props) => {
             <span className="text-3xl flex-grow-0 w-32"></span>
             <div className="flex flex-grow items-center">
             <div className="tooltip" data-tip="Fill in the form with the inputs and outputs used in our demo example.">
-                <button className="btn m-1" onClick={() => useDemoData()}>Use demo data</button>
+                <button className="btn m-1" onClick={() => useDemoData()}>Load example</button>
             </div>
             </div>
           </div>

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],

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<string>()
     .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';
+  }
+}
+