fix(explore): Always render column for incomplete equations (#94918)

Zylphrex · web-flow · commit 109aeca0377c · 2025-07-04T14:50:28.000-04:00
When there are incomplete equations, we should still render a
placeholder column for it to avoid the situation where the column
appears/disappears based on the equation being complete or not.
diff --git a/static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx b/static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx
@@ -191,7 +191,7 @@ function AggregatesTable({
                       <TableBodyCell key={j}>
                         <MultiQueryFieldRenderer
                           index={index}
-                          column={columns[j]!}
+                          column={columns[j]}
                           data={row}
                           unit={meta?.units?.[field]}
                           meta={meta}
@@ -298,7 +298,7 @@ function SpansTable({spansTableResult, query: queryParts, index}: SampleTablePro
                     <TableBodyCell key={j}>
                       <MultiQueryFieldRenderer
                         index={index}
-                        column={columnsFromEventView[j]!}
+                        column={columnsFromEventView[j]}
                         data={row}
                         unit={meta?.units?.[field]}
                         meta={meta}
diff --git a/static/app/views/explore/tables/aggregateColumnEditorModal.tsx b/static/app/views/explore/tables/aggregateColumnEditorModal.tsx
@@ -79,16 +79,7 @@ export function AggregateColumnEditorModal({
   }, [columns]);
 
   const handleApply = useCallback(() => {
-    onColumnsChange(
-      tempColumns
-        .filter(col => {
-          if (isVisualize(col)) {
-            return col.isValid();
-          }
-          return true;
-        })
-        .map(col => (isVisualize(col) ? col.toJSON() : col))
-    );
+    onColumnsChange(tempColumns.map(col => (isVisualize(col) ? col.toJSON() : col)));
     closeModal();
   }, [closeModal, onColumnsChange, tempColumns]);
 
diff --git a/static/app/views/explore/tables/aggregatesTable.tsx b/static/app/views/explore/tables/aggregatesTable.tsx
@@ -103,23 +103,14 @@ export function AggregatesTable({aggregatesTableResult}: AggregatesTableProps) {
   );
 
   const columns = useMemo(() => {
-    const cols = eventView.getColumns().reduce(
+    return eventView.getColumns().reduce(
       (acc, col) => {
         acc[col.key] = col;
         return acc;
       },
       {} as Record<string, TableColumn<string>>
     );
-
-    return visibleAggregateFields
-      .map(aggregateField => {
-        const key = isGroupBy(aggregateField)
-          ? aggregateField.groupBy
-          : aggregateField.yAxis;
-        return cols[key];
-      })
-      .filter(defined);
-  }, [visibleAggregateFields, eventView]);
+  }, [eventView]);
 
   return (
     <Fragment>
@@ -129,21 +120,25 @@ export function AggregatesTable({aggregatesTableResult}: AggregatesTableProps) {
             <TableHeadCell isFirst={false}>
               <TableHeadCellContent />
             </TableHeadCell>
-            {columns.map((column, i) => {
+            {visibleAggregateFields.map((aggregateField, i) => {
               // Hide column names before alignment is determined
               if (result.isPending) {
                 return <TableHeadCell key={i} isFirst={i === 0} />;
               }
 
-              const fieldType = meta.fields?.[column.key];
-              const align = fieldAlignment(column.key, fieldType);
-              const label = prettifyField(column.key, stringTags, numberTags);
+              const field = isGroupBy(aggregateField)
+                ? aggregateField.groupBy
+                : aggregateField.yAxis;
+
+              const fieldType = meta.fields?.[field];
+              const align = fieldAlignment(field, fieldType);
+              const label = prettifyField(field, stringTags, numberTags);
 
-              const direction = sorts.find(s => s.field === column.key)?.kind;
+              const direction = sorts.find(s => s.field === field)?.kind;
 
               function updateSort() {
                 const kind = direction === 'desc' ? 'asc' : 'desc';
-                setSorts([{field: column.key, kind}]);
+                setSorts([{field, kind}]);
               }
 
               return (
@@ -165,7 +160,7 @@ export function AggregatesTable({aggregatesTableResult}: AggregatesTableProps) {
                       />
                     )}
                   </TableHeadCellContent>
-                  {i !== columns.length - 1 && (
+                  {i !== visibleAggregateFields.length - 1 && (
                     <GridResizer
                       dataRows={
                         !result.isError && !result.isPending && result.data
@@ -213,13 +208,17 @@ export function AggregatesTable({aggregatesTableResult}: AggregatesTableProps) {
                       </StyledLink>
                     </Tooltip>
                   </TableBodyCell>
-                  {columns.map((column, j) => {
+                  {visibleAggregateFields.map((aggregateField, j) => {
+                    const field = isGroupBy(aggregateField)
+                      ? aggregateField.groupBy
+                      : aggregateField.yAxis;
+
                     return (
                       <TableBodyCell key={j}>
                         <FieldRenderer
-                          column={column}
+                          column={columns[field]}
                           data={row}
-                          unit={meta?.units?.[column.key]}
+                          unit={meta?.units?.[field]}
                           meta={meta}
                         />
                       </TableBodyCell>
diff --git a/static/app/views/explore/tables/fieldRenderer.spec.tsx b/static/app/views/explore/tables/fieldRenderer.spec.tsx
@@ -46,7 +46,7 @@ describe('FieldRenderer tests', function () {
   it('renders span.op', function () {
     render(
       <FieldRenderer
-        column={eventView.getColumns()[3]!}
+        column={eventView.getColumns()[3]}
         data={mockedEventData}
         meta={{}}
       />,
@@ -59,7 +59,7 @@ describe('FieldRenderer tests', function () {
   it('renders span id link to traceview', function () {
     render(
       <FieldRenderer
-        column={eventView.getColumns()[0]!}
+        column={eventView.getColumns()[0]}
         data={mockedEventData}
         meta={{}}
       />,
@@ -76,7 +76,7 @@ describe('FieldRenderer tests', function () {
   it('renders transaction id link to traceview', function () {
     render(
       <FieldRenderer
-        column={eventView.getColumns()[4]!}
+        column={eventView.getColumns()[4]}
         data={mockedEventData}
         meta={{}}
       />,
@@ -93,7 +93,7 @@ describe('FieldRenderer tests', function () {
   it('renders trace id link to traceview', function () {
     render(
       <FieldRenderer
-        column={eventView.getColumns()[2]!}
+        column={eventView.getColumns()[2]}
         data={mockedEventData}
         meta={{}}
       />,
@@ -110,7 +110,7 @@ describe('FieldRenderer tests', function () {
   it('renders timestamp', function () {
     render(
       <FieldRenderer
-        column={eventView.getColumns()[1]!}
+        column={eventView.getColumns()[1]}
         data={mockedEventData}
         meta={{}}
       />,
diff --git a/static/app/views/explore/tables/fieldRenderer.tsx b/static/app/views/explore/tables/fieldRenderer.tsx
@@ -9,6 +9,7 @@ import ExternalLink from 'sentry/components/links/externalLink';
 import TimeSince from 'sentry/components/timeSince';
 import {space} from 'sentry/styles/space';
 import type {Project} from 'sentry/types/project';
+import {defined} from 'sentry/utils';
 import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import type {EventData, MetaType} from 'sentry/utils/discover/eventView';
 import EventView from 'sentry/utils/discover/eventView';
@@ -37,9 +38,9 @@ import {TraceViewSources} from 'sentry/views/performance/newTraceDetails/traceHe
 import {getTraceDetailsUrl} from 'sentry/views/performance/traceDetails/utils';
 
 interface FieldProps {
-  column: TableColumn<keyof TableDataRow>;
   data: EventData;
   meta: MetaType;
+  column?: TableColumn<keyof TableDataRow>;
   unit?: string;
 }
 
@@ -104,7 +105,6 @@ function BaseExploreFieldRenderer({
   const theme = useTheme();
   const dateSelection = EventView.fromLocation(location).normalizeDateSelection(location);
   const query = new MutableSearch(userQuery);
-  const field = String(column.key);
   const {projects} = useProjects();
   const projectsMap = useMemo(() => {
     return projects.reduce(
@@ -116,6 +116,12 @@ function BaseExploreFieldRenderer({
     );
   }, [projects]);
 
+  if (!defined(column)) {
+    return nullableValue(null);
+  }
+
+  const field = String(column.key);
+
   const renderer = getExploreFieldRenderer(field, meta, projectsMap);
 
   let rendered = renderer(data, {
diff --git a/static/app/views/explore/tables/spansTable.tsx b/static/app/views/explore/tables/spansTable.tsx
@@ -142,7 +142,7 @@ export function SpansTable({spansTableResult}: SpansTableProps) {
                   return (
                     <TableBodyCell key={j}>
                       <FieldRenderer
-                        column={columnsFromEventView[j]!}
+                        column={columnsFromEventView[j]}
                         data={row}
                         unit={meta?.units?.[field]}
                         meta={meta}
