Range picker histograms

The only GUI filter component that does not have any statistics is currently the range/date picker. For these we could show a histogram above the range that would dynamically update according to the current query.

Tasks:

• Merge InputSlider and InputDateRange into one component: InputRange.
• Create custom plotting tools that are needed for the histogram. These histograms are highly dynamic and customized, which makes plotly a bad choice for this task. d3-js is also a bit of a poor choice: it is hard to break into reusable and testable components, and mixing MUI componets with SVG is a bit of a mess. The plot components should instead be implemented by using meaningful react components:
  • PlotAxis.js: Used to create plot axes.
  • PlotLabel.js: Represents the labels shown within axes.
  • PlotTick.js: Represents the ticks shown for axis labels.
  • PlotBar.js: Represents a single bar within a bar plot.
  • PloHistogram.js: Histogram plot.
• Add support for discretized histograms: values that are discretized (e.g. integer numbers, n_elements) require a completely different histogram mode where each bar represents a single discrete value, and the label for that value is shown at the center of the bin. The histograms are built using the discrete step as a binning interval.
• Add support for continuous histograms: values that are continuous (e.g. floating-point numbers, band_gap.value) require a 'regular' histogram mode where the continuous range is split into a fixed number of buckets and labels do not have to be connected to bins.
• Add support for timestamp histograms: the min/max fields use KeyboardDateTimePicker instead of a simple text field.
• Create function getTicks() in plotting/common.js for automatically determining meaningful, human-readable ticks for a given interval, with a specific dtype and using the given spacing as a hard max limit. d3-scale has utilities for this, but unfortunately, they can produce overlapping ticks, as the returned number of ticks can be larger than the requested number of ticks. Creating meaningful ticks for timestamps is especially tricky, but date-fns has some great utilities for this.
• Add API support for building histograms with a fixed number of buckets.
  • API first determines the range with min_max aggregation.
  • The interval is calculated by dividing the range into the requested number of buckets. For floating point numbers the interval needs to be increased slightly in order to avoid 'extra' buckets due to floating point inaccuracies. The interval for integer fields needs to be rounded to the next largest integer in order to procuce an interval that captures all values and provides meaningful buckets. If the range is zero (min = max), we simply return one bucket with the only value, and the interval is not reported in the API response.
• Add API support for extended_bounds (an ES feature for histograms): This allows the GUI to request a custom histogram interval (e.g. whenever users specify a range that is outside the min/max range of that field for the specified query). These extended bounds also need to be take into account when calculating the interval.
• Add support for switching between simple and advanced mode: simple mode uses min/max InputText fields and a single Slider: bounds are determined with a min_max aggregation. The advanced mode additionally displays the interactive histogram which is built using a histogram aggregation.
• Add SearchContext/FilterRegistry support for specifying several different types of aggregations per filter: InputRange needs to use both min_max + histogram aggregations for a single filter.