From 22dea2dde714e9e8e28cc60738c4ef673f4282a5 Mon Sep 17 00:00:00 2001
From: trinity-1686a <trinity@quickwit.io>
Date: Thu, 20 Jun 2024 14:59:19 +0200
Subject: [PATCH] add support for aggregations on quickwit ui (#4974)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* make monaco editor respond to window resize

fix #3223

* add selector for aggregation

* support sending aggregations

* show aggregation results

* fix formating

* fix crash on empty result

* try to make typing experience better

* codestyle and fix typo

* use 'in' instead of hasOwn

* fix most errors

use FormControl properly

don't use lists, or set a key for each element

change casing of some css properties

* remove listener

* Move jest mocks to dedicated folder

* Add x-charts LineChart mock

* Remove the auto aggregation featur, put 1day by default instead

* Remove console logs and add camelCase

* Run search and update UI when changing search tab

* Fix the render side-effect by using the useEffect feature

* Do not re run search in each aggregation change. It can be too heavy for user. It's better to clic on Run

---------

Co-authored-by: Damien de Lemeny <contact@ddelemeny.me>
Co-authored-by: JulesVautier-io <jules.vautier01@gmail.com>
Co-authored-by: François Massot <francois.massot@gmail.com>
---
 .../quickwit-ui/{ => mocks}/monacoMock.js     |   0
 .../quickwit-ui/{ => mocks}/swaggerUIMock.js  |   0
 quickwit/quickwit-ui/mocks/x-charts.js        |   1 +
 quickwit/quickwit-ui/package.json             |   6 +-
 .../src/components/ApiUrlFooter.tsx           |   1 +
 .../src/components/QueryActionBar.tsx         |  21 +-
 .../QueryEditor/AggregationEditor.tsx         | 315 ++++++++++++++++++
 .../components/QueryEditor/QueryEditor.tsx    |  10 +
 .../SearchResult/AggregationResult.tsx        |  68 ++++
 .../components/SearchResult/SearchResult.tsx  |  21 +-
 .../src/components/TimeRangeSelect.tsx        |   4 +-
 .../quickwit-ui/src/services/client.test.ts   |  12 +-
 quickwit/quickwit-ui/src/services/client.ts   | 108 ++++--
 quickwit/quickwit-ui/src/utils/models.ts      | 102 +++++-
 quickwit/quickwit-ui/src/utils/urls.ts        |  32 +-
 quickwit/quickwit-ui/src/views/SearchView.tsx |  11 +-
 quickwit/quickwit-ui/yarn.lock                | 263 +++++++++++++++
 17 files changed, 937 insertions(+), 38 deletions(-)
 rename quickwit/quickwit-ui/{ => mocks}/monacoMock.js (100%)
 rename quickwit/quickwit-ui/{ => mocks}/swaggerUIMock.js (100%)
 create mode 100644 quickwit/quickwit-ui/mocks/x-charts.js
 create mode 100644 quickwit/quickwit-ui/src/components/QueryEditor/AggregationEditor.tsx
 create mode 100644 quickwit/quickwit-ui/src/components/SearchResult/AggregationResult.tsx

diff --git a/quickwit/quickwit-ui/monacoMock.js b/quickwit/quickwit-ui/mocks/monacoMock.js
similarity index 100%
rename from quickwit/quickwit-ui/monacoMock.js
rename to quickwit/quickwit-ui/mocks/monacoMock.js
diff --git a/quickwit/quickwit-ui/swaggerUIMock.js b/quickwit/quickwit-ui/mocks/swaggerUIMock.js
similarity index 100%
rename from quickwit/quickwit-ui/swaggerUIMock.js
rename to quickwit/quickwit-ui/mocks/swaggerUIMock.js
diff --git a/quickwit/quickwit-ui/mocks/x-charts.js b/quickwit/quickwit-ui/mocks/x-charts.js
new file mode 100644
index 00000000000..4a777a1ce84
--- /dev/null
+++ b/quickwit/quickwit-ui/mocks/x-charts.js
@@ -0,0 +1 @@
+export const LineChart =  ({ children }) => children;
diff --git a/quickwit/quickwit-ui/package.json b/quickwit/quickwit-ui/package.json
index 9550aa3118e..e09a771f21e 100644
--- a/quickwit/quickwit-ui/package.json
+++ b/quickwit/quickwit-ui/package.json
@@ -12,6 +12,7 @@
     "@mui/lab": "^5.0.0-alpha.114",
     "@mui/material": "^5.11.2",
     "@mui/system": "^5.11.2",
+    "@mui/x-charts": "^7.3.2",
     "@mui/x-date-pickers": "^5.0.12",
     "@types/jest": "^29.5.6",
     "@types/node": "^20.8.7",
@@ -78,8 +79,9 @@
   },
   "jest": {
     "moduleNameMapper": {
-      "monaco-editor": "<rootDir>/monacoMock.js",
-      "swagger-ui-react": "<rootDir>/swaggerUIMock.js"
+      "monaco-editor": "<rootDir>/mocks/monacoMock.js",
+      "swagger-ui-react": "<rootDir>/mocks/swaggerUIMock.js",
+      "@mui/x-charts": "<rootDir>/mocks/x-charts.js"
     }
   }
 }
diff --git a/quickwit/quickwit-ui/src/components/ApiUrlFooter.tsx b/quickwit/quickwit-ui/src/components/ApiUrlFooter.tsx
index 9f546d645c5..3850c7f4719 100644
--- a/quickwit/quickwit-ui/src/components/ApiUrlFooter.tsx
+++ b/quickwit/quickwit-ui/src/components/ApiUrlFooter.tsx
@@ -37,6 +37,7 @@ export default function ApiUrlFooter(url: string) {
   const origin = process.env.NODE_ENV === 'development' ? 'http://localhost:7280' : window.location.origin;
   const completeUrl = `${origin}/${url}`;
   const isTooLong = completeUrl.length > urlMaxLength;
+  // TODO show generated aggregation
   return <Footer>
     <Typography sx={{ padding: '4px 5px', fontSize: '0.95em'}}>
       API URL:
diff --git a/quickwit/quickwit-ui/src/components/QueryActionBar.tsx b/quickwit/quickwit-ui/src/components/QueryActionBar.tsx
index c724e482e9c..962eb931f8e 100644
--- a/quickwit/quickwit-ui/src/components/QueryActionBar.tsx
+++ b/quickwit/quickwit-ui/src/components/QueryActionBar.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 { Box, Button } from "@mui/material";
+import { Box, Button, Tabs, Tab } from "@mui/material";
 import { TimeRangeSelect } from './TimeRangeSelect';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import { SearchComponentProps } from "../utils/SearchComponentProps";
@@ -25,9 +25,16 @@ import { SearchComponentProps } from "../utils/SearchComponentProps";
 export function QueryEditorActionBar(props: SearchComponentProps) {
   const timestamp_field_name = props.index?.metadata.index_config.doc_mapping.timestamp_field;
   const shouldDisplayTimeRangeSelect = timestamp_field_name ?? false;
+
+  const handleChange = (_event: React.SyntheticEvent, newTab: number) => {
+    const updatedSearchRequest = {...props.searchRequest, aggregation: newTab != 0};
+    props.onSearchRequestUpdate(updatedSearchRequest);
+    props.runSearch(updatedSearchRequest)
+  };
+
   return (
     <Box sx={{ display: 'flex'}}>
-      <Box sx={{ flexGrow: 1 }}>
+      <Box sx={{ flexGrow: 0, padding: '10px' }}>
         <Button
           onClick={() => props.runSearch(props.searchRequest)}
           variant="contained"
@@ -38,6 +45,16 @@ export function QueryEditorActionBar(props: SearchComponentProps) {
           Run
         </Button>
       </Box>
+      <Box sx={{ flexGrow: 0 }}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider', flexGrow: 1}}>
+          <Tabs value={Number(props.searchRequest.aggregation)} onChange={handleChange}>
+            <Tab label="Search"/>
+            <Tab label="Aggregation"/>
+          </Tabs>
+        </Box>
+      </Box>
+      <Box sx={{ flexGrow: 1 }}>
+      </Box>
       { shouldDisplayTimeRangeSelect && <TimeRangeSelect
           timeRange={{
             startTimestamp:props.searchRequest.startTimestamp,
diff --git a/quickwit/quickwit-ui/src/components/QueryEditor/AggregationEditor.tsx b/quickwit/quickwit-ui/src/components/QueryEditor/AggregationEditor.tsx
new file mode 100644
index 00000000000..98d97a19ac2
--- /dev/null
+++ b/quickwit/quickwit-ui/src/components/QueryEditor/AggregationEditor.tsx
@@ -0,0 +1,315 @@
+// Copyright (C) 2024 Quickwit, Inc.
+//
+// Quickwit is offered under the AGPL v3.0 and as commercial software.
+// For commercial licensing, contact us at hello@quickwit.io.
+//
+// AGPL:
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// 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, useEffect, useState } from 'react';
+import { SearchComponentProps } from '../../utils/SearchComponentProps';
+import { TermAgg, HistogramAgg } from '../../utils/models';
+import { Box } from '@mui/material';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import TextField from '@mui/material/TextField';
+
+export function AggregationEditor(props: SearchComponentProps) {
+  return (
+    <Box hidden={!props.searchRequest.aggregation}>
+      <MetricKind
+        searchRequest={props.searchRequest}
+        onSearchRequestUpdate={props.onSearchRequestUpdate}
+        runSearch={props.runSearch}
+        index={props.index}
+        queryRunning={props.queryRunning} />
+      <AggregationKind
+        searchRequest={props.searchRequest}
+        onSearchRequestUpdate={props.onSearchRequestUpdate}
+        runSearch={props.runSearch}
+        index={props.index}
+        queryRunning={props.queryRunning} />
+    </Box>
+  )
+}
+
+export function MetricKind(props: SearchComponentProps) {
+  // TODO add percentiles
+  const metricRef = useRef(props.searchRequest.aggregationConfig.metric);
+
+  const handleTypeChange = (event: SelectChangeEvent) => {
+    const value = event.target.value;
+    const updatedMetric = value != "count" ? {...metricRef.current!, type: value} : null;
+    const updatedAggregation = {...props.searchRequest.aggregationConfig, metric: updatedMetric};
+    const updatedSearchRequest = {...props.searchRequest, aggregationConfig: updatedAggregation};
+    props.onSearchRequestUpdate(updatedSearchRequest);
+    metricRef.current = updatedMetric;
+  };
+
+  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    if (metricRef.current == null) {
+      return;
+    }
+    const updatedMetric = {...metricRef.current!, field: value};
+    const updatedAggregation = {...props.searchRequest.aggregationConfig, metric: updatedMetric};
+    const updatedSearchRequest = {...props.searchRequest, aggregationConfig: updatedAggregation};
+    props.onSearchRequestUpdate(updatedSearchRequest);
+    metricRef.current = updatedMetric;
+  };
+
+  return (
+    <Box sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
+      <FormControl variant="standard">
+        <Select
+          value={metricRef.current ? metricRef.current.type : "count"}
+          onChange={handleTypeChange}
+          sx={{ "minHeight": "44px" }}
+        >
+          <MenuItem value="count">Count</MenuItem>
+          <MenuItem value="avg">Average</MenuItem>
+          <MenuItem value="sum">Sum</MenuItem>
+          <MenuItem value="max">Max</MenuItem>
+          <MenuItem value="min">Min</MenuItem>
+        </Select>
+      </FormControl>
+      <FormControl variant="standard">
+        <TextField
+          variant="standard"
+          label="Field"
+          onChange={handleNameChange}
+          sx={{ "marginLeft": "10px", ... ( !metricRef.current && {display: "none"}) }}
+        />
+      </FormControl>
+    </Box>
+  )
+}
+
+export function AggregationKind(props: SearchComponentProps) {
+  props;
+  const defaultAgg  = {
+    histogram: {
+      interval: "1d",
+    }
+  };
+  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) => {
+      const newAggregations = [...agg];
+      switch(value) {
+        case "histogram": {
+          newAggregations[pos] = {
+            histogram: {
+              interval: "1d",
+            }
+          };
+          break;
+        }
+        case "term": {
+          newAggregations[pos] = {
+            term: {
+              field: "",
+              size: 10,
+            }
+          };
+          break;
+        }
+        case "rm": {
+          newAggregations.splice(pos, 1);
+        }
+      }
+      updateAggregationProp(newAggregations);
+      return newAggregations;
+    });
+  };
+
+  const handleHistogramChange = (pos: number, event: SelectChangeEvent) => {
+    const value = event.target.value;
+    setAggregations((agg) => {
+      const newAggregations = [...agg];
+      newAggregations[pos] = {histogram: {interval:value}};
+      updateAggregationProp(newAggregations);
+      return newAggregations;
+    });
+  }
+
+  const handleTermFieldChange = (pos: number, event: React.ChangeEvent<HTMLInputElement|HTMLTextAreaElement>) => {
+    const value = event.target.value;
+    setAggregations((agg) => {
+      const newAggregations = [...agg];
+      const term = newAggregations[pos]
+      if (isTerm(term)) {
+        term.term.field = value;
+      }
+      updateAggregationProp(newAggregations);
+      return newAggregations;
+    });
+  };
+
+  const handleTermCountChange = (pos: number, event: React.ChangeEvent<HTMLInputElement|HTMLTextAreaElement>) => {
+    const value = event.target.value;
+    setAggregations((agg) => {
+      const newAggregations = [...agg];
+      const term = newAggregations[pos]
+      if (isTerm(term)) {
+        term.term.size = Number(value);
+      }
+      updateAggregationProp(newAggregations);
+      return newAggregations;
+    });
+  };
+
+  function isHistogram(agg: {term: TermAgg} | {histogram: HistogramAgg} | undefined): agg is {histogram: HistogramAgg} {
+    if (!agg) return false;
+    return "histogram" in agg;
+  }
+
+  function isTerm(agg: {term: TermAgg} | {histogram: HistogramAgg} | undefined): agg is {term: TermAgg} {
+    if (!agg) return false;
+    return "term" in agg;
+  }
+
+  const getAggregationKind = (agg: {term: TermAgg} | {histogram: HistogramAgg} | undefined) => {
+    if (isHistogram(agg)) {
+      return "histogram";
+    }
+    if (isTerm(agg)) {
+      return "term";
+    }
+    return "new";
+  };
+
+  const makeOptions = (pos: number, agg: ({term: TermAgg} | {histogram: HistogramAgg})[]) => {
+    const options = [];
+    if (pos >= agg.length) {
+      options.push((
+          <MenuItem value="new" key="new">Add aggregation</MenuItem>
+      ))
+    }
+    let addHistogram = true;
+    let addTerm = true;
+    for(let i = 0; i < agg.length; i++) {
+      if (i == pos) continue;
+      if (getAggregationKind(agg[i]) === "histogram") addHistogram = false;
+      if (getAggregationKind(agg[i]) === "term") addTerm = false;
+    }
+    if (addHistogram) {
+      options.push((<MenuItem value="histogram" key="histogram">Histogram aggregation</MenuItem>))
+    }
+    if (addTerm) {
+      options.push((<MenuItem value="term" key="term">Term aggregation</MenuItem>));
+    }
+    if (agg.length > 1) {
+      options.push((
+          <MenuItem value="rm" key="rm">Remove aggregation</MenuItem>
+      ))
+    }
+    return options;
+  }
+
+  const drawAdditional = (pos: number, aggs: ({term: TermAgg} | {histogram: HistogramAgg})[]) => {
+    const agg = aggs[pos]
+    if (isHistogram(agg)) {
+      return (
+        <FormControl variant="standard">
+          <Select
+            value={agg.histogram.interval}
+            onChange={(e) => handleHistogramChange(pos, e)}
+            sx={{ "marginLeft": "10px", "minHeight": "44px" }}
+          >
+            <MenuItem value="10s">10 seconds</MenuItem>
+            <MenuItem value="1m">1 minute</MenuItem>
+            <MenuItem value="5m">5 minutes</MenuItem>
+            <MenuItem value="10m">10 minutes</MenuItem>
+            <MenuItem value="1h">1 hour</MenuItem>
+            <MenuItem value="1d">1 day</MenuItem>
+          </Select>
+        </FormControl>
+      );
+    }
+    if (isTerm(agg)) {
+      return (<>
+          <FormControl variant="standard">
+            <TextField
+              variant="standard"
+              label="Field"
+              onChange={(e) => handleTermFieldChange(pos, e)}
+              sx={{ "marginLeft": "10px" }}
+            />
+          </FormControl>
+          <FormControl variant="standard">
+            <TextField
+              variant="standard"
+              label="Return top"
+              type="number"
+              onChange={(e) => handleTermCountChange(pos, e)}
+              value={agg.term.size}
+              sx={{ "marginLeft": "10px" }}
+            />
+          </FormControl>
+        </>)
+    }
+    return (null);
+  }
+
+  return (
+    <>
+      <Box sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
+        <FormControl variant="standard">
+          <Select
+            value={getAggregationKind(aggregations[0])}
+            onChange={(e) => handleAggregationChange(0, e)}
+            sx={{ "minHeight": "44px", width: "190px" }}
+          >
+            { makeOptions(0, aggregations) }
+          </Select>
+        </FormControl>
+        {drawAdditional(0, aggregations)}
+      </Box>
+      <Box sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
+        <FormControl variant="standard" sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
+          <Select
+            value={getAggregationKind(aggregations[1])}
+            onChange={(e) => handleAggregationChange(1, e)}
+            sx={{ "minHeight": "44px", width: "190px" }}
+          >
+            { makeOptions(1, aggregations) }
+          </Select>
+          {drawAdditional(1, aggregations)}
+        </FormControl>
+      </Box>
+    </>
+  )
+}
diff --git a/quickwit/quickwit-ui/src/components/QueryEditor/QueryEditor.tsx b/quickwit/quickwit-ui/src/components/QueryEditor/QueryEditor.tsx
index e6015143002..13623de3f74 100644
--- a/quickwit/quickwit-ui/src/components/QueryEditor/QueryEditor.tsx
+++ b/quickwit/quickwit-ui/src/components/QueryEditor/QueryEditor.tsx
@@ -40,6 +40,7 @@ export function QueryEditor(props: SearchComponentProps) {
   const runSearchRef = useRef(props.runSearch);
   const searchRequestRef = useRef(props.searchRequest);
   const defaultValue = props.searchRequest.query === null ? `// Select an index and type your query. Example: field_name:"phrase query"` : props.searchRequest.query;
+  let resize: () => void;
 
   /* eslint-disable  @typescript-eslint/no-explicit-any */
   function handleEditorDidMount(editor: any, monaco: any) {
@@ -55,6 +56,14 @@ export function QueryEditor(props: SearchComponentProps) {
         runSearchRef.current(searchRequestRef.current);
       },
     })
+    resize = () => {
+      editor.layout({width: Math.max(window.innerWidth - (260+180+2*24), 200), height: 84});
+    }
+    window.addEventListener('resize', resize);
+  }
+
+  function handleEditorWillUnmount() {
+    window.removeEventListener('resize', resize);
   }
 
   useEffect(() => {
@@ -98,6 +107,7 @@ export function QueryEditor(props: SearchComponentProps) {
       <MonacoEditor
         editorWillMount={handleEditorWillMount}
         editorDidMount={handleEditorDidMount}
+        editorWillUnmount={handleEditorWillUnmount}
         onChange={handleEditorChange}
         language={languageId}
         value={defaultValue}
diff --git a/quickwit/quickwit-ui/src/components/SearchResult/AggregationResult.tsx b/quickwit/quickwit-ui/src/components/SearchResult/AggregationResult.tsx
new file mode 100644
index 00000000000..8649eeae750
--- /dev/null
+++ b/quickwit/quickwit-ui/src/components/SearchResult/AggregationResult.tsx
@@ -0,0 +1,68 @@
+// Copyright (C) 2024 Quickwit, Inc.
+//
+// Quickwit is offered under the AGPL v3.0 and as commercial software.
+// For commercial licensing, contact us at hello@quickwit.io.
+//
+// AGPL:
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// 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 { SearchResponse, HistogramResult, TermResult, ParsedAggregationResult, extractAggregationResults } from "../../utils/models";
+import { LineChart } from '@mui/x-charts/LineChart';
+import { BarChart } from '@mui/x-charts/BarChart';
+import { CurveType } from '@mui/x-charts/models/seriesType/line';
+
+function isHistogram(agg: ParsedAggregationResult): agg is HistogramResult {
+  return agg != null && "timestamps" in agg;
+}
+
+function isTerm(agg: ParsedAggregationResult): agg is TermResult {
+  return Array.isArray(agg);
+}
+
+export function AggregationResult({searchResponse}: {searchResponse: SearchResponse}) {
+  const result = extractAggregationResults(searchResponse.aggregations);
+  if (isHistogram(result)) {
+    const xAxis = [{
+      data: result.timestamps,
+      valueFormatter: (date: number) => {
+        return new Date(date).toISOString()
+      },
+    }];
+    const series = result.data.map((line) => {
+       const curve: CurveType = "monotoneX";
+       return {
+          curve,
+          label: line.name,
+          data: line.value,
+       };
+    });
+    series;
+    // we don't customize colors because we would need a full palette.
+    return (
+    <LineChart
+        xAxis={xAxis}
+        series={series}
+        yAxis={[{min: 0}]}
+      />
+    )
+  } else if (isTerm(result)) {
+    return (<BarChart
+      series={[{ data: result.map(entry => entry.value), color: "#004BD9A5"}]}
+      xAxis={[{ data: result.map(entry => entry.term), scaleType: 'band' }]}
+      margin={{ top: 10, bottom: 30, left: 40, right: 10 }}
+    />)
+  } else {
+    return (<p>no result to display</p>);
+  }
+}
diff --git a/quickwit/quickwit-ui/src/components/SearchResult/SearchResult.tsx b/quickwit/quickwit-ui/src/components/SearchResult/SearchResult.tsx
index a784a304ef4..74eb10d812e 100644
--- a/quickwit/quickwit-ui/src/components/SearchResult/SearchResult.tsx
+++ b/quickwit/quickwit-ui/src/components/SearchResult/SearchResult.tsx
@@ -17,11 +17,13 @@
 // 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 { useMemo } from 'react';
 import { Box, Typography } from "@mui/material";
 import NumberFormat from "react-number-format";
 import { Index, ResponseError, SearchResponse } from "../../utils/models";
 import Loader from "../Loader";
 import { ResultTable } from "./ResultTable";
+import { AggregationResult } from "./AggregationResult";
 import ErrorResponseDisplay from "../ResponseErrorDisplay";
 
 function HitCount({searchResponse}: {searchResponse: SearchResponse}) {
@@ -63,14 +65,29 @@ export default function SearchResult(props: SearchResultProps) {
   if (props.searchResponse == null || props.index == null) {
     return <></>
   }
+  // try to improve typing experience by caching the costly-to-render components
+  // in practice this doesn't seem to have much impact
+  const result = useMemo(
+    () => {
+      if (props.searchResponse == null || props.index == null) {
+        return null;
+      } else if (props.searchResponse.aggregations === undefined) {
+        return (<ResultTable searchResponse={props.searchResponse} index={props.index} />);
+      } else {
+        return (<AggregationResult searchResponse={props.searchResponse} />);
+      }
+    },
+    [props.searchResponse, props.index]
+  );
+
   return (
-    <Box sx={{ pt: 1, flexGrow: '1', flexBasis: '0%', overflow: 'hidden'}} >
+    <Box sx={{ pt: 1, flexGrow: '1', flexBasis: '0%', overflow: 'hidden'}}>
       <Box sx={{ height: '100%', flexDirection: 'column', flexGrow: 1, display: 'flex'}}>
         <Box sx={{ flexShrink: 0, display: 'flex', flexGrow: 0, flexBasis: 'auto' }}>
           <HitCount searchResponse={props.searchResponse} />
         </Box>
         <Box sx={{ pt: 2, flexGrow: 1, flexBasis: '0%', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
-          <ResultTable searchResponse={props.searchResponse} index={props.index} />
+          {result}
         </Box>
       </Box>
     </Box>
diff --git a/quickwit/quickwit-ui/src/components/TimeRangeSelect.tsx b/quickwit/quickwit-ui/src/components/TimeRangeSelect.tsx
index 9b9e13ca3cd..9baa627d6e2 100644
--- a/quickwit/quickwit-ui/src/components/TimeRangeSelect.tsx
+++ b/quickwit/quickwit-ui/src/components/TimeRangeSelect.tsx
@@ -113,7 +113,7 @@ export function TimeRangeSelect(props: TimeRangeSelectProps): JSX.Element {
   const id = open ? "time-range-select-popover" : undefined;
 
   return (
-    <div>
+    <Box sx={{padding: '10px'}}>
       <Button
         variant="contained"
         disableElevation
@@ -179,7 +179,7 @@ export function TimeRangeSelect(props: TimeRangeSelectProps): JSX.Element {
           </Box>
         </Box>
       </Popover>
-    </div>
+    </Box>
   );
 }
 
diff --git a/quickwit/quickwit-ui/src/services/client.test.ts b/quickwit/quickwit-ui/src/services/client.test.ts
index 61ea2c2c4f2..ad4776b69b1 100644
--- a/quickwit/quickwit-ui/src/services/client.test.ts
+++ b/quickwit/quickwit-ui/src/services/client.test.ts
@@ -30,9 +30,15 @@ describe('Client unit test', () => {
           maxHits: 20,
           sortByField: {
             field_name: 'timestamp',
-            order: 'Desc'
-          }
+            order: 'Desc',
+          },
+          aggregation: false,
+          aggregationConfig: {
+            metric: null,
+            term: null,
+            histogram: null,
+          },
         };
-        expect(new Client().buildSearchUrl(searchRequest).toString()).toBe("http://localhost/api/v1/my-new-fresh-index-id/search?query=severity_error%3AERROR&max_hits=20&start_timestamp=100&end_timestamp=200&sort_by_field=%2Btimestamp");
+        expect(new Client().buildSearchBody(searchRequest, null)).toBe('{"query":"severity_error:ERROR","max_hits":20,"start_timestamp":100,"end_timestamp":200,"sort_by_field":"+timestamp"}');
     });
 });
diff --git a/quickwit/quickwit-ui/src/services/client.ts b/quickwit/quickwit-ui/src/services/client.ts
index 90e3a56e8ad..19d1ae14805 100644
--- a/quickwit/quickwit-ui/src/services/client.ts
+++ b/quickwit/quickwit-ui/src/services/client.ts
@@ -35,13 +35,14 @@ export class Client {
     return this._host + "/api/v1/";
   }
 
-  async search(request: SearchRequest): Promise<SearchResponse> {
+  async search(request: SearchRequest, timestamp_field: string | null): Promise<SearchResponse> {
     // TODO: improve validation of request.
     if (request.indexId === null || request.indexId === undefined) {
       throw Error("Search request must have and index id.")
     }
-    const url = this.buildSearchUrl(request);
-    return this.fetch(url.toString(), this.defaultGetRequestParams());
+    const url = `${this.apiRoot()}/${request.indexId}/search`;
+    const body = this.buildSearchBody(request, timestamp_field);
+    return this.fetch(url, this.defaultGetRequestParams(), body);
   }
 
   async cluster(): Promise<Cluster> {
@@ -85,7 +86,12 @@ export class Client {
     return this.fetch(`${this.apiRoot()}indexes`, {});
   }
 
-  async fetch<T>(url: string, params: RequestInit): Promise<T> {
+  async fetch<T>(url: string, params: RequestInit, body: string|null = null): Promise<T> {
+    if (body !== null) {
+      params.method = "POST";
+      params.body = body;
+      params.headers = {...params.headers, "content-type": "application/json"};
+    }
     const response = await fetch(url, params);
     if (response.ok) {
       return response.json() as Promise<T>;
@@ -101,34 +107,90 @@ export class Client {
     return {
       method: "GET",
       headers: { Accept: "application/json" },
-      mode: "no-cors",
+      mode: "cors",
       cache: "default",
     }
   }
 
-  buildSearchUrl(request: SearchRequest): URL {
-    const url: URL = new URL(`${request.indexId}/search`, this.apiRoot());
-    // TODO: the trim should be done in the backend.
-    url.searchParams.append("query", request.query.trim() || "*");
-    url.searchParams.append("max_hits", "20");
+  buildSearchBody(request: SearchRequest, timestamp_field: string | null): string {
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
+    const body: any = {
+      // TODO: the trim should be done in the backend.
+      query: request.query.trim() || "*",
+    };
+
+    if (request.aggregation) {
+      const qw_aggregation = this.buildAggregation(request, timestamp_field);
+      body["aggs"] = qw_aggregation;
+      body["max_hits"] = 0;
+    } else {
+      body["max_hits"] = 20;
+    }
     if (request.startTimestamp) {
-      url.searchParams.append(
-        "start_timestamp",
-        request.startTimestamp.toString()
-      );
+      body["start_timestamp"] = request.startTimestamp;
     }
     if (request.endTimestamp) {
-      url.searchParams.append(
-        "end_timestamp",
-        request.endTimestamp.toString()
-      );
+      body["end_timestamp"] = request.endTimestamp;
     }
     if (request.sortByField) {
-      url.searchParams.append(
-        "sort_by_field",
-        serializeSortByField(request.sortByField)
-      );
+      body["sort_by_field"] = serializeSortByField(request.sortByField);
+    }
+    return JSON.stringify(body);
+  }
+
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
+  buildAggregation(request: SearchRequest, timestamp_field: string | null): any {
+    let aggregation = undefined;
+    if (request.aggregationConfig.metric) {
+      const metric = request.aggregationConfig.metric;
+      aggregation = {
+        metric: {
+          [metric.type]: {
+            field: metric.field
+          }
+        }
+      }
+    }
+    if (request.aggregationConfig.histogram && timestamp_field) {
+      const histogram = request.aggregationConfig.histogram;
+      const interval = histogram.interval
+      let extended_bounds;
+      if (request.startTimestamp && request.endTimestamp) {
+        extended_bounds = {
+          min: request.startTimestamp,
+          max: request.endTimestamp,
+        };
+      } else {
+        extended_bounds = undefined;
+      }
+      aggregation = {
+        histo_agg: {
+          aggs: aggregation,
+          date_histogram: {
+            field: timestamp_field,
+            fixed_interval: interval,
+            min_doc_count: 0,
+            extended_bounds: extended_bounds,
+          }
+        }
+      }
+    }
+    if (request.aggregationConfig.term) {
+      const term = request.aggregationConfig.term;
+      aggregation = {
+        term_agg: {
+          aggs: aggregation,
+          terms: {
+            field: term.field,
+            size: term.size,
+            order: {
+              _count: "desc"
+            },
+            min_doc_count: 1,
+          }
+        }
+      }
     }
-    return url;
+    return aggregation;
   }
 }
diff --git a/quickwit/quickwit-ui/src/utils/models.ts b/quickwit/quickwit-ui/src/utils/models.ts
index aade4380f11..ae67249d326 100644
--- a/quickwit/quickwit-ui/src/utils/models.ts
+++ b/quickwit/quickwit-ui/src/utils/models.ts
@@ -48,7 +48,7 @@ export type Entry = {
 export const DATE_TIME_WITH_SECONDS_FORMAT = "YYYY/MM/DD HH:mm:ss";
 export const DATE_TIME_WITH_MILLISECONDS_FORMAT = "YYYY/MM/DD HH:mm:ss.SSS";
 
-// Returns a flatten array of fields and nested fields found in the given `FieldMapping` array. 
+// Returns a flatten array of fields and nested fields found in the given `FieldMapping` array.
 export function getAllFields(field_mappings: Array<FieldMapping>): Field[] {
   const fields: Field[] = [];
   for (const field_mapping of field_mappings) {
@@ -86,6 +86,99 @@ export type SearchRequest = {
   endTimestamp: number | null;
   maxHits: number;
   sortByField: SortByField | null;
+  aggregation: boolean;
+  aggregationConfig: Aggregation;
+}
+
+export type Aggregation = {
+  metric: Metric | null;
+  term: TermAgg | null;
+  histogram: HistogramAgg | null;
+}
+
+export type Metric = {
+  type: string;
+  field: string;
+}
+
+export type TermAgg = {
+  field: string;
+  size: number;
+}
+
+export type HistogramAgg = {
+  interval: string;
+}
+
+export type ParsedAggregationResult = TermResult | HistogramResult| null;
+
+export type TermResult = {term: string, value: number}[];
+
+export type HistogramResult = {
+  timestamps: Date[],
+  data: {name: string | undefined, value: number[]}[],
+}
+
+export function extractAggregationResults(aggregation: any): ParsedAggregationResult {
+  const extract_value = (entry: any) => {
+    if ("metric" in entry) {
+      return entry.metric.value || 0;
+    } else {
+      return entry.doc_count;
+    }
+  };
+  if ("histo_agg" in aggregation) {
+    const buckets = aggregation.histo_agg.buckets;
+    const timestamps = buckets.map((entry: any) => entry.key);
+    const value = buckets.map(extract_value);
+    // we are in the "simple histogram" case
+    return {
+      timestamps,
+      data: [{name: undefined, value }]
+    }
+  } else if ("term_agg" in aggregation) {
+    // we have a term aggregation, but maybe there is an histogram inside
+    const term_buckets = aggregation.term_agg.buckets;
+    if (term_buckets.lenght == 0) {
+      return null;
+    }
+    if (term_buckets.length > 0 && "histo_agg" in term_buckets[0]) {
+      // we have a term+histo aggregation
+      const timestamps_set: Set<number> = new Set();
+      term_buckets.forEach((bucket: any) => bucket.histo_agg.buckets.forEach(
+        (entry: any) => timestamps_set.add(entry.key)
+      ));
+      const timestamps = [... timestamps_set];
+      timestamps.sort();
+
+      const data = term_buckets.map((bucket: any) => {
+        const histo_buckets = bucket.histo_agg.buckets;
+        const first_elem_key = histo_buckets[0].key;
+        const last_elem_key = histo_buckets[histo_buckets.length - 1].key;
+        const prefix_len = timestamps.indexOf(first_elem_key);
+        const suffix_len = timestamps.length - timestamps.indexOf(last_elem_key) - 1;
+        const value = Array(prefix_len).fill(0).concat(
+          histo_buckets.map(extract_value),
+          Array(suffix_len).fill(0),
+        );
+
+        return {name: bucket.key, value, }
+      })
+      return {
+        timestamps: timestamps.map((date) => new Date(date)),
+        data,
+      }
+    } else {
+      return term_buckets.map((bucket: any) => {
+        return {
+          term: bucket.key,
+          value: extract_value(bucket),
+        }
+      });
+    }
+  }
+  // we are in neither case??
+  return null;
 }
 
 export const EMPTY_SEARCH_REQUEST: SearchRequest = {
@@ -95,6 +188,12 @@ export const EMPTY_SEARCH_REQUEST: SearchRequest = {
   endTimestamp: null,
   maxHits: 100,
   sortByField: null,
+  aggregation: false,
+  aggregationConfig: {
+    metric: null,
+    term: null,
+    histogram: null,
+  },
 }
 
 export type ResponseError = {
@@ -107,6 +206,7 @@ export type SearchResponse = {
   hits: Array<RawDoc>;
   elapsed_time_micros: number;
   errors: Array<any> | undefined;
+  aggregations: any | undefined;
 }
 
 export type IndexConfig = {
diff --git a/quickwit/quickwit-ui/src/utils/urls.ts b/quickwit/quickwit-ui/src/utils/urls.ts
index 12f1993663c..cb8d5b5ab6c 100644
--- a/quickwit/quickwit-ui/src/utils/urls.ts
+++ b/quickwit/quickwit-ui/src/utils/urls.ts
@@ -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 { SearchRequest, SortByField, SortOrder } from "./models";
+import { SearchRequest, SortByField, SortOrder, Aggregation } from "./models";
 
 export function hasSearchParams(historySearch: string): boolean {
   const searchParams = new URLSearchParams(historySearch);
@@ -59,6 +59,8 @@ export function parseSearchUrl(historySearch: string): SearchRequest {
       sortByField = {field_name: sortByFieldParam, order: order};
     }
   }
+  const aggregationParam = searchParams.get("aggregation");
+  const aggregation = parseAggregation(aggregationParam);
   return {
     indexId: indexId,
     query: searchParams.get("query") || "",
@@ -66,9 +68,28 @@ export function parseSearchUrl(historySearch: string): SearchRequest {
     startTimestamp: startTimestamp,
     endTimestamp: endTimestamp,
     sortByField: sortByField,
+    aggregation: aggregationParam != null,
+    aggregationConfig: aggregation,
   };
 }
 
+function parseAggregation(param: string|null): Aggregation {
+  const empty: Aggregation = {
+    metric: null,
+    term: null,
+    histogram: null,
+  }
+  if (param !== null) {
+    try {
+      const aggregation: Aggregation = JSON.parse(param);
+      return aggregation;
+    } catch {
+      // ignore malformed param
+    }
+  }
+  return empty;
+}
+
 export function toUrlSearchRequestParams(request: SearchRequest): URLSearchParams {
   const params = new URLSearchParams();
   params.append("query", request.query || '*');
@@ -91,6 +112,15 @@ export function toUrlSearchRequestParams(request: SearchRequest): URLSearchParam
   if (request.sortByField) {
     params.append("sort_by_field", serializeSortByField(request.sortByField));
   }
+  if (request.aggregation) {
+    params.append("aggregation", JSON.stringify(request.aggregationConfig, (_, val) => {
+      if (val == null) {
+        return undefined;
+      } else {
+        return val;
+      }
+    }))
+  }
   return params;
 }
 
diff --git a/quickwit/quickwit-ui/src/views/SearchView.tsx b/quickwit/quickwit-ui/src/views/SearchView.tsx
index 9b7587a8520..840d2801a3d 100644
--- a/quickwit/quickwit-ui/src/views/SearchView.tsx
+++ b/quickwit/quickwit-ui/src/views/SearchView.tsx
@@ -24,6 +24,7 @@ import { IndexSideBar } from '../components/IndexSideBar';
 import { ViewUnderAppBarBox, FullBoxContainer } from '../components/LayoutUtils';
 import { QueryEditorActionBar } from '../components/QueryActionBar';
 import { QueryEditor } from '../components/QueryEditor/QueryEditor';
+import { AggregationEditor } from '../components/QueryEditor/AggregationEditor';
 import SearchResult from '../components/SearchResult/SearchResult';
 import { useLocalStorage } from '../providers/LocalStorageProvider';
 import { Client } from '../services/client';
@@ -70,7 +71,8 @@ function SearchView() {
     setQueryRunning(true);
     setSearchError(null);
     navigate('/search?' + toUrlSearchRequestParams(updatedSearchRequest).toString());
-    quickwitClient.search(updatedSearchRequest).then((response) => {
+    const timestamp_field = index?.metadata.index_config.doc_mapping.timestamp_field || null;
+    quickwitClient.search(updatedSearchRequest, timestamp_field).then((response) => {
       updateLastSearchRequest(updatedSearchRequest);
       setSearchResponse(response);
       setQueryRunning(false);
@@ -87,7 +89,6 @@ function SearchView() {
     });
   }
   const onSearchRequestUpdate = (searchRequest: SearchRequest) => {
-    console.log("on search request update:", searchRequest);
     setSearchRequest(searchRequest);
   }
   useEffect(() => {
@@ -140,6 +141,12 @@ function SearchView() {
               runSearch={runSearch}
               index={index}
               queryRunning={queryRunning} />
+            <AggregationEditor
+              searchRequest={searchRequest}
+              onSearchRequestUpdate={onSearchRequestUpdate}
+              runSearch={runSearch}
+              index={index}
+              queryRunning={queryRunning} />
             <SearchResult
               queryRunning={queryRunning}
               searchError={searchError}
diff --git a/quickwit/quickwit-ui/yarn.lock b/quickwit/quickwit-ui/yarn.lock
index 37adac61df0..7e0a066f6e2 100644
--- a/quickwit/quickwit-ui/yarn.lock
+++ b/quickwit/quickwit-ui/yarn.lock
@@ -1231,6 +1231,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.23.9", "@babel/runtime@^7.24.0":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c"
+  integrity sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
@@ -1661,6 +1668,33 @@
   resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.0.0.tgz#f22824caff3ae506b18207bad4126dbc6ccdb6b8"
   integrity sha512-JUFJad5lv7jxj926GPgymrWQxxjPYuJNiNjNMzqT+HiuP6Vl3dk5xzG+8sTX96np0ZAluvaMzPsjhHZ5rNuNQQ==
 
+"@floating-ui/core@^1.0.0":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.1.tgz#a4e6fef1b069cda533cbc7a4998c083a37f37573"
+  integrity sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==
+  dependencies:
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/dom@^1.0.0":
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.4.tgz#3a9d1f3b7ccdab89a4ca05713acc6204b1f67a29"
+  integrity sha512-0G8R+zOvQsAG1pg2Q99P21jiqxqGBW1iRe/iXHsBRBxnpXKFI8QwbB4x5KmYLggNO5m34IQgOIu9SCRfR/WWiQ==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/react-dom@^2.0.8":
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.9.tgz#264ba8b061000baa132b5910f0427a6acf7ad7ce"
+  integrity sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+
+"@floating-ui/utils@^0.2.0":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5"
+  integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==
+
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
@@ -2183,6 +2217,19 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
+"@mui/base@^5.0.0-beta.40":
+  version "5.0.0-beta.40"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.40.tgz#1f8a782f1fbf3f84a961e954c8176b187de3dae2"
+  integrity sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@floating-ui/react-dom" "^2.0.8"
+    "@mui/types" "^7.2.14"
+    "@mui/utils" "^5.15.14"
+    "@popperjs/core" "^2.11.8"
+    clsx "^2.1.0"
+    prop-types "^15.8.1"
+
 "@mui/core-downloads-tracker@^5.11.2":
   version "5.11.2"
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.2.tgz#0ff8066bee7e9654fd978cb671e9c12c9d2a65b7"
@@ -2236,6 +2283,15 @@
     "@mui/utils" "^5.11.2"
     prop-types "^15.8.1"
 
+"@mui/private-theming@^5.15.14":
+  version "5.15.14"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.14.tgz#edd9a82948ed01586a01c842eb89f0e3f68970ee"
+  integrity sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/utils" "^5.15.14"
+    prop-types "^15.8.1"
+
 "@mui/styled-engine@^5.11.0":
   version "5.11.0"
   resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.11.0.tgz#79afb30c612c7807c4b77602cf258526d3997c7b"
@@ -2246,6 +2302,16 @@
     csstype "^3.1.1"
     prop-types "^15.8.1"
 
+"@mui/styled-engine@^5.15.14":
+  version "5.15.14"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.14.tgz#168b154c4327fa4ccc1933a498331d53f61c0de2"
+  integrity sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@emotion/cache" "^11.11.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
 "@mui/system@^5.11.2":
   version "5.11.2"
   resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.11.2.tgz#a5a5865dda0f5f360eed8cdc1ab399a493dbd361"
@@ -2260,6 +2326,25 @@
     csstype "^3.1.1"
     prop-types "^15.8.1"
 
+"@mui/system@^5.15.14":
+  version "5.15.15"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.15.tgz#658771b200ce3c4a0f28e58169f02e5e718d1c53"
+  integrity sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/private-theming" "^5.15.14"
+    "@mui/styled-engine" "^5.15.14"
+    "@mui/types" "^7.2.14"
+    "@mui/utils" "^5.15.14"
+    clsx "^2.1.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.14":
+  version "7.2.14"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.14.tgz#8a02ac129b70f3d82f2f9b76ded2c8d48e3fc8c9"
+  integrity sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==
+
 "@mui/types@^7.2.3":
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.3.tgz#06faae1c0e2f3a31c86af6f28b3a4a42143670b9"
@@ -2276,6 +2361,35 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
+"@mui/utils@^5.15.14":
+  version "5.15.14"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.14.tgz#e414d7efd5db00bfdc875273a40c0a89112ade3a"
+  integrity sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@types/prop-types" "^15.7.11"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+
+"@mui/x-charts@^7.3.2":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@mui/x-charts/-/x-charts-7.3.2.tgz#90d711dfbb70cfbbb0e207f10e8532f3420774ed"
+  integrity sha512-620eMe83R0RDZk0S7ExYFRM2yZLlEOyIZmP5zwwVujZg54OC1fwLsk0tiaFaVZQOBKmeFOtyltDNPxr9e6itJQ==
+  dependencies:
+    "@babel/runtime" "^7.24.0"
+    "@mui/base" "^5.0.0-beta.40"
+    "@mui/system" "^5.15.14"
+    "@mui/utils" "^5.15.14"
+    "@react-spring/rafz" "^9.7.3"
+    "@react-spring/web" "^9.7.3"
+    clsx "^2.1.0"
+    d3-color "^3.1.0"
+    d3-delaunay "^6.0.4"
+    d3-interpolate "^3.0.1"
+    d3-scale "^4.0.2"
+    d3-shape "^3.2.0"
+    prop-types "^15.8.1"
+
 "@mui/x-date-pickers@^5.0.12":
   version "5.0.12"
   resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-5.0.12.tgz#f80e742aa8045b214f40a72e782fd871fb18ec89"
@@ -2342,6 +2456,55 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
   integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
 
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
+"@react-spring/animated@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.7.3.tgz#4211b1a6d48da0ff474a125e93c0f460ff816e0f"
+  integrity sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==
+  dependencies:
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/core@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.7.3.tgz#60056bcb397f2c4f371c6c9a5f882db77ae90095"
+  integrity sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/rafz@^9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.7.3.tgz#d6a9695c581f58a49e047ff7ed5646e0b681396c"
+  integrity sha512-9vzW1zJPcC4nS3aCV+GgcsK/WLaB520Iyvm55ARHfM5AuyBqycjvh1wbmWmgCyJuX4VPoWigzemq1CaaeRSHhQ==
+
+"@react-spring/shared@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.3.tgz#4cf29797847c689912aec4e62e34c99a4d5d9e53"
+  integrity sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==
+  dependencies:
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/types@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.7.3.tgz#ea78fd447cbc2612c1f5d55852e3c331e8172a0b"
+  integrity sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw==
+
+"@react-spring/web@^9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.7.3.tgz#d9f4e17fec259f1d65495a19502ada4f5b57fa3d"
+  integrity sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/core" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
 "@remix-run/router@1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.2.1.tgz#812edd4104a15a493dda1ccac0b352270d7a188c"
@@ -3440,6 +3603,11 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
+"@types/prop-types@^15.7.11":
+  version "15.7.12"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
+  integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
+
 "@types/q@^1.5.1":
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
@@ -4920,6 +5088,11 @@ clsx@^1.2.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
+clsx@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -5394,6 +5567,11 @@ csstype@^3.0.2, csstype@^3.1.1:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+csstype@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 cypress@13.3.2:
   version "13.3.2"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.3.2.tgz#b4baa64ce37d7874f6bdd8efbc28a9c722c0686f"
@@ -5443,6 +5621,74 @@ cypress@13.3.2:
     untildify "^4.0.0"
     yauzl "^2.10.0"
 
+"d3-array@2 - 3", "d3-array@2.10.0 - 3":
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
+  integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==
+  dependencies:
+    internmap "1 - 2"
+
+"d3-color@1 - 3", d3-color@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
+
+d3-delaunay@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.4.tgz#98169038733a0a5babbeda55054f795bb9e4a58b"
+  integrity sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==
+  dependencies:
+    delaunator "5"
+
+"d3-format@1 - 3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
+  integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
+
+"d3-interpolate@1.2.0 - 3", d3-interpolate@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+d3-path@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
+  integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==
+
+d3-scale@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
+  integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
+  dependencies:
+    d3-array "2.10.0 - 3"
+    d3-format "1 - 3"
+    d3-interpolate "1.2.0 - 3"
+    d3-time "2.1.1 - 3"
+    d3-time-format "2 - 4"
+
+d3-shape@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
+  integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==
+  dependencies:
+    d3-path "^3.1.0"
+
+"d3-time-format@2 - 4":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
+  integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
+  dependencies:
+    d3-time "1 - 3"
+
+"d3-time@1 - 3", "d3-time@2.1.1 - 3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
+  integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
+  dependencies:
+    d3-array "2 - 3"
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -5578,6 +5824,13 @@ defined@^1.0.0:
   resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.1.tgz#c0b9db27bfaffd95d6f61399419b893df0f91ebf"
   integrity sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==
 
+delaunator@5:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.0.1.tgz#39032b08053923e924d6094fe2cde1a99cc51278"
+  integrity sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==
+  dependencies:
+    robust-predicates "^3.0.2"
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -7267,6 +7520,11 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+"internmap@1 - 2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
+  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+
 invariant@^2.2.2:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -10946,6 +11204,11 @@ rimraf@^3.0.0, rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+robust-predicates@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
+  integrity sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==
+
 rollup-plugin-terser@^7.0.0:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"