openlayers-style-editor 0.2.4 → 1.0.0

package/README.md

@@ -60,6 +60,10 @@ A detailed explanation of each mode can be found [here](https://resources.arcgis
 
 - **Based on Rules:** Allows the user to change the layer's color, opacity, and stroke based on rules defined by the user. Each rule is composed by a name, a filter, and a renderer. The filter is a logical expression that defines which features will be styled with the renderer of the rule.
 
+## License
+
+This project is licensed under the MIT License.
+
 ## Installation
 
 Depending on the installed package provider, this package can be installed with one of the following commands.

package/dist/components/basedOnRules.d.ts

@@ -6,6 +6,7 @@ export interface FilterRule {
     isElse: boolean;
     symbol: Render;
     isAll?: boolean;
+    friendlyExpression?: string;
 }
 interface Props {
     setVisible: (e: boolean) => void;

package/dist/index.cjs

@@ -105,7 +105,7 @@
 		return GraduatedModes;
 	}({});
 	function getCategorizedStyle(attribute, colors, outlineColor, outlineWidth, defaultColor) {
-		let outlineColorCopy = outlineColor ? outlineColor : void 0;
+		let outlineColorCopy = outlineColor ? [...outlineColor] : void 0;
 		if (outlineWidth == 0 && outlineColorCopy != void 0) outlineColorCopy[3] = 0;
 		else if (outlineWidth != void 0 && outlineWidth > 0 && outlineColorCopy) outlineColorCopy[3] = 1;
 		let aux = [];
@@ -141,7 +141,7 @@
 		};
 	}
 	function singleColorStyle(color, outlineColor, outlineWidth) {
-		let outlineColorCopy = outlineColor ? outlineColor : void 0;
+		let outlineColorCopy = outlineColor ? [...outlineColor] : void 0;
 		if (outlineWidth == 0 && outlineColorCopy != void 0) outlineColorCopy[3] = 0;
 		else if (outlineWidth != void 0 && outlineWidth > 0 && outlineColorCopy) outlineColorCopy[3] = 1;
 		return {
@@ -177,7 +177,7 @@
 		};
 	}
 	function getGraduatedStyle(attribute, ramp, outlineColor, outlineWidth) {
-		let outlineColorCopy = outlineColor ? outlineColor : void 0;
+		let outlineColorCopy = outlineColor ? [...outlineColor] : void 0;
 		if (outlineWidth == 0 && outlineColorCopy != void 0) outlineColorCopy[3] = 0;
 		else if (outlineWidth != void 0 && outlineWidth > 0 && outlineColorCopy) outlineColorCopy[3] = 1;
 		let aux = [];
@@ -188,7 +188,7 @@
 			aux.push(stop.value);
 			aux.push(stop.color);
 		});
-		const res = {
+		return {
 			"stroke-color": [
 				"case",
 				[
@@ -211,8 +211,6 @@
 			],
 			"fill-color": aux
 		};
-		console.log(res);
-		return res;
 	}
 	function getRendererOpacity(renderer) {
 		if (renderer.type == RenderType.Unique) return renderer.rendererOL["fill-color"][3] * 100;
@@ -306,18 +304,27 @@
 		return (0, ol_color_js.fromString)("#" + (16777216 + Math.random() * 16777215).toString(16).substr(1, 6));
 	}
 	function getByRulesStyle(filters, idFieldName, elseFilter) {
-		if (filters.length === 0) if (elseFilter) {
+		console.log(filters);
+		if (filters.length === 0 || filters.filter((f) => f.ids.length > 0).length == 0) if (elseFilter) {
 			let fillColor = getStyleColorsAndValues(elseFilter.symbol.rendererOL, RenderType.Unique)[0].color;
 			let stroke = getRendererColorAndSizeStroke(elseFilter.symbol);
 			return {
 				"stroke-color": Object.values(stroke.color),
 				"stroke-width": stroke.size,
-				"fill-color": fillColor
+				"fill-color": fillColor,
+				"_rules": filters.map((f) => ({
+					expression: f.filter.friendlyExpression,
+					render: f.filter.symbol
+				}))
 			};
 		} else return {
 			"stroke-color": (0, ol_color_js.fromString)("#000000"),
 			"stroke-width": 1,
-			"fill-color": (0, ol_color_js.fromString)("#ffffff")
+			"fill-color": (0, ol_color_js.fromString)("#ffffff"),
+			"_rules": filters.map((f) => ({
+				expression: f.filter.friendlyExpression,
+				render: f.filter.symbol
+			}))
 		};
 		let fillColorArray = ["case"];
 		let strokeColorArray = ["case"];
@@ -350,11 +357,17 @@
 			strokeColorArray.push((0, ol_color_js.fromString)("#000000"));
 			strokeWidthArray.push(1);
 		}
-		return {
+		const res = {
 			"stroke-color": strokeColorArray,
 			"stroke-width": strokeWidthArray,
-			"fill-color": fillColorArray
+			"fill-color": fillColorArray,
+			"_rules": filters.map((f) => ({
+				expression: f.filter.friendlyExpression,
+				render: f.filter.symbol
+			}))
 		};
+		console.log(res);
+		return res;
 	}
 	//#endregion
 	//#region src/components/uniqueSymbol.tsx
@@ -366,19 +379,34 @@
 		const strokeWidthLabel = t("categorized.stroke_width");
 		const concludeLabel = t("common.conclude");
 		const start = "#18d7ba";
-		const currentStyle = layerCurrentRenderer.field ? null : layerCurrentRenderer.rendererOL;
-		const [color, setColor] = (0, react.useState)(currentStyle ? currentStyle["fill-color"] : (0, ol_color_js.fromString)(start));
-		let auxBorder;
-		if (currentStyle) if (currentStyle["stroke-color"]) if (currentStyle["stroke-color"][0] == "case") auxBorder = currentStyle["stroke-color"][3];
-		else auxBorder = currentStyle["stroke-color"];
-		else auxBorder = (0, ol_color_js.fromString)("#000000");
-		else auxBorder = (0, ol_color_js.fromString)("#000000");
-		const [borderColor, setBorderColor] = (0, react.useState)(auxBorder);
-		let auxBorderWidth;
-		if (currentStyle) if (currentStyle["stroke-width"] instanceof Array) auxBorderWidth = currentStyle["stroke-width"][3];
-		else auxBorderWidth = currentStyle["stroke-width"];
-		else auxBorderWidth = 0;
-		const [borderThickness, setBorderThickness] = (0, react.useState)(auxBorderWidth);
+		const getStatesFromRenderer = (renderer) => {
+			const currentStyle = renderer.field ? null : renderer.rendererOL;
+			const color = currentStyle && currentStyle["fill-color"] ? currentStyle["fill-color"] : (0, ol_color_js.fromString)(start);
+			let auxBorder;
+			if (currentStyle) if (currentStyle["stroke-color"]) if (currentStyle["stroke-color"][0] == "case") auxBorder = currentStyle["stroke-color"][3];
+			else auxBorder = currentStyle["stroke-color"];
+			else auxBorder = (0, ol_color_js.fromString)("#000000");
+			else auxBorder = (0, ol_color_js.fromString)("#000000");
+			let auxBorderWidth;
+			if (currentStyle) if (currentStyle["stroke-width"] instanceof Array) auxBorderWidth = currentStyle["stroke-width"][3];
+			else auxBorderWidth = currentStyle["stroke-width"];
+			else auxBorderWidth = 0;
+			return {
+				color,
+				auxBorder,
+				auxBorderWidth
+			};
+		};
+		const initialStates = getStatesFromRenderer(layerCurrentRenderer);
+		const [color, setColor] = (0, react.useState)(initialStates.color);
+		const [borderColor, setBorderColor] = (0, react.useState)(initialStates.auxBorder);
+		const [borderThickness, setBorderThickness] = (0, react.useState)(initialStates.auxBorderWidth);
+		(0, react.useEffect)(() => {
+			const states = getStatesFromRenderer(layerCurrentRenderer);
+			setColor(states.color);
+			setBorderColor(states.auxBorder);
+			setBorderThickness(states.auxBorderWidth);
+		}, [layerCurrentRenderer]);
 		function createRenderUnique(color, outlineColor, outlineWidth) {
 			return singleColorStyle(color, outlineColor, outlineWidth);
 		}
@@ -1328,7 +1356,7 @@
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(primereact_dropdown_dropdown_esm_js.Dropdown, {
 					value: selectedAttr,
 					onChange: (e) => changeAttribute(e),
-					options: attr,
+					options: attr.filter((a) => a.values && a.values.length > 0 && a.values.length < 200),
 					optionLabel: "name",
 					itemTemplate: (option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
 						option.name,
@@ -1436,6 +1464,7 @@
 						value: table,
 						selectionMode: rowClick ? null : "checkbox",
 						tableStyle: { minWidth: "25rem" },
+						dataKey: "value",
 						selection: table.filter((tr) => tr.visible),
 						onSelectionChange: (event) => {
 							const value = event.value;
@@ -1696,7 +1725,6 @@
 				}
 				case GraduatedModes.DefinedInterval: {
 					const interval = range / intervalSize;
-					console.log("interval", interval, intervalSize);
 					for (let i = 0; i <= interval; i++) stops.push({
 						value: min + intervalSize * i,
 						color: (0, ol_color_js.fromString)("rgb(0,0,0)")
@@ -1865,6 +1893,10 @@
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("b", { children: [classesNumberLabel, ":"] })
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(primereact_inputnumber_inputnumber_esm_js.InputNumber, {
 							value: classNo,
+							min: 0,
+							max: 50,
+							inputMode: "numeric",
+							maxFractionDigits: 0,
 							locale,
 							onChange: async (e) => {
 								setClassNo(e.value);
@@ -1947,15 +1979,17 @@
 											placeholder: valueLabel,
 											allowEmpty: false,
 											locale,
+											inputMode: "numeric",
 											min: stops[0].value,
-											max: index < stops.length - 1 ? stops[index + 1]?.value - .001 : stops[stops.length]?.value,
+											maxFractionDigits: 3,
+											max: stops[stops.length - 1].value,
 											disabled: index === 0 || selectedMode != GraduatedModes.Manual || index === stops.length - 1,
 											onChange: (e) => {
 												const aux = [...stops];
 												aux[index].value = e.value;
 												setStops(aux);
 											},
-											value: value.value
+											value: stops[index].value
 										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MyColorPicker, {
 											color: value.color,
 											onChange: (e) => {
@@ -2311,6 +2345,7 @@
 					selectedAttribute?.type != AttributeTypeEnum.BOOLEAN && selectedFunction?.name != t("filters.is_null") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(primereact_dropdown_dropdown_esm_js.Dropdown, {
 						value: selectedValue,
 						editable: true,
+						maxLength: 150,
 						onChange: (e) => {
 							setSelectedValue(e.value);
 							update(void 0, e.value, void 0);
@@ -2743,6 +2778,7 @@
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(primereact_inputtext_inputtext_esm_js.InputText, {
 								id: "title",
 								value: queryWidget.title,
+								maxLength: 100,
 								onChange: (e) => setTitle(e.target.value)
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 								htmlFor: "title",
@@ -2860,40 +2896,41 @@
 			{
 				field: "filterJson",
 				header: expressionLabel,
-				body: (data) => {
-					if (!data.filterJson) return "";
-					try {
-						const parsed = JSON.parse(data.filterJson);
-						const formatCondition = (cond) => {
-							const operator = Object.keys(cond)[0];
-							const value = cond[operator];
-							if (operator === "!" && value.hasOwnProperty("in")) {
-								const innerCondition = value["in"];
-								return `${innerCondition[1].var} not in ${JSON.stringify(innerCondition[0])}`;
-							}
-							if (operator === "==" && Array.isArray(value) && value[0] && value[0].hasOwnProperty("substr")) {
-								const substr = value[0].substr;
-								const valueString = value[1];
-								return `${substr[0].var} ${substr[1] < 0 ? "endsWith" : "startsWith"} "${valueString}"`;
-							}
-							if (operator === "==" && Array.isArray(value) && value[0] === null) return `${value[1].var} is null`;
-							const max = Array.isArray(value) ? value[0] : null;
-							if (max && max.hasOwnProperty("var")) return `${max.var} ${operator} ${JSON.stringify(value[1])}`;
-							if (Array.isArray(value) && value[1] && value[1].hasOwnProperty("var")) return `${value[1].var} ${operator} ${JSON.stringify(max)}`;
-							return JSON.stringify(cond);
-						};
-						const isAll = parsed.hasOwnProperty("and");
-						const isAny = parsed.hasOwnProperty("or");
-						if (isAll || isAny) {
-							const operator = isAll ? " AND " : " OR ";
-							return parsed[isAll ? "and" : "or"].map(formatCondition).join(operator);
-						} else return formatCondition(parsed);
-					} catch (e) {
-						return data.filterJson;
-					}
-				}
+				body: (data) => getFriendlyExpression(data)
 			}
 		];
+		function getFriendlyExpression(data) {
+			if (!data.filterJson) return "";
+			try {
+				const parsed = JSON.parse(data.filterJson);
+				const formatCondition = (cond) => {
+					const operator = Object.keys(cond)[0];
+					const value = cond[operator];
+					if (operator === "!" && value.hasOwnProperty("in")) {
+						const innerCondition = value["in"];
+						return `${innerCondition[1].var} not in ${JSON.stringify(innerCondition[0])}`;
+					}
+					if (operator === "==" && Array.isArray(value) && value[0] && value[0].hasOwnProperty("substr")) {
+						const substr = value[0].substr;
+						const valueString = value[1];
+						return `${substr[0].var} ${substr[1] < 0 ? "endsWith" : "startsWith"} "${valueString}"`;
+					}
+					if (operator === "==" && Array.isArray(value) && value[0] === null) return `${value[1].var} is null`;
+					const max = Array.isArray(value) ? value[0] : null;
+					if (max && max.hasOwnProperty("var")) return `${max.var} ${operator} ${JSON.stringify(value[1])}`;
+					if (Array.isArray(value) && value[1] && value[1].hasOwnProperty("var")) return `${value[1].var} ${operator} ${JSON.stringify(max)}`;
+					return JSON.stringify(cond);
+				};
+				const isAll = parsed.hasOwnProperty("and");
+				const isAny = parsed.hasOwnProperty("or");
+				if (isAll || isAny) {
+					const operator = isAll ? " AND " : " OR ";
+					return parsed[isAll ? "and" : "or"].map(formatCondition).join(operator);
+				} else return formatCondition(parsed);
+			} catch (e) {
+				return data.filterJson;
+			}
+		}
 		function addFilter(filter) {
 			setRules([...rules, filter]);
 		}
@@ -3006,11 +3043,18 @@
 									ids: res
 								});
 							});
+							const completedFilters = appliedFilters.map((r) => ({
+								ids: [...r.ids],
+								filter: {
+									...r.filter,
+									friendlyExpression: getFriendlyExpression(r.filter)
+								}
+							}));
 							applyRenderer({
 								type: RenderType.ByRules,
 								field: selectedAttribute.name,
 								filters: rules,
-								rendererOL: getByRulesStyle(appliedFilters, selectedAttribute.name, rules.find((r) => r.isElse))
+								rendererOL: getByRulesStyle(completedFilters, selectedAttribute.name, rules.find((r) => r.isElse))
 							});
 							setVisible(false);
 						}

package/dist/index.js

@@ -73,7 +73,7 @@ var GraduatedModes = /* @__PURE__ */ function(GraduatedModes) {
 	return GraduatedModes;
 }({});
 function getCategorizedStyle(attribute, colors, outlineColor, outlineWidth, defaultColor) {
-	let outlineColorCopy = outlineColor ? outlineColor : void 0;
+	let outlineColorCopy = outlineColor ? [...outlineColor] : void 0;
 	if (outlineWidth == 0 && outlineColorCopy != void 0) outlineColorCopy[3] = 0;
 	else if (outlineWidth != void 0 && outlineWidth > 0 && outlineColorCopy) outlineColorCopy[3] = 1;
 	let aux = [];
@@ -109,7 +109,7 @@ function getCategorizedStyle(attribute, colors, outlineColor, outlineWidth, defa
 	};
 }
 function singleColorStyle(color, outlineColor, outlineWidth) {
-	let outlineColorCopy = outlineColor ? outlineColor : void 0;
+	let outlineColorCopy = outlineColor ? [...outlineColor] : void 0;
 	if (outlineWidth == 0 && outlineColorCopy != void 0) outlineColorCopy[3] = 0;
 	else if (outlineWidth != void 0 && outlineWidth > 0 && outlineColorCopy) outlineColorCopy[3] = 1;
 	return {
@@ -145,7 +145,7 @@ function singleColorStyleForLines(color) {
 	};
 }
 function getGraduatedStyle(attribute, ramp, outlineColor, outlineWidth) {
-	let outlineColorCopy = outlineColor ? outlineColor : void 0;
+	let outlineColorCopy = outlineColor ? [...outlineColor] : void 0;
 	if (outlineWidth == 0 && outlineColorCopy != void 0) outlineColorCopy[3] = 0;
 	else if (outlineWidth != void 0 && outlineWidth > 0 && outlineColorCopy) outlineColorCopy[3] = 1;
 	let aux = [];
@@ -156,7 +156,7 @@ function getGraduatedStyle(attribute, ramp, outlineColor, outlineWidth) {
 		aux.push(stop.value);
 		aux.push(stop.color);
 	});
-	const res = {
+	return {
 		"stroke-color": [
 			"case",
 			[
@@ -179,8 +179,6 @@ function getGraduatedStyle(attribute, ramp, outlineColor, outlineWidth) {
 		],
 		"fill-color": aux
 	};
-	console.log(res);
-	return res;
 }
 function getRendererOpacity(renderer) {
 	if (renderer.type == RenderType.Unique) return renderer.rendererOL["fill-color"][3] * 100;
@@ -274,18 +272,27 @@ function generateRandomColor() {
 	return fromString("#" + (16777216 + Math.random() * 16777215).toString(16).substr(1, 6));
 }
 function getByRulesStyle(filters, idFieldName, elseFilter) {
-	if (filters.length === 0) if (elseFilter) {
+	console.log(filters);
+	if (filters.length === 0 || filters.filter((f) => f.ids.length > 0).length == 0) if (elseFilter) {
 		let fillColor = getStyleColorsAndValues(elseFilter.symbol.rendererOL, RenderType.Unique)[0].color;
 		let stroke = getRendererColorAndSizeStroke(elseFilter.symbol);
 		return {
 			"stroke-color": Object.values(stroke.color),
 			"stroke-width": stroke.size,
-			"fill-color": fillColor
+			"fill-color": fillColor,
+			"_rules": filters.map((f) => ({
+				expression: f.filter.friendlyExpression,
+				render: f.filter.symbol
+			}))
 		};
 	} else return {
 		"stroke-color": fromString("#000000"),
 		"stroke-width": 1,
-		"fill-color": fromString("#ffffff")
+		"fill-color": fromString("#ffffff"),
+		"_rules": filters.map((f) => ({
+			expression: f.filter.friendlyExpression,
+			render: f.filter.symbol
+		}))
 	};
 	let fillColorArray = ["case"];
 	let strokeColorArray = ["case"];
@@ -318,11 +325,17 @@ function getByRulesStyle(filters, idFieldName, elseFilter) {
 		strokeColorArray.push(fromString("#000000"));
 		strokeWidthArray.push(1);
 	}
-	return {
+	const res = {
 		"stroke-color": strokeColorArray,
 		"stroke-width": strokeWidthArray,
-		"fill-color": fillColorArray
+		"fill-color": fillColorArray,
+		"_rules": filters.map((f) => ({
+			expression: f.filter.friendlyExpression,
+			render: f.filter.symbol
+		}))
 	};
+	console.log(res);
+	return res;
 }
 //#endregion
 //#region src/components/uniqueSymbol.tsx
@@ -334,19 +347,34 @@ var UniqueSymbol = (props) => {
 	const strokeWidthLabel = t("categorized.stroke_width");
 	const concludeLabel = t("common.conclude");
 	const start = "#18d7ba";
-	const currentStyle = layerCurrentRenderer.field ? null : layerCurrentRenderer.rendererOL;
-	const [color, setColor] = useState(currentStyle ? currentStyle["fill-color"] : fromString(start));
-	let auxBorder;
-	if (currentStyle) if (currentStyle["stroke-color"]) if (currentStyle["stroke-color"][0] == "case") auxBorder = currentStyle["stroke-color"][3];
-	else auxBorder = currentStyle["stroke-color"];
-	else auxBorder = fromString("#000000");
-	else auxBorder = fromString("#000000");
-	const [borderColor, setBorderColor] = useState(auxBorder);
-	let auxBorderWidth;
-	if (currentStyle) if (currentStyle["stroke-width"] instanceof Array) auxBorderWidth = currentStyle["stroke-width"][3];
-	else auxBorderWidth = currentStyle["stroke-width"];
-	else auxBorderWidth = 0;
-	const [borderThickness, setBorderThickness] = useState(auxBorderWidth);
+	const getStatesFromRenderer = (renderer) => {
+		const currentStyle = renderer.field ? null : renderer.rendererOL;
+		const color = currentStyle && currentStyle["fill-color"] ? currentStyle["fill-color"] : fromString(start);
+		let auxBorder;
+		if (currentStyle) if (currentStyle["stroke-color"]) if (currentStyle["stroke-color"][0] == "case") auxBorder = currentStyle["stroke-color"][3];
+		else auxBorder = currentStyle["stroke-color"];
+		else auxBorder = fromString("#000000");
+		else auxBorder = fromString("#000000");
+		let auxBorderWidth;
+		if (currentStyle) if (currentStyle["stroke-width"] instanceof Array) auxBorderWidth = currentStyle["stroke-width"][3];
+		else auxBorderWidth = currentStyle["stroke-width"];
+		else auxBorderWidth = 0;
+		return {
+			color,
+			auxBorder,
+			auxBorderWidth
+		};
+	};
+	const initialStates = getStatesFromRenderer(layerCurrentRenderer);
+	const [color, setColor] = useState(initialStates.color);
+	const [borderColor, setBorderColor] = useState(initialStates.auxBorder);
+	const [borderThickness, setBorderThickness] = useState(initialStates.auxBorderWidth);
+	useEffect(() => {
+		const states = getStatesFromRenderer(layerCurrentRenderer);
+		setColor(states.color);
+		setBorderColor(states.auxBorder);
+		setBorderThickness(states.auxBorderWidth);
+	}, [layerCurrentRenderer]);
 	function createRenderUnique(color, outlineColor, outlineWidth) {
 		return singleColorStyle(color, outlineColor, outlineWidth);
 	}
@@ -1296,7 +1324,7 @@ var Categorized = (props) => {
 			}), /* @__PURE__ */ jsx(Dropdown, {
 				value: selectedAttr,
 				onChange: (e) => changeAttribute(e),
-				options: attr,
+				options: attr.filter((a) => a.values && a.values.length > 0 && a.values.length < 200),
 				optionLabel: "name",
 				itemTemplate: (option) => /* @__PURE__ */ jsxs("span", { children: [
 					option.name,
@@ -1404,6 +1432,7 @@ var Categorized = (props) => {
 					value: table,
 					selectionMode: rowClick ? null : "checkbox",
 					tableStyle: { minWidth: "25rem" },
+					dataKey: "value",
 					selection: table.filter((tr) => tr.visible),
 					onSelectionChange: (event) => {
 						const value = event.value;
@@ -1664,7 +1693,6 @@ var Graduated = (props) => {
 			}
 			case GraduatedModes.DefinedInterval: {
 				const interval = range / intervalSize;
-				console.log("interval", interval, intervalSize);
 				for (let i = 0; i <= interval; i++) stops.push({
 					value: min + intervalSize * i,
 					color: fromString("rgb(0,0,0)")
@@ -1833,6 +1861,10 @@ var Graduated = (props) => {
 						children: /* @__PURE__ */ jsxs("b", { children: [classesNumberLabel, ":"] })
 					}), /* @__PURE__ */ jsx(InputNumber, {
 						value: classNo,
+						min: 0,
+						max: 50,
+						inputMode: "numeric",
+						maxFractionDigits: 0,
 						locale,
 						onChange: async (e) => {
 							setClassNo(e.value);
@@ -1915,15 +1947,17 @@ var Graduated = (props) => {
 										placeholder: valueLabel,
 										allowEmpty: false,
 										locale,
+										inputMode: "numeric",
 										min: stops[0].value,
-										max: index < stops.length - 1 ? stops[index + 1]?.value - .001 : stops[stops.length]?.value,
+										maxFractionDigits: 3,
+										max: stops[stops.length - 1].value,
 										disabled: index === 0 || selectedMode != GraduatedModes.Manual || index === stops.length - 1,
 										onChange: (e) => {
 											const aux = [...stops];
 											aux[index].value = e.value;
 											setStops(aux);
 										},
-										value: value.value
+										value: stops[index].value
 									}), /* @__PURE__ */ jsx(MyColorPicker, {
 										color: value.color,
 										onChange: (e) => {
@@ -2279,6 +2313,7 @@ var ConditionOnFilter = (props) => {
 				selectedAttribute?.type != AttributeTypeEnum.BOOLEAN && selectedFunction?.name != t("filters.is_null") && /* @__PURE__ */ jsx(Dropdown, {
 					value: selectedValue,
 					editable: true,
+					maxLength: 150,
 					onChange: (e) => {
 						setSelectedValue(e.value);
 						update(void 0, e.value, void 0);
@@ -2711,6 +2746,7 @@ var FilterWidget = (props) => {
 						children: [/* @__PURE__ */ jsx(InputText, {
 							id: "title",
 							value: queryWidget.title,
+							maxLength: 100,
 							onChange: (e) => setTitle(e.target.value)
 						}), /* @__PURE__ */ jsx("label", {
 							htmlFor: "title",
@@ -2828,40 +2864,41 @@ function BasedOnRules(props) {
 		{
 			field: "filterJson",
 			header: expressionLabel,
-			body: (data) => {
-				if (!data.filterJson) return "";
-				try {
-					const parsed = JSON.parse(data.filterJson);
-					const formatCondition = (cond) => {
-						const operator = Object.keys(cond)[0];
-						const value = cond[operator];
-						if (operator === "!" && value.hasOwnProperty("in")) {
-							const innerCondition = value["in"];
-							return `${innerCondition[1].var} not in ${JSON.stringify(innerCondition[0])}`;
-						}
-						if (operator === "==" && Array.isArray(value) && value[0] && value[0].hasOwnProperty("substr")) {
-							const substr = value[0].substr;
-							const valueString = value[1];
-							return `${substr[0].var} ${substr[1] < 0 ? "endsWith" : "startsWith"} "${valueString}"`;
-						}
-						if (operator === "==" && Array.isArray(value) && value[0] === null) return `${value[1].var} is null`;
-						const max = Array.isArray(value) ? value[0] : null;
-						if (max && max.hasOwnProperty("var")) return `${max.var} ${operator} ${JSON.stringify(value[1])}`;
-						if (Array.isArray(value) && value[1] && value[1].hasOwnProperty("var")) return `${value[1].var} ${operator} ${JSON.stringify(max)}`;
-						return JSON.stringify(cond);
-					};
-					const isAll = parsed.hasOwnProperty("and");
-					const isAny = parsed.hasOwnProperty("or");
-					if (isAll || isAny) {
-						const operator = isAll ? " AND " : " OR ";
-						return parsed[isAll ? "and" : "or"].map(formatCondition).join(operator);
-					} else return formatCondition(parsed);
-				} catch (e) {
-					return data.filterJson;
-				}
-			}
+			body: (data) => getFriendlyExpression(data)
 		}
 	];
+	function getFriendlyExpression(data) {
+		if (!data.filterJson) return "";
+		try {
+			const parsed = JSON.parse(data.filterJson);
+			const formatCondition = (cond) => {
+				const operator = Object.keys(cond)[0];
+				const value = cond[operator];
+				if (operator === "!" && value.hasOwnProperty("in")) {
+					const innerCondition = value["in"];
+					return `${innerCondition[1].var} not in ${JSON.stringify(innerCondition[0])}`;
+				}
+				if (operator === "==" && Array.isArray(value) && value[0] && value[0].hasOwnProperty("substr")) {
+					const substr = value[0].substr;
+					const valueString = value[1];
+					return `${substr[0].var} ${substr[1] < 0 ? "endsWith" : "startsWith"} "${valueString}"`;
+				}
+				if (operator === "==" && Array.isArray(value) && value[0] === null) return `${value[1].var} is null`;
+				const max = Array.isArray(value) ? value[0] : null;
+				if (max && max.hasOwnProperty("var")) return `${max.var} ${operator} ${JSON.stringify(value[1])}`;
+				if (Array.isArray(value) && value[1] && value[1].hasOwnProperty("var")) return `${value[1].var} ${operator} ${JSON.stringify(max)}`;
+				return JSON.stringify(cond);
+			};
+			const isAll = parsed.hasOwnProperty("and");
+			const isAny = parsed.hasOwnProperty("or");
+			if (isAll || isAny) {
+				const operator = isAll ? " AND " : " OR ";
+				return parsed[isAll ? "and" : "or"].map(formatCondition).join(operator);
+			} else return formatCondition(parsed);
+		} catch (e) {
+			return data.filterJson;
+		}
+	}
 	function addFilter(filter) {
 		setRules([...rules, filter]);
 	}
@@ -2974,11 +3011,18 @@ function BasedOnRules(props) {
 								ids: res
 							});
 						});
+						const completedFilters = appliedFilters.map((r) => ({
+							ids: [...r.ids],
+							filter: {
+								...r.filter,
+								friendlyExpression: getFriendlyExpression(r.filter)
+							}
+						}));
 						applyRenderer({
 							type: RenderType.ByRules,
 							field: selectedAttribute.name,
 							filters: rules,
-							rendererOL: getByRulesStyle(appliedFilters, selectedAttribute.name, rules.find((r) => r.isElse))
+							rendererOL: getByRulesStyle(completedFilters, selectedAttribute.name, rules.find((r) => r.isElse))
 						});
 						setVisible(false);
 					}