Skip to content

Commit 317c39a

Browse files
jayresearcherjayresearcher
committed
Assistant checkpoint: Reorganize README and create documentation pages
Assistant generated file changes: - docs/INSTALLATION.md: Create detailed installation guide - docs/PIPELINE_GUIDE.md: Create comprehensive pipeline guide - docs/CLI_GUIDE.md: Create CLI usage guide - docs/USE_CASES.md: Create detailed use cases guide - docs/API_REFERENCE.md: Create comprehensive API reference - README.md: Update main README with organized structure and links --- User prompt: https: //github.com/workflow-builder/nodeq-mindmap/tree/v1.0.0 Replit-Commit-Author: Assistant Replit-Commit-Session-Id: e5c8aa2d-05f7-401c-b338-9e102c33d9ab
1 parent f1b1b02 commit 317c39a

File tree

6 files changed

+1594
-43
lines changed

6 files changed

+1594
-43
lines changed

‎README.md‎

Lines changed: 271 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,66 +2,38 @@
22

33
[![npm version](https://badge.fury.io/js/nodeq-mindmap.svg)](https://badge.fury.io/js/nodeq-mindmap)
44
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5+
[![GitHub](https://img.shields.io/github/stars/workflow-builder/nodeq-mindmap?style=social)](https://github.com/workflow-builder/nodeq-mindmap)
56

6-
A revolutionary lightweight library that combines interactive mind map visualization with intelligent data pipeline building. Transform JSON data into beautiful mind maps AND create ML-powered data transformation pipelines through simple configuration.
7+
A revolutionary lightweight library that combines **interactive mind map visualization** with **intelligent data pipeline building**. Transform JSON data into beautiful mind maps AND create ML-powered data transformation pipelines through simple configuration.
78

8-
## 🚀 Key Features
9+
## 🚀 What's New in v2.1.0
910

10-
### 🗺️ Mind Map Visualization
11-
- **Universal JSON Support**: Automatically converts any reasonable JSON structure to mind maps
12-
- **Interactive Navigation**: Click to expand/collapse nodes, zoom, pan, and explore
13-
- **Responsive Design**: Works on desktop, tablet, and mobile devices
14-
- **Customizable Styling**: Full control over colors, fonts, and animations
15-
- **Framework Agnostic**: Works with React, Vue, Angular, or vanilla JavaScript
11+
✨ **Enhanced Pipeline Engine** with ML-powered data transformation
12+
🧠 **Configurable ML Models** (TensorFlow.js, Hugging Face, OpenAI)
13+
🔌 **Real-time Data Sources** (IoT Hub, Kafka, REST APIs, WebSockets)
14+
🖥️ **CLI Support** with headless rendering capabilities
15+
⚡ **ETL Process Automation** replacing traditional ETL workflows
16+
📊 **Performance Monitoring** with real-time metrics
1617

17-
### ⚡ Intelligent Data Pipeline Builder
18-
- **Config-Driven Pipeline Creation**: Upload input/output samples to auto-generate transformation logic
19-
- **Configurable ML Models**: Support for TensorFlow.js, Hugging Face, OpenAI, and custom models
20-
- **Real-time Data Sources**: Connect to IoT Hub, Kafka, REST APIs, WebSockets, MQTT, and databases
21-
- **ETL Process Automation**: Intelligent extraction, transformation, and loading with error handling
22-
- **Dynamic Pipeline Updates**: Modify input/output formats and regenerate pipeline logic
23-
- **Performance Monitoring**: Real-time throughput, latency, and error rate tracking
24-
- **Code Generation**: Export executable transformation code
25-
- **Pipeline Visualization**: View transformation logic as interactive mind maps
18+
## 🎯 Quick Start
2619

27-
### 🔄 ETL Replacement & Enhancement
28-
- **Auto-Pipeline Design**: ML-driven pipeline generation instead of manual ETL development
29-
- **Data Source Connectors**: Pre-built connectors for popular data sources
30-
- **Streaming & Batch Processing**: Handle both real-time and batch data processing
31-
- **Data Quality Validation**: Automated data quality checks and validation rules
32-
- **Error Handling & Recovery**: Intelligent error handling with retry mechanisms
33-
34-
## 📦 Installation
20+
### 📦 Installation
3521

3622
```bash
3723
npm install nodeq-mindmap
3824
```
3925

40-
```bash
41-
yarn add nodeq-mindmap
42-
```
43-
44-
## 🎯 Quick Start - Mind Map
45-
46-
### Basic Mind Map Usage
26+
### 🗺️ Basic Mind Map
4727

4828
```javascript
4929
import { NodeQMindMap } from 'nodeq-mindmap';
5030

51-
// Your JSON data
5231
const data = {
5332
"topic": "My Project",
54-
"summary": "Project overview",
5533
"children": [
5634
{
5735
"topic": "Frontend",
58-
"skills": ["React", "TypeScript", "CSS"],
59-
"children": [
60-
{
61-
"topic": "Components",
62-
"summary": "Reusable UI components"
63-
}
64-
]
36+
"skills": ["React", "TypeScript", "CSS"]
6537
},
6638
{
6739
"topic": "Backend",
@@ -70,18 +42,274 @@ const data = {
7042
]
7143
};
7244

73-
// Create mind map
7445
const mindMap = new NodeQMindMap({
7546
container: '#mindmap-container',
7647
data: data,
7748
width: 800,
7849
height: 600
7950
});
8051

81-
// Render the mind map
8252
mindMap.render();
8353
```
8454

55+
### ⚡ Smart Data Pipeline
56+
57+
```javascript
58+
// Define input/output samples
59+
const inputSample = {
60+
"firstName": "John",
61+
"lastName": "Doe",
62+
"age": 25
63+
};
64+
65+
const outputSample = {
66+
"fullName": "John Doe",
67+
"isAdult": true
68+
};
69+
70+
// AI creates transformation pipeline
71+
const pipeline = await mindMap.createDataPipeline(
72+
'User Transform',
73+
inputSample,
74+
outputSample
75+
);
76+
77+
// Execute with new data (fast static execution)
78+
const result = mindMap.executePipeline({
79+
"firstName": "Jane",
80+
"lastName": "Smith",
81+
"age": 17
82+
});
83+
// Result: { "fullName": "Jane Smith", "isAdult": false }
84+
```
85+
86+
## 📚 Documentation
87+
88+
| 📖 Guide | 📝 Description |
89+
|----------|----------------|
90+
| **[Installation Guide](docs/INSTALLATION.md)** | Complete setup, configuration, and framework integration |
91+
| **[Pipeline Guide](docs/PIPELINE_GUIDE.md)** | ML-powered data transformation and ETL replacement |
92+
| **[CLI Guide](docs/CLI_GUIDE.md)** | Command-line interface and headless operations |
93+
| **[Use Cases](docs/USE_CASES.md)** | Real-world examples and industry applications |
94+
| **[API Reference](docs/API_REFERENCE.md)** | Complete API documentation and TypeScript types |
95+
96+
## 🌟 Key Features
97+
98+
### 🗺️ Interactive Mind Maps
99+
- ✅ **Universal JSON Support** - Convert any JSON to mind maps
100+
- ✅ **Interactive Navigation** - Click, zoom, pan, expand/collapse
101+
- ✅ **Responsive Design** - Works on all devices
102+
- ✅ **Custom Themes** - Full styling control
103+
- ✅ **Framework Agnostic** - React, Vue, Angular, vanilla JS
104+
105+
### ⚡ Intelligent Pipeline Builder
106+
- 🧠 **AI-Generated Pipelines** - Upload samples, get transformation logic
107+
- 🔧 **Multiple ML Models** - TensorFlow.js, Hugging Face, OpenAI, custom
108+
- 🔌 **Real-time Sources** - IoT Hub, Kafka, APIs, WebSockets, MQTT
109+
- 📊 **Performance Monitoring** - Throughput, latency, error tracking
110+
- 💻 **Code Generation** - Export production-ready functions
111+
112+
### 🔄 ETL Process Revolution
113+
**Traditional ETL**: Weeks to Months | High Maintenance | Low Flexibility
114+
**NodeQ Smart Pipeline**: Minutes to Hours | Low Maintenance | High Flexibility
115+
116+
| Traditional ETL | NodeQ Smart Pipeline |
117+
|----------------|---------------------|
118+
| Manual code for each source | AI-generated transformations |
119+
| Weeks of development | Minutes to deploy |
120+
| High maintenance overhead | Auto-adapting pipelines |
121+
| Custom monitoring setup | Built-in performance metrics |
122+
123+
## 🎨 Framework Examples
124+
125+
<details>
126+
<summary><strong>React Integration</strong></summary>
127+
128+
```jsx
129+
import React, { useEffect, useRef } from 'react';
130+
import { NodeQMindMap } from 'nodeq-mindmap';
131+
132+
const MindMapComponent = ({ data }) => {
133+
const containerRef = useRef(null);
134+
135+
useEffect(() => {
136+
const mindMap = new NodeQMindMap({
137+
container: containerRef.current,
138+
data: data,
139+
theme: { nodeColor: '#4299e1' }
140+
});
141+
mindMap.render();
142+
}, [data]);
143+
144+
return <div ref={containerRef}></div>;
145+
};
146+
```
147+
</details>
148+
149+
<details>
150+
<summary><strong>Vue.js Integration</strong></summary>
151+
152+
```vue
153+
<template>
154+
<div ref="mindmapContainer"></div>
155+
</template>
156+
157+
<script>
158+
import { NodeQMindMap } from 'nodeq-mindmap';
159+
160+
export default {
161+
props: ['data'],
162+
mounted() {
163+
this.mindMap = new NodeQMindMap({
164+
container: this.$refs.mindmapContainer,
165+
data: this.data
166+
});
167+
this.mindMap.render();
168+
}
169+
};
170+
</script>
171+
```
172+
</details>
173+
174+
<details>
175+
<summary><strong>HTML/CDN Usage</strong></summary>
176+
177+
```html
178+
<!DOCTYPE html>
179+
<html>
180+
<head>
181+
<script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script>
182+
</head>
183+
<body>
184+
<div id="mindmap"></div>
185+
<script>
186+
const mindMap = new NodeQMindMap({
187+
container: '#mindmap',
188+
data: yourData
189+
});
190+
mindMap.render();
191+
</script>
192+
</body>
193+
</html>
194+
```
195+
</details>
196+
197+
## 🛠️ CLI Usage
198+
199+
```bash
200+
# Generate mind map from JSON
201+
nodeq-mindmap generate --input data.json --output mindmap.svg
202+
203+
# Create data pipeline
204+
nodeq-mindmap pipeline create \
205+
--input sample-input.json \
206+
--output sample-output.json \
207+
--name "My Pipeline"
208+
209+
# Execute pipeline
210+
nodeq-mindmap pipeline execute \
211+
--name "My Pipeline" \
212+
--input new-data.json
213+
```
214+
215+
## 🏭 Real-World Applications
216+
217+
### E-commerce Analytics
218+
Transform order data from multiple sources into analytics-ready format with 95% faster development.
219+
220+
### Financial Risk Assessment
221+
Real-time market data processing for trading decisions with <50ms latency.
222+
223+
### IoT Manufacturing
224+
Predictive maintenance from sensor data with 99.9% uptime.
225+
226+
### Healthcare Data Processing
227+
HIPAA-compliant patient data transformation with automated validation.
228+
229+
[→ See all use cases](docs/USE_CASES.md)
230+
231+
## 🔧 Configuration & Themes
232+
233+
```javascript
234+
const mindMap = new NodeQMindMap({
235+
container: '#mindmap',
236+
data: data,
237+
width: 1200,
238+
height: 800,
239+
theme: {
240+
nodeColor: '#6B46C1', // Purple nodes
241+
textColor: '#1A202C', // Dark text
242+
backgroundColor: '#F7FAFC' // Light background
243+
},
244+
layout: {
245+
algorithm: 'force', // Force-directed layout
246+
nodeSpacing: 250
247+
},
248+
animation: {
249+
enabled: true,
250+
duration: 1000
251+
},
252+
onNodeClick: (node) => {
253+
console.log('Clicked:', node.topic);
254+
}
255+
});
256+
```
257+
258+
**Built-in Themes**: `default`, `dark`, `forest`, `ocean`
259+
260+
## 🚀 Deployment on Replit
261+
262+
1. **Create Repl**: Import your NodeQ project
263+
2. **Install**: `npm install nodeq-mindmap`
264+
3. **Configure**: Use port 5000 and `0.0.0.0` binding
265+
4. **Deploy**: Use Replit's deployment feature
266+
267+
```javascript
268+
// Replit-ready server configuration
269+
const server = app.listen(5000, '0.0.0.0', () => {
270+
console.log('Mind Map app running on port 5000');
271+
});
272+
```
273+
274+
## 📊 Performance
275+
276+
- **Bundle Size**: 25.5 kB (optimized)
277+
- **Load Time**: Fast initialization with lazy loading
278+
- **Memory**: Efficient D3.js rendering with cleanup
279+
- **Compatibility**: Node.js 16+, modern browsers
280+
281+
## 🤝 Contributing
282+
283+
We welcome contributions! See our [Contributing Guide](CONTRIBUTING.md) for details.
284+
285+
1. Fork the repository
286+
2. Create your feature branch
287+
3. Make your changes with tests
288+
4. Submit a pull request
289+
290+
## 📄 License
291+
292+
MIT License - see [LICENSE](LICENSE) file for details.
293+
294+
## 🙏 Acknowledgments
295+
296+
- Built with [D3.js](https://d3js.org/) for powerful visualization
297+
- ML integration with [TensorFlow.js](https://www.tensorflow.org/js)
298+
- Designed for the [Replit](https://replit.com) ecosystem
299+
300+
## 📞 Support & Community
301+
302+
- 🌐 **Website**: [nodeq.cloud](https://nodeq.cloud/)
303+
- 🐛 **Issues**: [GitHub Issues](https://github.com/workflow-builder/nodeq-mindmap/issues)
304+
- 💬 **Discussions**: [GitHub Discussions](https://github.com/orgs/workflow-builder/discussions)
305+
- 🚀 **Deploy**: [Replit](https://replit.com)
306+
307+
---
308+
309+
**Transform your data with intelligence. Visualize your pipelines with clarity.**
310+
311+
Made with ❤️ by the NODEQ Team
312+
85313
## ⚡ Quick Start - Data Pipeline Builder
86314

87315
### Creating Your First Pipeline

0 commit comments

Comments
 (0)