Model layers height

skyline-vscode/react-ui/src/components/BarGraph.js

@@ -0,0 +1,49 @@
+import React from "react";
+import {
+  ResponsiveContainer,
+  BarChart,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Bar,
+  Label,
+} from "recharts";
+
+export const HorizontalBarGraph = ({ data, height, xlabel, ylabel, color }) => {
+  let upperLimit = 0;
+  data.forEach((element) => {
+    const predictedTime = parseFloat(Number(element.x));
+    upperLimit = predictedTime > upperLimit ? predictedTime : upperLimit;
+  });
+  upperLimit *= 1.1;
+  data.sort((a, b) => a.x - b.x);
+  return (
+    <ResponsiveContainer width="80%" height={height}>
+      <BarChart
+        layout="vertical"
+        data={data}
+        margin={{ top: 10, right: 30, left: 50, bottom: 50 }}
+        barCategoryGap={10}
+      >
+        <XAxis
+          type="number"
+          domain={[0, Math.floor(upperLimit)]}
+          label={{ value: xlabel, position: "insideBottom", offset: -15 }}
+        />
+        <YAxis
+          width={70}
+          type="category"
+          dataKey="y"
+          label={{
+            value: ylabel,
+            angle: -90,
+            position: "insideLeft",
+            offset: -35,
+          }}
+        />
+        <Tooltip />
+        <Bar dataKey="x" fill={color} />
+      </BarChart>
+    </ResponsiveContainer>
+  );
+};

skyline-vscode/react-ui/src/components/ScatterGraph.js

@@ -9,33 +9,43 @@ import {
   ResponsiveContainer,
   Label,
   Legend,
+  Tooltip,
+  LabelList,
 } from "recharts";
-import { calculate_training_time,currencyFormat } from "../utils/utils";
+import { calculate_training_time, currencyFormat } from "../utils/utils";
+import { gpuPropertyList } from "../data/providers";
 
-const ScatterGraph = ({ data, onClickHandler, xlabel, ylabel, providers,numIterations }) => {
+export const ProviderScatterGraph = ({
+  data,
+  onClickHandler,
+  xlabel,
+  ylabel,
+  providers,
+  numIterations,
+}) => {
   const finalData = [];
-  if (data.length>0){
-    data.forEach((item)=>{
+  if (data.length > 0) {
+    data.forEach((item) => {
       const time = calculate_training_time(numIterations, item);
       const cost = item.info.cost * time;
       finalData.push({
         ...item,
         x: time,
-        y: cost
-      })
-    })
+        y: cost,
+      });
+    });
   }
-  
+
   const formatYAxis = (value) => {
     return currencyFormat(value);
   };
 
   const fortmatXAxis = (value) => {
     const formatter = new Intl.NumberFormat("en-US", {
       notation: "compact",
-    })
+    });
     return formatter.format(value);
-  }
+  };
 
   return (
     <>
@@ -94,4 +104,147 @@ const ScatterGraph = ({ data, onClickHandler, xlabel, ylabel, providers,numItera
   );
 };
 
-export default ScatterGraph;
+export const HabitatScatterGraph = ({ habitatData, height }) => {
+  const renderTooltip = (props) => {
+    const { active, payload } = props;
+
+    if (active && payload && payload.length) {
+      const data = payload[0] && payload[0].payload;
+
+      return (
+        <div
+          style={{
+            backgroundColor: "#fff",
+            border: "1px solid #999",
+            margin: 0,
+            padding: 5,
+          }}
+        >
+          <p style={{ margin: 0 }}>{data.card}</p>
+          <p style={{ margin: 0 }}>
+            <span>time: </span>
+            {data.time}
+          </p>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  const renderCustomizedLabel = (props) => {
+    const { x, y, width, height, value } = props;
+    console.log(x, y, width, height, value);
+    const y_offset = 5;
+    return (
+      <text x={x + width / 2} y={y - y_offset} fill="#1c2833"
+      fontSize={12}
+      fontWeight={650}
+      fontFamily="sans-serif">
+        {value}
+      </text>
+    );
+  };
+
+  const NUMBER_OF_COLUMNS = 5;
+  const habitatConsumerCards = [];
+  const habitatServerCards = [];
+  const sourceInHabitat = [];
+
+  habitatData.sort((a, b) => a[1] - b[1]);
+
+  habitatData.forEach((habitatItem,idx) => {
+    const findGPUProperty = gpuPropertyList.find(
+      (item) => item.name.toLowerCase() === habitatItem[0].toLowerCase()
+    );
+    if (findGPUProperty) {
+      if (findGPUProperty.type === "server") {
+        habitatServerCards.push({
+          time: parseFloat(Number(habitatItem[1]).toFixed(2)),
+          card: habitatItem[0],
+          index: idx%NUMBER_OF_COLUMNS +0.5,
+          size: 100,
+        });
+      } else {
+        habitatConsumerCards.push({
+          time: parseFloat(Number(habitatItem[1]).toFixed(2)),
+          card: habitatItem[0],
+          index: idx%NUMBER_OF_COLUMNS+0.5,
+          size: 100,
+        });
+      }
+    } else {
+      sourceInHabitat.push({
+        time: parseFloat(Number(habitatItem[1]).toFixed(2)),
+        card: "Local GPU",
+        index: idx%NUMBER_OF_COLUMNS+0.5,
+        size: 100,
+      });
+    }
+  });
+  console.log(sourceInHabitat)
+
+  const UPPER_LIMIT =
+    1.2 * habitatData.reduce((a, b) => Math.max(a, b[1]), -Infinity);
+
+  return (
+    <>
+      <ResponsiveContainer width="100%" height={height}>
+        <ScatterChart margin={{ top: 60, right: 30, left: 50, bottom: 30 }}>
+          <XAxis
+            type="number"
+            dataKey="time"
+            interval="preserveStartEnd"
+            domain={[0, parseFloat(Number(UPPER_LIMIT).toFixed(2))]}
+            tickLine={{ transform: "translate(0, -6)" }}
+            label={{
+              value: "Predicted Runtime (ms)",
+              position: "insideBottom",
+              offset: -15,
+            }}
+          />
+
+          <YAxis
+            type="number"
+            dataKey="index"
+            name="Server Grade"
+            domain={[0,NUMBER_OF_COLUMNS+1]}
+            width={80}
+            tick={false}
+            tickLine={false}
+            axisLine={false}
+            label={{ value: "GPU cards", position: "insideTopRight" }}
+          />
+          <ZAxis type="number" dataKey="size" range={[0, 250]} />
+          <Tooltip
+            cursor={{ strokeDasharray: "3 3" }}
+            wrapperStyle={{ zIndex: 100 }}
+            content={renderTooltip}
+          />
+          <Scatter
+            name="workstation card"
+            data={habitatConsumerCards}
+            fill="rgb(255, 99, 132)"
+          >
+            <LabelList dataKey="card" content={renderCustomizedLabel} />
+          </Scatter>
+          <Scatter
+            name="server card"
+            data={habitatServerCards}
+            fill="rgb(53, 162, 235)"
+          >
+            <LabelList dataKey="card" content={renderCustomizedLabel} />
+          </Scatter>
+          <Scatter
+            name="local card"
+            data={sourceInHabitat}
+            fill="rgb( 155, 89, 182)"
+          >
+            <LabelList dataKey="card" content={renderCustomizedLabel} />
+          </Scatter>
+          <Legend verticalAlign="top" align="left" height={60} />
+        </ScatterChart>
+      </ResponsiveContainer>
+    </>
+  );
+};

skyline-vscode/react-ui/src/data/mock_data.js

@@ -873,18 +873,18 @@ export const profiling_data = {
     ],
   },
   habitat: [
-    ["source", 22.029312],
-    ["P100",14.069682],
-    ["P4000", 127.268085], // 27.268085
-    ["RTX2070", 16.088268],
-    ["RTX2080Ti", 11.826558],
-    ["T4", 22.029312],
-    ["V100", 10.182922],
-    ["A100", 10.068596],
-    ["RTX3090", 9.841998],
-    ["A40", 11.558072],
-    ["A4000", 14.67059],
-    ["RTX4000", 20.2342],
+    ["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: {

skyline-vscode/react-ui/src/data/providers.js

@@ -269,15 +269,15 @@ export const cloudProviders = {
 }
 
 export const gpuPropertyList = [
-  { name: "p100", vmem: 16 },
-  { name: "p4000", vmem: 8 },
-  { name: "rtx2070", vmem: 8 },
-  { name: "rtx2080ti", vmem: 11 },
-  { name: "t4", vmem: 16 },
-  { name: "v100", vmem: 16 },
-  { name: "a100", vmem: 40 },
-  { name: "rtx3090", vmem: 24},
-  { name: "a40", vmem: 48},
-  { name: "a4000", vmem: 16},
-  { name: "rtx4000", vmem: 8}
+  { name: "p100", vmem: 16, type: "server" },
+  { name: "p4000", vmem: 8, type: "server" },
+  { name: "rtx2070", vmem: 8, type: "consumer" },
+  { name: "rtx2080ti", vmem: 11, type: "consumer" },
+  { name: "t4", vmem: 16, type: "server" },
+  { name: "v100", vmem: 16, type: "server" },
+  { name: "a100", vmem: 40, type: "server" },
+  { name: "rtx3090", vmem: 24, type: "consumer" },
+  { name: "a40", vmem: 48, type: "server" },
+  { name: "a4000", vmem: 16, type: "server" },
+  { name: "rtx4000", vmem: 8, type: "consumer" }
 ];