Changes to support the new react version

package.json

@@ -14,11 +14,17 @@
     "url": "git+https://github.com/VCG/vimo-sketches.git"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@mui/base": "^5.0.0-beta.58",
+    "@mui/x-date-pickers": "^7.18.0",
+    "@react-awesome-query-builder/mui": "^6.6.3",
     "axios": "^0.26.0",
     "paper": "^0.12.15",
-    "react": "^17.0.2",
-    "react-awesome-query-builder": "^5.1.2",
-    "react-dom": "^17.0.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -30,12 +30,15 @@ function App() {
     getRelativeMotifCount: ne.getRelativeMotifCount,
     isQuerying: isQuerying,
   });
-  useEffect(async () => {
-    setAttributes({
-      ...attributes,
-      NodeFields: await ne.getNodeFields(),
-      EdgeFields: await ne.getEdgeFields(),
-    });
+  useEffect( () => {
+    async function getNodeAttribute() {
+      setAttributes({
+        ...attributes,
+        NodeFields: await ne.getNodeFields(),
+        EdgeFields: await ne.getEdgeFields(),
+      });
+    }
+    getNodeAttribute();
   }, []);
 
   return (

src/index.js

@@ -1,14 +1,14 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/lib/Sketch/components/QueryBuilder.js

@@ -1,11 +1,12 @@
 import React, { useContext, useEffect, useState } from "react";
 import { AppContext } from "../contexts/GlobalContext";
-import { Builder, Query, Utils as QbUtils } from "react-awesome-query-builder";
-import MuiConfig from "react-awesome-query-builder/lib/config/mui";
-import "react-awesome-query-builder/lib/css/styles.css";
-import "react-awesome-query-builder/lib/css/compact_styles.css";
+import { Query, Builder, Utils as QbUtils } from '@react-awesome-query-builder/mui';
+import {MuiConfig} from '@react-awesome-query-builder/mui';
+import '@react-awesome-query-builder/mui/css/styles.css';
+// import "react-awesome-query-builder/lib/css/compact_styles.css";
 import "./QueryBuilder.css";
 
+
 let InitialConfig = MuiConfig;
 delete InitialConfig["conjunctions"]["OR"];
 InitialConfig["settings"]["showNot"] = false;

src/lib/Sketch/components/SketchPanel.js

@@ -23,8 +23,8 @@ import {
   faFileImport,
   faHand,
 } from "@fortawesome/free-solid-svg-icons";
-import { Utils as QbUtils } from "react-awesome-query-builder";
-import MuiConfig from "react-awesome-query-builder/lib/config/mui";
+import {Utils as QbUtils } from '@react-awesome-query-builder/mui';
+import { MuiConfig } from '@react-awesome-query-builder/mui';
 
 let InitialConfig = MuiConfig;
 delete InitialConfig["conjunctions"]["OR"];
@@ -1051,30 +1051,30 @@ function SketchPanel(props) {
     };
   };
   // Encode the Nodes and Edges For Query
-  useEffect(async () => {
+  useEffect( () => {
     let encodedMotif = getEncodedMotif(nodes, edges);
     context.setMotifQuery(encodedMotif);
 
     // most motif queries fail for n larger than 4, develop heuristics to make more accurate
-    nodes.length > 4
-      ? context.setShowWarning(true)
-      : context.setShowWarning(false);
-    if (
-      typeof attributes != "undefined" &&
-      attributes.getMotifCount &&
-      attributes.getRelativeMotifCount
-    ) {
-      const count = await attributes.getMotifCount(
-        JSON.stringify(encodedMotif)
-      );
-      context.setAbsMotifCount(count);
+    // nodes.length > 4
+    //   ? context.setShowWarning(true)
+    //   : context.setShowWarning(false);
+    // if (
+    //   typeof attributes != "undefined" &&
+    //   attributes.getMotifCount &&
+    //   attributes.getRelativeMotifCount
+    // ) {
+    //   const count = await attributes.getMotifCount(
+    //     JSON.stringify(encodedMotif)
+    //   );
+    //   context.setAbsMotifCount(count);
 
-      // get relative count of motif in network
-      const relative_count = await attributes.getRelativeMotifCount(
-        JSON.stringify(encodedMotif)
-      );
-      context.setRelativeMotifCount(relative_count);
-    }
+    //   // get relative count of motif in network
+    //   const relative_count = await attributes.getRelativeMotifCount(
+    //     JSON.stringify(encodedMotif)
+    //   );
+    //   context.setRelativeMotifCount(relative_count);
+    // }
   }, [nodes, edges]);
 
   const isObject = (obj) => {

src/lib/Sketch/contexts/GlobalContext.js

@@ -21,7 +21,7 @@ export const ContextWrapper = (props) => {
   // motif occurences stats
   const [absMotifCount, setAbsMotifCount] = useState(null); // count of a motif in the dataset, e.g motif1 occurs 100 times in the dataset
   const [relativeMotifCount, setRelativeMotifCount] = useState(null); // count of all motifs in the dataset. e.g, motif1 is Highly represented in the dataset
-  const [showWarning, setShowWarning] = useState(false);
+  // const [showWarning, setShowWarning] = useState(false);
 
   return (
     <AppContext.Provider
@@ -36,8 +36,8 @@ export const ContextWrapper = (props) => {
         setAbsMotifCount,
         relativeMotifCount,
         setRelativeMotifCount,
-        showWarning,
-        setShowWarning,
+        // showWarning,
+        // setShowWarning,
         errorMessage,
         setErrorMessage,
       }}