exhibit table row colour based on date field

[yee379]

hi, i have some data presented in an exhibit 'Tabular' view in which i
wish to colour the background of each row based upon the age of the
data for that row. i have a field called 'last_seen' which is a date
string representing the age.

i understand i should create an <div ex:role="coder"/> but i am at a
loss of how to conduct the date comparisons.

can anyone help?

[David Huynh]

The tabular view actually doesn't work with coders. You'd need to use
the rowStyler trick or a row template to color the rows yourself.

The presidents example uses the row template trick:
http://simile.mit.edu/exhibit/examples/presidents/presidents-2.html
Look in the HTML code where it says
ex:background-style-content="if(exists(.death), '#ccc', 'white')"

The rowStyler support is documented here
http://simile.mit.edu/wiki/Exhibit/2.0/Tabular_View
You'd need something like this in the row styler function to get the
last_seen field
var lastSeen = database.getObject(item, 'last_seen'); // this is a
string

David

[Yee-Ting Li]

thanks for the response David,

i'm attempting the rowStyler method. i'm using the exhibit trunk from
svn.

a couple of things;

- i always appear to get 4 extra blank rows on all table views in IE;
but not with firefox
- the database.getObject(item, 'last_seen') returns a null in IE but
is fine in firefox

Yee.

[yee379]

so i've found what appears to be a bug (or feature)

if i used the rowStyler like in the following

<div ex:role="view"
ex:viewClass="Tabular"
ex:label="Table"

ex:columns=".device, .vendor, .model, .software_version, .last_seen, .uptime, .label"
ex:columnLabels="device, vendor, model, sw_version,
last_seen, uptime, action"
ex:sortColumn="1"
ex:sortAscending="true"

ex:rowStyler="rowColour"
>

<tr>
<td><span ex:content=".device"></span></td>
<td><span ex:content=".vendor"></span></td>
<td><span ex:content=".model"></span></td>
<td><span ex:content=".software_version"></span></td>
<td><span ex:content=".last_seen"></span></td>
<td><span ex:content=".uptime"></span></td>
<td><span ex:content=".label"></span></td>
</tr>

</div>

then it works (with the relevant rowColour() function).

however, if i have the table content (ie all the <tr><td><span/></td></
tr>) wrapped up in a <table> element then the entire table get's a
single colour rather than colouring each row dependent upon the
function.

this is a problem because i need the <table/> wrapped around the spans
in order to basically allow customised sorting of the columns - which
appears to require that the column contents must be in a <table/>
element. this is shown in the following example (note that this is a
different view to the one above) where i sort by a network 'port':

http://www/~ytl/exhibit/ports.html

however, if i leave out the <table/>, then it doesn't show the correct
content on the sorted column (ie it just shows the label, rather than
the actual port):

http://www/~ytl/exhibit/ports-notsorted.html

i think a viable solution would be to allow the <table/> element to
contain the ex:rowStyler attribute.

cheers,

[David Huynh]

I remember that the last time I looked at your exhibit in IE, it has 4
extra bogus items compared to in Firefox. I don't know what caused these
extra items to be generated in IE, maybe superfluous commas? You might
want to start with a simpler data set and make it more and more like the
full data set and see where the extra items start to appear, thus,
locating the problem.

David

[David Huynh]

Could you give us full URLs? http://www/ will not work for us.

David

[Yee-Ting Li]

ops, sorry...

http://www.slac.stanford.edu/~ytl/exhibit/ports.html
http://www.slac.stanford.edu/~ytl/exhibit/ports-notsorted.html

Yee.

[David Huynh]

The <h3>...</h3> part is interfering with the view. The <table> element
must be the first element inside the <div>. Try to remove the <h3> element.

David

[Yee-Ting Li]

On 10 Dec 2008, at 16:56, David Huynh wrote:
> The <h3>...</h3> part is interfering with the view. The <table>
> element
> must be the first element inside the <div>. Try to remove the <h3>
> element.

Hi, i've updated the same files to not include the <h3/> tag... still
the same :(

relating to the IE issue of the 4 empty rows; it appears to also be
related to this <table/> tag within the tabular view. if you look at
the same two sites with IE, the four rows are present when we have the
<table/> tag, but it's perfectly good when we don't use it.

cheers,

Yee.

>> http://www.slac.stanford.edu/~ytl/exhibit/ports.html
>> http://www.slac.stanford.edu/~ytl/exhibit/ports-notsorted.html

[precar]

I'm also seeing "4 results out of ... cannot be plotted" only in IE
(http://pranshuarya.com/photoblog/series/Nmtrip/nmtrip.html).

David, I considered your suggestion and checked my data, and re-
validated it in Babel to be sure it's free of syntax errors. I'm a
bit unclear on the table problem you guys are already discussing
above. Is it relevant to my exhibit?


Pranshu

> >>http://www.slac.stanford.edu/~ytl/exhibit/ports-notsorted.html- Hide quoted text -
>
> - Show quoted text -

[David Huynh]

precar wrote:
> I'm also seeing "4 results out of ... cannot be plotted" only in IE
> (http://pranshuarya.com/photoblog/series/Nmtrip/nmtrip.html).
>
> David, I considered your suggestion and checked my data, and re-
> validated it in Babel to be sure it's free of syntax errors. I'm a
> bit unclear on the table problem you guys are already discussing
> above. Is it relevant to my exhibit?
>

I got a "not found" for that URL now.

David

[David Huynh]

Yee-Ting Li wrote:
> On 10 Dec 2008, at 16:56, David Huynh wrote:
>
>> The <h3>...</h3> part is interfering with the view. The <table>
>> element
>> must be the first element inside the <div>. Try to remove the <h3>
>> element.
>>
>
>
> Hi, i've updated the same files to not include the <h3/> tag... still
> the same :(
>
> relating to the IE issue of the 4 empty rows; it appears to also be
> related to this <table/> tag within the tabular view. if you look at
> the same two sites with IE, the four rows are present when we have the
> <table/> tag, but it's perfectly good when we don't use it.
>

I'm not seeing rowStyler anymore...

About the extra 4 rows in IE, I'm not sure what the problem is, but I'd
suggest one thing: there are extra spaces in many of the labels in your
data, e.g.,

"label":" 1",
Note the spaces in front of 1. You should remove those spaces and see if
that helps.

David

[Yee-Ting Li]

On 14 Dec 2008, at 16:47, David Huynh wrote:
> I'm not seeing rowStyler anymore...

that is correct, i removed the styler to demonstrate that that if i
removed the <table/> element from within the <div ex:role="view"
ex:viewClass="Tabular"/> i can no longer have customisable sorting of
columns.

as i mentioned on the previous email, the rowStyler works only when
there is no <table/> tag within the <div> (otherwise it appears to
colour the entire table)

> "label":" 1",
> Note the spaces in front of 1. You should remove those spaces and
> see if
> that helps.

i changed the json to remove the whitespaces; looking at:

http://www.slac.stanford.edu/~ytl/exhibit/ports.html

... i still get the 4 erroneous rows.

it is *ONLY* if i remove the <table/> def in the <div> that the rows
do not appear:

http://www.slac.stanford.edu/~ytl/exhibit/ports-notsorted.html

so it appears to be that we have three separate bugs that are caused
by the same <table/> tag with the <div/>:

1) i can not get customisable sorting of the 'port' column /unless/ i
have the <table/> tag

2) the rowStyler does not work for independent rows when i have the
<table/> tag

and

3) i always get 4 erroneous empty rows in IE when i use the <table/>
tag.

Cheers,

Yee.

[David Huynh]

You're right: there is a bug in the tabular view in which if there's a
row template, then the rowStyler function is called with the TBODY
element instead of the TR element corresponding to the row. You can hack
around it as I've done in this example:

http://people.csail.mit.edu/dfhuynh/misc/tabular-view/presidents.html

Note the line
tr = tr.rows[index + 1];
That hack seems to work on Firefox 3, Google Chrome, and IE 8 on Windows.


There is also a bug in the database code that causes the
database.getAllItems() to return 4 extra bogus items. I've checked in a
fix, but it won't be released just yet. So for now, to work around it,
you'd need to include this code after linking to exhibit-api.js:

<script>
Exhibit.Database._Impl.prototype.getAllItems = function() {
var ret = new Exhibit.Set();
var self = this;

this._items.visit(function(item) {
if (!self.isSubmission(item)) {
ret.add(item);
}
});

return ret;
};
</script>

Please let me know if that works for you.

David

[Yee-Ting Li]

Great - thanks David! :)

On 14 Dec 2008, at 22:39, David Huynh wrote:
> Note the line
> tr = tr.rows[index + 1];
> That hack seems to work on Firefox 3, Google Chrome, and IE 8 on
> Windows.

yep; works great :) will this be fixed on the svn trunk?

> Exhibit.Database._Impl.prototype.getAllItems = function() {

works great too :)

i remember a while back i pointed you to a display bug involving the
lenses on a table view; basically if the table width was too wide for
the browser display, then the lens would popup at the top of the page,
often off screen if the table list is long. did you have a chance to
look into this?

keep up the great work ;)

Yee.