feat(multi-query): Add charts and tables to multi query mode

static/app/views/explore/multiQueryMode/components/miniTable.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import {Body, Grid} from 'sentry/components/gridEditable/styles';
+
+interface TableProps extends React.ComponentProps<typeof _TableWrapper> {}
+
+export const Table = React.forwardRef<HTMLTableElement, TableProps>(
+  ({children, styles, ...props}, ref) => (
+    <_TableWrapper {...props}>
+      <_Table
+        ref={ref}
+        style={styles}
+        scrollable={props.scrollable}
+        height={props.height}
+      >
+        {children}
+      </_Table>
+    </_TableWrapper>
+  )
+);
+
+const _TableWrapper = styled(Body)`
+  overflow-x: hidden;
+`;
+
+const _Table = styled(Grid)<{height?: string | number; scrollable?: boolean}>`
+  ${p =>
+    p.scrollable &&
+    `
+  overflow-x: scroll;
+  overflow-y: scroll;
+  `}
+`;

static/app/views/explore/multiQueryMode/content.spec.tsx

@@ -1,25 +1,64 @@
-import {OrganizationFixture} from 'sentry-fixture/organization';
-
-import {render, screen, userEvent, within} from 'sentry-test/reactTestingLibrary';
+import {initializeOrg} from 'sentry-test/initializeOrg';
+import {
+  render,
+  screen,
+  userEvent,
+  waitFor,
+  within,
+} from 'sentry-test/reactTestingLibrary';
 
+import PageFiltersStore from 'sentry/stores/pageFiltersStore';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {PageParamsProvider} from 'sentry/views/explore/contexts/pageParamsContext';
 import {SpanTagsProvider} from 'sentry/views/explore/contexts/spanTagsContext';
 import {MultiQueryModeContent} from 'sentry/views/explore/multiQueryMode/content';
 import {useReadQueriesFromLocation} from 'sentry/views/explore/multiQueryMode/locationUtils';
 
 describe('MultiQueryModeContent', function () {
-  const organization = OrganizationFixture();
+  const {organization, project} = initializeOrg({
+    organization: {
+      features: ['visibility-explore-rpc'],
+    },
+  });
+  let eventsRequest: any;
+  let eventsStatsRequest: any;
 
   beforeEach(function () {
     // without this the `CompactSelect` component errors with a bunch of async updates
     jest.spyOn(console, 'error').mockImplementation();
 
+    MockApiClient.clearMockResponses();
+
+    PageFiltersStore.init();
+    PageFiltersStore.onInitializeUrlState(
+      {
+        projects: [project].map(p => parseInt(p.id, 10)),
+        environments: [],
+        datetime: {
+          period: '7d',
+          start: null,
+          end: null,
+          utc: null,
+        },
+      },
+      new Set()
+    );
+
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/spans/fields/`,
       method: 'GET',
       body: [{key: 'span.op', name: 'span.op'}],
     });
+    eventsRequest = MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/events/`,
+      method: 'GET',
+      body: {},
+    });
+    eventsStatsRequest = MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/events-stats/`,
+      method: 'GET',
+      body: {},
+    });
   });
 
   it('updates visualization and outdated sorts', async function () {
@@ -286,4 +325,212 @@ describe('MultiQueryModeContent', function () {
       },
     ]);
   });
+
+  it('calls events and stats APIs', async function () {
+    let queries: any;
+    function Component() {
+      queries = useReadQueriesFromLocation();
+      return <MultiQueryModeContent />;
+    }
+
+    render(
+      <PageParamsProvider>
+        <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP} enabled>
+          <Component />
+        </SpanTagsProvider>
+      </PageParamsProvider>,
+      {disableRouterMocks: true}
+    );
+
+    expect(queries).toEqual([
+      {
+        chartType: 1,
+        yAxes: ['avg(span.duration)'],
+        sortBys: [
+          {
+            field: 'span.duration',
+            kind: 'desc',
+          },
+        ],
+        fields: ['id', 'span.duration'],
+        groupBys: [],
+        query: '',
+      },
+    ]);
+
+    const section = screen.getByTestId('section-group-by-0');
+    await userEvent.click(within(section).getByRole('button', {name: 'None'}));
+    await userEvent.click(within(section).getByRole('option', {name: 'span.op'}));
+
+    await waitFor(() =>
+      expect(eventsStatsRequest).toHaveBeenNthCalledWith(
+        1,
+        `/organizations/${organization.slug}/events-stats/`,
+        expect.objectContaining({
+          query: expect.objectContaining({
+            dataset: 'spans',
+            field: [],
+            interval: '30m',
+            orderby: undefined,
+            project: ['2'],
+            query: '!transaction.span_id:00',
+            referrer: 'api.explorer.stats',
+            statsPeriod: '7d',
+            topEvents: undefined,
+            useRpc: '1',
+            yAxis: 'avg(span.duration)',
+          }),
+        })
+      )
+    );
+    await waitFor(() =>
+      expect(eventsRequest).toHaveBeenNthCalledWith(
+        1,
+        `/organizations/${organization.slug}/events/`,
+        expect.objectContaining({
+          query: expect.objectContaining({
+            dataset: 'spans',
+            environment: [],
+            field: [
+              'id',
+              'span.duration',
+              'transaction.span_id',
+              'trace',
+              'project',
+              'timestamp',
+            ],
+            per_page: 10,
+            project: ['2'],
+            query: '!transaction.span_id:00',
+            referrer: 'api.explore.multi-query-spans-table',
+            sort: '-span.duration',
+            statsPeriod: '7d',
+            useRpc: '1',
+          }),
+        })
+      )
+    );
+
+    // group by requests
+    await waitFor(() =>
+      expect(eventsStatsRequest).toHaveBeenNthCalledWith(
+        2,
+        `/organizations/${organization.slug}/events-stats/`,
+        expect.objectContaining({
+          query: expect.objectContaining({
+            dataset: 'spans',
+            excludeOther: 0,
+            field: ['span.op', 'avg(span.duration)'],
+            interval: '30m',
+            orderby: '-avg_span_duration',
+            project: ['2'],
+            query: '!transaction.span_id:00',
+            referrer: 'api.explorer.stats',
+            sort: '-avg_span_duration',
+            statsPeriod: '7d',
+            topEvents: '5',
+            useRpc: '1',
+            yAxis: 'avg(span.duration)',
+          }),
+        })
+      )
+    );
+    await waitFor(() =>
+      expect(eventsRequest).toHaveBeenNthCalledWith(
+        2,
+        `/organizations/${organization.slug}/events/`,
+        expect.objectContaining({
+          query: expect.objectContaining({
+            dataset: 'spans',
+            environment: [],
+            field: ['span.op', 'avg(span.duration)'],
+            per_page: 10,
+            project: ['2'],
+            query: '!transaction.span_id:00',
+            referrer: 'api.explore.multi-query-spans-table',
+            sort: '-avg_span_duration',
+            statsPeriod: '7d',
+            useRpc: '1',
+          }),
+        })
+      )
+    );
+  });
+
+  it('unstacking group by puts you in sample mode', async function () {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/events/`,
+      method: 'GET',
+      body: {
+        data: [
+          {
+            'span.op': 'POST',
+            'avg(span.duration)': 147.02002059925093,
+          },
+          {
+            'span.op': 'GET',
+            'avg(span.duration)': 1.9993342331511974,
+          },
+        ],
+      },
+      match: [
+        function (_url: string, options: Record<string, any>) {
+          return options.query.field.includes('span.op');
+        },
+      ],
+    });
+
+    let queries: any;
+    function Component() {
+      queries = useReadQueriesFromLocation();
+      return <MultiQueryModeContent />;
+    }
+
+    render(
+      <PageParamsProvider>
+        <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP} enabled>
+          <Component />
+        </SpanTagsProvider>
+      </PageParamsProvider>,
+      {disableRouterMocks: true}
+    );
+
+    expect(queries).toEqual([
+      {
+        chartType: 1,
+        yAxes: ['avg(span.duration)'],
+        sortBys: [
+          {
+            field: 'span.duration',
+            kind: 'desc',
+          },
+        ],
+        fields: ['id', 'span.duration'],
+        groupBys: [],
+        query: '',
+      },
+    ]);
+
+    const section = screen.getByTestId('section-group-by-0');
+    await userEvent.click(within(section).getByRole('button', {name: 'None'}));
+    await userEvent.click(within(section).getByRole('option', {name: 'span.op'}));
+
+    await userEvent.click(screen.getAllByTestId('unstack-link')[0]!);
+
+    expect(queries).toEqual([
+      {
+        chartType: 1,
+        yAxes: ['avg(span.duration)'],
+        sortBys: [
+          {
+            field: 'id',
+            kind: 'desc',
+          },
+        ],
+        fields: ['id', 'span.duration'],
+        groupBys: [],
+        query: 'span.op:POST',
+      },
+    ]);
+  });
 });

static/app/views/explore/multiQueryMode/content.tsx

@@ -9,6 +9,7 @@ import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilt
 import {IconAdd} from 'sentry/icons/iconAdd';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {WidgetSyncContextProvider} from 'sentry/views/dashboards/contexts/widgetSyncContext';
 import {useExploreDataset} from 'sentry/views/explore/contexts/pageParamsContext';
 import {SpanTagsProvider} from 'sentry/views/explore/contexts/spanTagsContext';
 import {
@@ -20,7 +21,7 @@ import {QueryRow} from 'sentry/views/explore/multiQueryMode/queryRow';
 function Content() {
   const queries = useReadQueriesFromLocation();
   const addQuery = useAddQuery();
-  const disableDelete = queries.length === 1;
+  const totalQueryRows = queries.length;
   return (
     <Layout.Body>
       <Layout.Main fullWidth>
@@ -29,14 +30,16 @@ function Content() {
           <EnvironmentPageFilter />
           <DatePageFilter />
         </StyledPageFilterBar>
-        {queries.map((query, index) => (
-          <QueryRow
-            key={index}
-            query={query}
-            index={index}
-            disableDelete={disableDelete}
-          />
-        ))}
+        <WidgetSyncContextProvider>
+          {queries.map((query, index) => (
+            <QueryRow
+              key={index}
+              query={query}
+              index={index}
+              totalQueryRows={totalQueryRows}
+            />
+          ))}
+        </WidgetSyncContextProvider>
         <Button
           aria-label={t('Add Query')}
           onClick={addQuery}