From 505211e383633e085bd95aaad38868d9262a10aa Mon Sep 17 00:00:00 2001
From: pkupczyk <pkupczyk>
Date: Tue, 13 May 2014 09:11:47 +0000
Subject: [PATCH] SSDM-274 : Javascript-based Microscopy Data Viewer: -
listener for data set change event - allow to customize data set chooser view
- removed unused classes - updated example webapp
SVN: 31492
---
.../image-viewer/html/image-viewer.html | 21 ++++++-
.../components/imageviewer/AbstractWidget.js | 37 ++++++++++-
.../imageviewer/DataSetChooserView.js | 54 ++++++++++++++++
.../imageviewer/DataSetChooserWidget.js | 50 +--------------
.../imageviewer/DataSetImageViewerView.js | 33 ----------
.../imageviewer/DataSetImageViewerWidget.js | 61 -------------------
6 files changed, 109 insertions(+), 147 deletions(-)
create mode 100644 screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetChooserView.js
delete mode 100644 screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetImageViewerView.js
delete mode 100644 screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetImageViewerWidget.js
diff --git a/screening/source/core-plugins/microscopy/1/as/webapps/image-viewer/html/image-viewer.html b/screening/source/core-plugins/microscopy/1/as/webapps/image-viewer/html/image-viewer.html
index 2571c51e2b6..e336ce30c25 100644
--- a/screening/source/core-plugins/microscopy/1/as/webapps/image-viewer/html/image-viewer.html
+++ b/screening/source/core-plugins/microscopy/1/as/webapps/image-viewer/html/image-viewer.html
@@ -14,15 +14,30 @@
</head>
<body>
<script>
- require([ "jquery", "openbis-screening", "components/imageviewer/ImageViewerChooserWidget" ], function($, openbis, ImageViewerChooserWidget) {
+ require([ "jquery", "openbis-screening", "components/imageviewer/ImageViewerWidget" ], function($, openbis, ImageViewerWidget) {
$(document).ready(function() {
- var facade = new openbis();
+ var facade = new openbis();
facade.login("admin", "password", function(response) {
- var widget = new ImageViewerChooserWidget(facade, [ "20140415140347875-53", "20140506132344798-146" ]);
+
+ var widget = new ImageViewerWidget(facade, [ "20140415140347875-53", "20140429125614418-59", "20140506132344798-146" ]);
+
+ widget.addLoadListener(function() {
+ var view = widget.getDataSetChooserWidget().getView();
+
+ view.getDataSetText = function(dataSetCode) {
+ return "My data set: " + dataSetCode;
+ };
+
+ widget.getDataSetChooserWidget().addChangeListener(function(event) {
+ console.log("data set changed from: " + event.getOldValue() + " to: " + event.getNewValue());
+ });
+ });
+
$("#container").append(widget.render());
});
+
});
});
</script>
diff --git a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/AbstractWidget.js b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/AbstractWidget.js
index 7e2100fa8b6..83c7b5f89ad 100644
--- a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/AbstractWidget.js
+++ b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/AbstractWidget.js
@@ -26,12 +26,24 @@ define([ "jquery", "components/common/ListenerManager" ], function($, ListenerMa
var thisWidget = this;
- this.load(function() {
+ var doRender = function() {
+ thisWidget.panel.empty();
if (thisWidget.getView()) {
thisWidget.panel.append(thisWidget.getView().render());
thisWidget.rendered = true;
+ thisWidget.notifyRenderListeners();
}
- });
+ };
+
+ if (this.loaded) {
+ doRender();
+ } else {
+ this.load(function() {
+ thisWidget.loaded = true;
+ thisWidget.notifyLoadListeners();
+ doRender();
+ });
+ }
return this.panel;
},
@@ -76,7 +88,10 @@ define([ "jquery", "components/common/ListenerManager" ], function($, ListenerMa
setView : function(view) {
this.view = view;
- this.refresh();
+ if (this.rendered) {
+ this.rendered = false;
+ this.render();
+ }
},
addListener : function(eventType, listener) {
@@ -93,6 +108,22 @@ define([ "jquery", "components/common/ListenerManager" ], function($, ListenerMa
notifyChangeListeners : function(event) {
this.notifyListeners("change", event);
+ },
+
+ addLoadListener : function(listener) {
+ this.addListener("load", listener);
+ },
+
+ notifyLoadListeners : function() {
+ this.notifyListeners("load");
+ },
+
+ addRenderListener : function(listener) {
+ this.addListener("render", listener);
+ },
+
+ notifyRenderListeners : function() {
+ this.notifyListeners("render");
}
});
diff --git a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetChooserView.js b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetChooserView.js
new file mode 100644
index 00000000000..456c9c6ca66
--- /dev/null
+++ b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetChooserView.js
@@ -0,0 +1,54 @@
+define([ "jquery", "components/imageviewer/AbstractView" ], function($, AbstractView) {
+
+ //
+ // DATA SET CHOOSER VIEW
+ //
+
+ function DataSetChooserView(controller) {
+ this.init(controller);
+ }
+
+ $.extend(DataSetChooserView.prototype, AbstractView.prototype, {
+
+ init : function(controller) {
+ AbstractView.prototype.init.call(this, controller);
+ this.panel = $("<div>").addClass("dataSetChooser");
+ },
+
+ render : function() {
+ var thisView = this;
+ var widget = $("<div>").addClass("form-group");
+
+ $("<label>").text("Data set").attr("for", "dataSetChooserSelect").appendTo(widget);
+
+ var select = $("<select>").attr("id", "dataSetChooserSelect").addClass("form-control").appendTo(widget);
+
+ this.controller.getDataSetCodes().forEach(function(dataSetCode) {
+ var text = thisView.getDataSetText(dataSetCode);
+ $("<option>").attr("value", dataSetCode).text(text).appendTo(select);
+ });
+
+ select.change(function() {
+ thisView.controller.setSelectedDataSetCode(select.val());
+ });
+
+ return widget;
+ },
+
+ getDataSetText : function(dataSetCode) {
+ return dataSetCode;
+ },
+
+ refresh : function() {
+ var select = this.panel.find("select");
+
+ if (this.controller.getSelectedDataSetCode() != null) {
+ select.val(this.controller.getSelectedDataSetCode());
+ }
+ }
+
+ });
+
+ return DataSetChooserView;
+
+});
\ No newline at end of file
diff --git a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetChooserWidget.js b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetChooserWidget.js
index bc124ccbe86..32b90673167 100644
--- a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetChooserWidget.js
+++ b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetChooserWidget.js
@@ -1,52 +1,8 @@
-define([ "jquery", "components/common/ChangeEvent", "components/imageviewer/AbstractView", "components/imageviewer/AbstractWidget" ], function($,
- ChangeEvent, AbstractView, AbstractWidget) {
+define([ "jquery", "components/common/ChangeEvent", "components/imageviewer/AbstractWidget", "components/imageviewer/DataSetChooserView" ], function(
+ $, ChangeEvent, AbstractWidget, DataSetChooserView) {
//
- // DATA SET CHOOSER VIEW
- //
-
- function DataSetChooserView(controller) {
- this.init(controller);
- }
-
- $.extend(DataSetChooserView.prototype, AbstractView.prototype, {
-
- init : function(controller) {
- AbstractView.prototype.init.call(this, controller);
- this.panel = $("<div>").addClass("dataSetChooser");
- },
-
- render : function() {
- var thisView = this;
- var widget = $("<div>").addClass("form-group");
-
- $("<label>").text("Data set").attr("for", "dataSetChooserSelect").appendTo(widget);
-
- var select = $("<select>").attr("id", "dataSetChooserSelect").addClass("form-control").appendTo(widget);
-
- this.controller.getDataSetCodes().forEach(function(dataSetCode) {
- $("<option>").attr("value", dataSetCode).text(dataSetCode).appendTo(select);
- });
-
- select.change(function() {
- thisView.controller.setSelectedDataSetCode(select.val());
- });
-
- return widget;
- },
-
- refresh : function() {
- var select = this.panel.find("select");
-
- if (this.controller.getSelectedDataSetCode() != null) {
- select.val(this.controller.getSelectedDataSetCode());
- }
- }
-
- });
-
- //
- // DATA SET CHOOSER
+ // DATA SET CHOOSER WIDGET
//
function DataSetChooserWidget(dataSetCodes) {
diff --git a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetImageViewerView.js b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetImageViewerView.js
deleted file mode 100644
index 39965b6a4a0..00000000000
--- a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetImageViewerView.js
+++ /dev/null
@@ -1,33 +0,0 @@
-define([ "jquery", "components/imageviewer/AbstractView", "components/imageviewer/ImageLoader", "components/imageviewer/ImageWidget" ], function($,
- AbstractView, ImageLoader, ImageWidget) {
-
- //
- // DATA SET IMAGE VIEWER VIEW
- //
-
- function DataSetImageViewerView(controller) {
- this.init(controller);
- }
-
- $.extend(DataSetImageViewerView.prototype, AbstractView.prototype, {
- init : function(controller) {
- AbstractView.prototype.init.call(this, controller);
- this.imageLoader = new ImageLoader();
- this.panel = $("<div>").addClass("imageViewer");
- },
-
- render : function() {
- this.panel.append(this.controller.getChannelChooserWidget().render());
- this.panel.append(this.controller.getResolutionChooserWidget().render());
- this.panel.append(this.controller.getChannelStackChooserWidget().render());
-
- this.refresh();
-
- return this.panel;
- }
-
- });
-
- return DataSetImageViewerView;
-
-});
\ No newline at end of file
diff --git a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetImageViewerWidget.js b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetImageViewerWidget.js
deleted file mode 100644
index f07935a0ebb..00000000000
--- a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetImageViewerWidget.js
+++ /dev/null
@@ -1,61 +0,0 @@
-define([ "jquery", "components/imageviewer/AbstractWidget", "components/imageviewer/DataSetImageViewerView",
- "components/imageviewer/ChannelChooserWidget", "components/imageviewer/ResolutionChooserWidget",
- "components/imageviewer/ChannelStackChooserWidget" ], function($, AbstractWidget, DataSetImageViewerView, ChannelChooserWidget,
- ResolutionChooserWidget, ChannelStackChooserWidget) {
-
- //
- // DATA SET IMAGE VIEWER WIDGET
- //
-
- function DataSetImageViewerWidget(imageInfo, imageResolutions) {
- this.init(imageInfo, imageResolutions);
- }
-
- $.extend(DataSetImageViewerWidget.prototype, AbstractWidget.prototype, {
- init : function(imageInfo, imageResolutions, imageLoader) {
- AbstractWidget.prototype.init.call(this, new DataSetImageViewerView(this));
- this.imageInfo = imageInfo;
- this.imageResolutions = imageResolutions;
- },
-
- getChannelChooserWidget : function() {
- if (this.channelChooserWidget == null) {
- var thisWidget = this;
- this.channelChooserWidget = new ChannelChooserWidget(this.imageInfo.imageDataset.imageDataset.imageParameters.channels);
- this.channelChooserWidget.addChangeListener(function() {
- thisWidget.refresh();
- thisWidget.notifyChangeListeners();
- });
- }
- return this.channelChooserWidget;
- },
-
- getResolutionChooserWidget : function() {
- if (this.resolutionChooserWidget == null) {
- var thisWidget = this;
- this.resolutionChooserWidget = new ResolutionChooserWidget(this.imageResolutions);
- this.resolutionChooserWidget.addChangeListener(function() {
- thisWidget.refresh();
- thisWidget.notifyChangeListeners();
- });
- }
- return this.resolutionChooserWidget;
- },
-
- getChannelStackChooserWidget : function() {
- if (this.channelStackChooserWidget == null) {
- var thisWidget = this;
- this.channelStackChooserWidget = new ChannelStackChooserWidget(this.imageInfo.channelStacks);
- this.channelStackChooserWidget.addChangeListener(function() {
- thisWidget.refresh();
- thisWidget.notifyChangeListeners();
- });
- }
- return this.channelStackChooserWidget;
- }
-
- });
-
- return DataSetImageViewerWidget;
-
-});
\ No newline at end of file
--
GitLab