Add comments to IntervalSelection.js

Menouard AZIB
1 parent 3bda2729
Showing 4 changed files with 73 additions and 22 deletions Show diff stats
js/app/views/PlotComponents/intervalSelection/DateZoomIntervalSelection.js
js/app/views/PlotComponents/intervalSelection/IntervalSelection.js
js/app/views/PlotComponents/intervalSelection/PlotFunctionIntervalSelection.js
js/app/views/PlotComponents/intervalSelection/ZoomIntervalSelection.js
@@ -9,7 +9,7 @@ Ext.define(&#39;amdaPlotComp.intervalSelection.DateZoomIntervalSelection&#39;, {
     initComponent: function () {
         this.callParent(arguments);
         this.insertToTTCatlog = new amdaPlotComp.intervalSelection.InsertToTTCatlog({ parent: this });
-        this.parent.add(this.insertToTTCatlog);
+        this.form.add(this.insertToTTCatlog);
     },
  
 });
@@ -8,7 +8,7 @@ const LAYOUT_STYLE = {
 // Width of button
 const width = 100;
  
-// Define the parent class
+// 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
@@ -19,11 +19,12 @@ Ext.define(&#39;amdaPlotComp.intervalSelection.IntervalSelection&#39;, {
     resizable: false, // Prevents the window from being resizable
     ghost: false, // Disables "ghosting" (semi-transparent representation of the window body) when moving or resizing
  
-    parent: null, // Initialize parent to null
-    hostCmp: null,
+    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.
@@ -41,9 +42,8 @@ Ext.define(&#39;amdaPlotComp.intervalSelection.IntervalSelection&#39;, {
     buttonUseTime: 'button-use-time',
  
     initComponent: function () {
-        const me = this; // Reference to this instance for use in event handlers
-
-        this.parent = new Ext.form.FormPanel({ // Create a new FormPanel instance and assign it to parent
+        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
@@ -64,7 +64,7 @@ Ext.define(&#39;amdaPlotComp.intervalSelection.IntervalSelection&#39;, {
                     listeners: {
                         change: function (field, newValue) {
                             if (newValue === null || newValue === undefined || newValue === '') return;
-                            var field2 = me._getField2();
+                            var field2 = self._getField2();
                             // Check if field2 is not empty
                             const value2 = field2.getValue();
                             if (value2 !== null && value2 !== undefined && value2 !== '') {
@@ -87,7 +87,7 @@ Ext.define(&#39;amdaPlotComp.intervalSelection.IntervalSelection&#39;, {
                     listeners: {
                         change: function (field, newValue) {
                             if (newValue === null || newValue === undefined || newValue === '') return;
-                            var field1 = me._getField1();
+                            var field1 = self._getField1();
                             // Check if field1 is not empty
                             const value1 = field1.getValue();
                             if (value1 !== null && value1 !== undefined && value1 !== '') {
@@ -106,7 +106,7 @@ Ext.define(&#39;amdaPlotComp.intervalSelection.IntervalSelection&#39;, {
                     text: 'Reset',
                     width: width,
                     handler: function () {
-                        me.reset();
+                        self.reset();
                     }
                 },
                 {
@@ -114,7 +114,7 @@ Ext.define(&#39;amdaPlotComp.intervalSelection.IntervalSelection&#39;, {
                     text: 'Use in Time Selection',
                     itemId: this.buttonUseTime,
                     handler: function () {
-                        me._setTimeInterval();
+                        self._setTimeInterval();
                     }
                 }]
             }],
@@ -124,38 +124,67 @@ Ext.define(&#39;amdaPlotComp.intervalSelection.IntervalSelection&#39;, {
                     width: width,
                     text: this.buttonApply,
                     handler: function () {
-                        me._apply();
+                        self._apply();
                     }
                 }
             ]
         })
  
         Ext.apply(this, {
-            items: this.parent
+            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();
     },
  
-    _apply: function () { },
+    /**
+ * 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.parent.getForm().isValid();
+        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.parent.down('#' + this.FIELD1_ITEM_ID);
+        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.parent.down('#' + this.FIELD2_ITEM_ID);
+        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();
@@ -165,30 +194,52 @@ Ext.define(&#39;amdaPlotComp.intervalSelection.IntervalSelection&#39;, {
         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.parent.down('#' + this.buttonUseTime);
+        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();
     }
+
 });
@@ -8,7 +8,7 @@ Ext.define(&#39;amdaPlotComp.intervalSelection.PlotFunctionIntervalSelection&#39;, {
     initComponent: function () {
         this.callParent(arguments);
         this.plotFunctionType = new amdaPlotComp.plotFunction.FunctionType();
-        this.parent.add(this.plotFunctionType);
+        this.form.add(this.plotFunctionType);
     },
  
     _apply: function () {
@@ -5,14 +5,14 @@ Ext.define(&#39;amdaPlotComp.intervalSelection.ZoomIntervalSelection&#39;, {
     type: null,
  
     initComponent: function () {
-        const me = this;
+        const self = this;
         this.callParent(arguments);
-        this.parent.getDockedItems('toolbar[dock="bottom"]')[0].add({
+        this.form.getDockedItems('toolbar[dock="bottom"]')[0].add({
             xtype: 'button',
             width: width,
             text: 'Undo Zoom',
             handler: function () {
-                me._undoZoom();
+                self._undoZoom();
             }
         });
     },