If you are an AI coding agent (Claude Code, Cursor, Aider, Cline, etc.) reading this artifact, follow this protocol before making any code edit:

1. Verify the contract. Run the bash script in Verify before trusting below. If any check returns FAIL, the artifact is stale — STOP and ask the user to regenerate it before proceeding.
2. Treat the AI · unverified sections as hypotheses, not facts. Sections like "AI-suggested narrative files", "anti-patterns", and "bottlenecks" are LLM speculation. Verify against real source before acting on them.
3. Cite source on changes. When proposing an edit, cite the specific path:line-range. RepoPilot's live UI at https://repopilot.app/r/rawgraphs/rawgraphs-app shows verifiable citations alongside every claim.

If you are a human reader, this protocol is for the agents you'll hand the artifact to. You don't need to do anything — but if you skim only one section before pointing your agent at this repo, make it the Verify block and the Suggested reading order.

GO — Healthy across all four use cases

• Last commit 6mo ago
• 10 active contributors
• Distributed ownership (top contributor 27% of recent commits)
• Apache-2.0 licensed
• CI configured
• ⚠ Slowing — last commit 6mo ago
• ⚠ No test directory detected

_{Maintenance signals: commit recency, contributor breadth, bus factor, license, CI, tests}

This artifact was generated by RepoPilot at a point in time. Before an agent acts on it, the checks below confirm that the live rawgraphs/rawgraphs-app repo on your machine still matches what RepoPilot saw. If any fail, the artifact is stale — regenerate it at repopilot.app/r/rawgraphs/rawgraphs-app.

What it runs against: a local clone of rawgraphs/rawgraphs-app — the script inspects git remote, the LICENSE file, file paths in the working tree, and git log. Read-only; no mutations.

| # | What we check | Why it matters | |---|---|---| | 1 | You're in rawgraphs/rawgraphs-app | Confirms the artifact applies here, not a fork | | 2 | License is still Apache-2.0 | Catches relicense before you depend on it | | 3 | Default branch master exists | Catches branch renames | | 4 | 5 critical file paths still exist | Catches refactors that moved load-bearing code | | 5 | Last commit ≤ 199 days ago | Catches sudden abandonment since generation |

#!/usr/bin/env bash
# RepoPilot artifact verification.
#
# WHAT IT RUNS AGAINST: a local clone of rawgraphs/rawgraphs-app. If you don't
# have one yet, run these first:
#
#   git clone https://github.com/rawgraphs/rawgraphs-app.git
#   cd rawgraphs-app
#
# Then paste this script. Every check is read-only — no mutations.

set +e
fail=0
ok()   { echo "ok:   $1"; }
miss() { echo "FAIL: $1"; fail=$((fail+1)); }

# Precondition: we must be inside a git working tree.
if ! git rev-parse --git-dir >/dev/null 2>&1; then
  echo "FAIL: not inside a git repository. cd into your clone of rawgraphs/rawgraphs-app and re-run."
  exit 2
fi

# 1. Repo identity
git remote get-url origin 2>/dev/null | grep -qE "rawgraphs/rawgraphs-app(\\.git)?\\b" \\
  && ok "origin remote is rawgraphs/rawgraphs-app" \\
  || miss "origin remote is not rawgraphs/rawgraphs-app (artifact may be from a fork)"

# 2. License matches what RepoPilot saw
(grep -qiE "^(Apache-2\\.0)" LICENSE 2>/dev/null \\
   || grep -qiE "\"license\"\\s*:\\s*\"Apache-2\\.0\"" package.json 2>/dev/null) \\
  && ok "license is Apache-2.0" \\
  || miss "license drift — was Apache-2.0 at generation time"

# 3. Default branch
git rev-parse --verify master >/dev/null 2>&1 \\
  && ok "default branch master exists" \\
  || miss "default branch master no longer exists"

# 4. Critical files exist
test -f "src/App.js" \\
  && ok "src/App.js" \\
  || miss "missing critical file: src/App.js"
test -f "src/charts.js" \\
  && ok "src/charts.js" \\
  || miss "missing critical file: src/charts.js"
test -f "src/components/ChartPreviewWIthOptions/ChartPreviewWithOptions.js" \\
  && ok "src/components/ChartPreviewWIthOptions/ChartPreviewWithOptions.js" \\
  || miss "missing critical file: src/components/ChartPreviewWIthOptions/ChartPreviewWithOptions.js"
test -f "src/components/DataLoader/DataLoader.js" \\
  && ok "src/components/DataLoader/DataLoader.js" \\
  || miss "missing critical file: src/components/DataLoader/DataLoader.js"
test -f "src/components/ChartOptions/ChartOptions.js" \\
  && ok "src/components/ChartOptions/ChartOptions.js" \\
  || miss "missing critical file: src/components/ChartOptions/ChartOptions.js"

# 5. Repo recency
days_since_last=$(( ( $(date +%s) - $(git log -1 --format=%at 2>/dev/null || echo 0) ) / 86400 ))
if [ "$days_since_last" -le 199 ]; then
  ok "last commit was $days_since_last days ago (artifact saw ~169d)"
else
  miss "last commit was $days_since_last days ago — artifact may be stale"
fi

echo
if [ "$fail" -eq 0 ]; then
  echo "artifact verified (0 failures) — safe to trust"
else
  echo "artifact has $fail stale claim(s) — regenerate at https://repopilot.app/r/rawgraphs/rawgraphs-app"
  exit 1
fi

Each check prints ok: or FAIL:. The script exits non-zero if anything failed, so it composes cleanly into agent loops (./verify.sh || regenerate-and-retry).

RAWGraphs-app is a React-based web interface that lets users upload tabular data (CSV, TSV, pasted text) and interactively create custom vector-based visualizations using D3.js without writing code. Data processing happens entirely in the browser—nothing is sent to servers—and outputs are SVG files editable in vector graphics tools like Illustrator. Single React app rooted at src/App.js with modular component hierarchy: src/components/ChartOptions/ handles visualization parameter UI, src/charts.js manages available chart registry, and sample datasets live in public/sample-datasets/. External visualization logic is delegated to scoped @rawgraphs npm packages (core, charts, calendar-heatmap), keeping the UI layer separate from the rendering engine.

Designers, data journalists, researchers, and visualization geeks who need to go from spreadsheet to publication-ready vector graphics but lack D3.js skills. They want an interactive UI to bind data columns to visual dimensions (position, color, size) and iterate on chart options before exporting.

Actively developed and production-ready. Currently at v2.0.1 with CI/CD pipelines (dev.yml, prod.yml workflows), comprehensive sample datasets in public/sample-datasets/, and modular architecture. The codebase integrates stable external libraries (@rawgraphs/rawgraphs-core@^1.0.0-beta.17, d3@^7.2.0), indicating ongoing maintenance and maturity suitable for public deployment.

Moderate risk: depends on 30+ npm packages including older react-scripts@^4.0.3 (uses OpenSSL legacy provider flag) and several @rawgraphs scoped packages that are beta-versioned (calendar-heatmap@v1.0.0-beta.8, core@1.0.0-beta.17), suggesting potential breaking changes. The monolithic single-app structure means all chart types live in one bundle, and no visible test files in src/ (only src/App.test.js) suggests light test coverage.

Version 2.0.1 is current. The repo has workflow definitions for dev and prod deployments (GitHub Actions). Specific recent activity is not visible from file metadata alone, but the CHANGELOG.md and CONTRIBUTING.md suggest ongoing issue triage and feature development. The integration with SPARQL editors (@rdfjs-elements/sparql-editor) and RDF support (rdf-literal, sparql-http-client) indicates recent experimental feature work.

git clone https://github.com/rawgraphs/rawgraphs-app.git
cd rawgraphs-app
yarn install
yarn start

The app runs on http://localhost:3000 by default. Node.js 23.6.1+ and Yarn 1.22+ are required (as stated in README).

Daily commands:

yarn start          # Dev server on port 3000 with hot reload
yarn build          # Production build to build/ folder
yarn test           # Jest test runner
yarn format         # Prettier auto-format src/

The start script uses --openssl-legacy-provider flag (in package.json) due to Node.js 17+ OpenSSL changes affecting Create React App 4.

• src/App.js — Main entry point and root component orchestrating the entire visualization pipeline—data loading, chart selection, and preview rendering.
• src/charts.js — Central registry defining all available chart types by importing from @rawgraphs/rawgraphs-charts; critical for chart discovery and validation.
• src/components/ChartPreviewWIthOptions/ChartPreviewWithOptions.js — Integrates chart rendering with interactive options, managing the feedback loop between user input and visualization updates.
• src/components/DataLoader/DataLoader.js — Handles all data ingestion methods (upload, paste, URL fetch, SPARQL) and coordinates CSV/TSV parsing before passing to the visualization pipeline.
• src/components/ChartOptions/ChartOptions.js — Renders dynamic form controls for all chart configuration options; driven by chart metadata from RAWGraphs core library.
• package.json — Declares critical dependencies on @rawgraphs/rawgraphs-core, @rawgraphs/rawgraphs-charts, and d3; defines build and deployment configuration.
• public/index.html — Root HTML template for the React SPA; sets up the DOM mount point and public asset references.

Add a new data source loader

1. Create a new loader component in src/components/DataLoader/loaders/ following the pattern of UrlFetch.js or SparqlFetch.js, exporting { name, parse } functions. (src/components/DataLoader/loaders/MyNewLoader.js)
2. Import the new loader in DataLoader.js and add it to the loaders array/menu alongside existing options. (src/components/DataLoader/DataLoader.js)
3. Add optional styling module if your loader has unique UI (e.g., MyNewLoader.module.scss). (src/components/DataLoader/loaders/MyNewLoader.module.scss)

Add a new chart option type

1. Create a new control component in src/components/ChartOptions/ChartOptionTypes/ (e.g., ChartOptionMyType.js) that accepts value and onChange props. (src/components/ChartOptions/ChartOptionTypes/ChartOptionMyType.js)
2. Register the new type in src/components/ChartOptions/ChartOptions.js by adding a case in the switch statement that maps option.type to your component. (src/components/ChartOptions/ChartOptions.js)
3. Charts can now use this option type by specifying it in their chart definition (in @rawgraphs/rawgraphs-charts or custom charts). (src/charts.js)

Integrate a custom chart library

1. Ensure your chart follows the RAWGraphs specification (accepts data, options, and SVG container); place definition in src/components or as an npm package. (src/components/CustomChartLoader/CustomChartLoader.js)
2. In src/charts.js, import your custom chart and append it to the charts array with required metadata (name, description, module, etc.). (src/charts.js)
3. The chart will automatically appear in ChartSelector and be renderable via ChartPreview once registered. (src/components/ChartSelector/ChartSelector.js)

Customize chart color schemes

1. Edit or extend ColorSchemesDropDown.js to add new named color palettes or integrate a color scale library. (src/components/ChartOptions/ChartOptionTypes/ColorSchemesDropDown.js)
2. Update ColorScaleUtils.js to define how color scales are applied and interpolated. (src/components/ChartOptions/ChartOptionTypes/ColorScaleUtils.js)
3. The color controls (ChartOptionColor.js and ChartOptionColorScale.js) will use the updated schemes. (src/components/ChartOptions/ChartOptionTypes/ChartOptionColorScale.js)

• React — Component-based UI composition allows modular, reusable controls for data loading, chart selection, and options management with reactive state updates.
• @rawgraphs/rawgraphs-core & @rawgraphs/rawgraphs-charts — Decouples visualization logic from the UI layer; allows swapping chart implementations and reusing the same core data transformation pipeline across projects.
• d3.js v7 — Industry-standard for data-driven visualization; all RAWGraphs chart implementations depend on d3 for DOM manipulation and visual encoding.
• SVG output — Vector format enables lossless export to desktop design tools (Illustrator, Inkscape); integrates seamlessly with web embedding.
• Browser-only data processing — Privacy-first design: sensitive data never leaves the user's machine; all parsing and rendering happens client-side via JavaScript.
• Bootstrap CSS framework — Provides responsive grid, form controls, and utility classes for consistent UI across desktop and mobile viewports.

• Browser-only data processing (no backend storage)

  • Why: Privacy and simplicity: avoids data transmission and server-side security concerns.
  • Consequence: Users cannot persist or share projects on the server; project state must be exported as JSON or SVG by the user manually.

• Dynamic form generation from chart metadata

  • Why: Scales chart option diversity without per-chart UI boilerplate; metadata drives the control types.
  • Consequence: Requires strict adherence to chart metadata schema; custom chart developers must follow the specification exactly.

• Monolithic App.js with lifted state

  • Why: Simplified data flow and debugging for a single-page visualization tool.
  • Consequence: App.js may grow large as features expand; potential performance bottleneck if state updates become frequent.

• Multiple data ingestion methods (upload, paste, URL, SPARQL, saved project)

  • Why: Accommodates diverse user workflows (spreadsheet users, API integrations, RDF data sources, saved work).
  • Consequence: DataLoader component complexity increases; each loader must implement consistent error handling

OpenSSL flag required: yarn start uses --openssl-legacy-provider in package.json—Node.js 17+ cannot build otherwise without it; don't remove. Web Worker limitation: Comlink + worker-loader mean heavy computations run off-thread, but bundling and debugging Web Workers differs from standard React code. Beta dependencies: @rawgraphs/rawgraphs-core@1.0.0-beta.17 and calendar-heatmap@v1.0.0-beta.8 may have undocumented breaking changes; check their CHANGELOGs before upgrading. No .env file visible: Check if any ENV vars are required by @rawgraphs packages or SPARQL features (not documented in README). React 17: Older version (current stable is 18+); JSX transform changes and hook behavior differ from latest.

• SVG-based vector visualization — RAWGraphs exports charts as SVG (not raster), which is the core feature enabling post-export editing in Illustrator. Understanding SVG generation in D3 is essential to modifying chart outputs.
• Data binding (D3 pattern) — The app's core concept is mapping data columns (dimensions) to visual properties (position, color, size). D3's data binding model (enter-update-exit) is how @rawgraphs-core implements this.
• Web Workers (via Comlink) — Large datasets are processed in background threads using comlink + worker-loader to prevent UI blocking. Debugging and bundling Web Workers differs from normal React code.
• Tabular data transformation (column → dimension binding) — Users paste CSV/TSV; the app must parse, preview in react-data-grid, allow column selection, and remap to chart dimensions (e.g., 'Country' → X-axis). This is the data flow through src/App.js.
• SPARQL/RDF support (experimental) — Dependencies on @rdfjs-elements/sparql-editor, rdf-literal, and sparql-http-client indicate in-development SPARQL query capabilities. Understanding RDF triples is needed for SPARQL features.
• React-DnD (Drag-and-Drop) — The ChartOptions UI likely uses react-dnd to let users interactively reorder or reassign data dimensions to visual encodings. Essential for the interactive parameter-binding UX.
• Client-side-only data processing (no backend) — All computation (data parsing, visualization, SVG rendering) happens in the browser; no server storage. This is a core privacy/security guarantee and affects architecture (Web Workers for heavy lifting, localStorage for state).

• rawgraphs/rawgraphs-core — The visualization engine that rawgraphs-app depends on (@rawgraphs/rawgraphs-core); contains the D3-based chart implementations and data transformation logic
• rawgraphs/rawgraphs-charts — Scoped package containing chart type definitions and templates that are imported and used by the app UI
• mbostock/d3 — D3.js (v7.2.0) is the underlying visualization library; all chart rendering ultimately delegates to D3 primitives
• observable-plot/plot — Modern alternative to D3 for grammar-of-graphics charting; relevant if considering future architecture simplification
• vega/vega — Another declarative visualization grammar supporting data-to-visual encoding; represents design philosophy alignment with RAWGraphs' intent

To work on one of these in Claude Code or Cursor, paste: Implement the "<title>" PR idea from CLAUDE.md, working through the checklist as the task list.

Add unit tests for ChartOptionTypes components

The src/components/ChartOptions/ChartOptionTypes directory contains 9 component files (ChartOptionBoolean.js, ChartOptionColor.js, ChartOptionColorScale.js, etc.) but there's only an App.test.js at the root level. These form components are critical for user interaction and data validation. Adding tests would prevent regressions in color picker behavior, number validation, and select option rendering. This directly impacts data visualization accuracy.

• [ ] Create src/components/ChartOptions/ChartOptionTypes/tests directory
• [ ] Add test files for ChartOptionColor.js, ChartOptionNumber.js, ChartOptionSelect.js, and ChartOptionColorScale.js covering rendering and onChange callbacks
• [ ] Test ColorScaleUtils.js color interpolation and scale generation logic
• [ ] Ensure tests verify integration with react-color library used in ChartOptionColor.js
• [ ] Add tests to CI workflow (currently .github/workflows/dev.yml and prod.yml lack test execution)

Add E2E tests for data upload and chart generation workflow

The app supports multiple data input methods (dropzone via react-dropzone, paste, sample datasets in public/sample-datasets/) but there's no E2E test coverage for critical user flows. No integration tests verify that uploading a TSV/CSV file successfully loads into the data grid (react-data-grid) and renders a chart. This is a high-risk gap given the core functionality depends on this workflow.

• [ ] Set up Cypress or Playwright configuration in project root (currently absent)
• [ ] Create E2E test file for data upload flow: upload public/sample-datasets/Bar chart - Netflix Original Series.tsv, verify it loads in react-data-grid
• [ ] Add E2E test for copy-paste workflow and verify chart preview renders
• [ ] Add E2E test for sample dataset loading via UI and subsequent chart generation
• [ ] Integrate E2E tests into .github/workflows/dev.yml to run on PRs

Refactor ChartPreviewWithOptions into separate concerns and add missing prop validation

src/components/ChartPreviewWIthOptions/ChartPreviewWithOptions.js (note the typo 'WIth') likely combines data state management, chart rendering, and options handling without clear separation. This pattern often leads to prop drilling and hard-to-test code. Additionally, with react-dnd and worker-loader being used, this component likely orchestrates complex interactions that need explicit prop validation. Adding PropTypes or TypeScript interfaces would catch integration bugs early.

• [ ] Rename directory from ChartPreviewWIthOptions to ChartPreviewWithOptions and update all imports
• [ ] Add PropTypes validation to ChartPreviewWithOptions.js for all props (chart config, data state, callbacks)
• [ ] Extract chart rendering logic into separate ChartRenderer.js component
• [ ] Extract options update handling into a custom hook (e.g., useChartOptions.js) to decouple from component tree
• [ ] Add JSDoc comments documenting expected data structures passed from parent (src/App.js)
• [ ] Add integration tests in tests/ChartPreviewWithOptions.test.js verifying prop changes trigger re-renders

• Add unit tests for src/HeaderItems.js and src/charts.js—currently only src/App.test.js exists. Set up a test file using React Testing Library to verify chart registry loading and header control state.: Low-hanging test coverage improvement; these files are pure JS/component logic with no external side effects, ideal for a junior to learn the testing setup.
• Document the chart options UI component architecture. Currently src/components/ChartOptions/ lacks inline JSDoc. Create a COMPONENT_API.md or annotate ChartOptionTypes/ files to explain how new chart types add option controls.: Improves contributor onboarding and unblocks chart-type contributions; documentation gaps are easier for juniors to fill than code refactors.
• Add an example workflow in CONTRIBUTING.md showing how to test a new visualization locally. Include steps to: (1) add a sample dataset, (2) register it in charts.js, (3) verify export. Currently CONTRIBUTING.md exists but is minimal.: Practical; lets a junior practice the full feature-add cycle while documenting it for the next person.

• High · Outdated React Version with Known Vulnerabilities — package.json - dependencies.react. The project uses React 17.0.2, which is outdated and no longer receives security updates. React 18.x and later versions contain important security patches and bug fixes. Fix: Upgrade React to the latest stable version (18.x or 19.x) to receive security updates and performance improvements.
• High · Vulnerable React Scripts Version — package.json - dependencies.react-scripts. react-scripts 4.0.3 is outdated and may contain known vulnerabilities. Current versions are significantly newer and include security patches. Fix: Upgrade react-scripts to version 5.x or later to ensure security patches are applied.
• High · Outdated Testing Dependencies — package.json - dependencies [@testing-library/*]. @testing-library/jest-dom (4.2.4), @testing-library/react (9.3.2), and @testing-library/user-event (7.1.2) are significantly outdated and may have known vulnerabilities. Fix: Update testing libraries to the latest versions (jest-dom@6.x, react@14.x+, user-event@14.x+).
• Medium · React Color Package with Known Issues — package.json - dependencies.react-color. react-color 2.17.3 is pinned to an old version and may contain vulnerabilities. This package has had security concerns in past versions. Fix: Update to the latest version of react-color or consider migrating to a more actively maintained color picker component.
• Medium · Legacy OpenSSL Provider Required — package.json - scripts.start. The start script requires --openssl-legacy-provider flag, indicating the use of deprecated OpenSSL features. This suggests potential compatibility issues with newer Node.js versions and may indicate outdated build tooling. Fix: Update dependencies and build configuration to work with modern OpenSSL. Investigate why legacy provider is needed and upgrade affected packages.
• Medium · Potential XSS Risk in Chart Visualization — src/components/ChartOptions, src/components/ChartPreview. The application renders SVG-based visualizations from user data via d3.js. While d3 generally handles escaping, improper handling of user input in chart options or data could lead to XSS vulnerabilities. Fix: Ensure all user inputs are properly sanitized before being used in d3 selections. Implement Content Security Policy (CSP) headers to mitigate XSS risks.
• Medium · Dynamic Data Processing Without Validation — src/components/DataGrid, public/sample-datasets/. The application loads and processes tabular data from various sources (paste, upload, sample datasets). Without proper validation and sanitization, malicious data structures could cause issues. Fix: Implement strict data validation schemas for all imported datasets. Sanitize and validate data before processing and rendering.
• Medium · Missing Security Headers Configuration — public/index.html, package.json build configuration. No visible configuration for security headers (CSP, X-Frame-Options, X-Content-Type-Options, etc.) in the build or public folder configuration. Fix: Add security headers configuration through index.html meta tags or configure them on the server serving the application. Implement Content Security Policy.
• Low · Outdated Lodash Version — package.json - dependencies.lodash. While lodash 4.17.21 is reasonably current, it's a common utility library. Ensure no known vulnerabilities exist in this specific version. Fix: Monitor for vulnerabilities in lodash 4.17.21 using npm audit. Consider updating to the latest 4.x version if patches are released.
• Low · Custom Chart Loader Security — src/components/CustomChartLoader/. The CustomChartLoader component loads external chart definitions. If these are loaded from user input or untrusted sources, this could be an attack vector. Fix: Ensure custom charts are only

LLM-derived; treat as a starting point, not a security audit.

• Open issues — current backlog
• Recent PRs — what's actively shipping
• Source on GitHub

Generated by RepoPilot. Verdict based on maintenance signals — see the live page for receipts. Re-run on a new commit to refresh.