graphology removed

Author: syedzayyan

app/tools/scaff_net/page.tsx

@@ -6,9 +6,8 @@ import ScaffoldNetworkWholeGraph from "../../../components/tools/toolComp/Scaffo
 import ScaffNetDets from "../../../components/tools/toolComp/ScaffNetDets";
 import ScaffoldSettings from "../../../components/tools/toolComp/ScaffoldSettings";
 import TargetContext from "../../../context/TargetContext";
-import { graph_molecule_image_generator } from "../../../components/utils/rdkit_loader";
+import { deserializeGraph, graph_molecule_image_generator } from "../../../components/utils/rdkit_loader";
 import RDKitContext from "../../../context/RDKitContext";
-import { MultiDirectedGraph } from "graphology";
 import { Tabs } from "@mantine/core";
 
 export default function DisplayGraph() {
@@ -22,15 +21,15 @@ export default function DisplayGraph() {
     if (target.scaffold_network != "") {
       setLoaded(false);
       setTimeout(() => {
-        let network_graph = new MultiDirectedGraph();
-        network_graph.import(target.scaffold_network);
-        let image_graph = graph_molecule_image_generator(rdkit, network_graph);
+        // Replace graphology with plain object
+        const network_graph = deserializeGraph(target.scaffold_network);
+        const image_graph = graph_molecule_image_generator(rdkit, network_graph);
         setGraph(image_graph);
-      }, 100)
+      }, 100);
       setLoaded(true);
-      setDefaultTab(1)
+      setDefaultTab(1);
     }
-  }, [])
+  }, []);
 
   if (!loaded) {
     return (

components/tools/toolComp/ScaffNetDets.tsx

@@ -1,22 +1,18 @@
 import React, { useState, useEffect } from "react";
 import TagComponent from "../../ui-comps/Tags";
-import { subgraph } from "graphology-operators";
 import ScaffoldNetworkWholeGraph from "./ScaffoldNetworkWholeGraph";
 import { useDisclosure } from "@mantine/hooks";
 import { Button, Card, Grid, Group, Modal } from "@mantine/core";
+import { ScaffoldGraph } from "../../../types/GraphData";
 
 const GraphComponent: React.FC<any> = ({ graph }) => {
     const [opened, { open, close }] = useDisclosure(false);
 
     // Function to get nodes connected to a specific label in the graph
-    function getNodesConnectedToLabel(graph, label) {
-        const nodes = [];
-        graph.forEachEdge((_, attributes, source, target) => {
-            if (attributes.label === label) {
-                nodes.push(parseInt(source));
-            }
-        });
-        return nodes;
+    function getNodesConnectedToLabel(graph: ScaffoldGraph, label: string) {
+        return graph.edges
+            .filter(e => e.label === label)
+            .map(e => parseInt(e.source));
     }
 
     // Update the display nodes array based on selected tags
@@ -37,10 +33,12 @@ const GraphComponent: React.FC<any> = ({ graph }) => {
 
     // Effect to update nodesArray and displayNodesArray when graph changes
     useEffect(() => {
-        const tempNodesArray: { node: any, smiles: string, size: number, img: string }[] = [];
-        graph.forEachNode((node, attributes) => {
-            tempNodesArray.push({ node, smiles: attributes.smiles, size: attributes.molCounts, img: attributes.image });
-        });
+        const tempNodesArray = graph.nodes.map(node => ({
+            node: node.id,
+            smiles: node.smiles,
+            size: node.molCounts,
+            img: node.image,
+        }));
         tempNodesArray.sort((a, b) => b.size - a.size);
         setNodesArray(tempNodesArray);
         setDisplayNodesArray(tempNodesArray);
@@ -78,8 +76,23 @@ const GraphComponent: React.FC<any> = ({ graph }) => {
     };
 
     const [subGraph, setGraph] = useState<any>();
+    function getSubgraph(graph: ScaffoldGraph, nodeIds: string[]): ScaffoldGraph {
+        const nodeIdSet = new Set(nodeIds);
+        return {
+            nodes: graph.nodes.filter(n => nodeIdSet.has(n.id)),
+            edges: graph.edges.filter(e => nodeIdSet.has(e.source) && nodeIdSet.has(e.target)),
+        };
+    }
+    // In filterNodes function:
     function filterNodes(nodeEnquired: string, attr, depthSet: number) {
-        let filteredGraph = subgraph(graph, [nodeEnquired, ...graph.neighbors(nodeEnquired)]);;
+        // Get neighbors (nodes connected to this node)
+        const connectedNodeIds = new Set([nodeEnquired]);
+        graph.edges.forEach(edge => {
+            if (edge.source === nodeEnquired) connectedNodeIds.add(edge.target);
+            if (edge.target === nodeEnquired) connectedNodeIds.add(edge.source);
+        });
+
+        const filteredGraph = getSubgraph(graph, Array.from(connectedNodeIds));
         setGraph(filteredGraph);
         open();
     }

components/tools/toolComp/ScaffoldNetworkWholeGraph.tsx

@@ -11,13 +11,15 @@ const ScaffoldNetworkWholeGraph = ({ graph, imageSize = 120, width = 928, height
 
     // Create a fake root node
     const fakeRoot = { id: 'fakeRoot', children: [] };
-    const graph_ex = graph.export();
     const { nodes, links } = {
-      nodes: [fakeRoot, ...graph_ex.nodes.map(n => ({ id: n.key, ...n.attributes }))],
-      links: graph_ex.edges.map(e => ({
+      nodes: [
+        { id: 'fakeRoot', children: [] },
+        ...graph.nodes.map(n => ({ id: n.id, ...n }))
+      ],
+      links: graph.edges.map(e => ({
         source: e.source,
         target: e.target,
-        ...e.attributes
+        ...e
       }))
     };
 
@@ -112,8 +114,8 @@ const ScaffoldNetworkWholeGraph = ({ graph, imageSize = 120, width = 928, height
       <ScaffEdgeLegend />
       <svg ref={svgRef} height="600px" width="100%" />
     </>
-  
-);
+
+  );
 };
 
 export default ScaffoldNetworkWholeGraph;

components/tools/toolComp/ScaffoldSettings.tsx

@@ -6,6 +6,7 @@ import {
   graph_molecule_image_generator,
   initRDKit,
   scaffold_net_chunking_method,
+  serializeGraph,
 } from "../../utils/rdkit_loader";
 
 import {
@@ -122,13 +123,10 @@ export default function ScaffoldSettings({ setGraph, setLoaded, activeTabChange
 
       // Collect smiles and call your scaffold function
       const smiles_list = ligand.map((x: any) => x.canonical_smiles);
-
-      // NOTE: your original code had two calls; preserve behavior but await the chunked net
       const network_graph = scaffold_net_chunking_method(smiles_list, 600, rdkit, params);
-      // you previously had another call with 50; if needed uncomment:
-      // scaffold_net_chunking_method(smiles_list, 50, rdkit, params);
 
-      const serialised_graph = await network_graph.export();
+      // Serialize as plain JSON
+      const serialised_graph = serializeGraph(network_graph);
       await setTarget({ ...target, scaffold_network: serialised_graph });
 
       const image_graph = graph_molecule_image_generator(rdkit, network_graph);

components/utils/rdkit_loader.ts

@@ -1,21 +1,14 @@
 import _ from "lodash";
-import { MultiDirectedGraph } from "graphology";
+import { GraphEdge, GraphNode, ScaffoldGraph } from "../../types/GraphData";
 
 function colorOfEdge(edge: string) {
-  if (edge === "Fragment") {
-    return "#99ccff"; // Muted Blue
-  } else if (edge === "Generic") {
-    return "#ff9999"; // Muted Red
-  } else if (edge === "GenericBond") {
-    return "#99ff99"; // Muted Green
-  } else if (edge === "RemoveAttachment") {
-    return "#666666"; // Dark Gray
-  } else {
-    return "#cccc66"; // Muted Yellow
-  }
+  if (edge === "Fragment") return "#99ccff";
+  if (edge === "Generic") return "#ff9999";
+  if (edge === "GenericBond") return "#99ff99";
+  if (edge === "RemoveAttachment") return "#666666";
+  return "#cccc66";
 }
 
-
 export function molListFromSmiArray(smiArray, rdkit) {
   const molList = new rdkit.MolList();
   smiArray.forEach((smiName) => {
@@ -38,8 +31,9 @@ export function scaffold_net_chunking_method(
   params,
 ) {
   var scaffold_net_ins = new rdkit.ScaffoldNetwork();
-  scaffold_net_ins.set_scaffold_params(JSON.stringify(params))
+  scaffold_net_ins.set_scaffold_params(JSON.stringify(params));
   let network;
+
   for (let i = 0; i < array.length; i += chunkSize) {
     let smiles_mol_list;
     try {
@@ -54,69 +48,77 @@ export function scaffold_net_chunking_method(
       smiles_mol_list?.delete();
     }
   }
-  
   scaffold_net_ins?.delete();
-  var graph = new MultiDirectedGraph();
-  
+
+  // Return plain object instead of graphology Graph
+  const nodes: GraphNode[] = [];
   for (let i = 0; i < network.nodes.size(); i++) {
     try {
       var smiles_string = network.nodes.get(i);
-      graph.addNode(i.toString(), {
-        molCounts: network.molCounts.get(i),
+      nodes.push({
+        id: i.toString(),
         smiles: smiles_string,
+        molCounts: network.molCounts.get(i),
         nodeType: array.includes(smiles_string) ? "whole" : "fragment",
       });
     } catch (e) {
-      console.error("Error in adding node to graph: ", e);
+      console.error("Error in adding node: ", e);
     }
   }
+
+  const edges: GraphEdge[] = [];
   for (let i = 0; i < network.edges.size(); i++) {
     try {
       let network_edge = network.edges.get(i);
-      graph.addEdgeWithKey(
-        i.toString(),
-        network_edge.beginIdx,
-        network_edge.endIdx,
-        {
-          label: network_edge.type,
-          color: colorOfEdge(network_edge.type),
-        },
-      );
+      edges.push({
+        id: i.toString(),
+        source: network_edge.beginIdx.toString(),
+        target: network_edge.endIdx.toString(),
+        label: network_edge.type,
+        color: colorOfEdge(network_edge.type),
+      });
     } catch (e) {
-      console.error("Error in adding edge to graph: ", e);
+      console.error("Error in adding edge: ", e);
     }
   }
-  
-  return graph;
+
+  return { nodes, edges };
 }
 
-export function graph_molecule_image_generator(rdkit, graph, svgSize = 120){
-  let new_graph = graph;
-  try{
-    new_graph.forEachNode((node, attr) => {
-      var mol = rdkit.get_mol(attr.smiles);
+export function graph_molecule_image_generator(rdkit, graphData, svgSize = 120) {
+  try {
+    graphData.nodes.forEach((node) => {
+      var mol = rdkit.get_mol(node.smiles);
       var svg_string = mol.get_svg(svgSize, svgSize);
       var blob_link = new Blob([svg_string], { type: "image/svg+xml" });
-      new_graph.setNodeAttribute(node, 'image', URL.createObjectURL(blob_link))
+      node.image = URL.createObjectURL(blob_link);
       mol?.delete();
-    })
-  }catch(e){
-    console.error(e)
+    });
+  } catch (e) {
+    console.error(e);
   }
-  return new_graph;
+  return graphData;
+}
+
+// Serialize plain object to JSON (works in workers)
+export function serializeGraph(graph: ScaffoldGraph) {
+  return JSON.stringify(graph);
+}
+
+// Deserialize from JSON
+export function deserializeGraph(json: string): ScaffoldGraph {
+  return JSON.parse(json);
 }
 
 export const initRDKit = (() => {
   let rdkitLoadingPromise: Promise<any>;
-
   return (): Promise<any> => {
     if (!rdkitLoadingPromise) {
       rdkitLoadingPromise = new Promise((resolve, reject) => {
         const script = document.createElement("script");
         script.src = "/rdkit/RDKit_minimal.js";
         script.async = true;
         document.body.appendChild(script);
-
         script.addEventListener("load", () => {
           globalThis
             .initRDKitModule()
@@ -129,7 +131,6 @@ export const initRDKit = (() => {
         });
       });
     }
-
     return rdkitLoadingPromise;
   };
 })();