From 7782d46a6e8cc4cd74feac9c0c87bdcbe9348866 Mon Sep 17 00:00:00 2001
From: Connor Howington <connor.howington@gmail.com>
Date: Fri, 4 Nov 2022 17:27:31 -0400
Subject: [PATCH 1/5] Refactor legend to incorporate gradient legend

---
 .../plotControls/PlotGradientLegend.tsx       |  37 +--
 src/components/plotControls/PlotLegend.tsx    | 270 ++++--------------
 .../plotControls/PlotListLegend.tsx           | 229 +++++++++++++++
 .../plotControls/PlotLegend.stories.tsx       |   3 +-
 4 files changed, 295 insertions(+), 244 deletions(-)
 create mode 100644 src/components/plotControls/PlotListLegend.tsx

diff --git a/src/components/plotControls/PlotGradientLegend.tsx b/src/components/plotControls/PlotGradientLegend.tsx
index 43f10edd..eb3cd032 100755
--- a/src/components/plotControls/PlotGradientLegend.tsx
+++ b/src/components/plotControls/PlotGradientLegend.tsx
@@ -10,51 +10,32 @@ import {
 export interface PlotLegendGradientProps {
   legendMax: number;
   legendMin: number;
-  gradientColorscaleType?: string;
+  gradientColorscaleType?: 'sequential' | 'divergent';
   nTicks?: number; // MUST be odd!
-  legendTitle?: string;
   showMissingness?: boolean;
 }
 export default function PlotGradientLegend({
   legendMax,
   legendMin,
   gradientColorscaleType,
-  legendTitle,
   nTicks,
   showMissingness,
 }: PlotLegendGradientProps) {
   // Declare constants
-  const legendTextSize = '1.0em';
+  // const legendTextSize = '1.0em';
 
   /** Most of below identical to the current custom legend. Hoping that eventually the GradientColorscaleLegend can work within
    * the nice custom legend that DK created.  */
   return (
     <>
       {
-        <div
-          style={{
-            border: '1px solid #dedede',
-            boxShadow: '1px 1px 4px #00000066',
-            padding: '1em',
-          }}
-        >
-          <div
-            title={legendTitle}
-            style={{ cursor: 'pointer', fontSize: legendTextSize }}
-          >
-            {legendTitle != null
-              ? legendEllipsis(legendTitle, 23)
-              : legendTitle}
-          </div>
-
-          <GradientColorscaleLegend
-            legendMax={legendMax}
-            legendMin={legendMin}
-            gradientColorscaleType={gradientColorscaleType}
-            nTicks={nTicks}
-            showMissingness={showMissingness}
-          />
-        </div>
+        <GradientColorscaleLegend
+          legendMax={legendMax}
+          legendMin={legendMin}
+          gradientColorscaleType={gradientColorscaleType}
+          nTicks={nTicks}
+          showMissingness={showMissingness}
+        />
       }
     </>
   );
diff --git a/src/components/plotControls/PlotLegend.tsx b/src/components/plotControls/PlotLegend.tsx
index bf0c626d..74c77748 100755
--- a/src/components/plotControls/PlotLegend.tsx
+++ b/src/components/plotControls/PlotLegend.tsx
@@ -2,61 +2,69 @@ import React from 'react';
 import { Checkbox } from '@material-ui/core';
 import * as ColorMath from 'color-math';
 import { ContainerStylesAddon } from '../../types/plots';
+import PlotListLegend, { PlotListLegendProps } from './PlotListLegend';
+import PlotGradientLegend, {
+  PlotLegendGradientProps,
+} from './PlotGradientLegend';
 
 // define legendItems props
-export interface LegendItemsProps {
-  label: string;
-  marker: string;
-  markerColor?: string;
-  hasData: boolean;
-  group?: number;
-  rank?: number;
-}
+// export interface LegendItemsProps {
+//   label: string;
+//   marker: string;
+//   markerColor?: string;
+//   hasData: boolean;
+//   group?: number;
+//   rank?: number;
+// }
 
-// set props for custom legend function
-interface PlotLegendProps extends ContainerStylesAddon {
-  legendItems: LegendItemsProps[];
-  checkedLegendItems: string[] | undefined;
+interface PlotLegendBaseProps extends ContainerStylesAddon {
   legendTitle?: string;
-  onCheckedLegendItemsChange?: (checkedLegendItems: string[]) => void;
-  // add a condition to show legend for single overlay data
-  showOverlayLegend?: boolean;
 }
+
+// interface PlotLegendGradientProps extends PlotLegendBaseProps {
+//   legendType: 'colorscale';
+//   legendMax: number;
+//   legendMin: number;
+//   gradientColorscaleType?: string;
+//   nTicks?: number; // MUST be odd!
+//   showMissingness?: boolean;
+// }
+
+// interface PlotLegendListProps extends PlotLegendBaseProps {
+//   legendType: 'list';
+//   legendItems: LegendItemsProps[];
+//   checkedLegendItems: string[] | undefined;
+//   onCheckedLegendItemsChange?: (checkedLegendItems: string[]) => void;
+//   // add a condition to show legend for single overlay data
+//   showOverlayLegend?: boolean;
+// }
+
+type PlotLegendProps = PlotLegendBaseProps &
+  (
+    | ({ type: 'list' } & PlotListLegendProps)
+    | ({ type: 'colorscale' } & PlotLegendGradientProps)
+  );
+
+// set props for custom legend function
+// interface PlotLegendProps extends ContainerStylesAddon, PlotLegendPropsUnion {
+//   legendTitle?: string;
+// }
+
 export default function PlotLegend({
-  legendItems,
-  checkedLegendItems,
+  type,
   legendTitle,
-  onCheckedLegendItemsChange,
-  showOverlayLegend = false,
   containerStyles,
+  ...otherProps
 }: PlotLegendProps) {
-  // change checkbox state by click
-  const handleLegendCheckboxClick = (checked: boolean, id: string) => {
-    if (checkedLegendItems != null) {
-      if (checked) {
-        // for vizconfig.checkedLegendItems
-        if (onCheckedLegendItemsChange != null)
-          onCheckedLegendItemsChange([...checkedLegendItems, id]);
-      } else {
-        // for vizconfig.checkedLegendItems
-        if (onCheckedLegendItemsChange != null)
-          onCheckedLegendItemsChange(
-            checkedLegendItems.filter((el: string) => el !== id)
-          );
-      }
-    }
-  };
-
-  // set some default sizes
-  const defaultMarkerSize = '0.8em';
   const legendTextSize = '1.0em';
-  const circleMarkerSize = '0.7em';
-  const scatterMarkerSpace = '2em';
 
   return (
     <>
       {/* add a condition to show legend for single overlay data */}
-      {(legendItems.length > 1 || showOverlayLegend) && (
+      {((type === 'list' &&
+        ((otherProps as PlotListLegendProps).legendItems.length > 1 ||
+          (otherProps as PlotListLegendProps).showOverlayLegend)) ||
+        type === 'colorscale') && (
         <div
           style={{
             display: 'inline-block', // for general usage (e.g., story)
@@ -84,180 +92,12 @@ export default function PlotLegend({
           >
             {legendTitle}
           </div>
-          <div className="plotLegendCheckbox">
-            {legendItems.map((item: LegendItemsProps, index: number) => (
-              <div key={item.label}>
-                {/* wrap checkbox with label so that label text is clickable */}
-                <label
-                  key={item.label}
-                  title={item.label}
-                  style={{
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    fontSize: legendTextSize,
-                    // gray out for filtered item
-                    color: checkedLegendItems?.includes(item.label)
-                      ? ''
-                      : '#999',
-                    // add this for general usage (e.g., story)
-                    margin: 0,
-                  }}
-                >
-                  <Checkbox
-                    key={item.label}
-                    id={item.label}
-                    value={item.label}
-                    // gray checkbox: default
-                    color={'default'}
-                    onChange={(e) => {
-                      handleLegendCheckboxClick(e.target.checked, item.label);
-                    }}
-                    checked={
-                      checkedLegendItems?.includes(item.label) ? true : false
-                    }
-                    style={{ padding: 0, width: '1em', height: '1em' }}
-                    // disable when hasData is false
-                    // but scatter plot needs further change due to smoothed mean and best fit
-                    disabled={!item.hasData}
-                  />
-                  &nbsp;&nbsp;
-                  <div
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                    }}
-                  >
-                    {/* for histogram, barplot, Mosaic (2X2, RXC) - Mosaic does not use custom legend though */}
-                    {item.marker === 'square' && (
-                      <div
-                        style={{
-                          height: defaultMarkerSize,
-                          width: defaultMarkerSize,
-                          borderWidth: '0',
-                          backgroundColor: checkedLegendItems?.includes(
-                            item.label
-                          )
-                            ? item.markerColor
-                            : '#999',
-                        }}
-                      />
-                    )}
-                    {/* for boxplot */}
-                    {item.marker === 'lightSquareBorder' && (
-                      <div
-                        style={{
-                          height: defaultMarkerSize,
-                          width: defaultMarkerSize,
-                          borderWidth: '0.125em',
-                          borderStyle: 'solid',
-                          borderColor: checkedLegendItems?.includes(item.label)
-                            ? item.markerColor
-                            : '#999',
-                          backgroundColor: checkedLegendItems?.includes(
-                            item.label
-                          )
-                            ? ColorMath.evaluate(
-                                item.markerColor + ' @a 50%'
-                              ).result.css()
-                            : '#999',
-                        }}
-                      />
-                    )}
-                    {/* for scatter plot: marker */}
-                    {item.marker === 'circle' && (
-                      <div style={{ width: scatterMarkerSpace }}>
-                        <div
-                          style={{
-                            height: circleMarkerSize,
-                            width: circleMarkerSize,
-                            margin: 'auto',
-                            borderWidth: '0.15em',
-                            borderStyle: 'solid',
-                            borderRadius: '0.6em',
-                            borderColor: checkedLegendItems?.includes(
-                              item.label
-                            )
-                              ? item.markerColor
-                              : '#999',
-                          }}
-                        />
-                      </div>
-                    )}
-                    {/* for scatter plot: smoothed mean or best fit line */}
-                    {item.marker === 'line' && (
-                      <div style={{ width: scatterMarkerSpace }}>
-                        <div
-                          style={{
-                            height: '0.15em',
-                            width: scatterMarkerSpace,
-                            borderWidth: '0',
-                            backgroundColor: checkedLegendItems?.includes(
-                              item.label
-                            )
-                              ? item.markerColor
-                              : '#999',
-                          }}
-                        />
-                      </div>
-                    )}
-                    {/* for scatter plot: confidence interval */}
-                    {item.marker === 'fainted' && (
-                      <div style={{ width: scatterMarkerSpace }}>
-                        <div
-                          style={{
-                            height: '0.5em',
-                            width: scatterMarkerSpace,
-                            borderWidth: '0',
-                            backgroundColor: checkedLegendItems?.includes(
-                              item.label
-                            )
-                              ? ColorMath.evaluate(
-                                  item.markerColor + ' @a 30%'
-                                ).result.css()
-                              : '#999',
-                          }}
-                        />
-                      </div>
-                    )}
-                    {/* for scatter plot: No data marker, x */}
-                    {item.marker === 'x' && (
-                      <div style={{ width: scatterMarkerSpace }}>
-                        <div
-                          style={{
-                            textAlign: 'center',
-                            fontWeight: 'normal',
-                            fontSize: `calc(1.5 * ${legendTextSize})`,
-                            color: checkedLegendItems?.includes(item.label)
-                              ? '#A6A6A6'
-                              : '#999',
-                          }}
-                        >
-                          &times;
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                  {/* below is legend label */}
-                  &nbsp;&nbsp;
-                  <div
-                    style={{
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                    }}
-                  >
-                    {item.label === 'No data' ||
-                    item.label.includes('No data,') ? (
-                      <i>{item.label}</i>
-                    ) : (
-                      item.label
-                    )}
-                  </div>
-                </label>
-              </div>
-            ))}
-          </div>
+          {type === 'list' && (
+            <PlotListLegend {...(otherProps as PlotListLegendProps)} />
+          )}
+          {type === 'colorscale' && (
+            <PlotGradientLegend {...(otherProps as PlotLegendGradientProps)} />
+          )}
         </div>
       )}
     </>
diff --git a/src/components/plotControls/PlotListLegend.tsx b/src/components/plotControls/PlotListLegend.tsx
new file mode 100644
index 00000000..38bcda49
--- /dev/null
+++ b/src/components/plotControls/PlotListLegend.tsx
@@ -0,0 +1,229 @@
+import React from 'react';
+import { Checkbox } from '@material-ui/core';
+import * as ColorMath from 'color-math';
+
+// define legendItems props
+export interface LegendItemsProps {
+  label: string;
+  marker: string;
+  markerColor?: string;
+  hasData: boolean;
+  group?: number;
+  rank?: number;
+}
+
+export interface PlotListLegendProps {
+  legendItems: LegendItemsProps[];
+  checkedLegendItems: string[] | undefined;
+  onCheckedLegendItemsChange?: (checkedLegendItems: string[]) => void;
+  // add a condition to show legend for single overlay data
+  showOverlayLegend?: boolean;
+}
+
+export default function PlotListLegend({
+  legendItems,
+  checkedLegendItems,
+  onCheckedLegendItemsChange,
+  showOverlayLegend = false,
+}: PlotListLegendProps) {
+  // change checkbox state by click
+  const handleLegendCheckboxClick = (checked: boolean, id: string) => {
+    if (checkedLegendItems != null) {
+      if (checked) {
+        // for vizconfig.checkedLegendItems
+        if (onCheckedLegendItemsChange != null)
+          onCheckedLegendItemsChange([...checkedLegendItems, id]);
+      } else {
+        // for vizconfig.checkedLegendItems
+        if (onCheckedLegendItemsChange != null)
+          onCheckedLegendItemsChange(
+            checkedLegendItems.filter((el: string) => el !== id)
+          );
+      }
+    }
+  };
+
+  // set some default sizes
+  const defaultMarkerSize = '0.8em';
+  const legendTextSize = '1.0em';
+  const circleMarkerSize = '0.7em';
+  const scatterMarkerSpace = '2em';
+
+  return (
+    <>
+      {/* add a condition to show legend for single overlay data */}
+      {(legendItems.length > 1 || showOverlayLegend) && (
+        <div className="plotLegendCheckbox">
+          {legendItems.map((item: LegendItemsProps, index: number) => (
+            <div key={item.label}>
+              {/* wrap checkbox with label so that label text is clickable */}
+              <label
+                key={item.label}
+                title={item.label}
+                style={{
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  fontSize: legendTextSize,
+                  // gray out for filtered item
+                  color: checkedLegendItems?.includes(item.label) ? '' : '#999',
+                  // add this for general usage (e.g., story)
+                  margin: 0,
+                }}
+              >
+                <Checkbox
+                  key={item.label}
+                  id={item.label}
+                  value={item.label}
+                  // gray checkbox: default
+                  color={'default'}
+                  onChange={(e) => {
+                    handleLegendCheckboxClick(e.target.checked, item.label);
+                  }}
+                  checked={
+                    checkedLegendItems?.includes(item.label) ? true : false
+                  }
+                  style={{ padding: 0, width: '1em', height: '1em' }}
+                  // disable when hasData is false
+                  // but scatter plot needs further change due to smoothed mean and best fit
+                  disabled={!item.hasData}
+                />
+                &nbsp;&nbsp;
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                  }}
+                >
+                  {/* for histogram, barplot, Mosaic (2X2, RXC) - Mosaic does not use custom legend though */}
+                  {item.marker === 'square' && (
+                    <div
+                      style={{
+                        height: defaultMarkerSize,
+                        width: defaultMarkerSize,
+                        borderWidth: '0',
+                        backgroundColor: checkedLegendItems?.includes(
+                          item.label
+                        )
+                          ? item.markerColor
+                          : '#999',
+                      }}
+                    />
+                  )}
+                  {/* for boxplot */}
+                  {item.marker === 'lightSquareBorder' && (
+                    <div
+                      style={{
+                        height: defaultMarkerSize,
+                        width: defaultMarkerSize,
+                        borderWidth: '0.125em',
+                        borderStyle: 'solid',
+                        borderColor: checkedLegendItems?.includes(item.label)
+                          ? item.markerColor
+                          : '#999',
+                        backgroundColor: checkedLegendItems?.includes(
+                          item.label
+                        )
+                          ? ColorMath.evaluate(
+                              item.markerColor + ' @a 50%'
+                            ).result.css()
+                          : '#999',
+                      }}
+                    />
+                  )}
+                  {/* for scatter plot: marker */}
+                  {item.marker === 'circle' && (
+                    <div style={{ width: scatterMarkerSpace }}>
+                      <div
+                        style={{
+                          height: circleMarkerSize,
+                          width: circleMarkerSize,
+                          margin: 'auto',
+                          borderWidth: '0.15em',
+                          borderStyle: 'solid',
+                          borderRadius: '0.6em',
+                          borderColor: checkedLegendItems?.includes(item.label)
+                            ? item.markerColor
+                            : '#999',
+                        }}
+                      />
+                    </div>
+                  )}
+                  {/* for scatter plot: smoothed mean or best fit line */}
+                  {item.marker === 'line' && (
+                    <div style={{ width: scatterMarkerSpace }}>
+                      <div
+                        style={{
+                          height: '0.15em',
+                          width: scatterMarkerSpace,
+                          borderWidth: '0',
+                          backgroundColor: checkedLegendItems?.includes(
+                            item.label
+                          )
+                            ? item.markerColor
+                            : '#999',
+                        }}
+                      />
+                    </div>
+                  )}
+                  {/* for scatter plot: confidence interval */}
+                  {item.marker === 'fainted' && (
+                    <div style={{ width: scatterMarkerSpace }}>
+                      <div
+                        style={{
+                          height: '0.5em',
+                          width: scatterMarkerSpace,
+                          borderWidth: '0',
+                          backgroundColor: checkedLegendItems?.includes(
+                            item.label
+                          )
+                            ? ColorMath.evaluate(
+                                item.markerColor + ' @a 30%'
+                              ).result.css()
+                            : '#999',
+                        }}
+                      />
+                    </div>
+                  )}
+                  {/* for scatter plot: No data marker, x */}
+                  {item.marker === 'x' && (
+                    <div style={{ width: scatterMarkerSpace }}>
+                      <div
+                        style={{
+                          textAlign: 'center',
+                          fontWeight: 'normal',
+                          fontSize: `calc(1.5 * ${legendTextSize})`,
+                          color: checkedLegendItems?.includes(item.label)
+                            ? '#A6A6A6'
+                            : '#999',
+                        }}
+                      >
+                        &times;
+                      </div>
+                    </div>
+                  )}
+                </div>
+                {/* below is legend label */}
+                &nbsp;&nbsp;
+                <div
+                  style={{
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  {item.label === 'No data' ||
+                  item.label.includes('No data,') ? (
+                    <i>{item.label}</i>
+                  ) : (
+                    item.label
+                  )}
+                </div>
+              </label>
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/stories/plotControls/PlotLegend.stories.tsx b/src/stories/plotControls/PlotLegend.stories.tsx
index 80d6cf6c..fb8e6643 100755
--- a/src/stories/plotControls/PlotLegend.stories.tsx
+++ b/src/stories/plotControls/PlotLegend.stories.tsx
@@ -427,6 +427,7 @@ export const HistogramPlotLegend = () => {
         checkedLegendItems={checkedLegendItems}
       />
       <PlotLegend
+        type="list"
         legendItems={legendItems}
         checkedLegendItems={checkedLegendItems}
         onCheckedLegendItemsChange={setCheckedLegendItems}
@@ -447,7 +448,6 @@ export const GradientPlotLegend = () => {
         // Options are 'sequential' and 'divergent'
         gradientColorscaleType={'divergent'}
         // pass legend title
-        legendTitle={'Very very very long name'}
         nTicks={5}
       />
     </div>
@@ -466,6 +466,7 @@ export const TestLongLegendItems = () => {
       {/* testing long legend items: taken from a Scatter plot with smoothed mean */}
       <h5># Testing long legend items</h5>
       <PlotLegend
+        type="list"
         legendItems={longLegendItems}
         checkedLegendItems={checkedLongLegendItems}
         onCheckedLegendItemsChange={setCheckedLongLegendItems}

From 9f05fbe22a509c03a439a304f65b4fad84faafb1 Mon Sep 17 00:00:00 2001
From: Connor Howington <connor.howington@gmail.com>
Date: Mon, 7 Nov 2022 17:13:34 -0500
Subject: [PATCH 2/5] Improve gradient color legend styling

---
 .../plotControls/PlotGradientLegend.tsx       | 19 +++++++++++--------
 .../plotControls/PlotLegend.stories.tsx       |  1 +
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/plotControls/PlotGradientLegend.tsx b/src/components/plotControls/PlotGradientLegend.tsx
index eb3cd032..170dc64c 100755
--- a/src/components/plotControls/PlotGradientLegend.tsx
+++ b/src/components/plotControls/PlotGradientLegend.tsx
@@ -57,11 +57,11 @@ function GradientColorscaleLegend({
   showMissingness,
 }: PlotLegendGradientProps) {
   // Declare constants
-  const tickFontSize = '0.8em';
   const gradientBoxHeight = 150;
   const gradientBoxWidth = 20;
   const tickLength = 4;
   const defaultNTicks = 5;
+  const tickFontSize = '0.8em';
   const legendTextSize = '1.0em';
 
   nTicks = nTicks || defaultNTicks;
@@ -90,18 +90,19 @@ function GradientColorscaleLegend({
     return (
       <g className="axisTick" overflow="visible" key={'gradientTick' + a}>
         <line
-          x1={gradientBoxWidth}
-          x2={gradientBoxWidth + tickLength}
+          x1={gradientBoxWidth + 1}
+          x2={gradientBoxWidth + tickLength + 1}
           y1={location}
           y2={location}
           stroke="black"
           strokeWidth="1px"
         ></line>
         <text
-          x={gradientBoxWidth + 3 + tickLength}
+          x={gradientBoxWidth + 4 + tickLength}
           y={location}
-          alignmentBaseline="middle"
+          dominantBaseline="middle"
           fontSize={tickFontSize}
+          fontWeight="bold"
         >
           {(a / (nTicks! - 1)) * (legendMax - legendMin) + legendMin}
         </text>
@@ -111,17 +112,19 @@ function GradientColorscaleLegend({
 
   return (
     <div>
-      <svg id="gradientLegend" height={gradientBoxHeight + 40} width={150}>
+      <svg id="gradientLegend" height={gradientBoxHeight + 20} width={150}>
         <defs>
           <linearGradient id="linearGradient" x1="0" x2="0" y1="1" y2="0">
             {stopPoints}
           </linearGradient>
         </defs>
-        <g style={{ transform: 'translate(0, 10px)' }}>
+        <g style={{ transform: 'translate(5px, 10px)' }}>
           <rect
             width={gradientBoxWidth}
             height={gradientBoxHeight}
             fill="url(#linearGradient)"
+            stroke="black"
+            strokeWidth={1}
           ></rect>
           {ticks}
         </g>
@@ -140,7 +143,6 @@ function GradientColorscaleLegend({
               &times;
             </div>
           </div>
-          &nbsp;&nbsp;
           <label
             title={'No data'}
             style={{
@@ -149,6 +151,7 @@ function GradientColorscaleLegend({
               alignItems: 'center',
               fontSize: legendTextSize,
               color: '#999',
+              margin: '0 0 0 0',
             }}
           >
             <i>{legendEllipsis('No data', 20)}</i>
diff --git a/src/stories/plotControls/PlotLegend.stories.tsx b/src/stories/plotControls/PlotLegend.stories.tsx
index fb8e6643..60eec10f 100755
--- a/src/stories/plotControls/PlotLegend.stories.tsx
+++ b/src/stories/plotControls/PlotLegend.stories.tsx
@@ -449,6 +449,7 @@ export const GradientPlotLegend = () => {
         gradientColorscaleType={'divergent'}
         // pass legend title
         nTicks={5}
+        showMissingness
       />
     </div>
   );

From 06bc22c1f189f8cabd0985f518e4860307f688df Mon Sep 17 00:00:00 2001
From: Connor Howington <connor.howington@gmail.com>
Date: Tue, 8 Nov 2022 12:54:36 -0500
Subject: [PATCH 3/5] Clean up

---
 .../plotControls/PlotGradientLegend.tsx       | 29 +--------------
 src/components/plotControls/PlotLegend.tsx    | 35 -------------------
 .../plotControls/PlotLegend.stories.tsx       |  2 +-
 3 files changed, 2 insertions(+), 64 deletions(-)

diff --git a/src/components/plotControls/PlotGradientLegend.tsx b/src/components/plotControls/PlotGradientLegend.tsx
index 170dc64c..441f8801 100755
--- a/src/components/plotControls/PlotGradientLegend.tsx
+++ b/src/components/plotControls/PlotGradientLegend.tsx
@@ -14,32 +14,6 @@ export interface PlotLegendGradientProps {
   nTicks?: number; // MUST be odd!
   showMissingness?: boolean;
 }
-export default function PlotGradientLegend({
-  legendMax,
-  legendMin,
-  gradientColorscaleType,
-  nTicks,
-  showMissingness,
-}: PlotLegendGradientProps) {
-  // Declare constants
-  // const legendTextSize = '1.0em';
-
-  /** Most of below identical to the current custom legend. Hoping that eventually the GradientColorscaleLegend can work within
-   * the nice custom legend that DK created.  */
-  return (
-    <>
-      {
-        <GradientColorscaleLegend
-          legendMax={legendMax}
-          legendMin={legendMin}
-          gradientColorscaleType={gradientColorscaleType}
-          nTicks={nTicks}
-          showMissingness={showMissingness}
-        />
-      }
-    </>
-  );
-}
 
 // legend ellipsis function for legend title and legend items (from custom legend work)
 const legendEllipsis = (label: string, ellipsisLength: number) => {
@@ -49,7 +23,7 @@ const legendEllipsis = (label: string, ellipsisLength: number) => {
 };
 
 // make gradient colorscale legend into a component so it can be more easily incorporated into DK's custom legend if we need
-function GradientColorscaleLegend({
+export default function PlotGradientLegend({
   legendMax,
   legendMin,
   gradientColorscaleType,
@@ -102,7 +76,6 @@ function GradientColorscaleLegend({
           y={location}
           dominantBaseline="middle"
           fontSize={tickFontSize}
-          fontWeight="bold"
         >
           {(a / (nTicks! - 1)) * (legendMax - legendMin) + legendMin}
         </text>
diff --git a/src/components/plotControls/PlotLegend.tsx b/src/components/plotControls/PlotLegend.tsx
index 74c77748..5a7763a2 100755
--- a/src/components/plotControls/PlotLegend.tsx
+++ b/src/components/plotControls/PlotLegend.tsx
@@ -1,55 +1,20 @@
 import React from 'react';
-import { Checkbox } from '@material-ui/core';
-import * as ColorMath from 'color-math';
 import { ContainerStylesAddon } from '../../types/plots';
 import PlotListLegend, { PlotListLegendProps } from './PlotListLegend';
 import PlotGradientLegend, {
   PlotLegendGradientProps,
 } from './PlotGradientLegend';
 
-// define legendItems props
-// export interface LegendItemsProps {
-//   label: string;
-//   marker: string;
-//   markerColor?: string;
-//   hasData: boolean;
-//   group?: number;
-//   rank?: number;
-// }
-
 interface PlotLegendBaseProps extends ContainerStylesAddon {
   legendTitle?: string;
 }
 
-// interface PlotLegendGradientProps extends PlotLegendBaseProps {
-//   legendType: 'colorscale';
-//   legendMax: number;
-//   legendMin: number;
-//   gradientColorscaleType?: string;
-//   nTicks?: number; // MUST be odd!
-//   showMissingness?: boolean;
-// }
-
-// interface PlotLegendListProps extends PlotLegendBaseProps {
-//   legendType: 'list';
-//   legendItems: LegendItemsProps[];
-//   checkedLegendItems: string[] | undefined;
-//   onCheckedLegendItemsChange?: (checkedLegendItems: string[]) => void;
-//   // add a condition to show legend for single overlay data
-//   showOverlayLegend?: boolean;
-// }
-
 type PlotLegendProps = PlotLegendBaseProps &
   (
     | ({ type: 'list' } & PlotListLegendProps)
     | ({ type: 'colorscale' } & PlotLegendGradientProps)
   );
 
-// set props for custom legend function
-// interface PlotLegendProps extends ContainerStylesAddon, PlotLegendPropsUnion {
-//   legendTitle?: string;
-// }
-
 export default function PlotLegend({
   type,
   legendTitle,
diff --git a/src/stories/plotControls/PlotLegend.stories.tsx b/src/stories/plotControls/PlotLegend.stories.tsx
index 60eec10f..b2c5e7ed 100755
--- a/src/stories/plotControls/PlotLegend.stories.tsx
+++ b/src/stories/plotControls/PlotLegend.stories.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
+import { Meta } from '@storybook/react/types-6-0';
 import Histogram from '../../plots/Histogram';
 import PlotLegend from '../../components/plotControls/PlotLegend';
 import PlotGradientLegend from '../../components/plotControls/PlotGradientLegend';

From 7ff1cfad52604bb35fe4e868a427dc56550b7f6e Mon Sep 17 00:00:00 2001
From: Connor Howington <connor.howington@gmail.com>
Date: Tue, 8 Nov 2022 14:10:23 -0500
Subject: [PATCH 4/5] Add padding to story

---
 src/components/plotControls/PlotGradientLegend.tsx | 2 +-
 src/stories/plotControls/PlotLegend.stories.tsx    | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/plotControls/PlotGradientLegend.tsx b/src/components/plotControls/PlotGradientLegend.tsx
index 441f8801..edddd608 100755
--- a/src/components/plotControls/PlotGradientLegend.tsx
+++ b/src/components/plotControls/PlotGradientLegend.tsx
@@ -124,7 +124,7 @@ export default function PlotGradientLegend({
               alignItems: 'center',
               fontSize: legendTextSize,
               color: '#999',
-              margin: '0 0 0 0',
+              margin: 0,
             }}
           >
             <i>{legendEllipsis('No data', 20)}</i>
diff --git a/src/stories/plotControls/PlotLegend.stories.tsx b/src/stories/plotControls/PlotLegend.stories.tsx
index b2c5e7ed..38bcde46 100755
--- a/src/stories/plotControls/PlotLegend.stories.tsx
+++ b/src/stories/plotControls/PlotLegend.stories.tsx
@@ -441,8 +441,9 @@ export const HistogramPlotLegend = () => {
 // custom legend with scatterplot gradient colorscale
 export const GradientPlotLegend = () => {
   return (
-    <div>
-      <PlotGradientLegend
+    <div style={{ padding: 15 }}>
+      <PlotLegend
+        type="colorscale"
         legendMax={100}
         legendMin={5}
         // Options are 'sequential' and 'divergent'

From dae8a2fa90ae319793adabca78e23a6787057ae5 Mon Sep 17 00:00:00 2001
From: Connor Howington <connor.howington@gmail.com>
Date: Thu, 10 Nov 2022 16:57:49 -0500
Subject: [PATCH 5/5] v0.19.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c32d0847..83d55b21 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@veupathdb/components",
-  "version": "0.19.4",
+  "version": "0.19.5",
   "license": "Apache-2.0",
   "description": "React Components for VEuPathDB Websites",
   "repository": {