WPS: The parameter poly_in is not a supported type of parameter.

[ZoloKiala]

Hello developers,

I have been trying to implement WPS in TerriaJS. When I execute a process, I get the following error: The parameter poly_in is not a supported type of parameter and then the screen goes blank. I don't know what I'm doing wrong. On the server side, everything is fine. Can anyone please assist?

Regards,

Zolo

[niktayv]

Hi @ZoloKiala

Thank you for your interest in Terria and for reporting this issue.
I have some experience working with WPS catalog items in Terria and I would be glad to help.

Can you please provide more details about the error that you are having?
Any of the following pieces of information would help to dig further:

• a sample of your WPS catalog item configuration (with sensitive data stripped off, of course);
• the output in your browser's console related to this error;
• the response information from your browser's Network tab in the Developer Tools.

To learn more about Terria's WPS function parameters, please refer to the following resources:

1. architecture/0004-next-catalog-functions.md
2. WebProcessingServiceCatalogFunction
3. WebProcessingServiceCatalogFunctionJob
4. WebProcessingServiceCatalogGroup

[ZoloKiala]

Thank you @niktayv for your assistance.

The processess that I'm using can be found here: https://github.com/geopython/pywps-flask/tree/master/processes. Only the bboxinout.py process works (although, I can't get any results ouput on the map)

See below the requested info:

• My sample of your WPS catalog item configuration:

  {
  "type": "wps",
  "name": "Area",
  "description": "Buffer a polygon by a specified distance",
  "executeWithHttpGet": false,
  "url": "http://localhost:5000/wps",
  "identifier": "area"
  }

• The output in your browser's console related to this error;

• the response information from your browser's Network tab in the Developer Tools.

[zoran995]

I haven't worked with WPS and Terriajs in the past, but I had a quick run-through of the pywps service, and here are my findings. I couldn't run the exact pywps-flask process, but I implemented a small custom Flask service and used their samples.

TerriaJS supports only a subset of possible input parameters types, and the only place you can find the list is

terriajs/lib/Models/Catalog/Ows/WebProcessingServiceCatalogFunction.ts

Lines 747 to 756 in be206bd

	const parameterConverters: ParameterConverter[] = [
	LiteralDataConverter,
	ComplexDateConverter,
	ComplexDateTimeConverter,
	PointConverter,
	LineConverter,
	PolygonConverter,
	RectangleConverter,
	GeoJsonGeometryConverter
	];

If we check the code of wps-flask demo services/processes for most of them, we can see that they expect GML as an input parameter. However, Terriajs doesn't have a converter for GML, only for JSON data, so it throws an error (we should improve our error handling here, and show an error instead of a white screen). For me, the bounding box sample is not working because of an incorrect input parameter; it cannot parse it properly. Expected value is:

<wps:BoundingBoxData crs="urn:ogc:def:crs:EPSG:6.6:4326" dimensions="2">
    <ows:LowerCorner>-25.641526373065748 138.33984375000003</ows:LowerCorner>
    <ows:UpperCorner>-21.779905342529638 129.72656250000003</ows:UpperCorner>
</wps:BoundingBoxData>

while we send

<wps:BoundingBoxData>-25.641526373065748,138.33984375000003,-21.779905342529638,129.72656250000003,urn:ogc:def:crs:EPSG:6.6:4326</wps:BoundingBoxData>

We will need to look into the specification details to understand the differences between the two. @niktayv do you maybe have more details on this?

But even with that fixed, we won't show WPS response data on the map if I am not wrong, as we only show input parameters of geoJsonType and if WPS responded with terriajs catalog item definition application/vnd.terriajs.catalog-member+json. You can check the code below for more details

terriajs/lib/Models/Catalog/Ows/WebProcessingServiceCatalogFunctionJob.ts

Lines 294 to 382 in 77cf215

	async downloadResults() {
	if (isDefined(this.wpsResponseUrl) && !isDefined(this.wpsResponse)) {
	const url = proxyCatalogItemUrl(this, this.wpsResponseUrl, "0d");
	const wpsResponse = xml2json(await this.getXml(url));
	runInAction(() => {
	this.setTrait(CommonStrata.user, "wpsResponse", wpsResponse);
	});
	}
	if (!isDefined(this.wpsResponse)) return;
	const reports: StratumFromTraits<ShortReportTraits>[] = [];
	const outputs = runInAction(() => this.outputs);
	const results: CatalogMemberMixin.Instance[] = [];
	await Promise.all(
	outputs.map(async (output, i) => {
	if (!output.Data.ComplexData) {
	return;
	}
	let reportContent = output.Data.ComplexData;
	if (output.Data.ComplexData.mimeType === "text/csv") {
	reportContent =
	'<collapsible title="' +
	output.Title +
	'" open="' +
	(i === 0 ? "true" : "false") +
	'">';
	reportContent +=
	'<chart can-download="true" hide-buttons="false" title="' +
	output.Title +
	"\" data='" +
	output.Data.ComplexData.text +
	'\' styling="histogram"></chart>';
	reportContent += "</collapsible>";
	} else if (
	output.Data.ComplexData.mimeType ===
	"application/vnd.terriajs.catalog-member+json"
	) {
	// Create a catalog member from the embedded json
	const json = JSON.parse(output.Data.ComplexData.text);
	const catalogItem = await this.createCatalogItemFromJson(json);
	if (isDefined(catalogItem)) {
	if (CatalogMemberMixin.isMixedInto(catalogItem))
	results.push(catalogItem);
	reportContent = "Chart " + output.Title + " generated.";
	}
	}
	reports.push(
	createStratumInstance(ShortReportTraits, {
	name: output.Title,
	content: reportContent
	})
	);
	})
	);
	// Create geojson catalog item for input features
	const geojsonFeatures = runInAction(() => this.geojsonFeatures);
	if (Array.isArray(geojsonFeatures) || isObservableArray(geojsonFeatures)) {
	runInAction(() => {
	this.geoJsonItem = new GeoJsonCatalogItem(createGuid(), this.terria);
	updateModelFromJson(this.geoJsonItem, CommonStrata.user, {
	name: `${this.name} Input Features`,
	// Use cesium primitives, so we don't have to deal with feature picking/selection
	forceCesiumPrimitives: true,
	geoJsonData: {
	type: "FeatureCollection",
	features: geojsonFeatures,
	totalFeatures: this.geojsonFeatures!.length
	}
	}).logError(
	"Error occurred while updating Input Features GeoJSON model JSON"
	);
	});
	(await this.geoJsonItem!.loadMapItems()).throwIfError();
	}
	runInAction(() => {
	this.setTrait(CommonStrata.user, "shortReportSections", reports);
	});
	return results;
	}

Here is a small sample WPS to generate geojson catalog item

import json
from pywps import Process, BoundingBoxInput, BoundingBoxOutput, ComplexOutput, Format, LiteralOutput

__author__ = 'Jachym'


class Box(Process):
    def __init__(self):
        inputs = [BoundingBoxInput('bboxin',
                                   'box in', ['epsg:4326', 'epsg:3035'])]
        outputs = [ComplexOutput('response', 'Some Output', supported_formats=[Format('application/vnd.terriajs.catalog-member+json')])]

        super(Box, self).__init__(
            self._handler,
            identifier='boundingbox',
            version='0.1',
            title="Bounding box in- and out",
            abstract="""Given a  bounding box, it
             returns the same bounding box""",
            inputs=inputs,
            outputs=outputs,
            store_supported=True,
            status_supported=True
        )

    def _handler(self, request, response):
        minCoord1=request.inputs['bboxin'][0].data[1]
        minCoord2=request.inputs['bboxin'][0].data[0]
        maxCoord1=request.inputs['bboxin'][0].data[3]
        maxCoord2=request.inputs['bboxin'][0].data[2]
        data = json.loads('{"type":"geojson", "geoJsonData": {"type":"FeatureCollection", "features":[{"type":"Feature", "geometry":{"type":"Polygon", "coordinates":' + f'[[[{minCoord1},{minCoord2}],[{maxCoord1},{minCoord2}],[{maxCoord1},{maxCoord2}],[{minCoord1},{maxCoord2}],[{minCoord1},{minCoord2}]]]' + '}, "properties":{}}]}}')
        out_bytes = json.dumps(data, indent=2)
        response.outputs['response'].output_format = 'application/json'
        response.outputs['response'].data = out_bytes
        return response

This is what I figured out by experimenting with WPS implementation and going through the source code; I may have actually missed something.

[ZoloKiala]

@zoran995 Thank you for your reply. It has really helped me understand many things. However, the BoundingBoxInput can only draw a rectangle. It can't draw complex geometries or select existing polygons. I tried to use "ComplexInput" for complex polygons with 'application/vnd.terriajs.catalog-member+json', but I got the previous error: "The parameter polygon is not a supported type of parameter."

The following is the process that calculates the area of a polygon (e.g., can be the area of a farm):

from pywps import Process, ComplexInput, LiteralOutput, Format
from pywps.app.Common import Metadata
from pywps.validator.mode import MODE
import json
import geopandas as gpd

class CalculatePolygonArea(Process):
    def __init__(self):
        inputs = [
            ComplexInput(
               "polygon",
               "Polygon",
                supported_formats=[Format("application/vnd.terriajs.catalog-member+json")],

            )
        ]
        outputs = [
            LiteralOutput(
                identifier="area",
                title="Area",
                abstract="Area of the polygon in square meters",
                data_type="float"
            )
        ]

        super(CalculatePolygonArea, self).__init__(
            self._handler,
            identifier="calculatePolygonArea",
            title="Calculate Polygon Area",
            abstract="Calculates the area of a given GeoJSON polygon in square meters",
            metadata=[Metadata("Polygon Area Calculation")],
            inputs=inputs,
            outputs=outputs,
            store_supported=True,
            status_supported=True
        )

    def _handler(self, request, response):
        geojson_data = request.inputs["polygon"][0].data

        try:
            gdf = gpd.read_file(json.dumps(geojson_data))
        except Exception as e:
            raise Exception(f"Failed to parse GeoJSON input: {str(e)}")

        if gdf.crs is None:
            gdf.set_crs(epsg=4326, inplace=True)

        centroid = gdf.geometry.centroid.iloc[0]
        lon, lat = centroid.x, centroid.y
        utm_zone = int((lon + 180) / 6) + 1
        utm_crs = f"EPSG:326{utm_zone}" if lat >= 0 else f"EPSG:327{utm_zone}"
        gdf_utm = gdf.to_crs(utm_crs)

       area = gdf_utm.geometry.area.iloc[0]
        response.outputs["area"].data = float(area)
        return response

[zoran995]

Hi @ZoloKiala, application/vnd.terriajs.catalog-member+json is intended to be used as an output of the WPS process. For example, the WPS generates the Geojson data that you want to add to the map or generates a new WMS service or any other WPS output that can be represented as a catalog item. Then, you put a ComplexOutput of type application/vnd.terriajs.catalog-member+json, and it will be added to the map automatically.
To have polygon input for WPS, you can use the code below.

from pywps import Process, ComplexInput, LiteralOutput, Format, FORMATS
from pywps.app.Common import Metadata
from pywps.validator.mode import MODE
import json
import geopandas as gpd

class CalculatePolygonArea(Process):
    def __init__(self):
        inputs = [
            ComplexInput(
               "polygon",
               "Polygon",
                supported_formats=[Format(FORMATS.GEOJSON.mime_type, schema="http://geojson.org/geojson-spec.html#polygon")],
            )
        ]
        outputs = [
            LiteralOutput(
                identifier="area",
                title="Area",
                abstract="Area of the polygon in square meters",
                data_type="float"
            )
        ]

        super(CalculatePolygonArea, self).__init__(
            self._handler,
            identifier="calculatePolygonArea",
            title="Calculate Polygon Area",
            abstract="Calculates the area of a given GeoJSON polygon in square meters",
            metadata=[Metadata("Polygon Area Calculation")],
            inputs=inputs,
            outputs=outputs,
            store_supported=True,
            status_supported=True
        )

    def _handler(self, request, response):
        geojson_data = request.inputs["polygon"][0].data
        json_data = json.loads(geojson_data)

        try:
            gdf = gpd.GeoDataFrame.from_features(json_data["features"])
        except Exception as e:
            raise Exception(f"Failed to parse GeoJSON input: {str(e)}")

        if gdf.crs is None:
            gdf.set_crs(epsg=4326, inplace=True)
        
        centroid = gdf.geometry.centroid.iloc[0]
        lon, lat = centroid.x, centroid.y
        utm_zone = int((lon + 180) / 6) + 1
        utm_crs = f"EPSG:326{utm_zone}" if lat >= 0 else f"EPSG:327{utm_zone}"
        gdf_utm = gdf.to_crs(utm_crs)

        area = gdf_utm.geometry.area.iloc[0]
        response.outputs["area"].data = float(area)
        return response

there are 2 changes from your example

• input is changed to complex input of geojson type and polygon geojson schema is set as terriajs depends on it, check more details in
  

  terriajs/lib/Models/Catalog/Ows/WebProcessingServiceCatalogFunction.ts

  Lines 532 to 540 in e2410aa

  	export const PointConverter = simpleGeoJsonDataConverter(
  	"point",
  	PointParameter
  	);
  	const LineConverter = simpleGeoJsonDataConverter("linestring", LineParameter);
  	const PolygonConverter = simpleGeoJsonDataConverter(
  	"polygon",
  	PolygonParameter
  	);

  
  and
  

  terriajs/lib/Models/Catalog/Ows/WebProcessingServiceCatalogFunction.ts

  Lines 680 to 714 in e2410aa

  	function simpleGeoJsonDataConverter(schemaType: string, klass: any) {
  	return {
  	inputToParameter: function (
  	catalogFunction: CatalogFunctionMixin.Instance,
  	input: Input,
  	options: FunctionParameterOptions
  	) {
  	if (
  	!isDefined(input.ComplexData) ||
  	!isDefined(input.ComplexData.Default) ||
  	!isDefined(input.ComplexData.Default.Format) ||
  	!isDefined(input.ComplexData.Default.Format.Schema)
  	) {
  	return undefined;
  	}
  	const schema = input.ComplexData.Default.Format.Schema;
  	if (schema.indexOf("http://geojson.org/geojson-spec.html#") !== 0) {
  	return undefined;
  	}
  	if (schema.substring(schema.lastIndexOf("#") + 1) !== schemaType) {
  	return undefined;
  	}
  	return new klass(catalogFunction, options);
  	},
  	parameterToInput: function (parameter: FunctionParameter) {
  	return {
  	inputType: "ComplexData",
  	inputValue: klass.formatValueForUrl(parameter.value)
  	};
  	}
  	};
  	}

• the way GeoDataFrame is loaded. I couldn't load it the way you implemented, it always threw an error: file name too long.

Additionally, I created a fix for a minor bug (#7614), as geopandas will throw a validation error when the properties object is missing. You can use that branch for testing.
Here you can see the input polygon that was sent to WPS and the area output in the workbench

[ZoloKiala]

@zoran995 Thank you once again. I really appreciate your assistance. My last concern is how to output an image to the workbench. For example, the user draws a polygon on top of a classified image that's already visible in the TerriaJS. Then PyWPS clips the raster to the polygon, analyzes class areas, and returns a pie chart. Below is an attempt on how this can be done:

from pywps import Process, ComplexInput, ComplexOutput, Format,  FORMATS
import rasterio
from rasterio.mask import mask
import tempfile
import numpy as np
import json
import matplotlib.pyplot as plt
import os

class ZonalStatsFixedRaster(Process):
    def __init__(self):
        inputs = [
            ComplexInput(
                'input_polygon',
                'User-drawn Polygon',
                supported_formats=supported_formats=[Format(FORMATS.GEOJSON.mime_type, schema="http://geojson.org/geojson-spec.html#polygon")],
                abstract='Polygon drawn by the user in TerriaJS.'
            )
        ]

        outputs = [
            ComplexOutput(
                'pie_chart',
                'Pie chart of class areas',
                supported_formats=[Format('image/png')]
            ),
            ComplexOutput(
                'class_areas',
                'JSON area table',
                supported_formats=[Format('application/json')]
            )
        ]

        super(ZonalStatsFixedRaster, self).__init__(
            self._handler,
            identifier='zonal_stats_fixed_raster',
            title='Zonal Class Analysis (Fixed Raster)',
            abstract='Analyzes a fixed raster by user-drawn polygon and returns class areas.',
            version='1.0',
            inputs=inputs,
            outputs=outputs
        )

    def _handler(self, request, response):
        # Path to raster on your server (make sure it's accessible)
        fixed_raster_path = "/path/to/your/raster.tif" ## How to get this path ? Can't we have an alternative ?

        polygon_geojson = json.loads(request.inputs['input_polygon'][0].file.read())

        with rasterio.open(fixed_raster_path) as src:
            out_image, out_transform = mask(src, polygon_geojson['features'], crop=True)
            out_image = out_image[0]
            nodata = src.nodata
            pixel_area = abs(src.transform[0] * src.transform[4])

        if nodata is not None:
            out_image = np.ma.masked_equal(out_image, nodata)

        unique, counts = np.unique(out_image.compressed(), return_counts=True)
        areas = counts * pixel_area
        labels = [f"Class {int(cls)}" for cls in unique]

        # Pie chart
        fig, ax = plt.subplots()
        ax.pie(areas, labels=labels, autopct='%1.1f%%')
        ax.set_title("Area by Class in Drawn Polygon")
        chart_file = tempfile.NamedTemporaryFile(delete=False, suffix='.png')
        fig.savefig(chart_file.name)
        plt.close()

        # JSON output
        area_dict = {str(int(cls)): round(float(area), 2) for cls, area in zip(unique, areas)}
        json_file = tempfile.NamedTemporaryFile(delete=False, suffix='.json')
        with open(json_file.name, 'w') as f:
            json.dump(area_dict, f)

        response.outputs['pie_chart'].file = chart_file.name
        response.outputs['class_areas'].file = json_file.name
        return response

[zoran995]

Hi @ZoloKiala, I don't think displaying the image in the side panel is currently supported. We might create a workaround to show it as a legend or a short report section for a new catalog item, but I don't think it would be the best option for end users. It would be something like this (you return it as part of complex output with type application/vnd.terriajs.catalog-member+json)

{
  "type": "geojson",
  "name": "Wps Result",
  "geoJsonData": {
    "type": "FeatureCollection",
    "features": []
  },
  "shortReportSections": [
    {
      "name": "Chart",
      "content": "<img src='http://localhost:3001/build/b0be650ea517774b8378.svg'/>",
      "show": true
    }
  ]
}

Ideally, image responses should be handled by TerriaJS to display the image in the short report section for response output and also in the feature info section for data input, so it looks like the example below. If you are willing to contribute something like this, we would be happy to review it and provide necessary guidance (I believe the image should be handled in two places outputsSectionHtml and downloadResults in WebProcessingServiceCatalogFunctionJob).

p.s. In the long run, I would like to explore a more configurable approach to WPS, and enable registration of custom input/output processors.

[ZoloKiala]

@zoran995 Thank you once again for your reply. Actually, I was able to display the image on the side panel (see below)

Below is the code:

from pywps import Process, ComplexInput, ComplexOutput, Format,  FORMATS, LiteralInput, LiteralOutput
import rasterio
from rasterio.mask import mask
import tempfile
import numpy as np
import json
import matplotlib.pyplot as plt
from pywps import Process, ComplexInput, ComplexOutput, Format,  FORMATS
import os
from owslib.wcs import WebCoverageService
import requests
import geopandas as gpd
from shapely.geometry import shape
import plotly.graph_objects as go
import plotly.io as pio



def download_raster(coverage_id="irrigation_app__mat_south_irrigation_suitability1"):
    """
    Downloads a raster from a WCS server and saves it to a file.
    """
    print(coverage_id)

    wcs_url = "http://localhost:8080/geoserver/ows?"

    # Connect to WCS
    wcs = WebCoverageService(wcs_url, version='2.0.1')
    coverage_id = coverage_id

    coverage = wcs[coverage_id]
    bbox = coverage.boundingboxes[0]['bbox']

    output_file = "raster_downloaded.tif"


    params = {
        "service": "WCS",
        "version": "2.0.1",
        "request": "GetCoverage",
        "coverageId": coverage_id,
        "format": "image/tiff",
        "subset": [
            f"E({bbox[0]},{bbox[2]})",
            f"N({bbox[1]},{bbox[3]})"
        ]
    }


    response = requests.get(wcs_url, params=params)

    if response.ok:
        with open(output_file, "wb") as f:
            f.write(response.content)
        print(f"Downloaded to {output_file}")
    else:
        print("Error:", response.status_code, response.text)

    return output_file



class ZonalStatsFixedRaster(Process):


    def __init__(self):
        inputs = [
            ComplexInput(
                'input_polygon',
                'Draw a polygon',
                supported_formats=[Format(FORMATS.GEOJSON.mime_type, schema="http://geojson.org/geojson-spec.html#polygon")],
                abstract='Polygon drawn by the user in TerriaJS.'
            ),

            LiteralInput(
                identifier='category',
                title='Choose a category',
                data_type='string',
                allowed_values=['irrigation_app__manicaland_irrigation_suitbility1', 'irrigation_app__masvingo_irrigation_suitability1',
                                 'irrigation_app__mat_south_irrigation_suitability1', 'irrigation_app__matebeleland_north_irrigation_suitability1'],
                default='irrigation_app__mat_south_irrigation_suitability1',
                abstract='Pick a category from the dropdown'
            ),
        ]

        outputs = [
            ComplexOutput(
                'pie_chart',
                'Pie chart of class areas',
                supported_formats=[Format('image/png')]
            ),
            ComplexOutput(
                'class_areas',
                'class area (m2)',
                supported_formats=[Format('application/json')]
            )
        ]

        super(ZonalStatsFixedRaster, self).__init__(
            self._handler,
            identifier='zonal_stats_fixed_raster',
            title='Zonal Class Analysis (Fixed Raster)',
            abstract='Analyzes a fixed raster by user-drawn polygon and returns class areas.',
            version='1.0',
            inputs=inputs,
            outputs=outputs
        )

    def _handler(self, request, response):

        polygon_geojson = request.inputs["input_polygon"][0].data
        
        with rasterio.open(download_raster(request.inputs['category'][0].data)) as src:

            polygon_geojson = json.loads(polygon_geojson)

            #polygon_geojson = json.loads(request.inputs['input_polygon'][0].file.read())
            r = json.dumps(polygon_geojson)
            loaded_r = json.loads(r)

            for feature in loaded_r["features"]:
                feature.setdefault("properties", {})  # Insert empty dict if missing
            
            gdf = gpd.GeoDataFrame.from_features(loaded_r["features"])
            gdf.set_crs(epsg=4326, inplace=True)
            gdf_reprojected = gdf.to_crs(src.crs)


            # Convert geometries
            geoms = [geom.__geo_interface__ for geom in  gdf_reprojected.geometry]
            out_image, out_transform = mask(src, geoms, crop=True)
            out_image = out_image[0]
            nodata = src.nodata
            pixel_area = abs(src.transform[0] * src.transform[4])

        if nodata is not None:
            out_image = np.ma.masked_equal(out_image, nodata)

        unique, counts = np.unique(out_image.compressed(), return_counts=True)
        areas = counts * pixel_area
      
        # Convert unique values to a list
        labels = unique.tolist()
       
        # print(type(unique))

        # Mapping of items to rename    
        rename_map = {0: 'S1', 1: 'S2', 2: 'S3', 3:'N'}

        # # Iterate through the list and rename items if they exist in the map
        for i in range(len(labels)):
            if labels[i] in rename_map:
                labels[i] = rename_map[labels[i]]

        # print(labels)

        # Define custom colors
        custom_colors = ['#267300', '#4ce600', '#ffff00', '#ffebaf']  # Red, Blue, Green, Yellow

        # Plotly pie chart
        fig = go.Figure(data=[go.Pie(labels=labels, values=areas, hole=.3, marker=dict(colors=custom_colors))])
        fig.update_layout(
                    margin=dict(
                             l=10,  # left
                            r=10,  # right
                            t=20,  # top
                            b=20),  # bottom
                        legend=dict(
                        x=1.05,            # Horizontal position (0 to 1)
                        y=0,            # Vertical position (0 to 1)
                        xanchor='left',  # Anchor the legend box to the right
                        yanchor='bottom'     # Anchor the legend box to the top
                        ), width=300,height=200)
        chart_file = tempfile.NamedTemporaryFile(delete=False, suffix='.svg')
        pio.write_image(fig, chart_file.name, format='svg')
    

        # JSON output
        area_dict = {str(int(cls)): round(float(area), 2) for cls, area in zip(unique, areas)}

        # Mapping of old keys to new keys
        key_map = {'0': 'S1', '1': 'S2', '2': 'S3', '3': 'N'}
        # Create a new dictionary with the mapped keys
        area_dict = {key_map.get(k, k): v for k, v in area_dict.items()}
        # Convert the dictionary to JSON

        json_file = tempfile.NamedTemporaryFile(delete=False, suffix='.json')
        with open(json_file.name, 'w') as f:
            json.dump(area_dict, f)

        response.outputs['pie_chart'].file = chart_file.name
        response.outputs['class_areas'].file = json_file.name

        del src

        return response

The form looks like below:

Thank you very much for the support.

[zoran995]

Hi @ZoloKiala, nice to see that you managed to make it work. Did you make any changes to terriajs source code?

Can you try with

ComplexInput(
                'input_polygon',
                'Draw a polygon',
                supported_formats=[Format(FORMATS.GEOJSON.mime_type, schema="http://geojson.org/geojson-spec.html#")],
                abstract='Polygon drawn by the user in TerriaJS.'
            ),

it should offer you a selector for different geometry types, and one of them is existing polygon

[ZoloKiala]

Hi @zoran995 Thank you for this. I didn't make any changes to terriajs source code. I just added an empty dict "properties".

For creating a selector for different geometry types, according to the doc you had shared earlier, I used the code below:

It worked. Thank you for everything.

[ZoloKiala]

@zoran995 Do you have any idea on how to make the figure interactive. Until now, it's served as a static figure.

[zoran995]

Hi @ZoloKiala, what do you mean by interactive figure?

[ZoloKiala]

@zoran995 I mean a a chart, graph, or plot that users can actively engage with, rather than just view as a static image.

For example, I tried to inject some Javascript code into Python in a process that outputs a html page on the workbench. The html page embedes a table with a button for downloading the table. Everything works well, but it looks like the javascript component is not working.

Below is the code:

from pywps import Process, LiteralInput, ComplexInput, ComplexOutput, Format
from pywps.app.Common import Metadata
from pywps.inout.formats import FORMATS
import geopandas as gpd
import matplotlib.pyplot as plt
import io
import requests
import zipfile
import os
import json
import plotly.graph_objects as go
import tempfile
import io
import re
import plotly.io as pio
from datetime import datetime
import html


class PieChartFromWFS(Process):
    def __init__(self):
        inputs = [
            ComplexInput(
                    'input_polygon',
                    'Draw a polygon',
                    supported_formats=[Format(FORMATS.GEOJSON.mime_type, schema="http://geojson.org/geojson-spec.html#GeoJsonGeometry")],
                    abstract='Polygon drawn by the user in TerriaJS.'
                ),

            LiteralInput(
                identifier='category',
                title='Choose a category',
                data_type='string',
                allowed_values=['mv_lulc_sa', 'mv_soil_types_za', 'mv_land_capability', 'mv_rain_wsa_za'],
                default='mv_lulc_sa',
                abstract='Pick a map from the dropdown'
            ),
        ]
        outputs = [
            ComplexOutput('pie_chart', 'Farm Report',
                          supported_formats=[Format('text/html')],
                          )]

        super(PieChartFromWFS, self).__init__(
            self._handler,
            identifier='piechart_wfs',
            title='Pie Chart of Classes in Polygon (WFS)',
            abstract='Generates a pie chart showing area per class in a polygon from a WFS layer',
            version='1.0',
            inputs=inputs,
            outputs=outputs,
            store_supported=True,
            status_supported=True
            # metadata=[Metadata('Category', 'GIS')]
        )

    def _handler(self, request, response):

        # Load input polygon
        polygon_geojson = request.inputs["input_polygon"][0].data
        polygon_geojson = json.loads(polygon_geojson)

        r = json.dumps(polygon_geojson)
        loaded_r = json.loads(r)

        for feature in loaded_r["features"]:
            feature.setdefault("properties", {})  # Insert empty dict if missing
            
        gdf_input = gpd.GeoDataFrame.from_features(loaded_r["features"])
        gdf_input.set_crs(epsg=4326, inplace=True)
           
        # Download WFS layer
        layer_name = request.inputs['category'][0].data
        wfs_url = "http://localhost:8080/geoserver/farm_solution/ows"

        wfs_gdf = gpd.read_file(f"{wfs_url}?service=WFS&version=1.0.0&request=GetFeature&typeName={layer_name}&outputFormat=application/json")

        # Load WFS GeoJSON
    
        if wfs_gdf.crs != gdf_input.crs:
            # Reproject the input polygon to match the WFS layer's CRS
            gdf_input = gdf_input.to_crs(wfs_gdf.crs)

            # Intersect WFS layer with input polygon
        clipped = gpd.overlay(wfs_gdf, gdf_input, how='intersection')

        print(clipped.shape)
        print(wfs_gdf.shape)
            # Assume a column named 'class' exists in the WFS layer
        clipped['area'] = clipped.geometry.area
            # print(wfs_layer)

            # Calculate area for each class
            # Extract class to group and calculate area
        if layer_name == "mv_lulc_sa":
            layer_name = layer_name.replace("mv_lulc_sa", "Land cover")
            class_area = clipped.groupby('DESCRIPTIO')['area'].sum()
        elif layer_name == "mv_soil_types_za":
            layer_name = layer_name.replace("mv_soil_types_za", "Soil type")
            class_area = clipped.groupby('sde_sde__2')['area'].sum()
        elif layer_name == "mv_land_capability":
            layer_name = layer_name.replace("mv_land_capability", "Land capability")
            class_area = clipped.groupby('DESCRIPTIO')['area'].sum()
        elif layer_name == "mv_rain_wsa_za":
            layer_name = layer_name.replace("mv_rain_wsa_za", "Rainfall")
            class_area = clipped.groupby('MEAN_ANNUA')['area'].sum()
                
        labels = class_area.index.astype(str).tolist()
        values = class_area.values.tolist()
        total_area_ha = sum(values)/10000  # Convert to hectares

        total_area = sum(values)  # Convert to hectares
        percentages = [v / total_area * 100 for v in values]
        date_str = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
        class_column = 'DESCRIPTIO'

        class_area = clipped.groupby('DESCRIPTIO')['area'].sum().reset_index()
         # Generate HTML table
        table_html = "<table border='1'><tr><th>{}</th><th>Area (m²)</th></tr>".format(html.escape(class_column))
        for _, row in class_area.iterrows():
            table_html += f"<tr><td>{html.escape(str(row[class_column]))}</td><td>{row['area']}</td></tr>"
        table_html += "</table>"

        # JavaScript CSV generator
        csv_data = "class,area\n" + "\n".join(
            f"{row[class_column]},{row['area']}" for _, row in class_area.iterrows()
        ).replace('"', '\\"')
        print(csv_data)

        # === 3. Metadata and Table HTML ===
        table_rows = ""
        for label, val, pct in zip(labels, values, percentages):
            table_rows += f"""
            <tr>
                <td>{label}</td>
                <td style="text-align:right;">{val:.2f}</td>
                <td style="text-align:right;">{pct:.1f}%</td>
            </tr>"""

        metadata_html = f"""
        <div style="padding: 1em; font-family: sans-serif; max-width: 700px; margin:auto;">
            <h1> {layer_name} Report </h1>
            <p><strong>Total Area:</strong> {total_area_ha:.2f} hectares</p>

            <table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">
                <thead style="font-weight:bold"">  
                    <tr>
                        <th>Class</th>
                        <th <span style="text-align:right; font-weight: bold">Area (m2) </span> </th>
                        <th style="text-align:right;">Percentage</th>
                    </tr>
                </thead>
                <tbody>
                    {table_rows}
                </tbody>
            </table>

            <p><strong>Generated on:</strong> {date_str}</p>
               <button onclick="downloadCSV()">Download Report</button>
            <script>
                function downloadCSV() {{
                    const csv = `{csv_data}`;
                    const blob = new Blob([csv], {{ type: 'text/csv' }});
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'area_by_class.csv';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                }}
            </script>

        </div>
        """

        # === 4. Combine and wrap chart and metadata ===
        full_html = f"""
        <html>
        <head>
            <title>Interactive Land Report with Table</title>
            <meta charset="utf-8" />
        </head>
        <body>
            {metadata_html}

             <script>
                function downloadCSV() {{
                    const csv = `{csv_data}`;
                    const blob = new Blob([csv], {{ type: 'text/csv' }});
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'area_by_class.csv';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                }}
            </script>

            <div style="max-width: 700px; margin: auto; padding: 1em;">
         
            </div>
        </body>
        </html>
        """

        # === 5. Write to temp file ===
        tmpfile = tempfile.NamedTemporaryFile(suffix=".html", delete=False, mode="w", encoding="utf-8")
        tmpfile.write(full_html)
        tmpfile.close()

        response.outputs['pie_chart'].file = tmpfile.name
       

        return response

The output looks like below:

The download part doesn't work.

[zoran995]

Will need to check more, but generally, allowing external JS would pose a security risk to the app, i.e. the service could execute arbitrary JavaScript code and expose the tokens or some other sensitive data