@eventcatalog/core 4.10.13 → 4.10.15

package/eventcatalog/src/components/SchemaExplorer/JSONSchemaViewer.test.tsx

@@ -0,0 +1,114 @@
+// @vitest-environment jsdom
+import { act, createElement } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import JSONSchemaViewer from './JSONSchemaViewer';
+
+const constraintOnlyVariantSchema = {
+  type: 'object',
+  properties: {
+    detail: { $ref: '#/$defs/detail' },
+  },
+  $defs: {
+    detail: {
+      type: 'object',
+      properties: {
+        data: { $ref: '#/$defs/data' },
+      },
+    },
+    data: {
+      type: 'object',
+      properties: {
+        userId: { type: 'string' },
+        customerId: { type: 'string' },
+        correlationId: { type: 'string' },
+      },
+      required: ['correlationId'],
+      oneOf: [
+        {
+          title: 'Authenticated user',
+          required: ['userId'],
+          not: { required: ['customerId'] },
+        },
+        {
+          title: 'Customer account',
+          required: ['customerId'],
+          not: { required: ['userId'] },
+        },
+      ],
+    },
+  },
+};
+
+describe('JSONSchemaViewer variants', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it('renders parent properties selected by constraint-only oneOf branches', () => {
+    act(() => {
+      root.render(createElement(JSONSchemaViewer, { schema: constraintOnlyVariantSchema, expand: true, search: false }));
+    });
+
+    expect(container.textContent).toContain('Authenticated user');
+    expect(container.textContent).toContain('userId');
+    expect(container.textContent).not.toContain('customerId');
+    expect(container.textContent).toContain('correlationId');
+
+    const selector = container.querySelector<HTMLSelectElement>('select');
+    expect(selector).not.toBeNull();
+
+    act(() => {
+      selector!.value = '1';
+      selector!.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+
+    expect(container.textContent).toContain('customerId');
+    expect(container.textContent).not.toContain('userId');
+    expect(container.textContent).toContain('correlationId');
+  });
+
+  it('applies constraint-only oneOf branches at the schema root', () => {
+    const rootSchema = constraintOnlyVariantSchema.$defs.data;
+
+    act(() => {
+      root.render(createElement(JSONSchemaViewer, { schema: rootSchema, expand: true, search: false }));
+    });
+
+    expect(container.textContent).toContain('userId');
+    expect(container.textContent).not.toContain('customerId');
+    expect(container.textContent).toContain('correlationId');
+  });
+
+  it('does not render array item parent properties twice when variants are present', () => {
+    const arraySchema = {
+      type: 'object',
+      properties: {
+        identities: {
+          type: 'array',
+          items: constraintOnlyVariantSchema.$defs.data,
+        },
+      },
+    };
+
+    act(() => {
+      root.render(createElement(JSONSchemaViewer, { schema: arraySchema, expand: true, search: false }));
+    });
+
+    expect(container.textContent?.match(/userId/g)).toHaveLength(1);
+    expect(container.textContent).not.toContain('customerId');
+    expect(container.textContent?.match(/correlationId/g)).toHaveLength(1);
+  });
+});

package/eventcatalog/src/components/SchemaExplorer/JSONSchemaViewer.tsx

@@ -31,6 +31,15 @@ function formatType(type: any): string {
   return type ?? '';
 }
 
+function getForbiddenVariantProperties(variant: any): string[] {
+  const forbiddenRequired = variant?.not?.required;
+
+  // `not: { required: ['field'] }` forbids that field from being present. When
+  // multiple fields are listed, JSON Schema only forbids them being present
+  // together, so none of them can safely be hidden individually.
+  return Array.isArray(forbiddenRequired) && forbiddenRequired.length === 1 ? forbiddenRequired : [];
+}
+
 // Helper function to count properties recursively
 function countProperties(obj: any): number {
   if (!obj || typeof obj !== 'object') return 0;
@@ -173,26 +182,35 @@ function processSchema(schema: any, rootSchema?: any): any {
     const variantsArray = schema.oneOf || schema.anyOf;
     const variantType = schema.oneOf ? 'oneOf' : 'anyOf';
 
+    const processedProperties = schema.properties
+      ? Object.fromEntries(
+          Object.entries(schema.properties).map(([key, prop]: [string, any]) => [key, processSchema(prop, root)])
+        )
+      : {};
+
     const processedVariants = variantsArray.map((variant: any, index: number) => {
       const processedVariant = processSchema(variant, root);
+      const forbiddenProperties = new Set(getForbiddenVariantProperties(processedVariant));
+      const properties = Object.fromEntries(
+        Object.entries({ ...processedProperties, ...(processedVariant.properties || {}) }).filter(
+          ([propertyName]) => !forbiddenProperties.has(propertyName)
+        )
+      );
+
       return {
+        ...processedVariant,
         title: processedVariant.title || variant.title || processedVariant.$id || `Option ${index + 1}`,
         description: processedVariant.description || variant.description,
-        required: processedVariant.required || variant.required || [],
-        properties: processedVariant.properties || {},
+        required: [...new Set([...(schema.required || []), ...(processedVariant.required || variant.required || [])])],
+        properties,
         type: processedVariant.type || variant.type || 'object',
-        ...processedVariant,
       };
     });
 
     return {
       ...schema,
       type: schema.type || 'object',
-      properties: schema.properties
-        ? Object.fromEntries(
-            Object.entries(schema.properties).map(([key, prop]: [string, any]) => [key, processSchema(prop, root)])
-          )
-        : {},
+      properties: processedProperties,
       variants: processedVariants,
       variantType,
     };
@@ -315,86 +333,88 @@ const SchemaProperty = ({ name, details, isRequired, level, isListItem = false,
         )}
 
         <div className="flex-grow">
-          <div className="flex justify-between items-baseline">
-            <div>
-              <span className="font-semibold text-[rgb(var(--ec-page-text))] text-sm">{name}</span>
-              <span className="ml-1.5 text-[rgb(var(--ec-accent))] font-mono text-xs">
-                {hasVariants ? (details.variantType === 'anyOf' ? 'anyOf' : 'oneOf') : formatType(details.type)}
-                {hasType(details.type, 'array') && details.items?.type ? `[${formatType(details.items.type)}]` : ''}
-                {details.format ? `<${details.format}>` : ''}
-                {details._refPath && (
-                  <span className="text-blue-600 dark:text-blue-400 ml-1">→ {details._refName || details._refPath}</span>
-                )}
-                {details._refNotFound && <span className="text-red-600 dark:text-red-400 ml-1">❌ ref not found</span>}
-                {details.const !== undefined && (
-                  <span>
-                    constant: <code>{details.const}</code>
-                  </span>
-                )}
-              </span>
-            </div>
-            {isRequired && <span className="text-red-600 dark:text-red-400 text-xs ml-3 flex-shrink-0">required</span>}
-          </div>
-
-          {details.description && <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-0.5">{details.description}</p>}
-          {details.title && details.title !== details.description && (
-            <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-0.5 italic">Title: {details.title}</p>
-          )}
-
-          <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-0.5 space-y-0">
-            {details.pattern && (
-              <div>
-                Match pattern:{' '}
-                <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
-                  {details.pattern}
-                </code>
-              </div>
-            )}
-            {details.minimum !== undefined && (
-              <div>
-                Minimum:{' '}
-                <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
-                  {details.minimum}
-                </code>
-              </div>
-            )}
-            {details.maximum !== undefined && (
-              <div>
-                Maximum:{' '}
-                <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
-                  {details.maximum}
-                </code>
-              </div>
-            )}
-            {details.minLength !== undefined && (
-              <div>
-                Min length:{' '}
-                <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
-                  {details.minLength}
-                </code>
-              </div>
-            )}
-            {details.maxLength !== undefined && (
+          <div className="-mx-1 rounded px-1 transition-colors hover:bg-[rgb(var(--ec-content-hover))]">
+            <div className="flex justify-between items-baseline">
               <div>
-                Max length:{' '}
-                <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
-                  {details.maxLength}
-                </code>
-              </div>
-            )}
-            {details.enum && (
-              <div>
-                <span className="text-xs inline-block">Allowed values:</span>
-                {details.enum.map((val: any, idx: number) => (
-                  <span key={idx} className="text-xs">
-                    {' '}
-                    <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
-                      {val}
-                    </code>
-                  </span>
-                ))}
+                <span className="font-semibold text-[rgb(var(--ec-page-text))] text-sm">{name}</span>
+                <span className="ml-1.5 text-[rgb(var(--ec-accent))] font-mono text-xs">
+                  {hasVariants ? (details.variantType === 'anyOf' ? 'anyOf' : 'oneOf') : formatType(details.type)}
+                  {hasType(details.type, 'array') && details.items?.type ? `[${formatType(details.items.type)}]` : ''}
+                  {details.format ? `<${details.format}>` : ''}
+                  {details._refPath && (
+                    <span className="text-blue-600 dark:text-blue-400 ml-1">→ {details._refName || details._refPath}</span>
+                  )}
+                  {details._refNotFound && <span className="text-red-600 dark:text-red-400 ml-1">❌ ref not found</span>}
+                  {details.const !== undefined && (
+                    <span>
+                      constant: <code>{details.const}</code>
+                    </span>
+                  )}
+                </span>
               </div>
+              {isRequired && <span className="text-red-600 dark:text-red-400 text-xs ml-3 flex-shrink-0">required</span>}
+            </div>
+
+            {details.description && <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-0.5">{details.description}</p>}
+            {details.title && details.title !== details.description && (
+              <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-0.5 italic">Title: {details.title}</p>
             )}
+
+            <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-0.5 space-y-0">
+              {details.pattern && (
+                <div>
+                  Match pattern:{' '}
+                  <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                    {details.pattern}
+                  </code>
+                </div>
+              )}
+              {details.minimum !== undefined && (
+                <div>
+                  Minimum:{' '}
+                  <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                    {details.minimum}
+                  </code>
+                </div>
+              )}
+              {details.maximum !== undefined && (
+                <div>
+                  Maximum:{' '}
+                  <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                    {details.maximum}
+                  </code>
+                </div>
+              )}
+              {details.minLength !== undefined && (
+                <div>
+                  Min length:{' '}
+                  <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                    {details.minLength}
+                  </code>
+                </div>
+              )}
+              {details.maxLength !== undefined && (
+                <div>
+                  Max length:{' '}
+                  <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                    {details.maxLength}
+                  </code>
+                </div>
+              )}
+              {details.enum && (
+                <div>
+                  <span className="text-xs inline-block">Allowed values:</span>
+                  {details.enum.map((val: any, idx: number) => (
+                    <span key={idx} className="text-xs">
+                      {' '}
+                      <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                        {val}
+                      </code>
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
           </div>
 
           {(hasNestedProperties || hasArrayItems || hasVariants) && (
@@ -460,6 +480,7 @@ const SchemaProperty = ({ name, details, isRequired, level, isListItem = false,
                 <div className="mt-1 border-l border-dashed border-[rgb(var(--ec-page-border))] pl-3 ml-1.5">
                   <span className="text-xs italic text-[rgb(var(--ec-page-text-muted))] block mb-1">Item Details:</span>
                   {details.items.properties &&
+                    !details.items.variants &&
                     Object.entries(details.items.properties).map(([itemPropName, itemPropDetails]: [string, any]) => (
                       <SchemaProperty
                         key={itemPropName}
@@ -821,7 +842,7 @@ export default function JSONSchemaViewer({
           // Determine which properties to display
           const propsToDisplay =
             variants && variants.length > 0 && variants[selectedVariantIndex]?.properties
-              ? { ...properties, ...variants[selectedVariantIndex].properties }
+              ? variants[selectedVariantIndex].properties
               : properties;
           const requiredProps = variants && variants.length > 0 ? variants[selectedVariantIndex]?.required || [] : required;
 

package/eventcatalog/src/components/SchemaExplorer/ProtobufSchemaViewer.test.tsx

@@ -0,0 +1,91 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import { parseProtobufSchema } from '@utils/protobuf-schema';
+import ProtobufSchemaViewer from './ProtobufSchemaViewer';
+
+describe('ProtobufSchemaViewer', () => {
+  it('renders Protovalidate required and constraint annotations', () => {
+    const schema = parseProtobufSchema(`
+      syntax = "proto3";
+
+      enum Status {
+        STATUS_UNSPECIFIED = 0;
+        STATUS_ACTIVE = 1;
+      }
+
+      message Journey {
+        string id = 1 [
+          (buf.validate.field).required = true,
+          (buf.validate.field).string.uuid = true
+        ];
+        uint32 passenger_count = 2 [(buf.validate.field).uint32 = { gte: 1, lte: 20 }];
+        Status status = 3 [(buf.validate.field).enum = { defined_only: true, not_in: [0] }];
+        repeated string stops = 4 [(buf.validate.field).repeated = {
+          min_items: 2
+          unique: true
+          items: { string: { min_len: 3 } }
+        }];
+        planning.model.v1.TrainServiceReference train_service = 5;
+        optional string description = 6 [(datahub.v1.gdpr_rule).string = true];
+      }
+    `);
+
+    const html = renderToStaticMarkup(<ProtobufSchemaViewer schema={schema} />);
+    const statusField = html.slice(html.indexOf('>status</span>'), html.indexOf('>stops</span>'));
+
+    expect(html).toContain('required');
+    expect(html).toContain('Format');
+    expect(html).toContain('UUID');
+    expect(html).toContain('Minimum');
+    expect(html).toContain('Maximum');
+    expect(html).toContain('Defined enum values only');
+    expect(html).toContain('Excluded values');
+    expect(html).toContain('Minimum items');
+    expect(html).toContain('Unique items');
+    expect(html).toContain('Item minimum length');
+    expect(html).toContain('title="planning.model.v1.TrainServiceReference"');
+    expect(html).toContain('>TrainServiceReference</span>');
+    expect(statusField).not.toContain('STATUS_UNSPECIFIED');
+    expect(statusField).toContain('STATUS_ACTIVE');
+    expect(html).toContain('Annotation:');
+    expect(html).toContain('(datahub.v1.gdpr_rule).string');
+    expect(html).toContain('>true</code>');
+  });
+
+  it('filters enum values using repeated-item and map-value constraints', () => {
+    const schema = parseProtobufSchema(`
+      syntax = "proto3";
+
+      enum Status {
+        STATUS_UNSPECIFIED = 0;
+        STATUS_ACTIVE = 1;
+        STATUS_ARCHIVED = 2;
+      }
+
+      message Journey {
+        repeated Status statuses = 1 [(buf.validate.field).repeated = {
+          items: { enum: { in: [1] } }
+        }];
+        map<string, Status> status_by_key = 2 [(buf.validate.field).map = {
+          values: { enum: { not_in: [0, 2] } }
+        }];
+        Status status = 3 [(buf.validate.field).enum.const = 2];
+      }
+    `);
+
+    const html = renderToStaticMarkup(<ProtobufSchemaViewer schema={schema} />);
+    const repeatedField = html.slice(html.indexOf('>statuses</span>'), html.indexOf('>status_by_key</span>'));
+    const mapField = html.slice(html.indexOf('>status_by_key</span>'), html.indexOf('>status</span>'));
+    const directField = html.slice(html.indexOf('>status</span>'), html.indexOf('>Enum:</span>'));
+
+    expect(repeatedField).toContain('STATUS_ACTIVE');
+    expect(repeatedField).not.toContain('STATUS_UNSPECIFIED');
+    expect(repeatedField).not.toContain('STATUS_ARCHIVED');
+    expect(mapField).toContain('STATUS_ACTIVE');
+    expect(mapField).not.toContain('STATUS_UNSPECIFIED');
+    expect(mapField).not.toContain('STATUS_ARCHIVED');
+    expect(directField).toContain('STATUS_ARCHIVED');
+    expect(directField).not.toContain('STATUS_UNSPECIFIED');
+    expect(directField).not.toContain('STATUS_ACTIVE');
+  });
+});

package/eventcatalog/src/components/SchemaExplorer/ProtobufSchemaViewer.tsx

@@ -1,5 +1,12 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
 import type { ProtobufSchema, ProtobufMessage, ProtobufEnum, ProtobufField } from '@utils/protobuf-schema';
+import {
+  formatProtobufOptionValue,
+  formatProtovalidateRule,
+  getCustomFieldAnnotations,
+  getProtovalidateRules,
+  isProtovalidateRequired,
+} from './protobuf-validation';
 
 interface ProtobufSchemaViewerProps {
   schema: ProtobufSchema;
@@ -63,9 +70,21 @@ function lookupType<T>(map: Map<string, T>, typeName: string, packageName?: stri
   return undefined;
 }
 
-function formatProtobufType(field: ProtobufField): string {
-  if (field.map) return field.type;
-  return field.label ? `${field.label} ${field.type}` : field.type;
+function compactTypeName(typeName: string): string {
+  const normalized = typeName.startsWith('.') ? typeName.slice(1) : typeName;
+  return normalized.split('.').pop() ?? normalized;
+}
+
+function formatProtobufType(field: ProtobufField, compact = false): string {
+  const type = field.map
+    ? compact
+      ? `map<${field.map.keyType}, ${compactTypeName(field.map.valueType)}>`
+      : field.type
+    : compact
+      ? compactTypeName(field.type)
+      : field.type;
+
+  return field.label ? `${field.label} ${type}` : type;
 }
 
 function countFields(messages: ProtobufMessage[]): number {
@@ -92,7 +111,27 @@ const ProtobufFieldRow = ({ field, level, expand, showRequired, registry, packag
   const nestedEnum = nestedMessage ? undefined : lookupType(registry.enums, targetTypeName, packageName);
   const isCyclic = nestedMessage ? ancestors.includes(nestedMessage.name) : false;
   const hasNested = !!nestedMessage && nestedMessage.fields.length > 0 && !isCyclic;
-  const isRequired = field.label === 'required';
+  const hasRequiredAnnotation = isProtovalidateRequired(field);
+  const isRequired = hasRequiredAnnotation || field.label === 'required';
+  const validationRules = getProtovalidateRules(field).filter((rule) => rule.path !== 'required');
+  const customAnnotations = getCustomFieldAnnotations(field);
+  const fullType = formatProtobufType(field);
+  const displayType = formatProtobufType(field, true);
+  const enumRuleScope = field.map ? 'map.values.enum' : field.label === 'repeated' ? 'repeated.items.enum' : 'enum';
+  const enumConstant = validationRules.find((rule) => rule.path === `${enumRuleScope}.const`);
+  const enumIncludes = validationRules.find((rule) => rule.path === `${enumRuleScope}.in`);
+  const enumExcludes = validationRules.find((rule) => rule.path === `${enumRuleScope}.not_in`);
+  const normalizeRuleValues = (value: unknown) => (Array.isArray(value) ? value : value === undefined ? [] : [value]);
+  const includedEnumValues = normalizeRuleValues(enumIncludes?.value);
+  const excludedEnumValues = normalizeRuleValues(enumExcludes?.value);
+  const displayedEnumValues = nestedEnum?.values.filter((value) => {
+    const matches = (candidate: unknown) => String(candidate) === String(value.value) || candidate === value.name;
+    return (
+      (!enumConstant || matches(enumConstant.value)) &&
+      (includedEnumValues.length === 0 || includedEnumValues.some(matches)) &&
+      !excludedEnumValues.some(matches)
+    );
+  });
 
   useEffect(() => {
     setIsExpanded(expand);
@@ -116,40 +155,83 @@ const ProtobufFieldRow = ({ field, level, expand, showRequired, registry, packag
         )}
 
         <div className="flex-grow">
-          <div className="flex justify-between items-baseline">
-            <div>
-              <span className="proto-field-name font-semibold text-[rgb(var(--ec-page-text))] text-sm">{field.name}</span>
-              <span className="ml-1.5 text-[rgb(var(--ec-accent))] font-mono text-xs">{formatProtobufType(field)}</span>
-              {field.number !== undefined && (
-                <span className="ml-1.5 text-[rgb(var(--ec-page-text-muted))] font-mono text-xs">= {field.number}</span>
-              )}
-              {field.oneof && (
-                <span className="ml-1.5 text-[rgb(var(--ec-page-text-muted))] text-xs bg-[rgb(var(--ec-content-hover))] px-1 rounded">
-                  oneof {field.oneof}
+          <div className="-mx-1 rounded px-1 transition-colors hover:bg-[rgb(var(--ec-content-hover))]">
+            <div className="flex justify-between items-baseline">
+              <div>
+                <span className="proto-field-name font-semibold text-[rgb(var(--ec-page-text))] text-sm">{field.name}</span>
+                <span
+                  className="ml-1.5 text-[rgb(var(--ec-accent))] font-mono text-xs"
+                  title={displayType === fullType ? undefined : fullType}
+                >
+                  {displayType}
                 </span>
+                {field.number !== undefined && (
+                  <span className="ml-1.5 text-[rgb(var(--ec-page-text-muted))] font-mono text-xs">= {field.number}</span>
+                )}
+                {field.oneof && (
+                  <span className="ml-1.5 text-[rgb(var(--ec-page-text-muted))] text-xs bg-[rgb(var(--ec-content-hover))] px-1 rounded">
+                    oneof {field.oneof}
+                  </span>
+                )}
+              </div>
+              {(hasRequiredAnnotation || (showRequired && isRequired)) && (
+                <span className="text-red-600 dark:text-red-400 text-xs ml-3 flex-shrink-0">required</span>
               )}
             </div>
-            {showRequired && isRequired && (
-              <span className="text-red-600 dark:text-red-400 text-xs ml-3 flex-shrink-0">required</span>
+
+            {field.doc && <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-0.5">{field.doc}</p>}
+
+            {validationRules.length > 0 && (
+              <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-0.5 space-y-0">
+                {validationRules.map((rule, index) => {
+                  const display = formatProtovalidateRule(rule);
+                  return (
+                    <div key={`${rule.path}-${index}`}>
+                      {display.label}
+                      {display.value !== undefined && (
+                        <>
+                          :{' '}
+                          <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                            {display.value}
+                          </code>
+                        </>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
             )}
-          </div>
 
-          {field.doc && <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-0.5">{field.doc}</p>}
-
-          {/* Show enum values if the field type resolves to an enum */}
-          {nestedEnum && nestedEnum.values.length > 0 && (
-            <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-0.5">
-              <span className="text-xs inline-block">Allowed values:</span>
-              {nestedEnum.values.map((value) => (
-                <span key={value.name} className="text-xs">
-                  {' '}
-                  <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
-                    {value.name}
-                  </code>
-                </span>
-              ))}
-            </div>
-          )}
+            {customAnnotations.length > 0 && (
+              <div className="mt-0.5 space-y-0 text-xs text-gray-400 dark:text-gray-500">
+                {customAnnotations.map((annotation, index) => (
+                  <div key={`${annotation.name}-${index}`} className="flex max-w-full flex-wrap items-baseline gap-x-1">
+                    <span>Annotation:</span>
+                    <code className="break-all font-mono text-gray-500 dark:text-gray-400">{annotation.name}</code>
+                    <span>=</span>
+                    <code className="font-medium text-gray-500 dark:text-gray-400">
+                      {formatProtobufOptionValue(annotation.value)}
+                    </code>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Show enum values if the field type resolves to an enum */}
+            {nestedEnum && displayedEnumValues && displayedEnumValues.length > 0 && (
+              <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-0.5">
+                <span className="text-xs inline-block">Allowed values:</span>
+                {displayedEnumValues.map((value) => (
+                  <span key={value.name} className="text-xs">
+                    {' '}
+                    <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                      {value.name}
+                    </code>
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
 
           {/* Nested fields for message types */}
           {hasNested && nestedMessage && (

package/eventcatalog/src/components/SchemaExplorer/SchemaViewerHover.test.tsx

@@ -0,0 +1,33 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import { parseProtobufSchema } from '@utils/protobuf-schema';
+import AvroSchemaViewer from './AvroSchemaViewer';
+import JSONSchemaViewer from './JSONSchemaViewer';
+import ProtobufSchemaViewer from './ProtobufSchemaViewer';
+
+const PROPERTY_HOVER_CLASS = 'hover:bg-[rgb(var(--ec-content-hover))]';
+
+describe('schema viewer property hover states', () => {
+  it('adds a hover background to JSON Schema properties', () => {
+    const html = renderToStaticMarkup(
+      <JSONSchemaViewer schema={{ type: 'object', properties: { id: { type: 'string' } } }} search={false} />
+    );
+
+    expect(html).toContain(PROPERTY_HOVER_CLASS);
+  });
+
+  it('adds a hover background to Avro fields', () => {
+    const html = renderToStaticMarkup(
+      <AvroSchemaViewer schema={{ type: 'record', name: 'Example', fields: [{ name: 'id', type: 'string' }] }} search={false} />
+    );
+
+    expect(html).toContain(PROPERTY_HOVER_CLASS);
+  });
+
+  it('adds a hover background to Protobuf fields', () => {
+    const schema = parseProtobufSchema('syntax = "proto3"; message Example { string id = 1; }');
+    const html = renderToStaticMarkup(<ProtobufSchemaViewer schema={schema} search={false} />);
+
+    expect(html).toContain(PROPERTY_HOVER_CLASS);
+  });
+});