Basic functionalities are working after Refactoring

Menouar AZIB
1 parent 2b1b3d60
Showing 9 changed files with 718 additions and 143 deletions Show diff stats
js/app/views/PlotComponents/PlotZoomPlug copy.js
js/app/views/PlotComponents/PlotZoomPlug.js
js/app/views/PlotComponents/intervalSelection/DateIntervalSelection.js
js/app/views/PlotComponents/intervalSelection/DateZoomIntervalSelection.js
js/app/views/PlotComponents/intervalSelection/IntervalSelection.js
js/app/views/PlotComponents/intervalSelection/NumberZoomIntervalSelection.js
js/app/views/PlotComponents/intervalSelection/PlotFunctionIntervalSelection.js
js/app/views/PlotComponents/intervalSelection/ZoomIntervalSelection.js
js/app/views/PlotTabResultUI.js
@@ -0,0 +1,517 @@
+/**
+ * Project      :  AMDA-NG
+ * Name         : PlotZoomPlug.js
+ * @plugin    amdaPlotComp.PlotZoomPlug
+ * @extends    Ext.util.Observable
+ * @ptype      plotZoomPlugin
+ * @brief     Plot Zoom UI (View)
+ * @author Benjamin
+ * @version $Id: PlotZoomPlug.js
+ ********************************************************************************
+ *    FT Id     :   Date   : Name - Description
+ *******************************************************************************
+ *  :
+ */
+
+
+Ext.define('amdaPlotComp.PlotZoomPlug', {
+  extend: 'Ext.util.Observable',
+  alias: 'plugin.plotZoomPlugin',
+  requires: ['amdaPlotComp.intervalSelection.IntervalSelection',
+    'amdaPlotComp.plotFunction.ParamField', 'amdaPlotComp.plotFunction.FunctionType', 'amdaPlotComp.plotFunction.CreatePlot'],
+
+  //id: 'plot-zoom-plug',
+
+  ttModuleId: 'timetab-win',
+  catModuleId: 'catalog-win',
+
+  win: null,
+  form: null,
+  zoomType: '',
+  interactiveId: '',
+  panelId: -1,
+  myChildWindow: null,
+
+  linkedTTCatNode: null,
+  /**
+   * Un composant de 'PlotFunction' qui permet d'afficher le min samplig de chaque paramètre et le nombre de points théoriques entre un start time et stop time
+   */
+  plotFunctionParamField: null,
+  /**
+   * Un composant de 'PlotFunction' qui permet à l'utilisateur de séléctionner le type de fonction à appliquer : FFT, SUM, ...
+   */
+  plotFunctionType: null,
+
+  constructor: function (config) {
+    Ext.apply(this, config);
+    this.callParent(arguments);
+  },
+
+  onDestroy: function () {
+    this.win = null;
+  },
+
+  init: function (cmp) {
+    this.hostCmp = cmp;
+  },
+
+  /**
+   * Set different parameters displayed on the current panel
+   * @param {*} listParams_  parameters displayed on the current panel
+   */
+  /*setParameters: function (listParams_) {
+    this.listParams = listParams_;
+    //this.plotFunctionParamField = new amdaPlotComp.plotFunction.ParamField({ params: this.listParams });
+    this.plotFunctionType = new amdaPlotComp.plotFunction.FunctionType({});
+  },*/
+
+
+  setMinValue: function (min) {
+    if (!this.form)
+      return;
+
+    this.myChildWindow.setField1Value(min);
+
+    if (this.zoomType == 'timeAxis') {
+      this.form.getForm().findField('zoom-min-time').setValue(min);
+
+    }
+    else
+      this.form.getForm().findField('zoom-min-float').setValue(min);
+  },
+
+  setMaxValue: function (max) {
+    if (!this.form)
+      return;
+
+      this.myChildWindow.setField2Value(max);
+
+    if (this.zoomType == 'timeAxis') {
+      var minValue = this.form.getForm().findField('zoom-min-time').getValue();
+      if (minValue <= max) {
+        this.form.getForm().findField('zoom-max-time').setValue(max);
+        //if (this.isPlotFunction)
+        //this.plotFunctionParamField.setValues(minValue, max);
+      }
+      else {
+        this.form.getForm().findField('zoom-min-time').setValue(max);
+        this.form.getForm().findField('zoom-max-time').setValue(minValue);
+        // if (this.isPlotFunction)
+        // this.plotFunctionParamField.setValues(max, minValue);
+      }
+    }
+    else {
+      var minValue = this.form.getForm().findField('zoom-min-float').getValue();
+      if (minValue <= max)
+        this.form.getForm().findField('zoom-max-float').setValue(max);
+      else {
+        this.form.getForm().findField('zoom-min-float').setValue(max);
+        this.form.getForm().findField('zoom-max-float').setValue(minValue);
+      }
+    }
+  },
+
+  /**
+   *  add Interval to Time table
+   **/
+  insertInterval: function () {
+    if (this.zoomType != 'timeAxis')
+      return;
+
+    var start = this.form.getForm().findField('zoom-min-time').getValue();
+    var stop = this.form.getForm().findField('zoom-max-time').getValue();
+
+    var TTCatType = this.form.getForm().findField('ttcat-type').getValue();
+    var isCatalog = (TTCatType == 'catalog');
+
+    myDesktopApp.getLoadedModule(isCatalog ? this.catModuleId : this.ttModuleId, true, function (module) {
+      var targetModuleUI = module.getUiContent();
+      if (targetModuleUI)
+        targetModuleUI.addInterval(start, stop);
+    });
+  },
+
+  /**
+   *  creation of the window
+   */
+  show: function (interactiveId, zoomType, panelId, isPlotFunction_ = false) {
+     this.myChildWindow = Ext.create('amdaPlotComp.intervalSelection.DateIntervalSelection', {renderTo: this.hostCmp.ownerCt.body});
+    // Show the window
+    this.myChildWindow.show();
+    this.myChildWindow.setPosition(100, 100);
+   
+    this.isPlotFunction = isPlotFunction_;
+    if (this.win) { this.close() };
+      this.win = new Ext.Window({
+        id: 'plot-zoom-win-' + this.hostCmp.ownerCt.getId(), // Plot window ID
+        width: 250,
+        x: 0, y: 0,
+        baseCls: 'x-panel',
+        title: 'Zoom',
+        constrain: true,
+        collapsible: true,
+        resizable: false,
+        ghost: false,
+        renderTo: this.hostCmp.ownerCt.body,
+        items: this.getFormConfig(),
+        listeners: {
+          scope: this,
+          beforeclose: function () {
+            this.hostCmp.panelImage.hidePanelMarker();
+            this.hostCmp.panelImage.stopZoom();
+          },
+          show: function(win, eOpts) {
+            this.hostCmp.panelImage.showPanelMarker(panelId);
+          }
+        },
+        getConstrainVector: function (constrainTo) {
+          var me = this;
+          if (me.constrain || me.constrainHeader) {
+            constrainTo = constrainTo || (me.floatParent && me.floatParent.getTargetEl()) || me.container || me.el.getScopeParent();
+            return (me.constrainHeader ? me.header.el : me.el).getConstrainVector(constrainTo);
+          }
+        }
+      });
+
+      this.win.on('destroy', this.onDestroy, this);
+
+    this.interactiveId = interactiveId;
+    this.updateWinByType(zoomType, panelId);
+    this.win.show();
+    this.win.setPosition(0, 0);
+  },
+
+  close: function () {
+    if (this.win == null)
+      return;
+    this.win.close();
+  },
+
+  updateWinByType: function (zoomType, panelId) {
+    if (this.win == null)
+      return;
+
+    this.zoomType = zoomType;
+    this.panelId = panelId;
+
+    switch (zoomType) {
+      case 'timeAxis':
+        if (this.isPlotFunction) {
+          const title = "Apply a Fct on Interval";
+          this.win.setTitle(title + '-Panel Id: ' + panelId);
+        } else {
+          this.win.setTitle('Zoom on time axis & Interval selection - Panel Id : ' + panelId);
+        }
+        break;
+      case 'y-left':
+        this.win.setTitle('Zoom on Y Left axis - Panel Id : ' + panelId);
+        break;
+      case 'y-right':
+        this.win.setTitle('Zoom on Y Right axis - Panel Id : ' + panelId);
+        break;
+      case 'xaxis_id':
+        this.win.setTitle('Zoom on X axis - Panel Id : ' + panelId);
+        break;
+    }
+
+    this.form.getForm().findField('zoom-min-time').setVisible(this.zoomType == 'timeAxis');
+    this.form.getForm().findField('zoom-max-time').setVisible(this.zoomType == 'timeAxis');
+
+    this.form.getForm().findField('zoom-min-float').setVisible(this.zoomType != 'timeAxis');
+    this.form.getForm().findField('zoom-max-float').setVisible(this.zoomType != 'timeAxis');
+
+    var ttCatNameField = this.form.getForm().findField('ttcat-name');
+    if (ttCatNameField)
+      ttCatNameField.findParentByType('fieldset').setVisible(this.zoomType == 'timeAxis');
+  },
+
+  resetMinMaxValue: function () {
+    if (this.zoomType == 'timeAxis') {
+      this.form.getForm().findField('zoom-min-time').setValue('');
+      this.form.getForm().findField('zoom-max-time').setValue('');
+    }
+    else {
+      this.form.getForm().findField('zoom-min-float').setValue(null);
+      this.form.getForm().findField('zoom-max-float').setValue(null);
+    }
+
+    this.hostCmp.panelImage.resetZoom();
+  },
+  setTimePlot: function () {
+    var timeObj = new Object();
+    timeObj.start = this.form.getForm().findField('zoom-min-time').getValue();
+    timeObj.stop = this.form.getForm().findField('zoom-max-time').getValue();
+    timeObj.interactiveId = this.interactiveId;
+    var plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id);
+    plotModule.setTimeInterval(timeObj);
+  },
+  /**
+   *        Main form
+   */
+  getFormConfig: function () {
+    var intervalFieldSet = {
+      xtype: 'fieldset',
+      title: 'Interval Selection',
+      name: 'interval-selection-fieldset',
+      collapsible: false,
+      layout: {
+        type: 'vbox',
+        pack: 'start',
+        align: 'stretch'
+      },
+      items: [
+        {
+          xtype: 'datefield', name: 'zoom-min-time', fieldLabel: 'Start Time',
+          format: 'Y/m/d H:i:s.u',
+        },
+        {
+          xtype: 'datefield', name: 'zoom-max-time', fieldLabel: 'Stop Time',
+          format: 'Y/m/d H:i:s.u'
+        },
+        {
+          xtype: 'numberfield', name: 'zoom-min-float', fieldLabel: 'Min Value'
+        },
+        {
+          xtype: 'numberfield', name: 'zoom-max-float', fieldLabel: 'Max Value'
+        },
+        {
+          xtype: 'button',
+          width: 100,
+          text: 'Reset',
+          scope: this,
+          handler: function () {
+            this.resetMinMaxValue();
+          }
+        },
+        {
+          xtype: 'button',
+          width: 100,
+          text: 'Use in Time Selection',
+          scope: this,
+          handler: function () {
+            this.setTimePlot();
+          }
+        }
+      ]
+    };
+
+    var insertTypeStore = Ext.create('Ext.data.Store', {
+      fields: ['key', 'name'],
+      data: [
+        { "key": "timeTable", "name": "TimeTable" },
+        { "key": "catalog", "name": "Catalog" }
+      ]
+    });
+
+    var me = this;
+    this.insertTTFieldSet = {
+      xtype: 'fieldset',
+      title: 'Add in Time Table or Catalog',
+      name: 'tt-insertion-fieldset',
+      collapsible: false,
+      layout: {
+        type: 'vbox',
+        pack: 'start',
+        align: 'stretch'
+      },
+      items: [
+        {
+          xtype: 'combo',
+          fieldLabel: 'Insert In',
+          store: insertTypeStore,
+          queryMode: 'local',
+          displayField: 'name',
+          valueField: 'key',
+          editable: false,
+          value: 'timeTable',
+          name: 'ttcat-type'
+        },
+        {
+          xtype: 'textfield',
+          fieldLabel: 'Name',
+          name: 'ttcat-name',
+          listeners:
+          {
+            render: function (o, op) {
+              var field = this;
+              var el = this.el;
+              var dropTarget = Ext.create('Ext.dd.DropTarget', el, {
+                ddGroup: 'explorerTree',
+                notifyOver: function (ddSource, e, data) {
+                  var TTCatType = me.form.getForm().findField('ttcat-type').getValue();
+                  if (data.records[0].data.leaf && (data.records[0].data.nodeType == TTCatType)) {
+                    this.valid = true;
+                    return this.dropAllowed;
+                  }
+                  this.valid = false;
+                  return this.dropNotAllowed;
+                },
+                notifyDrop: function (ddSource, e, data) {
+                  if (!this.valid)
+                    return false;
+                  field.setValue(data.records[0].get('text'));
+                  return true;
+                }
+              });
+            }
+          }
+        },
+        {
+          xtype: 'button',
+          width: 100,
+          text: 'Insert Interval',
+          scope: this,
+          handler: function () {
+            var me = this;
+
+            var TTCatType = this.form.getForm().findField('ttcat-type').getValue();
+            var TTCatName = this.form.getForm().findField('ttcat-name').getValue();
+
+            var isCatalog = (TTCatType == 'catalog');
+            myDesktopApp.getLoadedModule(isCatalog ? this.catModuleId : this.ttModuleId, true, function (module) {
+              var targetModuleUI = module.getUiContent();
+              if (me.linkedTTCatNode && (me.linkedTTCatNode.get('text') == TTCatName) && (me.linkedTTCatNode.get('nodeType') == TTCatType)) {
+                if (targetModuleUI)
+                  me.insertInterval();
+                else {
+                  me.linkedTTCatNode.editLeaf(function () {
+                    me.insertInterval();
+                  });
+                }
+              }
+              else {
+                var explorerTree = Ext.getCmp(amdaUI.ExplorerUI.RESRC_TAB.TREE_ID);
+                var ttCatRootNode = explorerTree.getRootNode().findChild('id', isCatalog ? 'catalog-treeRootNode' : 'timeTable-treeRootNode', true);
+                amdaModel.InteractiveNode.preloadNodes(ttCatRootNode, function () {
+                  var nodeWithSameName = null;
+
+                  if (TTCatName != '')
+                    nodeWithSameName = ttCatRootNode.findChild('text', TTCatName, true);
+
+                  if (nodeWithSameName !== null)
+                    me.linkedTTCatNode = nodeWithSameName;
+                  else {
+                    module.createLinkedNode();
+                    module.getLinkedNode().set('text', TTCatName);
+                    me.linkedTTCatNode = module.getLinkedNode();
+                    var obj = {
+                      name: TTCatName,
+                      fromPlugin: true
+                    };
+                    if (isCatalog) {
+                      Ext.Msg.prompt('Define Parameters', 'Please enter parameters number for the new catalog:', function (btn, text) {
+                        if (btn == 'ok') {
+                          obj.nbParameters = parseInt(text, 10);
+                          if (isNaN(obj.nbParameters)) {
+                            obj.nbParameters = 1;
+                          }
+                          module.createObject(obj);
+                          me.linkedTTCatNode.editLeaf(function () {
+                            me.insertInterval();
+                          });
+                        }
+                      });
+                      return;
+                    }
+                    else {
+                      module.createObject(obj);
+                    }
+                  }
+
+                  me.linkedTTCatNode.editLeaf(function () {
+                    me.insertInterval();
+                  });
+                });
+              }
+            });
+          }
+        }
+      ]
+    };
+
+    this.plotFunctionType = new amdaPlotComp.plotFunction.FunctionType({});
+
+    this.form = new Ext.form.FormPanel({
+      frame: true,
+      width: 255,
+      layout: {
+        type: 'vbox',
+        pack: 'start',
+        align: 'stretch'
+      },
+      fieldDefaults: {
+        labelWidth: 60
+      },
+      items: [
+        intervalFieldSet,
+        this.isPlotFunction ? this.plotFunctionType : this.insertTTFieldSet
+      ],
+      fbar: [
+        {
+          text: me.isPlotFunction ? "Apply The Function" : 'Apply Zoom',
+          width:  me.isPlotFunction ? 200 : 100,
+          scope: this,
+          handler: function () {
+            if (this.zoomType == 'timeAxis') {
+              var minZoom = Ext.Date.format(this.form.getForm().findField('zoom-min-time').getValue(), 'Y-m-d\\TH:i:s.u');
+              var maxZoom = Ext.Date.format(this.form.getForm().findField('zoom-max-time').getValue(), 'Y-m-d\\TH:i:s.u');
+            }
+            else {
+              var minZoom = this.form.getForm().findField('zoom-min-float').getValue();
+              var maxZoom = this.form.getForm().findField('zoom-max-float').getValue();
+            }
+
+            if (!maxZoom || !minZoom || !this.form.getForm().isValid()) {
+              myDesktopApp.warningMsg('Error in values definition');
+              return;
+            }
+
+            if (me.isPlotFunction) {
+              let request_to_send = {};
+              
+              request_to_send = Object.assign({}, me.plotFunctionType.getValues()/*, me.plotFunctionParamField.getValues()*/);
+              request_to_send = Object.assign({}, request_to_send, {
+                'action': 'plotFunction',
+                'interactiveId': this.interactiveId,
+                'panelId': this.panelId,
+                'starttime': minZoom,
+                'stoptime': maxZoom
+              });
+
+              this.hostCmp.callInteractivePlot(request_to_send);
+            } else {
+              this.hostCmp.callInteractivePlot({
+                'action': 'zoom',
+                'interactiveId': this.interactiveId,
+                'panelId': this.panelId,
+                'axeId': this.zoomType,
+                'min': minZoom,
+                'max': maxZoom
+              });
+            }
+
+            this.hostCmp.panelImage.resetZoom();
+          }
+        },
+        me.isPlotFunction ? null :
+        {
+          text: 'Undo Zoom',
+          width: 100,
+          scope: this,
+          handler: function () {
+            this.hostCmp.callInteractivePlot({
+              'action': 'undozoom',
+              'interactiveId': this.interactiveId,
+              'panelId': this.panelId,
+              'axeId': this.zoomType
+            });
+            this.hostCmp.panelImage.resetZoom();
+          }
+        }
+      ]
+    });
+
+    return this.form;
+  },
+
+});
@@ -55,60 +55,17 @@ Ext.define(&#39;amdaPlotComp.PlotZoomPlug&#39;, {
     this.hostCmp = cmp;
   },
  
-  /**
-   * Set different parameters displayed on the current panel
-   * @param {*} listParams_  parameters displayed on the current panel
-   */
-  /*setParameters: function (listParams_) {
-    this.listParams = listParams_;
-    //this.plotFunctionParamField = new amdaPlotComp.plotFunction.ParamField({ params: this.listParams });
-    this.plotFunctionType = new amdaPlotComp.plotFunction.FunctionType({});
-  },*/
-
-
   setMinValue: function (min) {
-    if (!this.form)
+    if (!this.win)
       return;
-
-    this.myChildWindow.setField1Value(min);
-
-    if (this.zoomType == 'timeAxis') {
-      this.form.getForm().findField('zoom-min-time').setValue(min);
-
-    }
-    else
-      this.form.getForm().findField('zoom-min-float').setValue(min);
+    console.log(min);
+    this.win.setField1Value(min);
   },
  
   setMaxValue: function (max) {
-    if (!this.form)
+    if (!this.win)
       return;
-
-      this.myChildWindow.setField2Value(max);
-
-    if (this.zoomType == 'timeAxis') {
-      var minValue = this.form.getForm().findField('zoom-min-time').getValue();
-      if (minValue <= max) {
-        this.form.getForm().findField('zoom-max-time').setValue(max);
-        //if (this.isPlotFunction)
-        //this.plotFunctionParamField.setValues(minValue, max);
-      }
-      else {
-        this.form.getForm().findField('zoom-min-time').setValue(max);
-        this.form.getForm().findField('zoom-max-time').setValue(minValue);
-        // if (this.isPlotFunction)
-        // this.plotFunctionParamField.setValues(max, minValue);
-      }
-    }
-    else {
-      var minValue = this.form.getForm().findField('zoom-min-float').getValue();
-      if (minValue <= max)
-        this.form.getForm().findField('zoom-max-float').setValue(max);
-      else {
-        this.form.getForm().findField('zoom-min-float').setValue(max);
-        this.form.getForm().findField('zoom-max-float').setValue(minValue);
-      }
-    }
+    this.win.setField2Value(max);
   },
  
   /**
@@ -134,51 +91,63 @@ Ext.define(&#39;amdaPlotComp.PlotZoomPlug&#39;, {
   /**
    *  creation of the window
    */
-  show: function (interactiveId, zoomType, panelId, isPlotFunction_ = false) {
-     this.myChildWindow = Ext.create('amdaPlotComp.intervalSelection.DateIntervalSelection');
-    // Show the window
-    this.myChildWindow.show();
-    this.myChildWindow.setPosition(100, 100);
-   
-    this.isPlotFunction = isPlotFunction_;
-    if (this.win) { this.close() };
-      this.win = new Ext.Window({
-        id: 'plot-zoom-win-' + this.hostCmp.ownerCt.getId(), // Plot window ID
-        width: 250,
-        x: 0, y: 0,
-        baseCls: 'x-panel',
-        title: 'Zoom',
-        constrain: true,
-        collapsible: true,
-        resizable: false,
-        ghost: false,
-        renderTo: this.hostCmp.ownerCt.body,
-        items: this.getFormConfig(),
-        listeners: {
-          scope: this,
-          beforeclose: function () {
-            this.hostCmp.panelImage.hidePanelMarker();
-            this.hostCmp.panelImage.stopZoom();
-          },
-          show: function(win, eOpts) {
-            this.hostCmp.panelImage.showPanelMarker(panelId);
-          }
+  show: function (interactiveId, zoomType, panelId) {
+    this.zoomType = zoomType;
+    this.panelId = panelId;
+    this.interactiveId = interactiveId;
+  
+    let config = {
+      id: 'plot-zoom-win-' + this.hostCmp.ownerCt.getId(), // Plot window ID
+      interactiveId: interactiveId,
+      panelId: panelId,
+      hostCmp: this.hostCmp,
+      renderTo: this.hostCmp.ownerCt.body,
+      listeners: {
+        scope: this,
+        beforeclose: function () {
+          this.hostCmp.panelImage.hidePanelMarker();
+          this.hostCmp.panelImage.stopZoom();
         },
-        getConstrainVector: function (constrainTo) {
-          var me = this;
-          if (me.constrain || me.constrainHeader) {
-            constrainTo = constrainTo || (me.floatParent && me.floatParent.getTargetEl()) || me.container || me.el.getScopeParent();
-            return (me.constrainHeader ? me.header.el : me.el).getConstrainVector(constrainTo);
-          }
+        show: function (win, eOpts) {
+          this.hostCmp.panelImage.showPanelMarker(panelId);
         }
-      });
+      },
+      getConstrainVector: function (constrainTo) {
+        var me = this;
+        if (me.constrain || me.constrainHeader) {
+          constrainTo = constrainTo || (me.floatParent && me.floatParent.getTargetEl()) || me.container || me.el.getScopeParent();
+          return (me.constrainHeader ? me.header.el : me.el).getConstrainVector(constrainTo);
+        }
+      }
+    };
+
+    if (this.win) { this.close() };
  
-      this.win.on('destroy', this.onDestroy, this);
+    let winType;
  
-    this.interactiveId = interactiveId;
-    this.updateWinByType(zoomType, panelId);
+    switch (this.zoomType) {
+      case 'timeAxis':
+        winType = 'amdaPlotComp.intervalSelection.DateZoomIntervalSelection';
+        break;
+      case 'y-left':
+      case 'y-right':
+        winType = 'amdaPlotComp.intervalSelection.NumberZoomIntervalSelection';
+        const title = this.zoomType === 'y-left' ? 'Zoom on Y Left axis' : 'Zoom on Y Right axis';
+        config["type"] = this.zoomType;
+        config["title"] = title;
+        break;
+      case 'xaxis_id':
+        winType = 'amdaPlotComp.intervalSelection.NumberZoomIntervalSelection';
+        title = 'Zoom on X axis';
+        break;
+      case 'plotFunction':
+        winType = 'amdaPlotComp.intervalSelection.PlotFunctionIntervalSelection';
+        break;
+    }
+
+    this.win = Ext.create(winType, config);
+    this.win.on('destroy', this.onDestroy, this);
     this.win.show();
-    this.win.setPosition(0, 0);
   },
  
   close: function () {
@@ -226,6 +195,7 @@ Ext.define(&#39;amdaPlotComp.PlotZoomPlug&#39;, {
   },
  
   resetMinMaxValue: function () {
+    /*
     if (this.zoomType == 'timeAxis') {
       this.form.getForm().findField('zoom-min-time').setValue('');
       this.form.getForm().findField('zoom-max-time').setValue('');
@@ -233,7 +203,7 @@ Ext.define(&#39;amdaPlotComp.PlotZoomPlug&#39;, {
     else {
       this.form.getForm().findField('zoom-min-float').setValue(null);
       this.form.getForm().findField('zoom-max-float').setValue(null);
-    }
+    }*/
  
     this.hostCmp.panelImage.resetZoom();
   },
@@ -449,7 +419,7 @@ Ext.define(&#39;amdaPlotComp.PlotZoomPlug&#39;, {
       fbar: [
         {
           text: me.isPlotFunction ? "Apply The Function" : 'Apply Zoom',
-          width:  me.isPlotFunction ? 200 : 100,
+          width: me.isPlotFunction ? 200 : 100,
           scope: this,
           handler: function () {
             if (this.zoomType == 'timeAxis') {
@@ -468,7 +438,7 @@ Ext.define(&#39;amdaPlotComp.PlotZoomPlug&#39;, {
  
             if (me.isPlotFunction) {
               let request_to_send = {};
-              
+
               request_to_send = Object.assign({}, me.plotFunctionType.getValues()/*, me.plotFunctionParamField.getValues()*/);
               request_to_send = Object.assign({}, request_to_send, {
                 'action': 'plotFunction',
@@ -494,20 +464,20 @@ Ext.define(&#39;amdaPlotComp.PlotZoomPlug&#39;, {
           }
         },
         me.isPlotFunction ? null :
-        {
-          text: 'Undo Zoom',
-          width: 100,
-          scope: this,
-          handler: function () {
-            this.hostCmp.callInteractivePlot({
-              'action': 'undozoom',
-              'interactiveId': this.interactiveId,
-              'panelId': this.panelId,
-              'axeId': this.zoomType
-            });
-            this.hostCmp.panelImage.resetZoom();
+          {
+            text: 'Undo Zoom',
+            width: 100,
+            scope: this,
+            handler: function () {
+              this.hostCmp.callInteractivePlot({
+                'action': 'undozoom',
+                'interactiveId': this.interactiveId,
+                'panelId': this.panelId,
+                'axeId': this.zoomType
+              });
+              this.hostCmp.panelImage.resetZoom();
+            }
           }
-        }
       ]
     });
  
@@ -1,30 +0,0 @@
-Ext.define('amdaPlotComp.intervalSelection.DateIntervalSelection', {
-    extend: 'amdaPlotComp.intervalSelection.IntervalSelection', // This class extends from amdaPlotComp.intervalSelection.IntervalSelection
-
-    field1Type: 'datefield',
-    field1Label: 'Start Time',
-    field1Format: 'Y/m/d H:i:s.u',
-    field2Type: 'datefield',
-    field2Label: 'Stop Time',
-    field2Format: 'Y/m/d H:i:s.u',
-
-    /*
-    setField1Value: function (value) {
-        var field2Value = this.getField2Value();
-        value = new Date(value);
-        field2Value = new Date(field2Value);
-        if (value > field2Value) {
-            value = field2Value;
-        }
-        this.parent.down('#' + FIELD1_ITEM_ID).setValue(value);
-    },
-
-    setField2Value: function (value) {
-        value = new Date(value);
-        field1Value = new Date(field1Value);
-        if (value < field1Value) {
-            value = field1Value;
-        }
-        this.parent.down('#' + FIELD2_ITEM_ID).setValue(value);
-    }*/
-});
@@ -0,0 +1,7 @@
+Ext.define('amdaPlotComp.intervalSelection.DateZoomIntervalSelection', {
+    extend: 'amdaPlotComp.intervalSelection.ZoomIntervalSelection',
+
+    type: 'timeAxis',
+    title: "Zoom on time axis & Interval selection"
+
+});
@@ -22,14 +22,18 @@ Ext.define(&#39;amdaPlotComp.intervalSelection.IntervalSelection&#39;, {
     ghost: false, // Disables "ghosting" (semi-transparent representation of the window body) when moving or resizing
  
     parent: null, // Initialize parent to null
+    hostCmp: null,
+    interactiveId: '',
+    panelId: -1,
  
     config: {
-        field1Type: 'numberfield', // The xtype of field1. By default is numberfield.
-        field1Label: 'Min Value', // The label of field1.
-        field1Format: null,
-        field2Type: 'numberfield', // The xtype of field2. By default is numberfield.
-        field2Label: 'Max Value', // The label of field2.
-        field2Format: null
+        field1Type: 'datefield', // The xtype of field1. By default is datefield because we are working with time series.
+        field1Label: 'Start Time', // The label of field1.
+        field1Format:  'Y/m/d H:i:s.u',
+        field2Type: 'datefield', // The xtype of field2. By default is datefield.
+        field2Label: 'Stop Time', // The label of field2.
+        field2Format:  'Y/m/d H:i:s.u',
+        buttonApply: 'Apply'
     },
  
     initComponent: function () {
@@ -66,7 +70,7 @@ Ext.define(&#39;amdaPlotComp.intervalSelection.IntervalSelection&#39;, {
                             const value1 = field1.getValue();
                             if (value1 !== null && value1 !== undefined && value1 !== '') {
                                 if (newValue < value1) {
-                                    // Update both field1 and field2 to the new value
+                                    // Update both field1 and field2 to the new values
                                     field1.setValue(newValue);
                                     field.setValue(value1);
                                 }
@@ -87,16 +91,34 @@ Ext.define(&#39;amdaPlotComp.intervalSelection.IntervalSelection&#39;, {
                         alert('Button 2 clicked');
                     }
                 }]
-            }]
+            }],
+            fbar: [
+                {
+                    xtype: 'button',
+                    width: 100,
+                    text: this.buttonApply,
+                    handler: function () {
+                        me._apply();
+                    }
+                }
+            ]
         })
  
         Ext.apply(this, {
             items: this.parent
         });
  
+        this.setTitle(this.title + " - Panel Id : " + this.panelId);
         this.callParent(arguments);
     },
  
+
+    _apply: function () { },
+
+    _notValidValues: function () {
+        return !this.getField1Value() || !this.getField2Value() || !this.parent.getForm().isValid();
+    },
+
     _getField1: function () {
         return this.parent.down('#' + FIELD1_ITEM_ID);
     },
@@ -0,0 +1,13 @@
+Ext.define('amdaPlotComp.intervalSelection.NumberZoomIntervalSelection', {
+    extend: 'amdaPlotComp.intervalSelection.ZoomIntervalSelection', // This class extends from amdaPlotComp.intervalSelection.IntervalSelection
+
+    field1Type: 'numberfield',
+    field1Label: 'Min Value',
+    field1Format: null,
+    field2Type: 'numberfield',
+    field2Label: 'Max value',
+    field2Format: null,
+
+    type: null,
+
+});
@@ -0,0 +1,32 @@
+Ext.define('amdaPlotComp.intervalSelection.PlotFunctionIntervalSelection', {
+    extend: 'amdaPlotComp.intervalSelection.IntervalSelection',
+    requires: ['amdaPlotComp.plotFunction.FunctionType'],
+
+    title: "Plot Function",
+    plotFunctionType: null,
+
+    initComponent: function () {
+        this.callParent(arguments);
+        this.plotFunctionType = new amdaPlotComp.plotFunction.FunctionType();
+        this.parent.add(this.plotFunctionType);
+    },
+
+    _apply: function () {
+        if (this._notValidValues()) {
+            myDesktopApp.warningMsg('The Input Values are not defined');
+        } else {
+            let request_to_send = {};
+            request_to_send = Object.assign({}, this.plotFunctionType.getValues());
+            request_to_send = Object.assign({}, request_to_send, {
+                'action': 'plotFunction',
+                'interactiveId': this.interactiveId,
+                'panelId': this.panelId,
+                'starttime': this.getField1Value(),
+                'stoptime': this.getField2Value(),
+            });
+
+            this.hostCmp.callInteractivePlot(request_to_send);
+        }
+    },
+
+});
@@ -0,0 +1,44 @@
+Ext.define('amdaPlotComp.intervalSelection.ZoomIntervalSelection', {
+    extend: 'amdaPlotComp.intervalSelection.IntervalSelection', // This class extends from amdaPlotComp.intervalSelection.IntervalSelection
+
+    buttonApply: "Apply Zoom",
+    type: null,
+
+    initComponent: function () {
+        const me = this;
+        this.callParent(arguments);
+        this.parent.getDockedItems('toolbar[dock="bottom"]')[0].add({
+            xtype: 'button',
+            width: 100,
+            text: 'Undo Zoom',
+            handler: function () {
+                me._undoZoom();
+            }
+        });
+    },
+
+    _apply: function () {
+        if (this._notValidValues()) {
+            myDesktopApp.warningMsg('The Input Values are not defined');
+        } else {
+            this.hostCmp.callInteractivePlot({
+                'action': 'zoom',
+                'interactiveId': this.interactiveId,
+                'panelId': this.panelId,
+                'axeId': this.type,
+                'min': this.getField1Value(),
+                'max': this.getField2Value()
+            });
+        }
+    },
+
+    _undoZoom: function () {
+        this.hostCmp.callInteractivePlot({
+            'action': 'undozoom',
+            'interactiveId': this.interactiveId,
+            'panelId': this.panelId,
+            'axeId': this.type
+        });
+    }
+
+});
@@ -163,7 +163,7 @@ Ext.define(&#39;amdaUI.PlotTabResultUI&#39;, {
 					plotFunctionItem = {
 						text: 'Apply a Function on Interval',
 						handler: function (item, e) {
-							zoomPlugin.show(me.interactiveId, axis.id, panelContext.id, true);
+							zoomPlugin.show(me.interactiveId, "plotFunction", panelContext.id);
 							zoomPlugin.resetMinMaxValue();
 							me.panelImage.startZoom(true, 0, size.height, onMinTimeSelection, onMaxTimeSelection);
 						},