diff --git a/packages/base/src/dialogs/components/symbology/VectorRendering.tsx b/packages/base/src/dialogs/symbology/vector_layer/VectorRendering.tsx
similarity index 77%
rename from packages/base/src/dialogs/components/symbology/VectorRendering.tsx
rename to packages/base/src/dialogs/symbology/vector_layer/VectorRendering.tsx
index 21936307..af544197 100644
--- a/packages/base/src/dialogs/components/symbology/VectorRendering.tsx
+++ b/packages/base/src/dialogs/symbology/vector_layer/VectorRendering.tsx
@@ -1,7 +1,8 @@
import React, { useEffect, useState } from 'react';
-import { ISymbologyDialogProps } from '../../symbologyDialog';
-import Graduated from './Graduated';
-import SimpleSymbol from './SimpleSymbol';
+import { ISymbologyDialogProps } from '../symbologyDialog';
+import Graduated from './types/Graduated';
+import SimpleSymbol from './types/SimpleSymbol';
+import Categorized from './types/Categorized';
const VectorRendering = ({
context,
@@ -27,11 +28,11 @@ const VectorRendering = ({
}
useEffect(() => {
- const renderType = layer.parameters?.symbologyState.renderType;
+ const renderType = layer.parameters?.symbologyState?.renderType;
setSelectedRenderType(renderType ?? 'Single Symbol');
if (layer.type === 'VectorLayer') {
- const options = ['Single Symbol', 'Graduated'];
+ const options = ['Single Symbol', 'Graduated', 'Categorized'];
setRenderTypeOptions(options);
}
}, []);
@@ -60,6 +61,17 @@ const VectorRendering = ({
/>
);
break;
+ case 'Categorized':
+ RenderComponent = (
+
+ );
+ break;
default:
RenderComponent =
Render Type Not Implemented (yet)
;
}
diff --git a/packages/base/src/dialogs/symbology/vector_layer/components/ValueSelect.tsx b/packages/base/src/dialogs/symbology/vector_layer/components/ValueSelect.tsx
new file mode 100644
index 00000000..abd0c437
--- /dev/null
+++ b/packages/base/src/dialogs/symbology/vector_layer/components/ValueSelect.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface IValueSelectProps {
+ featureProperties: any;
+ selectedValue: string;
+ setSelectedValue: (value: string) => void;
+}
+
+const ValueSelect = ({
+ featureProperties,
+ selectedValue,
+ setSelectedValue
+}: IValueSelectProps) => {
+ return (
+
+
+
+
+ );
+};
+
+export default ValueSelect;
diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx
new file mode 100644
index 00000000..2da45411
--- /dev/null
+++ b/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx
@@ -0,0 +1,156 @@
+import React, { useEffect, useRef, useState } from 'react';
+import ValueSelect from '../components/ValueSelect';
+import { IStopRow, ISymbologyDialogProps } from '../../symbologyDialog';
+import { useGetProperties } from '../../hooks/useGetProperties';
+import StopContainer from '../../components/color_stops/StopContainer';
+import { Utils, VectorUtils } from '../../symbologyUtils';
+import ColorRamp from '../../components/color_ramp/ColorRamp';
+import { ReadonlyJSONObject } from '@lumino/coreutils';
+import { ExpressionValue } from 'ol/expr/expression';
+import { IVectorLayer } from '@jupytergis/schema';
+
+const Categorized = ({
+ context,
+ state,
+ okSignalPromise,
+ cancel,
+ layerId
+}: ISymbologyDialogProps) => {
+ const selectedValueRef = useRef
();
+ const stopRowsRef = useRef();
+ const colorRampOptionsRef = useRef();
+
+ const [selectedValue, setSelectedValue] = useState('');
+ const [stopRows, setStopRows] = useState([]);
+ const [colorRampOptions, setColorRampOptions] = useState<
+ ReadonlyJSONObject | undefined
+ >();
+
+ if (!layerId) {
+ return;
+ }
+ const layer = context.model.getLayer(layerId);
+ if (!layer?.parameters) {
+ return;
+ }
+ const { featureProps } = useGetProperties({
+ layerId,
+ model: context.model
+ });
+
+ useEffect(() => {
+ const valueColorPairs = VectorUtils.buildColorInfo(layer);
+
+ setStopRows(valueColorPairs);
+
+ okSignalPromise.promise.then(okSignal => {
+ okSignal.connect(handleOk, this);
+ });
+
+ return () => {
+ okSignalPromise.promise.then(okSignal => {
+ okSignal.disconnect(handleOk, this);
+ });
+ };
+ }, []);
+
+ useEffect(() => {
+ populateOptions();
+ }, [featureProps]);
+
+ useEffect(() => {
+ selectedValueRef.current = selectedValue;
+ stopRowsRef.current = stopRows;
+ colorRampOptionsRef.current = colorRampOptions;
+ }, [selectedValue, stopRows, colorRampOptions]);
+
+ const populateOptions = async () => {
+ const layerParams = layer.parameters as IVectorLayer;
+ const value =
+ layerParams.symbologyState?.value ?? Object.keys(featureProps)[0];
+
+ setSelectedValue(value);
+ };
+
+ const buildColorInfoFromClassification = (
+ selectedMode: string,
+ numberOfShades: string,
+ selectedRamp: string,
+ setIsLoading: (isLoading: boolean) => void
+ ) => {
+ setColorRampOptions({
+ selectedFunction: '',
+ selectedRamp,
+ numberOfShades: '',
+ selectedMode: ''
+ });
+
+ const stops = Array.from(featureProps[selectedValue]).sort((a, b) => a - b);
+
+ const valueColorPairs = Utils.getValueColorPairs(
+ stops,
+ selectedRamp,
+ stops.length
+ );
+
+ setStopRows(valueColorPairs);
+ };
+
+ const handleOk = () => {
+ if (!layer.parameters) {
+ return;
+ }
+
+ const colorExpr: ExpressionValue[] = [];
+ colorExpr.push('case');
+
+ stopRowsRef.current?.map(stop => {
+ colorExpr.push(['==', ['get', selectedValueRef.current], stop.stop]);
+ colorExpr.push(stop.output);
+ });
+
+ // fallback value
+ colorExpr.push([0, 0, 0, 0.0]);
+
+ const newStyle = { ...layer.parameters.color };
+ newStyle['circle-fill-color'] = colorExpr;
+
+ const symbologyState = {
+ renderType: 'Categorized',
+ value: selectedValueRef.current,
+ colorRamp: colorRampOptionsRef.current?.selectedRamp,
+ nClasses: colorRampOptionsRef.current?.numberOfShades,
+ mode: colorRampOptionsRef.current?.selectedMode
+ };
+
+ layer.parameters.symbologyState = symbologyState;
+ layer.parameters.color = newStyle;
+
+ context.model.sharedModel.updateLayer(layerId, layer);
+ cancel();
+ };
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default Categorized;
diff --git a/packages/base/src/dialogs/components/symbology/Graduated.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx
similarity index 52%
rename from packages/base/src/dialogs/components/symbology/Graduated.tsx
rename to packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx
index 86eac81d..6d38728b 100644
--- a/packages/base/src/dialogs/components/symbology/Graduated.tsx
+++ b/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx
@@ -1,12 +1,15 @@
-import { GeoJSONFeature1, IVectorLayer } from '@jupytergis/schema';
-import { Button } from '@jupyterlab/ui-components';
-import colormap from 'colormap';
import { ExpressionValue } from 'ol/expr/expression';
import React, { useEffect, useRef, useState } from 'react';
-import { VectorClassifications } from '../../../classificationModes';
+import { VectorClassifications } from '../../classificationModes';
import { IStopRow, ISymbologyDialogProps } from '../../symbologyDialog';
-import ColorRamp, { ColorRampOptions } from './ColorRamp';
-import StopRow from './StopRow';
+import ColorRamp, {
+ ColorRampOptions
+} from '../../components/color_ramp/ColorRamp';
+import ValueSelect from '../components/ValueSelect';
+import StopContainer from '../../components/color_stops/StopContainer';
+import { useGetProperties } from '../../hooks/useGetProperties';
+import { Utils, VectorUtils } from '../../symbologyUtils';
+import { IVectorLayer } from '@jupytergis/schema';
const Graduated = ({
context,
@@ -29,10 +32,10 @@ const Graduated = ({
const colorRampOptionsRef = useRef();
const [selectedValue, setSelectedValue] = useState('');
- const [featureProperties, setFeatureProperties] = useState({});
const [selectedMethod, setSelectedMethod] = useState('color');
const [stopRows, setStopRows] = useState([]);
const [methodOptions, setMethodOptions] = useState(['color']);
+
const [colorRampOptions, setColorRampOptions] = useState<
ColorRampOptions | undefined
>();
@@ -45,38 +48,25 @@ const Graduated = ({
return;
}
- useEffect(() => {
- const getProperties = async () => {
- if (!layerId) {
- return;
- }
- const model = context.model;
- const layer = model.getLayer(layerId);
- const source = model.getSource(layer?.parameters?.source);
-
- if (!source) {
- return;
- }
-
- const data = await model.readGeoJSON(source.parameters?.path);
- const featureProps: any = {};
+ const { featureProps } = useGetProperties({
+ layerId,
+ model: context.model
+ });
- data?.features.forEach((feature: GeoJSONFeature1) => {
- feature.properties &&
- Object.entries(feature.properties).forEach(([key, value]) => {
- if (!(key in featureProps)) {
- featureProps[key] = new Set();
- }
+ useEffect(() => {
+ let stopOutputPairs: IStopRow[] = [];
+ const layerParams = layer.parameters as IVectorLayer;
+ const method = layerParams.symbologyState?.method ?? 'color';
- featureProps[key].add(value);
- });
+ if (method === 'color') {
+ stopOutputPairs = VectorUtils.buildColorInfo(layer);
+ }
- setFeatureProperties(featureProps);
- });
- };
+ if (method === 'radius') {
+ stopOutputPairs = VectorUtils.buildRadiusInfo(layer);
+ }
- getProperties();
- buildColorInfo();
+ setStopRows(stopOutputPairs);
okSignalPromise.promise.then(okSignal => {
okSignal.connect(handleOk, this);
@@ -98,49 +88,7 @@ const Graduated = ({
useEffect(() => {
populateOptions();
- }, [featureProperties]);
-
- const buildColorInfo = () => {
- // This it to parse a color object on the layer
- if (!layer.parameters?.color) {
- return;
- }
-
- const color = layer.parameters.color;
-
- // If color is a string we don't need to parse
- if (typeof color === 'string') {
- return;
- }
-
- const prefix = layer.parameters.type === 'circle' ? 'circle-' : '';
- if (!color[`${prefix}fill-color`]) {
- return;
- }
-
- const valueColorPairs: IStopRow[] = [];
-
- // So if it's not a string then it's an array and we parse
- // Color[0] is the operator used for the color expression
- switch (color[`${prefix}fill-color`][0]) {
- case 'interpolate': {
- // First element is interpolate for linear selection
- // Second element is type of interpolation (ie linear)
- // Third is input value that stop values are compared with
- // Fourth and on is value:color pairs
- for (let i = 3; i < color[`${prefix}fill-color`].length; i += 2) {
- const obj: IStopRow = {
- stop: color[`${prefix}fill-color`][i],
- output: color[`${prefix}fill-color`][i + 1]
- };
- valueColorPairs.push(obj);
- }
- break;
- }
- }
-
- setStopRows(valueColorPairs);
- };
+ }, [featureProps]);
const populateOptions = async () => {
// Set up method options
@@ -150,13 +98,9 @@ const Graduated = ({
}
const layerParams = layer.parameters as IVectorLayer;
- const value = layerParams.symbologyState?.value
- ? layerParams.symbologyState.value
- : Object.keys(featureProperties)[0];
-
- const method = layerParams.symbologyState?.method
- ? layerParams.symbologyState.method
- : 'color';
+ const value =
+ layerParams.symbologyState?.value ?? Object.keys(featureProps)[0];
+ const method = layerParams.symbologyState?.method ?? 'color';
setSelectedValue(value);
setSelectedMethod(method);
@@ -215,23 +159,6 @@ const Graduated = ({
cancel();
};
- const addStopRow = () => {
- setStopRows([
- {
- stop: 0,
- output: [0, 0, 0, 1]
- },
- ...stopRows
- ]);
- };
-
- const deleteStopRow = (index: number) => {
- const newFilters = [...stopRows];
- newFilters.splice(index, 1);
-
- setStopRows(newFilters);
- };
-
const buildColorInfoFromClassification = (
selectedMode: string,
numberOfShades: string,
@@ -245,7 +172,7 @@ const Graduated = ({
let stops;
- const values = featureProperties[selectedValue];
+ const values = Array.from(featureProps[selectedValue]);
switch (selectedMode) {
case 'quantile':
@@ -283,42 +210,29 @@ const Graduated = ({
return;
}
- const colorMap = colormap({
- colormap: selectedRamp,
- nshades: +numberOfShades,
- format: 'rgba'
- });
-
- const valueColorPairs: IStopRow[] = [];
-
- for (let i = 0; i < +numberOfShades; i++) {
- valueColorPairs.push({ stop: stops[i], output: colorMap[i] });
+ let stopOutputPairs = [];
+ if (selectedMethod === 'radius') {
+ for (let i = 0; i < +numberOfShades; i++) {
+ stopOutputPairs.push({ stop: stops[i], output: stops[i] });
+ }
+ } else {
+ stopOutputPairs = Utils.getValueColorPairs(
+ stops,
+ selectedRamp,
+ +numberOfShades
+ );
}
- setStopRows(valueColorPairs);
+ setStopRows(stopOutputPairs);
};
return (
-
-
-
-
+
+
-
-
- Value
- Output Value
-
- {stopRows.map((stop, index) => (
-
deleteStopRow(index)}
- useNumber={selectedMethod === 'radius' ? true : false}
- />
- ))}
-
-
-
-
);
};
diff --git a/packages/base/src/dialogs/components/symbology/SimpleSymbol.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/SimpleSymbol.tsx
similarity index 99%
rename from packages/base/src/dialogs/components/symbology/SimpleSymbol.tsx
rename to packages/base/src/dialogs/symbology/vector_layer/types/SimpleSymbol.tsx
index b89cfbf4..25b09aaf 100644
--- a/packages/base/src/dialogs/components/symbology/SimpleSymbol.tsx
+++ b/packages/base/src/dialogs/symbology/vector_layer/types/SimpleSymbol.tsx
@@ -1,6 +1,6 @@
import { FlatStyle } from 'ol/style/flat';
import React, { useEffect, useRef, useState } from 'react';
-import { IParsedStyle, parseColor } from '../../../tools';
+import { IParsedStyle, parseColor } from '../../../../tools';
import { ISymbologyDialogProps } from '../../symbologyDialog';
const SimpleSymbol = ({