diff --git a/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization-focused.tsx b/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization-focused.tsx
index 0a910531..d05ed2b9 100644
--- a/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization-focused.tsx
+++ b/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization-focused.tsx
@@ -35,7 +35,12 @@ export default function ComparativeSearchVisualizationFocused(props: Comparative
-
+ {/* TODO: implement onCustomDateSelect based on date selection approach chosen */}
+ {}}
+ />
diff --git a/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization.tsx b/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization.tsx
index 40d84ce1..2057bc49 100644
--- a/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization.tsx
+++ b/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization.tsx
@@ -9,6 +9,7 @@ import { calculateDateRange } from "@/shared/lib/utilities/date";
import CitationExplorerDivider from "../explorer/citation-explorer-divider";
import CitationExplorerSection from "../explorer/citation-explorer-section";
import CitationExplorerTitle from "../explorer/citation-explorer-title";
+import useCitationSearchParams from "@/features/citation/ui/use-citation-search-params";
interface ComparativeSearchVisualizationProps {
onClose: onEvent;
@@ -20,7 +21,8 @@ interface ComparativeSearchVisualizationProps {
export default function ComparativeSearchVisualization(props: ComparativeSearchVisualizationProps) {
const { onClose, region1, region2, regionType } = props;
- const [category, setCategory] = useState(getFirst(CitationDataCategories));
+ const citationSearchParams = useCitationSearchParams();
+ const [category, setCategory] = useState(citationSearchParams.category.get() || getFirst(CitationDataCategories));
const [dates, setDates] = useState(calculateDateRange(getFirst(RelativeDatePresets)));
const mockDatasets = [
@@ -38,6 +40,11 @@ export default function ComparativeSearchVisualization(props: ComparativeSearchV
setDates(calculateDateRange(preset));
};
+ const onCategorySelect = (value: string) => {
+ setCategory(value);
+ citationSearchParams.category.set(value);
+ };
+
return (
<>
Comparison Data
@@ -45,7 +52,13 @@ export default function ComparativeSearchVisualization(props: ComparativeSearchV
-
+ {}}
+ category={category}
+ />
diff --git a/packages/website/src/widgets/citation/ui/visualization/single-search-visualization.tsx b/packages/website/src/widgets/citation/ui/visualization/single-search-visualization.tsx
index be418b16..5f6c721b 100644
--- a/packages/website/src/widgets/citation/ui/visualization/single-search-visualization.tsx
+++ b/packages/website/src/widgets/citation/ui/visualization/single-search-visualization.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
import type { onEvent } from "@lucky-parking/typings";
import { formatToRangeString } from "@lucky-parking/utilities/dist/date";
import { getFirst } from "@lucky-parking/utilities/dist/enum";
@@ -12,6 +12,7 @@ import type { RegionType } from "@/features/geocoder";
import CitationExplorerDivider from "../explorer/citation-explorer-divider";
import CitationExplorerSection from "../explorer/citation-explorer-section";
import CitationExplorerSectionTitle from "../explorer/citation-explorer-section-title";
+import useCitationSearchParams from "@/features/citation/ui/use-citation-search-params";
interface SingleSearchVisualizationProps {
onClose: onEvent;
@@ -22,13 +23,56 @@ interface SingleSearchVisualizationProps {
export default function SingleSearchVisualization(props: SingleSearchVisualizationProps) {
const { onClose, region, regionType } = props;
- const [category, setCategory] = useState(getFirst(CitationDataCategories));
- const [dates, setDates] = useState(calculateDateRange(getFirst(RelativeDatePresets)));
+ const citationSearchParams = useCitationSearchParams();
+ const hasSavedDateRange = citationSearchParams.dateRange.get() !== null;
+ const [category, setCategory] = useState(citationSearchParams.category.get() || getFirst(CitationDataCategories));
+ const [datePreset, setDatePreset] = useState(citationSearchParams.datePreset.get() || getFirst(RelativeDatePresets));
+ const [dateRange, setDateRange] = useState(
+ citationSearchParams.dateRange.get() || calculateDateRange(datePreset),
+ );
+ const [customDateFromInput, setCustomDateFromInput] = useState(hasSavedDateRange ? dateRange[0] : null);
+ const [customDateToInput, setCustomDateToInput] = useState(hasSavedDateRange ? dateRange[1] : null);
+ const [customDateToggle, setCustomDateToggle] = useState(false);
const onDatePresetSelect = (preset: RelativeDatePresets) => {
- setDates(calculateDateRange(preset));
+ setCustomDateToggle(false);
+ setCustomDateFromInput(null);
+ setCustomDateToInput(null);
+
+ setDateRange(calculateDateRange(preset));
+ setDatePreset(preset);
+ citationSearchParams.dateRange.set(preset);
+ };
+
+ const onCategorySelect = (value: string) => {
+ setCategory(value);
+ citationSearchParams.category.set(value);
+ };
+
+ const onCustomDateSelect = (value: { id: string; date: Date }) => {
+ if (value.id === "From") {
+ setCustomDateFromInput(value.date);
+ }
+ if (value.id === "To") {
+ setCustomDateToInput(value.date);
+ }
};
+ useEffect(() => {
+ if (customDateFromInput && customDateToInput) {
+ setCustomDateToggle(true);
+ }
+ }, [customDateFromInput, customDateToInput]);
+
+ useEffect(() => {
+ if (customDateToggle && customDateFromInput && customDateToInput) {
+ const a = new Date(customDateFromInput);
+ const b = new Date(customDateToInput);
+ setDateRange([a, b]);
+ citationSearchParams.dateRange.set([a, b]);
+ }
+ }, [customDateToggle, customDateFromInput, customDateToInput]);
+
const mockDataset = [{ data: [] }];
return (
@@ -47,7 +91,15 @@ export default function SingleSearchVisualization(props: SingleSearchVisualizati
-
+
@@ -56,7 +108,7 @@ export default function SingleSearchVisualization(props: SingleSearchVisualizati
{}}
stat="112,338"
title={region.place_name}
diff --git a/packages/website/src/widgets/header/header.tsx b/packages/website/src/widgets/header/header.tsx
index 280521fd..729ac03c 100644
--- a/packages/website/src/widgets/header/header.tsx
+++ b/packages/website/src/widgets/header/header.tsx
@@ -2,14 +2,22 @@ import { Link } from "react-router-dom";
import { Logo } from "@/entities/branding";
import { PATHS } from "@/entities/navigation";
import HowItWorksButton from "@/features/instructions/how-it-works-button";
+import useCitationSearchParams from "@/features/citation/ui/use-citation-search-params";
export default function Header() {
+ const citationSearchParams = useCitationSearchParams();
+
+ const handleLogoClick = () => {
+ citationSearchParams.clearSearchParams();
+ window.location.reload();
+ };
+
return (
{/* Branding */}
-
+
{/* Description */}