Skip to content

Commit 612d0fa

Browse files
nakul-pynakul-py
committed
Merge branch 'main' into divergent
2 parents 657aba6 + 99f60d9 commit 612d0fa

File tree

17 files changed

+214
-199
lines changed

17 files changed

+214
-199
lines changed

‎packages/base/src/annotations/components/Annotation.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ const Annotation: React.FC<IAnnotationProps> = ({
7171
</div>
7272
<div className="jGIS-Annotation-Message">
7373
<textarea
74+
data-id="annotation-textarea"
7475
rows={3}
7576
placeholder={'Ctrl+Enter to submit'}
7677
value={messageContent}

‎packages/base/src/dialogs/symbology/components/color_ramp/ColorRamp.tsx‎ renamed to ‎packages/base/src/dialogs/symbology/components/color_ramp/ColorRampControls.tsx‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,34 @@
1+
/**
2+
* @module ColorRampControls
3+
*
4+
* This component provides the main UI controls for classifying raster layers
5+
* using different color ramps and classification modes.
6+
*
7+
* Allows users to:
8+
* - Select a color ramp (`ColorRampSelector`)
9+
* - Choose classification mode and number of classes (`ModeSelectRow`)
10+
* - Run classification via `classifyFunc`, with loading state (`LoadingIcon`)
11+
*
12+
* Props:
13+
* - `modeOptions`: Available classification modes.
14+
* - `layerParams`: Layer symbology state.
15+
* - `classifyFunc`: Callback for classification.
16+
* - `showModeRow`: Toggle for mode selector.
17+
* - `showRampSelector`: Toggle for ramp selector.
18+
*/
19+
120
import { IDict } from '@jupytergis/schema';
221
import { Button } from '@jupyterlab/ui-components';
322
import React, { useEffect, useState } from 'react';
423

524
import { COLOR_RAMP_DEFINITIONS } from '@/src/dialogs/symbology/colorRamps';
625
import { LoadingIcon } from '@/src/shared/components/loading';
7-
import { ColorRampName, COLOR_RAMP_DEFAULTS } from '@/src/types';
8-
import CanvasSelectComponent from './CanvasSelectComponent';
26+
import { COLOR_RAMP_DEFAULTS, ColorRampName } from '@/src/types';
27+
import ColorRampSelector from './ColorRampSelector';
928
import { ColorRampValueControls } from './ColorRampValueControls';
1029
import ModeSelectRow from './ModeSelectRow';
1130

12-
interface IColorRampProps {
31+
interface IColorRampControlsProps {
1332
modeOptions: string[];
1433
layerParams: IDict;
1534
classifyFunc: (
@@ -33,17 +52,17 @@ interface IColorRampProps {
3352
dataMax?: number;
3453
}
3554

36-
export type ColorRampOptions = {
37-
selectedRamp: ColorRampName;
38-
reverseRamp: boolean;
55+
export type ColorRampControlsOptions = {
56+
selectedRamp: string;
3957
numberOfShades: string;
4058
selectedMode: string;
4159
minValue: number;
4260
maxValue: number;
4361
criticalValue?: number;
62+
reverseRamp: boolean;
4463
};
4564

46-
const ColorRamp: React.FC<IColorRampProps> = ({
65+
const ColorRampControls: React.FC<IColorRampControlsProps> = ({
4766
layerParams,
4867
modeOptions,
4968
classifyFunc,
@@ -172,7 +191,7 @@ const ColorRamp: React.FC<IColorRampProps> = ({
172191
{showRampSelector && (
173192
<div className="jp-gis-symbology-row">
174193
<label htmlFor="color-ramp-select">Color Ramp:</label>
175-
<CanvasSelectComponent
194+
<ColorRampSelector
176195
selectedRamp={selectedRamp}
177196
setSelected={setSelectedRamp}
178197
reverse={reverseRamp}
@@ -242,4 +261,4 @@ const ColorRamp: React.FC<IColorRampProps> = ({
242261
);
243262
};
244263

245-
export default ColorRamp;
264+
export default ColorRampControls;

‎packages/base/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent.tsx‎ renamed to ‎packages/base/src/dialogs/symbology/components/color_ramp/ColorRampSelector.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,31 @@
1+
/**
2+
* @module ColorRampSelector
3+
*
4+
* Dropdown component for selecting a color ramp.
5+
* - Displays the currently selected ramp as a preview on a canvas.
6+
* - Expands to show a list of available ramps (`ColorRampSelectorEntry`).
7+
* - Updates the preview and notifies parent via `setSelected` when a ramp is chosen.
8+
*
9+
* Props:
10+
* - `selectedRamp`: Name of the currently selected color ramp.
11+
* - `setSelected`: Callback fired with the new ramp when selected.
12+
*/
13+
114
import { Button } from '@jupyterlab/ui-components';
215
import React, { useEffect, useRef, useState } from 'react';
316

417
import { useColorMapList } from '@/src/dialogs/symbology/colorRampUtils';
518
import { IColorMap } from '@/src/types';
6-
import ColorRampEntry from './ColorRampEntry';
19+
import ColorRampSelectorEntry from './ColorRampSelectorEntry';
720

8-
interface ICanvasSelectComponentProps {
21+
interface IColorRampSelectorProps {
922
selectedRamp: string;
1023
setSelected: (item: any) => void;
1124
reverse: boolean;
1225
setReverse: React.Dispatch<React.SetStateAction<boolean>>;
1326
}
1427

15-
const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
28+
const ColorRampSelector: React.FC<IColorRampSelectorProps> = ({
1629
selectedRamp,
1730
setSelected,
1831
reverse,
@@ -108,8 +121,7 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
108121
className={`jp-gis-color-ramp-dropdown ${isOpen ? 'jp-gis-open' : ''}`}
109122
>
110123
{colorMaps.map((item, index) => (
111-
<ColorRampEntry
112-
key={item.name}
124+
<ColorRampSelectorEntry
113125
index={index}
114126
colorMap={item}
115127
onClick={selectItem}
@@ -131,4 +143,4 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
131143
);
132144
};
133145

134-
export default CanvasSelectComponent;
146+
export default ColorRampSelector;

‎packages/base/src/dialogs/symbology/components/color_ramp/ColorRampEntry.tsx‎ renamed to ‎packages/base/src/dialogs/symbology/components/color_ramp/ColorRampSelectorEntry.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
1+
/**
2+
* @module ColorRampSelectorEntry
3+
*
4+
* Represents a single selectable color ramp option in the `ColorRampSelector`.
5+
* Renders a preview ColorRamp on a canvas and triggers `onClick` when selected.
6+
*
7+
* Props:
8+
* - `index`: Unique index for canvas ID.
9+
* - `colorMap`: Ramp definition including name and colors.
10+
* - `onClick`: Callback fired with the ramp name when clicked.
11+
*/
12+
113
import React, { useEffect } from 'react';
214

315
import { IColorMap } from '@/src/types';
416

5-
interface IColorRampEntryProps {
17+
interface IColorRampSelectorEntryProps {
618
index: number;
719
colorMap: IColorMap;
820
onClick: (item: any) => void;
921
}
1022

11-
const ColorRampEntry: React.FC<IColorRampEntryProps> = ({
23+
const ColorRampSelectorEntry: React.FC<IColorRampSelectorEntryProps> = ({
1224
index,
1325
colorMap,
1426
onClick,
@@ -59,4 +71,4 @@ const ColorRampEntry: React.FC<IColorRampEntryProps> = ({
5971
);
6072
};
6173

62-
export default ColorRampEntry;
74+
export default ColorRampSelectorEntry;

‎packages/base/src/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { ExpressionValue } from 'ol/expr/expression';
55
import React, { useEffect, useRef, useState } from 'react';
66

77
import { GeoTiffClassifications } from '@/src/dialogs/symbology/classificationModes';
8-
import ColorRamp, {
9-
ColorRampOptions,
10-
} from '@/src/dialogs/symbology/components/color_ramp/ColorRamp';
8+
import ColorRampControls, {
9+
ColorRampControlsOptions,
10+
} from '@/src/dialogs/symbology/components/color_ramp/ColorRampControls';
1111
import StopRow from '@/src/dialogs/symbology/components/color_stops/StopRow';
1212
import useGetSingleBandInfo, {
1313
IBandRow,
@@ -59,13 +59,13 @@ const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
5959
const [selectedFunction, setSelectedFunction] =
6060
useState<InterpolationType>('linear');
6161
const [colorRampOptions, setColorRampOptions] = useState<
62-
ColorRampOptions | undefined
62+
ColorRampControlsOptions | undefined
6363
>();
6464

6565
const stopRowsRef = useRef<IStopRow[]>();
6666
const bandRowsRef = useRef<IBandRow[]>([]);
6767
const selectedFunctionRef = useRef<InterpolationType>();
68-
const colorRampOptionsRef = useRef<ColorRampOptions | undefined>();
68+
const colorRampOptionsRef = useRef<ColorRampControlsOptions | undefined>();
6969
const selectedBandRef = useRef<number>();
7070

7171
useEffect(() => {
@@ -436,7 +436,7 @@ const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
436436
</div>
437437

438438
{bandRows.length > 0 && (
439-
<ColorRamp
439+
<ColorRampControls
440440
layerParams={layer.parameters}
441441
modeOptions={modeOptions}
442442
classifyFunc={buildColorInfoFromClassification}

‎packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@ import { IVectorLayer } from '@jupytergis/schema';
22
import { ExpressionValue } from 'ol/expr/expression';
33
import React, { useEffect, useRef, useState } from 'react';
44

5-
import ColorRamp, {
6-
ColorRampOptions,
7-
} from '@/src/dialogs/symbology/components/color_ramp/ColorRamp';
5+
import ColorRampControls, { ColorRampControlsOptions } from '@/src/dialogs/symbology/components/color_ramp/ColorRampControls';
86
import StopContainer from '@/src/dialogs/symbology/components/color_stops/StopContainer';
97
import {
108
IStopRow,
@@ -25,12 +23,12 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
2523
}) => {
2624
const selectedAttributeRef = useRef<string>();
2725
const stopRowsRef = useRef<IStopRow[]>();
28-
const colorRampOptionsRef = useRef<ColorRampOptions | undefined>();
26+
const colorRampOptionsRef = useRef<ColorRampControlsOptions | undefined>();
2927

3028
const [selectedAttribute, setSelectedAttribute] = useState('');
3129
const [stopRows, setStopRows] = useState<IStopRow[]>([]);
3230
const [colorRampOptions, setColorRampOptions] = useState<
33-
ColorRampOptions | undefined
31+
ColorRampControlsOptions | undefined
3432
>();
3533
const [manualStyle, setManualStyle] = useState({
3634
fillColor: '#3399CC',
@@ -336,7 +334,7 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
336334
</div>
337335

338336
<div className="jp-gis-layer-symbology-container">
339-
<ColorRamp
337+
<ColorRampControls
340338
layerParams={layer.parameters}
341339
modeOptions={[]}
342340
classifyFunc={buildColorInfoFromClassification}

‎packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { ExpressionValue } from 'ol/expr/expression';
33
import React, { useEffect, useRef, useState } from 'react';
44

55
import { VectorClassifications } from '@/src/dialogs/symbology/classificationModes';
6-
import ColorRamp, {
7-
ColorRampOptions,
8-
} from '@/src/dialogs/symbology/components/color_ramp/ColorRamp';
6+
import ColorRampControls, {
7+
ColorRampControlsOptions,
8+
} from '@/src/dialogs/symbology/components/color_ramp/ColorRampControls';
99
import StopContainer from '@/src/dialogs/symbology/components/color_stops/StopContainer';
1010
import {
1111
IStopRow,
@@ -36,12 +36,13 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
3636
const symbologyTabRef = useRef<string>();
3737
const colorStopRowsRef = useRef<IStopRow[]>([]);
3838
const radiusStopRowsRef = useRef<IStopRow[]>([]);
39+
const colorRampOptionsRef = useRef<ColorRampControlsOptions | undefined>();
3940

4041
const [selectedAttribute, setSelectedAttribute] = useState('');
4142
const [colorStopRows, setColorStopRows] = useState<IStopRow[]>([]);
4243
const [radiusStopRows, setRadiusStopRows] = useState<IStopRow[]>([]);
4344
const [colorRampOptions, setColorRampOptions] = useState<
44-
ColorRampOptions | undefined
45+
ColorRampControlsOptions | undefined
4546
>();
4647
const [colorManualStyle, setColorManualStyle] = useState({
4748
strokeColor: '#3399CC',
@@ -53,7 +54,6 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
5354
const [dataMin, setDataMin] = useState<number | undefined>();
5455
const [dataMax, setDataMax] = useState<number | undefined>();
5556

56-
const colorRampOptionsRef = useRef<ColorRampOptions | undefined>();
5757
const colorManualStyleRef = useRef(colorManualStyle);
5858
const radiusManualStyleRef = useRef(radiusManualStyle);
5959

@@ -405,7 +405,7 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
405405
)}
406406
</div>
407407

408-
<ColorRamp
408+
<ColorRampControls
409409
layerParams={layer.parameters}
410410
modeOptions={modeOptions}
411411
classifyFunc={buildColorInfoFromClassification}

‎packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import colormap from 'colormap';
22
import React, { useEffect, useRef, useState } from 'react';
33

4-
import CanvasSelectComponent from '@/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent';
4+
import ColorRampSelector from '@/src/dialogs/symbology/components/color_ramp/ColorRampSelector';
55
import { ISymbologyDialogProps } from '@/src/dialogs/symbology/symbologyDialog';
66

77
const Heatmap: React.FC<ISymbologyDialogProps> = ({
@@ -99,7 +99,7 @@ const Heatmap: React.FC<ISymbologyDialogProps> = ({
9999
<p>Represent features based on their density using a heatmap.</p>
100100
<div className="jp-gis-symbology-row jp-gis-heatmap">
101101
<label htmlFor="color-ramp-select">Color Ramp:</label>
102-
<CanvasSelectComponent
102+
<ColorRampSelector
103103
selectedRamp={selectedRamp}
104104
setSelected={setSelectedRamp}
105105
reverse={reverseRamp}

‎packages/base/src/mainview/mainView.tsx‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1895,15 +1895,13 @@ export class MainView extends React.Component<IProps, IStates> {
18951895
return;
18961896
}
18971897
const layer = this.getLayer(id);
1898-
let nextIndex = index;
1898+
18991899
// should not be undefined since the id exists above
19001900
if (layer === undefined) {
19011901
return;
19021902
}
19031903
this._Map.getLayers().removeAt(currentIndex);
1904-
if (currentIndex < index) {
1905-
nextIndex -= 1;
1906-
}
1904+
19071905
// Adjust index to ensure it's within bounds
19081906
const numLayers = this._Map.getLayers().getLength();
19091907
const safeIndex = Math.min(index, numLayers);
@@ -2231,7 +2229,7 @@ export class MainView extends React.Component<IProps, IStates> {
22312229
const fid = feature.getId?.() ?? rawProps?.fid;
22322230

22332231
if (rawProps && Object.keys(rawProps).length > 1) {
2234-
const { geometry, ...clean } = rawProps;
2232+
const { ...clean } = rawProps;
22352233
props = clean;
22362234
if (fid !== null) {
22372235
// TODO Clean the cache under some condition?
@@ -2413,7 +2411,24 @@ export class MainView extends React.Component<IProps, IStates> {
24132411
width: '100%',
24142412
height: '100%',
24152413
}}
2416-
/>
2414+
>
2415+
<div className="jgis-panels-wrapper">
2416+
{this._state && (
2417+
<LeftPanel
2418+
model={this._model}
2419+
commands={this._mainViewModel.commands}
2420+
state={this._state}
2421+
></LeftPanel>
2422+
)}
2423+
{this._formSchemaRegistry && this._annotationModel && (
2424+
<RightPanel
2425+
model={this._model}
2426+
formSchemaRegistry={this._formSchemaRegistry}
2427+
annotationModel={this._annotationModel}
2428+
></RightPanel>
2429+
)}
2430+
</div>
2431+
</div>
24172432
</div>
24182433
<StatusBar
24192434
jgisModel={this._model}
@@ -2422,23 +2437,6 @@ export class MainView extends React.Component<IProps, IStates> {
24222437
scale={this.state.scale}
24232438
/>
24242439
</div>
2425-
2426-
<div className="jgis-panels-wrapper">
2427-
{this._state && (
2428-
<LeftPanel
2429-
model={this._model}
2430-
commands={this._mainViewModel.commands}
2431-
state={this._state}
2432-
></LeftPanel>
2433-
)}
2434-
{this._formSchemaRegistry && this._annotationModel && (
2435-
<RightPanel
2436-
model={this._model}
2437-
formSchemaRegistry={this._formSchemaRegistry}
2438-
annotationModel={this._annotationModel}
2439-
></RightPanel>
2440-
)}
2441-
</div>
24422440
</>
24432441
);
24442442
}

‎packages/base/src/panelview/annotationPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export class AnnotationsPanel extends Component<IAnnotationPanelProps> {
3232

3333
const annotations = annotationIds.map((id: string) => {
3434
return (
35-
<div>
35+
<div className="jgis-annotation-panel">
3636
<Annotation
3737
jgisModel={this._jgisModel}
3838
annotationModel={this._annotationModel}

0 commit comments

Comments
 (0)