0\r\n ? node?.data?.style?.textColor ?? \"#18181B\"\r\n : \"#A9A8A8\",\r\n }}\r\n className=\"card_description_box\"\r\n dangerouslySetInnerHTML={{\r\n __html:\r\n removeHTMLTags(data?.description).trim().length > 0\r\n ? data?.description\r\n : \"Type something\",\r\n }}\r\n />\r\n )}\r\n \r\n )}\r\n
\r\n {data?.priority && (\r\n \r\n {\" \"}\r\n \r\n {data?.priority}{\" \"}\r\n \r\n )}\r\n\r\n {data?.status && (\r\n \r\n \r\n {fillColorStatus?.Icon && (\r\n \r\n )}\r\n \r\n {data?.status} \r\n \r\n )}\r\n\r\n {data?.date && (\r\n \r\n {/*
*/}\r\n \r\n \r\n {data?.date}\r\n \r\n \r\n )}\r\n \r\n\r\n {data?.assign?.length > 0 && (\r\n
\r\n \r\n {data?.assign?.slice(0, 5).map((val, index) => (\r\n \r\n {val?.profile_picture ? (\r\n \r\n
\r\n \r\n ) : (\r\n \r\n {val?.first_name[0]?.toUpperCase()}\r\n \r\n )}\r\n \r\n \r\n {val?.first_name} {val?.last_name}\r\n \r\n \r\n \r\n ))}\r\n \r\n }\r\n placement=\"bottom\"\r\n isAvatarGroup\r\n >\r\n
\r\n {data?.assign.slice(0, 5).map((val, index) => (\r\n \r\n {val?.profile_picture ? (\r\n
\r\n ) : (\r\n \r\n {val?.first_name[0]?.toUpperCase()}\r\n \r\n )}\r\n \r\n ))}\r\n {data?.assign.length > 5 && (\r\n \r\n \r\n +{5}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n )}\r\n\r\n {data?.tag?.length > 0 && (\r\n
\r\n {data?.tag?.map((val, index) => {\r\n return (\r\n \r\n {val.name.length > 20\r\n ? `${val.name.slice(0, 20)}...`\r\n : val.name}\r\n \r\n );\r\n })}\r\n \r\n )}\r\n \r\n {!isDownload && !copyAsImage && !showExport && !data?.locked && (\r\n <>\r\n {node?.selected &&\r\n !showExport &&\r\n !isNodeSelectionStarted &&\r\n !copyAsImage && (\r\n <>\r\n
onResizeEnd(node, true)}\r\n minWidth={324}\r\n minHeight={cardRef?.current?.offsetHeight + 40}\r\n handleStyle={{\r\n display: \"none\",\r\n }}\r\n // maxHeight={(cardRef?.current?.offsetHeight + 40) * 2}\r\n // maxWidth={800}\r\n onResize={onResize}\r\n />\r\n onResizeEnd(node)}\r\n minWidth={324}\r\n minHeight={cardRef?.current?.offsetHeight + 40}\r\n style={{\r\n zIndex: 999999999999,\r\n backgroundColor: \"transparent\",\r\n border: \"1px solid transparent\",\r\n }}\r\n // maxHeight={(cardRef?.current?.offsetHeight + 40) * 2}\r\n // maxWidth={800}\r\n onResize={onResize}\r\n >\r\n \r\n \r\n onResizeEnd(node)}\r\n minWidth={324}\r\n minHeight={cardRef?.current?.offsetHeight + 40}\r\n style={{\r\n zIndex: 999999999999,\r\n backgroundColor: \"transparent\",\r\n border: \"1px solid transparent\",\r\n }}\r\n // maxHeight={(cardRef?.current?.offsetHeight + 40) * 2}\r\n // maxWidth={800}\r\n onResize={onResize}\r\n >\r\n \r\n \r\n onResizeEnd(node)}\r\n minWidth={324}\r\n minHeight={cardRef?.current?.offsetHeight + 40}\r\n style={{\r\n zIndex: 999999999999,\r\n backgroundColor: \"transparent\",\r\n border: \"1px solid transparent\",\r\n }}\r\n // maxHeight={(cardRef?.current?.offsetHeight + 40) * 2}\r\n // maxWidth={800}\r\n onResize={onResize}\r\n >\r\n \r\n \r\n onResizeEnd(node)}\r\n minWidth={324}\r\n minHeight={cardRef?.current?.offsetHeight + 40}\r\n style={{\r\n zIndex: 999999999999,\r\n backgroundColor: \"transparent\",\r\n border: \"1px solid transparent\",\r\n }}\r\n // maxHeight={(cardRef?.current?.offsetHeight + 40) * 2}\r\n // maxWidth={800}\r\n onResize={onResize}\r\n >\r\n \r\n \r\n >\r\n )}\r\n\r\n {!node?.dragging && !showExport && !copyAsImage && (\r\n <>\r\n {\" \"}\r\n \r\n console.log(\"handle onConnect\", params)\r\n }\r\n onMouseOver={() => {\r\n setShowDots(true);\r\n setHoveredItem(\"left\");\r\n }}\r\n onMouseLeave={() => {\r\n setShowDots(false);\r\n setHoveredItem(\"\");\r\n }}\r\n onClick={(e) => {\r\n e.preventDefault();\r\n }}\r\n >\r\n {(!isNodeSelectionStarted || isNodeSelected <= 0) && (\r\n \r\n )}\r\n \r\n \r\n console.log(\"handle onConnect\", params)\r\n }\r\n onMouseOver={() => {\r\n setShowDots(true);\r\n setHoveredItem(\"right\");\r\n }}\r\n onMouseLeave={() => {\r\n setShowDots(false);\r\n setHoveredItem(\"\");\r\n }}\r\n onClick={(e) => {\r\n e.preventDefault();\r\n }}\r\n >\r\n {(!isNodeSelectionStarted || isNodeSelected <= 0) && (\r\n \r\n )}\r\n \r\n {\r\n setShowDots(true);\r\n setHoveredItem(\"top\");\r\n }}\r\n onMouseLeave={() => {\r\n setShowDots(false);\r\n setHoveredItem(\"\");\r\n }}\r\n onClick={(e) => {\r\n e.preventDefault();\r\n }}\r\n >\r\n {(!isNodeSelectionStarted || isNodeSelected <= 0) && (\r\n \r\n )}\r\n \r\n \r\n console.log(\"handle onConnect\", params)\r\n }\r\n onMouseOver={() => {\r\n setShowDots(true);\r\n setHoveredItem(\"bottom\");\r\n }}\r\n onMouseLeave={() => {\r\n setShowDots(false);\r\n setHoveredItem(\"\");\r\n }}\r\n onClick={(e) => {\r\n e.preventDefault();\r\n }}\r\n >\r\n {(!isNodeSelectionStarted || isNodeSelected <= 0) && (\r\n \r\n )}\r\n \r\n >\r\n )}\r\n >\r\n )}\r\n {!copyAsImage && (\r\n \r\n \r\n {data?.emoji?.length > 0 &&\r\n Object?.values(emojiCount)?.map((emoji, i) => {\r\n return (\r\n {\r\n const addEmoji = getNodes().map((n) => {\r\n if (n.id === nodeId) {\r\n const existingEmojiIndex =\r\n n?.data?.emoji?.findIndex(\r\n (e) =>\r\n e.emoji.unified === emoji.unified &&\r\n e.userId === userData?.user_id\r\n );\r\n if (existingEmojiIndex !== -1) {\r\n return {\r\n ...n,\r\n data: {\r\n ...n.data,\r\n emoji: n.data.emoji?.filter(\r\n (_, index) => index !== existingEmojiIndex\r\n ),\r\n },\r\n };\r\n }\r\n }\r\n return n;\r\n });\r\n\r\n localStorage.setItem(\r\n \"architectureJson\",\r\n JSON.stringify({\r\n architecture_json: {\r\n nodes: getNodes(),\r\n // lastUpdatedBy: parsedData?.user_id,\r\n lastEvent: ``,\r\n },\r\n })\r\n );\r\n setNodes(addEmoji);\r\n debouncedUpdateJson(addEmoji);\r\n }}\r\n >\r\n
\r\n \r\n {emoji.count}\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n )}\r\n \r\n \r\n\r\n setAnchorEl(null)}\r\n anchorOrigin={{\r\n vertical: \"bottom\",\r\n horizontal: \"center\",\r\n }}\r\n transformOrigin={{\r\n vertical: \"top\",\r\n horizontal: \"center\",\r\n }}\r\n sx={{\r\n \"& .MuiPaper-root\": {\r\n p: \"10px\",\r\n ml: \"-10px\",\r\n mt: \"5px\",\r\n width: 209,\r\n boxShadow: \"none\",\r\n bgcolor: \"transparent\",\r\n },\r\n }}\r\n BackdropProps={{\r\n style: { backgroundColor: \"transparent\" },\r\n onClick: () => setOpen(false),\r\n }}\r\n >\r\n \r\n {priorityDropdown.map(({ Icon, name, fill }, i) => {\r\n return (\r\n \r\n {i === priorityDropdown.length - 1 && (\r\n \r\n )}\r\n\r\n {\r\n handlePriorityClick(name, fill);\r\n }}\r\n >\r\n \r\n \r\n \r\n {name}\r\n \r\n \r\n {data?.priority === name && (\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n setAnchorElStatus(null)}\r\n anchorOrigin={{\r\n vertical: \"bottom\",\r\n horizontal: \"center\",\r\n }}\r\n transformOrigin={{\r\n vertical: \"top\",\r\n horizontal: \"center\",\r\n }}\r\n sx={{\r\n \"& .MuiPaper-root\": {\r\n p: \"10px\",\r\n ml: \"-10px\",\r\n mt: \"5px\",\r\n width: 209,\r\n boxShadow: \"none\",\r\n bgcolor: \"transparent\",\r\n },\r\n }}\r\n BackdropProps={{\r\n style: { backgroundColor: \"transparent\" },\r\n onClick: () => setOpenStatus(false),\r\n }}\r\n >\r\n \r\n {statusDropdown.map(({ Icon, name, fill }, i) => {\r\n return (\r\n \r\n {i === statusDropdown.length - 1 && (\r\n \r\n )}\r\n\r\n {\r\n handleStatusClick(name);\r\n }}\r\n >\r\n \r\n \r\n \r\n {name}\r\n \r\n \r\n {name === data?.status && (\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n setAnchorElAssign(null)}\r\n anchorOrigin={{\r\n vertical: \"bottom\",\r\n horizontal: \"center\",\r\n }}\r\n transformOrigin={{\r\n vertical: \"top\",\r\n horizontal: \"center\",\r\n }}\r\n sx={{\r\n \"& .MuiPaper-root\": {\r\n ml: \"-10px\",\r\n width: 277,\r\n mt: \"24px\",\r\n boxShadow: \"0px 2px 8px 0px #030B160D\",\r\n border: \"1px solid #EFF0F3\",\r\n borderRadius: \"10px\",\r\n // top: \"720px !important\",\r\n // left: \"547px !important\",\r\n bgcolor: \"transparent\",\r\n },\r\n }}\r\n BackdropProps={{\r\n style: { backgroundColor: \"transparent\" },\r\n onClick: () => setOpenAssign(false),\r\n }}\r\n >\r\n \r\n \r\n setSearchValue(e.target.value)}\r\n placeholder={\"Search person\"}\r\n bgColor={\"#FFFFFF\"}\r\n width={\"100%\"}\r\n formControlSx={{\r\n width: \"236px\",\r\n }}\r\n />\r\n \r\n {filteredMembers.length > 0 ? (\r\n filteredMembers.map((user, i) => {\r\n return (\r\n \r\n \r\n \r\n {user?.profile_picture ? (\r\n \r\n
\r\n \r\n ) : (\r\n \r\n \r\n {user?.first_name[0]?.toUpperCase()}\r\n \r\n \r\n )}\r\n \r\n \r\n {[user?.first_name, user?.last_name]\r\n .filter(Boolean)\r\n .join(\" \")}\r\n \r\n \r\n \r\n e.stopPropagation()}\r\n sx={{ marginRight: \"10px\" }}\r\n >\r\n handleMemberSelect(user)}\r\n checked={data?.assign.some(\r\n (assignedUser) =>\r\n assignedUser.user_id === user.user_id\r\n )}\r\n />\r\n \r\n \r\n \r\n );\r\n })\r\n ) : (\r\n \r\n No data found\r\n \r\n )}\r\n \r\n \r\n setAnchorElDate(null)}\r\n anchorOrigin={{\r\n vertical: \"bottom\",\r\n horizontal: \"center\",\r\n }}\r\n transformOrigin={{\r\n vertical: \"top\",\r\n horizontal: \"center\",\r\n }}\r\n sx={{\r\n \"& .MuiPaper-root\": {\r\n ml: \"-10px\",\r\n mt: \"15px\",\r\n\r\n bgcolor: \"white\",\r\n boxShadow: \"0px 2px 8px rgba(0, 0, 0, 0.2)\",\r\n borderRadius: \"10px\",\r\n },\r\n }}\r\n BackdropProps={{\r\n style: { backgroundColor: \"transparent\" },\r\n onClick: () => setAnchorElDate(null),\r\n }}\r\n className=\"no-border-datepicker\"\r\n >\r\n {\r\n handleChageDate(date);\r\n setAnchorElDate(null);\r\n }}\r\n inline\r\n />\r\n {\r\n handleClearDate();\r\n setAnchorElDate(null);\r\n }}\r\n >\r\n \r\n Clear\r\n \r\n \r\n \r\n setOpenTag(false)}\r\n anchorOrigin={{\r\n vertical: \"bottom\",\r\n horizontal: \"center\",\r\n }}\r\n transformOrigin={{\r\n vertical: \"top\",\r\n horizontal: \"center\",\r\n }}\r\n sx={{\r\n \"& .MuiPaper-root\": {\r\n ml: \"-10px\",\r\n width: 277,\r\n mt: \"15px\",\r\n // top:\"790px !important\",\r\n // left:\"634px !important\",\r\n boxShadow: \"none\",\r\n bgcolor: \"transparent\",\r\n },\r\n }}\r\n BackdropProps={{\r\n style: { backgroundColor: \"transparent\" },\r\n onClick: () => setOpenTag(false),\r\n }}\r\n >\r\n \r\n {!editTagValue && (\r\n {\r\n setNewTag(e.target.value);\r\n setError(false);\r\n }}\r\n onKeyDown={(e) => {\r\n if (e.key === \"Enter\") {\r\n handleAddTag();\r\n }\r\n }}\r\n error={error}\r\n helperText={error ? \"You can add a maximum of 8 tags.\" : \"\"}\r\n fullWidth\r\n sx={{\r\n \"& .MuiOutlinedInput-root\": {\r\n padding: \"1px\",\r\n borderBottom: \"2px solid #EEEEEE\",\r\n\r\n \"& fieldset\": {\r\n border: \"none\",\r\n },\r\n \"&:hover fieldset\": {},\r\n \"&.Mui-focused fieldset\": {},\r\n \"& .MuiInputBase-input::placeholder\": {\r\n color: \"#959BA3\",\r\n },\r\n \"& .MuiInputBase-input\": {\r\n width: \"100%\",\r\n border: \"none\",\r\n padding: \"8px\",\r\n lineHeight: \"20px\",\r\n fontSize: \"12px !important\",\r\n fontWeight: \"400 !important\",\r\n },\r\n },\r\n }}\r\n />\r\n )}\r\n \r\n {editTagValue && (\r\n {\r\n setEditTagValue(e.target.value);\r\n setError(false);\r\n }}\r\n fullWidth\r\n sx={{\r\n \"& .MuiOutlinedInput-root\": {\r\n padding: \"1px\",\r\n borderBottom: \"2px solid #EEEEEE\",\r\n\r\n \"& fieldset\": {\r\n border: \"none\",\r\n },\r\n \"&:hover fieldset\": {},\r\n \"&.Mui-focused fieldset\": {},\r\n \"& .MuiInputBase-input::placeholder\": {\r\n color: \"#959BA3\",\r\n },\r\n \"& .MuiInputBase-input\": {\r\n width: \"100%\",\r\n border: \"none\",\r\n padding: \"8px\",\r\n lineHeight: \"20px\",\r\n fontSize: \"12px !important\",\r\n fontWeight: \"400 !important\",\r\n },\r\n },\r\n }}\r\n />\r\n )}\r\n {editTagValue && (\r\n handleSaveEdit(editTagIndex)}\r\n sx={{\r\n backgroundColor: \"none\",\r\n color: \"blue\",\r\n padding: \"2px\",\r\n fontSize: \"12px\",\r\n borderRadius: \"8px\",\r\n textTransform: \"none\",\r\n cursor: \"pointer\",\r\n \"&:hover\": {\r\n backgroundColor: \"none\",\r\n },\r\n }}\r\n >\r\n Save\r\n \r\n )}\r\n \r\n \r\n {data?.tag?.length > 0 &&\r\n data?.tag?.map((val, index) => (\r\n \r\n \r\n {val.name.length > 20\r\n ? `${val.name.slice(0, 20)}...`\r\n : val.name}\r\n \r\n handleEditTag(index, val.name)}\r\n sx={{\r\n padding: \"0px\",\r\n marginLeft: \"4px\",\r\n }}\r\n >\r\n \r\n \r\n handleRemoveTag(index)}\r\n sx={{\r\n padding: \"0px\",\r\n marginLeft: \"4px\",\r\n }}\r\n >\r\n \r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n\r\n {node?.selected &&\r\n !isMultiNodeSelected &&\r\n !node.dragging &&\r\n !node?.data?.globalDragging &&\r\n !isMultiNodeSelected &&\r\n !isNodeSelectionStarted && (\r\n \r\n \r\n <>\r\n {!data?.locked && (\r\n <>\r\n \r\n \r\n setShowCardModal(true)}\r\n >\r\n
\r\n \r\n \r\n \r\n \r\n setShowColor(false)}\r\n >\r\n \r\n {\r\n setShowColor(false);\r\n }}\r\n open={showColor}\r\n disableFocusListener\r\n disableHoverListener\r\n disableTouchListener\r\n title={\r\n {\r\n handleColorChange(color, \"backgroundColor\");\r\n }}\r\n />\r\n }\r\n >\r\n \r\n \r\n {\r\n e.stopPropagation();\r\n setShowReaction(false);\r\n setShowListTypes(false);\r\n setShowColor(!showColor);\r\n setShowTextColor(false);\r\n setShowFontFamily(false);\r\n setShowFontStyle(false);\r\n setShowAlignment(false);\r\n setShowTextColor(false);\r\n setShowFontSizeOpt(false);\r\n setShowCardMoreOptions(false);\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n e.stopPropagation();\r\n handleClick(e);\r\n setShowReaction(false);\r\n setShowListTypes(false);\r\n setShowColor(false);\r\n setShowTextColor(false);\r\n setShowFontFamily(false);\r\n setShowFontStyle(false);\r\n setShowAlignment(false);\r\n setShowTextColor(false);\r\n setShowFontSizeOpt(false);\r\n setShowCardMoreOptions(false);\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n e.stopPropagation();\r\n handleClickStatus(e);\r\n setShowReaction(false);\r\n setShowListTypes(false);\r\n setShowColor(false);\r\n setShowTextColor(false);\r\n setShowFontFamily(false);\r\n setShowFontStyle(false);\r\n setShowAlignment(false);\r\n setShowTextColor(false);\r\n setShowFontSizeOpt(false);\r\n setShowCardMoreOptions(false);\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n e.stopPropagation();\r\n handleClickAssign(e);\r\n setShowReaction(false);\r\n setShowListTypes(false);\r\n setShowColor(false);\r\n setShowTextColor(false);\r\n setShowFontFamily(false);\r\n setShowFontStyle(false);\r\n setShowAlignment(false);\r\n setShowTextColor(false);\r\n setShowFontSizeOpt(false);\r\n setShowCardMoreOptions(false);\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n e.stopPropagation();\r\n setAnchorElDate(\r\n anchorElDate ? null : e.currentTarget\r\n );\r\n setShowReaction(false);\r\n setShowListTypes(false);\r\n setShowColor(false);\r\n setShowTextColor(false);\r\n setShowFontFamily(false);\r\n setShowFontStyle(false);\r\n setShowAlignment(false);\r\n setShowTextColor(false);\r\n setShowFontSizeOpt(false);\r\n setShowCardMoreOptions(false);\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n {shouldShowBox && (\r\n \r\n )}\r\n {shouldShowBox && (\r\n setShowFontFamily(false)}\r\n >\r\n \r\n setShowFontFamily(false)}\r\n open={showFontFamily}\r\n disableFocusListener\r\n disableHoverListener\r\n disableTouchListener\r\n title={\r\n {\r\n e.stopPropagation();\r\n }}\r\n >\r\n {fontFamilyArr?.map((val, i) => (\r\n {\r\n handleChangeFontFamily(val);\r\n }}\r\n >\r\n {val.name}{\" \"}\r\n {currentFontFamily === val.name && (\r\n \r\n )}\r\n \r\n ))}\r\n \r\n }\r\n >\r\n {\r\n e.stopPropagation();\r\n setShowReaction(false);\r\n setShowListTypes(false);\r\n setShowColor(false);\r\n setShowTextColor(false);\r\n setShowFontFamily(!showFontFamily);\r\n setShowFontStyle(false);\r\n setShowAlignment(false);\r\n setShowTextColor(false);\r\n setShowFontSizeOpt(false);\r\n setShowCardMoreOptions(false);\r\n }}\r\n >\r\n \r\n \r\n \r\n {currentFontFamily}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {shouldShowBox && (\r\n \r\n )}\r\n {shouldShowBox && (\r\n \r\n setShowFontSizeOpt(false)}\r\n open={showFontSizeOpt}\r\n disableFocusListener\r\n disableHoverListener\r\n disableTouchListener\r\n title={\r\n \r\n {fontSizeArr?.map((val, i) => {\r\n return (\r\n {\r\n handleUpdateFontSize(val);\r\n }}\r\n >\r\n {val}\r\n \r\n );\r\n })}\r\n \r\n }\r\n >\r\n {\r\n e.stopPropagation();\r\n setShowReaction(false);\r\n setShowListTypes(false);\r\n setShowColor(false);\r\n setShowTextColor(false);\r\n setShowFontFamily(false);\r\n setShowFontStyle(false);\r\n setShowAlignment(false);\r\n setShowTextColor(false);\r\n setShowFontSizeOpt(!showFontSizeOpt);\r\n setShowCardMoreOptions(false);\r\n }}\r\n >\r\n \r\n \r\n handleUpdateFontSize(e.target.value)}\r\n // onBlur={(e) => {\r\n // const value = parseInt(e.target.value) || 1;\r\n // const clampedValue = Math.min(Math.max(value, 1), 300);\r\n // handleUpdateFontSize(clampedValue);\r\n // }}\r\n />\r\n \r\n {\r\n e.stopPropagation();\r\n setShowFontSizeOpt(false);\r\n handleFontSizeChange(\"increase\");\r\n }}\r\n >\r\n {\" \"}\r\n \r\n \r\n {\r\n e.stopPropagation();\r\n setShowFontSizeOpt(false);\r\n if (\r\n parseInt(\r\n selectedFontSize.match(/\\d+/)[0]\r\n ) > 1\r\n ) {\r\n handleFontSizeChange(\"decrease\");\r\n }\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {shouldShowBox && (\r\n \r\n )}\r\n {shouldShowBox && (\r\n setShowFontStyle(false)}\r\n >\r\n \r\n setShowFontStyle(false)}\r\n open={showFontStyle}\r\n disableFocusListener\r\n disableHoverListener\r\n disableTouchListener\r\n title={\r\n \r\n \r\n {\r\n e.stopPropagation();\r\n toggleBold();\r\n setShowFontStyle(false);\r\n // const isBold =\r\n // editor.getAttributes(\"bold\");\r\n // setFontStyleEditor({\r\n // ...fontstyleEditor,\r\n // isBold: isBold,\r\n // });\r\n }}\r\n >\r\n \r\n \r\n \r\n\r\n \r\n {\r\n e.stopPropagation();\r\n toggleItalic();\r\n // if (showEdit) {\r\n // const isItalic =\r\n // titleEditor.getAttributes(\"italic\");\r\n // setFontStyleEditor((prev) => ({\r\n // ...prev, // Retains other formatting states (e.g., isBold, isUnderline, etc.)\r\n // isItalic,\r\n // }));\r\n // } else if (showTextEditor) {\r\n // const isItalic =\r\n // !!editor.getAttributes(\"italic\");\r\n // setFontStyleEditor((prev) => ({\r\n // ...prev, // Retains other formatting states (e.g., isBold, isUnderline, etc.)\r\n // isItalic,\r\n // }));\r\n // }\r\n setShowFontStyle(false);\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n {\r\n e.stopPropagation();\r\n toggleUnderline();\r\n // const isUnderline =\r\n // editor.getAttributes(\"underline\");\r\n // setFontStyleEditor({\r\n // ...fontstyleEditor,\r\n // isUnderline: isUnderline,\r\n // });\r\n setShowFontStyle(false);\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n {\r\n e.stopPropagation();\r\n toggleStrike();\r\n setShowFontStyle(false);\r\n // const isStrikethrough =\r\n // editor.getAttributes(\"strike\");\r\n // setFontStyleEditor({\r\n // ...fontstyleEditor,\r\n // isStrikethrough: isStrikethrough,\r\n // });\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n }\r\n >\r\n \r\n \r\n {\r\n e.stopPropagation();\r\n setShowReaction(false);\r\n setShowListTypes(false);\r\n setShowColor(false);\r\n setShowTextColor(false);\r\n setShowFontFamily(false);\r\n setShowFontStyle(!showFontStyle);\r\n setShowAlignment(false);\r\n setShowTextColor(false);\r\n setShowFontSizeOpt(false);\r\n setShowCardMoreOptions(false);\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {shouldShowBox && (\r\n \r\n setShowAlignment(false)}\r\n >\r\n \r\n setShowAlignment(false)}\r\n open={showAlignment}\r\n disableFocusListener\r\n disableHoverListener\r\n disableTouchListener\r\n title={\r\n \r\n updateTextAlignment(\"left\")}\r\n sx={{\r\n height: \"36px !important\",\r\n width: \"36px !important\",\r\n borderRadius: \"8px\",\r\n transition: \"all 0.3s ease\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n gap: \"7px\",\r\n bgcolor:\r\n currentTextAlign === \"left\"\r\n ? \"#007AFF1F\"\r\n : \"#FFF\",\r\n \"&:hover\": { bgcolor: \"#EFF0F3\" },\r\n }}\r\n >\r\n \r\n \r\n \r\n updateTextAlignment(\"center\")\r\n }\r\n sx={{\r\n height: \"36px !important\",\r\n width: \"36px !important\",\r\n borderRadius: \"8px\",\r\n transition: \"all 0.3s ease\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n gap: \"7px\",\r\n bgcolor:\r\n currentTextAlign === \"center\"\r\n ? \"#007AFF1F\"\r\n : \"#FFF\",\r\n \"&:hover\": { bgcolor: \"#EFF0F3\" },\r\n }}\r\n >\r\n \r\n \r\n\r\n updateTextAlignment(\"right\")}\r\n sx={{\r\n height: \"36px !important\",\r\n width: \"36px !important\",\r\n borderRadius: \"8px\",\r\n transition: \"all 0.3s ease\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n gap: \"7px\",\r\n bgcolor:\r\n currentTextAlign === \"right\"\r\n ? \"#007AFF1F\"\r\n : \"#FFF\",\r\n \"&:hover\": { bgcolor: \"#EFF0F3\" },\r\n }}\r\n >\r\n \r\n \r\n \r\n }\r\n >\r\n \r\n \r\n {\r\n e.stopPropagation();\r\n setShowReaction(false);\r\n setShowListTypes(false);\r\n setShowColor(false);\r\n setShowTextColor(false);\r\n setShowFontFamily(false);\r\n setShowFontStyle(false);\r\n setShowAlignment(!showAlignment);\r\n setShowTextColor(false);\r\n setShowFontSizeOpt(false);\r\n setShowCardMoreOptions(false);\r\n }}\r\n >\r\n {currentTextAlign === \"left\" ? (\r\n \r\n ) : currentTextAlign === \"right\" ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {shouldShowBox && (\r\n setShowListTypes(false)}\r\n >\r\n \r\n setShowListTypes(false)}\r\n open={showListTypes}\r\n disableFocusListener\r\n disableHoverListener\r\n disableTouchListener\r\n title={\r\n \r\n {\r\n if (showTextEditor) {\r\n editor\r\n .chain()\r\n .focus()\r\n .toggleBulletList()\r\n .run();\r\n const isBullet =\r\n editor.isActive(\"bulletList\");\r\n setCurrentListType(\r\n isBullet ? \"bullet\" : \"\"\r\n );\r\n } else if (showEdit) {\r\n titleEditor\r\n .chain()\r\n .focus()\r\n .toggleBulletList()\r\n .run();\r\n const isBullet =\r\n titleEditor.isActive(\"bulletList\");\r\n setCurrentListType(\r\n isBullet ? \"bullet\" : \"\"\r\n );\r\n }\r\n }}\r\n >\r\n \r\n \r\n {\r\n if (showTextEditor) {\r\n editor\r\n .chain()\r\n .focus()\r\n .toggleOrderedList()\r\n .run();\r\n const isOrdered =\r\n editor.isActive(\"orderedList\");\r\n setCurrentListType(\r\n isOrdered ? \"ordered\" : \"\"\r\n );\r\n } else if (showEdit) {\r\n titleEditor\r\n .chain()\r\n .focus()\r\n .toggleOrderedList()\r\n .run();\r\n const isOrdered =\r\n editor.isActive(\"orderedList\");\r\n setCurrentListType(\r\n isOrdered ? \"ordered\" : \"\"\r\n );\r\n }\r\n }}\r\n >\r\n \r\n \r\n {showTextEditor && (\r\n {\r\n e.stopPropagation();\r\n editor\r\n .chain()\r\n .focus()\r\n .toggleTaskList()\r\n .run();\r\n const isTaskList =\r\n editor.isActive(\"taskList\");\r\n setCurrentListType(\r\n isTaskList ? \"taskList\" : \"\"\r\n );\r\n }}\r\n >\r\n \r\n \r\n )}\r\n \r\n }\r\n >\r\n \r\n \r\n {\r\n e.stopPropagation();\r\n setShowListTypes(!showListTypes);\r\n setShowColor(false);\r\n setShowTextColor(false);\r\n setShowFontFamily(false);\r\n setShowFontStyle(false);\r\n setShowAlignment(false);\r\n setShowTextColor(false);\r\n setShowReaction(false);\r\n setShowFontSizeOpt(false);\r\n setShowCardMoreOptions(false);\r\n }}\r\n >\r\n {currentListType === \"ordered\" ? (\r\n \r\n ) : currentListType === \"taskList\" ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {shouldShowBox && (\r\n \r\n )}\r\n {shouldShowBox && (\r\n \r\n setShowTextColor(false)}\r\n >\r\n \r\n setShowTextColor(false)}\r\n open={showTextColor}\r\n disableFocusListener\r\n disableHoverListener\r\n disableTouchListener\r\n title={\r\n \r\n {\r\n handleChangeTextColor(color);\r\n }}\r\n />\r\n \r\n }\r\n >\r\n \r\n \r\n {\r\n e.stopPropagation();\r\n setShowReaction(false);\r\n setShowListTypes(false);\r\n setShowColor(false);\r\n setShowTextColor(!showTextColor);\r\n setShowFontFamily(false);\r\n setShowFontStyle(false);\r\n setShowAlignment(false);\r\n setShowFontSizeOpt(false);\r\n setShowCardMoreOptions(false);\r\n }}\r\n >\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {shouldShowBox && (\r\n \r\n )}\r\n \r\n setShowReaction(false)}\r\n >\r\n setShowReaction(!showReaction)}>\r\n setShowReaction(false)}\r\n open={showReaction}\r\n disableFocusListener\r\n disableHoverListener\r\n disableTouchListener\r\n title={\r\n {\r\n e.stopPropagation();\r\n }}\r\n >\r\n {\r\n addEmoji(emoji);\r\n }}\r\n />\r\n \r\n }\r\n >\r\n \r\n \r\n {\r\n e.stopPropagation();\r\n setShowReaction(!showReaction);\r\n setShowListTypes(false);\r\n setShowColor(false);\r\n setShowTextColor(false);\r\n setShowFontFamily(false);\r\n setShowFontStyle(false);\r\n setShowAlignment(false);\r\n setShowTextColor(false);\r\n setShowFontSizeOpt(false);\r\n setShowCardMoreOptions(false);\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n handleClickTag(e)}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n >\r\n )}\r\n \r\n \r\n {\r\n toggleLockUnlock();\r\n setShowReaction(false);\r\n setShowListTypes(false);\r\n setShowColor(false);\r\n setShowTextColor(false);\r\n setShowFontFamily(false);\r\n setShowFontStyle(false);\r\n setShowAlignment(false);\r\n setShowTextColor(false);\r\n setShowFontSizeOpt(false);\r\n setShowCardMoreOptions(false);\r\n }}\r\n >\r\n {data?.locked ? : }\r\n \r\n \r\n \r\n \r\n \r\n setShowCardMoreOptions(false)}\r\n >\r\n \r\n setShowCardMoreOptions(false)}\r\n open={showCardMoreOptions}\r\n disableFocusListener\r\n disableHoverListener\r\n disableTouchListener\r\n title={\r\n \r\n }\r\n >\r\n \r\n {\r\n e.stopPropagation();\r\n setShowReaction(false);\r\n setShowListTypes(false);\r\n setShowColor(false);\r\n setShowTextColor(false);\r\n setShowFontFamily(false);\r\n setShowFontStyle(false);\r\n setShowAlignment(false);\r\n setShowTextColor(false);\r\n setShowFontSizeOpt(false);\r\n setShowCardMoreOptions(!showCardMoreOptions);\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n >\r\n \r\n \r\n )}\r\n {floatingMenu !== null && showLink && (\r\n \r\n <>\r\n \r\n {\" \"}\r\n setLinkText(e?.target?.value)}\r\n value={linkText}\r\n placeholder=\"Paste/enter links\"\r\n onKeyPress={(e) => {\r\n if (e.key === \"Enter\") {\r\n if (showTextEditor) {\r\n editor.commands.setLink({\r\n href: linkText,\r\n target: \"_blank\",\r\n });\r\n } else if (showEdit) {\r\n titleEditor.commands.setLink({\r\n href: linkText,\r\n target: \"_blank\",\r\n });\r\n }\r\n setLinkText(\"\");\r\n setFloatingMenu(null);\r\n setShowLink(false);\r\n }\r\n }}\r\n />\r\n
\r\n >\r\n \r\n )}\r\n {showCardModal && (\r\n \r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default memo(CardNode, (prevProps, nextProps) => {\r\n return prevProps.data.globalDragging && nextProps.data.globalDragging;\r\n});\r\n","import {\r\n Chart as ChartJS,\r\n ArcElement,\r\n Title,\r\n Tooltip,\r\n Legend,\r\n LineElement,\r\n PointElement,\r\n LinearScale,\r\n CategoryScale,\r\n BarElement,\r\n RadialLinearScale,\r\n} from \"chart.js\";\r\nimport * as XLSX from \"xlsx\";\r\nimport {\r\n Bar,\r\n Pie,\r\n Line,\r\n Bubble,\r\n Doughnut,\r\n PolarArea,\r\n Radar,\r\n} from \"react-chartjs-2\";\r\nimport {\r\n Position,\r\n NodeToolbar,\r\n useReactFlow,\r\n Handle,\r\n NodeResizeControl,\r\n useStore,\r\n} from \"reactflow\";\r\nimport BtnColoredOutlined from \"../../../common-components/buttons/BtnColoredOutlined\";\r\nimport {\r\n IcDeleteOutlined,\r\n IcMenuDotsVertical,\r\n IcPlus2,\r\n IcUploadOutlined,\r\n} from \"../../../assets/icon-components\";\r\nimport {\r\n CustomNameTooltip,\r\n CustomTooltip,\r\n} from \"../../DrawBoard/top-toolbar/components/CustomTooltip\";\r\nimport {\r\n Box,\r\n TextField,\r\n IconButton,\r\n Stack,\r\n Dialog,\r\n DialogContent,\r\n TableContainer,\r\n Table,\r\n TableRow,\r\n TableCell,\r\n Typography,\r\n Switch,\r\n styled,\r\n} from \"@mui/material\";\r\nimport { useEffect, useRef, useState, useCallback, useMemo, memo } from \"react\";\r\nimport { useDropzone } from \"react-dropzone\";\r\nimport Papa from \"papaparse\";\r\nimport {\r\n IcCloseThin,\r\n IcDownloadChartOutlined,\r\n IcEditChartOutline,\r\n IcLockLocked,\r\n IcLockUnLocked,\r\n} from \"../../../assets/icon-components\";\r\nimport { useLocation, useParams } from \"react-router-dom\";\r\nimport { useDispatch } from \"react-redux\";\r\nimport { debounce } from \"lodash\";\r\nimport { getId, updateJson } from \"../../../CommanFunctions/commanFunctions\";\r\nimport BtnGradient from \"../../../common-components/buttons/BtnGradient\";\r\nimport { useSelector } from \"react-redux\";\r\nimport SimpleCircularProgress from \"../../../common-components/SimpleCircularProgress\";\r\nimport html2canvas from \"html2canvas\";\r\nimport FrameMoreMenus from \"../../Node/frameNode/FrameMoreMenus\";\r\nimport { errorToast } from \"../../../Redux/toastSlice\";\r\nimport FrameBackgroundToolbar from \"../../Node/frameNode/FrameBackgroundToolbar\";\r\nimport { updateChartNodeData } from \"../../../Redux/mindMapSlice\";\r\nimport { useUndoRedo } from \"../dndUndoRedo/UndoRedoProvider\";\r\nimport { fontSizes } from \"../../../Utils/style/font/fontsizes\";\r\nimport CommonDivider from \"../../../common-components/CommonDivider\";\r\nimport useNodeSelectionStarted from \"../../../Utils/hooks/useNodeSelectionStarted\";\r\nimport { color } from \"../../../Utils/style/color/color\";\r\nimport FileSizeExceeds from \"../../../common-components/modals/FileSizeExceeds\";\r\nimport ChooseColumnModal from \"../../../common-components/modals/ChooseColumnModal\";\r\nimport Loader from \"../../../CommanUI/Loader/loader\";\r\n\r\nChartJS.register(\r\n ArcElement,\r\n Title,\r\n Tooltip,\r\n Legend,\r\n LineElement,\r\n PointElement,\r\n LinearScale,\r\n CategoryScale,\r\n BarElement,\r\n RadialLinearScale\r\n // BubbleController\r\n);\r\n\r\nconst AntSwitch = styled(Switch)(({ theme }) => ({\r\n width: 28,\r\n height: 17,\r\n padding: 0,\r\n display: \"flex\",\r\n \"&:active\": {\r\n \"& .MuiSwitch-thumb\": {\r\n width: 11,\r\n },\r\n \"& .MuiSwitch-switchBase.Mui-checked\": {\r\n transform: \"translateX(11px) !important\",\r\n },\r\n },\r\n \"& .MuiSwitch-switchBase\": {\r\n padding: \"3px\",\r\n\r\n \"&.Mui-checked\": {\r\n transform: \"translateX(11px) !important\",\r\n color: \"#fff\",\r\n \"& + .MuiSwitch-track\": {\r\n opacity: 1,\r\n backgroundColor: \"#1890ff\",\r\n ...theme.applyStyles(\"dark\", {\r\n backgroundColor: \"#177ddc\",\r\n }),\r\n },\r\n },\r\n },\r\n \"& .MuiSwitch-thumb\": {\r\n boxShadow: \"0 2px 4px 0 rgb(0 35 11 / 20%)\",\r\n width: 11,\r\n height: 11,\r\n borderRadius: 6,\r\n transition: theme.transitions.create([\"width\"], {\r\n duration: 200,\r\n }),\r\n },\r\n \"& .MuiSwitch-track\": {\r\n borderRadius: 16 / 2,\r\n opacity: 1,\r\n backgroundColor: \"rgba(0,0,0,.25)\",\r\n boxSizing: \"border-box\",\r\n ...theme.applyStyles(\"dark\", {\r\n backgroundColor: \"rgba(255,255,255,.35)\",\r\n }),\r\n },\r\n}));\r\n\r\nfunction ChartNode(node) {\r\n const startVoting = useSelector(\r\n ({ archBoard }) => archBoard?.votingData?.startVotingSession\r\n );\r\n\r\n const { showExport, copyAsImage } = useSelector(\r\n (state) => state?.mindMapStore\r\n );\r\n const { isNodeSelectionStarted } = useNodeSelectionStarted({\r\n selected: node?.selected,\r\n });\r\n const [hoveredItem, setHoveredItem] = useState(\"\");\r\n const [openTooltipIndex, setOpenTooltipIndex] = useState(null);\r\n const [showDots, setShowDots] = useState(false);\r\n const [isModalOpen, setIsModalOpen] = useState(false);\r\n const [isColumnModalOpen, setIsColumnModalOpen] = useState(false);\r\n const [chartName, setChartName] = useState(\"\");\r\n const [zoomPercentages, setZoomPercentages] = useState(100);\r\n const [isDotsShow, setIsDotsShow] = useState(true);\r\n const [downloadLoading, setDownloadLoading] = useState(false);\r\n const fileInputRef = useRef(null);\r\n const [showLinkMoreOptions, setShowLinkMoreOptions] = useState(false);\r\n const [showFileSizeExceedsModal, setShowFileSizeExceedsModal] =\r\n useState(false);\r\n const mainRef = useRef(null);\r\n const chartRef = useRef(null);\r\n const tableContainerRef = useRef(null);\r\n const ref = useRef(null);\r\n const { id } = useParams();\r\n const frameMoreOptionsRef = useRef(null);\r\n const [chartData, setChartData] = useState({\r\n labels: [],\r\n datasets: [],\r\n columns: [],\r\n });\r\n const [tempData, setTempData] = useState({\r\n labels: node.data.data.labels,\r\n datasets: node.data.data.datasets,\r\n columns: node.data.data.columns,\r\n topHeader: node.data.data.topHeader,\r\n });\r\n\r\n const [parsedFileData, setParsedFileData] = useState([]);\r\n const [useColumn, setUseColumn] = useState(true);\r\n const [useColumnName, setUseColumnName] = useState(\r\n node?.data?.data?.useColumnName ?? true\r\n );\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [focusedIndex, setFocusedIndex] = useState(null);\r\n\r\n const location = useLocation();\r\n const { undo, takeSnapshot } = useUndoRedo();\r\n const { id: architectureId } = useParams();\r\n const dispatch = useDispatch();\r\n const user_data = localStorage.getItem(\"user_data\");\r\n\r\n const { setNodes, getEdges, getNodes, getNode } = useReactFlow();\r\n\r\n useEffect(() => {\r\n if (node.selected === true) {\r\n dispatch(\r\n updateChartNodeData({\r\n ref: chartRef.current,\r\n })\r\n );\r\n }\r\n }, [node.selected, chartRef]);\r\n\r\n const zoom = useStore((state) =>\r\n (node?.selected || showDots) && !isNodeSelectionStarted\r\n ? state?.transform?.[2]\r\n : 1\r\n );\r\n\r\n const debouncedUpdateTitle = useMemo(\r\n () =>\r\n debounce((value) => {\r\n const updatedNodes = getNodes().map((nd) =>\r\n nd.id === node.id\r\n ? {\r\n ...nd,\r\n data: {\r\n ...nd.data,\r\n label: value,\r\n },\r\n }\r\n : nd\r\n );\r\n\r\n setNodes(updatedNodes);\r\n localStorage.setItem(\r\n \"architectureJson\",\r\n JSON.stringify({\r\n architecture_json: {\r\n nodes: updatedNodes,\r\n lastEvent: ``,\r\n },\r\n })\r\n );\r\n\r\n const search = new URLSearchParams(location.search);\r\n const a_id = search.get(\"a_id\");\r\n let parsedData = {};\r\n if (user_data) {\r\n parsedData = JSON.parse(user_data);\r\n }\r\n\r\n updateJson({\r\n json: {\r\n architecture_json: {\r\n nodes: updatedNodes,\r\n lastUpdatedBy: parsedData?.user_id,\r\n },\r\n },\r\n id,\r\n dispatch,\r\n undo,\r\n takeSnapshot,\r\n a_id,\r\n });\r\n }, 750),\r\n []\r\n );\r\n\r\n const handleConfirmColumn = () => {\r\n setTempData((prevTempData) => ({\r\n ...prevTempData, // Preserve existing data, including topHeader\r\n }));\r\n\r\n if (parsedFileData.length > 0) {\r\n handleParsedData(parsedFileData);\r\n } else {\r\n }\r\n\r\n setUseColumnName(useColumn);\r\n };\r\n\r\n const handleTitle = (e) => {\r\n setChartName(e.target.value);\r\n debouncedUpdateTitle(e.target.value);\r\n };\r\n\r\n useEffect(() => {\r\n if (mainRef.current && !isNodeSelectionStarted) {\r\n setZoomPercentages(zoom * 100);\r\n }\r\n }, [zoom]);\r\n\r\n const handleClickEdit = () => {\r\n setTempData({\r\n labels: node.data.data.labels,\r\n datasets: node.data.data.datasets,\r\n columns: node.data.data.columns,\r\n topHeader: node.data.data.topHeader,\r\n });\r\n setIsModalOpen(true);\r\n };\r\n useEffect(() => {\r\n if (node?.data?.frame) {\r\n try {\r\n const newNode = {\r\n id: getId(),\r\n type: \"frame\",\r\n variant: \"custom\",\r\n position: {\r\n x: node.xPos - 20,\r\n y: node.yPos - 20,\r\n },\r\n positionAbsolute: {\r\n x: node.xPos - 20,\r\n y: node.yPos - 20,\r\n },\r\n data: {\r\n label: \"New Frame\",\r\n type: \"frame\",\r\n variant: \"custom\",\r\n hide: false,\r\n locked: false,\r\n isShadow: false,\r\n showBorder: false,\r\n frame: true,\r\n frameNo: 1,\r\n zIndex: 99999,\r\n style: {\r\n width: 800,\r\n height: 400,\r\n background: \"rgba(255, 255, 255, 1)\",\r\n zIndex: 99999,\r\n },\r\n border: {\r\n width: 1,\r\n type: \"solid\",\r\n borderColor: \"rgba(3, 11, 22, 1)\",\r\n opacity: 1,\r\n },\r\n },\r\n selected: true,\r\n style: {\r\n zIndex: 99999,\r\n width: nodeWH?.width + 60,\r\n height: nodeWH?.height + 60,\r\n },\r\n };\r\n\r\n // Add the new node\r\n setNodes((prevNodes) => [...prevNodes, newNode]);\r\n } catch (error) {\r\n console.error(\"Error adding node:\", error);\r\n }\r\n }\r\n }, [node?.data?.frame]);\r\n\r\n useEffect(() => {\r\n if (node?.data?.data) {\r\n const { labels, datasets } = node.data.data;\r\n\r\n const visibleLabels = labels.filter((label) => label.isShow === true);\r\n const updatedDatasets = datasets.map((dataset) => {\r\n const updatedData = dataset.data.filter((_, index) => {\r\n return labels[index]?.isShow === true;\r\n });\r\n\r\n return {\r\n ...dataset,\r\n data: updatedData,\r\n };\r\n });\r\n\r\n setChartData({\r\n labels: visibleLabels.map((label) => label.label),\r\n datasets: updatedDatasets,\r\n columns: node.data.data.columns,\r\n });\r\n }\r\n }, [node]);\r\n\r\n useEffect(() => {\r\n if (node.data?.label) {\r\n setChartName(node.data?.label);\r\n }\r\n }, [node.data?.label]);\r\n\r\n useEffect(() => {\r\n if (!isDotsShow && showDots && !isNodeSelectionStarted) {\r\n setIsDotsShow(showDots);\r\n }\r\n }, [showDots, isDotsShow, isNodeSelectionStarted]);\r\n\r\n const nodeWH = getNode(node?.id);\r\n const sizeAsPerZoom =\r\n (nodeWH?.width < nodeWH?.height ? nodeWH?.width : nodeWH?.height) * zoom ||\r\n 100;\r\n\r\n const config = {\r\n responsive: true,\r\n indexAxis:\r\n (node?.data?.chartType === \"horizontalBar\" ||\r\n node?.data?.chartType === \"horizontalStackedBar\") &&\r\n \"y\",\r\n animation: false,\r\n scales: {\r\n x: {\r\n beginAtZero: true,\r\n stacked:\r\n node?.data?.chartType === \"stackedBar\" ||\r\n node?.data?.chartType === \"horizontalStackedBar\",\r\n ticks: {\r\n font: {\r\n size: 16,\r\n },\r\n },\r\n },\r\n y: {\r\n beginAtZero: true,\r\n stacked:\r\n node?.data?.chartType === \"stackedBar\" ||\r\n node?.data?.chartType === \"horizontalStackedBar\",\r\n ticks: {\r\n font: {\r\n size: 16,\r\n },\r\n },\r\n },\r\n },\r\n plugins: {\r\n customCanvasBackgroundColor: {\r\n color: \"white\",\r\n },\r\n legend: {\r\n display: node?.data?.legend,\r\n position: \"bottom\",\r\n labels: {\r\n usePointStyle: true,\r\n pointStyle: \"circle\",\r\n boxWidth: 10,\r\n boxHeight: 10,\r\n font: {\r\n size: 14,\r\n },\r\n ...(node?.data?.data?.useColumnName === false && {\r\n generateLabels: (chart) => {\r\n return chart.data.datasets.map((dataset, index) => {\r\n let fillColor = Array.isArray(dataset.backgroundColor)\r\n ? dataset.backgroundColor[0]\r\n : dataset.backgroundColor;\r\n\r\n return {\r\n text:\r\n node?.data?.data?.columns?.[index]?.label ||\r\n `Dataset ${index + 1}`, // Show column labels\r\n fillStyle: fillColor,\r\n strokeStyle: dataset.borderColor,\r\n lineWidth: dataset.borderWidth || 1,\r\n hidden: chart.getDatasetMeta(index)?.hidden,\r\n datasetIndex: index,\r\n };\r\n });\r\n },\r\n }),\r\n },\r\n },\r\n\r\n title: {\r\n display: node?.data?.title,\r\n position: \"top\",\r\n text: chartName || node?.data?.label,\r\n labels: {\r\n font: {\r\n size: 16,\r\n },\r\n },\r\n },\r\n ...((node?.data?.chartType === \"pie\" || node?.data?.chartType === \"doughnut\" || node?.data?.chartType === \"polarArea\") && {\r\n tooltip: {\r\n callbacks: {\r\n label: function (tooltipItem) {\r\n const dataset = tooltipItem.dataset;\r\n const datasetLabel = dataset.label || \"\";\r\n const value = dataset.data[tooltipItem.dataIndex];\r\n const label = tooltipItem.chart.data.labels[tooltipItem.dataIndex];\r\n \r\n return `${label} (${datasetLabel}): ${value}`;\r\n },\r\n },\r\n },\r\n }),\r\n },\r\n };\r\n\r\n const handleDownloadChartImage = async () => {\r\n setDownloadLoading(true);\r\n try {\r\n if (chartRef.current) {\r\n const options = {\r\n scale: 5.0,\r\n useCORS: true,\r\n allowTaint: true,\r\n antialias: \"subpixel\",\r\n logging: false,\r\n };\r\n\r\n const originalCanvas = await html2canvas(chartRef.current, options);\r\n\r\n const desiredWidth =\r\n node.data.chartType === \"doughnut\" ||\r\n node.data.chartType === \"pie\" ||\r\n node.data.chartType === \"polarArea\" ||\r\n node.data.chartType === \"radar\"\r\n ? 450\r\n : 900;\r\n const desiredHeight = 450;\r\n\r\n const fixedCanvas = document.createElement(\"canvas\");\r\n const aspectRatio = originalCanvas.width / originalCanvas.height;\r\n fixedCanvas.width = desiredWidth;\r\n fixedCanvas.height = desiredHeight;\r\n\r\n const ctx = fixedCanvas.getContext(\"2d\");\r\n\r\n let drawWidth = desiredWidth;\r\n let drawHeight = desiredWidth / aspectRatio;\r\n\r\n if (drawHeight > desiredHeight) {\r\n drawHeight = desiredHeight;\r\n drawWidth = desiredHeight * aspectRatio;\r\n }\r\n\r\n ctx.drawImage(\r\n originalCanvas,\r\n 0,\r\n 0,\r\n originalCanvas.width,\r\n originalCanvas.height,\r\n 0,\r\n 0,\r\n drawWidth,\r\n drawHeight\r\n );\r\n\r\n const dataUrl = fixedCanvas.toDataURL(\"image/png\", 1.0);\r\n const link = document.createElement(\"a\");\r\n link.href = dataUrl;\r\n link.download = `${chartName || \"Cloudairy Chart\"}.png`;\r\n link.click();\r\n }\r\n } catch (error) {\r\n console.error(\"Error downloading chart image:\", error);\r\n } finally {\r\n setDownloadLoading(false);\r\n }\r\n };\r\n\r\n const handleCloseModal = () => {\r\n setIsModalOpen(false);\r\n takeSnapshot({ nodes: getNodes(), edges: null });\r\n };\r\n\r\n // const handleUploadClick = () => {\r\n // if (fileInputRef.current) {\r\n // fileInputRef.current.click();\r\n // }\r\n // };\r\n\r\n const { getRootProps, getInputProps } = useDropzone({\r\n onDrop: (files) => {\r\n const file = files[0];\r\n setIsLoading(true);\r\n if (file) {\r\n const fileSizeLimit = 100 * 1024 * 1024;\r\n if (file.size > fileSizeLimit) {\r\n setShowFileSizeExceedsModal(true);\r\n } else {\r\n setIsColumnModalOpen(true);\r\n }\r\n const fileExtension = file.name.split(\".\").pop().toLowerCase();\r\n\r\n if (fileExtension === \"csv\") {\r\n Papa.parse(file, {\r\n header: true,\r\n skipEmptyLines: true,\r\n complete: (results) => {\r\n const topHeadercsv = results.meta.fields;\r\n\r\n // Ensure topHeadercsv has at least one value\r\n const firstHeader =\r\n topHeadercsv.length > 0 ? topHeadercsv[0] : null;\r\n\r\n setTempData((prevTempData) => ({\r\n ...prevTempData,\r\n topHeader: firstHeader,\r\n }));\r\n let rows = results.data;\r\n\r\n // Filter out rows where all values are empty, null, or whitespace\r\n rows = rows.filter((row) => {\r\n return Object.values(row)\r\n .map((value) => (value === null || value === undefined ? \"\" : String(value).trim()))\r\n .some((value) => value !== \"\");\r\n });\r\n setParsedFileData(rows);\r\n setIsLoading(false);\r\n },\r\n });\r\n } else if (fileExtension === \"xlsx\" || fileExtension === \"xls\") {\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n const data = new Uint8Array(e.target.result);\r\n const workbook = XLSX.read(data, { type: \"array\" });\r\n const sheetName = workbook.SheetNames[0];\r\n const worksheet = workbook.Sheets[sheetName];\r\n const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });\r\n\r\n // \"headers\" is the first row of the Excel file, \"rows\" are the remaining\r\n const [headers, ...rows] = jsonData;\r\n\r\n // OPTIONAL: if you want only the first cell as topHeader:\r\n const topHeaderXLS = headers?.[0] ?? \"Labels\";\r\n\r\n // Now set tempData.topHeader to that first cell\r\n setTempData((prevTempData) => ({\r\n ...prevTempData,\r\n topHeader: topHeaderXLS,\r\n }));\r\n\r\n const parsedRows = rows\r\n .filter((row) => {\r\n // Convert all values in the row to strings and trim spaces\r\n const cleanedRow = row.map((cell) =>\r\n cell === null || cell === undefined ? \"\" : String(cell).trim()\r\n );\r\n\r\n // Check if all values in the row are empty\r\n return cleanedRow.some((cell) => cell !== \"\");\r\n })\r\n .map((row) => {\r\n const rowData = {};\r\n headers.forEach((header, index) => {\r\n rowData[header] = row[index] ?? \"\"; // Replace null/undefined with an empty string\r\n });\r\n return rowData;\r\n });\r\n\r\n setParsedFileData(parsedRows);\r\n setIsLoading(false);\r\n };\r\n reader.readAsArrayBuffer(file);\r\n }\r\n }\r\n },\r\n accept: {\r\n \"text/csv\": [\".csv\"],\r\n \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\": [\r\n \".xlsx\",\r\n ],\r\n \"application/vnd.ms-excel\": [\".xls\"],\r\n },\r\n maxSize: 2 * 1024 * 1024,\r\n });\r\n\r\n const handleParsedData = (rows) => {\r\n if (rows.length > 0) {\r\n const firstColumnKey = Object.keys(rows[0])[0];\r\n const labels = rows.map((row) => row[firstColumnKey]);\r\n\r\n const months = Object.keys(rows[0]).filter(\r\n (key) => key !== firstColumnKey\r\n );\r\n\r\n let hasInvalidData = false;\r\n const datasets = months.map((month) => {\r\n const data = rows.map((row) => {\r\n let value = row[month];\r\n if (value === undefined || isNaN(parseFloat(value))) {\r\n value = 0;\r\n }\r\n\r\n const parsedValue = parseFloat(value);\r\n\r\n if (isNaN(parsedValue)) {\r\n hasInvalidData = true;\r\n return null;\r\n }\r\n return parsedValue;\r\n });\r\n\r\n const color = getRandomColor();\r\n\r\n // If useColumn is false, prepend the dataset label to the data array\r\n if (!useColumn) {\r\n data.unshift(month);\r\n }\r\n\r\n // return {\r\n // label: month,\r\n // data: data,\r\n // backgroundColor: `color`,\r\n // borderColor: color,\r\n // borderWidth: 1,\r\n // };\r\n let dataset = {\r\n label: month,\r\n data: data,\r\n backgroundColor: color, // This will be replaced for pie/doughnut charts\r\n borderColor: color,\r\n borderWidth: 1,\r\n pointBackgroundColor:color,\r\n pointBorderColor:\"#FFFFFF\"\r\n };\r\n \r\n // Check if the chart is pie or doughnut\r\n if (node?.data?.chartType === \"pie\" || node?.data?.chartType === \"doughnut\" || node?.data?.chartType === \"polarArea\" ) {\r\n // Generate an array of random colors with the same length as the data array\r\n dataset.backgroundColor = data.map(() => getRandomColor());\r\n // Set the borderColor to white for all slices\r\n dataset.borderColor = \"#FFFFFF\";\r\n }\r\n\r\n if(node?.data?.chartType === \"radar\"){\r\n dataset.backgroundColor = data.map(() => \r\n \"rgba(62, 112, 255, 0.2)\");\r\n dataset.pointBackgroundColor=\"#3E70FF\";\r\n dataset.pointBorderColor=\"#FFFFFF\";\r\n }\r\n \r\n return dataset;\r\n });\r\n\r\n if (hasInvalidData) {\r\n dispatch(\r\n errorToast({\r\n message:\r\n \"Invalid data found in the file. Please ensure all values are numbers.\",\r\n })\r\n );\r\n return;\r\n }\r\n\r\n const minRows = 10;\r\n let updatedLabels = Array.from({ length: minRows }, (_, index) => {\r\n const existingLabel = labels[index] || `Label ${index + 1}`;\r\n return {\r\n label: existingLabel,\r\n // isShow: !!labels[index],\r\n isShow: index < rows.length,\r\n };\r\n });\r\n\r\n // If useColumn is false, add the topHeaderName object as the first label\r\n if (!useColumn) {\r\n updatedLabels.unshift({\r\n label: tempData?.topHeader || \"Industry\",\r\n isShow: true,\r\n });\r\n }\r\n\r\n setTempData({\r\n ...tempData,\r\n labels: [...updatedLabels],\r\n datasets: datasets,\r\n columns: Array.from({ length: datasets.length }, (_, i) => ({\r\n backgroundColor: getRandomColor(),\r\n borderColor: getRandomColor(),\r\n borderWidth: 1,\r\n label: `Column ${i + 1}`,\r\n })),\r\n });\r\n }\r\n };\r\n\r\n function getRandomColor() {\r\n const letters = \"0123456789ABCDEF\";\r\n let color = \"#\";\r\n for (let i = 0; i < 6; i++) {\r\n color += letters[Math.floor(Math.random() * 16)];\r\n }\r\n return color;\r\n }\r\n\r\n const handleDataChange = (e, datasetIndex, dataIndex) => {\r\n const newValue = parseFloat(e.target.value);\r\n\r\n setTempData((prev) => {\r\n const newDatasets = prev.datasets.map((dataset, idx) => {\r\n if (idx === datasetIndex) {\r\n const newData = [...dataset.data];\r\n newData[dataIndex] = newValue;\r\n\r\n return { ...dataset, data: newData };\r\n }\r\n return dataset;\r\n });\r\n\r\n const newLabels = [...prev.labels];\r\n if (newLabels[dataIndex] && !newLabels[dataIndex].isShow) {\r\n newLabels[dataIndex] = {\r\n ...newLabels[dataIndex],\r\n isShow: true, // Set isShow to true when data changes\r\n };\r\n }\r\n\r\n return { ...prev, datasets: newDatasets, labels: newLabels };\r\n });\r\n };\r\n\r\n const handleBlur = (datasetIndex, dataIndex) => {\r\n setTempData((prev) => {\r\n const newDatasets = prev.datasets.map((dataset, idx) => {\r\n if (idx === datasetIndex) {\r\n const newData = [...dataset.data];\r\n newData[dataIndex] =\r\n dataset.data[dataIndex] === \"\" || isNaN(dataset.data[dataIndex])\r\n ? 0\r\n : dataset.data[dataIndex];\r\n return { ...dataset, data: newData };\r\n }\r\n return dataset;\r\n });\r\n\r\n return { ...prev, datasets: newDatasets };\r\n });\r\n };\r\n\r\n const handleSave = () => {\r\n setChartData(tempData);\r\n let updatedNodes;\r\n setNodes((nds) => {\r\n localStorage.setItem(\r\n \"architectureJson\",\r\n JSON.stringify({\r\n architecture_json: {\r\n nodes: getNodes(),\r\n lastEvent: ``,\r\n },\r\n })\r\n );\r\n\r\n updatedNodes = nds.map((node1) => {\r\n if (node1.id === node?.id) {\r\n return {\r\n ...node1,\r\n data: {\r\n ...node1.data,\r\n data: {\r\n ...tempData,\r\n useColumnName: useColumnName,\r\n },\r\n },\r\n };\r\n }\r\n return node1;\r\n });\r\n\r\n return updatedNodes;\r\n });\r\n debouncedUpdateJson(updatedNodes, getEdges());\r\n\r\n setIsModalOpen(false);\r\n };\r\n\r\n const handleDataChangeLabel = (e, datasetIndex) => {\r\n const updatedChartData = {\r\n ...tempData,\r\n labels: tempData.labels.map((label, idx) =>\r\n idx === datasetIndex\r\n ? { ...label, label: e.target.value || \" \", isShow: true }\r\n : label\r\n ),\r\n };\r\n\r\n setTempData(updatedChartData);\r\n };\r\n\r\n const handleDeleteRow = (index) => {\r\n setTempData((prev) => {\r\n const updatedDatasets = [...prev.datasets];\r\n let updatedColumns = [...(prev.columns || [])];\r\n updatedDatasets.splice(index, 1);\r\n if (useColumnName === false) {\r\n updatedColumns.splice(index, 1);\r\n }\r\n\r\n return {\r\n ...prev,\r\n datasets: updatedDatasets,\r\n columns: useColumnName === false ? updatedColumns : prev.columns, // If useColumnName is true, keep the existing columns\r\n };\r\n });\r\n };\r\n\r\n const handleDeleteLabel = (index) => {\r\n setTempData((prev) => {\r\n const updatedLabels = prev.labels.filter((_, i) => i !== index);\r\n\r\n const updatedDatasets = prev.datasets.map((dataset) => {\r\n const updatedData = dataset.data.filter((_, i) => i !== index);\r\n return { ...dataset, data: updatedData };\r\n });\r\n return {\r\n ...prev,\r\n labels: updatedLabels,\r\n datasets: updatedDatasets,\r\n };\r\n });\r\n };\r\n\r\n const handleClearData = () => {\r\n setTempData((prevData) => ({\r\n ...prevData,\r\n datasets: prevData.datasets.map((dataset) => ({\r\n ...dataset,\r\n data: dataset.data.map(() => 0),\r\n ...(useColumnName === false ? { label: \"\" } : {}), // Remove label when useColumnName is false\r\n })),\r\n }));\r\n };\r\n\r\n useEffect(() => {\r\n if (node?.data?.chartType === \"pie\" || node?.data?.chartType === \"doughnut\" || node?.data?.chartType === \"polarArea\" ) {\r\n setTempData((prevData) => {\r\n const updatedDatasets = prevData.datasets.map(\r\n (dataset, datasetIndex) => {\r\n const updatedBackgroundColor = dataset.backgroundColor.map(\r\n (color, colorIndex) => {\r\n return colorIndex === openTooltipIndex\r\n ? node?.data?.style?.background || color\r\n : color;\r\n }\r\n );\r\n return {\r\n ...dataset,\r\n backgroundColor: updatedBackgroundColor,\r\n borderColor: \"#FFFFFF\",\r\n };\r\n }\r\n );\r\n\r\n return {\r\n ...prevData,\r\n datasets: updatedDatasets,\r\n };\r\n });\r\n } else {\r\n if (openTooltipIndex !== null) {\r\n const updatedDatasets = tempData.datasets.map(\r\n (dataset, datasetIndex) => {\r\n if (datasetIndex === openTooltipIndex) {\r\n return {\r\n ...dataset,\r\n backgroundColor:\r\n node?.data?.style?.background || dataset.backgroundColor,\r\n borderColor:\r\n node?.data?.style?.background || dataset.backgroundColor,\r\n };\r\n }\r\n return dataset;\r\n }\r\n );\r\n setTempData((prevData) => ({\r\n ...prevData,\r\n datasets: updatedDatasets,\r\n }));\r\n }\r\n }\r\n }, [node?.data?.style?.background, openTooltipIndex]);\r\n\r\n const handleAddColum = () => {\r\n setTempData((prevData) => {\r\n const bgcolor = getRandomColor();\r\n\r\n if (useColumnName === false) {\r\n return {\r\n ...prevData,\r\n columns: [\r\n ...prevData.columns,\r\n {\r\n label: `Column ${prevData.columns.length + 1}`,\r\n backgroundColor: bgcolor,\r\n borderColor: bgcolor,\r\n borderWidth: 1,\r\n },\r\n ],\r\n datasets: [\r\n ...prevData.datasets,\r\n {\r\n label: ``,\r\n data: prevData.labels.map(() => 0),\r\n backgroundColor: bgcolor,\r\n borderColor: bgcolor,\r\n borderWidth: 1,\r\n },\r\n ],\r\n };\r\n }\r\n const newDataset = {\r\n label: `Column ${prevData.datasets.length + 1}`,\r\n data: prevData.labels.map(() => 0),\r\n backgroundColor: bgcolor,\r\n borderColor: bgcolor,\r\n borderWidth: 1,\r\n };\r\n\r\n return {\r\n ...prevData,\r\n datasets: [...prevData.datasets, newDataset],\r\n };\r\n });\r\n\r\n setTimeout(() => {\r\n if (tableContainerRef.current) {\r\n const { scrollWidth } = tableContainerRef.current;\r\n tableContainerRef.current.scrollTo({\r\n left: scrollWidth,\r\n behavior: \"smooth\",\r\n });\r\n }\r\n }, 150);\r\n };\r\n\r\n const onResizeEnd = (event, node) => {\r\n let updatedNodes = [];\r\n const updatedNode = [];\r\n let parsedData = {};\r\n if (user_data) {\r\n parsedData = JSON.parse(user_data);\r\n }\r\n setNodes((prev) => {\r\n localStorage.setItem(\r\n \"architectureJson\",\r\n JSON.stringify({\r\n architecture_json: {\r\n nodes: prev,\r\n // lastUpdatedBy: userData?.user_id,\r\n lastEvent: ``,\r\n },\r\n })\r\n );\r\n // Update the resized node\r\n updatedNodes = prev?.map((_) => {\r\n if (_?.id === node?.id) {\r\n _ = JSON.parse(JSON.stringify(_));\r\n _.style.width = Number(mainRef?.current?.offsetWidth || 0);\r\n _.style.height =\r\n ref?.current?.editor?.offsetHeight + 5 >\r\n Number(mainRef?.current?.offsetHeight)\r\n ? Number(ref?.current?.editor?.offsetHeight + 10)\r\n : Number(mainRef?.current?.offsetHeight);\r\n return _;\r\n } else {\r\n return _;\r\n }\r\n });\r\n\r\n return updatedNodes;\r\n });\r\n\r\n const search = new URLSearchParams(location.search);\r\n const a_id = search.get(\"a_id\");\r\n updateJson({\r\n json: {\r\n architecture_json: {\r\n nodes: updatedNodes,\r\n lastUpdatedBy: parsedData?.user_id,\r\n lastEvent: `editor_changed_${node?.id}`,\r\n },\r\n },\r\n id,\r\n dispatch,\r\n undo,\r\n a_id,\r\n takeSnapshot,\r\n });\r\n };\r\n const handleAddRow = () => {\r\n const newLabel = {\r\n label: `Label ${tempData.labels.length + 1}`,\r\n isShow: false,\r\n };\r\n\r\n setTempData((prevData) => ({\r\n ...prevData,\r\n labels: [...prevData.labels, newLabel],\r\n datasets: prevData.datasets.map((dataset) => ({\r\n ...dataset,\r\n data: [...dataset.data, 0],\r\n })),\r\n }));\r\n setTimeout(() => {\r\n if (tableContainerRef.current) {\r\n const { scrollHeight } = tableContainerRef.current;\r\n tableContainerRef.current.scrollTo({\r\n top: scrollHeight,\r\n behavior: \"smooth\",\r\n });\r\n }\r\n }, 100);\r\n };\r\n\r\n const debouncedUpdateJson = useCallback(\r\n debounce((tempNodes, updatedEdges) => {\r\n let parsedData = {};\r\n if (user_data) {\r\n parsedData = JSON.parse(user_data);\r\n }\r\n const search = new URLSearchParams(location.search);\r\n const a_id = search.get(\"a_id\");\r\n updateJson({\r\n json: {\r\n architecture_json: {\r\n nodes: tempNodes.length > 0 ? tempNodes : getNodes(),\r\n edges: updatedEdges.length > 0 ? updatedEdges : getEdges(),\r\n lastUpdatedBy: parsedData?.user_id,\r\n },\r\n },\r\n id: architectureId,\r\n dispatch,\r\n undo,\r\n a_id,\r\n });\r\n }, 100),\r\n [updateJson, user_data, dispatch, undo]\r\n );\r\n\r\n const handleCheck = (e, value) => {\r\n let updatedNodes;\r\n setNodes((nds) => {\r\n localStorage.setItem(\r\n \"architectureJson\",\r\n JSON.stringify({\r\n architecture_json: {\r\n nodes: getNodes(),\r\n // lastUpdatedBy: parsedData?.user_id,\r\n lastEvent: ``,\r\n },\r\n })\r\n );\r\n updatedNodes = nds.map((node1) => {\r\n if (node1.id === node?.id) {\r\n return {\r\n ...node1,\r\n data: {\r\n ...node1.data,\r\n [value]: e.target.checked,\r\n },\r\n };\r\n }\r\n return node1;\r\n });\r\n return updatedNodes;\r\n });\r\n debouncedUpdateJson(updatedNodes, getEdges());\r\n };\r\n\r\n const handleChangeDatasetLabel = (index, value) => {\r\n setTempData({\r\n labels: tempData.labels,\r\n datasets: tempData.datasets.map((data, i) =>\r\n index === i\r\n ? {\r\n ...data,\r\n label: value,\r\n }\r\n : data\r\n ),\r\n columns: tempData.columns,\r\n });\r\n };\r\n const handleColumnChange = (index, value) => {\r\n setTempData((prevState) => ({\r\n ...prevState,\r\n columns: prevState?.columns?.map(\r\n (col, i) => (i === index ? { ...col, label: value } : col) // Update only the label field\r\n ),\r\n }));\r\n };\r\n\r\n const isItemToSmall = useMemo(\r\n () => zoomPercentages <= 12.5,\r\n [zoomPercentages]\r\n );\r\n\r\n const isWidthLessthan25 = useMemo(\r\n () => 12.5 < zoomPercentages && zoomPercentages <= 25,\r\n [zoomPercentages]\r\n );\r\n\r\n const isWidthLessthan50 = useMemo(\r\n () => 25 < zoomPercentages && zoomPercentages <= 50,\r\n [zoomPercentages]\r\n );\r\n\r\n const isWidthLessthan100 = useMemo(\r\n () => 50 < zoomPercentages && zoomPercentages <= 100,\r\n [zoomPercentages]\r\n );\r\n\r\n const isNodeSelected = getNodes().filter(\r\n (nd) => nd.id === node.id && node.selected === true\r\n );\r\n\r\n const frameMoreOptionsRefs = useRef([]);\r\n const handleClickOutside = (event) => {\r\n if (\r\n frameMoreOptionsRef.current &&\r\n !frameMoreOptionsRef.current.contains(event.target)\r\n ) {\r\n setShowLinkMoreOptions(false);\r\n }\r\n frameMoreOptionsRefs.current.forEach((ref, i) => {\r\n if (openTooltipIndex === i && ref && !ref.contains(event.target)) {\r\n setOpenTooltipIndex(null);\r\n }\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n document.addEventListener(\"mousedown\", handleClickOutside);\r\n return () => {\r\n document.removeEventListener(\"mousedown\", handleClickOutside);\r\n };\r\n }, [openTooltipIndex]);\r\n\r\n const renderEditModal = () => (\r\n <>\r\n \r\n >\r\n );\r\n\r\n useEffect(() => {\r\n if (!node?.selected) {\r\n setShowLinkMoreOptions(false);\r\n }\r\n }, [node]);\r\n\r\n return (\r\n <>\r\n \r\n \r\n {node?.selected && (\r\n <>\r\n {!node.data?.locked && (\r\n <>\r\n \r\n \r\n \r\n {\r\n handleTitle(e);\r\n }}\r\n variant=\"outlined\"\r\n autoComplete=\"off\"\r\n sx={{\r\n \"& .MuiOutlinedInput-input\": {\r\n borderRadius: \"0px !important\",\r\n wordWrap: \"break-word\",\r\n textOverflow: \"ellipsis\",\r\n },\r\n \"& .MuiOutlinedInput-root\": {\r\n maxWidth: \"150px\",\r\n padding: \"0px\",\r\n \"& fieldset\": {\r\n border: \"none\",\r\n },\r\n \"&:hover fieldset\": {\r\n border: \"none\",\r\n },\r\n \"&.Mui-focused fieldset\": {\r\n border: \"none\",\r\n },\r\n \"& .MuiInputBase-input::placeholder\": {\r\n color: \"#848382\",\r\n },\r\n \"&.Mui-focused .MuiInputBase-input::placeholder\":\r\n {\r\n color: \"#84838299\",\r\n },\r\n \"& .MuiInputBase-input\": {\r\n padding: \"0\",\r\n border: \"none\",\r\n fontSize: \"14px\",\r\n fontWeight: \"400\",\r\n color: \"#18181B\",\r\n },\r\n },\r\n }}\r\n />\r\n {/* \r\n {`${\r\n node?.data?.chartType?.charAt(0).toUpperCase() +\r\n node?.data?.chartType?.slice(1)\r\n } Chart`}\r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n setTempData({\r\n ...tempData,\r\n labels: node.data.data.labels,\r\n datasets: node.data.data.datasets,\r\n columns: node.data.data.columns,\r\n });\r\n setIsModalOpen(true);\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n {downloadLoading ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n \r\n\r\n \r\n >\r\n )}\r\n \r\n \r\n {\r\n let updatedNodes;\r\n setNodes((nds) => {\r\n localStorage.setItem(\r\n \"architectureJson\",\r\n JSON.stringify({\r\n architecture_json: {\r\n nodes: getNodes(),\r\n // lastUpdatedBy: parsedData?.user_id,\r\n lastEvent: ``,\r\n },\r\n })\r\n );\r\n updatedNodes = nds.map((node1) => {\r\n if (node1.id === node?.id) {\r\n return {\r\n ...node1,\r\n data: {\r\n ...node1.data,\r\n locked: !node.data?.locked,\r\n },\r\n };\r\n }\r\n return node1;\r\n });\r\n return updatedNodes;\r\n });\r\n\r\n let parsedData = {};\r\n if (user_data) {\r\n parsedData = JSON.parse(user_data);\r\n }\r\n const search = new URLSearchParams(location.search);\r\n const a_id = search.get(\"a_id\");\r\n updateJson({\r\n json: {\r\n architecture_json: {\r\n nodes: updatedNodes,\r\n lastUpdatedBy: parsedData?.user_id,\r\n },\r\n },\r\n id: architectureId,\r\n dispatch,\r\n undo,\r\n a_id,\r\n takeSnapshot,\r\n });\r\n }}\r\n >\r\n {node.data?.locked ? : }\r\n \r\n \r\n \r\n\r\n \r\n \r\n setShowLinkMoreOptions(false)}\r\n open={showLinkMoreOptions}\r\n disableFocusListener\r\n disableHoverListener\r\n disableTouchListener\r\n title={\r\n \r\n }\r\n >\r\n \r\n \r\n setShowLinkMoreOptions(!showLinkMoreOptions)\r\n }\r\n >\r\n \r\n \r\n \r\n \r\n \r\n >\r\n )}\r\n \r\n \r\n \r\n \r\n {node?.data?.chartType === \"pie\" ? (\r\n
\r\n ) : node?.data?.chartType === \"doughnut\" ? (\r\n
\r\n ) : node?.data?.chartType === \"line\" ||\r\n node?.data?.chartType === \"steppedLine\" ? (\r\n
\r\n ) : node?.data?.chartType === \"polarArea\" ? (\r\n
\r\n ) : node?.data?.chartType === \"radar\" ? (\r\n
\r\n ) : node?.data?.chartType === \"bubble\" ? (\r\n
\r\n ) : (\r\n
\r\n )}\r\n
\r\n \r\n\r\n {!node.data?.locked &&\r\n !node?.dragging &&\r\n !showExport &&\r\n !isItemToSmall &&\r\n !startVoting &&\r\n !copyAsImage && (\r\n <>\r\n {\r\n setShowDots(true);\r\n setHoveredItem(\"top\");\r\n }}\r\n onMouseLeave={() => {\r\n setShowDots(false);\r\n setHoveredItem(\"\");\r\n }}\r\n onClick={(e) => {\r\n e.preventDefault();\r\n }}\r\n >\r\n {(!isNodeSelectionStarted || isNodeSelected <= 0) && (\r\n \r\n )}\r\n \r\n console.log(\"handle onConnect\", params)}\r\n onMouseOver={() => {\r\n setShowDots(true);\r\n setHoveredItem(\"left\");\r\n }}\r\n onMouseLeave={() => {\r\n setShowDots(false);\r\n setHoveredItem(\"\");\r\n }}\r\n onClick={(e) => {\r\n e.preventDefault();\r\n }}\r\n >\r\n {(!isNodeSelectionStarted || isNodeSelected <= 0) && (\r\n \r\n )}\r\n \r\n console.log(\"handle onConnect\", params)}\r\n onMouseOver={() => {\r\n setShowDots(true);\r\n setHoveredItem(\"right\");\r\n }}\r\n onMouseLeave={() => {\r\n setShowDots(false);\r\n setHoveredItem(\"\");\r\n }}\r\n onClick={(e) => {\r\n e.preventDefault();\r\n }}\r\n >\r\n {(!isNodeSelectionStarted || isNodeSelected <= 0) && (\r\n \r\n )}\r\n \r\n console.log(\"handle onConnect\", params)}\r\n onMouseOver={() => {\r\n setShowDots(true);\r\n setHoveredItem(\"bottom\");\r\n }}\r\n onMouseLeave={() => {\r\n setShowDots(false);\r\n setHoveredItem(\"\");\r\n }}\r\n onClick={(e) => {\r\n e.preventDefault();\r\n }}\r\n >\r\n {(!isNodeSelectionStarted || isNodeSelected <= 0) && (\r\n \r\n )}\r\n \r\n >\r\n )}\r\n {sizeAsPerZoom > 25 &&\r\n !node.data?.locked &&\r\n node?.selected &&\r\n !showExport &&\r\n !isNodeSelectionStarted &&\r\n !startVoting &&\r\n !copyAsImage && (\r\n <>\r\n onResizeEnd(e, node)}\r\n style={{\r\n zIndex: 999999999999,\r\n backgroundColor: \"transparent\",\r\n border: \"1px solid transparent\",\r\n }}\r\n >\r\n \r\n \r\n onResizeEnd(e, node)}\r\n style={{\r\n zIndex: 999999999999,\r\n backgroundColor: \"transparent\",\r\n border: \"1px solid transparent\",\r\n }}\r\n >\r\n \r\n \r\n onResizeEnd(e, node)}\r\n style={{\r\n zIndex: 999999999999,\r\n backgroundColor: \"transparent\",\r\n border: \"1px solid transparent\",\r\n }}\r\n >\r\n \r\n \r\n onResizeEnd(e, node)}\r\n style={{\r\n zIndex: 999999999999,\r\n backgroundColor: \"transparent\",\r\n border: \"1px solid transparent\",\r\n }}\r\n >\r\n \r\n \r\n >\r\n )}\r\n {renderEditModal()}\r\n {showFileSizeExceedsModal && (\r\n \r\n )}\r\n {isColumnModalOpen && (\r\n \r\n )}\r\n >\r\n );\r\n}\r\n\r\nexport default memo(ChartNode, (prevProps, nextProps) => {\r\n return prevProps.data.globalDragging && nextProps.data.globalDragging;\r\n});\r\n"],"names":["_ref","_currNode$data","_currNode$data$style","_currCardData$assign","_currCardData$assign2","_currCardData$tag2","_currCardData$tag3","_currCardData$tag4","_currCardData$tag5","setShowCardModal","setShowDescription","open","handleColorChange","nodeId","handlePriorityClick","handleMemberSelect","boardData","handleChageDate","handleClearDate","handleStatusClick","tEditor","dEditor","currCardData","setNodes","getNode","useReactFlow","anchorElTag","setAnchorElTag","useState","anchorElDate","setAnchorElDate","anchorElStatus","setAnchorElStatus","anchorElPriority","setAnchorElPriority","assigneeLoader","setAssigneeLoader","anchorElAssign","setAnchorElAssign","members","setMembers","newTag","setNewTag","editTagIndex","setEditTagIndex","editTagValue","setEditTagValue","error","setError","searchValue","setSearchValue","showTextColor","setShowTextColor","textStyles","setTextStyles","isBold","isItalic","isUnderline","isStrikethrough","textAlign","listType","fontSize","currNode","currentTextColor","setCurrentTextColor","data","style","color","showColor","setShowColor","undo","takeSnapshot","useUndoRedo","user_data","localStorage","getItem","dispatch","useDispatch","location","useLocation","id","architectureId","useParams","fillColor","priority","getPriorityFill","fillColorStatus","status","getStatusFill","getArchitectureMembers","useCallback","async","_response$data","response","commanService","getApi","concat","architecture_id","filteredMembers","filter","member","first_name","last_name","toLowerCase","includes","titleEditor","useEditor","extensions","tipTapExtensions","content","title","editorProps","handlePaste","view","event","pastedContent","clipboardData","getData","JSON","parse","e","descriptionEditor","description","document","querySelectorAll","forEach","element","addEventListener","stopPropagation","selection","window","getSelection","rangeCount","removeAllRanges","useEffect","updateTextStyles","currentStyles","editor","isActive","textColor","getAttributes","currentColor","on","off","handleCloseIcon","_tEditor$commands","_dEditor$commands","updatedNodes","commands","setContent","getHTML","getText","trim","length","nds","_parsedData","map","nd","_objectSpread","a_id","URLSearchParams","search","get","parsedData","updateJson","json","architecture_json","nodes","lastUpdatedBy","user_id","hasClickedOnGivenClass","target","className","classList","contains","parentElement","handleClickOutside","removeEventListener","_jsx","Dialog","onClose","onClick","disableEnforceFocus","fullWidth","maxWidth","sx","width","margin","borderRadius","boxShadow","background","children","DialogContent","_jsxs","Box","marginBottom","display","flexDirection","justifyContent","fontWeight","gap","alignItems","IconButton","height","bgcolor","transition","IcCloseThin","fill","EditorContent","cursor","border","padding","minHeight","borderBottom","CustomNameTooltip","placement","arrow","lightPrimary","chain","focus","toggleBold","run","IcTextBold","primaryColor","toggleItalic","IcTextItalic","toggleUnderline","IcTextUnderline","toggleStrike","IcTextStrickTrough","toggleBulletList","IcListOutlined","toggleOrderedList","IcNumberListOutlined","toggleTaskList","IcTaskList","setTextAlign","IcTextAlignLeft","IcTextAlignCenter","IcTextAlignRight","ClickAwayListener","onClickAway","CustomTooltip","mt","PopperProps","disablePortal","disableFocusListener","disableHoverListener","disableTouchListener","BackgroundTool","showOpacity","selectedNodeColor","toRgba","onChangeColor","setColor","ToolTipWithDisabled","tooltipTitle","disabled","IcTextColor","ml","backgroundColor","outline","extendMarkRange","setLink","href","IcLinkOutlined3","documentColor","Stack","IcChangeBg","mouseX","clientX","mouseY","clientY","alignContent","paddingX","paddingY","Icon","Popover","anchorReference","anchorPosition","top","left","undefined","p","statusDropdown","_ref2","i","name","React","mb","direction","marginX","Typography","DoneIcon","size","IcPriorityLevel","priorityDropdown","_ref3","position","date","_Fragment","IcDate","Boolean","DatePicker","selected","onChange","inline","borderTop","handleClickAssign","assign","flexWrap","slice","val","index","_val$first_name$","profile_picture","marginRight","objectFit","src","alt","profile_color","toUpperCase","isAvatarGroup","_val$first_name$2","Avatar","SearchInput","value","placeholder","bgColor","formControlSx","SimpleCircularProgress","loaderColor","loaderPathColor","user","_user$first_name$","_currCardData$assign3","marginTop","overflow","whiteSpace","textOverflow","SimpleCheckBox","checked","some","assignedUser","tag","TextField","onKeyDown","handleAddTag","_currCardData$tag","key","randomColor","autoComplete","helperText","lineHeight","handleSaveEdit","_nd$data","_nd$data$tag","idx","textTransform","variant","handleEditTag","marginLeft","EditIcon","_nd$data2","_","handleRemoveTag","CancelIcon","CardNode","node","_data$description","_node$data","_node$data$style","_node$data2","_node$data3","_node$data4","_node$data5","_data$tag2","_getNodes","_getNodes$filter","_getNodes2","_data$emoji","_node$data$style$font","_node$data18","_node$data18$style","_node$data$style$font2","_node$data19","_node$data19$style","_node$data$style$text","_node$data20","_node$data20$style","_node$data$style$text2","_node$data21","_node$data21$style","_data$description2","_node$data$style$font3","_node$data22","_node$data22$style","_node$data$style$font4","_node$data23","_node$data23$style","_node$data$style$text3","_node$data24","_node$data24$style","_node$data$style$text4","_node$data25","_node$data25$style","_data$assign","_data$assign2","_data$tag3","_data$tag4","_cardRef$current2","_cardRef$current3","_cardRef$current4","_cardRef$current5","_cardRef$current6","_data$emoji2","_Object$values","_data$tag5","_data$tag6","_node$data26","linkText","setLinkText","ref","useRef","showDescription","getNodes","getIntersectingNodes","showFontStyle","setShowFontStyle","showEdit","setShowEdit","showTextEditor","setShowTextEditor","isHovered","setIsHovered","hoveredItem","setHoveredItem","fontstyleEditor","setFontStyleEditor","showDots","setShowDots","showCardModal","containerRef","cardRef","mainRef","titleRef","title1Ref","descriptionRef","dataRef","assignRef","tagRef","zoomPercentages","setZoomPercentages","showCardMoreOptions","setShowCardMoreOptions","currentFontFamily","setCurrentFontFamily","currentTextAlign","setCurrentTextAlign","currentListType","setCurrentListType","showListTypes","setShowListTypes","showReaction","setShowReaction","showAlignment","setShowAlignment","showFontSizeOpt","setShowFontSizeOpt","showFontFamily","setShowFontFamily","fontSizeArr","selectedFontSize","setSelectedFontSize","userData","useSelector","state","common","architectureData","_data$archBoard","archBoard","architectureRes","setOpen","anchorEl","setAnchorEl","setBoardData","openTag","setOpenTag","idTag","openStatus","setOpenStatus","floatingMenu","setFloatingMenu","openAssign","setOpenAssign","idAssign","idStatus","canBeOpen","showLink","setShowLink","id1","simpleRef","store","useStoreApi","showExport","copyAsImage","isDownload","mindMapStore","isNodeSelectionStarted","useNodeSelectionStarted","textColorPopupRef","textPopupRef","fontstyle","fontList","linkRef","fontFamilyRef","fontSizeRef","fontAlign","TitleEnterKeyHandler","Extension","create","addKeyboardShortcuts","Enter","onUpdate","resize","nodeResizeData","debouncedUpdateHTML","onBlur","edges","onSelectionUpdate","rect","getRangeAt","getBoundingClientRect","x","y","_ref4","_titleEditor$commands","_editor$commands","debouncedUpdateJson","getElementById","current","closeAllTools","timerForEditor","selectedTextRef","onEditorClick","clearTimeout","type","detail","setTimeout","pos","posAtCoords","setTextSelection","toLocaleDateString","projectRes","project_id","project_name","handleArchitectureResponse","_nd$data4","_nd$data4$assign","updatedAssign","email_id","useMemo","debounce","updateTextAlignment","alignment","tempNodes","_parsedData2","zoom","useStore","_state$transform","transform","sizeAsPerZoom","isNodeSelected","frameMoreOptionsRef","reactionRef","handleClickOutside1","debouncedUpdateFontSize","validatedSize","Math","min","max","parseInt","empty","prevNodes","_node$data6","_node$data7","_node$data8","sanitizeHtml","setFontSize","handleUpdateFontSize","sizeValue","clampedSize","handleFontSizeChange","action","currentFontSize","newFontSize","_node$data9","_node$data10","_node$data11","getCurrentStyles","fontFamily","shouldShowBox","_fontFamilyArr$find","fontFamilyArr","find","font","family","_fontFamilyArr$find2","resizedWidth","setResizedWidth","transformScale","setTransformScale","_currNode$style","_currNode$style2","_cardRef$current","scaleX","scaleY","offsetHeight","scale","onResize","_ref5","prev","onResizeEnd","_parsedData3","_updatedNodes","setItem","stringify","lastEvent","_ref6","_mainRef$current","_mainRef$current2","Number","offsetWidth","n","_groupNode","_groupNode2","_groupNode3","_groupNode4","intersections","groupNode","parentNode","_store$getState","_store$getState$nodeI","getState","nodeInternals","_parentNode$positionA","_parentNode$positionA2","_parentNode$positionA3","_parentNode$positionA4","positionAbsolute","expandParent","_n2","_groupNode5","_node$positionAbsolut","_groupNode6","_groupNode6$positionA","_node$positionAbsolut2","_groupNode7","_groupNode7$positionA","_n3","structuredClone","_n","_getNodePositionInsid","getNodePositionInsideParent","_title1Ref$current","_descriptionRef$curre","_dataRef$current","_assignRef$current","_tagRef$current","totalHeight","selectedNodes","isMultiNodeSelected","emojiData","reduce","acc","comment","_comment$data","_comment$data$emoji","emoji","unified","imageUrl","count","emojiD","emojiCount","Object","values","locked","paddingBottom","onMouseEnter","onMouseLeave","onMouseOver","onMouseOut","wordWrap","removeHTMLTags","dangerouslySetInnerHTML","__html","preventDefault","pointerEvents","isFocused","right","opacity","visibility","IcArrowExpand","NodeResizer","minWidth","handleStyle","NodeResizeControl","keepAspectRatio","zIndex","transformOrigin","dragging","Handle","connectionMode","isConnectable","transitionDuration","maxHeight","onConnect","params","console","log","bottom","addEmoji","_n$data2","_n$data2$emoji","existingEmojiIndex","findIndex","userId","_n$data$emoji3","anchorOrigin","vertical","horizontal","BackdropProps","_ref7","_ref8","join","_data$tag","globalDragging","NodeToolbar","Position","Top","s3AssetsUrl","colorHeading","CommonDivider","my","orientation","flexItem","currentTarget","previousOpen","IcPriority","IcStatus2","IcAssign","onWheelCapture","_node$data12","_node$data13","_node$data14","setFontFamily","handleChangeFontFamily","CheckCircleOutlineIcon","px","match","titleDark","whiteColor","paddingRight","borderRight","IcDecresFontSize","IcIncreseFontSize","secondaryColor","selectParentNode","isStrike","IcFontStyle","isBullet","isOrdered","isTaskList","_node$data15","_node$data16","_node$data17","handleChangeTextColor","EmojiPicker","onEmojiClick","_n$data","_n$data$emoji","_n$data$emoji2","IcSmileHappyPlus","IcTagOutlined","toggleLockUnlock","_nd$data3","IcLockLocked","IcLockUnLocked","FrameMoreMenus","showRename","showDuplicate","showCopyAsImage","showFrame","showLockUnlock","showCopyLink","showLinkTo","showDelete","exportShow","showBringToFrontAndBack","setShowFrameMoreOptions","IcMenuDotsVertical","handleCloseFloatingMenu","LinkTool","_e$target","onKeyPress","CardModal","VotingCommon","memo","prevProps","nextProps","ChartJS","register","ArcElement","Title","Tooltip","Legend","LineElement","PointElement","LinearScale","CategoryScale","BarElement","RadialLinearScale","AntSwitch","styled","Switch","theme","applyStyles","transitions","duration","boxSizing","ChartNode","_node$data$data$useCo","_node$data$data","_node$data15$data","_node$data32","_node$data32$style","_node$data45","_node$data46","_node$data48","_node$data49","_node$data50","_node$data51","_node$data52","_node$data53","_node$data54","_node$data55","_node$data56","_node$data57","_node$data58","_node$data59","startVoting","_archBoard$votingData","votingData","startVotingSession","openTooltipIndex","setOpenTooltipIndex","isModalOpen","setIsModalOpen","isColumnModalOpen","setIsColumnModalOpen","chartName","setChartName","isDotsShow","setIsDotsShow","downloadLoading","setDownloadLoading","showLinkMoreOptions","setShowLinkMoreOptions","showFileSizeExceedsModal","setShowFileSizeExceedsModal","chartRef","tableContainerRef","chartData","setChartData","labels","datasets","columns","tempData","setTempData","topHeader","parsedFileData","setParsedFileData","useColumn","setUseColumn","useColumnName","setUseColumnName","isLoading","setIsLoading","focusedIndex","setFocusedIndex","getEdges","updateChartNodeData","debouncedUpdateTitle","label","frame","newNode","getId","xPos","yPos","hide","isShadow","showBorder","frameNo","borderColor","nodeWH","visibleLabels","isShow","updatedDatasets","dataset","updatedData","_labels$index","config","responsive","indexAxis","chartType","animation","scales","beginAtZero","stacked","ticks","plugins","customCanvasBackgroundColor","legend","usePointStyle","pointStyle","boxWidth","boxHeight","generateLabels","chart","_node$data16$data","_node$data16$data$col","_node$data16$data$col2","_chart$getDatasetMeta","Array","isArray","text","fillStyle","strokeStyle","lineWidth","borderWidth","hidden","getDatasetMeta","datasetIndex","tooltip","callbacks","tooltipItem","datasetLabel","dataIndex","handleCloseModal","getRootProps","getInputProps","useDropzone","onDrop","files","file","fileSizeLimit","fileExtension","split","pop","Papa","header","skipEmptyLines","complete","results","topHeadercsv","meta","fields","firstHeader","prevTempData","rows","row","String","reader","FileReader","onload","_headers$","Uint8Array","result","workbook","XLSX","sheetName","SheetNames","worksheet","Sheets","jsonData","sheet_to_json","headers","topHeaderXLS","parsedRows","cell","rowData","_row$index","readAsArrayBuffer","accept","maxSize","handleParsedData","firstColumnKey","keys","months","hasInvalidData","month","isNaN","parseFloat","parsedValue","getRandomColor","unshift","pointBackgroundColor","pointBorderColor","errorToast","message","minRows","updatedLabels","from","floor","random","handleDataChange","newValue","newDatasets","newData","newLabels","handleSave","node1","handleDataChangeLabel","updatedChartData","handleDeleteLabel","handleClearData","prevData","_node$data27","_node$data28","updatedBackgroundColor","colorIndex","_node$data29","_node$data29$style","_node$data30","_node$data30$style","_node$data31","_node$data31$style","_ref$current","_ref$current$editor","_ref$current2","_ref$current2$editor","_mainRef$current3","updatedEdges","handleCheck","handleChangeDatasetLabel","isItemToSmall","frameMoreOptionsRefs","isVisible","handleTitle","IcEditChartOutline","options","useCORS","allowTaint","antialias","logging","originalCanvas","html2canvas","desiredWidth","desiredHeight","fixedCanvas","createElement","aspectRatio","ctx","getContext","drawWidth","drawHeight","drawImage","dataUrl","toDataURL","link","download","click","IcDownloadChartOutlined","_parsedData4","_node$data47","edit","showAddComment","saveFile","originalSize","hideImage","handleClickEdit","Pie","Doughnut","Line","PolarArea","Radar","Bubble","Bar","Loader","spacing","inputProps","_node$data33","_node$data34","BtnColoredOutlined","hoverSx","IcUploadOutlined","xs","fontSizes","fontSize13","md","fontSize14","btnTextHeight","TableContainer","Table","TableRow","TableCell","borderLeft","_tempData$datasets","_node$data35","_tempData$columns","_tempData$columns$ind","_node$data36","el","FrameBackgroundToolbar","colorTitle","handleColumnChange","prevState","_prevState$columns","col","float","updatedColumns","splice","handleDeleteRow","IcDeleteOutlined","_node$data37","_node$data38","_node$data39","j","_node$data40","_node$data41","_node$data42","isLabelRow","onFocus","handleBlur","step","MozAppearance","WebkitAppearance","_node$data43","py","stroke","newDataset","scrollWidth","scrollTo","behavior","IcPlus2","_node$data44","handleAddRow","newLabel","scrollHeight","mr","fontSize16","BtnGradient","FileSizeExceeds","ChooseColumnModal","handleConfirmColumn","renderEditModal"],"sourceRoot":""}