Latest experiments fix

portal/mock-server/src/all-experiments.json

@@ -37,7 +37,7 @@
       {
         "id": 359,
         "algorithm": "p256_kyber512",
-        "iterations": 1000,
+        "iterations": 10000,
         "message_size": 1024
       },
       {

portal/package.json

@@ -117,7 +117,8 @@
       "<rootDir>/src/index.tsx",
       "<rootDir>/src/reportWebVitals.ts",
       "<rootDir>/src/setupProxy.js",
-      "<rootDir>/src/environments/*.*"
+      "<rootDir>/src/environments/*.*",
+      "<rootDir>/src/gh-pages"
     ]
   }
 }

portal/src/app/components/all-experiments/__mocks__/mocks.ts

@@ -0,0 +1,54 @@
+import { Experiment } from "../models/experiments.interface";
+
+export const MOCK_DATA_FOR_ALL_EXPERIMENTS: Experiment[] = [
+  {
+    id: 17,
+    name: "Experiment 3",
+    end_time: 1705389926549,
+    test_runs: [
+      {
+        id: 366,
+        algorithm: "prime256v1",
+        iterations: 500,
+        message_size: 256
+      },
+      {
+        id: 367,
+        algorithm: "bikel3",
+        iterations: 1000,
+        message_size: 2048
+      },
+      {
+        id: 368,
+        algorithm: "p256_kyber512",
+        iterations: 10000,
+        message_size: 1024
+      },
+      {
+        id: 369,
+        algorithm: "prime256v1",
+        iterations: 5000,
+        message_size: 512
+      }
+    ]
+  },
+  {
+    id: 18,
+    name: "Experiment 4",
+    end_time: 1705389926549,
+    test_runs: [
+      {
+        id: 370,
+        algorithm: "kyber512",
+        iterations: 500,
+        message_size: 1024
+      },
+      {
+        id: 371,
+        algorithm: "kyber512",
+        iterations: 1000,
+        message_size: 2048
+      }
+    ]
+  }
+];

portal/src/app/components/dashboard/components/charts/BarChart/BarChart.test.tsx

@@ -52,7 +52,7 @@ const data = [
 ];
 describe('BarChart', () => {
   test('renders BarChart component', () => {
-    const { getByTestId }: RenderResult = render(<BarChart labels={['Algorithm1', 'Algorithm1']} data={data} title={'chart'} keyOfData={'average_cpu'} tooltipKeys={tooltipKeys} tooltipLabels={tooltipLabels} />);
+    const { getByTestId }: RenderResult = render(<BarChart labels={['Algorithm1', 'Algorithm1']} data={data} titleX='chartX' titleY='chartY' keyOfData={'average_cpu'} tooltipKeys={tooltipKeys} tooltipLabels={tooltipLabels} />);
     const chartElement: HTMLElement = getByTestId('chart');
     expect(chartElement).toBeTruthy();
   });

portal/src/app/components/dashboard/components/charts/BarChart/BarChart.tsx

@@ -12,12 +12,13 @@ export interface BarChartProps {
     keyOfData: string;
     tooltipKeys: string[];
     tooltipLabels: string[];   
-    title?: string;
+    titleX?: string;
+    titleY?: string;
     xAxiosTitle?: string;
 }
 
 export const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
-    const { labels, data, tooltipKeys, tooltipLabels, keyOfData, title, xAxiosTitle } = props;
+    const { labels, data, tooltipKeys, tooltipLabels, keyOfData, titleX, titleY, xAxiosTitle } = props;
     const [dataValues, setDataValues] = useState();
     const [datasets, setDatasets] = useState<IDatasets[]>([]);
     const [algorithmsColors, setAlgorithmsColors] = useState<{[key: string]: string}>();
@@ -55,7 +56,18 @@ export const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
             display: true,
             title: {
               display: true,
-              text: title ? title.replace(TITLE_PREFIX, '').trim() : '',
+              text: titleX ? titleX.replace(TITLE_PREFIX, '').trim() : '',
+              padding: { bottom: 30, top: 10 },
+            },
+            ticks: {
+              display: false,
+            },
+          },
+          y: {
+            display: true,
+            title: {
+              display: true,
+              text: titleY ? titleY.replace(TITLE_PREFIX, '').trim() : '',
               padding: { bottom: 30, top: 10 },
             },
             ticks: {

portal/src/app/components/dashboard/components/charts/LineChart/LineChart.const.ts

@@ -1,30 +1,3 @@
-import { ChartOptions } from 'chart.js';
-import { CHARTS_EN } from '../../../../home/components/experiment/components/charts/translate/en';
-
 export const colors: string[] = ['#05BBFF', '#086CE1', '#FF8500', '#36a2eb33'];
 
-export let defaultOptions: ChartOptions<any> = {
-    responsive: true,
-    aspectRatio: 2,
-    scales: {
-      y: {
-        title: {
-          display: true,
-          text: CHARTS_EN.Y_AXIS_TITLE,
-          font: {
-              size: 14,
-          },
-          padding: { bottom: 10 },
-        },
-        beginAtZero: true,
-        ticks: {
-          stepSize: 2,
-          font: {
-            size: 14,
-          },
-        },
-      },
-    },
-};
-
 export const TITLE_PREFIX = 'Server Memory (%) vs.';

portal/src/app/components/dashboard/components/charts/LineChart/LineChart.test.tsx

@@ -24,7 +24,7 @@ const mockData = {
 
 describe('LineChart', () => {
     test('renders LineChart', () => {
-        const { getByTestId }: RenderResult = render(<LineChart data={mockData} title='title' tooltipLabel='average_cpu' />);
+        const { getByTestId }: RenderResult = render(<LineChart data={mockData} titleX='chartX' titleY='chartY' tooltipLabel='average_cpu' />);
         const chartElement: HTMLElement = getByTestId('line2');
         expect(chartElement).toBeTruthy();
     });

portal/src/app/components/dashboard/components/charts/LineChart/LineChart.tsx

@@ -1,28 +1,44 @@
 import { Line } from 'react-chartjs-2';
 import { ChartOptions, Chart, TooltipItem } from 'chart.js';
-import { TITLE_PREFIX, defaultOptions } from './LineChart.const';
+import { TITLE_PREFIX } from './LineChart.const';
 import { useRef } from 'react';
 
 export interface LineChartProps {
     data: any;
     tooltipLabel?: string;
-    title?: string;
+    titleX?: string;
+    titleY?: string;
     xAxiosTitle?: string;
 }
 
 export const LineChart: React.FC<LineChartProps> = (props: LineChartProps) => {
-    const { data, title, tooltipLabel, xAxiosTitle } = props;
+    const { data, titleX, titleY, tooltipLabel, xAxiosTitle } = props;
     const chartRef = useRef<Chart<"line", number[], unknown>>(null);
 
     const options: ChartOptions<any> = {
-        ...defaultOptions,
+      responsive: true,
+      aspectRatio: 2,
       scales: {
-        ...defaultOptions.scales,
         x: {
           display: true,
           title: {
             display: true,
-            text: title ? title.replace(TITLE_PREFIX, '').trim() : '',
+            text: titleX ? titleX.replace(TITLE_PREFIX, '').trim() : '',
+          },
+        },
+        y: {
+          display: true,
+          title: {
+            display: true,
+            text: titleY ? titleY.replace(TITLE_PREFIX, '').trim() : '',
+            padding: { bottom: 10 },
+          },
+          beginAtZero: true,
+          ticks: {
+            stepSize: 2,
+            font: {
+              size: 14,
+            },
           },
         },
       },

portal/src/app/components/home/Home.module.scss

@@ -2,6 +2,9 @@
 @import "src/styles/z-index";
 
 .app_wrapper {
+  display: flex;
+  justify-content: flex-start;
+
   padding-block-start: 20px;
   padding-inline-start: 80px;
   padding-block-end: 40px;
@@ -49,3 +52,17 @@
   background-color: var($attPurple);
   padding: 14px;
 }
+
+.protocolQueryWithDivider {
+  position: relative;
+}
+
+.protocolQueryWithDivider::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 35px;
+  inset-inline-start: 900px;
+  inline-size: 2px;
+  block-size: 91%;
+  background: var($dividerColorGray);
+}

portal/src/app/components/home/Home.tsx

@@ -1,12 +1,14 @@
-import { IUseDashboardData, useDashboardData } from "../../hooks/useDashboardData";
-import { FetchDataStatus } from "../../shared/hooks/useFetch";
-import { ITestParams } from "../../shared/models/quantum.interface";
-import { ProtocolQuery } from "../protocol-query";
-import { SubHeader } from "../sub-header";
-import { useCallback, useEffect, useState } from 'react';
 import styles from './Home.module.scss';
-import { useLocation, useNavigate } from "react-router-dom";
-import { ExperimentData } from "../all-experiments/models/experiments.interface";
+import cn from 'classnames';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { IUseDashboardData, useDashboardData } from '../../hooks/useDashboardData';
+import { FetchDataStatus } from '../../shared/hooks/useFetch';
+import { ITestParams } from '../../shared/models/quantum.interface';
+import { ProtocolQuery } from '../protocol-query';
+import { SubHeader } from '../sub-header';
+import { useCallback, useEffect, useState } from 'react';
+import { ExperimentData } from '../all-experiments/models/experiments.interface';
+import { LatestExperiments } from './components';
 
 export const Home: React.FC = () => {
     const [isSubHeaderOpen, setIsSubHeaderOpen] = useState<boolean>(true);
@@ -48,13 +50,14 @@ export const HomeContent: React.FC = () => {
   }, [handleRunQueryClick]);
 
   return (
-    <div className={styles.app_wrapper}>
+    <div className={cn(styles.app_wrapper, styles.protocolQueryWithDivider)}>
       <ProtocolQuery
         isFetching={status === FetchDataStatus.Fetching}
         onRunClick={handleRunClick}
         duplicateData={duplicateData}
         setDuplicateData={setDuplicateData}
       />
+      <LatestExperiments />
     </div>
   );
 };

portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.test.tsx

@@ -27,7 +27,7 @@ describe('DynamicChart', () => {
         }],
         });
 
-      const { container } = render(<BarChart title='Iterations' labels={[]} data={undefined} keyOfData={''} tooltipKeys={[]} tooltipLabels={[]} />);
+      const { container } = render(<BarChart titleX='Iterations' titleY='Bytes Throughput' labels={[]} data={undefined} keyOfData={''} tooltipKeys={[]} tooltipLabels={[]} />);
       expect(container).toBeTruthy();
     });
 });

portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.tsx

@@ -12,7 +12,7 @@ import { CustomDropdownIndicator } from "./components/custom-dropdown-indicator"
 import { BarChart } from "../../../../../../../dashboard/components/charts/BarChart";
 import { useChartsData } from "../../hooks/useChartsData";
 import { tooltipKeys, tooltipLabels } from "../../models/bar-chart.const";
-import { getTitleByXAxiosValue } from "./utils/dynamic-chart.utils";
+import { getTitleByXAxiosValue, getTitleByYAxiosValue } from "./utils/dynamic-chart.utils";
 import { LineChart } from "../../../../../../../dashboard/components/charts/LineChart";
 import { getChartTitleByType } from "../../utils/chart.utils";
 
@@ -104,8 +104,8 @@ export const DynamicChart: React.FC<DynamicChartProps> = (props: DynamicChartPro
 
             {xAxisValue?.value && chartType?.value && yAxisValue?.value &&
                 <>
-                    {chartType?.value === ChartType.BAR && barChartData && <BarChart title={getTitleByXAxiosValue(xAxisValue.value)} labels={barChartLabels} data={barChartData} tooltipKeys={tooltipKeys} tooltipLabels={tooltipLabels} keyOfData={yAxisValue.value} />}
-                    {chartType?.value === ChartType.LINE && lineChartConvertData && <LineChart data={lineChartConvertData} title={getTitleByXAxiosValue(xAxisValue.value)} tooltipLabel={getChartTitleByType(yAxisValue.value)} />}
+                    {chartType?.value === ChartType.BAR && barChartData && <BarChart titleX={getTitleByXAxiosValue(xAxisValue.value)} titleY={getTitleByYAxiosValue(yAxisValue.value)} labels={barChartLabels} data={barChartData} tooltipKeys={tooltipKeys} tooltipLabels={tooltipLabels} keyOfData={yAxisValue.value} />}
+                    {chartType?.value === ChartType.LINE && lineChartConvertData && <LineChart data={lineChartConvertData} titleX={getTitleByXAxiosValue(xAxisValue.value)} titleY={getTitleByYAxiosValue(yAxisValue.value)} tooltipLabel={getChartTitleByType(yAxisValue.value)} />}
                 </>
             }
         </div>

portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/hooks/useDynamicChartData.test.ts

@@ -7,7 +7,7 @@ describe('useDynamicChartData', () => {
 
     const { result } = renderHook(() => useDynamicChartData(MOCK_DATA_FOR_EXPERIMENT));
     act(() => {
-        expect(result.current).toEqual( {yAxiosOptions: [{label: "Average Cpu", value: "average_cpu"}, {label: "Average Memory", value: "average_memory"}, {label: "Bytes Throughput", value: "bytes_throughput"}, {label: "Request Throughput", value: "request_throughput"}]});
+        expect(result.current).toEqual( {yAxisOptions: [{label: "Average Cpu", value: "average_cpu"}, {label: "Average Memory", value: "average_memory"}, {label: "Bytes Throughput", value: "bytes_throughput"}, {label: "Request Throughput", value: "request_throughput"}]});
     });
   });
 });

portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/models/dynamic-chart.interface.ts

@@ -14,6 +14,13 @@ export enum XAxisType {
    NUMBER_OF_ITERATIONS = 'Number of Iterations',
 }
 
+export enum YAxisType {
+    AVERAGE_CPU = 'Average CPU',
+    AVERAGE_MEMORY = 'Average Memory',
+    BYTES_THROUGHPUT = 'Bytes Throughput',
+    REQUEST_THROUGHPUT = 'Request Throughput',
+}
+
 export const xAxisTypeOptions: AttSelectOption[] = Object.keys(XAxisType).map((key) => ({
     value: key,
     label: XAxisType[key as keyof typeof XAxisType],

portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/translate/en.ts

@@ -12,5 +12,11 @@ export const DYNAMIC_CHART_EN = {
     },
     X_VALUES_TITLE: {
         ITERATIONS: 'Iterations',
+    },
+    Y_VALUES_TITLE: {
+        AVERAGE_CPU: 'Average CPU',
+        AVERAGE_MEMORY: 'Average Memory',
+        BYTES_THROUGHPUT: 'Bytes Throughput',
+        REQUEST_THROUGHPUT: 'Request Throughput',
     }
 };

portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/utils/dynamic-chart.utils.ts

@@ -1,7 +1,7 @@
-import { ChartType } from "../models/dynamic-chart.interface";
+import { ChartType } from '../models/dynamic-chart.interface';
 import LineSvg from '../../../../../../../../../../../src/assets/images/line.svg';
 import BarSvg from '../../../../../../../../../../../src/assets/images/bar.svg';
-import { DYNAMIC_CHART_EN } from "../translate/en";
+import { DYNAMIC_CHART_EN } from '../translate/en';
 
 export function getIconByValue(value: ChartType): string {
     return value === ChartType.LINE ? LineSvg : BarSvg;
@@ -14,3 +14,18 @@ export function capitalizeFirstLetter(str: string): string {
 export function getTitleByXAxiosValue(value: string): string {
     return value === 'NUMBER_OF_ITERATIONS' ? DYNAMIC_CHART_EN.X_VALUES_TITLE.ITERATIONS : '';
 }
+
+export function getTitleByYAxiosValue(value: string): string {
+    switch (value) {
+        case 'average_cpu':
+            return DYNAMIC_CHART_EN.Y_VALUES_TITLE.AVERAGE_CPU;
+        case 'average_memory':
+            return DYNAMIC_CHART_EN.Y_VALUES_TITLE.AVERAGE_MEMORY;
+        case 'bytes_throughput':
+            return DYNAMIC_CHART_EN.Y_VALUES_TITLE.BYTES_THROUGHPUT;
+        case 'request_throughput':
+            return DYNAMIC_CHART_EN.Y_VALUES_TITLE.REQUEST_THROUGHPUT;
+        default:
+            return '';
+    }
+}

portal/src/app/components/home/components/experiment/components/experiment-table/translate/en.ts

@@ -3,10 +3,10 @@ export const EXPERIMENT_TABLE_EN = {
     HASHTAG: '#',
     ALGORITHM: 'Algorithm',
     ITERATIONS: 'Iterations',
-    MESSAGE_SIZE: 'Message Size (KB)',
-    AVERAGE_CPU: 'Average CPU',
-    AVERAGE_MEMORY: 'Average Memory',
-    THROUGHPUT_BYTES: 'Throughput (bytes/sec)',
-    THROUGHPUT_REQUEST: 'Throughput (message/sec)',
+    MESSAGE_SIZE: 'Message Size (Bytes)',
+    AVERAGE_CPU: 'Average CPU (Cores %)',
+    AVERAGE_MEMORY: 'Average Memory (MB)',
+    THROUGHPUT_BYTES: 'Throughput (Bytes/sec)',
+    THROUGHPUT_REQUEST: 'Throughput (Messages/sec)',
   },
 }

portal/src/app/components/home/components/index.ts

@@ -1 +1,2 @@
 export * from './experiment';
+export * from './latest-experiments';