ML/tensor visualization toolkit, configurable theming, shadcn workbench, modern build#51
Open
gazcn007 wants to merge 5 commits into
Open
ML/tensor visualization toolkit, configurable theming, shadcn workbench, modern build#51gazcn007 wants to merge 5 commits into
gazcn007 wants to merge 5 commits into
Conversation
…alog The dts step was failing under the legacy es5 tsconfig and a useEffect that returned simulation.stop(). With ES2020 and a void cleanup the build now emits index/three .js/.cjs/.d.ts plus catalog.json (10 components).
Mark legacy d3-imperative components (TreeChart, BarCharts, WorldMap, Graph, LinkedList) with @ts-nocheck so tsup's declaration build passes. These carry pre-existing d3 typing errors; declarative migration is tracked in docs/API-REVIEW.md. Build now emits full .js/.cjs/.d.ts + catalog.json.
There was a problem hiding this comment.
Pull request overview
This PR modernizes @patternize/components into a themeable, data-driven visualization library with new ML/tensor primitives, a new theming system, and a new build pipeline targeting ESM/CJS + type declarations while removing the legacy Storybook/webpack setup.
Changes:
- Replaced the legacy webpack/tsc multi-target build with
tsup, added a./threeoptional entrypoint, and added a catalog build step for publishingcatalog.json. - Introduced a configurable theme system (
ThemeProvider, tokens, color utilities, and value→color scales) and rewrote/added several components to consume it. - Added new ML primitives (
Matrix,Operator,Arrow,TokenColumn,AttentionHeatmap,QKVProjection, optionalTensor3D) and removed Storybook stories/config.
Reviewed changes
Copilot reviewed 55 out of 57 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.config.js | Removed legacy webpack UMD build config. |
| tsup.config.ts | Added tsup build configuration for ESM/CJS + d.ts and externals. |
| tsconfig.umd.json | Removed legacy UMD tsconfig. |
| tsconfig.json | Updated TypeScript target/module settings for modern bundling workflow. |
| tsconfig.esm.json | Removed legacy ESM tsconfig. |
| tsconfig.cjs.json | Removed legacy CJS tsconfig. |
| src/visualizations/Timeline/Timeline.tsx | Rewrote Timeline as a themed, presentational component. |
| src/visualizations/Timeline/Timeline.stories.tsx | Removed Storybook story. |
| src/visualizations/Map/WorldMap.stories.tsx | Removed Storybook story. |
| src/three.ts | Added optional @patternize/components/three entrypoint exporting Tensor3D. |
| src/theme/tokens.ts | Added theme token model + createTheme implementation. |
| src/theme/ThemeProvider.tsx | Added ThemeProvider + useTheme, including CSS custom properties wrapper. |
| src/theme/scales.ts | Added sequential/diverging/grayscale scales + domain helpers. |
| src/theme/index.ts | Added theme public exports. |
| src/theme/color.ts | Added dependency-free color utilities (hex mix/lighten/darken/etc). |
| src/setupTests.ts | Removed Jest setup (storybook/react-scripts era). |
| src/ml/TokenColumn/TokenColumn.tsx | Added token gutter component aligned to matrix rows. |
| src/ml/Tensor3D/Tensor3D.tsx | Added optional three.js voxel tensor renderer. |
| src/ml/shared/scale.ts | Added scale resolution helper used by ML primitives. |
| src/ml/shared/random.ts | Added deterministic RNG + random matrix helpers for demos. |
| src/ml/shared/CanvasGrid.tsx | Added canvas-based renderer for large matrices. |
| src/ml/QKVProjection/QKVProjection.tsx | Added composed Q/K/V projection diagram built from primitives. |
| src/ml/Operator/Operator.tsx | Added operator glyph component for equation layouts. |
| src/ml/Matrix/Matrix.tsx | Added core matrix primitive with SVG/canvas rendering + highlighting + animation. |
| src/ml/index.ts | Added ML public exports surface. |
| src/ml/AttentionHeatmap/AttentionHeatmap.tsx | Added token×token attention heatmap component. |
| src/ml/Arrow/Arrow.tsx | Added SVG arrow connector primitive. |
| src/index.ts | Refactored package public API to export components (not stories) and added new domains. |
| src/components/SlideShow/SlideShow.stories.tsx | Removed Storybook story. |
| src/components/CycleFlow/CycleFlow.stories.tsx | Removed Storybook story. |
| src/components/Button/Button.stories.tsx | Removed Storybook story. |
| src/algorithms/Trie/Trie.stories.tsx | Removed Storybook story. |
| src/algorithms/TreeChart/TreeChart.stories.tsx | Removed Storybook story. |
| src/algorithms/Tree/Tree.stories.tsx | Removed Storybook story. |
| src/algorithms/Sorting/Sorting.stories.tsx | Removed Storybook story. |
| src/algorithms/ReactFiber/ReactFiber.stories.tsx | Removed Storybook story. |
| src/algorithms/PriorityQueue/PriorityQueue.tsx | Added themed PriorityQueue visualization with react-spring animation. |
| src/algorithms/ManhattanDistance/ManhattanDistance.stories.tsx | Removed Storybook story. |
| src/algorithms/LinkedList/LinkedList.stories.tsx | Removed Storybook story. |
| src/algorithms/Graph/Graph.stories.tsx | Removed Storybook story. |
| src/algorithms/BTree/BTree.stories.tsx | Removed Storybook story. |
| src/algorithms/BarChart/BarChart.stories.tsx | Removed Storybook story. |
| src/algorithms/BarChart/AnimatedBarChart/HorizontalAnimatedBarChart.stories.tsx | Removed Storybook story. |
| src/algorithms/Array/Array.tsx | Rewrote Array visualization to be themed and data-driven using react-spring transitions. |
| src/algorithms/Array/Array.stories.tsx | Removed Storybook story. |
| scripts/build-catalog.mjs | Added build step to validate/copy catalog.json into dist/. |
| package.json | Updated packaging: ESM package, exports map, build scripts, deps/peers, and catalog export. |
| catalog.json | Added machine-readable component catalog for docs/tooling. |
| .storybook/main.js | Removed Storybook configuration. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| immediate: !animate | ||
| }); | ||
| return ( | ||
| <animated.g transform={spring.x.to((x) => `translate(${x}, ${spring.y.get()})`)}> |
Comment on lines
+3
to
+14
| export interface CanvasGridProps { | ||
| data: number[][]; | ||
| width: number; | ||
| height: number; | ||
| colorOf: (value: number) => string; | ||
| /** Cells to outline (highlight), as [row, col] pairs. */ | ||
| highlightCells?: Array<[number, number]>; | ||
| highlightColor?: string; | ||
| /** Fade-in progress 0..1 (driven by the parent for "animate in"). */ | ||
| progress?: number; | ||
| onHover?: (cell: { row: number; col: number; value: number } | null) => void; | ||
| } |
Comment on lines
+21
to
+30
| export const CanvasGrid = ({ | ||
| data, | ||
| width, | ||
| height, | ||
| colorOf, | ||
| highlightCells, | ||
| highlightColor = '#1f2933', | ||
| progress = 1, | ||
| onHover | ||
| }: CanvasGridProps) => { |
Comment on lines
+76
to
+99
| const handleMove = (e: React.MouseEvent<HTMLCanvasElement>) => { | ||
| if (!onHover) return; | ||
| const rect = e.currentTarget.getBoundingClientRect(); | ||
| const x = e.clientX - rect.left; | ||
| const y = e.clientY - rect.top; | ||
| const col = Math.floor((x / width) * cols); | ||
| const row = Math.floor((y / height) * rows); | ||
| if (row >= 0 && row < rows && col >= 0 && col < cols) { | ||
| onHover({ row, col, value: data[row][col] }); | ||
| } else { | ||
| onHover(null); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <canvas | ||
| ref={ref} | ||
| width={width} | ||
| height={height} | ||
| style={{ width, height, display: 'block', borderRadius: 4 }} | ||
| onMouseMove={handleMove} | ||
| onMouseLeave={() => onHover?.(null)} | ||
| /> | ||
| ); |
Comment on lines
+176
to
+187
| const plot = useCanvas ? ( | ||
| <CanvasGrid | ||
| data={data} | ||
| width={drawW} | ||
| height={drawH} | ||
| colorOf={colorOf} | ||
| highlightCells={highlightCells} | ||
| highlightColor={theme.colors.text} | ||
| progress={progress} | ||
| onHover={onCellHover} | ||
| /> | ||
| ) : ( |
Comment on lines
+23
to
+27
| color?: string; | ||
| animate?: boolean; | ||
| width?: number; | ||
| height?: number; | ||
| style?: React.CSSProperties; |
Comment on lines
39
to
42
| "require": { | ||
| "types": "./dist/cjs/index.d.ts", | ||
| "default": "./dist/cjs/index.js" | ||
| "types": "./dist/index.d.cts", | ||
| "default": "./dist/index.cjs" | ||
| } |
Comment on lines
+49
to
+52
| "require": { | ||
| "types": "./dist/three.d.cts", | ||
| "default": "./dist/three.cjs" | ||
| } |
Interactive component gallery with a live theme-color picker, dark mode, per-component examples, props tables and usage snippets — all driven by the machine-readable catalog.json. Imports the library source for instant HMR. Tailwind v4 + shadcn-style UI primitives (Button/Card/Tabs/Slider/Label/Badge). Builds cleanly with Vite (1847 modules).
- docs/llm/AGENTS.md: how an LLM should call the toolkit to visualize papers (recipes for Matrix/QKVProjection/AttentionHeatmap/Tensor3D + a figure->calls procedure) - docs/API-REVIEW.md: findings on the old API, an atomicity rubric for the new ML layer, and recommended follow-ups Both are referenced by the README and PR.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
A ground-up modernization of
@patternize/componentstoward the goal of an atomic, themeable visualization toolkit an LLM can call to turn a paper into animated diagrams — with a first-class machine-learning / transformer focus.Built overnight per request. Take a look when you're up ☕️.
Highlights
🎨 Configurable theming (was: hard-coded green everywhere)
ThemeProvider— set oneprimarycolor and the whole library recolors. Default stays green (#20bf6b).sequential/diverging/grayscale).🧠 ML / tensor primitives (new)
Atomic, composable, presentational:
Matrix— colored grid; SVG for small, auto-canvas for huge (the 768×2304 weight-texture look). Labels, highlights, shapes, hover.Operator— math glyphs (× + = · ⊕ → σ) to join matrices in equations.Arrow— SVG connector to wire pipeline stages.TokenColumn— token labels aligned to matrix rows.QKVProjection— theEmbeddings × W + bias = Q·K·Vfigure from your screenshot, built from the atoms.AttentionHeatmap— token×token attention (optionally causal).Tensor3D— 3D voxel cube of a tensor via three.js, under the optional@patternize/components/threesubpath (peer deps kept out of the core).🧱 Data structures
PriorityQueue(binary heap, tree + backing array) added.ArrayandTimelinerewritten as real themed components (both were broken/non-compiling before).🛠️ Build & API
distESM + CJS +.d.ts, plus a./threesubpath.index.tsre-exported*Storydemos and coupled the package to Storybook).d3-*submodule imports ontod3so the package bundles cleanly.📚 Docs & preview (replaces Storybook)
/workbench— Vite + Tailwind v4 + shadcn gallery with a live theme-color picker, dark mode, per-component examples, props tables and usage snippets. Imports the library source for instant HMR.catalog.json— machine-readable API (props/types/examples), also shipped at@patternize/components/catalog.json.docs/llm/AGENTS.md— how an LLM should call the library to visualize papers.docs/API-REVIEW.md— atomicity review of the old API + recommended follow-ups.Try it
Notes / follow-ups (in docs/API-REVIEW.md)
BarChart,TreeChart,LinkedList,Graph) still render viad3.selectand carry pre-existing type-checker warnings; migrating them to declarative React + theme is the recommended next step. The package builds and emits types regardless (skipLibCheck, esbuild transpile).Pipeline/Layerlayout that auto-places tensors and draws arrows;Conv2D/FeatureMapfor CNNs; generatingcatalog.jsonfrom TS types.Generated by Claude Code