From 247a0092d5a41fbdb9ce1bedf647e6f03c735faf Mon Sep 17 00:00:00 2001
From: Daiyi Yang <daiyi@dsensei.app>
Date: Fri, 29 Sep 2023 09:10:46 -0700
Subject: [PATCH] Add date range picker in the sidebar report config

---
 .../main-dashboard/MainDashboard.tsx          | 75 ++++++++++---------
 .../main-dashboard/SidebarReportConfig.tsx    | 66 +++++++++++++++-
 .../src/components/uploader/DatePicker.tsx    | 33 +++++++-
 .../BigqueryBasedReportConfig.tsx             |  8 +-
 .../report-config/CSVBasedReportConfig.tsx    | 30 ++++----
 .../uploader/report-config/ReportConfig.tsx   | 49 +++++++-----
 frontend/src/types/report-config.ts           |  7 ++
 7 files changed, 189 insertions(+), 79 deletions(-)

diff --git a/frontend/src/components/main-dashboard/MainDashboard.tsx b/frontend/src/components/main-dashboard/MainDashboard.tsx
index b02a6a8..e63e50c 100644
--- a/frontend/src/components/main-dashboard/MainDashboard.tsx
+++ b/frontend/src/components/main-dashboard/MainDashboard.tsx
@@ -7,7 +7,6 @@ import {
 import {
   Bold,
   Card,
-  DateRangePickerValue,
   Divider,
   Flex,
   Grid,
@@ -43,7 +42,12 @@ import {
   updateMetrics,
 } from "../../store/comparisonInsight";
 import { DataSourceType, Schema } from "../../types/data-source";
-import { MetricColumn, TargetDirection } from "../../types/report-config";
+import {
+  DateRangeRelatedData,
+  MetricColumn,
+  TargetDirection,
+} from "../../types/report-config";
+import { DateRangeData } from "../uploader/DatePicker";
 import { MetricOverviewTable } from "./MetricOverviewTable";
 import { SidebarReportConfig } from "./SidebarReportConfig";
 import TopDimensionSlicesTable from "./TopDimensionSlicesTable";
@@ -58,8 +62,7 @@ enum ReportingType {
 interface RouterState {
   tableName?: string;
   fileId?: string;
-  baseDateRange: DateRangePickerValue;
-  comparisonDateRange: DateRangePickerValue;
+  dateRangeData: DateRangeRelatedData;
   metricColumn: MetricColumn;
   dateColumn: string;
   dateColumnType: string;
@@ -85,8 +88,7 @@ export default function MainDashboard() {
   const {
     tableName,
     fileId,
-    baseDateRange,
-    comparisonDateRange,
+    dateRangeData,
     metricColumn,
     dateColumn,
     dateColumnType,
@@ -131,8 +133,8 @@ export default function MainDashboard() {
       }>(apiPath, {
         tableName,
         fileId,
-        baseDateRange,
-        comparisonDateRange,
+        baseDateRange: dateRangeData.baseDateRangeData.range,
+        comparisonDateRange: dateRangeData.comparisonDateRangeData.range,
         dateColumn,
         dateColumnType,
         metricColumn,
@@ -154,7 +156,7 @@ export default function MainDashboard() {
       dispatch(setError(e.error));
       dispatch(setLoadingStatus(false));
     });
-  }, [baseDateRange, comparisonDateRange, fileId, dispatch]);
+  }, [dateRangeData, fileId, dispatch]);
 
   function renderSidebar() {
     let reportMenuElements: ReactElement[] = [];
@@ -215,6 +217,8 @@ export default function MainDashboard() {
             schema={schema}
             filters={filters}
             key="report-config"
+            dateColumn={dateColumn}
+            dateRangeData={dateRangeData}
             allDimensions={schema.fields
               .map((h) => h.name)
               .filter(
@@ -236,7 +240,12 @@ export default function MainDashboard() {
                 );
               })}
             dimensions={groupByColumns}
-            onSubmit={(newFilters: Filter[], newDimensions: string[]) => {
+            onSubmit={(
+              newFilters: Filter[],
+              newDimensions: string[],
+              newBaseDateRangeData: DateRangeData,
+              newComparisonDateRangeData: DateRangeData
+            ) => {
               navigate("/dashboard", {
                 state: {
                   schema,
@@ -248,8 +257,11 @@ export default function MainDashboard() {
                   dateColumn,
                   dateColumnType,
                   groupByColumns: newDimensions,
-                  baseDateRange,
-                  comparisonDateRange,
+                  dateRangeData: {
+                    baseDateRangeData: newBaseDateRangeData,
+                    comparisonDateRangeData: newComparisonDateRangeData,
+                    rowCountByDateColumn: dateRangeData.rowCountByDateColumn,
+                  },
                   targetDirection,
                   expectedValue,
                   filters: newFilters,
@@ -364,8 +376,7 @@ export default function MainDashboard() {
           dateColumn,
           dateColumnType,
           groupByColumns,
-          baseDateRange,
-          comparisonDateRange,
+          dateRangeData,
           targetDirection,
           expectedValue,
           filters: newFilters,
@@ -562,26 +573,18 @@ export default function MainDashboard() {
           <Flex className="gap-y-4 pt-10" flexDirection="col">
             <Title>Top Segments Driving the Overall Change</Title>
             <Divider />
-            {Object.keys(tableRowStatus).length > 0 ? (
-              <TopDimensionSlicesTable
-                rowStatusMap={tableRowStatus}
-                rowCSV={tableRowCSV}
-                metric={analyzingMetrics}
-                maxDefaultRows={100}
-                groupRows={groupRows}
-                enableGroupToggle={true}
-                showDimensionSelector={true}
-                showCalculationMode={true}
-                targetDirection={targetDirection}
-                onReRunOnSegment={onReRunOnSegment}
-              />
-            ) : (
-              <Flex>
-                Unable to identify any significant driving segments. Either the
-                size of the data set is too small or the variations across all
-                segments are highly consistent.
-              </Flex>
-            )}
+            <TopDimensionSlicesTable
+              rowStatusMap={tableRowStatus}
+              rowCSV={tableRowCSV}
+              metric={analyzingMetrics}
+              maxDefaultRows={100}
+              groupRows={groupRows}
+              enableGroupToggle={true}
+              showDimensionSelector={true}
+              showCalculationMode={true}
+              targetDirection={targetDirection}
+              onReRunOnSegment={onReRunOnSegment}
+            />
           </Flex>
         )}
         {/* <WaterfallPanel
@@ -625,8 +628,8 @@ export default function MainDashboard() {
           dateColumn={dateColumn}
           groupByColumns={groupByColumns}
           metricColumn={metricColumn}
-          baseDateRange={baseDateRange}
-          comparisonDateRange={comparisonDateRange}
+          baseDateRange={dateRangeData.baseDateRangeData.range}
+          comparisonDateRange={dateRangeData.comparisonDateRangeData.range}
           dataSourceType={dataSourceType}
         />
       </>
diff --git a/frontend/src/components/main-dashboard/SidebarReportConfig.tsx b/frontend/src/components/main-dashboard/SidebarReportConfig.tsx
index 91b5377..3337f8f 100644
--- a/frontend/src/components/main-dashboard/SidebarReportConfig.tsx
+++ b/frontend/src/components/main-dashboard/SidebarReportConfig.tsx
@@ -2,10 +2,12 @@ import { Button, Flex, Text } from "@tremor/react";
 import { useRef, useState } from "react";
 import { Filter } from "../../common/types";
 import { Schema } from "../../types/data-source";
+import { DateRangeRelatedData } from "../../types/report-config";
 import {
   FiltersDropDown,
   FiltersDropDownHandler,
 } from "../common/FiltersDropdown";
+import DatePicker, { DateRangeData } from "../uploader/DatePicker";
 import MultiSelector, { MultiSelectorHandles } from "../uploader/MultiSelector";
 
 interface Props {
@@ -13,7 +15,14 @@ interface Props {
   schema: Schema;
   dimensions: string[];
   filters: Filter[];
-  onSubmit: (newFilters: Filter[], newDimensions: string[]) => void;
+  dateColumn: string;
+  dateRangeData: DateRangeRelatedData;
+  onSubmit: (
+    newFilters: Filter[],
+    newDimensions: string[],
+    newBaseDateRangeData: DateRangeData,
+    newComparisonDateRangeData: DateRangeData
+  ) => void;
 }
 
 export function SidebarReportConfig({
@@ -21,10 +30,16 @@ export function SidebarReportConfig({
   schema,
   dimensions,
   filters,
+  dateColumn,
+  dateRangeData,
   onSubmit,
 }: Props) {
   const [localFilters, setLocalFilters] = useState<Filter[]>(filters);
   const [localDimensions, setLocalDimensions] = useState<string[]>(dimensions);
+  const [localBaseDateRangeData, setLocalBaseDateRangeData] =
+    useState<DateRangeData>(dateRangeData.baseDateRangeData);
+  const [localComparisonDateRangeData, setLocalComparisonDateRangeData] =
+    useState<DateRangeData>(dateRangeData.comparisonDateRangeData);
 
   const dimensionSelectorRef = useRef<MultiSelectorHandles | null>(null);
   const filtersDropDownRef = useRef<FiltersDropDownHandler | null>(null);
@@ -48,7 +63,24 @@ export function SidebarReportConfig({
         )
       );
 
-    return hasChangeInDimensions || hasChangeInFilters;
+    const hasChangeInBaseDateRange =
+      dateRangeData.baseDateRangeData.range.from !==
+        localBaseDateRangeData.range.from ||
+      dateRangeData.baseDateRangeData.range.to !==
+        localBaseDateRangeData.range.to;
+
+    const hasChangeInComparisonDateRange =
+      dateRangeData.comparisonDateRangeData.range.from !==
+        localComparisonDateRangeData.range.from ||
+      dateRangeData.comparisonDateRangeData.range.to !==
+        localComparisonDateRangeData.range.to;
+
+    return (
+      hasChangeInDimensions ||
+      hasChangeInFilters ||
+      hasChangeInBaseDateRange ||
+      hasChangeInComparisonDateRange
+    );
   }
   return (
     <>
@@ -59,6 +91,23 @@ export function SidebarReportConfig({
         className="gap-y-2 p-2"
       >
         <p>Report Config</p>
+        <DatePicker
+          title={null}
+          countByDate={
+            dateRangeData.rowCountByDateColumn
+              ? dateRangeData.rowCountByDateColumn[dateColumn]
+              : {}
+          }
+          comparisonDateRangeData={localComparisonDateRangeData}
+          setComparisonDateRangeData={(dateRangeData) =>
+            setLocalComparisonDateRangeData(dateRangeData)
+          }
+          baseDateRangeData={localBaseDateRangeData}
+          setBaseDateRangeData={(dateRangeData) =>
+            setLocalBaseDateRangeData(dateRangeData)
+          }
+          isOnSideBar={true}
+        />
         <Text>Dimensions</Text>
         <MultiSelector
           includeSelectAll={true}
@@ -83,7 +132,14 @@ export function SidebarReportConfig({
         <Flex justifyContent="end" className="gap-1">
           <Button
             disabled={!hasLocalChange() || localDimensions.length === 0}
-            onClick={() => onSubmit(localFilters, localDimensions)}
+            onClick={() =>
+              onSubmit(
+                localFilters,
+                localDimensions,
+                localBaseDateRangeData,
+                localComparisonDateRangeData
+              )
+            }
           >
             Rerun
           </Button>
@@ -93,6 +149,10 @@ export function SidebarReportConfig({
             onClick={() => {
               setLocalDimensions(dimensions);
               setLocalFilters(filters);
+              setLocalBaseDateRangeData(dateRangeData.baseDateRangeData);
+              setLocalComparisonDateRangeData(
+                dateRangeData.comparisonDateRangeData
+              );
 
               dimensionSelectorRef.current?.reset(dimensions);
               filtersDropDownRef.current?.reset(filters);
diff --git a/frontend/src/components/uploader/DatePicker.tsx b/frontend/src/components/uploader/DatePicker.tsx
index 7829c0d..df49530 100644
--- a/frontend/src/components/uploader/DatePicker.tsx
+++ b/frontend/src/components/uploader/DatePicker.tsx
@@ -32,6 +32,7 @@ type DatePickerProps = {
   };
   defaultBaseDateRange?: DateRangePickerValue;
   defaultComparisonDateRange?: DateRangePickerValue;
+  isOnSideBar?: boolean;
 };
 
 type BaseDateMode = "previous" | "custom";
@@ -40,7 +41,6 @@ const oneDayMs = 24 * 60 * 60 * 1000;
 
 function DatePicker({
   title,
-
   comparisonDateRangeData,
   setComparisonDateRangeData,
   baseDateRangeData,
@@ -48,6 +48,7 @@ function DatePicker({
   countByDate,
   defaultBaseDateRange,
   defaultComparisonDateRange,
+  isOnSideBar,
 }: DatePickerProps) {
   useEffect(() => {
     if (defaultBaseDateRange) {
@@ -202,6 +203,36 @@ function DatePicker({
     );
   }
 
+  if (isOnSideBar) {
+    return (
+      <>
+        <Flex justifyContent="start">
+          <Text>Date Range</Text>
+        </Flex>
+        <DateRangePicker
+          className="max-w-full"
+          value={comparisonDateRangeData.range}
+          onValueChange={onComparisonDateRangeChange}
+          enableSelect={false}
+          minDate={minDate}
+          maxDate={maxDate}
+          placeholder={"Comparison Date range"}
+        />
+        <Flex justifyContent="start">
+          <Text>Comparison Date Range</Text>
+        </Flex>
+        <DateRangePicker
+          value={baseDateRangeData.range}
+          onValueChange={onBaseDateRangeChange}
+          enableSelect={false}
+          minDate={minDate}
+          maxDate={maxDate}
+          placeholder={"Base Date range"}
+        />
+      </>
+    );
+  }
+
   return (
     <Grid numItems={5}>
       <Col className="flex items-center justify-end" numColSpan={2}>
diff --git a/frontend/src/components/uploader/report-config/BigqueryBasedReportConfig.tsx b/frontend/src/components/uploader/report-config/BigqueryBasedReportConfig.tsx
index 4c07da0..b2444a5 100644
--- a/frontend/src/components/uploader/report-config/BigqueryBasedReportConfig.tsx
+++ b/frontend/src/components/uploader/report-config/BigqueryBasedReportConfig.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { BigquerySchema } from "../../../types/data-source";
 import {
-  DateRangeConfig,
+  DateRangeRelatedData,
   MetricColumn,
   TargetDirection,
 } from "../../../types/report-config";
@@ -23,8 +23,7 @@ export default function BigqueryBasedReportConfig({ schema }: Props) {
     dateColumnType: string,
     metricColumn: MetricColumn,
     groupByColumns: string[],
-    baseDateRange: DateRangeConfig,
-    comparisonDateRange: DateRangeConfig,
+    dateRangeData: DateRangeRelatedData,
     targetDirection: TargetDirection,
     expectedValue: number
   ) => {
@@ -38,8 +37,7 @@ export default function BigqueryBasedReportConfig({ schema }: Props) {
         dateColumn,
         dateColumnType,
         groupByColumns,
-        baseDateRange,
-        comparisonDateRange,
+        dateRangeData,
         targetDirection,
         expectedValue,
         filters: [],
diff --git a/frontend/src/components/uploader/report-config/CSVBasedReportConfig.tsx b/frontend/src/components/uploader/report-config/CSVBasedReportConfig.tsx
index 70c0ada..c366b6a 100644
--- a/frontend/src/components/uploader/report-config/CSVBasedReportConfig.tsx
+++ b/frontend/src/components/uploader/report-config/CSVBasedReportConfig.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { createNewDateWithBrowserTimeZone } from "../../../common/utils";
 import { CSVSchema, DateField } from "../../../types/data-source";
 import {
-  DateRangeConfig,
+  DateRangeRelatedData,
   MetricColumn,
   PrefillConfig,
   RowCountByDateAndColumn,
@@ -50,7 +50,7 @@ const doorDashPrefills: PrefillConfig = {
         filter: {
           column: "order_status",
           value: "canceled",
-        }
+        },
       },
       denominator: {
         aggregationMethod: "nunique",
@@ -58,7 +58,7 @@ const doorDashPrefills: PrefillConfig = {
       },
     },
   },
-  dateColumn: 'order_date',
+  dateColumn: "order_date",
   groupByColumns: [
     "order_canceled_by",
     "age_group",
@@ -73,7 +73,7 @@ const doorDashPrefills: PrefillConfig = {
     "channel",
     "hour_of_the_day",
     "promo_code",
-    "payment_method"
+    "payment_method",
   ],
   baseDateRange: {
     from: createNewDateWithBrowserTimeZone("2023-08-14"),
@@ -83,14 +83,14 @@ const doorDashPrefills: PrefillConfig = {
     from: createNewDateWithBrowserTimeZone("2023-08-21"),
     to: createNewDateWithBrowserTimeZone("2023-08-27"),
   },
-}
+};
 
 const insurancePrefills: PrefillConfig = {
   metricColumn: {
     aggregationOption: "sum",
     singularMetric: {
       columnName: "total_claim_amount",
-    }
+    },
   },
   groupByColumns: [
     "age_group",
@@ -107,9 +107,9 @@ const insurancePrefills: PrefillConfig = {
     "incident_city",
     "property_damage",
     "police_report_available",
-    "authorities_contacted"
+    "authorities_contacted",
   ],
-  dateColumn: 'incident_date',
+  dateColumn: "incident_date",
   baseDateRange: {
     from: createNewDateWithBrowserTimeZone("2023-07-04"),
     to: createNewDateWithBrowserTimeZone("2023-07-31"),
@@ -118,7 +118,7 @@ const insurancePrefills: PrefillConfig = {
     from: createNewDateWithBrowserTimeZone("2023-08-01"),
     to: createNewDateWithBrowserTimeZone("2023-08-28"),
   },
-}
+};
 
 interface Props {
   schema: CSVSchema;
@@ -137,7 +137,9 @@ export default function CSVBasedReportConfig({
   const [rowCountByColumn, setRowCountByColumn] = useState<{
     [key: string]: number;
   }>({});
-  const [prefillConfig, setPrefillConfig] = useState<PrefillConfig | undefined>(undefined);
+  const [prefillConfig, setPrefillConfig] = useState<PrefillConfig | undefined>(
+    undefined
+  );
 
   const prefill = (sample: "doordash" | "insurance") => {
     if (sample === "doordash") {
@@ -145,7 +147,7 @@ export default function CSVBasedReportConfig({
     } else if (sample === "insurance") {
       setPrefillConfig(insurancePrefills);
     }
-  }
+  };
 
   useEffect(() => {
     if (prefillWithSampleData) {
@@ -184,8 +186,7 @@ export default function CSVBasedReportConfig({
     dateColumnType: string,
     metricColumn: MetricColumn,
     groupByColumns: string[],
-    baseDateRange: DateRangeConfig,
-    comparisonDateRange: DateRangeConfig,
+    dateRangeData: DateRangeRelatedData,
     targetDirection: TargetDirection,
     expectedValue: number
   ) => {
@@ -199,8 +200,7 @@ export default function CSVBasedReportConfig({
         dateColumnType,
         groupByColumns,
         metricColumn,
-        baseDateRange,
-        comparisonDateRange,
+        dateRangeData,
         targetDirection,
         expectedValue,
         filters: [],
diff --git a/frontend/src/components/uploader/report-config/ReportConfig.tsx b/frontend/src/components/uploader/report-config/ReportConfig.tsx
index f274f0f..a35abcd 100644
--- a/frontend/src/components/uploader/report-config/ReportConfig.tsx
+++ b/frontend/src/components/uploader/report-config/ReportConfig.tsx
@@ -15,7 +15,7 @@ import { getServerData } from "../../../common/server-data/server-data-loader";
 import { useTracking } from "../../../common/tracking";
 import { DataSourceType, Schema } from "../../../types/data-source";
 import {
-  DateRangeConfig,
+  DateRangeRelatedData,
   MetricColumn,
   PrefillConfig,
   RowCountByColumn,
@@ -40,8 +40,7 @@ type Props = {
     dateColumnType: string,
     metricColumn: MetricColumn,
     groupByColumns: string[],
-    baseDateRange: DateRangeConfig,
-    comparisonDateRange: DateRangeConfig,
+    dateRangeData: DateRangeRelatedData,
     targetDirection: TargetDirection,
     expectedValue: number
   ) => Promise<void>;
@@ -226,22 +225,31 @@ function ReportConfig({
   return (
     <Card className="max-w-6xl mx-auto">
       <Title>Report Config</Title>
-      {
-        debugMode && (
-          <Flex
-            flexDirection="row"
-            justifyContent="center"
-            alignItems="start"
-            className="gap-y-2 p-2 gap-4"
+      {debugMode && (
+        <Flex
+          flexDirection="row"
+          justifyContent="center"
+          alignItems="start"
+          className="gap-y-2 p-2 gap-4"
+        >
+          <Button
+            className="mb-4"
+            onClick={() => {
+              prefill("doordash");
+            }}
           >
-            <Button className="mb-4" onClick={() => { prefill("doordash") }} >
-              Doordash
-            </Button>
+            Doordash
+          </Button>
 
-            <Button className="mb-4" onClick={() => { prefill("insurance") }} >
-              Insurance
-            </Button>
-          </Flex>
+          <Button
+            className="mb-4"
+            onClick={() => {
+              prefill("insurance");
+            }}
+          >
+            Insurance
+          </Button>
+        </Flex>
       )}
 
       <Divider />
@@ -353,8 +361,11 @@ function ReportConfig({
               dateColumnType,
               metricColumn,
               groupByColumns,
-              baseDateRangeData.range,
-              comparisonDateRangeData.range,
+              {
+                baseDateRangeData,
+                comparisonDateRangeData,
+                rowCountByDateColumn,
+              },
               targetDirection,
               expectedValue ?? 0
             );
diff --git a/frontend/src/types/report-config.ts b/frontend/src/types/report-config.ts
index e9a2763..41a6cc8 100644
--- a/frontend/src/types/report-config.ts
+++ b/frontend/src/types/report-config.ts
@@ -1,4 +1,5 @@
 import { DateRangePickerValue } from "@tremor/react";
+import { DateRangeData } from "../components/uploader/DatePicker";
 import { FieldType } from "./data-source";
 
 export type ColumnType = "metric" | "supporting_metric" | "dimension" | "date";
@@ -55,3 +56,9 @@ export interface PrefillConfig {
   baseDateRange: DateRangePickerValue;
   comparisonDateRange: DateRangePickerValue;
 }
+
+export interface DateRangeRelatedData {
+  baseDateRangeData: DateRangeData;
+  comparisonDateRangeData: DateRangeData;
+  rowCountByDateColumn?: RowCountByDateAndColumn;
+}