Implement generation queue and add DTLZ2 script (#16)

GoelBiju · Feb 27, 2021 · 3e08638 · 3e08638
1 parent c85e81b
commit 3e08638
Show file tree

Hide file tree

Showing 12 changed files with 146 additions and 65 deletions.
diff --git a/documents/minutes/Project Meeting - 4.docx b/documents/minutes/Project Meeting - 4.docx
diff --git a/documents/minutes/~$oject Meeting - 4.docx b/documents/minutes/~$oject Meeting - 4.docx
diff --git a/packages/frontend-common/src/state/actions/action.types.tsx b/packages/frontend-common/src/state/actions/action.types.tsx
@@ -16,12 +16,12 @@ export const FetchRunsType = `${microFrontendMessageId}:fetch_runs`;
 export const FetchRunsResultType = `${microFrontendMessageId}:fetch_runs_result`;
 export const FetchRunResultType = `${microFrontendMessageId}:fetch_run_result`;
 export const VisualisationNameType = `${microFrontendMessageId}:set_visualisation_name`;
+export const DataRequestType = `${microFrontendMessageId}:data_request`;
 export const DataType = `${microFrontendMessageId}:set_data`;
 
 // Socket related actions
 export const InitiateSocketSuccessType = `${microFrontendMessageId}:initiate_socket_success`;
 export const DisconnectSocketSuccessType = `${microFrontendMessageId}:disconnect_socket_success`;
-// export const RunGenerationSuccessType = `${microFrontendMessageId}:run_generation_success`;
 export const SubscribedType = `${microFrontendMessageId}:set_subscribed`;
 
 export interface RegisterRoutePayload {

diff --git a/packages/frontend-common/src/state/actions/socket.actions.tsx b/packages/frontend-common/src/state/actions/socket.actions.tsx
@@ -2,6 +2,7 @@ import { Action } from "redux";
 import ioclient from "socket.io-client";
 import { ActionType, ThunkResult } from "../state.types";
 import {
+  DataRequestType,
   DisconnectSocketSuccessType,
   InitiateSocketSuccessType,
 
@@ -24,15 +25,6 @@ export const disconnectSocketSuccess = (): Action => ({
   type: DisconnectSocketSuccessType,
 });
 
-// export const runGenerationSuccess = (
-//   generation: number
-// ): ActionType<RunGenerationPayload> => ({
-//   type: RunGenerationSuccessType,
-//   payload: {
-//     generation,
-//   },
-// });
-
 export const setSubscribed = (
   subscribed: boolean
 ): ActionType<SubscribedPayload> => ({
@@ -90,6 +82,10 @@ export const subscribeToGenerations = (
   };
 };
 
+export const dataRequest = (): Action => ({
+  type: DataRequestType,
+});
+
 // Retrieve the data from a run given the ID and generation number
 export const fetchData = (
   dataId: string,
@@ -98,8 +94,10 @@ export const fetchData = (
   return async (dispatch, getState) => {
     const { socket } = getState().frontend.configuration;
 
-    // socketConnected
     if (socket && socket.connected) {
+      // Dispatch the fetch data request
+      dispatch(dataRequest());
+
       // Emit the socket event
       socket.emit("data", {
         dataId,

diff --git a/packages/frontend-common/src/state/reducers/common.reducer.tsx b/packages/frontend-common/src/state/reducers/common.reducer.tsx
@@ -1,6 +1,7 @@
 import * as log from "loglevel";
 import {
   DataPayload,
+  DataRequestType,
   DataType,
   DisconnectSocketSuccessType,
   FetchRunResultType,
@@ -33,14 +34,13 @@ export const initialState: FrontendState = {
     },
     settingsLoaded: false,
     socket: null,
-    // socketConnected: false,
     subscribed: false,
   },
   runs: [],
   selectedRun: null,
   selectedVisualisation: "",
   data: null,
-  // currentGeneration: 0,
+  fetchingData: false,
 };
 
 const updatePlugins = (
@@ -143,7 +143,6 @@ export function handleInitiateSocket(
     configuration: {
       ...state.configuration,
       socket: payload.socket,
-      // socketConnected: true,
     },
   };
 }
@@ -154,21 +153,10 @@ export function handleDisconnectSocket(state: FrontendState): FrontendState {
     configuration: {
       ...state.configuration,
       socket: null,
-      // socketConnected: false,
     },
   };
 }
 
-// export function handleRunGeneration(
-//   state: FrontendState,
-//   payload: RunGenerationPayload
-// ): FrontendState {
-//   return {
-//     ...state,
-//     currentGeneration: payload.generation,
-//   };
-// }
-
 export function handleSubscribed(
   state: FrontendState,
   payload: SubscribedPayload
@@ -182,13 +170,21 @@ export function handleSubscribed(
   };
 }
 
+export function handleDataRequest(state: FrontendState): FrontendState {
+  return {
+    ...state,
+    fetchingData: true,
+  };
+}
+
 export function handleData(
   state: FrontendState,
   payload: DataPayload
 ): FrontendState {
   return {
     ...state,
     data: payload.data,
+    fetchingData: false,
   };
 }
 
@@ -201,9 +197,9 @@ const CommonReducer = createReducer(initialState, {
   [FetchRunResultType]: handleFetchRun,
   [InitiateSocketSuccessType]: handleInitiateSocket,
   [DisconnectSocketSuccessType]: handleDisconnectSocket,
-  // [RunGenerationSuccessType]: handleRunGeneration,
   [VisualisationNameType]: handleVisualisationName,
   [SubscribedType]: handleSubscribed,
+  [DataRequestType]: handleDataRequest,
   [DataType]: handleData,
 });
 

diff --git a/packages/frontend-common/src/state/state.types.tsx b/packages/frontend-common/src/state/state.types.tsx
@@ -38,16 +38,13 @@ export interface FrontendState {
     urls: SettingsUrls;
     settingsLoaded: boolean;
     socket: SocketIOClient.Socket | null;
-    // TODO: Add subscribed to state?
-    // TODO: Remove socketConnected
-    // socketConnected: boolean;
     subscribed: boolean;
   };
   runs: Run[];
   selectedRun: Run | null;
   selectedVisualisation: string;
   data: Data;
-  // currentGeneration: number;
+  fetchingData: boolean;
 }
 
 export interface StateType {

diff --git a/packages/frontend-plugin/src/visualisation.component.tsx b/packages/frontend-plugin/src/visualisation.component.tsx
@@ -24,13 +24,14 @@ const VisualisationComponent = (props: VCProps): React.ReactElement => {
   const chartRef: React.RefObject<SVGSVGElement> = React.createRef<SVGSVGElement>();
 
   const margin = {
-    top: 10,
+    top: 50,
     right: 30,
     bottom: 30,
     left: 60,
   };
+
   const width = 760 - margin.left - margin.right;
-  const height = 800 - margin.top - margin.bottom;
+  const height = 450 - margin.top - margin.bottom;
 
   const xScale: d3.ScaleLinear<number, number> = d3
     .scaleLinear()
@@ -178,7 +179,7 @@ const VisualisationComponent = (props: VCProps): React.ReactElement => {
         .attr("cx", (d) => xScale(d[0]) as number)
         .attr("cy", (d) => yScale(d[1]) as number)
         .attr("r", 3)
-        .style("fill", "#69b3a2");
+        .style("fill", "blue");
     },
     [currentChart, xScale, yScale]
   );

diff --git a/packages/frontend/src/components/mainAppBar.component.tsx b/packages/frontend/src/components/mainAppBar.component.tsx
@@ -1,7 +1,6 @@
 import { AppBar, CssBaseline, Link, Toolbar, Typography } from '@material-ui/core';
 import { createStyles, makeStyles } from '@material-ui/core/styles';
 import React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
 
 const useStyles = makeStyles(() =>
     createStyles({
@@ -20,7 +19,7 @@ const MainAppBar = (): React.ReactElement => {
             <AppBar position="fixed">
                 <Toolbar>
                     <Typography variant="h6" noWrap>
-                        <Link component={RouterLink} to="/" color="inherit" underline="none">
+                        <Link href="/" color="inherit" underline="none">
                             Visualising Optimisation Data
                         </Link>
                     </Typography>