Working with Comments

The PacketViewer component provides a flexible system for managing packet-level comments. This feature allows users to add, edit, and view comments associated with specific packets in the capture.

CommentManager Configuration

The comment system is controlled through the commentManager prop, which accepts a CommentManagerOption. This can be set to one of three values:

• 'none': Disables the comment feature.
• 'session': Enables session-based comments that persist only for the current browser session.
• 'file': Loads read-only packet comments out of the PCAPng file on disk and displays them to the user
• CommentManager: A custom implementation for full control over comment behavior.

Custom CommentManager Interface

For advanced use cases, you can provide a custom CommentManager object with the following interface:

interface CommentManager {
  data?: (() => Promise<IPacketComments>) | IPacketComments;
  setComment?: (frameNumber: number, text: string | undefined) => void;
  colDef?: () => ICommentColDef;
}

• data: Provides the comment data, either synchronously or as a Promise.
• setComment: A function to update or remove a comment for a specific packet.
• colDef: A function returning custom column definition for the comment column.

IPacketComments Type

Comments are stored in an object where keys are packet numbers and values are the comment strings:

interface IPacketComments {
  [key: number]: string;
}

Customizing the Comment Column

The comment column can be customized using the ICommentColDef interface, which extends AG Grid’s ColDef:

interface ICommentColDef extends ColDef {}

A default configuration is provided:

export const DefaultCommentColumn: ICommentColDef = {
  headerName: "💬",
  cellRenderer: DefaultCommentCellRenderer,
  initialWidth: 40,
  resizable: true,
  editable: true,
  cellEditor: "agLargeTextCellEditor",
  cellEditorParams: {
    rows: 4,
    cols: 40,
    maxLength: 4096,
  } as ILargeTextEditorParams,
  cellEditorPopup: true,
  cellEditorPopupPosition: "under",
  singleClickEdit: true,
};

You can override these settings in your custom CommentManager implementation.

Usage Example

Here’s an example of using a custom CommentManager:

import React, { useState } from "react";
import { PacketViewer, DefaultCommentColumn } from "@qacafe/pv-react";

function MyPacketViewer() {
  const [comments, setComments] = useState({});

  const customCommentManager = {
    data: comments,
    setComment: (frameNumber, text) => {
      setComments((prev) => ({
        ...prev,
        [frameNumber]: text,
      }));
    },
    colDef: () => ({
      ...DefaultCommentColumn,
      headerName: "Notes",
      initialWidth: 100,
    }),
  };

  return (
    <PacketViewer file="example.pcap" commentManager={customCommentManager} />
  );
}

This example demonstrates a custom comment manager that uses React state to store comments and customizes the comment column header and width.

By leveraging the CommentManager interface, you can integrate the comment system with your application’s state management, persistence layer, or any other custom behavior you need.