add metadata filter

packages/ui/src/ui-component/json/JsonEditor.js

@@ -0,0 +1,53 @@
+import { useState } from 'react'
+import PropTypes from 'prop-types'
+import { FormControl } from '@mui/material'
+import ReactJson from 'react-json-view'
+
+export const JsonEditorInput = ({ value, onChange, disabled = false, isDarkMode = false }) => {
+    const [myValue, setMyValue] = useState(value ? JSON.parse(value) : {})
+
+    return (
+        <>
+            <FormControl sx={{ mt: 1, width: '100%' }} size='small'>
+                {disabled && (
+                    <ReactJson
+                        theme={isDarkMode ? 'ocean' : 'rjv-default'}
+                        style={{ padding: 10, borderRadius: 10 }}
+                        src={myValue}
+                        name={null}
+                        quotesOnKeys={false}
+                        displayDataTypes={false}
+                    />
+                )}
+                {!disabled && (
+                    <ReactJson
+                        theme={isDarkMode ? 'ocean' : 'rjv-default'}
+                        style={{ padding: 10, borderRadius: 10 }}
+                        src={myValue}
+                        name={null}
+                        quotesOnKeys={false}
+                        displayDataTypes={false}
+                        onEdit={(edit) => {
+                            setMyValue(edit.updated_src)
+                            onChange(JSON.stringify(edit.updated_src))
+                        }}
+                        onAdd={() => {
+                            //console.log(add)
+                        }}
+                        onDelete={(deleteobj) => {
+                            setMyValue(deleteobj.updated_src)
+                            onChange(JSON.stringify(deleteobj.updated_src))
+                        }}
+                    />
+                )}
+            </FormControl>
+        </>
+    )
+}
+
+JsonEditorInput.propTypes = {
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    disabled: PropTypes.bool,
+    isDarkMode: PropTypes.bool
+}

packages/ui/src/views/canvas/NodeInputHandler.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
 import { Handle, Position, useUpdateNodeInternals } from 'reactflow'
 import { useEffect, useRef, useState, useContext } from 'react'
+import { useSelector } from 'react-redux'
 
 // material-ui
 import { useTheme, styled } from '@mui/material/styles'
@@ -15,6 +16,7 @@ import { File } from 'ui-component/file/File'
 import { SwitchInput } from 'ui-component/switch/Switch'
 import { flowContext } from 'store/context/ReactFlowContext'
 import { isValidConnection, getAvailableNodesForVariable } from 'utils/genericHelper'
+import { JsonEditorInput } from 'ui-component/json/JsonEditor'
 
 const CustomWidthTooltip = styled(({ className, ...props }) => <Tooltip {...props} classes={{ popper: className }} />)({
     [`& .${tooltipClasses.tooltip}`]: {
@@ -26,6 +28,7 @@ const CustomWidthTooltip = styled(({ className, ...props }) => <Tooltip {...prop
 
 const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false, isAdditionalParams = false }) => {
     const theme = useTheme()
+    const customization = useSelector((state) => state.customization)
     const ref = useRef(null)
     const { reactFlowInstance } = useContext(flowContext)
     const updateNodeInternals = useUpdateNodeInternals()
@@ -166,6 +169,14 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false, isA
                                 onDialogConfirm={(newValue, inputParamName) => onExpandDialogSave(newValue, inputParamName)}
                             />
                         )}
+                        {inputParam.type === 'json' && (
+                            <JsonEditorInput
+                                disabled={disabled}
+                                onChange={(newValue) => (data.inputs[inputParam.name] = newValue)}
+                                value={data.inputs[inputParam.name] ?? inputParam.default ?? ''}
+                                isDarkMode={customization.isDarkMode}
+                            />
+                        )}
                         {inputParam.type === 'options' && (
                             <Dropdown
                                 disabled={disabled}