Commit 9ea5aa6b3bf7a78b94c8039314569172bbe2c804
1 parent
3bda2729
Exists in
master
and in
16 other branches
Add comments to IntervalSelection.js
Showing
4 changed files
with
73 additions
and
22 deletions
Show diff stats
js/app/views/PlotComponents/intervalSelection/DateZoomIntervalSelection.js
@@ -9,7 +9,7 @@ Ext.define('amdaPlotComp.intervalSelection.DateZoomIntervalSelection', { | @@ -9,7 +9,7 @@ Ext.define('amdaPlotComp.intervalSelection.DateZoomIntervalSelection', { | ||
9 | initComponent: function () { | 9 | initComponent: function () { |
10 | this.callParent(arguments); | 10 | this.callParent(arguments); |
11 | this.insertToTTCatlog = new amdaPlotComp.intervalSelection.InsertToTTCatlog({ parent: this }); | 11 | this.insertToTTCatlog = new amdaPlotComp.intervalSelection.InsertToTTCatlog({ parent: this }); |
12 | - this.parent.add(this.insertToTTCatlog); | 12 | + this.form.add(this.insertToTTCatlog); |
13 | }, | 13 | }, |
14 | 14 | ||
15 | }); | 15 | }); |
js/app/views/PlotComponents/intervalSelection/IntervalSelection.js
@@ -8,7 +8,7 @@ const LAYOUT_STYLE = { | @@ -8,7 +8,7 @@ const LAYOUT_STYLE = { | ||
8 | // Width of button | 8 | // Width of button |
9 | const width = 100; | 9 | const width = 100; |
10 | 10 | ||
11 | -// Define the parent class | 11 | +// Define the parent class for all classes to use time interval selection. |
12 | Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | 12 | Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { |
13 | extend: 'Ext.window.Window', // This class extends from Ext.window.Window | 13 | extend: 'Ext.window.Window', // This class extends from Ext.window.Window |
14 | // Window configurations | 14 | // Window configurations |
@@ -19,11 +19,12 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | @@ -19,11 +19,12 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | ||
19 | resizable: false, // Prevents the window from being resizable | 19 | resizable: false, // Prevents the window from being resizable |
20 | ghost: false, // Disables "ghosting" (semi-transparent representation of the window body) when moving or resizing | 20 | ghost: false, // Disables "ghosting" (semi-transparent representation of the window body) when moving or resizing |
21 | 21 | ||
22 | - parent: null, // Initialize parent to null | ||
23 | - hostCmp: null, | 22 | + form: null, // a panel which contains all components |
23 | + hostCmp: null, // The host component from which this class is instantiated. | ||
24 | interactiveId: '', | 24 | interactiveId: '', |
25 | panelId: -1, | 25 | panelId: -1, |
26 | 26 | ||
27 | + // Attributes of this class | ||
27 | config: { | 28 | config: { |
28 | field1Type: 'datefield', // The xtype of field1. By default is datefield because we are working with time series. | 29 | field1Type: 'datefield', // The xtype of field1. By default is datefield because we are working with time series. |
29 | field1Label: 'Start Time', // The label of field1. | 30 | field1Label: 'Start Time', // The label of field1. |
@@ -41,9 +42,8 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | @@ -41,9 +42,8 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | ||
41 | buttonUseTime: 'button-use-time', | 42 | buttonUseTime: 'button-use-time', |
42 | 43 | ||
43 | initComponent: function () { | 44 | initComponent: function () { |
44 | - const me = this; // Reference to this instance for use in event handlers | ||
45 | - | ||
46 | - this.parent = new Ext.form.FormPanel({ // Create a new FormPanel instance and assign it to parent | 45 | + const self = this; // Reference to this instance for use in event handlers |
46 | + this.form = new Ext.form.FormPanel({ // Create a new FormPanel instance and assign it to form | ||
47 | frame: true, // Display a frame around the panel | 47 | frame: true, // Display a frame around the panel |
48 | width: 255, // Set the width of the panel | 48 | width: 255, // Set the width of the panel |
49 | layout: LAYOUT_STYLE, // Set the layout style of the panel | 49 | layout: LAYOUT_STYLE, // Set the layout style of the panel |
@@ -64,7 +64,7 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | @@ -64,7 +64,7 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | ||
64 | listeners: { | 64 | listeners: { |
65 | change: function (field, newValue) { | 65 | change: function (field, newValue) { |
66 | if (newValue === null || newValue === undefined || newValue === '') return; | 66 | if (newValue === null || newValue === undefined || newValue === '') return; |
67 | - var field2 = me._getField2(); | 67 | + var field2 = self._getField2(); |
68 | // Check if field2 is not empty | 68 | // Check if field2 is not empty |
69 | const value2 = field2.getValue(); | 69 | const value2 = field2.getValue(); |
70 | if (value2 !== null && value2 !== undefined && value2 !== '') { | 70 | if (value2 !== null && value2 !== undefined && value2 !== '') { |
@@ -87,7 +87,7 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | @@ -87,7 +87,7 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | ||
87 | listeners: { | 87 | listeners: { |
88 | change: function (field, newValue) { | 88 | change: function (field, newValue) { |
89 | if (newValue === null || newValue === undefined || newValue === '') return; | 89 | if (newValue === null || newValue === undefined || newValue === '') return; |
90 | - var field1 = me._getField1(); | 90 | + var field1 = self._getField1(); |
91 | // Check if field1 is not empty | 91 | // Check if field1 is not empty |
92 | const value1 = field1.getValue(); | 92 | const value1 = field1.getValue(); |
93 | if (value1 !== null && value1 !== undefined && value1 !== '') { | 93 | if (value1 !== null && value1 !== undefined && value1 !== '') { |
@@ -106,7 +106,7 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | @@ -106,7 +106,7 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | ||
106 | text: 'Reset', | 106 | text: 'Reset', |
107 | width: width, | 107 | width: width, |
108 | handler: function () { | 108 | handler: function () { |
109 | - me.reset(); | 109 | + self.reset(); |
110 | } | 110 | } |
111 | }, | 111 | }, |
112 | { | 112 | { |
@@ -114,7 +114,7 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | @@ -114,7 +114,7 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | ||
114 | text: 'Use in Time Selection', | 114 | text: 'Use in Time Selection', |
115 | itemId: this.buttonUseTime, | 115 | itemId: this.buttonUseTime, |
116 | handler: function () { | 116 | handler: function () { |
117 | - me._setTimeInterval(); | 117 | + self._setTimeInterval(); |
118 | } | 118 | } |
119 | }] | 119 | }] |
120 | }], | 120 | }], |
@@ -124,38 +124,67 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | @@ -124,38 +124,67 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | ||
124 | width: width, | 124 | width: width, |
125 | text: this.buttonApply, | 125 | text: this.buttonApply, |
126 | handler: function () { | 126 | handler: function () { |
127 | - me._apply(); | 127 | + self._apply(); |
128 | } | 128 | } |
129 | } | 129 | } |
130 | ] | 130 | ] |
131 | }) | 131 | }) |
132 | 132 | ||
133 | Ext.apply(this, { | 133 | Ext.apply(this, { |
134 | - items: this.parent | 134 | + items: this.form |
135 | }); | 135 | }); |
136 | 136 | ||
137 | this.setTitle(this.title + " - Panel Id : " + this.panelId); | 137 | this.setTitle(this.title + " - Panel Id : " + this.panelId); |
138 | this.callParent(arguments); | 138 | this.callParent(arguments); |
139 | }, | 139 | }, |
140 | 140 | ||
141 | + /** | ||
142 | + * Resets the time interval selection in the host component. | ||
143 | + * This function calls the resetZoom method on the panelImage of the host component, | ||
144 | + * effectively resetting any zoom applied to the image. | ||
145 | + */ | ||
141 | _resetHostCmpSelection: function () { | 146 | _resetHostCmpSelection: function () { |
142 | this.hostCmp.panelImage.resetZoom(); | 147 | this.hostCmp.panelImage.resetZoom(); |
143 | }, | 148 | }, |
144 | 149 | ||
145 | - _apply: function () { }, | 150 | + /** |
151 | + * Abstract method that must be implemented by subclasses. | ||
152 | + * Throws an error if not overridden. | ||
153 | + */ | ||
154 | + _apply: function () { | ||
155 | + throw new Error('_apply() method must be implemented by subclass'); | ||
156 | + }, | ||
146 | 157 | ||
158 | + /** | ||
159 | + * Checks if the values of field1 and field2 are valid and if the form is valid. | ||
160 | + * Returns true if any of these conditions are not met. | ||
161 | + */ | ||
147 | _notValidValues: function () { | 162 | _notValidValues: function () { |
148 | - return !this.getField1Value() || !this.getField2Value() || !this.parent.getForm().isValid(); | 163 | + return !this.getField1Value() || !this.getField2Value() || !this.form.getForm().isValid(); |
149 | }, | 164 | }, |
150 | 165 | ||
166 | + /** | ||
167 | + * Retrieves the component associated with FIELD1_ITEM_ID in the form. | ||
168 | + * Returns the component if found, null otherwise. | ||
169 | + */ | ||
151 | _getField1: function () { | 170 | _getField1: function () { |
152 | - return this.parent.down('#' + this.FIELD1_ITEM_ID); | 171 | + return this.form.down('#' + this.FIELD1_ITEM_ID); |
153 | }, | 172 | }, |
154 | 173 | ||
174 | + /** | ||
175 | + * Retrieves the component associated with FIELD2_ITEM_ID in the form. | ||
176 | + * Returns the component if found, null otherwise. | ||
177 | + */ | ||
155 | _getField2: function () { | 178 | _getField2: function () { |
156 | - return this.parent.down('#' + this.FIELD2_ITEM_ID); | 179 | + return this.form.down('#' + this.FIELD2_ITEM_ID); |
157 | }, | 180 | }, |
158 | 181 | ||
182 | + /** | ||
183 | + * Sets the time interval of the plot based on the values of the fields. | ||
184 | + * This method is triggered when the buttonUseTime is clicked. | ||
185 | + * It creates a new time object with start, stop, and interactiveId properties, | ||
186 | + * and then calls the setTimeInterval method on the plot module with this object. | ||
187 | + */ | ||
159 | _setTimeInterval: function () { | 188 | _setTimeInterval: function () { |
160 | const timeObj = new Object(); | 189 | const timeObj = new Object(); |
161 | timeObj.start = this.getField1Value(); | 190 | timeObj.start = this.getField1Value(); |
@@ -165,30 +194,52 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | @@ -165,30 +194,52 @@ Ext.define('amdaPlotComp.intervalSelection.IntervalSelection', { | ||
165 | plotModule.setTimeInterval(timeObj); | 194 | plotModule.setTimeInterval(timeObj); |
166 | }, | 195 | }, |
167 | 196 | ||
197 | + /** | ||
198 | + * Hides the buttonUseTime when it's not needed. | ||
199 | + * For example, when we call Zoom on y-left axis we should not see this button. | ||
200 | + * It finds the button by its ID and then calls the hide method on it. | ||
201 | + */ | ||
168 | _removeUseTimeButton: function () { | 202 | _removeUseTimeButton: function () { |
169 | - const buttonToHide = this.parent.down('#' + this.buttonUseTime); | 203 | + const buttonToHide = this.form.down('#' + this.buttonUseTime); |
170 | buttonToHide.hide(); | 204 | buttonToHide.hide(); |
171 | }, | 205 | }, |
172 | 206 | ||
207 | + /** | ||
208 | + * Retrieves the value of field1 from the form. | ||
209 | + */ | ||
173 | getField1Value: function () { | 210 | getField1Value: function () { |
174 | return this._getField1().getValue(); | 211 | return this._getField1().getValue(); |
175 | }, | 212 | }, |
176 | 213 | ||
214 | + /** | ||
215 | + * Retrieves the value of field2 from the form. | ||
216 | + */ | ||
177 | getField2Value: function () { | 217 | getField2Value: function () { |
178 | return this._getField2().getValue(); | 218 | return this._getField2().getValue(); |
179 | }, | 219 | }, |
180 | 220 | ||
221 | + /** | ||
222 | + * Sets a new value for field1 in the form. | ||
223 | + */ | ||
181 | setField1Value: function (value) { | 224 | setField1Value: function (value) { |
182 | this._getField1().setValue(value); | 225 | this._getField1().setValue(value); |
183 | }, | 226 | }, |
184 | 227 | ||
228 | + /** | ||
229 | + * Sets a new value for field2 in the form. | ||
230 | + */ | ||
185 | setField2Value: function (value) { | 231 | setField2Value: function (value) { |
186 | this._getField2().setValue(value); | 232 | this._getField2().setValue(value); |
187 | }, | 233 | }, |
188 | 234 | ||
235 | + /** | ||
236 | + * Resets the values of fields and host component selection. | ||
237 | + * It calls the reset method on field1 and field2, and then calls _resetHostCmpSelection. | ||
238 | + */ | ||
189 | reset: function () { | 239 | reset: function () { |
190 | this._getField1().reset(); | 240 | this._getField1().reset(); |
191 | this._getField2().reset(); | 241 | this._getField2().reset(); |
192 | this._resetHostCmpSelection(); | 242 | this._resetHostCmpSelection(); |
193 | } | 243 | } |
244 | + | ||
194 | }); | 245 | }); |
js/app/views/PlotComponents/intervalSelection/PlotFunctionIntervalSelection.js
@@ -8,7 +8,7 @@ Ext.define('amdaPlotComp.intervalSelection.PlotFunctionIntervalSelection', { | @@ -8,7 +8,7 @@ Ext.define('amdaPlotComp.intervalSelection.PlotFunctionIntervalSelection', { | ||
8 | initComponent: function () { | 8 | initComponent: function () { |
9 | this.callParent(arguments); | 9 | this.callParent(arguments); |
10 | this.plotFunctionType = new amdaPlotComp.plotFunction.FunctionType(); | 10 | this.plotFunctionType = new amdaPlotComp.plotFunction.FunctionType(); |
11 | - this.parent.add(this.plotFunctionType); | 11 | + this.form.add(this.plotFunctionType); |
12 | }, | 12 | }, |
13 | 13 | ||
14 | _apply: function () { | 14 | _apply: function () { |
js/app/views/PlotComponents/intervalSelection/ZoomIntervalSelection.js
@@ -5,14 +5,14 @@ Ext.define('amdaPlotComp.intervalSelection.ZoomIntervalSelection', { | @@ -5,14 +5,14 @@ Ext.define('amdaPlotComp.intervalSelection.ZoomIntervalSelection', { | ||
5 | type: null, | 5 | type: null, |
6 | 6 | ||
7 | initComponent: function () { | 7 | initComponent: function () { |
8 | - const me = this; | 8 | + const self = this; |
9 | this.callParent(arguments); | 9 | this.callParent(arguments); |
10 | - this.parent.getDockedItems('toolbar[dock="bottom"]')[0].add({ | 10 | + this.form.getDockedItems('toolbar[dock="bottom"]')[0].add({ |
11 | xtype: 'button', | 11 | xtype: 'button', |
12 | width: width, | 12 | width: width, |
13 | text: 'Undo Zoom', | 13 | text: 'Undo Zoom', |
14 | handler: function () { | 14 | handler: function () { |
15 | - me._undoZoom(); | 15 | + self._undoZoom(); |
16 | } | 16 | } |
17 | }); | 17 | }); |
18 | }, | 18 | }, |