web: ui improvements for report edit mode

apps/web/package.json

@@ -40,6 +40,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
+    "lottie-react": "^2.4.0",
     "lucide-react": "^0.286.0",
     "mitt": "^3.0.1",
     "next": "13.4",

apps/web/src/components/report/ReportSaveButton.tsx

@@ -1,6 +1,5 @@
 import { Button } from '@/components/ui/button';
 import { toast } from '@/components/ui/use-toast';
-import { useOrganizationParams } from '@/hooks/useOrganizationParams';
 import { pushModal } from '@/modals';
 import { useSelector } from '@/redux';
 import { api, handleError } from '@/utils/api';
@@ -9,7 +8,6 @@ import { SaveIcon } from 'lucide-react';
 import { useReportId } from './hooks/useReportId';
 
 export function ReportSaveButton() {
-  const params = useOrganizationParams();
   const { reportId } = useReportId();
   const update = api.report.update.useMutation({
     onSuccess() {
@@ -25,6 +23,7 @@ export function ReportSaveButton() {
   if (reportId) {
     return (
       <Button
+        disabled={!report.dirty}
         loading={update.isLoading}
         onClick={() => {
           update.mutate({
@@ -40,6 +39,7 @@ export function ReportSaveButton() {
   } else {
     return (
       <Button
+        disabled={!report.dirty}
         onClick={() => {
           pushModal('SaveReport', {
             report,

apps/web/src/components/report/chart/ChartAnimation.tsx

@@ -0,0 +1,17 @@
+import airplane from '@/lottie/airplane.json';
+import ballon from '@/lottie/ballon.json';
+import type { LottieComponentProps } from 'lottie-react';
+import Lottie from 'lottie-react';
+
+const animations = {
+  airplane,
+  ballon,
+};
+type Animations = keyof typeof animations;
+
+export const ChartAnimation = ({
+  name,
+  ...props
+}: Omit<LottieComponentProps, 'animationData'> & {
+  name: Animations;
+}) => <Lottie animationData={animations[name]} loop={true} {...props} />;

apps/web/src/components/report/chart/ReportLineChart.tsx

@@ -47,7 +47,7 @@ export function ReportLineChart({ interval, data }: ReportLineChartProps) {
               width={width}
               height={Math.min(Math.max(width * 0.5, 250), 400)}
             >
-              <YAxis dataKey={'count'} width={30} fontSize={12}></YAxis>
+              <YAxis dataKey={'count'} fontSize={12}></YAxis>
               <Tooltip content={<ReportLineChartTooltip />} />
               <CartesianGrid strokeDasharray="3 3" />
               <XAxis

apps/web/src/components/report/chart/index.tsx

@@ -3,6 +3,7 @@ import { useOrganizationParams } from '@/hooks/useOrganizationParams';
 import type { IChartInput } from '@/types';
 import { api } from '@/utils/api';
 
+import { ChartAnimation } from './ChartAnimation';
 import { withChartProivder } from './ChartProvider';
 import { ReportBarChart } from './ReportBarChart';
 import { ReportLineChart } from './ReportLineChart';
@@ -22,6 +23,7 @@ export const Chart = memo(
     const hasEmptyFilters = events.some((event) =>
       event.filters.some((filter) => filter.value.length === 0)
     );
+    const enabled = events.length > 0 && !hasEmptyFilters;
     const chart = api.chart.chart.useQuery(
       {
         interval,
@@ -35,17 +37,19 @@ export const Chart = memo(
         projectSlug: params.project,
       },
       {
-        keepPreviousData: true,
-        enabled: events.length > 0 && !hasEmptyFilters,
+        keepPreviousData: false,
+        enabled,
       }
     );
 
-    console.log(chart.data);
-
     const anyData = Boolean(chart.data?.series?.[0]?.data);
 
-    if (chart.isFetching && !anyData) {
-      return <p>Loading...</p>;
+    if (!enabled) {
+      return <p>Select events & filters to begin</p>;
+    }
+
+    if (chart.isFetching) {
+      return <ChartAnimation name="airplane" className="w-96 mx-auto" />;
     }
 
     if (chart.isError) {
@@ -53,11 +57,11 @@ export const Chart = memo(
     }
 
     if (!chart.isSuccess) {
-      return <p>Loading...</p>;
+      return <ChartAnimation name="ballon" className="w-96 mx-auto" />;
     }
 
     if (!anyData) {
-      return <p>No data</p>;
+      return <ChartAnimation name="ballon" className="w-96 mx-auto" />;
     }
 
     if (chartType === 'bar') {

apps/web/src/components/report/reportSlice.ts

@@ -11,12 +11,14 @@ import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 
 type InitialState = IChartInput & {
+  dirty: boolean;
   startDate: string | null;
   endDate: string | null;
 };
 
 // First approach: define the initial state using that type
 const initialState: InitialState = {
+  dirty: false,
   name: 'screen_view',
   chartType: 'linear',
   interval: 'day',
@@ -39,10 +41,12 @@ export const reportSlice = createSlice({
         ...action.payload,
         startDate: null,
         endDate: null,
+        dirty: false,
       };
     },
     // Events
     addEvent: (state, action: PayloadAction<Omit<IChartEvent, 'id'>>) => {
+      state.dirty = true;
       state.events.push({
         id: alphabetIds[state.events.length]!,
         ...action.payload,
@@ -54,11 +58,13 @@ export const reportSlice = createSlice({
         id: string;
       }>
     ) => {
+      state.dirty = true;
       state.events = state.events.filter(
         (event) => event.id !== action.payload.id
       );
     },
     changeEvent: (state, action: PayloadAction<IChartEvent>) => {
+      state.dirty = true;
       state.events = state.events.map((event) => {
         if (event.id === action.payload.id) {
           return action.payload;
@@ -72,6 +78,7 @@ export const reportSlice = createSlice({
       state,
       action: PayloadAction<Omit<IChartBreakdown, 'id'>>
     ) => {
+      state.dirty = true;
       state.breakdowns.push({
         id: alphabetIds[state.breakdowns.length]!,
         ...action.payload,
@@ -83,11 +90,13 @@ export const reportSlice = createSlice({
         id: string;
       }>
     ) => {
+      state.dirty = true;
       state.breakdowns = state.breakdowns.filter(
         (event) => event.id !== action.payload.id
       );
     },
     changeBreakdown: (state, action: PayloadAction<IChartBreakdown>) => {
+      state.dirty = true;
       state.breakdowns = state.breakdowns.map((breakdown) => {
         if (breakdown.id === action.payload.id) {
           return action.payload;
@@ -98,11 +107,13 @@ export const reportSlice = createSlice({
 
     // Interval
     changeInterval: (state, action: PayloadAction<IInterval>) => {
+      state.dirty = true;
       state.interval = action.payload;
     },
 
     // Chart type
     changeChartType: (state, action: PayloadAction<IChartType>) => {
+      state.dirty = true;
       state.chartType = action.payload;
 
       if (
@@ -115,15 +126,18 @@ export const reportSlice = createSlice({
 
     // Date range
     changeStartDate: (state, action: PayloadAction<string>) => {
+      state.dirty = true;
       state.startDate = action.payload;
     },
 
     // Date range
     changeEndDate: (state, action: PayloadAction<string>) => {
+      state.dirty = true;
       state.endDate = action.payload;
     },
 
     changeDateRanges: (state, action: PayloadAction<IChartRange>) => {
+      state.dirty = true;
       state.range = action.payload;
       if (action.payload === 0.3 || action.payload === 0.6) {
         state.interval = 'minute';

apps/web/src/components/ui/button.tsx

@@ -3,7 +3,7 @@ import { cn } from '@/utils/cn';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
-import type { LucideIcon, LucideProps } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
 import { Loader2 } from 'lucide-react';
 
 const buttonVariants = cva(
@@ -64,7 +64,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
-        disabled={loading ?? disabled}
+        disabled={loading || disabled}
         {...props}
       >
         {Icon && (

apps/web/src/pages/[organization]/[project]/reports/index.tsx

@@ -41,6 +41,10 @@ export default function Page() {
     if (reportId && reportQuery.data) {
       dispatch(setReport(reportQuery.data));
     }
+
+    if (!reportId) {
+      dispatch(reset());
+    }
   }, [reportId, reportQuery.data, dispatch]);
 
   return (
@@ -57,7 +61,7 @@ export default function Page() {
                 </div>
                 <div className="flex gap-4">
                   <SheetTrigger asChild>
-                    <Button size="default">Select events & Filters</Button>
+                    <Button size="default">Select events & filters</Button>
                   </SheetTrigger>
                   <ReportSaveButton />
                 </div>

pnpm-lock.yaml

@@ -172,6 +172,9 @@ importers:
       cmdk:
         specifier: ^0.2.0
         version: 0.2.0(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0)
+      lottie-react:
+        specifier: ^2.4.0
+        version: 2.4.0(react-dom@18.2.0)(react@18.2.0)
       lucide-react:
         specifier: ^0.286.0
         version: 0.286.0(react@18.2.0)
@@ -4331,6 +4334,21 @@ packages:
       js-tokens: 4.0.0
     dev: false
 
+  /lottie-react@2.4.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      lottie-web: 5.12.2
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /lottie-web@5.12.2:
+    resolution: {integrity: sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==}
+    dev: false
+
   /lowlight@1.20.0:
     resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
     dependencies: