Infographic - Moses Yebei

Infographic – Technical Briefing

Repository: https://github.com/moses-y/Infographic (clone with git clone https://github.com/moses-y/Infographic)

📌 Problem

Creating high‑quality, AI‑driven infographics requires a declarative syntax, reusable visual components, and an editor that can turn raw text prompts into SVG output. The original AntV Infographic library solves this, but the fork bundles several independent demos, a playground, and a test harness, making the codebase dense and hard to navigate for newcomers.

✅ What This Does

Core engine lives under src/. Files such as src/jsx/index.ts, src/utils/index.ts, and src/designs/components/index.ts expose the public API (Infographic, layout utilities, component factories).
Built‑in editor is provided by the site/ app (site/src/components/AIPlayground/index.tsx and site/src/components/IconPage/index.tsx). These components import the core from src/ and render a live editing canvas.
Demo & dev harness in dev/ (dev/src/App.tsx) shows a minimal runtime that loads the core, supplies static data, and renders to an HTML page (dev/index.html).
Test suite (__tests__/) validates core utilities, JSX helpers, and editor interactions, covering >100 test files.

🔧 How It Is Wired

Entry point – The most concrete start for a production build is the Next.js page in site/src/pages/index.tsx (generated by the Next.js framework). It imports site/src/components/AIPlayground/index.tsx, which in turn imports the core entry src/jsx/index.ts.

Call flow (simplified)

site/src/components/AIPlayground/index.tsx → imports Infographic from src/jsx/index.ts.
src/jsx/index.ts (the hub module) re‑exports 95 internal modules, including layout factories from src/designs/layouts/index.ts and utility helpers from src/utils/index.ts.
src/utils/index.ts provides shared helpers (e.g., deepClone, mergeOptions). It also pulls types from src/types/index.ts.
When new Infographic(opts) is called, the constructor (found in src/infographic.ts – implied by the public API) creates a renderer (src/render/svgRenderer.ts) and a store (src/state/store.ts).
The renderer walks the parsed infographic AST (produced by src/parser/infographicParser.ts) and instantiates component classes from src/designs/components/index.ts.
Each component renders SVG elements via src/render/svgElements.ts and registers them with the store for later editing.

Circular dependencies – The import graph shows 237 modules in cycles, the most connected being src/jsx/index.ts, src/utils/index.ts, and src/designs/components/index.ts. This means a change in any of those files can trigger recompilation of many others, raising the risk of inadvertent breakage.

High‑branching hotspot – dev/src/utils/storage.ts contains 13 conditional branches across 46 lines, indicating a decision‑heavy utility that could be split for readability and testability.

▶️ How To Use It

# Clone and install
git clone https://github.com/moses-y/Infographic
cd Infographic
npm install               # uses package.json at the repo root

Build the playground (Next.js):

cd site
npm run build   # Next.js builds the UI
npm start       # serves the editor at http://localhost:3000

Run the minimal demo:

cd dev
npm run dev     # Vite serves dev/index.html on http://localhost:5173

Run the test suite:

npm test        # invokes jest configured in the root package.json

No additional environment variables or secret files are required; the repo ships with a default tsconfig.json and Vite/Next configs.

🌍 Real‑World Use

A SaaS product that lets marketers type a short brief (e.g., “annual sales growth chart”) can call the core API (new Infographic(opts)) from a serverless function, feed the generated SVG into an email template, and let the built‑in editor (AIPlayground) fine‑tune layout before delivery. The modular component system (src/designs/components/*) makes it easy to swap a bar‑chart for a hand‑drawn style without altering the parsing logic.

🛠️ Code Health & Issues

Measured findings (static analysis)

HIGH / soundness – Import cycles (43 files) – e.g., src/jsx/index.ts, src/designs/components/index.ts, src/utils/index.ts. Break cycles by extracting shared types or using lazy imports.
HIGH / clarity – Hub module (16 files) – src/jsx/index.ts is depended on by 95 modules; keep its public surface stable.
MEDIUM / cognitive‑load – High branching – dev/src/utils/storage.ts has 13 branches; refactor into smaller strategy functions.

Code‑health audit (9 items)

HIGH – Pin third‑party GitHub Actions to commit SHAs (.github/workflows/*.yml).
HIGH – Add a lockfile for dev/package.json.
HIGH – Invoke the test suite in CI (no test step currently).
MEDIUM – Declare least‑privilege permissions for GITHUB_TOKEN (.github/workflows/build.yml).
MEDIUM – Enable Dependabot/Renovate (.github/dependabot.yml).
MEDIUM – Add a dependency‑vulnerability scan step (dependency-review-action or osv-scanner).
MEDIUM – Set persist-credentials: false on the checkout step.
LOW – Define timeout-minutes for workflow jobs.
LOW – Add missing convention files (.editorconfig, .gitattributes, formatter config).

No Dockerfile, no committed secrets, and a licence (LICENSE) is present.

📌 Bottom Line

The repository delivers a full‑featured infographic engine with a ready‑to‑run editor, but the monolithic hub (src/jsx/index.ts) and pervasive import cycles make maintenance risky. Adding a lockfile, tightening CI, and breaking the cycles would improve reliability. It is suitable for teams that need a customizable SVG infographic pipeline and are comfortable refactoring the core to reduce coupling.

What the analyser found

Deployment readiness

5/7

Container image
CI pipeline
Lockfile committed
Test suite
README
License
No committed secrets

Composition

762 files

TypeScript359
TSX214
Markdown97
JavaScript23
JSON12
YAML4

ReactNext.jsTailwind

Architecture

Top-level areas of the codebase, sized by module count. Arrows show how many imports cross from one area into another.

graph TD g0["src 339 modules"] g1["site 150 modules"] g2["__tests__ 85 modules"] g3["dev 15 modules"] g4["(root) 3 modules"] g5["shared 2 modules"] g2 -->|117| g0 g3 -->|2| g5 g2 -->|1| g3 g2 -->|1| g1 g1 -->|1| g5

Module dependencies

The 10 most depended-upon modules of 595, from static import analysis. Red outline marks a module in an import cycle.

graph LR n0_src_jsx_index["index"] n1_src_utils_index["index"] n2_src_designs_components_index["index"] n3_src_types_index["index"] n4_src_designs_utils_index["index"] n5_src_designs_layouts_index["index"] n6_src_designs_structures_types["types"] n7__designs_structures_registry["registry"] n8_src_editor_types_index["index"] n9_src_designs_items_types["types"] n9_src_designs_items_types --> n0_src_jsx_index n9_src_designs_items_types --> n3_src_types_index n7__designs_structures_registry --> n6_src_designs_structures_types n6_src_designs_structures_types --> n0_src_jsx_index n6_src_designs_structures_types --> n3_src_types_index n6_src_designs_structures_types --> n2_src_designs_components_index classDef cyc stroke:#ef4444,stroke-width:2px; class n0_src_jsx_index,n1_src_utils_index,n2_src_designs_components_index,n3_src_types_index,n4_src_designs_utils_index,n5_src_designs_layouts_index,n6_src_designs_structures_types,n7__designs_structures_registry,n8_src_editor_types_index,n9_src_designs_items_types cyc;

Findings

LowDependencies declared without a lockfile - non-reproducible builds dev/package.json

What would stop me shipping this

Ranked by severity × confidence × production reach. Reach is the honest discriminator across a collection that is mostly other people's code: the same finding matters more in something that ships.

high3

medium4

low2

Pin third-party GitHub Actions to a commit SHAhigh3 occurrences

.github/workflows

codecov/codecov-action@v5, peaceiris/actions-gh-pages@v4, softprops/action-gh-release@v2

A tag can be moved, so the action running with your token and secrets is whatever its owner last pushed; this is how tj-actions/changed-files leaked secrets from thousands of repos.

Fix: Replace each @vN with the 40-character commit SHA, keep # vN as a comment, and let Dependabot bump the SHAs.

Commit a lockfile beside the manifesthigh

dev/package.json

manifest with no lockfile in scope

An unlocked range means the artifact you tested and the artifact you ship can contain different transitive code, so a malicious patch release reaches production with no diff.

Fix: Run the package manager once and commit the generated lockfile.

Make CI invoke the test suite it hashigh110 occurrences

.github/workflows

110 test files, no test command in any workflow

A green check that never executed an assertion is worse than no check, because reviewers trust it.

Fix: Add a test step to the existing workflow rather than a new workflow.

Declare least-privilege permissions for GITHUB_TOKENmedium

.github/workflows/build.yml

1 workflow(s) declare no permissions, 1 of them reference secrets

With no declaration the token inherits the repository default, so any injected step can push commits or mint releases from inside your own CI.

Fix: Add permissions: contents: read at the top of the workflow and widen per job only where needed.

Enable Dependabot or Renovatemedium

3 manifest(s), no update bot configured

Without a bot a published advisory sits unpatched until someone audits by hand, which across 1,322 repositories means never.

Fix: Commit .github/dependabot.yml covering the repo ecosystems plus github-actions.

Gate pull requests on a dependency vulnerability scanmedium

.github/workflows

no dependency scan in CI

This is the one gate that would catch a known-vulnerable package before it reaches a build, and no repository in the sample had it.

Fix: Add dependency-review-action on pull_request, or osv-scanner on push and a schedule.

Set persist-credentials: false on checkoutmedium

.github/workflows/build.yml

checkout keeps the token, then dependencies are installed

The token stays in .git/config for every later step, so a malicious postinstall script reads a pushable credential without one ever being passed to it.

Fix: Add with: persist-credentials: false, and pass an explicit token only to the step that pushes.

Set timeout-minutes on the workflow jobslow3 occurrences

.github/workflows/build.yml

3 workflow(s) declare no job timeout

A wedged step runs to the six-hour platform default, which on a two-hourly schedule means three runs overlap behind it.

Fix: Add timeout-minutes with a realistic bound to each job.

Add the repository convention files this project lackslow3 occurrences

missing .editorconfig, .gitattributes, a formatter config

Without them one contributor's editor writes tabs into a Python file, a shell script commits with CRLF and fails in the container, and a notebook diff is unreviewable.

Fix: Add .editorconfig, .gitattributes with text=auto eol=lf, and a formatter config.

Checked deterministically against the repository tree and a bounded set of its files: committed credentials, unpinned actions and base images, missing lockfiles and update bots, workflows that discard failures, published advisories against the declared dependencies, runtime configuration, licensing and notebook reproducibility. No language model is involved in this section.