From 7b0565797f7fa6edbba4477a4547f93d56b9ee50 Mon Sep 17 00:00:00 2001
From: "Alex M. Sielicki" <alex@techmilo.com>
Date: Mon, 12 Jun 2023 12:46:37 -0700
Subject: [PATCH 1/5] Adding margin to model delete button. Fixes #1122

---
 web-server/components/Model.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-server/components/Model.tsx b/web-server/components/Model.tsx
index 41e2e808c..88c446a04 100644
--- a/web-server/components/Model.tsx
+++ b/web-server/components/Model.tsx
@@ -69,7 +69,7 @@ const Model = (props: ModelProps) => {
                     </em>
                 </small>
             </a>
-            <span className='float-right'>
+            <span className='float-right ml-3'>
                     <button
                         type='button'
                         className='btn btn-sm btn-outline-danger'

From a54bea97c23e9827decb0fd588f2cb1b59a7f22b Mon Sep 17 00:00:00 2001
From: "Alex M. Sielicki" <alex@techmilo.com>
Date: Mon, 12 Jun 2023 15:52:12 -0700
Subject: [PATCH 2/5] Adding example checkerboard CSS

---
 web-server/plugins/slycat-parameter-image/css/ui.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web-server/plugins/slycat-parameter-image/css/ui.css b/web-server/plugins/slycat-parameter-image/css/ui.css
index 146d17774..e4e67ecbf 100644
--- a/web-server/plugins/slycat-parameter-image/css/ui.css
+++ b/web-server/plugins/slycat-parameter-image/css/ui.css
@@ -530,6 +530,8 @@
 #scatterplot .image-frame.html {
   position: absolute;
   background-color: black;
+  /* Checkerboard background */
+  /* background: repeating-conic-gradient(#808080 0% 25%, white 0% 50%) 50% / 20px 20px; */
   border: 1px solid black;
   height: auto;
   padding-bottom: 20px;

From 0ff4ecd129d14d598ea383044a4856246fa40502 Mon Sep 17 00:00:00 2001
From: "Alex M. Sielicki" <alex@techmilo.com>
Date: Mon, 12 Jun 2023 15:55:01 -0700
Subject: [PATCH 3/5] Swapping order of grayscale night/day to be consistent
 with order in other scales

---
 web-server/js/slycat-color-maps.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/web-server/js/slycat-color-maps.ts b/web-server/js/slycat-color-maps.ts
index 17211c6e8..f895e45da 100644
--- a/web-server/js/slycat-color-maps.ts
+++ b/web-server/js/slycat-color-maps.ts
@@ -121,23 +121,23 @@ export default {
       opacity: "0.7",
       colors: [d3.rgb(0, 0, 255), d3.rgb(0, 255, 255), d3.rgb(255, 255, 0), d3.rgb(255, 0, 0)],
     },
-    grayscale_day: {
-      label: "Grayscale Day",
-      background: d3.rgb(255, 255, 255),
+    grayscale_night: {
+      label: "Grayscale Night",
+      background: d3.rgb(128, 128, 128),
       // ToDo: fix this, null and outofdomain colors need to be different than normal colors
       null_color: "rgb(75,75,75)",
       outofdomain_color: "black",
-      scatterplot_grid_color: "rgb(80% 80% 80%)",
+      scatterplot_grid_color: "#666666",
       opacity: "0.6",
       colors: [d3.rgb(255, 255, 255), d3.rgb(0, 0, 0)],
     },
-    grayscale_night: {
-      label: "Grayscale Night",
-      background: d3.rgb(128, 128, 128),
+    grayscale_day: {
+      label: "Grayscale Day",
+      background: d3.rgb(255, 255, 255),
       // ToDo: fix this, null and outofdomain colors need to be different than normal colors
       null_color: "rgb(75,75,75)",
       outofdomain_color: "black",
-      scatterplot_grid_color: "#666666",
+      scatterplot_grid_color: "rgb(80% 80% 80%)",
       opacity: "0.6",
       colors: [d3.rgb(255, 255, 255), d3.rgb(0, 0, 0)],
     },

From eafae716eae17ade5f85eb16913d6062dda16323 Mon Sep 17 00:00:00 2001
From: "Alex M. Sielicki" <alex@techmilo.com>
Date: Wed, 14 Jun 2023 12:18:39 -0700
Subject: [PATCH 4/5] Using null color for frame backgrounds to better support
 images with transparent backgrounds.

---
 .../js/parameter-image-scatterplot.js                       | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/web-server/plugins/slycat-parameter-image/js/parameter-image-scatterplot.js b/web-server/plugins/slycat-parameter-image/js/parameter-image-scatterplot.js
index df929a168..ce0070b68 100644
--- a/web-server/plugins/slycat-parameter-image/js/parameter-image-scatterplot.js
+++ b/web-server/plugins/slycat-parameter-image/js/parameter-image-scatterplot.js
@@ -954,6 +954,10 @@ $.widget("parameter_image.scatterplot", {
       self._schedule_update({ render_selection: true });
     } else if (key == "colorscale") {
       self._schedule_update({ render_data: true, render_selection: true });
+      // Update frame backgrounds to colormap null color
+      d3.selectAll(".image-frame").style({
+        "background-color": slycat_color_maps.get_null_color(window.store.getState().colormap),
+      });
     } else if (key == "width") {
       // console.debug(`width option set to %o: %o`, key, value);
       self._schedule_update({
@@ -1890,6 +1894,8 @@ $.widget("parameter_image.scatterplot", {
           width: img.width + "px",
           height: img.height + 20 + "px",
           "z-index": self.options.highest_z_index,
+          // Set frame background to colormap null color
+          "background-color": slycat_color_maps.get_null_color(window.store.getState().colormap),
         })
         .attr("class", img.image_class + " image-frame scaffolding html ")
         .classed("selected", img.current_frame)

From ab3562ef08cf70837c75176e99f04922b8c95ed0 Mon Sep 17 00:00:00 2001
From: "Alex M. Sielicki" <alex@techmilo.com>
Date: Wed, 14 Jun 2023 12:23:03 -0700
Subject: [PATCH 5/5] Updating grayscale null color

---
 web-server/js/slycat-color-maps.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-server/js/slycat-color-maps.ts b/web-server/js/slycat-color-maps.ts
index f895e45da..96cfe702e 100644
--- a/web-server/js/slycat-color-maps.ts
+++ b/web-server/js/slycat-color-maps.ts
@@ -135,7 +135,7 @@ export default {
       label: "Grayscale Day",
       background: d3.rgb(255, 255, 255),
       // ToDo: fix this, null and outofdomain colors need to be different than normal colors
-      null_color: "rgb(75,75,75)",
+      null_color: "gray",
       outofdomain_color: "black",
       scatterplot_grid_color: "rgb(80% 80% 80%)",
       opacity: "0.6",