geojupyter · nakul-py · Nov 5, 2025
diff --git a/...ology/components/color_ramp/ColorRamp.tsx → ...mponents/color_ramp/ColorRampControls.tsx b/...ology/components/color_ramp/ColorRamp.tsx → ...mponents/color_ramp/ColorRampControls.tsx
@@ -1,13 +1,32 @@
+/**
+ * @module ColorRampControls
+ *
+ * This component provides the main UI controls for classifying raster layers
+ * using different color ramps and classification modes.
+ *
+ * Allows users to:
+ * - Select a color ramp (`ColorRampSelector`)
+ * - Choose classification mode and number of classes (`ModeSelectRow`)
+ * - Run classification via `classifyFunc`, with loading state (`LoadingIcon`)
+ *
+ * Props:
+ * - `modeOptions`: Available classification modes.
+ * - `layerParams`: Layer symbology state.
+ * - `classifyFunc`: Callback for classification.
+ * - `showModeRow`: Toggle for mode selector.
+ * - `showRampSelector`: Toggle for ramp selector.
+ */
+
 import { IDict } from '@jupytergis/schema';
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useState } from 'react';
 
 import { LoadingIcon } from '@/src/shared/components/loading';
-import CanvasSelectComponent from './CanvasSelectComponent';
+import ColorRampSelector from './ColorRampSelector';
 import ModeSelectRow from './ModeSelectRow';
 import { COLOR_RAMP_DEFAULTS, ColorRampName } from '../../colorRampUtils';
 
-interface IColorRampProps {
+interface IColorRampControlsProps {
   modeOptions: string[];
   layerParams: IDict;
   classifyFunc: (
@@ -20,13 +39,13 @@ interface IColorRampProps {
   showRampSelector: boolean;
 }
 
-export type ColorRampOptions = {
+export type ColorRampControlsOptions = {
   selectedRamp: string;
   numberOfShades: string;
   selectedMode: string;
 };
 
-const ColorRamp: React.FC<IColorRampProps> = ({
+const ColorRampControls: React.FC<IColorRampControlsProps> = ({
   layerParams,
   modeOptions,
   classifyFunc,
@@ -99,7 +118,7 @@ const ColorRamp: React.FC<IColorRampProps> = ({
       {showRampSelector && (
         <div className="jp-gis-symbology-row">
           <label htmlFor="color-ramp-select">Color Ramp:</label>
-          <CanvasSelectComponent
+          <ColorRampSelector
             selectedRamp={selectedRamp}
             setSelected={setSelectedRamp}
           />
@@ -144,4 +163,4 @@ const ColorRamp: React.FC<IColorRampProps> = ({
   );
 };
 
-export default ColorRamp;
+export default ColorRampControls;
diff --git a/...ents/color_ramp/CanvasSelectComponent.tsx → ...mponents/color_ramp/ColorRampSelector.tsx b/...ents/color_ramp/CanvasSelectComponent.tsx → ...mponents/color_ramp/ColorRampSelector.tsx
@@ -1,20 +1,33 @@
+/**
+ * @module ColorRampSelector
+ *
+ * Dropdown component for selecting a color ramp.
+ * - Displays the currently selected ramp as a preview on a canvas.
+ * - Expands to show a list of available ramps (`ColorRampSelectorEntry`).
+ * - Updates the preview and notifies parent via `setSelected` when a ramp is chosen.
+ *
+ * Props:
+ * - `selectedRamp`: Name of the currently selected color ramp.
+ * - `setSelected`: Callback fired with the new ramp when selected.
+ */
+
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { useColorMapList } from '@/src/dialogs/symbology/colorRampUtils';
-import ColorRampEntry from './ColorRampEntry';
+import ColorRampSelectorEntry from './ColorRampSelectorEntry';
 
 export interface IColorMap {
   name: string;
   colors: string[];
 }
 
-interface ICanvasSelectComponentProps {
+interface IColorRampSelectorProps {
   selectedRamp: string;
   setSelected: (item: any) => void;
 }
 
-const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
+const ColorRampSelector: React.FC<IColorRampSelectorProps> = ({
   selectedRamp,
   setSelected,
 }) => {
@@ -108,11 +121,15 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
         className={`jp-gis-color-ramp-dropdown ${isOpen ? 'jp-gis-open' : ''}`}
       >
         {colorMaps.map((item, index) => (
-          <ColorRampEntry index={index} colorMap={item} onClick={selectItem} />
+          <ColorRampSelectorEntry
+            index={index}
+            colorMap={item}
+            onClick={selectItem}
+          />
         ))}
       </div>
     </div>
   );
 };
 
-export default CanvasSelectComponent;
+export default ColorRampSelector;
diff --git a/.../components/color_ramp/ColorRampEntry.tsx → ...nts/color_ramp/ColorRampSelectorEntry.tsx b/.../components/color_ramp/ColorRampEntry.tsx → ...nts/color_ramp/ColorRampSelectorEntry.tsx
@@ -1,14 +1,26 @@
+/**
+ * @module ColorRampSelectorEntry
+ *
+ * Represents a single selectable color ramp option in the `ColorRampSelector`.
+ * Renders a preview ColorRamp on a canvas and triggers `onClick` when selected.
+ *
+ * Props:
+ * - `index`: Unique index for canvas ID.
+ * - `colorMap`: Ramp definition including name and colors.
+ * - `onClick`: Callback fired with the ramp name when clicked.
+ */
+
 import React, { useEffect } from 'react';
 
-import { IColorMap } from './CanvasSelectComponent';
+import { IColorMap } from './ColorRampSelector';
 
-interface IColorRampEntryProps {
+interface IColorRampSelectorEntryProps {
   index: number;
   colorMap: IColorMap;
   onClick: (item: any) => void;
 }
 
-const ColorRampEntry: React.FC<IColorRampEntryProps> = ({
+const ColorRampSelectorEntry: React.FC<IColorRampSelectorEntryProps> = ({
   index,
   colorMap,
   onClick,
@@ -57,4 +69,4 @@ const ColorRampEntry: React.FC<IColorRampEntryProps> = ({
   );
 };
 
-export default ColorRampEntry;
+export default ColorRampSelectorEntry;
diff --git a/packages/base/src/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.tsx b/packages/base/src/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.tsx
@@ -5,9 +5,9 @@ import { ExpressionValue } from 'ol/expr/expression';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { GeoTiffClassifications } from '@/src/dialogs/symbology/classificationModes';
-import ColorRamp, {
-  ColorRampOptions,
-} from '@/src/dialogs/symbology/components/color_ramp/ColorRamp';
+import ColorRampControls, {
+  ColorRampControlsOptions,
+} from '@/src/dialogs/symbology/components/color_ramp/ColorRampControls';
 import StopRow from '@/src/dialogs/symbology/components/color_stops/StopRow';
 import useGetBandInfo, {
   IBandRow,
@@ -50,13 +50,13 @@ const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
   const [selectedFunction, setSelectedFunction] =
     useState<InterpolationType>('linear');
   const [colorRampOptions, setColorRampOptions] = useState<
-    ColorRampOptions | undefined
+    ColorRampControlsOptions | undefined
   >();
 
   const stopRowsRef = useRef<IStopRow[]>();
   const bandRowsRef = useRef<IBandRow[]>([]);
   const selectedFunctionRef = useRef<InterpolationType>();
-  const colorRampOptionsRef = useRef<ColorRampOptions | undefined>();
+  const colorRampOptionsRef = useRef<ColorRampControlsOptions | undefined>();
   const selectedBandRef = useRef<number>();
 
   useEffect(() => {
@@ -404,7 +404,7 @@ const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
         </div>
       </div>
       {bandRows.length > 0 && (
-        <ColorRamp
+        <ColorRampControls
           layerParams={layer.parameters}
           modeOptions={modeOptions}
           classifyFunc={buildColorInfoFromClassification}

diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx
@@ -3,7 +3,7 @@ import { ReadonlyJSONObject } from '@lumino/coreutils';
 import { ExpressionValue } from 'ol/expr/expression';
 import React, { useEffect, useRef, useState } from 'react';
 
-import ColorRamp from '@/src/dialogs/symbology/components/color_ramp/ColorRamp';
+import ColorRampControls from '@/src/dialogs/symbology/components/color_ramp/ColorRampControls';
 import StopContainer from '@/src/dialogs/symbology/components/color_stops/StopContainer';
 import {
   IStopRow,
@@ -330,7 +330,7 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
           )}
 
           <div className="jp-gis-layer-symbology-container">
-            <ColorRamp
+            <ColorRampControls
               layerParams={layer.parameters}
               modeOptions={[]}
               classifyFunc={buildColorInfoFromClassification}

diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx
@@ -3,9 +3,9 @@ import { ExpressionValue } from 'ol/expr/expression';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { VectorClassifications } from '@/src/dialogs/symbology/classificationModes';
-import ColorRamp, {
-  ColorRampOptions,
-} from '@/src/dialogs/symbology/components/color_ramp/ColorRamp';
+import ColorRampControls, {
+  ColorRampControlsOptions,
+} from '@/src/dialogs/symbology/components/color_ramp/ColorRampControls';
 import StopContainer from '@/src/dialogs/symbology/components/color_stops/StopContainer';
 import {
   IStopRow,
@@ -35,13 +35,13 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
   const symbologyTabRef = useRef<string>();
   const colorStopRowsRef = useRef<IStopRow[]>([]);
   const radiusStopRowsRef = useRef<IStopRow[]>([]);
-  const colorRampOptionsRef = useRef<ColorRampOptions | undefined>();
+  const colorRampOptionsRef = useRef<ColorRampControlsOptions | undefined>();
 
   const [selectedAttribute, setSelectedAttribute] = useState('');
   const [colorStopRows, setColorStopRows] = useState<IStopRow[]>([]);
   const [radiusStopRows, setRadiusStopRows] = useState<IStopRow[]>([]);
   const [colorRampOptions, setColorRampOptions] = useState<
-    ColorRampOptions | undefined
+    ColorRampControlsOptions | undefined
   >();
   const [colorManualStyle, setColorManualStyle] = useState({
     strokeColor: '#3399CC',
@@ -381,7 +381,7 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
             </div>
           )}
 
-          <ColorRamp
+          <ColorRampControls
             layerParams={layer.parameters}
             modeOptions={modeOptions}
             classifyFunc={buildColorInfoFromClassification}

diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx
@@ -1,7 +1,7 @@
 import colormap from 'colormap';
 import React, { useEffect, useRef, useState } from 'react';
 
-import CanvasSelectComponent from '@/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent';
+import ColorRampSelector from '@/src/dialogs/symbology/components/color_ramp/ColorRampSelector';
 import { ISymbologyDialogProps } from '@/src/dialogs/symbology/symbologyDialog';
 
 const Heatmap: React.FC<ISymbologyDialogProps> = ({
@@ -99,7 +99,7 @@ const Heatmap: React.FC<ISymbologyDialogProps> = ({
       <p>Represent features based on their density using a heatmap.</p>
       <div className="jp-gis-symbology-row jp-gis-heatmap">
         <label htmlFor="color-ramp-select">Color Ramp:</label>
-        <CanvasSelectComponent
+        <ColorRampSelector
           selectedRamp={selectedRamp}
           setSelected={setSelectedRamp}
         />