Roi time series select colour change

frontend/src/components/Workspace/FlowChart/Dialog/AlgorithmOutputDialog.tsx

@@ -59,7 +59,7 @@ export const AlgorithmOutputDialog = memo(function AlgorithmOutputDialog({
         nodeId={nodeId}
       />
       <DialogContent dividers sx={{ pt: 1, px: 2 }}>
-        <BoxFilterProvider>
+        <BoxFilterProvider nodeId={nodeId}>
           {open && <OutputViewer nodeId={nodeId} />}
           {open && dialogFilterNodeId ? <BoxFilter nodeId={nodeId} /> : null}
         </BoxFilterProvider>

frontend/src/components/Workspace/FlowChart/Dialog/BoxFilter.tsx

@@ -186,10 +186,6 @@ const BoxFilter = ({ nodeId }: { nodeId: string }) => {
     return { dim1: dim1?.filter(Boolean), roi: roi?.filter(Boolean) }
   }, [filterParam])
 
-  useEffect(() => {
-    setFilterParam(filterSelector)
-  }, [filterSelector, setFilterParam])
-
   const getData = useCallback(
     (value?: TDim[]) =>
       value

frontend/src/components/Workspace/FlowChart/Dialog/FilterContext.tsx

@@ -4,32 +4,61 @@ import {
   PropsWithChildren,
   SetStateAction,
   useContext,
+  useEffect,
+  useMemo,
   useState,
 } from "react"
+import { useSelector, useDispatch, shallowEqual } from "react-redux"
 
+import { DialogContext } from "components/Workspace/FlowChart/Dialog/DialogContext"
+import { selectAlgorithmDataFilterParam } from "store/slice/AlgorithmNode/AlgorithmNodeSelectors"
 import { TDataFilterParam } from "store/slice/AlgorithmNode/AlgorithmNodeType"
+import { getRoiData } from "store/slice/DisplayData/DisplayDataActions"
+import { selectOutputFilePathCellRoi } from "store/slice/Pipeline/PipelineSelectors"
+import { selectCurrentWorkspaceId } from "store/slice/Workspace/WorkspaceSelector"
+import { AppDispatch } from "store/store"
 
 const BoxFilterContext = createContext<{
   filterParam?: TDataFilterParam
-  setFilterParam: Dispatch<SetStateAction<TDataFilterParam | undefined>>
-  setRoiPath: Dispatch<SetStateAction<string>>
   roiPath: string
+  setFilterParam: Dispatch<SetStateAction<TDataFilterParam | undefined>>
 }>({
   filterParam: undefined,
   setFilterParam: () => null,
   roiPath: "",
-  setRoiPath: () => null,
 })
 
 export const useBoxFilter = () => useContext(BoxFilterContext)
 
-export const BoxFilterProvider = ({ children }: PropsWithChildren) => {
-  const [filterParam, setFilterParam] = useState<TDataFilterParam>()
-  const [roiPath, setRoiPath] = useState<string>("")
+export const BoxFilterProvider = ({
+  children,
+  nodeId,
+}: PropsWithChildren<{ nodeId: string }>) => {
+  const filterSelector = useSelector(
+    selectAlgorithmDataFilterParam(nodeId),
+    shallowEqual,
+  )
+  const [filterParam, setFilterParam] = useState<TDataFilterParam | undefined>(
+    filterSelector,
+  )
+  const { isOutput } = useContext(DialogContext)
+  const dispatch = useDispatch<AppDispatch>()
+  const workspaceId = useSelector(selectCurrentWorkspaceId)
+  const isExistFilterRoi = useMemo(
+    () => filterParam?.roi?.length,
+    [filterParam?.roi?.length],
+  )
+  const path = useSelector(selectOutputFilePathCellRoi(nodeId))
+
+  useEffect(() => {
+    if (isOutput && path && isExistFilterRoi && workspaceId) {
+      dispatch(getRoiData({ workspaceId, path }))
+    }
+  }, [dispatch, path, isExistFilterRoi, isOutput, workspaceId])
 
   return (
     <BoxFilterContext.Provider
-      value={{ filterParam, setFilterParam, roiPath, setRoiPath }}
+      value={{ filterParam, setFilterParam, roiPath: path }}
     >
       {children}
     </BoxFilterContext.Provider>

frontend/src/components/Workspace/Visualize/Editor/TimeSeriesItemEditor.tsx

@@ -50,6 +50,7 @@ import {
   setTimeSeriesItemZeroLine,
   setTimeSeriesItemDrawOrderList,
   changeRangeUnit,
+  setClickedData,
 } from "store/slice/VisualizeItem/VisualizeItemSlice"
 import { AppDispatch } from "store/store"
 import { arrayEqualityFn } from "utils/EqualityUtils"
@@ -290,6 +291,14 @@ const LegendSelect: FC = () => {
         drawOrderList: newDrawOrderList,
       }),
     )
+    dispatch(
+      setClickedData({
+        itemId,
+        clickedDataId: event.target.checked ? index : null,
+      }),
+    ),
+      // eslint-disable-next-line no-console
+      console.log("#############\n In TimeSeriesItemEditor.tsx, clickedDataId")
 
     if (filePath !== null) {
       dispatch(getTimeSeriesDataById({ path: filePath, index: index }))