Feat/sensor charts (#13)

* initial work on sensor timeseries charts

* refactor session cleanup

* full caveman-mode css revamp to make homepage kinda resemble mockup - done

* finish first version of sensor time series plotting. ugly but working

* update constant for easier testing

* improve performance of chart, get rid of warnings & update sampling rate - game ticks ratio

* further calibration of game constants & some refactors for chart rerendering

* final cleanup done

* fix test

* update workflow name

* update workflow files

---------

Co-authored-by: linomp <lm2p@hotmail.es>

.github/workflows/PR_BE.yml

@@ -1,4 +1,4 @@
-name: MVP Python Tests
+name: MVP Backend
 
 on:
   pull_request:

.github/workflows/PR_FE.yml

@@ -1,12 +1,12 @@
-name: MVP Frontend Build
+name: MVP Frontend
 
 on:
   pull_request:
     branches:
       - main
 
 jobs:
-  build:
+  build_test:
     runs-on: ubuntu-latest
 
     steps:

README.md

@@ -1 +1 @@
-![image](./media/18_02_2024.PNG)
+![image](./media/10_03_2024.PNG)

mvp/client/ui/package.json

@@ -17,7 +17,9 @@
     "not dead"
   ],
   "dependencies": {
+    "lightweight-charts": "^4.1.3",
     "svelte": "^4.2.8",
+    "svelte-lightweight-charts": "^2.2.0",
     "svelte-navigator": "^3.2.2"
   },
   "devDependencies": {
@@ -42,4 +44,4 @@
     "vite-plugin-run": "^0.5.1",
     "vitest": "0.34.1"
   }
-}
+}

mvp/client/ui/src/App.svelte

@@ -3,7 +3,7 @@
   import { Route, Router } from "svelte-navigator";
   import { GameParametersService, OpenAPI } from "./api/generated/";
   import HomePage from "src/pages/HomePage.svelte";
-  import Spinner from "src/components/Spinner.svelte";
+  import Spinner from "src/components/graphical/Spinner.svelte";
   import { globalSettings } from "./stores/stores";
   import { isUndefinedOrNull } from "./shared/utils";
 

mvp/client/ui/src/api/generated/models/GameParametersDTO.ts

@@ -4,10 +4,11 @@
 /* eslint-disable */
 
 export type GameParametersDTO = {
-    initial_cash?: number;
-    revenue_per_day?: number;
-    maintenance_cost?: number;
-    sensor_cost?: number;
-    prediction_model_cost?: number;
-    game_tick_interval?: number;
+    initial_cash: number;
+    revenue_per_day: number;
+    maintenance_cost: number;
+    sensor_cost: number;
+    prediction_model_cost: number;
+    game_tick_interval: number;
+    warning_levels: Record<string, number>;
 };

mvp/client/ui/src/api/generated/models/GameSessionDTO.ts

@@ -8,8 +8,8 @@ import type { MachineStateDTO } from './MachineStateDTO';
 export type GameSessionDTO = {
     id: string;
     current_step: number;
-    machine_state?: (MachineStateDTO | null);
-    available_funds?: number;
-    is_game_over?: boolean;
+    machine_state: MachineStateDTO;
+    available_funds: number;
+    is_game_over: boolean;
     game_over_reason?: (string | null);
 };

mvp/client/ui/src/api/generated/models/OperationalParameters.ts

@@ -4,7 +4,7 @@
 /* eslint-disable */
 
 export type OperationalParameters = {
-    temperature: number;
-    oil_age: number;
-    mechanical_wear: number;
+    temperature: (number | null);
+    oil_age: (number | null);
+    mechanical_wear: (number | null);
 };

mvp/client/ui/src/components/GameOver.svelte

@@ -1,12 +1,20 @@
 <script lang="ts">
-  import { gameOverReason, gameSession } from "src/stores/stores";
+  import type { GameSessionWithTimeSeries } from "src/shared/types";
+  import { gameOver, gameOverReason, gameSession } from "src/stores/stores";
 
-  const gameSessionWithoutStateSnapshots = {
-    ...$gameSession,
-    machineStateSnapshots: undefined,
-  };
+  const formatSessionData = (session: GameSessionWithTimeSeries | null) =>
+    JSON.stringify(
+      {
+        ...session,
+        formattedTimeSeries: undefined,
+      },
+      null,
+      2,
+    );
 </script>
 
-<h3>Game Over</h3>
-<pre>{JSON.stringify(gameSessionWithoutStateSnapshots, null, 2)}</pre>
-<p>{$gameOverReason}</p>
+{#if $gameOver}
+  <h3>Game Over</h3>
+  <pre>{formatSessionData($gameSession)}</pre>
+  <p>{$gameOverReason}</p>
+{/if}

mvp/client/ui/src/components/MachineData.svelte

@@ -15,15 +15,16 @@
 
   $: {
     sensorPurchaseButtonDisabled.set(
-      $dayInProgress ||
-        ($gameSession?.available_funds ?? 0) <
-          ($globalSettings?.sensor_cost ?? Infinity),
+      $gameSession?.is_game_over ||
+        $dayInProgress ||
+        ($gameSession?.available_funds ?? 0) < $globalSettings.sensor_cost,
     );
 
     predictionPurchaseButtonDisabled.set(
-      $dayInProgress ||
+      $gameSession?.is_game_over ||
+        $dayInProgress ||
         ($gameSession?.available_funds ?? 0) <
-          ($globalSettings?.prediction_model_cost ?? Infinity),
+          $globalSettings.prediction_model_cost,
     );
   }
 
@@ -72,17 +73,18 @@
 
 {#if isNotUndefinedNorNull($gameSession)}
   <div class="machine-data">
-    <h3>Operational Parameters</h3>
-    {#each Object.entries($gameSession?.machine_state?.operational_parameters ?? {}) as [parameter, value]}
-      <Sensor
-        sensorCost={$globalSettings?.sensor_cost ?? 0}
-        sensorPurchaseButtonDisabled={$sensorPurchaseButtonDisabled}
-        {parameter}
-        {value}
-        {purchaseSensor}
-      />
-    {/each}
-    <p>
+    <div class="sensors-display">
+      {#each Object.entries($gameSession?.machine_state?.operational_parameters ?? {}) as [parameter, value]}
+        <Sensor
+          sensorCost={$globalSettings.sensor_cost}
+          sensorPurchaseButtonDisabled={$sensorPurchaseButtonDisabled}
+          {parameter}
+          {value}
+          {purchaseSensor}
+        />
+      {/each}
+    </div>
+    <div class="rul-display">
       {"Remaining Useful Life"}: {$gameSession?.machine_state?.predicted_rul
         ? `${$gameSession.machine_state?.predicted_rul} steps`
         : "???"}
@@ -95,9 +97,23 @@
           disabled={$predictionPurchaseButtonDisabled}
           on:click={() => purchaseRulPredictionModel()}
         >
-          Buy (${$globalSettings?.prediction_model_cost})
+          Buy (${$globalSettings.prediction_model_cost})
         </button>
       </span>
-    </p>
+    </div>
   </div>
 {/if}
+
+<style>
+  .machine-data {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .sensors-display {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+</style>