Implementation:Apache Druid DiffDialog

Knowledge Sources	Apache_Druid
Domains	Web_Console, Dialogs
Last Updated	2026-02-10 10:00 GMT

Overview

DiffDialog is a React dialog component that displays a side-by-side diff comparison of JSON or text values using the react-diff-viewer library.

Description

The DiffDialog component renders a BlueprintJS Dialog containing a split-view diff visualization. It supports two modes of operation: comparing a single pair of old/new values, or selecting from a list of versioned values via dropdown selectors. When values are not strings, they are serialized to pretty-printed JSON using json-bigint-native before diffing.

Usage

Used when the user needs to compare two versions of a configuration, spec, or any JSON/text payload, such as in the audit history views of the web console.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/dialogs/diff-dialog/diff-dialog.tsx
• Lines: 1-143

Signature

export interface DiffVersion {
  label: string;
  value: unknown;
}

export interface DiffDialogProps {
  title?: string;
  onClose(): void;
  oldValue?: unknown;
  newValue?: unknown;
  versions?: DiffVersion[];
  initOldIndex?: number;
  initNewIndex?: number;
}

export const DiffDialog = React.memo(function DiffDialog(props: DiffDialogProps): JSX.Element;

Import

import { DiffDialog } from 'web-console/src/dialogs/diff-dialog/diff-dialog';

I/O Contract

Inputs

Name	Type	Required	Description
title	string	No	Dialog title; defaults to "Diff"
onClose	() => void	Yes	Callback invoked when the dialog is closed
oldValue	unknown	No	The old value for single-pair comparison mode
newValue	unknown	No	The new value for single-pair comparison mode
versions	DiffVersion[]	No	Array of labeled versions for multi-version comparison mode
initOldIndex	number	No	Initial left-side version index; defaults to 0
initNewIndex	number	No	Initial right-side version index; defaults to 0

Outputs

Name	Type	Description
rendered dialog	JSX.Element	A BlueprintJS Dialog containing a ReactDiffViewer split view with optional version selectors

Usage Examples

Single Value Comparison

<DiffDialog
  title="Config Diff"
  oldValue={{ key: "old" }}
  newValue={{ key: "new" }}
  onClose={() => setShowDiff(false)}
/>

Multi-Version Comparison

<DiffDialog
  title="History Diff"
  versions={[
    { label: "v3 @ 2024-01-03", value: configV3 },
    { label: "v2 @ 2024-01-02", value: configV2 },
    { label: "v1 @ 2024-01-01", value: configV1 },
  ]}
  initOldIndex={1}
  initNewIndex={0}
  onClose={() => setShowDiff(false)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development