Use actual ramp for display and adjust css

Author: gjmooney

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

@@ -9,16 +9,15 @@ export interface IColorMap {
 }
 
 interface ICanvasSelectComponentProps {
+  selectedRamp: string;
   setSelected: (item: any) => void;
 }
 
 const CanvasSelectComponent = ({
+  selectedRamp,
   setSelected
 }: ICanvasSelectComponentProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const colorRampList = [
+  const colorRampNames = [
     'jet',
     // 'hsv', 11 steps min
     'hot',
@@ -46,7 +45,6 @@ const CanvasSelectComponent = ({
     'magma',
     'plasma',
     'warm',
-    'cool',
     // 'rainbow-soft', 11 steps min
     'bathymetry',
     'cdom',
@@ -65,7 +63,31 @@ const CanvasSelectComponent = ({
     // 'cubehelix' 16 steps min
   ];
 
-  const [colorMap, setColorMap] = useState<IColorMap[]>([]);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [colorMaps, setColorMaps] = useState<IColorMap[]>([]);
+
+  useEffect(() => {
+    const colorMapList: IColorMap[] = [];
+
+    colorRampNames.forEach(name => {
+      const colorRamp = colormap({
+        colormap: name,
+        nshades: 255,
+        format: 'rgbaString'
+      });
+      const ting = { name: name, colors: colorRamp };
+      colorMapList.push(ting);
+
+      setColorMaps(colorMapList);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (colorMaps.length > 0) {
+      updateCanvas(selectedRamp);
+    }
+  }, [selectedRamp]);
 
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
@@ -74,6 +96,7 @@ const CanvasSelectComponent = ({
   const selectItem = (item: any) => {
     setSelected(item);
     setIsOpen(false);
+    updateCanvas(item);
   };
 
   const handleOutsideClick = (event: any) => {
@@ -85,40 +108,31 @@ const CanvasSelectComponent = ({
     }
   };
 
-  useEffect(() => {
-    const colorMapT: IColorMap[] = [];
-
-    colorRampList.forEach(name => {
-      const t = colormap({
-        colormap: name,
-        nshades: 255,
-        format: 'rgbaString'
-      });
-      const ting = { name: name, colors: t };
-      colorMapT.push(ting);
-
-      setColorMap(colorMapT);
-    });
+  const updateCanvas = (rampName: string) => {
+    // update canvas for displayed color ramp
+    const cv = document.getElementById('cv') as HTMLCanvasElement;
+    if (!cv) {
+      return;
+    }
+    cv.style.visibility = 'hidden';
+    const ctx = cv.getContext('2d');
 
-    // const cv = document.getElementById('cv') as HTMLCanvasElement;
-    // if (!cv) {
-    //   return;
-    // }
-    // const ctx = cv.getContext('2d');
+    if (!ctx) {
+      return;
+    }
 
-    // if (!ctx) {
-    //   return;
-    // }
+    const ramp = colorMaps.filter(c => c.name === rampName);
 
-    // for (let i = 0; i <= 255; i++) {
-    //   ctx.beginPath();
+    for (let i = 0; i <= 255; i++) {
+      ctx.beginPath();
 
-    //   const color = colorMapT[0].colors[i];
-    //   ctx.fillStyle = color;
+      const color = ramp[0].colors[i];
+      ctx.fillStyle = color;
 
-    //   ctx.fillRect(i * 2, 0, 2, 50);
-    // }
-  }, []);
+      ctx.fillRect(i * 2, 0, 2, 50);
+    }
+    cv.style.visibility = '';
+  };
 
   useEffect(() => {
     document.addEventListener('mousedown', handleOutsideClick);
@@ -133,11 +147,10 @@ const CanvasSelectComponent = ({
         onClick={toggleDropdown}
         className="jp-Dialog-button jp-mod-accept jp-mod-styled"
       >
-        {/* <canvas width="512" height="50" id="cv"></canvas> */}
-        Select Colormap
+        <canvas width="354" height="30" id="cv"></canvas>
       </Button>
       <div className={`dropdown ${isOpen ? 'open' : ''}`}>
-        {colorMap.map((item, index) => (
+        {colorMaps.map((item, index) => (
           <ColorRampEntry index={index} colorMap={item} onClick={selectItem} />
         ))}
       </div>

packages/base/src/dialogs/components/symbology/ColorRamp.tsx

@@ -50,7 +50,10 @@ const ColorRamp = ({ layerId, modeOptions, classifyFunc }: IColorRampProps) => {
     <div className="jp-gis-color-ramp-container">
       <div className="jp-gis-symbology-row">
         <label htmlFor="color-ramp-select">Color Ramp:</label>
-        <CanvasSelectComponent setSelected={setSelectedRamp} />
+        <CanvasSelectComponent
+          selectedRamp={selectedRamp}
+          setSelected={setSelectedRamp}
+        />
       </div>
       <div className="jp-gis-symbology-row">
         <div className="jp-gis-color-ramp-div">

packages/base/style/symbologyDialog.css

@@ -152,13 +152,13 @@
   flex-direction: column;
   gap: 0.25rem;
   position: absolute;
-  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   visibility: hidden;
   z-index: 40;
   flex: 1 1 auto;
   width: 100%;
-  /* font-size: var(--jp-ui-font-size2); */
+  max-height: 375px;
   background: var(--jp-input-background);
   padding: 0 25px 0 8px;
   border: var(--jp-border-width) solid var(--jp-input-border-color);
@@ -173,41 +173,15 @@
   visibility: visible;
 }
 
-.dropdown-header {
-  padding: 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #ccc;
-}
-
-.dropdown ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-.dropdown li {
-  padding: 10px;
-  cursor: pointer;
-}
-
 .dropdown > jp-gis-color-ramp-entry:hover {
   background-color: #f1f1f1;
 }
 
 .jp-gis-color-ramp-entry {
   display: flex;
   align-items: center;
-  /* flex: 1 1 auto; */
-  /* width: 100%; */
   font-size: var(--jp-ui-font-size2);
-  /* background: var(--jp-input-background); */
   color: var(--jp-ui-font-color0);
-  /* padding: 0 25px 0 8px; */
-  /* border: var(--jp-border-width) solid var(--jp-input-border-color); */
-  /* border-radius: 0; */
-  /* outline: none; */
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;