ui finished v1

config.json

@@ -1,7 +1,7 @@
 {
   "type": "network",
   "version": "1.0",
-  "data": "paper_atlas_data.json",
+  "data": "sigma_graph.json",
   "logo": {
     "file": "",
     "link": "",
@@ -54,10 +54,10 @@
       "defaultLabelSize": 14
     },
     "graphProperties": {
-      "maxEdgeSize": 2,
-      "minEdgeSize": 0.5,
-      "minNodeSize": 2,
-      "maxNodeSize": 10
+      "maxEdgeSize": 1.5,
+      "minEdgeSize": 0.2,
+      "minNodeSize": 1,
+      "maxNodeSize": 8
     },
     "mouseProperties": {
       "maxRatio": 20,
@@ -65,13 +65,13 @@
     }
   },
   "nodeTypes": {
-    "paper": { "color": "#2ca02c", "size": 3 },
-    "author": { "color": "#9467bd", "size": 5 },
-    "organization": { "color": "#1f77b4", "size": 4 },
+    "paper": { "color": "#FF009A", "size": 1 },
+    "author": { "color": "#62D600", "size": 1 },
+    "organization": { "color": "#020AA7", "size": 1 },
     "unknown": { "color": "#ff7f0e", "size": 3 }
   },
   "colorPalette": [
-    "#9467bd", "#2ca02c", "#1f77b4", "#17becf", 
+    "#FF9A00", "#62D600", "#020AA7", "#17becf", 
     "#ff7f0e", "#d62728", "#8c564b", "#e377c2", 
     "#bcbd22", "#7f7f7f"
   ]

css/style.css

@@ -556,4 +556,10 @@ canvas#sigma_bg_1 {
   margin-bottom: 12px;
   font-size: 13px;
   display: block;
+}
+
+/* Hide debug controls */
+#debug-controls, 
+#config-debug {
+  display: none !important;
 } 

daily-paper-atlas/js/main.js

@@ -23,6 +23,87 @@ function forceEdgeColors() {
   console.log("Edge colors have been forcibly updated");
 }
 
+// Log node colors for debugging
+function logNodeColors() {
+  if (!sigmaInstance) return;
+  
+  console.log("Current node colors by type:");
+  let typeColors = {};
+  
+  // Collect colors for each node type
+  sigmaInstance.iterNodes(function(node) {
+    if (node.type) {
+      if (!typeColors[node.type]) {
+        typeColors[node.type] = {
+          configColor: (config.nodeTypes && config.nodeTypes[node.type]) 
+                        ? config.nodeTypes[node.type].color 
+                        : (nodeTypes[node.type] ? nodeTypes[node.type].color : 'none'),
+          nodeCount: 0,
+          colorCounts: {}
+        };
+      }
+      
+      typeColors[node.type].nodeCount++;
+      
+      if (!typeColors[node.type].colorCounts[node.color]) {
+        typeColors[node.type].colorCounts[node.color] = 0;
+      }
+      typeColors[node.type].colorCounts[node.color]++;
+    }
+  });
+  
+  // Log the results
+  for (const type in typeColors) {
+    console.log(`Node type: ${type}`);
+    console.log(`  Config color: ${typeColors[type].configColor}`);
+    console.log(`  Node count: ${typeColors[type].nodeCount}`);
+    console.log('  Actual colors used:');
+    for (const color in typeColors[type].colorCounts) {
+      console.log(`    ${color}: ${typeColors[type].colorCounts[color]} nodes`);
+    }
+  }
+}
+
+// Force apply node colors from config, overriding any colors in the data
+function forceNodeColorsFromConfig() {
+  console.log("Forcibly applying node colors from config settings");
+  
+  if (!sigmaInstance) {
+    console.error("Cannot apply node colors, sigma instance not initialized");
+    return;
+  }
+  
+  // Use configured node types with fallback to default types
+  let configNodeTypes = config.nodeTypes || nodeTypes;
+  
+  // Apply colors to all nodes based on their type
+  sigmaInstance.iterNodes(function(node) {
+    if (node.type && configNodeTypes[node.type]) {
+      // Override the node color with the one from config
+      const configColor = configNodeTypes[node.type].color;
+      console.log(`Setting node ${node.id} color to ${configColor} based on type ${node.type}`);
+      node.color = configColor;
+      
+      // Also set size if configured
+      if (configNodeTypes[node.type].size) {
+        node.size = configNodeTypes[node.type].size;
+      }
+    }
+  });
+  
+  // Refresh the display
+  sigmaInstance.refresh();
+  
+  // Also update edge colors to match their target nodes
+  setTimeout(function() {
+    forceEdgeColors();
+    // Log node colors after setting them for verification
+    logNodeColors();
+  }, 100);
+  
+  console.log("Node colors have been forcibly applied from config");
+}
+
 // Initialize the graph with the loaded data
 function initializeGraph(data) {
   graph = data;
@@ -103,7 +184,10 @@ function initializeGraph(data) {
     // Force redraw and refresh
     sigmaInstance.draw(2, 2, 2, 2);
     
-    // Force edge colors one more time after drawing
+    // Force apply node colors from config to override any hardcoded colors in the data
+    forceNodeColorsFromConfig();
+    
+    // Force edge colors again after applying node colors
     forceEdgeColors();
     
     console.log("Sigma instance created and configured:", sigmaInstance);
@@ -130,10 +214,13 @@ function applyNodeStyles() {
   try {
     // First update node colors
     sigmaInstance.iterNodes(function(node) {
+      // Always use config colors for node types, ignoring any existing colors
       if (node.type && config.nodeTypes && config.nodeTypes[node.type]) {
+        // Override with config color (even if node already has a color)
         node.color = config.nodeTypes[node.type].color;
         node.size = config.nodeTypes[node.type].size;
       } else if (node.type && nodeTypes[node.type]) {
+        // Fallback to default colors
         node.color = nodeTypes[node.type].color;
         node.size = nodeTypes[node.type].size;
       }

json_converter.js

@@ -0,0 +1,116 @@
+/**
+ * JSON Format Converter
+ * 
+ * This script converts the graph.json file from its source format to the format
+ * expected by the SigmaJS visualization library.
+ */
+
+// Load required modules
+const fs = require('fs');
+const path = require('path');
+
+// File paths
+const sourcePath = 'graph.json';
+const outputPath = 'sigma_graph.json';
+
+// Load config to access node type colors
+let config;
+try {
+  config = JSON.parse(fs.readFileSync('config.json', 'utf8'));
+} catch (error) {
+  console.error('Error loading config.json:', error);
+  config = {
+    nodeTypes: {
+      paper: { color: '#FF9A00', size: 3 },
+      author: { color: '#62D600', size: 5 },
+      organization: { color: '#020AA7', size: 4 },
+      unknown: { color: '#ff7f0e', size: 3 }
+    }
+  };
+}
+
+// Convert the graph JSON
+function convertGraph() {
+  try {
+    // Read the source file
+    const graphData = JSON.parse(fs.readFileSync(sourcePath, 'utf8'));
+    
+    // Prepare the SigmaJS JSON structure
+    const sigmaData = {
+      nodes: [],
+      edges: []
+    };
+    
+    // Process nodes
+    graphData.nodes.forEach(node => {
+      // Extract node data
+      const nodeType = node.attributes.type || 'unknown';
+      const nodeColor = (nodeType && config.nodeTypes && config.nodeTypes[nodeType]) 
+        ? config.nodeTypes[nodeType].color 
+        : node.attributes.color || '#666';
+      
+      // Create node in SigmaJS format
+      const sigmaNode = {
+        id: node.key,
+        label: node.attributes.label || node.key,
+        x: node.attributes.x || 0,
+        y: node.attributes.y || 0,
+        size: node.attributes.size || 1,
+        color: nodeColor,
+        type: nodeType,
+        attr: { colors: {} }
+      };
+      
+      // Add type to colors attribute for filtering
+      if (nodeType) {
+        sigmaNode.attr.colors.type = nodeType;
+      }
+      
+      // Add any additional attributes
+      for (const [key, value] of Object.entries(node.attributes)) {
+        if (!['label', 'x', 'y', 'size', 'color', 'type'].includes(key)) {
+          sigmaNode[key] = value;
+        }
+      }
+      
+      sigmaData.nodes.push(sigmaNode);
+    });
+    
+    // Process edges
+    let edgeCount = 0;
+    graphData.edges.forEach(edge => {
+      // Create edge in SigmaJS format
+      const sigmaEdge = {
+        id: edge.key || `e${edgeCount++}`,
+        source: edge.source,
+        target: edge.target
+      };
+      
+      // Add weight if available
+      if (edge.attributes && edge.attributes.weight) {
+        sigmaEdge.weight = edge.attributes.weight;
+      }
+      
+      // Add label if available
+      if (edge.attributes && edge.attributes.label) {
+        sigmaEdge.label = edge.attributes.label;
+      }
+      
+      sigmaData.edges.push(sigmaEdge);
+    });
+    
+    // Write the converted data
+    fs.writeFileSync(outputPath, JSON.stringify(sigmaData, null, 2));
+    
+    return true;
+  } catch (error) {
+    console.error('Error during conversion:', error);
+    return false;
+  }
+}
+
+// Execute the conversion
+convertGraph();
+
+// Export function for potential reuse
+module.exports = { convertGraph };