modify comments and add test

client-report/src/components/commentsGraph/comments.jsx

@@ -0,0 +1,52 @@
+// Copyright (C) 2012-present, The Authors. This program is free software: you can redistribute it and/or  modify it under the terms of the GNU Affero General Public License, version 3, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+
+const Comments = ({
+  points,
+  formatTid,
+  handleClick,
+  comments,
+  xCenter,
+  xScaleup,
+  yCenter,
+  yScaleup,
+}) => {
+  const createComments = () => {
+    return points.map((comment, i) => {
+      const _comment = comments.find(c => c.tid === comment.tid);
+
+      /* see if it's meta or consensus */
+      if (
+        _comment.is_meta
+      ) {
+        return;
+      }
+
+      return (
+        <text
+          key={i}
+          transform={`translate(
+              ${xCenter + comment.x * xScaleup},
+              ${yCenter + comment.y * yScaleup}
+            )`}
+          onClick={handleClick(comment)}
+          style={{
+            fill: "rgba(0,0,0,.5)",
+            fontFamily: "Helvetica",
+            cursor: "pointer",
+            fontSize: 10,
+          }}
+        >
+          <title>Tooltip 2</title>
+          {formatTid(comment.tid)}
+        </text>
+      );
+    });
+  }
+
+
+  return <g>{createComments()}</g>;
+}
+
+export default Comments;

client-report/src/components/commentsGraph/comments.test.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Comments from './comments'; // Update with the correct path to your component
+import '@testing-library/jest-dom';
+
+describe('Comments Component', () => {
+  const mockPoints = [
+    { tid: 1, x: 10, y: 20 },
+    { tid: 2, x: 30, y: 40 },
+    { tid: 3, x: 50, y: 60 },
+  ];
+  const mockFormatTid = (tid) => `TID-${tid}`;
+  const mockHandleClick = jest.fn();
+  const mockComments = [
+    { tid: 1, text: 'Comment 1', is_meta: false },
+    { tid: 2, text: 'Comment 2', is_meta: true }, // This comment should be skipped
+    { tid: 3, text: 'Comment 3', is_meta: false },
+  ];
+  const mockXCenter = 100;
+  const mockXScaleup = 2;
+  const mockYCenter = 200;
+  const mockYScaleup = 3;
+
+  it('renders comments correctly', () => {
+    render(
+      <Comments
+        points={mockPoints}
+        formatTid={mockFormatTid}
+        handleClick={mockHandleClick}
+        comments={mockComments}
+        xCenter={mockXCenter}
+        xScaleup={mockXScaleup}
+        yCenter={mockYCenter}
+        yScaleup={mockYScaleup}
+      />
+    );
+
+    // Check if the correct number of comments are rendered (excluding the meta comment)
+    expect(screen.getAllByText(/TID-/i)).toHaveLength(2); 
+  });
+
+  it('calls handleClick when a comment is clicked', () => {
+    render(
+      <Comments
+        points={mockPoints}
+        formatTid={mockFormatTid}
+        handleClick={mockHandleClick}
+        comments={mockComments}
+        xCenter={mockXCenter}
+        xScaleup={mockXScaleup}
+        yCenter={mockYCenter}
+        yScaleup={mockYScaleup}
+      />
+    );
+
+    // Simulate click on the first comment
+    fireEvent.click(screen.getByText('TID-1')); 
+
+    // Check if handleClick was called with the correct comment object
+    expect(mockHandleClick).toHaveBeenCalledWith(mockPoints[0]); 
+  });
+});

client-report/src/components/participantsGraph/participantsGraph.js

@@ -8,7 +8,7 @@ import Axes from "../graphAxes";
 import * as d3contour from "d3-contour";
 import * as d3chromatic from "d3-scale-chromatic";
 // import GroupLabels from "./groupLabels";
-import Comments from "../commentsGraph/comments";
+import Comments from "../commentsGraph/comments.jsx";
 import Hull from "./hull";
 import CommentList from "../lists/commentList";