From e5e0bf9571c8965e57a2cc5f9d255b795b362580 Mon Sep 17 00:00:00 2001
From: Axel Bocciarelli <axelboc@gmail.com>
Date: Wed, 26 Jul 2023 15:17:20 +0200
Subject: [PATCH] Improve `RawVis` fallback message when dataset is too big to
 display

---
 packages/app/src/__tests__/CorePack.test.tsx |  2 +-
 packages/lib/src/vis/raw/RawVis.module.css   | 17 +++++++++++++++++
 packages/lib/src/vis/raw/RawVis.tsx          | 11 +++++++----
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/__tests__/CorePack.test.tsx b/packages/app/src/__tests__/CorePack.test.tsx
index 88fabd594..f3339c46d 100644
--- a/packages/app/src/__tests__/CorePack.test.tsx
+++ b/packages/app/src/__tests__/CorePack.test.tsx
@@ -21,7 +21,7 @@ test('log raw dataset to console if too large', async () => {
   const logSpy = mockConsoleMethod('log');
   await renderApp('/entities/raw_large');
 
-  await expect(screen.findByText(/dataset is too big/)).resolves.toBeVisible();
+  await expect(screen.findByText(/Too big to display/)).resolves.toBeVisible();
   expect(logSpy).toHaveBeenCalledWith(mockValues.raw_large);
 });
 
diff --git a/packages/lib/src/vis/raw/RawVis.module.css b/packages/lib/src/vis/raw/RawVis.module.css
index 946ba1bba..88a698b8a 100644
--- a/packages/lib/src/vis/raw/RawVis.module.css
+++ b/packages/lib/src/vis/raw/RawVis.module.css
@@ -13,4 +13,21 @@
 
 .fallback {
   composes: fallback from global;
+  max-width: 26em;
+  line-height: 1.5;
+}
+
+.reason {
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+  font-weight: 600;
+}
+
+.message {
+  margin-top: 0;
+  font-size: 0.875em;
+}
+
+.message > kbd {
+  font-weight: 600;
 }
diff --git a/packages/lib/src/vis/raw/RawVis.tsx b/packages/lib/src/vis/raw/RawVis.tsx
index 165d78726..9e2c1654e 100644
--- a/packages/lib/src/vis/raw/RawVis.tsx
+++ b/packages/lib/src/vis/raw/RawVis.tsx
@@ -12,10 +12,13 @@ function RawVis(props: Props) {
     console.log(value); // eslint-disable-line no-console
 
     return (
-      <p className={styles.fallback}>
-        The dataset is too big to be displayed and was logged to the console
-        instead.
-      </p>
+      <div className={styles.fallback}>
+        <p className={styles.reason}>Too big to display</p>
+        <p className={styles.message}>
+          Dataset logged to the browser's developer console instead. Press{' '}
+          <kbd>F12</kbd> to open the developer tools and access the console.
+        </p>
+      </div>
     );
   }