FeatureInfo responses as a Vertical List

[GoogleCodeExporter]

The ability for the implementer to set it so that the result for a 
FeatureInformation request appears as a single vertically aligned result. 

Example of vertical result: 
http://lynx-info.com/images/software-arcextns/clickrelate_arcmap.png - see also 
attached.

    - If results from multiple layers, use tabs as the current FeatureInfo result does.
    - If multiple results within a single layer, allow the user to "scroll" between them using Obvious Left <- and right -> arrows.
    - A button that the user can use to swap between vertical results and the (current) horizontal layout and back again.
    - For search results (i.e. multi search centre), an icon (about the same size as the "+" icon for expanding panels) next to the left of each result that allows the user to open that individual result in a vertical pane for easier reading.

I'm Open to better user interfaces for this if anyone has one. I'm not entirely 
happy with this one, at least not the bits where the user has multiple results, 
but it's the best we could think up.

Original issue reported on code.google.com by jonathan...@warwickshire.gov.uk on 3 Dec 2013 at 4:02

Attachments:

• [vertical_list - arc 10.png](https://storage.googleapis.com/google-code-attachments/geoext-viewer/issue-317/comment-0/vertical_list - arc 10.png)

[GoogleCodeExporter]

Original comment by rinke.he...@gmail.com on 20 Dec 2013 at 12:53

• Changed state: Started

[GoogleCodeExporter]

Committed first implementation in revision: 1236
Ready for testing.

A new example featureinfopopupvertical will open with the vertical view.
(displayPanel = ['Detail','Table'])

For non-programming users I've named the buttons as follows:
- Table: the "regular" grid layout 
- Detail: the vertical layout (is in fact a propertyGrid)

Configurable in config.js:
displayPanel = ['Table','Detail']
The first item will be the view to open with, when selecting features in the 
map.
You can also set only one displayPanel. Default is 'Table'.

Selections work just like it did without the vertical list.
So selecting a row in the Table will select the feature in the map.
Switching to Detail will open with the first selected record in the Table grid. 
If no selection was active it will open with the first record in the store.
Walking through the Detail records will select the corresponding feature in the 
map.

The '+' in the Table will only appear as first column when displayPanel 
'Detail' is configured.
It will open the record as Detail and will set the selected feature in the map.

Original comment by rinke.he...@gmail.com on 14 Jan 2014 at 9:44

• Changed state: Fixed

Attachments:

• FeatureInfoDetail.png

[GoogleCodeExporter]

Reopened, as finding some problems with existing examples that use featurePanel:
For example in
lib.heron-mc.org/heron/latest/examples/multisearchcenternl/
The error:

    Uncaught TypeError: undefined is not a function SearchCenterPanel.js:236
    Heron.widgets.search.SearchCenterPanel.Ext.extend.onSearchSuccess SearchCenterPanel.js:236
    Heron.widgets.search.MultiSearchCenterPanel.Ext.extend.onSearchSuccess MultiSearchCenterPanel.js:265
    h.Event.fire ext-all.js:21
    h.Observable.fireEvent ext-all.js:21
    Heron.widgets.search.SpatialSearchPanel.Ext.extend.onSearchSuccess SpatialSearchPanel.js:510
    Heron.widgets.search.SpatialSearchPanel.Ext.extend.onSearchComplete SpatialSearchPanel.js:497
    Heron.widgets.search.SearchByDrawPanel.Ext.extend.onSearchComplete SearchByDrawPanel.js:193
    h.Event.fire ext-all.js:21
    h.Observable.fireEvent ext-all.js:21
    response.protocol.read.callback SpatialSearchPanel.js:632
    OpenLayers.Protocol.WFS.v1.OpenLayers.Class.handleRead OpenLayers.js:843
    (anonymous function) OpenLayers.js:413
    (anonymous function) OpenLayers.js:62
    OpenLayers.Request.runCallbacks OpenLayers.js:509
    d.onreadystatechange OpenLayers.js:508
    b.dispatchEvent OpenLayers.js:751
    c OpenLayers.js:744
    _object.onreadystatechange

I think not all occurrences of FeatureGridPanel have been renamed to 
FeaturePanel.
I already fixed the build file heron/build/full.cfg. 

The example for this issue is:
http://lib.heron-mc.org/heron/latest/examples/featureinfopopupvertical
No errors there.

Original comment by jus...@gmail.com on 14 Jan 2014 at 11:18

• Changed state: Started
• Added labels: Milestone-Release1.0.1

[GoogleCodeExporter]

Hi Rinke,
Thanks for your work on this, it looks good.

Observations:
a) I'd suggest the Table|Detail button be a toggle rather than two separate 
buttons. So the user clicks it when it says "Table" and they get a table, but 
the button then changes to say "Detail". Otherwise one of the buttons will 
always be superfluous.
b) When viewing in detail mode, it should say "Result 1 of 4" or "Result 3 of 
4" or whichever numbers depending on which entry is being viewed.
c) Can the "Name" column in Detail have the names in bold (or some other, 
nicely configurable style)? This will help visually differentiate the column 
names from the values.
d) Tooltip for "Detail" icon - I'd suggest changing to: "Show single record"

Original comment by jonathan...@warwickshire.gov.uk on 14 Jan 2014 at 11:45

[GoogleCodeExporter]

Found another issue: when FeaturePanel.showTopToolbar = false, then the 
following error occurs:

    Uncaught TypeError: Cannot read property 'items' of undefined FeaturePanel.js:797
    Heron.widgets.search.FeaturePanel.Ext.extend.removeFeatures FeaturePanel.js:797
    Heron.widgets.search.FeaturePanel.Ext.extend.loadFeatures FeaturePanel.js:741
    Heron.widgets.search.FeatureInfoPanel.Ext.extend.displayFeatureInfo FeatureInfoPanel.js:860
    Heron.widgets.search.FeatureInfoPanel.Ext.extend.displayFeatures FeatureInfoPanel.js:718
    Heron.widgets.search.FeatureInfoPanel.Ext.extend.handleGetFeatureInfo FeatureInfoPanel.js:505
    OpenLayers.Events.OpenLayers.Class.triggerEvent OpenLayers.js:135
    OpenLayers.Control.WMSGetFeatureInfo.OpenLayers.Class.triggerGetFeatureInfo OpenLayers.js:1312
    OpenLayers.Control.WMSGetFeatureInfo.OpenLayers.Class.handleResponse OpenLayers.js:1313
    callback OpenLayers.js:1310
    (anonymous function) OpenLayers.js:62
    OpenLayers.Request.runCallbacks OpenLayers.js:509
    d.onreadystatechange OpenLayers.js:508
    b.dispatchEvent OpenLayers.js:751
    c OpenLayers.js:744
    _object.onreadystatechange OpenLayers.js:748

I think this check should also include the presence of a topToolbar:

        if (this.topToolbar.items.get('prevrec')){
            this.topToolbar.items.get('prevrec').setDisabled (true);
            this.topToolbar.items.get('nextrec').setDisabled (true);
        }

Original comment by jus...@gmail.com on 14 Jan 2014 at 11:50

[GoogleCodeExporter]

Sorry to bother again. In the example:

http://lib.heron-mc.org/heron/latest/examples/featureinfopopup

When there are results the table-grid remains empty.

Original comment by jus...@gmail.com on 14 Jan 2014 at 11:53

[GoogleCodeExporter]

In rev 1240 blocking errors in examples should have been resolved:

Update of examples and scripts using FeaturePanel.js
Mostly deprecated displayPanels :['Grid',..... removed. and some local paths 
removed in old examples.
FeaturePanel.js: better support for showTopToolbar=false
SearchCenterPanel.js: rename of FeatureGridPanel -> FeaturePanel

Original comment by rinke.he...@gmail.com on 14 Jan 2014 at 3:19

[GoogleCodeExporter]

Hi Jonathan,

Your suggestions:

a) I'd suggest the Table|Detail button be a toggle rather than two separate 
buttons. So the user clicks it when it says "Table" and they get a table, but 
the button then changes to say "Detail". Otherwise one of the buttons will 
always be superfluous.

Good point.

b) When viewing in detail mode, it should say "Result 1 of 4" or "Result 3 of 
4" or whichever numbers depending on which entry is being viewed.

That's a good idea

c) Can the "Name" column in Detail have the names in bold (or some other, 
nicely configurable style)? This will help visually differentiate the column 
names from the values.

Suppose it can, I will need to have a look into that (might be last priority).

d) Tooltip for "Detail" icon - I'd suggest changing to: "Show single record"

OK

Original comment by rinke.he...@gmail.com on 14 Jan 2014 at 3:31

[GoogleCodeExporter]

I've uploaded http://lib.heron-mc.org/heron/latest/examples with latest revs 
(see comment #7). Looks like the issues are resolved, but all pls check (go to 
examples using FeaturePanel, e.g. all "search" and GFI examples.

Original comment by jus...@gmail.com on 14 Jan 2014 at 4:05

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

In rev 1243 I made the following enhancements

Detail/Table toggle
As soon as Prev, Next, Table or Detail button is used it works as supposed to 
be.
But when loading the FeaturePanel after fearures selection I first get two 
buttons. Even when I set the appropriate button to hidden in initialize they 
still show both.

Toolbar text "Result 1 of 2" when Detail

Tooltips changed on Detail/Table to "Show single record" and "Show info in a 
table grid". Was about to change the last to "Show multiple records" but that's 
not right when having only one record.

Original comment by rinke.he...@gmail.com on 15 Jan 2014 at 12:42

[GoogleCodeExporter]

> Was about to change the last to "Show multiple records" but that's not right 
when having only one record.
Yep, that's why I didn't suggest a change to the table tooltip; most users 
should be able to figure out what a table grid is. :-)

Original comment by jonathan...@warwickshire.gov.uk on 15 Jan 2014 at 12:52

[GoogleCodeExporter]

Uploaded examples for revision 1243:

http://lib.heron-mc.org/heron/latest/examples/featureinfopopupvertical

Quick remarks:

* it starts with 2 buttons (Detail and Table) in Detail view. Should be one 
(Table) IMO.
* in Table View the left/right arrows are better removed than disabled
* we need to add the new strings like __('Detail') to i18N files, at least Eng 
and Dutch. I can help.

(you may have noticed a minor hickup accessing the site example, in particular 
cgi. this is since, well almost silently, the complete heron-mc.org domain 
today moved to a new server...)

Original comment by jus...@gmail.com on 15 Jan 2014 at 1:18

[GoogleCodeExporter]

Hi Just,

* it starts with 2 buttons (Detail and Table) in Detail view. Should be one 
(Table) IMO.
You are right. The 2 button start is what I mentioned in my comment. At this 
moment I could not figure out why both buttons show even if I set one of them 
to hide in the startup and through the displayVertical/displayGrid method. 
I noticed setActiveItem is nog reached the first time activateItem is called:
    activateDisplayPanel: function (name) {
        // Main panel layout not yet available?
        // At least not available first time called.
        if (!this.mainPanel.getLayout().setActiveItem) {
            return;
        }
        // Show displaypanel.
        this.mainPanel.getLayout().setActiveItem("grd_"+name);
    },

* in Table View the left/right arrows are better removed than disabled
The reason I disable them is to avoid (dis)appearing buttons all the time when 
switching to and fro. But if we agree to remove it's OK with me. 
Might give same problem as your first remark.

* we need to add the new strings like __('Detail') to i18N files, at least Eng 
and Dutch. I can help.
Is it just a matter of appending lines with new strings?
What happens if we do not translate all languages?

Original comment by rinke.he...@gmail.com on 15 Jan 2014 at 1:44

[GoogleCodeExporter]

I concur with Just's observations including the arrows disappearing in Table 
view.

Looking good!

Original comment by jonathan...@warwickshire.gov.uk on 15 Jan 2014 at 1:46

[GoogleCodeExporter]

Hi Rinke,

I do not have complete answers for the buttons/widgets appearance. I would need 
to go through the entire code of FeaturePanel.js. Some general remarks:

* you may want to use ExtJS events. You can get a more loose coupling between 
functionalities, less if-statements. 
* use of function pointers. for example dependent on the view-mode this.display 
could points to a different function 

At some point later I would like to add an HTML view-mode. E.g. for WMS GFI 
that return HTML.

* we need to add the new strings like __('Detail') to i18N files, at least Eng 
and Dutch. I can help.
If no translation is found the string in __('thestring') will be displayed.
Adding is easy, for English and Dutch append
 the new strings at the end of the files. heron/i18n/en_US.js and heron/i18n/nl_NL.js. Put the upcoming version number (1.0.1) in the comment. That way other translaters may see what has been added in each version and extend their language files. This happens quite often.

Original comment by jus...@gmail.com on 16 Jan 2014 at 1:28

[GoogleCodeExporter]

Forgot: for the i18n files it is important that they remain in UTF-8 encoding.

Original comment by jus...@gmail.com on 16 Jan 2014 at 1:30

[GoogleCodeExporter]

Hi Just,

I'm almost done with recoding the buttons to a true toggle button, solves the 
problem of the two buttons, but may result in a pressed state....
I give it a try to do the strings too.

Original comment by rinke.he...@gmail.com on 16 Jan 2014 at 2:04

[GoogleCodeExporter]

rev 1254: The Table/Detail button is now a real one button toggle
When pressed it goes back to unpressed with the other icon etc.

Also previous and next buttons now removed when not needed.

I'll do the strings tomorrow.

Original comment by rinke.he...@gmail.com on 16 Jan 2014 at 3:07

[GoogleCodeExporter]

Ok, thanks Rinke, I see that the post-commit hook is working good, your commit 
is immediately online:

http://lib.heron-mc.org/heron/latest/examples/featureinfopopupvertical

Switching between Detail and Table works ok when using the respective 
icon-buttons. It is only when in Table-view, when clicking the '+' in the first 
column, the view switches to Detail ok, but the button does not toggle from 
Detail to Table.

Original comment by jus...@gmail.com on 16 Jan 2014 at 7:33

[GoogleCodeExporter]

Just thanks for your hints!
I made some more event handlers and think I've got the buttons working good now.
Also fixed selecting the feature in the map when opening in Detail.
I will do some testing myself after lunch and will add the strings before a new 
revision.

Original comment by rinke.he...@gmail.com on 17 Jan 2014 at 11:31

[GoogleCodeExporter]

Rev 1255
Toggle Table/Detail also when '+' used
Arrow buttons only visible when needed, also on first call

I also added strings in en_US.js saved as UTF-8 Unix
The en_NL.js file gave an error in my editor on special characters.
Should contain about this (can you add this Just?):

    // 1.0.1
    'Details': 'Details',
    'Table': 'Tabel',
    'Show record(s) in a table grid': 'Tonen als tabel',
    'Show single record': 'Toon details van een rij',
    'Show next record': 'Toon volgende',
    'Show previous record': 'Toon vorige'

Original comment by rinke.he...@gmail.com on 17 Jan 2014 at 3:34

[GoogleCodeExporter]

Hi Rinke,
Excellent work.
Minor observation - when toggling between detail/table, the tooltip doesn't 
change unless the mouse is moved. (Not important to fix if it's more than 2mins 
work).

-----
Bug:
1) Click on a location that will return lots of features (i.e. 4).
2) Result page pops up in detail mode. Click "clear" 0 results.
3) Go to Table Mode. 0 results
4) Go back to detail mode - "Result 1 of 0".

Sometimes it also says the wrong number of results on the "Table" toggle under 
these circumstances, but I can't replicate it 100%.

Original comment by jonathan...@warwickshire.gov.uk on 17 Jan 2014 at 4:45

[GoogleCodeExporter]

Rev 1256
Fixed the bug on incorrect Result text.
Text is set to "0 Results" whenever no objects are in store.

I tried to refresh tooltip by firing events mouseout and mouseover, but had no 
effect.

Original comment by rinke.he...@gmail.com on 20 Jan 2014 at 10:26

[GoogleCodeExporter]

See comment #22 issue 317#c22: added the Dutch translations.

Original comment by jus...@gmail.com on 20 Jan 2014 at 2:06

[GoogleCodeExporter]

Rev 1271
Small modification due to issue 333 (column width)

Original comment by rinke.he...@gmail.com on 23 Jan 2014 at 2:43

• Changed state: Fixed

[GoogleCodeExporter]

Problem with the gridCellRenderers - please have a look at this issue:
http://code.google.com/p/geoext-viewer/issues/detail?id=333#c14

Original comment by wolfram.winter on 28 Jan 2014 at 11:21

[GoogleCodeExporter]

I will have look whether the rendering is possible in the detail view

Original comment by rinke.he...@gmail.com on 29 Jan 2014 at 8:49

[GoogleCodeExporter]

The gridCellRenderers are quite different compared to propertyGrid 
customRenderers
Been trying to get the rendering of the defined gridCellRenderers to the 
propertyGrid customRenderes, but after a morning work I doubt if it is 
possible. 
It is taking too much time at this moment as there are more issues to proceed 
with.

Original comment by rinke.he...@gmail.com on 29 Jan 2014 at 12:15

[GoogleCodeExporter]

rev 1289
Fixed detailcolumn in tableGrid: Always as first and only once when gridColumns 
are defined.

Original comment by rinke.he...@gmail.com on 29 Jan 2014 at 1:40

[GoogleCodeExporter]

Hi Rinke,
A question.
I've enabled it using:
            displayPanels: ['Detail','Table'],

And it works great. However, the vertical result *always* comes up no matter if 
there's 1 result or 100. Per the original ticket, how do I set a threshold for 
when results will be in Detail and when in Table?
I'd suggest either 1 or 4 is probably a good default.

if num_results > Threshold:
  Use_Table()
Else:
  Use_Detail()

Thanks,
Jonathan

Original comment by jonathan...@warwickshire.gov.uk on 11 Mar 2014 at 1:45

[GoogleCodeExporter]

Original comment by jonathan...@warwickshire.gov.uk on 14 Mar 2014 at 12:26

• Changed state: Started

[GoogleCodeExporter]

Jonathan,

I'm sorry but I don't see anything about threshold in this Issue (starting from 
#0) nor in DevPlanDecJan1314.

The features to implement were those:
- If results from multiple layers, use tabs as the current FeatureInfo result 
does.
- If multiple results within a single layer, allow the user to "scroll" between 
them using Obvious Left <- and right -> arrows.
- A button that the user can use to swap between vertical results and the 
(current) horizontal layout and back again.
- For search results (i.e. multi search centre), an icon (about the same size 
as the "+" icon for expanding panels) next to the left of each result that 
allows the user to open that individual result in a vertical pane for easier 
reading.

I believe I implemented all those as requested.

Original comment by rinke.he...@gmail.com on 14 Mar 2014 at 12:47

• Changed state: Ready

[GoogleCodeExporter]

Hi Rinke,
    I didn't use the term "threshold", but that's what these two lines mean:
"
- If results from multiple layers, use tabs as the current FeatureInfo result 
does.
- If multiple results within a single layer, allow the user to "scroll" between 
them using Obvious Left <- and right -> arrows.
"

So the "threshold" in the original specification was an implied 1; If there's a 
single result it should be detailed view, if there are multiple results it 
should be table view.

If it is currently implemented I can't see this behaviour, thus my question.

I realise it's a fairly small thing, and I wouldn't normally follow it up in 
the same ticket, but this one has a significant effect on usability which is 
why I specified it in the original ticket and even the request for quote itself.
Cheers,
Jonathan

Original comment by jonathan...@warwickshire.gov.uk on 14 Mar 2014 at 12:58

• Changed state: Started

[GoogleCodeExporter]

Hi Jonathan (and Just),

@Just: can you check this whether I'm misreading anything?

- If results from multiple layers, use tabs as the current FeatureInfo result 
does.
As you can see in the attached "heron_317_tabs.png" tabs appear when results 
from multiple layers.
So I implemented the tabs in the same way as the tabs appear in tabular view. 
It makes no sense to me to switch to tabular view tabs as soon results come 
from multiple layers.

- If multiple results within a single layer, allow the user to "scroll" between 
them using Obvious Left <- and right -> arrows.
"
See the attached heron_317_arrows.png. I.m.o. it is exactly as requested.
If multiple result had to be in table view it would have saved me a lot of time 
for not having to implement the arrows.

For both points:
If this was not the supposed behavior it would have been appropriate to comment 
this after my first implementation as in #2 comment on Jan 14th (see also the 
png in that comment, containing tabs and arrows).

Rereading all of it (even the request for quote), I still cannot read anywhere 
to switch to tabular (grid) view as soon as there are multiple results. You can 
switch to tabular by pressing the "Table" button and the "+" or "Detail" button 
to go back to detailed view.
I suppose you confuse tabs with tabular view, but tabular view was introduced 
by me, as it was previously called Grid View. The tabs must refer to the 
TabPanel previously only used for the Grid, but now also for the Detail view.

Original comment by rinke.he...@gmail.com on 14 Mar 2014 at 1:41

• Changed state: Ready

Attachments:

• heron_317_tabs.png
• heron_317_arrows.png

[GoogleCodeExporter]

Hi Rinke,
"- If results from multiple layers, use tabs as the current FeatureInfo result 
does."
You're quite right about this. I was mis-reading it as "tables". Sorry about 
that.

----

"If multiple result had to be in table view it would have saved me a lot of 
time for not having to implement the arrows."
Ah, apologies here, I've not been clear. We do want the arrows and they do do 
exactly what we want.
Again I have absolutely no issues with any current aspect of it. I see now that 
my request wasn't as explicitly stated as I though.

Basically what I envisaged but failed to clearly elucidate:
 - The implementer can set up a threshold for when the results appear in grid format or detailed format.
If you like I can likely do it myself - it'll likely only take about a single 
if statement plus variable declarations. The longest time will be finding where 
in the code to put the if statement.

Sorry again for not being clearer.

Original comment by jonathan...@warwickshire.gov.uk on 14 Mar 2014 at 2:00

[GoogleCodeExporter]

Hi Jonathan,

It would take some time to find the right place in the code for myself as well 
as I last worked on this widget in January.
It's fine with me if you implement this behaviour.

Best would be to put this in a new Issue as I see it. Otherwise it will be 
getting even more confusing I suppose. This issue (317) should be closed.

Original comment by rinke.he...@gmail.com on 14 Mar 2014 at 2:45

[GoogleCodeExporter]

Sure, no problem. Thanks again,
Jonathan

Original comment by jonathan...@warwickshire.gov.uk on 14 Mar 2014 at 2:55

• Changed state: Verified