[No.129]Function with the ability to select cells (Data filter B…

frontend/src/api/run/Run.ts

@@ -1,6 +1,7 @@
 import type { Edge, Node } from "reactflow"
 
 import { BASE_URL } from "const/API"
+import { TDataFilterParam } from "store/slice/AlgorithmNode/AlgorithmNodeType"
 import type {
   AlgorithmNodeData,
   InputNodeData,
@@ -34,13 +35,15 @@ export interface InputNodePostData extends InputNodeData {
   param?: {
     [key: string]: unknown
   }
+  dataFilterParam?: TDataFilterParam
   hdf5Path?: string
   matPath?: string
 }
 
 export interface AlgorithmNodePostData extends AlgorithmNodeData {
   path: string
   param: ParamMap
+  dataFilterParam?: TDataFilterParam
 }
 
 export async function runApi(

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

@@ -1,7 +1,17 @@
-import { memo, SyntheticEvent, useEffect, useState } from "react"
+import {
+  ChangeEvent,
+  memo,
+  SyntheticEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
 import { useDispatch, useSelector } from "react-redux"
 
+import styled from "@emotion/styled"
 import CloseIcon from "@mui/icons-material/Close"
+import { Input, InputProps } from "@mui/material"
 import Box from "@mui/material/Box"
 import Dialog from "@mui/material/Dialog"
 import DialogContent from "@mui/material/DialogContent"
@@ -11,7 +21,12 @@ import Tab from "@mui/material/Tab"
 import Tabs, { tabsClasses } from "@mui/material/Tabs"
 
 import { DisplayDataItem } from "components/Workspace/Visualize/DisplayDataItem"
-import { selectAlgorithmName } from "store/slice/AlgorithmNode/AlgorithmNodeSelectors"
+import {
+  selectAlgorithmDataFilterParam,
+  selectAlgorithmName,
+} from "store/slice/AlgorithmNode/AlgorithmNodeSelectors"
+import { updateFilterParams } from "store/slice/AlgorithmNode/AlgorithmNodeSlice"
+import { TDim } from "store/slice/AlgorithmNode/AlgorithmNodeType"
 import { NodeIdProps } from "store/slice/FlowElement/FlowElementType"
 import {
   selectPipelineNodeResultOutputKeyList,
@@ -29,12 +44,14 @@ interface AlgorithmOutputDialogProps {
   open: boolean
   onClose: () => void
   nodeId: string
+  allowFilter?: boolean
 }
 
 export const AlgorithmOutputDialog = memo(function AlgorithmOutputDialog({
   open,
   onClose,
   nodeId,
+  allowFilter,
 }: AlgorithmOutputDialogProps) {
   const dispatch = useDispatch()
   const closeFn = () => {
@@ -43,39 +60,36 @@ export const AlgorithmOutputDialog = memo(function AlgorithmOutputDialog({
   }
   return (
     <Dialog open={open} onClose={closeFn} fullWidth>
-      <TitleWithCloseButton onClose={closeFn} nodeId={nodeId} />
-      <DialogContent
-        dividers
-        sx={{
-          pt: 1,
-          px: 2,
-        }}
-      >
+      <TitleWithCloseButton
+        title={allowFilter ? "Filter Data" : undefined}
+        onClose={closeFn}
+        nodeId={nodeId}
+      />
+      <DialogContent dividers sx={{ pt: 1, px: 2 }}>
         {open && <OutputViewer nodeId={nodeId} />}
+        {open && allowFilter ? <BoxFilter nodeId={nodeId} /> : null}
       </DialogContent>
     </Dialog>
   )
 })
 
 interface TitleWithCloseButtonProps extends NodeIdProps {
   onClose: () => void
+  title?: string
 }
 
 const TitleWithCloseButton = memo(function TitleWithCloseButtonProps({
   nodeId,
   onClose,
+  title,
 }: TitleWithCloseButtonProps) {
   const nodeName = useSelector(selectAlgorithmName(nodeId))
   return (
     <DialogTitle sx={{ m: 0, p: 2 }}>
-      Output of {nodeName}
+      {title ?? `Output of ${nodeName}`}
       <IconButton
         onClick={onClose}
-        sx={{
-          position: "absolute",
-          right: 8,
-          top: 10,
-        }}
+        sx={{ position: "absolute", right: 8, top: 10 }}
       >
         <CloseIcon />
       </IconButton>
@@ -101,6 +115,141 @@ const OutputViewer = memo(function OutputViewer({ nodeId }: NodeIdProps) {
   )
 })
 
+const InputDim = (
+  props: { title: string } & InputProps & {
+      onChangeInput?: (value?: string) => void
+    },
+) => {
+  const { title, onChangeInput, ...p } = props
+  const [value, setValue] = useState(p.value)
+  const [valuePassed, setValuePassed] = useState<string>(p.value as string)
+
+  useEffect(() => {
+    setValue(p.value)
+  }, [p.value])
+
+  const onChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    const regex = /[^0-9,:]/g
+    const value = event.target.value.replace(regex, "")
+    const regexTest = /^(\d+:\d+)(,\d+:\d+)*$/
+    if (regexTest.test(value) || !value) setValuePassed(value)
+    setValue(value)
+  }, [])
+
+  const _onBlur = useCallback(() => {
+    setValue(valuePassed)
+    onChangeInput?.(valuePassed)
+  }, [onChangeInput, valuePassed])
+
+  return (
+    <Box>
+      <Box mb={1}>{title}</Box>
+      <InputStyled
+        {...p}
+        error={value !== valuePassed}
+        value={value}
+        onChange={onChange}
+        onBlur={_onBlur}
+      />
+    </Box>
+  )
+}
+
+const InputStyled = styled(Input, {
+  shouldForwardProp: (props) => props !== "error",
+})<{ error?: boolean }>`
+  input {
+    text-align: center;
+  }
+  &::after {
+    border-color: ${({ error }) => (error ? "#ff0000" : "#1976d2")};
+  }
+`
+
+const BoxFilter = ({ nodeId }: { nodeId: string }) => {
+  const dataFilterParams = useSelector(selectAlgorithmDataFilterParam(nodeId))
+  const dispatch = useDispatch()
+
+  const getData = useCallback(
+    (value?: TDim[]) =>
+      value
+        ?.map((r) => {
+          if (!isNaN(r.start!) && !isNaN(r.end!)) return `${r.start}:${r.end}`
+          if (!isNaN(r.start!)) return r.start
+          if (!isNaN(r.end!)) return r.end
+          return ""
+        })
+        .toString(),
+    [],
+  )
+
+  const { dim1, dim2, dim3, roi } = useMemo(() => {
+    return {
+      dim1: getData(dataFilterParams?.dim1),
+      dim2: getData(dataFilterParams?.dim2),
+      dim3: getData(dataFilterParams?.dim3),
+      roi: getData(dataFilterParams?.roi),
+    }
+  }, [dataFilterParams, getData])
+
+  const onChange = useCallback(
+    (name: string, value?: string) => {
+      const values = value?.split(",").map((v) => {
+        if (!v) return ""
+        const array = v.split(":")
+        const dim: TDim = {}
+        if (array[0]) dim.start = Number(array[0])
+        if (array[1]) dim.end = Number(array[1])
+        return dim
+      })
+
+      dispatch(
+        updateFilterParams({
+          nodeId,
+          dataFilterParam: {
+            ...dataFilterParams,
+            [name]: values?.filter(Boolean),
+          },
+        }),
+      )
+    },
+    [dataFilterParams, dispatch, nodeId],
+  )
+
+  return (
+    <Box display="flex" gap={2} textAlign="center" pt={2}>
+      <InputDim
+        title="Dim 1"
+        name="dim1"
+        placeholder="1:128"
+        value={dim1 || ""}
+        onChangeInput={(v) => onChange("dim1", v)}
+      />
+      <InputDim
+        title="Dim 2"
+        name="dim2"
+        placeholder="1:128"
+        value={dim2 || ""}
+        onChangeInput={(v) => onChange("dim2", v)}
+      />
+      <InputDim
+        title="Dim 3"
+        name="dim3"
+        placeholder="1:1000"
+        value={dim3 || ""}
+        onChangeInput={(v) => onChange("dim4", v)}
+      />
+      <InputDim
+        title="ROI"
+        name="roi"
+        placeholder="1:23,50:52"
+        value={roi || ""}
+        onChangeInput={(v) => onChange("roi", v)}
+      />
+    </Box>
+  )
+}
+
 interface OutputSelectTabsProps {
   selectedOutoutKey: string
   outputKeyList: string[]
@@ -165,12 +314,7 @@ const DisplayDataView = memo(function DisplayDataView({
     }
   }, [dispatch, nodeId, filePath, dataType, itemId])
   return (
-    <Box
-      sx={{
-        mx: 1,
-        my: 2,
-      }}
-    >
+    <Box sx={{ mx: 1, my: 2 }}>
       {itemId != null && <DisplayDataItem itemId={itemId} />}
     </Box>
   )

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

@@ -35,10 +35,12 @@ export const DialogContext = createContext<{
   onOpenInputUrlDialog: (value: FileInputUrl) => void
   onOpenClearWorkflowIdDialog: (value: ClearWorkflowIdDialogValue) => void
   onMessageError: (value: ErrorDialogValue) => void
+  onOpenFilterDialog: (nodeId: string) => void
 }>({
   onOpenOutputDialog: () => null,
   onOpenFileSelectDialog: () => null,
   onOpenClearWorkflowIdDialog: () => null,
   onOpenInputUrlDialog: () => null,
   onMessageError: () => null,
+  onOpenFilterDialog: () => null,
 })

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

@@ -75,6 +75,7 @@ const FlowChart = memo(function FlowChart(props: UseRunPipelineReturnType) {
   })
   const [fileViaUrl, setFileViaUrl] = useState("")
   const [errorUrl, setErrorUrl] = useState("")
+  const [dialogFilterNodeId, setFilterDialogNodeId] = useState("")
 
   const { enqueueSnackbar } = useSnackbar()
 
@@ -141,6 +142,7 @@ const FlowChart = memo(function FlowChart(props: UseRunPipelineReturnType) {
           onOpenClearWorkflowIdDialog: setDialogClearWorkflowId,
           onOpenInputUrlDialog: setDialogViaUrl,
           onMessageError: setMessageError,
+          onOpenFilterDialog: setFilterDialogNodeId,
         }}
       >
         <DndProvider backend={HTML5Backend}>
@@ -167,6 +169,14 @@ const FlowChart = memo(function FlowChart(props: UseRunPipelineReturnType) {
                 onClose={() => setDialogNodeId("")}
               />
             )}
+            {dialogFilterNodeId && (
+              <AlgorithmOutputDialog
+                nodeId={dialogFilterNodeId}
+                open
+                onClose={() => setFilterDialogNodeId("")}
+                allowFilter
+              />
+            )}
             {dialogFile.open && (
               <FileSelectDialog
                 multiSelect={dialogFile.multiSelect}