From ed4f9bd204ec386de4d609a07fee43f6c9417318 Mon Sep 17 00:00:00 2001 From: "francesco.mangiacrapa" Date: Wed, 2 Nov 2022 18:05:38 +0100 Subject: [PATCH] Trying to integrate vis-timeline --- .../client/GeoportalDataViewer.java | 24 ++- .../client/GeoportalDataViewerService.java | 2 + .../GeoportalDataViewerServiceAsync.java | 2 + .../relation/TimelineRelationPanel.java | 90 +++++++++ .../relation/TimelineRelationPanel.ui.xml | 18 ++ .../GeoportalDataViewerServiceImpl.java | 35 +++- src/main/webapp/GeoportalDataViewer.css | 49 ++++- src/main/webapp/GeoportalDataViewer.html | 83 +++++++- src/main/webapp/GeoportalDataViewer2.html | 191 ++++++++++++++++++ .../GeoPortalDataViewerAppPortlet_view.jsp | 83 +++++++- 10 files changed, 571 insertions(+), 6 deletions(-) create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/relation/TimelineRelationPanel.java create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/relation/TimelineRelationPanel.ui.xml create mode 100644 src/main/webapp/GeoportalDataViewer2.html diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java index 6201c64..83a32f3 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java @@ -42,6 +42,7 @@ import org.gcube.portlets.user.geoportaldataviewer.client.gis.ExtentWrapped; import org.gcube.portlets.user.geoportaldataviewer.client.gis.MapUtils; import org.gcube.portlets.user.geoportaldataviewer.client.gis.OpenLayerMap; import org.gcube.portlets.user.geoportaldataviewer.client.ui.GeonaDataViewMainPanel; +import org.gcube.portlets.user.geoportaldataviewer.client.ui.cms.project.relation.TimelineRelationPanel; import org.gcube.portlets.user.geoportaldataviewer.client.util.ControlledCallBack; import org.gcube.portlets.user.geoportaldataviewer.client.util.LoaderIcon; import org.gcube.portlets.user.geoportaldataviewer.shared.GCubeCollection; @@ -153,7 +154,6 @@ public class GeoportalDataViewer implements EntryPoint { RootPanel.get(APP_DIV).add(mainPanel); initApplication(); - } }); @@ -203,7 +203,7 @@ public class GeoportalDataViewer implements EntryPoint { ScriptInjector.fromUrl( "//cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.5/jquery.nanogallery2.min.js") .setWindow(ScriptInjector.TOP_WINDOW).inject(); - + GWT.log("Loading collections, count " + result.getAvailableCollections().size()); mainPanel.setAvailableCollections(result.getAvailableCollections().values()); @@ -224,6 +224,7 @@ public class GeoportalDataViewer implements EntryPoint { // TODO LOAD INITIAL LAYERS GWT.log("DONE INIT LOAD"); + } }); @@ -240,6 +241,25 @@ public class GeoportalDataViewer implements EntryPoint { bindEvents(); RootPanel.get(APP_DIV).add(attributionDiv); + + new Timer() { + + @Override + public void run() { + GWT.log("Instancing timeline"); + TimelineRelationPanel timeline = new TimelineRelationPanel("concessione", "projectid"); + RootPanel.get("timeline-data").add(timeline); + + } + }.schedule(5000); + + + +// Modal modal = new Modal(true, true); +// modal.setWidth(400); +// +// modal.add(timeline); +// modal.show(); } diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerService.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerService.java index 23cabaf..9315cbd 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerService.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerService.java @@ -203,4 +203,6 @@ public interface GeoportalDataViewerService extends RemoteService { */ LinkedHashMap getEntrySetsDocumentForProjectID(String profileID, String projectID, int limit); + List getRelationshipsForTimeline(String profileID, String projectID) throws Exception; + } diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerServiceAsync.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerServiceAsync.java index 51e8515..f99b18b 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerServiceAsync.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerServiceAsync.java @@ -81,4 +81,6 @@ public interface GeoportalDataViewerServiceAsync { void getEntrySetsDocumentForProjectID(String profileID, String projectID, int limit, AsyncCallback> callback); + void getRelationshipsForTimeline(String profileID, String projectID, AsyncCallback> callback); + } diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/relation/TimelineRelationPanel.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/relation/TimelineRelationPanel.java new file mode 100644 index 0000000..058935a --- /dev/null +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/relation/TimelineRelationPanel.java @@ -0,0 +1,90 @@ +package org.gcube.portlets.user.geoportaldataviewer.client.ui.cms.project.relation; + +import java.util.List; + +import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerServiceAsync; + +import com.google.gwt.core.client.GWT; +import com.google.gwt.core.client.Scheduler; +import com.google.gwt.core.client.Scheduler.ScheduledCommand; +import com.google.gwt.json.client.JSONArray; +import com.google.gwt.json.client.JSONParser; +import com.google.gwt.uibinder.client.UiBinder; +import com.google.gwt.uibinder.client.UiField; +import com.google.gwt.user.client.rpc.AsyncCallback; +import com.google.gwt.user.client.ui.Composite; +import com.google.gwt.user.client.ui.ScrollPanel; +import com.google.gwt.user.client.ui.Widget; + +public class TimelineRelationPanel extends Composite { + + @UiField + ScrollPanel timelineContainer; + + private static TimelineRelationPanelUiBinder uiBinder = GWT.create(TimelineRelationPanelUiBinder.class); + + interface TimelineRelationPanelUiBinder extends UiBinder { + } + + public TimelineRelationPanel(String profileID, String projectID) { + initWidget(uiBinder.createAndBindUi(this)); + + timelineContainer.getElement().setId("visualization"); + + Scheduler.get().scheduleDeferred(new ScheduledCommand() { + + public void execute() { + + GeoportalDataViewerServiceAsync.Util.getInstance().getRelationshipsForTimeline(profileID, projectID, + new AsyncCallback>() { + + @Override + public void onSuccess(List result) { + + JSONArray toJsonArr = new JSONArray(); + for (int i = 0; i < result.size(); i++) { + toJsonArr.set(i, JSONParser.parseStrict(result.get(i))); + } + + instanceTimeline(timelineContainer.getElement().getId(), toJsonArr); + } + + @Override + public void onFailure(Throwable caught) { + // TODO Auto-generated method stub + + } + }); + + }; + }); + + } + + public static native String instanceTimeline(String idDivContainer, JSONArray jsonItems) /*-{ + console.log('showTimeline_instanceTimeline for json items: ' + + jsonItems); + + console.log("showTimeline_template: " + $wnd.templateHandlebars); + + // DOM element where the Timeline will be attached + var container = $doc.getElementById(idDivContainer); + + console.log("showTimeline_container: " + container); + + var myArray = $wnd.JSON.parse(jsonItems); + + console.log("showTimeline_jsonItems: " + myArray); + + var container = $doc.getElementById(idDivContainer); + + // Create a DataSet (allows two way data-binding) + var items = new $wnd.vis.DataSet(myArray); + + + // Create a Timeline + var timeline = new $wnd.vis.Timeline(container, items, + $wnd.optionsTimeline); + + }-*/; +} diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/relation/TimelineRelationPanel.ui.xml b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/relation/TimelineRelationPanel.ui.xml new file mode 100644 index 0000000..44e43b6 --- /dev/null +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/relation/TimelineRelationPanel.ui.xml @@ -0,0 +1,18 @@ + + + + .important { + font-weight: bold; + } + + .timeline { + border: 1px solid lightgray; + max-height: 400px; + } + + + + + \ No newline at end of file diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/server/GeoportalDataViewerServiceImpl.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/server/GeoportalDataViewerServiceImpl.java index 06e2c29..59516ef 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/server/GeoportalDataViewerServiceImpl.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/server/GeoportalDataViewerServiceImpl.java @@ -76,6 +76,7 @@ import org.gcube.spatial.data.geoutility.bean.LayerStyles; import org.gcube.spatial.data.geoutility.bean.LayerZAxis; import org.gcube.spatial.data.geoutility.bean.WmsParameters; import org.gcube.vomanagement.usermanagement.model.GCubeUser; +import org.json.JSONObject; import org.slf4j.Logger; import org.slf4j.LoggerFactory; @@ -246,7 +247,7 @@ public class GeoportalDataViewerServiceImpl extends RemoteServiceServlet impleme throws Exception { LOG.info("getUploadedImagesForId [itemId: " + itemId + ", itemType: " + itemType + "] called"); - return getUploadedImagesForId(this.getThreadLocalRequest(), itemType, itemId, maxImages); + throw new Exception("getUploadedImagesForId must be removed!"); } /** @@ -1249,4 +1250,36 @@ public class GeoportalDataViewerServiceImpl extends RemoteServiceServlet impleme return documentAsMap; } + @Override + public List getRelationshipsForTimeline(String profileID, String projectID) throws Exception { + if (profileID == null || projectID == null) + throw new Exception("Invalid parameter. Either profileID or projectID is null"); + + try { + + LOG.info("Trying to getRelationshipChain for id " + profileID); + + List listJSON = new ArrayList(); + for (int i = 0; i < 5; i++) { + + JSONObject jsonObject = new JSONObject(); + jsonObject.put("id", i); + jsonObject.put("title", "title " + i); + jsonObject.put("start", "201" + i + "-04-1"); + jsonObject.put("end", "201" + i + "-09-1"); + if (i < 3) + jsonObject.put("image_url", + "https://data-pre.d4science.org/shub/E_ck5hN0hBcGljR3oySm5KOWJxOUMyRkRaWkZ4WnhmWXJjWVlLeWxGcW9FMWQraitOWStmQXREQklNUlMydzNFTw=="); + + listJSON.add(jsonObject.toString()); + } + + return listJSON; + } catch (Exception e) { + String erroMsg = "Error occurred on reading relatioships for id: " + projectID; + LOG.error(erroMsg, e); + throw new Exception(erroMsg); + } + } + } diff --git a/src/main/webapp/GeoportalDataViewer.css b/src/main/webapp/GeoportalDataViewer.css index 05f0fa5..6a1a53e 100644 --- a/src/main/webapp/GeoportalDataViewer.css +++ b/src/main/webapp/GeoportalDataViewer.css @@ -534,4 +534,51 @@ body { .my-html-table td:last-child { text-align: justify; } - \ No newline at end of file + + +/** + VIS TIMELINE CSS +**/ + +.vis.timeline .item { + border-color: #acacac; + background-color: #efefef; + box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.3); +} + +.vis-item-content table { + font-size: 12px; + background: white; +} + +.vis-item-content table code { + color: gray; +} + +.vis-item-content table span { + color: blue; + font-weight: bold; + font-size: 10px; + background: white; + padding: 3px; + text-align: left !important; + border-radius: 5px; + font-style: italic; +} + +.vis-item-content table img { + max-width: 100px; + max-height: 100px; +} + +#timeline-data { + width: 800px; + position: absolute; + bottom: 2px; + z-index: 10000; + background: white; + opacity: 0.9; + margin: 0; + left: 50%; + transform: translate(-50%); +} \ No newline at end of file diff --git a/src/main/webapp/GeoportalDataViewer.html b/src/main/webapp/GeoportalDataViewer.html index d392313..6d703f5 100644 --- a/src/main/webapp/GeoportalDataViewer.html +++ b/src/main/webapp/GeoportalDataViewer.html @@ -21,9 +21,87 @@ rel="stylesheet" type="text/css"> + + + + + + + + + + @@ -61,5 +139,8 @@ application to display correctly.
+
+
+
diff --git a/src/main/webapp/GeoportalDataViewer2.html b/src/main/webapp/GeoportalDataViewer2.html new file mode 100644 index 0000000..17102e9 --- /dev/null +++ b/src/main/webapp/GeoportalDataViewer2.html @@ -0,0 +1,191 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +GNA Data Viewer Application + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + diff --git a/src/main/webapp/WEB-INF/jsp/GeoPortalDataViewerAppPortlet_view.jsp b/src/main/webapp/WEB-INF/jsp/GeoPortalDataViewerAppPortlet_view.jsp index 64a298e..ecb22ea 100644 --- a/src/main/webapp/WEB-INF/jsp/GeoPortalDataViewerAppPortlet_view.jsp +++ b/src/main/webapp/WEB-INF/jsp/GeoPortalDataViewerAppPortlet_view.jsp @@ -26,6 +26,18 @@ href="//cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.5/css/nanogallery2.min.css" rel="stylesheet" type="text/css"> + + + + + + @@ -33,5 +45,74 @@ + -
\ No newline at end of file + + + +
+
+
+
\ No newline at end of file