Merge pull request #626 from sahirgomez1/sahir/ui/code_cleanup

[www] Sahir/UI/code_cleanup

.github/workflows/ci.yaml

@@ -610,7 +610,7 @@ jobs:
             fail-fast: false
             matrix:
                 os: [ubuntu-latest, macos-latest]
-                node: [16]
+                node: [17]
         steps:
             - uses: actions/checkout@v2
 

www/frontends/compiler_gym/package.json

@@ -14,7 +14,7 @@
     "highcharts-react-official": "^3.0.0",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
-    "react-bootstrap": "^2.0.0-beta.4",
+    "react-bootstrap": "^2.0.4",
     "react-d3-tree": "^3.1.1",
     "react-dom": "^17.0.2",
     "react-highlight": "^0.14.0",
@@ -23,7 +23,7 @@
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts --openssl-legacy-provider build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

www/frontends/compiler_gym/public/index.html

@@ -14,7 +14,9 @@
       name="description"
       content="CompilerGym Explorer - compiler optimization problems for reinforcement learning"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/compilerGym-logo.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon-16x16.png" sizes="16x16">
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon-32x32.png" sizes="32x32">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

www/frontends/compiler_gym/src/App.js

@@ -44,7 +44,6 @@ function App() {
           INITIAL_SETTINGS.reward,
           "",
         );
-        console.log(initSession);
         setCompilerGym(options);
         setSession(initSession);
         setIsLoading(false);

www/frontends/compiler_gym/src/assets/scss/main_content.scss

@@ -75,20 +75,6 @@
 
 // **** Custom dropdown ****
 
-.cg-dropdown {
-  background-color: $dark;
-  height: 18vh;
-  overflow: auto;
-  border-radius: 5%;
-  padding: 0 0.4rem;
-  z-index: 4;
-  font-size: 0.75rem;
-  text-align: start;
-  ul {
-    padding-left: 0rem;
-  }
-}
-
 .search-bar {
   position: sticky;
   top: 0%;

www/frontends/compiler_gym/src/assets/scss/searchtree.scss

@@ -4,12 +4,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.searchtree-nav-wrapper {
-    position: sticky;
-    top: 5.4rem;
-    z-index: 1;
-}
-
 .search-tree-container {
   margin-top: 0rem;
   margin-left: 0rem;
@@ -73,6 +67,7 @@
     stroke-width: 0;
     font-size: 0.8rem;
     fill: black;
+    z-index: 1;
   }
   path {
     fill: none;
@@ -87,8 +82,8 @@
 
 .active-node-info {
   position: sticky;
-  border: 1px solid black;
-  border-radius: 5%;
+  border: 2px solid black;
+  border-radius: 5px;
   background-color: $secondary;
   padding: 0.45rem;
   z-index: 100;
@@ -100,3 +95,7 @@
   justify-content: center;
   align-items: center;
 }
+
+.dark-mode-spinner-wrap {
+  background-color: $dark;
+}

www/frontends/compiler_gym/src/components/Navbars/ActionsNavbar.js

@@ -23,33 +23,28 @@ import LargeModal from "../Modals/LargeModal";
 import { getCommandLineArray } from "../../utils/Helpers";
 
 const CustomMenu = forwardRef(
-  ({ children, style, "aria-labelledby": labeledBy }, ref) => {
-    const [value, setValue] = useState("");
-
+  ({children, style, className, "aria-labelledby": labeledBy}, ref) => {
+    const [value, setValue] = React.useState("");
     return (
       <div
         ref={ref}
-        style={style}
-        className="cg-dropdown"
+        style={{ maxHeight: "18vh", overflow: "auto", padding: "0 0.4rem" }}
+        className={className}
         aria-labelledby={labeledBy}
       >
         <div className="search-bar">
           <FormControl
             autoFocus
             className="my-1"
-            size="sm"
-            placeholder="Search..."
+            placeholder="Search"
             onChange={(e) => setValue(e.target.value)}
             value={value}
           />
         </div>
-        <ul>
+        <ul className="px-0">
           {React.Children.toArray(children).filter(
             (child) =>
-              !value ||
-              child.props.children
-                .toLowerCase()
-                .indexOf(value.toLowerCase()) !== -1
+              !value || child.props.children.toLowerCase().indexOf(value) > -1
           )}
         </ul>
       </div>

www/frontends/compiler_gym/src/components/Sections/ControlsContainer.js

@@ -5,9 +5,11 @@
  */
 
 import React, { useState, useContext, useEffect } from "react";
+import classnames from "classnames";
 import { useHistory, useLocation } from "react-router";
 import { Spinner } from "react-bootstrap";
 import ApiContext from "../../context/ApiContext";
+import ThemeContext from "../../context/ThemeContext";
 import { makeSessionTreeData } from "../../utils/Helpers";
 import ActionsNavbar from "../Navbars/ActionsNavbar";
 import SearchTree from "./SearchTree";
@@ -17,6 +19,7 @@ import ActionsDict from "../../utils/ActionsDict";
 const ControlsContainer = () => {
   const { compilerGym, session, params, api, setSession } =
     useContext(ApiContext);
+  const { darkTheme } = useContext(ThemeContext);
   const history = useHistory();
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
@@ -386,11 +389,16 @@ const ControlsContainer = () => {
         handleResetActionsTracker={handleResetActionsTracker}
       />
       {isLoading ? (
-        <div className="spinner-wrap">
+        <div
+          className={classnames("spinner-wrap", {
+            "dark-mode-spinner-wrap": darkTheme,
+          })}
+        >
           <Spinner
             animation="border"
             role="status"
             aria-hidden="true"
+            variant={darkTheme ? "success" : "dark"}
           />
         </div>
       ) : (

www/frontends/compiler_gym/src/components/Sections/RewardHistoryChart.js

@@ -48,6 +48,7 @@ const RewardHistoryChart = ({ session, highlightedPoint, handleClickOnChart }) =
       type: "areaspline",
       height: 18 + "%",
       width: panel.current?.clientWidth,
+      animation: false,
     },
     title: {
       text: "Rewards",

www/frontends/compiler_gym/src/components/Sections/SearchTree.js

@@ -26,7 +26,7 @@ const RenderSvgNode = ({
   handleMouseOutTree,
   layer,
 }) => {
-  const foreignObjectProps = { width: 150, height: 200, x: 20, y: 10 };
+  const foreignObjectProps = { width: 180, height: 150, x: -190, y: -20 };
   const nodeRef = useRef();
   const [seeDescription, setSeeDescription] = useState(false)
 
@@ -67,7 +67,7 @@ const RenderSvgNode = ({
       {seeDescription && (
         <foreignObject {...foreignObjectProps}>
           <div className="active-node-info">
-            <span className="description-tooltip2">
+            <span style={{fontSize:"11px"}}>
              {nodeDatum.description}
             </span>
           </div>

www/frontends/compiler_gym/src/utils/Helpers.js

@@ -154,8 +154,8 @@ export const percIncrease = (a, b) => {
 };
 
 /**
- * This recursive function takes a tree object of parents and returns the translate Y position in canvas as a flat array.
- *
+ * This recursive function takes a tree object of parents and
+ * returns the translate Y position in canvas as a flat array.
  * @param {*} obj the three object of parents
  * @param {*} y_deltas a memoized array with y deltas.
  * @returns