From edbfad9500f97d7449a6617a1ce4b7f0bd9fa2dc Mon Sep 17 00:00:00 2001 From: okorie2 Date: Sat, 18 Nov 2023 21:03:24 +0100 Subject: [PATCH 01/13] fix: chart builder fixes --- src/app/hooks/useChartsRawData.tsx | 84 +++++++++++-------- src/app/modules/chart-module/index.tsx | 60 +++++++++++-- .../chart-module/routes/data/index.tsx | 4 +- .../chart-module/routes/mapping/index.tsx | 6 +- .../routes/preview-theme/index.tsx | 8 +- .../subheader-toolbar/SubheaderToolbar.tsx | 4 +- src/app/state/api/index.ts | 19 +++-- 7 files changed, 127 insertions(+), 58 deletions(-) diff --git a/src/app/hooks/useChartsRawData.tsx b/src/app/hooks/useChartsRawData.tsx index c848db443..fc803903c 100644 --- a/src/app/hooks/useChartsRawData.tsx +++ b/src/app/hooks/useChartsRawData.tsx @@ -108,6 +108,7 @@ export function useChartsRawData(props: { extraLoader.style.display = "block"; } setLoading(true); + setDataError(false); return await axios .get(`${process.env.REACT_APP_API}/${endpoint}`, { headers: { @@ -116,22 +117,24 @@ export function useChartsRawData(props: { }, }) .then((response: AxiosResponse) => { - setNotFound(false); - - setDataStats(response.data.stats); - setSampleData(response.data.sample); - setDataTypes(response.data.dataTypes); - setDataTotalCount(response.data.count); - setEnabledFilterOptionGroups(response.data.filterOptionGroups); if (extraLoader) { extraLoader.style.display = "none"; } setLoading(false); - return response.data.sample; + if (isEmpty(response.data)) { + setDataError(true); + } else { + setDataStats(response.data.stats); + setSampleData(response.data.sample); + setDataTypes(response.data.dataTypes); + setDataTotalCount(response.data.count); + setEnabledFilterOptionGroups(response.data.filterOptionGroups); + } + + return response.data?.sample; }) .catch((error: AxiosError) => { console.log(error); - setNotFound(true); setDataError(true); setDataStats([]); setSampleData([]); @@ -161,6 +164,8 @@ export function useChartsRawData(props: { : appliedFilters, }; setLoading(true); + setNotFound(false); + await axios .post( `${process.env.REACT_APP_API}/chart/${chartId ?? page}/render`, @@ -173,9 +178,9 @@ export function useChartsRawData(props: { } ) .then((response) => { - setNotFound(false); - + // setNotFound(false); const chart = response.data || {}; + setLoading(false); if (!isEmpty(chart)) { setAllAppliedFilters(chart.appliedFilters || {}); setEnabledFilterOptionGroups(chart.enabledFilterOptionGroups); @@ -184,17 +189,14 @@ export function useChartsRawData(props: { setSelectedChartType(chart.vizType); setDataset(chart.datasetId); setChartFromAPI(chart); - } - if (response.data === null || response.data === undefined) { + } else { setNotFound(true); } - - setLoading(false); }) .catch((error) => { console.log("API call error: " + error.message); - setNotFound(true); setLoading(false); + setNotFound(true); setError401(error.response?.status === 401); }); } @@ -264,29 +266,35 @@ export function useChartsRawData(props: { const requiredDimensions = props.dimensions.filter( (dimension: any) => dimension.required ); - let req = {} as any; + let requiredMappingKey = {} as any; requiredDimensions.forEach((element: any) => { if (element.id in mapping) { - req[element.id] = true; + requiredMappingKey[element.id] = true; } else { - req[element.id] = false; + requiredMappingKey[element.id] = false; } }); function allRequiredKeysExist(req: any, allreq: any) { - for (const key in req) { - if (req.hasOwnProperty(key) && !allreq.hasOwnProperty(key)) { - return false; - } - //return false if chartType is sankey and only one dimension is selected - if (chartType === "echartsSankey" && allreq[key].ids.length < 2) { - return false; + if (isEmpty(mapping)) { + return false; + } else { + for (const key in req) { + if (req.hasOwnProperty(key) && !allreq.hasOwnProperty(key)) { + return false; + } + //return false if chartType is sankey and only one dimension is selected + if (chartType === "echartsSankey" && allreq[key].ids.length < 2) { + return false; + } } + return true; } - return true; } - if (page && allRequiredKeysExist(req, mapping)) { + if (page && allRequiredKeysExist(requiredMappingKey, mapping)) { + setNotFound(false); + axios .post(`${process.env.REACT_APP_API}/chart/${page}/render`, body, { headers: { @@ -295,23 +303,25 @@ export function useChartsRawData(props: { }, }) .then((response) => { - const chart = response.data || {}; - setChartFromAPI(chart); - setNotFound(false); - - setLoading(false); if (extraLoader) { extraLoader.style.display = "none"; } + const chart = response.data || {}; + if (isEmpty(chart)) { + setNotFound(true); + } else { + setChartFromAPI(chart); + setLoading(false); + } }) .catch((error) => { console.log("API call error: " + error.message); - setNotFound(true); - setLoading(false); - setError401(error.response?.status === 401); if (extraLoader) { extraLoader.style.display = "none"; } + setNotFound(true); + setLoading(false); + setError401(error.response?.status === 401); }); } } @@ -327,6 +337,8 @@ export function useChartsRawData(props: { return { loading, notFound, + setNotFound, + setDataError, Error401, dataError, dataTypes, diff --git a/src/app/modules/chart-module/index.tsx b/src/app/modules/chart-module/index.tsx index 6d91ba4a1..b8903c01c 100644 --- a/src/app/modules/chart-module/index.tsx +++ b/src/app/modules/chart-module/index.tsx @@ -76,6 +76,9 @@ export default function ChartModule() { loadDataset, loadDataFromAPI, Error401, + setDataError, + setNotFound, + notFound, dataError, } = useChartsRawData({ visualOptions, @@ -109,6 +112,12 @@ export default function ChartModule() { const clearChart = useStoreActions( (actions) => actions.charts.ChartGet.clear ); + const createChartClear = useStoreActions( + (actions) => actions.charts.ChartCreate.clear + ); + const editChartClear = useStoreActions( + (actions) => actions.charts.ChartUpdate.clear + ); const resetAppliedFilters = useStoreActions( (actions) => actions.charts.appliedFilters.reset ); @@ -151,6 +160,11 @@ export default function ChartModule() { setChartFromAPI(null); }, [chartType, dataTypes]); + //reset filters dataset types changes + React.useEffect(() => { + resetAppliedFilters(); + }, [dataTypes]); + //set chart name to selected dataset if chart name has not been focused React.useEffect(() => { if (page === "new" && !hasSubHeaderTitleFocused && dataset) { @@ -240,7 +254,11 @@ export default function ChartModule() { resetAppliedFilters(); resetEnabledFilterOptionGroups(); clearChart(); - setChartName("Untitled Report"); + createChartClear(); + editChartClear(); + setChartName("Untitled Chart"); + setDataError(false); + setNotFound(false); } function clearChartBuilder() { @@ -322,7 +340,13 @@ export default function ChartModule() { const errorComponent = () => { return (
-
+
-

- Something went wrong with loading your data! -
- Choose another dataset or upload new. -

+ {notFound ? ( +

+ Something went wrong with rendering your chart! +
+ + {" "} + {" "} + to try again. +

+ ) : ( +

+ Something went wrong with loading your data! +
+ Choose another dataset or upload new. +

+ )}
@@ -416,7 +458,7 @@ export default function ChartModule() { position: relative; `} > - {dataError ? ( + {dataError || notFound ? ( <>{errorComponent()} ) : ( @@ -492,7 +534,7 @@ export default function ChartModule() { /> - + { + //clear chart state + props.clearChartBuilder(); // When the Data View component is rendered, we are at step 1. setActivePanels(1); }, []); diff --git a/src/app/modules/chart-module/routes/mapping/index.tsx b/src/app/modules/chart-module/routes/mapping/index.tsx index 76e185a01..2505acd09 100644 --- a/src/app/modules/chart-module/routes/mapping/index.tsx +++ b/src/app/modules/chart-module/routes/mapping/index.tsx @@ -106,9 +106,9 @@ function ChartBuilderMapping(props: ChartBuilderMappingProps) { [mapping, props.dataTypes, props.dimensions, setMapping, chartType] ); - if (dataset === null && !props.loading) { - history.push(`/chart/${page}/data`); - } + // if (dataset === null && !props.loading) { + // history.push(`/chart/${page}/data`); + // } const nonStaticDimensions = filter(props.dimensions, (d: any) => !d.static); const staticDimensions = filter(props.dimensions, (d: any) => d.static); diff --git a/src/app/modules/chart-module/routes/preview-theme/index.tsx b/src/app/modules/chart-module/routes/preview-theme/index.tsx index b0d6c4ceb..ff180c0b6 100644 --- a/src/app/modules/chart-module/routes/preview-theme/index.tsx +++ b/src/app/modules/chart-module/routes/preview-theme/index.tsx @@ -93,9 +93,9 @@ export function ChartBuilderPreviewTheme(props: ChartBuilderPreviewThemeProps) { !isEmpty(mapping) && !isEmpty(visualOptions) ) { - try { - const loader = document.getElementById("chart-placeholder"); + const loader = document.getElementById("chart-placeholder"); + try { new Promise((resolve, reject) => { try { if (loader) { @@ -148,6 +148,10 @@ export function ChartBuilderPreviewTheme(props: ChartBuilderPreviewThemeProps) { } }); } catch (e) { + if (loader) { + loader.style.display = "none"; + } + while (domRef.current.firstChild) { domRef.current.removeChild(domRef.current.firstChild); } diff --git a/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx b/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx index a8067fb2e..f47d3cc75 100644 --- a/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx +++ b/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx @@ -211,7 +211,7 @@ export function SubheaderToolbar(props: SubheaderToolbarProps) { React.useEffect(() => { if (editChartSuccess && createChartFromReport.view === "") { - console.log(createChartFromReport.state, "state"); + //returns back to chart detail page history.push(`/chart/${page}`); } }, [editChartSuccess]); @@ -257,7 +257,7 @@ export function SubheaderToolbar(props: SubheaderToolbarProps) { createChartSuccess ? `Chart created successfully!` : null ); const chartId = createChartSuccess ? createChartData.id : page; - if (createChartFromReport.view === "") { + if (createChartFromReport.view === "" && createChartSuccess) { history.push(`/chart/${chartId}`); } } diff --git a/src/app/state/api/index.ts b/src/app/state/api/index.ts index 3d120fd73..60d242fe6 100644 --- a/src/app/state/api/index.ts +++ b/src/app/state/api/index.ts @@ -106,8 +106,11 @@ export const APIModel = ( } ) .then( - (resp: AxiosResponse) => - actions.onSuccess({ ...resp.data, addOnData: false }), + (resp: AxiosResponse) => { + if (resp.data) { + return actions.onSuccess({ ...resp.data, addOnData: false }); + } + }, (error: any) => actions.onError(error.response) ); } @@ -123,8 +126,10 @@ export const APIModel = ( }) .then( (resp: AxiosResponse) => { - actions.onSuccess(resp.data); - return actions.onSuccessCrudData(resp.data); + if (resp.data) { + actions.onSuccess(resp.data); + return actions.onSuccessCrudData(resp.data); + } }, (error: any) => actions.onError(error.response) ); @@ -139,7 +144,11 @@ export const APIModel = ( }, }) .then( - (resp: AxiosResponse) => actions.onSuccessCrudData(resp.data), + (resp: AxiosResponse) => { + if (resp.data) { + return actions.onSuccessCrudData(resp.data); + } + }, (error: any) => actions.onError(error.response) ); }), From b0d496001708774e87acd1ebd917a4761743aed5 Mon Sep 17 00:00:00 2001 From: okorie2 Date: Tue, 21 Nov 2023 04:51:26 +0100 Subject: [PATCH 02/13] refactor: adjust and optimise hook functions --- src/app/hooks/useChartsRawData.tsx | 174 ++++++++++++++--------------- 1 file changed, 82 insertions(+), 92 deletions(-) diff --git a/src/app/hooks/useChartsRawData.tsx b/src/app/hooks/useChartsRawData.tsx index fc803903c..3f92bf5e2 100644 --- a/src/app/hooks/useChartsRawData.tsx +++ b/src/app/hooks/useChartsRawData.tsx @@ -6,7 +6,7 @@ import isEmpty from "lodash/isEmpty"; import { useParams } from "react-router-dom"; import axios, { AxiosError, AxiosResponse } from "axios"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; -import { useMount, useSessionStorage, useUpdateEffect } from "react-use"; +import { useSessionStorage, useUpdateEffect } from "react-use"; /* project */ import { ChartRenderedItem } from "app/modules/chart-module/data"; @@ -15,43 +15,70 @@ function checkIfIsEditMode(view?: string): boolean { return false; } -function checkMappingAndDatasetIdNotEmpty( - tabmappings: [ - [ - { - [key: string]: any; - } - ] - ], - tabdatasetIds: [ - [ - { - dataset: string | null; - } - ] - ], - activeTabIndex: number, - vizIsTextContent: boolean[][] -): boolean { - let mappingsCheck = true; - // tabmappings.forEach((tabmapping) => { - tabmappings[activeTabIndex].forEach((contentmapping, index) => { - if (!vizIsTextContent[activeTabIndex][index]) { - mappingsCheck = mappingsCheck && !isEmpty(contentmapping); - } +const getValidMapping = ( + chartFromAPI: ChartRenderedItem | null, + mapping: { + [key: string]: any; + } +) => { + const dimensionIDs = + chartFromAPI?.dimensions?.map((item: any) => item.id) || []; + const validMappingKeys = filter( + Object.keys(mapping), + (key: string) => dimensionIDs.indexOf(key) > -1 + ); + let validMapping = {}; + if (validMappingKeys.length === 0) { + validMapping = mapping; + } + validMappingKeys.forEach((key: string) => { + validMapping = { + ...validMapping, + [key]: mapping[key], + }; }); - // }); - let datasetIdsCheck = true; - // tabdatasetIds.forEach((tabdatasetId) => { - tabdatasetIds[activeTabIndex].forEach((contentdatasetId, index) => { - if (!vizIsTextContent[activeTabIndex][index]) { - datasetIdsCheck = datasetIdsCheck && !isEmpty(contentdatasetId); - } + return validMapping; +}; + +const getReqMappingKeyFromReqDimension = ( + dimensions: any, + mapping: { + [key: string]: any; + } +) => { + //get required dimensions + const requiredDimensions = dimensions.filter( + (dimension: any) => dimension.required + ); + let requiredMappingKey: { [key: string]: boolean } = {}; + + requiredDimensions.forEach((element: any) => { + //assign true if mapping key exists and false if not + requiredMappingKey[element.id] = element.id in mapping; }); - // }); + return requiredMappingKey; +}; - return mappingsCheck && datasetIdsCheck; -} +const allRequiredKeysExist = ( + req: any, + allreq: any, + chartType: string | null +): boolean => { + if (isEmpty(allreq)) { + return false; + } + + for (const key in req) { + if (req.hasOwnProperty(key) && !allreq.hasOwnProperty(key)) { + return false; + } + //return false if chartType is sankey and only one dimension is selected + if (chartType === "echartsSankey" && allreq[key].ids.length < 2) { + return false; + } + } + return true; +}; export function useChartsRawData(props: { visualOptions: any; @@ -66,13 +93,14 @@ export function useChartsRawData(props: { props; const { page, view } = useParams<{ page: string; view?: string }>(); + console.log(view, "view"); const [dataTypes, setDataTypes] = React.useState([]); const [dataStats, setDataStats] = React.useState([]); const [sampleData, setSampleData] = React.useState([]); const [loading, setLoading] = React.useState(page !== "new"); const [notFound, setNotFound] = React.useState(false); - const [Error401, setError401] = React.useState(false); + const [error401, setError401] = React.useState(false); const [dataError, setDataError] = React.useState(false); const [dataTotalCount, setDataTotalCount] = React.useState(0); const [isEditMode, setIsEditMode] = React.useState(checkIfIsEditMode(view)); @@ -178,7 +206,6 @@ export function useChartsRawData(props: { } ) .then((response) => { - // setNotFound(false); const chart = response.data || {}; setLoading(false); if (!isEmpty(chart)) { @@ -202,12 +229,6 @@ export function useChartsRawData(props: { } } - useMount(() => { - if (isEditMode && page !== "new" && !props.inChartWrapper) { - loadDataFromAPI(); - } - }); - React.useEffect(() => { const newValue = checkIfIsEditMode(view); if (newValue !== isEditMode) { @@ -216,10 +237,14 @@ export function useChartsRawData(props: { }, [view]); React.useEffect(() => { - if (!props.inChartWrapper && page !== "new" && !isEditMode) { + if ( + !props.inChartWrapper && + page !== "new" && + (isEditMode || !props.inChartWrapper) + ) { loadDataFromAPI(); } - }, [page, isEditMode]); + }, [page, isEditMode, props.inChartWrapper]); useUpdateEffect(() => { if ( @@ -232,22 +257,13 @@ export function useChartsRawData(props: { if (extraLoader) { extraLoader.style.display = "block"; } - const dimensionKeys = - chartFromAPI?.dimensions?.map((item: any) => item.id) || []; - const validMappingKeys = filter( - Object.keys(mapping), - (key: string) => dimensionKeys.indexOf(key) > -1 + + const validMapping = getValidMapping(chartFromAPI, mapping); + const requiredMappingKey = getReqMappingKeyFromReqDimension( + props.dimensions, + mapping ); - let validMapping = {}; - if (validMappingKeys.length === 0) { - validMapping = mapping; - } - validMappingKeys.forEach((key: string) => { - validMapping = { - ...validMapping, - [key]: mapping[key], - }; - }); + const body = { rows: [ [ @@ -262,38 +278,12 @@ export function useChartsRawData(props: { ], }; - //get required dimensions - const requiredDimensions = props.dimensions.filter( - (dimension: any) => dimension.required - ); - let requiredMappingKey = {} as any; - - requiredDimensions.forEach((element: any) => { - if (element.id in mapping) { - requiredMappingKey[element.id] = true; - } else { - requiredMappingKey[element.id] = false; - } - }); - function allRequiredKeysExist(req: any, allreq: any) { - if (isEmpty(mapping)) { - return false; - } else { - for (const key in req) { - if (req.hasOwnProperty(key) && !allreq.hasOwnProperty(key)) { - return false; - } - //return false if chartType is sankey and only one dimension is selected - if (chartType === "echartsSankey" && allreq[key].ids.length < 2) { - return false; - } - } - return true; - } - } - - if (page && allRequiredKeysExist(requiredMappingKey, mapping)) { + if ( + page && + allRequiredKeysExist(requiredMappingKey, mapping, chartType) + ) { setNotFound(false); + console.log("mount2"); axios .post(`${process.env.REACT_APP_API}/chart/${page}/render`, body, { @@ -339,7 +329,7 @@ export function useChartsRawData(props: { notFound, setNotFound, setDataError, - Error401, + error401, dataError, dataTypes, dataStats, From 97d7649db69aa03aee3ee7cb600a5d5ee30eb1e6 Mon Sep 17 00:00:00 2001 From: okorie2 Date: Tue, 21 Nov 2023 04:53:33 +0100 Subject: [PATCH 03/13] fix: minor fixes --- src/app/modules/chart-module/index.tsx | 4 ++-- src/app/modules/chart-module/routes/customize/index.tsx | 2 +- src/app/modules/chart-module/routes/filters/index.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/modules/chart-module/index.tsx b/src/app/modules/chart-module/index.tsx index b8903c01c..7304e9c71 100644 --- a/src/app/modules/chart-module/index.tsx +++ b/src/app/modules/chart-module/index.tsx @@ -75,7 +75,7 @@ export default function ChartModule() { isEditMode, loadDataset, loadDataFromAPI, - Error401, + error401, setDataError, setNotFound, notFound, @@ -398,7 +398,7 @@ export default function ChartModule() { ); }; - if (chartError401 || Error401) { + if (chartError401 || error401) { return ( <>
diff --git a/src/app/modules/chart-module/routes/customize/index.tsx b/src/app/modules/chart-module/routes/customize/index.tsx index fb124b838..fafe7ab22 100644 --- a/src/app/modules/chart-module/routes/customize/index.tsx +++ b/src/app/modules/chart-module/routes/customize/index.tsx @@ -36,7 +36,7 @@ function ChartBuilderCustomize(props: ChartBuilderCustomizeProps) { useUpdateEffectOnce(() => { if ( containerRef.current && - props.visualOptions.width === CHART_DEFAULT_WIDTH + props.visualOptions?.width === CHART_DEFAULT_WIDTH ) { const tmpVisualOptions = { ...props.visualOptions, diff --git a/src/app/modules/chart-module/routes/filters/index.tsx b/src/app/modules/chart-module/routes/filters/index.tsx index ee71ad32f..ef30a9780 100644 --- a/src/app/modules/chart-module/routes/filters/index.tsx +++ b/src/app/modules/chart-module/routes/filters/index.tsx @@ -34,7 +34,7 @@ function ChartBuilderFilters(props: ChartBuilderFiltersProps) { useUpdateEffectOnce(() => { if ( containerRef.current && - props.visualOptions.width === CHART_DEFAULT_WIDTH + props.visualOptions?.width === CHART_DEFAULT_WIDTH ) { const tmpVisualOptions = { ...props.visualOptions, From 6e34324c6db097006c16f7e3d9374f1869ce8ab7 Mon Sep 17 00:00:00 2001 From: okorie2 Date: Tue, 21 Nov 2023 04:56:47 +0100 Subject: [PATCH 04/13] fix: DX-901; reset frames array to empty array --- src/app/modules/report-module/index.tsx | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/src/app/modules/report-module/index.tsx b/src/app/modules/report-module/index.tsx index 522d9ea1c..bf85a4c70 100644 --- a/src/app/modules/report-module/index.tsx +++ b/src/app/modules/report-module/index.tsx @@ -301,6 +301,7 @@ export default function ReportModule() { } ) : framesArray; + console.log(localFramesArray, "localFramesArray"); setFramesArray(localFramesArray); }, [persistedReportState]); @@ -418,23 +419,7 @@ export default function ReportModule() { descriptionColor: "#ffffff", dateColor: "#ffffff", }, - framesArray: JSON.stringify([ - { - id, - frame: { - rowIndex: 0, - rowId: id, - handlePersistReportState, - handleRowFrameItemResize, - type: "rowFrame", - }, - content: [], - contentWidths: [], - contentHeights: [], - contentTypes: [], - structure: null, - }, - ]), + framesArray: JSON.stringify([]), }); setFramesArray([ { From abe2cefe37abed35c2c990212a8ceab89f2b893c Mon Sep 17 00:00:00 2001 From: okorie2 Date: Tue, 21 Nov 2023 04:59:10 +0100 Subject: [PATCH 05/13] refactor: adjust flow for create/edit chart from report --- .../common/subheader-toolbar/SubheaderToolbar.tsx | 12 ++---------- src/app/modules/report-module/index.tsx | 1 - src/app/state/api/index.ts | 7 ++----- 3 files changed, 4 insertions(+), 16 deletions(-) diff --git a/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx b/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx index f47d3cc75..3194af480 100644 --- a/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx +++ b/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx @@ -194,10 +194,6 @@ export function SubheaderToolbar(props: SubheaderToolbarProps) { createChartFromReport.state ) { //returns back to persisted report view - setCreateChartFromReport({ - ...createChartFromReport, - state: false, - }); setRightPanelView("charts"); if (createChartFromReport.view === undefined) { history.push(`/report/${createChartFromReport.page}/edit`); @@ -206,15 +202,11 @@ export function SubheaderToolbar(props: SubheaderToolbarProps) { `/report/${createChartFromReport.page}/${createChartFromReport.view}` ); } - } - }, [editChartSuccess, createChartSuccess]); - - React.useEffect(() => { - if (editChartSuccess && createChartFromReport.view === "") { + } else if (editChartSuccess && !createChartFromReport.state) { //returns back to chart detail page history.push(`/chart/${page}`); } - }, [editChartSuccess]); + }, [editChartSuccess, createChartSuccess]); React.useEffect(() => { return () => { diff --git a/src/app/modules/report-module/index.tsx b/src/app/modules/report-module/index.tsx index bf85a4c70..92c6fca8f 100644 --- a/src/app/modules/report-module/index.tsx +++ b/src/app/modules/report-module/index.tsx @@ -301,7 +301,6 @@ export default function ReportModule() { } ) : framesArray; - console.log(localFramesArray, "localFramesArray"); setFramesArray(localFramesArray); }, [persistedReportState]); diff --git a/src/app/state/api/index.ts b/src/app/state/api/index.ts index 60d242fe6..d31a09606 100644 --- a/src/app/state/api/index.ts +++ b/src/app/state/api/index.ts @@ -144,11 +144,8 @@ export const APIModel = ( }, }) .then( - (resp: AxiosResponse) => { - if (resp.data) { - return actions.onSuccessCrudData(resp.data); - } - }, + (resp: AxiosResponse) => actions.onSuccessCrudData(resp.data), + (error: any) => actions.onError(error.response) ); }), From 5564a7d527013c741cd1f66b60bd54443f842111 Mon Sep 17 00:00:00 2001 From: okorie2 Date: Tue, 21 Nov 2023 12:38:45 +0100 Subject: [PATCH 06/13] fix: DX-900; refactor render chart function update effect --- src/app/hooks/useChartsRawData.tsx | 138 +++++++++++++---------------- 1 file changed, 62 insertions(+), 76 deletions(-) diff --git a/src/app/hooks/useChartsRawData.tsx b/src/app/hooks/useChartsRawData.tsx index 3f92bf5e2..bd8996264 100644 --- a/src/app/hooks/useChartsRawData.tsx +++ b/src/app/hooks/useChartsRawData.tsx @@ -10,11 +10,6 @@ import { useSessionStorage, useUpdateEffect } from "react-use"; /* project */ import { ChartRenderedItem } from "app/modules/chart-module/data"; -function checkIfIsEditMode(view?: string): boolean { - if (view) return true; - return false; -} - const getValidMapping = ( chartFromAPI: ChartRenderedItem | null, mapping: { @@ -93,7 +88,6 @@ export function useChartsRawData(props: { props; const { page, view } = useParams<{ page: string; view?: string }>(); - console.log(view, "view"); const [dataTypes, setDataTypes] = React.useState([]); const [dataStats, setDataStats] = React.useState([]); @@ -103,7 +97,7 @@ export function useChartsRawData(props: { const [error401, setError401] = React.useState(false); const [dataError, setDataError] = React.useState(false); const [dataTotalCount, setDataTotalCount] = React.useState(0); - const [isEditMode, setIsEditMode] = React.useState(checkIfIsEditMode(view)); + // const [isEditMode, setIsEditMode] = React.useState(checkIfIsEditMode(view)); const appliedFilters = useStoreState( (state) => state.charts.appliedFilters.value ); @@ -129,6 +123,10 @@ export function useChartsRawData(props: { const setSelectedChartType = useStoreActions( (actions) => actions.charts.chartType.setValue ); + const isEditMode = !( + (page !== "new" && view === undefined) || + view === "preview" + ); async function loadDataset(endpoint: string) { const extraLoader = document.getElementById("extra-loader"); @@ -229,13 +227,6 @@ export function useChartsRawData(props: { } } - React.useEffect(() => { - const newValue = checkIfIsEditMode(view); - if (newValue !== isEditMode) { - setIsEditMode(newValue); - } - }, [view]); - React.useEffect(() => { if ( !props.inChartWrapper && @@ -246,78 +237,73 @@ export function useChartsRawData(props: { } }, [page, isEditMode, props.inChartWrapper]); - useUpdateEffect(() => { - if ( - !loading && - !props.inChartWrapper && - (page === "new" || isEditMode) && - !isEmpty(dataset) - ) { - const extraLoader = document.getElementById("extra-loader"); - if (extraLoader) { - extraLoader.style.display = "block"; - } + const renderChartFromAPI = () => { + const extraLoader = document.getElementById("extra-loader"); + if (extraLoader) { + extraLoader.style.display = "block"; + } - const validMapping = getValidMapping(chartFromAPI, mapping); - const requiredMappingKey = getReqMappingKeyFromReqDimension( - props.dimensions, - mapping - ); + const validMapping = getValidMapping(chartFromAPI, mapping); + const requiredMappingKey = getReqMappingKeyFromReqDimension( + props.dimensions, + mapping + ); - const body = { - rows: [ - [ - { - mapping: validMapping, - vizType: selectedChartType, - datasetId: dataset, - vizOptions: visualOptions, - appliedFilters, - }, - ], + const body = { + rows: [ + [ + { + mapping: validMapping, + vizType: selectedChartType, + datasetId: dataset, + vizOptions: visualOptions, + appliedFilters, + }, ], - }; + ], + }; - if ( - page && - allRequiredKeysExist(requiredMappingKey, mapping, chartType) - ) { - setNotFound(false); - console.log("mount2"); + if (page && allRequiredKeysExist(requiredMappingKey, mapping, chartType)) { + setNotFound(false); - axios - .post(`${process.env.REACT_APP_API}/chart/${page}/render`, body, { - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${token}`, - }, - }) - .then((response) => { - if (extraLoader) { - extraLoader.style.display = "none"; - } - const chart = response.data || {}; - if (isEmpty(chart)) { - setNotFound(true); - } else { - setChartFromAPI(chart); - setLoading(false); - } - }) - .catch((error) => { - console.log("API call error: " + error.message); - if (extraLoader) { - extraLoader.style.display = "none"; - } + axios + .post(`${process.env.REACT_APP_API}/chart/${page}/render`, body, { + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + }) + .then((response) => { + if (extraLoader) { + extraLoader.style.display = "none"; + } + const chart = response.data || {}; + if (isEmpty(chart)) { setNotFound(true); + } else { + setChartFromAPI(chart); setLoading(false); - setError401(error.response?.status === 401); - }); - } + } + }) + .catch((error) => { + console.log("API call error: " + error.message); + if (extraLoader) { + extraLoader.style.display = "none"; + } + setNotFound(true); + setLoading(false); + setError401(error.response?.status === 401); + }); + } + }; + + useUpdateEffect(() => { + if (!loading && !props.inChartWrapper && isEditMode && !isEmpty(dataset)) { + renderChartFromAPI(); } }, [ page, - isEditMode, + view, mapping, selectedChartType, get(chartFromAPI, "ssr", false) ? visualOptions : undefined, From d944f38f96883557417a85da961901207fda3504 Mon Sep 17 00:00:00 2001 From: okorie2 Date: Tue, 21 Nov 2023 12:40:36 +0100 Subject: [PATCH 07/13] fix: fix success info snackbar --- .../common/subheader-toolbar/SubheaderToolbar.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx b/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx index 3194af480..5f23cc638 100644 --- a/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx +++ b/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx @@ -129,6 +129,10 @@ export function SubheaderToolbar(props: SubheaderToolbarProps) { horizontal: "center", }); + const clearChart = () => { + editChartClear(); + createChartClear(); + }; const onNameChange = (event: React.ChangeEvent) => { props.setName(event.target.value); }; @@ -210,8 +214,7 @@ export function SubheaderToolbar(props: SubheaderToolbarProps) { React.useEffect(() => { return () => { - createChartClear(); - editChartClear(); + clearChart(); }; }, []); @@ -393,7 +396,7 @@ export function SubheaderToolbar(props: SubheaderToolbarProps) {
{createOrEditChartLoading && } setShowSnackbar(null)} open={showSnackbar !== null && showSnackbar !== ""} @@ -403,7 +406,7 @@ export function SubheaderToolbar(props: SubheaderToolbarProps) { aria-describedby="create-chart-snackbar-content" action={ <> - {createChartFromReport.view === "" && ( + {!location.pathname.includes("report") && (
)}
From b227b560bf2d11a81d2dfe14112f0362a392c9ab Mon Sep 17 00:00:00 2001 From: okorie2 Date: Wed, 22 Nov 2023 13:20:39 +0100 Subject: [PATCH 11/13] fix: reset persisted frames array state --- .../subheader-toolbar/SubheaderToolbar.tsx | 2 +- src/app/modules/report-module/index.tsx | 65 +++++++++++++------ 2 files changed, 45 insertions(+), 22 deletions(-) diff --git a/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx b/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx index 5f23cc638..7b4bc5ebc 100644 --- a/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx +++ b/src/app/modules/common/subheader-toolbar/SubheaderToolbar.tsx @@ -48,7 +48,7 @@ export function SubheaderToolbar(props: SubheaderToolbarProps) { const [enableButton, setEnableButton] = React.useState(false); const setHomeTab = useRecoilState(homeDisplayAtom)[1]; - const [createChartFromReport, setCreateChartFromReport] = useRecoilState( + const [createChartFromReport, _setCreateChartFromReport] = useRecoilState( createChartFromReportAtom ); const setRightPanelView = useRecoilState(reportRightPanelViewAtom)[1]; diff --git a/src/app/modules/report-module/index.tsx b/src/app/modules/report-module/index.tsx index 56210ae03..a61e754d4 100644 --- a/src/app/modules/report-module/index.tsx +++ b/src/app/modules/report-module/index.tsx @@ -38,6 +38,7 @@ import { createChartFromReportAtom, persistedReportStateAtom, reportRightPanelViewAtom, + unSavedReportPreviewModeAtom, } from "app/state/recoil/atoms"; interface RowFrameProps { @@ -79,7 +80,10 @@ export default function ReportModule() { createChartFromReportAtom ); - console.log(createChartFromReport, "createChartFromReport"); + const [_reportPreviewMode, setReportPreviewMode] = useRecoilState( + unSavedReportPreviewModeAtom + ); + const [persistedReportState, setPersistedReportState] = useRecoilState( persistedReportStateAtom ); @@ -306,7 +310,23 @@ export default function ReportModule() { }; } ) - : framesArray; + : [ + { + id, + frame: { + rowIndex: 0, + rowId: id, + handlePersistReportState, + handleRowFrameItemResize, + type: "rowFrame", + }, + content: [], + contentWidths: [], + contentHeights: [], + contentTypes: [], + structure: null, + }, + ]; setFramesArray(localFramesArray); }, [persistedReportState]); @@ -406,10 +426,27 @@ export default function ReportModule() { } }; - console.log(persistedReportState, "persistedReportState"); - const resetReport = () => { const id = v4(); + setFramesArray([ + { + id, + frame: { + rowIndex: 0, + rowId: id, + + handlePersistReportState, + handleRowFrameItemResize, + type: "rowFrame", + }, + content: [], + contentWidths: [], + contentHeights: [], + contentTypes: [], + structure: null, + }, + ]); + console.log("sup"); setPersistedReportState({ reportName: "Untitled report", headerDetails: { @@ -436,24 +473,7 @@ export default function ReportModule() { }, framesArray: JSON.stringify([]), }); - setFramesArray([ - { - id, - frame: { - rowIndex: 0, - rowId: id, - handlePersistReportState, - handleRowFrameItemResize, - type: "rowFrame", - }, - content: [], - contentWidths: [], - contentHeights: [], - contentTypes: [], - structure: null, - }, - ]); setHeaderDetails({ title: "", description: EditorState.createEmpty(), @@ -466,9 +486,12 @@ export default function ReportModule() { setReportName("Untitled report"); setRightPanelView("elements"); setRightPanelOpen(true); + setReportPreviewMode(false); }; const onSave = async () => { + setReportPreviewMode(false); + const action = page === "new" ? reportCreate : reportEdit; action({ token, From fd92f1e16281bfd81946b76d2ee2c8889b482108 Mon Sep 17 00:00:00 2001 From: okorie2 Date: Mon, 27 Nov 2023 08:02:43 +0100 Subject: [PATCH 12/13] feat:DX-898; handle and display chart error message --- .../components/common-chart/index.tsx | 6 +++- src/app/modules/chart-module/index.tsx | 29 +++++++++++++++---- .../chart-module/routes/customize/data.ts | 2 ++ .../chart-module/routes/customize/index.tsx | 2 ++ .../chart-module/routes/export/data.ts | 2 ++ .../chart-module/routes/export/index.tsx | 2 ++ .../chart-module/routes/filters/data.ts | 2 ++ .../chart-module/routes/filters/index.tsx | 2 ++ .../modules/chart-module/routes/lock/data.ts | 2 ++ .../chart-module/routes/lock/index.tsx | 2 ++ .../chart-module/routes/mapping/data.tsx | 2 ++ .../chart-module/routes/mapping/index.tsx | 2 ++ .../components/chart-wrapper/index.tsx | 12 ++++---- 13 files changed, 56 insertions(+), 11 deletions(-) diff --git a/src/app/modules/chart-module/components/common-chart/index.tsx b/src/app/modules/chart-module/components/common-chart/index.tsx index e32f483bd..ae033dbbb 100644 --- a/src/app/modules/chart-module/components/common-chart/index.tsx +++ b/src/app/modules/chart-module/components/common-chart/index.tsx @@ -14,6 +14,8 @@ interface Props { setVisualOptions: (value: any) => void; containerRef: React.RefObject; chartId?: string; + setNotFound: React.Dispatch>; + setChartErrorMessage: React.Dispatch>; renderedChartType?: | "echartsBarchart" | "echartsGeomap" @@ -100,9 +102,11 @@ export function CommonChart(props: Props) { visualOptions, `common-chart-render-container-${props.chartId || "1"}` ); - } catch (e) { + } catch (e: any) { if (process.env.NODE_ENV === "development") { console.log("chart error", e); + props.setNotFound(true); + props.setChartErrorMessage(e.message); } } } diff --git a/src/app/modules/chart-module/index.tsx b/src/app/modules/chart-module/index.tsx index 7304e9c71..52593dec2 100644 --- a/src/app/modules/chart-module/index.tsx +++ b/src/app/modules/chart-module/index.tsx @@ -87,6 +87,9 @@ export default function ChartModule() { chartFromAPI, dimensions, }); + const [chartErrorMessage, setChartErrorMessage] = React.useState( + "Something went wrong with rendering your chart!" + ); const isSaveLoading = useStoreState( (state) => state.charts.ChartCreate.loading ); @@ -337,6 +340,7 @@ export default function ChartModule() { }; }, [page, token]); + console.log(chartErrorMessage, "charterrror"); const errorComponent = () => { return (
@@ -378,12 +382,17 @@ export default function ChartModule() { {notFound ? (

- Something went wrong with rendering your chart! + {chartErrorMessage}
- - {" "} - {" "} - to try again. + {chartErrorMessage !== + "Sankey is a DAG, the original data has cycle!" && ( + <> + + {" "} + + to try again. + + )}

) : (

@@ -472,6 +481,8 @@ export default function ChartModule() { setVisualOptions={setVisualOptions} renderedChartSsr={activeRenderedChartSsr} renderedChartMappedData={renderedChartMappedData} + setChartErrorMessage={setChartErrorMessage} + setNotFound={setNotFound} /> @@ -484,6 +495,8 @@ export default function ChartModule() { setVisualOptions={setVisualOptions} renderedChartSsr={activeRenderedChartSsr} renderedChartMappedData={renderedChartMappedData} + setChartErrorMessage={setChartErrorMessage} + setNotFound={setNotFound} /> @@ -496,6 +509,8 @@ export default function ChartModule() { setVisualOptions={setVisualOptions} renderedChartSsr={activeRenderedChartSsr} renderedChartMappedData={renderedChartMappedData} + setChartErrorMessage={setChartErrorMessage} + setNotFound={setNotFound} /> @@ -507,6 +522,8 @@ export default function ChartModule() { setVisualOptions={setVisualOptions} renderedChartSsr={activeRenderedChartSsr} renderedChartMappedData={renderedChartMappedData} + setChartErrorMessage={setChartErrorMessage} + setNotFound={setNotFound} /> @@ -519,6 +536,8 @@ export default function ChartModule() { renderedChart={content} renderedChartSsr={activeRenderedChartSsr} renderedChartMappedData={renderedChartMappedData} + setChartErrorMessage={setChartErrorMessage} + setNotFound={setNotFound} /> diff --git a/src/app/modules/chart-module/routes/customize/data.ts b/src/app/modules/chart-module/routes/customize/data.ts index 8eaea4885..c00dafceb 100644 --- a/src/app/modules/chart-module/routes/customize/data.ts +++ b/src/app/modules/chart-module/routes/customize/data.ts @@ -7,4 +7,6 @@ export interface ChartBuilderCustomizeProps { renderedChartSsr: boolean; renderedChartMappedData: any; setVisualOptions: (value: any) => void; + setChartErrorMessage: React.Dispatch>; + setNotFound: React.Dispatch>; } diff --git a/src/app/modules/chart-module/routes/customize/index.tsx b/src/app/modules/chart-module/routes/customize/index.tsx index fafe7ab22..49114812f 100644 --- a/src/app/modules/chart-module/routes/customize/index.tsx +++ b/src/app/modules/chart-module/routes/customize/index.tsx @@ -69,6 +69,8 @@ function ChartBuilderCustomize(props: ChartBuilderCustomizeProps) { setVisualOptions={props.setVisualOptions} renderedChartSsr={props.renderedChartSsr} renderedChartMappedData={props.renderedChartMappedData} + setChartErrorMessage={props.setChartErrorMessage} + setNotFound={props.setNotFound} />

diff --git a/src/app/modules/chart-module/routes/export/data.ts b/src/app/modules/chart-module/routes/export/data.ts index f5d65eb8d..d41484f15 100644 --- a/src/app/modules/chart-module/routes/export/data.ts +++ b/src/app/modules/chart-module/routes/export/data.ts @@ -8,4 +8,6 @@ export interface ChartBuilderExportProps { renderedChartMappedData: any; setRawViz: React.Dispatch; setVisualOptions: (value: any) => void; + setChartErrorMessage: React.Dispatch>; + setNotFound: React.Dispatch>; } diff --git a/src/app/modules/chart-module/routes/export/index.tsx b/src/app/modules/chart-module/routes/export/index.tsx index 949dbaf4a..8919157ed 100644 --- a/src/app/modules/chart-module/routes/export/index.tsx +++ b/src/app/modules/chart-module/routes/export/index.tsx @@ -51,6 +51,8 @@ function ChartBuilderExport(props: ChartBuilderExportProps) { setVisualOptions={props.setVisualOptions} renderedChartSsr={props.renderedChartSsr} renderedChartMappedData={props.renderedChartMappedData} + setChartErrorMessage={props.setChartErrorMessage} + setNotFound={props.setNotFound} /> diff --git a/src/app/modules/chart-module/routes/filters/data.ts b/src/app/modules/chart-module/routes/filters/data.ts index a58cc2fc1..537880be2 100644 --- a/src/app/modules/chart-module/routes/filters/data.ts +++ b/src/app/modules/chart-module/routes/filters/data.ts @@ -6,4 +6,6 @@ export interface ChartBuilderFiltersProps { renderedChartSsr: boolean; renderedChartMappedData: any; setVisualOptions: (value: any) => void; + setChartErrorMessage: React.Dispatch>; + setNotFound: React.Dispatch>; } diff --git a/src/app/modules/chart-module/routes/filters/index.tsx b/src/app/modules/chart-module/routes/filters/index.tsx index ef30a9780..dda7c369b 100644 --- a/src/app/modules/chart-module/routes/filters/index.tsx +++ b/src/app/modules/chart-module/routes/filters/index.tsx @@ -65,6 +65,8 @@ function ChartBuilderFilters(props: ChartBuilderFiltersProps) { setVisualOptions={props.setVisualOptions} renderedChartSsr={props.renderedChartSsr} renderedChartMappedData={props.renderedChartMappedData} + setChartErrorMessage={props.setChartErrorMessage} + setNotFound={props.setNotFound} /> diff --git a/src/app/modules/chart-module/routes/lock/data.ts b/src/app/modules/chart-module/routes/lock/data.ts index 22a3d0cf8..610d05142 100644 --- a/src/app/modules/chart-module/routes/lock/data.ts +++ b/src/app/modules/chart-module/routes/lock/data.ts @@ -9,4 +9,6 @@ export interface ChartBuilderLockProps { renderedChartMappedData: any; setRawViz: React.Dispatch; setVisualOptions: (value: any) => void; + setChartErrorMessage: React.Dispatch>; + setNotFound: React.Dispatch>; } diff --git a/src/app/modules/chart-module/routes/lock/index.tsx b/src/app/modules/chart-module/routes/lock/index.tsx index abb84bf90..50024ef8a 100644 --- a/src/app/modules/chart-module/routes/lock/index.tsx +++ b/src/app/modules/chart-module/routes/lock/index.tsx @@ -50,6 +50,8 @@ function ChartBuilderLock(props: ChartBuilderLockProps) { setVisualOptions={props.setVisualOptions} renderedChartSsr={props.renderedChartSsr} renderedChartMappedData={props.renderedChartMappedData} + setChartErrorMessage={props.setChartErrorMessage} + setNotFound={props.setNotFound} /> diff --git a/src/app/modules/chart-module/routes/mapping/data.tsx b/src/app/modules/chart-module/routes/mapping/data.tsx index 7998b898e..b91e6fa89 100644 --- a/src/app/modules/chart-module/routes/mapping/data.tsx +++ b/src/app/modules/chart-module/routes/mapping/data.tsx @@ -6,6 +6,8 @@ export interface ChartBuilderMappingProps { renderedChart: string; renderedChartSsr: boolean; renderedChartMappedData: any; + setNotFound: React.Dispatch>; + setChartErrorMessage: React.Dispatch>; setVisualOptions: (value: any) => void; } diff --git a/src/app/modules/chart-module/routes/mapping/index.tsx b/src/app/modules/chart-module/routes/mapping/index.tsx index 2505acd09..fee7b22a0 100644 --- a/src/app/modules/chart-module/routes/mapping/index.tsx +++ b/src/app/modules/chart-module/routes/mapping/index.tsx @@ -194,6 +194,8 @@ function ChartBuilderMapping(props: ChartBuilderMappingProps) { setVisualOptions={props.setVisualOptions} renderedChartSsr={props.renderedChartSsr} renderedChartMappedData={props.renderedChartMappedData} + setChartErrorMessage={props.setChartErrorMessage} + setNotFound={props.setNotFound} /> )} diff --git a/src/app/modules/report-module/components/chart-wrapper/index.tsx b/src/app/modules/report-module/components/chart-wrapper/index.tsx index 3c76cdce7..1f3c0b473 100644 --- a/src/app/modules/report-module/components/chart-wrapper/index.tsx +++ b/src/app/modules/report-module/components/chart-wrapper/index.tsx @@ -21,6 +21,9 @@ export function ReportChartWrapper(props: Props) { const token = useSessionStorage("authToken", "")[0]; const containerRef = React.useRef(null); + const [chartErrorMessage, setChartErrorMessage] = React.useState( + "Something went wrong with loading your chart! Check your chart settings or data." + ); const loadChart = useStoreActions((actions) => actions.charts.ChartGet.fetch); const loadedChart = useStoreState( @@ -67,7 +70,7 @@ export function ReportChartWrapper(props: Props) { } }, [loadedChart]); - const { loadDataFromAPI, loading, notFound } = useChartsRawData({ + const { loadDataFromAPI, loading, notFound, setNotFound } = useChartsRawData({ visualOptions, setVisualOptions, setChartFromAPI, @@ -124,10 +127,7 @@ export function ReportChartWrapper(props: Props) { `} > -

- Something went wrong with loading your chart! Check your chart - settings or data. -

+

{chartErrorMessage}

); } @@ -203,6 +203,8 @@ export function ReportChartWrapper(props: Props) { setVisualOptions={setVisualOptions} renderedChartType={renderedChartType} renderedChartMappedData={renderedChartMappedData} + setChartErrorMessage={setChartErrorMessage} + setNotFound={setNotFound} /> ); From 8e1eccd667d06a5c63c3e9465ad21ab520942808 Mon Sep 17 00:00:00 2001 From: Stefanos Hadjipetrou Date: Tue, 28 Nov 2023 11:27:53 +0200 Subject: [PATCH 13/13] chore: remove unecessary console logs --- .../upload-steps/addDatasetFragment.tsx | 8 ++++++-- src/app/modules/chart-module/index.tsx | 10 ++++++++-- .../chart-module/routes/text/RichEditor/buttons.tsx | 2 +- src/app/modules/common/subheader-toolbar/index.tsx | 6 +++++- .../sub-modules/theme-builder/views/mapping/index.tsx | 1 - src/app/modules/report-module/index.tsx | 1 - 6 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/app/fragments/datasets-fragment/upload-steps/addDatasetFragment.tsx b/src/app/fragments/datasets-fragment/upload-steps/addDatasetFragment.tsx index b8e23eb1a..355ba30b7 100644 --- a/src/app/fragments/datasets-fragment/upload-steps/addDatasetFragment.tsx +++ b/src/app/fragments/datasets-fragment/upload-steps/addDatasetFragment.tsx @@ -46,7 +46,9 @@ export default function AddDatasetFragment(props: DragAndDropProps) { }, responseType: "blob", // important }).then((response) => { - console.log("response", response); + if (process.env.NODE_ENV === "development") { + console.log("response", response); + } const b = response.data; const gfile = new File([b], file.name, { type: "text/csv" }); props.setFile(gfile); @@ -97,7 +99,9 @@ export default function AddDatasetFragment(props: DragAndDropProps) { token: "", setSelectFolderEnabled: true, callbackFunction: (d: PickerCallback) => { - console.log(d); + if (process.env.NODE_ENV === "development") { + console.log(d); + } setFileData(d); }, }); diff --git a/src/app/modules/chart-module/index.tsx b/src/app/modules/chart-module/index.tsx index 52593dec2..bbb5da6d7 100644 --- a/src/app/modules/chart-module/index.tsx +++ b/src/app/modules/chart-module/index.tsx @@ -266,7 +266,14 @@ export default function ChartModule() { function clearChartBuilder() { clear().then(() => { - console.log("End of reset.", "--visualOptions", visualOptions, chartName); + if (process.env.NODE_ENV === "development") { + console.log( + "End of reset.", + "--visualOptions", + visualOptions, + chartName + ); + } }); } @@ -340,7 +347,6 @@ export default function ChartModule() { }; }, [page, token]); - console.log(chartErrorMessage, "charterrror"); const errorComponent = () => { return (
diff --git a/src/app/modules/chart-module/routes/text/RichEditor/buttons.tsx b/src/app/modules/chart-module/routes/text/RichEditor/buttons.tsx index 7d73052b5..eca265e87 100644 --- a/src/app/modules/chart-module/routes/text/RichEditor/buttons.tsx +++ b/src/app/modules/chart-module/routes/text/RichEditor/buttons.tsx @@ -91,7 +91,7 @@ export const ItalicButton = createInlineStyleButton({ fill="none" xmlns="http://www.w3.org/2000/svg" > - + )` +export const InfoSnackbar = styled((props) => { + const { gap, ...otherProps } = props; + + return ; +})` && { bottom: 40px; } diff --git a/src/app/modules/data-themes-module/sub-modules/theme-builder/views/mapping/index.tsx b/src/app/modules/data-themes-module/sub-modules/theme-builder/views/mapping/index.tsx index 8287dc525..d22363e60 100644 --- a/src/app/modules/data-themes-module/sub-modules/theme-builder/views/mapping/index.tsx +++ b/src/app/modules/data-themes-module/sub-modules/theme-builder/views/mapping/index.tsx @@ -319,7 +319,6 @@ function DataThemesBuilderMappingDimension( const onMove = React.useCallback( (dragIndex: number, hoverIndex: number) => { - console.log("onMove"); let nextConfig; if (dimensionMapping.config) { nextConfig = { diff --git a/src/app/modules/report-module/index.tsx b/src/app/modules/report-module/index.tsx index a61e754d4..5a708f15c 100644 --- a/src/app/modules/report-module/index.tsx +++ b/src/app/modules/report-module/index.tsx @@ -446,7 +446,6 @@ export default function ReportModule() { structure: null, }, ]); - console.log("sup"); setPersistedReportState({ reportName: "Untitled report", headerDetails: {