#1239: Establish how the React app will invoke the existing API

server/app.js

@@ -25,6 +25,27 @@ app.use(cors());
 app.set("env", env);
 app.set("corsOrigin", config.corsOrigin);
 
+const allowedOrigins = Array.isArray(app.get("corsOrigin"))
+    ? app.get("corsOrigin")
+    : [app.get("corsOrigin")];
+
+app.use(
+    cors({
+        origin: function (origin, callback) {
+            // Don't allow requests with no origin (e.g., Postman, curl)
+            if (!origin) return callback(new Error("Request not allowed by CORS"));
+
+            if (allowedOrigins.includes(origin)) {
+                // Only allow requests from allowed origins
+                return callback(null, true);
+            } else {
+                console.warn(`CORS blocked for origin: ${origin}`);
+                return callback(new Error("Not allowed by CORS"));
+            }
+        },
+    })
+);
+
 console.log("CORS host: %s", app.get("corsOrigin"));
 
 // Load controllers.

server/config/config.js

@@ -6,7 +6,7 @@ module.exports = {
         host: "localhost",
         port: 5000,
         url: "http://" + this.host + "/" + this.port,
-        corsOrigin: "http://localhost:5001",
+        corsOrigin: ["http://localhost:5173", "http://localhost:5001"],
         root: rootPath,
         app: {
             name: "GRNsight",

server/controllers/helpers.js

@@ -23,7 +23,14 @@ var initWorkbook = function (net) {
 
 module.exports = {
     attachCorsHeader: function (res, app) {
-        res.header("Access-Control-Allow-Origin", app.get("corsOrigin"));
+        const allowedOrigins = Array.isArray(app.get("corsOrigin"))
+            ? app.get("corsOrigin")
+            : [app.get("corsOrigin")];
+
+        const origin = app.get("corsOrigin");
+        if (origin && allowedOrigins.includes(origin)) {
+            res.header("Access-Control-Allow-Origin", origin);
+        }
     },
 
     attachFileHeaders: function (res, path) {

web-client/src/App.jsx

@@ -1,11 +1,14 @@
 import Navbar from "./components/Navbar";
 import Graph from "./components/Graph";
 import Sidebar from "./components/Sidebar";
-import { useState } from "react";
-// import { GrnStateContextProvider } from './GrnstateContextProvider';
+import { useState, createContext } from "react";
 import { Grommet } from "grommet";
+import { theme } from "./theme";
 import "./App.css";
 
+// Create a context for the GRN state
+export const GrnStateContext = createContext();
+
 function App() {
     const [networkMode, setNetworkMode] = useState(
         "Protein-Protein Interaction"
@@ -29,203 +32,48 @@ function App() {
     const [showGrayEdgesDashed, setShowGrayEdgesDashed] = useState(false);
     const [restrictGraphToViewport, setRestrictGraphToViewport] =
         useState(false);
-    const [demoValue, setDemoValue] = useState("Demo #1: Unweighted GRN");
+    const [demoValue, setDemoValue] = useState(null);
     // TODO: make viewSize dynamic to user's screen size
     const [viewSize, setViewSize] = useState("Small (1104 X 648 pixels)");
 
-    const theme = {
-        global: {
-            colors: {
-                text: "#333",
-                control: {
-                    transparent: "transparent",
-                },
-            },
-            font: {
-                family: "Helvetica Neue, Helvetica, Arial, sans-serif",
-                height: 1.42857143,
-            },
-            focus: {
-                border: {
-                    color: "transparent",
-                },
-            },
-            input: {
-                font: {
-                    size: "14px",
-                },
-            },
-        },
-        radioButton: {
-            border: {
-                color: "#333",
-                width: "1px",
-            },
-            check: {
-                color: "blue",
-                border: {
-                    color: "blue",
-                },
-            },
-            hover: {
-                border: {
-                    color: "#333",
-                },
-            },
-            size: "13px",
-        },
-        rangeInput: {
-            thumb: {
-                color: "blue",
-            },
-        },
-        checkBox: {
-            border: {
-                color: "#333",
-                width: "1px",
-            },
-            check: {
-                color: "#333",
-                border: {
-                    color: "#333",
-                },
-            },
-            hover: {
-                border: {
-                    color: "#333",
-                },
-            },
-            stroke: {
-                color: "#333",
-            },
-            size: "13px",
-        },
-        text: {
-            font: {
-                family: "Helvetica Neue",
-                height: 1.42857143,
-            },
-            small: {
-                height: 1.42857143,
-            },
-            medium: {
-                size: "14px",
-                height: "20px",
-            },
-        },
-        button: {
-            active: {
-                default: {
-                    border: {
-                        width: "0px",
-                    },
-                },
-            },
-            border: {
-                width: "0px",
-            },
-        },
-        fileInput: {
-            message: {
-                size: "xsmall",
-            },
-            border: {
-                style: "solid",
-                color: "light-4",
-                radius: "2px",
-            },
-            hover: {
-                background: {
-                    color: "light-1",
-                },
-                border: {
-                    style: "solid",
-                    color: "light-4",
-                },
-            },
-        },
+    // Add state for network data
+    const [networkData, setNetworkData] = useState(null);
+
+    // All state and setters bundled into a single value for context
+    const grnStateValue = {
+        networkMode, setNetworkMode,
+        enableNodeColoring, setEnableNodeColoring,
+        enableEdgeColoring, setEnableEdgeColoring,
+        linkDistance, setLinkDistance,
+        charge, setCharge,
+        lockForceParameters, setLockForceParameters,
+        averageReplicateValuesTop, setAverageReplicateValuesTop,
+        averageReplicateValuesBottom, setAverageReplicateValuesBottom,
+        logFoldChangeMax, setLogFoldChangeMax,
+        edgeWeightVisibility, setEdgeWeightVisibility,
+        edgeWeightNormalization, setEdgeWeightNormalization,
+        grayThreshold, setGrayThreshold,
+        showGrayEdgesDashed, setShowGrayEdgesDashed,
+        restrictGraphToViewport, setRestrictGraphToViewport,
+        viewSize, setViewSize,
+        demoValue, setDemoValue,
+        networkData, setNetworkData
     };
 
     return (
-        <Grommet
-            theme={theme}
-            background={{ color: "white", dark: false }}
-            full
-        >
-            {/* <GrnStateContextProvider> */}
-            <Navbar
-                networkMode={networkMode}
-                enableNodeColoring={enableNodeColoring}
-                setEnableNodeColoring={setEnableNodeColoring}
-                enableEdgeColoring={enableEdgeColoring}
-                setEnableEdgeColoring={setEnableEdgeColoring}
-                linkDistance={linkDistance}
-                setLinkDistance={setLinkDistance}
-                charge={charge}
-                setCharge={setCharge}
-                lockForceParameters={lockForceParameters}
-                setLockForceParameters={setLockForceParameters}
-                averageReplicateValuesTop={averageReplicateValuesTop}
-                setAverageReplicateValuesTop={setAverageReplicateValuesTop}
-                averageReplicateValuesBottom={averageReplicateValuesBottom}
-                setAverageReplicateValuesBottom={
-                    setAverageReplicateValuesBottom
-                }
-                logFoldChangeMax={logFoldChangeMax}
-                setLogFoldChangeMax={setLogFoldChangeMax}
-                edgeWeightVisibility={edgeWeightVisibility}
-                setEdgeWeightVisibility={setEdgeWeightVisibility}
-                edgeWeightNormalization={edgeWeightNormalization}
-                setEdgeWeightNormalization={setEdgeWeightNormalization}
-                grayThreshold={grayThreshold}
-                setGrayThreshold={setGrayThreshold}
-                showGrayEdgesDashed={showGrayEdgesDashed}
-                setShowGrayEdgesDashed={setShowGrayEdgesDashed}
-                restrictGraphToViewport={restrictGraphToViewport}
-                setRestrictGraphToViewport={setRestrictGraphToViewport}
-                viewSize={viewSize}
-                setViewSize={setViewSize}
-                demoValue={demoValue}
-                setDemoValue={setDemoValue}
-            />
-            <Sidebar
-                networkMode={networkMode}
-                enableNodeColoring={enableNodeColoring}
-                setEnableNodeColoring={setEnableNodeColoring}
-                enableEdgeColoring={enableEdgeColoring}
-                setEnableEdgeColoring={setEnableEdgeColoring}
-                linkDistance={linkDistance}
-                setLinkDistance={setLinkDistance}
-                charge={charge}
-                setCharge={setCharge}
-                lockForceParameters={lockForceParameters}
-                setLockForceParameters={setLockForceParameters}
-                averageReplicateValuesTop={averageReplicateValuesTop}
-                setAverageReplicateValuesTop={setAverageReplicateValuesTop}
-                averageReplicateValuesBottom={averageReplicateValuesBottom}
-                setAverageReplicateValuesBottom={
-                    setAverageReplicateValuesBottom
-                }
-                logFoldChangeMax={logFoldChangeMax}
-                setLogFoldChangeMax={setLogFoldChangeMax}
-                edgeWeightVisibility={edgeWeightVisibility}
-                setEdgeWeightVisibility={setEdgeWeightVisibility}
-                edgeWeightNormalization={edgeWeightNormalization}
-                setEdgeWeightNormalization={setEdgeWeightNormalization}
-                grayThreshold={grayThreshold}
-                setGrayThreshold={setGrayThreshold}
-                showGrayEdgesDashed={showGrayEdgesDashed}
-                setShowGrayEdgesDashed={setShowGrayEdgesDashed}
-                restrictGraphToViewport={restrictGraphToViewport}
-                setRestrictGraphToViewport={setRestrictGraphToViewport}
-                viewSize={viewSize}
-                setViewSize={setViewSize}
-                demoValue={demoValue}
-                setDemoValue={setDemoValue}
-            />
-            <Graph />
-            {/* </GrnStateContextProvider> */}
-        </Grommet>
+        <GrnStateContext.Provider value={grnStateValue}>
+            <Grommet
+                theme={theme}
+                background={{ color: "white", dark: false }}
+                full
+            >
+                <Navbar />
+                <div className="main-content">
+                    <Sidebar />
+                    <Graph />
+                </div>
+            </Grommet>
+        </GrnStateContext.Provider>
     );
 }