Refactoring editor

Date	2013-10-22	Contacts	François Prunayre
Status	Motion passed - Done	Release	2.12
Resources	Available	Ticket
Source code	https://github.com/geonetwork/core-geonetwork/tree/refactor_editorui
Funding	Mainly supported by GéoSource project

Overview

This proposal focus on creating a metadata editor based on AngularJS. The core principles of the editor will be preserved but the new implementation will focus on:

• make editor configuration easier
• make XSLT easier (eg. do not mix CSS, JS, better template/file name, use functions and namespaces)
• use HTML5 form field type (eg. number, date)
• rely on the browser side for widgets (eg. duration, bounding box)
• avoid unnecessary editor complete reload (eg. while adding attributes)
• add the capability to edit an element which does exist in the XML document or is not direct child of existing element
• add a cancel action which reset all editing actions
• move all editor configuration from JS or config-gui.xml to the database Settings table (eg. background map, projection list, default tab per schema)

This proposal also cover the directory manager (ie. subtemplates).

Proposal Type

• Type: User interface
• App: GeoNetwork client / Editor

Voting History

• +1 from Jeroen, Jesse, Jose, Francois (PSC)

Proposal

Metadata editor is based on:

• An XML document for the form configuration. The configuration define per schema the view, the tabs for the view and the matching elements to display
• XSLTs for building the form from the configuration and dispatching to schema
• Client side Angular directive to build custom widgets (eg. bounding box editor, duration directive )

Metadata editor routing:

• catalog.edit# (default): Editor board which links to the directory manager and the metadata creation wizard
• catalog.edit#/create: Start the metadata creation wizard
• catalog.edit#/{metadata_id}: Open the editor for this metadata (default view is defined in configuration)
• catalog.edit#/{metadata_id}/tab/{tab}: Open the editor for this metadata using a specific tab
• catalog.edit#/directory: Start the directory manager

Metadata creation wizard

New dependencies

The following librairies are added:

• OpenLayers3 http://ol3js.org/
• typeahead.js https://github.com/twitter/typeahead.js
• tagsinput http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/

The following browsers are tested:

• IE9+,
• Firefox,
• Chrome

Note: IE6/7/8 browser are not supported. A message informs user when opening the new editor:

The editor configuration:

An XML document define the editor configuration:

• list of views and their tabs,
• section (ie. fieldsets) and fields to display
• fields type (eg. select, textarea, or Angular directive)
• elements to be displayed as block (with a fieldset)
• multilingual elements (ISO19139 only)
• ... (see XSD schema & documentation)

Example configuration for ISO19139

The editor form creation sequence

The process is the following:

a) Open the editor with catalog.edit service. Service: catalog.edit?id=<metadata_id>&tab=<tab_id>

• xslt/ui-metadata/editor.xsl is used and load the page layout

b) The EditorController load the form for the requested metadata or open the creation wizard if no record Service: md.edit?id=<metadata_id>&tab=<tab_id>

1. /xslt/ui-metadata/edit/edit.xsl : build the root element common to all schemas
2. /xslt/common/profiles-loader.xsl : load all schema XSLT's dispatcher
3. Call render- template
4. {schema}/layout/dispatcher.xsl :
5. load the editor configuration the schema (cf. config-editor.xml)
6. call the "menu-builder" mode for creating the view/tab navigation
7. find a match for the tab or fallback to default mode
8. call the "form-builer" mode
9. /xslt/ui-metadata/form-configurator.xsl :
10. from the tab configuration, search the matching nodes and create related section, fieldset, field by dispatching to the schema mode (eg. "dispatch-iso19139" then "mode-iso19139")
11. {schema}/layout/layout.xsl : Define for "mode-iso19139", the way elements are rendered (eg. fieldset for identification)
12. /xslt/ui-metadata/form-builder.xsl : Build the form element (ie. input, select, ...), Complex element may also link to a directive to use (eg. bounding box editor). The widget is then initialized in the browser.

Editor services:

• md.edit.save: save record in the editing session
• md.edit.save.close: save and close

Editor interface

Editor navigation

• Editor tab switcher menu: All views are accessible using the toggle button on the left. Tab order is defined in the editor configuration. When switching from one tab to another, the record is saved. When a view contains lots of tabs, some tabs are less used than other. Those tabs could be grouped in a "more" button like in the advanced view. Below is the tabs for the advanced view:

• The navigation menu allows control on:
• the view mode
• enable detailed field visualization
• enable tooltips

• On the left side, the scoll spy display the main section of the document and allows to quickly navigate from one to another. Current sections in the view are highlighted:

Add and remove elements

For each elements, buttons allow to add or remove them (according to the standards cardinality). The editor highlights elements to be removed. The form fields about to be removed by a delete button are highlighted in red.

For some fields (like extent), more advanced controls are available.

Ordering elements

For each elements, buttons allow to change the order of each elements as defined in the standard used.

Editor widgets

• Multilingual editing: When an ISO19139 record is multilingual, the editor provide the capability to edit multilingual fields using 2 different modes:
• A mode where all languages are displayed below each other for quicker edits. This mode could be enabled by default for some fields in the configuration (eg. title and abstract)
• A mode where the editor choose the language to display and edit

• Editor field suggestions: The localization files for a schema define "helper" to suggest frequent values for the editors

Keywords could be added as free text or from a thesaurus. When adding from a thesaurus, the list of available thesaurus in the catalog are available. Choose one on the list, to choose keywords from it:

Once selected, search for keywords could be made using:

• simple tags (default)

• or multiselection list

The keyword search is currently limited to the search in the user interface language. In some situation, you may try to edit a record in english with keywords in french. In that case, the list of keywords can't be modified and the content preserved in the metadata.

• Add contact from the contact dictionnary

• Add reference system from the EPSG database

• Set geographic bounding box

The bounding box could be defined using 4 text inputs. A list of regions allows to easily choose a country and define the bounding box. The user can also draw a custom rectangle on the map. A projection list define the projection used for the text inputs in order to directly define coordinates in a projection the user know.

Bounding box could also be a point (eg. sea temperature profiles).

• Country and language fields provide autocompletion (for ISO19139 and dublin core)

• Editing attributes are displayed next to the related form field. Attributes could be more details about a field like a date or management attributes like nil reason.

Save and cancel edits

In the editor toolbar, editor can easily save, validate, cancel or close the current record.

When a save occur, the status message is updated.

The cancel button restore the changes to the point where you started the editing session.

If the editor tries to close or reload the browser tab, a confirmation is displayed in order to not lose changes.

Standard help

When activated in the view menu, ...

... information about each sections or elements are displayed in the editor :

• Section help

• Help on a field when the element get focus

Other

• textarea adjust automatically to its content
• For record in ISO19139, date fields now supports date, datetime, month and year and year only values.

Validation report

Validation is based on standard validation (XML schema) and schematron. The validation report display validation status for the current record.

Suggestion panel

The suggestion panel provides to the editor recommendations and fixes to apply to current metadata record.

Relation panel

The relation panel provides option to define links with other resources (eg. file for download, thumbnails, source dataset, feature catalog, ...)

Publish vector or raster files, database tables as WMS, WFS, WCS

When a zipped shapefile is uploaded or a GIS file referenced in a record using FILE:GEO, FILE:RASTER or DB:POSTGIS protocols, then the following wizard suggest publication to GeoServer or MapServer using the REST API.

Editor configuration

Editor can be customized from the settings panel. The configuration defines a per schema configuration to enable/disable editor component:

{
    "iso19110": {
      "defaultTab": "default", 
      "displayToolTip": true,
      "related": {
        "display": true,
        "readonly": true,
        "categories": ["dataset"]
      },
      "validation": {
        "display": true
      }
    },
    "iso19139": {
      "defaultTab": "default", 
      "displayToolTip": false,
      "related": {
        "display": true,
        "categories": []
      },
      "suggestion": {
        "display": true
      },
      "validation": {
        "display": true
      }
    },
    "dublin-core":{
      "defaultTab":"default",
      "related": {
        "display": true,
        "readonly": true,
        "categories": []
      },
    }
}

The editor map configuration is also accessible from the settings:

{
  "useOSM":false,
  "context":"",
  "layer":     
    {
  "url":"http://www2.demis.nl/mapserver/wms.asp?","layers":"Countries","version":"1.1.1"},
  "projection":"EPSG:4326",
  "projectionList":["EPSG:4326","EPSG:3857"]
}

Directory manager

The directory manager provide one tab for each type of directory (mainly ISO19139 contact are supported for now). The list of entries in the selected directory is displayed on the left side and could be filtered. When choosing an entry, the editor is initialized. 2 views are available:

• classic editor view
• XML view

Editor could add new entries by duplicating an existing one or by importing an XML snippet:

Sceenshots

More screenshots: https://drive.google.com/?tab=mo&authuser=0#folders/0BwyvNKYgG4ZWdFdIUlVlQXU1V0k

Other improvements

This branch also contains admin console improvements:

• Formatter configuration https://docs.google.com/file/d/0BwyvNKYgG4ZWQjJHTXREcUZUWjQ/edit
• Error page on startup initialization error
• Contact us form (with an option in the settings to enable or not the form)
• Layout improvements (eg. cursor on all buttons, better horizontal forms, better user form validation)

Future improvements

• How to inject client side widget (ie. directive) for schema plugins ?
• No options to change the group the metadata is in from the UI.

Participants

• François Prunayre
• Florent Gravin
• Etienne Taffoureau
• Grégory Delobelle

This work is mainly supported by the GéoSource project.