Git Product home page Git Product logo

openeo-web-editor's Introduction

openEO Web Editor

A web-based editor for interactive usage of the openEO API.

The Web Editor currently supports openEO API versions v1.0.x (including 1.0.0-rc.2).

This project is licensed under the Apache 2.0 license - see the LICENSE.md file for details.

Getting Started

The Web Editor is available at editor.openeo.org for demo purposes.

You can also build the files yourself and deploy them to any web host:

  1. Install Node.js
  2. Clone or download this repository.
  3. Open a command line window and go to the directory which contains the cloned/downloaded web editor files.
  4. Configure the web editor by editing config.js, vue.config.js and theme.scss to suit your needs.
  5. Install the dependencies by executing npm install on the command line
  6. For...
    • Development: Run the development server by executing npm start.
    • Deployment: Build the project by executing npm run build. Afterwards upload the content of the dist folder to your server.

Query Parameters

You can use some query parameters to set initial state to the Editor.

  • server: Set a openEO back-end to connect to by default, e.g. https://earthengine.openeo.org
  • discover: If you want to skip authentication and just show the capabiltiies of the back-end, simply set to 1.
  • process: Loads a process from a URL and shows it in the Model Builder. You can also pass a single process name with an optional namespace to the parameter (format: process@namespace) to simply add a single process node for that process by default.
  • namespaces: Loads a additional process namespaces. Multiple namespaces can be separated by a comma (e.g. vector,sar).
  • edit-node: Opens the parameter editor for a single process node on start-up. Must have the process parameter being set, otherwise will be ignored. You can set two types of values:
    • 1: If only a single node is being added, opens this node without explicitly naming it.
    • Otherwise, the value must correspond to the node identifier without # at the beginning.
  • wizard: Opens a specific wizard on start-up. The value must correspond to the component name of the wizard. Wizard options can be set by provding them as query parameter prefixed with wizard~, e.g. &wizard~collection=SENTINEL2-L2A.
    • Usecase "Run UDP": For wizard=UDP you can provide a process in the query parameter wizard~process which has the same format as in process above and will open a wizard for this UDP.
  • preview-collection: Shows the preview of a Collection on the map upon start.
  • result: Loads a STAC Item or Collection in "App mode".
  • oidc~prompt: Set the prompt parameter for the OIDC authentication request. For example: use value login to enforce a (re)login with the OIDC provider.

Example: https://editor.openeo.org?server=https://earthengine.openeo.org&discover=1&process=https://raw.githubusercontent.com/Open-EO/openeo-earthengine-driver/master/tests/data/sample-processgraph.json

Implementation guide for back-ends

Here we collection information for back-end implementors that want to improve the experience with the Web Editor by fine-tuning their implementation.

Contributions

The authors acknowledge the financial support for the development of this package during the H2020 project "openEO" (Oct 2017 to Sept 2020) by the European Union, funded by call EO-2-2017: EO Big Data Shift, under grant number 776242. We also acknowledge the financial support received from ESA for the project "openEO Platform" (Sept 2020 to Sept 2023).

This package received major contributions from the following organizations:

WWU Münster logo   mundialis logo Sinergise logo

Built with

Docker

Local build

This repository contains a Dockerfile. It can be build with

docker build . -t openeo-web-editor

and then tested locally with

docker run -p 8080:80 openeo-web-editor

After sucessfull startup, the webeditor can be reached locally at http://127.0.0.1:8080/

More startup information can be seen at the official nginx docker image which is used.

Use image from Dockerhub

The same Dockerimage is build and pushed to Dockerhub with the help of a github action. It is available here.

To use it locally, run

docker pull mundialis/openeo-web-editor:latest

Then run it with

docker run -p 8080:80 mundialis/openeo-web-editor:latest

After sucessfull startup, the webeditor can be reached locally at http://127.0.0.1:8080/

To test a certain commit, simply pull the according tag (available from 2021-09-02), e.g.

docker pull mundialis/openeo-web-editor:sha-4636d41

The Dockerimage is maintained by mundialis.

openeo-web-editor's People

Contributors

christophfriedrich avatar clausmichele avatar janssenbrm avatar m-mohr avatar mmacata avatar slim01 avatar soxofaan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

openeo-web-editor's Issues

Replace map with content area

The map on the right is only suitable for services. You should be able to switch between services and other data on the right, e.g. you could also show downloaded images or formatted JSON data.

Mixing user input and from_argument/from_node

Currently, from_argument and from_node are rather strict and can only be passed without additional data. Something like the following example doesn't work:

{
  "process_id": "sum",
  "arguments": {
    "data": [
      {
        "from_argument": "x"
      },
      5
    ]
  }
}

Neither can it be generated nor is it shown in the visual editor.

Also, if you have a process graph such as the one below, the parameter editor still shows that you can edit the parameter x although there is already data specified from "externally" (from_argument):

{
  "1": {
    "process_id": "apply",
    "arguments": {
      "process": {
        "callback": {
          "2": {
            "process_id": "linear_scale_range",
            "arguments": {
              "x": {
                "from_argument": "x"
              },
              "inputMin": 0,
              "inputMax": 0
            },
            "result": true
          }
        }
      }
    },
    "result": true
  }
}

Action when clicking on parameter titles

Currently, dragging connections between boxes can be initiated by clicking and holding on a parameter title or the little rectangle in front of it. In my opinion, the latter is enough and the former rather confusing.

Instead, it would be helpful if (single or double) clicking on the parameter title would open the configuration modal and (at least for text inputs) focus the corresponding input field.

Workflow for non-authenticated users

Web Editor should also work when there is no authentication / user space.

This has been started by allowing the download of files via notification bar after creating a job, but more should follow.

Integrate Hub into Web Editor

When selecting a server it would be great if you could get a list of potential back-ends from the Hub!

Maybe also add a feature to search for an alternative back-end based on the loaded process graph.

Output format options + AJV console log

  • Can't choose output format options after some heavy editing:
    grafik
    No error message shows up on editor.openeo.org, Browser is Firefox.

  • Getting the following console log in Firefox (probably from block.getHtml()):

Object { message: "validation failed", errors: (1) […], validation: true, ajv: true, stack: "" }
block.js:233:16
{…}
​
ajv: true
​
errors: (1) […]
​​
0: Object { message: "Invalid GeoJSON specified (no type property)." }
​​
length: 1
​​
<prototype>: Array []
​
message: "validation failed"
​
stack: ""
​
validation: true
​
<prototype>: Object { constructor: s(), stack: "" }
block.js:233:16

Visual Model output of Process Graph gives the from_node field as Integer, while it should be a string

I am using the web editor 0.4.0-beta.4, and when I create a process graph in visual model as shown in the Image below attached, I get the following JSON format of process graph as below, where the from_node field should be in String format but giving Integer format.
Visual Model

{
"1": {
"process_id": "load_collection",
"arguments": {
"id": "openEO_S2_32632_20m_L2A",
"spatial_extent": {
"west": 11.286732,
"south": 46.466714,
"east": 11.389729,
"north": 46.513988
},
"temporal_extent": [
"2018-06-23T00:00:00Z",
"2018-06-23T00:00:00Z"
],
"bands": null,
"properties": null
}
},
"2": {
"process_id": "save_result",
"arguments": {
"data": {
"from_node": 4
},
"format": "GTiff",
"options": {}
},
"result": true
},
"3": {
"process_id": "ndvi",
"arguments": {
"data": {
"from_node": "1"
}
}
},
"4": {
"process_id": "max_time",
"arguments": {
"data": {
"from_node": 3
}
}
}
}

WMS support

Currently the WMS support is broken as it's not clear which layer to load etc. Should retrieve information from WMS GetLayers, openEO attributes or so.

Job panel (queuing job): Cannot read property 'jobId' of undefined

Queuing job a batch job seems to work (status is displayed as finished after a short period of time). However, it returns the following error.

image

TypeError: Cannot read property 'jobId' of undefined
at JobPanel.vue:166
at Array.findIndex ()
at a.updateJobData (JobPanel.vue:166)
at JobPanel.vue:231

Additional info to reproduce:

Process graph:

{
  "imagery": {
    "red": "B4",
    "nir": "B8A",
    "imagery": {
      "extent": [
        "2018-01-01T00:00:00Z",
        "2018-12-31T23:59:59Z"
      ],
      "imagery": {
        "extent": {
          "west": 4.757069,
          "south": 51.502332,
          "east": 6.020497,
          "north": 52.849645
        },
        "imagery": {
          "process_id": "get_collection",
          "name": "COPERNICUS/S2"
        },
        "process_id": "filter_bbox"
      },
      "process_id": "filter_daterange"
    },
    "process_id": "NDVI"
  },
  "process_id": "sum_time"
}

Implement all data types in parameter editor

Related: #80, #39

General types:

  • null
  • string
  • number
  • integer
  • boolean
  • objects (see also #78)
  • arrays
    • ToDo: Subtype selection, see #75

Missing subtypes:

  • band-name (may depend on #26)
  • bounding-box
  • collection-id
  • date
  • date-time
  • epsg-code
  • file-path
  • file-paths (via arrays)
  • geojson
  • input-format
  • input-format-options
  • job-id (see also #42)
  • kernel (see #194)
  • labeled-array (these can't be sent to the server)
  • metadata-filter
  • output-format
  • output-format-options
  • process-graph
  • proj-definition (deprecated)
  • temporal-interval
  • temporal-intervals (via arrays)
  • time
  • udf-code
  • udf-runtime (see also #42)
  • udf-runtime-version (see also #42)
  • uri (url-textbox)
  • wkt2-definition

Other types:

  • Commonmark (textarea)
  • Service config, see #192
  • Budget
  • Result Node
  • Parameters
    • ToDo: see also #39
  • Enum
  • Service type
  • Billing plan
  • Multiline text (textarea)

WMTS support

We should include WMTS support to load data by VITO etc.

Related #30 and #23 (we may drop WMS in favor of WMTS?)

Removing connections in Visual Process graph builder

It would be good to make it easier to remove connections in the visual process graph builder. I know that the functionality is in the current version but I cannot do it currently without switching to the code view.

Login "reloads" page

Sometimes after specifying the login credentials and submitting the form, the web editor "reloads" (form fields are empty) and users need to login again. I couldn't reproduce it consistently, but it happens quite often. Should be fixed.

Show non-referenced images on map

In some cases we can show non-referenced images (jpeg/png) on the map:
Use the process graph, get the start nodes and if there's only a single load_collection use the specified spatial_extent to show the images using this OpenLayers functionality: https://openlayers.org/en/latest/examples/static-image.html
If this behavior is not possible, simply fall back to the ImageViewer we have at the moment (or replace the image viewer with the static-image map from above).

Show callbacks in main model

Would it be possible to render the "sub process graphs" (e.g. the callback in the EVI example) in the main model too? This would make it more "graph-y".

True IDE workflow for loading and saving

Currently, changing process graphs from stored jobs/process graphs/services is a bit unintuitive as you need to load it using the visual vuilder icon and then store it again using the replace process graph button. Why not just load it with the button, but then use the save button at the top to save it to the source where it originated from?

Saving bands array without content produces error the next time it's opened

Steps to reproduce:

  1. add new collection to visual builder
  2. double click to open options
  3. go to bands
  4. select "array"
  5. click "add"
  6. realise you don't know what to type there
  7. click "save"
  8. open information window
  9. find what you're looking for
  10. close information window
  11. double click to open options
  12. go to bands
  13. see that "null" is selected again (although it was saved differently?!)
  14. select "array" again
  15. see errors:

fatal error: t is null

and

fatal error: e[i] is null

Combine Subscribe and Unsubscribe button

Instead of two different buttons for these two mutually exclusive buttons, a combined button for Subscribe and Unsubscribe (like Play and Pause in any media player) would be nicer.

Search is slow

On my machine, searching for collections and processes is quite slow, especially when deleting an existing search term.

Edge issues

Microsoft Edge 41.16299.371.0
Microsoft EdgeHTML 16.16299

Added by @christophfriedrich :

  • When loading the NO2 process graph from a stored web service, some of the arrows are missing:
    grafik

  • Zooming in the Model Builder doesn't work with a touchpad: neither the standard scroll gesture (going up and down with two fingers) nor pinching (the latter zooms the entire page). On Firefox both work as one would expect. (Scrolling with a real mouse wheel works though.)

Switching to OpenLayers?

Currently, the Web Editor uses Leaflet for simplicity, but it is somewhat limited. The GeoTiff rendering is quirky and COGs are not fully implemented yet. WMTS plugins are hard to find and all the plugins lack support (i.e. have security issues). So, I'm thinking about switching to OpenLayers.

There are some good plugins to get a good amount of features into the viewer:

Multi-select in Visual Editor

Allow that multiple edges and/or nodes are selected so that you can do mass commands, e.g. copy all selected, remove all selected, move all selected etc.

Support v-modal in ParameterField

Always update the value if it has changed so it is always available. Can be done by supporting v-model for each of the implemented types of the ParameterField and pass it through.

v-modal missing for:

  • Maps
  • Arrays (circular)
  • Objects (circular)
  • Visual Editor / Process Graphs
  • Results / Parameters / Null (?)
  • FileFormatOptionsEditor / File format options (circular?)
  • Other custom types with native HTML element

Option to disable loading process graphs from Hub + make it faster

With a ton of process graphs at the hub, it will be slow to load, parse and show them in the Web Editor. We should only lazy-load them in the background. In addition, some copies of the Web Editor (e.g. the local EURAC instance) don't want/need to load the Hub process graphs. The should have an option to enable/disable the feature. Default to disabled?

Support touch events

Currently, some parts can only be used with a mouse. For example, the splitters or the visual builder. Implement touch events so that users can use the web editor on mobile devices better.

Ask user whether to replace or add process graph in Visual Builder

You can add process graphs from the Hub (and other sources) in the Web Editor. When the user adds the process graph, we should ask whether the process graph should be added (in case there's already at least one node inside the builder) or whether it should be replaced completely.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.