mcma-webui/graphify-out/GRAPH_REPORT.md

Graph Report - . (2026-07-11)

Corpus Check

• 182 files · ~63,741 words
• Verdict: corpus is large enough that graph structure adds value.

Summary

• 671 nodes · 1391 edges · 56 communities (39 shown, 17 thin omitted)
• Extraction: 97% EXTRACTED · 3% INFERRED · 0% AMBIGUOUS · INFERRED: 44 edges (avg confidence: 0.74)
• Token cost: 240,902 input · 0 output

Community Hubs (Navigation)

• Track/Player UI Components
• Store Persistence & Local Library
• App Routes & Feature Pages
• Runtime Package Dependencies
• Package Dev Dependencies
• Downloads & Storage Stats
• Instance Connection & Config
• Layout Nav & Permissions
• Library/Playlist API & Mappers
• Project Docs & CI
• React Best Practices Skill Docs
• TypeScript Config
• App Entry & Misc APIs
• Service Worker Cache Core
• Auth & Admin API Types
• External Search API
• Upload Page
• Metadata Editor Page
• Downloads API & Types
• React Compiler & Memoization Rules
• Effects & Derived State Rules
• Test TypeScript Config
• Auth Store Slice
• JS Caching Performance Rules
• Server Caching Rules
• Track Types & Context Menu
• Loop Optimization Rules
• Env Type Declarations
• Lazy Loading Rules
• Event Listener Rules
• SVG Optimization Rules
• Script Loading Rules
• Iteration Optimization Rules
• Lookup Optimization Rules
• Hydration Rules
• Resource Preloading Rules
• RSC Serialization Rules
• Parallel Data Fetching Rules
• Docker Runtime Config Script
• Conditional Rendering Rule
• Defer Reads Rule
• Non-blocking Server Work Rule
• Admin RTKQ Hooks
• Auth RTKQ Hooks
• Downloads RTKQ Hooks
• Library RTKQ Hooks
• Playlists RTKQ Hooks
• Search RTKQ Hooks
• Storage RTKQ Hooks

God Nodes (most connected - your core abstractions)

1. useAppSelector() - 31 edges
2. useAppDispatch() - 28 edges
3. formatDuration() - 17 edges
4. compilerOptions - 17 edges
5. getCoverUrl() - 16 edges
6. Vercel React Best Practices Skill - 15 edges
7. TrackRow() - 13 edges
8. upsertInstance() - 13 edges
9. getApiBaseUrl() - 13 edges
10. Vercel React Best Practices - AGENTS.md (Compiled Document) - 13 edges

Surprising Connections (you probably didn't know these)

• favicon.png (cartoon mascot icon) --conceptually_related_to--> MCMA Web UI (control center role) [AMBIGUOUS] public/favicon.png → CLAUDE.md
• CLAUDE.md (MCMA webui project guidance) --conceptually_related_to--> README.md (rsbuild scaffold readme) [INFERRED] CLAUDE.md → README.md
• Rsbuild Best Practices Skill --semantically_similar_to--> Avoid Barrel File Imports [INFERRED] [semantically similar] .agents/skills/rsbuild-best-practices/SKILL.md → .agents/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md
• Calculate Derived State During Rendering --semantically_similar_to--> Subscribe to Derived State [INFERRED] [semantically similar] .agents/skills/vercel-react-best-practices/rules/rerender-derived-state-no-effect.md → .agents/skills/vercel-react-best-practices/rules/rerender-derived-state.md
• Calculate Derived State During Rendering --semantically_similar_to--> Put Interaction Logic in Event Handlers [INFERRED] [semantically similar] .agents/skills/vercel-react-best-practices/rules/rerender-derived-state-no-effect.md → .agents/skills/vercel-react-best-practices/rules/rerender-move-effect-to-event.md

Import Cycles

• 3-file cycle: src/api/baseQuery.ts -> src/store/index.ts -> src/api/index.ts -> src/api/baseQuery.ts

Hyperedges (group relationships)

• Eliminating Waterfalls Rule Group (Section 1, CRITICAL impact) — agents_skills_vercel_react_best_practices_rules_async_cheap_condition_before_await_rule, agents_skills_vercel_react_best_practices_rules_async_defer_await_rule, agents_skills_vercel_react_best_practices_rules_async_dependencies_rule, agents_skills_vercel_react_best_practices_rules_async_parallel_rule, agents_skills_vercel_react_best_practices_rules_async_api_routes_rule, agents_skills_vercel_react_best_practices_rules_async_suspense_boundaries_rule [EXTRACTED 1.00]
• Bundle Size Optimization Rule Group (Section 2, CRITICAL impact) — agents_skills_vercel_react_best_practices_rules_bundle_analyzable_paths_rule, agents_skills_vercel_react_best_practices_rules_bundle_barrel_imports_rule, agents_skills_vercel_react_best_practices_rules_bundle_conditional_rule, agents_skills_vercel_react_best_practices_rules_bundle_defer_third_party_rule [EXTRACTED 1.00]
• useEffectEvent Stable-Callback Pattern Group — agents_skills_vercel_react_best_practices_rules_advanced_effect_event_deps_rule, agents_skills_vercel_react_best_practices_rules_advanced_event_handler_refs_rule, agents_skills_vercel_react_best_practices_rules_advanced_use_latest_rule, agents_skills_vercel_react_best_practices_rules_advanced_effect_event_deps_useeffectevent [INFERRED 0.80]
• In-memory caching of expensive computations/IO — agents_skills_vercel_react_best_practices_rules_js_cache_function_results, agents_skills_vercel_react_best_practices_rules_js_cache_property_access, agents_skills_vercel_react_best_practices_rules_js_cache_storage [INFERRED 0.85]
• Single-pass array iteration optimizations — agents_skills_vercel_react_best_practices_rules_js_flatmap_filter, agents_skills_vercel_react_best_practices_rules_js_combine_iterations, agents_skills_vercel_react_best_practices_rules_js_index_maps, agents_skills_vercel_react_best_practices_rules_js_set_map_lookups [INFERRED 0.75]
• Event listener management and dedup patterns — agents_skills_vercel_react_best_practices_rules_client_event_listeners, agents_skills_vercel_react_best_practices_rules_client_passive_event_listeners, agents_skills_vercel_react_best_practices_rules_client_swr_dedup [INFERRED 0.80]
• Minimizing useEffect Usage Pattern — agents_skills_vercel_react_best_practices_rules_rerender_derived_state_no_effect, agents_skills_vercel_react_best_practices_rules_rerender_move_effect_to_event, agents_skills_vercel_react_best_practices_rules_rerender_dependencies [INFERRED 0.80]
• React Compiler Reduces Need for Manual Memoization — react_compiler, agents_skills_vercel_react_best_practices_rules_rendering_hoist_jsx, agents_skills_vercel_react_best_practices_rules_rerender_memo, agents_skills_vercel_react_best_practices_rules_rerender_functional_setstate [INFERRED 0.85]
• RSC data-fetching and serialization patterns — agents_skills_vercel_react_best_practices_rules_server_dedup_props, agents_skills_vercel_react_best_practices_rules_server_serialization, agents_skills_vercel_react_best_practices_rules_server_parallel_fetching, agents_skills_vercel_react_best_practices_rules_server_parallel_nested_fetching [INFERRED 0.80]
• Server-side caching and request-state-safety patterns — agents_skills_vercel_react_best_practices_rules_server_cache_react, agents_skills_vercel_react_best_practices_rules_server_cache_lru, agents_skills_vercel_react_best_practices_rules_server_hoist_static_io, agents_skills_vercel_react_best_practices_rules_server_no_shared_module_state [INFERRED 0.80]
• React re-render optimization patterns — agents_skills_vercel_react_best_practices_rules_rerender_no_inline_components, agents_skills_vercel_react_best_practices_rules_rerender_simple_expression_in_memo, agents_skills_vercel_react_best_practices_rules_rerender_split_combined_hooks, agents_skills_vercel_react_best_practices_rules_rerender_use_ref_transient_values [INFERRED 0.75]

Communities (56 total, 17 thin omitted)

Community 0 - "Track/Player UI Components"

Cohesion: 0.08 Nodes (57): getAlbumCoverUrl(), getCoverUrl(), getStreamUrl(), getTrackCoverUrl(), ArtTile(), hashHue(), Props, TILE_PALETTE (+49 more)

Community 1 - "Store Persistence & Local Library"

Cohesion: 0.07 Nodes (36): baseQueryWithReauth(), rawBaseQuery(), rehydrateApi, RehydrateApiPayload, instanceStorage, AppDispatch, RootState, loadPlayerState() (+28 more)

Community 2 - "App Routes & Feature Pages"

Cohesion: 0.06 Nodes (32): Placeholder(), Props, Props, SubNav(), SubNavItem, AppShell(), AdminPage(), AdminInstance() (+24 more)

Community 3 - "Runtime Package Dependencies"

Cohesion: 0.05 Nodes (39): @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, i18next, @olly/modern-sk, dependencies, @dnd-kit/core, @dnd-kit/sortable (+31 more)

Community 4 - "Package Dev Dependencies"

Cohesion: 0.06 Nodes (35): babel-plugin-react-compiler, happy-dom, devDependencies, babel-plugin-react-compiler, happy-dom, prettier, @rsbuild/core, @rsbuild/plugin-babel (+27 more)

Community 5 - "Downloads & Storage Stats"

Cohesion: 0.11 Nodes (25): DownloadStatus, TrackInfoBody(), ACTIVE, DownloadsManagerPage(), isActive(), JobRow(), STATUS_BADGE, DiskGauge() (+17 more)

Community 6 - "Instance Connection & Config"

Cohesion: 0.13 Nodes (28): ConnectionStatus(), STATUS_KEY, STATUS_VARIANTS, clearInstanceAuth(), clearScope(), defaultName(), getActiveInstance(), getActiveInstanceId() (+20 more)

Community 7 - "Layout Nav & Permissions"

Cohesion: 0.10 Nodes (25): MetadataStatus, TrackAvailability, Icon(), IconName, Props, TODO: remove this component, use phosphor's icons project-wide, CONN_KEY, MAIN_NAV (+17 more)

Community 8 - "Library/Playlist API & Mappers"

Cohesion: 0.14 Nodes (24): libraryApi, paging(), SORT_BY, trackParams(), playlistsApi, DOWNLOAD_STATUSES, METADATA_STATUSES, RawAlbum (+16 more)

Community 9 - "Project Docs & CI"

Cohesion: 0.11 Nodes (26): AGENTS.md (agent instructions for rsbuild JS project), Don't Define Components Inside Components, Avoid useMemo for Simple Primitive Expressions, Split Combined Hook Computations, Use Transitions for Non-Urgent Updates, Use useDeferredValue for Expensive Derived Renders, Use useRef for Transient Values, CLAUDE.md (MCMA webui project guidance) (+18 more)

Community 10 - "React Best Practices Skill Docs"

Cohesion: 0.16 Nodes (23): Rsbuild Best Practices Skill, Vercel React Best Practices - AGENTS.md (Compiled Document), Vercel React Best Practices README, Rule Sections Metadata, Rule File Template, Do Not Put Effect Events in Dependency Arrays, useEffectEvent (React Hook), Store Event Handlers in Refs (+15 more)

Community 11 - "TypeScript Config"

Cohesion: 0.09 Nodes (21): DOM, ES2020, src, compilerOptions, allowImportingTsExtensions, jsx, lib, moduleDetection (+13 more)

Community 12 - "App Entry & Misc APIs"

Cohesion: 0.10 Nodes (15): likesApi, LikeState, LikeValue, RawLikeState, storageApi, uploadApi, api, RawStorageStats (+7 more)

Community 13 - "Service Worker Cache Core"

Cohesion: 0.23 Nodes (16): buildRangeResponse(), cacheKeyFor(), parseRangeHeader(), selectEvictions(), trackIdFromUrl(), handleAudio(), handleImage(), indexChain (+8 more)

Community 14 - "Auth & Admin API Types"

Cohesion: 0.14 Nodes (15): adminApi, authApi, RawTokenResponse, RawUser, toUser(), ApiError, AuthTokens, LibraryFilters (+7 more)

Community 15 - "External Search API"

Cohesion: 0.24 Nodes (10): mapSearch(), RawSearchResponse, searchApi, SearchResponse, RawSearchResult, RawSourceInfo, toSearchResult(), toSourceInfo() (+2 more)

Community 16 - "Upload Page"

Cohesion: 0.22 Nodes (7): buildUploadFormData(), { useUploadTrackMutation }, extractError(), ItemStatus, QueueItem, RECENT_UPLOADS, UploadPage()

Community 17 - "Metadata Editor Page"

Cohesion: 0.20 Nodes (7): DiffRowDef, EMPTY_FORM, fieldStyle(), FormState, labelStyle, Props, SingleTrackEditor()

Community 18 - "Downloads API & Types"

Cohesion: 0.24 Nodes (9): downloadsApi, ListParams, RawCreateResponse, RawDownloadJob, toDownloadJob(), toDownloadStatus(), DownloadJob, DownloadRequestResult (+1 more)

Community 19 - "React Compiler & Memoization Rules"

Cohesion: 0.25 Nodes (9): Use Activity Component for Show/Hide, CSS content-visibility for Long Lists, Hoist Static JSX Elements, Use Functional setState Updates, Use Lazy State Initialization, Extract to Memoized Components, Extract Default Non-primitive Parameter Value from Memoized Component to Constant, React Activity Component API (+1 more)

Community 20 - "Effects & Derived State Rules"

Cohesion: 0.22 Nodes (9): Use useTransition Over Manual Loading States, Narrow Effect Dependencies, Subscribe to Derived State, Calculate Derived State During Rendering, Put Interaction Logic in Event Handlers, Should this code move to an event handler? (React docs), React useTransition API, useTransition Reference (React docs) (+1 more)

Community 21 - "Test TypeScript Config"

Cohesion: 0.25 Nodes (7): ./, @testing-library/jest-dom, ../tsconfig.json, compilerOptions, types, extends, include

Community 22 - "Auth Store Slice"

Cohesion: 0.29 Nodes (5): User, authSlice, AuthState, initialState, persisted

Community 23 - "JS Caching Performance Rules"

Cohesion: 0.33 Nodes (6): Version and Minimize localStorage Data, Avoid Layout Thrashing, Cache Repeated Function Calls, Cache Property Access in Loops, Cache Storage API Calls, Hoist RegExp Creation

Community 24 - "Server Caching Rules"

Cohesion: 0.40 Nodes (4): Authenticate Server Actions Like API Routes, Cross-Request LRU Caching, Hoist Static I/O to Module Level, Avoid Shared Module State for Request Data

Community 25 - "Track Types & Context Menu"

Cohesion: 0.50 Nodes (4): PlaylistTrack, Track, Props, Props

Community 26 - "Loop Optimization Rules"

Cohesion: 0.50 Nodes (4): Early Return from Functions, Early Length Check for Array Comparisons, Use Loop for Min/Max Instead of Sort, Use toSorted() Instead of sort() for Immutability

Community 27 - "Env Type Declarations"

Cohesion: 0.50 Nodes (3): ImportMeta, ImportMetaEnv, Window

Community 28 - "Lazy Loading Rules"

Cohesion: 0.67 Nodes (3): Dynamic Imports for Heavy Components, Preload Based on User Intent, Defer Non-Critical Work with requestIdleCallback

Community 29 - "Event Listener Rules"

Cohesion: 0.67 Nodes (3): Deduplicate Global Event Listeners, Use Passive Event Listeners for Scrolling Performance, Use SWR for Automatic Deduplication

Community 30 - "SVG Optimization Rules"

Cohesion: 0.67 Nodes (3): Animate SVG Wrapper Instead of SVG Element, Optimize SVG Precision, SVGO (SVG Optimizer)

Community 31 - "Script Loading Rules"

Cohesion: 0.67 Nodes (3): Use defer or async on Script Tags, MDN Script element defer/async reference, next/script Component

Ambiguous Edges - Review These

• MCMA Web UI (control center role) → favicon.png (cartoon mascot icon) [AMBIGUOUS] public/favicon.png · relation: conceptually_related_to

Knowledge Gaps

• 194 isolated node(s): 30-runtime-config.sh script, name, version, private, type (+189 more) These have ≤1 connection - possible missing edges or undocumented components.
• 17 thin communities (<3 nodes) omitted from report — run graphify query to explore isolated nodes.

Suggested Questions

Questions this graph is uniquely positioned to answer:

• What is the exact relationship between MCMA Web UI (control center role) and favicon.png (cartoon mascot icon)? Edge tagged AMBIGUOUS (relation: conceptually_related_to) - confidence is low.
• Why does useAppDispatch() connect Track/Player UI Components to Track Types & Context Menu, Instance Connection & Config, Layout Nav & Permissions? High betweenness centrality (0.010) - this node is a cross-community bridge.
• Why does useAppSelector() connect Track/Player UI Components to Downloads & Storage Stats, Layout Nav & Permissions? High betweenness centrality (0.010) - this node is a cross-community bridge.
• Why does devDependencies connect Package Dev Dependencies to Runtime Package Dependencies? High betweenness centrality (0.008) - this node is a cross-community bridge.
• What connects 30-runtime-config.sh script, name, version to the rest of the system? 209 weakly-connected nodes found - possible documentation gaps or missing edges.
• Should Track/Player UI Components be split into smaller, more focused modules? Cohesion score 0.08095238095238096 - nodes in this community are weakly interconnected.
• Should Store Persistence & Local Library be split into smaller, more focused modules? Cohesion score 0.07127882599580712 - nodes in this community are weakly interconnected.