From 0dbd9189e96fa6d0cf0fb2c0c693705def96ab61 Mon Sep 17 00:00:00 2001
From: Markus Neusinger <2921697+MarkusNeusinger@users.noreply.github.com>
Date: Wed, 3 Jun 2026 00:36:42 +0200
Subject: [PATCH] fix(frontend): add library-card descriptions for chartjs, d3,
 echarts

LibraryCard renders its blurb from a hardcoded DESCRIPTIONS map that still
listed only the original 11 libraries, so the new JavaScript libs showed an
empty description (`DESCRIPTIONS[name] || ''`). Add concise entries for the
three JS libraries, matching the existing one-line style, plus a test that
asserts a JavaScript library's description renders.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/src/components/LibraryCard.test.tsx | 5 +++++
 app/src/components/LibraryCard.tsx      | 3 +++
 2 files changed, 8 insertions(+)

diff --git a/app/src/components/LibraryCard.test.tsx b/app/src/components/LibraryCard.test.tsx
index 65b9eb14f6..2ed264f44e 100644
--- a/app/src/components/LibraryCard.test.tsx
+++ b/app/src/components/LibraryCard.test.tsx
@@ -8,6 +8,11 @@ describe('LibraryCard', () => {
     expect(screen.getByText('matplotlib')).toBeInTheDocument();
   });
 
+  it('renders the description for a javascript library', () => {
+    render(<LibraryCard name="echarts" language="javascript" onClick={vi.fn()} />);
+    expect(screen.getByText(/Powerful interactive charts for the browser/i)).toBeInTheDocument();
+  });
+
   it('renders the language chip in the corner when language is provided', () => {
     render(<LibraryCard name="ggplot2" language="r" onClick={vi.fn()} />);
     expect(screen.getByLabelText('Language: R')).toHaveTextContent('R');
diff --git a/app/src/components/LibraryCard.tsx b/app/src/components/LibraryCard.tsx
index a63a8e52da..f0222f9095 100644
--- a/app/src/components/LibraryCard.tsx
+++ b/app/src/components/LibraryCard.tsx
@@ -14,6 +14,9 @@ const DESCRIPTIONS: Record<string, string> = {
   letsplot: 'Grammar of graphics by JetBrains. Interactive.',
   ggplot2: 'The reference grammar of graphics. R’s expressive plotting standard.',
   makie: 'High-performance Julia visualization. CairoMakie ships publication-quality static charts.',
+  chartjs: 'Simple, flexible HTML5-canvas charts. The popular JS default.',
+  d3: 'Data-driven SVG. Low-level, maximum control on the web.',
+  echarts: 'Powerful interactive charts for the browser. Vast chart catalog.',
 };
 
 interface LibraryCardProps {