Add time range selection

[jackpf]

Relates to #64

Adds time range filtering for location data.

##TODO

• Move time picker to map component?
• Implement backend filters

[gemini-code-assist]

Summary of Changes

Hello @jackpf, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on enhancing the user interface by adding a time range selection feature for location data. It introduces a new UI component that allows users to pick from various predefined time intervals, laying the groundwork for filtering displayed information. The implementation leverages the Ant Design library for a modern look and feel, and includes a utility for precise date calculations. While the UI is now present, the actual data filtering logic on the backend is noted as a subsequent task.

Highlights

• Time Range Selection UI: Introduced a new TimeRangeSelector component, utilizing Ant Design's Select component, to allow users to choose predefined time ranges for data filtering.
• Ant Design Integration: The Ant Design UI library and its associated dependencies (antd, @ant-design/colors, @ant-design/cssinjs, etc.) have been added to the project's frontend, enabling the use of rich UI components.
• Time Range Utility: A new utility file (time-range-options.ts) was added to define TimeRangeOption enumerations and provide a helper function (getTimeRangeParams) for calculating start and end dayjs objects based on the selected time range.
• Dashboard Integration: The TimeRangeSelector component has been integrated into the main App.tsx dashboard, positioned at the top right, with a placeholder handleRangeChange function for future backend integration.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a time range selection feature, allowing users to filter location data. The changes include adding the antd library for UI components, creating a new TimeRangeSelector component, and defining utility functions for time ranges. My review focuses on improving the implementation of the new component by properly managing its state, enhancing code structure for better maintainability, and adding robustness to the utility functions. I've also suggested moving inline styles to a CSS file to adhere to best practices. All comments were retained as they do not contradict the provided rule.

[gemini-code-assist]

The handleRangeChange function parameter x is untyped. For better type safety, it should be typed as TimeRangeOption.

Additionally, for the TimeRangeSelector to be a controlled component that reflects the user's selection, its value should be managed by a state variable. The current implementation uses a hardcoded value.

Here's a suggestion on how to implement this:

1. Add a state for the time range in your Dashboard component:

   const [timeRange, setTimeRange] = useState<TimeRangeOption>(TimeRangeOption.LAST_7_DAYS);

2. Update handleRangeChange to set the new state:

   const handleRangeChange = (newRange: TimeRangeOption) => {
       console.log("Fetching data from", newRange);
       setTimeRange(newRange);
       // const { start, end } = getTimeRangeParams(newRange);
       // refreshMapData(start, end);
   };

3. Pass the state value and handler to TimeRangeSelector:

   <TimeRangeSelector onChange={handleRangeChange} value={timeRange} />

Suggested change

	const handleRangeChange = (x) => {
	console.log("Fetching data from", x);
	// refreshMapData(start, end);
	};
	const handleRangeChange = (value: TimeRangeOption) => {
	console.log("Fetching data from", value);
	// refreshMapData(start, end);
	};

[gemini-code-assist]

The default case in this switch statement currently falls back to '1 hour'. This can hide potential bugs if a new TimeRangeOption is added to the enum but not handled in the switch. It's safer to throw an error for unhandled cases to make such omissions obvious during development.

Suggested change

	default: return { start: now.subtract(1, 'hour'), end: now };
	default: throw new Error(`Unhandled time range option: ${option}`);

[gemini-code-assist]

Using inline styles for positioning can make the component less maintainable and reusable. It's a good practice to extract these styles into a CSS class in your App.css file.

You can then add the following to App.css:

.time-range-selector-container {
  position: absolute;
  right: 200px;
  top: 20px;
  z-index: 1000;
}

Suggested change

	<div style={{position: 'absolute', right: 200, top: 20, zIndex: 1000}}>
	<div className="time-range-selector-container">

[gemini-code-assist]

To better organize your code and centralize configurations, consider moving the PRESETS array to ui/src/utils/time-range-options.ts. This keeps all definitions related to time ranges in a single file, improving modularity and maintainability.

[gemini-code-assist]

The props destructuring is formatted across multiple lines, which can be less readable for a small number of props. A more conventional approach is to place them on a single line for improved clarity.

export const TimeRangeSelector: React.FC<TimeRangeSelectorProps> = ({ value, onChange }) => {