rsac-labs/quantickleखतरा अनुसंधान के लिए एक ग्राफिंग टूलकिट - और अन्य चीजें
यह परियोजना मुख्य रूप से "vibecoded" है, इसलिए उचित सावधानी बरतें। कोड की समीक्षा वास्तविक प्रोग्रामरों द्वारा की गई है, लेकिन यह कमजोरियों के खिलाफ कठोर नहीं है। पूरी तरह से सुरक्षा समीक्षा के बिना बाहरी रूप से एक्सपोज़ न करें।
Quantickle नेटवर्क ग्राफ़ बनाने और उनका अन्वेषण करने के लिए एक इंटरैक्टिव, ब्राउज़र-प्रथम टूलकिट है। फ्रंट-एंड (Cytoscape.js + कस्टम UI) रेंडरिंग, संपादन और लेआउट निष्पादन को संभालता है, जबकि हल्का Express सर्वर UI प्रदान करता है, एकीकरण कॉल को प्रॉक्सी करता है, और वैकल्पिक रूप से ग्राफ़ को Neo4j में संग्रहीत करता है। दूसरे शब्दों में, ब्राउज़र ग्राफ़ स्थिति और विज़ुअलाइज़ेशन का मालिक है, जबकि सर्वर आवश्यक होने पर संसाधनों और एकीकरणों की आपूर्ति करने के लिए मौजूद है।
bezier), सीधी, बंडल (unbundled-bezier), टैक्सी, और गोल टैक्सी विकल्प प्रस्तुत करता है।haystack और segments कर्व शैलियों का भी समर्थन करता है।यहाँ कुछ उदाहरण दिए गए हैं कि Quantickle क्या कर सकता है:
Quantickle साझा अवधारणाओं के एक छोटे से सेट पर बनाता है जो दस्तावेज़ीकरण सेट को जोड़ता है:
समन्वय प्रणाली और स्थानिक लेआउट — Quantickle के निरपेक्ष और गहराई-जागरूक लेआउट x, y, और z निर्देशांक के लिए 0–1000 घन का उपयोग करते हैं। पूर्ण स्थानिक नियमों और प्रकाश व्यवहार के लिए COORDINATE_SYSTEM.md देखें।
ग्राफ़ फ़ाइल प्रबंधन और परियोजना फ़ाइलें — .qut फ़ाइलें विहित सहेजी गई स्थिति हैं; वे नोड्स, किनारों, मेटाडेटा और कंटेनर पदानुक्रम को संग्रहीत करती हैं।
Neo4j एकीकरण — सर्वर ग्राफ़ को Neo4j में बनाए रख और पुनर्प्राप्त कर सकता है, जिसमें मेटाडेटा स्नैपशॉट शामिल हैं। कॉन्फ़िगरेशन और कार्यप्रवाह विवरण के लिए NEO4J_INTEGRATION_README.md देखें।
एक Quantickle ग्राफ़ नोड्स और किनारों का एक सेट है जिसमें मेटाडेटा होता है जो लेआउट, स्टाइलिंग और समूहीकरण को संचालित करता है।
metadata, नोड सरणी, एज सरणी और वैकल्पिक लेआउट या दृश्य स्थिति शामिल है।id के साथ एक शीर्ष, साथ ही , , , और निर्देशांक जैसी वैकल्पिक विशेषताएँ। नोड्स में एकीकरण द्वारा उपयोग किए जाने वाले मार्कडाउन या कस्टम गुण भी शामिल हो सकते हैं।labeltypesizecolorinfosource + target नोड आईडी और वैकल्पिक label, type, weight और स्टाइलिंग मेटाडेटा के साथ एक संबंध।Quantickle का आंतरिक ग्राफ़ JSON nodes और edges सरणियों के साथ एक समतल संरचना है। कंटेनर संबंध और वर्ग नोड मेटाडेटा के रूप में संरक्षित हैं।
Quantickle फ़ाइल → आयात डेटा से और स्वचालित एकीकरण से कई आयात प्रारूप स्वीकार करता है। प्रत्येक आयातकर्ता उसी ग्राफ़ पाइपलाइन को फ़ीड करता है जिसका उपयोग .qut प्रोजेक्ट फ़ाइलों को सहेजते समय किया जाता है, इसलिए नीचे दी गई संरचनाएँ निर्यात आकृतियों का भी प्रतिनिधित्व करती हैं।
CSV आयातक दो लेआउट को पहचानता है:
नोड + एज अनुभाग – Quantickle द्वारा उपयोग किया जाने वाला निर्यात प्रारूप और सबसे सुरक्षित विकल्प जब डेटा मैन्युअल रूप से तैयार किया जाता है। फ़ाइल में एक नोड तालिका होती है जिसके बाद एक खाली पंक्ति और एक एज तालिका होती है: ```csv node_id,node_label,node_type,node_size,node_color,node_x,node_y srv-1,Gateway,server,40,#2dd4bf,100,250 cli-1,Analyst,client,28,#38bdf8,320,210
source,target,label,weight,type srv-1,cli-1,allows,1,connection
अतिरिक्त कॉलम सहन किए जाते हैं—आयातकर्ता Node Label, nodeLabel, या label जैसे हेडर को सामान्य करता है,
किसी भी स्पष्ट color/size मान को संरक्षित करता है, और निर्देशांक उपलब्ध होने पर उन्हें रखता है।
source और target कॉलम हों। वैकल्पिक कॉलम जैसे label, type,
weight, source_type, target_type, source_label, या color को उपस्थित होने पर उत्पन्न नोड्स और किनारों में मर्ज कर दिया जाता है: ```csv
source,target,label,source_type,target_type
srv-1,cli-1,allows,server,client
srv-1,sensor-2,monitors,server,sensor
.edges)त्वरित स्केलेटन ग्राफ़ के लिए सादे व्हाइटस्पेस-सेपरेटेड एज जोड़े समर्थित हैं। लापता नोड्स स्वचालित रूप से बनाए जाते हैं:```text srv-1 cli-1 srv-1 sensor-2
> **ध्यान दें:** एक्सेल वर्कबुक (`.xlsx`) अब समर्थित नहीं हैं। डेटा को CSV के रूप में निर्यात या सहेजें, फिर Quantickle में आयात करें।
#### JSON
`File → Import Data` भी Quantickle द्वारा उत्पादित JSON निर्यात या कच्चे Cytoscape तत्व संग्रह को स्वीकार करता है। जब फ़ाइल में `elements` के साथ नेस्टेड `data` प्रविष्टियाँ होती हैं, तो उन्हें Quantickle की आंतरिक संरचना में सामान्यीकृत किया जाता है।
#### Quantickle ग्राफ (`.qut`)
`.qut` फ़ाइलें JSON दस्तावेज़ हैं जिनमें समतलित नोड और एज ऑब्जेक्ट होते हैं। एक न्यूनतम ग्राफ इस प्रकार दिखता है:
```javascript
{
"nodes": [
{"id": "n1", "label": "Node 1"},
{"id": "n2", "label": "Node 2"}
],
"edges": [
{"source": "n1", "target": "n2", "label": "Edge 1"}
]
}
``````json
{
"metadata": { "name": "My graph" },
"nodes": [
{ "id": "srv-1", "label": "Gateway", "type": "server", "size": 40 }
],
"edges": [
{ "id": "srv-1_cli-1", "source": "srv-1", "target": "cli-1", "label": "allows" }
]
}
Legacy files that store nodes/edges inside a data object are still accepted—the
loader flattens them automatically and preserves coordinates, classes, and
container hierarchy metadata.
When exchanging data with the HTTP API or Neo4j integration, send the same
flattened shape used by .qut files:```json
{
"nodes": [
{ "id": "srv-1", "label": "Gateway", "type": "server", "size": 40 }
],
"edges": [
{ "id": "srv-1_cli-1", "source": "srv-1", "target": "cli-1", "label": "allows" }
]
}
वैकल्पिक `info` फ़ील्ड अभी भी Markdown का समर्थन करती है और किसी भी कस्टम गुणों के साथ बनी रहती है।
<a id="layouts"></a>
## लेआउट
Quantickle लेआउट को व्यावहारिक परिवारों में समूहित करता है ताकि आप कार्य के लिए सही एक चुन सकें:
- **बल-निर्देशित** (force, cose, fcose) — अन्वेषणात्मक संरचना खोज और जब आप प्राकृतिक क्लस्टरिंग चाहते हैं तो उपयुक्त।
- **पदानुक्रमित और प्रवाह** (breadthfirst, dagre) — निर्भरता वृक्षों, कॉल ग्राफ़ या कारण प्रवाहों के लिए सर्वोत्तम।
- **ग्रिड और वृत्त** — डैशबोर्ड, छोटे ग्राफ़ और निर्यात के लिए तेज़, नियतिवादी लेआउट।
- **समय-आधारित** (timeline, timeline-scatter, temporal-attraction) — जब कालानुक्रमिक क्रम या हालिया होना कहानी हो तो उपयोग करें।
- **स्थानिक/निरपेक्ष** (absolute, depth-aware) — ज्ञात निर्देशांकों के साथ मानचित्र-जैसे या आरेखीय लेआउट के लिए उपयोग करें।
- **क्लस्टर/रेडियल** (radial-recency) — जब आप प्रकार या हालिया रिंगों द्वारा समूहीकरण चाहते हैं तो उपयोग करें।
### लेआउट विकल्प```javascript
// js/layouts.js
const layoutOptions = {
'force': {
name: 'force',
animate: true,
randomize: false,
infinite: false
},
'grid': {
name: 'grid',
rows: undefined,
cols: undefined
}
// ... more layouts
}
कस्टम timeline लेआउट नोड्स को समय अक्ष के साथ रखता है। आप barStyle विकल्प के माध्यम से केंद्रीय पट्टी को अनुकूलित कर सकते हैं:```javascript
cy.layout({
name: 'timeline',
barStyle: {
color: '#3498db', // bar color
height: 15, // bar height in pixels
className: 'my-timeline-bar' // optional CSS class
}
}).run();
जब `className` प्रदान किया जाता है, तो टाइमलाइन बार को वह वर्ग मिलता है और इसकी डिफ़ॉल्ट रंग तथा ऊँचाई शैली हटा दी जाती है, ताकि आप इसे CSS के माध्यम से लक्षित कर सकें।
### रेडियल रीसेंसी लेआउट
नवीनतम आइटम को केंद्र के सबसे निकट और पुराने को बाहरी रिंगों पर प्लॉट करने के लिए `radial-recency` का उपयोग करें। लेआउट कोण को एक द्वितीयक विशेषता (प्रकार/क्लस्टर/समूह) से मैप करता है, जिससे संबंधित नोड वृत्त के चारों ओर संरेखित रहते हैं। आप कुछ विकल्पों के साथ रिंगों को ट्यून कर सकते हैं:```javascript
cy.layout({
name: 'radial-recency',
ringThickness: 140, // radial spacing between time rings
minSeparation: 80, // minimum distance between neighbors along a ring
angleJitter: 0.15, // optional jitter (radians) to break perfect symmetry
angleStrategy: 'grouped' // or 'alphabetical' for deterministic ordering
}).run();
See graphs/radial_time_rings.qut for a small fixture that demonstrates concentric time bands grouped by cluster/type metadata.
Use the timeline-scatter layout to map timestamps directly to x positions while distributing nodes vertically by similarity, category, or community. It accepts tunable scales for both axes and optional jitter to reduce overlap:```javascript
cy.layout({
name: 'timeline-scatter',
xScale: 0.5, // pixels per millisecond (auto-calculated when omitted)
yScale: 60, // spread for similarity/category lanes
jitter: 4, // optional per-node jitter to minimise overlap
barStyle: { // applied when timeline bars already exist
color: '#222',
height: 12,
className: 'scatter-bar'
}
}).run();
समानता के संख्यात्मक स्कोर (`similarity`, `similarityScore`, या `similarity_score`) वाले नोड्स माध्य के चारों ओर केंद्रित होते हैं, जबकि श्रेणीबद्ध या समुदाय लेबल y-अक्ष के साथ समान रूप से दूरी पर स्थित लेन बनाते हैं।
### अस्थायी आकर्षण लेआउट
प्रतिकर्षण को हल्का रखते हुए स्प्रिंग शक्तियों को निर्देशित करने के लिए टाइमस्टैम्प दूरी का उपयोग करें:```javascript
cy.layout({
name: 'temporal-attraction',
timeMode: 'gaussian', // or 'bucket'
timeSigma: 60 * 60 * 1000, // Gaussian falloff window (in ms)
bucketSize: 24 * 60 * 60 * 1000, // bucket size when using bucket mode
repulsionStrength: 12 // minimal node repulsion
}).run();
Select Layout → Temporal Attraction - Time Weighted in the UI or pass name: 'temporal-attraction' through the CLI/API layout configuration to enable it.
Quantickle बाहरी सिस्टम से डेटा खींच सकता है या उनके साथ सिंक कर सकता है। एकीकरण आम तौर पर सर्वर के माध्यम से प्रवाहित होते हैं क्योंकि उन्हें क्रेडेंशियल्स, प्रॉक्सी नियम या स्थिरता की आवश्यकता होती है।
http://localhost:3000 पर लॉन्च करें।गहन वॉकथ्रू और स्क्रीनशॉट के लिए, उपयोग गाइड देखें।
.qut में सहेजें।Quantickle js/main.js में परिभाषित वैश्विक window.QuantickleApp के माध्यम से प्रारंभ होता है। जब DOM तैयार होता है तो एप्लिकेशन स्वचालित रूप से window.QuantickleApp.init() को कॉल करता है।
// js/config.js const config = { performance: { nodeLimit: 1000, // Max nodes to render at once batchSize: 100, // Nodes to add per batch webgl: true, // Enable WebGL rendering hideEdgesOnViewport: false // Hide edges while dragging } }
<a id="api"></a>
## API
### HTTP API
The Express server (`server.js`) serves the static front-end and exposes several JSON endpoints used by the UI. All routes are prefixed with `/api`:
| Method & Path | Description |
| --- | --- |
| `GET /api/domain-files` | Lists JSON domain definitions present in `assets/domains/`. |
| `GET /api/examples` | Returns metadata about bundled example `.qut` graphs. |
| `GET /api/serpapi` | Proxies Google Search requests to SerpApi; requires `SERPAPI_API_KEY` in the query string or environment. |
| `GET /api/openai/models` | Proxies OpenAI model listing requests to `api.openai.com`; requires an `Authorization: Bearer ...` header. |
| `GET /api/proxy?url=…` | Forwards HTTP/HTTPS requests to allowed hosts with browser-like headers. |
| `POST /api/neo4j/graph` | Persists a graph to Neo4j. Accepts the flattened Quantickle graph JSON body described above. |
| `POST /api/neo4j/node-graphs` | Finds saved graphs that contain nodes matching the provided `labels` array. |
| `GET /api/neo4j/graphs` | Lists graphs stored in Neo4j along with summary metadata. |
| `GET /api/neo4j/graph/:name` | Fetches a saved graph, returning `metadata`, `nodes`, and `edges`. |
| `DELETE /api/neo4j/graph/:name` | Removes a stored graph from Neo4j. |
All Neo4j endpoints accept credentials via the `X-Neo4j-Url`, `X-Neo4j-Username`, and `X-Neo4j-Password` headers (or the `NEO4J_URL`, `NEO4J_USER`, and `NEO4J_PASSWORD` environment variables on the server). When provided, the `metadata` object is saved alongside the graph and a `savedAt` timestamp is automatically appended.
<a id="api-keys"></a>
### API Keys
Some features require API keys. These are stored in the browser's local storage via the Integrations panel.
- **SerpAPI** — required for the RAG pipeline's web search. Add your key in the Integrations dialog and it will be used by the client-side RAG pipeline.
- **VirusTotal** — used to enrich domain/IP/file/URL nodes and pull relationship graphs.
- **CIRCL-LU** — optional authentication credentials if your MISP feed requires them.
For command-line usage, you may alternatively set `SERPAPI_API_KEY` in the environment.
<a id="backend-proxy"></a>
### Backend Proxy
The server exposes a CORS-bypassing proxy that forwards HTTP(S) requests to hosts listed in the proxy allowlist. Use `/api/proxy` with a URL parameter:```
curl "http://localhost:3000/api/proxy?url=https%3A%2F%2Fopentip.kaspersky.com%2F"
आधार स्वीकृति सूची config/proxy-allowlist.json में स्थित है। आपको यह फ़ाइल प्रदान करना आवश्यक है (या सर्वर शुरू करने से पहले एक कॉमा-सेपरेटेड PROXY_ALLOWLIST एनवायरनमेंट वेरिएबल सेट करना होगा); अन्यथा प्रॉक्सी एक गंभीर कॉन्फ़िगरेशन त्रुटि लॉग करता है और हर अनुरोध को HTTP 403 के साथ अस्वीकार कर देता है।
एकीकरण-विशिष्ट होस्ट (बैकएंड एकीकरण एडेप्टर जैसे OpenAI और VirusTotal के लिए) config/integration-allowlist.json (या INTEGRATION_ALLOWLIST) द्वारा नियंत्रित होते हैं। रनटाइम पर, दोनों स्वीकृति सूचियाँ मर्ज हो जाती हैं। प्रत्येक प्रविष्टि में एक होस्ट या वाइल्डकार्ड पैटर्न सूचीबद्ध होना चाहिए जिसे प्रॉक्सी तक पहुँचने की अनुमति है। * का उपयोग करने वाले वाइल्डकार्ड किसी भी प्रविष्टि में समर्थित हैं, इसलिए *.example.com example.com के किसी भी उपडोमेन की अनुमति देता है, और news-* जैसे मास्क अपेक्षित रूप से व्यवहार करते हैं। उपडोमेन अपने पैरेंट डोमेन की प्रविष्टि भी प्राप्त करते हैं, इसलिए example.com जोड़ने पर स्वचालित रूप से www.example.com की अनुमति मिल जाती है।
एक न्यूनतम स्वीकृति सूची फ़ाइल इस प्रकार दिखती है:```json { "allowlist": ["otx.alienvault.com", "feeds.example.org"] }
यदि आप पर्यावरण चर पसंद करते हैं, तो सर्वर शुरू करने से पहले `PROXY_ALLOWLIST="otx.alienvault.com,feeds.example.org"` सेट करें।
जब प्रॉक्सी किसी अनुरोध को अग्रेषित करता है तो अब वह ब्राउज़र-जैसा हेडर सेट भेजता है (जिसमें आधुनिक Chrome `User-Agent`, `Accept`, `Accept-Language`, और `Sec-Fetch-*` मान शामिल हैं) ताकि एंटी-बॉट फ़िल्टर के पीछे सामग्री को गेट करने वाली साइटें उसी तरह प्रतिक्रिया दें जैसे वे सामान्य पेज लोड पर देती हैं। इनमें से किसी भी हेडर को आवश्यकता होने पर क्लाइंट अनुरोध से `x-proxy-<header>` ओवरराइड प्रदान करके ओवरराइड किया जा सकता है।
<a id="storage"></a>
## भंडारण
क्वांटिकल काम करते समय ब्राउज़र में ग्राफ़ स्थिति रखता है, फिर जब आप निर्यात या सिंक करते हैं तो उसे स्थायी करता है।
- **ब्राउज़र भंडारण** — सेटिंग्स और API कुंजियाँ ब्राउज़र में स्थानीय रूप से संग्रहीत होती हैं।
- **प्रोजेक्ट फ़ाइलें (`.qut`)** — पूर्ण-निष्ठा ग्राफ़ स्नैपशॉट के लिए आपके वर्कस्पेस फ़ोल्डर में सहेजी जाती हैं। वर्कस्पेस नियमों और फ़ाइल जीवनचक्र के लिए [GRAPH_FILE_MANAGEMENT_README.md](https://github.com/rsac-labs/quantickle/blob/HEAD/GRAPH_FILE_MANAGEMENT_README.md) देखें।
- **Neo4j** — सहयोग और खोज के लिए वैकल्पिक सर्वर-साइड स्थायित्व, Neo4j एकीकरण के माध्यम से कॉन्फ़िगर किया गया।
<a id="project-structure"></a>
## परियोजना संरचना```
quantickle/
├── assets/ # Static assets
│ ├── backgrounds/ # Background graphics
│ ├── icons/ # Mostly empty now; icons are colocated with node types
│ ├── domains/ # Node type definitions
│ ├── help/ # Help pages
│ ├── examples/ # Example graphs
│ └── css/ # Stylesheets referenced by index.html
├── config/ # Proxy allowlist
├── data_retrieval/ # SerpAPI/web search helpers used by the RAG pipeline
├── graphs/ # Workspace folder for bundled and test .qut graphs
├── js/ # Front-end source modules
│ ├── main.js # Application bootstrap
│ ├── ai-input-manager.js # Currently unused
│ ├── api.js # HTTP client for server endpoints
│ ├── graph.js # Graph rendering and management
│ ├── graph-manager.js # High-level graph state orchestration
│ ├── graph-reference-resolver.js # Normalization of graph references
│ ├── layouts.js # Layout registration and options
│ ├── 3d-globe-layout.js # 3D Layout
│ ├── absolute-layout.js # Absolute coordinate layout
│ ├── custom-layouts.js # Other custom layouts
│ ├── aggressive-performance-fix.js # Aggressive Performance Fix for Large Graph Panning
│ ├── non-invasive-performance-fix.js # Non-Invasive Performance Fix for Large Graphs
│ ├── lod-system.js # Level of Detail (LOD) System
│ ├── auto-refresh.js # Auto-refresh functionality when new data arrives
│ ├── config.js # Default settings
│ ├── domain-loader.js # Loading and managing domain-specific node type configurations
│ ├── edge-editor.js # Editing edge styles
│ ├── extensions.js # Loading and registration of Cytoscape extensions
│ ├── integrations.js # Configuration and connection to external services
│ ├── rag-pipeline.js # Handles AI-assisted data ingestion
│ ├── secure-storage.js # Encrypts sensitive values in sessionStorage
│ ├── source-editor.js # Editor for the JSON graph source
│ ├── tables.js # Data table updates, filtering, and display
│ ├── ui.js # User interface interactions and notifications
│ ├── validation.js # Validation of all data inputs
│ ├── workspace-manager.js # Workspace file functionality
│ ├── utils.js # Shared browser utilities
│ ├── integrations/ # Integration-specific helpers (MISP/CIRCL-LU, etc.)
│ └── features/ # Feature modules (node editor, callouts, timeline, ...)
├── tests/ # Automated regression tests covering UI flows, imports, and APIs
├── utils/ # Node helpers (Neo4j client, readability shim, CLI scripts)
├── public/
│ ├── index.html # Static front-end
│ └── favicon.ico # Main app icon
├── package.json # Node dependencies and scripts
└── server.js # Express server exposing the HTTP API
ग्राफ प्रस्तुत नहीं हो रहा
खराब प्रदर्शन
लेआउट समस्याएँ
यह प्रोजेक्ट एक आधिकारिक भंडार के रूप में सक्रिय रूप से रखरखाव नहीं किया जा रहा है। PR's को संभवतः अनदेखा किया जाएगा। हालांकि, प्रतिक्रिया, बग रिपोर्ट और टिप्पणियों का स्वागत है।
This project is licensed under the Apache 2.0 License - see the LICENSE file for details.