src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java

@@ -229,7 +229,8 @@ public class GeoportalDataViewer implements EntryPoint {
 
 								GWT.log("Loading collections, count " + result.getAvailableCollections().size());
 
-								mainPanel.setAvailableCollections(result.getAvailableCollections().values(), paramGeonaItemType);
+								mainPanel.setAvailableCollections(result.getAvailableCollections().values(),
+										paramGeonaItemType);
 
 								if (paramGeonaItemID != null) {
 									if (paramGeonaItemType == null) {
@@ -357,7 +358,8 @@ public class GeoportalDataViewer implements EntryPoint {
 
 				if (addLayerToMapEvent.getTheProjectDV() != null) {
 					layerManager.addLayerToMapForProject(addLayerToMapEvent.getTheProjectDV().getProfileID(),
-							addLayerToMapEvent.getTheProjectDV().getId(), addLayerToMapEvent.getTheProjectDV(), addLayerToMapEvent.isNotifyClashing());
+							addLayerToMapEvent.getTheProjectDV().getId(), addLayerToMapEvent.getTheProjectDV(),
+							addLayerToMapEvent.isNotifyClashing());
 				}
 
 			}
@@ -505,9 +507,6 @@ public class GeoportalDataViewer implements EntryPoint {
 				}
 
 				mainPanel.hideOverlayLayers();
-				// layerManager.getOverlayLayerManager().hide();
-				// hidePopupLayers();
-
 			}
 		});
 
@@ -615,9 +614,14 @@ public class GeoportalDataViewer implements EntryPoint {
 			@Override
 			public void onShowPopup(ShowPopupOnCentroiEvent showPopupOnCentroiEvent) {
 
-				if (showPopupOnCentroiEvent.getDocument() != null)
+				if (showPopupOnCentroiEvent.getProfileID() != null && showPopupOnCentroiEvent.getProjectID() != null) {
-					performWFSQueryOnCentroid(showPopupOnCentroiEvent.getDocument().getProjectID(),
+					GWT.log("ShowPopupOnCentroiEvent: "+showPopupOnCentroiEvent);
-							showPopupOnCentroiEvent.getCentroidLong(), showPopupOnCentroiEvent.getCentroidLat());
+					Coordinate transfCoord = MapUtils
+							.geoJSONTToBBoxCenter(showPopupOnCentroiEvent.getSpatialReference(), null, null);
+
+					performWFSQueryOnCentroid(showPopupOnCentroiEvent.getProjectID(), transfCoord.getX(),
+							transfCoord.getY());
+				}
 
 			}
 		});

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerService.java

@@ -7,6 +7,7 @@ import org.gcube.application.geoportalcommon.shared.GNADataViewerConfigProfile;
 import org.gcube.application.geoportalcommon.shared.GeoportalItemReferences;
 import org.gcube.application.geoportalcommon.shared.ResultSetPaginatedData;
 import org.gcube.application.geoportalcommon.shared.SearchingFilter;
+import org.gcube.application.geoportalcommon.shared.geoportal.geojson.GeoJSON;
 import org.gcube.application.geoportalcommon.shared.geoportal.materialization.GCubeSDIViewerLayerDV;
 import org.gcube.application.geoportalcommon.shared.geoportal.view.ProjectView;
 import org.gcube.application.geoportalcommon.shared.gis.BoundsMap;
@@ -169,4 +170,13 @@ public interface GeoportalDataViewerService extends RemoteService {
 	 */
 	List<String> getRelationshipsForTimeline(String profileID, String projectID) throws Exception;
 
+	/**
+	 * Gets the spatial reference.
+	 *
+	 * @param profileID the profile ID
+	 * @param projectID the project ID
+	 * @return the spatial reference
+	 */
+	GeoJSON getSpatialReference(String profileID, String projectID);
+
 }

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerServiceAsync.java

@@ -7,6 +7,7 @@ import org.gcube.application.geoportalcommon.shared.GNADataViewerConfigProfile;
 import org.gcube.application.geoportalcommon.shared.GeoportalItemReferences;
 import org.gcube.application.geoportalcommon.shared.ResultSetPaginatedData;
 import org.gcube.application.geoportalcommon.shared.SearchingFilter;
+import org.gcube.application.geoportalcommon.shared.geoportal.geojson.GeoJSON;
 import org.gcube.application.geoportalcommon.shared.geoportal.materialization.GCubeSDIViewerLayerDV;
 import org.gcube.application.geoportalcommon.shared.geoportal.view.ProjectView;
 import org.gcube.application.geoportalcommon.shared.gis.BoundsMap;
@@ -72,4 +73,6 @@ public interface GeoportalDataViewerServiceAsync {
 
 	void getRelationshipsForTimeline(String profileID, String projectID, AsyncCallback<List<String>> callback);
 
+	void getSpatialReference(String profileID, String projectID, AsyncCallback<GeoJSON> callback);
+
 }

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/LayerManager.java

@@ -171,16 +171,6 @@ public class LayerManager {
 								GWT.log("From querying removing layername: " + layerName + ", it is not visible");
 								listLO.remove(layerObject);
 							}
-//							else {
-//								ExtentWrapped layerExtent = olMap.getSourceExtentForLayer(layerName);
-//								if(layerExtent!=null) {
-//									ExtentWrapped centerQueryPoint = new ExtentWrapped(minX, minY, maxX,maxY);
-//								
-//									boolean contains = layerExtent.containsExtent(centerQueryPoint);
-//									GWT.log("layer: "+layerName + " contains the queried BBOX: "+contains);
-//								}
-//							}
-//							
 						}
 					}
 
@@ -715,6 +705,13 @@ public class LayerManager {
 			}
 		});
 		
+//		//Ordering for temporal dimension
+//		try {
+//			Collections.sort(listGeoNaDataObject, new TemporalComparatorUtil());
+//		}catch (Exception e) {
+//			// TODO: handle exception
+//		}
+
 		String prevProjectId = "";
 		for (GeoNaSpatialQueryResult geoNaSpatialQueryResult : listGeoNaDataObject) {
 			try {
@@ -901,8 +898,8 @@ public class LayerManager {
 						Object theValue = map.get(key);
 						String toStringValue = theValue + "";
 						// intFlex.setHTML(i, 0, key);
-						intFlex.setHTML(intFlex.getRowCount() + 1, 0,
+						intFlex.setHTML(intFlex.getRowCount() + 1, 0, "<span title='" + toStringValue + "'>"
-								"<span title='"+toStringValue+"'>" + StringUtil.ellipsize(toStringValue, 100) + "</span>");
+								+ StringUtil.ellipsize(toStringValue, 100) + "</span>");
 						// i++;
 					} catch (Exception e) {
 						// TODO: handle exception

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/events/ShowPopupOnCentroiEvent.java

@@ -1,6 +1,6 @@
 package org.gcube.portlets.user.geoportaldataviewer.client.events;
 
-import org.gcube.application.geoportalcommon.shared.geoportal.DocumentDV;
+import org.gcube.application.geoportalcommon.shared.geoportal.geojson.GeoJSON;
 
 import com.google.gwt.event.shared.GwtEvent;
 
@@ -13,9 +13,9 @@ import com.google.gwt.event.shared.GwtEvent;
  */
 public class ShowPopupOnCentroiEvent extends GwtEvent<ShowPopupOnCentroiEventHandler> {
 	public static Type<ShowPopupOnCentroiEventHandler> TYPE = new Type<ShowPopupOnCentroiEventHandler>();
-	private DocumentDV document;
+	private String profileID;
-	private Double centroidLong;
+	private String projectID;
-	private Double centroidLat;
+	private GeoJSON spatialReference;
 
 	/**
 	 * Instantiates a new show details event.
@@ -25,10 +25,10 @@ public class ShowPopupOnCentroiEvent extends GwtEvent<ShowPopupOnCentroiEventHan
 	 * @param itemName      the item name
 	 * @param featureRow    the feature row
 	 */
-	public ShowPopupOnCentroiEvent(DocumentDV document, Double centroidLong, Double centroidLat) {
+	public ShowPopupOnCentroiEvent(String profileID, String projectID, GeoJSON spatialReference) {
-		this.document = document;
+		this.profileID = profileID;
-		this.centroidLong = centroidLong;
+		this.projectID = projectID;
-		this.centroidLat = centroidLat;
+		this.spatialReference = spatialReference;
 
 	}
 
@@ -53,16 +53,29 @@ public class ShowPopupOnCentroiEvent extends GwtEvent<ShowPopupOnCentroiEventHan
 
 	}
 
-	public DocumentDV getDocument() {
+	public String getProfileID() {
-		return document;
+		return profileID;
 	}
 
-	public Double getCentroidLat() {
+	public String getProjectID() {
-		return centroidLat;
+		return projectID;
 	}
 
-	public Double getCentroidLong() {
+	public GeoJSON getSpatialReference() {
-		return centroidLong;
+		return spatialReference;
+	}
+
+	@Override
+	public String toString() {
+		StringBuilder builder = new StringBuilder();
+		builder.append("ShowPopupOnCentroiEvent [profileID=");
+		builder.append(profileID);
+		builder.append(", projectID=");
+		builder.append(projectID);
+		builder.append(", spatialReference=");
+		builder.append(spatialReference);
+		builder.append("]");
+		return builder.toString();
 	}
 
 }

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/ProjectUtil.java

@@ -82,5 +82,4 @@ public class ProjectUtil {
 
 		return htmlCode;
 	}
-
 }

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/ProjectViewer.java

@@ -20,17 +20,18 @@ import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.ExtentMapUtil;
 import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.ExtentMapUtil.Location;
 import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.ExtentMapUtil.PLACE;
 import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.MapView;
-import org.gcube.portlets.user.geoportaldataviewer.client.ui.util.CustomFlexTable;
 
 import com.github.gwtbootstrap.client.ui.Button;
 import com.github.gwtbootstrap.client.ui.constants.ButtonType;
 import com.github.gwtbootstrap.client.ui.constants.IconType;
 import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.UListElement;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.event.shared.HandlerManager;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.Random;
 import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.rpc.AsyncCallback;
 import com.google.gwt.user.client.ui.Composite;
@@ -45,7 +46,7 @@ import ol.Coordinate;
  *
  * @author Francesco Mangiacrapa at ISTI-CNR francesco.mangiacrapa@isti.cnr.it
  * 
- * Nov 9, 2022
+ *         Nov 9, 2022
  */
 public class ProjectViewer extends Composite {
 
@@ -56,7 +57,7 @@ public class ProjectViewer extends Composite {
 	 *
 	 * @author Francesco Mangiacrapa at ISTI-CNR francesco.mangiacrapa@isti.cnr.it
 	 * 
-	 * Nov 9, 2022
+	 *         Nov 9, 2022
 	 */
 	interface ProjectViewerUiBinder extends UiBinder<Widget, ProjectViewer> {
 	}
@@ -67,9 +68,15 @@ public class ProjectViewer extends Composite {
 	@UiField
 	HTMLPanel pageViewDetails;
 
+	@UiField
+	HTMLPanel projectViewerMainPanel;
+
 	@UiField
 	HTMLPanel centroidPanel;
 
+	@UiField
+	HTMLPanel tableOfContentPanel;
+
 	@UiField
 	Button shareButton;
 
@@ -82,9 +89,19 @@ public class ProjectViewer extends Composite {
 	@UiField
 	Button addLayersToMap;
 
-	private ProjectView theProjectView;
+	@UiField
+	HTMLPanel toc_container;
 
-	private CustomFlexTable customTable = new CustomFlexTable();
+	@UiField
+	HTMLPanel toc_list_container;
+
+	@UiField
+	Button reduceToc;
+
+	@UiField
+	UListElement toc_list_anchors;
+
+	private ProjectView theProjectView;
 
 	private GeoportalItemReferences geoportalItemReferences;
 
@@ -92,20 +109,24 @@ public class ProjectViewer extends Composite {
 
 	private HandlerManager applicationBus;
 
+	private String projectViewerMainPanelID;
+
 	/**
 	 * Instantiates a new project viewer.
 	 */
 	private ProjectViewer() {
 		initWidget(uiBinder.createAndBindUi(this));
-		pageViewDetails.getElement().setId("page-view-details");
+		pageViewDetails.getElement().addClassName("page-view-details");
+		projectViewerMainPanelID = "projectViewer-" + Random.nextInt();
+		projectViewerMainPanel.getElement().setId(projectViewerMainPanelID);
 	}
 
 	/**
 	 * Instantiates a new project viewer.
 	 *
-	 * @param applicationBus the application bus
+	 * @param applicationBus    the application bus
 	 * @param geoportalItemRefs the geoportal item refs
-	 * @param projectView the project view
+	 * @param projectView       the project view
 	 */
 	public ProjectViewer(HandlerManager applicationBus, GeoportalItemReferences geoportalItemRefs,
 			final ProjectView projectView) {
@@ -147,10 +168,12 @@ public class ProjectViewer extends Composite {
 				cv.setExpandViewButtonVisible(false);
 				cv.setRelationshipsButtonVisible(false);
 				cv.setAddLayersToMapVisible(false);
+				cv.setTocContentVisible(true);
 				int width = Window.getClientWidth() * 75 / 100;
 				int height = Window.getClientHeight() * 70 / 100;
 
-				String modalTitle = ProjectUtil.toHMLCode(false, theProjectView.getTheProjectDV().getTheDocument(), theProjectView.getTheProjectDV().getId());
+				String modalTitle = ProjectUtil.toHMLCode(false, theProjectView.getTheProjectDV().getTheDocument(),
+						theProjectView.getTheProjectDV().getId());
 				ModalWindow mw = new ModalWindow(modalTitle, width, height);
 				mw.add(cv);
 				mw.setCaller(ProjectViewer.this);
@@ -208,18 +231,64 @@ public class ProjectViewer extends Composite {
 			}
 		});
 
+		reduceToc.setType(ButtonType.LINK);
+		reduceToc.setIcon(IconType.PLUS_SIGN_ALT);
+		toc_list_container.setVisible(false);
+		reduceToc.addClickHandler(new ClickHandler() {
+
+			@Override
+			public void onClick(ClickEvent event) {
+				boolean visible = toc_list_container.isVisible();
+				setTocContentVisible(!visible);
+			
+//				if (visible) {
+//					toc_list_container.setVisible(false);
+//					reduceToc.setIcon(IconType.PLUS_SIGN_ALT);
+//				} else {
+//					toc_list_container.setVisible(true);
+//					reduceToc.setIcon(IconType.MINUS_SIGN_ALT);
+//				}
+			}
+		});
+
 		for (SectionView sectionView : projectView.getListSections()) {
 
 			if (!sectionView.isEmpty()) {
-				SectionViewer sectionViewer = new SectionViewer(sectionView);
+				SectionViewer sectionViewer = new SectionViewer(sectionView, projectViewerMainPanelID);
+				String sectionId = sectionView.getSectionTitle().replaceAll("[^A-Za-z0-9]", "-") + "_"
+						+ Random.nextInt();
+				String divTarget = "<div class='anchor-target' id='" + sectionId + "'></div>";
+				sectionViewer.getElement().insertFirst(new HTML(divTarget).getElement());
+				addAnchorToSection(sectionId, sectionView.getSectionTitle());
 				pageViewDetails.add(sectionViewer);
 			}
 
-			if(sectionView.hasSpatialLayers()) {
+			if (sectionView.hasSpatialLayers()) {
 				setAddLayersToMapVisible(true);
 			}
 
 		}
+
+		if (toc_list_anchors.getChildCount() > 0) {
+			tableOfContentPanel.setVisible(true);
+		}
+	}
+
+	private void addAnchorToSection(String id, String text) {
+		String htmlAnchor = "<a href='#" + id + "'>" + text + "</a>";
+		toc_list_anchors.appendChild(new HTML("<li>" + htmlAnchor + "</li>").getElement());
+	}
+
+	protected void setTocContentVisible(boolean bool) {
+
+		toc_list_container.setVisible(bool);
+
+		if (bool) {
+			reduceToc.setIcon(IconType.MINUS_SIGN_ALT);
+		} else {
+			reduceToc.setIcon(IconType.PLUS_SIGN_ALT);
+		}
+
 	}
 
 	/**

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/ProjectViewer.ui.xml

@@ -28,21 +28,38 @@
 	.width-100 {
 		width: 100%;
 	}
+	
+	.display-item-list {
+		display: inline-table;
+	}
 	</ui:style>
-	<g:HTMLPanel>
+	<g:HTMLPanel ui:field="projectViewerMainPanel">
 		<!-- <g:HTMLPanel ui:field="sharePanel" -->
 		<!-- addStyleNames="{style.align-to-right}"> -->
 		<!-- </g:HTMLPanel> -->
 		<g:HTMLPanel ui:field="headerPanel"
 			addStyleNames="{style.the-title}"></g:HTMLPanel>
 		<g:HTMLPanel ui:field="pageViewDetails">
-			<g:HorizontalPanel addStyleNames="functionalities-style">
+			<g:HorizontalPanel
+				addStyleNames="functionalities-style">
 				<b:Button ui:field="shareButton">Share</b:Button>
 				<b:Button ui:field="expandButton">Expand</b:Button>
 				<b:Button ui:field="relationshipsButton">Relationships</b:Button>
 				<b:Button ui:field="addLayersToMap">Add Layers to Map</b:Button>
 			</g:HorizontalPanel>
 			<g:HTMLPanel ui:field="centroidPanel"></g:HTMLPanel>
+			<g:HTMLPanel ui:field="tableOfContentPanel"
+				visible="false" addStyleNames="{style.display-item-list}">
+				<g:HTMLPanel ui:field="toc_container"
+					addStyleNames="toc_container">
+					<b:Button ui:field="reduceToc"
+						addStyleNames="toc_container_reduce_button"></b:Button>
+					<div class="toc_title">Contents</div>
+					<g:HTMLPanel ui:field="toc_list_container" addStyleNames="toc_list_container">
+						<ul ui:field="toc_list_anchors"></ul>
+					</g:HTMLPanel>
+				</g:HTMLPanel>
+			</g:HTMLPanel>
 		</g:HTMLPanel>
 	</g:HTMLPanel>
 </ui:UiBinder> 

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/SectionViewer.java

@@ -12,7 +12,10 @@ import org.gcube.portlets.user.geoportaldataviewer.client.ui.cms.gallery.ImagesS
 import org.gcube.portlets.user.geoportaldataviewer.client.ui.cms.layers.LayersSectionViewer;
 import org.gcube.portlets.user.geoportaldataviewer.client.ui.util.CustomFlexTable;
 
+import com.github.gwtbootstrap.client.ui.Button;
 import com.github.gwtbootstrap.client.ui.PageHeader;
+import com.github.gwtbootstrap.client.ui.constants.ButtonType;
+import com.github.gwtbootstrap.client.ui.constants.IconType;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
@@ -36,7 +39,7 @@ public class SectionViewer extends Composite {
 	@UiField
 	PageHeader sectionTitle;
 
-	public SectionViewer(SectionView sectionView) {
+	public SectionViewer(SectionView sectionView, String topTargetId) {
 		initWidget(uiBinder.createAndBindUi(this));
 		this.sectionView = sectionView;
 		
@@ -45,6 +48,15 @@ public class SectionViewer extends Composite {
 		sectionTitle.setTitle(sectionView.getSectionTitle());
 		sectionTitle.setText(sectionView.getSectionTitle());
 		
+		Button goToTop = new Button("");
+		goToTop.setType(ButtonType.LINK);
+		goToTop.setIcon(IconType.DOUBLE_ANGLE_UP);
+		goToTop.setHref("#"+topTargetId);
+		goToTop.setTitle("Go to top");
+		goToTop.getElement().setClassName("go-top-right");
+		
+		sectionTitle.add(goToTop);
+
 		boolean displayAsGallery = false;
 		for (SubDocumentView subDocumentView : subDocuments) {
 			if (subDocumentView.getListImages() != null && subDocumentView.getListImages().size() > 0) {

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/SectionViewer.ui.xml

@@ -10,6 +10,7 @@
 	
 	.font-size-h1-22 h1 {
 		font-size: 22px;
+		margin-top: 5px;
 	}
 	
 	.align-to-right {

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/relation/TimelineRelationPanel.java

@@ -3,9 +3,11 @@ package org.gcube.portlets.user.geoportaldataviewer.client.ui.cms.project.relati
 import java.util.List;
 
 import org.gcube.application.geoportalcommon.shared.GeoportalItemReferences;
+import org.gcube.application.geoportalcommon.shared.geoportal.geojson.GeoJSON;
 import org.gcube.application.geoportalcommon.shared.geoportal.project.ProjectDV;
 import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerServiceAsync;
 import org.gcube.portlets.user.geoportaldataviewer.client.events.ShowDetailsEvent;
+import org.gcube.portlets.user.geoportaldataviewer.client.events.ShowPopupOnCentroiEvent;
 import org.gcube.portlets.user.geoportaldataviewer.client.resources.GNAImages;
 import org.gcube.portlets.user.geoportaldataviewer.client.ui.cms.project.ProjectUtil;
 import org.gcube.portlets.user.geoportaldataviewer.client.util.LoaderIcon;
@@ -48,7 +50,7 @@ public class TimelineRelationPanel extends Composite {
 
 	private TimelineRelationPanel instance = this;
 
-	private String selectedProjectID;
+	private String selectedTimelineProjectID;
 
 	private ProjectDV theProjectDV;
 
@@ -76,13 +78,12 @@ public class TimelineRelationPanel extends Composite {
 
 		timelineContainer.add(loaderData);
 
-		
 		timelinePopupCloser.addClickHandler(new ClickHandler() {
 
 			@Override
 			public void onClick(ClickEvent event) {
 
-				if(timelineContainer.isVisible())
+				if (timelineContainer.isVisible())
 					setTimelineContainerVisible(false);
 				else
 					setTimelineContainerVisible(true);
@@ -129,25 +130,47 @@ public class TimelineRelationPanel extends Composite {
 		timelineContainer.setVisible(bool);
 	}
 
-	private void setSelectedProject(String projectID) {
+	private void setSelectedProject(String theComposedProjectID) {
-		this.selectedProjectID = projectID;
+		this.selectedTimelineProjectID = theComposedProjectID;
-		GWT.log("selectedProjectID: " + selectedProjectID);
+		//selectedTimelineProjectID is the couple ProfileID,ProjectID
+		GWT.log("selectedTimelineProjectID: " + selectedTimelineProjectID);
 
-		if(selectedProjectID == null || selectedProjectID.isEmpty())
+		if (selectedTimelineProjectID == null || selectedTimelineProjectID.isEmpty())
 			return;
 
-		String[] references = this.selectedProjectID.split(",");
+		String[] references = this.selectedTimelineProjectID.split(",");
 
-		GeoportalItemReferences gir = new GeoportalItemReferences(references[1], references[0]);
+		final String thePofileID = references[0];
+		final String theProjectID = references[1];
+		GeoportalItemReferences gir = new GeoportalItemReferences(theProjectID, thePofileID);
 		ShowDetailsEvent showDetailsEvent = new ShowDetailsEvent(gir, null, false);
 		GWT.log("fireEvetn: " + showDetailsEvent);
 
 		applicationBus.fireEvent(showDetailsEvent);
 
+		GeoportalDataViewerServiceAsync.Util.getInstance().getSpatialReference(thePofileID, theProjectID,
+				new AsyncCallback<GeoJSON>() {
+
+					@Override
+					public void onFailure(Throwable caught) {
+						// TODO Auto-generated method stub
+
+					}
+
+					@Override
+					public void onSuccess(GeoJSON spatialReference) {
+						if (spatialReference != null) {
+							applicationBus.fireEvent(
+									new ShowPopupOnCentroiEvent(thePofileID, theProjectID, spatialReference));
+						}
+
+					}
+				});
+
 	}
 
 	public String getSelectedProjectID() {
-		return selectedProjectID;
+		return selectedTimelineProjectID;
 	}
 
 	public static native String instanceTimeline(String idDivContainer, JSONArray jsonItems,

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/search/SearchFacilityUI.java

@@ -15,12 +15,10 @@ import org.gcube.application.geoportalcommon.shared.WhereClause;
 import org.gcube.application.geoportalcommon.shared.geoportal.DocumentDV;
 import org.gcube.application.geoportalcommon.shared.geoportal.ResultDocumentDV;
 import org.gcube.application.geoportalcommon.shared.geoportal.config.ItemFieldDV;
-import org.gcube.application.geoportalcommon.shared.geoportal.geojson.GeoJSON;
 import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerServiceAsync;
 import org.gcube.portlets.user.geoportaldataviewer.client.events.SearchPerformedEvent;
 import org.gcube.portlets.user.geoportaldataviewer.client.events.ShowDetailsEvent;
 import org.gcube.portlets.user.geoportaldataviewer.client.events.ShowPopupOnCentroiEvent;
-import org.gcube.portlets.user.geoportaldataviewer.client.gis.MapUtils;
 import org.gcube.portlets.user.geoportaldataviewer.client.util.LoaderIcon;
 import org.gcube.portlets.user.geoportaldataviewer.client.util.StringUtil;
 
@@ -52,8 +50,6 @@ import com.google.gwt.user.client.ui.HTMLPanel;
 import com.google.gwt.user.client.ui.HorizontalPanel;
 import com.google.gwt.user.client.ui.Widget;
 
-import ol.Coordinate;
-
 /**
  * The Class SearchFacilityUI.
  *
@@ -332,21 +328,8 @@ public class SearchFacilityUI extends Composite {
 									GeoportalItemReferences gir = new GeoportalItemReferences(resultDoc.getProjectID(),
 											profileID);
 									appManagerBus.fireEvent(new ShowDetailsEvent(gir, null, true));
-
-									GeoJSON spatialReference = resultDoc.getSpatialReference();
-									Coordinate transfCoord = MapUtils.geoJSONTToBBoxCenter(spatialReference, null,
-											null);
-
-									Double centerLong = null;
-									Double centerLat = null;
-
-									if (transfCoord != null) {
-										centerLong = transfCoord.getX();
-										centerLat = transfCoord.getY();
-									}
-
 									appManagerBus
-											.fireEvent(new ShowPopupOnCentroiEvent(resultDoc, centerLong, centerLat));
+											.fireEvent(new ShowPopupOnCentroiEvent(profileID, resultDoc.getProjectID(), resultDoc.getSpatialReference()));
 
 								}
 							});

src/main/java/org/gcube/portlets/user/geoportaldataviewer/server/GeoportalDataViewerServiceImpl.java

@@ -5,6 +5,7 @@ import static org.gcube.application.geoportal.client.plugins.GeoportalAbstractPl
 
 import java.util.ArrayList;
 import java.util.Arrays;
+import java.util.Collections;
 import java.util.HashMap;
 import java.util.Iterator;
 import java.util.LinkedHashMap;
@@ -59,6 +60,7 @@ import org.gcube.portlets.user.geoportaldataviewer.server.gis.WMSUrlValidator;
 import org.gcube.portlets.user.geoportaldataviewer.server.mongoservice.GeoportalServiceIdentityProxy;
 import org.gcube.portlets.user.geoportaldataviewer.server.util.ContextRequest;
 import org.gcube.portlets.user.geoportaldataviewer.server.util.SessionUtil;
+import org.gcube.portlets.user.geoportaldataviewer.server.util.TemporalComparatorUtil;
 import org.gcube.portlets.user.geoportaldataviewer.shared.GCubeCollection;
 import org.gcube.portlets.user.geoportaldataviewer.shared.GeoNaSpatialQueryResult;
 import org.gcube.portlets.user.geoportaldataviewer.shared.ItemFieldsResponse;
@@ -92,14 +94,8 @@ import com.google.gwt.user.server.rpc.RemoteServiceServlet;
 @SuppressWarnings("serial")
 public class GeoportalDataViewerServiceImpl extends RemoteServiceServlet implements GeoportalDataViewerService {
 
-	// private static final String TIMELINE_CONFIG_TJT_DOCUMENT =
-	// UseCaseDescriptorCaller.TIMELINE_CONFIG_TJT_DOCUMENT;
-
 	private static final Logger LOG = LoggerFactory.getLogger(GeoportalDataViewerServiceImpl.class);
 
-	// private static final String CACHE_IMAGE_PREVIEW_FOR_CONCESSIONE =
-	// "MAP_IMAGE_PREVIEW_FOR_CONCESSIONE";
-
 	/**
 	 * The Enum COMMON_IMAGES_FORMAT.
 	 *
@@ -1039,7 +1035,8 @@ public class GeoportalDataViewerServiceImpl extends RemoteServiceServlet impleme
 						}
 
 						if (layerObject.getProjectDV().getSpatialReference() == null) {
-							GeoJSON geoJson = spatialReference(layerObject.getProfileID(), layerObject.getProjectID());
+							GeoJSON geoJson = getSpatialReference(layerObject.getProfileID(),
+									layerObject.getProjectID());
 							layerObject.getProjectDV().setSpatialReference(geoJson);
 						}
 
@@ -1075,6 +1072,13 @@ public class GeoportalDataViewerServiceImpl extends RemoteServiceServlet impleme
 								+ " feature/s");
 						listDAO.add(geoDAO);
 
+						// Ordering for temporal dimension
+						try {
+							Collections.sort(listDAO, new TemporalComparatorUtil());
+						} catch (Exception e) {
+							// silent
+						}
+
 					}
 
 					default:
@@ -1146,13 +1150,14 @@ public class GeoportalDataViewerServiceImpl extends RemoteServiceServlet impleme
 	}
 
 	/**
-	 * Spatial reference.
+	 * Gets the spatial reference.
 	 *
 	 * @param profileID the profile ID
 	 * @param projectID the project ID
-	 * @return the geo JSON
+	 * @return the spatial reference
 	 */
-	private GeoJSON spatialReference(String profileID, String projectID) {
+	@Override
+	public GeoJSON getSpatialReference(String profileID, String projectID) {
 		LOG.trace("spatialReference for profileID: " + profileID + ",  projectID: " + projectID + "called");
 		try {
 			new GeoportalServiceIdentityProxy(this.getThreadLocalRequest());

src/main/java/org/gcube/portlets/user/geoportaldataviewer/server/util/TemporalComparatorUtil.java

@@ -0,0 +1,45 @@
+package org.gcube.portlets.user.geoportaldataviewer.server.util;
+
+import java.util.Comparator;
+
+import org.gcube.application.geoportalcommon.shared.geoportal.project.ProjectDV;
+import org.gcube.portlets.user.geoportaldataviewer.shared.GeoNaSpatialQueryResult;
+
+/**
+ * The Class TemporalComparatorUtil.
+ *
+ * @author Francesco Mangiacrapa at ISTI-CNR francesco.mangiacrapa@isti.cnr.it
+ * 
+ *         Nov 18, 2022
+ */
+public class TemporalComparatorUtil implements Comparator<GeoNaSpatialQueryResult> {
+
+	/**
+	 * Compare.
+	 *
+	 * @param a the a
+	 * @param b the b
+	 * @return the int
+	 */
+	@Override
+	public int compare(GeoNaSpatialQueryResult a, GeoNaSpatialQueryResult b) {
+		if (a == null || a.getSourceLayerObject() == null || a.getSourceLayerObject().getProjectDV() == null) {
+			return -1;
+		}
+		if (b == null || b.getSourceLayerObject() == null || b.getSourceLayerObject().getProjectDV() == null) {
+			return 1;
+		}
+
+		ProjectDV project1 = a.getSourceLayerObject().getProjectDV();
+		ProjectDV project2 = b.getSourceLayerObject().getProjectDV();
+
+		if (project1.getTemporalReference() == null || project1.getTemporalReference().getStart() == null)
+			return -1;
+
+		if (project2.getTemporalReference() == null || project2.getTemporalReference().getStart() == null)
+			return 1;
+
+		return project1.getTemporalReference().getStart().compareTo(project2.getTemporalReference().getStart());
+
+	}
+}

src/main/webapp/GeoportalDataViewer.css

@@ -25,14 +25,15 @@ body {
 	position: absolute;
 	background-color: white;
 	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-	padding: 15px;
+	padding: 10px;
-	border-radius: 10px;
+	border-radius: 2px;
 	border: 1px solid #cccccc;
 	bottom: 12px;
 	left: -50px;
 	min-width: 280px;
 	max-width: 500px;
 	visibility: hidden;
+	padding-top: 20px;
 }
 
 .ol-popup img {
@@ -70,11 +71,22 @@ body {
 	position: absolute;
 	top: 2px;
 	right: 8px;
+	font-size: 12px;
 }
 
 .ol-popup-closer:after {
 	content: "✖";
-	font-size: 14px;
+}
+
+.go-top-right {
+	float: right;
+	margin-right: 20px;
+	top: -35px;
+	position: relative;
+	font-size: 18px;
+}
+.go-top-right:visited {
+	color: #08c !important;
 }
 
 .data-click-img {
@@ -93,18 +105,18 @@ body {
 	font-weight: bold;
 }
 
-#page-view-details {
+.page-view-details {
 	margin: 10px;
 	text-rendering: optimizelegibility;
 	font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
 }
 
-#page-view-details .page-header {
+.page-view-details .page-header {
 	margin-bottom: 22px;
 	padding-top: 5px;
 }
 
-#page-view-details p {
+.page-view-details p {
 	font-size: 14px;
 	padding: 10px;
 	color: #333;
@@ -115,11 +127,13 @@ body {
 	margin-bottom: 10px;
 	position: sticky;
 	top: 0;
-	background-color: white !important;
+	background-color: #f9f9f9 !important;
 	opacity: 0.9;
 	border-radius: 5px;
 	z-index: 2000;
+	border: 1px #eee solid;
 }
+
 .ol-mouse-position {
 	top: 8px !important;
 	right: 60px !important;
@@ -632,10 +646,54 @@ body {
 	border-radius: 2px;
 }
 
+/******************************
+Table Of Contents (TOC)
+*******************************/
+.toc_container {
+	background: #f9f9f9 none repeat scroll 0 0;
+	border: 1px solid #eee;
+	display: table;
+	font-size: 13px;
+	padding: 5px 15px;
+	min-width: 120px;
+}
 
-/*****
+.toc_title {
+	font-weight: 700;
+}
+
+.toc_list_container {
+	display: inline-block;
+}
+
+.toc_list_container ul {
+	margin-left: 35px;
+}
+
+.toc_list_container ul li {
+	list-style: outside none none !important;
+}
+
+.toc_list_container ul li a:visited {
+	color: #08c !important;
+}
+
+.toc_container_reduce_button {
+	float: left;
+	padding: 0px 10px !important;
+}
+
+.anchor-target {
+	top: -35px;
+	position: relative;
+	display: block;
+	visibility: hidden;
+}
+
+
+/******************************
 RESPONSIVE
-***/
+*******************************/
 
 @media all and (max-width: 2350px) {
 	#timeline-data {