Color ramp selector bugfixes: gradient cut off, missing label (#950)

Co-authored-by: Nakul Verma <[email protected]>
Co-authored-by: Matt Fisher <[email protected]>

Author: nakul-py

packages/base/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent.tsx

@@ -21,6 +21,8 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
   const [colorMaps, setColorMaps] = useState<IColorMap[]>([]);
+  const canvasWidth = 512;
+  const canvasHeight = 30;
 
   useColorMapList(setColorMaps);
 
@@ -64,13 +66,16 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
 
     const ramp = colorMaps.filter(c => c.name === rampName);
 
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
+
     for (let i = 0; i <= 255; i++) {
       ctx.beginPath();
 
       const color = ramp[0].colors[i];
       ctx.fillStyle = color;
 
-      ctx.fillRect(i * 2, 0, 2, 50);
+      ctx.fillRect(i * 2, 0, 2, canvasHeight);
     }
     canvas.style.visibility = 'initial';
   };
@@ -89,11 +94,15 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
         onClick={toggleDropdown}
         className="jp-Dialog-button jp-gis-canvas-button"
       >
-        <canvas
-          id="cv"
-          className="jp-gis-color-canvas-display"
-          height="30"
-        ></canvas>
+        <div className="jp-gis-color-ramp-entry jp-gis-selected-entry">
+          <span className="jp-gis-color-label">{selectedRamp}</span>
+          <canvas
+            id="cv"
+            className="jp-gis-color-canvas-display"
+            width={canvasWidth}
+            height={canvasHeight}
+          ></canvas>
+        </div>
       </Button>
       <div
         className={`jp-gis-color-ramp-dropdown ${isOpen ? 'jp-gis-open' : ''}`}

packages/base/src/dialogs/symbology/components/color_ramp/ColorRampEntry.tsx

@@ -13,13 +13,17 @@ const ColorRampEntry: React.FC<IColorRampEntryProps> = ({
   colorMap,
   onClick,
 }) => {
+  const canvasWidth = 512;
   const canvasHeight = 30;
 
   useEffect(() => {
     const canvas = document.getElementById(`cv-${index}`) as HTMLCanvasElement;
     if (!canvas) {
       return;
     }
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
+
     const ctx = canvas.getContext('2d');
 
     if (!ctx) {
@@ -45,6 +49,7 @@ const ColorRampEntry: React.FC<IColorRampEntryProps> = ({
       <span className="jp-gis-color-label">{colorMap.name}</span>
       <canvas
         id={`cv-${index}`}
+        width={canvasWidth}
         height={canvasHeight}
         className="jp-gis-color-canvas"
       ></canvas>

packages/base/style/symbologyDialog.css

@@ -158,9 +158,9 @@ select option {
   border: var(--jp-border-width) solid var(--jp-input-border-color);
   border-radius: 0;
   outline: none;
-  appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  appearance: none;
 }
 
 .jp-gis-open {
@@ -172,20 +172,25 @@ select option {
   align-items: center;
   font-size: var(--jp-ui-font-size2);
   color: var(--jp-ui-font-color0);
-  appearance: none;
   text-transform: capitalize;
   cursor: pointer;
+  position: relative;
   -webkit-appearance: none;
   -moz-appearance: none;
+  appearance: none;
 }
 
 .jp-gis-color-label {
   color: white;
+  padding-left: 10px;
   position: absolute;
+  text-shadow: 0px 0px 4px black;
+
   transition: transform 0.3s ease;
+  transform-origin: left bottom;
 }
 
-.jp-gis-color-ramp-entry:hover .jp-gis-color-label {
+.jp-gis-color-ramp-entry:not(.jp-gis-selected-entry):hover .jp-gis-color-label {
   transform: scale(1.2);
 }
 
@@ -215,8 +220,11 @@ select option {
 }
 
 #jp-gis-canvas-button.jp-gis-canvas-button {
-  visibility: hidden;
   margin: 0;
   padding: 0 1px 0 0;
   width: 100%;
 }
+
+.jp-gis-selected-entry {
+  width: 100%;
+}