initial app

.gitignore

@@ -1 +1,2 @@
-instructions.md
+instructions.md
+Model-Atlas

README.md

@@ -0,0 +1,49 @@
+# Daily Paper Atlas
+
+A visualization tool for exploring papers and authors network graphs, inspired by the [Model Atlas](https://arxiv.org/abs/2503.10633) paper.
+
+## Features
+
+- Interactive graph visualization of papers and authors
+- Search functionality to find specific nodes
+- Color coding by node attributes
+- Group filtering
+- Node details panel
+- Responsive zoom and navigation
+
+## Setup
+
+1. Convert your GRAPHML file to JSON format:
+
+```bash
+python graphml_to_json.py graph.graphml paper_atlas_data.json paper_atlas_data.json.gz
+```
+
+2. Start the web server:
+
+```bash
+python app.py
+```
+
+3. Open your browser to http://localhost:7860
+
+## Technology Stack
+
+- Python for server and data processing
+- SigmaJS for graph visualization
+- jQuery for DOM manipulation
+- Pako.js for client-side decompression
+- HTML/CSS for the interface
+
+## Data Format
+
+The application expects a GraphML file that will be converted to a JSON format suitable for SigmaJS. The GraphML file should include node attributes like:
+- label
+- type (e.g., "author", "paper")
+- x, y (coordinates for positioning)
+- size
+- r, g, b (color values)
+
+## Credits
+
+This visualization is inspired by the work described in ["Charting and Navigating Hugging Face's Model Atlas"](https://arxiv.org/abs/2503.10633) by Eliahu Horwitz, Nitzan Kurer, Jonathan Kahana, Liel Amar, and Yedid Hoshen. 

app.py

@@ -0,0 +1,21 @@
+import os
+import json
+import requests
+from http.server import SimpleHTTPRequestHandler, ThreadingHTTPServer
+from urllib.parse import parse_qs, urlparse
+
+
+class RequestHandler(SimpleHTTPRequestHandler):
+    def do_GET(self):
+        if self.path == "/":
+            self.path = "index.html"
+
+            return SimpleHTTPRequestHandler.do_GET(self)
+
+        else:
+            return SimpleHTTPRequestHandler.do_GET(self)
+
+
+print("Starting server on port 7860... Open http://localhost:7860 in your browser")
+server = ThreadingHTTPServer(("", 7860), RequestHandler)
+server.serve_forever() 

check_json.py

@@ -0,0 +1,63 @@
+#!/usr/bin/env python
+import json
+import gzip
+import os
+
+# File paths
+json_file = 'paper_atlas_data.json'
+compressed_file = 'paper_atlas_data.json.gz'
+
+# Check if we need to decompress
+if os.path.exists(compressed_file) and (not os.path.exists(json_file) or os.path.getsize(json_file) == 0):
+    print(f"Decompressing {compressed_file} to {json_file}")
+    with gzip.open(compressed_file, 'rb') as f_in:
+        with open(json_file, 'wb') as f_out:
+            f_out.write(f_in.read())
+
+# Check if JSON file exists and has content
+if not os.path.exists(json_file) or os.path.getsize(json_file) == 0:
+    print(f"Error: {json_file} doesn't exist or is empty!")
+    exit(1)
+
+# Try to load the JSON data
+try:
+    with open(json_file, 'r') as f:
+        data = json.load(f)
+        
+    # Check structure
+    if 'nodes' not in data or 'edges' not in data:
+        print("Error: JSON data doesn't have expected 'nodes' and 'edges' properties!")
+        exit(1)
+        
+    # Add x,y coordinates to nodes that don't have them
+    nodes_fixed = 0
+    for node in data['nodes']:
+        if 'x' not in node or 'y' not in node:
+            # Assign random coordinates
+            import random
+            node['x'] = random.uniform(-10, 10)
+            node['y'] = random.uniform(-10, 10)
+            nodes_fixed += 1
+    
+    if nodes_fixed > 0:
+        print(f"Fixed {nodes_fixed} nodes without coordinates")
+        
+        # Save the fixed JSON
+        with open(json_file, 'w') as f:
+            json.dump(data, f)
+            
+        # Update the compressed file
+        with open(json_file, 'rb') as f_in:
+            with gzip.open(compressed_file, 'wb') as f_out:
+                f_out.write(f_in.read())
+                
+        print("Updated JSON files with fixes")
+    
+    print(f"JSON data is valid with {len(data['nodes'])} nodes and {len(data['edges'])} edges")
+    
+except json.JSONDecodeError as e:
+    print(f"Error: Invalid JSON format: {e}")
+    exit(1)
+except Exception as e:
+    print(f"Error: {e}")
+    exit(1) 

config.json

@@ -0,0 +1,70 @@
+{
+  "type": "network",
+  "version": "1.0",
+  "data": "paper_atlas_data.json",
+  "logo": {
+    "file": "",
+    "link": "",
+    "text": "Daily Paper Atlas"
+  },
+  "text": {
+    "more": "<p><strong>About:</strong> This visualization represents a network of research papers and authors, showing connections and relationships between them. The network is based on the graph.graphml file and converted to a format suitable for web visualization.</p>",
+    "intro": "A visualization of research papers and authors network. This interactive map shows relationships between papers and the researchers who created them.",
+    "title": "Daily Paper Atlas"
+  },
+  "legend": {
+    "edgeLabel": "Connection",
+    "colorLabel": "Node Type",
+    "nodeLabel": "Paper/Author"
+  },
+  "features": {
+    "search": true,
+    "groupSelectorAttribute": "type",
+    "hoverBehavior": "dim",
+    "zoomButtons": true,
+    "fancyBox": true,
+    "forceAtlas2": true,
+    "forceAtlas2Time": 5000,
+    "defaultColorAttribute": "type",
+    "labelThreshold": 8
+  },
+  "informationPanel": {
+    "groupByEdgeDirection": false,
+    "imageAttribute": false
+  },
+  "sigma": {
+    "drawingProperties": {
+      "defaultEdgeType": "curve",
+      "defaultHoverLabelBGColor": "#002147",
+      "defaultLabelBGColor": "#ddd",
+      "activeFontStyle": "bold",
+      "defaultLabelColor": "#000",
+      "labelThreshold": 8,
+      "defaultLabelHoverColor": "#fff",
+      "fontStyle": "bold",
+      "hoverFontStyle": "bold",
+      "defaultLabelSize": 14
+    },
+    "graphProperties": {
+      "maxEdgeSize": 2,
+      "minEdgeSize": 0.5,
+      "minNodeSize": 2,
+      "maxNodeSize": 10
+    },
+    "mouseProperties": {
+      "maxRatio": 20,
+      "minRatio": 0.75
+    }
+  },
+  "nodeTypes": {
+    "paper": { "color": "#2ca02c", "size": 3 },
+    "author": { "color": "#9467bd", "size": 5 },
+    "organization": { "color": "#1f77b4", "size": 4 },
+    "unknown": { "color": "#ff7f0e", "size": 3 }
+  },
+  "colorPalette": [
+    "#9467bd", "#2ca02c", "#1f77b4", "#17becf", 
+    "#ff7f0e", "#d62728", "#8c564b", "#e377c2", 
+    "#bcbd22", "#7f7f7f"
+  ]
+} 

css/style.css

@@ -0,0 +1,489 @@
+* {
+  padding: 0px;
+  margin: 0px;
+}
+
+.cf:before, .cf:after {
+  content: "";
+  display: table;
+}
+
+.cf:after {
+  clear: both;
+}
+
+.cf {
+  zoom: 1;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  padding: 0px;
+  font-size: 12px;
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.25em;
+}
+
+.sigma-parent {
+  position: relative;
+  height: 100%;
+}
+
+.sigma-expand {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  background-position: center center;
+  background-repeat: no-repeat;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+canvas#sigma_bg_1 {
+  display: none;
+}
+
+#attributepane {
+  display: none;
+  position: absolute;
+  height: auto;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 240px;
+  background-color: #fff;
+  margin: 0;
+  z-index: 1;
+  border-left: 1px solid #ccc;
+  overflow: auto;
+  padding: 0px;
+  padding-bottom: 60px;
+  box-shadow: -3px 0px 8px rgba(0, 0, 0, 0.15);
+}
+
+#attributepane .text {
+  padding: 10px;
+}
+
+#attributepane .headertext {
+  color: #fff;
+  background-color: #444;
+  margin: 0;
+  padding: 10px;
+  font-weight: bold;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+#attributepane .returntext {
+  color: #1f77b4;
+  cursor: pointer;
+  margin-top: 10px;
+  padding: 5px;
+  border-top: 1px solid #ddd;
+  font-weight: bold;
+}
+
+#attributepane .returntext:hover {
+  text-decoration: underline;
+}
+
+.nodeattributes {
+  padding: 5px 0;
+}
+
+.nodeattributes .name {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.nodeattributes .data div {
+  margin-bottom: 5px;
+}
+
+.nodeattributes .p {
+  font-weight: bold;
+  margin: 10px 0 5px 0;
+}
+
+.nodeattributes .link ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nodeattributes .link ul li {
+  margin-bottom: 5px;
+}
+
+.nodeattributes .link ul li a {
+  color: #1f77b4;
+  text-decoration: none;
+}
+
+.nodeattributes .link ul li a:hover {
+  text-decoration: underline;
+}
+
+#attributepane .close {
+  padding-left: 14px;
+  margin-top: 10px;
+}
+
+#attributepane .close .c {
+  border-top: 2px solid #999;
+  padding: 10px 0 14px 0;
+}
+
+#attributepane .nodeattributes {
+  display: block;
+  height: 85%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-bottom: 1px solid #999;
+}
+
+#attributepane .name {
+  font-size: 14px;
+  cursor: default;
+  padding-bottom: 10px;
+  padding-top: 18px;
+  font-weight: bold;
+}
+
+#attributepane .data {
+  margin-bottom: 10px;
+}
+
+#attributepane .link {
+  padding: 0 0 0 4px;
+}
+
+#attributepane .link li {
+  padding-top: 2px;
+  cursor: pointer;
+  list-style: none;
+}
+
+#attributepane .p {
+  padding-top: 10px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.left-close {
+  cursor: pointer;
+  padding-left: 31px;
+  line-height: 36px;
+  background-repeat: no-repeat;
+  margin-bottom: 25px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+#developercontainer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  text-align: left;
+  font-size: 11px;
+  color: #777;
+  background: rgba(255, 255, 255, 0.8);
+  z-index: 20;
+  padding: 5px 10px;
+  border-top: 1px solid #ddd;
+}
+
+#maintitle {
+  width: 100%;
+  text-align: center;
+  margin-top: 10px;
+}
+
+#maintitle h1 {
+  font-size: 20px;
+}
+
+#mainpanel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: auto;
+  width: 240px;
+  height: auto;
+  z-index: 20;
+  background: rgba(255, 255, 255, 0.95);
+  border-right: 1px solid #ccc;
+  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+  overflow: auto;
+  padding: 0;
+}
+
+#mainpanel .col {
+  padding: 15px;
+  border-bottom: 1px solid #eee;
+}
+
+#title {
+  font-weight: bold;
+  text-align: left;
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+
+#titletext {
+  padding: 5px 0;
+}
+
+.info {
+  padding: 5px 0;
+}
+
+.info a {
+  color: #0000CC;
+  text-decoration: none;
+}
+
+.info a:hover {
+  text-decoration: underline;
+}
+
+#legend {
+  padding: 10px 0;
+}
+
+.legenditem {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.legendcolor {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-right: 8px;
+  border-radius: 50%;
+}
+
+.box {
+  margin-bottom: 10px;
+}
+
+h2 {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+#search {
+  margin-top: 10px;
+}
+
+#search input {
+  border: 1px solid #ccc;
+  padding: 5px 7px;
+  width: 80%;
+  box-sizing: border-box;
+  margin-bottom: 5px;
+}
+
+#search-button {
+  display: inline-block;
+  background: #f5f5f5;
+  border: 1px solid #ccc;
+  padding: 3px 8px;
+  cursor: pointer;
+  margin-left: 5px;
+  vertical-align: middle;
+}
+
+.state {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  background-position: -131px -13px;
+  margin-right: 5px;
+  cursor: pointer;
+}
+
+.results {
+  margin-top: 10px;
+  border: 1px solid #eee;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.results a {
+  display: block;
+  padding: 5px;
+  text-decoration: none;
+  color: #000;
+  border-bottom: 1px solid #eee;
+}
+
+.results a:hover {
+  background: #f5f5f5;
+}
+
+.select-wrapper {
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.select-wrapper select {
+  width: 100%;
+  padding: 5px;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
+}
+
+.select-wrapper:after {
+  content: "";
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  border-color: #999 transparent transparent transparent;
+  pointer-events: none;
+}
+
+#attributeselect, #coloringselect, #atlasselect {
+  margin-top: 15px;
+  padding-bottom: 10px;
+}
+
+.select {
+  border: 1px solid #ccc;
+  padding: 5px 7px;
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 5px;
+  cursor: pointer;
+  background: #f5f5f5;
+  position: relative;
+}
+
+.list {
+  margin-top: 5px;
+  max-height: 200px;
+  overflow-y: auto;
+  display: none;
+  border: 1px solid #eee;
+  background: #fff;
+}
+
+.list a {
+  display: block;
+  padding: 5px;
+  text-decoration: none;
+  color: #000;
+  border-bottom: 1px solid #eee;
+}
+
+.list a:hover {
+  background: #f5f5f5;
+}
+
+#colorLegend {
+  margin-top: 10px;
+}
+
+#colorLegend div {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+#colorLegend span {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+#zoom {
+  position: absolute;
+  bottom: 40px;
+  right: 10px;
+  z-index: 20;
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  padding: 5px;
+}
+
+#zoom .z {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 1px solid #ccc;
+  margin: 0 2px;
+  text-align: center;
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 18px;
+  line-height: 24px;
+  border-radius: 3px;
+  background: #fff;
+}
+
+#zoom .z:hover {
+  background: #f5f5f5;
+}
+
+#zoom .z[rel="in"]:before {
+  content: "+";
+}
+
+#zoom .z[rel="out"]:before {
+  content: "-";
+}
+
+#zoom .z[rel="center"]:before {
+  content: "⌂";
+}
+
+#key-features {
+  padding-top: 10px;
+}
+
+#key-features ul {
+  margin-left: 20px;
+  margin-top: 5px;
+}
+
+#key-features li {
+  margin-bottom: 5px;
+}
+
+#node-info {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 5px 10px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  font-size: 12px;
+  z-index: 10;
+  display: none;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+} 

css/tablet.css

@@ -0,0 +1,3 @@
+#mainpanel {
+  width: 200px;
+} 

graphml_to_json.py

@@ -0,0 +1,131 @@
+#!/usr/bin/env python
+import json
+import gzip
+import xml.etree.ElementTree as ET
+import sys
+import os
+
+def graphml_to_json(graphml_file, output_json, compressed_output=None):
+    """
+    Convert a GraphML file to SigmaJS-compatible JSON format
+    """
+    # Parse the GraphML file
+    print(f"Parsing GraphML file: {graphml_file}")
+    tree = ET.parse(graphml_file)
+    root = tree.getroot()
+    
+    # Define the namespace
+    ns = {'graphml': 'http://graphml.graphdrawing.org/xmlns'}
+    
+    # Extract the graph from the GraphML
+    graph = root.find('graphml:graph', ns)
+    
+    if graph is None:
+        # Try without namespace
+        graph = root.find('graph')
+        if graph is None:
+            raise ValueError("Could not find graph element in GraphML file")
+    
+    # Prepare the JSON structure
+    sigma_data = {
+        'nodes': [],
+        'edges': []
+    }
+    
+    print("Processing nodes...")
+    node_count = 0
+    # Process nodes
+    for node in graph.findall('graphml:node', ns) or graph.findall('node'):
+        node_id = node.get('id')
+        node_data = {'id': node_id, 'attr': {'colors': {}}}
+        
+        # Process node attributes
+        for data in node.findall('graphml:data', ns) or node.findall('data'):
+            key = data.get('key')
+            if key == 'label':
+                node_data['label'] = data.text
+            elif key == 'x':
+                node_data['x'] = float(data.text)
+            elif key == 'y':
+                node_data['y'] = float(data.text)
+            elif key == 'size':
+                node_data['size'] = float(data.text)
+            elif key == 'r':
+                # Find g and b values
+                g_elem = node.find(f'graphml:data[@key="g"]', ns) or node.find(f'data[@key="g"]')
+                b_elem = node.find(f'graphml:data[@key="b"]', ns) or node.find(f'data[@key="b"]')
+                
+                if g_elem is not None and b_elem is not None:
+                    node_data['color'] = f"rgb({data.text},{g_elem.text},{b_elem.text})"
+            elif key == 'type':
+                node_data['attr']['colors']['type'] = data.text
+                # Set a default color based on node type
+                if data.text == 'author':
+                    node_data['color'] = 'rgb(154,150,229)'
+                elif data.text == 'paper':
+                    node_data['color'] = 'rgb(229,150,154)'
+                else:
+                    node_data['color'] = 'rgb(150,229,154)'
+        
+        sigma_data['nodes'].append(node_data)
+        node_count += 1
+    
+    print(f"Processed {node_count} nodes")
+    
+    print("Processing edges...")
+    edge_count = 0
+    # Process edges
+    for edge in graph.findall('graphml:edge', ns) or graph.findall('edge'):
+        source = edge.get('source')
+        target = edge.get('target')
+        
+        edge_data = {
+            'id': f"e{edge_count}",
+            'source': source,
+            'target': target
+        }
+        edge_count += 1
+        
+        # Process edge attributes
+        for data in edge.findall('graphml:data', ns) or edge.findall('data'):
+            key = data.get('key')
+            if key == 'weight':
+                edge_data['weight'] = float(data.text)
+            elif key == 'edgelabel':
+                edge_data['label'] = data.text
+        
+        sigma_data['edges'].append(edge_data)
+    
+    print(f"Processed {edge_count} edges")
+    
+    # Write the JSON file
+    print(f"Writing JSON to {output_json}")
+    with open(output_json, 'w') as f:
+        json.dump(sigma_data, f)
+    
+    # If compressed output is requested, create a gzipped version
+    if compressed_output:
+        print(f"Creating compressed file: {compressed_output}")
+        with open(output_json, 'rb') as f_in:
+            data = f_in.read()
+            # Write gzipped data with proper headers for web
+            with gzip.open(compressed_output, 'wb', compresslevel=9) as f_out:
+                f_out.write(data)
+
+if __name__ == '__main__':
+    if len(sys.argv) < 3:
+        print("Usage: python graphml_to_json.py <input_graphml> <output_json> [compressed_output]")
+        sys.exit(1)
+    
+    input_file = sys.argv[1]
+    output_file = sys.argv[2]
+    compressed_file = sys.argv[3] if len(sys.argv) > 3 else None
+    
+    try:
+        graphml_to_json(input_file, output_file, compressed_file)
+        print(f"Conversion completed. JSON saved to {output_file}")
+        if compressed_file:
+            print(f"Compressed version saved to {compressed_file}")
+    except Exception as e:
+        print(f"Error during conversion: {e}")
+        sys.exit(1) 

index.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" itemscope itemtype="http://schema.org/Map">
+
+<head>
+<title>Daily Paper Atlas</title>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,user-scalable=no" />
+<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+<meta name="description" content="A network visualization of research papers and authors">
+
+<!-- Load jQuery first -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
+
+<!-- Load Sigma.js (exact SigmaJS version used in Model-Atlas) -->
+<script src="js/sigma/sigma.min.js" type="text/javascript"></script>
+<script src="js/sigma/sigma.parseJson.js" type="text/javascript"></script>
+<script src="js/sigma/plugins/sigma.plugins.filter.min.js" type="text/javascript"></script>
+
+<!-- Load fancybox for popups -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" type="text/javascript"></script>
+
+<!-- Load pako for decompression -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.4/pako.min.js" type="text/javascript"></script>
+
+<!-- CSS files -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css"/>
+<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
+<link rel="stylesheet" media="screen and (max-height: 770px)" href="css/tablet.css" />
+
+<!-- Our main JavaScript file - load this after the libraries -->
+<script src="js/main.js" type="text/javascript"></script>
+
+</head>
+
+<body>
+  <div class="sigma-parent">
+    <div class="sigma-expand" id="sigma-canvas"></div>
+  </div>
+  <div id="mainpanel">
+    <div class="col">
+      <div id="title">Daily Paper Atlas</div>
+      <div id="titletext">A visualization of research papers and authors network. This interactive map shows relationships between papers and the researchers who created them.</div>
+    </div>
+    
+    <div class="col">
+      <div id="key-features">
+        <h2>Key Features</h2>
+        <ul>
+          <li><strong>Search:</strong> Find papers or authors by name.</li>
+          <li><strong>Color By:</strong> Customize node colors based on attributes.</li>
+          <li><strong>Filter:</strong> Filter the network by node type.</li>
+          <li><strong>Interactive Nodes:</strong> Click nodes to view details.</li>
+        </ul>
+      </div>
+      
+      <div id="legend">
+        <h2>Legend:</h2>
+        <div id="colorLegend"></div>
+      </div>
+    </div>
+    
+    <div class="col">
+      <div id="search">
+        <h2>Search:</h2>
+        <div class="search-wrapper">
+          <input type="text" id="search-input" placeholder="Search by name">
+          <div id="search-button">→</div>
+        </div>
+        <div class="results"></div>
+      </div>
+    </div>
+    
+    <div class="col">
+      <div id="coloringselect">
+        <h2>Color By:</h2>
+        <div class="select-wrapper">
+          <select id="color-attribute">
+            <option value="type">type</option>
+            <option value="year">year</option>
+            <option value="category">category</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    
+    <div class="col">
+      <div id="filteroptions">
+        <h2>Filter:</h2>
+        <div class="select-wrapper">
+          <select id="filter-select">
+            <option value="all">Show All</option>
+            <option value="papers">Papers Only</option>
+            <option value="authors">Authors Only</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <div id="attributepane">
+    <div class="text">
+      <div class="headertext">Information Pane</div>
+      <div class="nodeattributes">
+        <div class="name">Select a node to see details</div>
+        <div class="data"></div>
+        <div class="p">Connections:</div>
+        <div class="link">
+          <ul></ul>
+        </div>
+      </div>
+      <div class="returntext">Return to the full network</div>
+    </div>
+  </div>
+  
+  <div id="zoom">
+    <div class="z" rel="in"></div>
+    <div class="z" rel="out"></div>
+    <div class="z" rel="center"></div>
+  </div>
+  
+  <div id="developercontainer">
+    Web rendering powered by <a href="https://sigmajs.org/" target="_blank">SigmaJS</a>. Developed by Daily Paper Atlas Team.
+  </div>
+</body>
+</html> 

js/main.js

@@ -0,0 +1,647 @@
+// Global variables
+let sigmaInstance;
+let graph;
+let filter;
+let config = {};
+let greyColor = '#ccc';
+let activeState = { activeNodes: [], activeEdges: [] };
+let selectedNode = null;
+let colorAttributes = [];
+let colors = [
+  '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', 
+  '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'
+];
+let nodeTypes = {
+  'paper': { color: '#2ca02c', size: 3 },
+  'author': { color: '#9467bd', size: 5 },
+  'organization': { color: '#1f77b4', size: 4 },
+  'unknown': { color: '#ff7f0e', size: 3 }
+};
+
+// Initialize when document is ready
+$(document).ready(function() {
+  console.log("Document ready, initializing Daily Paper Atlas");
+  
+  // Initialize attribute pane
+  $('#attributepane').css('display', 'none');
+  
+  // Load configuration
+  $.getJSON('config.json', function(data) {
+    console.log("Configuration loaded:", data);
+    config = data;
+    document.title = config.text.title || 'Daily Paper Atlas';
+    $('#title').text(config.text.title || 'Daily Paper Atlas');
+    $('#titletext').text(config.text.intro || '');
+    loadGraph();
+  }).fail(function(jqXHR, textStatus, errorThrown) {
+    console.error("Failed to load config:", textStatus, errorThrown);
+  });
+
+  // Set up search functionality
+  $('#search-input').keyup(function(e) {
+    let searchTerm = $(this).val();
+    if (searchTerm.length > 2) {
+      searchNodes(searchTerm);
+    } else {
+      $('.results').empty();
+    }
+  });
+  
+  $('#search-button').click(function() {
+    let searchTerm = $('#search-input').val();
+    if (searchTerm.length > 2) {
+      searchNodes(searchTerm);
+    }
+  });
+
+  // Set up zoom buttons
+  $('#zoom .z[rel="in"]').click(function() {
+    if (sigmaInstance) {
+      let a = sigmaInstance._core;
+      sigmaInstance.zoomTo(a.domElements.nodes.width / 2, a.domElements.nodes.height / 2, a.mousecaptor.ratio * 1.5);
+    }
+  });
+  
+  $('#zoom .z[rel="out"]').click(function() {
+    if (sigmaInstance) {
+      let a = sigmaInstance._core;
+      sigmaInstance.zoomTo(a.domElements.nodes.width / 2, a.domElements.nodes.height / 2, a.mousecaptor.ratio * 0.5);
+    }
+  });
+  
+  $('#zoom .z[rel="center"]').click(function() {
+    if (sigmaInstance) {
+      sigmaInstance.position(0, 0, 1).draw();
+    }
+  });
+
+  // Set up attribute pane functionality
+  $('.returntext').click(function() {
+    nodeNormal();
+  });
+
+  // Set up color selector
+  $('#color-attribute').change(function() {
+    let attr = $(this).val();
+    colorNodesByAttribute(attr);
+  });
+  
+  // Set up filter selector
+  $('#filter-select').change(function() {
+    let filterValue = $(this).val();
+    filterByNodeType(filterValue);
+  });
+});
+
+// Load graph data
+function loadGraph() {
+  console.log("Loading graph data from:", config.data);
+  
+  // Check if data is a .gz file and needs decompression
+  if (config.data && config.data.endsWith('.gz')) {
+    console.log("Compressed data detected, loading via fetch and pako");
+    
+    fetch(config.data)
+      .then(response => response.arrayBuffer())
+      .then(arrayBuffer => {
+        try {
+          // Decompress the gzipped data
+          const uint8Array = new Uint8Array(arrayBuffer);
+          const decompressed = pako.inflate(uint8Array, { to: 'string' });
+          
+          // Parse the JSON data
+          const data = JSON.parse(decompressed);
+          console.log("Graph data decompressed and parsed successfully");
+          initializeGraph(data);
+        } catch (error) {
+          console.error("Error decompressing data:", error);
+        }
+      })
+      .catch(error => {
+        console.error("Error fetching compressed data:", error);
+      });
+  } else {
+    // Load uncompressed JSON directly
+    $.getJSON(config.data, function(data) {
+      console.log("Graph data loaded successfully");
+      initializeGraph(data);
+    }).fail(function(jqXHR, textStatus, errorThrown) {
+      console.error("Failed to load graph data:", textStatus, errorThrown);
+      alert('Failed to load graph data. Please check the console for more details.');
+    });
+  }
+}
+
+// Initialize the graph with the loaded data
+function initializeGraph(data) {
+  graph = data;
+  console.log("Initializing graph with nodes:", graph.nodes.length, "edges:", graph.edges.length);
+  
+  try {
+    // Initialize Sigma instance using the older sigma.init pattern
+    sigmaInstance = sigma.init(document.getElementById('sigma-canvas'));
+    
+    // Configure mouse properties to ensure events work
+    sigmaInstance.mouseProperties({
+      maxRatio: 32,
+      minRatio: 0.5,
+      mouseEnabled: true,
+      mouseInertia: 0.8
+    });
+    
+    console.log("Sigma mouse properties configured");
+    
+    // Add nodes and edges to sigma
+    for (let i = 0; i < graph.nodes.length; i++) {
+      let node = graph.nodes[i];
+      sigmaInstance.addNode(node.id, {
+        label: node.label || node.id,
+        x: node.x || Math.random() * 100,
+        y: node.y || Math.random() * 100,
+        size: node.size || 1,
+        color: node.color || (node.type && config.nodeTypes && config.nodeTypes[node.type] ? 
+                  config.nodeTypes[node.type].color : nodeTypes[node.type]?.color || '#666'),
+        type: node.type
+      });
+    }
+    
+    for (let i = 0; i < graph.edges.length; i++) {
+      let edge = graph.edges[i];
+      sigmaInstance.addEdge(edge.id, edge.source, edge.target, {
+        size: edge.size || 1,
+        color: edge.color || '#aaa'
+      });
+    }
+    
+    // Configure drawing properties
+    sigmaInstance.drawingProperties({
+      labelThreshold: config.sigma?.drawingProperties?.labelThreshold || 8,
+      defaultLabelColor: config.sigma?.drawingProperties?.defaultLabelColor || '#000',
+      defaultLabelSize: config.sigma?.drawingProperties?.defaultLabelSize || 14,
+      defaultEdgeType: config.sigma?.drawingProperties?.defaultEdgeType || 'curve',
+      defaultHoverLabelBGColor: config.sigma?.drawingProperties?.defaultHoverLabelBGColor || '#002147',
+      defaultLabelHoverColor: config.sigma?.drawingProperties?.defaultLabelHoverColor || '#fff',
+      borderSize: 2,
+      nodeBorderColor: '#fff',
+      defaultNodeBorderColor: '#fff',
+      defaultNodeHoverColor: '#fff'
+    });
+    
+    // Configure graph properties
+    sigmaInstance.graphProperties({
+      minNodeSize: config.sigma?.graphProperties?.minNodeSize || 1,
+      maxNodeSize: config.sigma?.graphProperties?.maxNodeSize || 8,
+      minEdgeSize: config.sigma?.graphProperties?.minEdgeSize || 0.5,
+      maxEdgeSize: config.sigma?.graphProperties?.maxEdgeSize || 2,
+      sideMargin: 50
+    });
+    
+    // Force redraw and refresh
+    sigmaInstance.draw(2, 2, 2, 2);
+    sigmaInstance.refresh();
+    
+    console.log("Sigma instance created and configured:", sigmaInstance);
+    
+    // Initialize ForceAtlas2 layout if configured
+    if (config.features && config.features.forceAtlas2) {
+      console.log("Starting ForceAtlas2 layout...");
+      sigmaInstance.startForceAtlas2();
+      
+      setTimeout(function() {
+        sigmaInstance.stopForceAtlas2();
+        console.log("ForceAtlas2 layout completed");
+        sigmaInstance.refresh();
+        
+        // Initialize node colors and sizes by type
+        applyNodeStyles();
+        
+        // Initialize filtering
+        initFilters();
+        
+        // If a default color attribute is set, apply it
+        if (config.features && config.features.defaultColorAttribute) {
+          $('#color-attribute').val(config.features.defaultColorAttribute);
+          colorNodesByAttribute(config.features.defaultColorAttribute);
+        } else {
+          updateColorLegend(nodeTypes);
+        }
+        
+        // Bind events
+        bindEvents();
+      }, config.features?.forceAtlas2Time || 5000);
+    } else {
+      // Initialize node colors and sizes by type
+      applyNodeStyles();
+      
+      // Initialize filtering
+      initFilters();
+      
+      // If a default color attribute is set, apply it
+      if (config.features && config.features.defaultColorAttribute) {
+        $('#color-attribute').val(config.features.defaultColorAttribute);
+        colorNodesByAttribute(config.features.defaultColorAttribute);
+      } else {
+        updateColorLegend(nodeTypes);
+      }
+      
+      // Bind events
+      bindEvents();
+    }
+  } catch (e) {
+    console.error("Error initializing sigma instance:", e);
+  }
+}
+
+// Apply node styles based on node type
+function applyNodeStyles() {
+  if (!sigmaInstance) return;
+  try {
+    sigmaInstance.iterNodes(function(node) {
+      if (node.type && config.nodeTypes && config.nodeTypes[node.type]) {
+        node.color = config.nodeTypes[node.type].color;
+        node.size = config.nodeTypes[node.type].size;
+      } else if (node.type && nodeTypes[node.type]) {
+        node.color = nodeTypes[node.type].color;
+        node.size = nodeTypes[node.type].size;
+      }
+    });
+    sigmaInstance.refresh();
+  } catch (e) {
+    console.error("Error applying node styles:", e);
+  }
+}
+
+// Initialize filters
+function initFilters() {
+  try {
+    if (sigma.plugins && sigma.plugins.filter) {
+      filter = new sigma.plugins.filter(sigmaInstance);
+      console.log("Filter plugin initialized");
+    } else {
+      console.warn("Sigma filter plugin not available");
+    }
+  } catch (e) {
+    console.error("Error initializing filter plugin:", e);
+  }
+}
+
+// Filter nodes by type
+function filterByNodeType(filterValue) {
+  if (!filter) return;
+  try {
+    filter.undo('node-type');
+    
+    if (filterValue === 'papers') {
+      filter.nodesBy(function(n) {
+        return n.type === 'paper';
+      }, 'node-type');
+    } else if (filterValue === 'authors') {
+      filter.nodesBy(function(n) {
+        return n.type === 'author';
+      }, 'node-type');
+    }
+    
+    filter.apply();
+    sigmaInstance.refresh();
+  } catch (e) {
+    console.error("Error filtering nodes:", e);
+  }
+}
+
+// Bind events
+function bindEvents() {
+  if (!sigmaInstance) {
+    console.error("Sigma instance not found when binding events");
+    return;
+  }
+  
+  console.log("Binding sigma events to instance:", sigmaInstance);
+  
+  // Add a direct click handler to the sigma canvas
+  document.getElementById('sigma-canvas').addEventListener('click', function(evt) {
+    console.log("Canvas clicked, checking if it's on a node");
+    // The event happened on canvas, now check if it was on a node
+    var x = evt.offsetX || evt.layerX;
+    var y = evt.offsetY || evt.layerY;
+    
+    var nodeFound = false;
+    sigmaInstance.iterNodes(function(n) {
+      if (!nodeFound && n.displayX && n.displayY && n.displaySize) {
+        var dx = n.displayX - x;
+        var dy = n.displayY - y;
+        var distance = Math.sqrt(dx * dx + dy * dy);
+        
+        if (distance < n.displaySize) {
+          console.log("Node found under click:", n.id);
+          nodeFound = true;
+          nodeActive(n.id);
+        }
+      }
+    });
+    
+    if (!nodeFound) {
+      console.log("No node found under click, closing node panel");
+      nodeNormal();
+    }
+  });
+  
+  // Still try to use sigma's events
+  try {
+    // When a node is clicked, display its details
+    sigmaInstance.bind('clickNode', function(e) {
+      var node = e.target || e.data.node || e.data;
+      console.log("Official clickNode event received:", e);
+      var nodeId = node.id || node;
+      console.log("Node clicked via official event:", nodeId);
+      nodeActive(nodeId);
+    });
+    
+    // When stage is clicked, close the attribute pane
+    sigmaInstance.bind('clickStage', function() {
+      console.log("Official clickStage event received");
+      nodeNormal();
+    });
+    
+    // Highlight connected nodes on hover
+    sigmaInstance.bind('overNode', function(e) {
+      var node = e.target || e.data.node || e.data;
+      var nodeId = node.id || node;
+      console.log("Node hover enter:", nodeId);
+      
+      // First identify neighbors
+      var neighbors = {};
+      sigmaInstance.iterEdges(function(edge) {
+        if (edge.source == nodeId || edge.target == nodeId) {
+          neighbors[edge.source == nodeId ? edge.target : edge.source] = true;
+        }
+      });
+      
+      // Then update node and edge colors
+      sigmaInstance.iterNodes(function(node) {
+        if (node.id == nodeId || neighbors[node.id]) {
+          node.originalColor = node.color;
+        } else {
+          node.originalColor = node.originalColor || node.color;
+          node.color = greyColor;
+        }
+      });
+      
+      sigmaInstance.iterEdges(function(edge) {
+        if (edge.source == nodeId || edge.target == nodeId) {
+          edge.originalColor = edge.color;
+        } else {
+          edge.originalColor = edge.originalColor || edge.color;
+          edge.color = greyColor;
+        }
+      });
+      
+      sigmaInstance.refresh();
+    });
+    
+    sigmaInstance.bind('outNode', function(e) {
+      var node = e.target || e.data.node || e.data;
+      var nodeId = node.id || node;
+      console.log("Node hover leave:", nodeId);
+      
+      if (!sigmaInstance.detail) {
+        sigmaInstance.iterNodes(function(n) {
+          n.color = n.originalColor || n.color;
+        });
+        
+        sigmaInstance.iterEdges(function(e) {
+          e.color = e.originalColor || e.color;
+        });
+        
+        sigmaInstance.refresh();
+      }
+    });
+    console.log("Sigma events bound successfully");
+  } catch (e) {
+    console.error("Error binding sigma events:", e);
+  }
+}
+
+// Display node details (used when a node is clicked)
+function nodeActive(nodeId) {
+  console.log("nodeActive called with id:", nodeId);
+  
+  // Find the node
+  var node = null;
+  sigmaInstance.iterNodes(function(n) {
+    if (n.id == nodeId) {
+      node = n;
+    }
+  });
+  
+  if (!node) {
+    console.error("Node not found:", nodeId);
+    return;
+  }
+  
+  console.log("Node found:", node);
+  sigmaInstance.detail = true;
+  selectedNode = node;
+  
+  // Find neighbors
+  var neighbors = {};
+  sigmaInstance.iterEdges(function(e) {
+    if (e.source == nodeId || e.target == nodeId) {
+      neighbors[e.source == nodeId ? e.target : e.source] = {
+        name: e.label || "",
+        color: e.color
+      };
+    }
+  });
+  
+  console.log("Neighbors found:", Object.keys(neighbors).length);
+  
+  // Update node appearance
+  sigmaInstance.iterNodes(function(n) {
+    if (n.id == nodeId) {
+      n.color = n.originalColor || n.color;
+      n.size = n.size * 1.5; // Emphasize selected node
+    } else if (neighbors[n.id]) {
+      n.color = n.originalColor || n.color;
+    } else {
+      n.originalColor = n.originalColor || n.color;
+      n.color = greyColor;
+    }
+  });
+  
+  // Refresh display
+  sigmaInstance.refresh();
+  
+  // Populate connection list
+  var connectionList = [];
+  for (var id in neighbors) {
+    var neighbor = null;
+    sigmaInstance.iterNodes(function(n) {
+      if (n.id == id) {
+        neighbor = n;
+      }
+    });
+    
+    if (neighbor) {
+      connectionList.push('<li><a href="#" data-node-id="' + id + '">' + (neighbor.label || id) + '</a></li>');
+    }
+  }
+  
+  // Show node details panel
+  try {
+    console.log("Displaying attribute pane");
+    // Make absolutely sure the panel is visible with both CSS approaches
+    $('#attributepane').show().css('display', 'block');
+    
+    // Update panel content
+    $('.nodeattributes .name').text(node.label || node.id);
+    
+    let dataHTML = '';
+    for (let attr in node) {
+      if (attr !== 'id' && attr !== 'x' && attr !== 'y' && attr !== 'size' && attr !== 'color' && 
+          attr !== 'label' && attr !== 'originalColor' && attr !== 'hidden' && 
+          typeof node[attr] !== 'function' && attr !== 'displayX' && attr !== 'displayY' && 
+          attr !== 'displaySize') {
+        dataHTML += '<div><strong>' + attr + ':</strong> ' + node[attr] + '</div>';
+      }
+    }
+    
+    if (dataHTML === '') {
+      dataHTML = '<div>No additional attributes</div>';
+    }
+    
+    $('.nodeattributes .data').html(dataHTML);
+    $('.nodeattributes .link ul').html(connectionList.length ? connectionList.join('') : '<li>No connections</li>');
+    
+    // Set up click event for neighbor nodes
+    $('.nodeattributes .link ul li a').click(function(e) {
+      e.preventDefault();
+      var id = $(this).data('node-id');
+      nodeActive(id);
+    });
+    
+    console.log("Attribute pane updated with node details");
+  } catch (e) {
+    console.error("Error updating attribute pane:", e);
+  }
+}
+
+// Reset display (used when clicking outside nodes or closing the panel)
+function nodeNormal() {
+  console.log("nodeNormal called");
+  if (sigmaInstance) {
+    sigmaInstance.detail = false;
+    selectedNode = null;
+    
+    // Reset node appearance
+    sigmaInstance.iterNodes(function(node) {
+      node.color = node.originalColor || node.color;
+      // Reset size to original
+      if (node.type && config.nodeTypes && config.nodeTypes[node.type]) {
+        node.size = config.nodeTypes[node.type].size;
+      } else if (node.type && nodeTypes[node.type]) {
+        node.size = nodeTypes[node.type].size;
+      }
+    });
+    
+    // Reset edge appearance
+    sigmaInstance.iterEdges(function(edge) {
+      edge.color = edge.originalColor || edge.color;
+    });
+    
+    // Hide panel and refresh display
+    $('#attributepane').css('display', 'none');
+    sigmaInstance.refresh();
+  }
+}
+
+// Color nodes by attribute
+function colorNodesByAttribute(attribute) {
+  if (!sigmaInstance) return;
+  
+  console.log("Coloring nodes by attribute:", attribute);
+  // Get all unique values for the attribute
+  let values = {};
+  let valueCount = 0;
+  
+  sigmaInstance.iterNodes(function(n) {
+    let value = n[attribute] || 'unknown';
+    if (!values[value]) {
+      values[value] = true;
+      valueCount++;
+    }
+  });
+  
+  // Assign colors to values
+  let valueColors = {};
+  let i = 0;
+  let palette = config.colorPalette || colors;
+  
+  for (let value in values) {
+    valueColors[value] = palette[i % palette.length];
+    i++;
+  }
+  
+  // Update node colors
+  sigmaInstance.iterNodes(function(n) {
+    let value = n[attribute] || 'unknown';
+    n.originalColor = valueColors[value];
+    n.color = valueColors[value];
+  });
+  
+  sigmaInstance.refresh();
+  
+  // Update color legend
+  updateColorLegend(valueColors);
+}
+
+// Update color legend
+function updateColorLegend(valueColors) {
+  let legendHTML = '';
+  
+  for (let value in valueColors) {
+    let color = valueColors[value];
+    if (typeof color === 'object') {
+      color = color.color;
+    }
+    legendHTML += '<div class="legenditem"><span class="legendcolor" style="background-color: ' + color + '"></span>' + value + '</div>';
+  }
+  
+  $('#colorLegend').html(legendHTML);
+}
+
+// Search nodes by term
+function searchNodes(term) {
+  if (!sigmaInstance) return;
+  
+  let results = [];
+  let lowerTerm = term.toLowerCase();
+  
+  sigmaInstance.iterNodes(function(n) {
+    if ((n.label && n.label.toLowerCase().indexOf(lowerTerm) >= 0) || 
+        (n.id && n.id.toLowerCase().indexOf(lowerTerm) >= 0)) {
+      results.push(n);
+    }
+  });
+  
+  // Limit to top 10 results
+  results = results.slice(0, 10);
+  
+  // Display results
+  let resultsHTML = '';
+  if (results.length > 0) {
+    results.forEach(function(n) {
+      resultsHTML += '<a href="#" data-node-id="' + n.id + '">' + (n.label || n.id) + '</a>';
+    });
+  } else {
+    resultsHTML = '<div>No results found</div>';
+  }
+  
+  $('.results').html(resultsHTML);
+  
+  // Set up click event for results
+  $('.results a').click(function(e) {
+    e.preventDefault();
+    let nodeId = $(this).data('node-id');
+    nodeActive(nodeId);
+  });
+} 

js/paper-atlas.js

@@ -0,0 +1,433 @@
+// Global variables
+let sigmaInstance;
+let graph;
+let filter;
+let config = {};
+let greyColor = '#666';
+let activeState = { activeNodes: [], activeEdges: [] };
+let selectedNode = null;
+let colorAttributes = [];
+let colors = [
+  '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', 
+  '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'
+];
+let nodeTypes = {
+  'paper': { color: '#2ca02c', size: 3 },
+  'author': { color: '#9467bd', size: 5 },
+  'organization': { color: '#1f77b4', size: 4 },
+  'unknown': { color: '#ff7f0e', size: 3 }
+};
+
+// Initialize when document is ready
+$(document).ready(function() {
+  // Load configuration
+  $.getJSON('config.json', function(data) {
+    config = data;
+    document.title = config.title || 'Daily Paper Atlas';
+    $('#title').text(config.title || 'Daily Paper Atlas');
+    loadGraph();
+  });
+
+  // Set up search functionality
+  $('#search-input').keyup(function(e) {
+    let searchTerm = $(this).val();
+    if (searchTerm.length > 2) {
+      searchNodes(searchTerm);
+    } else {
+      $('.results').empty();
+    }
+  });
+  
+  $('#search-button').click(function() {
+    let searchTerm = $('#search-input').val();
+    if (searchTerm.length > 2) {
+      searchNodes(searchTerm);
+    }
+  });
+
+  // Set up zoom buttons
+  $('#zoom .z[rel="in"]').click(function() {
+    if (sigmaInstance) sigmaInstance.camera.goTo({ratio: sigmaInstance.camera.ratio / 1.5});
+  });
+  
+  $('#zoom .z[rel="out"]').click(function() {
+    if (sigmaInstance) sigmaInstance.camera.goTo({ratio: sigmaInstance.camera.ratio * 1.5});
+  });
+  
+  $('#zoom .z[rel="center"]').click(function() {
+    if (sigmaInstance) sigmaInstance.camera.goTo({x: 0, y: 0, ratio: 1});
+  });
+
+  // Set up attribute pane functionality
+  $('.returntext').click(function() {
+    closeAttributePane();
+  });
+
+  // Set up color selector
+  $('#color-attribute').change(function() {
+    let attr = $(this).val();
+    colorNodesByAttribute(attr);
+  });
+  
+  // Set up filter selector
+  $('#filter-select').change(function() {
+    let filterValue = $(this).val();
+    filterByNodeType(filterValue);
+  });
+});
+
+// Load graph data
+function loadGraph() {
+  $.getJSON(config.data, function(data) {
+    graph = data;
+    
+    // Initialize Sigma instance
+    sigmaInstance = new sigma({
+      graph: graph,
+      container: 'sigma-canvas',
+      settings: {
+        labelThreshold: config.labelThreshold || 7,
+        minEdgeSize: config.minEdgeSize || 0.5,
+        maxEdgeSize: config.maxEdgeSize || 2,
+        minNodeSize: config.minNodeSize || 1,
+        maxNodeSize: config.maxNodeSize || 8,
+        drawLabels: config.drawLabels !== false,
+        defaultLabelColor: config.defaultLabelColor || '#000',
+        defaultEdgeColor: config.defaultEdgeColor || '#999',
+        edgeColor: 'default',
+        defaultNodeColor: config.defaultNodeColor || '#666',
+        defaultNodeBorderColor: config.defaultNodeBorderColor || '#fff',
+        borderSize: config.borderSize || 1,
+        nodeHoverColor: 'default',
+        defaultNodeHoverColor: config.defaultNodeHoverColor || '#000',
+        defaultHoverLabelBGColor: config.defaultHoverLabelBGColor || '#fff',
+        defaultLabelHoverColor: config.defaultLabelHoverColor || '#000',
+        enableEdgeHovering: config.enableEdgeHovering !== false,
+        edgeHoverColor: 'edge',
+        edgeHoverSizeRatio: config.edgeHoverSizeRatio || 1.5,
+        defaultEdgeHoverColor: config.defaultEdgeHoverColor || '#000',
+        edgeHoverExtremities: config.edgeHoverExtremities !== false,
+        batchEdgesDrawing: config.batchEdgesDrawing !== false,
+        hideEdgesOnMove: config.hideEdgesOnMove !== false,
+        canvasEdgesBatchSize: config.canvasEdgesBatchSize || 500,
+        animationsTime: config.animationsTime || 1500
+      }
+    });
+
+    // Initialize ForceAtlas2 layout
+    if (config.forceAtlas2) {
+      console.log("Starting ForceAtlas2 layout...");
+      sigmaInstance.startForceAtlas2({
+        worker: true,
+        barnesHutOptimize: true,
+        gravity: 1,
+        scalingRatio: 2,
+        slowDown: 10
+      });
+      
+      setTimeout(function() {
+        sigmaInstance.stopForceAtlas2();
+        console.log("ForceAtlas2 layout completed");
+        sigmaInstance.refresh();
+        
+        // Initialize node colors and sizes by type
+        applyNodeStyles();
+        
+        // Initialize filtering
+        initFilters();
+        
+        // If a default color attribute is set, apply it
+        if (config.defaultColorAttribute) {
+          $('#color-attribute').val(config.defaultColorAttribute);
+          colorNodesByAttribute(config.defaultColorAttribute);
+        } else {
+          updateColorLegend(nodeTypes);
+        }
+        
+        // Bind events
+        bindEvents();
+        
+      }, config.forceAtlas2Time || 5000);
+    } else {
+      // Initialize node colors and sizes by type
+      applyNodeStyles();
+      
+      // Initialize filtering
+      initFilters();
+      
+      // If a default color attribute is set, apply it
+      if (config.defaultColorAttribute) {
+        $('#color-attribute').val(config.defaultColorAttribute);
+        colorNodesByAttribute(config.defaultColorAttribute);
+      } else {
+        updateColorLegend(nodeTypes);
+      }
+      
+      // Bind events
+      bindEvents();
+    }
+  }).fail(function(jqXHR, textStatus, errorThrown) {
+    console.error("Failed to load graph data:", textStatus, errorThrown);
+    alert('Failed to load graph data. Please check the console for more details.');
+  });
+}
+
+// Apply node styles based on node type
+function applyNodeStyles() {
+  sigmaInstance.graph.nodes().forEach(function(node) {
+    if (node.type && config.nodeTypes && config.nodeTypes[node.type]) {
+      node.color = config.nodeTypes[node.type].color;
+      node.size = config.nodeTypes[node.type].size;
+    } else if (node.type && nodeTypes[node.type]) {
+      node.color = nodeTypes[node.type].color;
+      node.size = nodeTypes[node.type].size;
+    }
+  });
+  sigmaInstance.refresh();
+}
+
+// Initialize filters
+function initFilters() {
+  try {
+    filter = new sigma.plugins.filter(sigmaInstance);
+    console.log("Filter plugin initialized");
+  } catch (e) {
+    console.error("Error initializing filter plugin:", e);
+  }
+}
+
+// Filter nodes by type
+function filterByNodeType(filterValue) {
+  if (!filter) return;
+  
+  filter.undo('node-type');
+  
+  if (filterValue !== 'all') {
+    filter.nodesBy(function(n) {
+      return n.type === filterValue;
+    }, 'node-type');
+  }
+  
+  filter.apply();
+  sigmaInstance.refresh();
+}
+
+// Bind events
+function bindEvents() {
+  // When a node is clicked, display its details
+  sigmaInstance.bind('clickNode', function(e) {
+    let node = e.data.node;
+    selectedNode = node;
+    displayNodeDetails(node);
+  });
+  
+  // When stage is clicked, close the attribute pane
+  sigmaInstance.bind('clickStage', function() {
+    closeAttributePane();
+  });
+  
+  // Highlight connected nodes on hover
+  sigmaInstance.bind('hovers', function(e) {
+    if (!e.data.enter.nodes.length) return;
+    
+    let nodeId = e.data.enter.nodes[0];
+    let toKeep = sigmaInstance.graph.neighbors(nodeId);
+    toKeep[nodeId] = e.data.enter.nodes[0];
+    
+    activeState.activeNodes = Object.keys(toKeep);
+    
+    sigmaInstance.graph.nodes().forEach(function(n) {
+      if (toKeep[n.id]) {
+        n.originalColor = n.color;
+        n.color = n.color;
+      } else {
+        n.originalColor = n.originalColor || n.color;
+        n.color = greyColor;
+      }
+    });
+    
+    sigmaInstance.graph.edges().forEach(function(e) {
+      if (toKeep[e.source] && toKeep[e.target]) {
+        e.originalColor = e.color;
+        e.color = e.color;
+      } else {
+        e.originalColor = e.originalColor || e.color;
+        e.color = greyColor;
+      }
+    });
+    
+    sigmaInstance.refresh();
+  });
+  
+  sigmaInstance.bind('hovers', function(e) {
+    if (e.data.leave.nodes.length && !selectedNode) {
+      sigmaInstance.graph.nodes().forEach(function(n) {
+        n.color = n.originalColor || n.color;
+      });
+      
+      sigmaInstance.graph.edges().forEach(function(e) {
+        e.color = e.originalColor || e.color;
+      });
+      
+      sigmaInstance.refresh();
+    }
+  });
+}
+
+// Display node details in the attribute pane
+function displayNodeDetails(node) {
+  $('#attributepane').show();
+  $('.nodeattributes .name').text(node.label || node.id);
+  
+  let dataHTML = '';
+  for (let attr in node) {
+    if (attr !== 'id' && attr !== 'x' && attr !== 'y' && attr !== 'size' && attr !== 'color' && 
+        attr !== 'label' && attr !== 'originalColor' && attr !== 'hidden') {
+      dataHTML += '<div><strong>' + attr + ':</strong> ' + node[attr] + '</div>';
+    }
+  }
+  $('.nodeattributes .data').html(dataHTML);
+  
+  // Display connected nodes
+  let neighbors = sigmaInstance.graph.neighbors(node.id);
+  let linksHTML = '';
+  for (let id in neighbors) {
+    let neighbor = sigmaInstance.graph.nodes(id);
+    if (neighbor) {
+      linksHTML += '<li><a href="#" data-node-id="' + id + '">' + (neighbor.label || id) + '</a></li>';
+    }
+  }
+  $('.nodeattributes .link ul').html(linksHTML);
+  
+  // Set up click event for connected nodes
+  $('.nodeattributes .link ul li a').click(function(e) {
+    e.preventDefault();
+    let nodeId = $(this).data('node-id');
+    let node = sigmaInstance.graph.nodes(nodeId);
+    if (node) {
+      selectedNode = node;
+      displayNodeDetails(node);
+      sigmaInstance.renderers[0].dispatchEvent('clickNode', {
+        node: node
+      });
+    }
+  });
+}
+
+// Close the attribute pane
+function closeAttributePane() {
+  $('#attributepane').hide();
+  selectedNode = null;
+  
+  // Reset colors
+  sigmaInstance.graph.nodes().forEach(function(n) {
+    n.color = n.originalColor || n.color;
+  });
+  
+  sigmaInstance.graph.edges().forEach(function(e) {
+    e.color = e.originalColor || e.color;
+  });
+  
+  sigmaInstance.refresh();
+}
+
+// Color nodes by attribute
+function colorNodesByAttribute(attribute) {
+  // Get all unique values for the attribute
+  let values = {};
+  let valueCount = 0;
+  
+  sigmaInstance.graph.nodes().forEach(function(n) {
+    let value = n[attribute] || 'unknown';
+    if (!values[value]) {
+      values[value] = true;
+      valueCount++;
+    }
+  });
+  
+  // Assign colors to values
+  let valueColors = {};
+  let i = 0;
+  let palette = config.colorPalette || colors;
+  
+  for (let value in values) {
+    valueColors[value] = palette[i % palette.length];
+    i++;
+  }
+  
+  // Update node colors
+  sigmaInstance.graph.nodes().forEach(function(n) {
+    let value = n[attribute] || 'unknown';
+    n.originalColor = valueColors[value];
+    if (!selectedNode) {
+      n.color = valueColors[value];
+    }
+  });
+  
+  sigmaInstance.refresh();
+  
+  // Update color legend
+  updateColorLegend(valueColors);
+}
+
+// Update color legend
+function updateColorLegend(valueColors) {
+  let legendHTML = '';
+  
+  for (let value in valueColors) {
+    let color = valueColors[value];
+    if (typeof color === 'object') {
+      color = color.color;
+    }
+    legendHTML += '<div class="legenditem"><span class="legendcolor" style="background-color: ' + color + '"></span>' + value + '</div>';
+  }
+  
+  $('#colorLegend').html(legendHTML);
+}
+
+// Search nodes by term
+function searchNodes(term) {
+  let results = [];
+  let lowerTerm = term.toLowerCase();
+  
+  sigmaInstance.graph.nodes().forEach(function(n) {
+    if ((n.label && n.label.toLowerCase().indexOf(lowerTerm) >= 0) || 
+        (n.id && n.id.toLowerCase().indexOf(lowerTerm) >= 0)) {
+      results.push(n);
+    }
+  });
+  
+  // Limit to top 10 results
+  results = results.slice(0, 10);
+  
+  // Display results
+  let resultsHTML = '';
+  if (results.length > 0) {
+    results.forEach(function(n) {
+      resultsHTML += '<a href="#" data-node-id="' + n.id + '">' + (n.label || n.id) + '</a>';
+    });
+  } else {
+    resultsHTML = '<div>No results found</div>';
+  }
+  
+  $('.results').html(resultsHTML);
+  
+  // Set up click event for results
+  $('.results a').click(function(e) {
+    e.preventDefault();
+    let nodeId = $(this).data('node-id');
+    let node = sigmaInstance.graph.nodes(nodeId);
+    if (node) {
+      // Center the camera on the node
+      sigmaInstance.camera.goTo({
+        x: node[sigmaInstance.camera.readPrefix + 'x'],
+        y: node[sigmaInstance.camera.readPrefix + 'y'],
+        ratio: 0.5
+      });
+      
+      // Select the node
+      selectedNode = node;
+      displayNodeDetails(node);
+    }
+  });
+} 

js/sigma/plugins/sigma.plugins.filter.min.js

@@ -0,0 +1,110 @@
+/**
+ * Sigma.js Filter Plugin - v1.0.0
+ */
+(function() {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw new Error('sigma not in scope.');
+
+  // Add pkg utility if it doesn't exist
+  sigma.utils = sigma.utils || {};
+  sigma.utils.pkg = sigma.utils.pkg || function(pkg) {
+    return pkg.split('.').reduce(function(context, current) {
+      return (context[current] = context[current] || {});
+    }, window);
+  };
+
+  // Initialize package:
+  sigma.utils.pkg('sigma.plugins');
+
+  sigma.plugins.filter = function(s) {
+    var _s = s,
+        _g = s.graph,
+        _filters = {};
+
+    this.undo = function(filterType) {
+      if (filterType) {
+        delete _filters[filterType];
+      } else {
+        _filters = {};
+      }
+      return this;
+    };
+
+    this.nodesBy = function(fn, filterType) {
+      if (!filterType)
+        throw new Error('filterType is required.');
+      
+      _filters[filterType] = {
+        nodePredicate: fn
+      };
+      return this;
+    };
+
+    this.edgesBy = function(fn, filterType) {
+      if (!filterType)
+        throw new Error('filterType is required.');
+      
+      _filters[filterType] = {
+        edgePredicate: fn
+      };
+      return this;
+    };
+
+    this.apply = function() {
+      var n, e, nid, eid, filter, edge, srcNode, tgtNode;
+      var g = _g;
+      var nodes = g.nodes();
+      var edges = g.edges();
+
+      // Restore all nodes:
+      for (nid in g.nodesIndex) {
+        g.nodesIndex[nid].hidden = false;
+      }
+
+      // Restore all edges:
+      for (eid in g.edgesIndex) {
+        g.edgesIndex[eid].hidden = false;
+      }
+
+      // Apply filters to nodes:
+      for (n in _filters) {
+        filter = _filters[n];
+        if (filter.nodePredicate) {
+          for (nid in g.nodesIndex) {
+            if (!filter.nodePredicate(g.nodesIndex[nid])) {
+              g.nodesIndex[nid].hidden = true;
+            }
+          }
+        }
+      }
+
+      // Apply filters to edges:
+      for (e in _filters) {
+        filter = _filters[e];
+        if (filter.edgePredicate) {
+          for (eid in g.edgesIndex) {
+            if (!filter.edgePredicate(g.edgesIndex[eid])) {
+              g.edgesIndex[eid].hidden = true;
+            }
+          }
+        }
+      }
+
+      // Hide edges connected to hidden nodes:
+      for (eid in g.edgesIndex) {
+        edge = g.edgesIndex[eid];
+        srcNode = g.nodesIndex[edge.source];
+        tgtNode = g.nodesIndex[edge.target];
+        if (srcNode.hidden || tgtNode.hidden) {
+          edge.hidden = true;
+        }
+      }
+
+      // Refresh visualization:
+      _s.refresh();
+      return this;
+    };
+  };
+}).call(this); 

js/sigma/sigma.min.js

@@ -0,0 +1,64 @@
+/* sigmajs.org - an open-source light-weight JavaScript graph drawing library - Version: 0.1 - Author:  Alexis Jacomy - License: MIT */
+var sigma={tools:{},classes:{},instances:{}};
+(function(){Array.prototype.some||(Array.prototype.some=function(g,i){var k=this.length;if("function"!=typeof g)throw new TypeError;for(var m=0;m<k;m++)if(m in this&&g.call(i,this[m],m,this))return!0;return!1});Array.prototype.forEach||(Array.prototype.forEach=function(g,i){var k=this.length;if(typeof g!="function")throw new TypeError;for(var m=0;m<k;m++)m in this&&g.call(i,this[m],m,this)});Array.prototype.map||(Array.prototype.map=function(g,i){var k=this.length;if(typeof g!="function")throw new TypeError;
+for(var m=Array(k),b=0;b<k;b++)b in this&&(m[b]=g.call(i,this[b],b,this));return m});Array.prototype.filter||(Array.prototype.filter=function(g,i){var k=this.length;if(typeof g!="function")throw new TypeError;for(var m=[],b=0;b<k;b++)if(b in this){var j=this[b];g.call(i,j,b,this)&&m.push(j)}return m});if(!Object.keys){var i=Object,q=Object.prototype.hasOwnProperty,g=!{toString:null}.propertyIsEnumerable("toString"),p="toString toLocaleString valueOf hasOwnProperty isPrototypeOf propertyIsEnumerable constructor".split(" "),
+z=p.length;i.keys=function(i){if(typeof i!=="object"&&typeof i!=="function"||i===null)throw new TypeError("Object.keys called on non-object");var x=[],k;for(k in i)q.call(i,k)&&x.push(k);if(g)for(k=0;k<z;k++)q.call(i,p[k])&&x.push(p[k]);return x}}})();sigma.classes.Cascade=function(){this.p={};this.config=function(i,q){if("string"==typeof i&&void 0==q)return this.p[i];var g="object"==typeof i&&void 0==q?i:{};"string"==typeof i&&(g[i]=q);for(var p in g)void 0!=this.p[p]&&(this.p[p]=g[p]);return this}};
+sigma.classes.EventDispatcher=function(){var i={},q=this;this.one=function(g,p){if(!p||!g)return q;("string"==typeof g?g.split(" "):g).forEach(function(g){i[g]||(i[g]=[]);i[g].push({h:p,one:!0})});return q};this.bind=function(g,p){if(!p||!g)return q;("string"==typeof g?g.split(" "):g).forEach(function(g){i[g]||(i[g]=[]);i[g].push({h:p,one:!1})});return q};this.unbind=function(g,p){g||(i={});var z="string"==typeof g?g.split(" "):g;p?z.forEach(function(g){i[g]&&(i[g]=i[g].filter(function(g){return g.h!=
+p}));i[g]&&0==i[g].length&&delete i[g]}):z.forEach(function(g){delete i[g]});return q};this.dispatch=function(g,p){i[g]&&(i[g].forEach(function(i){i.h({type:g,content:p,target:q})}),i[g]=i[g].filter(function(g){return!g.one}));return q}};
+(function(){function i(){function b(a){return{x:a.x,y:a.y,size:a.size,degree:a.degree,inDegree:a.inDegree,outDegree:a.outDegree,displayX:a.displayX,displayY:a.displayY,displaySize:a.displaySize,label:a.label,id:a.id,color:a.color,fixed:a.fixed,active:a.active,hidden:a.hidden,forceLabel:a.forceLabel,attr:a.attr}}function j(a){return{source:a.source.id,target:a.target.id,size:a.size,type:a.type,weight:a.weight,displaySize:a.displaySize,label:a.label,hidden:a.hidden,id:a.id,attr:a.attr,color:a.color}}
+function f(){c.nodes=[];c.nodesIndex={};c.edges=[];c.edgesIndex={};return c}sigma.classes.Cascade.call(this);sigma.classes.EventDispatcher.call(this);var c=this;this.p={minNodeSize:0,maxNodeSize:0,minEdgeSize:0,maxEdgeSize:0,scalingMode:"inside",nodesPowRatio:0.5,edgesPowRatio:0};this.borders={};f();this.addNode=function(a,b){if(c.nodesIndex[a])throw Error('Node "'+a+'" already exists.');var b=b||{},d={x:0,y:0,size:1,degree:0,inDegree:0,outDegree:0,fixed:!1,active:!1,hidden:!1,forceLabel:!1,label:a.toString(),
+id:a.toString(),attr:{}},f;for(f in b)switch(f){case "id":break;case "x":case "y":case "size":d[f]=+b[f];break;case "fixed":case "active":case "hidden":case "forceLabel":d[f]=!!b[f];break;case "color":case "label":d[f]=b[f];break;default:d.attr[f]=b[f]}c.nodes.push(d);c.nodesIndex[a.toString()]=d;return c};this.addEdge=function(a,b,d,f){if(c.edgesIndex[a])throw Error('Edge "'+a+'" already exists.');if(!c.nodesIndex[b])throw Error("Edge's source \""+b+'" does not exist yet.');if(!c.nodesIndex[d])throw Error("Edge's target \""+
+d+'" does not exist yet.');f=f||{};b={source:c.nodesIndex[b],target:c.nodesIndex[d],size:1,weight:1,displaySize:0.5,label:a.toString(),id:a.toString(),hidden:!1,attr:{}};b.source.degree++;b.source.outDegree++;b.target.degree++;b.target.inDegree++;for(var o in f)switch(o){case "id":case "source":case "target":break;case "hidden":b[o]=!!f[o];break;case "size":case "weight":b[o]=+f[o];break;case "color":b[o]=f[o].toString();break;case "type":b[o]=f[o].toString();break;case "label":b[o]=f[o];break;default:b.attr[o]=
+f[o]}c.edges.push(b);c.edgesIndex[a.toString()]=b;return c};this.dropNode=function(a){((a instanceof Array?a:[a])||[]).forEach(function(a){if(c.nodesIndex[a]){var b=null;c.nodes.some(function(c,f){return c.id==a?(b=f,!0):!1});null!=b&&c.nodes.splice(b,1);delete c.nodesIndex[a];c.edges=c.edges.filter(function(b){return b.source.id==a?(delete c.edgesIndex[b.id],b.target.degree--,b.target.inDegree--,!1):b.target.id==a?(delete c.edgesIndex[b.id],b.source.degree--,b.source.outDegree--,!1):!0})}else sigma.log('Node "'+
+a+'" does not exist.')});return c};this.dropEdge=function(a){((a instanceof Array?a:[a])||[]).forEach(function(a){if(c.edgesIndex[a]){c.edgesIndex[a].source.degree--;c.edgesIndex[a].source.outDegree--;c.edgesIndex[a].target.degree--;c.edgesIndex[a].target.inDegree--;var b=null;c.edges.some(function(c,f){return c.id==a?(b=f,!0):!1});null!=b&&c.edges.splice(b,1);delete c.edgesIndex[a]}else sigma.log('Edge "'+a+'" does not exist.')});return c};this.iterEdges=function(a,b){var d=b?b.map(function(a){return c.edgesIndex[a]}):
+c.edges,f=d.map(j);f.forEach(a);d.forEach(function(a,b){var d=f[b],l;for(l in d)switch(l){case "id":case "displaySize":break;case "weight":case "size":a[l]=+d[l];break;case "source":case "target":a[l]=c.nodesIndex[l]||a[l];break;case "hidden":a[l]=!!d[l];break;case "color":case "label":case "type":a[l]=(d[l]||"").toString();break;default:a.attr[l]=d[l]}});return c};this.iterNodes=function(a,f){var d=f?f.map(function(a){return c.nodesIndex[a]}):c.nodes,j=d.map(b);j.forEach(a);d.forEach(function(a,
+b){var d=j[b],c;for(c in d)switch(c){case "id":case "attr":case "degree":case "inDegree":case "outDegree":case "displayX":case "displayY":case "displaySize":break;case "x":case "y":case "size":a[c]=+d[c];break;case "fixed":case "active":case "hidden":case "forceLabel":a[c]=!!d[c];break;case "color":case "label":a[c]=(d[c]||"").toString();break;default:a.attr[c]=d[c]}});return c};this.getEdges=function(a){var b=((a instanceof Array?a:[a])||[]).map(function(a){return j(c.edgesIndex[a])});return a instanceof
+Array?b:b[0]};this.getNodes=function(a){var f=((a instanceof Array?a:[a])||[]).map(function(a){return b(c.nodesIndex[a])});return a instanceof Array?f:f[0]};this.empty=f;this.rescale=function(a,b,d,f){var j=0,h=0;d&&c.nodes.forEach(function(a){h=Math.max(a.size,h)});f&&c.edges.forEach(function(a){j=Math.max(a.size,j)});var h=h||1,j=j||1,g,l,s,t;d&&c.nodes.forEach(function(a){l=Math.max(a.x,l||a.x);g=Math.min(a.x,g||a.x);t=Math.max(a.y,t||a.y);s=Math.min(a.y,s||a.y)});var A="outside"==c.p.scalingMode?
+Math.max(a/Math.max(l-g,1),b/Math.max(t-s,1)):Math.min(a/Math.max(l-g,1),b/Math.max(t-s,1)),i=(c.p.maxNodeSize||h)/A;l+=i;g-=i;t+=i;s-=i;var A="outside"==c.p.scalingMode?Math.max(a/Math.max(l-g,1),b/Math.max(t-s,1)):Math.min(a/Math.max(l-g,1),b/Math.max(t-s,1)),u,k;!c.p.maxNodeSize&&!c.p.minNodeSize?(u=1,k=0):c.p.maxNodeSize==c.p.minNodeSize?(u=0,k=c.p.maxNodeSize):(u=(c.p.maxNodeSize-c.p.minNodeSize)/h,k=c.p.minNodeSize);var B,E;!c.p.maxEdgeSize&&!c.p.minEdgeSize?(B=1,E=0):(B=c.p.maxEdgeSize==c.p.minEdgeSize?
+0:(c.p.maxEdgeSize-c.p.minEdgeSize)/j,E=c.p.minEdgeSize);d&&c.nodes.forEach(function(c){c.displaySize=c.size*u+k;if(!c.fixed){c.displayX=(c.x-(l+g)/2)*A+a/2;c.displayY=(c.y-(t+s)/2)*A+b/2}});f&&c.edges.forEach(function(a){a.displaySize=a.size*B+E});return c};this.translate=function(a,b,d,f,j){var h=Math.pow(d,c.p.nodesPowRatio);f&&c.nodes.forEach(function(c){c.fixed||(c.displayX=c.displayX*d+a,c.displayY=c.displayY*d+b);c.displaySize*=h});h=Math.pow(d,c.p.edgesPowRatio);j&&c.edges.forEach(function(a){a.displaySize*=
+h});return c};this.setBorders=function(){c.borders={};c.nodes.forEach(function(a){c.borders.minX=Math.min(void 0==c.borders.minX?a.displayX-a.displaySize:c.borders.minX,a.displayX-a.displaySize);c.borders.maxX=Math.max(void 0==c.borders.maxX?a.displayX+a.displaySize:c.borders.maxX,a.displayX+a.displaySize);c.borders.minY=Math.min(void 0==c.borders.minY?a.displayY-a.displaySize:c.borders.minY,a.displayY-a.displaySize);c.borders.maxY=Math.max(void 0==c.borders.maxY?a.displayY-a.displaySize:c.borders.maxY,
+a.displayY-a.displaySize)})};this.checkHover=function(a,b){var d,f,j,h=[],g=[];c.nodes.forEach(function(c){if(c.hidden)c.hover=!1;else{d=Math.abs(c.displayX-a);f=Math.abs(c.displayY-b);j=c.displaySize;var s=c.hover,t=d<j&&f<j&&Math.sqrt(d*d+f*f)<j;s&&!t?(c.hover=!1,g.push(c.id)):t&&!s&&(c.hover=!0,h.push(c.id))}});h.length&&c.dispatch("overnodes",h);g.length&&c.dispatch("outnodes",g);return c}}function q(b,j){function f(){var a;a="<p>GLOBAL :</p>";for(var b in c.p.globalProbes)a+="<p>"+b+" : "+c.p.globalProbes[b]()+
+"</p>";a+="<br><p>LOCAL :</p>";for(b in c.p.localProbes)a+="<p>"+b+" : "+c.p.localProbes[b]()+"</p>";c.p.dom.innerHTML=a;return c}sigma.classes.Cascade.call(this);var c=this;this.instance=b;this.monitoring=!1;this.p={fps:40,dom:j,globalProbes:{"Time (ms)":sigma.chronos.getExecutionTime,Queue:sigma.chronos.getQueuedTasksCount,Tasks:sigma.chronos.getTasksCount,FPS:sigma.chronos.getFPS},localProbes:{"Nodes count":function(){return c.instance.graph.nodes.length},"Edges count":function(){return c.instance.graph.edges.length}}};
+this.activate=function(){c.monitoring||(c.monitoring=window.setInterval(f,1E3/c.p.fps));return c};this.desactivate=function(){c.monitoring&&(window.clearInterval(c.monitoring),c.monitoring=null,c.p.dom.innerHTML="");return c}}function g(b){var j=b.changedTouches[0],f="";switch(b.type){case "touchstart":f="mousedown";break;case "touchmove":f="mousemove";break;case "touchend":f="mouseup";break;default:return}var c=document.createEvent("MouseEvent");c.initMouseEvent(f,!0,!0,window,1,j.posX,j.posY,j.clientX,
+j.clientY,!1,!1,!1,!1,0,null);j.target.dispatchEvent(c);b.preventDefault()}function p(b){function j(b){a.p.mouseEnabled&&(f(a.mouseX,a.mouseY,a.ratio*(0<(void 0!=b.wheelDelta&&b.wheelDelta||void 0!=b.detail&&-b.detail)?a.p.zoomMultiply:1/a.p.zoomMultiply)),a.p.blockScroll&&(b.preventDefault?b.preventDefault():b.returnValue=!1))}function f(b,d,f){if(!a.isMouseDown&&(window.clearInterval(a.interpolationID),m=void 0!=f,w=a.stageX,n=b,o=a.stageY,l=d,h=f||a.ratio,h=Math.min(Math.max(h,a.p.minRatio),a.p.maxRatio),
+u=a.p.directZooming?1-(m?a.p.zoomDelta:a.p.dragDelta):0,a.ratio!=h||a.stageX!=n||a.stageY!=l))c(),a.interpolationID=window.setInterval(c,50),a.dispatch("startinterpolate")}function c(){u+=m?a.p.zoomDelta:a.p.dragDelta;u=Math.min(u,1);var b=sigma.easing.quadratic.easeout(u),c=a.ratio;a.ratio=c*(1-b)+h*b;m?(a.stageX=n+(a.stageX-n)*a.ratio/c,a.stageY=l+(a.stageY-l)*a.ratio/c):(a.stageX=w*(1-b)+n*b,a.stageY=o*(1-b)+l*b);a.dispatch("interpolate");1<=u&&(window.clearInterval(a.interpolationID),b=a.ratio,
+m?(a.ratio=h,a.stageX=n+(a.stageX-n)*a.ratio/b,a.stageY=l+(a.stageY-l)*a.ratio/b):(a.stageX=n,a.stageY=l),a.dispatch("stopinterpolate"))}sigma.classes.Cascade.call(this);sigma.classes.EventDispatcher.call(this);var a=this;this.p={minRatio:1,maxRatio:32,marginRatio:1,zoomDelta:0.1,dragDelta:0.3,zoomMultiply:2,directZooming:!1,blockScroll:!0,inertia:1.1,mouseEnabled:!0,touchEnabled:!0};var i=0,d=0,w=0,o=0,h=1,n=0,l=0,s=0,t=0,A=0,k=0,u=0,m=!1;this.stageY=this.stageX=0;this.ratio=1;this.mouseY=this.mouseX=
+0;this.isTouchDown=this.isMouseDown=!1;b.addEventListener("DOMMouseScroll",j,!0);b.addEventListener("mousewheel",j,!0);b.addEventListener("mousemove",function(b){a.mouseX=void 0!=b.offsetX&&b.offsetX||void 0!=b.layerX&&b.layerX||void 0!=b.clientX&&b.clientX;a.mouseY=void 0!=b.offsetY&&b.offsetY||void 0!=b.layerY&&b.layerY||void 0!=b.clientY&&b.clientY;if(a.isMouseDown){var c=a.mouseX-i+w,h=a.mouseY-d+o;if(c!=a.stageX||h!=a.stageY)t=s,k=A,s=c,A=h,a.stageX=c,a.stageY=h,a.dispatch("drag")}a.dispatch("move");
+b.preventDefault?b.preventDefault():b.returnValue=!1},!0);b.addEventListener("mousedown",function(b){a.p.mouseEnabled&&(a.isMouseDown=!0,a.dispatch("mousedown"),w=a.stageX,o=a.stageY,i=a.mouseX,d=a.mouseY,t=s=a.stageX,k=A=a.stageY,a.dispatch("startdrag"),b.preventDefault?b.preventDefault():b.returnValue=!1)},!0);document.addEventListener("mouseup",function(b){a.p.mouseEnabled&&a.isMouseDown&&(a.isMouseDown=!1,a.dispatch("mouseup"),(w!=a.stageX||o!=a.stageY)&&f(a.stageX+a.p.inertia*(a.stageX-t),a.stageY+
+a.p.inertia*(a.stageY-k)),b.preventDefault?b.preventDefault():b.returnValue=!1)},!0);b.addEventListener("touchstart",g,!0);b.addEventListener("touchmove",g,!0);document.addEventListener("touchend",g,!0);b.addEventListener("touchcancel",g,!0);this.checkBorders=function(){return a};this.interpolate=f}function z(b,j,f,c,a,g,d){function i(a){var b=c,d="fixed"==h.p.labelSize?h.p.defaultLabelSize:h.p.labelSizeRatio*a.displaySize;b.font=(h.p.hoverFontStyle||h.p.fontStyle||"")+" "+d+"px "+(h.p.hoverFont||
+h.p.font||"");b.fillStyle="node"==h.p.labelHoverBGColor?a.color||h.p.defaultNodeColor:h.p.defaultHoverLabelBGColor;b.beginPath();h.p.labelHoverShadow&&(b.shadowOffsetX=0,b.shadowOffsetY=0,b.shadowBlur=4,b.shadowColor=h.p.labelHoverShadowColor);sigma.tools.drawRoundRect(b,Math.round(a.displayX-d/2-2),Math.round(a.displayY-d/2-2),Math.round(b.measureText(a.label).width+1.5*a.displaySize+d/2+4),Math.round(d+4),Math.round(d/2+2),"left");b.closePath();b.fill();b.shadowOffsetX=0;b.shadowOffsetY=0;b.shadowBlur=
+0;b.beginPath();b.fillStyle="node"==h.p.nodeBorderColor?a.color||h.p.defaultNodeColor:h.p.defaultNodeBorderColor;b.arc(Math.round(a.displayX),Math.round(a.displayY),a.displaySize+h.p.borderSize,0,2*Math.PI,!0);b.closePath();b.fill();b.beginPath();b.fillStyle="node"==h.p.nodeHoverColor?a.color||h.p.defaultNodeColor:h.p.defaultNodeHoverColor;b.arc(Math.round(a.displayX),Math.round(a.displayY),a.displaySize,0,2*Math.PI,!0);b.closePath();b.fill();b.fillStyle="node"==h.p.labelHoverColor?a.color||h.p.defaultNodeColor:
+h.p.defaultLabelHoverColor;b.fillText(a.label,Math.round(a.displayX+1.5*a.displaySize),Math.round(a.displayY+d/2-3));return h}function o(a){if(isNaN(a.x)||isNaN(a.y))throw Error("A node's coordinate is not a number (id: "+a.id+")");return!a.hidden&&a.displayX+a.displaySize>-n/3&&a.displayX-a.displaySize<4*n/3&&a.displayY+a.displaySize>-l/3&&a.displayY-a.displaySize<4*l/3}sigma.classes.Cascade.call(this);var h=this;this.p={labelColor:"default",defaultLabelColor:"#000",labelHoverBGColor:"default",defaultHoverLabelBGColor:"#fff",
+labelHoverShadow:!0,labelHoverShadowColor:"#000",labelHoverColor:"default",defaultLabelHoverColor:"#000",labelActiveBGColor:"default",defaultActiveLabelBGColor:"#fff",labelActiveShadow:!0,labelActiveShadowColor:"#000",labelActiveColor:"default",defaultLabelActiveColor:"#000",labelSize:"fixed",defaultLabelSize:12,labelSizeRatio:2,labelThreshold:6,font:"Arial",hoverFont:"",activeFont:"",fontStyle:"",hoverFontStyle:"",activeFontStyle:"",edgeColor:"source",defaultEdgeColor:"#aaa",defaultEdgeType:"line",
+defaultNodeColor:"#aaa",nodeHoverColor:"node",defaultNodeHoverColor:"#fff",nodeActiveColor:"node",defaultNodeActiveColor:"#fff",borderSize:0,nodeBorderColor:"node",defaultNodeBorderColor:"#fff",edgesSpeed:200,nodesSpeed:200,labelsSpeed:200};var n=g,l=d;this.currentLabelIndex=this.currentNodeIndex=this.currentEdgeIndex=0;this.task_drawLabel=function(){for(var b=a.nodes.length,c=0;c++<h.p.labelsSpeed&&h.currentLabelIndex<b;)if(h.isOnScreen(a.nodes[h.currentLabelIndex])){var d=a.nodes[h.currentLabelIndex++],
+j=f;if(d.displaySize>=h.p.labelThreshold||d.forceLabel){var g="fixed"==h.p.labelSize?h.p.defaultLabelSize:h.p.labelSizeRatio*d.displaySize;j.font=h.p.fontStyle+g+"px "+h.p.font;j.fillStyle="node"==h.p.labelColor?d.color||h.p.defaultNodeColor:h.p.defaultLabelColor;j.fillText(d.label,Math.round(d.displayX+1.5*d.displaySize),Math.round(d.displayY+g/2-3))}}else h.currentLabelIndex++;return h.currentLabelIndex<b};this.task_drawEdge=function(){for(var b=a.edges.length,c,d,f=0;f++<h.p.edgesSpeed&&h.currentEdgeIndex<
+b;)if(e=a.edges[h.currentEdgeIndex],c=e.source,d=e.target,e.hidden||c.hidden||d.hidden||!h.isOnScreen(c)&&!h.isOnScreen(d))h.currentEdgeIndex++;else{c=a.edges[h.currentEdgeIndex++];d=c.source.displayX;var g=c.source.displayY,o=c.target.displayX,i=c.target.displayY,l=c.color;if(!l)switch(h.p.edgeColor){case "source":l=c.source.color||h.p.defaultNodeColor;break;case "target":l=c.target.color||h.p.defaultNodeColor;break;default:l=h.p.defaultEdgeColor}var n=j;switch(c.type||h.p.defaultEdgeType){case "curve":n.strokeStyle=
+l;n.lineWidth=c.displaySize/3;n.beginPath();n.moveTo(d,g);n.quadraticCurveTo((d+o)/2+(i-g)/4,(g+i)/2+(d-o)/4,o,i);n.stroke();break;default:n.strokeStyle=l,n.lineWidth=c.displaySize/3,n.beginPath(),n.moveTo(d,g),n.lineTo(o,i),n.stroke()}}return h.currentEdgeIndex<b};this.task_drawNode=function(){for(var c=a.nodes.length,d=0;d++<h.p.nodesSpeed&&h.currentNodeIndex<c;)if(h.isOnScreen(a.nodes[h.currentNodeIndex])){var f=a.nodes[h.currentNodeIndex++],j=Math.round(10*f.displaySize)/10,g=b;g.fillStyle=f.color;
+g.beginPath();g.arc(f.displayX,f.displayY,j,0,2*Math.PI,!0);g.closePath();g.fill();f.hover&&i(f)}else h.currentNodeIndex++;return h.currentNodeIndex<c};this.drawActiveNode=function(a){var b=c;if(!o(a))return h;var d="fixed"==h.p.labelSize?h.p.defaultLabelSize:h.p.labelSizeRatio*a.displaySize;b.font=(h.p.activeFontStyle||h.p.fontStyle||"")+" "+d+"px "+(h.p.activeFont||h.p.font||"");b.fillStyle="node"==h.p.labelHoverBGColor?a.color||h.p.defaultNodeColor:h.p.defaultActiveLabelBGColor;b.beginPath();h.p.labelActiveShadow&&
+(b.shadowOffsetX=0,b.shadowOffsetY=0,b.shadowBlur=4,b.shadowColor=h.p.labelActiveShadowColor);sigma.tools.drawRoundRect(b,Math.round(a.displayX-d/2-2),Math.round(a.displayY-d/2-2),Math.round(b.measureText(a.label).width+1.5*a.displaySize+d/2+4),Math.round(d+4),Math.round(d/2+2),"left");b.closePath();b.fill();b.shadowOffsetX=0;b.shadowOffsetY=0;b.shadowBlur=0;b.beginPath();b.fillStyle="node"==h.p.nodeBorderColor?a.color||h.p.defaultNodeColor:h.p.defaultNodeBorderColor;b.arc(Math.round(a.displayX),
+Math.round(a.displayY),a.displaySize+h.p.borderSize,0,2*Math.PI,!0);b.closePath();b.fill();b.beginPath();b.fillStyle="node"==h.p.nodeActiveColor?a.color||h.p.defaultNodeColor:h.p.defaultNodeActiveColor;b.arc(Math.round(a.displayX),Math.round(a.displayY),a.displaySize,0,2*Math.PI,!0);b.closePath();b.fill();b.fillStyle="node"==h.p.labelActiveColor?a.color||h.p.defaultNodeColor:h.p.defaultLabelActiveColor;b.fillText(a.label,Math.round(a.displayX+1.5*a.displaySize),Math.round(a.displayY+d/2-3));return h};
+this.drawHoverNode=i;this.isOnScreen=o;this.resize=function(a,b){n=a;l=b;return h}}function F(b,g){function f(){sigma.chronos.removeTask("node_"+d.id,2).removeTask("edge_"+d.id,2).removeTask("label_"+d.id,2).stopTasks();return d}function c(a,b){d.domElements[a]=document.createElement(b);d.domElements[a].style.position="absolute";d.domElements[a].setAttribute("id","sigma_"+a+"_"+d.id);d.domElements[a].setAttribute("class","sigma_"+a+"_"+b);d.domElements[a].setAttribute("width",d.width+"px");d.domElements[a].setAttribute("height",
+d.height+"px");d.domRoot.appendChild(d.domElements[a]);return d}function a(){d.p.drawHoverNodes&&(d.graph.checkHover(d.mousecaptor.mouseX,d.mousecaptor.mouseY),d.graph.nodes.forEach(function(a){a.hover&&!a.active&&d.plotter.drawHoverNode(a)}));return d}function D(){d.p.drawActiveNodes&&d.graph.nodes.forEach(function(a){a.active&&d.plotter.drawActiveNode(a)});return d}sigma.classes.Cascade.call(this);sigma.classes.EventDispatcher.call(this);var d=this;this.id=g.toString();this.p={auto:!0,drawNodes:2,
+drawEdges:1,drawLabels:2,lastNodes:2,lastEdges:0,lastLabels:2,drawHoverNodes:!0,drawActiveNodes:!0};this.domRoot=b;this.width=this.domRoot.offsetWidth;this.height=this.domRoot.offsetHeight;this.graph=new i;this.domElements={};c("edges","canvas");c("nodes","canvas");c("labels","canvas");c("hover","canvas");c("monitor","div");c("mouse","canvas");this.plotter=new z(this.domElements.nodes.getContext("2d"),this.domElements.edges.getContext("2d"),this.domElements.labels.getContext("2d"),this.domElements.hover.getContext("2d"),
+this.graph,this.width,this.height);this.monitor=new q(this,this.domElements.monitor);this.mousecaptor=new p(this.domElements.mouse,this.id);this.mousecaptor.bind("drag interpolate",function(){d.draw(d.p.auto?2:d.p.drawNodes,d.p.auto?0:d.p.drawEdges,d.p.auto?2:d.p.drawLabels,!0)}).bind("stopdrag stopinterpolate",function(){d.draw(d.p.auto?2:d.p.drawNodes,d.p.auto?1:d.p.drawEdges,d.p.auto?2:d.p.drawLabels,!0)}).bind("mousedown mouseup",function(a){var b=d.graph.nodes.filter(function(a){return!!a.hover}).map(function(a){return a.id});
+d.dispatch("mousedown"==a.type?"downgraph":"upgraph");b.length&&d.dispatch("mousedown"==a.type?"downnodes":"upnodes",b)}).bind("move",function(){d.domElements.hover.getContext("2d").clearRect(0,0,d.domElements.hover.width,d.domElements.hover.height);a();D()});sigma.chronos.bind("startgenerators",function(){sigma.chronos.getGeneratorsIDs().some(function(a){return!!a.match(RegExp("_ext_"+d.id+"$",""))})&&d.draw(d.p.auto?2:d.p.drawNodes,d.p.auto?0:d.p.drawEdges,d.p.auto?2:d.p.drawLabels)}).bind("stopgenerators",
+function(){d.draw()});for(var w=0;w<m.plugins.length;w++)m.plugins[w](this);this.draw=function(a,b,c,g){if(g&&sigma.chronos.getGeneratorsIDs().some(function(a){return!!a.match(RegExp("_ext_"+d.id+"$",""))}))return d;a=void 0==a?d.p.drawNodes:a;b=void 0==b?d.p.drawEdges:b;c=void 0==c?d.p.drawLabels:c;g={nodes:a,edges:b,labels:c};d.p.lastNodes=a;d.p.lastEdges=b;d.p.lastLabels=c;f();d.graph.rescale(d.width,d.height,0<a,0<b).setBorders();d.mousecaptor.checkBorders(d.graph.borders,d.width,d.height);d.graph.translate(d.mousecaptor.stageX,
+d.mousecaptor.stageY,d.mousecaptor.ratio,0<a,0<b);d.dispatch("graphscaled");for(var j in d.domElements)"canvas"==d.domElements[j].nodeName.toLowerCase()&&(void 0==g[j]||0<=g[j])&&d.domElements[j].getContext("2d").clearRect(0,0,d.domElements[j].width,d.domElements[j].height);d.plotter.currentEdgeIndex=0;d.plotter.currentNodeIndex=0;d.plotter.currentLabelIndex=0;j=null;g=!1;if(a)if(1<a)for(;d.plotter.task_drawNode(););else sigma.chronos.addTask(d.plotter.task_drawNode,"node_"+d.id,!1),g=!0,j="node_"+
+d.id;if(c)if(1<c)for(;d.plotter.task_drawLabel(););else j?sigma.chronos.queueTask(d.plotter.task_drawLabel,"label_"+d.id,j):sigma.chronos.addTask(d.plotter.task_drawLabel,"label_"+d.id,!1),g=!0,j="label_"+d.id;if(b)if(1<b)for(;d.plotter.task_drawEdge(););else j?sigma.chronos.queueTask(d.plotter.task_drawEdge,"edge_"+d.id,j):sigma.chronos.addTask(d.plotter.task_drawEdge,"edge_"+d.id,!1),g=!0,j="edge_"+d.id;d.dispatch("draw");d.refresh();g&&sigma.chronos.runTasks();return d};this.resize=function(a,
+b){var c=d.width,f=d.height;void 0!=a&&void 0!=b?(d.width=a,d.height=b):(d.width=d.domRoot.offsetWidth,d.height=d.domRoot.offsetHeight);if(c!=d.width||f!=d.height){for(var j in d.domElements)d.domElements[j].setAttribute("width",d.width+"px"),d.domElements[j].setAttribute("height",d.height+"px");d.plotter.resize(d.width,d.height);d.draw(d.p.lastNodes,d.p.lastEdges,d.p.lastLabels,!0)}return d};this.refresh=function(){d.domElements.hover.getContext("2d").clearRect(0,0,d.domElements.hover.width,d.domElements.hover.height);
+a();D();return d};this.drawHover=a;this.drawActive=D;this.clearSchedule=f;window.addEventListener("resize",function(){d.resize()})}function x(b){var j=this;sigma.classes.EventDispatcher.call(this);this._core=b;this.kill=function(){};this.getID=function(){return b.id};this.configProperties=function(f,c){var a=b.config(f,c);return a==b?j:a};this.drawingProperties=function(f,c){var a=b.plotter.config(f,c);return a==b.plotter?j:a};this.mouseProperties=function(f,c){var a=b.mousecaptor.config(f,c);return a==
+b.mousecaptor?j:a};this.graphProperties=function(f,c){var a=b.graph.config(f,c);return a==b.graph?j:a};this.getMouse=function(){return{mouseX:b.mousecaptor.mouseX,mouseY:b.mousecaptor.mouseY,down:b.mousecaptor.isMouseDown}};this.position=function(f,c,a){if(0==arguments.length)return{stageX:b.mousecaptor.stageX,stageY:b.mousecaptor.stageY,ratio:b.mousecaptor.ratio};b.mousecaptor.stageX=void 0!=f?f:b.mousecaptor.stageX;b.mousecaptor.stageY=void 0!=c?c:b.mousecaptor.stageY;b.mousecaptor.ratio=void 0!=
+a?a:b.mousecaptor.ratio;return j};this.goTo=function(f,c,a){b.mousecaptor.interpolate(f,c,a);return j};this.zoomTo=function(f,c,a){a=Math.min(Math.max(b.mousecaptor.config("minRatio"),a),b.mousecaptor.config("maxRatio"));a==b.mousecaptor.ratio?b.mousecaptor.interpolate(f-b.width/2+b.mousecaptor.stageX,c-b.height/2+b.mousecaptor.stageY):b.mousecaptor.interpolate((a*f-b.mousecaptor.ratio*b.width/2)/(a-b.mousecaptor.ratio),(a*c-b.mousecaptor.ratio*b.height/2)/(a-b.mousecaptor.ratio),a);return j};this.resize=
+function(f,c){b.resize(f,c);return j};this.draw=function(f,c,a,g){b.draw(f,c,a,g);return j};this.refresh=function(){b.refresh();return j};this.addGenerator=function(f,c,a){sigma.chronos.addGenerator(f+"_ext_"+b.id,c,a);return j};this.removeGenerator=function(f){sigma.chronos.removeGenerator(f+"_ext_"+b.id);return j};this.addNode=function(f,c){b.graph.addNode(f,c);return j};this.addEdge=function(f,c,a,g){b.graph.addEdge(f,c,a,g);return j};this.dropNode=function(f){b.graph.dropNode(f);return j};this.dropEdge=
+function(f){b.graph.dropEdge(f);return j};this.pushGraph=function(f,c){f.nodes&&f.nodes.forEach(function(a){a.id&&(!c||!b.graph.nodesIndex[a.id])&&j.addNode(a.id,a)});f.edges&&f.edges.forEach(function(a){(validID=a.source&&a.target&&a.id)&&(!c||!b.graph.edgesIndex[a.id])&&j.addNode(a.id,a.source,a.target,a)});return j};this.emptyGraph=function(){b.graph.empty();return j};this.getNodesCount=function(){return b.graph.nodes.length};this.getEdgesCount=function(){return b.graph.edges.length};this.iterNodes=
+function(f,c){b.graph.iterNodes(f,c);return j};this.iterEdges=function(f,c){b.graph.iterEdges(f,c);return j};this.getNodes=function(f){return b.graph.getNodes(f)};this.getEdges=function(f){return b.graph.getEdges(f)};this.activateMonitoring=function(){return b.monitor.activate()};this.desactivateMonitoring=function(){return b.monitor.desactivate()};b.bind("downnodes upnodes downgraph upgraph",function(b){j.dispatch(b.type,b.content)});b.graph.bind("overnodes outnodes",function(b){j.dispatch(b.type,
+b.content)})}var k=0,m={plugins:[]};sigma.init=function(b){b=new F(b,(++k).toString());sigma.instances[k]=new x(b);return sigma.instances[k]};sigma.addPlugin=function(b,g,f){x.prototype[b]=g;m.plugins.push(f)};sigma.chronos=new function(){function b(a){window.setTimeout(a,0);return h}function g(){for(h.dispatch("frameinserted");n&&v.length&&f(););!n||!v.length?a():(B=(new Date).getTime(),m++,z=u-p,q=p-z,h.dispatch("insertframe"),b(g))}function f(){C%=v.length;if(!v[C].task()){var a=v[C].taskName;
+y=y.filter(function(b){b.taskParent==a&&v.push({taskName:b.taskName,task:b.task});return b.taskParent!=a});h.dispatch("killed",v.splice(C--,1)[0])}C++;u=(new Date).getTime()-B;return u<=q}function c(){n=!0;m=C=0;x=B=(new Date).getTime();h.dispatch("start");h.dispatch("insertframe");b(g);return h}function a(){h.dispatch("stop");n=!1;return h}function i(a,b,d){if("function"!=typeof a)throw Error('Task "'+b+'" is not a function');v.push({taskName:b,task:a});n=!(!n&&!(d&&c()||1));return h}function d(a){return a?
+Object.keys(r).filter(function(a){return!!r[a].on}).length:Object.keys(r).length}function w(){Object.keys(r).length?(h.dispatch("startgenerators"),h.unbind("killed",o),b(function(){for(var a in r)r[a].on=!0,i(r[a].task,a,!1)}),h.bind("killed",o).runTasks()):h.dispatch("stopgenerators");return h}function o(a){void 0!=r[a.content.taskName]&&(r[a.content.taskName].del||!r[a.content.taskName].condition()?delete r[a.content.taskName]:r[a.content.taskName].on=!1,0==d(!0)&&w())}sigma.classes.EventDispatcher.call(this);
+var h=this,n=!1,l=80,k=0,m=0,p=1E3/l,q=p,u=0,x=0,B=0,z=0,r={},v=[],y=[],C=0;this.frequency=function(a){return void 0!=a?(l=Math.abs(1*a),p=1E3/l,m=0,h):l};this.runTasks=c;this.stopTasks=a;this.insertFrame=b;this.addTask=i;this.queueTask=function(a,b,c){if("function"!=typeof a)throw Error('Task "'+b+'" is not a function');if(!v.concat(y).some(function(a){return a.taskName==c}))throw Error('Parent task "'+c+'" of "'+b+'" is not attached.');y.push({taskParent:c,taskName:b,task:a});return h};this.removeTask=
+function(b,c){if(void 0==b)v=[],1==c?y=[]:2==c&&(v=y,y=[]),a();else{var d="string"==typeof b?b:"";v=v.filter(function(a){return("string"==typeof b?a.taskName==b:a.task==b)?(d=a.taskName,!1):!0});0<c&&(y=y.filter(function(a){1==c&&a.taskParent==d&&v.push(a);return a.taskParent!=d}))}n=!(v.length&&(!a()||1));return h};this.addGenerator=function(a,b,c){if(void 0!=r[a])return h;r[a]={task:b,condition:c};0==d(!0)&&w();return h};this.removeGenerator=function(a){r[a]&&(r[a].on=!1,r[a].del=!0);return h};
+this.startGenerators=w;this.getGeneratorsIDs=function(){return Object.keys(r)};this.getFPS=function(){n&&(k=Math.round(1E4*(m/((new Date).getTime()-x)))/10);return k};this.getTasksCount=function(){return v.length};this.getQueuedTasksCount=function(){return y.length};this.getExecutionTime=function(){return B-x};return this};sigma.debugMode=0;sigma.log=function(){if(1==sigma.debugMode)for(var b in arguments)console.log(arguments[b]);else if(1<sigma.debugMode)for(b in arguments)throw Error(arguments[b]);
+return sigma};sigma.easing={linear:{},quadratic:{}};sigma.easing.linear.easenone=function(b){return b};sigma.easing.quadratic.easein=function(b){return b*b};sigma.easing.quadratic.easeout=function(b){return-b*(b-2)};sigma.easing.quadratic.easeinout=function(b){return 1>(b*=2)?0.5*b*b:-0.5*(--b*(b-2)-1)};sigma.tools.drawRoundRect=function(b,g,f,c,a,i,d){var i=i?i:0,k=d?d:[],k="string"==typeof k?k.split(" "):k,d=i&&(0<=k.indexOf("topleft")||0<=k.indexOf("top")||0<=k.indexOf("left")),m=i&&(0<=k.indexOf("topright")||
+0<=k.indexOf("top")||0<=k.indexOf("right")),h=i&&(0<=k.indexOf("bottomleft")||0<=k.indexOf("bottom")||0<=k.indexOf("left")),k=i&&(0<=k.indexOf("bottomright")||0<=k.indexOf("bottom")||0<=k.indexOf("right"));b.moveTo(g,f+i);d?b.arcTo(g,f,g+i,f,i):b.lineTo(g,f);m?(b.lineTo(g+c-i,f),b.arcTo(g+c,f,g+c,f+i,i)):b.lineTo(g+c,f);k?(b.lineTo(g+c,f+a-i),b.arcTo(g+c,f+a,g+c-i,f+a,i)):b.lineTo(g+c,f+a);h?(b.lineTo(g+i,f+a),b.arcTo(g,f+a,g,f+a-i,i)):b.lineTo(g,f+a);b.lineTo(g,f+i)};sigma.tools.getRGB=function(b,
+g){var b=b.toString(),f={r:0,g:0,b:0};if(3<=b.length&&"#"==b.charAt(0)){var c=b.length-1;6==c?f={r:parseInt(b.charAt(1)+b.charAt(2),16),g:parseInt(b.charAt(3)+b.charAt(4),16),b:parseInt(b.charAt(5)+b.charAt(5),16)}:3==c&&(f={r:parseInt(b.charAt(1)+b.charAt(1),16),g:parseInt(b.charAt(2)+b.charAt(2),16),b:parseInt(b.charAt(3)+b.charAt(3),16)})}g&&(f=[f.r,f.g,f.b]);return f};sigma.tools.rgbToHex=function(b,g,f){return sigma.tools.toHex(b)+sigma.tools.toHex(g)+sigma.tools.toHex(f)};sigma.tools.toHex=
+function(b){b=parseInt(b,10);if(isNaN(b))return"00";b=Math.max(0,Math.min(b,255));return"0123456789ABCDEF".charAt((b-b%16)/16)+"0123456789ABCDEF".charAt(b%16)};sigma.publicPrototype=x.prototype})();

js/sigma/sigma.parseJson.js

@@ -0,0 +1,239 @@
+// // Scott Hale (Oxford Internet Institute)
+// // Requires sigma.js and jquery to be loaded
+// // based on parseGexf from Mathieu Jacomy @ Sciences Po M�dialab & WebAtlas
+
+
+var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+// Regular implementation for Chrome and other browsers
+sigma.publicPrototype.parseJson = function(gzippedJsonPath, callback) {
+  var sigmaInstance = this;
+  
+  // Use XMLHttpRequest for binary data
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', gzippedJsonPath, true);
+  xhr.responseType = 'arraybuffer';
+  
+  xhr.onload = function() {
+    if (xhr.status === 200) {
+      try {
+        // Decompress the gzipped data using pako
+        var inflatedData = pako.inflate(new Uint8Array(xhr.response));
+        
+        // Convert binary data to string
+        var jsonString = new TextDecoder('utf-8').decode(inflatedData);
+        
+        // Parse the JSON
+        var jsonData = JSON.parse(jsonString);
+        
+        // Process nodes
+        for (var i = 0; i < jsonData.nodes.length; i++) {
+          var id = jsonData.nodes[i].id;
+          sigmaInstance.addNode(id, jsonData.nodes[i]);
+        }
+        
+        // Process edges
+        for (var j = 0; j < jsonData.edges.length; j++) {
+          var edgeNode = jsonData.edges[j];
+          var source = edgeNode.source;
+          var target = edgeNode.target;
+          var label = edgeNode.label;
+          var eid = edgeNode.id;
+          
+          sigmaInstance.addEdge(eid, source, target, edgeNode);
+        }
+        
+        // Call the callback function if provided
+        if (callback) {
+          callback.call(sigmaInstance);
+        }
+      } catch (error) {
+        console.error("Error processing gzipped JSON:", error);
+      }
+    } else {
+      console.error("Error fetching gzipped JSON. Status:", xhr.status);
+    }
+  };
+  
+  xhr.onerror = function() {
+    console.error("Network error while fetching gzipped JSON");
+  };
+  
+  xhr.send();
+};
+
+
+// Create a new function specifically for loading gzipped data safely
+// This avoids sigma initialization issues by loading data first
+var loadGzippedGraphData = function(gzippedJsonPath, callback) {
+  // Use XMLHttpRequest for binary data
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', gzippedJsonPath, true);
+  xhr.responseType = 'arraybuffer';
+  
+  xhr.onload = function() {
+    if (xhr.status === 200) {
+      try {
+        // Decompress the gzipped data using pako
+        var inflatedData = pako.inflate(new Uint8Array(xhr.response));
+        
+        // Convert binary data to string
+        var jsonString;
+        try {
+          jsonString = new TextDecoder('utf-8').decode(inflatedData);
+        } catch (e) {
+          // Fallback for older browsers
+          jsonString = "";
+          var array = inflatedData;
+          var i = 0, len = array.length;
+          var c, char2, char3;
+          
+          while (i < len) {
+            c = array[i++];
+            switch (c >> 4) {
+              case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
+                // 0xxxxxxx
+                jsonString += String.fromCharCode(c);
+                break;
+              case 12: case 13:
+                // 110x xxxx   10xx xxxx
+                char2 = array[i++];
+                jsonString += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
+                break;
+              case 14:
+                // 1110 xxxx  10xx xxxx  10xx xxxx
+                char2 = array[i++];
+                char3 = array[i++];
+                jsonString += String.fromCharCode(((c & 0x0F) << 12) |
+                                               ((char2 & 0x3F) << 6) |
+                                               ((char3 & 0x3F) << 0));
+                break;
+            }
+          }
+        }
+        
+        // Parse the JSON
+        var jsonData = JSON.parse(jsonString);
+        
+        // Return the parsed data to the callback
+        if (callback) {
+          callback(jsonData);
+        }
+      } catch (error) {
+        console.error("Error processing gzipped JSON:", error);
+        if (callback) {
+          callback(null, error);
+        }
+      }
+    } else {
+      console.error("Error fetching gzipped JSON. Status:", xhr.status);
+      if (callback) {
+        callback(null, new Error("HTTP status: " + xhr.status));
+      }
+    }
+  };
+  
+  xhr.onerror = function() {
+    console.error("Network error while fetching gzipped JSON");
+    if (callback) {
+      callback(null, new Error("Network error"));
+    }
+  };
+  
+  xhr.send();
+};
+
+
+
+
+// Safe initialization for Safari
+function initSigmaWithGzippedData(containerId, gzippedJsonPath, options, callbackFn) {
+  // Make options parameter optional
+  if (typeof options === 'function') {
+    callbackFn = options;
+    options = {};
+  }
+  
+  options = options || {};
+  
+  // For Safari, use a completely different approach
+  if (isSafari) {
+    // First, load the data
+    loadGzippedGraphData(gzippedJsonPath, function(data, error) {
+      if (error || !data) {
+        console.error("Failed to load graph data:", error);
+        return;
+      }
+      
+      // Wait for DOM to be completely ready
+      jQuery(document).ready(function() {
+        // Make sure container is ready with dimensions
+        var container = document.getElementById(containerId);
+        if (!container) {
+          console.error("Container not found:", containerId);
+          return;
+        }
+        
+        // Ensure container has dimensions
+        if (!container.offsetWidth || !container.offsetHeight) {
+          container.style.width = container.style.width || "100%";
+          container.style.height = container.style.height || "500px";
+          container.style.display = "block";
+        }
+        
+        // Wait for next animation frame to ensure DOM updates
+        requestAnimationFrame(function() {
+          // Create settings with explicit container reference
+          var sigmaSettings = Object.assign({}, options);
+          
+          // Wait a bit more for Safari
+          setTimeout(function() {
+            try {
+              // Initialize sigma with empty graph first
+              var sigmaInstance = new sigma(containerId);
+              
+              // Add nodes and edges manually
+              for (var i = 0; i < data.nodes.length; i++) {
+                var id = data.nodes[i].id;
+                sigmaInstance.addNode(id, data.nodes[i]);
+              }
+              
+              for (var j = 0; j < data.edges.length; j++) {
+                var edgeNode = data.edges[j];
+                var source = edgeNode.source;
+                var target = edgeNode.target;
+                var label = edgeNode.label || "";
+                var eid = edgeNode.id;
+                
+                sigmaInstance.addEdge(eid, source, target, edgeNode);
+              }
+              
+              // Refresh the graph
+              sigmaInstance.refresh();
+              
+              // Call user callback if provided
+              if (callbackFn) {
+                callbackFn(sigmaInstance);
+              }
+            } catch (e) {
+              console.error("Error initializing sigma:", e);
+            }
+          }, 300); // Longer delay for Safari
+        });
+      });
+    });
+  } else {
+    // For Chrome and others, use a more standard approach
+    jQuery(document).ready(function() {
+      try {
+        var sigmaInstance = new sigma(containerId);
+        sigmaInstance.parseGzippedJson(gzippedJsonPath, function() {
+          this.refresh();
+          if (callbackFn) callbackFn(this);
+        });
+      } catch (e) {
+        console.error("Error initializing sigma:", e);
+      }
+    });
+  }
+}