ref 6078:TDM - Create a new widget to support operations's invocation on DataMiner

https://support.d4science.org/issues/6078

Updated to support DataMiner

git-svn-id: https://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/widgets/data-miner-manager-widget@144995 82a268e6-3cf1-43bd-a215-b396298e98cf

src/main/java/org/gcube/portlets/widgets/dataminermanagerwidget/client/experiments/ComputationParametersPanel.java

@@ -26,7 +26,6 @@ import org.gcube.portlets.widgets.dataminermanagerwidget.client.util.UtilsGXT3;
 import org.gcube.portlets.widgets.dataminermanagerwidget.shared.exception.SessionExpiredServiceException;
 
 import com.allen_sauer.gwt.log.client.Log;
-import com.google.gwt.core.client.GWT;
 import com.google.gwt.dom.client.Style.Unit;
 import com.google.gwt.resources.client.ImageResource;
 import com.google.gwt.user.client.rpc.AsyncCallback;
@@ -93,9 +92,11 @@ public class ComputationParametersPanel extends SimpleContainer {
 		v = new VerticalLayoutContainer();
 		add(v);
 
-		Image img = new Image(GWT.getModuleBaseURL() + "../images/operators/"
-				+ (operator.hasImage() ? operator.getId() : "DEFAULT_IMAGE")
-				+ ".png");
+		Image img = new Image(DataMinerManagerPanel.resources.operatorsDefaultImage());
+		
+		//(GWT.getModuleBaseURL() + "../images/operators/"
+		//		+ (operator.hasImage() ? operator.getId() : "DEFAULT_IMAGE")
+		//		+ ".png");
 		img.setStylePrimaryName("workflow-icon");// -15
 		v.add(img, new VerticalLayoutData(-1, -1, new Margins(-15, 0, 0, 5)));
 

src/main/java/org/gcube/portlets/widgets/dataminermanagerwidget/client/experiments/OperatorCategoryPanel.java

@@ -8,6 +8,7 @@ import java.util.List;
 
 import org.gcube.data.analysis.dataminermanagercl.shared.process.Operator;
 import org.gcube.data.analysis.dataminermanagercl.shared.process.OperatorCategory;
+import org.gcube.portlets.widgets.dataminermanagerwidget.client.DataMinerManagerPanel;
 
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.event.dom.client.ClickEvent;
@@ -21,8 +22,8 @@ import com.sencha.gxt.widget.core.client.tips.ToolTipConfig;
 
 /**
  * 
- * @author Giancarlo Panichi
- * email: <a href="mailto:g.panichi@isti.cnr.it">g.panichi@isti.cnr.it</a> 
+ * @author Giancarlo Panichi email: <a
+ *         href="mailto:g.panichi@isti.cnr.it">g.panichi@isti.cnr.it</a>
  *
  */
 public class OperatorCategoryPanel extends SimpleContainer {
@@ -34,37 +35,36 @@ public class OperatorCategoryPanel extends SimpleContainer {
 	private OperatorCategory category;
 	private HtmlLayoutContainer categoryHtml;
 	private VerticalLayoutContainer v;
-	
+
 	/**
 	 * 
 	 * @param handler
 	 * @param cat
 	 */
-	public OperatorCategoryPanel(OperatorsPanelHandler handler, OperatorCategory cat) {
-		super();		
+	public OperatorCategoryPanel(OperatorsPanelHandler handler,
+			OperatorCategory cat) {
+		super();
 		this.handler = handler;
 		this.category = cat;
 		create();
 	}
-	
-	
-	
+
 	public OperatorCategory getCategory() {
 		return category;
 	}
 
-
-
-	private void create(){
-		v=new VerticalLayoutContainer();
+	private void create() {
+		v = new VerticalLayoutContainer();
 		add(v);
 		// set category info
-		categoryHtml = new HtmlLayoutContainer(category.getName() + " <span class='counter'>("+category.getOperators().size()+")</span>");
+		categoryHtml = new HtmlLayoutContainer(category.getName()
+				+ " <span class='counter'>(" + category.getOperators().size()
+				+ ")</span>");
 		categoryHtml.addStyleName("categoryItem");
 		categoryHtml.addStyleName("categoryItem-Collapsed");
 		ToolTipConfig tooltipConfig = createToolTip(category);
 		categoryHtml.setToolTipConfig(tooltipConfig);
-		
+
 		addDomHandler(new ClickHandler() {
 
 			@Override
@@ -74,7 +74,7 @@ public class OperatorCategoryPanel extends SimpleContainer {
 			}
 
 		}, ClickEvent.getType());
-		
+
 		v.add(categoryHtml);
 	}
 
@@ -85,18 +85,17 @@ public class OperatorCategoryPanel extends SimpleContainer {
 	 */
 	private ToolTipConfig createToolTip(OperatorCategory cat) {
 		ToolTipConfig tooltipConfig = new ToolTipConfig();
-		tooltipConfig.setTitleHtml("<br>&nbsp;&nbsp;"+cat.getName());  
+		tooltipConfig.setTitleHtml("<br>&nbsp;&nbsp;" + cat.getName());
 		tooltipConfig.setMouseOffsetX(0);
 		tooltipConfig.setMouseOffsetY(0);
 		tooltipConfig.setAnchor(Side.LEFT);
 		tooltipConfig.setDismissDelay(5000);
-		tooltipConfig.setBodyHtml(
-				getTooltipTemplate(GWT.getModuleBaseURL(), cat.getId(), cat.hasImage(), cat.getDescription())
-				);  
+		tooltipConfig.setBodyHtml(getTooltipTemplate(GWT.getModuleBaseURL(),
+				cat.getId(), cat.hasImage(), cat.getDescription()));
 		tooltipConfig.setMaxWidth(TOOLTIP_WIDTH);
 		return tooltipConfig;
 	}
-	
+
 	/**
 	 * 
 	 * @param base
@@ -106,14 +105,29 @@ public class OperatorCategoryPanel extends SimpleContainer {
 	 * @return
 	 */
 	private String getTooltipTemplate(String base, String id, boolean hasImage, String description){ 
-         String html =  
+		String image;
+		if(hasImage==false||id==null||id.isEmpty()){
+        	image=DataMinerManagerPanel.resources.categoryDefaultImage().getSafeUri().asString();
+        }  else {
+        	switch(id){
+        	case "DISTRIBUTIONS":
+        		image=DataMinerManagerPanel.resources.categoryDefaultImage().getSafeUri().asString();
+        		break;
+        	default:
+        		image=DataMinerManagerPanel.resources.categoryDefaultImage().getSafeUri().asString();
+        		break;
+        			
+        	}
+        }
+		
+		String html =  
 			"<div class='categoryItemTooltip'>"+
-				"<img src='" + base + "../images/categories/"+(hasImage ? id : "DEFAULT_IMAGE")+".png' >"+
+				"<img src='"+image+ "' >"+
 				Format.ellipse(description, 100)+
 			"</div>";
 		return html; 
 	};
-	
+
 	/**
 	 * 
 	 */
@@ -131,7 +145,7 @@ public class OperatorCategoryPanel extends SimpleContainer {
 		categoryHtml.removeStyleName("categoryItem-Expanded");
 		categoryHtml.addStyleName("categoryItem-Collapsed");
 
-		for (OperatorPanel op: this.operatorPanelsList)
+		for (OperatorPanel op : this.operatorPanelsList)
 			v.remove(op);
 		isCollapsed = true;
 		forceLayout();
@@ -141,7 +155,7 @@ public class OperatorCategoryPanel extends SimpleContainer {
 	 * 
 	 */
 	private void expand() {
-		if (operatorPanelsList==null) {
+		if (operatorPanelsList == null) {
 			// init operator panels
 			operatorPanelsList = new ArrayList<OperatorPanel>();
 			for (Operator op : category.getOperators()) {
@@ -149,29 +163,27 @@ public class OperatorCategoryPanel extends SimpleContainer {
 				operatorPanelsList.add(operatorPanel);
 			}
 		}
-		
+
 		categoryHtml.removeStyleName("categoryItem-Collapsed");
 		categoryHtml.addStyleName("categoryItem-Expanded");
-		for (OperatorPanel op: this.operatorPanelsList)
+		for (OperatorPanel op : this.operatorPanelsList)
 			v.add(op);
 		isCollapsed = false;
 		forceLayout();
 	}
-	
-	public void setDefaultOperator(){
+
+	public void setDefaultOperator() {
 		expand();
 	}
 
-
-
 	public void setOperatorDefault(Operator operatorDefault) {
 		expand();
-		for(OperatorPanel opPanel:operatorPanelsList){
-			if(opPanel.getOperator().compareTo(operatorDefault)==0){
+		for (OperatorPanel opPanel : operatorPanelsList) {
+			if (opPanel.getOperator().compareTo(operatorDefault) == 0) {
 				opPanel.setAsTheDefaultOperator();
 				break;
 			}
 		}
-		
+
 	}
 }

src/main/java/org/gcube/portlets/widgets/dataminermanagerwidget/client/experiments/OperatorPanel.java

@@ -2,6 +2,7 @@ package org.gcube.portlets.widgets.dataminermanagerwidget.client.experiments;
 
 
 import org.gcube.data.analysis.dataminermanagercl.shared.process.Operator;
+import org.gcube.portlets.widgets.dataminermanagerwidget.client.DataMinerManagerPanel;
 
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.event.dom.client.ClickEvent;
@@ -112,9 +113,24 @@ public class OperatorPanel extends SimpleContainer {
 	 */
 	private String getTooltipTemplate(String base, String id, boolean hasImage,
 			String description) {
+		String image;
+		if(hasImage==false||id==null||id.isEmpty()){
+        	image=DataMinerManagerPanel.resources.operatorsDefaultImage().getSafeUri().asString();
+        }  else {
+        	switch(id){
+        	case "AquamapsNative2050":
+        		image=DataMinerManagerPanel.resources.operatorsAquamapsNative2050Operator().getSafeUri().asString();
+        		break;
+        	default:
+        		image=DataMinerManagerPanel.resources.operatorsDefaultImage().getSafeUri().asString();
+        		break;
+        			
+        	}
+        }
+		
+		
 		String template = "<div class='categoryItemTooltip'>" + "<img src='"
-				+ base + "../images/operators/"
-				+ (hasImage ? id : "DEFAULT_IMAGE") + ".png' >" + Format.ellipse(description, TOOLTIP_DESCRIPTION_LENGHT)
+				+ image +"' >" + Format.ellipse(description, TOOLTIP_DESCRIPTION_LENGHT)
 				+ "</div>";
 
 		return template;

src/main/java/org/gcube/portlets/widgets/dataminermanagerwidget/client/resources/Resources.java

@@ -14,10 +14,10 @@ import com.google.gwt.resources.client.ImageResource;
 public interface Resources extends ClientBundle {
 	@Source("DataMiner.css")
 	CssResource dataMinerCSS();
-	
+
 	@Source("WikiLink.txt")
 	ExternalTextResource wikiLink();
-	
+
 	@Source("logoLittle.png")
 	ImageResource logoLittle();
 
@@ -50,7 +50,7 @@ public interface Resources extends ClientBundle {
 
 	@Source("folder_explore.png")
 	ImageResource folderExplore();
-	
+
 	@Source("draw-geometry.png")
 	ImageResource drawGeometry();
 
@@ -68,7 +68,7 @@ public interface Resources extends ClientBundle {
 
 	@Source("menuItemDataspace.png")
 	ImageResource menuItemInputspace();
-	
+
 	@Source("menuItemHelp.png")
 	ImageResource menuItemHelp();
 
@@ -78,8 +78,8 @@ public interface Resources extends ClientBundle {
 	@Source("ajax-complete.gif")
 	ImageResource loadingComplete();
 
-	//@Source("save.png")
-	//ImageResource save();
+	// @Source("save.png")
+	// ImageResource save();
 
 	@Source("user_green.png")
 	ImageResource userPerspective();
@@ -89,23 +89,128 @@ public interface Resources extends ClientBundle {
 
 	@Source("download.png")
 	ImageResource download();
-	
+
 	@Source("cancel_circle.png")
 	ImageResource cancelCircle();
-	
+
 	@Source("delete_circle.png")
 	ImageResource deleteCircle();
-	
+
 	@Source("refresh.png")
 	ImageResource refresh();
-	
+
 	@Source("resubmit.png")
 	ImageResource resubmit();
 
 	@Source("show.png")
 	ImageResource show();
-	
+
 	@Source("table.png")
 	ImageResource tabularResource();
-	
+
+	@Source("triangle-down.png")
+	ImageResource triangleDown();
+
+	@Source("triangle-right.png")
+	ImageResource triangleRight();
+
+	// *********************** CATEGORIES
+
+	@Source("categories/DEFAULT_IMAGE.png")
+	ImageResource categoryDefaultImage();
+
+	@Source("categories/DISTRIBUTIONS.png")
+	ImageResource categoryDistributions();
+
+	// ************************ OPERATORS
+
+	@Source("operators/AQUAMAPS_NATIVE_2050.png")
+	ImageResource operatorsAquamapsNative2050Operator();
+
+	@Source("operators/AQUAMAPS_NATIVE_NEURALNETWORK.png")
+	ImageResource operatorsAquamapsNativeNeuralOperator();
+
+	@Source("operators/AQUAMAPS_NATIVE.png")
+	ImageResource operatorsAquamapsNativeOperator();
+
+	@Source("operators/AQUAMAPS_NEURAL_NETWORK_NS.png")
+	ImageResource operatorsAquamapsNeuralOperator();
+
+	@Source("operators/AQUAMAPS_SUITABLE_2050.png")
+	ImageResource operatorsAquamapsSuitable2050Operator();
+
+	@Source("operators/AQUAMAPS_SUITABLE_NEURALNETWORK.png")
+	ImageResource operatorsAquamapsSuitableNeuralOperator();
+
+	@Source("operators/AQUAMAPS_SUITABLE.png")
+	ImageResource operatorsAquamapsSuitableOperator();
+
+	@Source("operators/AQUAMAPSNN.png")
+	ImageResource operatorsAquamapsNNOperator();
+
+	@Source("operators/AQUAMAPSNNNS.png")
+	ImageResource operatorsAquamapsNNNSOperator();
+
+	@Source("operators/DEFAULT_IMAGE.png")
+	ImageResource operatorsDefaultImage();
+
+	@Source("operators/DEFAULT_IMAGEold.png")
+	ImageResource operatorsOldDefaultImage();
+
+	@Source("operators/HSPEN.png")
+	ImageResource operatorsHSPEN();
+
+	@Source("operators/REMOTE_AQUAMAPS_NATIVE_2050.png")
+	ImageResource operatorsRemoteAquamapsNative2050Operator();
+
+	@Source("operators/REMOTE_AQUAMAPS_NATIVE.png")
+	ImageResource operatorsRemoteAquamapsNativeOperator();
+
+	@Source("operators/REMOTE_AQUAMAPS_SUITABLE_2050.png")
+	ImageResource operatorsRemoteAquamapsSuitable2050Operator();
+
+	@Source("operators/REMOTE_AQUAMAPS_SUITABLE.png")
+	ImageResource operatorsRemoteAquamapsSuitableOperator();
+
+	// *************************** TEMPLATE
+
+	@Source("templateIcons/CLUSTER.png")
+	ImageResource clusterTemplate();
+
+	@Source("templateIcons/FILE.png")
+	ImageResource fileTemplate();
+
+	@Source("templateIcons/GENERIC.png")
+	ImageResource genericTemplate();
+
+	@Source("templateIcons/HCAF.png")
+	ImageResource hcafTemplate();
+
+	@Source("templateIcons/HSPEC.png")
+	ImageResource hspecTemplate();
+
+	@Source("templateIcons/HSPEN.png")
+	ImageResource hspenTemplate();
+
+	@Source("templateIcons/MINMAXLAT.png")
+	ImageResource minMaxLatTemplate();
+
+	@Source("templateIcons/OCCURRENCE_AQUAMAPS.png")
+	ImageResource occurrenceAMTemplate();
+
+	@Source("templateIcons/OCCURRENCE_SPECIES.png")
+	ImageResource occurrenceSpeciesTemplate();
+
+	@Source("templateIcons/TESTSET.png")
+	ImageResource testSetTemplate();
+
+	@Source("templateIcons/TIME_SERIES.png")
+	ImageResource time_SeriesTemplate();
+
+	@Source("templateIcons/TIMESERIES.png")
+	ImageResource timeSeriesTemplate();
+
+	@Source("templateIcons/TRAININGSET.png")
+	ImageResource trainingSetTemplate();
+
 }

src/main/webapp/DataMinerManagerWidget.css

@@ -52,415 +52,3 @@
 	margin: 0px !important;
 }
 
-/* Data Miner */
-.smLayoutContainer {
-	/* Blue
-	box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 5px rgba(0, 28, 121, 1), 0px 0 40px
-		rgba(0, 28, 121, 0.15);
-	-moz-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 5px rgba(0, 28, 121, 1), 0px 0 40px
-		rgba(0, 28, 121, 0.15);
-	-webkit-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 5px rgba(0, 28, 121, 1), 0px 0 40px
-		rgba(0, 28, 121, 0.15);
-	-o-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 5px rgba(0, 28, 121, 1), 71px 0 27px
-		rgba(0, 28, 121, 0.15);*/
-	box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 0px 0 27px
-		rgba(0, 0, 0, 0.15);
-	-moz-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 0px 0 27px
-		rgba(0, 0, 0, 0.15);
-	-webkit-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 0px 0 27px
-		rgba(0, 0, 0, 0.15);
-	-o-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 71px 0 27px
-		rgba(0, 0, 0, 0.15);
-	border-radius: 0;
-	-moz-border-radius: 0;
-	-webkit-border-radius: 0;
-	-o-border-radius: 0;
-}
-
-.smMenu {
-	/*width: 720px !important;*/ /*height: 570px !important;*/
-	/*overflow: auto;
-	margin: auto;
-	margin-bottom: 20px;*/
-	
-}
-
-.layoutContainerArea {
-	margin-right: 20px;
-}
-
-.smMenuItem {
-	box-shadow: inset 0 0 99px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 0px 0 27px
-		rgba(0, 0, 0, 0.15);
-	-moz-box-shadow: inset 0 0 99px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 0px 0 27px
-		rgba(0, 0, 0, 0.15);
-	-webkit-box-shadow: inset 0 0 99px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 0px 0 27px
-		rgba(0, 0, 0, 0.15);
-	-o-box-shadow: inset 0 0 99px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 71px 0 27px
-		rgba(0, 0, 0, 0.15);
-	border-radius: 0;
-	-moz-border-radius: 0;
-	-webkit-border-radius: 0;
-	-o-border-radius: 0;
-	/*padding: 10px;*/
-/*margin-bottom: 30px;
-	margin-left: 200px;
-	width: 480px;*/
-}
-
-.smMenuItem:HOVER {
-	cursor: pointer;
-	opacity: 0.7;
-}
-
-.smMenuItem img {
-	border: 1px solid #C0C0C0;
-	display: inline;
-}
-
-.smMenuItemText b {
-	display: block;
-	color: #225f97;
-	font-size: 20px;
-}
-
-.smMenuItemText {
-	font: 12px/1.5 "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana,
-		sans-serif;
-	display: block;
-	color: #606060;
-	/*margin-right: 10px;*/
-}
-
-/* OPERATORS PANEL */
-.opePanel {
-	
-}
-
-.opePanel:hover {
-	cursor: pointer;
-}
-
-.categoryItem {
-	margin-top: 10px;
-	margin-left: 5px;
-	font-size: 15px;
-	font-variant: small-caps;
-	font-weight: bolder;
-	border-bottom: 2px solid #505050;
-	margin-bottom: 5px;
-	background-image: url(images/triangle-right.png);
-	background-repeat: no-repeat;
-	background-position: right;
-}
-
-.categoryItem-Collapsed {
-	background-image: url(images/triangle-right.png);
-}
-
-.categoryItem-Expanded {
-	background-image: url(images/triangle-down.png);
-}
-
-.categoryItem:hover {
-	color: #3087d6;
-	cursor: pointer;
-}
-
-.filterResultText {
-	margin-top: 10px;
-	margin-left: 5px;
-	font-size: 15px;
-	font-variant: small-caps;
-	font-weight: bolder;
-	border-bottom: 2px solid #505050;
-	margin-bottom: 5px;
-}
-
-.categoryItem .counter, .filterResultText .counter {
-	font-size: 10px;
-	color: #555555;
-}
-
-.operatorPanel {
-	box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px
-		rgba(77, 77, 77, 1);
-	-moz-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px
-		rgba(77, 77, 77, 1);
-	-webkit-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px
-		rgba(77, 77, 77, 1);
-	-o-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px
-		rgba(77, 77, 77, 1);
-	border-radius: 5px;
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;
-	-o-border-radius: 5px;
-	margin: 0px 5px 5px 10px; /* top right bottom left*/
-	padding: 5px;
-	overflow: hidden;
-	height: 78px;
-}
-
-.operatorPanel-selected {
-	background-color: #e0e7f7;
-}
-
-.operatorPanel-title {
-	font-size: 13px;
-	font-weight: bolder;
-	color: #225f97;
-}
-
-.operatorPanel-title-selected {
-	color: #770000;
-}
-
-.operatorPanel-briefDescription {
-	font-size: 10px;
-	color: #505050;
-}
-
-.operatorPanel img {
-	float: right;
-}
-
-.operatorPanel img:hover {
-	cursor: pointer;
-	opacity: 0.6;
-}
-
-.tableImporter, .uploadMonitor {
-	box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px
-		rgba(77, 77, 77, 1);
-	-moz-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px
-		rgba(77, 77, 77, 1);
-	-webkit-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px
-		rgba(77, 77, 77, 1);
-	-o-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px
-		rgba(77, 77, 77, 1);
-	border-radius: 5px;
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;
-	-o-border-radius: 5px;
-	padding: 5px;
-	border: 1px solid black;
-	margin-left: 5px;
-	margin-right: 5px;
-}
-
-/* WORKFLOW PANEL */
-.workflow {
-	box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px
-		rgba(77, 77, 77, 1);
-	-moz-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px
-		rgba(77, 77, 77, 1);
-	-webkit-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px
-		rgba(77, 77, 77, 1);
-	-o-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0
-		rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px
-		rgba(77, 77, 77, 1);
-	border-radius: 5px;
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;
-	-o-border-radius: 5px;
-	/*padding: 5px;*/
-	border: 1px solid black;
-	/*margin-left: 5px;
-	margin-right: 5px;*/
-		
-}
-
-.workflow-icon {
-	border: 1px solid black;
-	float: left;
-	position: relative;
-	left: 10px;
-	top: -20px;
-}
-
-.workflow-title {
-	text-align: center;
-	font-size: 16px;
-	font-weight: bold;
-	color: #225f97;
-}
-
-.workflow-description {
-	font-size: 13px;
-	color: #505050;
-}
-
-.workflow-computation-title {
-	padding-left: 5px;
-	padding-right: 5px;
-	padding-top: 8px;
-}
-
-.workflow-fieldDescription {
-	font-size: 12px;
-	color: #505050;
-}
-
-.workflow-templatesList {
-	font-size: 9px;
-	color: #505050;
-	margin-top: 4px;
-}
-
-.workflow-parameters-description {
-	font-size: 10px;
-	color: #505050;
-	margin-top: 4px;
-}
-
-.workflow-parameters-tableDescription {
-	font-size: 12px;
-	/*	border: 1px solid gray;*/
-	color: white;
-	margin-right: 5px;
-	padding-right: 4px;
-	padding-left: 4px;
-	background-color: gray;
-}
-
-.workflow-parameters-preload {
-	display: block;
-	background: url('ajax-loader-big.gif') no-repeat;
-	width: 400px;
-	height: 180px;
-}
-
-/* TOOLTIP */
-.x-tip-mc {
-	padding: 6px;
-}
-
-.categoryItemTooltip {
-	height: 80px;
-}
-
-.categoryItemTooltip img {
-	border: 1px solid black;
-	float: left;
-	margin-right: 5px;
-}
-
-/* TABLE EXPLORER */
-.tableSelector-details {
-	margin-top: 20px;
-	margin-left: 5px;
-	margin-right: 5px;
-}
-
-.tableSelector-details img {
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-	margin-bottom: 10px;
-}
-
-#computationGrid .x-grid3-cell {
-	vertical-align: middle;
-}
-
-.menuImgLogo:HOVER {
-	/*	cursor: pointer;*/
-	
-}
-
-.menuItemImage {
-	opacity: 0.5;
-}
-
-.menuItemImage:HOVER {
-	cursor: pointer;
-	opacity: 1;
-}
-
-.menuItemImage-selected {
-	opacity: 1;
-}
-
-.menuItemImage-selected:HOVER {
-	cursor: auto;
-}
-
-/*
-* Computation Execution
-*/
-.computationExcecutionPanel {
-	font-size: 12px;
-	color: black;
-}
-
-.computationStatusPanel {
-	border: 1px solid black;
-	padding: 10px;
-}
-
-.computationStatusTitle {
-	
-}
-
-.computationStatusDate {
-	
-}
-
-/**
-* Computation Output 
-*/
-.computation-output-outputType {
-	background-color: #EEEEEE;
-	border: 1px solid #BDBDBD;
-	/*font-weight: bold;*/
-	padding: 5px;
-	text-align: center;
-	margin-top: 20px;
-	margin-bottom: 10px;
-}
-
-.computation-output-groupTitle {
-	font-style: italic;
-	font-weight: bold;
-	margin-top: 5px;
-	margin-bottom: 5px;
-}
-
-.computation-output-separator {
-	border-top: 2px solid #AAAAAA;
-	margin-top: 8px;
-	margin-bootm: 8px;
-
-	/* height: 30px;
-    margin: 8px auto auto;
-    width: 400px;
-    */
-}
-
-.computation-output-fileName {
-	margin-top: 2px;
-	margin-bottom: 2px;
-}