Now need to work on scaffold net settings

app/tools/scaff_net/page.tsx

@@ -40,8 +40,14 @@ export default function DisplayGraph() {
 
   return (
     <div className="tools-container">
+      <h1>Scaffold Network</h1>
       <TabWrapper>
-        <Tabs title="Scaffold Details">
+        <Tabs title="Network Settings">
+          <div>
+            <p>Settings go here</p>
+          </div>
+        </Tabs>
+        <Tabs title="Network Details">
           <ScaffNetDets graph={graph} />
         </Tabs>
         <Tabs title="Whole Network">

components/tools/toolComp/ScaffNetDets.tsx

@@ -1,21 +1,52 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import MoleculeStructure from "./MoleculeStructure";
 import Card from "../toolViz/Card";
+import TagComponent from "../../ui-comps/Tags";
 
 const GraphComponent: React.FC<any> = ({ graph }) => {
-    const nodesPerPage = 12; // Adjust as needed
-    const [currentPage, setCurrentPage] = useState(1);
+    // 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;
+    }
 
-    const nodesArray: { node: any, smiles: string, size: number }[] = [];
+    // Update the display nodes array based on selected tags
+    function updateFilterFragments(tags: string) {
+        if (tags !== 'All') {
+            const nodesConnectedToConnectionLabel = getNodesConnectedToLabel(graph, tags);
+            const newDisplayArray = nodesConnectedToConnectionLabel.map(index => nodesArray[index]);
+            setDisplayNodesArray(newDisplayArray);
+        } else {
+            setDisplayNodesArray(nodesArray);
+        }
+    }
 
-    graph.forEachNode((node, attributes) => {
-        nodesArray.push({ node, smiles: attributes.smiles, size: attributes.molCounts });
-    });
+    // State declarations
+    const [currentPage, setCurrentPage] = useState(1);
+    const [nodesArray, setNodesArray] = useState<{ node: any, smiles: string, size: number }[]>([]);
+    const [displayNodesArray, setDisplayNodesArray] = useState<{ node: any, smiles: string, size: number }[]>([]);
 
-    nodesArray.sort((a, b) => b.size - a.size);
+    // Effect to update nodesArray and displayNodesArray when graph changes
+    useEffect(() => {
+        const tempNodesArray: { node: any, smiles: string, size: number }[] = [];
+        graph.forEachNode((node, attributes) => {
+            tempNodesArray.push({ node, smiles: attributes.smiles, size: attributes.molCounts });
+        });
+        tempNodesArray.sort((a, b) => b.size - a.size);
+        setNodesArray(tempNodesArray);
+        setDisplayNodesArray(tempNodesArray);
+    }, [graph]);
 
-    const totalPages = Math.ceil(nodesArray.length / nodesPerPage);
+    // Constants for pagination
+    const nodesPerPage = 12; // Adjust as needed
+    const totalPages = Math.ceil(displayNodesArray.length / nodesPerPage);
 
+    // Function to get displayed page numbers
     const getDisplayedPages = () => {
         const range = 2; // Adjust as needed
         const displayedPages: number[] = [];
@@ -37,39 +68,44 @@ const GraphComponent: React.FC<any> = ({ graph }) => {
         return displayedPages;
     };
 
+    // Function to handle page change
     const handlePageChange = (pageNumber: number) => {
         setCurrentPage(pageNumber);
     };
 
     return (
         <div>
+            {/* Component for filtering tags */}
+            <TagComponent tags={['All', 'Fragment', 'Generic', 'GenericBond', 'RemoveAttachment', 'Initialize']} onClick={(tags) => { updateFilterFragments(tags) }}></TagComponent>
+
+            {/* Container for displaying cards */}
             <div className="container-for-cards">
-                {nodesArray
+                {displayNodesArray
                     .slice((currentPage - 1) * nodesPerPage, currentPage * nodesPerPage)
                     .map(({ node, smiles, size }) => (
                         <Card key={node}>
                             <p>Node ID: {node}</p>
                             <MoleculeStructure structure={smiles} id={node} />
                             <p>Scaffold Matches: {size}</p>
                         </Card>
-
                     ))}
             </div>
+
+            {/* Pagination buttons */}
             <div>
                 <button className={`tableButton ${currentPage === 1 ? "activeButton" : "inactiveButton"}`} disabled={currentPage === 1} onClick={() => handlePageChange(1)}>
                     First Page
-                </button>........
+                </button>
                 {getDisplayedPages().map((pageNumber) => (
                     <button
                         className={`tableButton ${currentPage === pageNumber ? "activeButton" : "inactiveButton"}`}
                         key={pageNumber}
                         onClick={() => handlePageChange(pageNumber)}
                         disabled={pageNumber === currentPage}
-
                     >
                         {pageNumber}
                     </button>
-                ))}.......
+                ))}
                 <button
                     className={`tableButton ${currentPage === totalPages ? "activeButton" : "inactiveButton"}`}
                     disabled={currentPage === totalPages}

components/tools/toolComp/ScaffoldNetworkWholeGraph.tsx

@@ -65,13 +65,13 @@ const ScaffoldNetworkWholeGraph = ({ graph, imageSize = 120 }) => {
     simulation.on("tick", () => {
       link
         .attr("x1", d => d.source.x)
-        .attr("y1", d => height - d.source.y) // Reverse the y-coordinate for source
+        .attr("y1", d => d.source.y) // Reverse the y-coordinate for source
         .attr("x2", d => d.target.x)
-        .attr("y2", d => height - d.target.y); // Reverse the y-coordinate for target
+        .attr("y2", d => d.target.y); // Reverse the y-coordinate for target
 
       node
         .attr("x", d => d.x)
-        .attr("y", d => height - d.y); // Reverse the y-coordinate for nodes
+        .attr("y", d => d.y); // Reverse the y-coordinate for nodes
     });
 
     // Reheat the simulation when drag starts, and fix the subject position.

components/ui-comps/TabbedComponents.tsx

@@ -2,8 +2,8 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-const TabWrapper = ({ children }) => {
-    const [activeTab, setActiveTab] = useState(1);
+const TabWrapper = ({ children, defaultTab = 0 }) => {
+    const [activeTab, setActiveTab] = useState(defaultTab);
 
     const handleTabChange = (index) => {
         setActiveTab(index);

components/ui-comps/Tags.tsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+
+const TagComponent = ({ tags, onClick }) => {
+  const [selectedTag, setSelectedTag] = useState(null);
+
+  const toggleTag = (tag) => {
+    setSelectedTag(tag === selectedTag ? null : tag);
+    onClick(tag === selectedTag ? null : tag);
+  };
+
+  return (
+    <div className="tag-container">
+      {tags.map((tag, index) => (
+        <span
+          key={index}
+          className={`tag ${tag === selectedTag ? 'selected' : ''}`}
+          onClick={() => toggleTag(tag)}
+        >
+          {tag}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+export default TagComponent;

styles/index.css

@@ -5,6 +5,7 @@
 @import "./landing.css";
 @import "./corner-menu.css";
 @import "./tabs.css";
+@import "./tags.css";
 
 html,
 body,

styles/tags.css

@@ -0,0 +1,26 @@
+/* TagComponent.css */
+
+.tag-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.tag {
+  cursor: pointer;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  padding: 5px 10px;
+  margin: 5px;
+  border-radius: 5px;
+  border: 1px solid var(--border-color);
+}
+
+.tag:hover {
+  background-color: var(--hover-accent-color);
+  color: var(--text-color);
+}
+
+.selected {
+  background-color: var(--accent-color);
+  color: var(--text-opp-color);
+}