Disappearing events in timeline if OverlapSortSpecifiers is defined

[miskolczi.peter]

Smart GWT 4.0p (SmartClient Version: v9.0p_2013-08-13/PowerEdition Deployment (built 2013-08-13))

We noticed a ciritcal bug since we use the new rendering option for timeline: OverlapSortSpecifiers.

If overlapSortSpecifiers is defined, then the event #2 can't be seen on the timeline grid (see screen shot "Missing #2 if OverlapSortSpecifiers is given.png")

If we do not specify these specifiers #2 event comes back (see screen shot "Event #2 is visible if OverlapSortSpecifiers is not defined.PNG")

Below is the source code to repeat.

Thank you for your help!

import java.util.Date;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.data.SortSpecifier;
import com.smartgwt.client.types.SortDirection;
import com.smartgwt.client.types.TimeUnit;
import com.smartgwt.client.widgets.calendar.CalendarEvent;
import com.smartgwt.client.widgets.calendar.HeaderLevel;
import com.smartgwt.client.widgets.calendar.Lane;
import com.smartgwt.client.widgets.calendar.Timeline;

public class TestDisappearingTimelineEvent implements EntryPoint {
	
	private static Date today = new Date();   
	private static int year = today.getYear();   
	private static int month = today.getMonth();   
	private static int day = today.getDate() - today.getDay();   	

	@Override
	public void onModuleLoad() {
		Timeline timeline = new Timeline();
		
    	timeline.setCanResizeTimelineEvents(false);   
    	timeline.setCanEditLane(false);   
    	timeline.setShowEventDescriptions(false); 
    	timeline.setDefaultTimelineColumnSpan(1);
    	timeline.setTimelineUnitsPerColumn(1);
    	timeline.setColumnsPerPage(24); 
    	
    	HeaderLevel hlHour = new HeaderLevel(TimeUnit.HOUR); 
    	hlHour.setHeaderWidth(60);
        HeaderLevel[] headerLevels = new HeaderLevel[]{   
               hlHour   
        };   
        timeline.setHeaderLevels(headerLevels);
        
        SortSpecifier[] overlapSortSpecifiers = { 
				new SortSpecifier("order", SortDirection.DESCENDING), 
				new SortSpecifier("startDate", SortDirection.ASCENDING)};
        
        timeline.setOverlapSortSpecifiers(overlapSortSpecifiers);
		
		timeline.setLanes(getLanes());
		timeline.setData(getEvents());
		
		Date startDate = new Date(year, month, day, 6, 0, 0);
		Date endDate = new Date(year, month, day, 16, 0, 0);
		timeline.setTimelineRange(startDate, endDate);

		timeline.draw();
	}
	
	public static Lane[] getLanes() {
		Lane[] lanes = new Lane[]{
				new Lane("ln 1", "ln 1"),
				new Lane("ln 2", "ln 2"),
				new Lane("ln 3", "ln 3"),
				new Lane("ln 4", "ln 4"),
				new Lane("ln 5", "ln 5")
				};
		
		return lanes;
	}
	
	public static CalendarEvent[] getEvents() {
		CalendarEvent[] events = new CalendarEvent[14];
		events[0] = new CalendarEvent(1, "#1", "", new Date(year, month, day, 7, 15, 0), new Date(year, month, day, 7, 45, 0), "ln 2");
		events[0].setAttribute("order", 3);
		events[1] = new CalendarEvent(2, "#2", "", new Date(year, month, day, 8, 0, 0), new Date(year, month, day, 8, 15, 0), "ln 4");
		events[1].setAttribute("order", 3);
		events[2] = new CalendarEvent(3, "#3", "", new Date(year, month, day, 8, 0, 0), new Date(year, month, day, 8, 30, 0), "ln 1");
		events[2].setAttribute("order", 4);
		events[3] = new CalendarEvent(4, "#4", "", new Date(year, month, day, 9, 45, 0), new Date(year, month, day, 10, 15, 0), "ln 2");
		events[3].setAttribute("order", 4);
		events[4] = new CalendarEvent(5, "#5", "", new Date(year, month, day, 13, 0, 0), new Date(year, month, day, 13, 15, 0), "ln 2");
		events[4].setAttribute("order", 4);
		events[5] = new CalendarEvent(6, "#6", "", new Date(year, month, day, 13, 0, 0), new Date(year, month, day, 13, 30, 0), "ln 2");
		events[5].setAttribute("order", 4);
		events[6] = new CalendarEvent(7, "#7", "", new Date(year, month, day, 10, 0, 0), new Date(year, month, day, 10, 15, 0), "ln 5");
		events[6].setAttribute("order", 4);
		events[7] = new CalendarEvent(8, "#8", "", new Date(year, month, day, 8, 0, 0), new Date(year, month, day, 8, 30, 0), "ln 5");
		events[7].setAttribute("order", 4);
		events[8] = new CalendarEvent(9, "#9", "", new Date(year, month, day, 14, 30, 0), new Date(year, month, day, 15, 0, 0), "ln 2");
		events[8].setAttribute("order", 4);
		events[9] = new CalendarEvent(10, "#10", "", new Date(year, month, day, 6, 30, 0), new Date(year, month, day, 15, 0, 0), "ln 2");
		events[9].setAttribute("order", 5);
		events[10] = new CalendarEvent(11, "#11", "", new Date(year, month, day, 6, 30, 0), new Date(year, month, day, 13, 0, 0), "ln 4");
		events[10].setAttribute("order", 6);
		events[11] = new CalendarEvent(12, "#12", "", new Date(year, month, day, 13, 0, 0), new Date(year, month, day, 16, 0, 0), "ln 4");
		events[11].setAttribute("order", 6);
		events[12] = new CalendarEvent(13, "#13", "", new Date(year, month, day, 6, 30, 0), new Date(year, month, day, 16, 0, 0), "ln 1");
		events[12].setAttribute("order", 6);
		events[13] = new CalendarEvent(14, "#14", "", new Date(year, month, day, 6, 30, 0), new Date(year, month, day, 16, 0, 0), "ln 3");
		events[13].setAttribute("order", 6);
		
		return events;
	}

}

[Isomorphic]

We're not seeing this - testing against the latest from the builds page (August 15), and dropping your code straight into a test project, we see the event #2 appearing as expected, whether or not there are overlapSortSpecifiers.

Are there any steps missing to replicate the problem?

[miskolczi.peter]

Thank you for checking, but it is very strange.

I don't think it needs anything other. Running that code still repeats the problem even with the latest build (SmartClient Version: v9.0p_2013-08-15/PowerEdition Deployment (built 2013-08-15))

Tried with IE 10 and also with Chrome: the same results.

Then inspected with the Developer Console and found #2 is behind #11 (see screen shot "#2 is in the background.PNG").

#11 and #2 should be smaller (half height).

Copied html part for #2 - not sure it helps anything.

<div id="isc_1J" eventproxy="isc_TimelineWindow_1" class="eventWindow" style="position: absolute; left: 119px; top: 179px; width: 14px; height: 59px; z-index: 808550; overflow: hidden; cursor: move; -webkit-margin-before-collapse: collapse; -webkit-margin-after-collapse: collapse; visibility: inherit;" onscroll="return isc_TimelineWindow_1.$lh()" role="dialog">&nbsp;<div id="isc_1K" eventproxy="isc_Label_1" role="label" style="POSITION:absolute;LEFT:0px;TOP:0px;WIDTH:16px;HEIGHT:61px;Z-INDEX:200630;OVERFLOW:visible;" onscroll="return isc_Label_1.$lh()"><div id="isc_1L" eventproxy="isc_Label_1" style="POSITION:relative;-webkit-margin-collapse:separate separate;VISIBILITY:inherit;Z-INDEX:200630;CURSOR:default;"><table cellspacing="0" cellpadding="0" width="16" height="61"><tbody><tr><td class="eventWindowBody" style="border:0px;padding:3px;" align="left" valign="center">#2</td></tr></tbody></table></div></div></div>

I can bring it to the front with the developer console, but it covers #11 (because both are with lane height).

So, I still can repeat the problem (same code and same Smart GWT version), but have no idea what you may need for repeating yourself.

GWT module or html file could help?

Here they are:

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to="amkailinktest">

  <inherits name='com.google.gwt.user.User'/>
  <inherits name="com.google.gwt.core.Core"/>
  <inherits name="com.google.gwt.user.History"/>

  <inherits name="com.smartgwtee.SmartGwtEENoTheme"/>
  <inherits name="com.smartclient.theme.enterprise.EnterpriseResources"/>
  
  <source path="client"/>
  
  <entry-point class="com.amkai.amkailink.web.test.client.TestDisappearingTimelineEvent"/>
</module>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <title>SmartGWT Test</title>
    
  </head>

<body>
	
	<script> 
		var isomorphicDir = "amkailinktest/sc/";
		
		var currentSkin = "Enterprise";
	</script>
	
    <script type="text/javascript" language="javascript" 
	    		src="amkailinktest/amkailinktest.nocache.js"></script>

	<script>
		document.write("<"+"script src=amkailinktest/sc/skins/" + currentSkin + "/load_skin.js><"+"/script>");
	</script>	    		
	
	<!-- history support -->
	<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
	        style="position:absolute;width:0;height:0;border:0"></iframe>
	        
</body></html>

Please let me know if you need anything else.

Thanks again.

[miskolczi.peter]

Additional note for the previous entry:

I can repeat the problem with 3 events (#2, #11 and #12)

You can see in screen shot "#2 is still behind #11.PNG"

Code to build those events:

	public static CalendarEvent[] getEvents() {
		CalendarEvent[] events = new CalendarEvent[3];
		
		events[0] = new CalendarEvent(2, "#2", "", new Date(year, month, day, 8, 0, 0), new Date(year, month, day, 8, 15, 0), "ln 4");
		events[0].setAttribute("order", 3);
		
		events[1] = new CalendarEvent(11, "#11", "", new Date(year, month, day, 6, 30, 0), new Date(year, month, day, 13, 0, 0), "ln 4");
		events[1].setAttribute("order", 6);
		
		events[2] = new CalendarEvent(12, "#12", "", new Date(year, month, day, 13, 0, 0), new Date(year, month, day, 16, 0, 0), "ln 4");
		events[2].setAttribute("order", 6);
		
		return events;
	}

If I remove #12 then it renders it fine.
(#11 and #12 have the same first OverlapSortOrderSpecifier (order=6))

Hope it helps.

[Isomorphic]

Ok, we see this now and we're taking a look...

[Isomorphic]

We've made changes that should address this for you - please retest with a build dated August 19 or later and let us know if you still see issues.

[miskolczi.peter]

Fixed

Smart GWT 4.0p 2013-08-19.

We tested it carefully and it is OK now. Thank you!