Hierarchical Facet Display In Portal

Introduction

Currently the portal displays only "flat", or "one level" hierarchies, or no hierarchies when selecting facets. New Geonetwork development of hierarchical facets will enable the portal to display a hierarchy when deciding on which facet, or category to filter.

For the examples below, consider the following response coming back from Geonetwork:

<summary count="7" type="local">
  <dimension count="7" name="A">
    <category count="7" name="AA">
        <category count="3" name="AAA"/>
        <category count="4" name="AAB"/>
    </category>
    <category count="8" name="AB">
        <category count="6" name="ABA"/>
        <category count="2" name="ABB"/>
    </category>
  </dimension>
  <dimension count="3" name="B">
    <category count="1" name="BA" />
    <category count="1" name="BB" />
    <category count="1" name="BC" />
  </dimension>
  <dimension count="5" name="C">
    <category count="5" name="CA" />
    <category count="2" name="CB" />
  </dimension>
</summary>

The hierarchy is well defined in this response.

Data Modeling

For the data modelling it is natural to choose Ext.data.Tree (http://www.objis.com/formationextjs/lib/extjs-3.3.3/docs/output/Ext.data.Tree.html)

The representation of the data in the tree will always include the whole hierarchy per facet. So for instance the A facet will have an Ext.data.Tree object with the following:

[
    {
        name: 'AA',
        count: 7,
        childNodes: [
            {
                name: 'AAA',
                count: 3
            },
            {
                name: 'AAB',
                count: 4
            }
        ]
    },
    {
        name: 'AB',
        count: 8,
        childNodes: [
            {
                name: 'ABA',
                count: 6
            },
            {
                name: 'AAA',
                count: 2
            }
        ]
    }
]

Regardless of what will display, the data model will always include the whole hierarchy.

Presentation

Naturally if Ext.data.Tree was chosen to model the data, then Ext.tree.TreePanel (http://www.objis.com/formationextjs/lib/extjs-3.3.3/docs/output/Ext.tree.TreePanel.html) will make it easy to display it.

When displaying the facets there is a caveat. If no category is selected, we shall show a browsable tree, however if a category was selected, we'll show just the selected category with a checkbox next to it.

When No Category Selected

The tree will not be expanded by default.

When a category is not selected, we'll show a tree widget (Ext.tree.TreePanel), representing the hierarchical data and categories per facet (dimension).

When Category Selected

Assume AAC was selected, this is what the user should see:

When a category is selected, the familiar checkbox will be displayed next to the category.

In this "mode" the UI component we are going to use it not going to make use of the tree hierarchy at all and will just display a label with a checkbox next to it. Regardless, the facet data model will still hold the full hierarchy in the data model.

Search Results

Note: The search results (on the right hand side) should display the top level terms next to Platform and Parameter - not the low level terms we see now. The abstract should be removed and replaced with a link that reads "Read full metadata".

The intention is to move from this:

To something like this: