Fix the rundr undersider effect by using the useEffect feature

quickwit/quickwit-ui/src/components/QueryEditor/AggregationEditor.tsx

@@ -17,7 +17,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <http://www.gnu.org/licenses/>.
 
-import { useRef, useState } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { SearchComponentProps } from '../../utils/SearchComponentProps';
 import { TermAgg, HistogramAgg } from '../../utils/models';
 import { Box } from '@mui/material';
@@ -107,13 +107,23 @@ export function AggregationKind(props: SearchComponentProps) {
   const [aggregations, setAggregations] = useState<({term: TermAgg} | {histogram: HistogramAgg})[]>(
           [defaultAgg]);
 
+  useEffect(() => {
+    // do the initial filling of parameters
+    const aggregationConfig = props.searchRequest.aggregationConfig;
+    if (aggregationConfig.histogram === null && aggregationConfig.term === null) {
+      const initialAggregation = Object.assign({}, ...aggregations);
+      const initialSearchRequest = {...props.searchRequest, aggregationConfig: initialAggregation};
+      props.onSearchRequestUpdate(initialSearchRequest);
+    }
+  }, []); // Empty dependency array means this runs once after mount
+
   const updateAggregationProp = (newAggregations: ({term: TermAgg} | {histogram: HistogramAgg})[]) => {
     const metric = props.searchRequest.aggregationConfig.metric;
     const updatedAggregation = Object.assign({}, {metric: metric}, ...newAggregations);
     const updatedSearchRequest = {...props.searchRequest, aggregationConfig: updatedAggregation};
     props.onSearchRequestUpdate(updatedSearchRequest);
   };
-
+  
   const handleAggregationChange = (pos: number, event: SelectChangeEvent) => {
     const value = event.target.value;
     setAggregations((agg) => {

quickwit/quickwit-ui/src/components/SearchResult/SearchResult.tsx

@@ -72,10 +72,8 @@ export default function SearchResult(props: SearchResultProps) {
       if (props.searchResponse == null || props.index == null) {
         return null;
       } else if (props.searchResponse.aggregations === undefined) {
-        console.log("result table");
         return (<ResultTable searchResponse={props.searchResponse} index={props.index} />);
       } else {
-        console.log("aggregation result");
         return (<AggregationResult searchResponse={props.searchResponse} />);
       }
     },