3-5 New Charts by ekoslow1-creator · Pull Request #8 · Sefaria/powered-by

ekoslow1-creator · 2026-08-05T11:33:08Z

Replaces #6, which GitHub will not allow reopening after a required history rewrite (a committed CSV with non-consented submission data was purged from this branch's git history via git filter-repo, then force-pushed).

Same underlying work as #6:

New analytics charts (submissions trend, experience trend, vibe-coded trend, tool usage, technologies used, keyword frequency)
Charts refactored into src/components/charts/, then further generalized into shared types/{LineChart,BarChart,PieChart} components per review feedback on 3-5 New Charts #6
Screenshot feature removed (pending a cloud-backed replacement)
Category/chart colors migrated to a shared CSS custom-property palette
Test files reorganized into src/utils/__tests__/

Test plan

npm test (33/33 passing)
npm run lint (clean)
npm run build (clean)
Manual visual check of all six charts in the browser

🤖 Generated with Claude Code

…r bucketing Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

…pty experience trend - getToolUsageCounts now filters sefaria_tools_used to string entries before normalizing, so a non-string entry (null, number, etc.) in this free-text user-submitted field is skipped instead of throwing and blanking out all four Charts & Analytics charts via the outer catch handler. - Move the experienceTrend.length === 0 empty-state message inline (matching the pie chart's own conditional-render guard) instead of an early return, so the two bar charts and the pie chart still render when there's no experience-level data. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Shares VIBE_CODED_SERIES between submissionsTrend.js and ChartsAndAnalytics.jsx (mirroring the EXPERIENCE_LEVELS precedent) instead of hardcoding the strings twice, and adds a one-sentence caption noting vibe_coded is a newly-tracked field so the chart isn't misread as a real overnight trend reversal. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Extracts known technology names from the free-text tech_used_raw field via case-insensitive substring matching, with "Claude Code" checked and excluded first so it doesn't double-count toward the generic Claude/Anthropic API bucket. Shows the top 8 by project count as a horizontal bar chart, matching the existing keyword-frequency chart's style.

Reuses the fixed-order categorical hue palette already used in the charts (blue/orange/aqua/violet/magenta, gray for Uncategorized). Background and border are computed via color-mix() at low strength so each pill stays pale; text is mixed toward --text-h for a muted look instead of a fully saturated hue.

…chart Recharts' category axis auto-hides tick labels it calculates would overlap; interval={0} disables that, and the wider axis column gives longer labels like "Claude/Anthropic API" room to fit.

Extracts the six recharts blocks out of ChartsAndAnalytics.jsx into dedicated presentational components (one file per chart), each owning its chart-specific colors/constants. ChartsAndAnalytics.jsx now only handles data fetching/derivation and renders each chart with props. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

…hots

…, screenshot URL validation) - screenshots.test.js: update the positive-case test to expect the real manifest path now that screenshotManifest.json is populated, and add a case covering the numeric id form used by ProjectCard.jsx - index.css: give has-screenshot cards their own hover background on the scrim pseudo-element so hovering isn't washed out by the 88%-opacity overlay - generate-screenshots.mjs: validate project_link before navigating to it, rejecting non-http(s) schemes and localhost/private/link-local hosts to close an SSRF/file-read path from unauthenticated submissions

… link, tags+desc on back)

The flip-card's hidden face was still hit-testable in the region behind the visible face's centered content (backface-visibility only affects painting, not pointer events), so clicking the center of a flipped-back card could trigger the hidden front title's link instead of unflipping. Scope pointer-events to whichever face is currently visible. Also add a hover color (var(--accent)) on the project title link, per request, as a visual affordance that it's clickable.

…ip-away on text selection, remove stale CSS - Add visibility: hidden alongside pointer-events: none on the flipped front face so the title link is removed from the tab order and accessibility tree while visually hidden. - Guard the card's click-to-flip handler against active text selections so releasing a text-selection drag inside the back-face description no longer flips the card away. - Remove stale position: relative on .project-card (no longer needed now that faces position against .project-card-inner). - Update stale comment on .project-card-desc to reflect the back-face layout (no image/title/link on that face anymore).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Drops the manifest-driven local screenshot pipeline (generator script, public/screenshots/ images, screenshotManifest.json, getScreenshotUrl, and the ProjectCard background/hover CSS it drove) along with the puppeteer dependency it required. Screenshots are coming back later, backed by cloud storage instead of files committed to the repo. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

…g, README, CSS Completes the previous commit, which only removed the screenshot files themselves. This drops the now-dead getScreenshotUrl import and background/hover CSS in ProjectCard, the puppeteer dependency and npm run screenshots script, and the README section documenting it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Replaces the literal hex colors in categories.js's CATEGORY_COLORS with references to the --chart-* palette already defined in index.css, so the category-color source of truth is the same palette the charts use. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

gitvelocity-reviewer · 2026-08-05T11:34:17Z

📊 Code Quality Score: 61/100

Base Score 61 × ESF 1.0 (Extra Large: 1012 effective lines, 23 files) = 61

Category	Score	Factors
🔭 Scope	16/20	23 files across chart components, utility functions, CSS, and tests; 3 new analytics dimensions; new chart type abstraction layer; ProjectCard UI redesign; gitignore update
🏗️ Architecture	13/20	Clean two-level chart hierarchy (domain → generic types); VIBE_CODED_SERIES export as single source of truth; getCategoryColor abstraction; test reorganization into tests; no new external dependencies
⚙️ Implementation	13/20	normalizeEndpoint longest-match algorithm; getSubmissionsTrendByExperience earliest-month logic with level filtering; CSS 3D flip with pointer-events state management; Claude Code pre-stripping in techUsed.js; Map-based deduplication per project in sefariaTools.js
⚠️ Risk	5/20	Frontend-only changes; no database migrations or auth changes; CSS layout hack with hardcoded pixel values is fragile; data/ gitignore addition is a safety improvement; vibe_coded undefined behavior is undocumented
✅ Quality	12/15	Comprehensive unit tests for all new utilities with fixed reference dates; boundary condition tests (exactly 6 vs 7+ endpoints); well-commented test intent; minor gaps: missing test for vibe_coded undefined behavior and Claude Code-only tech_used_raw
🔒 Perf / Security	2/5	Colorblind-safety documentation for chart palette (OKLab CVD ΔE claim); no security concerns; no benchmarks or performance profiling

Was this score accurate? 👍 Yes · 👎 No

How this was scored →

_{Scored by GitVelocity · How are scores calculated?}

saengel

Much better!

If we have time over the next few weeks, we can continue to refine and smooth things out :)

Copilot

Pull request overview

This PR expands the dashboard analytics by adding several new charts and refactoring chart rendering into reusable charts/types/* components, alongside new utilities for parsing/aggregating tool and technology usage. It also introduces a shared CSS variable color palette for consistent categorical coloring and updates the project card UI styling/interaction.

Changes:

Add new trend/count utilities (getSubmissionsTrendByVibeCoded, getToolUsageCounts, getTechCounts) with corresponding unit tests under src/utils/__tests__/.
Refactor chart rendering into reusable BarChart, LineChart, and PieChart components and wire up six charts in ChartsAndAnalytics.
Introduce a shared chart color palette in index.css and use category-specific colors for category “pills”; update ProjectCard UI to a flip-card layout.

Reviewed changes

Copilot reviewed 23 out of 24 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/utils/techUsed.js	New utility to bucket free-text `tech_used_raw` into known technology counts.
src/utils/submissionsTrend.test.js	Removes the old submissions trend test file (tests moved under `src/utils/__tests__/`).
src/utils/submissionsTrend.js	Adds vibe-coded trend series/constants and improves trend builders with comments and new function.
src/utils/sefariaTools.js	New utility to normalize Sefaria endpoints and compute per-endpoint usage counts + “Other” bucket.
src/utils/categories.js	Adds a shared category→color mapping and `getCategoryColor`.
src/utils/tests/techUsed.test.js	Adds unit tests for technology counting/bucketing behavior.
src/utils/tests/submissionsTrend.test.js	Adds expanded tests for experience trend and new vibe-coded trend logic.
src/utils/tests/sefariaTools.test.js	Adds tests for endpoint normalization and tool usage aggregation rules.
src/utils/tests/experience.test.js	Fixes import path after test reorg into `__tests__/`.
src/utils/tests/categories.test.js	Adds tests validating distinct category colors and fallback behavior.
src/index.css	Adds chart palette CSS variables and updates dashboard controls + project card flip styling.
src/components/ProjectCard.jsx	Changes project card to a flip-card interaction and uses per-category pill colors.
src/components/Controls.jsx	Adds a class to the search input for styling.
src/components/ChartsAndAnalytics.jsx	Switches from inline Recharts usage to composed chart components; adds new charts/data sources.
src/components/charts/VibeCodedTrendChart.jsx	New chart component for vibe-coded vs not trend.
src/components/charts/types/PieChart.jsx	New reusable pie chart wrapper around Recharts.
src/components/charts/types/LineChart.jsx	New reusable line chart wrapper around Recharts with series config.
src/components/charts/types/BarChart.jsx	New reusable bar chart wrapper supporting horizontal/vertical layouts.
src/components/charts/ToolUsagePieChart.jsx	New pie chart for most-used Sefaria API endpoints.
src/components/charts/TechUsedChart.jsx	New vertical bar chart for technologies used.
src/components/charts/SubmissionsTrendChart.jsx	New bar chart for submissions over the last 12 months.
src/components/charts/KeywordFrequencyChart.jsx	New vertical bar chart for keyword frequency.
src/components/charts/ExperienceTrendChart.jsx	New line chart for submissions by experience level.
.gitignore	Ignores local worktrees and a `data/` directory intended for sensitive local dumps.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+    <div className="project-card" onClick={handleCardClick}>
+      <div className={`project-card-inner${flipped ? ' flipped' : ''}`}>
+        <div className="project-card-front">
+          <a
+            className="project-card-title"


+    <LineChart
+      data={data}
+      title="Vibe-coded vs. not, tracked since July 2026"
+      description={'"Vibe-coded" is a newly-tracked field, so earlier months may be undercounted or unreported rather than confirmed non-vibe-coded.'}
+      series={VIBE_CODED_SERIES.map((series) => ({


gitvelocity-reviewer · 2026-08-06T07:33:53Z

📊 Code Quality Score: 61/100

Base Score 61 × ESF 1.0x = 61

Category	Score	Factors
🔭 Scope	14/20	23 files across UI components, utility modules, CSS, and tests; 3 new analytics dimensions surfaced to users; new chart component hierarchy; colorblind-safe CSS palette system; no external service integrations or DB migrations
🏗️ Architecture	13/20	Two-tier chart component hierarchy (generic primitives → domain wrappers); CSS custom property palette centralization; test reorganization into tests/; no new external dependencies
⚙️ Implementation	13/20	normalizeEndpoint with longest-prefix matching; getTechCounts with two-pass Claude Code disambiguation; variable-start-month experience trend logic with unspecified-experience edge case; CSS 3D flip card with backface-visibility and pointer-events toggling; color-mix() for dynamic pill colors
⚠️ Risk	6/20	Pure frontend refactor; no auth/payments/external services; flip card changes existing project card interaction model (was a link, now click-to-flip); easily reversible; no feature flags
✅ Quality	12/15	27 unit tests across 4 test files covering edge cases (null entries, deduplication, Other bucket boundary, case-insensitivity, Claude Code disambiguation); fixed reference dates for time-independence; good inline documentation; no integration/E2E tests for chart components
🔒 Perf / Security	3/5	Colorblind-safe palette with documented OKLab CVD rationale; correct longest-prefix endpoint matching algorithm; per-project Set deduplication before counting; no benchmarks or security concerns

Was this score accurate? 👍 Yes · 👎 No

How this was scored →

_{Scored by GitVelocity · How are scores calculated?}

Sefaria Intern and others added 30 commits August 5, 2026 14:31

feat: add sefaria API endpoint normalization util

71c1b20

feat: add per-project deduped endpoint usage counting with top-6+Othe…

2775849

…r bucketing Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

feat: add pie chart of most-used Sefaria API endpoints

65b3b7a

feat: add vibe-coded vs not-vibe-coded monthly trend util

bb30b68

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

feat: add vibe-coded vs not-vibe-coded trend chart

f5f8a40

feat: widen and left-align the search bar under the developers logo

39c5f5e

fix: force every technology label to render on the Technologies used …

dbdf28c

…chart Recharts' category axis auto-hides tick labels it calculates would overlap; interval={0} disables that, and the wider axis column gives longer labels like "Claude/Anthropic API" room to fit.

chore: ignore local data/ dumps to prevent re-committing sensitive CSVs

5bfba95

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

feat: add getScreenshotUrl utility backed by a screenshot manifest

93a77f0

feat: layer screenshot background + scrim into ProjectCard

f3733d4

feat: add npm run screenshots to pre-generate project website screens…

1038bc2

…hots

docs: document npm run screenshots

b90b9e6

feat: replace whole-card link with a front/back flip card (title-only…

c8e792c

… link, tags+desc on back)

chore: ignore .worktrees/ directory used for isolated plan execution

1fa4cea

feat: add generic BarChart chart-type component

8fa4a4d

refactor: rebuild SubmissionsTrendChart on generic BarChart

472c5bd

refactor: rebuild TechUsedChart on generic BarChart

5fa2cb4

refactor: rebuild KeywordFrequencyChart on generic BarChart

7c5add9

feat: add generic LineChart chart-type component

bb3f245

refactor: rebuild ExperienceTrendChart on generic LineChart

c8349b2

refactor: rebuild VibeCodedTrendChart on generic LineChart

4137d33

feat: add generic PieChart chart-type component

2e7baa9

Sefaria Intern and others added 7 commits August 5, 2026 14:31

refactor: rebuild ToolUsagePieChart on generic PieChart

5b871dc

fix: define --chart-* CSS palette so chart color references resolve

be93ffe

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

fix: update relative imports for test files moved into __tests__/

9b1cdd1

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

docs: add explanatory comments to submissionsTrend.js and its tests

cb58982

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

saengel requested a lite review from Copilot August 5, 2026 18:58

Copilot started reviewing on behalf of saengel August 5, 2026 18:58 View session

saengel approved these changes Aug 5, 2026

View reviewed changes

Copilot AI reviewed Aug 5, 2026

View reviewed changes

ekoslow1-creator merged commit 8aa1c73 into main Aug 6, 2026
2 checks passed

Navigation Menu

Uh oh!

3-5 New Charts - #8

3-5 New Charts#8
ekoslow1-creator merged 37 commits into
mainfrom
feature/sc-46083/create-3-5-charts

ekoslow1-creator commented Aug 5, 2026 •

edited

Loading

Uh oh!

gitvelocity-reviewer Bot commented Aug 5, 2026

Uh oh!

saengel left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

gitvelocity-reviewer Bot commented Aug 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

ekoslow1-creator commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test plan

Uh oh!

gitvelocity-reviewer Bot commented Aug 5, 2026

📊 Code Quality Score: 61/100

Uh oh!

saengel left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

gitvelocity-reviewer Bot commented Aug 6, 2026

📊 Code Quality Score: 61/100

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ekoslow1-creator commented Aug 5, 2026 •

edited

Loading