Merge branch 'MAZ_11427' into amdadev

Benjamin Renard
2 parents fa055b2f 1f5ef6b6
Showing 14 changed files with 713 additions and 814 deletions Show diff stats
js/app/views/PlotComponents/PlotZoomPlug.js
js/app/views/PlotComponents/intervalSelection/DateZoomIntervalSelection.js
js/app/views/PlotComponents/intervalSelection/InsertToTTCatlog.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/PlotComponents/plotFunction/BaseComponent.js
js/app/views/PlotComponents/plotFunction/CreatePlot.js
js/app/views/PlotComponents/plotFunction/FFTCmpt.js
js/app/views/PlotComponents/plotFunction/FunctionType.js
js/app/views/PlotComponents/plotFunction/Histogram.js
js/app/views/PlotComponents/plotFunction/ParamField.js
js/app/views/PlotTabResultUI.js
@@ -10,498 +10,124 @@
  ********************************************************************************
  *    FT Id     :   Date   : Name - Description
  *******************************************************************************
- *  :
  */
-
+// Define a new class 'amdaPlotComp.PlotZoomPlug' that extends 'Ext.util.Observable'
 Ext.define('amdaPlotComp.PlotZoomPlug', {
   extend: 'Ext.util.Observable',
   alias: 'plugin.plotZoomPlugin',
-  requires: [
-    'amdaPlotComp.plotFunction.ParamField', 'amdaPlotComp.plotFunction.FunctionType', 'amdaPlotComp.plotFunction.CreatePlot'],
-
-  //id: 'plot-zoom-plug',
-
-  ttModuleId: 'timetab-win',
-  catModuleId: 'catalog-win',
+  requires: ['amdaPlotComp.intervalSelection.IntervalSelection'],
-  win: null,
-  form: null,
-  zoomType: '',
-  interactiveId: '',
-  panelId: -1,
-
-  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,
+  // Declare a variable to hold the interval selection component
+  intervalSelectionCmp: null,
+  // Constructor function for the class
   constructor: function (config) {
+    // Apply the configuration to this instance and call the parent class's constructor
     Ext.apply(this, config);
     this.callParent(arguments);
   },
+  // Function to be called when the object is destroyed
   onDestroy: function () {
-    this.win = null;
+    // Set the interval selection component to null
+    this.intervalSelectionCmp = null;
   },
+  // Initialization function for the class
   init: function (cmp) {
+    // Set the host component for this instance
     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({});
-  },*/
-
-
+  // Function to set the minimum value of the interval selection component
   setMinValue: function (min) {
-    if (!this.form)
+    if (!this.intervalSelectionCmp)
       return;
-
-    if (this.zoomType == 'timeAxis') {
-      this.form.getForm().findField('zoom-min-time').setValue(min);
-
-    }
-    else
-      this.form.getForm().findField('zoom-min-float').setValue(min);
+    this.intervalSelectionCmp.setField1Value(min);
   },
+  // Function to set the maximum value of the interval selection component
   setMaxValue: function (max) {
-    if (!this.form)
-      return;
-
-    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')
+    if (!this.intervalSelectionCmp)
       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);
-    });
+    this.intervalSelectionCmp.setField2Value(max);
   },
   /**
-   *  creation of the window
+   * Function to create and show a window with specific configuration
    */
-  show: function (interactiveId, zoomType, panelId, isPlotFunction_ = false) {
-    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) {
+    let config = {
+      id: 'plot-zoom-win-' + this.hostCmp.ownerCt.getId(),
+      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);
         }
-      });
-
-      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();
-  },
+      },
+      getConstrainVector: function (constrainTo) {
+        const self = this;
+        if (self.constrain || self.constrainHeader) {
+          constrainTo = constrainTo || (self.floatParent && self.floatParent.getTargetEl()) || self.container || self.el.getScopeParent();
+          return (self.constrainHeader ? self.header.el : self.el).getConstrainVector(constrainTo);
+        }
+      }
+    };
-  updateWinByType: function (zoomType, panelId) {
-    if (this.win == null)
-      return;
+    if (this.intervalSelectionCmp) { this.close() };
-    this.zoomType = zoomType;
-    this.panelId = panelId;
+    let intervalSelectionCmpType;
     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);
-        }
+        intervalSelectionCmpType = 'amdaPlotComp.intervalSelection.DateZoomIntervalSelection';
         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);
+        intervalSelectionCmpType = 'amdaPlotComp.intervalSelection.NumberZoomIntervalSelection';
+        let title = "";
+        if (zoomType === 'y-left') {
+          title = 'Zoom on Y Left axis';
+        } else if (zoomType === 'y-right') {
+          title = 'Zoom on Y Right axis';
+        } else {
+          title = 'Zoom on X axis';
+        }
+        config["type"] = zoomType;
+        config["title"] = title;
+        break;
+      case 'plotFunction':
+        intervalSelectionCmpType = 'amdaPlotComp.intervalSelection.PlotFunctionIntervalSelection';
         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');
+    // Create a new instance of the interval selection component with the specified type and configuration
+    this.intervalSelectionCmp = Ext.create(intervalSelectionCmpType, config);
+    // Add a listener for the destroy event of the interval selection component
+    this.intervalSelectionCmp.on('destroy', this.onDestroy, this);
+    // Show the interval selection component
+    this.intervalSelectionCmp.show();
   },
-  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;
+  // Function to close the interval selection component
+  close: function () {
+    if (this.intervalSelectionCmp == null)
+      return;
+    this.intervalSelectionCmp.close();
   },
+  // Function to reset the minimum and maximum values of the interval selection component
+  resetMinMaxValue: function () {
+    this.intervalSelectionCmp.reset();
+  }
 });
@@ -0,0 +1,19 @@
+Ext.define('amdaPlotComp.intervalSelection.DateZoomIntervalSelection', {
+    extend: 'amdaPlotComp.intervalSelection.ZoomIntervalSelection', // This class extends from amdaPlotComp.intervalSelection.ZoomIntervalSelection
+    requires: ['amdaPlotComp.intervalSelection.InsertToTTCatlog'], // This class requires the InsertToTTCatlog class from amdaPlotComp.intervalSelection
+
+    type: 'timeAxis', // The type of axis for this interval selection is timeAxis
+    title: "Zoom on time axis & Interval selection", // The title of this interval selection
+    insertToTTCatlog: null, // An instance of the InsertToTTCatlog class, initially set to null
+
+    /**
+     * Initializes the component.
+     * It calls the parent's initComponent method, then creates a new instance of InsertToTTCatlog and adds it to the form.
+     */
+    initComponent: function () {
+        this.callParent(arguments);
+        this.insertToTTCatlog = new amdaPlotComp.intervalSelection.InsertToTTCatlog({ parent: this });
+        this.form.add(this.insertToTTCatlog);
+    },
+
+});
@@ -0,0 +1,173 @@
+Ext.define('amdaPlotComp.intervalSelection.InsertToTTCatlog', {
+    extend: 'Ext.form.FieldSet',
+
+    collapsible: false,
+    layout: LAYOUT_STYLE,
+    title: 'Add in Time Table or Catalog',
+    name: 'tt-insertion-fieldset',
+
+    fieldTypeTTCat: 'ttcat-type',
+    fieldTypeName: 'ttcat-name',
+    ttModuleId: 'timetab-win',
+    catModuleId: 'catalog-win',
+    linkedTTCatNode: null,
+
+    parent: null,
+
+    initComponent: function () {
+        const self = this;
+
+        const insertTypeStore = Ext.create('Ext.data.Store', {
+            fields: ['key', 'name'],
+            data: [
+                { "key": "timeTable", "name": "TimeTable" },
+                { "key": "catalog", "name": "Catalog" }
+            ]
+        });
+
+        Ext.apply(self, {
+            items: [{
+                xtype: 'combo',
+                fieldLabel: 'Insert In',
+                store: insertTypeStore,
+                queryMode: 'local',
+                displayField: 'name',
+                valueField: 'key',
+                editable: false,
+                value: 'timeTable',
+                name: self.fieldTypeTTCat,
+                itemId: self.fieldTypeTTCat,
+            },
+            {
+                xtype: 'textfield',
+                fieldLabel: 'Name',
+                name: self.fieldTypeName,
+                itemId: self.fieldTypeName,
+                listeners:
+                {
+                    render: function (o, op) {
+                        var field = this;
+                        var el = this.el;
+                        Ext.create('Ext.dd.DropTarget', el, {
+                            ddGroup: 'explorerTree',
+                            notifyOver: function (ddSource, e, data) {
+                                var TTCatType = self._getFieldTypeTTCat().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: width,
+                text: 'Insert Interval',
+                scope: this,
+                handler: function () {
+                    var me = this;
+
+                    var TTCatType = self._getFieldTypeTTCat().getValue();
+                    var TTCatName = self._getFieldNameTTCat().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();
+                                });
+                            });
+                        }
+                    });
+                }
+            }
+            ]
+        });
+
+        self.callParent(arguments);
+    },
+
+
+    _getFieldTypeTTCat: function () {
+        return this.down('#' + this.fieldTypeTTCat);
+    },
+
+    _getFieldNameTTCat: function () {
+        return this.down('#' + this.fieldTypeName);
+    },
+
+    /**
+     * add Interval to Time table or Catalog
+     */
+    insertInterval: function () {
+        const start = this.parent.getField1Value();
+        const stop = this.parent.getField2Value();
+
+        const TTCatType = this._getFieldTypeTTCat().getValue();
+        const isCatalog = (TTCatType == 'catalog');
+
+        myDesktopApp.getLoadedModule(isCatalog ? this.catModuleId : this.ttModuleId, true, function (module) {
+            var targetModuleUI = module.getUiContent();
+            if (targetModuleUI)
+                targetModuleUI.addInterval(start, stop);
+        });
+    }
+});
@@ -0,0 +1,245 @@
+// Define a constant for the layout style of the form
+const LAYOUT_STYLE = {
+    type: 'vbox', // vertical box layout
+    pack: 'start', // controls the vertical alignment of child items
+    align: 'stretch' // each child item is stretched to fill the width of the container
+};
+
+// Width of button
+const width = 100;
+
+// Define the parent class for all classes to use time interval selection.
+Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', {
+    extend: 'Ext.window.Window', // This class extends from Ext.window.Window
+    // Window configurations
+    x: 0, y: 0, // The initial position of the window
+    title: 'Interval Selection', // The title of the window
+    constrain: true, // Constrains the window to within the boundaries of its containing element
+    collapsible: true, // Allows the window to be collapsed
+    resizable: false, // Prevents the window from being resizable
+    ghost: false, // Disables "ghosting" (semi-transparent representation of the window body) when moving or resizing
+
+    form: null, // a panel which contains all components
+    hostCmp: null, // The host component from which this class is instantiated.
+    interactiveId: '',
+    panelId: -1,
+
+    // Attributes of this class
+    config: {
+        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'
+    },
+
+    // Define the itemIds as constants
+    // These will be used to reference the fields later in the code
+    FIELD1_ITEM_ID: 'field1',
+    FIELD2_ITEM_ID: 'field2',
+    buttonUseTime: 'button-use-time',
+
+    initComponent: function () {
+        const self = this; // Reference to this instance for use in event handlers
+        this.form = new Ext.form.FormPanel({ // Create a new FormPanel instance and assign it to form
+            frame: true, // Display a frame around the panel
+            width: 255, // Set the width of the panel
+            layout: LAYOUT_STYLE, // Set the layout style of the panel
+            fieldDefaults: {
+                labelWidth: 60 // Set default label width for fields in this panel
+            },
+            items: [{
+                xtype: 'fieldset', // Create a new FieldSet to group related fields together
+                title: 'Interval Selection',
+                name: 'interval-selection-fieldset',
+                collapsible: false,
+                layout: LAYOUT_STYLE,
+                items: [{
+                    xtype: this.field1Type,
+                    fieldLabel: this.field1Label,
+                    itemId: this.FIELD1_ITEM_ID,
+                    format: this.field1Format,
+                    listeners: {
+                        change: function (field, newValue) {
+                            if (newValue === null || newValue === undefined || newValue === '') return;
+                            var field2 = self._getField2();
+                            // Check if field2 is not empty
+                            const value2 = field2.getValue();
+                            if (value2 !== null && value2 !== undefined && value2 !== '') {
+                                if (newValue > value2) {
+                                    // Update both field1 and field2 to the new values
+                                    field2.suspendEvents();
+                                    field2.setValue(newValue);
+                                    field.setValue(value2);
+                                    field2.resumeEvents();
+                                }
+                            }
+                        }
+                    }
+                },
+                {
+                    xtype: this.field2Type,
+                    fieldLabel: this.field2Label,
+                    itemId: this.FIELD2_ITEM_ID,
+                    format: this.field2Format,
+                    listeners: {
+                        change: function (field, newValue) {
+                            if (newValue === null || newValue === undefined || newValue === '') return;
+                            var field1 = self._getField1();
+                            // Check if field1 is not empty
+                            const value1 = field1.getValue();
+                            if (value1 !== null && value1 !== undefined && value1 !== '') {
+                                if (newValue < value1) {
+                                    // Update both field1 and field2 to the new values
+                                    field1.suspendEvents();
+                                    field1.setValue(newValue);
+                                    field.setValue(value1);
+                                    field1.resumeEvents();
+                                }
+                            }
+                        }
+                    }
+                }, {
+                    xtype: 'button',
+                    text: 'Reset',
+                    width: width,
+                    handler: function () {
+                        self.reset();
+                    }
+                },
+                {
+                    xtype: 'button',
+                    text: 'Use in Time Selection',
+                    itemId: this.buttonUseTime,
+                    handler: function () {
+                        self._setTimeInterval();
+                    }
+                }]
+            }],
+            fbar: [
+                {
+                    xtype: 'button',
+                    width: width,
+                    text: this.buttonApply,
+                    handler: function () {
+                        self._apply();
+                    }
+                }
+            ]
+        })
+
+        Ext.apply(this, {
+            items: this.form
+        });
+
+        this.setTitle(this.title + " - Panel Id : " + this.panelId);
+        this.callParent(arguments);
+    },
+
+    /**
+     * Resets the time interval selection in the host component.
+     * This function calls the resetZoom method on the panelImage of the host component,
+     * effectively resetting any zoom applied to the image.
+     */
+    _resetHostCmpSelection: function () {
+        this.hostCmp.panelImage.resetZoom();
+    },
+
+    /**
+ * Abstract method that must be implemented by subclasses.
+ * Throws an error if not overridden.
+ */
+    _apply: function () {
+        throw new Error('_apply() method must be implemented by subclass');
+    },
+
+    /**
+     * Checks if the values of field1 and field2 are valid and if the form is valid.
+     * Returns true if any of these conditions are not met.
+     */
+    _notValidValues: function () {
+        return !this.getField1Value() || !this.getField2Value() || !this.form.getForm().isValid();
+    },
+
+    /**
+     * Retrieves the component associated with FIELD1_ITEM_ID in the form.
+     * Returns the component if found, null otherwise.
+     */
+    _getField1: function () {
+        return this.form.down('#' + this.FIELD1_ITEM_ID);
+    },
+
+    /**
+     * Retrieves the component associated with FIELD2_ITEM_ID in the form.
+     * Returns the component if found, null otherwise.
+     */
+    _getField2: function () {
+        return this.form.down('#' + this.FIELD2_ITEM_ID);
+    },
+
+    /**
+ * Sets the time interval of the plot based on the values of the fields.
+ * This method is triggered when the buttonUseTime is clicked.
+ * It creates a new time object with start, stop, and interactiveId properties,
+ * and then calls the setTimeInterval method on the plot module with this object.
+ */
+    _setTimeInterval: function () {
+        const timeObj = new Object();
+        timeObj.start = this.getField1Value();
+        timeObj.stop = this.getField2Value();
+        timeObj.interactiveId = this.interactiveId;
+        const plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id);
+        plotModule.setTimeInterval(timeObj);
+    },
+
+    /**
+     * Hides the buttonUseTime when it's not needed.
+     * For example, when we call Zoom on y-left axis we should not see this button.
+     * It finds the button by its ID and then calls the hide method on it.
+     */
+    _removeUseTimeButton: function () {
+        const buttonToHide = this.form.down('#' + this.buttonUseTime);
+        buttonToHide.hide();
+    },
+
+    /**
+     * Retrieves the value of field1 from the form.
+     */
+    getField1Value: function () {
+        return this._getField1().getValue();
+    },
+
+    /**
+     * Retrieves the value of field2 from the form.
+     */
+    getField2Value: function () {
+        return this._getField2().getValue();
+    },
+
+    /**
+     * Sets a new value for field1 in the form.
+     */
+    setField1Value: function (value) {
+        this._getField1().setValue(value);
+    },
+
+    /**
+     * Sets a new value for field2 in the form.
+     */
+    setField2Value: function (value) {
+        this._getField2().setValue(value);
+    },
+
+    /**
+     * Resets the values of fields and host component selection.
+     * It calls the reset method on field1 and field2, and then calls _resetHostCmpSelection.
+     */
+    reset: function () {
+        this._getField1().reset();
+        this._getField2().reset();
+        this._resetHostCmpSelection();
+    }
+
+});
@@ -0,0 +1,21 @@
+Ext.define('amdaPlotComp.intervalSelection.NumberZoomIntervalSelection', {
+    extend: 'amdaPlotComp.intervalSelection.ZoomIntervalSelection', // This class extends from amdaPlotComp.intervalSelection.ZoomIntervalSelection
+
+    field1Type: 'numberfield', // The type of the first field is a number field
+    field1Label: 'Min Value', // The label for the first field is 'Min Value'
+    field1Format: null, // The format for the first field is initially set to null
+    field2Type: 'numberfield', // The type of the second field is a number field
+    field2Label: 'Max value', // The label for the second field is 'Max value'
+    field2Format: null, // The format for the second field is initially set to null
+
+    type: null, // The type of interval selection is initially set to null
+
+    /**
+     * Initializes the component.
+     * It calls the parent's initComponent method, then removes the use time button.
+     */
+    initComponent: function () {
+        this.callParent(arguments);
+        this._removeUseTimeButton();
+    }
+});
@@ -0,0 +1,40 @@
+Ext.define('amdaPlotComp.intervalSelection.PlotFunctionIntervalSelection', {
+    extend: 'amdaPlotComp.intervalSelection.IntervalSelection', // This class extends from amdaPlotComp.intervalSelection.IntervalSelection
+    requires: ['amdaPlotComp.plotFunction.FunctionType'], // This class requires the FunctionType class from amdaPlotComp.plotFunction
+
+    title: "Plot Function", // The title of the window
+    plotFunctionType: null, // An instance of the FunctionType class, initially set to null
+
+    /**
+     * Initializes the component.
+     * It calls the parent's initComponent method, then creates a new instance of FunctionType and adds it to the form.
+     */
+    initComponent: function () {
+        this.callParent(arguments);
+        this.plotFunctionType = new amdaPlotComp.plotFunction.FunctionType();
+        this.form.add(this.plotFunctionType);
+    },
+
+    /**
+     * Applies the plot function based on the values of the fields.
+     * If the values are not valid, it shows a warning message.
+     * Otherwise, it calls the interactive plot with the plotFunction action and resets the host component selection.
+     */
+    _apply: function () {
+        if (this._notValidValues()) {
+            myDesktopApp.warningMsg('Please note that either the Start Time or the Stop Time has not been defined. To proceed, ensure both times are properly set.');
+        } else {
+            const request_to_send = Object.assign({}, this.plotFunctionType.getValues(), {
+                'action': 'plotFunction',
+                'interactiveId': this.interactiveId,
+                'panelId': this.panelId,
+                'starttime': this.getField1Value(),
+                'stoptime': this.getField2Value(),
+            });
+
+            this.hostCmp.callInteractivePlot(request_to_send);
+            this._resetHostCmpSelection();
+        }
+    },
+
+});
@@ -0,0 +1,61 @@
+Ext.define('amdaPlotComp.intervalSelection.ZoomIntervalSelection', {
+    extend: 'amdaPlotComp.intervalSelection.IntervalSelection', // This class extends from amdaPlotComp.intervalSelection.IntervalSelection
+
+    buttonApply: "Apply Zoom",
+    type: null,
+
+    /**
+     * Initializes the component.
+     * Adds an 'Undo Zoom' button to the bottom toolbar of the form.
+     */
+    initComponent: function () {
+        const self = this;
+        this.callParent(arguments);
+        this.form.getDockedItems('toolbar[dock="bottom"]')[0].add({
+            xtype: 'button',
+            width: width,
+            text: 'Undo Zoom',
+            handler: function () {
+                self._undoZoom();
+            }
+        });
+    },
+
+    /**
+     * Applies the zoom based on the values of the fields.
+     * If the values are not valid, it shows a warning message.
+     * Otherwise, it calls the interactive plot with the zoom action and resets the host component selection.
+     */
+    _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()
+            });
+
+            this._resetHostCmpSelection();
+        }
+    },
+
+    /**
+     * Undoes the zoom.
+     * It calls the interactive plot with the undozoom action and resets the host component selection.
+     */
+    _undoZoom: function () {
+        this.hostCmp.callInteractivePlot({
+            'action': 'undozoom',
+            'interactiveId': this.interactiveId,
+            'panelId': this.panelId,
+            'axeId': this.type
+        });
+
+        this._resetHostCmpSelection();
+    }
+
+});
 // Define the base class
 Ext.define('amdaPlotComp.plotFunction.BaseComponent', {
     extend: 'Ext.form.FieldSet',
+
+    collapsible: false,
+    layout: LAYOUT_STYLE,
     /**
      * Subclasses are expected to implement this method to retrieve values.
@@ -1,195 +0,0 @@
-/**
- * Un composant de 'PlotFunction' qui permet à l'utilisateur de séléctionner le type de fonction à appliquer : FFT, SUM, ...
- */
-Ext.define('amdaPlotComp.plotFunction.CreatePlot', {
-    extend: 'Ext.window.Window',
-    requires: [
-        'amdaUI.PlotlyContainer'
-    ],
-
-    initComponent: function () {
-
-        this.emptyChartConfig = {
-            xtype: 'amdaUI.PlotlyContainer',
-            id: 'visu-chart',
-        };
-
-        const config =
-        {
-            title: 'Apply a Function on Interval',
-            width: 700,
-            height: 500,
-            layout: 'fit',
-            bodyStyle: { background: '#FFFFFF' },
-            modal: false,
-            resizable: true,
-            maximizable: true,
-            items: [
-                this.emptyChartConfig
-            ]
-        };
-
-        Ext.apply(this, config);
-        this.callParent(arguments);
-    },
-
-    getXYData: function (data, serie_label) {
-        const separatorItems = "|";
-        const separator = ";";
-
-        let legends = serie_label.split(separator);
-        legends.pop();
-
-        let items = data.split(separatorItems);
-        items.pop();
-
-        const xs = [];
-        const ys = [];
-        const labels = [];
-        for (j = 0; j < legends.length; j++) {
-            let i;
-            const y = [];
-            const x = [];
-            for (i = 0; i < items.length; i++) {
-                const temp = items[i].split(separator);
-                x.push(this.timeConverter(temp[0]));
-                y.push(temp[j + 1]);
-            }
-            ys.push(y);
-            xs.push(x);
-            labels.push(legends[j]);
-        }
-
-        return { xs: xs, ys: ys, labels: labels };
-    },
-
-    timeConverter: function (_timestamp) {
-        var a = new Date(_timestamp * 1000);
-        var year = a.getUTCFullYear();
-        var month = a.getUTCMonth() + 1;
-        var date = a.getUTCDate();
-        var hour = a.getUTCHours();
-        var min = a.getUTCMinutes();
-        var sec = a.getUTCSeconds();
-        var time = year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + sec;
-        return time;
-    },
-
-    applyFunction: function (y, dimSize) {
-        const type = this.plotFunctionType;
-        const valDict = type.getValues();
-        const fct = valDict[type.plotFunctionItems.type.name];
-        let out_y = [];
-        switch (fct) {
-            case type.plotFunctionItems.type.values.sum:
-                out_y = y;
-                break;
-            case type.plotFunctionItems.type.values.fft:
-
-                break;
-            case type.plotFunctionItems.type.values.avg:
-                if (dimSize === -1) {
-                    out_y = y.map(e => e / y.length);
-                } else {
-                    out_y = y.map(e => e / dimSize);
-                }
-                break;
-
-            default:
-                break;
-        }
-        return out_y;
-    },
-
-
-
-    plot: function () {
-        const param = this.xmlDoc.getElementsByTagName('parameter');
-        const traces = [];
-        let yAxisLabel = "";
-        let i;
-        for (i = 0; i < param.length; i++) {
-            const param_name = param[i].getAttribute('name');
-            const param_unit = param[i].getAttribute('unit');
-            const serie = param[i].getElementsByTagName('serie');
-
-            yAxisLabel += param_unit + "<br>";
-
-            for (let si = 0; si < serie.length; si++) {
-                const serie_label = serie[si].getAttribute('serie_label');
-                const data_ = this.getXYData(serie[si].getAttribute('data'), serie_label);
-                let k;
-
-                const dimSize = serie[si].getAttribute('dimSize');
-
-                for (k = 0; k < data_.ys.length; k++) {
-                    let trace = {};
-                    trace.x = data_.xs[k];
-                    trace.y = this.applyFunction(data_.ys[k], parseInt(dimSize));
-                    trace.mode = 'lines+markers';
-                    trace.name = param_name + " (" + data_.labels[k] + ")";
-                    trace.type = 'scatter';
-
-                    traces.push(trace);
-                }
-            }
-        }
-
-        var chart = Ext.getCmp(this.emptyChartConfig.id);
-
-        var config = this.emptyChartConfig;
-
-        config.data = traces;
-
-        const config_ = {
-            showgrid: true,
-            zeroline: true,
-            showline: true,
-            mirror: 'ticks',
-            gridcolor: '#bdbdbd',
-            gridwidth: 1,
-            zerolinecolor: '#969696',
-            zerolinewidth: 1,
-            linecolor: '#636363',
-            linewidth: 1
-        };
-
-        let config_x = {
-            title: {
-                text: "Time, UT"
-            },
-            type: 'date',
-        };
-
-        let config_y = {
-            title: {
-                text: this.format_label(yAxisLabel)
-            },
-            exponentformat: "e"
-        }
-
-        for (var key in config_) {
-            config_x[key] = config_[key];
-            config_y[key] = config_[key];
-        }
-
-        config.layout = {
-            xaxis: config_x,
-            yaxis: config_y
-        };
-
-        if (chart) {
-            var chartPanel = chart.up();
-            chartPanel.remove(chart);
-        }
-        var testPlotly = new amdaUI.PlotlyContainer(config);
-        chartPanel.insert(testPlotly);
-    },
-    format_label: function (label) {
-        const power_2 = "\xB2";
-        const power_3 = "\xB3";
-        const amda_power_2 = "#u2";
-        const amda_space = "#d";
-        return label.replace(amda_power_2, power_2).replace(amda_space, " ");
-    }
-});
 \ No newline at end of file
 Ext.define('amdaPlotComp.plotFunction.FFTCmpt', {
-    extend: 'amdaPlotComp.plotFunction.BaseComponent',
-    title: "FFT Arguments",
-    id: 'fftComboBox',
-  
+    extend: 'amdaPlotComp.plotFunction.BaseComponent', // This class extends from amdaPlotComp.plotFunction.BaseComponent
+    title: "FFT Arguments", // The title of this component
+    id: 'fftComboBox', // The id of this component
+
+    /**
+     * Initializes the component.
+     * It creates a combo box with two options, 'Frequency' and 'Period', and adds it to the component.
+     */
     initComponent: function () {
         const me = this;
@@ -34,8 +38,12 @@ Ext.define(&#39;amdaPlotComp.plotFunction.FFTCmpt&#39;, {
         me.callParent(arguments);
     },
+    /**
+     * Retrieves the selected value from the combo box.
+     * Returns an object with a property 'abscisse' set to the selected value.
+     */
     getValues: function () {
-        const fftComboBox = this.down('#'+this.id); // Retrieve ComboBox by itemId
+        const fftComboBox = this.down('#' + this.id); // Retrieve ComboBox by itemId
         const selectedValue = fftComboBox.getValue(); // Get selected value
         return {
 /**
- * Un composant de 'PlotFunction' qui permet à l'utilisateur de séléctionner le type de fonction à appliquer : FFT, SUM, ...
+ * A 'PlotFunction' component that allows the user to select the type of function to apply: FFT, SUM, etc.
  */
 Ext.define('amdaPlotComp.plotFunction.FunctionType', {
     extend: 'Ext.form.Panel',
-    view: null,
-    currentModule: null,
+    view: null, // A reference to the view of this component
+    currentModule: null, // A reference to the current module of this component
-    functionComboBox: "type",
-    x_axis: { label: "X Axis", value: "scale_abscisse" },
-    y_axis: { label: "Y Axis", value: "scale_ordonnee" },
+    functionComboBox: "type", // The name of the function combo box
+    x_axis: { label: "X Axis", value: "scale_abscisse" }, // The label and value for the x-axis combo box
+    y_axis: { label: "Y Axis", value: "scale_ordonnee" }, // The label and value for the y-axis combo box
     scaleOptions: {
-        linear: { label: "Linear", value: "linear" },
-        logarithmic: { label: "Logarithmic", value: "logarithmic" }
+        linear: { label: "Linear", value: "linear" }, // The label and value for the linear scale option
+        logarithmic: { label: "Logarithmic", value: "logarithmic" } // The label and value for the logarithmic scale option
     },
     functionOptions: {
-        fft: { label: "FFT (Magnitude^2)", value: "FFT" },
-        dft: { label: "DFT (Magnitude^2)", value: "DFT" },
-        sum: { label: "SUM", value: "SUM" },
-        avg: { label: "AVG", value: "AVG" },
-        hist: { label: "Histogram Plot 1D", value: 'histoPlot' }
+        fft: { label: "FFT (Magnitude^2)", value: "FFT" }, // The label and value for the FFT function option
+        dft: { label: "DFT (Magnitude^2)", value: "DFT" }, // The label and value for the DFT function option
+        sum: { label: "SUM", value: "SUM" }, // The label and value for the SUM function option
+        avg: { label: "AVG", value: "AVG" }, // The label and value for the AVG function option
+        hist: { label: "Histogram Plot 1D", value: 'histoPlot' } // The label and value for the Histogram Plot 1D function option
     },
+    /**
+     * Creates a combo box for selecting the function type.
+     * @param {String} defaultSelection The default selected value for the combo box.
+     * @returns {Ext.form.field.ComboBox} The created combo box.
+     */
     createFunctionComboBox: function (defaultSelection) {
         const self = this;
         const comboStore = Ext.create('Ext.data.Store', {
@@ -48,6 +53,11 @@ Ext.define(&#39;amdaPlotComp.plotFunction.FunctionType&#39;, {
         return combo;
     },
+    /**
+     * Creates a combo box for selecting the scale type for an axis.
+     * @param {Object} axis An object with a label and a value for the axis.
+     * @returns {Ext.form.field.ComboBox} The created combo box.
+     */
     createAxisComboBox: function (axis) {
         const comboStore = Ext.create('Ext.data.Store', {
             fields: ['label', 'value'],
@@ -69,6 +79,10 @@ Ext.define(&#39;amdaPlotComp.plotFunction.FunctionType&#39;, {
     },
+    /**
+     * Handles the change of function type by removing the current module and adding a new one based on the selected value.
+     * @param {String} value The selected value from the function combo box.
+     */
     handleFunction: function (value) {
         if (this.currentModule) {
             this.view.remove(this.currentModule, true);
@@ -93,14 +107,13 @@ Ext.define(&#39;amdaPlotComp.plotFunction.FunctionType&#39;, {
     },
+    /**
+     * Initializes the component by creating a field set with a function combo box and two axis combo boxes.
+     */
     initComponent: function () {
         this.view = Ext.create('Ext.form.FieldSet', {
             collapsible: false,
-            layout: {
-                type: 'vbox',
-                pack: 'start',
-                align: 'stretch',
-            },
+            layout: LAYOUT_STYLE,
             bodyStyle: 'background: none',
             items: [this.createFunctionComboBox(), this.createAxisComboBox(this.x_axis), this.createAxisComboBox(this.y_axis)]
         });
@@ -117,25 +130,21 @@ Ext.define(&#39;amdaPlotComp.plotFunction.FunctionType&#39;, {
     },
     /**
-     * Retournes les valeurs des comboboxes associées à ce composant
-     * @returns les valeurs des comboboxes se forme d'un dictionnaire
+     * Returns the values of the combo boxes associated with this component.
+     * @returns {Object} An object with properties set to the values of the combo boxes.
      */
     getValues: function () {
-        const xAxisScale = this.getForm().findField(this.x_axis.value).getValue();
-        const yAxisScale = this.getForm().findField(this.y_axis.value).getValue();
-        const functionType = this.getForm().findField(this.functionComboBox).getValue();
-        let out = {};
-        out[this.functionComboBox] = functionType;
-        out[this.x_axis.value] = xAxisScale;
-        out[this.y_axis.value] = yAxisScale;
-
+        let out = {
+            [this.functionComboBox]: this.getForm().findField(this.functionComboBox).getValue(),
+            [this.x_axis.value]: this.getForm().findField(this.x_axis.value).getValue(),
+            [this.y_axis.value]: this.getForm().findField(this.y_axis.value).getValue()
+        };
         if (this.currentModule) {
-            const values = this.currentModule.getValues();
-            // Adding values to out
-            Object.assign(out, values);
+            Object.assign(out, this.currentModule.getValues());
         }
-        
+
         return out;
     }
-});
 \ No newline at end of file
+});
+
 Ext.define('amdaPlotComp.plotFunction.Histogram', {
-    extend: 'amdaPlotComp.plotFunction.BaseComponent',
-    title: "Histogram Arguments",
+    extend: 'amdaPlotComp.plotFunction.BaseComponent', // This class extends from amdaPlotComp.plotFunction.BaseComponent
+    title: "Histogram Arguments", // The title of this component
+    // Define the IDs for the function, bins, and xMin and xMax fields
     functionId: 'histo1d-function',
     binsId: 'histo1d-xbinnumber',
     xMinId: "histo1d-xmin",
     xMaxId: 'histo1d-xmax',
+    /**
+     * Initializes the component.
+     * It creates a combo box for selecting the density type and number fields for entering the xMin, xMax, and number of bins.
+     */
     initComponent: function () {
-        const me = this;
+        const self = this;
+        // Define combo box store
         const comboStore = Ext.create('Ext.data.Store', {
             fields: ['label', 'value'],
             data: [
@@ -18,9 +24,10 @@ Ext.define(&#39;amdaPlotComp.plotFunction.Histogram&#39;, {
             ]
         });
+        // Create combo box for selecting the density type
         const densityTypeCombo = Ext.create('Ext.form.field.ComboBox', {
             fieldLabel: 'Density Type',
-            name: me.functionId,
+            name: self.functionId,
             store: comboStore,
             queryMode: 'local',
             displayField: 'label',
@@ -29,12 +36,13 @@ Ext.define(&#39;amdaPlotComp.plotFunction.Histogram&#39;, {
             value: 'density'
         });
-        Ext.apply(me, {
+        // Add items to the component
+        Ext.apply(self, {
             items: [
                 {
                     xtype: 'numberfield',
                     fieldLabel: 'X Min',
-                    name: me.xMinId,
+                    name: self.xMinId,
                     allowDecimals: true,
                     hideTrigger: true,
                     keyNavEnabled: false,
@@ -42,7 +50,7 @@ Ext.define(&#39;amdaPlotComp.plotFunction.Histogram&#39;, {
                 {
                     xtype: 'numberfield',
                     fieldLabel: 'X Max',
-                    name: me.xMaxId,
+                    name: self.xMaxId,
                     allowDecimals: true,
                     hideTrigger: true,
                     keyNavEnabled: false,
@@ -50,7 +58,7 @@ Ext.define(&#39;amdaPlotComp.plotFunction.Histogram&#39;, {
                 {
                     xtype: 'numberfield',
                     fieldLabel: 'Number of Bins',
-                    name: me.binsId,
+                    name: self.binsId,
                     minValue: 1,
                     value: 100,
                     allowDecimals: false,
@@ -60,9 +68,14 @@ Ext.define(&#39;amdaPlotComp.plotFunction.Histogram&#39;, {
             ]
         });
-        me.callParent(arguments);
+        // Call the parent class's initComponent method
+        self.callParent(arguments);
     },
+    /**
+     * Retrieves the selected values from the combo box and number fields.
+     * Returns an object with properties set to these values.
+     */
     getValues: function () {
         const densityTypeCombo = this.query('[name=' + this.functionId + ']')[0];
         const densityTypeValue = densityTypeCombo.getValue();
@@ -1,124 +0,0 @@
-/**
- * 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
- */
-Ext.define('amdaPlotComp.plotFunction.ParamField', {
-    extend: 'Ext.form.Panel',
-    /**
-     * id du composant de type numberfield qui hébérge le min sampling
-     */
-    label_number_field: "NUMBERFIELD",
-    /**
-     * id du composant de type numberfield qui hébérge le nombre de points
-     */
-    label_number_field1: "NUMBERFIELD1",
-    /**
-     * Le composant parent de celui-ci
-     */
-    parent: null,
-
-    initComponent: function () {
-        const items_params = [];
-        const minSampling = "Sampling Time (s)";
-        const minValue = 0;
-        const labelWitdh = 120;
-        const width = 30;
-
-        for (p in this.params) {
-            const param = this.params[p];
-            const fieldSet = {
-                xtype: 'fieldset',
-                name: 'FIELDSET' + param.id,
-                title: param.id,
-                collapsible: false,
-                layout: {
-                    type: 'vbox',
-                    align: 'stretch',
-                },
-                items: [
-                    {
-                        xtype: 'numberfield',
-                        name: this.label_number_field + param.id,
-                        labelWidth: labelWitdh,
-                        width: width,
-                        value: param.MinSampling,
-                        minValue: minValue,
-                        disabled: true,
-                        fieldLabel: minSampling
-                    },
-                    {
-                        xtype: 'numberfield',
-                        name: this.label_number_field1 + param.id,
-                        labelWidth: labelWitdh,
-                        width: width,
-                        value: 0,
-                        minValue: minValue,
-                        fieldLabel: "Nb Points"
-                    }
-                ]
-            };
-
-            items_params.push(fieldSet);
-        }
-
-        const tabParams = Ext.create('Ext.tab.Panel', {
-            layout: 'fit',
-            plain: true,
-            bodyStyle: 'background: none',
-            items: items_params
-        });
-
-        const config =
-        {
-            title: 'Parameters Sampling',
-            layout: 'fit',
-            bodyStyle: { background: '#dfe8f6' },
-            items: [tabParams]
-        };
-
-        Ext.apply(this, config);
-        //Les arguments sont les paramètres, chaque paramètre contient un id et un min Sampling
-        this.callParent(arguments);
-    },
-
-    /**
-     * Set parent
-     * @param {*} parent_ le parent qui contient ce composant
-     */
-    setParent: function (parent_) {
-        this.parent = parent_;
-    },
-
-    /**
-     * Retourne les valeurs d'id, min sampling et nb_points de tout les parametres passés comme argument 
-     * @returns id1@minSampling1@nb_points1@id2@minSampling2@nb_points2....
-     */
-    getValues: function () {
-        let list = "";
-        const delimeter = "@";
-        let i = 0;
-        for (p in this.params) {
-            let param = this.params[p];
-            const ui_item = this.parent.findField(this.label_number_field1 + param.id);
-            if (i > 0) list += delimeter;
-            if (ui_item !== undefined && ui_item !== null) {
-                list += param.id + delimeter + param.MinSampling + delimeter + ui_item.getValue() + delimeter + "5";
-            }
-            i++;
-        }
-        return { "param_nb_points": list };
-    },
-
-    /**
-     * Mettre à jour le nb_points en fonction de la valeur de start time et stop time passés en paramètres
-     * @param {*} startTime le start time issu du ZoomPlugin
-     * @param {*} stopTime le stop time issu du ZoomPlugin
-     */
-    setValues: function (startTime, stopTime) {
-        for (p in this.params) {
-            let param = this.params[p];
-            const nb_points = (stopTime.getTime() - startTime.getTime()) / (1000. * param.MinSampling);
-            const ui_item = this.parent.findField(this.label_number_field1 + param.id);
-            ui_item.setValue(parseInt(nb_points));
-        }
-    }
-});
@@ -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);
 						},