From d7cba2fe3a0cd2e3dd22236113d90a449b9b79a9 Mon Sep 17 00:00:00 2001
From: Max Topolsky <maxptop@gmail.com>
Date: Fri, 3 Oct 2025 14:22:21 -0700
Subject: [PATCH 1/3] working full size treemap

---
 .../components/modals/insightChartModal.tsx   |  4 +-
 .../visualizations/appSizeTreemap.tsx         | 71 ++++++++++++++-----
 2 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/static/app/components/modals/insightChartModal.tsx b/static/app/components/modals/insightChartModal.tsx
index d0e0114709a9c3..4d27848ddb10d4 100644
--- a/static/app/components/modals/insightChartModal.tsx
+++ b/static/app/components/modals/insightChartModal.tsx
@@ -11,6 +11,7 @@ export type InsightChartModalOptions = {
   children: React.ReactNode;
   title: React.ReactNode;
   footer?: React.ReactNode;
+  height?: number;
 };
 type Props = ModalRenderProps & InsightChartModalOptions;
 
@@ -20,6 +21,7 @@ export default function InsightChartModal({
   children,
   Footer,
   footer,
+  height = 300,
 }: Props) {
   return (
     <Fragment>
@@ -28,7 +30,7 @@ export default function InsightChartModal({
           <h3>{title}</h3>
         </Header>
 
-        <ChartRenderingContext value={{height: 300, isFullscreen: true}}>
+        <ChartRenderingContext value={{height, isFullscreen: true}}>
           {children}
         </ChartRenderingContext>
 
diff --git a/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx b/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx
index fe95d621456089..139637cccece4d 100644
--- a/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx
+++ b/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx
@@ -1,10 +1,17 @@
+import {useContext} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import type {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 {Container, Flex} from 'sentry/components/core/layout';
 import {Heading} from 'sentry/components/core/text';
+import {IconExpand} from 'sentry/icons';
+import {t} from 'sentry/locale';
 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';
 
@@ -15,8 +22,11 @@ interface AppSizeTreemapProps {
 
 export function AppSizeTreemap(props: AppSizeTreemapProps) {
   const theme = useTheme();
-  const {root} = props;
+  const {root, searchQuery} = props;
   const appSizeCategoryInfo = getAppSizeCategoryInfo(theme);
+  const renderingContext = useContext(ChartRenderingContext);
+  const isFullscreen = renderingContext?.isFullscreen ?? false;
+  const contextHeight = renderingContext?.height;
 
   function convertToEChartsData(element: TreemapElement): any {
     const categoryInfo =
@@ -82,7 +92,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 +106,7 @@ export function AppSizeTreemap(props: AppSizeTreemapProps) {
             {props.searchQuery}
           </span>
         </Heading>
-      </EmptyContainer>
+      </Flex>
     );
   }
 
@@ -109,8 +119,8 @@ export function AppSizeTreemap(props: AppSizeTreemapProps) {
       type: 'treemap',
       animationEasing: 'quarticOut',
       animationDuration: 300,
-      height: `calc(100% - 22px)`,
-      width: `100%`,
+      height: isFullscreen ? '100%' : `calc(100% - 22px)`,
+      width: '100%',
       top: '22px',
       breadcrumb: {
         show: true,
@@ -224,21 +234,44 @@ 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">
+      <BaseChart
+        autoHeightResize={!isFullscreen}
+        height={contextHeight}
+        renderer="canvas"
+        xAxis={null}
+        yAxis={null}
+        series={series}
+        visualMap={visualMap}
+        tooltip={tooltip}
+      />
+      {!isFullscreen && (
+        <ButtonContainer direction="column" gap="sm" padding="sm" position="absolute">
+          <Button
+            size="xs"
+            aria-label={t('Open Full-Screen View')}
+            borderless
+            icon={<IconExpand />}
+            onClick={() => {
+              openInsightChartModal({
+                title: t('Size Analysis'),
+                height: 600,
+                children: (
+                  <Container height="100%" width="100%">
+                    <AppSizeTreemap root={root} searchQuery={searchQuery} />
+                  </Container>
+                ),
+              });
+            }}
+          />
+        </ButtonContainer>
+      )}
+    </Container>
   );
 }
 
-const EmptyContainer = styled('div')`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
+const ButtonContainer = styled(Flex)`
+  top: -10px;
+  right: 0;
+  z-index: 10;
 `;

From 1ec8d26cf63857055262c946ad6fb0802700418b Mon Sep 17 00:00:00 2001
From: Max Topolsky <maxptop@gmail.com>
Date: Fri, 3 Oct 2025 14:47:42 -0700
Subject: [PATCH 2/3] modal

---
 .../main/buildDetailsMainContent.tsx          |  9 ++-
 .../visualizations/appSizeTreemap.tsx         | 68 +++++++++++++++++--
 2 files changed, 72 insertions(+), 5 deletions(-)

diff --git a/static/app/views/preprod/buildDetails/main/buildDetailsMainContent.tsx b/static/app/views/preprod/buildDetails/main/buildDetailsMainContent.tsx
index f54d54a0f797e8..0ffe9406b21d78 100644
--- a/static/app/views/preprod/buildDetails/main/buildDetailsMainContent.tsx
+++ b/static/app/views/preprod/buildDetails/main/buildDetailsMainContent.tsx
@@ -220,6 +220,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>
@@ -229,7 +231,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>
     );
diff --git a/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx b/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx
index 139637cccece4d..add1975612080d 100644
--- a/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx
+++ b/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx
@@ -1,4 +1,4 @@
-import {useContext} from 'react';
+import {useContext, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import type {TreemapSeriesOption, VisualMapComponentOption} from 'echarts';
@@ -6,23 +6,77 @@ import type {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 {IconExpand} from 'sentry/icons';
+import {IconClose, IconExpand, IconSearch} from 'sentry/icons';
 import {t} from 'sentry/locale';
 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 (
+    <Container height="100%" width="100%">
+      <Flex direction="column" gap="md" height="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%">
+          <AppSizeTreemap root={filteredRoot} searchQuery={localSearch} />
+        </Container>
+      </Flex>
+    </Container>
+  );
 }
 
 export function AppSizeTreemap(props: AppSizeTreemapProps) {
   const theme = useTheme();
-  const {root, searchQuery} = props;
+  const {root, searchQuery, unfilteredRoot, onSearchChange} = props;
   const appSizeCategoryInfo = getAppSizeCategoryInfo(theme);
   const renderingContext = useContext(ChartRenderingContext);
   const isFullscreen = renderingContext?.isFullscreen ?? false;
@@ -256,7 +310,13 @@ export function AppSizeTreemap(props: AppSizeTreemapProps) {
               openInsightChartModal({
                 title: t('Size Analysis'),
                 height: 600,
-                children: (
+                children: unfilteredRoot ? (
+                  <FullscreenModalContent
+                    unfilteredRoot={unfilteredRoot}
+                    initialSearch={searchQuery}
+                    onSearchChange={onSearchChange}
+                  />
+                ) : (
                   <Container height="100%" width="100%">
                     <AppSizeTreemap root={root} searchQuery={searchQuery} />
                   </Container>

From b2812dc38d9a6924e5716af1123e4729b960a0a0 Mon Sep 17 00:00:00 2001
From: Max Topolsky <maxptop@gmail.com>
Date: Fri, 3 Oct 2025 14:54:56 -0700
Subject: [PATCH 3/3] change height

---
 .../views/preprod/components/visualizations/appSizeTreemap.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx b/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx
index add1975612080d..a6c21d7d239039 100644
--- a/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx
+++ b/static/app/views/preprod/components/visualizations/appSizeTreemap.tsx
@@ -309,7 +309,7 @@ export function AppSizeTreemap(props: AppSizeTreemapProps) {
             onClick={() => {
               openInsightChartModal({
                 title: t('Size Analysis'),
-                height: 600,
+                height: 500,
                 children: unfilteredRoot ? (
                   <FullscreenModalContent
                     unfilteredRoot={unfilteredRoot}