From 736236e9ca200a021b0c051cfc2eb91e411a2442 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 14 Jan 2025 17:40:25 +0100
Subject: [PATCH] add colorblind setting and friendly palettes

- mode applies to plot data, plot background color, statsseries colors, roofline timescale
---
 web/frontend/src/config/UserSettings.svelte   |  6 +-
 .../src/config/user/PlotColorScheme.svelte    | 66 +++++++++++++++++--
 .../src/config/user/PlotRenderOptions.svelte  | 52 +++++++++++++--
 .../src/generic/plots/MetricPlot.svelte       | 14 ++--
 .../src/generic/plots/Roofline.svelte         |  3 +-
 5 files changed, 125 insertions(+), 16 deletions(-)

diff --git a/web/frontend/src/config/UserSettings.svelte b/web/frontend/src/config/UserSettings.svelte
index 539aadf..1b59e31 100644
--- a/web/frontend/src/config/UserSettings.svelte
+++ b/web/frontend/src/config/UserSettings.svelte
@@ -18,6 +18,7 @@
   const ccconfig = getContext("cc-config");
   let message = { msg: "", target: "", color: "#d63384" };
   let displayMessage = false;
+  let cbmode = ccconfig?.plot_general_colorblindMode || false;
 
   async function handleSettingSubmit(event) {
     const selector = event.detail.selector
@@ -28,6 +29,9 @@
       const res = await fetch(form.action, { method: "POST", body: formData });
       if (res.ok) {
         let text = await res.text();
+        if (formData.get("key") === "plot_general_colorblindMode") {
+          cbmode = JSON.parse(formData.get("value"));
+        }
         popMessage(text, target, "#048109");
       } else {
         let text = await res.text();
@@ -51,4 +55,4 @@
 
 <UserOptions config={ccconfig} {username} {isApi} bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
 <PlotRenderOptions config={ccconfig} bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
-<PlotColorScheme config={ccconfig} bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
+<PlotColorScheme config={ccconfig} bind:cbmode bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
diff --git a/web/frontend/src/config/user/PlotColorScheme.svelte b/web/frontend/src/config/user/PlotColorScheme.svelte
index d180327..1cb5d86 100644
--- a/web/frontend/src/config/user/PlotColorScheme.svelte
+++ b/web/frontend/src/config/user/PlotColorScheme.svelte
@@ -24,6 +24,7 @@
     export let config;
     export let message;
     export let displayMessage;
+    export let cbmode = false;
 
     const dispatch = createEventDispatcher();
     function updateSetting(selector, target) {
@@ -265,6 +266,62 @@
       ],
     };
 
+    // https://personal.sron.nl/~pault/
+    // https://tsitsul.in/blog/coloropt/
+    const cvdschemes = {
+      HighContrast: [
+        "rgb(221,170,51)",
+        "rgb(187,85,102)",
+        "rgb(0,68,136)",
+        "rgb(0,0,0)",
+      ],
+      Bright: [
+        "rgb(68,119,170)",
+        "rgb(102,204,238)",
+        "rgb(34,136,51)",
+        "rgb(204,187,68)",
+        "rgb(238,102,119)",
+        "rgb(170,51,119)",
+        "rgb(187,187,187)",
+      ],
+      Muted: [
+        "rgb(51,34,136)",
+        "rgb(136,204,238)",
+        "rgb(68,170,153)",
+        "rgb(17,119,51)",
+        "rgb(153,153,51)",
+        "rgb(221,204,119)",
+        "rgb(204,102,119)",
+        "rgb(136,34,85)",
+        "rgb(170,68,153)",
+        "rgb(221,221,221)",
+      ],
+      NormalSixColor: [
+        "rgb(64,83,211)",
+        "rgb(221,179,16)",
+        "rgb(181,29,20)",
+        "rgb(0,190,255)",
+        "rgb(251,73,176)",
+        "rgb(0,178,93)",
+        "rgb(202,202,202)",
+      ],
+      NormalTwelveColor: [
+        "rgb(235,172,35)",
+        "rgb(184,0,88)",
+        "rgb(0,140,249)",
+        "rgb(0,110,0)",
+        "rgb(0,187,173)",
+        "rgb(209,99,230)",
+        "rgb(178,69,2)",
+        "rgb(255,146,135)",
+        "rgb(89,84,214)",
+        "rgb(0,198,248)",
+        "rgb(135,133,0)",
+        "rgb(0,167,108)",
+        "rgb(189,189,189)",
+      ]
+    }
+
 </script>
 
 <Row cols={1} class="p-2 g-2">
@@ -281,7 +338,7 @@
           <CardTitle
             style="margin-bottom: 1em; display: flex; align-items: center;"
           >
-            <div>Color Scheme for Timeseries Plots</div>
+            <div>Color Scheme for Timeseries Plots {cbmode ? `(Color Blind Friendly Palettes)` : ``}</div>
             {#if displayMessage && message.target == "cs"}<div
                 style="margin-left: auto; font-size: 0.9em;"
               >
@@ -293,7 +350,7 @@
           <input type="hidden" name="key" value="plot_general_colorscheme" />
           <Table hover>
             <tbody>
-              {#each Object.entries(colorschemes) as [name, rgbrow]}
+              {#each Object.entries(cbmode ? cvdschemes : colorschemes) as [name, rgbrow]}
                 <tr>
                   <th scope="col">{name}</th>
                   <td>
@@ -333,8 +390,9 @@
 
 <style>
 .color-dot {
-    height: 10px;
-    width: 10px;
+    margin-left: 1px;
+    height: 12px;
+    width: 12px;
     border-radius: 50%;
     display: inline-block;
 }
diff --git a/web/frontend/src/config/user/PlotRenderOptions.svelte b/web/frontend/src/config/user/PlotRenderOptions.svelte
index ad98465..8a3a948 100644
--- a/web/frontend/src/config/user/PlotRenderOptions.svelte
+++ b/web/frontend/src/config/user/PlotRenderOptions.svelte
@@ -129,8 +129,8 @@
     >
   
     <!-- BACKGROUND -->
-    <Col
-      ><Card class="h-100">
+    <Col class="d-flex justify-content-between"
+      ><Card class="h-100" style="width: 49%;">
         <form
           id="backgrounds-form"
           method="post"
@@ -173,6 +173,50 @@
           </div>
           <Button color="primary" type="submit">Submit</Button>
         </form>
-      </Card></Col
-    >
+      </Card>
+      <Card class="h-100" style="width: 49%;">
+        <form
+          id="colorblindmode-form"
+          method="post"
+          action="/frontend/configuration/"
+          class="card-body"
+          on:submit|preventDefault={() =>
+            updateSetting("#colorblindmode-form", "cbm")}
+        >
+          <!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
+          <CardTitle
+            style="margin-bottom: 1em; display: flex; align-items: center;"
+          >
+            <div>Color Blind Mode</div>
+            {#if displayMessage && message.target == "cbm"}<div
+                style="margin-left: auto; font-size: 0.9em;"
+              >
+                <code style="color: {message.color};" out:fade
+                  >Update: {message.msg}</code
+                >
+              </div>{/if}
+          </CardTitle>
+          <input type="hidden" name="key" value="plot_general_colorblindMode" />
+          <div class="mb-3">
+            <div>
+              {#if config?.plot_general_colorblindMode}
+                <input type="radio" id="cbm-true-checked" name="value" value="true" checked />
+              {:else}
+                <input type="radio" id="cbm-true" name="value" value="true" />
+              {/if}
+              <label for="true">Yes</label>
+            </div>
+            <div>
+              {#if config?.plot_general_colorblindMode}
+                <input type="radio" id="cbm-false" name="value" value="false" />
+              {:else}
+                <input type="radio" id="cbm-false-checked" name="value" value="false" checked />
+              {/if}
+              <label for="false">No</label>
+            </div>
+          </div>
+          <Button color="primary" type="submit">Submit</Button>
+        </form>
+      </Card>
+    </Col>
 </Row>
\ No newline at end of file
diff --git a/web/frontend/src/generic/plots/MetricPlot.svelte b/web/frontend/src/generic/plots/MetricPlot.svelte
index f08c86d..7f7a82b 100644
--- a/web/frontend/src/generic/plots/MetricPlot.svelte
+++ b/web/frontend/src/generic/plots/MetricPlot.svelte
@@ -152,10 +152,12 @@
   const lineWidth =
     clusterCockpitConfig.plot_general_lineWidth / window.devicePixelRatio;
   const lineColors = clusterCockpitConfig.plot_general_colorscheme;
+  const cbmode = clusterCockpitConfig?.plot_general_colorblindMode || false;
+
   const backgroundColors = {
     normal: "rgba(255, 255, 255, 1.0)",
-    caution: "rgba(255, 128, 0, 0.3)",
-    alert: "rgba(255, 0, 0, 0.3)",
+    caution: cbmode ? "rgba(239, 230, 69, 0.3)" : "rgba(255, 128, 0, 0.3)",
+    alert: cbmode ? "rgba(225, 86, 44, 0.3)" : "rgba(255, 0, 0, 0.3)",
   };
   const thresholds = findThresholds(
     subClusterTopology,
@@ -346,13 +348,13 @@
       label: "min",
       scale: "y",
       width: lineWidth,
-      stroke: "red",
+      stroke: cbmode ? "rgb(0,255,0)" : "red",
     });
     plotSeries.push({
       label: "max",
       scale: "y",
       width: lineWidth,
-      stroke: "green",
+      stroke: cbmode ? "rgb(0,0,255)" : "green",
     });
     plotSeries.push({
       label: usesMeanStatsSeries ? "mean" : "median",
@@ -362,8 +364,8 @@
     });
 
     plotBands = [
-      { series: [2, 3], fill: "rgba(0,255,0,0.1)" },
-      { series: [3, 1], fill: "rgba(255,0,0,0.1)" },
+      { series: [2, 3], fill: cbmode ? "rgba(0,0,255,0.1)" : "rgba(0,255,0,0.1)" },
+      { series: [3, 1], fill: cbmode ? "rgba(0,255,0,0.1)" : "rgba(255,0,0,0.1)" },
     ];
   } else {
     for (let i = 0; i < series.length; i++) {
diff --git a/web/frontend/src/generic/plots/Roofline.svelte b/web/frontend/src/generic/plots/Roofline.svelte
index c9a0bbe..558d8e8 100644
--- a/web/frontend/src/generic/plots/Roofline.svelte
+++ b/web/frontend/src/generic/plots/Roofline.svelte
@@ -40,6 +40,7 @@
   let timeoutId = null;
 
   const lineWidth = clusterCockpitConfig.plot_general_lineWidth;
+  const cbmode = clusterCockpitConfig?.plot_general_colorblindMode || false;
 
   // Helpers
   function getGradientR(x) {
@@ -61,7 +62,7 @@
     return Math.floor(x * 255.0);
   }
   function getRGB(c) {
-    return `rgb(${getGradientR(c)}, ${getGradientG(c)}, ${getGradientB(c)})`;
+    return `rgb(${cbmode ? '0' : getGradientR(c)}, ${getGradientG(c)}, ${getGradientB(c)})`;
   }
   function nearestThousand(num) {
     return Math.ceil(num / 1000) * 1000;