Feature/pareto front #16

backend/src/sockets/namespaces.js

@@ -28,24 +28,33 @@ function setupNamespaces(io) {
       const { dataId, generation } = dataRequest;
 
       // Get the data based on the run ID
-      const data = await Data.findById(dataId).lean();
-      if (data) {
-        const optimiserData = data.data;
-        if (optimiserData[generation]) {
-          // Send the generation data to the client
-          // console.log("Got data: ", optimiserData[generation]);
-          socket.emit("data", {
-            generation,
-            data: optimiserData[generation].values,
-            time: optimiserData[generation].time,
-          });
+      console.log("Finding run with dataId: ", dataId);
+      const run = await Run.findOne({ dataId }).lean();
+      console.log("Run: ", run);
+      if (run) {
+        console.log("Run found: ", run);
+        const data = await Data.findById(dataId).lean();
+        if (data) {
+          const optimiserData = data.data;
+          if (optimiserData[generation]) {
+            // Send the generation data to the client
+            // console.log("Got data: ", optimiserData[generation]);
+            socket.emit("data", {
+              generation,
+              data: optimiserData[generation].values,
+              time: optimiserData[generation].time,
+              completed: run.completed,
+            });
+          } else {
+            console.log("Generation not present: ", generation);
+          }
         } else {
-          console.log("Generation not present: ", generation);
+          console.log(
+            `Unable to find data for ${dataId} for generation ${generation}`
+          );
         }
       } else {
-        console.log(
-          `Unable to find data for ${dataId} for generation ${generation}`
-        );
+        console.log(`Unable to find run with data ID: `, dataId);
       }
     });
   });

package.json

@@ -12,10 +12,9 @@
     "tsc": "lerna run tsc",
     "backend": "yarn workspace backend dev",
     "frontend": "yarn workspace frontend start",
-    "frontend-plugin": "yarn workspace frontend-plugin serve:build",
+    "plugins": "yarn workspace frontend-plugin serve:build",
     "lint:frontend": "yarn workspace frontend lint",
-    "test:frontend": "yarn workspace frontend test",
-    "stack": "yarn backend | yarn frontend | yarn frontend-plugin"
+    "test:frontend": "yarn workspace frontend test"
   },
   "repository": {
     "type": "git",

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 {

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,

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,
 });
 

packages/frontend-common/src/state/state.types.tsx

@@ -25,11 +25,12 @@ export interface Run {
   updatedAt: string;
 }
 
-export interface Data {
+export type Data = {
   generation: number;
   data: number[][];
   time: Date;
-}
+  completed: boolean;
+} | null;
 
 export interface FrontendState {
   notifications: string[];
@@ -38,16 +39,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 | null;
-  // currentGeneration: number;
+  data: Data;
+  fetchingData: boolean;
 }
 
 export interface StateType {

packages/frontend-plugin/src/App.tsx

@@ -10,7 +10,7 @@ import { AnyAction, Store } from "redux";
 import { createLogger } from "redux-logger";
 import thunk from "redux-thunk";
 import "./App.css";
-import ExampleComponent from "./example.component";
+import VisualisationComponent from "./visualisation.component";
 
 const history = createBrowserHistory();
 const middleware = [thunk, routerMiddleware(history)];
@@ -83,21 +83,7 @@ class App extends React.Component<unknown, AppState> {
     } else {
       return (
         <Provider store={this.state.store}>
-          {/* <ConnectedRouter history={history}>
-            <Switch>
-              <Route
-                exact
-                path={`/runs/:runId/visualisations/:visualisationName/data`}
-                render={({
-                  match,
-                }: RouteComponentProps<{
-                  runId: string;
-                  visualisationName: string;
-                }>) => <ExampleComponent />}
-              />
-            </Switch>
-          </ConnectedRouter> */}
-          <ExampleComponent />
+          <VisualisationComponent />
         </Provider>
       );
     }