Skip to content

Commit 6af4032

Browse files
SavidSavid
authored
feat: add modal isolation for chart sync and convert state-growth to PopoutCard (#383)
- ContractPage: disable syncGroup when chart is in modal view - StateExpiry: disable syncGroup when chart is in modal view - StateGrowth: convert from Card to PopoutCard with render props Charts in modal view no longer sync crosshairs/zoom with non-modal charts, matching the pattern used in execution overview page.
1 parent 8e3f472 commit 6af4032

File tree

3 files changed

+125
-112
lines changed

3 files changed

+125
-112
lines changed

‎src/pages/ethereum/contracts/ContractPage.tsx‎

Lines changed: 52 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -582,61 +582,65 @@ export function ContractPage(): JSX.Element {
582582
subtitle="Current vs expiry policy"
583583
downloadFilename={`contract-storage-size-${address.slice(0, 10)}`}
584584
>
585-
<MultiLineChart
586-
series={chartData.bytesSeries}
587-
xAxis={{
588-
type: 'category',
589-
labels: chartData.labels,
590-
name: 'Date',
591-
}}
592-
yAxis={{
593-
name: `Size (${chartData.bytesUnit})`,
594-
max: chartData.bytesYMax,
595-
formatter: (value: number) => value.toFixed(2),
596-
}}
597-
height={280}
598-
showLegend={false}
599-
enableDataZoom={true}
600-
tooltipFormatter={bytesTooltipFormatter}
601-
syncGroup="contract-storage"
602-
onSeriesClick={handleSeriesClick}
603-
markLines={resurrectionMarkLines}
604-
/>
585+
{({ inModal }) => (
586+
<MultiLineChart
587+
series={chartData.bytesSeries}
588+
xAxis={{
589+
type: 'category',
590+
labels: chartData.labels,
591+
name: 'Date',
592+
}}
593+
yAxis={{
594+
name: `Size (${chartData.bytesUnit})`,
595+
max: chartData.bytesYMax,
596+
formatter: (value: number) => value.toFixed(2),
597+
}}
598+
height={inModal ? 600 : 280}
599+
showLegend={false}
600+
enableDataZoom={true}
601+
tooltipFormatter={bytesTooltipFormatter}
602+
syncGroup={inModal ? undefined : 'contract-storage'}
603+
onSeriesClick={handleSeriesClick}
604+
markLines={resurrectionMarkLines}
605+
/>
606+
)}
605607
</PopoutCard>
606608

607609
<PopoutCard
608610
title="Active Storage Slots"
609611
subtitle="Current vs expiry policy"
610612
downloadFilename={`contract-storage-slots-${address.slice(0, 10)}`}
611613
>
612-
<MultiLineChart
613-
series={chartData.slotsSeries}
614-
xAxis={{
615-
type: 'category',
616-
labels: chartData.labels,
617-
name: 'Date',
618-
}}
619-
yAxis={{
620-
name: 'Slots',
621-
max: chartData.slotsYMax,
622-
formatter: (value: number) => {
623-
if (value >= 1_000_000) {
624-
return `${(value / 1_000_000).toFixed(2)}M`;
625-
}
626-
if (value >= 1_000) {
627-
return `${(value / 1_000).toFixed(2)}K`;
628-
}
629-
return value.toFixed(0);
630-
},
631-
}}
632-
height={280}
633-
showLegend={false}
634-
enableDataZoom={true}
635-
tooltipFormatter={slotsTooltipFormatter}
636-
syncGroup="contract-storage"
637-
onSeriesClick={handleSeriesClick}
638-
markLines={resurrectionMarkLines}
639-
/>
614+
{({ inModal }) => (
615+
<MultiLineChart
616+
series={chartData.slotsSeries}
617+
xAxis={{
618+
type: 'category',
619+
labels: chartData.labels,
620+
name: 'Date',
621+
}}
622+
yAxis={{
623+
name: 'Slots',
624+
max: chartData.slotsYMax,
625+
formatter: (value: number) => {
626+
if (value >= 1_000_000) {
627+
return `${(value / 1_000_000).toFixed(2)}M`;
628+
}
629+
if (value >= 1_000) {
630+
return `${(value / 1_000).toFixed(2)}K`;
631+
}
632+
return value.toFixed(0);
633+
},
634+
}}
635+
height={inModal ? 600 : 280}
636+
showLegend={false}
637+
enableDataZoom={true}
638+
tooltipFormatter={slotsTooltipFormatter}
639+
syncGroup={inModal ? undefined : 'contract-storage'}
640+
onSeriesClick={handleSeriesClick}
641+
markLines={resurrectionMarkLines}
642+
/>
643+
)}
640644
</PopoutCard>
641645
</div>
642646
</>

‎src/pages/ethereum/execution/state-expiry/IndexPage.tsx‎

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -575,57 +575,61 @@ export function IndexPage(): JSX.Element {
575575
subtitle="Current vs expiry policy"
576576
downloadFilename="state-expiry-storage-size"
577577
>
578-
<MultiLineChart
579-
series={chartData.bytesSeries}
580-
xAxis={{
581-
type: 'category',
582-
labels: chartData.labels,
583-
name: 'Date',
584-
}}
585-
yAxis={{
586-
name: 'Size (GB)',
587-
formatter: (value: number) => value.toFixed(4),
588-
}}
589-
height={280}
590-
showLegend={false}
591-
enableDataZoom={true}
592-
tooltipFormatter={bytesTooltipFormatter}
593-
syncGroup="state-expiry"
594-
onSeriesClick={handleSeriesClick}
595-
/>
578+
{({ inModal }) => (
579+
<MultiLineChart
580+
series={chartData.bytesSeries}
581+
xAxis={{
582+
type: 'category',
583+
labels: chartData.labels,
584+
name: 'Date',
585+
}}
586+
yAxis={{
587+
name: 'Size (GB)',
588+
formatter: (value: number) => value.toFixed(4),
589+
}}
590+
height={inModal ? 600 : 280}
591+
showLegend={false}
592+
enableDataZoom={true}
593+
tooltipFormatter={bytesTooltipFormatter}
594+
syncGroup={inModal ? undefined : 'state-expiry'}
595+
onSeriesClick={handleSeriesClick}
596+
/>
597+
)}
596598
</PopoutCard>
597599

598600
<PopoutCard
599601
title="Active Storage Slots"
600602
subtitle="Current vs expiry policy"
601603
downloadFilename="state-expiry-active-slots"
602604
>
603-
<MultiLineChart
604-
series={chartData.slotsSeries}
605-
xAxis={{
606-
type: 'category',
607-
labels: chartData.labels,
608-
name: 'Date',
609-
}}
610-
yAxis={{
611-
name: 'Slots',
612-
formatter: (value: number) => {
613-
if (value >= 1_000_000) {
614-
return `${(value / 1_000_000).toFixed(4)}M`;
615-
}
616-
if (value >= 1_000) {
617-
return `${(value / 1_000).toFixed(4)}K`;
618-
}
619-
return value.toFixed(0);
620-
},
621-
}}
622-
height={280}
623-
showLegend={false}
624-
enableDataZoom={true}
625-
tooltipFormatter={slotsTooltipFormatter}
626-
syncGroup="state-expiry"
627-
onSeriesClick={handleSeriesClick}
628-
/>
605+
{({ inModal }) => (
606+
<MultiLineChart
607+
series={chartData.slotsSeries}
608+
xAxis={{
609+
type: 'category',
610+
labels: chartData.labels,
611+
name: 'Date',
612+
}}
613+
yAxis={{
614+
name: 'Slots',
615+
formatter: (value: number) => {
616+
if (value >= 1_000_000) {
617+
return `${(value / 1_000_000).toFixed(4)}M`;
618+
}
619+
if (value >= 1_000) {
620+
return `${(value / 1_000).toFixed(4)}K`;
621+
}
622+
return value.toFixed(0);
623+
},
624+
}}
625+
height={inModal ? 600 : 280}
626+
showLegend={false}
627+
enableDataZoom={true}
628+
tooltipFormatter={slotsTooltipFormatter}
629+
syncGroup={inModal ? undefined : 'state-expiry'}
630+
onSeriesClick={handleSeriesClick}
631+
/>
632+
)}
629633
</PopoutCard>
630634
</div>
631635

‎src/pages/ethereum/execution/state-growth/IndexPage.tsx‎

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/react/24/
33
import clsx from 'clsx';
44
import { Container } from '@/components/Layout/Container';
55
import { Card } from '@/components/Layout/Card';
6+
import { PopoutCard } from '@/components/Layout/PopoutCard';
67
import { MultiLineChart } from '@/components/Charts/MultiLine';
78
import { formatSmartDecimal } from '@/utils';
89
import { useStateSizeData, useStateDelta, type DeltaTimeframe } from './hooks';
@@ -313,26 +314,30 @@ export function IndexPage(): JSX.Element {
313314
</div>
314315

315316
{/* Main Chart */}
316-
<Card rounded className="p-6">
317-
<MultiLineChart
318-
title="Historical State Growth"
319-
subtitle="Daily snapshot of Ethereum state components (stacked)"
320-
series={chartData.series}
321-
xAxis={{
322-
type: 'category',
323-
labels: chartData.labels,
324-
name: 'Date',
325-
}}
326-
yAxis={{
327-
name: 'Size (GB)',
328-
min: 0,
329-
}}
330-
height={480}
331-
showLegend={true}
332-
enableDataZoom={true}
333-
tooltipFormatter={tooltipFormatter}
334-
/>
335-
</Card>
317+
<PopoutCard
318+
title="Historical State Growth"
319+
subtitle="Daily snapshot of Ethereum state components (stacked)"
320+
downloadFilename="state-growth-historical"
321+
>
322+
{({ inModal }) => (
323+
<MultiLineChart
324+
series={chartData.series}
325+
xAxis={{
326+
type: 'category',
327+
labels: chartData.labels,
328+
name: 'Date',
329+
}}
330+
yAxis={{
331+
name: 'Size (GB)',
332+
min: 0,
333+
}}
334+
height={inModal ? 600 : 480}
335+
showLegend={true}
336+
enableDataZoom={true}
337+
tooltipFormatter={tooltipFormatter}
338+
/>
339+
)}
340+
</PopoutCard>
336341
</div>
337342
)}
338343
</Container>

0 commit comments

Comments
 (0)