Widget Framework

The BI Workbench widget system at frontend/bi-workbench/src/components/widgets/ provides a composable widget architecture where each widget type extends the BaseWidget container with specific visualization rendering.

BaseWidget

File: frontend/bi-workbench/src/components/widgets/BaseWidget.tsx

The foundational widget container providing header, loading/error states, resize handling, and context menu.

Widget Types

Widget	File	Description
`MetricCardWidget`	`MetricCardWidget.tsx`	Single KPI value with trend indicator
`TableWidget`	`TableWidget.tsx`	Tabular data with sorting and pagination
`GaugeWidget`	`GaugeWidget.tsx`	Progress gauge towards a goal
`MapWidget`	`MapWidget.tsx`	Geographic data visualization
`VegaWidget`	`VegaWidget.tsx`	Generic Vega-Lite spec renderer
`TextWidget`	`TextWidget.tsx`	Markdown text content
`WidgetRenderer`	`WidgetRenderer.tsx`	Dynamic widget type resolver

WidgetRenderer

The WidgetRenderer dynamically selects the appropriate widget component based on the widget type:

function WidgetRenderer({ widget, data, isLoading, error }: WidgetRendererProps) {
  switch (widget.type) {
    case 'BAR_CHART':
    case 'LINE_CHART':
    case 'PIE_CHART':
    case 'AREA_CHART':
      return <VegaWidget widget={widget} data={data} />;
    case 'METRIC_CARD':
      return <MetricCardWidget widget={widget} data={data} />;
    case 'TABLE':
      return <TableWidget widget={widget} data={data} />;
    case 'GAUGE':
      return <GaugeWidget widget={widget} data={data} />;
    case 'TEXT':
      return <TextWidget widget={widget} />;
    // ...
  }
}

Widget Data Subscription

The useWidgetDataSubscription hook manages real-time data updates for widgets:

const { data, isLoading, error, refresh } = useWidgetDataSubscription(
  widget.id,
  widget.dataSourceType,
  widget.query,
  widget.filterBindings,
  activeFilters
);

Filter System Semantic Model Designer