web: ui improvements for report edit mode

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';