@veltdev/react 1.0.112 → 1.0.114

package/cjs/index.js

@@ -82,6 +82,16 @@ function __generator(thisArg, body) {
         } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 }
 
 var VeltContext = React.createContext({ client: null });
@@ -223,7 +233,7 @@ var SnippylyCommentBubble = function (props) {
 };
 
 var SnippylyComments = function (props) {
-    var autoCategorize = props.autoCategorize, streamViewContainerId = props.streamViewContainerId, onSignIn = props.onSignIn, onUpgrade = props.onUpgrade, textMode = props.textMode, popoverMode = props.popoverMode, popoverTriangleComponent = props.popoverTriangleComponent, floatingCommentDialog = props.floatingCommentDialog, moderatorMode = props.moderatorMode, streamMode = props.streamMode, signInButton = props.signInButton, upgradeButton = props.upgradeButton, attachments = props.attachments, recordings = props.recordings, reactions = props.reactions, deviceInfo = props.deviceInfo, commentIndex = props.commentIndex, dialogOnHover = props.dialogOnHover, dialogOnTargetElementClick = props.dialogOnTargetElementClick, priority = props.priority, inboxMode = props.inboxMode, suggestionMode = props.suggestionMode, mobileMode = props.mobileMode, inlineCommentMode = props.inlineCommentMode, privateCommentMode = props.privateCommentMode, minimap = props.minimap, persistentCommentMode = props.persistentCommentMode, ghostComments = props.ghostComments, ghostCommentsIndicator = props.ghostCommentsIndicator, commentsOnDom = props.commentsOnDom, commentTool = props.commentTool, sidebarButtonOnCommentDialog = props.sidebarButtonOnCommentDialog, deviceIndicatorOnCommentPins = props.deviceIndicatorOnCommentPins, scrollToComment = props.scrollToComment, userMentions = props.userMentions, deleteOnBackspace = props.deleteOnBackspace, hotkey = props.hotkey, recordingSummary = props.recordingSummary, recordingCountdown = props.recordingCountdown, unreadIndicatorMode = props.unreadIndicatorMode, pinShadowDom = props.pinShadowDom, dialogShadowDom = props.dialogShadowDom, allowedElementIds = props.allowedElementIds, allowedElementClassNames = props.allowedElementClassNames, allowedElementQuerySelectors = props.allowedElementQuerySelectors, onCommentAdd = props.onCommentAdd, onCommentUpdate = props.onCommentUpdate, onCommentAccept = props.onCommentAccept, onCommentReject = props.onCommentReject, onSidebarButtonOnCommentDialogClick = props.onSidebarButtonOnCommentDialogClick, customStatus = props.customStatus, customPriority = props.customPriority, customCategory = props.customCategory, status = props.status, resolveButton = props.resolveButton, darkMode = props.darkMode, onCustomPinInject = props.onCustomPinInject, children = props.children;
+    var autoCategorize = props.autoCategorize, streamViewContainerId = props.streamViewContainerId, onSignIn = props.onSignIn, onUpgrade = props.onUpgrade, textMode = props.textMode, popoverMode = props.popoverMode, popoverTriangleComponent = props.popoverTriangleComponent, floatingCommentDialog = props.floatingCommentDialog, moderatorMode = props.moderatorMode, streamMode = props.streamMode, signInButton = props.signInButton, upgradeButton = props.upgradeButton, attachments = props.attachments, recordings = props.recordings, reactions = props.reactions, deviceInfo = props.deviceInfo, commentIndex = props.commentIndex, dialogOnHover = props.dialogOnHover, dialogOnTargetElementClick = props.dialogOnTargetElementClick, priority = props.priority, inboxMode = props.inboxMode, suggestionMode = props.suggestionMode, mobileMode = props.mobileMode, inlineCommentMode = props.inlineCommentMode, privateCommentMode = props.privateCommentMode, minimap = props.minimap, persistentCommentMode = props.persistentCommentMode, ghostComments = props.ghostComments, ghostCommentsIndicator = props.ghostCommentsIndicator, commentsOnDom = props.commentsOnDom, commentTool = props.commentTool, sidebarButtonOnCommentDialog = props.sidebarButtonOnCommentDialog, deviceIndicatorOnCommentPins = props.deviceIndicatorOnCommentPins, scrollToComment = props.scrollToComment, userMentions = props.userMentions, deleteOnBackspace = props.deleteOnBackspace, hotkey = props.hotkey, recordingSummary = props.recordingSummary, recordingCountdown = props.recordingCountdown, unreadIndicatorMode = props.unreadIndicatorMode, pinShadowDom = props.pinShadowDom, dialogShadowDom = props.dialogShadowDom, shadowDom = props.shadowDom, allowedElementIds = props.allowedElementIds, allowedElementClassNames = props.allowedElementClassNames, allowedElementQuerySelectors = props.allowedElementQuerySelectors, onCommentAdd = props.onCommentAdd, onCommentUpdate = props.onCommentUpdate, onCommentAccept = props.onCommentAccept, onCommentReject = props.onCommentReject, onSidebarButtonOnCommentDialogClick = props.onSidebarButtonOnCommentDialogClick, customStatus = props.customStatus, customPriority = props.customPriority, customCategory = props.customCategory, status = props.status, resolveButton = props.resolveButton, darkMode = props.darkMode, onCustomPinInject = props.onCustomPinInject, children = props.children;
     var ref = React.useRef();
     React.useEffect(function () {
         if (ref.current) {
@@ -270,7 +280,7 @@ var SnippylyComments = function (props) {
             });
         }
     }, []);
-    return (React__default["default"].createElement("velt-comments", { ref: ref, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "comment-tool": [true, false].includes(commentTool) ? (commentTool ? 'true' : 'false') : undefined, "sidebar-button-on-comment-dialog": [true, false].includes(sidebarButtonOnCommentDialog) ? (sidebarButtonOnCommentDialog ? 'true' : 'false') : undefined, "device-indicator-on-comment-pins": [true, false].includes(deviceIndicatorOnCommentPins) ? (deviceIndicatorOnCommentPins ? 'true' : 'false') : undefined, "scroll-to-comment": [true, false].includes(scrollToComment) ? (scrollToComment ? 'true' : 'false') : undefined, "user-mentions": [true, false].includes(userMentions) ? (userMentions ? 'true' : 'false') : undefined, "delete-on-backspace": [true, false].includes(deleteOnBackspace) ? (deleteOnBackspace ? 'true' : 'false') : undefined, hotkey: [true, false].includes(hotkey) ? (hotkey ? 'true' : 'false') : undefined, "recording-summary": [true, false].includes(recordingSummary) ? (recordingSummary ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "unread-indicator-mode": unreadIndicatorMode, "pin-shadow-dom": [true, false].includes(pinShadowDom) ? (pinShadowDom ? 'true' : 'false') : undefined, "dialog-shadow-dom": [true, false].includes(dialogShadowDom) ? (dialogShadowDom ? 'true' : 'false') : undefined, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "custom-status": JSON.stringify(customStatus), "custom-priority": JSON.stringify(customPriority), "custom-category": JSON.stringify(customCategory), "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
+    return (React__default["default"].createElement("velt-comments", { ref: ref, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "comment-tool": [true, false].includes(commentTool) ? (commentTool ? 'true' : 'false') : undefined, "sidebar-button-on-comment-dialog": [true, false].includes(sidebarButtonOnCommentDialog) ? (sidebarButtonOnCommentDialog ? 'true' : 'false') : undefined, "device-indicator-on-comment-pins": [true, false].includes(deviceIndicatorOnCommentPins) ? (deviceIndicatorOnCommentPins ? 'true' : 'false') : undefined, "scroll-to-comment": [true, false].includes(scrollToComment) ? (scrollToComment ? 'true' : 'false') : undefined, "user-mentions": [true, false].includes(userMentions) ? (userMentions ? 'true' : 'false') : undefined, "delete-on-backspace": [true, false].includes(deleteOnBackspace) ? (deleteOnBackspace ? 'true' : 'false') : undefined, hotkey: [true, false].includes(hotkey) ? (hotkey ? 'true' : 'false') : undefined, "recording-summary": [true, false].includes(recordingSummary) ? (recordingSummary ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "unread-indicator-mode": unreadIndicatorMode, "pin-shadow-dom": [true, false].includes(pinShadowDom) ? (pinShadowDom ? 'true' : 'false') : undefined, "dialog-shadow-dom": [true, false].includes(dialogShadowDom) ? (dialogShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "custom-status": JSON.stringify(customStatus), "custom-priority": JSON.stringify(customPriority), "custom-category": JSON.stringify(customCategory), "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyCommentsSidebar = function (props) {
@@ -528,71 +538,479 @@ var VeltNotificationsHistoryPanel = function (props) {
     return (React__default["default"].createElement("velt-notifications-history-panel", { ref: ref, "embed-mode": [true, false].includes(embedMode) ? (embedMode ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }));
 };
 
+var VeltChartComment = function (props) {
+    var commentMetadata = props.commentMetadata, dialogMetadataTemplate = props.dialogMetadataTemplate, children = props.children, ghostComment = props.ghostComment;
+    return (React__default["default"].createElement("velt-chart-comment", { "comment-metadata": commentMetadata ? JSON.stringify(commentMetadata) : undefined, "dialog-metadata-template": (dialogMetadataTemplate === null || dialogMetadataTemplate === void 0 ? void 0 : dialogMetadataTemplate.length) ? JSON.stringify(dialogMetadataTemplate) : undefined, "ghost-comment": [true, false].includes(ghostComment) ? (ghostComment ? 'true' : 'false') : undefined }, children));
+};
+
 var VeltNivoChartComments = function (_a) {
-    var _b, _c, _d;
-    var props = _a.props;
+    var _b, _c, _d, _e, _f;
+    var chartComputedData = _a.chartComputedData, dialogMetadataTemplate = _a.dialogMetadataTemplate, id = _a.id;
+    var client = useVeltClient().client;
+    var _g = React__default["default"].useState({ comments: [] }), ghostCommentsData = _g[0], setGhostCommentsData = _g[1];
+    var _h = React__default["default"].useState(null), documentPathsSubscription = _h[0], setDocumentPathsSubscription = _h[1];
+    var _j = React__default["default"].useState(null), commentSubscription = _j[0], setCommentSubscription = _j[1];
+    // Unsubscribe from the subscriptions when the component is unmounted
+    React.useEffect(function () {
+        return function () {
+            unsubscribeDocumentPathsSubscription();
+            unsubscribeCommentSubscription();
+        };
+    }, []);
+    React.useEffect(function () {
+        getCommentAnnotations();
+    }, [chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.data]);
+    React.useEffect(function () {
+        if (client) {
+            getCommentAnnotations();
+        }
+    }, [client]);
+    var getCommentAnnotations = function () {
+        var _a;
+        try {
+            unsubscribeDocumentPathsSubscription();
+            unsubscribeCommentSubscription();
+            if (client) {
+                var subscription = (_a = client === null || client === void 0 ? void 0 : client.docService) === null || _a === void 0 ? void 0 : _a.getDocumentPaths$().subscribe(function (paths) {
+                    var _a;
+                    if (paths === null || paths === void 0 ? void 0 : paths.clientDocumentId) {
+                        unsubscribeCommentSubscription();
+                        var commentElement = client.getCommentElement();
+                        var subscription_1 = (_a = commentElement === null || commentElement === void 0 ? void 0 : commentElement.getAllCommentAnnotations(paths === null || paths === void 0 ? void 0 : paths.clientDocumentId)) === null || _a === void 0 ? void 0 : _a.subscribe(function (comments) {
+                            filterGhostComments(comments);
+                        });
+                        setCommentSubscription(subscription_1);
+                    }
+                });
+                setDocumentPathsSubscription(subscription);
+            }
+        }
+        catch (err) {
+        }
+    };
+    var filterGhostComments = function (comments) {
+        var _a, _b, _c;
+        try {
+            var chartComments = (_a = comments === null || comments === void 0 ? void 0 : comments.filter(function (annotation) { return annotation.commentType === 'chart'; })) === null || _a === void 0 ? void 0 : _a.filter(function (annotation) { var _a; return ((_a = annotation === null || annotation === void 0 ? void 0 : annotation.metadata) === null || _a === void 0 ? void 0 : _a.id) === id; });
+            if ((_b = chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.bars) === null || _b === void 0 ? void 0 : _b.length) {
+                var ghostComments_1 = [];
+                chartComments.forEach(function (annotation) {
+                    var _a;
+                    var metadata = annotation.metadata;
+                    var groupId = metadata === null || metadata === void 0 ? void 0 : metadata.groupId;
+                    var value = metadata === null || metadata === void 0 ? void 0 : metadata.value;
+                    var label = metadata === null || metadata === void 0 ? void 0 : metadata.label;
+                    if (groupId && value && label) {
+                        var bar = (_a = chartComputedData.bars) === null || _a === void 0 ? void 0 : _a.find(function (bar) { var _a, _b, _c; return ((_a = bar === null || bar === void 0 ? void 0 : bar.data) === null || _a === void 0 ? void 0 : _a.id) === groupId && ((_b = bar === null || bar === void 0 ? void 0 : bar.data) === null || _b === void 0 ? void 0 : _b.value) === value && ((_c = bar === null || bar === void 0 ? void 0 : bar.data) === null || _c === void 0 ? void 0 : _c.indexValue) === label; });
+                        if (!bar) {
+                            ghostComments_1.push(annotation);
+                        }
+                    }
+                });
+                var width = ((_c = chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.bars[0]) === null || _c === void 0 ? void 0 : _c.width) || 0;
+                setGhostCommentsData({ comments: ghostComments_1, width: width, type: 'bar' });
+            }
+            else if (chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.points) {
+                var ghostComments_2 = [];
+                chartComments.forEach(function (annotation) {
+                    var _a;
+                    var metadata = annotation.metadata;
+                    var groupId = metadata === null || metadata === void 0 ? void 0 : metadata.groupId;
+                    var value = metadata === null || metadata === void 0 ? void 0 : metadata.value;
+                    var label = metadata === null || metadata === void 0 ? void 0 : metadata.label;
+                    if (groupId && value && label) {
+                        var point = (_a = chartComputedData.points) === null || _a === void 0 ? void 0 : _a.find(function (point) { var _a, _b; return (point === null || point === void 0 ? void 0 : point.serieId) === groupId && ((_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.y) === value && ((_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.x) === label; });
+                        if (!point) {
+                            ghostComments_2.push(annotation);
+                        }
+                    }
+                });
+                var width = 0;
+                setGhostCommentsData({ comments: ghostComments_2, width: width, type: 'line' });
+            }
+        }
+        catch (err) {
+        }
+    };
     var polarToCartesian = function (centerX, centerY, radius, angleInRadians) {
         return {
             x: centerX + radius * Math.cos(angleInRadians - Math.PI / 2),
             y: centerY + radius * Math.sin(angleInRadians - Math.PI / 2)
         };
     };
+    var unsubscribeDocumentPathsSubscription = function () {
+        try {
+            if (documentPathsSubscription) {
+                documentPathsSubscription === null || documentPathsSubscription === void 0 ? void 0 : documentPathsSubscription.unsubscribe();
+            }
+        }
+        catch (err) {
+        }
+    };
+    var unsubscribeCommentSubscription = function () {
+        try {
+            if (commentSubscription) {
+                commentSubscription === null || commentSubscription === void 0 ? void 0 : commentSubscription.unsubscribe();
+            }
+        }
+        catch (err) {
+        }
+    };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("foreignObject", null,
-            React__default["default"].createElement("style", null, "\n                        .nivo-chart-comment-point {\n                            opacity: 0 !important;\n                            visibility: hidden !important;\n                          }\n                          \n                          .nivo-chart-comment-tool {\n                            opacity: 0;\n                          }\n                          \n                          .nivo-chart-comment-tool:hover {\n                            opacity: 1;\n                            visibility: visible;\n                            transition: 0.3s;\n                          }\n                          \n                          .nivo-chart-comment-container {\n                            position: relative;\n                            display: flex;\n                            flex-direction: column;\n                            align-items: center;\n                            /* justify-content: center; */\n                            width: 100%;\n                            height: 100%;\n                          }\n                          \n                          .nivo-chart-comment-container velt-comment-tool {\n                            display: flex;\n                            cursor: pointer;\n                          }\n                          \n                          .nivo-chart-container snippyly-comment-pin-portal {\n                              /* hide it */\n                              display: none;\n                          }\n                    ")),
-        ((_b = props === null || props === void 0 ? void 0 : props.points) === null || _b === void 0 ? void 0 : _b.length) && props.points.map(function (point, index) {
+            React__default["default"].createElement("style", null, "\n                        .nivo-chart-comment-point {\n                            opacity: 0 !important;\n                            visibility: hidden !important;\n                          }\n                          \n                          .nivo-chart-comment-tool {\n                            opacity: 0;\n                          }\n                          \n                          .nivo-chart-comment-tool:hover {\n                            opacity: 1;\n                            visibility: visible;\n                            transition: 0.3s;\n                          }\n                          \n                          .nivo-chart-comment-container {\n                            position: relative;\n                            display: flex;\n                            flex-direction: column;\n                            align-items: center;\n                            justify-content: center;\n                            width: 100%;\n                            height: 100%;\n                          }\n                          \n                          .nivo-chart-comment-container velt-comment-tool {\n                            display: flex;\n                            cursor: pointer;\n                          }\n                          \n                          .nivo-chart-container snippyly-comment-pin-portal {\n                              /* hide it */\n                              display: none;\n                          }\n                    ")),
+        ((_b = chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.points) === null || _b === void 0 ? void 0 : _b.length) && chartComputedData.points.map(function (point, index) {
             var _a, _b;
-            var targetCommentElementId = "".concat((_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.x, "-").concat((_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.y);
+            var commentMetadata = {
+                id: id,
+                label: (_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.x,
+                groupId: point === null || point === void 0 ? void 0 : point.serieId,
+                value: (_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.y,
+            };
             return (React__default["default"].createElement("g", { transform: "translate(".concat(point.x, ", ").concat(point.y, ")"), key: point.id },
-                React__default["default"].createElement("foreignObject", { x: -20, y: -40, width: "40", height: "40" },
+                React__default["default"].createElement("foreignObject", { x: -12, y: -40, width: "24", height: "24" },
                     React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
-                        React__default["default"].createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
-                        React__default["default"].createElement("div", { className: 'nivo-chart-comment-tool' },
-                            React__default["default"].createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
-                                React__default["default"].createElement("div", { slot: 'button' },
-                                    React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: '#625DF5', className: "bi bi-chat", viewBox: "0 0 16 16" },
-                                        React__default["default"].createElement("path", { d: "M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105" }))))),
-                        React__default["default"].createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
-                            React__default["default"].createElement("div", { slot: 'content' },
-                                React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: point.serieColor, className: "bi bi-chat-fill", viewBox: "0 0 16 16" },
-                                    React__default["default"].createElement("path", { d: "M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15" }))))))));
+                        React__default["default"].createElement(VeltChartComment, { commentMetadata: commentMetadata, dialogMetadataTemplate: dialogMetadataTemplate || ['groupId', 'label', 'value'] })))));
         }),
-        ((_c = props === null || props === void 0 ? void 0 : props.bars) === null || _c === void 0 ? void 0 : _c.length) && props.bars.map(function (point, index) {
-            var _a, _b;
-            var targetCommentElementId = "".concat(point === null || point === void 0 ? void 0 : point.key, "-").concat((_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.value);
+        ((_c = chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.bars) === null || _c === void 0 ? void 0 : _c.length) && chartComputedData.bars.map(function (point, index) {
+            var _a, _b, _c;
+            var commentMetadata = {
+                id: id,
+                label: (_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.indexValue,
+                groupId: (_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.id,
+                value: (_c = point === null || point === void 0 ? void 0 : point.data) === null || _c === void 0 ? void 0 : _c.value,
+            };
             return (React__default["default"].createElement("g", { transform: "translate(".concat(point.x + point.width, ", ").concat(point.y, ")"), key: point.key },
                 React__default["default"].createElement("foreignObject", { x: 0, y: -8, width: "24", height: "24" },
                     React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
-                        React__default["default"].createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
-                        React__default["default"].createElement("div", { className: 'nivo-chart-comment-tool' },
-                            React__default["default"].createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
-                                React__default["default"].createElement("div", { slot: 'button' },
-                                    React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: '#625DF5', className: "bi bi-chat", viewBox: "0 0 16 16" },
-                                        React__default["default"].createElement("path", { d: "M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105" }))))),
-                        React__default["default"].createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
-                            React__default["default"].createElement("div", { slot: 'content' },
-                                React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: ((_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.fill) || point.color, className: "bi bi-chat-fill", viewBox: "0 0 16 16" },
-                                    React__default["default"].createElement("path", { d: "M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15" }))))))));
+                        React__default["default"].createElement(VeltChartComment, { commentMetadata: commentMetadata, dialogMetadataTemplate: dialogMetadataTemplate || ['groupId', 'label', 'value'] })))));
         }),
-        ((_d = props === null || props === void 0 ? void 0 : props.dataWithArc) === null || _d === void 0 ? void 0 : _d.length) && props.dataWithArc.map(function (arcData, index) {
+        ((_d = chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.dataWithArc) === null || _d === void 0 ? void 0 : _d.length) && chartComputedData.dataWithArc.map(function (arcData, index) {
             var midAngle = (arcData.arc.startAngle + arcData.arc.endAngle) / 2;
             var radiusOffset = 20; // Extend beyond the outer radius for visibility
-            var position = polarToCartesian(props.centerX, props.centerY, arcData.arc.outerRadius + radiusOffset, midAngle);
-            var targetCommentElementId = "".concat(arcData === null || arcData === void 0 ? void 0 : arcData.id, "-").concat(arcData === null || arcData === void 0 ? void 0 : arcData.value);
+            var position = polarToCartesian(chartComputedData.centerX, chartComputedData.centerY, arcData.arc.outerRadius + radiusOffset, midAngle);
+            var commentMetadata = {
+                id: id,
+                label: arcData === null || arcData === void 0 ? void 0 : arcData.label,
+                value: arcData === null || arcData === void 0 ? void 0 : arcData.value,
+            };
             return (React__default["default"].createElement("g", { transform: "translate(".concat(position.x, ", ").concat(position.y, ")"), key: arcData.id },
                 React__default["default"].createElement("foreignObject", { width: "100", height: "50", x: "-50", y: "-25", style: { overflow: 'visible' } },
                     React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
-                        React__default["default"].createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
-                        React__default["default"].createElement("div", { className: 'nivo-chart-comment-tool' },
-                            React__default["default"].createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
-                                React__default["default"].createElement("div", { slot: 'button' },
-                                    React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: '#625DF5', className: "bi bi-chat", viewBox: "0 0 16 16" },
-                                        React__default["default"].createElement("path", { d: "M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105" }))))),
-                        React__default["default"].createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
-                            React__default["default"].createElement("div", { slot: 'content' },
-                                React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: (arcData === null || arcData === void 0 ? void 0 : arcData.fill) || arcData.color, className: "bi bi-chat-fill", viewBox: "0 0 16 16" },
-                                    React__default["default"].createElement("path", { d: "M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15" }))))))));
-        })));
+                        React__default["default"].createElement(VeltChartComment, { commentMetadata: commentMetadata, dialogMetadataTemplate: dialogMetadataTemplate || ['label', 'value'] })))));
+        }),
+        ((_e = ghostCommentsData === null || ghostCommentsData === void 0 ? void 0 : ghostCommentsData.comments) === null || _e === void 0 ? void 0 : _e.length) && ((_f = ghostCommentsData === null || ghostCommentsData === void 0 ? void 0 : ghostCommentsData.comments) === null || _f === void 0 ? void 0 : _f.map(function (annotation) {
+            var metadata = annotation.metadata;
+            var groupId = metadata === null || metadata === void 0 ? void 0 : metadata.groupId;
+            var value = metadata === null || metadata === void 0 ? void 0 : metadata.value;
+            var label = metadata === null || metadata === void 0 ? void 0 : metadata.label;
+            var x = (chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.xScale) ? chartComputedData.xScale(label) : 0;
+            var y = (chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.yScale) ? chartComputedData.yScale(value) : 0;
+            var point = { x: x, y: y, width: (ghostCommentsData === null || ghostCommentsData === void 0 ? void 0 : ghostCommentsData.width) || 0, key: annotation.annotationId };
+            var commentMetadata = {
+                id: id,
+                label: label,
+                groupId: groupId,
+                value: value,
+            };
+            switch (ghostCommentsData === null || ghostCommentsData === void 0 ? void 0 : ghostCommentsData.type) {
+                case 'bar':
+                    return (React__default["default"].createElement("g", { transform: "translate(".concat(point.x + point.width, ", ").concat(point.y, ")"), key: point.key },
+                        React__default["default"].createElement("foreignObject", { x: 0, y: -8, width: "24", height: "24" },
+                            React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
+                                React__default["default"].createElement(VeltChartComment, { ghostComment: true, commentMetadata: commentMetadata, dialogMetadataTemplate: dialogMetadataTemplate || ['groupId', 'label', 'value'] })))));
+                case 'line':
+                    return (React__default["default"].createElement("g", { transform: "translate(".concat(point.x + point.width, ", ").concat(point.y, ")"), key: point.key },
+                        React__default["default"].createElement("foreignObject", { x: -12, y: -48, width: "24", height: "24" },
+                            React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
+                                React__default["default"].createElement(VeltChartComment, { ghostComment: true, commentMetadata: commentMetadata, dialogMetadataTemplate: dialogMetadataTemplate || ['groupId', 'label', 'value'] })))));
+                default:
+                    return null;
+            }
+        }))));
+};
+
+var HighchartsReact;
+var Highcharts;
+// optionally import highcharts modules using try catch
+try {
+    HighchartsReact = require('highcharts-react-official');
+    Highcharts = require('highcharts');
+}
+catch (err) {
+    HighchartsReact = null;
+    Highcharts = null;
+}
+var VeltHighChartComments = function (_a) {
+    var chartComputedData = _a.chartComputedData, id = _a.id, dialogMetadataTemplate = _a.dialogMetadataTemplate;
+    var _b = React.useState([]), points = _b[0], setPoints = _b[1];
+    var _c = React.useState([]), ghostPoints = _c[0], setGhostPoints = _c[1];
+    var chartRef = React.useRef(chartComputedData);
+    var commentsRef = React.useRef([]);
+    var client = useVeltClient().client;
+    var _d = React__default["default"].useState(null), documentPathsSubscription = _d[0], setDocumentPathsSubscription = _d[1];
+    var _e = React.useState(null), commentSubscription = _e[0], setCommentSubscription = _e[1];
+    // Unsubscribe from the subscriptions when the component is unmounted
+    React.useEffect(function () {
+        return function () {
+            unsubscribeDocumentPathsSubscription();
+            unsubscribeCommentSubscription();
+        };
+    }, []);
+    React.useEffect(function () {
+        if (client) {
+            getCommentAnnotations();
+        }
+    }, [client]);
+    var getCommentAnnotations = function () {
+        var _a;
+        try {
+            unsubscribeDocumentPathsSubscription();
+            unsubscribeCommentSubscription();
+            if (client) {
+                var subscription = (_a = client === null || client === void 0 ? void 0 : client.docService) === null || _a === void 0 ? void 0 : _a.getDocumentPaths$().subscribe(function (paths) {
+                    var _a;
+                    if (paths === null || paths === void 0 ? void 0 : paths.clientDocumentId) {
+                        unsubscribeCommentSubscription();
+                        var commentElement = client.getCommentElement();
+                        var subscription_1 = (_a = commentElement === null || commentElement === void 0 ? void 0 : commentElement.getAllCommentAnnotations(paths === null || paths === void 0 ? void 0 : paths.clientDocumentId)) === null || _a === void 0 ? void 0 : _a.subscribe(function (comments) {
+                            commentsRef.current = comments;
+                            filterGhostComments(comments);
+                        });
+                        setCommentSubscription(subscription_1);
+                    }
+                });
+                setDocumentPathsSubscription(subscription);
+            }
+        }
+        catch (err) {
+        }
+    };
+    var filterGhostComments = function (comments) {
+        var _a;
+        try {
+            var chartComments = (_a = comments === null || comments === void 0 ? void 0 : comments.filter(function (annotation) { return annotation.commentType === 'chart'; })) === null || _a === void 0 ? void 0 : _a.filter(function (annotation) { var _a; return ((_a = annotation === null || annotation === void 0 ? void 0 : annotation.metadata) === null || _a === void 0 ? void 0 : _a.id) === id; });
+            var ghostPoints_1 = [];
+            chartComments.forEach(function (annotation) {
+                var metadata = annotation.metadata;
+                var groupId = metadata === null || metadata === void 0 ? void 0 : metadata.groupId;
+                var value = metadata === null || metadata === void 0 ? void 0 : metadata.value;
+                var label = metadata === null || metadata === void 0 ? void 0 : metadata.label;
+                if (groupId && value && label) {
+                    var series = chartRef.current.chart.series.find(function (series) { return series.name === groupId; });
+                    if (series === null || series === void 0 ? void 0 : series.visible) {
+                        switch (series.type) {
+                            case 'line':
+                                var linePoint = series.points.find(function (point) { return point.y === value && point.x === label; });
+                                if (!linePoint) {
+                                    var x = series.xAxis.toPixels(label, true);
+                                    var y = series.yAxis.toPixels(value, true);
+                                    ghostPoints_1.push({
+                                        x: x,
+                                        y: y,
+                                        seriesName: groupId,
+                                        yValue: value,
+                                        transform: 'translate(-50%, -150%)',
+                                        id: "".concat(groupId, "-").concat(label, "-").concat(value),
+                                        metadata: {
+                                            id: id,
+                                            groupId: groupId,
+                                            label: label,
+                                            value: value,
+                                        },
+                                    });
+                                }
+                                break;
+                            case 'bar':
+                            case 'column':
+                                var barPoint = series.points.find(function (point) { return point.y === value && point.category === label; });
+                                if (!barPoint) {
+                                    var categoryIndex = series.xAxis.categories.indexOf(label);
+                                    var x = series.xAxis.toPixels(categoryIndex, true);
+                                    var y = series.yAxis.toPixels(value, true);
+                                    // const width = series.xAxis.toPixels(categoryIndex + 1, true) - x;
+                                    ghostPoints_1.push({
+                                        x: x,
+                                        y: y,
+                                        seriesName: groupId,
+                                        yValue: value,
+                                        id: "".concat(groupId, "-").concat(label, "-").concat(value),
+                                        // width: width,
+                                        transform: 'translate(-50%, -100%)',
+                                        metadata: {
+                                            id: id,
+                                            groupId: groupId,
+                                            label: label,
+                                            value: value,
+                                        },
+                                    });
+                                }
+                        }
+                    }
+                }
+            });
+            setGhostPoints(ghostPoints_1);
+        }
+        catch (err) {
+        }
+    };
+    React.useEffect(function () {
+        // Attach the redraw event listener when the chart updates
+        if (chartRef.current && chartRef.current.chart) {
+            var currentChart_1 = chartRef.current.chart;
+            window.chart = currentChart_1;
+            // Define the callback to execute on chart redraw
+            var onRedraw_1 = function () {
+                calculatePoints();
+                filterGhostComments(commentsRef.current);
+            };
+            if (Highcharts) {
+                // Attach the event listener
+                Highcharts.addEvent(currentChart_1, 'redraw', onRedraw_1);
+            }
+            // Perform the initial calculation
+            calculatePoints();
+            // Clean up the event listener when the component unmounts or chart changes
+            return function () {
+                if (Highcharts) {
+                    Highcharts.removeEvent(currentChart_1, 'redraw', onRedraw_1);
+                }
+            };
+        }
+    }, [chartComputedData]);
+    var calculatePoints = function (from) {
+        var _a, _b;
+        if (!((_b = (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.chart) === null || _b === void 0 ? void 0 : _b.series)) {
+            return;
+        }
+        // Create an array of points from all series
+        var newPoints = chartRef.current.chart.series.filter(function (series) { return series.visible; }).reduce(function (acc, series) {
+            var seriesPoints = [];
+            switch (series.type) {
+                case 'line':
+                    seriesPoints = series.points.map(function (point) { return ({
+                        x: point.plotX,
+                        y: point.plotY,
+                        seriesName: series.name,
+                        yValue: point.y,
+                        transform: 'translate(-50%, -150%)',
+                        id: "".concat(series.name, "-").concat(point.x, "-").concat(point.y),
+                        metadata: {
+                            id: id,
+                            groupId: series.name,
+                            label: point.x,
+                            value: point.y,
+                        },
+                    }); });
+                    break;
+                case 'bar':
+                case 'column':
+                    seriesPoints = series.points.map(function (point) {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        var x = (_a = point.shapeArgs) === null || _a === void 0 ? void 0 : _a.x;
+                        var y = (_b = point.shapeArgs) === null || _b === void 0 ? void 0 : _b.y;
+                        var transform = 'translate(-50%, -100%)';
+                        var width = (_c = point.shapeArgs) === null || _c === void 0 ? void 0 : _c.width;
+                        (_d = point.shapeArgs) === null || _d === void 0 ? void 0 : _d.height;
+                        if (series.type === 'column') {
+                            // Center horizontally for columns
+                            x += point.shapeArgs.width / 2;
+                        }
+                        else if (series.type === 'bar') {
+                            // Center vertically for bars
+                            // y += point.shapeArgs!.height / 2;
+                            x = (_e = point.shapeArgs) === null || _e === void 0 ? void 0 : _e.brBoxHeight;
+                            transform = null;
+                            (_f = point.shapeArgs) === null || _f === void 0 ? void 0 : _f.width;
+                            width = null;
+                            // y = (point.shapeArgs?.x! / 2) + (point.shapeArgs?.width! / 2);
+                            // x = point.plotX! - (point?.shapeArgs?.width! / 2);
+                            y = (_g = point.shapeArgs) === null || _g === void 0 ? void 0 : _g.x;
+                        }
+                        return {
+                            x: x,
+                            y: y,
+                            seriesName: series.name,
+                            yValue: point.y,
+                            id: "".concat(series.name, "-").concat(point.x, "-").concat(point.y),
+                            width: width,
+                            // height: height,
+                            transform: transform,
+                            metadata: {
+                                id: id,
+                                groupId: series.name,
+                                label: point.category,
+                                value: point.y,
+                            },
+                        };
+                    });
+                    break;
+            }
+            return __spreadArray(__spreadArray([], acc, true), seriesPoints, true);
+        }, []);
+        setPoints(newPoints);
+    };
+    var unsubscribeDocumentPathsSubscription = function () {
+        try {
+            if (documentPathsSubscription) {
+                documentPathsSubscription === null || documentPathsSubscription === void 0 ? void 0 : documentPathsSubscription.unsubscribe();
+            }
+        }
+        catch (err) {
+        }
+    };
+    var unsubscribeCommentSubscription = function () {
+        try {
+            if (commentSubscription) {
+                commentSubscription === null || commentSubscription === void 0 ? void 0 : commentSubscription.unsubscribe();
+            }
+        }
+        catch (err) {
+        }
+    };
+    return (React__default["default"].createElement("div", { className: 'velt-chart-comments-container', style: {
+            zIndex: 100000,
+            position: 'absolute',
+            top: 0,
+            left: 0,
+        } },
+        React__default["default"].createElement("style", null, "\n                        .velt-chart-comments-container .point-container {\n                            opacity: 0 !important;\n                            visibility: hidden !important;\n                        }\n                    "),
+        points.map(function (point, index) { return (React__default["default"].createElement("div", { key: index, style: {
+                position: 'absolute',
+                left: "".concat(chartRef.current.chart.plotLeft + point.x, "px"),
+                top: "".concat(chartRef.current.chart.plotTop + point.y, "px"),
+                transform: point.transform,
+                padding: '2px 5px',
+                color: '#fff',
+                borderRadius: '3px',
+                fontSize: '10px',
+                width: "".concat(point.width, "px"),
+                height: "".concat(point.height, "px"),
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                userSelect: 'none',
+                boxSizing: 'border-box',
+            } },
+            React__default["default"].createElement(VeltChartComment, { commentMetadata: point.metadata, dialogMetadataTemplate: dialogMetadataTemplate || point.dialogMetadataTemplate || ['groupId', 'label', 'value'] }))); }),
+        ghostPoints.map(function (point, index) { return (React__default["default"].createElement("div", { id: point.id, key: index, style: {
+                position: 'absolute',
+                left: "".concat(chartRef.current.chart.plotLeft + point.x, "px"),
+                top: "".concat(chartRef.current.chart.plotTop + point.y, "px"),
+                transform: point.transform,
+                padding: '2px 5px',
+                color: '#fff',
+                borderRadius: '3px',
+                fontSize: '10px',
+                width: "".concat(point.width, "px"),
+                height: "".concat(point.height, "px"),
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                userSelect: 'none',
+                boxSizing: 'border-box',
+            } },
+            React__default["default"].createElement(VeltChartComment, { ghostComment: true, commentMetadata: point.metadata, dialogMetadataTemplate: dialogMetadataTemplate || point.dialogMetadataTemplate || ['groupId', 'label', 'value'] }))); })));
 };
 
 var VeltWireframe = function (props) {
@@ -665,7 +1083,7 @@ var VeltCommentDialogComposerActionButton = function (props) {
 
 var VeltCommentDialogComposerAssignUser = function (props) {
     var children = props.children;
-    return (React__default["default"].createElement("velt-comment-dialog-composer-wireframe", null, children));
+    return (React__default["default"].createElement("velt-comment-dialog-composer-assign-user-wireframe", null, children));
 };
 
 var VeltCommentDialogComposerFiles = function (props) {
@@ -1816,6 +2234,7 @@ var logLiveState = function (action, liveStateDataId) {
 
 exports.VeltArrowTool = SnippylyArrowTool;
 exports.VeltArrows = SnippylyArrows;
+exports.VeltChartComment = VeltChartComment;
 exports.VeltCommentBubble = SnippylyCommentBubble;
 exports.VeltCommentBubbleAvatar = VeltCommentBubbleAvatar;
 exports.VeltCommentBubbleCommentsCount = VeltCommentBubbleCommentsCount;
@@ -1829,6 +2248,7 @@ exports.VeltComments = SnippylyComments;
 exports.VeltCommentsSidebar = SnippylyCommentsSidebar;
 exports.VeltCommentsSidebarWireframe = VeltCommentsSidebarWireframe;
 exports.VeltCursor = SnippylyCursor;
+exports.VeltHighChartComments = VeltHighChartComments;
 exports.VeltHuddle = SnippylyHuddle;
 exports.VeltHuddleTool = SnippylyHuddleTool;
 exports.VeltNivoChartComments = VeltNivoChartComments;