feat(preprod): full-screen treemap (EME-290) (#100926)

Add full screen mode for treemap


https://github.com/user-attachments/assets/f9047cc0-738d-4fe9-8e77-b859a1899080

### Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated
in the State of Delaware in 2015 as Functional Software, Inc. and is
gonna need some rights from me in order to utilize my contributions in
this here PR. So here's the deal: I retain all rights, title and
interest in and to my contributions, and by keeping this boilerplate
intact I confirm that Sentry can use, modify, copy, and redistribute my
contributions, under Sentry's choice of terms.

---------

Co-authored-by: Nico Hinderling <[email protected]>

Author: 2 people

static/app/actionCreators/modal.tsx

@@ -429,11 +429,15 @@ export async function openBulkEditMonitorsModal({onClose, ...options}: ModalOpti
 }
 
 export async function openInsightChartModal(options: InsightChartModalOptions) {
-  const {default: Modal, modalCss} = await import(
-    'sentry/components/modals/insightChartModal'
-  );
+  const {
+    default: Modal,
+    modalCss,
+    fullscreenModalCss,
+  } = await import('sentry/components/modals/insightChartModal');
 
-  openModal(deps => <Modal {...deps} {...options} />, {modalCss});
+  openModal(deps => <Modal {...deps} {...options} />, {
+    modalCss: options.fullscreen ? fullscreenModalCss : modalCss,
+  });
 }
 
 export async function openAddTempestCredentialsModal(options: {

static/app/components/modals/insightChartModal.tsx

@@ -11,6 +11,8 @@ export type InsightChartModalOptions = {
   children: React.ReactNode;
   title: React.ReactNode;
   footer?: React.ReactNode;
+  fullscreen?: boolean;
+  height?: number;
 };
 type Props = ModalRenderProps & InsightChartModalOptions;
 
@@ -20,32 +22,63 @@ export default function InsightChartModal({
   children,
   Footer,
   footer,
+  fullscreen = false,
+  height = 300,
 }: Props) {
   return (
     <Fragment>
-      <Container>
+      <Container fullscreen={fullscreen}>
         <Header closeButton>
           <h3>{title}</h3>
         </Header>
 
-        <ChartRenderingContext value={{height: 300, isFullscreen: true}}>
-          {children}
-        </ChartRenderingContext>
+        <ContentArea fullscreen={fullscreen}>
+          <ChartRenderingContext value={{height, isFullscreen: true}}>
+            {children}
+          </ChartRenderingContext>
+        </ContentArea>
 
         {footer && <Footer>{footer}</Footer>}
       </Container>
     </Fragment>
   );
 }
 
-const Container = styled('div')<{height?: number | null}>`
-  height: ${p => (p.height ? `${p.height}px` : 'auto')};
+const Container = styled('div')<{fullscreen?: boolean; height?: number | null}>`
+  height: ${p =>
+    p.fullscreen ? 'calc(100vh - 80px)' : p.height ? `${p.height}px` : 'auto'};
   position: relative;
   padding-bottom: ${space(3)};
   z-index: 1000;
+  display: flex;
+  flex-direction: column;
+`;
+
+const ContentArea = styled('div')<{fullscreen?: boolean}>`
+  ${p =>
+    p.fullscreen &&
+    `
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  `}
 `;
 
 export const modalCss = css`
   width: 100%;
   max-width: 1200px;
 `;
+
+export const fullscreenModalCss = css`
+  width: calc(100vw - 80px);
+  height: calc(100vh - 80px);
+  max-width: calc(100vw - 80px);
+  max-height: calc(100vh - 80px);
+
+  [role='document'] {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+`;

static/app/views/preprod/buildDetails/main/buildDetailsMainContent.tsx

@@ -256,6 +256,8 @@ export function BuildDetailsMainContent(props: BuildDetailsMainContentProps) {
           <AppSizeTreemap
             root={filteredTreemapData.root}
             searchQuery={searchQuery || ''}
+            unfilteredRoot={appSizeData.treemap.root}
+            onSearchChange={value => setSearchQuery(value || undefined)}
           />
         ) : (
           <Alert type="info">No files found matching "{searchQuery}"</Alert>
@@ -265,7 +267,12 @@ export function BuildDetailsMainContent(props: BuildDetailsMainContentProps) {
       );
   } else {
     visualizationContent = filteredTreemapData ? (
-      <AppSizeTreemap root={filteredTreemapData.root} searchQuery={searchQuery || ''} />
+      <AppSizeTreemap
+        root={filteredTreemapData.root}
+        searchQuery={searchQuery || ''}
+        unfilteredRoot={appSizeData.treemap.root}
+        onSearchChange={value => setSearchQuery(value || undefined)}
+      />
     ) : (
       <Alert type="info">No files found matching "{searchQuery}"</Alert>
     );

static/app/views/preprod/components/visualizations/appSizeTreemap.tsx

@@ -1,22 +1,105 @@
+import {useContext, useRef, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
-import type {TreemapSeriesOption, VisualMapComponentOption} from 'echarts';
+import type {ECharts, TreemapSeriesOption, VisualMapComponentOption} from 'echarts';
 
+import {openInsightChartModal} from 'sentry/actionCreators/modal';
 import BaseChart, {type TooltipOption} from 'sentry/components/charts/baseChart';
+import {Button} from 'sentry/components/core/button';
+import {InputGroup} from 'sentry/components/core/input/inputGroup';
+import {Container, Flex} from 'sentry/components/core/layout';
 import {Heading} from 'sentry/components/core/text';
+import {IconClose, IconContract, IconExpand, IconSearch} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
 import {formatBytesBase10} from 'sentry/utils/bytes/formatBytesBase10';
+import {ChartRenderingContext} from 'sentry/views/insights/common/components/chart';
 import {getAppSizeCategoryInfo} from 'sentry/views/preprod/components/visualizations/appSizeTheme';
 import {TreemapType, type TreemapElement} from 'sentry/views/preprod/types/appSizeTypes';
+import {filterTreemapElement} from 'sentry/views/preprod/utils/treemapFiltering';
 
 interface AppSizeTreemapProps {
   root: TreemapElement | null;
   searchQuery: string;
+  onSearchChange?: (query: string) => void;
+  unfilteredRoot?: TreemapElement;
+}
+
+function FullscreenModalContent({
+  unfilteredRoot,
+  initialSearch,
+  onSearchChange,
+}: {
+  initialSearch: string;
+  unfilteredRoot: TreemapElement;
+  onSearchChange?: (query: string) => void;
+}) {
+  const [localSearch, setLocalSearch] = useState(initialSearch);
+  const filteredRoot = filterTreemapElement(unfilteredRoot, localSearch, '');
+
+  const handleSearchChange = (value: string) => {
+    setLocalSearch(value);
+    onSearchChange?.(value);
+  };
+
+  return (
+    <Flex direction="column" gap="md" height="100%" width="100%">
+      <InputGroup>
+        <InputGroup.LeadingItems>
+          <IconSearch />
+        </InputGroup.LeadingItems>
+        <InputGroup.Input
+          placeholder="Search files"
+          value={localSearch}
+          onChange={e => handleSearchChange(e.target.value)}
+        />
+        {localSearch && (
+          <InputGroup.TrailingItems>
+            <Button
+              onClick={() => handleSearchChange('')}
+              aria-label="Clear search"
+              borderless
+              size="zero"
+            >
+              <IconClose size="sm" />
+            </Button>
+          </InputGroup.TrailingItems>
+        )}
+      </InputGroup>
+      <Container height="100%" width="100%" style={{flex: 1, minHeight: 0}}>
+        <AppSizeTreemap root={filteredRoot} searchQuery={localSearch} />
+      </Container>
+    </Flex>
+  );
 }
 
 export function AppSizeTreemap(props: AppSizeTreemapProps) {
   const theme = useTheme();
-  const {root} = props;
+  const {root, searchQuery, unfilteredRoot, onSearchChange} = props;
   const appSizeCategoryInfo = getAppSizeCategoryInfo(theme);
+  const renderingContext = useContext(ChartRenderingContext);
+  const isFullscreen = renderingContext?.isFullscreen ?? false;
+  const contextHeight = renderingContext?.height;
+  const chartRef = useRef<ECharts | null>(null);
+  const [isZoomed, setIsZoomed] = useState(false);
+
+  const handleChartReady = (chart: ECharts) => {
+    chartRef.current = chart;
+  };
+
+  const handleContainerMouseDown = () => {
+    setIsZoomed(true);
+  };
+
+  const handleRecenter = () => {
+    if (chartRef.current) {
+      chartRef.current.dispatchAction({
+        type: 'treemapRootToNode',
+        seriesIndex: 0,
+      });
+      setIsZoomed(false);
+    }
+  };
 
   function convertToEChartsData(element: TreemapElement): any {
     const categoryInfo =
@@ -82,7 +165,7 @@ export function AppSizeTreemap(props: AppSizeTreemapProps) {
   // Empty state
   if (root === null) {
     return (
-      <EmptyContainer>
+      <Flex align="center" justify="center" height="100%">
         <Heading as="h4">
           No files match your search:{'  '}
           <span
@@ -96,7 +179,7 @@ export function AppSizeTreemap(props: AppSizeTreemapProps) {
             {props.searchQuery}
           </span>
         </Heading>
-      </EmptyContainer>
+      </Flex>
     );
   }
 
@@ -110,7 +193,7 @@ export function AppSizeTreemap(props: AppSizeTreemapProps) {
       animationEasing: 'quarticOut',
       animationDuration: 300,
       height: `calc(100% - 22px)`,
-      width: `100%`,
+      width: '100%',
       top: '22px',
       breadcrumb: {
         show: true,
@@ -224,21 +307,92 @@ export function AppSizeTreemap(props: AppSizeTreemapProps) {
   };
 
   return (
-    <BaseChart
-      autoHeightResize
-      renderer="canvas"
-      xAxis={null}
-      yAxis={null}
-      series={series}
-      visualMap={visualMap}
-      tooltip={tooltip}
-    />
+    <Container
+      height="100%"
+      width="100%"
+      position="relative"
+      onMouseDown={handleContainerMouseDown}
+    >
+      <BaseChart
+        autoHeightResize
+        height={contextHeight}
+        renderer="canvas"
+        xAxis={null}
+        yAxis={null}
+        series={series}
+        visualMap={visualMap}
+        tooltip={tooltip}
+        onChartReady={handleChartReady}
+      />
+      <ButtonContainer
+        direction="row"
+        position="absolute"
+        onMouseDown={e => e.stopPropagation()}
+      >
+        <Button
+          size="xs"
+          aria-label={t('Recenter View')}
+          title={t('Recenter')}
+          borderless
+          icon={<IconContract />}
+          onClick={handleRecenter}
+          disabled={!isZoomed}
+        />
+        {!isFullscreen && (
+          <Button
+            size="xs"
+            aria-label={t('Open Full-Screen View')}
+            title={t('Fullscreen')}
+            borderless
+            icon={<IconExpand />}
+            onClick={() => {
+              openInsightChartModal({
+                title: t('Size Analysis'),
+                fullscreen: true,
+                children: unfilteredRoot ? (
+                  <FullscreenModalContent
+                    unfilteredRoot={unfilteredRoot}
+                    initialSearch={searchQuery}
+                    onSearchChange={onSearchChange}
+                  />
+                ) : (
+                  <Container height="100%" width="100%">
+                    <AppSizeTreemap root={root} searchQuery={searchQuery} />
+                  </Container>
+                ),
+              });
+            }}
+          />
+        )}
+      </ButtonContainer>
+    </Container>
   );
 }
 
-const EmptyContainer = styled('div')`
-  display: flex;
+const ButtonContainer = styled(Flex)`
+  top: 0px;
+  right: 0;
+  height: 20px;
   align-items: center;
-  justify-content: center;
-  height: 100%;
+  gap: ${space(0.5)};
+  z-index: 10;
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${p => p.theme.white};
+    height: 22px;
+    min-height: 20px;
+    max-height: 20px;
+    padding: 0 ${space(0.5)};
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: ${p => p.theme.borderRadius};
+    box-shadow: ${p => p.theme.dropShadowMedium};
+
+    &:hover {
+      color: ${p => p.theme.white};
+      background: rgba(0, 0, 0, 0.9);
+    }
+  }
 `;