Small tweaks

Author: gjmooney

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

@@ -76,8 +76,8 @@ const CanvasSelectComponent = ({
         nshades: 255,
         format: 'rgbaString'
       });
-      const ting = { name: name, colors: colorRamp };
-      colorMapList.push(ting);
+      const colorMap = { name: name, colors: colorRamp };
+      colorMapList.push(colorMap);
 
       setColorMaps(colorMapList);
     });
@@ -110,12 +110,12 @@ const CanvasSelectComponent = ({
 
   const updateCanvas = (rampName: string) => {
     // update canvas for displayed color ramp
-    const cv = document.getElementById('cv') as HTMLCanvasElement;
-    if (!cv) {
+    const canvas = document.getElementById('cv') as HTMLCanvasElement;
+    if (!canvas) {
       return;
     }
-    cv.style.visibility = 'hidden';
-    const ctx = cv.getContext('2d');
+    canvas.style.visibility = 'hidden';
+    const ctx = canvas.getContext('2d');
 
     if (!ctx) {
       return;
@@ -131,7 +131,7 @@ const CanvasSelectComponent = ({
 
       ctx.fillRect(i * 2, 0, 2, 50);
     }
-    cv.style.visibility = 'initial';
+    canvas.style.visibility = 'initial';
   };
 
   useEffect(() => {
@@ -147,7 +147,6 @@ const CanvasSelectComponent = ({
         id="jp-gis-canvas-button"
         onClick={toggleDropdown}
         className="jp-Dialog-button jp-gis-canvas-button"
-        // style={{ visibility: 'hidden' }}
       >
         <canvas
           id="cv"

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

@@ -30,15 +30,16 @@ const ColorRamp = ({ layerId, modeOptions, classifyFunc }: IColorRampProps) => {
   const populateOptions = async () => {
     const stateDb = GlobalStateDbManager.getInstance().getStateDb();
 
-    const layerState = await stateDb?.fetch(`jupytergis:${layerId}`);
+    const layerState = (await stateDb?.fetch(
+      `jupytergis:${layerId}`
+    )) as ReadonlyJSONObject;
 
     let nClasses, singleBandMode, colorRamp;
 
     if (layerState) {
-      nClasses = (layerState as ReadonlyJSONObject).numberOfShades as string;
-      singleBandMode = (layerState as ReadonlyJSONObject)
-        .selectedMode as string;
-      colorRamp = (layerState as ReadonlyJSONObject).selectedRamp as string;
+      nClasses = layerState.numberOfShades as string;
+      singleBandMode = layerState.selectedMode as string;
+      colorRamp = layerState.selectedRamp as string;
     }
 
     setNumberOfShades(nClasses ? nClasses : '9');

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

@@ -8,15 +8,14 @@ interface IColorRampEntryProps {
 }
 
 const ColorRampEntry = ({ index, colorMap, onClick }: IColorRampEntryProps) => {
-  // const canvasWidth = 345;
   const canvasHeight = 30;
 
   useEffect(() => {
-    const cv = document.getElementById(`cv-${index}`) as HTMLCanvasElement;
-    if (!cv) {
+    const canvas = document.getElementById(`cv-${index}`) as HTMLCanvasElement;
+    if (!canvas) {
       return;
     }
-    const ctx = cv.getContext('2d');
+    const ctx = canvas.getContext('2d');
 
     if (!ctx) {
       return;
@@ -41,7 +40,6 @@ const ColorRampEntry = ({ index, colorMap, onClick }: 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/src/dialogs/components/symbology/Graduated.tsx

@@ -286,7 +286,6 @@ const Graduated = ({
 
     const valueColorPairs: IStopRow[] = [];
 
-    // assume stops and colors are same length
     for (let i = 0; i < +numberOfShades; i++) {
       valueColorPairs.push({ stop: stops[i], output: colorMap[i] });
     }
@@ -364,12 +363,6 @@ const Graduated = ({
         >
           Add Stop
         </Button>
-        {/* <Button
-          className="jp-Dialog-button jp-mod-accept jp-mod-styled"
-          onClick={buildColorInfoFromClassification}
-        >
-          Classify
-        </Button> */}
       </div>
     </div>
   );