🐱 लेखक के बारे में
जापान के व्यक्तिगत डेवलपर के रूप में, कलाकार के दृष्टिकोण से सॉफ्टवेयर विकसित कर रहे हैं
CodeGarden
JavaScript/TypeScript Code Visualizer
परिचय
CodeGarden एक डेस्कटॉप एप्लिकेशन है जो JavaScript/TypeScript सोर्स संरचना को "सितारों और रेखाओं" के विज़ुअलाइज़ेशन के माध्यम से बर्ड्स-आई व्यू और विश्लेषण प्रदान करता है। फ़ंक्शन और ब्लॉक को नोड्स के रूप में खींचा जाता है, जबकि hierarchy और call संबंधों को edges के रूप में व्यक्त किया जाता है। आप कई रेंडर पैटर्न और विज़ुअल स्टाइल के बीच स्विच करके डिज़ाइन और refactoring की अंतर्दृष्टि को तुरंत पा सकते हैं।
क्विक स्टार्ट
- ऐप लॉन्च करें और ऊपर बाएं में Open File पर क्लिक करें, या JavaScript/TypeScript फ़ाइल को ड्रैग और ड्रॉप करें।
- आवश्यकतानुसार Analyzer (Basic / CallGraph / MetricsExt / MultiLang / Category-Aware) और Render Pattern चुनें।
- कैनवास पर explore करने के लिए drag (move), wheel (zoom), और double-click (select & code display) का उपयोग करें।
स्क्रीन लेआउट
साइडबार
- Controls: Open File / Save JSON / Reset View / Analyzer / Render Pattern / Visual Style
- Summary: फ़ाइल पथ, लाइन काउंट, फ़ंक्शन काउंट, अधिकतम गहराई
- Selection Summary: चयनित नोड समूह के लिए आंकड़े (लाइन काउंट, cc, nest, score total, अधिकतम गहराई, आदि)
- Documents: विभिन्न दस्तावेज़ (XML specification/render pattern guide)
- Language: अंग्रेज़ी / जापानी / चीनी / जर्मन / हिंदी / कोरियाई स्विच
कैनवास
- सफेद तारों वाले पृष्ठभूमि पर नोड्स और edges खींचे जाते हैं।
- चयनित होने पर लेबल और meta information (cc/nest/lines/score) प्रदर्शित होते हैं।
- चयनित subtrees को हल्के से highlight किया जाता है, जिससे पूरा follow करना आसान हो जाता है।
ऑपरेशन और कंट्रोल
फ़ाइल ऑपरेशन
- Open File: विश्लेषण के लिए JS/TS फ़ाइलें खोलता है।
- Drag & Drop: बाएं pane पर drag और drop करके भी काम करता है।
- Save JSON: वर्तमान विश्लेषण परिणामों को JSON के रूप में सहेजता है।
व्यू ऑपरेशन
- Reset View: कैमरा को center और 1:1 scale पर reset करता है।
- Esc: Deselect. Double-click: Subtree selection और code display।
विश्लेषण और रेंडरिंग
- Analyzer:
- Basic: मूल संरचना और जटिलता (cc/nest, आदि)
- CallGraph: फ़ंक्शन call संबंध और निर्भरता
- MetricsExt: statements, branches, loops आदि के detailed metrics
- MultiLang: बहुभाषा समर्थन की भाषा-विशिष्ट सुविधा पहचान
- Category-Aware: श्रेणी-जागरूक स्मार्ट विश्लेषण
- Render Pattern: v1..v10 arrangement (बाद में वर्णित)।
- Visual Style: v1..v4 color, shape, और line representation (बाद में वर्णित)।
- Layout Insights: साइडबार हर बदलाव के बाद वर्तमान render pattern, चुने गए analyzer और स्टार density तुरंत दिखाता है, जिससे स्थिति देखना आसान होता है।
- Layout Presets: Overview / CallGraph / Category तीन preset analyzer, render pattern, visual style और density को एक बार में लागू करते हैं; यदि फ़ाइल पहले से खुली है तो संबंधित विश्लेषण स्वतः दोबारा चलता है।
- Extended Metrics: तकनीकी कर्ज और code smell सारांश कार्ड के साथ विस्तृत सूची Quality Report से मेल खाती है, जिससे हॉटस्पॉट और कारणों को तुरंत ट्रैक किया जा सकता है।
- Call Graph पैनल: CallGraph डेटा मौजूद होने पर दिखाई देता है और अधिकतम 20 कॉल संबंध (फ़ंक्शन, कॉलर, लाइन) तालिका रूप में दिखाता है।
रेंडर पैटर्न (v1..v13)
नीचे मुख्य बिंदुओं का सारांश है। विवरण के लिए, कृपया ऐप में "Render Pattern Spec" देखें।
मूल पैटर्न
उन्नत पैटर्न
उन्नत पैटर्न
विज़ुअल स्टाइल (v1..v4)
Overview
- v1: Base (cool color scheme)।
- v2: Warm Sunset (warm colors + halo/sunburst)।
- v3: High Contrast (vivid nodes / monochrome neon dashed edges)।
- v4: Pastel (soft watercolor-like expression)।
Legend
सारांश/चयन सारांश
सारांश पैनल
- File: विश्लेषित फ़ाइल का path
- Lines: कुल line count
- Functions: Function count
- Max depth: tree की अधिकतम गहराई
- Language: पहचाने गए programming language (JavaScript, TypeScript, Java, C++, Go, Rust, Python आदि)
- Categories: मुख्य श्रेणियों की statistical information (top 3 श्रेणियां display)
चयन सारांश
- Nodes / Blocks / Functions
- Total lines और duplicates को छोड़कर unique line count
- Avg cc (average cyclomatic complexity), Avg nest (average nesting depth)
- Score sum (visibility के लिए composite index), Max depth (maximum depth)
- Category breakdown (श्रेणी-विशिष्ट detailed statistics)
- Duplicate removal algorithm: consecutive line ranges को merge करके accurate unique line count calculate करता है
विश्लेषण डेटा XML (सारांश)
आंतरिक रूप से, ऐप विश्लेषण परिणामों को unified format (XML v2) में convert करता है और rendering के दौरान उन्हें reconstruct करता है।
summary
totalLines,filePath,functionCount,maxDepth,deadCodeCount
node
- Attributes:
id,kind,category,name - loc:
start,end,lines - complexity:
cyclomatic,nestingDepth - layout:
depth,angle,radius - metrics (extended): statement count, branch count, loop count, call count, return statement count, exception handling count, switch statement count आदि
- language: पहचाने गए programming language
- category: functions, classes, interfaces, traits, structs, enums, blocks, control flow, data structures, macros, templates, decorators, lambdas, coroutines, tests आदि
edge
- Attributes:
id,kind(hierarchy/call),from,to
विवरण के लिए, ऐप में "XML Spec (XML_FORMAT.md)" देखें।
डेटा प्रारूप और आंतरिक प्रसंस्करण
आंतरिक डेटा प्रारूप
- XML format: ऐप internally analysis results को unified format (XML v2) के रूप में manage करता है।
- Analysis results का storage: वर्तमान version में, analysis results केवल session के दौरान maintain होते हैं।
- External export: future functionality expansion के रूप में, analysis results का external storage consider किया जा रहा है।
Technical specifications
- AST analysis: प्रत्येक language के syntax parse tree पर आधारित structured data
- Metrics calculation: complexity, nesting depth, line count आदि की statistical information
- Layout information: render patterns के अनुसार coordinates, angles, radius data
अनुशंसित लेआउट
Overview - जटिलता और विस्तृत मेट्रिक्स पर फोकस
CallGraph - कॉल संबंधों को जोर
Category - श्रेणी बैंड और ग्रुपिंग
Extended Metrics
तकनीकी कर्ज और कोड स्मेल्स का सार
गंभीरता के साथ विस्तृत समस्या सूची
Documents
साइडबार Documents अनुभाग
मैनुअल भाषा चयन (6 भाषाएं)
Selection Summary
Nodes/Functions/Lines, औसत cc/nest, score sum, max depth दिखाता है
प्रदर्शन और सुझाव
- बहुत बड़े node counts के लिए, overview के लिए v6 (grid) या v9 (category bands) का उपयोग करें → areas of interest में zoom करें।
- Styles v2~v4 में decorations शामिल हैं। वे zoom और node count के आधार पर automatically optimize होते हैं (visibility maintain रहती है)।
- जब बहुत सारी call lines हों, तो v10 के अलावा किसी और में switch करना देखने में आसान बनाता है।
- TypeScript files के लिए, v11 (TypeScript support) या v13 (Extended Golden Angle) optimal हैं। TypeScript-specific optimizations apply होते हैं।
समस्या समाधान
- कुछ भी display नहीं होता: Source में structure कम है / parsing failed। different file के साथ try करें।
- Slow: overall display के दौरान decorations optimize होते हैं। v6 या v9 में switch करें और details check करने के लिए zoom in करें।
- Center shifts (v6): latest version grid को origin center पर fix करती है।
- TypeScript files में incomplete analysis: MultiLang या Category-Aware analyzer try करें। TypeScript-specific syntax elements properly recognize होते हैं।
- Rendering slow: v1 या v6 जैसे lightweight patterns में switch करें। v11-v13 TypeScript support के कारण थोड़ा slow हो सकते हैं।
FAQ
Q. Score क्या है?
यह एक visibility index है जो line count, complexity, आदि को integrate करता है। बड़े values को prominent nodes के रूप में खींचा जाता है और focus candidates बन जाते हैं।
Q. XML या JSON में से कौन सा उपयोग करना चाहिए?
ऐप के बाहर analysis को reuse करने के लिए JSON convenient है। XML internal standard format है, specifications check करने के लिए अच्छा।
Q. कौन सा pattern चुनना चाहिए?
overview के लिए v1/v9 से शुरू करें → यदि density या relationships concerning हैं, तो v10 try करें → detailed comparison के लिए v2/v6 → TypeScript support के लिए v11/v13, यह flow smooth है। TypeScript-specific optimizations की आवश्यकता होने पर v11/v13 prioritize करें।
उपयोग किए गए OSS और लाइसेंस
विश्लेषण पैटर्न विस्तृत विवरण
Basic Analyzer
मूल AST analysis perform करता है, functions, classes, blocks की hierarchy structure और complexity (cyclomatic complexity, nesting depth) calculate करता है। सबसे lightweight और fast analysis। language detection और category determination भी include करता है।
CallGraph Analyzer
Functions के बीच call relationships analyze करता है, dependency graph construct करता है। functions की in-degree·out-degree, fan-in·fan-out आदि metrics provide करता है। hierarchy edges और call edges दोनों generate करता है।
MetricsExt Analyzer
Detailed metrics calculate करता है। statement count, branch count, loop count, return statement count, exception handling count, switch statement count आदि, code quality indicators को numerical form में convert करता है। language-specific syntax elements भी detect करता है।
MultiLang Analyzer
TypeScript support analysis perform करता है, TypeScript-specific syntax elements (interfaces, generics, decorators, enums, type aliases आदि) properly recognize करता है। JavaScript और TypeScript की language characteristics support करता है।
Category-Aware Analyzer
Category-aware smart analysis perform करता है, nodes की importance और relationships consider करते हुए analysis results provide करता है। category statistics का automatic calculation और JavaScript/TypeScript-specific category mapping include करता है।
भाषा समर्थन
पूर्ण समर्थित भाषाएं
JavaScript (ES6+)
- मूल syntax: functions, classes, objects, arrays
- ES6+ features: arrow functions, classes, modules, template literals
- JSX support: React आदि के JSX syntax का complete support
- Advanced features: asynchronous processing (async/await), decorators, dynamic imports
TypeScript
- Type system: interfaces, enums, generics, type aliases
- Advanced syntax: decorators, namespaces, module extensions
- JavaScript compatibility: सभी JavaScript features inherit करता है
- Type safety: compile-time type checking और error detection
वर्तमान में supported language-specific features
- JavaScript: ES6+ features, dynamic typing, prototype-based inheritance, asynchronous processing, arrow functions, spread/rest operators, destructuring assignment
- TypeScript: static typing, advanced type system, interfaces, generics, decorators, asynchronous processing, TS-specific syntax, type annotations
गुणवत्ता स्कोर सिस्टम
तकनीकी कर्ज (Technical Debt)
जटिलता, नेस्टिंग गहराई, फ़ंक्शन लंबाई, और पैरामीटर संख्या के आधार पर तकनीकी कर्ज की गणना करता है। कुल मात्रा कोडबेस के साथ बढ़ती है और प्राथमिकता निर्देशित करने के लिए info / minor / major / critical बैंड में स्वचालित रूप से वर्गीकृत होती है:
- info: 0.00–1.99 — अवलोकन चरण
- minor: 2.00–4.99 — मध्यम प्राथमिकता सुधार
- major: 5.00–9.99 — जल्दी संबोधित करना चाहिए
- critical: ≥10.00 — तत्काल कार्रवाई आवश्यक
कोड स्मेल्स (Code Smells)
निम्नलिखित कोड स्मेल्स को स्वचालित रूप से पहचाना जाता है:
- लंबे फ़ंक्शन: 50+ लाइनें (S138)
- जटिल फ़ंक्शन: साइक्लोमैटिक जटिलता 10+ (S1541)
- गहरी नेस्टिंग: नेस्टिंग गहराई 5+ (S134)
- बहुत अधिक पैरामीटर: 5+ (S107)
- मैजिक नंबर: हार्डकोडेड संख्याएं (S109)
- अप्रयुक्त चर: परिभाषित लेकिन उपयोग नहीं (S1481)
रखरखाव योग्यता सूचकांक
Halstead Volume, जटिलता, फ़ंक्शन लंबाई, फ़ंक्शन संख्या, और श्रेणी विविधता के आधार पर 0-100 रखरखाव योग्यता सूचकांक। उच्च मान बेहतर रखरखाव योग्यता को दर्शाते हैं।
अन्य मेट्रिक्स
- कोड डुप्लिकेशन दर: फ़ंक्शन नाम और लाइन-आधारित डुप्लिकेशन पहचान
- युग्मन: मॉड्यूल के बीच निर्भरता की ताकत
- सामंजस्य: मॉड्यूल के भीतर संबंधों की ताकत
- सुरक्षा स्कोर: खतरनाक फ़ंक्शन नाम और पैटर्न का पता लगाना
वास्तविक गुणवत्ता रिपोर्ट स्क्रीन
गुणवत्ता रिपोर्ट स्क्रीन - विस्तृत कोड गुणवत्ता विश्लेषण और सुधार सुझाव प्रदान करता है
गुणवत्ता आश्वासन और परीक्षण परिणाम
📊 परीक्षण परिणामों का overview
✅ परीक्षण परिणाम
- Test suites: 28 सभी successful
- Test cases: 825 सभी successful
- Execution time: 5.858 seconds
- Snapshots: 0
📈 Test coverage
- Statements: 66.74%
- Branches: 61.81%
- Functions: 72.98%
- Lines: 70.44%
🔧 परीक्षण environment और libraries
🧪 Test frameworks
- Jest: main test framework (v30.0.5)
- Babel Jest: ES6+ syntax के लिए test support
- Jest Environment JSDOM: browser environment simulation
- @types/jest: TypeScript type definitions support
⚙️ Development·test environment
- Node.js: JavaScript runtime environment
- Electron: desktop app framework (v38.1.2)
- Cross-env: environment variables cross-platform support
- Playwright: E2E testing browser automation (v1.54.2)
🔍 परीक्षण के types और content
🧪 Test types
- Unit tests: individual functions को एक-एक करके confirm
- Integration tests: multiple functions के collaborative working confirm
- E2E tests: entire app के proper working confirm
- Coverage tests: code testing extent confirm
📋 Main test content
- Syntax parsing: JavaScript/TypeScript syntax parsing और AST construction
- Metrics calculation: complexity, line count, nesting depth calculation
- Rendering engine: graphics drawing, color management, text rendering
- Interaction: mouse operations, selection functions, zoom functions
📊 परीक्षण परिणामों का detailed view
📋 Latest test execution results
🧪 E2E tests का detailed view
🚀 Electron integration tests (9 tests)
- Application startup: main process·renderer process normal startup confirmation
- IPC communication tests: inter-process communication action confirmation और error handling
- Window management: main window display·hide·resize
- File system: file reading·saving action confirmation
- Menu operations: application menu action confirmation
🔧 Function integration tests (32 tests)
- File analysis pipeline: file reading→analysis→display का continuous flow
- Analyzer switching: Basic/CallGraph/MetricsExt/MultiLang action confirmation
- Render patterns: v1～v13 display patterns action confirmation
- Visual styles: v1～v4 style application action confirmation
- Settings management: user settings save·read·apply
🎨 Renderer detailed tests (14 tests)
- Rendering engine: canvas drawing·graphics drawing·text rendering
- Interaction: mouse operations·keyboard operations·touch operations
- Layout calculation: node layout·edge drawing·zoom·pan
- State management: selection state·view state·animation state
- Performance: large node drawing·memory usage·drawing speed
📊 Data processing tests (16 tests)
- XML export: analysis results XML format output·data integrity confirmation
- Metrics calculation: complexity·line count·nesting depth accuracy
- Category classification: functions·classes·control flow automatic identification
- Dependency analysis: function calls·inheritance relationships·module dependencies
- Error handling: invalid inputs·exception handling·recovery
🔄 Quality improvement challenges
📋 Quality management mechanisms
- Comprehensive testing: new features add करते समय भी existing functions action confirmation
- Automated testing: regular action confirmation quality maintain
- User feedback: actual usage situations पर based improvements
- Continuous improvement: stability और reliability improvement continue
🎯 Quality improvement goals
- Reliability improvement: main functions stable operation continuous guarantee
- User experience: ease of use और operability improvement
- Performance: processing speed और responsiveness optimization
- Compatibility: various environments में operation guarantee
⚠️ Quality assurance limitations
🔍 Perfection guarantee
Important points: Coverage rates या test results quality indicators में से एक हैं, लेकिन following reasons से perfection guarantee नहीं कर सकते:
- Test limitations: सभी execution paths या edge cases को completely cover करना realistically difficult
- Environment dependency: different OS, browsers, devices में operation complete guarantee difficult
- User operation diversity: unexpected user operation patterns का complete prediction difficult
- External dependencies: third-party libraries या system environment changes का complete response difficult
✅ Best effort testing
Quality improvement challenges: Perfection guarantee नहीं कर सकते, लेकिन following methods से best effort comprehensive testing perform करते हैं:
- Multi-layer test strategy: unit·integration·E2E tests combination comprehensive verification
- Main functions focus testing: core functions (analysis·rendering·export) high coverage guarantee
- Edge cases consideration: abnormal inputs·error states·boundary conditions testing
- Continuous improvement: test results analysis पर based continuous test strengthening
- Practicality focus: actual usage scenarios में occur हो सकने वाले problems focus testing
🔮 Quality assurance continuous challenges
यह application users को reliable services provide करने के लिए, continuous quality assurance challenge करता है। 825 test cases comprehensive verification, main functions high quality guarantee, actual usage scenarios stability focus।
उपयोग किए गए OSS और लाइसेंस
मुख्य dependencies
🚀 Core frameworks
- Electron: Desktop app framework (v38.1.2) - MIT License
- Node.js: JavaScript runtime environment - MIT License
- @babel/parser: JavaScript/TypeScript parser - MIT License
🎨 UI libraries
- monaco-editor: Code editor (VS Code engine) - MIT License
- p5: Creative coding library - LGPL-2.1-or-later
- marked: Markdown parser - MIT License
Development tools
🧪 Testing frameworks
- Jest: Test framework (v30.0.5) - MIT License
- @types/jest: TypeScript definitions - MIT License
- Playwright: E2E testing (v1.54.2) - Apache-2.0 License
⚙️ Build tools
- Babel: JavaScript compiler - MIT License
- Cross-env: Environment variables - MIT License
- Electron-builder: App packaging - MIT License
License details
📋 License summary
OSS contribution
यह application open source software के benefits fully utilize करता है। community-developed high-quality libraries use करके, development efficiency improve और reliability guarantee।
गुणवत्ता स्कोर सिस्टम
तकनीकी कर्ज (Technical Debt)
जटिलता, नेस्टिंग गहराई, फ़ंक्शन लंबाई और पैरामीटर संख्या के आधार पर तकनीकी कर्ज जमा होता है। कुल राशि कोडबेस के साथ बढ़ती है और प्राथमिकता तय करने के लिए स्वतः info / minor / major / critical स्तरों में वर्गीकृत होती है:
- info: 0.00–1.99 — अवलोकन चरण, केवल नज़र रखें
- minor: 2.00–4.99 — मध्यम प्राथमिकता वाले सुधार
- major: 5.00–9.99 — निकट भविष्य में संबोधित करें
- critical: ≥10.00 — तुरंत सुधार आवश्यक