@izara_frontend/shared-complex-filter 1.0.1

package/src/complexFilterMain/modalLogicalElement.jsx

@@ -0,0 +1,2013 @@
+import React, {
+  useContext,
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+} from "react";
+import {
+  IzaraDivStyle,
+  IzaraButtonStyle,
+  createStyleDefualtTags,
+  createStyleTags,
+} from "@izaraFrontends/styles";
+import { useImmer } from "use-immer";
+
+// import {
+//   getObjectSchema,
+//   reformatObjectSchema,
+// } from "@izara_project/izara-shared-service-schemas";
+
+// import { get_objectLinksSchema } from "../../../../izara-frontend-lib-core-page-output-config_rut/configPageOutputSection/getSchemaNewLibrary/getObjectSchemaQuery";
+// import {
+//   collectObjectLinksWithRequestProperties,
+//   collectObjectSchemaWithHierarchy,
+// } from "@izara_frontend/service-schemas";
+
+import { useDispatch, useSelector } from "react-redux";
+import { nanoid } from "nanoid";
+import { ModalRequiredData } from "./modalRequiredData";
+// import _, { flatMap, last } from "lodash";
+// var hash = require("object-hash");
+
+function createObjTypeConcat(objType) {
+  console.log("objType:sdsadwsd ", objType);
+  return `${objType?.serviceTag}_${objType?.objectType}`;
+}
+function createRelTypeConcat(relType) {
+  console.log("objType:sdsadwsd ", relType);
+  return `${relType?.serviceTag}_${relType?.relationshipTag}`;
+}
+function objTypeFromObjTypeConcat(objTypeConcat) {
+  console.log("objTypeConcat:aeaeaeww ", objTypeConcat);
+  let result = objTypeConcat.split("_");
+
+  if (result.length !== 2) {
+    throw Error("objTypeConcat invalid");
+  }
+
+  return {
+    serviceTag: result[0],
+    objectType: result[1],
+  };
+}
+
+export function findLogicalRoot(activeId, logicalElementObj) {
+  const prevId = logicalElementObj[activeId]?.previousLogicalElementId;
+  console.log("prevId:sdasdaszc ", prevId);
+  console.log("activeId:sdasdaszc ", activeId);
+
+  if (prevId) {
+    if (
+      logicalElementObj[prevId]?.logicalElementType === "childComplexFilter"
+    ) {
+      if (activeId === logicalElementObj[prevId].childLogicalElementId) {
+        return activeId;
+      } else {
+        return findLogicalRoot(prevId, logicalElementObj);
+      }
+    } else {
+      return findLogicalRoot(prevId, logicalElementObj);
+    }
+  }
+  return activeId;
+}
+
+export const OutputListLogicalElement = ({
+  logicalElementObj,
+  setLogicalElementObj,
+  logicalElementId,
+  logicalElementOutput,
+  setLogicalElementOutput,
+  handleAddLogicalElement,
+  hadleActiveLogicalElement,
+}) => {
+  console.log("logicalElementId:dfdfsdgffdgfd ", logicalElementId);
+  // function loopFindLastLogicalElement(nextLogicalElementId) {
+  //   console.log(
+  //     "logicalElementObj[nextLogicalElementId]:asdsfcxvdsf ",
+  //     logicalElementObj[nextLogicalElementId]
+  //   );
+
+  //   if (logicalElementObj[nextLogicalElementId].nextLogicalElementId === null) {
+  //     console.log("nextLogicalElementId:xxczxvcxvcxb ", nextLogicalElementId);
+  //     return nextLogicalElementId;
+  //   } else {
+  //     return loopFindLastLogicalElement(
+  //       logicalElementObj[nextLogicalElementId].nextLogicalElementId
+  //     );
+  //   }
+  // }
+  function handelRemoveLogical(startKey) {
+    const toDelete = new Set();
+
+    function loopLogical(key) {
+      if (!logicalElementObj[key]) return;
+
+      const current = logicalElementObj[key];
+
+      if (current.nextLogicalElementId) {
+        loopLogical(current.nextLogicalElementId);
+      }
+
+      if (current.childLogicalElementId) {
+        loopLogical(current.childLogicalElementId);
+      }
+
+      toDelete.add(key);
+    }
+    loopLogical(startKey);
+
+    setLogicalElementOutput((logicalElementOutput) => {
+      logicalElementOutput.active =
+        logicalElementObj[startKey].previousLogicalElementId;
+    });
+
+    setLogicalElementObj((logicalElementObj) => {
+      console.log("toDelete:awscxzzvbm ", toDelete);
+      for (const keyDelete of toDelete) {
+        logicalElementObj[
+          logicalElementObj[keyDelete].previousLogicalElementId
+        ].nextLogicalElementId = null;
+
+        delete logicalElementObj[keyDelete];
+      }
+    });
+  }
+
+  return (
+    <>
+      {logicalElementId && (
+        <>
+          <IzaraDivStyle
+            styletags={createStyleDefualtTags("gridColumn", "", "311")}
+          >
+            <button
+              disabled={logicalElementId === logicalElementOutput.active}
+              onClick={(e) => hadleActiveLogicalElement(logicalElementId)}
+            >
+              {logicalElementObj[logicalElementId]?.operation ? (
+                <>{logicalElementObj[logicalElementId].operation}</>
+              ) : (
+                <>{logicalElementId}</>
+                // <>{logicalElementObj[logicalElementId].logicalElementType}</>
+              )}
+            </button>
+
+            <>
+              {logicalElementId === logicalElementOutput.active && (
+                <button onClick={(e) => handelRemoveLogical(logicalElementId)}>
+                  x
+                </button>
+              )}
+            </>
+          </IzaraDivStyle>
+
+          {logicalElementObj[logicalElementId]?.nextLogicalElementId && (
+            <>
+              <OutputListLogicalElement
+                logicalElementObj={logicalElementObj}
+                setLogicalElementObj={setLogicalElementObj}
+                logicalElementId={
+                  logicalElementObj[logicalElementId].nextLogicalElementId
+                }
+                logicalElementOutput={logicalElementOutput}
+                setLogicalElementOutput={setLogicalElementOutput}
+                handleAddLogicalElement={handleAddLogicalElement}
+                hadleActiveLogicalElement={hadleActiveLogicalElement}
+              />
+            </>
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+export const ModalLogicalElement = ({
+  titleModel,
+  statusModal,
+  objTypeMain,
+  createFilterElement,
+  parentOutputId,
+  nameReducer,
+  keyUseCase, //not sure keyRequestProperties
+  valueUserTag,
+  perParentIdentifierFieldname,
+  successFunction,
+  collectObjectLinksWithRequestProperties,
+  collectObjectSchemaWithHierarchy,
+  objConfigUseCase,
+}) => {
+  // console.log("keyUseCase:dfecvxvd ", keyUseCase);
+  if (!objTypeMain) {
+    objTypeMain = objConfigUseCase.objType;
+  }
+
+  console.log("successFunction: sdxcxcaAD", successFunction);
+  console.log("objConfigUseCase:adxzvcxbxb ", objConfigUseCase, valueUserTag);
+
+  if (!valueUserTag) {
+    if (objConfigUseCase?.valueUserTags) {
+      valueUserTag = objConfigUseCase.valueUserTags;
+    } else {
+      valueUserTag = {};
+    }
+  }
+
+  const a = Object.fromEntries(
+    Object.entries(valueUserTag).filter(
+      ([_, val]) =>
+        "defaultValue" in val || "perParentIdentifierFieldname" in val,
+    ),
+  );
+
+  console.log("valueUserTag:sxzcvxcb ", a);
+
+  const dispatch = useDispatch();
+  const [modalSettingRequiredData, setModalSettingRequiredData] =
+    useState(false);
+  const [allObjTypesLinkConfigs, collectRequireLinksFn, collectLinksOpt] =
+    collectObjectLinksWithRequestProperties(); // allObjTypesLinkConfigs
+
+  const [resultFieldName, getObjSchemaHieFn, collectLinksOpt2] =
+    collectObjectSchemaWithHierarchy();
+
+  console.log("objConfigUseCase:dsfevcxvzxc ", objConfigUseCase);
+
+  console.log(
+    "dataRelationship:wsxzx data ",
+    allObjTypesLinkConfigs,
+    resultFieldName,
+  );
+  const [initialLogicalElementId, setInitialLogicalElementId] = useState(
+    objConfigUseCase ? objConfigUseCase.initialLogicalElementId : "",
+  );
+  const [logicalElementObj, setLogicalElementObj] = useImmer(
+    objConfigUseCase ? objConfigUseCase.logicalElements : {},
+  );
+
+  const [logicalElementOutput, setLogicalElementOutput] = useImmer({
+    status: true,
+    active: objConfigUseCase ? objConfigUseCase.initialLogicalElementId : "",
+  });
+
+  const [valueDataUserTags, setValueDataUserTags] = useImmer(valueUserTag);
+  const [newUserTags, setNewUserTags] = useImmer({});
+  const [newUserTagsRequestProperties, setNewUserTagsRequestProperties] =
+    useImmer({});
+
+  console.log(
+    "logicalElementOutput: awscxzzvbm",
+    initialLogicalElementId,
+    logicalElementOutput,
+    logicalElementObj,
+  );
+
+  useEffect(() => {
+    collectRequireLinksFn(objTypeMain);
+    getObjSchemaHieFn(objTypeMain);
+  }, []);
+
+  console.log("objTypeMain:sdwdxzxzxcc ", objTypeMain);
+  function createArrObjTypeLogical(activeId, logicalElementObj) {
+    const result = {
+      arrOutput: [],
+      lastObjtype: "",
+    };
+
+    function loopLogical(id) {
+      console.log("logicalElementObj:xsadfdfds ", logicalElementObj, id);
+      const currentLogical = logicalElementObj[id];
+      console.log("currentLogical:createArrObjTypeLogical ", currentLogical);
+
+      if (!currentLogical) return;
+      if (currentLogical.previousLogicalElementId !== null) {
+        console.log("IF:createArrObjTypeLogical");
+
+        loopLogical(currentLogical.previousLogicalElementId);
+      }
+      console.log(
+        "createArrObjTypeLogical",
+        id,
+        logicalElementObj[currentLogical.previousLogicalElementId]
+          ?.childLogicalElementId,
+      );
+      if (
+        id ===
+        logicalElementObj[currentLogical.previousLogicalElementId]
+          ?.childLogicalElementId
+      ) {
+        let objTypeOutput;
+        if (logicalElementObj[id]?.objType) {
+          objTypeOutput = createObjTypeConcat(currentLogical.objType);
+        } else {
+          objTypeOutput = createObjTypeConcat(
+            logicalElementObj[currentLogical.previousLogicalElementId]
+              .pathLinkType.objType,
+          );
+        }
+        console.log("objTypeOutput:createArrObjTypeLogical", objTypeOutput);
+
+        result.lastObjtype = objTypeOutput;
+        result.arrOutput.push({ [objTypeOutput]: id });
+      }
+    }
+
+    loopLogical(activeId);
+
+    console.log("result:createArrObjTypeLogical ", result);
+    return result;
+  }
+
+  function findObjTypeStep(activeId, logicalElementObj) {
+    let result = null;
+
+    function loop(id) {
+      console.log("id:wdsfdfdf ", id);
+      const current = logicalElementObj[id];
+      console.log("current:sadfdf ", current);
+      if (!current) return;
+
+      if (
+        current.logicalElementType === "childComplexFilter" ||
+        current.logicalElementType === "logical"
+        // !current.previousLogicalElementId
+      ) {
+        result = current.objType || null;
+        return;
+      }
+
+      const prevId = current.previousLogicalElementId;
+      console.log("prevId:findObjTypeStep ", prevId);
+
+      if (!prevId) {
+        if (current.objType) {
+          result = current.objType;
+        }
+        return;
+      }
+
+      const prev = logicalElementObj[prevId];
+      if (!prev) return;
+
+      // ถ้า previous มี childLogicalElementId === currentId แสดงว่า current เป็น child ของ prev  หยุด (ไม่ข้ามขึ้น)
+      if (prev.childLogicalElementId === id) {
+        // แต่ถ้ามี objType ของตัวเอง ใช้ตัวเอง
+        if (current.objType) {
+          result = current.objType;
+        }
+
+        return;
+      }
+
+      //  ถ้า previous มี objType  ใช้เลย
+      if (prev.objType) {
+        result = prev.objType;
+        return;
+      }
+
+      //  ไม่เข้าเงื่อนไขไหน  เดินย้อนขึ้นต่อ
+      loop(prevId);
+    }
+
+    loop(activeId);
+    return result;
+  }
+
+  function findObjTypeStepChild(activeId, logicalElementObj) {
+    let result = null;
+
+    function loop(id) {
+      console.log("id:wdsfdfdf ", id);
+      const current = logicalElementObj[id];
+      // console.log("current:sadfdf ", current);
+      // if (!current) {
+      //   result = null;
+      //   return;
+      // } else {
+      //   result = current.objType;
+      //   return;
+      // }
+
+      // if (
+      //   current.logicalElementType === "childComplexFilter" ||
+      //   current.logicalElementType === "logical"
+      //   // !current.previousLogicalElementId
+      // ) {
+      //   result = current.objType || null;
+      //   return;
+      // }
+
+      const prevId = current.previousLogicalElementId;
+      console.log("prevId:findObjTypeStep ", prevId);
+
+      if (!prevId) {
+        if (current.objType) {
+          result = current.objType;
+        }
+        return;
+      }
+
+      const prev = logicalElementObj[prevId];
+      if (!prev) return;
+
+      // ถ้า previous มี childLogicalElementId === currentId แสดงว่า current เป็น child ของ prev  หยุด (ไม่ข้ามขึ้น)
+      if (prev.childLogicalElementId === id) {
+        // แต่ถ้ามี objType ของตัวเอง ใช้ตัวเอง
+        if (current.objType) {
+          result = current.objType;
+        }
+
+        return;
+      }
+
+      //  ถ้า previous มี objType  ใช้เลย
+      if (prev.objType) {
+        result = prev.objType;
+        return;
+      }
+
+      //  ไม่เข้าเงื่อนไขไหน  เดินย้อนขึ้นต่อ
+      loop(prevId);
+    }
+
+    loop(activeId);
+    return result;
+  }
+
+  async function handleLogicalElementTypeChange(e) {
+    let logicalElementType = e.target.value;
+    let mainLoigcalObj = objTemplateLogicalElement(
+      logicalElementType,
+      logicalElementObj[logicalElementOutput.active].previousLogicalElementId,
+      logicalElementObj[logicalElementOutput.active].nextLogicalElementId,
+    );
+    let logicalObj = {};
+    console.log("dfofjdf", logicalElementObj[logicalElementOutput.active]);
+
+    setLogicalElementOutput((logicalElementOutput) => {
+      logicalElementOutput.status = false;
+    });
+
+    let objType;
+    objType = objTypeMain;
+
+    if (
+      createArrObjTypeLogical(logicalElementOutput.active, logicalElementObj)
+        .lastObjtype !== ""
+    ) {
+      objType = objTypeFromObjTypeConcat(
+        createArrObjTypeLogical(logicalElementOutput.active, logicalElementObj)
+          .lastObjtype,
+      );
+    }
+
+    if (logicalElementType === "childComplexFilter") {
+      logicalObj = {
+        ...mainLoigcalObj,
+        objType: objType,
+        pathLinkType: {
+          objType: "",
+          relType: "",
+          direction: "",
+        },
+        childLogicalElementId: null,
+      };
+    }
+    if (logicalElementType === "translateIds") {
+      logicalObj = {
+        ...mainLoigcalObj,
+        objType: objType,
+        pathLinkType: {
+          objType: "",
+          relType: "",
+          direction: "",
+        },
+        childIdentifiers: [],
+      };
+    }
+
+    if (logicalElementType === "logical") {
+      logicalObj = {
+        ...mainLoigcalObj,
+        objType: objType,
+        // fieldName: "",
+        // comparison: "",
+        // valueUserTag: "",
+      };
+    }
+
+    if (
+      logicalElementType === "openBracket" ||
+      logicalElementType === "closeBracket"
+    ) {
+      setLogicalElementOutput((logicalElementOutput) => {
+        logicalElementOutput.status = true;
+      });
+    }
+
+    setLogicalElementObj((logicalElementObj) => {
+      logicalElementObj[logicalElementOutput.active] = {
+        ...mainLoigcalObj,
+        ...logicalObj,
+      };
+    });
+  }
+
+  function handleOperationChange(e) {
+    let operation = e.target.value;
+
+    setLogicalElementObj((logicalElementObj) => {
+      logicalElementObj[logicalElementOutput.active].operation = operation;
+    });
+
+    setLogicalElementOutput((logicalElementOutput) => {
+      logicalElementOutput.status = true;
+    });
+  }
+
+  function objTemplateLogicalElement(
+    logicalElementType,
+    previousLogicalElementId,
+    nextLogicalElementId,
+  ) {
+    let objTemplate = {
+      logicalElementType: logicalElementType,
+      previousLogicalElementId: previousLogicalElementId,
+      nextLogicalElementId: nextLogicalElementId,
+    };
+
+    return objTemplate;
+  }
+
+  function handelSelectRelTypeAndDirection(e) {
+    let relType = e.target.value;
+    let index = e.target.selectedIndex - 1;
+    let objTypeConcat = createObjTypeConcat(
+      logicalElementObj[logicalElementOutput.active].objType,
+    );
+
+    setLogicalElementObj((logicalElementObj) => {
+      logicalElementObj[logicalElementOutput.active].pathLinkType = {
+        relType: JSON.parse(relType),
+        objType: allObjTypesLinkConfigs[objTypeConcat][index].other.objType,
+        direction: allObjTypesLinkConfigs[objTypeConcat][index].base.direction,
+      };
+
+      if (allObjTypesLinkConfigs[objTypeConcat][index]?.requestProperties) {
+        let requestProperties = {};
+        for (const key in allObjTypesLinkConfigs[objTypeConcat][index]
+          ?.requestProperties) {
+          requestProperties[key] = "";
+        }
+        logicalElementObj[logicalElementOutput.active].requestProperties =
+          requestProperties;
+      } else {
+        delete logicalElementObj[logicalElementOutput.active].requestProperties;
+      }
+    });
+    setLogicalElementOutput((logicalElementOutput) => {
+      logicalElementOutput.status = true;
+    });
+  }
+
+  function handleAddLogicalElement(action) {
+    const uuid = nanoid(10);
+
+    console.log("action:asfdsgsdg ", action);
+    if (action === "addChild") {
+      collectRequireLinksFn(
+        logicalElementObj[logicalElementOutput.active].pathLinkType.objType,
+      );
+      getObjSchemaHieFn(
+        logicalElementObj[logicalElementOutput.active].pathLinkType.objType,
+      );
+    }
+
+    setLogicalElementObj((logicalElementObj) => {
+      if (Object.keys(logicalElementObj).length === 0) {
+        setInitialLogicalElementId(uuid);
+        logicalElementObj[uuid] = objTemplateLogicalElement(
+          "newLogicalElement",
+          null,
+          null,
+        );
+      } else {
+        if (action === "addParent") {
+          if (
+            logicalElementObj[logicalElementOutput.active]
+              .nextLogicalElementId !== null
+          ) {
+            logicalElementObj[uuid] = objTemplateLogicalElement(
+              "newLogicalElement",
+              logicalElementOutput.active,
+              logicalElementObj[logicalElementOutput.active]
+                .nextLogicalElementId,
+            );
+
+            logicalElementObj[
+              logicalElementOutput.active
+            ].nextLogicalElementId = uuid;
+          } else {
+            logicalElementObj[
+              logicalElementOutput.active
+            ].nextLogicalElementId = uuid;
+
+            logicalElementObj[uuid] = objTemplateLogicalElement(
+              "newLogicalElement",
+              logicalElementOutput.active,
+              null,
+            );
+          }
+        }
+
+        if (action === "addChild") {
+          logicalElementObj[uuid] = objTemplateLogicalElement(
+            "newLogicalElement",
+            logicalElementOutput.active,
+            null,
+          );
+          logicalElementObj[logicalElementOutput.active].childLogicalElementId =
+            uuid;
+        }
+      }
+    });
+
+    setLogicalElementOutput((logicalElementOutput) => {
+      logicalElementOutput.status = false;
+      logicalElementOutput.active = uuid;
+    });
+  }
+
+  function hadleActiveLogicalElement(key) {
+    setLogicalElementOutput((logicalElementOutput) => {
+      logicalElementOutput.active = key;
+    });
+  }
+
+  function hadelActiveTopParent(objType) {
+    console.log("objType:sdsacascz ", objType);
+    setLogicalElementOutput((logicalElementOutput) => {
+      logicalElementOutput.active = Object.values(objType)[0];
+    });
+  }
+
+  console.log(
+    "afsofiud",
+    createArrObjTypeLogical(logicalElementOutput.active, logicalElementObj),
+  );
+
+  function handleSelectFieldName(e, type) {
+    let value = e.target.value;
+
+    setLogicalElementObj((logicalElementObj) => {
+      logicalElementObj[logicalElementOutput.active][type] = value;
+    });
+
+    if (
+      type === "partitionKeyValueUserTag" ||
+      type === "sortKeyValueUserTags"
+    ) {
+      if (value === "createUserTag") {
+        setNewUserTags((newUserTags) => {
+          newUserTags.name = "";
+          newUserTags.obj = {
+            defaultValue: "",
+          };
+        });
+
+        setLogicalElementOutput((logicalElementOutput) => {
+          logicalElementOutput.status = "createUserTag";
+        });
+      } else {
+        setLogicalElementOutput((logicalElementOutput) => {
+          logicalElementOutput.status = false;
+        });
+      }
+    }
+  }
+
+  function handleUpdateNameNewValue(e) {
+    setNewUserTags((newUserTags) => {
+      newUserTags.name = e.target.value;
+    });
+  }
+
+  function handleUpdateNewValue(e, type) {
+    console.log("type: safddfdgcxg", type, newUserTags);
+
+    setNewUserTags((newUserTags) => {
+      newUserTags.obj[type] = e.target.value;
+    });
+  }
+
+  function handleUpdateNewValueRequestProperties(
+    e,
+    type,
+    keyRequestProperties,
+  ) {
+    setNewUserTagsRequestProperties((newUserTagsRequestProperties) => {
+      newUserTagsRequestProperties[keyRequestProperties][type] = e.target.value;
+    });
+  }
+
+  function handleSelectCreateNewValue(e) {
+    let type = e.target.value;
+    console.log("type:fgrgdfgfdh ", type);
+
+    setNewUserTags((newUserTags) => {
+      if (type === "valueUserTag") {
+        newUserTags.obj = {
+          defaultValue: "",
+        };
+      } else {
+        newUserTags.obj = {
+          valueSource: "perParentIdentifier",
+          perParentIdentifierFieldname: "",
+        };
+
+        if (
+          resultFieldName[createObjTypeConcat(objTypeMain)].identifiers
+            .length === 1
+        ) {
+          newUserTags.obj.perParentIdentifierFieldname =
+            perParentIdentifierFieldname[0].fieldName;
+        }
+      }
+    });
+
+    // setNewUserTags({});
+  }
+
+  console.log(
+    "newUserTags:sadsxczvbbvb ",
+    newUserTagsRequestProperties,
+    valueDataUserTags,
+  );
+
+  function handleCreateNewValue(e) {
+    setLogicalElementObj((logicalElementObj) => {
+      logicalElementObj[logicalElementOutput.active].valueUserTag =
+        newUserTags.nameUserTag;
+    });
+
+    setValueDataUserTags((valueDataUserTags) => {
+      valueDataUserTags[newUserTags.name] = newUserTags.obj;
+    });
+
+    setLogicalElementOutput((logicalElementOutput) => {
+      logicalElementOutput.status = true;
+    });
+    setNewUserTags({});
+  }
+
+  function handleCreateNewValueRequestProperties(e, keyRequestProperties) {
+    setLogicalElementObj((logicalElementObj) => {
+      logicalElementObj[logicalElementOutput.active].requestProperties[
+        keyRequestProperties
+      ] = newUserTags.nameUserTag;
+    });
+
+    setValueDataUserTags((valueDataUserTags) => {
+      valueDataUserTags[
+        newUserTagsRequestProperties[keyRequestProperties].name
+      ] = {
+        defaultValue:
+          newUserTagsRequestProperties[keyRequestProperties].defaultValue,
+      };
+    });
+
+    setLogicalElementOutput((logicalElementOutput) => {
+      logicalElementOutput.status = true;
+    });
+
+    setNewUserTagsRequestProperties((newUserTagsRequestProperties) => {
+      newUserTagsRequestProperties[keyRequestProperties] = {};
+    });
+  }
+
+  console.log("newUserTags: ", newUserTags);
+  const logicalElementType = [
+    "openBracket",
+    "closeBracket",
+    "childComplexFilter",
+    "operation",
+    "traversal",
+    "translateIds",
+  ];
+
+  const operation = ["AND", "OR"];
+  let comparison = [
+    "equals",
+    "greaterThan",
+    "greaterThanEquals",
+    "lessThan",
+    "lessThanEquals",
+    "highLow",
+    "high",
+    "low",
+    "izaraSyntax",
+  ];
+
+  function handelCreateFilterElement() {
+    if (createFilterElement) {
+      createFilterElement(
+        createObjTypeConcat(objTypeMain),
+        initialLogicalElementId,
+        logicalElementObj,
+        valueDataUserTags,
+        keyUseCase,
+      );
+    } else {
+      dispatch(
+        successFunction({
+          parentOutputId: parentOutputId,
+          // keyElement,
+          initialLogicalElementId: initialLogicalElementId,
+          logicalElements: logicalElementObj,
+          valueDataUserTags: valueDataUserTags,
+        }),
+      );
+    }
+    statusModal(false);
+  }
+
+  function handleValueSelect(e, key) {
+    let value = e.target.value;
+
+    if (value === "createUserTag") {
+      setLogicalElementObj((logicalElementObj) => {
+        logicalElementObj[logicalElementOutput.active].requestProperties[key] =
+          null;
+      });
+
+      setNewUserTagsRequestProperties((newUserTagsRequestProperties) => {
+        newUserTagsRequestProperties[key] = {};
+      });
+    } else {
+      setLogicalElementObj((logicalElementObj) => {
+        logicalElementObj[logicalElementOutput.active].requestProperties[key] =
+          value;
+      });
+    }
+  }
+
+  function statusModalSettingRequiredData(status) {
+    setModalSettingRequiredData(status);
+  }
+
+  function sussessComplexFilterTypeTraversal(arrTraversalSteps) {
+    setLogicalElementObj((logicalElementObj) => {
+      logicalElementObj[logicalElementOutput.active].traversalSteps =
+        arrTraversalSteps;
+    });
+
+    dispatch();
+  }
+
+  console.log("createFilterElement:fsdfbcsdfe", createFilterElement);
+  console.log("valueDataUserTags: ", valueDataUserTags);
+
+  console.log("logicalElementObj:dfcxvxzzcs ", logicalElementObj);
+
+  return (
+    <div>
+      <IzaraDivStyle styletags={createStyleDefualtTags("modal", "", "main")}>
+        <IzaraDivStyle styletags={createStyleDefualtTags("modal", "", "box")}>
+          <IzaraDivStyle
+            styletags={createStyleDefualtTags("gridColumn", "", "1")}
+          >
+            <h2>{titleModel}</h2>
+            <hr></hr>
+            <IzaraDivStyle
+              styletags={createStyleDefualtTags("pagination", "", "template")}
+            >
+              {initialLogicalElementId && (
+                <>
+                  <a
+                    onClick={(e) =>
+                      hadelActiveTopParent({
+                        [createObjTypeConcat(objTypeMain)]:
+                          initialLogicalElementId,
+                      })
+                    }
+                  >
+                    {createObjTypeConcat(objTypeMain)}
+                  </a>
+                  {createArrObjTypeLogical(
+                    logicalElementOutput.active,
+                    logicalElementObj,
+                  ).arrOutput.map((objType, index) => (
+                    <>
+                      /
+                      <a onClick={(e) => hadelActiveTopParent(objType)}>
+                        {Object.keys(objType)}
+                      </a>
+                    </>
+                  ))}
+                </>
+              )}
+            </IzaraDivStyle>
+
+            <IzaraDivStyle
+              styletags={createStyleDefualtTags("background", "scroll", "div")}
+            >
+              <fieldset>
+                <legend>logicalElement list</legend>
+
+                <IzaraDivStyle
+                  styletags={createStyleDefualtTags(
+                    "gridTab",
+                    "",
+                    "logicalElment",
+                  )}
+                >
+                  <IzaraDivStyle
+                    styletags={createStyleDefualtTags(
+                      "pagination",
+                      "",
+                      "template",
+                    )}
+                  >
+                    {initialLogicalElementId && (
+                      <OutputListLogicalElement
+                        logicalElementObj={logicalElementObj}
+                        setLogicalElementObj={setLogicalElementObj}
+                        logicalElementId={findLogicalRoot(
+                          logicalElementOutput.active,
+                          logicalElementObj,
+                        )}
+                        logicalElementOutput={logicalElementOutput}
+                        setLogicalElementOutput={setLogicalElementOutput}
+                        handleAddLogicalElement={handleAddLogicalElement}
+                        hadleActiveLogicalElement={hadleActiveLogicalElement}
+                      />
+                    )}
+                  </IzaraDivStyle>
+                  <button
+                    disabled={!allObjTypesLinkConfigs && !resultFieldName}
+                    onClick={(e) => handleAddLogicalElement("addParent")}
+                  >
+                    add
+                  </button>
+                </IzaraDivStyle>
+              </fieldset>
+            </IzaraDivStyle>
+
+            <IzaraDivStyle
+              styletags={createStyleDefualtTags("gridColumn", "", "1")}
+            >
+              <div>
+                {Object.keys(logicalElementObj).length !== 0 ? (
+                  <>
+                    <IzaraDivStyle
+                      styletags={createStyleDefualtTags(
+                        "background",
+                        "scroll",
+                        "div",
+                      )}
+                    >
+                      <>
+                        <IzaraDivStyle
+                          styletags={createStyleDefualtTags(
+                            "gridColumn",
+                            "",
+                            "11",
+                          )}
+                        >
+                          <fieldset>
+                            <legend>logicalElementType</legend>
+                            <select
+                              onChange={(e) => {
+                                handleLogicalElementTypeChange(e);
+                              }}
+                              value={
+                                logicalElementObj[logicalElementOutput.active]
+                                  .logicalElementType
+                              }
+                            >
+                              <option
+                                disabled={
+                                  logicalElementObj[logicalElementOutput.active]
+                                    .logicalElementType !== "newLogicalElement"
+                                }
+                                value={""}
+                              >
+                                ---choose---
+                              </option>
+                              {logicalElementType.map((key, id) => (
+                                <option key={key} value={key}>
+                                  {key}
+                                </option>
+                              ))}
+                              {/* {console.log(
+                                resultFieldName[
+                                  logicalElementObj[logicalElementOutput.active]
+                                    .previousLogicalElementId === null
+                                    ? createObjTypeConcat(objTypeMain)
+                                    : createArrObjTypeLogical(
+                                        logicalElementOutput.active,
+                                        logicalElementObj,
+                                      ).lastObjtype
+                                ]?.identifiers,
+                                createArrObjTypeLogical(
+                                  logicalElementOutput.active,
+                                  logicalElementObj,
+                                ).lastObjtype,
+                                "ssdawdafafff",
+                              )} */}
+                              {resultFieldName && (
+                                <>
+                                  {resultFieldName[
+                                    logicalElementObj[
+                                      logicalElementOutput.active
+                                    ].previousLogicalElementId === null
+                                      ? createObjTypeConcat(objTypeMain)
+                                      : createArrObjTypeLogical(
+                                          logicalElementOutput.active,
+                                          logicalElementObj,
+                                        ).lastObjtype
+                                  ]?.identifiers.some(
+                                    (identifier) =>
+                                      identifier.type === "partitionKey",
+                                  ) && <option value="logical">logical</option>}
+                                </>
+                              )}
+                            </select>
+                          </fieldset>
+                        </IzaraDivStyle>
+                        <IzaraDivStyle
+                          styletags={createStyleDefualtTags(
+                            "gridColumn",
+                            "",
+                            "1",
+                          )}
+                        >
+                          {logicalElementObj[logicalElementOutput.active]
+                            .logicalElementType === "childComplexFilter" && (
+                            <IzaraDivStyle
+                              styletags={createStyleDefualtTags(
+                                "background",
+                                "scroll",
+                                "div",
+                              )}
+                            >
+                              {console.log(
+                                allObjTypesLinkConfigs,
+                                "foopesofods",
+                              )}
+
+                              {!allObjTypesLinkConfigs[
+                                logicalElementObj[logicalElementOutput.active]
+                                  .previousLogicalElementId === null
+                                  ? createObjTypeConcat(objTypeMain)
+                                  : createObjTypeConcat(
+                                      findObjTypeStep(
+                                        logicalElementOutput.active,
+                                        logicalElementObj,
+                                      ),
+                                    )
+                              ] ? (
+                                <IzaraDivStyle
+                                  styletags={createStyleDefualtTags(
+                                    "loadingCircle",
+                                    "20px",
+                                    "template",
+                                  )}
+                                ></IzaraDivStyle>
+                              ) : (
+                                <>
+                                  <p> relationship type:</p>
+                                  <select
+                                    value={JSON.stringify(
+                                      logicalElementObj[
+                                        logicalElementOutput.active
+                                      ].pathLinkType.relType,
+                                    )}
+                                    onChange={(e) =>
+                                      handelSelectRelTypeAndDirection(e)
+                                    }
+                                  >
+                                    <option
+                                      disabled={
+                                        logicalElementObj[
+                                          logicalElementOutput.active
+                                        ].pathLinkType.relType !== ""
+                                      }
+                                      value=""
+                                    >
+                                      -- relType --
+                                    </option>
+
+                                    {allObjTypesLinkConfigs[
+                                      createObjTypeConcat(
+                                        logicalElementObj[
+                                          logicalElementOutput.active
+                                        ].objType,
+                                      )
+                                    ].map((data, index) => (
+                                      <>
+                                        <option
+                                          key={index}
+                                          value={JSON.stringify(data.relType)}
+                                        >
+                                          {createRelTypeConcat(data.relType)}
+                                        </option>
+                                      </>
+                                    ))}
+                                  </select>
+
+                                  {logicalElementObj[
+                                    logicalElementOutput.active
+                                  ]?.pathLinkType.objType && (
+                                    <>
+                                      <p> object type:</p>
+                                      <span>
+                                        {createObjTypeConcat(
+                                          logicalElementObj[
+                                            logicalElementOutput.active
+                                          ].pathLinkType.objType,
+                                        )}
+                                      </span>
+                                      <p>direction</p>
+                                      <span>
+                                        {
+                                          logicalElementObj[
+                                            logicalElementOutput.active
+                                          ].pathLinkType.direction
+                                        }
+                                      </span>
+                                    </>
+                                  )}
+                                </>
+                              )}
+
+                              {allObjTypesLinkConfigs[
+                                createObjTypeConcat(
+                                  logicalElementObj[logicalElementOutput.active]
+                                    .objType,
+                                )
+                              ].map((data, index) => (
+                                <>
+                                  {_.isEqual(
+                                    data.relType,
+                                    logicalElementObj[
+                                      logicalElementOutput.active
+                                    ]?.pathLinkType.relType,
+                                  ) && (
+                                    <>
+                                      {data.requestProperties && (
+                                        <>
+                                          {Object.keys(
+                                            data.requestProperties,
+                                          ).map(
+                                            (keyRequestProperties, index) => (
+                                              <>
+                                                <p>{keyRequestProperties}</p>
+                                                <select
+                                                  onChange={(e) =>
+                                                    handleValueSelect(
+                                                      e,
+                                                      keyRequestProperties,
+                                                    )
+                                                  }
+                                                  value={
+                                                    logicalElementObj[
+                                                      logicalElementOutput
+                                                        .active
+                                                    ].requestProperties[
+                                                      keyRequestProperties
+                                                    ]
+                                                  }
+                                                >
+                                                  <option value="">
+                                                    -- choose --
+                                                  </option>
+                                                  {Object.entries(
+                                                    valueDataUserTags,
+                                                  )
+                                                    .filter(
+                                                      ([key, val]) =>
+                                                        "defaultValue" in val,
+                                                    )
+                                                    .map(([key, val]) => (
+                                                      <option
+                                                        key={key}
+                                                        value={key}
+                                                      >
+                                                        {val.defaultValue
+                                                          ? key
+                                                          : ""}
+                                                      </option>
+                                                    ))}
+                                                  <option value="createUserTag">
+                                                    create new userTag
+                                                  </option>
+                                                </select>
+
+                                                {logicalElementObj[
+                                                  logicalElementOutput.active
+                                                ].requestProperties[
+                                                  keyRequestProperties
+                                                ] === null && (
+                                                  <>
+                                                    <p>createUserTag </p>
+                                                    <fieldset>
+                                                      <legend>
+                                                        nameUserTag
+                                                      </legend>
+
+                                                      <input
+                                                        onChange={(e) =>
+                                                          handleUpdateNewValueRequestProperties(
+                                                            e,
+                                                            "name",
+                                                            keyRequestProperties,
+                                                          )
+                                                        }
+                                                      ></input>
+                                                    </fieldset>
+                                                    <fieldset>
+                                                      <legend>
+                                                        defaultValue
+                                                      </legend>
+
+                                                      <input
+                                                        onChange={(e) =>
+                                                          handleUpdateNewValueRequestProperties(
+                                                            e,
+                                                            "defaultValue",
+                                                            keyRequestProperties,
+                                                          )
+                                                        }
+                                                      ></input>
+                                                    </fieldset>
+                                                    <IzaraDivStyle
+                                                      styletags={createStyleDefualtTags(
+                                                        "gridColumn",
+                                                        "",
+                                                        "11",
+                                                      )}
+                                                    >
+                                                      <button
+                                                        onClick={(e) =>
+                                                          handleCreateNewValueRequestProperties(
+                                                            e,
+                                                            keyRequestProperties,
+                                                          )
+                                                        }
+                                                      >
+                                                        create
+                                                      </button>
+                                                    </IzaraDivStyle>
+                                                  </>
+                                                )}
+                                              </>
+                                            ),
+                                          )}
+                                        </>
+                                      )}
+                                    </>
+                                  )}
+                                  <></>
+                                </>
+                              ))}
+                              <br></br>
+                              {logicalElementObj[logicalElementOutput.active]
+                                .childLogicalElementId === null ? (
+                                <button
+                                  onClick={(e) =>
+                                    handleAddLogicalElement("addChild")
+                                  }
+                                >
+                                  create Child
+                                </button>
+                              ) : (
+                                <button
+                                  onClick={(e) =>
+                                    hadleActiveLogicalElement(
+                                      logicalElementObj[
+                                        logicalElementOutput.active
+                                      ].childLogicalElementId,
+                                    )
+                                  }
+                                >
+                                  view Child
+                                </button>
+                              )}
+                            </IzaraDivStyle>
+                          )}
+                          {logicalElementObj[logicalElementOutput.active]
+                            .logicalElementType === "translateIds" && (
+                            <IzaraDivStyle
+                              styletags={createStyleDefualtTags(
+                                "background",
+                                "scroll",
+                                "div",
+                              )}
+                            >
+                              {!allObjTypesLinkConfigs[
+                                logicalElementObj[logicalElementOutput.active]
+                                  .previousLogicalElementId === null
+                                  ? createObjTypeConcat(objTypeMain)
+                                  : createObjTypeConcat(
+                                      findObjTypeStep(
+                                        logicalElementOutput.active,
+                                        logicalElementObj,
+                                      ),
+                                    )
+                              ] ? (
+                                <IzaraDivStyle
+                                  styletags={createStyleDefualtTags(
+                                    "loadingCircle",
+                                    "20px",
+                                    "template",
+                                  )}
+                                ></IzaraDivStyle>
+                              ) : (
+                                <>
+                                  <p> relationship type:</p>
+                                  <select
+                                    value={JSON.stringify(
+                                      logicalElementObj[
+                                        logicalElementOutput.active
+                                      ].pathLinkType.relType,
+                                    )}
+                                    onChange={(e) =>
+                                      handelSelectRelTypeAndDirection(e)
+                                    }
+                                  >
+                                    <option
+                                      disabled={
+                                        logicalElementObj[
+                                          logicalElementOutput.active
+                                        ].pathLinkType.relType !== ""
+                                      }
+                                      value=""
+                                    >
+                                      -- relType --
+                                    </option>
+
+                                    {allObjTypesLinkConfigs[
+                                      createObjTypeConcat(
+                                        logicalElementObj[
+                                          logicalElementOutput.active
+                                        ].objType,
+                                      )
+                                    ].map((data, index) => (
+                                      <>
+                                        <option
+                                          key={index}
+                                          value={JSON.stringify(data.relType)}
+                                        >
+                                          {createRelTypeConcat(data.relType)}
+                                        </option>
+                                      </>
+                                    ))}
+                                  </select>
+
+                                  {logicalElementObj[
+                                    logicalElementOutput.active
+                                  ]?.pathLinkType.objType && (
+                                    <>
+                                      <p> object type:</p>
+                                      <span>
+                                        {createObjTypeConcat(
+                                          logicalElementObj[
+                                            logicalElementOutput.active
+                                          ].pathLinkType.objType,
+                                        )}
+                                      </span>
+                                      <p>direction</p>
+                                      <span>
+                                        {
+                                          logicalElementObj[
+                                            logicalElementOutput.active
+                                          ].pathLinkType.direction
+                                        }
+                                      </span>
+                                    </>
+                                  )}
+                                </>
+                              )}
+
+                              {allObjTypesLinkConfigs[
+                                createObjTypeConcat(
+                                  logicalElementObj[logicalElementOutput.active]
+                                    .objType,
+                                )
+                              ].map((data, index) => (
+                                <>
+                                  {_.isEqual(
+                                    data.relType,
+                                    logicalElementObj[
+                                      logicalElementOutput.active
+                                    ]?.pathLinkType.relType,
+                                  ) && (
+                                    <>
+                                      {data.requestProperties && (
+                                        <>
+                                          {Object.keys(
+                                            data.requestProperties,
+                                          ).map(
+                                            (keyRequestProperties, index) => (
+                                              <>
+                                                <p>{keyRequestProperties}</p>
+                                                <select
+                                                  onChange={(e) =>
+                                                    handleValueSelect(
+                                                      e,
+                                                      keyRequestProperties,
+                                                    )
+                                                  }
+                                                  value={
+                                                    logicalElementObj[
+                                                      logicalElementOutput
+                                                        .active
+                                                    ].requestProperties[
+                                                      keyRequestProperties
+                                                    ]
+                                                  }
+                                                >
+                                                  <option value="">
+                                                    -- choose --
+                                                  </option>
+                                                  {Object.entries(
+                                                    valueDataUserTags,
+                                                  )
+                                                    .filter(
+                                                      ([key, val]) =>
+                                                        "defaultValue" in val,
+                                                    )
+                                                    .map(([key, val]) => (
+                                                      <option
+                                                        key={key}
+                                                        value={key}
+                                                      >
+                                                        {val.defaultValue
+                                                          ? key
+                                                          : ""}
+                                                      </option>
+                                                    ))}
+                                                  <option value="createUserTag">
+                                                    create new userTag
+                                                  </option>
+                                                </select>
+
+                                                {logicalElementObj[
+                                                  logicalElementOutput.active
+                                                ].requestProperties[
+                                                  keyRequestProperties
+                                                ] === null && (
+                                                  <>
+                                                    <p>createUserTag </p>
+                                                    <fieldset>
+                                                      <legend>
+                                                        nameUserTag
+                                                      </legend>
+
+                                                      <input
+                                                        onChange={(e) =>
+                                                          handleUpdateNewValueRequestProperties(
+                                                            e,
+                                                            "name",
+                                                            keyRequestProperties,
+                                                          )
+                                                        }
+                                                      ></input>
+                                                    </fieldset>
+                                                    <fieldset>
+                                                      <legend>
+                                                        defaultValue
+                                                      </legend>
+
+                                                      <input
+                                                        onChange={(e) =>
+                                                          handleUpdateNewValueRequestProperties(
+                                                            e,
+                                                            "defaultValue",
+                                                            keyRequestProperties,
+                                                          )
+                                                        }
+                                                      ></input>
+                                                    </fieldset>
+                                                    <IzaraDivStyle
+                                                      styletags={createStyleDefualtTags(
+                                                        "gridColumn",
+                                                        "",
+                                                        "11",
+                                                      )}
+                                                    >
+                                                      <button
+                                                        onClick={(e) =>
+                                                          handleCreateNewValueRequestProperties(
+                                                            e,
+                                                            keyRequestProperties,
+                                                          )
+                                                        }
+                                                      >
+                                                        create
+                                                      </button>
+                                                    </IzaraDivStyle>
+                                                  </>
+                                                )}
+                                              </>
+                                            ),
+                                          )}
+                                        </>
+                                      )}
+                                    </>
+                                  )}
+                                  <></>
+                                </>
+                              ))}
+                            </IzaraDivStyle>
+                          )}
+                          {logicalElementObj[logicalElementOutput.active]
+                            .logicalElementType === "logical" && (
+                            <>
+                              {resultFieldName && (
+                                <>
+                                  {!resultFieldName[
+                                    logicalElementObj[
+                                      logicalElementOutput.active
+                                    ].previousLogicalElementId === null
+                                      ? createObjTypeConcat(objTypeMain)
+                                      : createObjTypeConcat(
+                                          findObjTypeStep(
+                                            logicalElementOutput.active,
+                                            logicalElementObj,
+                                          ),
+                                        )
+                                  ] ? (
+                                    <IzaraDivStyle
+                                      styletags={createStyleDefualtTags(
+                                        "loadingCircle",
+                                        "20px",
+                                        "template",
+                                      )}
+                                    ></IzaraDivStyle>
+                                  ) : (
+                                    <>
+                                      <IzaraDivStyle
+                                        styletags={createStyleDefualtTags(
+                                          "background",
+                                          "scroll",
+                                          "div",
+                                        )}
+                                      >
+                                        {/* <p> fieldname:</p>
+                                        <select
+                                          value={
+                                            logicalElementObj[
+                                              logicalElementOutput.active
+                                            ].fieldName
+                                          }
+                                          onChange={(e) => {
+                                            handleSelectFieldName(
+                                              e,
+                                              "fieldName"
+                                            );
+                                          }}
+                                        >
+                                          <option value="">
+                                            -- fieldName --
+                                          </option>
+                                          {Object.keys(
+                                            resultFieldName[
+                                              logicalElementObj[
+                                                logicalElementOutput.active
+                                              ].previousLogicalElementId ===
+                                              null
+                                                ? createObjTypeConcat(
+                                                    objTypeMain
+                                                  )
+                                                : createObjTypeConcat(
+                                                    findObjTypeStep(
+                                                      logicalElementOutput.active,
+                                                      logicalElementObj
+                                                    )
+                                                  )
+                                            ].fieldNames
+                                          ).map((key) => (
+                                            <option key={key} value={key}>
+                                              {key}
+                                            </option>
+                                          ))}
+                                        </select> */}
+
+                                        {resultFieldName[
+                                          logicalElementObj[
+                                            logicalElementOutput.active
+                                          ].previousLogicalElementId === null
+                                            ? createObjTypeConcat(objTypeMain)
+                                            : createObjTypeConcat(
+                                                findObjTypeStep(
+                                                  logicalElementOutput.active,
+                                                  logicalElementObj,
+                                                ),
+                                              )
+                                        ].identifiers.map(
+                                          (identifier, index) => (
+                                            <>
+                                              {/* {JSON.stringify(identifier.type)} */}
+                                              {identifier.type ===
+                                              "partitionKey" ? (
+                                                <>
+                                                  partitionKeyValueUserTag :
+                                                  <select
+                                                    onChange={(e) =>
+                                                      handleSelectFieldName(
+                                                        e,
+                                                        "partitionKeyValueUserTag",
+                                                      )
+                                                    }
+                                                    value={
+                                                      logicalElementObj[
+                                                        logicalElementOutput
+                                                          .active
+                                                      ].partitionKeyValueUserTag
+                                                    }
+                                                  >
+                                                    <option value="">
+                                                      -- choose --
+                                                    </option>
+                                                    <option value="createUserTag">
+                                                      create new userTag
+                                                    </option>
+                                                    {perParentIdentifierFieldname ? (
+                                                      <>
+                                                        {Object.entries(
+                                                          valueDataUserTags,
+                                                        )
+                                                          .filter(
+                                                            ([key, val]) =>
+                                                              "defaultValue" ||
+                                                              "perParentIdentifierFieldname" in
+                                                                val,
+                                                          )
+                                                          .map(([key, val]) => (
+                                                            <option
+                                                              key={key}
+                                                              value={key}
+                                                            >
+                                                              {key}
+                                                              {/* {val.defaultValue ||
+                                                    val.perParentIdentifierFieldname
+                                                      ? key
+                                                      : ""} */}
+                                                            </option>
+                                                          ))}
+                                                      </>
+                                                    ) : (
+                                                      <>
+                                                        {Object.entries(
+                                                          valueDataUserTags,
+                                                        )
+                                                          .filter(
+                                                            ([key, val]) =>
+                                                              "defaultValue" in
+                                                              val,
+                                                          )
+                                                          .map(([key, val]) => (
+                                                            <option
+                                                              key={key}
+                                                              value={key}
+                                                            >
+                                                              {val.defaultValue
+                                                                ? key
+                                                                : ""}
+                                                            </option>
+                                                          ))}
+                                                      </>
+                                                    )}
+                                                  </select>
+                                                </>
+                                              ) : (
+                                                <>
+                                                  <p> comparison:</p>
+
+                                                  <select
+                                                    value={
+                                                      logicalElementObj[
+                                                        logicalElementOutput
+                                                          .active
+                                                      ].comparison
+                                                    }
+                                                    onChange={(e) => {
+                                                      handleSelectFieldName(
+                                                        e,
+                                                        "comparison",
+                                                      );
+                                                    }}
+                                                  >
+                                                    <option
+                                                      disabled={
+                                                        logicalElementObj[
+                                                          logicalElementOutput
+                                                            .active
+                                                        ].comparison !== ""
+                                                      }
+                                                      value=""
+                                                    >
+                                                      choose comparison
+                                                    </option>
+
+                                                    {comparison.map((key) => (
+                                                      <option
+                                                        key={key}
+                                                        value={key}
+                                                      >
+                                                        {key}
+                                                      </option>
+                                                    ))}
+                                                  </select>
+                                                  <p>sortKeyValueUserTags :</p>
+
+                                                  <select
+                                                    onChange={(e) =>
+                                                      handleSelectFieldName(
+                                                        e,
+                                                        "sortKeyValueUserTags",
+                                                      )
+                                                    }
+                                                    value={
+                                                      logicalElementObj[
+                                                        logicalElementOutput
+                                                          .active
+                                                      ].valueUserTag
+                                                    }
+                                                  >
+                                                    <option value="">
+                                                      -- choose --
+                                                    </option>
+                                                    <option value="createUserTag">
+                                                      create new userTag
+                                                    </option>
+                                                    {perParentIdentifierFieldname ? (
+                                                      <>
+                                                        {Object.entries(
+                                                          valueDataUserTags,
+                                                        )
+                                                          .filter(
+                                                            ([key, val]) =>
+                                                              "defaultValue" ||
+                                                              "perParentIdentifierFieldname" in
+                                                                val,
+                                                          )
+                                                          .map(([key, val]) => (
+                                                            <option
+                                                              key={key}
+                                                              value={key}
+                                                            >
+                                                              {key}
+                                                              {/* {val.defaultValue ||
+                                                    val.perParentIdentifierFieldname
+                                                      ? key
+                                                      : ""} */}
+                                                            </option>
+                                                          ))}
+                                                      </>
+                                                    ) : (
+                                                      <>
+                                                        {Object.entries(
+                                                          valueDataUserTags,
+                                                        )
+                                                          .filter(
+                                                            ([key, val]) =>
+                                                              "defaultValue" in
+                                                              val,
+                                                          )
+                                                          .map(([key, val]) => (
+                                                            <option
+                                                              key={key}
+                                                              value={key}
+                                                            >
+                                                              {val.defaultValue
+                                                                ? key
+                                                                : ""}
+                                                            </option>
+                                                          ))}
+                                                      </>
+                                                    )}
+                                                  </select>
+                                                </>
+                                              )}
+                                            </>
+                                          ),
+                                        )}
+
+                                        {logicalElementOutput.status ===
+                                          "createUserTag" && (
+                                          <>
+                                            <hr></hr>
+                                            <p>createUserTag </p>
+                                            {perParentIdentifierFieldname && (
+                                              <select
+                                                onChange={(e) =>
+                                                  handleSelectCreateNewValue(e)
+                                                }
+                                              >
+                                                <option value="defaultValue">
+                                                  defaultValue
+                                                </option>
+                                                <option value="perParentIdentifier">
+                                                  perParentIdentifier
+                                                </option>
+                                              </select>
+                                            )}
+                                            <fieldset>
+                                              <legend>nameUserTag</legend>
+
+                                              <input
+                                                onChange={(e) =>
+                                                  handleUpdateNameNewValue(e)
+                                                }
+                                              ></input>
+                                            </fieldset>
+
+                                            {newUserTags.obj.hasOwnProperty(
+                                              "defaultValue",
+                                            ) ? (
+                                              <>
+                                                <fieldset>
+                                                  <legend>defaultValue</legend>
+
+                                                  <input
+                                                    onChange={(e) =>
+                                                      handleUpdateNewValue(
+                                                        e,
+                                                        "defaultValue",
+                                                      )
+                                                    }
+                                                  ></input>
+                                                </fieldset>
+                                              </>
+                                            ) : (
+                                              <>
+                                                <fieldset>
+                                                  <legend>
+                                                    perParentIdentifierFieldname
+                                                  </legend>
+
+                                                  <select
+                                                    onChange={(e) =>
+                                                      handleUpdateNewValue(
+                                                        e,
+                                                        "perParentIdentifierFieldname",
+                                                      )
+                                                    }
+                                                  >
+                                                    {perParentIdentifierFieldname.map(
+                                                      (identifier, index) => (
+                                                        <option>
+                                                          {identifier.fieldName}
+                                                        </option>
+                                                      ),
+                                                    )}
+                                                  </select>
+                                                </fieldset>
+                                              </>
+                                            )}
+
+                                            <IzaraDivStyle
+                                              styletags={createStyleDefualtTags(
+                                                "gridColumn",
+                                                "",
+                                                "11",
+                                              )}
+                                            >
+                                              <button
+                                                onClick={(e) =>
+                                                  handleCreateNewValue(e)
+                                                }
+                                              >
+                                                create
+                                              </button>
+                                            </IzaraDivStyle>
+                                          </>
+                                        )}
+                                      </IzaraDivStyle>
+                                    </>
+                                  )}
+                                </>
+                              )}
+                            </>
+                          )}
+                          {logicalElementObj[logicalElementOutput.active]
+                            .logicalElementType === "traversal" && (
+                            <>
+                              {modalSettingRequiredData && (
+                                <ModalRequiredData
+                                  statusModalSettingRequiredData={
+                                    statusModalSettingRequiredData
+                                  }
+                                  objConfigUseCase={objConfigUseCase}
+                                  // objTypeMain={objConfig.pageOutputMainConfigUseCase.objType}
+                                  nameReducer={nameReducer}
+                                  parentOutputId={parentOutputId}
+                                  // userTags={objConfig.pageOutputMainConfigUseCase.values}
+                                  // sortFieldStatus={"fromSortField"}
+                                  // successRequiredDataConfig={
+                                  //   successRequiredDataConfig
+                                  // }
+                                  collectObjectLinksWithRequestProperties={
+                                    collectObjectLinksWithRequestProperties
+                                  }
+                                  collectObjectSchemaWithHierarchy={
+                                    collectObjectSchemaWithHierarchy
+                                  }
+                                  // keyRequiredData={
+                                  //   modalSettingRequiredData === true
+                                  //     ? ""
+                                  //     : modalSettingRequiredData
+                                  // }
+                                />
+                              )}
+                              <fieldset></fieldset>
+
+                              <button
+                                onClick={() =>
+                                  statusModalSettingRequiredData("traversal")
+                                }
+                              >
+                                add traversal
+                              </button>
+                            </>
+                          )}
+                        </IzaraDivStyle>
+                      </>
+                    </IzaraDivStyle>
+
+                    {logicalElementObj[logicalElementOutput.active]
+                      .logicalElementType === "operation" && (
+                      <IzaraDivStyle
+                        styletags={createStyleDefualtTags(
+                          "background",
+                          "scroll",
+                          "div",
+                        )}
+                      >
+                        <fieldset>
+                          <legend>operation</legend>
+                          <select
+                            onChange={handleOperationChange}
+                            value={
+                              logicalElementObj[logicalElementOutput.active]
+                                .operation
+                            }
+                          >
+                            <option>--- choose ---</option>
+                            {operation.map((key, id) => (
+                              <option key={key}>{key}</option>
+                            ))}
+                          </select>
+                        </fieldset>
+                      </IzaraDivStyle>
+                    )}
+                  </>
+                ) : (
+                  <>not found select</>
+                )}
+              </div>
+            </IzaraDivStyle>
+
+            <IzaraDivStyle
+              styletags={createStyleDefualtTags("gridColumn", "", "11")}
+            >
+              <IzaraButtonStyle
+                styletags={createStyleDefualtTags("modal", "", "button")}
+                type="button"
+                onClick={(e) => handelCreateFilterElement()}
+              >
+                save
+              </IzaraButtonStyle>
+
+              <IzaraButtonStyle
+                styletags={createStyleDefualtTags("modal", "", "button")}
+                type="button"
+                onClick={(e) => statusModal(false)}
+              >
+                cancel
+              </IzaraButtonStyle>
+            </IzaraDivStyle>
+          </IzaraDivStyle>
+        </IzaraDivStyle>
+      </IzaraDivStyle>
+    </div>
+  );
+};
+
+export const TraversalComponent = ({ fieldName }) => {
+  return (
+    <div>
+      <fieldset>
+        <legend>hopsPassObjType</legend>
+        <input type="checkbox" />
+      </fieldset>
+
+      {type === "fieldValueUserTags" && <></>}
+    </div>
+  );
+};