fix(starfish): Remove comparison view from span summary (#49213)

We don't have a strong use case for it yet.

static/app/views/starfish/views/spanSummary/eventComparisonView.tsx

@@ -1,113 +0,0 @@
-import styled from '@emotion/styled';
-
-import {Button} from 'sentry/components/button';
-import {IconClose} from 'sentry/icons';
-import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
-import {useQuery} from 'sentry/utils/queryClient';
-import SpanTree from 'sentry/views/starfish/views/spanSummary/compare/spanTree';
-
-type Props = {
-  clearLeft: () => void;
-  clearRight: () => void;
-  left?: string;
-  right?: string;
-};
-
-export function EventComparisonView({left, right, clearLeft, clearRight}: Props) {
-  const {isLoading: _isLoadingLeft, data: leftData} = useQuery({
-    queryKey: [left],
-    queryFn: () =>
-      left &&
-      fetch(`/api/0/organizations/sentry/events/sentry:${left}/`).then(res => res.json()),
-    retry: false,
-    initialData: {},
-  });
-  const {isLoading: _isLoadingRight, data: rightData} = useQuery({
-    queryKey: [right],
-    queryFn: () =>
-      right &&
-      fetch(`/api/0/organizations/sentry/events/sentry:${right}/`).then(res =>
-        res.json()
-      ),
-    retry: false,
-    initialData: {},
-  });
-
-  return (
-    <ComparisonContainer>
-      <EventContainer>
-        <EventHeader>
-          <span>{left}</span>
-          <Button
-            aria-label={t('Close left event preview.')}
-            priority="link"
-            onClick={clearLeft}
-            icon={<IconClose size="sm" />}
-          />
-        </EventHeader>
-        <EventContentContainer>
-          <pre>{JSON.stringify(leftData, null, 4)}</pre>
-        </EventContentContainer>
-      </EventContainer>
-      <EventContainer>
-        <EventHeader>
-          <span>{right}</span>
-          <Button
-            aria-label={t('Close right event preview.')}
-            priority="link"
-            onClick={clearRight}
-            icon={<IconClose size="sm" />}
-          />
-        </EventHeader>
-        <EventContentContainer>
-          <pre>{JSON.stringify(rightData, null, 4)}</pre>
-        </EventContentContainer>
-      </EventContainer>
-      {leftData?.entries && rightData?.entries && (
-        <SpanTreeContainer>
-          <SpanTree baselineEvent={leftData} regressionEvent={rightData} />
-        </SpanTreeContainer>
-      )}
-    </ComparisonContainer>
-  );
-}
-
-const ComparisonContainer = styled('div')`
-  display: flex;
-  flex-direction: row;
-  margin-bottom: ${space(2)};
-  gap: ${space(2)};
-  flex-wrap: wrap;
-`;
-
-const EventContainer = styled('div')`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 500px;
-`;
-
-const EventContentContainer = styled('div')`
-  overflow: auto;
-  max-height: 300px;
-  border: 1px solid ${p => p.theme.border};
-`;
-
-const EventHeader = styled('div')`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  color: ${p => p.theme.gray500};
-  & > button {
-    color: ${p => p.theme.gray500};
-  }
-`;
-
-const SpanTreeContainer = styled('div')`
-  overflow: scroll;
-  flex: 1;
-  min-width: 1000px;
-  max-height: 500px;
-  border: 1px solid ${p => p.theme.border};
-`;

static/app/views/starfish/views/spanSummary/index.tsx

@@ -7,7 +7,6 @@ import keyBy from 'lodash/keyBy';
 import orderBy from 'lodash/orderBy';
 import * as qs from 'query-string';
 
-import {Button} from 'sentry/components/button';
 import DatePageFilter from 'sentry/components/datePageFilter';
 import DateTime from 'sentry/components/dateTime';
 import KeyValueList from 'sentry/components/events/interfaces/keyValueList';
@@ -31,7 +30,6 @@ import {
   getSpanInTransactionQuery,
 } from 'sentry/views/starfish/modules/APIModule/queries';
 import {HOST} from 'sentry/views/starfish/utils/constants';
-import {EventComparisonView} from 'sentry/views/starfish/views/spanSummary/eventComparisonView';
 import MegaChart from 'sentry/views/starfish/views/spanSummary/megaChart';
 import Sidebar from 'sentry/views/starfish/views/spanSummary/sidebar';
 
@@ -68,11 +66,6 @@ const COLUMN_ORDER = [
     name: 'Compared to P50',
     width: 200,
   },
-  {
-    key: 'compare',
-    name: '',
-    width: 50,
-  },
 ];
 
 type SpanTableRow = {
@@ -100,18 +93,14 @@ type Props = {
 } & RouteComponentProps<{groupId: string}, {}>;
 
 type State = {
-  leftComparisonEventId?: string;
   megaChart?: boolean;
   plotSamples?: boolean;
-  rightComparisonEventId?: string;
 };
 
 export default function SpanSummary({location, params}: Props) {
   const [state, setState] = useState<State>({
     plotSamples: false,
     megaChart: false,
-    leftComparisonEventId: undefined,
-    rightComparisonEventId: undefined,
   });
   const pageFilter = usePageFilters();
 
@@ -215,11 +204,7 @@ export default function SpanSummary({location, params}: Props) {
     return <OverflowEllipsisTextContainer>{column.name}</OverflowEllipsisTextContainer>;
   }
 
-  function renderBodyCell(
-    column: GridColumnHeader,
-    row: SpanTableRow,
-    setComparison: (eventId: string) => void
-  ): React.ReactNode {
+  function renderBodyCell(column: GridColumnHeader, row: SpanTableRow): React.ReactNode {
     if (column.key === 'transaction_id') {
       return (
         <Link
@@ -260,18 +245,6 @@ export default function SpanSummary({location, params}: Props) {
       return <DateTime date={row.timestamp} year timeZone seconds />;
     }
 
-    if (column.key === 'compare') {
-      return (
-        <Button
-          onClick={() => {
-            setComparison(row.transaction_id);
-          }}
-        >
-          {t('View')}
-        </Button>
-      );
-    }
-
     return <span>{row[column.key]}</span>;
   }
 
@@ -375,19 +348,6 @@ export default function SpanSummary({location, params}: Props) {
                   </div>
                 )}
 
-                {(state.leftComparisonEventId || state.rightComparisonEventId) && (
-                  <EventComparisonView
-                    left={state.leftComparisonEventId}
-                    right={state.rightComparisonEventId}
-                    clearLeft={() => {
-                      setState({...state, leftComparisonEventId: undefined});
-                    }}
-                    clearRight={() => {
-                      setState({...state, rightComparisonEventId: undefined});
-                    }}
-                  />
-                )}
-
                 {areSpanSamplesLoading ? (
                   <span>LOADING SAMPLE LIST</span>
                 ) : (
@@ -400,20 +360,7 @@ export default function SpanSummary({location, params}: Props) {
                       columnSortBy={[]}
                       grid={{
                         renderHeadCell,
-                        renderBodyCell: (column: GridColumnHeader, row: SpanTableRow) =>
-                          renderBodyCell(column, row, eventId => {
-                            if (state.leftComparisonEventId) {
-                              setState({
-                                ...state,
-                                rightComparisonEventId: eventId,
-                              });
-                            } else {
-                              setState({
-                                ...state,
-                                leftComparisonEventId: eventId,
-                              });
-                            }
-                          }),
+                        renderBodyCell,
                       }}
                       location={location}
                     />