Timeline patches
Karl Seamon
I've made some patches against the timeline trunk that are mostly
focussed on performance of loading json and scrolling when the number
of events is very high (5000+). I profiled in both FF3/firebug 1.3 and
in a recent webkit nightly. I'll be citing figures from FF3/firebug.
date-time.js_optimizeNullDates.diff
This change makes a huge difference in json load times when there are
a lot of single date events. The parseIso8601DateTime function was
previously taking 60-70% of load time, and with this patch takes less
than 1%. This patch is far and away the most important of the one's
I'm providing.
compact-painter.js_cacheDiv.diff
original-painter.js_cacheDiv.diff
overview-painter.js_cacheDiv.diff
These patches modify the painters to pre-cache some of the event divs
and then uses cloneNode. Depending on the function, it improves
performance of those calls by 3-10%. Not the most amazing improvement
ever, but it is something.
band.js_cacheViewWidth.diff
Optimizes band.js's getViewWidth function by caching the width in a
member variable instead of doing dom lookups. When scrolling, this
function is responsible for 90% of reported runtime. With this patch,
it goes to less than 1%.
compact-painter.js_minPixel.diff
original-painter.js_minPixel.diff
overview-painter.js_minPixel.diff
These are the only patches that are not performance related. They
modify the painters to guarantee that all tape divs are at least one
pixel wide. This solves a problem I was having where some events were
invisible at certain zoom levels.
Additionally, I've included a python script that I wrote to generate
my test json files and the test.html file I was using with them.
Larry Kluger
Thanks very much.
Did you test your patches against the examples in the Timeline trunk?
Regards,
Larry
From: Karl Seamon <bannan...@gmail.com>
To: simile-...@googlegroups.com
Sent: Sunday, May 10, 2009 6:27:53 PM
Subject: Timeline patches
- SIMILE Widgets
- Timeline
- Examples
- Event Attribute Tests
Event Attribute Tests
This test uses JSON data.
It demonstrates use of various event attributes color, textColor, tapeImage, and tapeRepeat. Details
Test numbers:
- Only start date
- Start and end dates. Combinations of isDuration
- Red tapes. Events without titles. Start and end dates. Combinations of isDuration
- Caption and tapeImage attributes. The striped tape. Hover over the label or tape to view the caption.
- Really long labels. They should not wrap
- Permutations of bad dates. Test that error messages are shown in all browsers including IE
- Event has classname attribute. CSS is used to modify the event's display. For event with classname of special_event, use css selectors:
- .tape-special_event for the tape in a main band
- .label-special_event for the label
- .icon-special_event for the icon
- .highlight-special_event for the highlight div
- In addition to the above, the elements also have a class of just special_event. So the selector .special_event can be used generically for all of the above elements, depending on your goals.
- The events in the overview band will have class .small-special_event for the tape or tick.
- Default Timeline Theme is modified (see html file source).
- Modified theme: thicker event tapes and increased track size appropriately to match.
- Modified theme: Popup bubble dimensions set explicitly.
Timeline version .
Stripe courtesy of Stripe Generator.
Karl
version of test_example. I can probably get the others tested later
tonight, but just in webkit and firefox (no IE for mac).
On May 10, 6:45 pm, Larry Kluger <larryk...@yahoo.com> wrote:
> Hi Karl,
>
> Thanks very much.
>
> Did you test your patches against the examples in the Timeline trunk?
>
> Regards,
>
> Larry
>
> ________________________________
>
> SIMILE Widgets | Timeline | Examples | Test Example
> * SIMILE Widgets
> * Timeline
> * Examples
> * Event Attribute Tests
> This test uses JSON data.
> It demonstrates use of various event attributes color, textColor, tapeImage, and tapeRepeat. Details
> Test numbers:
> 2. Start and end dates. Combinations of isDuration
> 3. Red tapes. Events without titles. Start and end dates. Combinations of isDuration
> 4. Caption and tapeImage attributes. The striped tape. Hover over the label or tape to view the caption.
> 5. Really long labels. They should not wrap
> 6. Permutations of bad dates. Test that error messages are shown in all browsers including IE
> 7. Event has classname attribute. CSS is used to modify the event's display. For event with classname of special_event, use css selectors:
> * .tape-special_event for the tape in a main band
> * .label-special_event for the label
> * .icon-special_event for the icon
> * .highlight-special_event for the highlight div
> * In addition to the above, the elements also have a class of just special_event. So the selector .special_event can be used generically for all of the above elements, depending on your goals.
> * The events in the overview band will have class .small-special_event for the tape or tick.
> Additional features demonstrated:
> * Default Timeline Theme is modified (see html file source).
> * Modified theme: thicker event tapes and increased track size appropriately to match.
> * Modified theme: Popup bubble dimensions set explicitly.
Larry Kluger
Any known api or behavior changes from the patches?
Thanks again for your time on this,
Larry
From: Karl <bannan...@gmail.com>
To: SIMILE Widgets <simile-...@googlegroups.com>
Sent: Sunday, May 10, 2009 6:56:03 PM
Subject: Re: Timeline patches
Karl
1px wide. APIs should still be the same.
On May 10, 7:00 pm, Larry Kluger <larryk...@yahoo.com> wrote:
> Thanks Karl, the additional testing is appreciated.
>
> Any known api or behavior changes from the patches?
>
> Thanks again for your time on this,
>
> Larry
>
> ________________________________