Wps value range

CHANGES.md

@@ -2,7 +2,7 @@
 
 #### next release (8.7.2)
 
-- [The next improvement]
+- Add NumberParameterEditor to enable WPS AllowedValues Ranges to be set and use DefaultValue
 
 #### 8.7.1 - 2024-04-16
 

lib/Models/Catalog/Ows/WebProcessingServiceCatalogFunction.ts

@@ -43,10 +43,18 @@ import RegionTypeParameter from "../../FunctionParameters/RegionTypeParameter";
 import StringParameter from "../../FunctionParameters/StringParameter";
 import proxyCatalogItemUrl from "../proxyCatalogItemUrl";
 import { ModelConstructorParameters } from "../../Definition/Model";
+
 import WebProcessingServiceCatalogFunctionJob from "./WebProcessingServiceCatalogFunctionJob";
+import NumberParameter from "../../FunctionParameters/NumberParameter";
 
 type AllowedValues = {
   Value?: string | string[];
+  Range?: Range;
+};
+
+type Range = {
+  MaximumValue?: number;
+  MinimumValue?: number;
 };
 
 type LiteralDataType = {
@@ -57,6 +65,7 @@ type LiteralData = {
   AllowedValues?: AllowedValues;
   AllowedValue?: AllowedValues;
   AnyValue?: unknown;
+  DefaultValue?: unknown;
   DataType?: LiteralDataType | string;
   dataType?: string;
 };
@@ -364,6 +373,7 @@ const LiteralDataConverter = {
 
     const allowedValues =
       input.LiteralData.AllowedValues || input.LiteralData.AllowedValue;
+
     if (isDefined(allowedValues) && isDefined(allowedValues.Value)) {
       return new EnumerationParameter(catalogFunction, {
         ...options,
@@ -375,6 +385,20 @@ const LiteralDataConverter = {
           return { id };
         })
       });
+    } else if (isDefined(allowedValues) && isDefined(allowedValues.Range)) {
+      const np = new NumberParameter(catalogFunction, {
+        ...options
+      });
+
+      np.minimum = isDefined(allowedValues.Range.MinimumValue)
+        ? allowedValues.Range.MinimumValue
+        : np.minimum;
+      np.maximum = allowedValues.Range.MaximumValue;
+      np.defaultValue = isDefined(input.LiteralData.DefaultValue)
+        ? (input.LiteralData.DefaultValue as number)
+        : np.minimum;
+
+      return np;
     } else if (isDefined(input.LiteralData.AnyValue)) {
       let dtype: string | null = null;
       if (isDefined(input.LiteralData["dataType"])) {
@@ -411,6 +435,7 @@ const LiteralDataConverter = {
         dt.variant = "literal";
         return dt;
       }
+
       // Assume its a string, if no literal datatype given
       return new StringParameter(catalogFunction, {
         ...options

lib/Models/FunctionParameters/NumberParameter.ts

@@ -0,0 +1,76 @@
+import { computed, makeObservable, override } from "mobx";
+import FunctionParameter, {
+  Options as FunctionParameterOptions
+} from "./FunctionParameter";
+import CatalogFunctionMixin from "../../ModelMixins/CatalogFunctionMixin";
+
+interface Options extends FunctionParameterOptions {
+  minimum?: number;
+  maximum?: number;
+  defaultValue?: number;
+}
+
+export default class NumberParameter
+  extends FunctionParameter<number>
+  implements Options
+{
+  static readonly type = "number";
+  readonly type = "number";
+  minimum?: number;
+  maximum?: number;
+  defaultValue?: number;
+
+  @computed
+  get rangeDescription() {
+    if (this.minimum !== undefined && this.maximum !== undefined) {
+      return `: must be between ${this.minimum} to ${this.maximum}`;
+    } else if (this.minimum !== undefined) {
+      return `: at least ${this.minimum}`;
+    } else if (this.maximum !== undefined) {
+      return `: at most ${this.maximum}`;
+    } else {
+      return "";
+    }
+  }
+
+  @override get value(): number | undefined {
+    return super.value ?? this.defaultValue;
+  }
+
+  @override
+  get isValid(): boolean {
+    return super.value === undefined
+      ? this.isValidRange
+      : this.isValidRange && super.isValid;
+  }
+
+  get isValidRange(): boolean {
+    let value =
+      this.value !== undefined ? this.value : (this.defaultValue as number);
+
+    if (typeof value === "string") {
+      value = parseFloat(value);
+    }
+
+    if (this.minimum !== undefined && value < this.minimum) {
+      return false;
+    }
+
+    if (this.maximum !== undefined && value > this.maximum) {
+      return false;
+    }
+
+    return true;
+  }
+
+  constructor(
+    catalogFunction: CatalogFunctionMixin.Instance,
+    options: Options
+  ) {
+    super(catalogFunction, options);
+    makeObservable(this);
+    this.minimum = options.minimum;
+    this.maximum = options.maximum;
+    this.defaultValue = options.defaultValue;
+  }
+}

lib/Models/FunctionParameters/createParameterFromType.js

@@ -10,12 +10,14 @@ var PolygonParameter = require("./PolygonParameter");
 var DateTimeParameter = require("./DateTimeParameter");
 var EnumerationParameter = require("./EnumerationParameter");
 var StringParameter = require("./StringParameter");
+var NumberParameter = require("./NumberParameter");
 var PointParameter = require("./PointParameter");
 var BooleanParameter = require("./BooleanParameter");
 var BooleanParameterGroup = require("./BooleanParameterGroup");
 
 var mapping = {
   [StringParameter.prototype.type]: StringParameter,
+  [NumberParameter.prototype.type]: NumberParameter,
   [EnumerationParameter.prototype.type]: EnumerationParameter,
   [BooleanParameter.prototype.type]: BooleanParameter,
   [BooleanParameterGroup.prototype.type]: BooleanParameterGroup,

lib/ReactViews/Analytics/NumberParameterEditor.tsx

@@ -0,0 +1,39 @@
+import React, { ChangeEvent, useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import CommonStrata from "../../Models/Definition/CommonStrata";
+import NumberParameter from "../../Models/FunctionParameters/NumberParameter";
+
+import Styles from "./parameter-editors.scss";
+
+const NumberParameterEditor: React.FC<{ parameter: NumberParameter }> = ({
+  parameter
+}) => {
+  const [value, setValue] = useState<number | undefined>(0);
+
+  useEffect(() => {
+    if (parameter.defaultValue !== undefined) {
+      setValue(parameter.defaultValue);
+    }
+  }, [parameter.defaultValue]);
+
+  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(parseFloat(e.target.value));
+    parameter.setValue(CommonStrata.user, parseFloat(e.target.value));
+  };
+
+  const min = (parameter.minimum || "") as string;
+  const max = (parameter.maximum || "") as string;
+
+  return (
+    <input
+      className={Styles.field}
+      type="number"
+      onChange={onChange}
+      value={value}
+      min={min}
+      max={max}
+    />
+  );
+};
+
+export default observer(NumberParameterEditor);

lib/ReactViews/Analytics/ParameterEditor.jsx

@@ -17,6 +17,7 @@ import DateParameterEditor from "./DateParameterEditor";
 import DateTimeParameterEditor from "./DateTimeParameterEditor";
 import EnumerationParameterEditor from "./EnumerationParameterEditor";
 import GenericParameterEditor from "./GenericParameterEditor";
+import NumberParameterEditor from "./NumberParameterEditor";
 import GeoJsonParameterEditor from "./GeoJsonParameterEditor";
 import defined from "terriajs-cesium/Source/Core/defined";
 
@@ -49,11 +50,18 @@ const ParameterEditor = createReactClass({
           {this.props.parameter.isRequired && <span> (required)</span>}
         </label>
         {typeof this.props.parameter.description === "string" &&
-        this.props.parameter.description !== ""
-          ? parseCustomMarkdownToReact(this.props.parameter.description, {
+        this.props.parameter.description !== "" &&
+        typeof this.props.parameter.rangeDescription === "string" &&
+        this.props.parameter.rangeDescription !== ""
+          ? parseCustomMarkdownToReact(
+              `${this.props.parameter.description} ${this.props.parameter.rangeDescription}`,
+              {
+                parameter: this.props.parameter
+              }
+            )
+          : parseCustomMarkdownToReact(this.props.parameter.description, {
               parameter: this.props.parameter
-            })
-          : ""}
+            })}
       </div>
     );
   },
@@ -222,6 +230,7 @@ ParameterEditor.parameterTypeConverters = [
               previewed={parameterEditor.props.previewed}
               parameter={parameterEditor.props.parameter}
               parameterViewModel={parameterEditor.props.parameterViewModel}
+              terria={parameterEditor.props.viewState.terria}
             />
           </div>
         );
@@ -370,6 +379,23 @@ ParameterEditor.parameterTypeConverters = [
         );
       }
     }
+  },
+  {
+    id: "number",
+    parameterTypeToDiv: function NumberParameterToDiv(type, parameterEditor) {
+      if (type === this.id) {
+        return (
+          <div>
+            {parameterEditor.renderLabel()}
+            <NumberParameterEditor
+              previewed={parameterEditor.props.previewed}
+              parameter={parameterEditor.props.parameter}
+              parameterViewModel={parameterEditor.props.parameterViewModel}
+            />
+          </div>
+        );
+      }
+    }
   }
 ];
 

lib/ReactViews/Analytics/invoke-function.scss

@@ -1,6 +1,5 @@
 @import "~terriajs-variables";
 @import "../../Sass/common/mixins";
-@import "../../Sass/common/_buttons.scss";
 
 .invoke-function {
   padding: $padding-small;

lib/ReactViews/Analytics/invoke-function.scss.d.ts

@@ -1,61 +1,12 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  '_buttons__btn-primary': string;
   'btn': string;
-  'btn--add-to-map': string;
-  'btn--catalog': string;
-  'btn--catalog-item': string;
-  'btn--close-modal': string;
-  'btn--group-indicator': string;
-  'btn--loading-on-map': string;
-  'btn--map': string;
-  'btn--radio': string;
-  'btn--remove-from-map': string;
-  'btn--search-clear': string;
-  'btn--secondary': string;
-  'btn--small': string;
-  'btn--tab': string;
-  'btn--tertiary': string;
-  'btn--tertiary-dark': string;
-  'btn-grey': string;
-  'btn-large': string;
-  'btn-primary': string;
-  'btn-primary--hover': string;
-  'btn-small': string;
-  'btn-transparent': string;
-  'btnAddToMap': string;
-  'btnCatalog': string;
-  'btnCatalogItem': string;
-  'btnCloseModal': string;
-  'btnGrey': string;
-  'btnGroupIndicator': string;
-  'btnLarge': string;
-  'btnLoadingOnMap': string;
-  'btnMap': string;
-  'btnPrimary': string;
-  'btnPrimaryHover': string;
-  'btnRadio': string;
-  'btnRemoveFromMap': string;
-  'btnSearchClear': string;
-  'btnSecondary': string;
-  'btnSmall': string;
-  'btnTab': string;
-  'btnTertiary': string;
-  'btnTertiaryDark': string;
-  'btnTransparent': string;
-  'buttonsBtnPrimary': string;
   'content': string;
   'description': string;
   'footer': string;
   'invoke-function': string;
   'invokeFunction': string;
-  'is-active': string;
-  'is-open': string;
-  'is-previewed': string;
-  'isActive': string;
-  'isOpen': string;
-  'isPreviewed': string;
 }
 declare var cssExports: CssExports;
 export = cssExports;