Redux integration and error handling

deepview-explore/react-ui/package.json

@@ -9,12 +9,14 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.17",
+    "@reduxjs/toolkit": "^1.9.5",
     "ajv": "^8.12.0",
     "bootstrap": "^5.1.3",
     "less": "^4.1.2",
     "react": "^17.0.2",
     "react-bootstrap": "^2.1.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^8.0.5",
     "react-scripts": "5.0.0",
     "react-test-renderer": "^17.0.2",
     "react-tooltip": "^4.4.3",

deepview-explore/react-ui/src/App.js

@@ -15,13 +15,12 @@ import DeploymentTab from "./sections/DeploymentTab";
 import WelcomeScreen from "./sections/WelcomeScreen";
 import PerfBarContainer from "./sections/PerfBarContainer";
 
-import ReactTooltip from "react-tooltip";
-
 import { computePercentage, getTraceByLevel } from "./utils/utils";
 import { profiling_data } from "./data/mock_data";
 import EnergyConsumption from "./sections/EnergyConsumption";
 import Iterations from "./sections/Iterations";
 import MemThroughputContainer from "./sections/MemThroughputContainer";
+import Recommendations from "./sections/Recommendations";
 
 // https://stackoverflow.com/questions/54135313/webview-extension-in-typescript
 /**
@@ -53,7 +52,7 @@ function restartProfiling() {
   });
 }
 
-let sendMock = (!process.env.NODE_ENV || process.env.NODE_ENV === 'development');
+let sendMock = !process.env.NODE_ENV || process.env.NODE_ENV === "development";
 
 function App() {
   const [analysisState, setAnalysisState] = useState();
@@ -63,7 +62,6 @@ function App() {
   const [vscodeApi, setVscodeApi] = useState(acquireApi());
   const [errorText, setErrorText] = useState();
   const [connectionStatus, setConnectionStatus] = useState(false);
-  const [numIterations, setNumIterations] = useState(100000);
 
   App.vscodeApi = vscodeApi;
 
@@ -103,12 +101,14 @@ function App() {
         setConnectionStatus(event.data["status"]);
       } else if (event.data["message_type"] === "analysis") {
         if (
-          event.data.habitat.length === 0 ||
-          (event.data.habitat[0][0] === "unavailable" &&
-            event.data.habitat[0][1] === -1.0)
+          event.data.habitat.predictions &&
+          (event.data.habitat.predictions.length === 0 ||
+            (event.data.habitat.predictions[0][0] === "unavailable" &&
+              event.data.habitat.predictions[0][1] === -1.0))
         ) {
-          event.data.habitat = profiling_data.habitat;
-          event.data.habitat.push(["demo", 1]);
+          event.data.habitat.predictions =
+            profiling_data.habitat["predictions"];
+          event.data.habitat.predictions.push(["demo", 1]);
         }
         console.log(event.data);
         processAnalysisState(event.data);
@@ -152,8 +152,8 @@ function App() {
           <Alert.Heading>Analysis Error</Alert.Heading>
           <p>
             An error has occurred during analysis. This could be a problem with
-            Skyline or possibly your code. For more information, refer to the
-            detailed message below:
+            Deepview profiler or possibly your code. For more information, refer
+            to the detailed message below:
           </p>
           <hr />
           <p className="mb-0">
@@ -189,7 +189,8 @@ function App() {
               )}
             </Card.Body>
           </Card>
-          <Iterations setNumIterations={setNumIterations} />
+          <Iterations />
+          {/* <Recommendations analysisState={analysisState} SENDMOCK={sendMock} /> */}
           <br></br>
           <Tabs defaultActiveKey="profiling" className="mb-3">
             <Tab eventKey="profiling" title="Profiling">
@@ -210,24 +211,19 @@ function App() {
                     }
                     renderPerfBars={timeBreakDown.fine}
                   />
-                  <ReactTooltip type="info" effect="float" html={true} />
                 </div>
                 <div className="innpv-contents-subrows">
                   <MemThroughputContainer
                     analysisState={analysisState}
                     SENDMOCK={sendMock}
                   />
                   <Habitat habitatData={analysisState["habitat"]} />
-                  <EnergyConsumption
-                    energyData={analysisState["energy"]}
-                    numIterations={numIterations}
-                  />
+                  <EnergyConsumption energyData={analysisState["energy"]} />
                 </div>
               </div>
             </Tab>
             <Tab eventKey="deploy" title="Deployment">
               <DeploymentTab
-                numIterations={numIterations}
                 habitatData={analysisState["habitat"]}
                 cloudProviderURLs={analysisState["additionalProviders"]}
               />

deepview-explore/react-ui/src/components/ModelLayers/Elastic.js

@@ -1,5 +1,5 @@
 import React,{useState} from 'react';
-
+import ReactTooltip from "react-tooltip";
 const DRAG_MAX_PCT = 0.2;
 const GAIN = 0.8;
 
@@ -129,6 +129,7 @@ const Elastic = ({className='',
         <div className="innpv-elastic-inner" style={innerStyle}>
           {children}
         </div>
+        <ReactTooltip type="info" effect="float" html={true} />
       </div>
     </>
   )

deepview-explore/react-ui/src/data/mock_data.js

@@ -8,8 +8,8 @@ export const profiling_data = {
   throughput: {
     samples_per_second: 179.4022216796875,
     predicted_max_samples_per_second: 253.4250946044922,
-    run_time_ms: [3.9459390531219505,5.8745377327263055],
-    peak_usage_bytes: [85101998.60686015,362023034.03342235],
+    run_time_ms: [3.9459390531219505, 5.8745377327263055],
+    peak_usage_bytes: [85101998.60686015, 362023034.03342235],
     batch_size_context: "entry_point.py,11",
     can_manipulate_batch_size: true,
   },
@@ -872,57 +872,59 @@ export const profiling_data = {
       },
     ],
   },
-  habitat: [
-    ["source", 21.767504],
-    ["P100",13.972405],
-    ["P4000", 56.889559], // 27.268085
-    ["RTX2070", 15.942612],
-    ["RTX2080Ti", 11.753607],
-    ["T4", 21.767504],
-    ["V100", 10.154535],
-    ["A100", 10.081459],
-    ["RTX3090", 9.823705],
-    ["A40", 11.507118],
-    ["A4000", 14.537657],
-    ["RTX4000", 20.04405],
-  ],
+  habitat: {
+    predictions: [
+      ["source", 21.767504],
+      ["P100", 13.972405],
+      ["P4000", 56.889559], // 27.268085
+      ["RTX2070", 15.942612],
+      ["RTX2080Ti", 11.753607],
+      ["T4", 21.767504],
+      ["V100", 10.154535],
+      ["A100", 10.081459],
+      ["RTX3090", 9.823705],
+      ["A40", 11.507118],
+      ["A4000", 14.537657],
+      ["RTX4000", 20.04405],
+    ],
+  },
   energy: {
     current: {
-      total_consumption: 2.30,
-        components: [
-          { type: "ENERGY_UNSPECIFIED", consumption: 0 },
-          { type: "ENERGY_CPU_DRAM", consumption: 1.15 },
-          { type: "ENERGY_GPU", consumption: 1.15 },
-        ],
-      batch_size: 4
+      total_consumption: 2.3,
+      components: [
+        { type: "ENERGY_UNSPECIFIED", consumption: 0 },
+        { type: "ENERGY_CPU_DRAM", consumption: 1.15 },
+        { type: "ENERGY_GPU", consumption: 1.15 },
+      ],
+      batch_size: 4,
     },
     past_measurements: [
       {
-        total_consumption: 8.10,
+        total_consumption: 8.1,
         components: [
           { type: "ENERGY_UNSPECIFIED", consumption: 0 },
           { type: "ENERGY_CPU_DRAM", consumption: 7.05 },
           { type: "ENERGY_GPU", consumption: 1.05 },
         ],
-        batch_size: 1
+        batch_size: 1,
       },
       {
-        total_consumption: 9.30,
+        total_consumption: 9.3,
         components: [
           { type: "ENERGY_UNSPECIFIED", consumption: 0 },
           { type: "ENERGY_CPU_DRAM", consumption: 1.15 },
           { type: "ENERGY_GPU", consumption: 8.15 },
         ],
-        batch_size: 2
+        batch_size: 2,
       },
       {
-        total_consumption: 8.20,
+        total_consumption: 8.2,
         components: [
           { type: "ENERGY_UNSPECIFIED", consumption: 0 },
-          { type: "ENERGY_CPU_DRAM", consumption: 6.10 },
-          { type: "ENERGY_GPU", consumption: 2.10 },
+          { type: "ENERGY_CPU_DRAM", consumption: 6.1 },
+          { type: "ENERGY_GPU", consumption: 2.1 },
         ],
-        batch_size: 3
+        batch_size: 3,
       },
       {
         total_consumption: 3.345,
@@ -931,7 +933,7 @@ export const profiling_data = {
           { type: "ENERGY_CPU_DRAM", consumption: 1.473 },
           { type: "ENERGY_GPU", consumption: 1.873 },
         ],
-        batch_size: 4
+        batch_size: 4,
       },
       {
         total_consumption: 7.345,
@@ -940,7 +942,7 @@ export const profiling_data = {
           { type: "ENERGY_CPU_DRAM", consumption: 4.173 },
           { type: "ENERGY_GPU", consumption: 4.173 },
         ],
-        batch_size: 5
+        batch_size: 5,
       },
       {
         total_consumption: 4.345,
@@ -949,7 +951,7 @@ export const profiling_data = {
           { type: "ENERGY_CPU_DRAM", consumption: 2.173 },
           { type: "ENERGY_GPU", consumption: 2.173 },
         ],
-        batch_size: 6
+        batch_size: 6,
       },
       {
         total_consumption: 5.345,
@@ -958,7 +960,7 @@ export const profiling_data = {
           { type: "ENERGY_CPU_DRAM", consumption: 2.573 },
           { type: "ENERGY_GPU", consumption: 2.53 },
         ],
-        batch_size: 7
+        batch_size: 7,
       },
       {
         total_consumption: 9.345,
@@ -967,7 +969,7 @@ export const profiling_data = {
           { type: "ENERGY_CPU_DRAM", consumption: 8.173 },
           { type: "ENERGY_GPU", consumption: 1.173 },
         ],
-        batch_size: 8
+        batch_size: 8,
       },
       {
         total_consumption: 2.345,
@@ -976,7 +978,7 @@ export const profiling_data = {
           { type: "ENERGY_CPU_DRAM", consumption: 1.173 },
           { type: "ENERGY_GPU", consumption: 1.173 },
         ],
-        batch_size: 9
+        batch_size: 9,
       },
       {
         total_consumption: 4.345,
@@ -985,7 +987,7 @@ export const profiling_data = {
           { type: "ENERGY_CPU_DRAM", consumption: 2.173 },
           { type: "ENERGY_GPU", consumption: 2.173 },
         ],
-        batch_size: 10
+        batch_size: 10,
       },
     ],
   },

deepview-explore/react-ui/src/data/properties.js

@@ -23,9 +23,11 @@ export const deploymentScatterGraphColorSize = {
 
 export let CENTML_CLOUD_PROVIDERS_URL;
 
-if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
+if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
   CENTML_CLOUD_PROVIDERS_URL = "providers.json";
 } else {
-  CENTML_CLOUD_PROVIDERS_URL = "https://deepview-explorer-public.s3.amazonaws.com/vscode-cloud-providers/providers.json";
+  CENTML_CLOUD_PROVIDERS_URL =
+    "https://deepview-explorer-public.s3.amazonaws.com/vscode-cloud-providers/providers.json";
 }
 
+export const GPU_MAX_CAPACITY_LIMIT = 0.65;

deepview-explore/react-ui/src/index.js

@@ -4,6 +4,8 @@ import "./index.css";
 import App from "./App";
 import Bugsnag from "@bugsnag/js";
 import BugsnagPluginReact from "@bugsnag/plugin-react";
+import store from "./redux/store/store";
+import { Provider } from "react-redux";
 
 Bugsnag.start({
   apiKey: "98f9219663e35fb3b4487b709a00290d",
@@ -15,7 +17,9 @@ const ErrorBoundary = Bugsnag.getPlugin("react").createErrorBoundary(React);
 ReactDOM.render(
   <React.StrictMode>
     <ErrorBoundary>
-      <App />
+      <Provider store={store}>
+        <App />
+      </Provider>
     </ErrorBoundary>
   </React.StrictMode>,
   document.getElementById("root")

deepview-explore/react-ui/src/redux/slices/trainingScheduleSlice.js

@@ -0,0 +1,24 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const INITIAL_EPOCHS = 50;
+const INITIAL_ITER_PER_EPOCH = 2000;
+
+
+export const trainingScheduleSlice = createSlice({
+  name: "trainingScheduleSlice",
+  initialState: {
+    epochs: INITIAL_EPOCHS,
+    iterPerEpoch: INITIAL_ITER_PER_EPOCH
+  },
+  reducers: {
+    setIterationsValues: (state, action) => {
+      const {epochs,iterPerEpoch } = action.payload;
+      state.epochs = epochs;
+      state.iterPerEpoch = iterPerEpoch;
+    },
+  },
+});
+
+export const {setIterationsValues} = trainingScheduleSlice.actions;
+
+export default trainingScheduleSlice.reducer;

deepview-explore/react-ui/src/redux/store/store.js

@@ -0,0 +1,8 @@
+import {configureStore} from "@reduxjs/toolkit";
+import trainingScheduleReducer from "../slices/trainingScheduleSlice";
+
+export default configureStore({
+    reducer:{
+        trainingScheduleReducer
+    }
+})

deepview-explore/react-ui/src/sections/DeploymentTab.js

@@ -7,10 +7,16 @@ import Badge from "react-bootstrap/Badge";
 import React from "react";
 import { numberFormat } from "../utils/utils";
 
-const DeploymentTab = ({ numIterations, habitatData,cloudProviderURLs }) => {
+import { useSelector } from "react-redux";
+
+const DeploymentTab = ({ habitatData,cloudProviderURLs }) => {
+
+  const {epochs, iterPerEpoch} = useSelector((state)=>state.trainingScheduleReducer);
+  const numIterations = epochs * iterPerEpoch;
+
   return (
     <>
-      {habitatData.length === 0 ? (
+      {Object.keys(habitatData).length === 0 ? (
         <Container fluid>
           <Row className="justify-content-md-center">
             <Card>
@@ -30,8 +36,7 @@ const DeploymentTab = ({ numIterations, habitatData,cloudProviderURLs }) => {
               iterations
             </h6>
             <ProviderPanel
-              numIterations={numIterations}
-              habitatData={habitatData}
+              habitatData={habitatData["predictions"]}
               cloudProviderURLs={cloudProviderURLs}
             />
           </Row>