Merge pull request #177 from zimmerman-team/feat/DX-1619

Feat/dx 1619
zimmerman-team · Jul 9, 2024 · 17f3ef9 · 17f3ef9
2 parents f966192 + 11ebfd5
commit 17f3ef9
Show file tree

Hide file tree

Showing 25 changed files with 343 additions and 172 deletions.
diff --git a/src/app/hooks/useAutoSave.tsx b/src/app/hooks/useAutoSave.tsx
@@ -6,7 +6,8 @@ function useAutosave(
   callback: () => void,
   delay: number,
   autoSave: boolean,
-  deps: (IFramesArray[] | string | IHeaderDetails)[]
+  haschangesBeenMade: boolean,
+  deps: any
 ) {
   const savedCallback = React.useRef<() => void>(); // to save the current "fresh" callback
 
@@ -22,13 +23,13 @@ function useAutosave(
       savedCallback.current?.();
     }
 
-    if (autoSave) {
+    if (autoSave && haschangesBeenMade) {
       // run the interval
       let timeout = setTimeout(runCallback, delay);
       // clean up on unmount or dependency change
       return () => clearTimeout(timeout);
     }
-  }, [autoSave, ...deps]);
+  }, [autoSave, haschangesBeenMade, ...deps]);
 }
 
 export default useAutosave;
diff --git a/src/app/hooks/useUpdateEffectOnce.tsx b/src/app/hooks/useUpdateEffectOnce.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 
+// This hook is used to run an effect only once after the first render.
 export function useUpdateEffectOnce(
   effect: Function,
   dependencies: Array<any>
@@ -10,8 +11,9 @@ export function useUpdateEffectOnce(
   React.useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
+      return;
     }
-    if (!didRunOnFirstUpdate || isInitialMount.current) {
+    if (!didRunOnFirstUpdate) {
       setDidRunOnFirstUpdate(true);
       effect();
     }

diff --git a/src/app/modules/chart-module/__test__/chart-type.test.tsx b/src/app/modules/chart-module/__test__/chart-type.test.tsx
@@ -28,6 +28,7 @@ interface MockProps {
   setChartFromAPI: jest.Mock<any, any, any>;
   dataTypes: any[];
   setVisualOptions: jest.Mock<any, any, any>;
+  setVisualOptionsOnChange: jest.Mock<any, any, any>;
 }
 
 jest.mock("react-router-dom", () => ({
@@ -57,6 +58,7 @@ const defaultProps = (props: Partial<MockProps> = {}): MockProps => {
     loadDataset: jest.fn(),
     setChartFromAPI: jest.fn(),
     setVisualOptions: jest.fn(),
+    setVisualOptionsOnChange: jest.fn(),
     dataTypes: [],
     ...props,
   };

diff --git a/src/app/modules/chart-module/components/chartSubheaderToolbar/index.tsx b/src/app/modules/chart-module/components/chartSubheaderToolbar/index.tsx
@@ -35,6 +35,7 @@ import AutoSaveSwitch from "app/modules/report-module/components/reportSubHeader
 import useAutosave from "app/hooks/useAutoSave";
 import { useStyles } from "app/modules/report-module/components/reportSubHeaderToolbar";
 import AutoResizeInput from "app/modules/report-module/components/reportSubHeaderToolbar/autoResizeInput";
+import { isEqual } from "lodash";
 
 export function ChartSubheaderToolbar(props: Readonly<SubheaderToolbarProps>) {
   const classes = useStyles();
@@ -49,6 +50,8 @@ export function ChartSubheaderToolbar(props: Readonly<SubheaderToolbarProps>) {
   const [enableButton, setEnableButton] = React.useState<boolean>(false);
   const setHomeTab = useRecoilState(homeDisplayAtom)[1];
   const [openSnackbar, setOpenSnackbar] = React.useState(false);
+  const [hasChangesBeenMade, setHasChangesBeenMade] = React.useState(false);
+
   const [inputSpanVisibiltiy, setInputSpanVisibility] = React.useState(true);
   const [showSnackbar, setShowSnackbar] = React.useState<string | null>(null);
   const [duplicatedChartId, setDuplicatedChartId] = React.useState<
@@ -95,12 +98,6 @@ export function ChartSubheaderToolbar(props: Readonly<SubheaderToolbarProps>) {
     return isAuthenticated && loadedChart && loadedChart.owner === user?.sub;
   }, [user, isAuthenticated, loadedChart]);
 
-  const saveStatusDivWidth =
-    (canChartEditDelete && props.savedChanges) ||
-    (canChartEditDelete && editChartLoading)
-      ? 140
-      : 0;
-
   const [snackbarState, setSnackbarState] = React.useState<ISnackbarState>({
     open: false,
     vertical: "bottom",
@@ -145,13 +142,39 @@ export function ChartSubheaderToolbar(props: Readonly<SubheaderToolbarProps>) {
       history.push(`/chart/${page}/customize`);
     }
   };
+  const compareStateChanges = () => {
+    if (loadedChart.id !== page) return false;
+    if (
+      !isEqual(props.name, loadedChart.name) ||
+      !isEqual(selectedChartType, loadedChart.vizType) ||
+      !isEqual(mapping, loadedChart.mapping) ||
+      !isEqual(dataset as string, loadedChart.datasetId as string) ||
+      !isEqual(props.visualOptions, loadedChart.vizOptions) ||
+      !isEqual(appliedFilters, loadedChart.appliedFilters)
+    ) {
+      return true;
+    }
+    return false;
+  };
+
+  React.useEffect(() => {
+    setHasChangesBeenMade(compareStateChanges);
+  }, [
+    props.name,
+    selectedChartType,
+    mapping,
+    dataset,
+    props.visualOptions,
+    appliedFilters,
+  ]);
 
   useAutosave(
     () => {
       props.onSave();
     },
     2 * 1000,
     props.autoSave && canChartEditDelete,
+    hasChangesBeenMade,
     [
       props.name,
       props.isAiSwitchActive,

diff --git a/src/app/modules/chart-module/components/common-chart/index.tsx b/src/app/modules/chart-module/components/common-chart/index.tsx
@@ -2,10 +2,10 @@ import React from "react";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { PageLoader } from "app/modules/common/page-loader";
 import { useDataThemesEchart } from "app/hooks/useDataThemesEchart";
-import { useUpdateEffectOnce } from "app/hooks/useUpdateEffectOnce";
 import GeomapLegend from "app/modules/chart-module/components/geomap-legend";
 import { ChartAPIModel } from "app/modules/chart-module/data";
 import { DatasetListItemAPIModel } from "app/modules/dataset-module/data";
+import { get } from "lodash";
 
 export type ChartType =
   | "echartsBarchart"
@@ -86,16 +86,19 @@ export function CommonChart(props: Readonly<Props>) {
       });
     }
   }, [token, datasetId]);
-  useUpdateEffectOnce(() => {
-    if (props.containerRef.current) {
+
+  React.useEffect(() => {
+    const visualOptionsWidth = get(props.visualOptions, "width", 0);
+    const containerWidth = props.containerRef.current?.clientWidth;
+    if (props.containerRef.current && visualOptionsWidth !== containerWidth) {
       const tmpVisualOptions = {
         ...props.visualOptions,
-        width: props.containerRef.current.clientWidth,
+        width: containerWidth,
         // height: props.containerRef.current.clientHeight, // removed the setting of visual option height to let user set it in the chart builder
       };
       props.setVisualOptions(tmpVisualOptions);
     }
-  }, [props.containerRef]);
+  }, []);
 
   // server side rendering
   React.useEffect(() => {

diff --git a/src/app/modules/chart-module/components/toolbox/data.tsx b/src/app/modules/chart-module/components/toolbox/data.tsx
@@ -26,7 +26,6 @@ export interface ChartToolBoxProps {
   exportView: boolean;
   rawViz: any;
   dataTypes: any;
-  addVizToLocalStates: () => void;
   filterOptionGroups: FilterGroupModel[];
   setVisualOptions: (value: any) => void;
   loadDataset: (endpoint: string) => Promise<boolean>;

diff --git a/src/app/modules/chart-module/components/toolbox/steps/panels-content/SelectDataset.tsx b/src/app/modules/chart-module/components/toolbox/steps/panels-content/SelectDataset.tsx
@@ -51,7 +51,7 @@ function ChartToolBoxSelectDataset(props: { deselectDataset: () => void }) {
   const token = useStoreState((state) => state.AuthToken.value);
 
   const dataset = useStoreState((state) => state.charts.dataset.value);
-  const fetchDataset = useStoreActions(
+  const fetchDatasetdetails = useStoreActions(
     (actions) => actions.dataThemes.DatasetGet.fetch
   );
   const datasetDetails = useStoreState(
@@ -64,7 +64,7 @@ function ChartToolBoxSelectDataset(props: { deselectDataset: () => void }) {
 
   React.useEffect(() => {
     if (token && dataset) {
-      fetchDataset({
+      fetchDatasetdetails({
         token,
         storeInCrudData: true,
         getId: dataset as string,

diff --git a/src/app/modules/chart-module/index.tsx b/src/app/modules/chart-module/index.tsx
@@ -30,7 +30,6 @@ import {
   charts,
   ChartAPIModel,
   routeToConfig,
-  emptyChartAPI,
   ChartRenderedItem,
   defaultChartOptions,
 } from "app/modules/chart-module/data";
@@ -377,7 +376,7 @@ export default function ChartModule() {
     [renderedChartSsr]
   );
 
-  function setVisualOptionsOnChange() {
+  function setVisualOptionsOnChange(chartType: string | null = null) {
     const options = {
       ...getOptionsConfig(
         get(charts, chartType ?? "echartsBarchart", charts.echartsBarchart)
@@ -396,10 +395,6 @@ export default function ChartModule() {
     setVisualOptions(tmpVisualOptions);
   }
 
-  function addVizToLocalStates() {
-    setVisualOptions({});
-  }
-
   async function clear() {
     sessionStorage.setItem("visualOptions", JSON.stringify({}));
     resetDataset();
@@ -456,12 +451,6 @@ export default function ChartModule() {
 
   const { ref } = useResizeObserver<HTMLDivElement>();
 
-  React.useEffect(() => {
-    if (!loading && chartType) {
-      setVisualOptionsOnChange();
-    }
-  }, [chartType, loading]);
-
   React.useEffect(() => {
     if (page !== "new") {
       if (!isLoading) {
@@ -527,7 +516,6 @@ export default function ChartModule() {
         setVisualOptions={setVisualOptions}
         loading={loading || isChartLoading}
         filterOptionGroups={filterOptionGroups}
-        addVizToLocalStates={addVizToLocalStates}
         openToolbox={toolboxOpen}
         setToolboxOpen={setToolboxOpen}
         dimensions={dimensions}
@@ -627,6 +615,7 @@ export default function ChartModule() {
                 setChartFromAPI={setChartFromAPI}
                 setVisualOptions={setVisualOptions}
                 dataTypes={dataTypes2}
+                setVisualOptionsOnChange={setVisualOptionsOnChange}
               />
             </Route>
             <Route path="/chart/:page/preview-data">

diff --git a/src/app/modules/chart-module/routes/chart-type/data.tsx b/src/app/modules/chart-module/routes/chart-type/data.tsx
@@ -80,6 +80,7 @@ export interface ChartBuilderChartTypeProps {
     value: React.SetStateAction<ChartRenderedItem | null>
   ) => void;
   setVisualOptions: (value: any) => void;
+  setVisualOptionsOnChange: (value: any) => void;
   dataTypes: any;
 }
 

diff --git a/src/app/modules/chart-module/routes/chart-type/index.tsx b/src/app/modules/chart-module/routes/chart-type/index.tsx
@@ -197,7 +197,9 @@ function ChartBuilderChartType(props: Readonly<ChartBuilderChartTypeProps>) {
   const onChartTypeChange =
     (chartTypeId: string) => (e: React.MouseEvent<HTMLButtonElement>) => {
       sessionStorage.setItem("visualOptions", JSON.stringify({}));
-      props.setVisualOptions({});
+      props.setVisualOptionsOnChange(
+        chartType === chartTypeId ? null : chartTypeId
+      );
       clearMapping();
       resetIsChartAutoMapped();
       props.setChartFromAPI(null);

diff --git a/src/app/modules/chart-module/routes/filters/index.tsx b/src/app/modules/chart-module/routes/filters/index.tsx
@@ -16,19 +16,13 @@ import ErrorComponent from "app/modules/chart-module/components/dialog/errrorCom
 function ChartBuilderFilters(props: Readonly<ChartBuilderFiltersProps>) {
   useTitle("DX DataXplorer - Filters");
 
-  const history = useHistory();
   const { isAuthenticated, user } = useAuth0();
   const { page } = useParams<{ page: string }>();
-
-  const dataset = useStoreState((state) => state.charts.dataset.value);
-
   const mapping = useStoreState((state) => state.charts.mapping.value);
-
   const loadedChart = useStoreState(
     (state) =>
       (state.charts.ChartGet.crudData ?? emptyChartAPI) as ChartAPIModel
   );
-
   const canChartEditDelete = React.useMemo(() => {
     return isAuthenticated && loadedChart && loadedChart.owner === user?.sub;
   }, [user, isAuthenticated, loadedChart]);

diff --git a/src/app/modules/chart-module/routes/preview/index.tsx b/src/app/modules/chart-module/routes/preview/index.tsx
@@ -47,6 +47,7 @@ export function ChartBuilderPreview(props: ChartBuilderPreviewProps) {
     if (datasetId === null && !props.loading && page === "new") {
       history.push(`/chart/${page}/data`);
     } else {
+      //loads table data
       props.loadDataset(datasetId!);
     }
   }, [datasetId]);
@@ -78,7 +79,6 @@ export function ChartBuilderPreview(props: ChartBuilderPreviewProps) {
 
   return (
     <div css={commonStyles.container}>
-      {props.loading && <PageLoader />}
       <div css={commonStyles.innercontainer}>
         <DatasetDataTable
           data={props.data}

diff --git a/src/app/modules/report-module/components/chart-wrapper/index.tsx b/src/app/modules/report-module/components/chart-wrapper/index.tsx
@@ -90,7 +90,6 @@ export function ReportChartWrapper(props: Props) {
     }
     return () => {
       clearChart();
-      console.log("unmounting --  clearing chart", loadedChart);
     };
   }, [props.id, token]);
 

diff --git a/src/app/modules/report-module/components/chart-wrapper/useLoadDatasetDetailsAPI.tsx b/src/app/modules/report-module/components/chart-wrapper/useLoadDatasetDetailsAPI.tsx
@@ -52,13 +52,8 @@ export const useLoadDatasetDetails = (id: string) => {
 
   React.useEffect(() => {
     if (id) {
-      console.log(id, "id");
       loadDatasetDetails();
     }
-    return () => {
-      console.log("unmounting component");
-      //   abortControllerRef.current.abort();
-    };
   }, [token, id]);
 
   return {

diff --git a/src/app/modules/report-module/data.ts b/src/app/modules/report-module/data.ts
@@ -49,7 +49,7 @@ export const emptyReport: ReportModel = {
   title: "",
   public: false,
   subTitle: convertToRaw(EditorState.createEmpty().getCurrentContent()),
-  showHeader: false,
+  showHeader: true,
   rows: [],
   createdDate: new Date(),
   backgroundColor: "#252c34",