fix: styles

Author: astandrik

src/components/QueriesActivityBar/QueriesActivityBar.tsx

@@ -162,45 +162,47 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
                     )}
                 </Disclosure.Summary>
 
-                <div className={b('content')}>
-                    <div className={b('stats')}>
-                        <Label
-                            theme="unknown"
-                            icon={<Icon data={CirclePlay} />}
-                            size="s"
-                            value={String(runningQueriesCount)}
-                        >
-                            {i18n('running-queries')}
-                        </Label>
-
-                        <Label
-                            theme="unknown"
-                            icon={<Icon data={Display} />}
-                            size="s"
-                            value={String(uniqueApplications)}
-                        >
-                            {i18n('applications')}
-                        </Label>
-
-                        <Label
-                            theme="unknown"
-                            icon={<Icon data={Person} />}
-                            size="s"
-                            value={String(uniqueUsers)}
-                        >
-                            {i18n('users')}
-                        </Label>
-
-                        <Button
-                            view="outlined"
-                            size="s"
-                            onClick={handleOpenRunningQueries}
-                            className={b('open-queries-button')}
-                        >
-                            {i18n('open-running-queries')}
-                        </Button>
+                {expanded ? (
+                    <div className={b('content')}>
+                        <div className={b('stats')}>
+                            <Label
+                                theme="unknown"
+                                icon={<Icon data={CirclePlay} />}
+                                size="s"
+                                value={String(runningQueriesCount)}
+                            >
+                                {i18n('running-queries')}
+                            </Label>
+
+                            <Label
+                                theme="unknown"
+                                icon={<Icon data={Display} />}
+                                size="s"
+                                value={String(uniqueApplications)}
+                            >
+                                {i18n('applications')}
+                            </Label>
+
+                            <Label
+                                theme="unknown"
+                                icon={<Icon data={Person} />}
+                                size="s"
+                                value={String(uniqueUsers)}
+                            >
+                                {i18n('users')}
+                            </Label>
+
+                            <Button
+                                view="outlined"
+                                size="s"
+                                onClick={handleOpenRunningQueries}
+                                className={b('open-queries-button')}
+                            >
+                                {i18n('open-running-queries')}
+                            </Button>
+                        </div>
                     </div>
-                </div>
+                ) : null}
             </Disclosure>
             <QueriesActivityCharts tenantName={tenantName} expanded={expanded} />
         </div>

src/components/QueriesActivityBar/QueriesActivityCharts.tsx

@@ -14,11 +14,13 @@ interface QueriesActivityChartsProps {
     expanded: boolean;
 }
 
+const ACTIVITY_CHART_HEIGHT = 292;
+
 export function QueriesActivityCharts({tenantName, expanded}: QueriesActivityChartsProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const [queriesTimeFrame, setQueriesTimeFrame] = React.useState<TimeFrame>('1h');
     const [latenciesTimeFrame, setLatenciesTimeFrame] = React.useState<TimeFrame>('1h');
-    const [areChartsHidden, setAreChartsHidden] = React.useState(true);
+    const [hasChartsLoaded, setHasChartsLoaded] = React.useState(false);
 
     // Extract chart configurations from defaultDashboardConfig
     const getChartByTarget = (target: string) => {
@@ -36,12 +38,12 @@ export function QueriesActivityCharts({tenantName, expanded}: QueriesActivityCha
         return null;
     }
 
-    // Refetch data only if charts successfully loaded
-    const shouldRefresh = areChartsHidden ? 0 : autoRefreshInterval;
+    // Refetch data only if charts have successfully loaded at least once
+    const shouldRefresh = hasChartsLoaded ? autoRefreshInterval : 0;
 
     const handleChartDataStatusChange = React.useCallback((status: ChartDataStatus) => {
         if (status === 'success') {
-            setAreChartsHidden(false);
+            setHasChartsLoaded(true);
         }
     }, []);
 
@@ -66,18 +68,18 @@ export function QueriesActivityCharts({tenantName, expanded}: QueriesActivityCha
     }
 
     return (
-        <div className={b('charts')} style={{display: areChartsHidden ? 'none' : undefined}}>
+        <div className={b('charts')}>
             <div className={b('chart-container')}>
                 <MetricChart
                     database={tenantName}
                     title={queriesChartConfig.title}
                     metrics={queriesChartConfig.metrics}
                     timeFrame={queriesTimeFrame}
                     autorefresh={shouldRefresh}
-                    height={260}
+                    height={ACTIVITY_CHART_HEIGHT}
                     chartOptions={queriesChartConfig.options}
                     onChartDataStatusChange={handleChartDataStatusChange}
-                    isChartVisible={!areChartsHidden}
+                    isChartVisible={hasChartsLoaded}
                     noBorder={true}
                     fullWidth={true}
                     withTimeframeSelector={true}
@@ -93,10 +95,10 @@ export function QueriesActivityCharts({tenantName, expanded}: QueriesActivityCha
                     metrics={latenciesChartConfig.metrics}
                     timeFrame={latenciesTimeFrame}
                     autorefresh={shouldRefresh}
-                    height={260}
+                    height={ACTIVITY_CHART_HEIGHT}
                     chartOptions={latenciesChartConfig.options}
                     onChartDataStatusChange={handleChartDataStatusChange}
-                    isChartVisible={!areChartsHidden}
+                    isChartVisible={hasChartsLoaded}
                     noBorder={true}
                     fullWidth={true}
                     withTimeframeSelector={true}