Improve RawVis fallback message when dataset is too big to display

silx-kit · Aug 25, 2023 · d47bccf · d47bccf
1 parent b1f0b07
commit d47bccf
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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>
     );
   }