Merge pull request #35 from 007vasy/task/automate-chains

task/automate chains

.gitignore

@@ -5,3 +5,5 @@ scraper/*.json
 
 __pycache__/*
 docs/gh_private
+
+list_to_nodes_and_links.py

docs/ccip/index.html

@@ -13,15 +13,79 @@
 
       let gData;
 
-      fetch('./ccip_info_new.json')
-        .then(response => response.json())
-        .then(data => {
-          gData = data;
+      // Fetch and transform the data
+      const chainsUrl = 'https://raw.githubusercontent.com/smartcontractkit/documentation/refs/heads/main/src/config/data/chains.json';
+      const lanesUrl = 'https://raw.githubusercontent.com/smartcontractkit/documentation/refs/heads/main/src/config/data/ccip/v1_2_0/mainnet/lanes.json';
 
+      Promise.all([
+        fetch(chainsUrl).then(r => r.json()),
+        fetch(lanesUrl).then(r => r.json())
+      ])
+        .then(([chainsData, lanesData]) => {
+          // Transform chains data for lookup
+          const chainImageMap = Object.entries(chainsData).reduce((acc, [_, chain]) => {
+            acc[chain.title.toLowerCase()] = "https://docs.chain.link" + chain.icon;
+            return acc;
+          }, {});
+
+          // Get unique chain names from lanes data
+          const uniqueChains = new Set();
+          Object.entries(lanesData).forEach(([source, destinations]) => {
+            uniqueChains.add(source);
+            Object.keys(destinations).forEach(target => uniqueChains.add(target));
+          });
+
+          // Create nodes with integer IDs
+          const chainToId = {};
+            const nodes = Array.from(uniqueChains).map((chain, index) => {
+            chainToId[chain] = index;
+            let lookupName = chain.toLowerCase()
+              .replace('ethereum-mainnet-', '')
+              .replace('-1', '')
+              .replace('-mainnet', '')
+              .replace('mainnet-', '')
+              .replace('mainnet', 'ethereum')
+              .replace('bsc', 'bnb chain')
+              .replace('xdai', 'gnosis')
+              .replace('polkadot-astar', 'astar')
+              .replace('matic', 'polygon')
+              .replace('andromeda', 'metis');
+            return {
+              id: index,
+              name: chain,
+              img: chainImageMap[lookupName] || '',
+              // img: "https://icons.llamao.fi/icons/chains/rsz_scroll.jpg",
+              url: 'https://docs.chain.link/ccip/directory/mainnet/chain/' + chain // You might want to update this based on your requirements
+            };
+          });
+
+          // Transform lanes data into links using integer IDs
+          const links = [];
+          Object.entries(lanesData).forEach(([source, destinations]) => {
+            Object.keys(destinations).forEach(target => {
+              links.push({
+                source: chainToId[source],
+                target: chainToId[target],
+                name: `${source} -> ${target}`,
+                tokens: Object.keys(destinations[target].supportedTokens || {})
+              });
+            });
+          });
+
+          gData = {
+            nodes: nodes,
+            links: links
+          };
+          console.log(chainImageMap);
+          console.log(gData);
+          // Create a mapping from node id to node object
+          const nodeById = Object.fromEntries(gData.nodes.map(node => [node.id, node]));
+          // create empty array of neighbors if it doesn't exist for each node
+          gData.nodes.forEach(node => !node.neighbors && (node.neighbors = []));
           // cross-link node objects
           gData.links.forEach(link => {
-            const a = gData.nodes[link.source];
-            const b = gData.nodes[link.target];
+            const a = nodeById[link.source];
+            const b = nodeById[link.target];
             !a.neighbors && (a.neighbors = []);
             !b.neighbors && (b.neighbors = []);
             a.neighbors.push(b);
@@ -84,7 +148,9 @@
               updateHighlight();
             })
             .nodeThreeObject(({ img }) => {
-              const imgTexture = new THREE.TextureLoader().load(`../images/${img}`);
+              const loader = new THREE.TextureLoader();
+              loader.crossOrigin = 'anonymous';
+              const imgTexture = loader.load(img);
               imgTexture.colorSpace = THREE.SRGBColorSpace;
               const material = new THREE.SpriteMaterial({ map: imgTexture });
               const sprite = new THREE.Sprite(material);

docs/tech-tree/index.html

@@ -4,17 +4,13 @@
 <head>
     <title>Tech Tree</title>
     <style> body { margin: 0; } </style>
-    <script src="//unpkg.com/three"></script>
-    <script src="//unpkg.com/three-spritetext"></script>
-    <script src="//unpkg.com/3d-force-graph"></script>
-    <!-- <script src="//unpkg.com/d3-dsv"></script>
-    <script src="//unpkg.com/dat.gui"></script>
-    <script src="//unpkg.com/d3-octree"></script>
-    <script src="//unpkg.com/d3-force-3d"></script> -->
-    <!--<script src="../../dist/3d-force-graph.js"></script>-->
-  </head>
+    <!-- Updated script tags with explicit https protocol -->
+    <script src="https://unpkg.com/three"></script>
+    <script src="https://unpkg.com/three-spritetext"></script>
+    <script src="https://unpkg.com/3d-force-graph"></script>
+</head>
 
-  <body>
+<body>
     <div id="3d-graph"></div>
     <script>
       async function loadJson(){
@@ -24,34 +20,21 @@
       }
     </script>
     <script>
-
-
       const highlightNodes = new Set();
       const highlightLinks = new Set();
-
       let hoverNode = null;
       loadJson().then(gData => {
 
-
         function getGeometry(node) {
-          // spacetree
-          // nanotech
-          // intcoop
-          // neurotech
-          // longevity
-
-          // map a geometry to each subtree type
-
-          size = Math.max(node.degree/5,4)
-
+          let size = Math.max(node.degree/5,4); // Ensure size is defined with let or const
           let geometry = new THREE.SphereGeometry(size);
 
           if(node.subtree === 'spacetree') {
             geometry = new THREE.BoxGeometry(size, size, size);
           }
 
           if(node.subtree === 'nanotech') {
-            geometry = new THREE.TorusKnotGeometry(size, size)
+            geometry = new THREE.TorusKnotGeometry(size, size);
           }
 
           if(node.subtree === 'intcoop') {
@@ -67,7 +50,6 @@
           }
 
           return geometry;
-
         }
 
         function doNodeThreeObject(node) {
@@ -78,7 +60,7 @@
                 transparent: true,
                 opacity: 0.75
               })
-            )
+            );
         }
 
         const Graph = ForceGraph3D()
@@ -95,24 +77,17 @@
             .linkLabel('type')
             .linkDirectionalArrowLength(3)
             .linkColor("rgba(160, 85, 178, 0.9)")
-            .nodeThreeObject(node => { return doNodeThreeObject(node)})
-
+            .nodeThreeObject(node => doNodeThreeObject(node));
 
         function updateHighlight() {
-        // trigger update of highlighted objects in scene
-        Graph
-          .nodeThreeObject(node => doNodeThreeObject(node))
-          .linkWidth(Graph.linkWidth())
-          .linkDirectionalParticles(Graph.linkDirectionalParticles());
+          // trigger update of highlighted objects in scene
+          Graph
+            .nodeThreeObject(node => doNodeThreeObject(node))
+            .linkWidth(Graph.linkWidth())
+            .linkDirectionalParticles(Graph.linkDirectionalParticles());
         }
-
       });
-
-
-
-
-
     </script>
-  </body>
+</body>
 
-</html>
+</html>