From 9cb530245ae029d3ae901926fbf7bb9a00f97be9 Mon Sep 17 00:00:00 2001
From: Daniel Bachler <daniel@danielbachler.de>
Date: Mon, 6 Nov 2023 18:48:26 +0100
Subject: [PATCH] :hammer: hide charts thumbnails in all charts block for
 single charts

---
 site/blocks/RelatedCharts.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/site/blocks/RelatedCharts.tsx b/site/blocks/RelatedCharts.tsx
index 62faa6618de..2c49649789a 100644
--- a/site/blocks/RelatedCharts.tsx
+++ b/site/blocks/RelatedCharts.tsx
@@ -42,7 +42,24 @@ export const RelatedCharts = ({
 
     useEmbedChart(activeChartIdx, refChartContainer)
 
-    return (
+    const singleChartView = (
+        <div className={RELATED_CHARTS_CLASS_NAME}>
+            <div className="grid grid-cols-12">
+                <div
+                    className="related-charts__chart span-cols-7 span-md-cols-12"
+                    ref={refChartContainer}
+                >
+                    <figure
+                        // Use unique `key` to force React to re-render tree
+                        key={activeChartSlug}
+                        data-grapher-src={`${BAKED_BASE_URL}/grapher/${activeChartSlug}`}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+
+    const multipleChartsView = (
         <div className={RELATED_CHARTS_CLASS_NAME}>
             <div className="grid grid-cols-12">
                 <div className="related-charts__thumbnails span-cols-5 span-md-cols-12">
@@ -91,6 +108,8 @@ export const RelatedCharts = ({
             </div>
         </div>
     )
+
+    return charts.length === 1 ? singleChartView : multipleChartsView
 }
 
 export const runRelatedCharts = (charts: RelatedChart[]) => {