From 1169340436daaf3b24338164efeffb9e0c73e965 Mon Sep 17 00:00:00 2001
From: Dominik Buszowiecki <DominikB2014@gmail.com>
Date: Wed, 26 Nov 2025 13:35:28 -0500
Subject: [PATCH 1/7] add details widget

---
 .../views/dashboards/datasetConfig/spans.tsx  |  2 +
 static/app/views/dashboards/types.tsx         |  1 +
 static/app/views/dashboards/utils.tsx         |  9 ++++
 .../components/sortBySelectors.tsx            |  2 +-
 .../widgetBuilder/components/typeSelector.tsx |  9 +++-
 .../components/visualize/index.tsx            |  5 +--
 .../components/visualize/selectRow.tsx        |  5 +--
 .../components/widgetBuilderSlideout.tsx      | 15 ++++---
 .../components/widgetPreview.tsx              |  5 +--
 .../hooks/useWidgetBuilderState.tsx           | 44 +++++++++++++------
 .../utils/convertBuilderStateToWidget.ts      | 10 ++---
 .../convertWidgetToBuilderStateParams.ts      | 10 ++---
 .../app/views/dashboards/widgetCard/chart.tsx | 26 +++++++++++
 .../widgetCard/genericWidgetQueries.tsx       | 11 +++--
 .../widgetCard/widgetCardChartContainer.tsx   |  6 +--
 15 files changed, 108 insertions(+), 52 deletions(-)

diff --git a/static/app/views/dashboards/datasetConfig/spans.tsx b/static/app/views/dashboards/datasetConfig/spans.tsx
index b44b8421f800de..8088c28a090ca9 100644
--- a/static/app/views/dashboards/datasetConfig/spans.tsx
+++ b/static/app/views/dashboards/datasetConfig/spans.tsx
@@ -193,6 +193,7 @@ export const SpansConfig: DatasetConfig<
     DisplayType.LINE,
     DisplayType.TABLE,
     DisplayType.TOP_N,
+    DisplayType.DETAILS,
   ],
   getTableRequest: (
     api: Client,
@@ -316,6 +317,7 @@ function getEventsRequest(
 ) {
   const url = `/organizations/${organization.slug}/events/`;
   const eventView = eventViewFromWidget('', query, pageFilters);
+
   const hasQueueFeature = organization.features.includes(
     'visibility-dashboards-async-queue'
   );
diff --git a/static/app/views/dashboards/types.tsx b/static/app/views/dashboards/types.tsx
index a99d11f29b6dd1..0e975b89834091 100644
--- a/static/app/views/dashboards/types.tsx
+++ b/static/app/views/dashboards/types.tsx
@@ -24,6 +24,7 @@ export enum DisplayType {
   LINE = 'line',
   TABLE = 'table',
   BIG_NUMBER = 'big_number',
+  DETAILS = 'details',
   TOP_N = 'top_n',
 }
 
diff --git a/static/app/views/dashboards/utils.tsx b/static/app/views/dashboards/utils.tsx
index 07a9933a03a64f..76434714fc2ca2 100644
--- a/static/app/views/dashboards/utils.tsx
+++ b/static/app/views/dashboards/utils.tsx
@@ -702,3 +702,12 @@ export function applyDashboardFilters(
   }
   return baseQuery;
 }
+
+export const isChartDisplayType = (displayType?: DisplayType) => {
+  if (!displayType) {
+    return true;
+  }
+  return ![DisplayType.BIG_NUMBER, DisplayType.TABLE, DisplayType.DETAILS].includes(
+    displayType
+  );
+};
diff --git a/static/app/views/dashboards/widgetBuilder/components/sortBySelectors.tsx b/static/app/views/dashboards/widgetBuilder/components/sortBySelectors.tsx
index 47a729a8a42914..55c931ef2adcab 100644
--- a/static/app/views/dashboards/widgetBuilder/components/sortBySelectors.tsx
+++ b/static/app/views/dashboards/widgetBuilder/components/sortBySelectors.tsx
@@ -144,7 +144,7 @@ export function SortBySelectors({
         title={disableSortReason}
         disabled={!disableSort || (disableSortDirection && disableSort)}
       >
-        {displayType === DisplayType.TABLE ? (
+        {displayType === DisplayType.TABLE || displayType === DisplayType.DETAILS ? (
           <Select
             name="sortBy"
             aria-label={t('Sort by')}
diff --git a/static/app/views/dashboards/widgetBuilder/components/typeSelector.tsx b/static/app/views/dashboards/widgetBuilder/components/typeSelector.tsx
index 688f3e43097d81..928e22c5ae8aa3 100644
--- a/static/app/views/dashboards/widgetBuilder/components/typeSelector.tsx
+++ b/static/app/views/dashboards/widgetBuilder/components/typeSelector.tsx
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import {Select} from 'sentry/components/core/select';
 import {components} from 'sentry/components/forms/controls/reactSelectWrapper';
 import FieldGroup from 'sentry/components/forms/fieldGroup';
-import {IconGraph, IconNumber, IconTable} from 'sentry/icons';
+import {IconGraph, IconNumber, IconSettings, IconTable} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -24,9 +24,10 @@ const typeIcons = {
   [DisplayType.LINE]: <IconGraph key="line" type="line" />,
   [DisplayType.TABLE]: <IconTable key="table" />,
   [DisplayType.BIG_NUMBER]: <IconNumber key="number" />,
+  [DisplayType.DETAILS]: <IconSettings key="details" />,
 };
 
-const displayTypes = {
+const displayTypes: Partial<Record<DisplayType, string>> = {
   [DisplayType.AREA]: t('Area'),
   [DisplayType.BAR]: t('Bar'),
   [DisplayType.LINE]: t('Line'),
@@ -46,6 +47,10 @@ function WidgetBuilderTypeSelector({error, setError}: WidgetBuilderTypeSelectorP
   const isEditing = useIsEditingWidget();
   const organization = useOrganization();
 
+  if (organization.features.includes('dashboards-details-widget')) {
+    displayTypes[DisplayType.DETAILS] = t('Details');
+  }
+
   return (
     <Fragment>
       <SectionHeader
diff --git a/static/app/views/dashboards/widgetBuilder/components/visualize/index.tsx b/static/app/views/dashboards/widgetBuilder/components/visualize/index.tsx
index ff452773c15933..a99b649d1648fe 100644
--- a/static/app/views/dashboards/widgetBuilder/components/visualize/index.tsx
+++ b/static/app/views/dashboards/widgetBuilder/components/visualize/index.tsx
@@ -41,6 +41,7 @@ import {
   WidgetType,
   type LinkedDashboard,
 } from 'sentry/views/dashboards/types';
+import {isChartDisplayType} from 'sentry/views/dashboards/utils';
 import {SectionHeader} from 'sentry/views/dashboards/widgetBuilder/components/common/sectionHeader';
 import SortableVisualizeFieldWrapper from 'sentry/views/dashboards/widgetBuilder/components/common/sortableFieldWrapper';
 import {ExploreArithmeticBuilder} from 'sentry/views/dashboards/widgetBuilder/components/exploreArithmeticBuilder';
@@ -277,9 +278,7 @@ function Visualize({error, setError}: VisualizeProps) {
   const isEditing = useIsEditingWidget();
   const disableTransactionWidget = useDisableTransactionWidget();
 
-  const isChartWidget =
-    state.displayType !== DisplayType.TABLE &&
-    state.displayType !== DisplayType.BIG_NUMBER;
+  const isChartWidget = isChartDisplayType(state.displayType);
   const isBigNumberWidget = state.displayType === DisplayType.BIG_NUMBER;
   const isTableWidget = state.displayType === DisplayType.TABLE;
   const {tags: numericSpanTags} = useTraceItemTags('number');
diff --git a/static/app/views/dashboards/widgetBuilder/components/visualize/selectRow.tsx b/static/app/views/dashboards/widgetBuilder/components/visualize/selectRow.tsx
index 9fa582c3413d47..411236516ed459 100644
--- a/static/app/views/dashboards/widgetBuilder/components/visualize/selectRow.tsx
+++ b/static/app/views/dashboards/widgetBuilder/components/visualize/selectRow.tsx
@@ -20,6 +20,7 @@ import {AggregationKey} from 'sentry/utils/fields';
 import useOrganization from 'sentry/utils/useOrganization';
 import {getDatasetConfig} from 'sentry/views/dashboards/datasetConfig/base';
 import {DisplayType, WidgetType} from 'sentry/views/dashboards/types';
+import {isChartDisplayType} from 'sentry/views/dashboards/utils';
 import {
   AggregateCompactSelect,
   getAggregateValueKey,
@@ -116,9 +117,7 @@ export function SelectRow({
   const datasetConfig = getDatasetConfig(state.dataset);
   const columnSelectRef = useRef<HTMLDivElement>(null);
 
-  const isChartWidget =
-    state.displayType !== DisplayType.TABLE &&
-    state.displayType !== DisplayType.BIG_NUMBER;
+  const isChartWidget = isChartDisplayType(state.displayType);
 
   const updateAction = isChartWidget
     ? BuilderStateAction.SET_Y_AXIS
diff --git a/static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx b/static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx
index be705c81d11166..24686e26844012 100644
--- a/static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx
+++ b/static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx
@@ -28,6 +28,7 @@ import {
   type DashboardFilters,
   type Widget,
 } from 'sentry/views/dashboards/types';
+import {isChartDisplayType} from 'sentry/views/dashboards/utils';
 import {animationTransitionSettings} from 'sentry/views/dashboards/widgetBuilder/components/common/animationSettings';
 import WidgetBuilderDatasetSelector from 'sentry/views/dashboards/widgetBuilder/components/datasetSelector';
 import WidgetBuilderFilterBar from 'sentry/views/dashboards/widgetBuilder/components/filtersBar';
@@ -122,9 +123,9 @@ function WidgetBuilderSlideout({
     : isEditing
       ? t('Edit Widget')
       : t('Custom Widget Builder');
-  const isChartWidget =
-    state.displayType !== DisplayType.BIG_NUMBER &&
-    state.displayType !== DisplayType.TABLE;
+  const isChartWidget = isChartDisplayType(state.displayType);
+
+  const showVisualizeSection = state.displayType !== DisplayType.DETAILS;
 
   const customPreviewRef = useRef<HTMLDivElement>(null);
   const templatesPreviewRef = useRef<HTMLDivElement>(null);
@@ -340,9 +341,11 @@ function WidgetBuilderSlideout({
                   <WidgetBuilderFilterBar releases={dashboard.filters?.release ?? []} />
                 </Section>
               )}
-              <Section>
-                <Visualize error={error} setError={setError} />
-              </Section>
+              {showVisualizeSection && (
+                <Section>
+                  <Visualize error={error} setError={setError} />
+                </Section>
+              )}
               <Section>
                 <WidgetBuilderQueryFilterBuilder
                   onQueryConditionChange={onQueryConditionChange}
diff --git a/static/app/views/dashboards/widgetBuilder/components/widgetPreview.tsx b/static/app/views/dashboards/widgetBuilder/components/widgetPreview.tsx
index 6442e3a90a2cf7..0b3c18a2524784 100644
--- a/static/app/views/dashboards/widgetBuilder/components/widgetPreview.tsx
+++ b/static/app/views/dashboards/widgetBuilder/components/widgetPreview.tsx
@@ -14,6 +14,7 @@ import {
   type DashboardDetails,
   type DashboardFilters,
 } from 'sentry/views/dashboards/types';
+import {isChartDisplayType} from 'sentry/views/dashboards/utils';
 import {useWidgetBuilderContext} from 'sentry/views/dashboards/widgetBuilder/contexts/widgetBuilderContext';
 import {BuilderStateAction} from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState';
 import {convertBuilderStateToWidget} from 'sentry/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget';
@@ -63,9 +64,7 @@ function WidgetPreview({
       false,
   };
 
-  const isChart =
-    widget.displayType !== DisplayType.TABLE &&
-    widget.displayType !== DisplayType.BIG_NUMBER;
+  const isChart = isChartDisplayType(widget.displayType);
 
   // the spans dataset doesn't handle timeseries for duplicate yAxes/aggregates
   // automatically, so we need to dedupe them
diff --git a/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx b/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx
index ceafd156f6b25d..3a1e3b1106bd57 100644
--- a/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx
+++ b/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx
@@ -23,6 +23,7 @@ import {
   WidgetType,
   type LinkedDashboard,
 } from 'sentry/views/dashboards/types';
+import {isChartDisplayType} from 'sentry/views/dashboards/utils';
 import type {ThresholdsConfig} from 'sentry/views/dashboards/widgetBuilder/buildSteps/thresholdsStep/thresholds';
 import {
   DISABLED_SORT,
@@ -32,12 +33,22 @@ import {
   DEFAULT_RESULTS_LIMIT,
   getResultsLimit,
 } from 'sentry/views/dashboards/widgetBuilder/utils';
+import type {DefaultDetailWidgetFields} from 'sentry/views/dashboards/widgets/detailsWidget/types';
 import {FieldValueKind} from 'sentry/views/discover/table/types';
+import {SpanFields} from 'sentry/views/insights/types';
 
 // For issues dataset, events and users are sorted descending and do not use '-'
 // All other issues fields are sorted ascending
 const REVERSED_ORDER_FIELD_SORT_LIST = ['freq', 'user'];
 
+const DETAIL_WIDGET_FIELDS: DefaultDetailWidgetFields[] = [
+  SpanFields.SPAN_ID,
+  SpanFields.SPAN_OP,
+  SpanFields.SPAN_GROUP,
+  SpanFields.SPAN_DESCRIPTION,
+  SpanFields.SPAN_CATEGORY,
+] as const;
+
 export const MAX_NUM_Y_AXES = 3;
 
 export type WidgetBuilderStateQueryParams = {
@@ -296,6 +307,16 @@ function useWidgetBuilderState(): {
             // Columns are ignored for big number widgets because there is no grouping
             setFields([...aggregatesWithoutAlias, ...(yAxisWithoutAlias ?? [])], options);
             setQuery(query?.slice(0, 1), options);
+          } else if (action.payload === DisplayType.DETAILS) {
+            setLimit(undefined, options);
+            setSort([], options);
+            setYAxis([], options);
+            setLegendAlias([], options);
+            setFields(
+              DETAIL_WIDGET_FIELDS.map(field => ({field, kind: FieldValueKind.FIELD})),
+              options
+            );
+            setQuery(query?.slice(0, 1), options);
           } else {
             setFields(columnsWithoutAlias, options);
             const nextAggregates = [
@@ -344,10 +365,16 @@ function useWidgetBuilderState(): {
             config.defaultWidgetQuery.fields?.map(field => explodeField({field})),
             options
           );
-          if (
-            nextDisplayType === DisplayType.TABLE ||
-            nextDisplayType === DisplayType.BIG_NUMBER
-          ) {
+          if (isChartDisplayType(nextDisplayType)) {
+            setFields([], options);
+            setYAxis(
+              config.defaultWidgetQuery.aggregates?.map(aggregate =>
+                explodeField({field: aggregate})
+              ),
+              options
+            );
+            setSort(decodeSorts(config.defaultWidgetQuery.orderby), options);
+          } else {
             setYAxis([], options);
             setFields(
               config.defaultWidgetQuery.fields?.map(field => explodeField({field})),
@@ -359,15 +386,6 @@ function useWidgetBuilderState(): {
                 : decodeSorts(config.defaultWidgetQuery.orderby),
               options
             );
-          } else {
-            setFields([], options);
-            setYAxis(
-              config.defaultWidgetQuery.aggregates?.map(aggregate =>
-                explodeField({field: aggregate})
-              ),
-              options
-            );
-            setSort(decodeSorts(config.defaultWidgetQuery.orderby), options);
           }
 
           setThresholds(undefined, options);
diff --git a/static/app/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget.ts b/static/app/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget.ts
index b2a6e6932aea2d..6f3439fd2de78b 100644
--- a/static/app/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget.ts
+++ b/static/app/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget.ts
@@ -7,6 +7,7 @@ import {
   type Widget,
   type WidgetQuery,
 } from 'sentry/views/dashboards/types';
+import {isChartDisplayType} from 'sentry/views/dashboards/utils';
 import {
   serializeSorts,
   type WidgetBuilderState,
@@ -39,7 +40,7 @@ export function convertBuilderStateToWidget(state: WidgetBuilderState): Widget {
     .filter(Boolean);
 
   const fields =
-    state.displayType === DisplayType.TABLE
+    state.displayType === DisplayType.TABLE || state.displayType === DisplayType.DETAILS
       ? state.fields?.map(generateFieldAsString)
       : [...(columns ?? []), ...(aggregates ?? [])];
 
@@ -69,12 +70,7 @@ export function convertBuilderStateToWidget(state: WidgetBuilderState): Widget {
     };
   });
 
-  const limit = [DisplayType.BIG_NUMBER, DisplayType.TABLE].includes(
-    state.displayType ?? DisplayType.TABLE
-  )
-    ? undefined
-    : state.limit;
-
+  const limit = isChartDisplayType(state.displayType) ? state.limit : undefined;
   return {
     title: state.title ?? '',
     description: state.description,
diff --git a/static/app/views/dashboards/widgetBuilder/utils/convertWidgetToBuilderStateParams.ts b/static/app/views/dashboards/widgetBuilder/utils/convertWidgetToBuilderStateParams.ts
index 13e285615c57b8..de8e205e5109eb 100644
--- a/static/app/views/dashboards/widgetBuilder/utils/convertWidgetToBuilderStateParams.ts
+++ b/static/app/views/dashboards/widgetBuilder/utils/convertWidgetToBuilderStateParams.ts
@@ -5,6 +5,7 @@ import {
   type Widget,
   type WidgetQuery,
 } from 'sentry/views/dashboards/types';
+import {isChartDisplayType} from 'sentry/views/dashboards/utils';
 import {
   serializeFields,
   serializeThresholds,
@@ -37,15 +38,12 @@ export function convertWidgetToBuilderStateParams(
   const firstWidgetQuery = widget.queries[0];
   let yAxis = firstWidgetQuery ? stringifyFields(firstWidgetQuery, 'aggregates') : [];
   let field: string[] = [];
-  if (
-    widget.displayType === DisplayType.TABLE ||
-    widget.displayType === DisplayType.BIG_NUMBER
-  ) {
+  if (isChartDisplayType(widget.displayType)) {
+    field = firstWidgetQuery ? stringifyFields(firstWidgetQuery, 'columns') : [];
+  } else {
     field = firstWidgetQuery ? stringifyFields(firstWidgetQuery, 'fields') : [];
     yAxis = [];
     legendAlias = [];
-  } else {
-    field = firstWidgetQuery ? stringifyFields(firstWidgetQuery, 'columns') : [];
   }
 
   return {
diff --git a/static/app/views/dashboards/widgetCard/chart.tsx b/static/app/views/dashboards/widgetCard/chart.tsx
index f15ab842346359..10cc4eac76dc3f 100644
--- a/static/app/views/dashboards/widgetCard/chart.tsx
+++ b/static/app/views/dashboards/widgetCard/chart.tsx
@@ -70,6 +70,8 @@ import type WidgetLegendSelectionState from 'sentry/views/dashboards/widgetLegen
 import {BigNumberWidgetVisualization} from 'sentry/views/dashboards/widgets/bigNumberWidget/bigNumberWidgetVisualization';
 import {ALLOWED_CELL_ACTIONS} from 'sentry/views/dashboards/widgets/common/settings';
 import type {TabularColumn} from 'sentry/views/dashboards/widgets/common/types';
+import {DetailsWidgetVisualization} from 'sentry/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization';
+import type {DefaultDetailWidgetFields} from 'sentry/views/dashboards/widgets/detailsWidget/types';
 import {TableWidgetVisualization} from 'sentry/views/dashboards/widgets/tableWidget/tableWidgetVisualization';
 import {
   convertTableDataToTabularData,
@@ -78,6 +80,7 @@ import {
 import {Actions} from 'sentry/views/discover/table/cellAction';
 import {decodeColumnOrder} from 'sentry/views/discover/utils';
 import {ConfidenceFooter} from 'sentry/views/explore/spans/charts/confidenceFooter';
+import {type SpanResponse} from 'sentry/views/insights/types';
 
 import type {GenericWidgetQueriesChildrenProps} from './genericWidgetQueries';
 
@@ -198,6 +201,15 @@ function WidgetCardChart(props: WidgetCardChartProps) {
     );
   }
 
+  if (widget.displayType === DisplayType.DETAILS) {
+    return (
+      <TransitionChart loading={loading} reloading={loading}>
+        <LoadingScreen loading={loading} showLoadingText={showLoadingText} />
+        <DetailsComponent tableResults={tableResults} {...props} />
+      </TransitionChart>
+    );
+  }
+
   const {start, end, period, utc} = selection.datetime;
   const {projects, environments} = selection;
 
@@ -658,6 +670,20 @@ function BigNumberComponent({
   });
 }
 
+function DetailsComponent(props: TableComponentProps): React.ReactNode {
+  const {tableResults} = props;
+
+  const singleSpan = tableResults?.[0]?.data?.[0] as
+    | Pick<SpanResponse, DefaultDetailWidgetFields>
+    | undefined;
+
+  if (!singleSpan) {
+    return null;
+  }
+
+  return <DetailsWidgetVisualization span={singleSpan} />;
+}
+
 function getChartComponent(chartProps: any, widget: Widget): React.ReactNode {
   const stacked = widget.queries[0]?.columns.length! > 0;
 
diff --git a/static/app/views/dashboards/widgetCard/genericWidgetQueries.tsx b/static/app/views/dashboards/widgetCard/genericWidgetQueries.tsx
index eebfb67c3c7fe5..01ee3c0242dee4 100644
--- a/static/app/views/dashboards/widgetCard/genericWidgetQueries.tsx
+++ b/static/app/views/dashboards/widgetCard/genericWidgetQueries.tsx
@@ -16,7 +16,10 @@ import type {OnDemandControlContext} from 'sentry/utils/performance/contexts/onD
 import type {DatasetConfig} from 'sentry/views/dashboards/datasetConfig/base';
 import type {DashboardFilters, Widget, WidgetQuery} from 'sentry/views/dashboards/types';
 import {DEFAULT_TABLE_LIMIT, DisplayType} from 'sentry/views/dashboards/types';
-import {dashboardFiltersToString} from 'sentry/views/dashboards/utils';
+import {
+  dashboardFiltersToString,
+  isChartDisplayType,
+} from 'sentry/views/dashboards/utils';
 import type {WidgetQueryQueue} from 'sentry/views/dashboards/utils/widgetQueryQueue';
 import type {SamplingMode} from 'sentry/views/explore/hooks/useProgressiveQuery';
 
@@ -419,10 +422,10 @@ class GenericWidgetQueries<SeriesResponse, TableResponse> extends Component<
     onDataFetchStart?.();
 
     try {
-      if ([DisplayType.TABLE, DisplayType.BIG_NUMBER].includes(widget.displayType)) {
-        await this.fetchTableData(queryFetchID);
-      } else {
+      if (isChartDisplayType(widget.displayType)) {
         await this.fetchSeriesData(queryFetchID);
+      } else {
+        await this.fetchTableData(queryFetchID);
       }
     } catch (err: any) {
       if (this._isMounted) {
diff --git a/static/app/views/dashboards/widgetCard/widgetCardChartContainer.tsx b/static/app/views/dashboards/widgetCard/widgetCardChartContainer.tsx
index d768365378d80f..08c3c20c8b9f68 100644
--- a/static/app/views/dashboards/widgetCard/widgetCardChartContainer.tsx
+++ b/static/app/views/dashboards/widgetCard/widgetCardChartContainer.tsx
@@ -14,6 +14,7 @@ import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
 import type {AggregationOutputType, Sort} from 'sentry/utils/discover/fields';
 import type {DashboardFilters, Widget} from 'sentry/views/dashboards/types';
 import {DisplayType, WidgetType} from 'sentry/views/dashboards/types';
+import {isChartDisplayType} from 'sentry/views/dashboards/utils';
 import WidgetLegendNameEncoderDecoder from 'sentry/views/dashboards/widgetLegendNameEncoderDecoder';
 import type WidgetLegendSelectionState from 'sentry/views/dashboards/widgetLegendSelectionState';
 import type {TabularColumn} from 'sentry/views/dashboards/widgets/common/types';
@@ -96,10 +97,7 @@ export function WidgetCardChartContainer({
     widgetType: DisplayType
   ) {
     // non-chart widgets need to look at tableResults
-    const results =
-      widgetType === DisplayType.BIG_NUMBER || widgetType === DisplayType.TABLE
-        ? tableResults
-        : timeseriesResults;
+    const results = isChartDisplayType(widgetType) ? timeseriesResults : tableResults;
 
     return errorMessage
       ? errorMessage

From 1613b2d8cb498c81c47798f29ba09ffd8d9ed7c5 Mon Sep 17 00:00:00 2001
From: Dominik Buszowiecki <DominikB2014@gmail.com>
Date: Wed, 26 Nov 2025 13:41:00 -0500
Subject: [PATCH 2/7] types

---
 .../detailsWidgetVisualization.tsx            | 84 +++++++++++++++++++
 .../widgets/detailsWidget/settings.ts         |  2 +
 .../dashboards/widgets/detailsWidget/types.ts |  8 ++
 3 files changed, 94 insertions(+)
 create mode 100644 static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx
 create mode 100644 static/app/views/dashboards/widgets/detailsWidget/settings.ts
 create mode 100644 static/app/views/dashboards/widgets/detailsWidget/types.ts

diff --git a/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx b/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx
new file mode 100644
index 00000000000000..3cfc548165596d
--- /dev/null
+++ b/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx
@@ -0,0 +1,84 @@
+import styled from '@emotion/styled';
+
+import {AutoSizedText} from 'sentry/views/dashboards/widgetCard/autoSizedText';
+import type {DefaultDetailWidgetFields} from 'sentry/views/dashboards/widgets/detailsWidget/types';
+import {FullSpanDescription} from 'sentry/views/insights/common/components/fullSpanDescription';
+import {resolveSpanModule} from 'sentry/views/insights/common/utils/resolveSpanModule';
+import {SpanFields, type SpanResponse} from 'sentry/views/insights/types';
+
+import {DEEMPHASIS_COLOR_NAME, LOADING_PLACEHOLDER} from './settings';
+
+interface DetailsWidgetVisualizationProps {
+  span: Pick<SpanResponse, DefaultDetailWidgetFields>;
+}
+
+export function DetailsWidgetVisualization(props: DetailsWidgetVisualizationProps) {
+  const {span} = props;
+
+  const spanOp = span[SpanFields.SPAN_OP];
+  const spanDescription = span[SpanFields.SPAN_DESCRIPTION];
+  const spanGroup = span[SpanFields.SPAN_GROUP];
+  const spanCategory = span[SpanFields.SPAN_CATEGORY];
+
+  const moduleName = resolveSpanModule(spanOp, spanCategory);
+
+  if (spanOp === 'db') {
+    return (
+      <FullSpanDescription
+        group={spanGroup}
+        shortDescription={spanDescription}
+        moduleName={moduleName}
+      />
+    );
+  }
+
+  // String values don't support differences, thresholds, max values, or anything else.
+  return (
+    <Wrapper>
+      {spanOp} - {spanDescription}
+    </Wrapper>
+  );
+}
+
+function Wrapper({children}: any) {
+  return (
+    <GrowingWrapper>
+      <AutoResizeParent>
+        <AutoSizedText>{children}</AutoSizedText>
+      </AutoResizeParent>
+    </GrowingWrapper>
+  );
+}
+
+// Takes up 100% of the parent. If within flex context, grows to fill.
+// Otherwise, takes up 100% horizontally and vertically
+const GrowingWrapper = styled('div')`
+  position: relative;
+  flex-grow: 1;
+  height: 100%;
+  width: 100%;
+`;
+
+const AutoResizeParent = styled('div')`
+  position: absolute;
+  inset: 0;
+
+  color: ${p => p.theme.headingColor};
+
+  container-type: size;
+  container-name: auto-resize-parent;
+
+  * {
+    line-height: 1;
+    text-align: left !important;
+  }
+`;
+
+const LoadingPlaceholder = styled('span')`
+  color: ${p => p.theme[DEEMPHASIS_COLOR_NAME]};
+  font-size: ${p => p.theme.fontSize.lg};
+`;
+
+DetailsWidgetVisualization.LoadingPlaceholder = function () {
+  return <LoadingPlaceholder>{LOADING_PLACEHOLDER}</LoadingPlaceholder>;
+};
diff --git a/static/app/views/dashboards/widgets/detailsWidget/settings.ts b/static/app/views/dashboards/widgets/detailsWidget/settings.ts
new file mode 100644
index 00000000000000..266629685763b5
--- /dev/null
+++ b/static/app/views/dashboards/widgets/detailsWidget/settings.ts
@@ -0,0 +1,2 @@
+export const LOADING_PLACEHOLDER = '\u2014';
+export const DEEMPHASIS_COLOR_NAME = 'subText';
diff --git a/static/app/views/dashboards/widgets/detailsWidget/types.ts b/static/app/views/dashboards/widgets/detailsWidget/types.ts
new file mode 100644
index 00000000000000..d20a6503f5accc
--- /dev/null
+++ b/static/app/views/dashboards/widgets/detailsWidget/types.ts
@@ -0,0 +1,8 @@
+import type {SpanFields} from 'sentry/views/insights/types';
+
+export type DefaultDetailWidgetFields =
+  | SpanFields.SPAN_OP
+  | SpanFields.SPAN_GROUP
+  | SpanFields.SPAN_DESCRIPTION
+  | SpanFields.SPAN_ID
+  | SpanFields.SPAN_CATEGORY;

From 00b713ef702f8118a681d6986574a73df7cc0243 Mon Sep 17 00:00:00 2001
From: Dominik Buszowiecki <DominikB2014@gmail.com>
Date: Wed, 26 Nov 2025 13:56:05 -0500
Subject: [PATCH 3/7] minor fixes

---
 static/app/views/dashboards/datasetConfig/spans.tsx | 1 -
 static/app/views/dashboards/widgetCard/chart.tsx    | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/views/dashboards/datasetConfig/spans.tsx b/static/app/views/dashboards/datasetConfig/spans.tsx
index 8088c28a090ca9..8d568605ae96c5 100644
--- a/static/app/views/dashboards/datasetConfig/spans.tsx
+++ b/static/app/views/dashboards/datasetConfig/spans.tsx
@@ -317,7 +317,6 @@ function getEventsRequest(
 ) {
   const url = `/organizations/${organization.slug}/events/`;
   const eventView = eventViewFromWidget('', query, pageFilters);
-
   const hasQueueFeature = organization.features.includes(
     'visibility-dashboards-async-queue'
   );
diff --git a/static/app/views/dashboards/widgetCard/chart.tsx b/static/app/views/dashboards/widgetCard/chart.tsx
index 10cc4eac76dc3f..4fee8760a373e1 100644
--- a/static/app/views/dashboards/widgetCard/chart.tsx
+++ b/static/app/views/dashboards/widgetCard/chart.tsx
@@ -677,6 +677,7 @@ function DetailsComponent(props: TableComponentProps): React.ReactNode {
     | Pick<SpanResponse, DefaultDetailWidgetFields>
     | undefined;
 
+  // TODO: Handle this case gracefully
   if (!singleSpan) {
     return null;
   }

From 485840322c3bc1d1eb7b6c76ac639a94b5f8363d Mon Sep 17 00:00:00 2001
From: Dominik Buszowiecki <DominikB2014@gmail.com>
Date: Wed, 26 Nov 2025 14:04:54 -0500
Subject: [PATCH 4/7] add test

---
 .../dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx    | 2 +-
 static/app/views/dashboards/widgets/detailsWidget/types.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx b/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx
index 3a1e3b1106bd57..71d1331799e5bc 100644
--- a/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx
+++ b/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx
@@ -42,7 +42,7 @@ import {SpanFields} from 'sentry/views/insights/types';
 const REVERSED_ORDER_FIELD_SORT_LIST = ['freq', 'user'];
 
 const DETAIL_WIDGET_FIELDS: DefaultDetailWidgetFields[] = [
-  SpanFields.SPAN_ID,
+  SpanFields.ID,
   SpanFields.SPAN_OP,
   SpanFields.SPAN_GROUP,
   SpanFields.SPAN_DESCRIPTION,
diff --git a/static/app/views/dashboards/widgets/detailsWidget/types.ts b/static/app/views/dashboards/widgets/detailsWidget/types.ts
index d20a6503f5accc..14ab630389c8a3 100644
--- a/static/app/views/dashboards/widgets/detailsWidget/types.ts
+++ b/static/app/views/dashboards/widgets/detailsWidget/types.ts
@@ -4,5 +4,5 @@ export type DefaultDetailWidgetFields =
   | SpanFields.SPAN_OP
   | SpanFields.SPAN_GROUP
   | SpanFields.SPAN_DESCRIPTION
-  | SpanFields.SPAN_ID
+  | SpanFields.ID
   | SpanFields.SPAN_CATEGORY;

From 05675afa7af62c06d777bf24cbe1446cbb625863 Mon Sep 17 00:00:00 2001
From: Dominik Buszowiecki <DominikB2014@gmail.com>
Date: Wed, 26 Nov 2025 14:05:36 -0500
Subject: [PATCH 5/7] add tests

---
 .../detailsWidgetVisualization.spec.tsx       | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.spec.tsx

diff --git a/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.spec.tsx b/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.spec.tsx
new file mode 100644
index 00000000000000..e1c16fcd619364
--- /dev/null
+++ b/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.spec.tsx
@@ -0,0 +1,63 @@
+// write some tests for the DetailsWidgetVisualization component
+
+import {OrganizationFixture} from 'sentry-fixture/organization';
+import {ProjectFixture} from 'sentry-fixture/project';
+
+import {render, screen, waitForElementToBeRemoved} from 'sentry-test/reactTestingLibrary';
+
+import {DetailsWidgetVisualization} from 'sentry/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization';
+
+describe('DetailsWidgetVisualization', () => {
+  beforeEach(() => {
+    const organization = OrganizationFixture();
+    const project = ProjectFixture();
+
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/events/`,
+      body: {
+        data: [
+          {
+            project: project.slug,
+            span_id: '123',
+            'span.description': 'SELECT * FROM users',
+          },
+        ],
+      },
+    });
+  });
+
+  afterEach(() => {
+    MockApiClient.clearMockResponses();
+  });
+
+  it('renders a span', () => {
+    const span = {
+      id: '123',
+      ['span.op']: 'span_op',
+      ['span.description']: 'span_description',
+      ['span.group']: 'span_group',
+      ['span.category']: 'span_category',
+    };
+    render(<DetailsWidgetVisualization span={span} />);
+    expect(
+      screen.getByText(`${span['span.op']} - ${span['span.description']}`)
+    ).toBeInTheDocument();
+  });
+
+  it('renders a db span', async () => {
+    const span = {
+      id: '123',
+      ['span.op']: 'db',
+      ['span.description']: 'SELECT * FROM users',
+      ['span.group']: 'span_group',
+      ['span.category']: 'db',
+    };
+    render(<DetailsWidgetVisualization span={span} />);
+
+    await waitForElementToBeRemoved(() => screen.queryByTestId('loading-indicator'));
+
+    const queryCodeSnippet = await screen.findByText(/select \* from users/i);
+    expect(queryCodeSnippet).toBeInTheDocument();
+    expect(queryCodeSnippet).toHaveClass('language-sql');
+  });
+});

From 24b262d457f6cd4f489fafbc0aea26792b85a258 Mon Sep 17 00:00:00 2001
From: Dominik Buszowiecki <DominikB2014@gmail.com>
Date: Wed, 26 Nov 2025 14:12:21 -0500
Subject: [PATCH 6/7] code review

---
 .../views/dashboards/widgetBuilder/components/typeSelector.tsx  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/static/app/views/dashboards/widgetBuilder/components/typeSelector.tsx b/static/app/views/dashboards/widgetBuilder/components/typeSelector.tsx
index 928e22c5ae8aa3..b060fb2a2ca2fe 100644
--- a/static/app/views/dashboards/widgetBuilder/components/typeSelector.tsx
+++ b/static/app/views/dashboards/widgetBuilder/components/typeSelector.tsx
@@ -49,6 +49,8 @@ function WidgetBuilderTypeSelector({error, setError}: WidgetBuilderTypeSelectorP
 
   if (organization.features.includes('dashboards-details-widget')) {
     displayTypes[DisplayType.DETAILS] = t('Details');
+  } else {
+    delete displayTypes[DisplayType.DETAILS];
   }
 
   return (

From 289562b68ae0ad85479ec88be9177a3ee6a5c998 Mon Sep 17 00:00:00 2001
From: Dominik Buszowiecki <DominikB2014@gmail.com>
Date: Thu, 27 Nov 2025 12:05:58 -0500
Subject: [PATCH 7/7] code review

---
 .../dashboards/widgetBuilder/components/typeSelector.tsx   | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/static/app/views/dashboards/widgetBuilder/components/typeSelector.tsx b/static/app/views/dashboards/widgetBuilder/components/typeSelector.tsx
index b060fb2a2ca2fe..79a6f56e71fa48 100644
--- a/static/app/views/dashboards/widgetBuilder/components/typeSelector.tsx
+++ b/static/app/views/dashboards/widgetBuilder/components/typeSelector.tsx
@@ -27,13 +27,13 @@ const typeIcons = {
   [DisplayType.DETAILS]: <IconSettings key="details" />,
 };
 
-const displayTypes: Partial<Record<DisplayType, string>> = {
+const BASE_DISPLAY_TYPES: Partial<Record<DisplayType, string>> = {
   [DisplayType.AREA]: t('Area'),
   [DisplayType.BAR]: t('Bar'),
   [DisplayType.LINE]: t('Line'),
   [DisplayType.TABLE]: t('Table'),
   [DisplayType.BIG_NUMBER]: t('Big Number'),
-};
+} as const;
 
 interface WidgetBuilderTypeSelectorProps {
   error?: Record<string, any>;
@@ -47,10 +47,9 @@ function WidgetBuilderTypeSelector({error, setError}: WidgetBuilderTypeSelectorP
   const isEditing = useIsEditingWidget();
   const organization = useOrganization();
 
+  const displayTypes = {...BASE_DISPLAY_TYPES};
   if (organization.features.includes('dashboards-details-widget')) {
     displayTypes[DisplayType.DETAILS] = t('Details');
-  } else {
-    delete displayTypes[DisplayType.DETAILS];
   }
 
   return (