Semantic Model Designer

The Semantic Model components at frontend/bi-workbench/src/components/SemanticModel/ provide a visual entity-relationship diagram (ERD) editor for designing and exploring semantic data models.

Components

Component	File	Purpose
`ERDViewer`	`ERDViewer.tsx`	Interactive ERD canvas with pan/zoom
`ERDCanvas`	`ERDCanvas.tsx`	SVG canvas for entity rendering
`EntityNode`	`EntityNode.tsx`	Visual entity box with columns
`EntityDetailPanel`	`EntityDetailPanel.tsx`	Side panel for entity properties
`RelationshipLines`	`RelationshipLines.tsx`	SVG relationship lines with cardinality
`SemanticModelDesigner`	`SemanticModelDesigner.tsx`	Full designer with toolbar and panels

Types

// frontend/bi-workbench/src/components/SemanticModel/types.ts
interface SemanticEntity {
  id: string;
  name: string;
  displayName: string;
  columns: SemanticColumn[];
  position: { x: number; y: number };
  primaryKey: string[];
}
 
interface SemanticColumn {
  name: string;
  type: string;
  isPrimaryKey: boolean;
  isForeignKey: boolean;
  isNullable: boolean;
  description?: string;
}
 
interface SemanticRelationship {
  id: string;
  fromEntity: string;
  fromColumn: string;
  toEntity: string;
  toColumn: string;
  cardinality: 'one-to-one' | 'one-to-many' | 'many-to-many';
}

ERDViewer

The main ERD viewer provides:

Pan and zoom via mouse/trackpad
Entity selection with detail panel
Relationship line rendering with cardinality markers
Auto-layout using force-directed algorithms
Export to image

SemanticModelDesigner

The full designer view combines the ERD viewer with:

Entity creation and editing
Relationship definition
Column property management
Metric definition on entities
Integration with the SemanticApiClient for persistence

Widget Framework Metrics Library