Merge pull request #101 from Reed-CompBio/stats

Implement basic stats panel and fixed pathfinding gds calls

Author: ctrlaltaf

client/src/components/Footer.jsx

@@ -3,10 +3,13 @@ import { FaGithub } from "react-icons/fa";
 import { BiSolidMessageAltError } from "react-icons/bi";
 import { IconContext } from "react-icons";
 import { Link } from "react-router-dom";
+import { MdOutlineMenuBook } from "react-icons/md";
+
 
 export default function Footer() {
   const githubLink = "https://github.com/Reed-CompBio/protein-weaver/";
   const githubIssuesLink = "https://github.com/Reed-CompBio/protein-weaver/issues/";
+  const githuPagesDoc = "https://reed-compbio.github.io/protein-weaver/"
 
   return (
     <div className="footer-container">
@@ -33,6 +36,11 @@ export default function Footer() {
           <a href={githubIssuesLink} target="_blank" rel="noopener noreferrer">
             <BiSolidMessageAltError className="footer-icon" />
           </a>
+          <p> | </p>
+          {/* GitHub Issues */}
+          <a href={githuPagesDoc} target="_blank" rel="noopener noreferrer">
+            <MdOutlineMenuBook className="footer-icon" />
+          </a>
         </IconContext.Provider>
       </footer>
     </div>

client/src/components/Query.jsx

@@ -12,11 +12,6 @@ import CytoscapeComponent from "react-cytoscapejs";
 import cytoscape from "cytoscape";
 import { cytoscapeStyle, layout } from "../assets/CytoscapeConfig";
 import cola from "cytoscape-cola";
-// import {
-//   cytoscapeTestElements,
-//   cytoscapeTest,
-//   cytoscapeTest2,
-// } from "../assets/CytoscapeTestElements";
 
 // component imports
 import QueryError from "./QueryError";
@@ -30,6 +25,7 @@ import StatisticsTab from "./StatisticsTab";
 
 // panel imports
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { fetchAvgDegree, getBasicStatistics } from "../tools/Statistics";
 
 export default function Query() {
   const [query, setQuery] = useState({
@@ -67,6 +63,13 @@ export default function Query() {
   const [activeModeButton, setActiveModeButton] = useState("");
   const [dataParsingStatus, setDataParsingStatus] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
+  const [rawData, setRawData] = useState("");
+  const [networkStatistics, setNetworkStatistics] = useState({
+    nodeCount: null,
+    edgeCount: null,
+    pathCount: null,
+    avgNodeDegree: null,
+  });
 
   const [pageState, setPageState] = useState(0);
   cytoscape.use(cola);
@@ -176,6 +179,31 @@ export default function Query() {
     }
   }, [networkResult]);
 
+  //Once the network parsing has completed, get all the stats information of the subnetwork.
+  useEffect(() => {
+    if (dataParsingStatus) {
+      //asyc function to get the average degree of subnetwork
+      const getAvgDegree = async () => {
+        try {
+          const avgNodeDegree = await fetchAvgDegree(
+            networkResult,
+            query.species
+          );
+          setNetworkStatistics((prevState) => ({
+            ...prevState,
+            avgNodeDegree: avgNodeDegree.toFixed(1),
+          }));
+        } catch (error) {
+          return Promise.reject(
+            new Error(`${response.status} ${response.statusText}`)
+          );
+        }
+      };
+      setNetworkStatistics(getBasicStatistics(networkResult, rawData, query));
+      getAvgDegree();
+    }
+  }, [dataParsingStatus]);
+
   // Function for submitting the query
   async function handleSubmit(e) {
     setSidebarNode(null);
@@ -197,6 +225,7 @@ export default function Query() {
     // get the k shortest paths for the query
     e.preventDefault();
     let network = null;
+    let rawData = null;
     if (query.mode == "path") {
       try {
         network = await fetch("/api/getQuery", {
@@ -220,6 +249,7 @@ export default function Query() {
             }
           })
           .then((data) => {
+            rawData = data;
             return NetworkParserPath(data, query.protein, query.goTerm);
           });
       } catch (error) {
@@ -253,6 +283,7 @@ export default function Query() {
             }
           })
           .then((data) => {
+            rawData = data;
             return NetworkParserNode(data, query.protein, query.k);
           });
       } catch (error) {
@@ -261,11 +292,9 @@ export default function Query() {
         setHasError(true);
         setPageState(0);
         setIsLoading(false);
-
         return;
       }
     }
-
     // get induced subgraph
     if (network != null) {
       let nodeList = { nodeList: network.nodeList };
@@ -293,6 +322,7 @@ export default function Query() {
           })
           .then((edgeData) => {
             setNetworkResult(EdgeDataParser(network, edgeData));
+            setRawData(rawData);
             setDataParsingStatus(true);
             return EdgeDataParser(network, edgeData);
           });
@@ -715,7 +745,9 @@ export default function Query() {
                   </Panel>
                   <PanelResizeHandle className="panel-resize-handle" />
                   <Panel defaultSize={40} minSize={10}>
-                    <StatisticsTab></StatisticsTab>
+                    <StatisticsTab
+                      networkStatistics={networkStatistics}
+                    ></StatisticsTab>
                   </Panel>
                 </PanelGroup>
               </Panel>

client/src/components/StatisticsTab.jsx

@@ -3,34 +3,27 @@ import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import { MdConstruction } from "react-icons/md";
 import { Tooltip as ReactTooltip } from "react-tooltip";
 
-export default function StatisticsTab() {
+export default function StatisticsTab({ networkStatistics }) {
   const [tabIndex, setTabIndex] = useState(0);
 
   return (
     <div className="statistics-panel-container">
-      {/* <h4 className="stats-title">Statistics</h4> */}
       <Tabs
         selectedIndex={tabIndex}
         onSelect={(index) => setTabIndex(index)}
         className="stats-tabs"
         selectedTabClassName="stats-tab-selected"
       >
         <TabList className="stats-tab-list">
-          <Tab className="stats-tab">
-            Graph
-            <MdConstruction
-              data-tooltip-id="construction-tooltip"
-              className="construction"
-            />
-          </Tab>
-          <Tab className="stats-tab">
+          <Tab className="stats-tab">Graph</Tab>
+          <Tab className="stats-tab-construction" disabled={true}>
             Nodes
             <MdConstruction
               data-tooltip-id="construction-tooltip"
               className="construction"
             />
           </Tab>{" "}
-          <Tab className="stats-tab">
+          <Tab className="stats-tab-construction" disabled={true}>
             Edges
             <MdConstruction
               data-tooltip-id="construction-tooltip"
@@ -39,13 +32,31 @@ export default function StatisticsTab() {
           </Tab>
         </TabList>
         <TabPanel>
-          <h2>Statistics about graph</h2>
+          <h4 className="stats-title">Graph stats</h4>
+          <div className="graph-statistics-container">
+            <div>
+              <ul className="right-aligned-list">
+                <li># of nodes:</li>
+                <li># of edges:</li>
+                <li># of paths from source:</li>
+                <li>Average node degree:</li>
+              </ul>
+            </div>
+            <div>
+              <ul className="statistics-list">
+                <li>{networkStatistics.nodeCount}</li>
+                <li>{networkStatistics.edgeCount}</li>
+                <li>{networkStatistics.pathCount}</li>
+                <li>{networkStatistics.avgNodeDegree}</li>
+              </ul>
+            </div>
+          </div>
         </TabPanel>
         <TabPanel>
-          <h2>Statistics about nodes</h2>
+          <h4 className="stats-title" >Node stats</h4>
         </TabPanel>
         <TabPanel>
-          <h2>Statistics about edges</h2>
+          <h4 className="stats-title" >Edges stats</h4>
         </TabPanel>
       </Tabs>
       <ReactTooltip

client/src/index.css

@@ -675,7 +675,6 @@ p {
   height: 50px;
 }
 
-
 .bug-report {
   margin-left: 10px;
   align-self: center;
@@ -723,7 +722,7 @@ select {
 .footer-container {
   position: relative;
   bottom: 0;
-  width: 100%
+  width: 100%;
 }
 
 .footer {
@@ -1420,6 +1419,7 @@ select {
   margin: 0;
   /* Remove margins */
   display: flex;
+  cursor: pointer;
 }
 
 .stats-tab {
@@ -1430,26 +1430,27 @@ select {
   background-color: #828588;
 }
 
-.stats-tab:hover {
+.stats-tab-construction {
+  width: 100%;
+  padding: 5px;
+  text-align: center;
+  background-color: #828588;
+}
+
+.stats-tab:hover,
+.stats-tab-construction:hover {
   cursor: pointer;
+  pointer-events: none;
 }
 
 .stats-tab-selected {
-  /* border-bottom: 0px solid #828588;
-  border-right: 1px solid #828588;
-  border-top: 1px solid #828588;
-  border-left: 1px solid #828588; */
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   text-decoration: underline;
   background-color: white;
 }
 
 .stats-tab-selected {
-  /* border-bottom: 0px solid #828588;
-  border-right: 1px solid #828588;
-  border-top: 1px solid #828588;
-  border-left: 1px solid #828588; */
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   text-decoration: underline;
@@ -1462,7 +1463,22 @@ select {
 }
 
 .stats-title {
-  margin-left: 16px;
-  margin-top: 16px;
-  margin-bottom: 10px;
+  text-align: left;
+}
+
+.graph-statistics-container {
+  display: flex;
+  margin: auto;
+  width: 90%;
+  justify-content: center;
+}
+
+.statistics-list {
+  list-style: none;
+  padding-left: 15px;
+}
+
+.right-aligned-list {
+  list-style: none;
+  text-align: right;
 }

client/src/tools/Statistics.jsx

@@ -0,0 +1,48 @@
+export function getBasicStatistics(network, rawData, query) {
+  let networkStatistics = {
+    nodeCount: null,
+    edgeCount: null,
+    pathCount: null,
+    avgNodeDegree: null,
+  };
+  networkStatistics.nodeCount = network.nodeList.length - 1;
+  networkStatistics.edgeCount = network.edgeList.length;
+
+  networkStatistics.pathCount = getPathCount(rawData, query.k, query.mode);
+  return networkStatistics;
+}
+
+export function getPathCount(data, k, mode) {
+  if (mode == "path") {
+    return data.length;
+  } else return Math.min(k, data.length - 1);
+}
+
+export async function fetchAvgDegree(network, species) {
+  let nodeList = network.nodeList.slice(0, network.nodeList.length - 1);
+  const requestBody = Object.assign(
+    { nodeList: nodeList },
+    {
+      species: species,
+    }
+  );
+  try {
+    const response = await fetch("/api/getAvgDegree", {
+      method: "POST", // Specify the HTTP method
+      headers: {
+        "Content-Type": "application/json", // Set the Content-Type header for JSON data
+      },
+      body: JSON.stringify(requestBody), // Convert the request body to JSON string
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch data");
+    }
+    let data = await response.json();
+    data = data[0]._fields[0];
+    return data;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    throw error;
+  }
+}

scripts/CallGraphProjection.cypher

@@ -1 +1,2 @@
-CALL gds.graph.project('proGoGraph',['go_term', 'protein'],['ProGo', 'ProPro']);
+CALL gds.graph.project('proGoGraph',['go_term', 'protein'],['ProGo', 'ProPro']);
+CALL gds.graph.relationships.toUndirected( 'proGoGraph', {relationshipType: 'ProPro', mutateRelationshipType: 'ProProUndirected'} ) YIELD inputRelationships, relationshipsWritten;