Data with the same data structure often be kept linearly in an array or object.
And when looking at such data, people tend to move from one to the next item and compare the difference.
For example, when user select data[0].properties.coords, he will see 3 panes.
And then he select data[1]. Instead of showing only 2 panes (data[1] and data[1].properties), it would make much better sense if the third pane kept opened, as one would select data[1].properties.coords.
Note that it makes sense only if those data has the same data structure.
var data = [
{
name: 'Bangkok',
properties: {
time: '+0700',
coords: '15 00 N, 100 00 E'
}
},
{
name: 'Tokyo',
properties: {
time: '+0900',
coords: '36 00 N, 138 00 E'
}
}
];
Psuedocode
On select item
prev <= previous selected item
cur <= newly selected item
parent <= first common parent to prev and cur
prev_base <= path to prev with parent and next level component removed
if (cur + prev_base) exists
focus cur + prev item with cur selected
else
focus and select cur
Data with the same data structure often be kept linearly in an array or object. And when looking at such data, people tend to move from one to the next item and compare the difference.
For example, when user select
data[0].properties.coords
, he will see 3 panes. And then he selectdata[1]
. Instead of showing only 2 panes (data[1]
anddata[1].properties
), it would make much better sense if the third pane kept opened, as one would selectdata[1].properties.coords
.Note that it makes sense only if those data has the same data structure.
Psuedocode