feat(tracemetrics): Add panel switcher for orientation and hiding tables (#102496)

Adds a panel switcher that can be used to change the table orientation
from the right side or below the chart. If the screen is sufficiently
small, we'll also force the orientation into a stacked orientation to
save space. Also adds a button that can be used to hide the table.

This PR does not currently commit the changes to the URL but I will
follow up with a PR to add that.

Author: narsaynorath

static/app/views/dashboards/widgets/widget/widget.tsx

@@ -181,7 +181,7 @@ const VisualizationWrapper = styled('div')<{noPadding?: boolean}>`
   padding: ${p => (p.noPadding ? 0 : `0 ${X_GUTTER} ${Y_GUTTER} ${X_GUTTER}`)};
 `;
 
-const FooterWrapper = styled('div')<{noPadding?: boolean}>`
+export const FooterWrapper = styled('div')<{noPadding?: boolean}>`
   margin: 0;
   border-top: 1px solid ${p => p.theme.border};
   padding: ${p => (p.noPadding ? 0 : `${space(1)} ${X_GUTTER} ${space(1)} ${X_GUTTER}`)};

static/app/views/explore/metrics/hooks/useOrientationControl.tsx

@@ -0,0 +1,26 @@
+import {useState} from 'react';
+
+import {useBreakpoints} from 'sentry/utils/useBreakpoints';
+
+export type TableOrientation = 'right' | 'bottom';
+
+export function useTableOrientationControl(): {
+  canChangeOrientation: boolean;
+  orientation: TableOrientation;
+  setOrientation: (orientation: TableOrientation) => void;
+  userPreferenceOrientation: TableOrientation;
+} {
+  const breakpoints = useBreakpoints();
+  const [userPreference, setUserPreference] = useState<TableOrientation>('right');
+
+  // Derive the actual orientation based on screen size
+  const effectiveOrientation = breakpoints.md ? userPreference : 'bottom';
+  const canChangeOrientation = breakpoints.md;
+
+  return {
+    orientation: effectiveOrientation,
+    userPreferenceOrientation: userPreference,
+    setOrientation: setUserPreference,
+    canChangeOrientation,
+  };
+}

static/app/views/explore/metrics/metricGraph.tsx renamed to static/app/views/explore/metrics/metricGraph/index.tsx

@@ -11,6 +11,7 @@ import {ChartVisualization} from 'sentry/views/explore/components/chart/chartVis
 import {useChartInterval} from 'sentry/views/explore/hooks/useChartInterval';
 import {TOP_EVENTS_LIMIT} from 'sentry/views/explore/hooks/useTopEvents';
 import {ConfidenceFooter} from 'sentry/views/explore/metrics/confidenceFooter';
+import type {TableOrientation} from 'sentry/views/explore/metrics/hooks/useOrientationControl';
 import {
   useMetricLabel,
   useMetricVisualize,
@@ -29,12 +30,26 @@ import {
 import {ChartType} from 'sentry/views/insights/common/components/chart';
 import type {useSortedTimeSeries} from 'sentry/views/insights/common/queries/useSortedTimeSeries';
 
+import {WidgetWrapper} from './styles';
+
+const MINIMIZED_GRAPH_HEIGHT = 50;
+const STACKED_GRAPH_HEIGHT = 362;
+
 interface MetricsGraphProps {
+  orientation: TableOrientation;
   queryIndex: number;
   timeseriesResult: ReturnType<typeof useSortedTimeSeries>;
+  additionalActions?: React.ReactNode;
+  infoContentHidden?: boolean;
 }
 
-export function MetricsGraph({timeseriesResult, queryIndex}: MetricsGraphProps) {
+export function MetricsGraph({
+  timeseriesResult,
+  queryIndex,
+  orientation,
+  additionalActions,
+  infoContentHidden,
+}: MetricsGraphProps) {
   const visualize = useMetricVisualize();
   const setVisualize = useSetMetricVisualize();
 
@@ -48,6 +63,9 @@ export function MetricsGraph({timeseriesResult, queryIndex}: MetricsGraphProps)
       timeseriesResult={timeseriesResult}
       onChartTypeChange={handleChartTypeChange}
       queryIndex={queryIndex}
+      orientation={orientation}
+      additionalActions={additionalActions}
+      infoContentHidden={infoContentHidden}
     />
   );
 }
@@ -58,7 +76,15 @@ interface GraphProps extends MetricsGraphProps {
   visualize: ReturnType<typeof useMetricVisualize>;
 }
 
-function Graph({onChartTypeChange, timeseriesResult, queryIndex, visualize}: GraphProps) {
+function Graph({
+  onChartTypeChange,
+  timeseriesResult,
+  queryIndex,
+  orientation,
+  visualize,
+  infoContentHidden,
+  additionalActions,
+}: GraphProps) {
   const aggregate = visualize.yAxis;
   const topEventsLimit = useQueryParamsTopEventsLimit();
   const metricLabel = useMetricLabel();
@@ -126,26 +152,35 @@ function Graph({onChartTypeChange, timeseriesResult, queryIndex, visualize}: Gra
           options={intervalOptions}
         />
       </Tooltip>
+      {additionalActions}
     </Fragment>
   );
 
   return (
-    <Widget
-      Title={Title}
-      Actions={Actions}
-      Visualization={visualize.visible && <ChartVisualization chartInfo={chartInfo} />}
-      Footer={
-        visualize.visible && (
-          <ConfidenceFooter
-            chartInfo={chartInfo}
-            isLoading={timeseriesResult.isFetching}
-            hasUserQuery={!!userQuery}
-          />
-        )
-      }
-      height={visualize.visible ? undefined : 0}
-      revealActions="always"
-      borderless
-    />
+    <WidgetWrapper hideFooterBorder={orientation === 'bottom'}>
+      <Widget
+        Title={Title}
+        Actions={Actions}
+        Visualization={visualize.visible && <ChartVisualization chartInfo={chartInfo} />}
+        Footer={
+          visualize.visible && (
+            <ConfidenceFooter
+              chartInfo={chartInfo}
+              isLoading={timeseriesResult.isFetching}
+              hasUserQuery={!!userQuery}
+            />
+          )
+        }
+        height={
+          visualize.visible
+            ? orientation === 'bottom' || infoContentHidden
+              ? STACKED_GRAPH_HEIGHT
+              : undefined
+            : MINIMIZED_GRAPH_HEIGHT
+        }
+        revealActions="always"
+        borderless
+      />
+    </WidgetWrapper>
   );
 }

static/app/views/explore/metrics/metricGraph/styles.tsx

@@ -0,0 +1,18 @@
+import {css} from '@emotion/react';
+import styled from '@emotion/styled';
+
+import {FooterWrapper} from 'sentry/views/dashboards/widgets/widget/widget';
+
+// hideFooterBorder is used to hide the top border of the footer when
+// the aggregates/samples tables are on the bottom. This is so the footer
+// maintains its visual relationship with the graph and not the tables.
+export const WidgetWrapper = styled('div')<{hideFooterBorder?: boolean}>`
+  height: 100%;
+  ${p =>
+    p.hideFooterBorder &&
+    css`
+      ${FooterWrapper} {
+        border-top: none;
+      }
+    `}
+`;

static/app/views/explore/metrics/metricInfoTabs/index.tsx

@@ -1,9 +1,14 @@
-import styled from '@emotion/styled';
+import {Flex} from '@sentry/scraps/layout';
 
 import {TabList, TabPanels, TabStateProvider} from 'sentry/components/core/tabs';
 import {t} from 'sentry/locale';
+import type {TableOrientation} from 'sentry/views/explore/metrics/hooks/useOrientationControl';
 import {AggregatesTab} from 'sentry/views/explore/metrics/metricInfoTabs/aggregatesTab';
-import {TabListWrapper} from 'sentry/views/explore/metrics/metricInfoTabs/metricInfoTabStyles';
+import {
+  BodyContainer,
+  StyledTabPanels,
+  TabListWrapper,
+} from 'sentry/views/explore/metrics/metricInfoTabs/metricInfoTabStyles';
 import {SamplesTab} from 'sentry/views/explore/metrics/metricInfoTabs/samplesTab';
 import type {TraceMetric} from 'sentry/views/explore/metrics/metricQuery';
 import {useMetricVisualize} from 'sentry/views/explore/metrics/metricsQueryParams';
@@ -14,10 +19,18 @@ import {
 import {Mode} from 'sentry/views/explore/queryParams/mode';
 
 interface MetricInfoTabsProps {
+  orientation: TableOrientation;
   traceMetric: TraceMetric;
+  additionalActions?: React.ReactNode;
+  contentsHidden?: boolean;
 }
 
-export default function MetricInfoTabs({traceMetric}: MetricInfoTabsProps) {
+export default function MetricInfoTabs({
+  traceMetric,
+  additionalActions,
+  contentsHidden,
+  orientation,
+}: MetricInfoTabsProps) {
   const visualize = useMetricVisualize();
   const queryParamsMode = useQueryParamsMode();
   const setAggregatesMode = useSetQueryParamsMode();
@@ -29,14 +42,22 @@ export default function MetricInfoTabs({traceMetric}: MetricInfoTabsProps) {
       }}
       size="xs"
     >
-      <TabListWrapper>
-        <TabList>
-          <TabList.Item key={Mode.AGGREGATE}>{t('Aggregates')}</TabList.Item>
-          <TabList.Item key={Mode.SAMPLES}>{t('Samples')}</TabList.Item>
-        </TabList>
-      </TabListWrapper>
-
-      {visualize.visible && (
+      {(orientation === 'right' || visualize.visible) && (
+        <Flex direction="row" justify="between" align="center" paddingRight="xl">
+          <TabListWrapper orientation={orientation}>
+            <TabList>
+              <TabList.Item key={Mode.AGGREGATE} disabled={contentsHidden}>
+                {t('Aggregates')}
+              </TabList.Item>
+              <TabList.Item key={Mode.SAMPLES} disabled={contentsHidden}>
+                {t('Samples')}
+              </TabList.Item>
+            </TabList>
+          </TabListWrapper>
+          {additionalActions}
+        </Flex>
+      )}
+      {visualize.visible && !contentsHidden && (
         <BodyContainer>
           <StyledTabPanels>
             <TabPanels.Item key={Mode.AGGREGATE}>
@@ -51,14 +72,3 @@ export default function MetricInfoTabs({traceMetric}: MetricInfoTabsProps) {
     </TabStateProvider>
   );
 }
-
-const BodyContainer = styled('div')`
-  padding: ${p => p.theme.space.md};
-  padding-top: 0;
-  height: 320px;
-  container-type: inline-size;
-`;
-
-const StyledTabPanels = styled(TabPanels)`
-  overflow: auto;
-`;

static/app/views/explore/metrics/metricInfoTabs/metricInfoTabStyles.tsx

@@ -1,12 +1,24 @@
+import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {TabPanels} from '@sentry/scraps/tabs';
+
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {TopResultsIndicator} from 'sentry/views/discover/table/topResultsIndicator';
 import {DetailsWrapper} from 'sentry/views/explore/logs/styles';
+import type {TableOrientation} from 'sentry/views/explore/metrics/hooks/useOrientationControl';
 import {StyledPanel} from 'sentry/views/explore/tables/tracesTable/styles';
 
-export const TabListWrapper = styled('div')`
-  padding-top: ${p => p.theme.space.sm};
+export const TabListWrapper = styled('div')<{orientation: TableOrientation}>`
+  padding-top: 10px;
+  width: 100%;
+
+  ${p =>
+    p.orientation === 'bottom' &&
+    css`
+      padding-top: 0;
+      padding-bottom: 1px;
+    `}
 `;
 
 export const StyledTopResultsIndicator = styled(TopResultsIndicator)``;
@@ -105,3 +117,14 @@ export const NumericSimpleTableHeaderCell = styled(StyledSimpleTableHeaderCell)`
 export const NumericSimpleTableRowCell = styled(StyledSimpleTableRowCell)`
   justify-content: flex-end;
 `;
+
+export const BodyContainer = styled('div')`
+  padding: ${p => p.theme.space.md};
+  padding-top: 0;
+  height: 320px;
+  container-type: inline-size;
+`;
+
+export const StyledTabPanels = styled(TabPanels)`
+  overflow: auto;
+`;

static/app/views/explore/metrics/metricPanel.tsx

@@ -0,0 +1,31 @@
+import {Button} from '@sentry/scraps/button';
+
+import {t} from 'sentry/locale';
+import type {TableOrientation} from 'sentry/views/explore/metrics/hooks/useOrientationControl';
+import {HIDE_BUTTONS_BY_ORIENTATION} from 'sentry/views/explore/metrics/metricPanel/utils';
+
+interface HideContentButtonProps {
+  infoContentHidden: boolean;
+  onToggle: () => void;
+  orientation: TableOrientation;
+}
+
+export function HideContentButton({
+  orientation,
+  infoContentHidden,
+  onToggle,
+}: HideContentButtonProps) {
+  const {IconShow, IconHide} = HIDE_BUTTONS_BY_ORIENTATION[orientation];
+  const Icon = infoContentHidden ? IconShow : IconHide;
+
+  return (
+    <Button
+      size="zero"
+      borderless
+      aria-label={infoContentHidden ? t('Show Table') : t('Hide Table')}
+      icon={<Icon />}
+      onClick={onToggle}
+      title={infoContentHidden ? t('Show Table') : t('Hide Table')}
+    />
+  );
+}