Merge branch 'fix/bugs_0229' into develop

apps/builder/src/page/App/Module/LeftPanel/Components/DebugButton/index.tsx

@@ -6,11 +6,11 @@ import { useDispatch, useSelector } from "react-redux"
 import { Badge, BugIcon, Trigger, getColor } from "@illa-design/react"
 import { isOpenDebugger } from "@/redux/config/configSelector"
 import { configActions } from "@/redux/config/configSlice"
-import { getExecutionDebuggerData } from "@/redux/currentApp/executionTree/executionSelector"
+import { getExecutionError } from "@/redux/currentApp/executionTree/executionSelector"
 import { trackInEditor } from "@/utils/mixpanelHelper"
 
 const DebugButton: FC = () => {
-  const debuggerData = useSelector(getExecutionDebuggerData)
+  const debuggerData = useSelector(getExecutionError)
   const debuggerVisible = useSelector(isOpenDebugger)
 
   const debugMessageNumber = debuggerData

apps/builder/src/page/App/components/Debugger/index.tsx

@@ -5,7 +5,7 @@ import { DragBar } from "@/page/App/components/Actions/DragBar"
 import { ErrorItem } from "@/page/App/components/Debugger/components/ErrorItem"
 import { isOpenDebugger } from "@/redux/config/configSelector"
 import { configActions } from "@/redux/config/configSlice"
-import { getExecutionDebuggerData } from "@/redux/currentApp/executionTree/executionSelector"
+import { getExecutionError } from "@/redux/currentApp/executionTree/executionSelector"
 import {
   applyDebuggerStyle,
   containerStyle,
@@ -18,7 +18,7 @@ const DebuggerDefaultHeight = 300
 export const Debugger: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
   const dispatch = useDispatch()
   const panelRef = useRef<HTMLDivElement>(null)
-  const debuggerData = useSelector(getExecutionDebuggerData)
+  const debuggerData = useSelector(getExecutionError)
   const debuggerVisible = useSelector(isOpenDebugger)
 
   const handleClickDebuggerIcon = useCallback(() => {

apps/builder/src/page/App/components/InspectPanel/PanelSetters/ChartSetter/chartKeysDynamicSelectSetter.tsx

@@ -119,11 +119,12 @@ const ChartKeysDynamicSelectSetter: FC<ChartDataSourceSetterProps> = (
     [generateNewDatasets, handleUpdateMultiAttrDSL, value],
   )
 
-  const isError = useSelector<RootState, boolean>((state) => {
-    const errors = getExecutionError(state)
-    const thisError = get(errors, `${widgetDisplayName}.${attrName}JS`)
-    return thisError?.length > 0
-  })
+  const executionErrors = useSelector(getExecutionError)
+  const isError = useMemo(() => {
+    return (
+      (executionErrors[`${widgetDisplayName}.${attrName}JS`] ?? [])?.length > 0
+    )
+  }, [attrName, executionErrors, widgetDisplayName])
 
   const isDynamic = useMemo(() => {
     const dataSourceMode = get(

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnMappedSelect/index.tsx

@@ -56,11 +56,13 @@ const ColumnMappedSelect: FC<ColumnMappedSelectProps> = (props) => {
       "select",
     ) === "dynamic"
 
-  const isError = useSelector<RootState, boolean>((state) => {
-    const errors = getExecutionError(state)
-    const thisError = get(errors, `${widgetDisplayName}.${attrName}JS`)
-    return thisError?.length > 0
-  })
+  const executionErrors = useSelector(getExecutionError)
+  const isError = useMemo(() => {
+    return (
+      (executionErrors[`${widgetDisplayName}.${attrName}JS`] ?? [])?.length > 0
+    )
+  }, [attrName, executionErrors, widgetDisplayName])
+
   const handleClickFxButton = useCallback(() => {
     if (isDynamic) {
       handleUpdateDsl(`${widgetDisplayName}.${attrName}JS`, "select")

apps/builder/src/page/App/components/InspectPanel/PanelSetters/SelectSetter/dataSourceSelectSetter.tsx

@@ -13,11 +13,13 @@ import { VALIDATION_TYPES } from "@/utils/validationFactory"
 const DataSourceSetter: FC<ChartDataSourceSetterProps> = (props) => {
   const { handleUpdateDsl, widgetDisplayName, labelName, labelDesc } = props
   const actions = useSelector(getActionList)
-  const isError = useSelector<RootState, boolean>((state) => {
-    const errors = getExecutionError(state)
-    const thisError = get(errors, `${widgetDisplayName}.dataSource`)
-    return thisError?.length > 0
-  })
+  const executionErrors = useSelector(getExecutionError)
+  const isError = useMemo(() => {
+    return (
+      (executionErrors[`${widgetDisplayName}.dataSource`] ?? [])?.length > 0
+    )
+  }, [executionErrors, widgetDisplayName])
+
   const targetComponentProps = useSelector<RootState, Record<string, any>>(
     (rootState) => {
       return searchDSLByDisplayName(widgetDisplayName, rootState)?.props || {}

apps/builder/src/page/App/components/InspectPanel/PanelSetters/SelectSetter/dynamicSelectSetter.tsx

@@ -1,5 +1,5 @@
 import { get } from "lodash-es"
-import { FC, useCallback } from "react"
+import { FC, useCallback, useMemo } from "react"
 import { useSelector } from "react-redux"
 import BaseDynamicSelect from "@/page/App/components/InspectPanel/PanelSetters/SelectSetter/baseDynamicSelect"
 import { publicPaddingStyle } from "@/page/App/components/InspectPanel/style"
@@ -37,11 +37,12 @@ const DynamicSelectSetter: FC<BaseSelectSetterProps> = (props) => {
     [handleUpdateMultiAttrDSL],
   )
 
-  const isError = useSelector<RootState, boolean>((state) => {
-    const errors = getExecutionError(state)
-    const thisError = get(errors, `${widgetDisplayName}.${attrName}JS`)
-    return thisError?.length > 0
-  })
+  const executionErrors = useSelector(getExecutionError)
+  const isError = useMemo(() => {
+    return (
+      (executionErrors[`${widgetDisplayName}.${attrName}JS`] ?? [])?.length > 0
+    )
+  }, [attrName, executionErrors, widgetDisplayName])
 
   const isDynamic =
     get(

apps/builder/src/page/App/components/InspectPanel/PanelSetters/TableSetter/tableDataSourceSelectSetter.tsx

@@ -31,11 +31,14 @@ const TableDataSourceSelectSetter: FC<TableDataSourceSetterProps> = (props) => {
 
   const actions = useSelector(getActionList)
   const executionResult = useSelector(getExecutionResult)
-  const isError = useSelector<RootState, boolean>((state) => {
-    const errors = getExecutionError(state)
-    const thisError = get(errors, `${widgetDisplayName}.dataSource`)
-    return thisError?.length > 0
-  })
+
+  const executionErrors = useSelector(getExecutionError)
+  const isError = useMemo(() => {
+    return (
+      (executionErrors[`${widgetDisplayName}.dataSource`] ?? [])?.length > 0
+    )
+  }, [executionErrors, widgetDisplayName])
+
   const targetComponentProps = useSelector<RootState, Record<string, any>>(
     (rootState) => {
       return searchDSLByDisplayName(widgetDisplayName, rootState)?.props || {}

apps/builder/src/page/App/components/ScaleSquare/components/ResizingAndDragContainer/index.tsx

@@ -93,8 +93,13 @@ export const ResizingAndDragContainer: FC<ResizingAndDragContainerProps> = (
   const currentUserID = useSelector(getCurrentUserId)
   const errors = useSelector(getExecutionError)
   const hasError = useMemo(() => {
-    const widgetErrors = errors[displayName] ?? {}
-    return Object.keys(widgetErrors).length > 0
+    const keys = Object.keys(errors)
+    return (
+      keys.length > 0 &&
+      keys.some((key) => {
+        return key.startsWith(displayName)
+      })
+    )
   }, [displayName, errors])
   const resizingIDs = useSelector(getResizingComponentIDs)
   const isResizingCurrent = resizingIDs.includes(displayName)

apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/index.tsx

@@ -27,11 +27,16 @@ const WrapperContainer: FC<WrapperContainerProps> = (props) => {
   }, [displayName, selectedComponents])
 
   const realProps: Record<string, any> = get(executionResult, displayName, {})
-
   const hasError = useMemo(() => {
-    const widgetErrors = errors[displayName] ?? {}
-    return Object.keys(widgetErrors).length > 0
+    const keys = Object.keys(errors)
+    return (
+      keys.length > 0 &&
+      keys.some((key) => {
+        return key.startsWith(displayName)
+      })
+    )
   }, [displayName, errors])
+
   const isAutoLimitedMode = realProps?.dynamicHeight === "limited"
   const isOverLap =
     isAutoLimitedMode &&

apps/builder/src/page/App/components/ScaleSquare/utils/useScaleStateSelector.ts

@@ -7,8 +7,13 @@ import { getScaleSquareState } from "../components/ResizingAndDragContainer/util
 export const useScaleStateSelector = (displayName: string) => {
   const errors = useSelector(getExecutionError)
   const hasError = useMemo(() => {
-    const widgetErrors = errors[displayName] ?? {}
-    return Object.keys(widgetErrors).length > 0
+    const keys = Object.keys(errors)
+    return (
+      keys.length > 0 &&
+      keys.some((key) => {
+        return key.startsWith(displayName)
+      })
+    )
   }, [displayName, errors])
 
   const isEditMode = useSelector(getIsILLAEditMode)

apps/builder/src/redux/currentApp/executionTree/executionListener.ts

@@ -31,7 +31,6 @@ const asyncExecutionDataToRedux = (
   const evaluatedTree = executionResult.evaluatedTree
   const dependencyMap = executionResult.dependencyTree
   const independencyMap = executionResult.independencyTree
-  const debuggerData = executionResult.debuggerData
   const updates = diff(oldExecutionTree, evaluatedTree) || []
   listenerApi.dispatch(
     executionActions.setExecutionResultReducer({
@@ -53,11 +52,6 @@ const asyncExecutionDataToRedux = (
       ...errorTree,
     }),
   )
-  listenerApi.dispatch(
-    executionActions.setExecutionDebuggerDataReducer({
-      ...debuggerData,
-    }),
-  )
 }
 
 async function handleStartExecution(
@@ -104,23 +98,19 @@ async function handleStartExecutionOnCanvas(
       executionTree.updateTreeFromExecution(oldExecutionTree)
     const evaluatedTree = executionResult.evaluatedTree
     const errorTree = executionResult.errorTree
-    const debuggerData = executionResult.debuggerData
     const updates = diff(oldExecutionTree, evaluatedTree) || []
-    listenerApi.dispatch(
-      executionActions.setExecutionResultReducer({
-        updates,
-      }),
-    )
-    listenerApi.dispatch(
-      executionActions.setExecutionErrorReducer({
-        ...errorTree,
-      }),
-    )
-    listenerApi.dispatch(
-      executionActions.setExecutionDebuggerDataReducer({
-        ...debuggerData,
-      }),
-    )
+    if (updates.length > 0) {
+      listenerApi.dispatch(
+        executionActions.setExecutionResultReducer({
+          updates,
+        }),
+      )
+      listenerApi.dispatch(
+        executionActions.setExecutionErrorReducer({
+          ...errorTree,
+        }),
+      )
+    }
   }
 }
 

apps/builder/src/redux/currentApp/executionTree/executionReducer.ts

@@ -55,13 +55,6 @@ export const setExecutionErrorReducer: CaseReducer<
   state.error = action.payload
 }
 
-export const setExecutionDebuggerDataReducer: CaseReducer<
-  ExecutionState,
-  PayloadAction<Record<string, ErrorShape[]>>
-> = (state, action) => {
-  state.debuggerData = action.payload
-}
-
 export const startExecutionReducer: CaseReducer<
   ExecutionState,
   PayloadAction<void>

apps/builder/src/redux/currentApp/executionTree/executionSelector.ts

@@ -56,10 +56,6 @@ export const getExecutionError = createSelector(
   (execution) => execution.error ?? {},
 )
 
-export const getExecutionDebuggerData = createSelector(
-  [getExecution],
-  (execution) => execution.debuggerData ?? {},
-)
 export const IGNORE_WIDGET_TYPES = new Set<string>([
   "PAGE_NODE",
   "SECTION_NODE",

apps/builder/src/redux/currentApp/executionTree/executionSlice.ts

@@ -3,7 +3,6 @@ import {
   clearLocalStorageInExecutionReducer,
   resetExecutionResultReducer,
   setDependenciesReducer,
-  setExecutionDebuggerDataReducer,
   setExecutionErrorReducer,
   setExecutionResultReducer,
   setGlobalStateInExecutionReducer,
@@ -26,7 +25,6 @@ const executionSlice = createSlice({
     setIndependenciesReducer,
     setExecutionResultReducer,
     setExecutionErrorReducer,
-    setExecutionDebuggerDataReducer,
     startExecutionReducer,
     updateExecutionByDisplayNameReducer,
     updateExecutionByMultiDisplayNameReducer,

apps/builder/src/redux/currentApp/executionTree/executionState.ts

@@ -19,15 +19,13 @@ export interface ExecutionState {
   dependencies: DependenciesState
   result: Record<string, any>
   error: Record<string, ErrorShape[]>
-  debuggerData: Record<string, ErrorShape[]>
   independencies: DependenciesState
 }
 
 export const executionInitialState: ExecutionState = {
   dependencies: {},
   result: {},
   error: {},
-  debuggerData: {},
   independencies: {},
 }